/*
Author: Junta Digital
Theme: Trotinete
*/

/*
==============================================
    General
==============================================
*/

/*

css geral

*/

.margin-left-0 {
    margin-left: 0;
}

.margin-rigth-0 {
    margin-right: 0;
}

@media screen and (max-width:991px) {
    .margin-left-0 {
        margin-left: -15px;
    }

    .margin-rigth-0 {
        margin-right: -15px;
    }
}


/*

----

*/

body,
html {
    font-family: 'myriad-pro-extended', sans-serif;
    padding: 0;
    height: 100%;
    width: 100%;
    color: #87868A;
}

.top {
    height: 80px;
}

.container-full {
    margin: 0 auto;
    width: 100%;
}

a,
a:hover {
    text-decoration: none!important;
}

.titulo {
    color: #87868a;
    font-size: 1.5em;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 60px;
    margin-top: 50px;
}

.titulo-portfolio {
    color: #87868a;
    font-size: 1.5em;
    font-weight: lighter;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 50px;
}

.politica-priv-titulo {
    color: #87868a;
    font-size: 1.5em;
    font-weight: lighter;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-align: center;
    margin: 25px;
}

.politica-priv-titulo-left {
    color: #87868a;
    font-size: 1.5em;
    font-weight: lighter;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: 25px;
}

.politica-priv-sub-titulo {
    text-align: center;
    margin: 0;
    padding: 0;
}

.guia_titulo {
    text-align: left;
    text-transform: uppercase;
    font-size: 1.3em!important;
    margin-top: 30px;
}

.guia_subtitulo {
    font-size: 1em!important;
    line-height: 1.6em;
}

.bold {
    font-weight: 700;
}

.text-center {
    text-align: center!important;
}

.text-right {
    text-align: right!important;
}

.text-left {
    text-align: left!important;
}

.full-height {
    width: 100%;
    height: 100%;
}

.full-width {
    width: 100%
}

.display-block {
    display: block;
}

.background-white {
    background-color: #fff!important;
}

.background-grey {
    background-color: #ededed!important;
}

.padding-top {
    padding-top: 55px;
}

.padding {
    padding: 100px;
}

.padding-100 {
    padding: 100px;
}

.wrapper-100 {
    padding: 0 100px;
}

.padding-top-100 {
    padding-top: 100px;
}

.padding-bottom-100 {
    padding-bottom: 100px;
}

.padding-left-right-100 {
    padding: 20px 100px;
}

.padding-50 {
    padding: 50px;
}

.no-padding {
    padding: 0!important;
}

.no-margin {
    margin: 0!important;
}

.margin-bottom-50 {
    margin-bottom: 50px;
}

.banner {
    width: 100%;
    height: 800px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.cover-headline {
    color: #fff;
    font-family: 'myriad-pro-extended', sans-serif;
    font-size: 1.5em;
    margin: 0 auto 25px auto;
    font-weight: 300!important;
}

@media only screen and (max-width: 1367px) {
    .banner {
        height: 500px;
    }
}

.navbar-default .navbar-toggle {
    border: none!important;

}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:active,
.navbar-default .navbar-toggle:visited {
    background-color: transparent!important;
}

.btn-trotinete {
    background-color: transparent;
    color: #87868A;
    border-radius: 0;
    border: solid 1px #8e8f90;
    padding: 12px;
    font-size: 1em;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

button.btn-trotinete:focus {
    outline: none!important;
}

.btn-trotinete:hover {
    background-color: #87868A;
    color: #fff;
}

/* opções Botões */

.btn-trotinete-center {
    display: block;
    margin: 30px auto;
}

.close-modal {
    background-color: transparent;
    border: none;
    color: #87868A;
    margin-bottom: 20px;
}

.close-modal:focus,
.close-modal:active {
    box-shadow: none!important;
    border: none!important;
}

.nomeAluno-box {
    padding: 20px;
    border-right: solid 1px #8e8f90;
    text-align: right;
}

.nomeUser-box {
    padding: 20px;
    text-align: right;
}

.nomeAluno-title {
    font-size: 1.8em;
    font-weight: 300;
    text-transform: uppercase;
}

.descricao-aluno {
    padding-top: 25px;
}

.descricao-aluno p,
.descricao-user p {
    font-size: 0.9em;
    font-weight: 300;
}

.colegio-article {
    padding: 20px;
    border-bottom: solid 1px #8e8f90;
}

.descricao-user {
    padding-top: 25px;
    border-left: solid 1px #8e8f90;
}



/*
==============================================
    Navbar
==============================================
*/

nav.main {
    width: 100%;
    height: 80px;
    background-color: #87868A;
    margin: 0!important;
    padding: 0;
}

#home-nav {
    background-color: #87868A;
    box-shadow: 0 0 5px #999;
    -webkit-box-shadow: 0 0 5px #999;
    -ms-box-shadow: 0 0 5px #999;
    -o-box-shadow: 0 0 5px #999;
    -moz-box-shadow: 0 0 5px #999;
}

#home-nav-white {
    background-color: #fff;
    color: #87868A;
    box-shadow: 0 0 5px #999;
    -webkit-box-shadow: 0 0 5px #999;
    -ms-box-shadow: 0 0 5px #999;
    -o-box-shadow: 0 0 5px #999;
    -moz-box-shadow: 0 0 5px #999;
}

#general-nav {
    background-color: #87868A;
}

#general-nav-white {
    background-color: #fff;
}

/* nav - home hide */

.navbar-default .navbar-toggle .icon-bar {
    background-color: #000;
}

.drop-carrinho {
    width: 400px;
    text-align: center;
    color: #87868A;
    margin: 0;
    padding: 0;
    top: 63px!important;
    left: -185px;
}

.drop-lang {
    min-width: 50px;
    text-align: center;
    color: #87868A;
    margin: 0;
    padding: 0;
    top: 50px!important;
    left: -5px;
}

.drop-lang li {
    display: block!important;
}

.drop-conta {
    width: 220px;
    text-align: center;
    color: #87868A;
    margin: 0;
    padding: 0;
    top: 50px!important;
    left: -105px;
}

.drop-conta li {
    display: block;
    border: solid 1px #8e8f90;
    width: 205px;
    margin: 5px auto;
}

.drop-conta li a {
    padding: 15px;
    font-size: 1em;
    color: #b0b2b0;
}

.dropdown-menu .container-fluid {
    width: 400px;
    padding: 0 20px 20px 20px;
}

.dropdown-menu .conteudo {
    border: solid 1px #999;
    display: block;
    padding: 20px 0;
    margin: 10px auto;
    text-transform: uppercase;
    font-size: 1em;
}

.dropdown-menu .total {
    display: block;
    padding: 20px 0;
    margin: 10px auto;
    text-transform: uppercase;
}

.dropdown-menu .total p {
    margin: 0!important;
    padding: 0!important;
    font-size: 0.9em;
}

.dropdown-menu .total h2 {
    font-weight: 700;
    font-size: 2em!important;
}

.dropdown-menu .container-fluid h2 {
    font-size: 1.5em;
    text-transform: uppercase;
}

.botoes a {
    width: 100%;
    display: block;
    text-transform: uppercase!important;
    font-size: 1em;
    padding: 20px;
    color: #87868A;
    border: solid 1px #999!important;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.botoes a:hover {
    background-color: #333!important;
}

#navUser {
    list-style-type: none;
    float: right;
    font-size: 0.8em;
}

#navUser li {
    display: inline-block;
}

/*-------------------- */

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border: none!important;
}

.navbar-brand {
    position: absolute;
}

#navCollapse {
    padding: 0;
}

.navbar-brand img {
    width: 120px;
    height: auto;
    margin-top: -5px;
    ;
}

#mainMenu {
    float: none;
    margin: 0 auto;
    display: block;
    text-align: center;
    margin-top: 15px;
}

#mainMenu li {
    display: inline-block;
    float: none;
}

#mainMenu li a {
    text-transform: uppercase!important;
    font-size: 1em;
}

#home-nav #mainMenu li a {
    color: #fff;
}

#home-nav-white #mainMenu li a {
    color: #87868A;
}

#home-nav #mainMenu li a:hover,
#home-nav #mainMenu li a.active {
    color: #313131;
    -webkit-transition: color 500ms ease-out;
    -moz-transition: color 500ms ease-out;
    -o-transition: color 500ms ease-out;
    -ms-transition: color 500ms ease-out;
}

#general-nav #mainMenu li a {

    color: #fff;
}

.navbar {
    border: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

#navUser {
    margin-top: -32px;
}

#navUser li a {
    padding: 8px;

}

#general-nav #navUser li a {
    color: #fff;
}

#home-nav-white #navUser li a {
    color: #87868A;
}

#home-nav #navUser li a {
    color: #fff;
}

.dropdown-menu li a {
    color: #87868A!important;
}

/*
==============================================
    Footer
==============================================
*/

footer {
    padding: 0;
/*    background-color: #87868A;*/
    color: #fff;
    z-index: 5;
}

.bt-back-top,
.bt-back-top:visited {
    color: #fff;
    font-size: 0.9em;
    text-transform: uppercase;
    display: block;
    /*    margin: 10px auto 0 auto;*/
    margin: 15px auto 0 auto;
    -webkit-transition: color 500ms ease-out;
    -moz-transition: color 500ms ease-out;
    -o-transition: color 500ms ease-out;
    -ms-transition: color 500ms ease-out;
}

.bt-back-top:hover {
    color: #fff;
}

.footer-content {
    margin-top: 0px;
    margin-bottom: 0px;
}

.footer-brand img {
    display: block;
    margin: 15px auto 0 auto;
    max-width: 120px;
    height: auto;
}



.footer-brand-trotinete img {
    display: block;
    margin: 15px auto 0 auto;
    max-width: 150px;
    height: auto;
}

@media screen and (max-width:768px) {
    .footer-brand img, .footer-brand-trotinete img {
        margin: 15px auto 0 auto !important;
    }
}

.redes-sociais {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: auto 10px;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.redes-sociais img {
    height: 80%;
    width: auto;
}

.redes-sociais:hover {
    opacity: 0.4;
}

.footer-nav a {
    text-transform: uppercase;
    color: #fff;
    font-size: 0.8em;
    display: block;
    margin: 0 auto 10px auto;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.footer-nav a:hover {
    color: #57565b;
}

.label-footer-form {
    display: block;
    color: #fff;
    font-size: 0.8em;
    font-weight: 300;
    letter-spacing: 1px;
}

.footer-form label {
    position: relative;
    border: solid 1px #fff;
    padding: 0 10px;
    height: 25px;
    font-size: 0.6em;
    margin-top: 10px;
}

.footer-form input {
    background-color: transparent;
    box-shadow: none!important;
    border: none!important;
    /*    width: 160px;*/
    width: 100%;
    line-height: 21px;
}

.input-footer-form:focus {
    box-shadow: none!important;
    border-color: none!important;
}

.footer-form button {
    position: absolute;
    right: 4px;
    top: 2px;
    background-color: transparent;
    border: none;
    color: #fff;
    padding: 5px;
    width: 20px;
    height: 20px;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.footer-form button:hover {
    background-color: #87868A;
    color: #57565b;
}

.input-footer-form::-webkit-input-placeholder {
    color: #fff;
    font-size: 0.9em;
    font-weight: 300;
}

.input-footer-form:-moz-placeholder {
    color: #fff;
    font-size: 0.9em;
    font-weight: 300;
}

.input-footer-form::-moz-placeholder {
    color: #fff;
    font-size: 0.9em;
    font-weight: 300;
}

.input-footer-form:-ms-input-placeholder {
    color: #fff;
    font-size: 0.9em;
    font-weight: 300;
}

.assinatura-footer {
    display: block;
    font-size: 0.6em;
    margin: 5px;
    text-align: right;
    padding-right: 30px;
}

.ir-para a {
    color: #fff;
    text-align: right;
}

.ir-para a div {
    border: solid #fff 0.5px;
    width: 120px;
    height: auto;
    padding: 10px 7px;
    margin: 15px 0 0 auto;
}

.ir-para a div span {
    font-size: 0.9em;
    display: block;
    margin-bottom: 10px;
}

.ir-para a div img {
    width: 80%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.assinatura-footer > span,
.assinatura-footer > span > a {
    color: #fff;
    -webkit-transition: color 500ms ease-out;
    -moz-transition: color 500ms ease-out;
    -o-transition: color 500ms ease-out;
    -ms-transition: color 500ms ease-out;
}

.assinatura-footer > span > a:hover {
    color: #999;
}

/*
.box_voltar_top_footer {
    text-align: right;
}
*/

.box_voltar_top_footer a {
    display: inline-block;
    /*    transform: translateX(50%);*/
}

.box_logos_partners_footer {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    height: 20px;

}

.box_logos_partners_footer a {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 50px;
    width: 30px;
    margin: 0;
}

.box_logos_partners_footer img {
    width: auto;
    /*    max-width: 35%;*/
    max-width: 100%;
    max-height: 45%;
}

@media (max-width:767px) {
    .box_voltar_top_footer {
        text-align: center;
    }
    .box_voltar_top_footer a {
        display: inline-block;
        transform: translateX(0%);
    }

    .box_logos_partners_footer {
        height: 50px;
        overflow: hidden;
    }

    .box_logos_partners_footer .col-sm-4 a {
        height: 130px;
    }
}

@media screen and (max-width: 800px) {
    .footer-nav a {
        font-size: .6em;
    }
    .redes-sociais {
        width: 15px;
        height: 15px;
        margin: auto 2px;
    }
    .ir-para a div {
        border: solid #fff 0.5px;
        width: 80px;
        height: auto;
        padding: 8px 5px;
        margin: 10px 0 0 auto;
    }
    .footer-brand img {
        margin: 10px auto 0 auto;
    }
    .footer-brand-trotinete img {
        margin: 10px auto 0 auto;
    }
}

/*
==============================================
    PAGE: Home
==============================================
*/

/* PARTIAL: head */

.head {
    margin-top: 0;
    width: 100%;
    height: 94vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.head-caption {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    text-align: center;
    width: 300px;
}

.head-caption .head-playVideo {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
}

.head-caption img {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    width: 100%;
    shadow: 0 0 5px #333;
}

.head-caption .head-playVideo {
    display: block;
    padding: 15px 35px;
    font-size: 0.9em;
    color: #fff;
    border: solid 1px #fff;
    background-color: transparent;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.head-caption .head-playVideo:hover {
    background-color: #fff;
    color: #333;
}

.head-caption .head-callToAction {
    display: block;
    margin: 20px auto;
    color: #fff;
    font-size: 2em;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
    padding: 0;
}

.head-caption .head-callToAction:hover {
    margin-top: 30px;
}

@media screen and (max-width: 800px) {
    .head {
        margin-top: 0;
        width: 100%;
        height: 50vh;
    }
    .head-caption {
        top: 19%;
    }
}

@media screen and (max-width: 400px) {
    .head {
        margin-top: 30px;
        height: 50vh;
    }
    .head-caption {
        top: 19%;
        width: 65%;
    }
}

/* PARTIAL: catálogo_thumbs */

#catalogoThumbs .item {
    margin: 3px;
}

#catalogoThumbs .item img {
    display: block;
    width: 100%;
    height: auto;
}

#catalogoThumbs .owl-prev,
#catalogoThumbs .owl-next {
    position: absolute;
    top: 48%;
    font-size: 2em;
    color: #87868A;
    z-index: 3000;
}

#catalogoThumbs .owl-prev {
    left: -40px;
}

#catalogoThumbs .owl-next {
    right: -40px;
}

.slide-thumb {
    width: 100%;
    height: 220px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#catalogo_thumbs a img {
    display: block;
    width: 100%;
    height: auto;
}

#catalogo_thumb .titulo {
    margin-top: 50px;
}

.hover-thumb-catalogo {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    opacity: 0;
    color: #fff;
    width: 100%;
    height: 100%;
    padding-top: 35%;
    text-align: center;
    overflow: hidden;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.hover-thumb-catalogo:hover {
    background-color: rgba(100, 100, 100, 0.7);
    cursor: pointer;
    opacity: 1
}

.hover-thumb-catalogo span:nth-child(1) {
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 300;
    color: #fff;
    border: solid 1px #fff;
    padding: 8px 15px;
}

.hover-thumb-catalogo span:nth-child(2) {
    display: block;
    margin-top: 20px;
    text-transform: uppercase;
    font-size: 0.9em;
    font-weight: 300;
}

/* PARTIAL: artigos_thumbs */

#artigosThumbs .item {
    margin: 3px;
}

#artigosThumbs .item img {
    display: block;
    width: 100%;
    height: auto;
}

#artigosThumbs .owl-prev,
#artigosThumbs .owl-next {
    position: absolute;
    top: 48%;
    font-size: 2em;
    color: #87868A;
    z-index: 3000;
}

#artigosThumbs .owl-prev {
    left: -40px;
}

#artigosThumbs .owl-next {
    right: -40px;
}

#artigosThumbs .slide-thumb {
    width: 100%;
    height: auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#artigosThumbs .hover-thumb-catalogo {
    top: 0;
    left: 0;
    background-color: transparent;
    opacity: 0;
    color: #fff;
    width: 100%;
    height: auto;
    padding-top: 85%;
    text-align: center;
    overflow: hidden;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

#artigosThumbs .hover-thumb-catalogo:hover {
    background-color: rgba(100, 100, 100, 0.7);
    cursor: pointer;
    opacity: 1
}

.hover-thumb-artigos {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    opacity: 0;
    color: #fff;
    width: 100%;
    height: 100%;
    padding-top: 85%;
    text-align: center;
    overflow: hidden;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.hover-thumb-artigos h1 {
    text-transform: uppercase;
    font-weight: 100;
    font-size: 1em;
    padding: 10px 11px 8px;
    border: solid 1px #fff;
    max-width: 65%;
    margin: 10px auto;
    opacity: 0;
    text-decoration: none!important;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.hover-thumb-artigos button {
    display: inline-block;
    background-color: transparent;
    border: none;
    width: 30px;
    height: auto;
    margin: 5px 10px;
    opacity: 0;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.hover-thumb-artigos p {
    font-size: 1.4em;
    font-weight: 100;
    opacity: 0;
    text-decoration: none!important;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.hover-thumb-artigos:hover h1,
.hover-thumb-artigos:hover p,
.hover-thumb-artigos:hover button {
    opacity: 1;
}

.hover-thumb-artigos:hover {
    background-color: rgba(100, 100, 100, 0.7);
    cursor: pointer;
    opacity: 1
}

/*========================*/

/*
HOVER EFFECT*/

.hovereffect {
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}

.hovereffect .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    left: 0;
    background-color: rgba(100, 100, 100, 0.7);
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all ease-out 0.8s;
    transition: all ease-out 0.8s;
}

.hovereffect:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    top: 0px;
}

.hovereffect img {
    display: block;
    position: relative;
}

.hovereffect h1 {
    text-transform: uppercase;
    color: #fff;
    font-weight: 100;
    text-align: center;
    position: relative;
    font-size: 1em;
    padding: 10px 11px 8px;
    border: solid 1px #fff;
    margin-top: 70%;
    margin-left: auto;
    margin-right: auto;
    max-width: 65%;

}

.hovereffect p {
    font-size: 1.4em;
    font-weight: 100;
    text-decoration: none!important;
    color: #fff;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.hovereffect button {
    display: inline-block;
    background-color: transparent;
    border: none;
    width: 30px;
    height: auto;
    margin: 5px 10px;
    transition: all 500ms ease-out;
}

.hovereffect:hover button {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    color: #000;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

/*========================*/

/*
==============================================
    PAGE: Marca
==============================================
*/

/* PARTIAL: banner */

.banner-marca {
    width: 100%;
    height: 600px;
    background-repeat: no-repeat;
    background-position: 0% 25%;
    background-size: cover;
}

.headline-marca {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    text-align: center;
    color: #fff;
}

.headline-marca h1 {
    text-transform: uppercase;
}

.headline-marca p {
    padding: 0 10px;
    font-weight: 100;
    font-size: 1em;
    letter-spacing: 0.1rem;
}

.headline-marca hr {
    margin: 10px auto;
    padding: 0;
}

@media only screen and (max-width: 1367px) {
    .banner-marca {
        height: 500px;
    }
    .slide-thumb {
        height: 150px;
    }
    .titulo {
        margin-bottom: 60px;
    }
}

/* PARTIAL: About */

.about,
.catalogo-texto-int {
    text-align: center;
}

.about h2,
.catalogo-texto-int h2 {
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 400;
}

.about h4 {
    text-transform: uppercase;
    margin-bottom: 25px;
    font-size: .9em;
}

.historia {
    padding: 30px;
}

.about p,
.historia p,
.catalogo-texto-int p {
    font-size: 1em;
    line-height: 2em;
    padding-bottom: 10px;
    font-weight: 150;
}

/* PARTIAL: História */

.imagem-separador {
    width: 100%;
    /*height: 650px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (max-width: 1367px) {
    .imagem-separador {
        /*height: 450px;*/
    }
}

.historia {
    text-align: center;
}

.historia p {
    line-height: 1.5em;
}

/*
restantes estilos deste partial no partial Banner e About
*/

/* PARTIAL: Projetos Lista */

.projetos-titulo {
    text-align: center;
}

.foto-projeto {
    width: 100%;
    /*height: 340px;*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.foto-projeto img {
    margin-right: auto;
    margin-left: auto;
}

.projetos-lista {
    text-align: center;
}

.projetos-lista article header time {
    line-height: 3em;
    font-size: 1.5em;
    font-weight: 600;
}

.projetos-lista article header h1 {
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
}

.buttons {
    width: 100%;
    height: auto;
    display: block;
}

.mais-info-fechar {
    opacity: 1;
    width: 300px;
    margin-left: auto;
    margin-right: auto;

}

/* PARTIAL: Portfólio */

.projetos-titulo hr {
    border-color: #87868A;
}

.nav-tabs {
    border: none!important;
    text-transform: uppercase;
}

.nav-tabs > li > a {
    line-height: 1.42857143;
    border: none!important;
    border-radius: 0!important;
    color: #87868A;
    padding: 0;
    margin: 0;

}

.nav-tabs > li {
    display: inline-block;
    width: 18.5%;
    margin: 0;
    padding: 0;
}

.nav-tabs li:last-of-type a {
    border-right: none!important;
}

.nav-tabs > li > a,
.nav-tabs > li > a:focus,
.nav-tabs > li > a:hover {
    background-color: transparent;
}

.nav-tabs > li > a:hover {
    color: #6E6E6E;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    background-color: transparent;
    color: #6E6E6E;
}

#portfolioMenu,
#artigosCategoriasMenu {
    float: none;
    margin: 0 auto;
    display: block;
    text-align: center;
}

#artigosCategoriasMenu {
    margin: 35px auto;
}

#portfolioMenu li,
#tamanhosMenu li,
#comprasMenu li {
    display: inline-block;
    float: none;
    font-size: 0.9em;
}

.modal-header {
    border: none;
}

#tamanhosMenu,
#comprasMenu {
    display: block;
    width: 100%;
    text-align: center;
}

#tamanhosMenu li,
#artigosCategoriasMenu li {
    width: 20%;
    font-size: 1em;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

#comprasMenu li {
    width: 24%;
    font-size: 1em;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
    vertical-align: top!important;
}

#tamanhosMenu li a,
#comprasMenu li a {
    border: none;
    padding: 15px;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

#comprasMenu li a img {
    display: block;
    vertical-align: top!important;
    margin: 0 auto;
    width: 35%;
    height: auto;
    opacity: 0.5;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.item-nav-compras {
    display: block;
    margin-top: 15px;
}

#tamanhosMenu li:hover,
#tamanhosMenu li.active,
#comprasMenu li.active,
#comprasMenu li:hover {
    background-color: transparent;
    border-bottom: solid 1px #8e8f90;
}

#comprasMenu li:hover a > img,
#comprasMenu li.active a > img {
    opacity: 1;
}

#infoGeral,
#comoComprar,
#pagamento,
#trocas {
    color: #87868A;
    padding: 30px 100px 100px 100px;
}

#infoGeral h1,
#comoComprar h1,
#pagamento h1,
#trocas h1 {
    font-size: 1.6em
}

#infoGeral h3,
#comoComprar h3,
#pagamento h3,
#trocas h3 {
    font-size: 1.2em;
}

#infoGeral p,
#comoComprar p,
#pagamento p,
#trocas p {
    font-size: 0.9em;
    line-height: 2em;
}

#infoGeral ul li,
#comoComprar ul li,
#pagamento ul li,
#trocas ul li {
    font-size: 0.9em;
    line-height: 2em;
}

#medidasModal .modal-body img {
    display: block;
    width: 95%;
    height: auto;
    margin: 25px auto;
}

.slider-work .item {
    display: block;
    width: 90%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 60px;
}

.slider-work .owl-prev,
.slider-work .owl-next {
    position: absolute;
    top: 40%;
    font-size: 2em;
    color: #87868A;
    z-index: 3000;
}

.slider-work .owl-prev {
    left: 0;
}

.slider-work .owl-next {
    right: 0;
}

@media only screen and (max-width: 1367px) {
    .slider-work .item {
        /* height: 500px;*/
    }
}

/*
==============================================
    PAGE: catálogo
==============================================
*/

/* PARTIAL: nav_categorias */

.nav-tabs > li.col-active a {
    font-weight: bold;
}

.nav-tabs > li.col-active a:after {
    display: block;
    content: '';
    width: 130px;
    height: 1px;
    background-color: #999;
    margin: 3px auto;
}

#catalogoMenu {
    margin: 0 auto;
    display: block;
    text-align: center;
    background-color: transparent;
    /*height: 220px;*/
    margin-top: 20px;
    z-index: 5000;
}

#catalogoMenu li {
    display: inline-block;
    /*    float: none;*/
    font-size: 0.9em;
    width: 16.6%;
    padding-right: 4px;
}

#catalogoMenu li a {
    font-size: 1.5em;
    text-transform: uppercase;
}

#catalogoMenu li.active a {
    color: #000;
    font-weight: bold;
}


.margin-top-colecao {
    height: 70px;
}

.nav-colecao {
    position: fixed;
    z-index: 1;
    background-color: #fff;
    width: 100%;
    height: 80px;
}

@media (min-width: 400px) {
    .margin-top-colecao {
        height: 120px;
    }
    .nav-colecao {
        height: 120px;
    }
}

@media (min-width: 860px) {
    .margin-top-colecao {
        height: 195px;
    }
    .nav-colecao {
        height: 180px;
    }
}

.categoriaButton {
    margin-top: -10px;
}

.categoriaButton span {
    color: #000;
    font-size: 1.3em;
}

.categoriaLegenda {
    text-transform: uppercase;
}

/* PARTIAL: catalogo_slider */

.catalogo-slider .item img {
    display: block;
    width: 100% height: auto;
    margin: 0 auto;
}

.catalogo-slider .owl-prev,
.catalogo-slider .owl-next {
    position: absolute;
    top: 50%;
    font-size: 2em;
    color: #87868A;
    z-index: 3000;
}

.catalogo-slider .owl-prev {
    left: 40px;
}

.catalogo-slider .owl-next {
    right: 40px;
}


#catalogo1 .row .col-sm-4 {
    padding-right: 19px;
}

/* PARTIAL: Texto Categorias */

.catalogo-texto-int h2 {
    margin-bottom: 50px;
    margin-top: 0;
    font-weight: 300;
    letter-spacing: 1px;
}

.catalogo-texto-int span {
    font-style: italic;
    font-size: 1.5em;
}

/*
=== RESTANTES ESTILOS DESTE PARTIAL LINHA 729 DESTE CSS ===
*/

/* PARTIAL: categorias mosaico */

.mosaico-imagens {
    margin: 0;
    padding: 0;
    /*height: 900px;*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@media only screen and (max-width: 1367px) {
    .catalogo-slider .item,
    .mosaico-imagens {
        /*height: 600px;*/
    }
}

/*
==============================================
    Orçamento
==============================================
*/

/* PARTIAL: email_orcamento */

#form-orcamento {
    border-top: solid 1px #8e8f90;
    padding-top: 35px;
}

.email_orcamento input,
.email_orcamento textarea {
    border-radius: 0;
    box-shadow: none;
    padding: 10px;
}

.email_orcamento input:focus,
.email_orcamento textarea:focus {
    box-shadow: none!important;
    border-radius: 0!important;
    border-color: #87868A;
}

.email_orcamento input {
    margin-bottom: 30px;
}

.email_orcamento textarea {
    height: 187px;
    font-size: 0.7em;
    color: #87868A;
    height: 150px;
    overflow: hidden;
    resize: none;
}

.email_orcamento input::-webkit-input-placeholder {
    font-size: 11px;
    color: #87868A;
}

.email_orcamento input:-moz-placeholder {
    font-size: 11px;
    color: #87868A;
}

.email_orcamento input::-moz-placeholder {
    font-size: 11px;
    color: #87868A;
}

.email_orcamento input:-ms-input-placeholder {
    font-size: 11px;
    color: #87868A;
}

.email_orcamento select {
    font-size: 11px;
    color: #87868A;
    padding: 10px;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 30px;
}



/*
==============================================
    LOJA
==============================================
*/

/* Register
========================= */

.login-box {
    margin-bottom: 100px;
    margin-top: 100px;
}

.register_login {
    text-align: center;
}

.register_login input {
    border-radius: 0;
    margin-bottom: 25px;
}

.register_login input::-webkit-input-placeholder {
    font-size: 0.9em;
}

.register_login input:-moz-placeholder {
    font-size: 0.9em;
}

.register_login input::-moz-placeholder {
    font-size: 0.9em;
}

.register_login input:-ms-input-placeholder {
    font-size: 0.9em;
}

.register_login a,
.register_login button {
    background-color: transparent;
    color: #87868A;
    border-radius: 0;
    width: 100%;
}

/* Dashboard
========================= */

.wrapper {
    width: 640px;
    height: 200px;
    margin: 0 auto;
    ;
}

.frame-colegio {
    width: 300px;
    height: 300px;
    border: 1px #333 solid;
    float: left;
}

.separador-colegio {
    width: 2px;
    height: 300px;
    border: 1px #333 solid;
    float: left;
    margin: 0 15px;
}

/* LOJA
========================= */

.banner-nome-colegio {
    width: 100%;
    /*height: 200px;*/
    padding: 25px;
    background-color: #f3f3f3;
    text-align: center;
}

.banner-nome-colegio p {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.4em;
}

.banner-nome-colegio img {
    display: block;
    margin: 15px auto;
    max-width: 170px;
    height: auto;
}

#saber-mais + button {
    margin-top: 60px;
    margin-bottom: 100px;
}

.saber-mais-mensagem {
    width: 100%;
    padding: 80px;
    color: #87868A;
    text-align: center;
}

.saber-mais-mensagem p {
    font-size: 0.9em;
    font-weight: 300;
    line-height: 2em;

}

article.thumb a {
    text-decoration: none!important;
}

.produto {
    display: block;
}

.produto img {
    display: block;
    min-width: 100%;
    height: auto;
}

.hover_produto {
    top: 0;
    left: 0;
    background-color: transparent;
    color: #fff;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 480px;
    overflow: hidden;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.hover_produto:hover {
    background-color: rgba(100, 100, 100, 0.7);
    cursor: pointer;
}

.hover_produto:hover h1,
.hover_produto:hover p,
.hover_produto:hover button {
    opacity: 1;

}

.hover_produto button {
    display: inline-block;
    background-color: transparent;
    border: none;
    width: 40px;
    height: auto;
    margin: 5px 15px;
    opacity: 0;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.hover_produto h1 {
    text-transform: uppercase;
    font-weight: 100;
    font-size: 1.7em;
    padding: 17px 16px 10px;
    border: solid 1px #fff;
    max-width: 65%;
    margin: 10px auto;
    opacity: 0;
    text-decoration: none!important;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.hover_produto p {
    font-size: 1.4em;
    font-weight: 100;
    opacity: 0;
    text-decoration: none!important;
    transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

/* Pesquisa Avançada  */

.pesquisa-avancada-loja-fixed {
    top: 100px;
    position: fixed;
    width: inherit;
    padding-right: 20px;

}

.pesquisa-desktop {
    overflow-y: scroll;
}

.pesquisa-avancada {
    position: fixed;
    width: inherit;
    padding-right: 20px;
    height: 90vh;
    overflow: auto;
    padding-bottom: 200px;


}

.pesquisa-avancada p:nth-child(1) {
    text-transform: uppercase;
}

.pesquisa-avancada hr {
    border-width: 1px;
    border-color: #87868A;
}

.pesquisa-avancada-loja p:nth-child(1) {
    text-transform: uppercase;
}

.pesquisa-avancada-loja hr {
    border-width: 1px;
    border-color: #87868A;
}

.conteudo-pesquisa {
    padding-left: 50px;
}

.conteudo-pesquisa ul {
    list-style-type: none;
}

.conteudo-pesquisa p {
    padding-top: 5px;
    margin-bottom: 0px;
    /*padding-bottom: 15px;*/
}

.conteudo-pesquisa ul li {
    padding-top: 8px;
    padding-bottom: 8px;
}

.conteudo-pesquisa a {
    text-decoration: none!important;
}

.conteudo-pesquisa .categorias {
    font-size: 0.9em;
    display: block;
    text-transform: uppercase;
    color: #333;
}

.conteudo-pesquisa .categorias:hover {
    color: #87868A;
}

.conteudo-pesquisa .propriedades {
    font-size: 0.7em;
    line-height: 1.8em;
    color: #87868A;
}

.conteudo-pesquisa .propriedades:hover {
    color: #333;
}

/* Ficha Artigo
========================= */

.cor-ativa {
    border: 3px solid rgba(240, 43, 43, .7) !important;
}

.foo {
    float: left;
    width: 60px;
    height: 60px;
    margin: 5px;
    border: 1px solid rgba(0, 0, 0, .5);
}

.thumb-ficha {
    width: 100%;
    height: 500px;
    border: 3px #8e8f90 solid;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

#slider-artigo .item {
    display: block;
    width: 80%;
    border: solid 2px #8e8f90;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#slider-artigo .owl-prev,
#slider-artigo .owl-next {
    position: absolute;
    top: 50%;
    font-size: 2em;
    color: #87868A;
    z-index: 1000;
}

#slider-artigo .owl-prev {
    left: -40px;
}

#slider-artigo .owl-next {
    right: -40px;
}

.titulo-artigos h3 {
    font-size: 1em;
    font-weight: 300;
    margin: 0;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;

}

.titulo-artigos hr {
    width: 40%;
    border-bottom: 1px solid;
    margin: 10px 0 10px 0;
}

.titulo-artigos p {
    margin: 0;
    font-size: 0.7em;
}

.acordion {
    margin-top: 10px;
}

.panel-default > .panel-heading {
    background-color: transparent;
    border: none;
}

.panel-body,
.panel-heading {
    border: none!important;
}

.panel-default {
    border-width: 0 0 1px 0;
    border-radius: 0;
}

.acordion .panel-group .panel {
    border-radius: 0;
}

.panel-heading a {
    font-size: 0.75em;
    text-decoration: none;
}

.panel-heading a:hover {
    text-decoration: none;
}

.panel-body {
    font-size: 0.9em;
    margin-left: 25px;
}

.bt-adiciona-carrinho {
    background-color: transparent;
    border-radius: 0;
    width: 100%;
    padding: 9px 26px;
    font-size: 0.9em;
    letter-spacing: 1px;
    color: #000;
    border: solid 1px #000;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.bt-adiciona-carrinho:hover {
    text-decoration: none;
    background-color: #87868A;
    border-color: #87868A;
    color: #fff;
}

.bt-wihslist {
    display: inline-block;
    margin-left: 30px;
}

.bt-wihslist > span > img:hover {
    opacity: 1;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.bt-wihslist > span > img:hover {
    opacity: 0.5;
}

.caracteristicas-artigo {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    border: none;
    font-size: 0.9em;
    min-width: 100px;
}

/* Modal guia de tamanhos */

@media (min-width: 768px) {
    .modal-dialog {
        width: 70%;
        margin: 30px auto;
    }
}



/* saco de Compras
========================= */

.btn-condicoes a {
    font-size: 0.8em;
    color: #87868A;
    text-decoration: none;
}

.btn-condicoes a:hover {
    color: #000;
}

.titulos-paginas-loja {
    font-size: 1.3em;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #87868A;
    padding-top: 0px;
    padding-bottom: 40px
}

.cart-header,
.cart-item-content {
    color: #87868A;
    height: auto;
    font-size: 0.9em;
    font-weight: 300;
}

.cart-item-content {
    display: block;
    height: 70px;
}

.cart-item-content div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.carrinho-confirmacao {
    color: #87868A;
}

.carrinho-confirmacao h2 {
    font-weight: bold;
}

.carrinho-confirmacao h2 span {
    font-size: 0.5em;
    font-weight: 300;
}

.carrinho-confirmacao p {
    font-size: 0.9em;
    font-weight: 300;
    margin: 35px auto;
}

.checkbox label {
    font-size: 0.9em;
    font-weight: 300;
}

.checkbox > label > input[type=checkbox] {
    margin: 0 15px 0 -20px;
}

.bt-checkout {
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    border-radius: 0;
    width: 80%;
    padding: 15px 15px;
    font-size: 1.1em;
    font-weight: 100;
    letter-spacing: 1px;
    color: #87868A;
    border: solid 1px #8e8f90;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.bt-checkout:hover {
    text-decoration: none;
    background-color: #87868A;
    border-color: #87868A;
    color: #fff;
}

/* Páginas Checkout
========================= */

/* partial breadcrumb */

.linha-separador {
    margin: 10px auto 45px auto;
}

.breadcrumb {
    background-color: transparent;
    font-size: 0.9em;
}

.breadcrumb li a {
    color: #87868A;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
    text-decoration: none;
}

.breadcrumb li a:hover {
    color: #000;
}

.breadcrumb li.active {
    color: #87868A;
    border-bottom: solid 1px #8e8f90;
}

.breadcrumb > li + li:before {
    display: none;
}

.breadcrumb li {
    margin-right: 35px;
}

/* left-box estilo para a linha vertical separadora do resumo saco_de_compras
	-> tem que ser aplicado na div onde entram os partials da coluna esquerda destas páginas, */

.left-box {
    height: auto;
    padding-right: 60px;
    border-right: solid 1px #8e8f90;
}

.carrinho-resumo-total {
    text-align: right;
    color: #87868A;
    font-size: 0.9em;
}

.carrinho-resumo-total h2 {
    font-weight: bold;
}

.carrinho-resumo-total h2 span {
    font-weight: 300;
    font-size: 0.5em;
}

#cod_desconto {
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#cod_desconto::-webkit-input-placeholder {
    color: #87868A;
    font-size: 0.9em;
    font-weight: 300;
    text-align: center;
}

#cod_desconto:-moz-placeholder {
    color: #87868A;
    font-size: 0.9em;
    font-weight: 300;
    text-align: center;
}

#cod_desconto::-moz-placeholder {
    color: #87868A;
    font-size: 0.9em;
    font-weight: 300;
    text-align: center;
}

#cod_desconto:-ms-input-placeholder {
    color: #87868A;
    font-size: 0.9em;
    font-weight: 300;
    text-align: center;
}

/* partial formulario_envio */

.titulo-form {
    color: #87868A;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 300;
    margin-bottom: 25px;
}

.form-envio,
.input-trotinete {
    color: #8e8f90!important;
}

.form-pagamento input,
.form-envio input,
.form-envio textarea,
.input-trotinete {
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 30px;
}

.form-pagamento input:focus,
.form-envio input:focus,
.form-envio textarea:focus,
.input-trotinete:focus {
    box-shadow: none!important;
    border-color: #8e8f90!important;
}

.form-envio input::-webkit-input-placeholder {
    color: #87868A;
    font-size: 0.9em;
    font-weight: 300;
    opacity: 0.6;
}

.form-envio input:-moz-placeholder {
    color: #87868A;
    font-size: 0.9em;
    font-weight: 300;
    opacity: 0.6;
}

.form-envio input::-moz-placeholder {
    color: #87868A;
    font-size: 0.9em;
    font-weight: 300;
    opacity: 0.6;
}

.form-envio input:-ms-input-placeholder {
    color: #87868A;
    font-size: 0.9em;
    font-weight: 300;
    opacity: 0.6;
}

.form-envio textarea {
    color: #87868A;
    font-size: 0.9em;
    font-weight: 300;
    opacity: 0.6;
}

.form-envio .radio input[type="radio"] {
    display: none;
    margin: 0!important;
}

.form-envio .radio label {
    width: 100%;
    height: 45px;
    margin: 0;
    color: #87868A;
    font-size: 0.9em;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(176, 177, 176, 0.5);
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.form-envio .radio label span {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding-top: 10px;
    display: block;
    width: 100%;
    height: 45px;
}

.form-envio .radio label:hover,
.form-envio .radio input[type="radio"]:checked ~ span {
    color: #fff;
    background-color: #87868A;
}


/* partial formulario_pagamento */

.form-pagamento {
    color: #87868A;
}

.form-pagamento .radio label {
    font-size: 0.9em;
}

.form-pagamento .radio input[type="radio"] {
    display: none;
    margin: 0!important;
}

.form-pagamento .radio label span {
    position: absolute;
    top: 5px;
    left: 0;
    width: 10px;
    height: 10px;
    border: solid 1px #8e8f90;
    margin-right: 10px;
}

.form-pagamento .radio input[type="radio"]:checked ~ span {
    background-color: #87868A;
}

.form-pagamento input::-webkit-input-placeholder {
    color: #87868A;
    font-size: 0.9em;
    font-weight: 300;
    opacity: 0.6;
}

.form-pagamento input:-moz-placeholder {
    color: #87868A;
    font-size: 0.9em;
    font-weight: 300;
    opacity: 0.6;
}

.form-pagamento input::-moz-placeholder {
    color: #87868A;
    font-size: 0.9em;
    font-weight: 300;
    opacity: 0.6;
}

.form-pagamento input:-ms-input-placeholder {
    color: #87868A;
    font-size: 0.9em;
    font-weight: 300;
    opacity: 0.6;
}


.bt-confirmar,
.bt-voltar {
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    border-radius: 0;
    width: 100%;
    font-weight: 300;
    letter-spacing: 1px;
    color: #87868A;
    border: solid 1px #8e8f90;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -ms-transition: all 500ms ease-out;
}

.bt-voltar {
    padding: 9px 26px;
    font-size: 0.9em;
}

.bt-confirmar {
    padding: 15px 15px;
    margin-top: -10px;
    font-size: 1em;
}

.bt-confirmar:hover {
    text-decoration: none;
    background-color: #87868A;
    border-color: #87868A;
    color: #fff;
}

/* partial formulario_confirmação */

.info-comprador p {
    font-size: 0.9em;
    color: #87868A;
    line-height: 2.6em;
}

.info-comprador p span {
    font-weight: 700;
}

.morada-selecionada {
    font-weight: 700;
    font-size: 0.9em;
    line-height: 2.6em;
    text-transform: uppercase;
}

.info-final p {
    font-size: 1em;
}

.info-final > div > p > span {
    text-transform: uppercase;
    font-weight: 400;
}

.info-comprador h4 {
    color: #87868A;
    font-size: 1.3em;
    font-weight: 700;
    margin-top: 35px;
}

.info-comprador .texto-apoio {
    font-size: 0.9em;
    color: #87868A;
}

/*
==============================================
    Área Pessoal
==============================================
*/

/* PARTIAL: aside_nav */

.areaPessoal {
    color: #87868A;
}

.areaPessoal aside {
    text-align: center;
    height: auto;
}

.saudacao {
    margin-bottom: 70px;
}

.saudacao h2 {
    text-transform: uppercase;
    font-size: 1.4em;
    line-height: 0.4em;
    font-weight: 300;
}

.saudacao button {
    position: absolute;
    top: -20px;
    right: 0;
}

.saudacao button span.icon-bar {
    background-color: #666;
}

.areaPessoal aside nav {
    display: block;
    height: auto;
}

.areaPessoal aside nav a {
    display: block;
    margin: 10px;
    color: #87868A;
    font-weight: 300;
    font-size: 0.9em;
}

.areaPessoal aside nav a:hover {
    color: #000;
    text-decoration: none!important;
}

.btn-aside-primary {
    text-transform: uppercase;
}

/* PARTIAL: colegio */

.areaPessoal .colegio-titulo {
    font-size: 1.8em;
    font-weight: 300;
    text-transform: uppercase;
}

.aluno-list {
    display: block;
    margin-top: 30px;
}

.dados-pessoais-editar {
    border-top: solid 1px #8e8f90;
    margin-top: 50px;
}

.dados-pessoais-editar h4 {
    font-weight: 300;
    line-height: 2.5em;
}

/* PAGE alunos */

.mensagem-sem-alunos h1 {
    font-size: 2em;
}

.mensagem-sem-alunos p {
    font-size: 1em;
}

/*
==============================================
    PAGE: FAQs
==============================================
*/

.pergunta {
    color: #87868A;
    cursor: pointer;
    padding: 0 auto;
}

.pergunta h3 {
    border-top: solid 1px #8e8f90;
    font-size: 1.1em;
    line-height: 1.6em;
    text-transform: uppercase;
}

.pergunta:hover,
.pergunta:focus {
    color: #000;
}

.resposta {
    padding-left: 50px;
}

.resposta p {
    font-size: 0.9em;
    line-height: 1.6em;
    color: #87868A;
}

.btFaqsModal {
    width: 400px;
    display: block;
    margin: 15px auto;
    font-size: 0.9em;
    padding: 10px;
}

#faqsModal .modal-content {
    border-radius: 0;
}

#faqsModal .modal-content {
    max-width: 600px;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
}

#faqsModal input,
#faqsModal textarea {
    border-radius: 0;
}

#faqsModal input:focus,
#faqsModal textarea:focus {
    border-radius: 0;
    box-shadow: none!important;
    border-color: #87868A;
}

#faqsModal input {
    height: 30px;
    margin-bottom: 25px;
}

#faqsModal input::-webkit-input-placeholder {
    color: #87868A;
    font-size: 0.8em;
    font-weight: 300;
}

#faqsModal input:-moz-placeholder {
    color: #87868A;
    font-size: 0.8em;
    font-weight: 300;
}

#faqsModal input::-moz-placeholder {
    color: #87868A;
    font-size: 0.8em;
    font-weight: 300;
}

#faqsModal input:-ms-input-placeholder {
    color: #87868A;
    font-size: 0.8em;
    font-weight: 300;
}

#faqsModal textarea {
    color: #87868A;
    font-size: 0.8em;
    font-weight: 300;
}

.head-form-faqs {
    color: #000;
    margin: 25px auto;
}

.head-form-faqs h3 {
    font-size: 1.4em;
    letter-spacing: 1px;
    line-height: 1em;
    margin: 0 auto;
    font-weight: 300;
}

.head-form-faqs p {
    font-size: 0.8em;
    font-weight: 300;
}

/*
==============================================
    PAGE: contactos
==============================================
*/

/* PARTIAL: mapa_morada */

.mapa {
    display: block;
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.mapa iframe {
    width: 100%;
    height: 600px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.no-scroll {
    pointer-events: none;
}

.morada {
    color: #87868A;
}

.morada a,
.morada a:hover {
    text-decoration: none;
    color: #87868A;
}

.morada h4 {
    font-size: 0.9em;
    font-weight: 700;
    line-height: 2em;
}

.morada p {
    font-size: 0.8em;
    line-height: 1em;
}

.morada p span {
    font-size: 1.1em;
}

.form-contactos input::-webkit-input-placeholder {
    font-size: 0.8em;
    color: #87868A;
}

.form-contactos input:-moz-placeholder {
    font-size: 0.8em;
    color: #87868A;
}

.form-contactos input::-moz-placeholder {
    font-size: 0.8em;
    color: #87868A;
}

.form-contactos input:-ms-input-placeholder {
    font-size: 0.8em;
    color: #87868A;
}

.form-contactos textarea {
    font-size: 0.8em;
    color: #87868A;
    height: 160px
}



/* PAGE: Guia Tamanhos*/

.guia_tamanhos img {
    display: block;
    margin: 50px auto;
}

nav.tamanhos-nav {
    height: 20px;
}

#crianca img.mobile,
#senhora img.mobile,
#senhor img.mobile,
#unisexo img.mobile {
    display: none;
}

/*
######## Media Querys ########
*/

/*
Large Screen >1366px
*/

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


    .hover_produto {
        padding-top: 680px;
    }
    .botoes-thumb-produto {
        top: 800px;
    }
    /* ficha artigo */
    #slider-artigo .item {
        width: 100%;
        /*height: 700px;*/
    }
    .mapa {
        height: 400px;
    }

}

.uppercase {
    text-transform: uppercase;
}

@media screen and (max-width: 360px) {
    #comprasMenu li a img {
        width: 25px;
        height: auto;
    }

}

div.pesquisa-mobile,
div.nav-user-mobile {
    display: none;
}


/* --------- smartphone ----------- */

@media screen and (max-width: 767px) {
    div.pesquisa-mobile,
    div.nav-user-mobile {
        display: block;
    }
    div.pesquisa-desktop,
    div.nav-user-desktop {
        display: none;
    }
    .nav-user-mobile .drop-carrinho.bag {
        position: absolute;
        left: -50%;
        transform: translate(-40%, 0);
        -webkit-transform: translate(-40%, 0);
        -o-transform: translate(-40%, 0);
        -moz-transform: translate(-40%, 0);
        -ms-transform: translate(-40%, 0);
    }
    .nav-user-mobile .drop-carrinho.wish {
        position: absolute;
        left: -40%;
        transform: translate(-47%, 0);
        -webkit-transform: translate(-47%, 0);
        -o-transform: translate(-47%, 0);
        -moz-transform: translate(-47%, 0);
        -ms-transform: translate(-47%, 0);
    }
    .nav-user-mobile .drop-carrinho.bag li {
        width: 295px;
    }
    .dropdown-menu .container-fluid {
        width: inherit;
    }
    .pesquisa-avancada {
        position: inherit;
    }
    .pesquisa-avancada a {
        color: #999;
    }
    .conteudo-pesquisa {
        padding-left: 5px;
    }
    .conteudo-pesquisa p {
        font-size: 12px;
        line-height: 20px;
    }
    .artigos-lista {
        margin-top: 10px;
    }
    #catalogoMenu {
        margin-bottom: 5px;
    }
    .titulo {
        margin-top: 20px;
        margin-bottom: 15px;
    }
    .titulo-portfolio {
        font-size: 1.1em;
        letter-spacing: 3px;
        margin-top: 20px;
    }
    .hovereffect .overlay {
        opacity: 1;
    }
    .drop-carrinho {
        left: -170px;
        width: 300px;
    }
    .drop-carrinho h2 {
        font-size: 1em!important;
    }
    .ir-para a {
        text-align: center;
    }
    .ir-para a div {
        margin: 0;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
    }
    .assinatura-footer {
        text-align: center;
    }
    .footer-form {
        margin-top: 20px;
        margin-bottom: 30px;
    }
    .top {
        height: 0px;
    }
    .padding,
    .padding-left-right-100 {
        padding: 25px;
    }

    #general-nav {
        min-height: auto;
    }
    #general-nav .navbar-brand img {
        width: 90px;
    }
    #navCollapse {
        margin-top: 30px;
    }
    #mainMenu {
        text-align: center;
        width: 100%;
        height: auto;
        margin: 0;
        margin-top: 0;
    }
    #mainMenu li {
        display: block;
        float: none;
    }
    #mainMenu li:last-of-type {
        border-bottom: solid #999 1px;
    }
    .navbar .navbar-collapse {
        text-align: center;
    }
    .navbar-fixed-bottom .navbar-collapse,
    .navbar-fixed-top .navbar-collapse {
        min-height: 600px;
    }
    #navUser {
        width: 100%;
        height: 30px;
        margin-top: 0;
    }
    #home-nav-white #mainMenu,
    #home-nav-white #navUser {
        background-color: rgba(255, 255, 255, 0.9);
    }
    #home-nav #mainMenu,
    #home-nav #navUser {
        background-color: rgba(135, 134, 138, 0.9);
        margin-bottom: 0;
    }
    #navUser li {
        margin-top: 10px;
        font-size: 0.8em;
    }
    #navUser li a {
        padding: 8px;
    }
    .drop-conta {
        left: -35px;
    }
    .drop-conta li {
        display: block;
        float: none;
    }
    #crianca img.large,
    #senhora img.large,
    #senhor img.large,
    #unisexo img.large {
        display: none;
    }
    #crianca img.mobile,
    #senhora img.mobile,
    #senhor img.mobile,
    #unisexo img.mobile {
        display: block;
        ;
    }

    body,
    html {
        margin-top: 40px;
        padding: 0;
    }

    .headline-marca {
        top: 20%;
    }
    .imagem-separador {
        /*height: 350px;*/
        background-position: 45% 0;
    }
    .projetos-titulo {
        padding: 10px 0 0 0;
    }
    .padding-50 {
        padding: 15px;
    }
    .footer-content {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .footer-nav {
        margin-top: 10px;
    }
    .bt-back-top {
        font-size: 0.7em;
    }
    .irpara a div {
        margin: 20px auto;
    }
    .head-caption img {
        width: 80%;
    }

    #catalogoMenu li a,
    #portfolioMenu li a {
        font-size: 0.7em;
        padding: 3px;
        margin: 0;
    }
    #catalogoMenu li,
    #portfolioMenu li {
        margin: 0;
    }
    nav.padding-50 {
        padding: 0px;
    }
    .catalogo-slider .owl-prev,
    .catalogo-slider .owl-next {

        top: 40%;
        font-size: 1em;
    }
    .catalogo-slider .owl-prev {
        left: 20px;
    }
    .catalogo-slider .owl-next {
        right: 20px;
    }

    .projetos-titulo hr {
        width: 220px;
    }
    .login-box {
        margin-bottom: 100px;
        margin-top: 50px;
    }
    .mapa {
        height: 220px;
        margin-top: 50px;
    }
    .mapa iframe {
        height: 220px;
    }

    .pergunta h3 {
        font-size: 0.9em;
    }

    .resposta {
        padding-left: 20px;
    }
    .resposta p {
        font-size: 0.8em;
        line-height: 1.4em;
    }
    .btFaqsModal {
        width: 220px;
        font-size: 0.7em;
        padding: 5px;
    }
    #faqsModal .modal-content {
        width: 280px;
    }
    #comprasMenu {
        margin-top: 20px;
    }
    #infoGeral,
    #comoComprar,
    #pagamento,
    #trocas {
        padding: 0;
    }
    #comprasMenu li {
        font-size: 0.6em;
    }
    #tamanhosMenu li a,
    #comprasMenu li a {
        padding: 2px;

    }
    #tamanhosMenu li {
        font-size: 0.7em;
    }
    #infoGeral h1,
    #comoComprar h1,
    #pagamento h1,
    #trocas h1 {
        font-size: 1.5em
    }
    #infoGeral h3,
    #comoComprar h3,
    #pagamento h3,
    #trocas h3 {
        font-size: 1em;
    }

    .guia_tamanhos img {
        margin: 20px auto;
    }

    .hover-thumb-catalogo {
        opacity: 1;
        background-color: rgba(100, 100, 100, 0.3);
    }
    .descricao-aluno p,
    .descricao-user p {
        font-size: 0.7em;
    }
    .aluno-list .text-right {
        text-align: center;
    }
    .icon-menu-compras {
        height: 45px;
    }
    #slider-artigo .item {
        width: 80%;
        margin-bottom: 15px;
    }
    #slider-artigo .owl-prev,
    #slider-artigo .owl-next {
        top: 45%;
    }
    #slider-artigo .owl-prev {
        left: 5px;
    }
    #slider-artigo .owl-next {
        right: 5px;
    }
    .titulo-artigos {
        position: absolute;
        top: -90px;
        left: 5px;
    }
    .hovereffect .overlay {
        opacity: 1;
        filter: alpha(opacity=100);
        top: 0px;
        background-color: rgba(100, 100, 100, 0.1);
    }
    .hovereffect .overlay h1 {
        margin-top: 300px;
    }
    .nomeUser-box {
        text-align: center;
    }
    .nomeAluno-box {
        text-align: center;
        border-right: none;
    }
    #artigosCategoriasMenu li {
        font-size: 0.7em;
        text-align: center;
    }
    #artigosCategoriasMenu li a {
        padding: 0;
    }

}

.navbar-default .navbar-nav > li > a {
    color: black;
}

article.hovereffect {
    margin-top: 30px;
}

/* -------- tablets----------- */

@media screen and (min-width: 768px) {

    #general-nav {
        min-height: auto;
    }
    .footer-content {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .footer-nav {
        margin-top: 10px;
    }
    .bt-back-top {
        font-size: 0.6em;
    }
    .banner {
        height: 400px;
    }
    #catalogoMenu li a {
        font-size: 0.9em;
    }
    .conteudo-pesquisa {
        padding-left: 10px;
    }
    .conteudo-pesquisa p {
        font-size: 12px;
        line-height: 20px;
    }

    #infoGeral,
    #comoComprar,
    #pagamento,
    #trocas {
        padding: 0;
    }
    .titulo {
        margin-top: 25px;
        margin-bottom: 20px;
    }



}

/* --------- small desktop screen ------------- */

@media (min-width: 767px) and (max-width: 1024px) {
    #mainMenu {
        float: right;
        padding-right: 15px;
        margin-top: 0;
    }
    #navUser {
        padding-right: 15px;
        margin-top: 0;
    }
    .drop-carrinho {
        left: -350px;
    }
    .hovereffect .overlay {
        opacity: 1;
        filter: alpha(opacity=100);
        top: 0px;
        background-color: rgba(100, 100, 100, 0.1);
    }
    .hovereffect .overlay h1 {
        font-size: 0.8em;
        padding: 8px 9px 6px;
    }
}

@media screen and (max-width: 1280px) {
    #mainMenu li a {
        font-size: 0.8em;
    }

    #mainMenu li a {
        padding-left: 10px;
        padding-right: 10px;
    }
    .drop-lang,
    .drop-conta,
    .drop-carrinho {
        top: 30px!important;
    }


}

/* --------- large desktop screen ------------- */

@media screen and (min-width: 1281px) and (max-width: 1366px) {
    #mainMenu li a {
        font-size: 0.9em;
    }


}

/**/

a,
a:hover {
    text-decoration: none;
}

.lista-mensagens {
    color: #999;
    height: 45px;
    margin-top: 20px;
    padding-top: 10px;
    border-bottom: solid 1px #87868A;
}

.lista-mensagens:hover {
    background-color: #f3f3f3;
}

.nao-lida {
    font-weight: bold;
    color: #666;
}

.form-control {
    height: auto;
}

.loader {
    border: 8px solid #f3f3f3;
    /* Light grey */
    border-top: 8px solid #999;
    /* Blue */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}



/* recrutamento */

#form_contacto .responsiv-uploader-fileupload {
    margin-bottom: 30px;
}

@media screen and (min-width:768px) {
    #form_contacto .responsiv-uploader-fileupload {
        margin-bottom: 0px;
        height: 44px;
    }

}