@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*mo
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */
.sm { display: block;}
.bg { display: none;}
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
#header {
	clear: both;
	float: left;
	width: 100%;
	display: block;
	background-color: #fff;
}
#logo {
	clear: both;
	float: left;
	width: 40%;
	text-align:center;
	margin:14% 30% 0;
	display: block;
	position: absolute;
	z-index: 2000;
}
#state {
	clear: both;
	float: left;
	width: 88%;
	text-align:center;
	padding: 4% 6%;
	display: block;
    background: #000;
    color: #fff;
}
#slide {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#slide2 {
	clear: both;
	float: left;
	margin: 15% 0;
	width: 100%;
	display: block; text-align:center;
}
#info { clear: both; float: left; margin: 0 0 10%; width: 100%; display: block; border-top: 3px solid #fdb913; padding:12% 0 8%;}
#section1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 70%;
	padding:20% 15%;
	display: block;
}
#modulo1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#modulo1 img { border-radius: 12px;}
#modulo2 {
	clear: both;
	float: left;
	width: 100%;
	margin: 12% 0 0;
	display: block;
}

#modulo2 .button a, #modulo2 .button a:link, #modulo2 .button a:active { padding: 2.7% 4.5%; font-family: 'Poppins', sans-serif; font-size: 14pt; line-height:18pt; font-weight: 800; font-style:italic; background: #d21f31; border-radius: 10px; color: #fff;}
#modulo2 .button a:hover {  background: #fdb913; color: #000;}

#modulo2 .button2 a, #modulo2 .button2 a:link, #modulo2 .button2 a:active { padding: 2.7% 4.5%; font-family: 'Poppins', sans-serif; font-size: 14pt; line-height:18pt; font-weight: 800; font-style:italic; background: #fdb913; border-radius: 10px; color: #fff;}
#modulo2 .button2 a:hover { background: #d21f31;}

#section2 { clear: both; float: left; margin-left: 0; width: 100%; display: block; z-index:2;}
#section2 #modulo1 { background: #000; padding: 20% 15%; width:70%;}
#section3 { clear: both; float: left; margin-left: 0; width: 90%; display: block; z-index:2; position:relative; padding: 15% 5%;}
#section3 #modulo2 {
clear: none; float: left; margin: 3% 10% 10%; width: 80%; display: block; position:relative; text-align: center;}	
#modulo3 { clear: both; float: left; width: 70%; display: block; margin: 15%;}
#modulo4 { clear: both; float: left; margin-left: 0; width: 70%; display: block; background: #fdb913; padding:15%; text-align: center; z-index:3000;}
#swiper { clear: both; float: left; margin-left: 0; width: 100%; display: block;}
#title { clear: both; float: left; margin-left: 0; width: 100%; display: block; text-align:center;}
#footer { clear: both; float: left; margin-left: 0; width: 100%; display: block; background: rgb(242,242,242);
background: linear-gradient(180deg, rgba(242,242,242,1) 0%, rgba(0,0,0,1) 100%); text-align: center; padding: 10% 0 6%;}
#footer img { width:20%; margin-bottom:5%;}
#copy { clear: both; float: left; margin: 10% 0 0; width: 100%; display: block;}
#mod-serv {
	 clear: both; float: left; width: 60%; display: block; padding: 0 10% 10%;margin:30% 10% 0; background: #fff; text-align:center; border-radius: 16px;}
#mod-serv2 {
	 clear: both; float: left; width: 60%; display: block; padding: 0 10% 10%; margin: 30% 10% 10%; background: #fff; text-align:center; border-radius: 16px;}
#icono { clear: both; float: left; margin: -50% 15% 0; width: 70%; display: block;}
#img { display:block;}
#form { clear: both; float: left; width: 100%; display: block;}

#form1 { clear: both; float: left; width: 100%; display: block; margin:0 0 3.5%}
#form2 { clear: none; float: left; width: 100%; display: block;}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 581px) {
.sm { display: none;}
.bg { display: block;}
#footer img { width:15%; margin-bottom:3%; max-width:120px;}
.gridContainer {
	width: 100%;
}
#modulo2 .button a, #modulo2 .button a:link, #modulo2 .button a:active { padding: 2.7% 4.5%; font-family: 'Poppins', sans-serif; font-size: 17pt; line-height:18pt; font-weight: 800; font-style:italic; background: #d21f31; border-radius: 10px; color: #fff;}
#modulo2 .button a:hover {  background: #fdb913; color: #000;}

#modulo2 .button2 a, #modulo2 .button2 a:link, #modulo2 .button2 a:active { padding: 2.7% 4.5%; font-family: 'Poppins', sans-serif; font-size: 17pt; line-height:18pt; font-weight: 800; font-style:italic; background: #fdb913; border-radius: 10px; color: #fff;}
#modulo2 .button2 a:hover { background: #d21f31;}
#header {
	clear: both;
	float: left;
	margin-left: 0%;
	width: 100%;
	display: block;
}
#logo {
	clear: both;
	float: left;
	margin-left: 40%;
	width: 20%;
	display: block;
	margin-top: 3%;
	text-align: left;
}
#state {
	width: 90%;
	padding: 1.5% 5%;
}
#slide {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#slide2 {
	clear: both;
	float: left;
	margin: 10% 0 0;
	width: 100%;
	display: block;
	text-align: left;
}
#info { clear: both; float: left; margin: 0 13% 0; width: 52%; display: block; border-radius: 10px; border: 3px solid #fdb913; padding: 10%;}	
#section1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 80%;
	padding:12% 10%;
	display: block;
}
#modulo1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 52%;
	display: block;
}
#modulo2 {
	clear: none;
	float: left;
	margin-left: 34%;
	margin-top:8%;
	width: 50%;
	display: block;
	position: absolute;
}
#section2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-image: url(../img/sealcoating-striping-solutions-maintainance-repairing-modulo-02.jpg);
	background-attachment:fixed;
	padding-bottom: 60%;
	background-size: 100% auto;
	background-position: center;
}
#section3 {
	clear: both;
	float: left;
	margin: -16% 0 0;
	width: 90%;
	display: block;
	padding: 24% 5% 10%;
}
#section2 #modulo1 { padding:10% 15%; width:70%;}
#section3 #modulo2 {
	margin: 6% 10% 0; width:80%;}
#modulo3 {
	clear: both;
	float: left;
	margin: 10% 15% 8%;
	width: 70%;
	display: block;
}
#modulo4 {
	clear: both;
	float: left;
	margin: 0 0 0 15%;
	width: 60%;
	padding: 6% 5%;
	display: block;
	z-index: 3000;
	position: relative; border-radius:15px;
}
#swiper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#title {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#copy {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#icono {
	clear: both;
	float: left;
	margin: -30% 20% 8%;
	width: 60%;
	display: block;
}
#img { display:none;}
#mod-serv {
	 padding: 0 10% 10%;margin: 15% 15% 0; }
#mod-serv2 {
	 padding: 0 10% 10%; margin: 16% 15% 0; }
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 100%;
	max-width: 1920px;
	margin: auto;
}
#header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#logo {
	clear: both;
	float: left;
	margin-left: 43%;
	width: 14%;
	display: block;
	position: absolute;
}
#state {
	width: 98%;
	padding: 1%;
}
#slide {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#slide2 {
	margin: 5% 0 0;
}
#section1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 80%;
	display: block;
	padding: 10%;
}	
#section2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	padding: 0;
	background-size: 51% auto;
	background-position: right;
}
#section3 {
	clear: both;
	float: left;
	margin: 0;
	width: 90%;
	display: block;
	padding: 8% 5%;
}
#section2 #modulo1 { padding: 14% 8% 12% 10%; width:32%;}
#modulo2 {margin-left: 37.5%; margin-top: 9%;}
#modulo3 { clear: both; float: left; margin: 6% 0 10% 10%; width: 40%; display: block;}	
#modulo4 { clear: none; float: left; margin: -5% 6% 10%; width: 28%; display: block;}	
#swiper { clear: both; float: left; margin-left: 0; width: 100%; display: block;}	
#title { clear: both; float: left; margin-left: 0; width: 100%; display: block;}	
#footer { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 5% 0;}	
#copy { clear: both; float: left; margin: 5% 0 0; width: 100%; display: block;}	
#info { clear: both; float: left; margin: 0 10% 0; width: 60%; display: block; padding:0; border-radius: 10px; border: 3px solid #fdb913; padding: 8% 10%;}	
#icono {
	clear: both;
	float: left;
	margin: -30% 15% 8%;
	width: 70%;
	display: block;
}
#mod-serv { clear: both; float: left; width: 27.5%; display: block; padding: 0 5% 8%; margin: 10% 2.5% 0 10%; }
#mod-serv2 { clear: none; float: left; width: 27.5%; display: block; padding: 0 5% 8%; margin:10% 10% 0 2.5%; }

#form1 { clear: both; float: left; width: 47%; display: block; margin:0 6% 0 0}
#form2 { clear: none; float: left; width: 47%; display: block;}
}