body{ font-family: 'Open Sans', sans-serif; background: url("../images/bg.jpg");  }
.clear{ display: block; clear: both; width: 0; height: 0;}
a:hover{ text-decoration: none;}

header{text-align: center; display: block; text-transform: uppercase; padding: 60px 0;}
header h1{ font-weight: 800; }
header h4{ font-weight: 300;}

#institucional_home{ display: block; padding: 0 0 50px 0;}
#institucional_home hr{border-top: 1px solid #b7b9b8;}

.whats{ margin-bottom: 30px; background: #008748; border: 5px solid #ededed; border-radius: 10px; -webkit-box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);-moz-box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);}
.whats a{ color: #fff; text-align: center; display: block; padding: 10px 0;}
.whats i{ display: inline-block; font-size: 20px; margin-right: 10px;}
.whats p{ display: inline-block; font-size: 20px; padding: 0; margin: 0;}
.whats p span{ font-size: 12px}
.whats a:hover{ background: #00bb2d; border-radius: 5px;}

.phone{ margin-bottom: 30px; background: #000; border: 5px solid #ededed; border-radius: 10px; -webkit-box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);-moz-box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);}
.phone a{ color: #fff; text-align: center; display: block; padding: 10px 0;}
.phone i{ display: inline-block; font-size: 20px; margin-right: 10px;}
.phone p{ display: inline-block; font-size: 20px; padding: 0; margin: 0;}
.phone p span{ font-size: 12px}
.phone a:hover{ background: #333; border-radius: 5px;}

.end{  margin-bottom: 30px; background: #000; border: 5px solid #ededed; border-radius: 10px; -webkit-box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);-moz-box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);}
.end a{ color: #fff; text-align: center; display: block; padding: 10px 0;}
.end i{ display: inline-block; font-size: 20px; margin-right: 10px;}
.end p{ display: inline-block; font-size: 14px; padding: 0; margin: 0; line-height: 12px; text-align: left;}
.end a:hover{ background: #333; border-radius: 5px;}

.mail{ margin-bottom: 30px; background: #000; border: 5px solid #ededed; border-radius: 10px; -webkit-box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);-moz-box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);}
.mail a{ color: #fff; text-align: center; display: block; padding: 10px 0;}
.mail i{ display: inline-block; font-size: 20px; margin-right: 10px;}
.mail p{ display: inline-block; font-size: 20px; padding: 0; margin: 0;}
.mail p span{ font-size: 12px}
.mail a:hover{ background: #333; border-radius: 5px;}

.site{ margin-bottom: 30px; background: #000; border: 5px solid #ededed; border-radius: 10px; -webkit-box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);-moz-box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);}
.site a{ color: #fff; text-align: center; display: block; padding: 10px 0;}
.site i{ display: inline-block; font-size: 20px; margin-right: 10px;}
.site p{ display: inline-block; font-size: 20px; padding: 0; margin: 0;}
.site p span{ font-size: 12px}
.site a:hover{ background: #333; border-radius: 5px;}

.redes{ margin-bottom: 30px; background: #d00b10; border: 5px solid #ededed; border-radius: 10px; -webkit-box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);-moz-box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);box-shadow: 0px 2px 5px 0px rgba(197,201,201,1);}
.redes a{ color: #fff; text-align: center; display: block; padding: 10px 0;}
.redes i{ display: inline-block; font-size: 25px; margin-right: 0px;}
.redes a:hover{ background: #f00; border-radius: 5px;}

.info{ display: block; padding: 0 0 50px 0;}
.info hr{border-top: 1px solid #b7b9b8;}
.info img{ }
.info h3{ padding: 0; margin: 0; font-weight: bold; padding-bottom: 10px;}
.info h6{padding: 0; margin: 0; font-weight: bold;}

.info .phone p{text-transform: uppercase; display: block;}
.info .phone b{ color: #ff1d06; font-size: 20px;}


.info2{ display: none;}

footer{ position: relative; display: block; padding:30px 0 0 0; background: url("../images/footer.jpg"); background-size: cover;}
footer h6{ padding: 0; margin: 0; font-weight: normal; color: #fff; text-transform: uppercase;}
footer .whats{ margin-top: 10px; width: 150px; padding: 0px 0;}
footer .whats p{ font-size: 15px !important;}
img.mao{ width: 150px; position: absolute; top: -57px;}
.ello{ position: absolute; right: 0; top:50px;}

#institucional_home2{ display: none}

@media only screen and (max-width: 1370px) and  (min-width:1000px){

}

@media only screen and (max-width: 999px) and (min-width: 100px)  {  
    .container{ width: 100%;}   
}

@media only screen and (max-width : 780px) and (min-width : 100px) {
    #institucional_home .whats i, #institucional_home .phone i, #institucional_home .end i, #institucional_home .mail i, .redes i, #institucional_home .site i{ margin: 0; font-size: 20px;}
    #institucional_home .whats p, #institucional_home .phone p, #institucional_home .end p, #institucional_home .mail p, #institucional_home .site p{ display: none}
    footer{ padding-bottom: 0;}
    .info{ display: none;}
    .info2{ display: block; padding-bottom: 50px;}
    .info2 img{ display: block; text-align: right; float: right;}
    .info2 h6{padding: 0; margin: 0; font-weight: bold;}
}

@media only screen and (max-width : 481px) and (min-width : 10px) {
    header{text-align: left; display: block; text-transform: uppercase; padding: 30px 0;}
    header h1{ font-weight: 800; font-size: 20px;}
    header h4{ font-weight: 300; font-size: 15px;}
    .info2{ text-align: center;}
    .ocultar480 { display: none}
    .cetralizar_img img{ float: none; padding-bottom: 20px; position: relative; margin: 0 auto;}
    .info2 .col-xs-8, .info2 .col-xs-4{ width: 100%;}
    footer .col-xs-3{ width: 50%;}
    
    img.mao{ width: 110px; position: absolute; bottom: 0px; top: 15px;}
    .ello{ position: absolute; right: 0; top:-30px; display: none}
    .ello img{ width: 30px;}
    
    .no-pd .col-xs-6{ padding-left: 0;}
    
    #institucional_home{ display: none;}
    #institucional_home2{ display: block}
    #institucional_home2 i{ margin: 0;}
}