/*  css base da página INDEX */

body,
html {
    width: 100%;
    height: 100%;
    margin:0px;
}

body{font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
}

ul { margin: 0; padding: 0; }

.centralizado-pai { /*use no div externo*/
    position: relative;
}
.centralizado-filho { /*use no div interno que dai o mesmo vai ser centralizado no div externo*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.wholepage{
    height: 100%;
}

.float-left{float:left;}
.float-right{float:right;}

.small{
    width:auto;
    width:400px;
}
.large{
    cursor:pointer;
    width:auto;
    height:400px;
}

.visibility{display:visible;}

/*HEADER---------------------------------------------------------------------*/

#logo{
    margin: 8px;
    float: left;
    width: 150px;
    height: 40px;
    background: url(../img/logo-1.png) no-repeat center;
    display: block;
    margin-bottom:0px;
}

.topnav{
    height:55px;
    width:100%;
    font-weight:100;
    color:black;

    background: #474749; /* Old browsers */
    background: -moz-linear-gradient(top, #474749 0%, #474749 49%, #404041 50%, #404041 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#474749), color-stop(49%,#474749), color-stop(50%,#404041), color-stop(100%,#404041)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #474749 0%,#474749 49%,#404041 50%,#404041 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #474749 0%,#474749 49%,#404041 50%,#404041 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #474749 0%,#474749 49%,#404041 50%,#404041 100%); /* IE10+ */
    background: linear-gradient(to bottom, #474749 0%,#474749 49%,#404041 50%,#404041 100%); /* W3C */

    position:relative;

    top:0;
    left:0;
    z-index:999;

    padding-bottom:0;
    margin-bottom:0;
    box-shadow: 0px 1px 20px #404041;
}

.topnav ul{margin-top:0;margin-left:0;z-index:990;}
.topnav a{text-decoration:none;color:#d1d2d4;font-weight:300;}
.topnav a:hover, a:active{color:white;}

.topnav nav {
    float: right;
    padding: 5px;
}

#menu-icon { /*icone que aparece no lugar do menu quando em mobile*/
    z-index:10;
    display: hidden;
    width: 40px;
    height: 40px;
    background:  #fee445 url(../img/menu-icon.png) center;

}

a:hover#menu-icon {
    background-color: #f9d835;
}

ul {
    list-style: none;
}

.topnav li {
    display: inline-block;
    float: left;
    padding: 10px
}

/*MAIN IMG---------------------------------------------------------------------*/
.icons{
    background:url(../img/icons-sprite.png) no-repeat; /*imagem em png com todos os sprites*/
    background-size: 28px;
}

.icons.one{
    background-position: 0px 0px;
}

.icons.two{
    background-position: 0px -38px;
}

.icons.three{
    background-position: 0px -76.3px;
}

.icons.four{
    background-position: 0px -114px;
}

.icons.five{
    background-position: 0px -152px;
}

.mainimg { /*imagem principal*/

    min-height:60%;
    max-height:92%;

    text-align: center;
    color: #f8f8f8;
    background: url(../img/mainbg.jpg) no-repeat center center;
    background-size: cover;

    float:top;

    width:100%;
}

.header-large a{text-decoration:none;color:black;}
.header-large a:hover, a:active{color:grey;}

input[type=submit]{ /*customiza input de submit*/
  border: 0;
  width:210px;
  height:40px;
  white-space: normal;
  text-align:center;
  background: #fee445;
  margin:25px;

  color: black;
  padding: 5px 14px;
  font-weight: 300;
  font-size: 18px;
  text-decoration: none;
  display: inline-block; /* needed for anchors */

    -webkit-box-shadow: 0px 4px 0px 0px rgba(249, 183, 38, 1);
    -moz-box-shadow:    0px 4px 0px 0px rgba(249, 183, 38, 1);
    box-shadow:         0px 4px 0px 0px rgba(249, 183, 38, 1);
  }

input[type=submit]:hover{
    background:#f9d835;
    cursor:pointer;
 }

input[type=submit]:active{ /*customiza pra quando estiver ativo (click)*/
    -moz-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    -o-transform: translateY(4px);
    -ms-transform: translateY(4px);
    transform: translateY(4px);

    -webkit-box-shadow: 0px 1px 0px 0px rgba(50, 50, 50, 0.47);
    -moz-box-shadow:    0px 1px 0px 0px rgba(50, 50, 50, 0.47);
    box-shadow:         0px 1px 0px 0px rgba(50, 50, 50, 0.47);
  }

.etapas{ /*footer do fold, contém as etapas para navegação*/
    position:relative;
    width:100%;
    //height:125px;
    top:0%;
    margin-top:0px;
    text-align:center;

    background-color:#404041;

    box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.5);
}

.etapas-content h4 a{color:#D1D3D4}
.etapas-content{text-align:center;}
.etapas a{padding-left:50px;padding-right:50px;}
.etapas-content a:link{color:#D1D3D4;font-weight:300;text-decoration:none;}
.etapas-content a:hover, .etapas a:active {color:white;text-decoration:none;}

/*COMO UTILIZAR---------------------------------------------------------------------*/
#titulo-etapa{
   height:80px;
   line-height: 80px;
   font-size: 30px;
   text-align: center;
   background-color:#FEE545;
   margin: 0;
   padding: 0;
   position: relative;
   margin-bottom: 25px;
}

#titulo-etapa:after{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #FEE545 transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -15px;
    left: 50%;
    margin-left: -17.5px;
}

section#main-content section.clear-fix .titulo-section{
   height: 55px;
   line-height: 55px;
   font-size: 18px;
   text-align: left;
   background-color:#FEE545;
   text-indent:50pt;
}

section#main-content section.clear-fix:after{
   content: " ";
   display: block;
   height: 0;
   clear: both;
}

section#main-content section.clear-fix{
  position:relative;
    height: 100%;

    display: block;
    width: 100%;
}

section#main-content section.clear-fix .texto{

    text-align: justify;
    height: 100%;
    font-size: 1.1em;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    padding: 50px;

}
section#main-content section.clear-fix .livro{
    height: 100%;
    float: right;
    width: 400px;
    z-index: 999;

    clear:both;
    margin:50px;

}

.livro p{text-align:center;color:#b7b7b7;}

.mainA{
    position:relative;
    top:0;
    width:100%;
    height:800px;
    background-color:#fef6ee;
    padding-top:0;
}

.mainA-content{
    width:90%;
    height:90%;
}

.mainA-content p{font-size:16px;line-height:170%;}
.mainA-content li{padding:10px;}

/*FOOTER---------------------------------------------------------------------*/

.footer{
    width:100%;
    height:55px;
    background-color:#474749 ;
}

.footer-left{ /*imagem do nuted*/
    height:30px;
    margin-top:15px;
    margin-left:15px;
    float:left;
}

.footer-center{
    text-align:center;
    margin-left:-20px;
}

.footer-right{ /*informações do site*/
    height:35px;
    margin-top:10px;
    font-style:italic;
    font-size:14px;
    text-align:right;
    color:#575757;
}

.footer-right li{display:inline;}
.footer a{padding-left:0px;padding-right:00px;}
.footer a:link{color:#d1d2d4;font-weight:100;text-decoration:none;}
.footer a:hover{color:white;text-decoration:none;}