/*RESET*/
:root {
    --especialFont: 'Roboto', sans-serif;
    --regularText: #222222;
    --grayText: #565656;
    --grayBox: #f8f8f8;
    --accentColor: #00db35;
    --linkColor: #747474;
    --boxShadow: 0px 0px 3px rgba(132, 132, 132, 0.8);
    --boxRadius: 10px;
    --boxBorder: 1px solid #dedede;
}
* {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;	
    //-webkit-text-stroke-width: .05px;
	//-webkit-text-stroke-color: white;
	-webkit-font-smoothing:antialiased;
	text-rendering: optimizeLegibility;
}
html, body, header, main, footer, section, article, iframe, div, p, form, input, ul, li, h1, h2, h3, table, th, td {
	margin: 0px;
	padding: 0px;
}
body {
    font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #000;
    background: #f6f6f6;
}
li {
	list-style: none;
}
a {
    outline: none;
    text-decoration: none;
}
.mostrar{
    display: block;
}
.ocultar{
    display: none;
}
/*RESET*/
/*TEMPLATE*/
header {
	width: 100%;
	height: 60px;
	position: fixed;
	background-color: #fff;
	box-shadow: 0px 0px 10px #888888;
	z-index: 1000;
}
header .content {
    width: 100%;
	position: relative;
}
header a {
	transition: background-color 1s ease;
}
#logo {
	position: absolute;
	left: calc(50% - 75px);
}
#logo a {
	float: left;
}
#logo.quiziz a {
	width: 120px;
	height: 60px;
	background: url(../img/logo_quiziz.svg) no-repeat center center;
	background-size: contain;
}
main .content {
    max-width: 950px;
    margin: auto;
    padding: 20px;
}
@media screen and (max-width: 650px) {
    main .content {
        padding: 35px 20px;
    }
}
section {
    font-family: 'Roboto', sans-serif;   
    text-align: center;    
}
section .main {
    max-width: 1100px;
    padding: 50px 10% 100px 10%;
    margin: auto;
}
section.border {
    border-top: 1px solid #ededed;
}
section.gray {
    background: #f6f6f6;
}
section.white {
    background: #fff;
}
section h2 {
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: normal;    
}
section p {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
}
section p a {
    color: #000;
    font-weight: 500;
    text-decoration: underline;
}
article .main {
    max-width: 950px;
    padding: 80px 20px 30px 20px;
    margin: auto;
    text-align: center;
}
article h1 {
    margin: 30px 0 20px 0;
    font-size: 26px;
    font-weight: bolder;
    letter-spacing: -0.5px;
    line-height: 36px;
}
article h2 {
    font-size: 20px;
    font-weight: bolder;
    color: gray;
    margin-bottom: 20px;
}
article p {
    font-size: 18px;
    line-height: 26px;
    font-weight: normal;
    margin-bottom: 20px;
}
article p.especial {
    font-size: 24px;
    font-weight: normal;
    text-align: center;
}
article p a {
    color: #6fbe44;
    font-weight: bolder;
    text-decoration: underline;
}
article p strong {
    font-weight: bolder !important;
}
footer {
    padding: 20px 30px 35px 30px;
    text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
}
footer p {
    margin-bottom: 20px;
    color: #898989;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
}
footer p a {
    color: #555;    
    text-decoration: underline;
}
footer nav {
    margin-bottom: 20px;
    text-align: center;
}
footer nav li {
    display: inline-block;
}
@media screen and (max-width: 450px) {
    footer nav li {
        display: block;
        border-bottom: 1px solid #d8d5d5;
    }
}
footer nav li a {
    margin: 0px 15px;
    display: block;
    color: #333;
    font-weight: 600;
    line-height: 40px;
}
#social li {
    display: inline-block;
}
#social li a {
    width: 30px;
    height: 30px;
    display: block;
    margin: 5px;
}
#social li a.facebook {
    background-image: url(../img/icon_facebook.svg);
    background-size: 30px;
}
#social li a.twitter {
    background-image: url(../img/icon_twitter.svg);
    background-size: 30px;    
}
#social li a.instagram {
    background-image: url(../img/icon_instagram.svg);
    background-size: 30px;    
}
.download {
    margin-bottom: 20px;
}
.download li {
    margin: 5px;
    display: inline-block;
}
#features {
    margin-bottom: 30px;
    text-align: center;
}
#features li {
    width: 265px;
    display: inline-block;
    vertical-align: top;    
    margin: 10px;
    padding: 25px;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    position: relative;
}
#features li .flag {
    position: absolute;
    right: 10px;
    top: 10px;
}
#features li a {
    color: #000;
    font-weight: 700;
    text-decoration: underline;
}
#features li strong {
    margin: 20px 0;
    display: block;
    color: #272727;
    font-size: 17px;
}
#features li strong em {
    display: block;
    font-size: 36px;
    color: #4898c3;
    font-style: normal;
    font-weight: bolder;
}
#features li span {
    display: block;
    color: #434343;
    font-size: 15px;
    font-weight: 300;
    margin-bottom: 10px;
}
#features li span.slogan {
    font-weight: 700;
    font-style: italic;
}
.button a {
    display: inline-block;
    padding: 15px;
    background-color: var(--accentColor);
    color: white !important;
    font-weight: bolder;
    font-size: 16px;
    border-radius: var(--boxRadius);
    text-transform: uppercase;
    box-shadow: var(--boxShadow);
    cursor: pointer;
    text-decoration: none !important;
}