/****************************************************

*        Desenvolvido por MXMAIS - 17/01/2018       *

****************************************************/



@charset "UTF-8";



body {  }



.primary { color: #F2000E; }



#h1-aguamax { font-size:63px;}

h4 { font-size:17px}

/* proporções */

header, center, footer { width: 100%; max-width: 1366px; margin: 0px auto; display: table; }

header { width: 100%; max-width: 1366px; margin: auto; padding: 20px 0px; background: #f00; 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: #f00; display: table; z-index: 100; }


header .logo { width: 20%; float: left; }

header .menu { width: 47%; float: right; }

header .menu ul { list-style: none; margin: 40px 0px 0px 0px; float: right; display: table; }

header .menu ul li { float: left; margin: 0 2.5px; }

header .menu ul li a { color: #fff; text-shadow: 2px 2px 2px #000; padding: 10px 15px; display: block; border-radius: 6px; }

header .menu ul li a:hover { color: #F2000E; background: #F0FE00; }

.marca { color: #000; font-style:oblique; background-image:url(../_img/base.jpg); border-radius: 6px;  }

.marca li { color: #000;}

/* header */



.fone-topo { width:100%; height:auto; margin:0px 30px; color:#CCC; font-size: 19px; float:left; display:block; text-shadow:2px 2px 2px #000; text-align: center; background: #FF0004; }

.icon-fone { width: 30px; margin: 0px auto; float: left; display: block; text-align:center; }

.zap { width: 25px; margin: 0px auto; float: left; display: block; text-align:center; } 

px



/* banners */

.banner { width: 100%; max-width: 1366px; display: block; display:table; }

.banner-top { position: relative; width: 100%; height: auto;  margin: 35px auto; border-top: solid 101px #f00; }

/* banners */


/*** slider ***/



.container_slider { position: relative; width: 100%; max-width: 1366px; margin: 35px auto; border-top: solid 101px #f00; 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: #CB0000; cursor: pointer; }

.container_slider .bullet_activated { background: #CB0000; }



.container_slider .prev { position: absolute; top: 50%; left: 20px; transform: translate(25%,-100%); }

.container_slider .next { position: absolute; top: 50%; 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%;

}

.box-slider { width:33%; height:50px; background:#FFf; float:left; display:table; text-align:center;}

.container_slider .button_floating:hover { color: #FFFFFF; background: #CB0000; }

/*** slider ***/



/* center */

center {  }



.destaque { width: 23%; margin: 0.5%; border-radius: 5px; float: left;  border: solid 1px #ccc; }

.destaque img { width: 90%; margin: 3%; border-radius: 5px; }

.destaque h4 { font-size: 15px; color: #000; text-align:center; }

.destaque:hover { opacity: .8; }



/*** Formulario de Contato ***/

.contato { width: 100%; display: table; }



.contato label { width: 20%; height: 30px; margin: 5px 0; float: left; text-align: left; }



.contato input, .contato select, .contato textarea { width: 80%; margin: 5px 0; padding: 5px; border: solid 1px #A4A4A4; color: #A4A4A4; }

.contato input:hover, .contato select:hover, .contato textarea:hover { border: solid 1px #333333; color: #333333; }



.contato input       { height:  30px; }

.contato select      { height:  30px; }

.contato textarea    { height: 100px; }



.contato input:focus       { border: solid 1px #333333; color: #333333; }

.contato textarea:focus    { border: solid 1px #333333; color: #333333; }



#bt { width: auto; height: auto; padding: 10px; float: right; }

/* center */



/* footer */

.info_footer { width: 90%; margin: 60px auto; text-align: center; color: #666; border-radius: 6px 6px 6px 6px; }

.info_footer p { padding: 25px; font-size: 16px; }

.curva_bot { width: 100%; max-width: 1366px; margin: 0 auto; display: block; }
footer { color: #FFFFFF; background: #F2000E; border-top: solid 2px #F0FE00; padding: 25px 0PX; }
footer a { color: #FFFFFF; font-weight: bolder; }
/* footer */

/* Whatsapp */
.whatsapp { 
    position: fixed; width: 76px; height: 76px; 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: #fff; border-radius: 100%;
    animation: pulse 1s; animation-iteration-count: infinite;
}
.whatsapp img { width: 60%; padding: 20%; z-index: 100; }
/* Whatsapp */
/* Keyframe Whatsapp*/

@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); }
}

@-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); }
}
.whatsappb img { width: 152px; height: auto; position: fixed; margin: 0; padding: 0px; 
    right: 69px; bottom: 48px; display: table; z-index: 10; }
/* Keyframe Whatsapp*/


/*** widget ***/
.direitos { width: 100%; font-size: 15px; color: #fff; text-align: center; }

/*** social ***/

.social { position: fixed; width: 50px; top: 300px; left: 0px; z-index: 4000; text-align: left;  }

.social a { width: 32px; height: 32px; background: #F2000E; 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: #FF0; }

.social a img { width: 16px; margin: 8px; float: right; }



.social *, .social_float * { transition: width .5s, opacity .5s, background .5s; }

/*** social ***/


/*** up ***/

#up         { position: fixed; width: 32px; height: 32px; right: 15px; bottom: 55px; background: #CB0000; 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 #f00; }

	.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; }

	.marca { color: #000; font-style:oblique; background:#FF0; border-radius: 6px;  }

	.container_slider { margin: 0 auto; border-top: solid 288px #f00; }

	.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: 480px){

    /*** header ***/

	header { width: 100%; height: 70px; top: 0; padding: 20px 0px; }

    header .logo { width: 70%; margin: 0px 50px; }

    header .menu ul li a { font-size: 12px; margin: 1px; padding: 5px 2px; }
	.banner-top { width: 100%; margin: 75px auto; }
	.destaque h4 { font-size: 12px; color: #FFFFFF; text-align:center; }

	.marca { color: #000; font-style:oblique; background:#FF0; border-radius: 6px;  }

	.box-slider { width:100%; height:50px;}

	.container_slider { margin: 0 auto; border-top: solid 170px #f00; }

	.fone-topo { width: 100%; margin: 0px auto; font-size:15px; }

	.destaque { width: 98%; margin: 1%; border-radius: 15px; float: left; }

    /*** header ***/

}

@media only screen and (max-width: 320px){

/*** header ***/

    header .logo { width: 100%; margin: 10 0%; }

    header .menu ul li a { font-size: 12px; margin: 1px; padding: 5px 2px; }

	.destaque h4 { font-size: 12px; color: #FFFFFF; text-align:center; }

	.marca { color: #000; font-style:oblique; background:#FF0; border-radius: 6px;  }

	.box-slider { width:100%; height:50px;}

	.container_slider { margin: 0 auto; border-top: solid 290px #f00; }

	.fone { width: 100%; margin: 10px auto; font-size:23px; }

	.destaque { width: 98%; margin: 1%; background: #F2000E; border-radius: 15px; float: left; }

    /*** header ***/

}

/*** Responsive ***/