@font-face {
    src: url(../fonts/acherus-grotesque.otf);
    font-family: 'Acherus';    
} 
@font-face {
    src: url(../fonts/armin-soft-semi-bold.ttf);
    font-family: 'Armin';    
} 

*{
	padding: 0px;
	margin: 0px;
}
#barra{
	 width: 100%;
	 height: 40px;
	 background-color: #2A636C;
}
#barra .area1{
	    display: block;
	    float: left;
	    padding-top: 10px;
}
#barra .area1 p{
	     font-family: 'Acherus';
	     font-size: 0.9em;
	     display: inline;
	     color: white;
	     margin-right: 10px;
	     height: 50px;
}
#barra .area1 .ponto{
            display: inline-block;
            margin-right: 10px;
}
#barra .area2{
	    display: block;
	    float: right;
}
#barra .area2 .custom{
	    background-color: transparent;
	    color: white;
	    border: none;
	    margin-top: 10px;
}
#barra .area2 .custom option{
         background-color: #2A636C;
         font-family: 'Acherus';
	     font-size: 0.9em;
}
#home {
	background: #FFFFE0;
	color: black;
}

.navbar-nav .nav-item .nav-link{
	          font-family: 'Armin';
	          font-size: 1.1em;
	          font-weight: 300;
}
.display-4{
	   font-family: 'Acherus';
}

#about{
	 background-color: #1E6675;
	 padding: 60px 1px;
}
#about h2, #about h4{
	    color: white;
}
#about .titulo{
	     font-family: "Armin";
	    font-weight: bold;
	    color:  #F8C536;
	    margin-bottom: 40px;
}
#about p{
	 color: white;
	 font-size: 18px;
}
#services{
       background: #FFFFE0;
}
#services .titu{
	    padding: 30px 0px;
	    text-align: center;
}
#services .titu h2{
       color:  #F8C536;
       font-family: "Armin";
	   display: block;
	   background-color: #2A636C;
	   width: 180px;
	   text-align: center;
	   margin: 0 auto;
}
#services .box{
	       text-align: center;
	       display: block;
	       width: 90%;
           padding-bottom: 0px;
	       background-color: white;
	       margin-left: auto;
	       margin-right: auto;
	       margin-bottom: 10px;
	       box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.75);
}
#services .box img{
	       width: 80px;
	       margin-bottom: 15px;
	       margin-top: 15px;
}
#services .box h3{
	        font-family: "Armin";
	        font-size: 26px;
}
#services .box h3, #services .box p{
	        margin: 10px 30px;
}
#services .box a{
	        background-color: #2A636C;
	        display: block;
	        padding: 10px 0px;
	        color: #fff;
	        font-weight: bold;
	        transition: 1s;
}
#services .box a:hover{
	        text-decoration: none;
	        background-color: #F8C536;
	        color: black;
	        transition: 1s;
}
#contacts{
	  margin-bottom: 20px;
}
#contacts .formul{
	       position: relative;
}
#contacts .formul .fundo{
	         background-color: #1E6675;
	         height: 365px;
	         width: 100%;
	         position: absolute;
	         top: 60px;
	         z-index: -1;
}
#contacts .formu{
           background-color: white;
           border: 1px solid black;
           z-index: 10;
}
#contacts img{
          width: 340px;
          margin-left: -30px;
}
#contacts .titu{
	    padding: 30px 0px;
	    text-align: center;
}
#contacts .titu h2{
       color:  #F8C536;
       font-family: "Armin";
	   display: block;
	   background-color: #2A636C;
	   width: 180px;
	   text-align: center;
	   margin: 0 auto;
}
#rodape{
	  background-color: #2A636C;
	  padding: 15px 1px;
}
#rodape h2{
	    font-size: 25px;
	    font-family: "Armin";
	    font-weight: bold;
	    color:  #F8C536;
}
#rodape .rod1 p{
	    color: #fff;
	    font-family: "Acherus";
	    font-size: 0.9em;
}
#rodape .rod2{
	    padding: 0px 70px;
	    color: #fff; 
}
#rodape .rod2 .email{
	     text-decoration: underline;
}
#rodape .rod3{
	     padding: 0px 80px;	 
}
#rodape .rod3 img{
	      margin-top: 20px;
	      width: 38px;
}


footer p a{
	  margin: 5px 15px;
}

 /* media queries */

 @media screen and (max-device-width: 992px){

        #home .img-head img{
        	  width: 400px;
        	  margin-right: -20px;
        }

       #rodape .rod2, #rodape .rod3{
                padding: 0px 15px;	 
       }

}

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

      .headline{
      	    padding: 50px 10px;
      }

       #home .headline{
       	    text-align: center;
       }

       #about .abtext{
       	     text-align: center;
       	     margin-top: 30px;
       }
       #contacts .formul .fundo{
	            top: 510px;
       }



}

 @media screen and (max-device-width: 576px){

      #barra .area1{
      	     display: none;
      }
}

@media screen and (max-device-width: 450px){

      .display-5{
      	  font-size: 30px !important;
      }


}