@font-face {font-family: "Montserrat-Regular";
  src: url("../fonts/07689d4eaaa3d530d58826b5d7f84735.eot"); /* IE9*/
  src: url("../fonts/07689d4eaaa3d530d58826b5d7f84735.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("../fonts/07689d4eaaa3d530d58826b5d7f84735.woff2") format("woff2"), /* chrome、firefox */
  url("../fonts/07689d4eaaa3d530d58826b5d7f84735.woff") format("woff"), /* chrome、firefox */
  url("../fonts/07689d4eaaa3d530d58826b5d7f84735.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("../fonts/07689d4eaaa3d530d58826b5d7f84735.svg#Montserrat-Regular") format("svg"); /* iOS 4.1- */
}
@font-face {font-family: "Montserrat-Semibold";
  src: url("../fonts/Montserrat-SemiBold.eot"); /* IE9*/
  src: url("../fonts/Montserrat-SemiBold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
   url("../fonts/Montserrat-SemiBold.woff") format("woff"), /* chrome、firefox */
   url("../fonts/Montserrat-SemiBold.ttf") format("truetype"); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}
@font-face {font-family: "Montserrat Bold";
   src: url("../fonts/Montserrat-Bold.ttf") format("truetype"); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}
@font-face {font-family: "Montserrat Medium";
  src: url("../fonts/montserrat-medium.ttf") format("truetype"); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}


html,
body {
  height: 100%;
  width: 100%;
}
body,html {
  font-size: 12px;
  font-family: 'Montserrat-regular', Arial;
}

@media (max-width:500px){
  html{
    font-size: 12px;
  }
}
@media (min-width:500px) and (max-width:768px){
  html{
    font-size: 12px;
  }
}
@media (min-width:768px) and (max-width:1100px){
  html{
    font-size: 12px;
  }
}

/*NAVBAR DESKTOP*/
.container_menu{
  width: 100%;
  height: auto;
  position: fixed;
  z-index: 10;
  height: 85px;
  transition: 400ms;
  top: 0px;
}
.centerF {
  width: 783px;
  height: auto;
  margin: 0 auto;
  position: relative;
}
.menuF {
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  margin-top: 12px;
 }
 .menuF img{
  height: 60px;
  float: left;
  cursor: pointer;
 }
 .txtmenuF {
  font-family: 'Montserrat', Arial;
  font-size: 13px;
  color: #fff;
  padding: 0px 0px 0px 20px;
  display: inline;
  float: left;
  text-align: center;
  text-transform: uppercase;
 }
 .txtmenuF:hover{
     text-decoration: underline !important;
 }
 .txtmenuC {
  font-family: 'Montserrat', Arial;
  font-size: 13px;
  color: #F88006;
  padding: 0px 0px 0px 20px;
  display: inline;
  float: left;
  text-align: center;
  text-transform: uppercase;
 }
 @media (min-width: 951px){
     #divMenu, #menuMobilie{
         display: none;
     }
 }
 /*NAVBAR MOBILE*/
 @media all and (max-width:950px){
   .centerF, #divMenu, .container_menu{
    display: none;
   }

   .container_menu{
       width: 100%;
       height: auto;
       position: fixed;
       z-index: 10;
       height: 75px;
   }
   .centerF {
       width: 950px;
   height: auto;
   margin: 0 auto;
   position: relative;
   }
   .menuF {
       display: inline;
       float: left;
       width: 100%;
       height: auto;
       margin-top: 0px;
    }
    .menuF img{
        width: 14%;
    float: left;
    padding-right: 20px;
    margin-top: -12px;
    margin-left: -20px;
    cursor: pointer;
    }
    .txtmenuF {
        font-family: 'Montserrat', Arial;
        font-size: 13px;
        color: #FFF;
        padding: 20px 0px 0px 20px;
        display: inline;
        float: left;
        text-align: center;
        text-transform: uppercase;
        margin-top: 8px;
    }
    .txtmenuF:hover{
        text-decoration: underline !important;
    }
    .txtmenuC {
        font-family: 'Montserrat', Arial;
    font-size: 14px;
    padding-bottom: 10px;
    padding-top: 10px;
    float: left;
    width: 100%;
    text-align: center;
    color: #F88006;
    padding-left: 0;
    }
    #iconMenuMobile{
        height: 40px;
        float: right;
        cursor: pointer;
        margin-top: 10px;
        margin-right: 10px;
    }

    #menuMobileContain{
        background-color: #FFF;
        display: none;
        width: 100%;
        float: left;
        margin-top: 10px;
        padding-bottom: 10px;
    }

    #iconMenuLogo{
        height: 40px;
        float: left;
        margin-left: 30px;
        margin-top: 10px;
    }

    .txtmenu1 {
        font-family: 'Montserrat', Arial;
        font-size: 14px;
        padding-bottom: 10px;
        padding-top: 10px;
        float: left;
        width: 100%;
        text-align: center;
            color: #000;
    }
    .txtMenuSelected{
      font-family: 'Montserrat', Arial;
        font-size: 14px;
        padding-bottom: 10px;
        padding-top: 10px;
        float: left;
        width: 100%;
        text-align: center;
            color: #F88006;
        cursor: default;
    }
    .txtmenu1:hover { background-color:#c3c3c3}

    #menuMobilie{
        height: 60px;
        width: 100%;
        background-color: #FFF;
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 5;
    }
 }
 /*mobile*/
@media (min-width: 768px) {
  .navbar-default {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.3);
        padding-top: 10px;
  }
  .navbar-default .navbar-header .navbar-brand {
    height: auto;
    color: rgba(255, 255, 255, 0.7);
  }
  .navbar-default .navbar-header .navbar-brand img {
    max-width: 160px;
  }
  .navbar-default .navbar-header .navbar-brand:hover,
  .navbar-default .navbar-header .navbar-brand:focus {
    color: white;
  }
  .navbar-default .nav > li > a,
  .navbar-default .nav > li > a:focus {
    color: #fff;
  }
  .navbar-default .nav > li > a:hover,
  .navbar-default .nav > li > a:focus:hover {
    color: #00CCFF;
  }
  .navbar-default.affix {
    background-color: white;
    border: 1px solid;
    border-color: rgba(34, 34, 34, 0.05);
    padding-top: 10px;
  }
  .navbar-default.affix .navbar-header .navbar-brand {
    color: #00CCFF;
    font-size: 14px;
  }
  .navbar-default.affix .navbar-header .navbar-brand:hover,
  .navbar-default.affix .navbar-header .navbar-brand:focus {
    color: #eb3812;
  }
  .navbar-default.affix .nav > li > a,
  .navbar-default.affix .nav > li > a:focus {
    color: #222222;
  }
  .navbar-default.affix .nav > li > a:hover,
  .navbar-default.affix .nav > li > a:focus:hover {
    color: #00CCFF;
  }
  .navbar-default.affix .btn-login,
  .navbar-default.affix .btn-login:focus:hover {
    color: #00CCFF !important;
border: 2px solid #00CCFF;
  }
  .navbar-default .btn-login,
  .navbar-default .btn-login:focus:hover {
    color: #FFF !important;
    border: 2px solid #FFF;
  }

}
  
  #btn-scroll-top {
      display: none;                  /* Hidden by default */
      position: fixed;                /* Fixed/sticky position */
      bottom: 80px;                   /* Place the button at the bottom of the page */
      right: 30px;                    /* Place the button 30px from the right */
      z-index: 99;                    /* Make sure it does not overlap */
      border: none;                   /* Remove borders */
      outline: none;                  /* Remove outline */
      background-color: transparent;  /* Set a background color */
      color: white;                   /* Text color */
      cursor: pointer;                /* Add a mouse pointer on hover */
      padding: 15px;                  /* Some padding */
      border-radius: 0px;             /* Rounded corners */
      border: 1px solid #FFF;         /* Border thickness */
  }
  
  #btn-scroll-top:hover {
      background-color: transparent; /* Add a dark-grey background on hover */
  }



  .link-material-de-apoio{
    color: #F88006 !important;
    cursor: default;
    pointer-events: none;
  }
  .link-material-de-apoio:hover{
    text-decoration: none !important;
  }


  /*HOME*/
  #home{
    background:url(../material-de-apoio/img/home-banner.jpg);
    height: 0;
    padding-top: 40%;
    background-size: cover;
    background-position: top center;
    position: relative;
    background-color: #000;
    min-height: 100vh;
  }
  @media (max-width:767px){
      #home{
        margin-top: 56px;
      }
  }
  @media (min-width:551px) and (max-width:940px){
    #home{
        background:url(../material-de-apoio/img/home-banner-m.jpg);
        background-size: cover;
        background-position: top center;
        padding-top: 72%;
    }
  }
  @media(max-width:550px){
      #home{
        background:url(../material-de-apoio/img/home-banner-s.jpg);
        background-size: cover;
        background-position: top center;
        padding-top: 150%;
        margin-top: 56px;
      }
  }
  #home h1{
    font-size: 4em;
    width: 90%;
    margin: auto;
}
#home h2{
    width: 90%;
    margin: auto;
}
  .container-top{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    top: 50%;
    transform: translatey(-50%);
    color: #fff;
    text-transform: uppercase;
  }
  .container-top img{
    width: 50%;
    max-width: 200px;
  }
  .fade-img{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #000B21 2vh, #00000073, #00000091);
  }
  

  /*EXPLICACAO*/
  #explicacao{
      background-color:#000B21;
      color:#fff;
      text-align: center;
      padding-bottom: 60px;
      font-family: 'Montserrat';
  }
  #explicacao p{
    font-size: 1.2rem;
    width: 90%;
    margin: auto;
  }
  @media (max-width:768px){
      #explicacao br, #materiais h2 br, #home h1 br, #home h2 br{
          display: none;
      }
  }
  .flex-cards{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
  }
  .card{
    margin:0px 20px 0px 20px;
  }
  .card img{
      width: 150px;
  }


  /*MATERIAIS DE APOIO*/
  #materiais{
      text-align: center;
      position: relative;
      padding:100px 0px 100px 0px; 
  }
  #materiais h2{
      font-family: 'Montserrat';
      font-weight: bold;
      text-transform: uppercase;
      margin: 0;
      width: 90%;
      margin: auto;
  }
  .flex-materiais{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin-top: 50px;
    max-width: 720px;
    margin: auto;
  }
  @media(max-width:719px){
    .flex-materiais{
      max-width: 480px;
    }
  }
  @media(max-width:479px){
    .flex-materiais{
      max-width: 240px;
    }
  }


  .flex-materiais a{
    text-decoration: none;
  }
  .box{
    width: 200px;
    height: 200px;
    margin: 40px 20px 0px 20px;
    transition: all .2s ease-in-out;
    display: flex;
    align-items: center;
  }
  .box p{
    margin: auto;
    color: #fff;
    font-size: 18px;
  }
  .box:hover{
    transition: all .2s ease-in-out;
    transform: scale(1.05);
  }

  #box-asb{
    background:url(../material-de-apoio/img/box/box-asb.jpg);
  }
  #box-cpet{
    background:url(../material-de-apoio/img/box/box-cpet.jpg);
  }
  #box-enem{
    background:url(../material-de-apoio/img/box/box-enem.jpg);
  }
  #box-preparatorios{
    background:url(../material-de-apoio/img/box/box-preparatorios.jpg);
  }
  #box-profissionalizantes{
    background:url(../material-de-apoio/img/box/box-profissionalizantes.jpg);
  }
  #box-samatec{
    background:url(../material-de-apoio/img/box/box-samatec.jpg);
  }
  #box-unoeste{
    background:url(../material-de-apoio/img/box/box-unoeste.jpg);
  }
  #box-estudo-para-todos{
    background:url(../material-de-apoio/img/box/box-ept.jpg);
  }
  #box-vmc{
    background:url(../material-de-apoio/img/box/box-vmc.jpg);
  }
 


/*SEÇÃO RODAPE*/
.rodlogo{
    display:inline;
    float:left;
     width:100%;
       height:262px;
       background:url(../img/rodape/logorod.png) center center no-repeat;
        margin-top:30px;
   
   }
   .divrodape {
       display: inline;
       float: left;
       width: 100%;
       background-color: #E1E5E8;
       margin-top: 0px;
       background-position: top center;
       background-repeat: no-repeat;
       background-size: cover;
       min-height: 245px;
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
    }
   .fadeBannerRod{
       width: 100%;
       background: linear-gradient(to top, #000b21a1 2vh, #0000001a, #000b2100);
       position: absolute;
       height: 100%;
   }
   .divrodape p{
       color: #000;
       position: absolute;
       bottom: 10px;
       z-index: 5;
       font-size: 10px;
   }