@font-face {
  font-family: "Flaticon";
  src: url("../fonts/Flaticon.eot");
  src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"),
       url("../fonts/Flaticon.woff") format("woff"),
       url("../fonts/Flaticon.ttf") format("truetype"),
       url("../fonts/Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("../fonts/Flaticon.svg#Flaticon") format("svg");
  }
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
  font-family: Flaticon;
        font-size: 20px;
font-style: normal;
margin-left: 20px;
}

.flaticon-download-button:before { content: "\f100"; }


@font-face {
    font-family: 'ccdashtoschool';
    src: url('../fonts/ccdashtoschool-heavy-webfont.woff2') format('woff2'),
         url('../fonts/ccdashtoschool-heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'smile_proregular';
    src: url('../fonts/smilepro-regular-webfont.woff2') format('woff2'),
         url('../fonts/smilepro-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ardilla_smallregular';
    src: url('../fonts/ardillasmall-regular-webfont.woff2') format('woff2'),
         url('../fonts/ardillasmall-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* ---------------------------------------------------------------------- */
/*  Reset & Clearfix (normalize.css v3.0.2)
/* ---------------------------------------------------------------------- */

html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}body {margin: 0;}article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;}audio, canvas, progress, video {display: inline-block; vertical-align: baseline;}audio:not([controls]) {display: none; height: 0;}[hidden], template {display: none;}a {background-color: transparent;}a:active, a:hover {outline: 0;}abbr[title] {border-bottom: 1px dotted;}b, strong {font-weight: 700;}dfn {font-style: italic;}h1 {margin: .67em 0; font-size: 2em;}mark {background: #ff0; color: #323137;}small {font-size: 80%;}sub, sup {font-size: 75%; line-height: 0; vertical-align: baseline; position: relative;}sup {top: -.5em;}sub {bottom: -.25em;}img {border: 0;}svg:not(:root) {overflow: hidden;}figure {margin: 1em 40px;}hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;}pre {overflow: auto;}code, kbd, pre, samp {font-family: monospace,monospace; font-size: 1em;}button, input, optgroup, select, textarea {margin: 0; font: inherit; color: inherit;}button {overflow: visible;}button, select {text-transform: none;}button, html input[type=button], input[type=reset], input[type=submit] {cursor: pointer; -webkit-appearance: button;}button[disabled], html input[disabled] {cursor: default;}button::-moz-focus-inner, input::-moz-focus-inner {padding: 0; border: 0;}input {line-height: normal;}input[type=checkbox], input[type=radio] {box-sizing: border-box; padding: 0;}input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {height: auto;}input[type=search] {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield;}input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {-webkit-appearance: none;}fieldset {margin: 0 2px; padding: .35em .625em .75em; border: 1px solid silver;}legend {padding: 0; border: 0;}textarea {overflow: auto;}optgroup {font-weight: 700;}table {border-spacing: 0; border-collapse: collapse;}td, th {padding: 0;}

*, *:before, *:after {box-sizing: border-box;}

.clearfix:after {display: table; content: ''; clear: both;}

/* ---------------------------------------------------------------------- */
/*  Basic Elements & Classes
/* ---------------------------------------------------------------------- */

html {height: 100%;}
body {width: 100%; height: 100%; background: #fff; font: 16px/1.7 'ardilla_smallregular', sans-serif; font-weight: 300; color: #292828; overflow-x: hidden; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%;}

::-moz-selection {background: rgba(57, 95, 132, 1); color: #fff; text-shadow: none;}
::selection {background: rgba(57, 95, 132, 1); color: #fff; text-shadow: none;}

a {color: #323137; text-decoration: none; transition: all .2s ease-out 0s;}

a:hover{text-decoration: underline;}
h1, h1 a {font-size: 60px;  letter-spacing: 1px; font-weight: normal; font-family: 'smile_proregular'; line-height: 80%; color: #2196d3;}
h1 span{font-size: 23px; display: block;}
h2, h2 a {font-size: 40px;  letter-spacing: 1px; font-weight: normal; font-family: 'smile_proregular'; line-height: 80%; color: #2196d3;}
h3, h3 a {margin: 0; font-size: 20px; font-weight: 300; line-height: 110%; text-transform: uppercase;}
h4, h4 a {margin: 10px 0; font-size: 16px; font-weight: 300;}

.center {text-align: center;}

.main {width: 100%; height: 75vh; background: url('../images/wallpaper_800x600_1023.jpg'); background-size: 225px 112px; text-align: center}
footer {text-align: center; padding: 20px; font-size: 14px;}

.content {height: 100%;}
.main .topimage {height: 50%; background: url('../images/top.jpg') no-repeat 57% center; background-size: contain;}

.logo img{width: 200px;}

.main .text {width: 70%; color: #fff; line-height: 130%; font-size: 16px; margin: 20px auto; letter-spacing: 1px; max-width: 800px;}

.small {font-size: 14px;}

.nodesktop{display: none;}

.wrapper {width: 1100px; margin: 0px auto; position: relative;}
header{padding: 20px 0px}

nav {position: absolute; right: 0px; top:10px;}
nav ul {margin: 0px; padding: 0px; list-style-type: none;}
nav ul li {display: inline-block; font-family: 'smile_proregular'; letter-spacing: 2px; margin-left: 20px; padding: 20px 28px 0px 0px; height: 80px;}
nav ul li a {color: #2196d3;     padding-top: 20px; display: inline-block;}
nav ul li.madalena {background: url(../images/home-icon@2x.png) no-repeat right 37px; background-size: 20px;}
nav ul li.aventuras {background: url(../images/aventura-icon@2x.png) no-repeat right 20px; background-size: 20px;}
nav ul li.jogos {background: url(../images/home-symbol@2x.png) no-repeat right 30px; background-size: 25px;}


.subheader {position: relative;}

.white .text {width: 50%; float: right;}
.blue {background: #2196d3; padding: 20px 0px; color: #FFF;}
.yellow {background: #f7bb18; padding: 20px 0px;}

.yellow-bg {padding: 20px 0px 100px 0px; background: url('../images/bg-yellow.png') repeat-x #f7bb18; background-size: 100%;}
.blue-bg {padding: 20px 0px 100px 0px; background: url('../images/bg-blue.png') repeat-x; background-size: 100%;}

.blue .text {width: 50%; float: right; padding-left: 70px; box-sizing: border-box;}
.yellow-bg .text {width: 50%; float: right; padding-left: 70px; box-sizing: border-box;}


.yellow-bg .text a.vermais {background: #fff; display: inline-block; padding: 6px 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #ef4e66; font-size: 17px; letter-spacing: 2px; font-family: 'smile_proregular'; -webkit-box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.34);
-moz-box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.34);
box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.34); cursor: pointer; text-decoration: none;}
.yellow-bg .text a.vermais:hover{background: #2196d3; color: #FFF}


.dramadalena {background: url('../images/dramadalena.png') no-repeat; background-size: contain; width: 450px; height: 630px; position: absolute; z-index: 99999;  left: 80px; top:50px;}


.mainh1 {background: url(../images/yellowline.png) no-repeat left 16px; background-size: 50px; padding-left: 80px;}
body.aventuras .dramadalena, body.jogos .dramadalena {background: url('../images/dramadalena.png') no-repeat; background-size: contain; width: 250px; height: 250px; position: absolute; z-index: 99999;  left: 10px; top:220px;}


.aventuras-container {margin-top:80px; text-align: center; color: #2196d3;}
.aventuras-container h2{margin: 0px;}
a.vertodas {background: #2196d3; display: inline-block; padding: 6px 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #fff; font-size: 17px; letter-spacing: 2px; font-family: 'smile_proregular'; -webkit-box-shadow: 5px 5px 5px 1px rgba(0,0,0,0.34); text-decoration: none; cursor: pointer}
a.vertodas:hover {background: #f7bb18}


.adventures {margin: 20px 0px;}

.adv {display: inline-block; width: 180px; text-align: center; position: relative; margin-right: 30px;}
.adv .title {color: #ef4e66; font-family: 'smile_proregular'; line-height: 100%; position: absolute; width: 100%; opacity: 0; text-transform: uppercase; transition: all .2s ease-out 0s;}
.adv:hover .title{opacity: 1}

.circular--landscape {
    display: inline-block;
    position: relative;
    width: 180px;
    height: 180px;
    overflow: hidden;
    border-radius: 50%;
    border: 4px solid #2196d3; transition: all .2s ease-out 0s;
}

.circular--landscape:hover{border-color: #f7bb18}


.adv.last {margin-right: 0px;}
.circular--landscape img {
    width: auto;
    height: 100%;
    margin-left: -50px;
}


.jogos-container a {color: #2196d3; font-size: 20px;}
.jogos-container a:before {content: "\f100"; font-family: "Flaticon"; display: inline-block; margin-right: 20px;}

footer {margin-top: 100px; color: #fff}
footer .small {margin-top: 10px;}
footer .footerlogo{width: 150px; margin-top: 20px;}
footer.blue-bg {padding: 20px 0px 50px 0px!important;}

.dramadalena-footer {background: url('../images/dramadalena-logo.png') no-repeat; background-size: contain; width: 50%; height: 250px; position: absolute; z-index: 99999;      left: 250px; bottom: -40px; pointer-events: none;}


.aventuras .yellow {text-align: center; padding: 23px 0px;}
.aventuras h1 {color: #FFF; margin: 0px;}

.aventuras .blue-bg {padding: 0px;}
.aventuras .grey { width: 900px; margin: 0px auto; padding: 40px; background: url('../images/shadow.png') no-repeat center -1px #f5f4f0;}

.item {width: 250px; display: inline-block; margin-right: 28px; margin-bottom: 28px; position: relative; height: 290px; background-size: contain!important}
.item img{width: 100%;}

.item.yellowbox {background:  url('../images/yellowbox.png') no-repeat; opacity: 0.7}
.item.bluebox {background:  url('../images/bluebox.png') no-repeat; }

.item .photo {
    width: 226px;
    height: 226px;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    position: absolute;
    top: -10px;
    left: 15px;
    background-position: center center!important;
}

.item:nth-of-type(3){margin-right: 0px;}

.item .title {    position: absolute;
    bottom: 30px;
    z-index: 9999;
    width: 100%;
    text-align: center;
    color: #fff;}
    
.lines{    display: block;
    width: 100px;
    margin: 0px auto 20px auto;}
    
    .adv-text {width: 80%; margin: 0px auto; color: #2196d3;}
     .adv-title {width: 80%; margin: 0px auto;}
     
 .main-photo {width:100%; border: 10px solid #fff; margin-top: 20px;}    
/* ---------------------------------------------------------------------- */
/*  Fade In Animation
/* ---------------------------------------------------------------------- */

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@-moz-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}

.fade-in {opacity: 0; -webkit-animation: fadeIn ease-in 1; -moz-animation: fadeIn ease-in 1; animation: fadeIn ease-in 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;}

.fade-in.one {-webkit-animation-delay: .7s; -moz-animation-delay: .7s; animation-delay: .7s;}
.fade-in.two {-webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; animation-delay: 1.2s;}
.fade-in.three {-webkit-animation-delay: 1.6s; -moz-animation-delay: 1.6s; animation-delay: 1.6s;}


/* ---------------------------------------------------------------------- */
/*  Grid
/* ---------------------------------------------------------------------- */

.container {max-width: 100%; margin: 0 auto; padding: 1.25em; background: #fff;}
.row {margin: 0 0 1.25em;}
.row:last-child {margin-bottom: 0;}
div[class*='col-'] {padding: 0 1em; float: left;}
div[class*='col-'] a {display: block; position: relative;}
div[class*='col-'] img {display: block; max-width: 100%;}

@media all and (min-width: 37em) {
    .col-2-3 {width: 66.66%;}
    .col-1-2 {width: 50%;}
    .col-1-2:nth-child(2n+1) {clear: left;}
    .col-1-3 {width: 33.33%;}
    .col-1-3:nth-of-type(3n+1) {clear: left;}
    .col-1-4 {width: 25%;}
    .col-1-4:nth-child(4n+1) {clear: left;}
    .col-3-4 {width: 75%;}
    .col-1-5 {width: 20%;}
    .col-1-5:nth-child(5n+1) {clear: left;}
    .col-1-8 {width: 12.5%;}
}






/* ---------------------------------------------------------------------- */
/*  Media Queries
/* ---------------------------------------------------------------------- */

@media only screen and (max-width: 1280px) {
	
}


@media only screen and (max-width: 800px) {
	.nomobile {display: none;}
	.wrapper {max-width: 100%;}
	.logo {display: block; text-align: center}
	.logo img {width: 120px;}
	nav {left: 0px!important; top:54px; text-align: center;}
	nav li {background: none!important; padding: 0px!important; height: auto!important; font-size: 12px!important; letter-spacing: 0px!important; margin-left: 10px!important;}
	nav li a{padding-top: 0px;}
	
	.dramadalena {width: 130px;
    height: 200px;
    left: 18px;
    top: 110px;}
    
    body.aventuras .dramadalena {display: none;}
	.mainh1 {background: none; padding-left: 0px; font-size: 26px;}
	h1.mainh1 span {font-size: 16px;}
	.blue .text, .yellow-bg .text {padding: 0px; line-height: 100%; padding-right: 10px;}
	.yellow-bg {padding-bottom: 20px; background-image: none;}
	.aventuras-container {margin-top: 30px;}
	.aventuras-container p {padding: 0px 10px; line-height: 100%;}
	
	.adv {margin-bottom: 30px; width: 100%;}
	.dramadalena-footer {left: 0px; bottom: 30px; height: 170px;}
	footer.blue-bg {background-image: none; background: #2196d3; padding:10px 0px!important}
	footer .small {font-size: 11px;}
	footer .footerlogo {margin: 0px; width: 100px;}
	.aventuras h1 {font-size: 40px;}
	.aventuras .yellow {margin-top: 20px;}
	.aventuras .grey {width: 100%; padding: 10px;}
	.item {margin:0px auto 28px auto; display: block;}
	.item:nth-of-type(3) {margin: 0px auto 20px auto;}
	
}