@charset "utf-8";
/* CSS Document */
body {
	margin: 0em auto;
	overflow-x: hidden;
    background-color:#fff;
	width:auto;
    padding: 0;
    margin: 0;

}

@font-face {
    font-family: "Roboto-Light";
    src: url(../fonts/Roboto-Light.ttf) format("truetype")
}


@font-face {
    font-family: "Roboto-Bold";
    src: url(../fonts/Roboto-Bold.ttf) format("truetype")
}


@font-face {
    font-family: "Dulcelin";
    src: url(../fonts/Dulcelin.otf) format("opentype")
}

@font-face {
    font-family: "AGALEGA-Regular";
    src: url(../fonts/AGALEGA-Regular.otf) format("opentype")
}



@font-face {
    font-family: "Bigdey_Demo";
    src: url(../fonts/Bigdey_Demo.ttf) format("truetype")
}


@font-face {
    font-family: "Sybelia_Demo";
    src: url(../fonts/Sybelia_Demo.ttf) format("truetype")
}



@font-face {
    font-family: "Victorious";
    src: url(../fonts/Victorious.ttf) format("truetype")
}



@font-face {
    font-family: "Abstrec_font_tfb";
    src: url(../fonts/Abstrec_font_tfb.ttf) format("truetype")
}


@font-face {
    font-family: "A_Love_of_Thunder";
    src: url(../fonts/A_Love_of_Thunder.ttf) format("truetype")
}


@font-face {
    font-family: "jennifer";
    src: url(../fonts/jennifer.ttf) format("truetype")
}


@font-face {
    font-family: "acid";
    src: url(../fonts/acid.otf) format("opentype")
}



@font-face {
    font-family: "Actonia_PERSONAL";
    src: url(../fonts/Actonia_PERSONAL.ttf) format("truetype")
}


@font-face {
    font-family: "pompadour1";
    src: url(../fonts/pompadour1.ttf) format("truetype")
}




@font-face {
    font-family: "ATypewriterForMe";
    src: url(../fonts/ATypewriterForMe.ttf) format("truetype")
}

@font-face {
    font-family: "yonky";
    src: url(../fonts/yonky.ttf) format("truetype")
}


@font-face {
    font-family: "elegant";
    src: url(../fonts/elegant.ttf) format("truetype")
}

a {
    text-decoration: none;
    color: #000;
}




h1 {
    font-family: "Roboto-Bold";
    font-weight: 900
}

h2 {
    font-family: "Roboto-Light";
    font-weight: 900
}

h3 {
    font-family: "Dulcelin";
}

p {
    font-family: "Roboto-Light"
}


#capaIniBody{
	position:relative; width:100%; height:300px;   background-color:#fff; 
}

	.fila1Capa3Body{
		position:absolute;
		width:100%;
		height:110%;
		background-color:#000;
		background-image:url(../imagenes/encab3.jpg);
		-moz-background-size: cover;
    	-webkit-background-size: cover;
    	-o-background-size: cover;
		overflow:hidden
	}
	
	
			.txt1Capa3Body{
				position:absolute; width:100%; text-align:left;left:100px;  font-size:4.5em; top:0px; color:#fff;
			}
			
			.diseno{
				position:absolute;
				top:0px;
				right:0px;
				width:600px; height:auto
			}
			
			.txt2Capa3Body{
				position:absolute; width:40%; text-align:left; left:100px;  font-size:2em; top:130px; color:#fff; 
			}
	


#capa2Body{
	position:relative;
	width:100%; 
	height:auto;
	background-color:#fff;
	-moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;	
}



.datos1{ position: relative; display: block; margin-left: auto; margin-right: auto; width:250px; height:60px;  border:none;  outline:none; background-color:#4fce5d; 
    font-family: "Roboto-Light"; font-size: 1em;cursor: pointer; color: #fff; border-radius: 50px; padding-bottom: 8px;}

    
.iconBut{position: relative;  width: 24px; height:auto; top: 5px; left: -10px;}

.datosCliente{position: relative;display: block; margin-left: auto; margin-right: auto; border-radius: 50px; width: 220px; height: 30px; border-width: 1px;}




/*Celular portrait*/
@media screen and (min-width: 1px) and (max-width: 360px) {
#S1{display:inline}

#capaIniBody{
	height:120px;
}

.txt1Capa3Body{ position:absolute; width:80%; text-align:left;left:10px;  font-size:1.5em; top: 0px;}
.txt2Capa3Body{ width:100%; text-align:left; left:10px;  font-size:1.5em; top:50px; color:#fff;}	

	

#capa2Body{height:auto}

}

/*Celular landscape*/
@media screen and (min-width: 361px) and (max-width: 640px) {
#S2{display:inline}

#capaIniBody{
    height:120px;
	
}

.txt1Capa3Body{ position:absolute; width:80%; text-align:left;left:10px;  font-size:1.5em; top: 0px;}
.txt2Capa3Body{ width:100%; text-align:left; left:10px;  font-size:1.5em; top:50px; color:#fff;}	



#capa2Body{height:auto}



}

/*tablet 7.1 portrait*/
@media screen and (min-width: 641px) and (max-width: 960px) {
#S3{display:inline}
#capaIniBody{
    height:120px;
	
}

.txt1Capa3Body{ position:absolute; width:80%; text-align:left;left:10px;  font-size:1.5em; top: 0px;}
.txt2Capa3Body{ width:100%; text-align:left; left:10px;  font-size:1.5em; top:50px; color:#fff;}	

		
		



}

/*tablet 7.1 landscape se puede utilizer las medidas iniciales*/
@media screen and (min-width: 961px) and (max-width: 1210px) {
#S4{display:inline}

#capaIniBody{
	height:200px;
	
}

	
.txt1Capa3Body{ position:absolute; width:80%; text-align:left;left:10px;  font-size:2.5em; top: 60px;}
.txt2Capa3Body{ width:100%; text-align:left; left:10px;  font-size:1.5em; top:50px; color:#fff;}	

	
		
	
}

/*pantallas grandes*/
@media screen and (min-width: 1211x) and (max-width: 2000px) {
#S5{display:inline}



}