/****************************************************
*        Desenvolvido por MXMAIS - 17/01/2018       *
****************************************************/

@charset "UTF-8";
a { color: #4A4C4E; }
a:hover { color: #4A4C4E; }
body {  }

.primary { color: #000; }

#h1 { font-size:63px; }
h4 { font-size:23px; }
/* proporções */
header, center, footer { width: 100%; margin: 0px auto; display: table; }
header { width: 100%; margin: auto; padding: 20px 0px ; background: #1C4566; display: table; }

container   { width: 90%; padding: 0 5%; margin:  0px auto; display: table; }
section     { width: 90%; padding: 0 5%; margin: 50px auto; display: table; }
/* proporções */


/* header */
header { position: fixed; width: 100%; top: 0; background: #1C4566; display: table; z-index: 100; }
.curva_top { position: absolute; width: 100%; height: auto; top: 10px; left: 0; z-index: 90; float:left; }
header .logo { width: 20%; float: left; margin: 0px 20px 0px 0px; }
header .menu { width: 47%; float: left; }
header .menu ul { list-style: none; margin: 10px 0; float: right; display: table; }
header .menu ul li { float: left; margin: 0 2.5px; }
header .menu ul li a { color: #fff; padding: 10px 15px; display: block; border-radius: 6px; }
header .menu ul li a:hover { color: #000; background: #FFF; box-shadow: 1px 1px 2px #000; }
header .menu ul li .marca { color: #000; font-style: oblique; background: #FFF; border-radius: 6px; box-shadow: 1px 1px 2px #000; }

/* header */

.fone { width:19%; height:20px; margin:0px auto; color:#fff; float:right; display:block; text-shadow:2px 2px 2px #000; text-align:center; }
.fone h1 { font-size:23px; margin:0px 0px; padding:0px 0px; font-weight:900; }
.fone h4 { font-size:21px; }
.icon-fone { width: 33px; margin: 0px auto; float: left; display: block; text-align:center; }
.zap { width: 25px; margin: 0px auto; float: left; display: block; text-align:center; } 

/* banners */
.banner { width: 100%; display: block; display:table; }
.banner-top { position: relative; width: 100%; height: auto;  margin: 0 auto; border-top: solid 101px #1C4566; }
/* banners */

/* center */
center {  }

.destaque { width: 30%; margin: 1.5%; background:; border-radius: 5px; float: left;  border: solid 1px #ccc; }
.destaque img { width: 90%; margin: 3%; border-radius: 9px; }
.destaque a { color: #4A4C4E; }
.destaque:hover img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.destaque h4 { font-size: 23px; color: #000; text-align:center; }
.destaque:hover { opacity: .8; }

/*** galeria ***/
center .galeria img { width: 15.0%; margin: .5%; display: table; border-radius: 9px; float: left; }
/*** galeria ***/

/*** Whatsapp ***/
.whatsapp { 
    position: fixed; width: 64px; height: 64px; margin: 0; padding: 0px; 
     right: 30px; bottom: 30px; display: table; z-index: 10000; 
    box-shadow: 0 0 0 0px rgba(40,135,106,1); background: #28876A; border-radius: 100%;
    animation: pulse 1s; animation-iteration-count: infinite;
}
.whatsapp img { width: 60%; padding: 20%; }

@-webkit-keyframes pulse {
    from { box-shadow: 0 0 0 0px rgba(40,135,106,1); }
    to { box-shadow: 0 0 0 45px rgba(40,135,106,0); }
}
/*** keyframes ***/
/*** Whatsapp ***/

#bt { width: auto; height: auto; padding: 10px; float: right; }
/* center */
.f-right { width: 30%; float: right; }
.f-left  { width: 60%; float: left;}
/* footer */
.info_footer { width: 90%; margin: 60px auto; text-align: center; color: #666; border-radius: 9px; }
.info_footer p { padding: 25px; font-size: 21px; }
.curva_bot { width: 100%; margin: 0 auto; display: block; }
footer { color: #FFFFFF; background: #1C4566; padding: 50px 0PX; }
footer a { color: #FFFFFF; font-weight: bolder; }
/* footer */

/*** social ***/
.social { position: fixed; width: 50px; top: 300px; left: 0px; z-index: 4000; text-align: left;  }
.social a { width: 32px; height: 32px; background: #1C4566; display: table; border-radius: 0 25px 25px 0; margin: 1px 0; float: left; box-shadow: 2px 2px 2px #000; }
.social a:hover { width: 50px; background: #FFC926; }
.social a img { width: 16px; margin: 8px; float: right; }

.social *, .social_float * { transition: width .5s, opacity .5s, background .5s; }
/*** social ***/

/*** slider ***/

.container_slider { position: relative; width: 100%; margin: 0 auto; border-top: solid 101px #1C4566; background: #ccc; }

.container_slider ul { list-style: none; }

.container_slider .slider { position: relative; width: 100%; margin:auto; -webkit-animation: fading 20s infinite; animation: fading 20s infinite; display: block; }
.container_slider .slider img { width: 100%; height: auto; margin-top:3px; }

.container_slider .container_bullets { position: absolute; left: 50%; transform: translate(-50%,-150%); }
.container_slider .bullets {
    display: inline-block; padding: 5px; text-align: center; border-radius: 50%;
    background: #CCCCCC; box-shadow: 2px 2px 2px #333;
}
.container_slider .bullets:hover { background: #1C4566; cursor: pointer; }
.container_slider .bullet_activated { background: #1C4566; }

.container_slider .prev { position: absolute; top: 53%; left: 20px; transform: translate(25%,-100%); }
.container_slider .next { position: absolute; top: 53%; right: 20px; transform: translate(-25%,-100%); }

.container_slider .button_floating { 
    font-size: 25px; 
    color: #FFFFFF; background: rgba(0, 0, 0, .9); 
    width: 40px; height: 40px; 
    line-height: 40px; 
    display: inline-block; 
    text-align: center; 
    overflow: hidden;
    cursor: pointer;
    border-radius: 100%;
}
.container_slider .button_floating:hover { color: #FFFFFF; background: #1C4566; }
/*** slider ***/

/*** up ***/
#up         { position: fixed; width: 32px; height: 32px; right: 15px; bottom: 55px; background: #1C4566; border: solid 3px #FFFFFF; } 
#up:hover   { opacity: .7; cursor: pointer; }
#up img { width: 100%; }

#up, #up:hover { transition: opacity .5s; }
/*** up ***/
/*** widget ***/

/*** Responsive ***/
@media only screen and (max-width: 1180px){
    /*** header ***/
    header .logo { width: 50%; float: none; margin: 0 25%; }
    header .menu { width: 100%; float: none; }
    header .menu ul { float: none; margin: auto; }
	.container_slider { margin: 0 auto; border-top: solid 318px #1C4566; }
	.fone { width:30%; height:20px; margin:0px auto; }
    /*** header ***/
    
    /*** contato ***/
    .contato label       { width: 50%; height: 25px; display: block; margin: 5px 0px; padding: 0px; float: left; }
    .contato input       { width: 50%; height: 30px; display: block; margin: 5px 0px; padding: 0px; }
    .contato select      { width: 50%; height: 30px; display: block; margin: 5px 0px; padding: 0px; }
    .contato textarea    { width: 50%; height: 70px; display: block; margin: 5px 0px; padding: 0px; } 
    /*** contato ***/
}

@media only screen and (max-width: 930px){
    /*** header ***/
    header .logo { width: 50%; float: none; margin: 0 25%; }
    header .menu { width: 100%; float: none; }
    header .menu ul { float: none; margin: auto; }
	header .menu ul li .marca { color: #000; font-style:oblique; background:#FFf; border-radius: 6px;  }
	.container_slider { margin: 0 auto; border-top: solid 288px #1C4566; }
	.fone { width:60%; height:20px; margin:20px auto; float: left; text-align:center; }
    /*** header ***/
    
    /*** contato ***/
    .contato label       { width: 50%; height: 25px; display: block; margin: 5px 0px; padding: 0px; float: left; }
    .contato input       { width: 50%; height: 30px; display: block; margin: 5px 0px; padding: 0px; }
    .contato select      { width: 50%; height: 30px; display: block; margin: 5px 0px; padding: 0px; }
    .contato textarea    { width: 50%; height: 70px; display: block; margin: 5px 0px; padding: 0px; } 
    /*** contato ***/
}
@media only screen and (max-width: 640px){
    /*** header ***/
	#h1 { font-size:23px; text-align: left; }
	#h2 { font-size:21px; text-align: left;  }
	h3 { font-size:22px; }
	.social { display: none; }
	header { height: 210px; position: absolute;}
    header .logo { width: 100%; margin: 0 0%; }
    header .menu ul li a { font-size: 15px; margin: 1px; padding: 5px 2px; }
	.destaque h4 { font-size: 21px; color: #000; text-align:center; }
	.curva_top { {display: none; }
	header .menu ul li .marca { color: #000; font-style:oblique; background:#FFF; border-radius: 6px;  }
	.container_slider { margin: 10 auto; border-top: solid 250px #1C4566; }
	.container_slider .slider img { height:200px;  }
	header .fone { width:80%; height:20px; margin:10px 10%; font-size:17px; text-align:center; }
	.fone h1{ font-size:19px; }
	.destaque { width: 98%; margin: 1%; border-radius: 15px; float: left; }
    /*** header ***/
	center .galeria img { width: 32.0%; margin: .5%; display: table; border-radius: 9px; float: left; }
	.f-right { width: 100%; float: right; }
    .f-left  { width: 100%; float: left;}
}
@media only screen and (max-width: 480px){
/*** header ***/
	.social { display: none; }
    header .logo { width: 100%; margin: 10 0%; }
    header .menu ul li a { font-size: 13px; margin: 1px; padding: 5px 2px; }
	.destaque h4 { font-size: 19px; color: #000; text-align:center; }
	.curva_top { {display: none; }
	header .menu ul li a { font-size: 12px; margin: 1px; padding: 5px 0.5px; }
	.container_slider { margin: 0 auto; border-top: solid 250px #1C4566; }
	.fone { width: 100%; margin: 10px auto; font-size:15px; }
	.fone h1{ font-size:19px; }
	.destaque { width: 98%; margin: 1%; border-radius: 15px; float: left; }
    /*** header ***/
}
/*** Responsive ***/