@import "tipology.css";
@import "menus.css";
@import "links-buttons.css";
@import "hacks.css";
@import "slider.css";
@import "animate.css";
@import "galeria.css";
@import "animacoes.css";
@import "tabelas.css";
@import "accordion.css";

/* ESTRUTURA DO PROJETO */

#wrapper{width: 100%; height: 800px; overflow-x: no-content; }

#home{background: #c5e7e5; }

:focus {
    outline: none;
}

/*-=-=-=-=-=-=-=-=-=-*/
/* Efeitos Wow */
/*-=-=-=-=-=-=-=-=-= */
/*wow fade effect*/

.wow_image {
    position: relative;
    float: left;	
}

.wow_animate{
    visibility: visible; 
    -webkit-animation-delay: 0.1s; 
    -moz-animation-delay: 0.1s; 
    animation-delay: 0.1s;
}

.efect-wow-01{
    -webkit-animation-delay: 0.1s; 
    -moz-animation-delay: 0.1s; 
    animation-delay: 0.1s;
}

.efect-wow-02{
    -webkit-animation-delay: 0.2s; 
    -moz-animation-delay: 0.2s; 
    animation-delay: 0.2s;
}

.efect-wow-03{
    -webkit-animation-delay: 0.3s; 
    -moz-animation-delay: 0.3s; 
    animation-delay: 0.3s;
}


/*----Section Atividades----*/

#atividades{
    background-image: url("../img/bk_atividades_top.png");
    background-repeat: repeat-x;    
    padding: 100px 0 20px 0;
    width: 100%;
    top: -35px;
    z-index: 99;
    position: relative;
    height: auto;
}
#atividades .atividade-body{
    background-image: url("../img/bk_atividades_body.png");
    background-repeat: repeat;
    width: 100%;
    margin-top: -30px;
    background-color: #f6f1de
}

#atividades .atividade-bottom{
    background-image: url("../img/bk_atividades_bottom.png");
    background-repeat: repeat-x;
    height: 48px;
    width: 100%;
}

#atividades .thumbnail{
    padding-top: 30px;
}

#atividades .thumbnail-atividades{    
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-color: #DC97B6;
    height: 85%;
    padding: 20px;
    background: #FFF;
    text-align: center;
    margin-bottom: 50px;
    transition: all 0.5s ease-out;
}

#atividades .thumbnail-atividades:hover{    
    border-width: 2px;
    border-style: solid;
    border-color: #284B8C;

}

#atividades .thumbnail-atividades-filho{
    box-sizing: border-box;
    height: 100%;
}

.float {
    transition: margin 0.5s ease-out,box-shadow 0.5s ease-out;
    -webkit-transition: margin 0.5s ease-out,box-shadow 0.5s ease-out;   
}

.float:hover{
    top: -10px;
}

#atividades .thumbnail-atividades .body-ativ{
    box-sizing: border-box;
    height: 210px;
}

#atividades .thumbnail-atividades .ativ-desc{
    box-sizing: border-box;
    height: 100%;
}

#atividades .thumbnail-atividades p{
    color: #666666;
    font-size: 16px;
    text-align: center
}

#atividades .thumbnail-atividades h3{
    text-transform: uppercase;
    color: #A957A1;
}

#atividades .thumbnail-atividades h2 {
    font-family: 'Atma', cursive;
    text-transform: uppercase;
    color: #A957A1;
    font-weight: 700;
}

#atividades .thumbnail-atividades .widget-atividades{
    margin-bottom: 30px;
    height: 110px;
}

.triangle-top {
    width: 0;
    height: 0;
    border-top: 100px solid;
    border-right: 98.7vw solid transparent;
    margin-bottom: 25px;
    padding: 0;
    overflow: hidden;
}
.triangle-bottom {
    width: 0;
    height: 0;
    border-bottom: 100px solid;
    border-left: 98.7vw solid transparent;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.triangle-right {
    width: 0;
    height: 0;
    border-top: 100px solid #FBF2CE;
    border-left: 98.7vw solid transparent;
    padding: 0;
    top: 20px;
    overflow: hidden;
}

#brincadeiras .triangle-top{border-top-color: #F5F5F5}

#brincadeiras .triangle-bottom{border-bottom-color: #FBF2CE;}

.triangle-right{
    background: #D7E2DC;
}

.conteudo{
    padding: 20px 0;
    width: 100%
}

/*----Section Sobre Nossa Brinquedoteca----*/
#sobre{
    background: #F5F5F5;
    padding: 50px 0;
    height: auto;
    margin-top: -75px;
    display: block;
}

#sobre img{max-width: 350px;}

    #sobre h3 {
        font-family: 'Lacquer', sans-serif;
        font-size: 3.5em;
        color: #FF6600;
        margin-top: 0;
        margin-bottom: 50px;
        font-weight: 400;
    }

#sobre h2 {
     font-size: 32px;
     margin-bottom: 0px;
}

    #sobre h4 {
        font-family: 'Atma', cursive;
        font-size: 1.5em;
        margin-top: 0;
        font-weight: 700;
    }

#sobre p{text-align:  justify}

/*----Brincadeiras----*/
#brincadeiras{
    background: #FFF;
    padding: 0px 0;
    height: auto;
}

    #brincadeiras h3 {
        font-family: 'Lacquer', sans-serif;
        font-size: 1.0em;
        color: #FF6600;
        margin-top: 0;
        margin-bottom: 50px;
        font-weight: 400;
        /*    font-weight: 600;
    color: #4D4D4D;
    margin-top: 30px;*/
    }

    #brincadeiras h2 {
        font-size: 32px;
        margin-bottom: 0px;
        /*    font-weight: 600;
    color: #4D4D4D;
    margin-top: 30px;*/
    }

#bcrianca h2 {
    font-family: 'Atma', cursive;
    font-size: 28px;
    /*    text-transform: uppercase;*/
    font-weight: 600;
    color: #4d4d4d;
    margin-top: 30px;
}

#brincadeiras i{
    color: #F68237;
    font-size: 70px
}

/*----Serviços----*/
#servicos{
    background: #FBF2CE;
    padding: 20px 0;
    height: auto;
}

#servicos h1{margin-bottom: 0}

#servicos h2{margin-top: 0; font-size: 30px}

#servfasouza h2 {
    margin-top: 0;
    font-size: 20px
}

#servfasouza h3 {
    font-family: 'Lacquer', sans-serif;
    font-size: 2.5em;
    color: #2d7aaf;
    margin-top: 0;
    margin-bottom: 50px;
    font-weight: 400;
}

/*----Galeria----*/
#galeria{
    padding: 0px 0;
    height: auto;
    background: #D7E2DC;
}


/*----Conheça-nos----*/
#conheca{
    background-color: #D7E2DC;
    padding: 50px 0 0 0;
    width: 100%; 
    height: 700px; 
    overflow: hidden;
    background-image: url("../img/bk_conheca.png");
    background-repeat: repeat-x;
    background-position-x: 0px;
    background-position-y: bottom;
}

#conheca .box-conheca{
    width: 100%;    
    background: #FFF;
    box-shadow: 10px 10px 15px grey;
    text-align: center;
    padding: 20px;
    display: block
}

#conheca h3{
    font-weight: 400;
}

#conheca h2 {
    font-weight: 400;
}

#conhecafasouza h2 {
    margin-top: 0;
    font-size: 20px;
    color: #057AAF;
}

/*--------------Páginas Internas----------------*/
/*Ver animacoes.css*/
#topo-site{ 
    top: 0;
    left:0;
    height:100%;
    width: 100%;    
    height: 209px;
    background-color: #C5E7E7;
    position: absolute;
}

#breadcrumb{
    background-image: url("../img/bk-breadcrumb.png");
    background-repeat: repeat-x;
    height: 69px;
    z-index: 99;
    position: relative;
    margin-top: 7%;
    padding: 10px 0 10px 0;
}

    #breadcrumb span {
        font-size: 1.4em;
        color: #A957A1;
        padding: 12px 0;
    }

#conteudo-principal{
    background-color: #FFF;
    margin-top: -10px;
    display: block
}

.conteudo-principal-bottom{
    background-image: url("../img/bk_conheca.png");
    background-repeat: repeat-x;
    background-position-x: 0px;
    background-position-y: bottom;
    height: 320px
}


/*----Brinquedoteca----*/
.circle-img{
    display: inline-block;
    height: 295px;
    width: 295px;
    line-height: 30px;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 4px solid #057AAF;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 0 30px 20px 0;
    background: #FFF;
    //float: left;
}

#tab-brinquedoteca .media-photo{
    width: 120%;
    height: auto;
    top: 10%;
}

#tab-brinquedoteca p{text-align: justify}


/*----Espaço Brinquedoteca----*/

#cantinho-brinquedoteca{
    margin-top: 50px;
    background: #FBFAEA;
    padding: 0px 0 100px 0;
}

/*Triângulo topo*/
.arrow-down {
    width: 100%; 
    height: 0; 
    border-left: 42em solid transparent;
    border-right: 42em solid transparent;

    border-top: 133px solid #FFF;
}

.videos{
    margin-top: 20px;
    width: 100%;
}

.Jogos {
    margin-top: 20px;
    width: 100%;
}

    .Jogos p {
        text-align: justify;
        color: #000000;
    }

/*----Galeria de Fotos---*/
#conteudo-principal #galeria{
    background-color: #FFF;
}

/*----Jogos---*/
#cantinho-jogos .panel{
    border: 2px solid #DC97B6;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    text-align: center;
    margin-bottom: 30px;
}

#cantinho-jogos .panel-heading{
    background: #DC97B6;
    padding: 8px;
}

#cantinho-jogos .panel-title a{
    font-family: 'Atma', cursive;
    font-weight: 700;
    color: #FFF;
    display: block;
    margin: 0;
}

#cantinho-jogos .panel-title a:hover{text-decoration: none}

#cantinho-jogos .panel-body{
    height: 280px;
    margin: 0 auto; 
    overflow: hidden;
    text-align: center;
    position: relative;
}

#cantinho-jogos .media-photo { height: 100% }


/*----Blog----*/
#blog-sidebar .media{
    margin-top: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #999;
}

#blog-sidebar .media-body {
    display: block;    
}
#blog-sidebar .media-meta {
    font-size: 11px;
    color: #057AAF;
}

#blog-sidebar .media-meta i{
    font-size: 1.4em
}

#blog-sidebar .media .title a, #blog-body .title a{
    color: #057AAF;    
    line-height: normal;
    margin-bottom: 10px;
}

#blog-sidebar h3{font-weight: 600}

#blog-sidebar h2 {
    font-weight: 600
}

#blog-sidebar .media .title a{font-size: 0.9em;}

#blog-sidebar .media .summary {
    font-size: 14px;
    color: #666666;
    margin-bottom: 10px;
}

#blog-body .post-calendar{
    width: 88px;
    padding: 5px;
    background: #D7E2DC;
    text-align: center;
    border-bottom: 3px solid #057AAF;
    float: left;
    margin: 0 20px 20px 0;
}

#blog-body .post-calendar .post-date, #blog-body .post-calendar .post-month{
    font-family: 'Atma', cursive;
}

#blog-body .post-calendar .post-date{        
    font-size: 1.7em;
    font-weight: 600;
    color: #057AAF;
}

#blog-body .post-calendar .post-month{
    background: #057AAF;
    color: #FFF;
    //border-radius: 50%;
    padding: 2px 8px;
    text-transform: uppercase;
    font-size: 12px;
    display: table;
    margin: auto
}

#blog-body .post-calendar .post-year{
    font-size: 12px;
    letter-spacing: 5px;
    color: #057AAF;
}

#blog-body .title a{font-size: 1.8em}

#blog-body .title a:hover{
    text-decoration: none;
    color: #666666;
}

#blog-body .post-body{
    padding: 30px 0;
    border-bottom: 1px solid #999;
    min-height: 350px;
    display: block;
}

#blog-body .post-body:last-child{border: none}

#blog-body .post-autor{font-size: 0.9em; color: #666666; }

#blog-body .post-img, #blog-body .post-img-materia{        
    overflow: hidden;
    text-align: center;
    position: relative;    
}

#blog-body .post-img{
    width: 360px;
    height: 280px;
    margin: 0 30px 30px 0;
    float: left;
}

#blog-body .post-img-materia{
    width: 100%;
    height: 500px;    
    margin-bottom: 30px;
}

#blog-body .media-photo { height: 100% }

#blog-body .post-text{color: #666666}

/*----Rodapé----*/
#mapa { 
    background-image: url("../img/bk_rodape_top.png");
    background-repeat: repeat-x;    
    padding: 30px 0 0px 0;
    width: 100%;
    top: -10px;
    z-index: 99;
    position: relative;
    height: auto;
}

#mapa .footer-body{
    background-image: url("../img/bk_rodape.png");
    background-repeat: repeat;
    width: 100%;
    margin-top: 0px;
    background-color: #f6f1de
}

#mapa .foot-map{padding-bottom: 20px}

#mapa .footer-bottom{
    background-image: url("../img/bk_rodape_bottom.png");
    background-repeat: repeat-x;
    height: 48px;
    width: 100%;
}

#mapa h3{
    font-size: 22px;
    font-weight: 600;
    color: #99FFFF;
    margin-bottom: 30px;
    padding-bottom: 3px;
    border-bottom: 1px solid #99FFFF;
}

    #mapa h2 {
        font-size: 22px;
        font-weight: 600;
        color: #99FFFF;
        margin-bottom: 30px;
        padding-bottom: 3px;
        border-bottom: 1px solid #99FFFF;
    }

#mapa .media{
    margin-top: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #FFF;
}

    #mapa .corlinkbranco {
        color: #FFFFFF;
    }

    .media-blog .media-photo {
        border: 4px solid #003399;
        transition: all 0.2s ease-in;
    }

.media-blog .media-photo:hover{
    border: 4px solid #F68237;
}

/*Centraliza a imagem na div*/
.lk-img-blog{
    width: 98px; 
    height: 80px; 
    background-color: #D7E2DC; 
    margin: 0 20px 20px 0; 
    overflow: hidden;
    text-align: center;
    position: relative;
}

.media-photo {
    height: 100%;
    /*Posiciona a imagem no centro, horizontalmente*/
    position:absolute;
    left:-10%;
    right:0px;
    top:0px;
    margin:auto;    
}

#mapa .media-body {
    display: block;
}
#mapa .media-meta {
    font-size: 11px;
    color: #FFF;
}

#mapa .media-meta i{
    font-size: 1.4em
}

#mapa .media .title {
    color: #99FFFF;
    font-size: 18px;
    line-height: normal;
    margin-bottom: 10px;
}

#mapa .media .summary {
    font-size: 14px;
    color: #FFF;
    margin-bottom: 10px;
}

#footer p { font-size:13px; color:#CCC; padding-bottom:0px; margin-bottom:8px; }

#footer {
    background: #003399;
    padding: 40px 0 20px;
    margin-top: -60px;
}

#mapa .form-contact{
    background:transparent!important;
    color:#FFF !important;
    font-size: 18px!important;
}

#mapa .form-contact .form-control{color: #FFF; background: transparent;}


@media screen and (max-width:1300px) and (min-width: 1010px){
    #atividades .thumbnail-atividades .body-ativ{
        height: 275px;
    }

    #atividades .thumbnail-atividades a.btn{
        top: 0px;        
    } 

    .demo-gallery > ul > li a {
        width: 300px;
        height: 300px;
    }

}

@media screen and (max-width:1000px){ 
    #atividades .thumbnail-atividades .body-ativ{
        height: 395px;
    }

    #atividades .thumbnail-atividades a.btn{
        top: -15px;        
    }

    @keyframes animatedBallon1 {
        from { background-position: 980px 20px; }
        to { background-position: 0% 10px; }
    }
}


/* Portrait tablet to landscape and desktop */
@media screen and (max-width: 959px) and (min-width: 768px) { 
    #breadcrumb{
        margin-top: 10%;
    }

    /*@keyframes animatedBallon1 {
        from { background-position: 580px 30px; }
        to { background-position: 0% 10px; }
    }*/
}

/* Landscape phone to portrait tablet */
@media screen and (max-width: 767px) {
    #atividades .thumbnail-atividades .body-ativ{
        height: auto;
        height: 150px;
    }

    #atividades .thumbnail-atividades a.btn{
        top: 15px;        
    }

    #breadcrumb{
        margin-top: 12%;
    }

    /*@keyframes animatedBallon1 {
        from { background-position: 380px 30px; }
        to { background-position: 0% 10px; }
    }*/
    
    #blog-body .post-img{
        width: 100%;
        height: 300px;
        margin: 0 0 30px 0;       
        float: inside;
    }
}