@charset "utf-8";
/* CSS Document */

@font-face {  font-family: "PTSerif-Bold";  src: url("fonts/PTSerif-Bold.ttf");}
@font-face {  font-family: "PTSerif-Regular";  src: url("fonts/PTSerif-Regular.ttf");}
@font-face {  font-family: "DMSans-Regular";  src: url("fonts/DMSans-Regular.ttf");}


body{padding: 0px;	margin: 0px; line-height:36px; font-size:26px; font-weight:300; color:#232323; }
#contenedor0{	width:100%;	border: 0px solid #F60;	margin: 0px auto 0px;	overflow:hidden; }
#contenedor1{	width:90%;	border: 0px solid #F60;	margin: 0px auto 0px;	overflow:hidden; }
#contenedor2{	width:95%;	border: 0px solid #F60;	margin: 0px auto 0px;	overflow:hidden; }
#contenedor3{	width:60%;	border: 0px solid #F60;	margin: 0px auto 0px;	overflow:hidden; }

#header{width: 100%;position:absolute; z-index:500}
#header2{width: 100%; margin-bottom:50px}
#reds{margin-top:60px; float:right; width:150px}
#reds img{width:45px}
	
#logo{margin-top:50px; margin-bottom:15px; width:300px;  float:left; border: 0px solid #f60;   }	
#logo img{width:100%}

.banner{position:relative; z-index:100}
p, #bine{line-height: 1.5; font-size:27px; color:#333231; font-family: 'Lora', serif; font-weight:400;}
footer{	width:950px;margin:0px auto;	color:#039;	font-size:12px;	background:#ECECEC;}
#maps{	width: 100%;	height: 300px;	}

#about1{width:57%; float:left; background:url(../img/IMG%201-03.png); background-attachment:fixed; background-size:100%; padding:5% 5%; }
#about2{width:23%; float:right; border:0px solid #09F; padding:5% 5%;}
#about3{width:23%; float:right; border:0px solid #09F; padding:5% 5%; display:none}

#servi1{width:31%; float:left; margin-left:1%; font-size:30px; line-height:1.5; border:2px solid #EBEBEB; color:#333231; font-family: 'Lora', serif; font-weight:400; }
#servi1-1{ padding:20px;}
#servi2{width:31%; float:left; margin-left:1%; font-size:30px; line-height:1.5; border:2px solid #EBEBEB; color:#333231; font-family: 'Lora', serif; font-weight:400; }
#servi2-1{ padding:20px;}
#servi3{width:31%; float:left; margin-left:1%; font-size:30px; line-height:1.5; border:2px solid #EBEBEB; color:#333231; font-family: 'Lora', serif; font-weight:400; }
#servi3-1{ padding:20px;}


#servi1 img, #servi2 img, #servi3 img{ width:50%; margin-bottom:25px}
.servil a:hover{transform: scale(1.1); transition: all .6s ease;}
  
#about-img1, #about-img2{width:25%; float:left;  }

#partner{width:23%; float:left; margin:1%; }

#conter1, #conter2, #conter3, #conter4,{position:relative; border:1px solid#3F0}

.d1 { position:absolute; z-index:1000; float:left; margin-top:-15.6%; width:25%;}
.d2 { position:absolute; z-index:1000; float:left; margin-top:-15.6%; width:25%; margin-left:25%}
.d3 { position:absolute; z-index:1000; float:left; margin-top:-15.6%; width:25%; margin-left:50%}
.d4 { position:absolute; z-index:1000; float:left; margin-top:-15.6%; width:25%; margin-left:75%}

/*.d1 a{ position:relative; float:left; margin-top:-15.6%; width:25%; border:0px solid#3F0}
.d1 a:hover{ text-decoration: none;  background:#0099FF;}
.d2 a{ position:relative; float:left; margin-top:-15.6%; width:25%;}
.d2 a:hover{   text-decoration: none;  background:#0099FF;}

.d3 a{ position:relative; float:left; margin-top:-15.6%; width:25%;  }
.d3 a:hover{   text-decoration: none;  background:#0099FF;}
.d4 a{ position:relative; float:right; margin-top:-15.6%; width:25%; }
.d4 a:hover{   text-decoration: none;  background:#0099FF;} */

.da1, .da2, .da3, .da4{display:none}

#portafolio-1{width:20%; margin:1%; padding:1.5%; float:left; background:#FFF; text-align:center; font-size:18px; line-height:1.3; min-height:350px; font-family: 'Roboto', sans-serif;}
#portafolio-1 img{ width:100%; margin-bottom:15px;}

.bg1{background:#07386C; background-size:100%}

#cont1{height:30px; background:#EDEDED; width:95%; border:0px; margin-bottom:20px; margin-top:5px; color:#666; font-size:15px; border-bottom:1PX solid #ccc;  border-radius:2px}
#cont2{height:100px;  background:#EDEDED; width:80%; border:0px; margin-bottom:20px; margin-top:5px; color:#666; font-size:15px; border-bottom:1PX solid #ccc;  border-radius:2px}

#bot{background:#07386C; color:#fff; font-size:25px; padding:7px 20px; border-radius:50px; border:0px; font-weight:400}
#bot2{background:#3E4478; color:#fff; font-size:25px; border:0px; border-radius:50px;  font-weight:300; font-family: 'Poppins', sans-serif; width:150px; text-align:center; padding:7px 0px; cursor:pointer}

a{ color: #232323;	text-decoration: none; }
a:hover{ color:#3E4478;    text-decoration: none; }

#titu1{	color:#153353; font-size: 36px; line-height:1.5; margin-bottom:60px; font-weight:700; font-family: 'Poppins', sans-serif; text-transform:uppercase}
#titu2{	color:#153353; font-size: 24px; line-height:1.3; font-weight:500;font-family: 'Poppins', sans-serif; margin-bottom:15px}
#titu3{	color:#232323; font-size: 22px; line-height:1.3; font-family: 'Lora', serif; font-weight:500; margin-top:-30PX;}

#imagens2{  margin-bottom:30px; margin-top:30px}
#titu4-1{ color:#153353; font-size: 30px; line-height:1.3;  font-weight:500; font-family: 'Lora', serif; text-transform:uppercase; margin-bottom:15px }
#titu4-2{ color:#69C; font-size: 25px; line-height:1.3;  font-weight:500; font-family: 'Poppins', sans-serif; text-transform:uppercase; margin-bottom:15px }

.containerq{  position: relative;  width: 33%;  float:left;  text-align:center; padding: 0px; border:0px solid #009; height:530px }
#dirsq {  display: block;  width: 100%;}
.overlayq {  position: absolute;  bottom: 0;  left: 0;  right: 0;  background:#07386C;  overflow: hidden;  width: 100%;  height: 0;    transition: .5s ease;}
.containerq:hover .overlayq {  height: 100%;  }
.textq {  white-space: normal;   color: #fff;   font-size: 18px; font-family: 'Lora', serif; line-height:1.2; position: absolute;  overflow: hidden; top: 50%;  left: 50%;  transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);   width:90%; margin-bottom:15px}


#rds{width:100px}
#f1{float:left; width:70%;  margin-top:25PX; margin-bottom:0px; font-size:13px; line-height:1.4; text-transform: uppercase;letter-spacing: 2px; color:#FFF; font-family: 'Poppins', sans-serif; font-weight:600; margin-bottom:20px}

#f3{float:left; width:30%; text-align:right; margin-top:15PX; margin-bottom:20px; font-size:13px; line-height:1.4; text-transform: uppercase;  color:#fff; font-family: 'Poppins', sans-serif; font-weight:600}

#separador1{height:80px;}
#separador2{height:20px;}
#separador3{height:180px;}


.imagens{  transform: scale(var(--escala, 1));  transition: transform 0.25s; }
.imagens:hover{  --escala: 1.2;  cursor:pointer;}

#development {  width: 26%;}

/* a partir de aqui el CSS de las animaciones */

@keyframes anim-fade-in { from { opacity: 0; } to { opacity: 1 } }

@keyframes anim-up { 
	from { opacity: 0; transform: translateY(100px); } 
	to { opacity: 1; transform: translateY(0px); }  
}		

@keyframes anim-down { 
	from { opacity: 0; transform: translateY(-100px); } 
	to { opacity: 1; transform: translateY(0px); }  
}		

@keyframes anim-left { 
	from { opacity: 0; transform: translateX(100px); } 
	to { opacity: 1; transform: translateX(0px); }  
}		

@keyframes anim-right { 
	from { opacity: 0; transform: translateX(-100px); } 
	to { opacity: 1; transform: translateX(0px); }  
}		

.anim-up, .anim-down, .anim-left, .anim-right, .anim-fade-in {
	animation-duration: 1s; /* la animacion dura X segundos */
	animation-delay: 0.5s; /* esperamos X segundos antes de hacer la animacion */			
	animation-fill-mode: both; /* aplica estilos de la animacion antes y despues de reproducirla */
}

.anim-up { animation-name: anim-up; }
.anim-down { animation-name: anim-down; }
.anim-left { animation-name: anim-left; }
.anim-right { animation-name: anim-right; }
.anim-fade-in { animation-name: anim-fade-in; }

.anim-pause-2 { animation-delay: 1s; } /* la animacion empieza en 2 seg. */		
.anim-pause-3 { animation-delay: 3s; } /* la animacion empieza en 3 seg. */
.anim-pause-4 { animation-delay: 4s; } /* la animacion empieza en 4 seg. */
.anim-pause-5 { animation-delay: 5s; } /* la animacion empieza en 5 seg. */

/* todas las animaciones pausadas */
.paused * { 
	animation-play-state: paused;
}


@media screen and (min-width: 1024px) and (max-width: 1199px) {
#contenedor1{	border: 0px solid #F00;	}

#reds{margin-top:20px; float:right; width:150px; margin-right:10px}
#reds img{width:45px}

#logo{margin-top:25px; margin-bottom:25px; width:300px;  float:left; border: 0px solid #f60; }	
#logo img{width:100%}

#header{width: 100%;position:absolute; z-index:500}
#header2{width: 100%; margin-bottom:0px}

#titu1{	color:#153353; font-size: 36px; line-height:1.5; margin-bottom:45px; font-weight:700; font-family: 'Poppins', sans-serif; text-transform:uppercase}
#titu2{	color:#153353; font-size: 24px; line-height:1.3; font-weight:500;font-family: 'Poppins', sans-serif; margin-bottom:15px}
#titu3{	color:#232323; font-size: 22px; line-height:1.3; font-family: 'Lora', serif; font-weight:500; margin-top:-30PX;}

p, #bine{line-height: 1.5; font-size:24px; color:#333231; font-family: 'Lora', serif; font-weight:400;}

#servi1{width:29%; float:left; margin-left:3%; font-size:27px; line-height:1.5; border:2px solid #EBEBEB; padding:0px; color:#333231; font-family: 'Lora', serif; font-weight:400;}
#servi2{width:29%; float:left; margin-left:3%; font-size:27px; line-height:1.5; border:2px solid #EBEBEB; padding:0px; color:#333231; font-family: 'Lora', serif; font-weight:400;}
#servi3{width:29%; float:left; margin-left:3%; font-size:27px; line-height:1.5; border:2px solid #EBEBEB; padding:0px; color:#333231; font-family: 'Lora', serif; font-weight:400;}
#servi1 img, #servi2 img, #servi3 img{ width:70%; margin-bottom:40px}
#ser1{ }
  
  
.d1 { position:absolute; z-index:1000; float:left; margin-top:-15.6%; width:25%;}
.d2 { position:absolute; z-index:1000; float:left; margin-top:-15.6%; width:25%; margin-left:25%}
.d3 { position:absolute; z-index:1000; float:left; margin-top:-15.6%; width:25%; margin-left:50%}
.d4 { position:absolute; z-index:1000; float:left; margin-top:-15.6%; width:25%; margin-left:75%}

/*.d1 a{ position:relative; float:left; margin-top:-15.6%; width:25%; }
.d1 a:hover{ text-decoration: none;  background:#0099FF;}

.d2 a{ position:relative; float:left; margin-top:-15.6%; width:25%;  }
.d2 a:hover{   text-decoration: none;  background:#0099FF;}

.d3 a{ position:relative; float:left; margin-top:-15.6%; width:25%; margin-left:50%; }
.d3 a:hover{   text-decoration: none;  background:#0099FF;}

.d4 a{ position:relative; float:right; margin-top:-15.6%; width:25%; }
.d4 a:hover{   text-decoration: none;  background:#0099FF;}*/

#portafolio-1{width:20%; margin:1%; padding:1.5%; float:left; background:#FFF; text-align:center; font-size:18px; line-height:1.3; min-height:362px; font-family: 'Roboto', sans-serif;}
#portafolio-1 img{ width:100%; margin-bottom:15px;}


#rds{width:60px}

#separador1{height:70px;}
#separador2{height:20px;}
#separador3{height:180px;}

}

@media screen and (min-width: 800px) and (max-width: 1024px) {
#contenedor1{	border: 0px solid #000;	}
#contenedor3{	width:90%;	border: 0px solid #F60;	margin: 0px auto 0px;	overflow:hidden; }

#reds{margin-top:20px; float:right; width:150px; margin-right:10px}
#reds img{width:45px}

#logo{margin-top:25px; margin-bottom:0px; width:300px;  float:left; border: 0px solid #f60; }	
#logo img{width:100%}

#header{width: 100%;position:absolute; z-index:500}
#header2{width: 100%; margin-bottom:0px}

#titu1{	color:#153353; font-size: 33px; line-height:1.5; margin-bottom:30px; font-weight:700; font-family: 'Poppins', sans-serif; text-transform:uppercase}
#titu2{	color:#153353; font-size: 22px; line-height:1.3; font-weight:500;font-family: 'Poppins', sans-serif; margin-bottom:15px}
#titu3{	color:#232323; font-size: 22px; line-height:1.3; font-family: 'Lora', serif; font-weight:500; margin-top:-15PX;}

p, #bine{line-height: 1.5; font-size:20px; color:#333231; font-family: 'Lora', serif; font-weight:400;}

#servi1{width:46%; float:left; margin-left:3%; font-size:25px; line-height:1.5; border:2px solid #EBEBEB; padding:0px; margin-bottom:25PX; color:#333231; font-family: 'Lora', serif; font-weight:400;}
#servi2{width:46%; float:left; margin-left:3%; font-size:25px; line-height:1.5; border:2px solid #EBEBEB; padding:0px; margin-bottom:25PX; color:#333231; font-family: 'Lora', serif; font-weight:400;}
#servi3{width:46%; float:left; margin-left:3%; font-size:25px; line-height:1.5; border:2px solid #EBEBEB; padding:0px; margin-bottom:25PX; color:#333231; font-family: 'Lora', serif; font-weight:400;}
#servi1 img, #servi2 img, #servi3 img{ width:60%; margin-bottom:40px}
#ser1{ }
 
.d1 { position:absolute; z-index:1000; float:left; margin-top:-15.6%; width:25%;}
.d2 { position:absolute; z-index:1000; float:left; margin-top:-15.6%; width:25%; margin-left:25%}
.d3 { position:absolute; z-index:1000; float:left; margin-top:-15.6%; width:25%; margin-left:50%}
.d4 { position:absolute; z-index:1000; float:left; margin-top:-15.6%; width:25%; margin-left:75%}


/*.d1 a{ position:relative; float:left; margin-top:-15.6%; width:25%; }
.d1 a:hover{ text-decoration: none;  background:#0099FF;}

.d2 a{ position:relative; float:left; margin-top:-15.6%; width:25%;  }
.d2 a:hover{   text-decoration: none;  background:#0099FF;}

.d3 a{ position:relative; float:left; margin-top:-15.6%; width:25%; margin-left:50%; }
.d3 a:hover{   text-decoration: none;  background:#0099FF;}

.d4 a{ position:relative; float:right; margin-top:-15.6%; width:25%; }
.d4 a:hover{   text-decoration: none;  background:#0099FF;}*/

#rds{width:50px}

#portafolio-1{width:28.2%; margin:1%; padding:1.5%; float:left; background:#FFF; text-align:center; font-size:16px; line-height:1.3; min-height:315px; font-family: 'Roboto', sans-serif;}
#portafolio-1 img{ width:100%; margin-bottom:15px;}

#bot{background:#fff; color:#232323; font-size:22px; padding:7px 20px; border-radius:50px; border:0px; font-weight:400}
#bot2{background:#3E4478; color:#fff; font-size:22px; border:0px; border-radius:50px;  font-weight:300; font-family: 'Poppins', sans-serif; width:150px; text-align:center; padding:5px 0px; cursor:pointer}

#f1{float:none; width:100%; text-align:center; border: 0px solid #0C6; margin-top:15PX; }
#f2{float:none; width:100%; text-align:center; border: 0px solid #0C6; margin-top:10PX; }
#f3{float:none; width:100%; text-align:center; border: 0px solid #0C6;  margin-top:10PX; margin-bottom:15px}

#separador1{height:50px;}
#separador2{height:20px;}
#separador3{height:180px;}

#development {  width: 32.5%;}
}

@media screen and (min-width: 600px) and (max-width: 799px) {
#contenedor1{	width:90%;	border: 0px solid #F60;	margin: 0px auto 0px;	overflow:hidden; }
#contenedor3{	width:90%;	border: 0px solid #F60;	margin: 0px auto 0px;	overflow:hidden; }

#reds{margin-top:25px; float:right; width:150px; margin-right:10px}
#reds img{width:45px}

#logo{margin-top:25px; margin-bottom:0px; width:250px;  float:left; border: 0px solid #f60; }	
#logo img{width:100%}

#header{width: 100%;position:absolute; z-index:500}
#header2{width: 100%; margin-bottom:0px}

#titu1{	color:#153353; font-size: 30px; line-height:1.3; margin-bottom:25px; font-weight:600; font-family: 'Poppins', sans-serif; text-transform:uppercase}
#titu2{	color:#153353; font-size: 20px; line-height:1.3; font-weight:500;font-family: 'Poppins', sans-serif; margin-bottom:15px}
#titu3{	color:#232323; font-size: 20px; line-height:1.3; font-family: 'Lora', serif; font-weight:500; margin-top:-15PX;}

p, #bine{line-height: 1.5; font-size:20px; color:#333231; font-family: 'Lora', serif; font-weight:400;}

#servi1{width:46%; float:left; margin-left:3%; font-size:25px; line-height:1.5; border:2px solid #EBEBEB; padding:0px; margin-bottom:25PX; color:#333231; font-family: 'Lora', serif; font-weight:400;}
#servi2{width:46%; float:left; margin-left:3%; font-size:25px; line-height:1.5; border:2px solid #EBEBEB; padding:0px; margin-bottom:25PX; color:#333231; font-family: 'Lora', serif; font-weight:400;}
#servi3{width:46%; float:left; margin-left:3%; font-size:25px; line-height:1.5; border:2px solid #EBEBEB; padding:0px; margin-bottom:25PX; color:#333231; font-family: 'Lora', serif; font-weight:400;}
#servi1 img, #servi2 img, #servi3 img{ width:60%; margin-bottom:40px}
#ser1{ }
 
.d1 a{ position:relative; float:left; margin-top:-15.6%; width:25%; }
.d1 a:hover{ text-decoration: none;  background:#0099FF;}

.d2 a{ position:relative; float:left; margin-top:-15.6%; width:25%; margin-left:25%; }
.d2 a:hover{   text-decoration: none;  background:#0099FF;}

.d3 a{ position:relative; float:left; margin-top:-15.6%; width:25%; margin-left:50%; }
.d3 a:hover{   text-decoration: none;  background:#0099FF;}

.d4 a{ position:relative; float:right; margin-top:-15.6%; width:25%; }
.d4 a:hover{   text-decoration: none;  background:#0099FF;}
 
#conter1, #conter2, #conter3, #conter4{position:none; display:none !important;}
 #conter3, .conter3{position:none; display:none !important;}
.d1 a{ position:relative; float:left; margin-top:-13%; width:25%; display:none }
.d1 a:hover{ text-decoration: none;  background:#0099FF;}
.d2 a{ position:relative; float:left; margin-top:-13%; width:25%; margin-left:25%; display:none }
.d2 a:hover{   text-decoration: none;  background:#0099FF;}
.d3 a{ position:relative; float:left; margin-top:-13%; width:25%; margin-left:50%; display:none }
.d3 a:hover{   text-decoration: none;  background:#0099FF;}
.d4 a{ position:relative; float:right; margin-top:-13%; width:25%; display:none }
.d4 a:hover{   text-decoration: none;  background:#0099FF;}

.da1, .da2, .da3, .da4{display:block; width:50%; float:left}
#rds{width:70px}

#portafolio-1{width:45%; margin:1%; padding:1.5%; float:left; background:#FFF; text-align:center; font-size:17px; line-height:20px; min-height:325px}
#portafolio-1 img{ width:100%; margin-bottom:15px;}

#about-img1, #about-img2{width:50%; float:left; }
#partner{width:33%; float:left; }

#bot{background:#fff; color:#232323; font-size:19px; padding:5px 20px; border-radius:50px; border:0px; font-weight:400}
#bot2{background:#3E4478; color:#fff; font-size:19px; border:0px; border-radius:50px;  font-weight:300; font-family: 'Poppins', sans-serif; width:120px; text-align:center; padding:5px 0px; cursor:pointer}

#f1{float:none; width:100%; text-align:center; border: 0px solid #0C6; margin-top:15PX; }
#f2{float:none; width:100%; text-align:center; border: 0px solid #0C6; margin-top:10PX; }
#f3{float:none; width:100%; text-align:center; border: 0px solid #0C6;  margin-top:10PX; margin-bottom:15px}

#separador1{height:30px;}
#separador2{height:20px;}
#separador3{height:180px;}

#imagens2{  margin-bottom:30px; margin-top:30px}
#titu4-1{ color:#153353; font-size: 30px; line-height:1.3;  font-weight:500; font-family: 'Lora', serif; text-transform:uppercase; margin-bottom:15px }
#titu4-2{ color:#69C; font-size: 25px; line-height:1.3;  font-weight:500; font-family: 'Poppins', sans-serif; text-transform:uppercase; margin-bottom:15px }

.containerq{  position: relative;  width: 100%;  float:left;  text-align:center; padding: 0px; border:0px solid #009; height:530px }
#dirsq {  display: block;  width: 100%;}
.overlayq {  position: absolute;  bottom: 0;  left: 0;  right: 0;  background:#07386C;  overflow: hidden;  width: 100%;  height: 0;    transition: .5s ease;}
.containerq:hover .overlayq {  height: 100%;  }
.textq {  white-space: normal;   color: #fff;   font-size: 18px; font-family: 'Lora', serif; line-height:1.2; position: absolute;  overflow: hidden; top: 50%;  left: 50%;  transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);   width:90%; margin-bottom:15px}


#development {  width: 32.5%;}
}

@media screen and (min-width: 320px) and (max-width: 599px) {
#contenedor1{	width:90%;	border: 0px solid #000;	margin: 0px auto 0px;	overflow:hidden; }
#contenedor3{	width:90%;	border: 0px solid #F60;	margin: 0px auto 0px;	overflow:hidden; }

#reds{margin-top:20px; float:right; width:110px; margin-right:10px}
#reds img{width:30px}

#logo{margin-top:22px; margin-bottom:0px; width:170px;  float:left; border: 0px solid #f60; }	
#logo img{width:100%}

#header{width: 100%;position:absolute; z-index:500}
#header2{width: 100%; margin-bottom:0px}

#titu1{	color:#153353; font-size: 22px; line-height:1.3; margin-bottom:15px; font-weight:600; font-family: 'Poppins', sans-serif; text-transform:uppercase}
#titu2{	color:#153353; font-size: 18px; line-height:1.3; font-weight:500;font-family: 'Poppins', sans-serif; margin-bottom:15px}
#titu3{	color:#232323; font-size: 18px; line-height:1.3; font-family: 'Lora', serif; font-weight:500; margin-top:0PX;}

p, #bine{line-height: 1.3; font-size:17px; color:#333231; font-family: 'Lora', serif; font-weight:400;}

#servi1{width:95%; float:left; margin-left:2%; font-size:18px; line-height:1.5; border:2px solid #EBEBEB; padding:0px; color:#333231; font-family: 'Lora', serif; font-weight:400; margin-bottom:25px}
#servi2{width:95%; float:left; margin-left:2%; font-size:18px; line-height:1.5; border:2px solid #EBEBEB; padding:0px; color:#333231; font-family: 'Lora', serif; font-weight:400; margin-bottom:25px}
#servi3{width:95%; float:left; margin-left:2%; font-size:18px; line-height:1.5; border:2px solid #EBEBEB; padding:0px; color:#333231; font-family: 'Lora', serif; font-weight:400;}
#servi1 img, #servi2 img, #servi3 img{ width:45%; margin-bottom:20px}
#ser1{ }
 
.d1 a{ position:relative; float:left; margin-top:-15.6%; width:25%; }
.d1 a:hover{ text-decoration: none;  background:#0099FF;}

.d2 a{ position:relative; float:left; margin-top:-15.6%; width:25%; margin-left:25%; }
.d2 a:hover{   text-decoration: none;  background:#0099FF;}

.d3 a{ position:relative; float:left; margin-top:-15.6%; width:25%; margin-left:50%; }
.d3 a:hover{   text-decoration: none;  background:#0099FF;}

.d4 a{ position:relative; float:right; margin-top:-15.6%; width:25%; }
.d4 a:hover{   text-decoration: none;  background:#0099FF;}
 
#conter1, #conter2, #conter3, #conter4{position:none; display:none !important;}
 #conter3, .conter3{position:none; display:none !important;}
.d1 a{ position:relative; float:left; margin-top:-13%; width:25%; display:none }
.d1 a:hover{ text-decoration: none;  background:#0099FF;}
.d2 a{ position:relative; float:left; margin-top:-13%; width:25%; margin-left:25%; display:none }
.d2 a:hover{   text-decoration: none;  background:#0099FF;}
.d3 a{ position:relative; float:left; margin-top:-13%; width:25%; margin-left:50%; display:none }
.d3 a:hover{   text-decoration: none;  background:#0099FF;}
.d4 a{ position:relative; float:right; margin-top:-13%; width:25%; display:none }
.d4 a:hover{   text-decoration: none;  background:#0099FF;}

.da1, .da2, .da3, .da4{display:block; width:100%; float:left}
#rds{width:50px}

#portafolio-1{width:95%; margin:1%; padding:1.5%; float:left; background:#FFF; text-align:center; font-size:17px; line-height:1.4; min-height:325px}
#portafolio-1 img{ width:100%; margin-bottom:15px;}

#about-img1, #about-img2{width:50%; float:left; }
#partner{width:33%; float:left; }

#bot{background:#fff; color:#232323; font-size:19px; padding:5px 20px; border-radius:50px; border:0px; font-weight:400}
#bot2{background:#3E4478; color:#fff; font-size:17px; border:0px; border-radius:50px;  font-weight:300; font-family: 'Poppins', sans-serif; width:100px; text-align:center; padding:3px 0px; cursor:pointer}

#f1{float:none; width:100%; text-align:center; border: 0px solid #0C6; margin-top:15PX; }
#f2{float:none; width:100%; text-align:center; border: 0px solid #0C6; margin-top:10PX; }
#f3{float:none; width:100%; text-align:center; border: 0px solid #0C6;  margin-top:10PX; margin-bottom:15px}

#separador1{height:20px;}
#separador2{height:20px;}
#separador3{height:180px;}

#development {  width: 48%;}

}