* {
	margin: 0;
	padding: 0;
}

body {
	/* font-family: arial, helvetica, sans-serif; */
	/* font-family: 'Montserrat', sans-serif; */

font-family: 'Roboto', sans-serif;
	width: 100wh;
	height: 136vh;
	padding-left: 50px;
	padding-right: 50px;
}


header{
	width: 100%;
	height:150px;
	border-bottom: 4px solid black;
	display: flex;
	flex-direction: row;
	align-items: center;


}

div.logo img{
	width: 30%;
	height: auto;
	align-items: flex-start;

}

nav{
	background: white;
  	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content:flex-end;

}

nav ul {

  	overflow:hidden;
  	list-style:none;
}

nav ul li {
 	line-height: 15px;
  	margin-top: 4px;
	display: inline-block;
}

nav ul li a{
   color: black;
   padding: 15px;
   display: block;
   text-decoration: none;
   letter-spacing: 2px;
   font-size: 14px;
}



li a:hover {
   	color:red;
}


/*........... Submenu   ......... */


.submenu{
	position: absolute;
	width: 140px;
	visibility: hidden;
	opacity: 0;
	transition: opacity 1.5s;
	text-align: left;
}

.submenu li a{
	display: block;
	padding: 15px;
	color: black;
	font-family: 'Open sans';
	text-decoration: none;
	font-weight:900;
}

.men li:hover .submenu{
	visibility: visible;
	opacity: 1;
	background-color: silver;

}

.submenu li a:hover{
	color:rgb(231, 23, 23);
	opacity: 50%;
}


section.contenedor{
	height: 600px;
}

.contenedor{
	display: flex;
	background: url(img1/fondop.jpg);
	background-repeat: no-repeat;
	background-size:100% 100%;

}

.contenido-principal{
	display: flex;
	width: 100%;
	min-height: 650px;
	justify-content: center;
	align-items: center;
}



.article{
	color:gray;
	text-align: center;
	font-weight: 600;
}

.contenido-principal article h2{
	font-size:5rem;
	padding-right: 50px;
	padding-top: 40px;
	font-weight: 900;
}


@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,700);
.licita{
  font-family: 'Open Sans', sans-serif;
  font-size:60px;
  font-weight: 800;
  line-height: 60px;
  background-image: url(https://2.bp.blogspot.com/-pKFE-5ysj68/TkjG9DvLB4I/AAAAAAAAEoM/rDKiHkvbC8o/s1600/Abstract_Wallpaper_8.jpg);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}







@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,700);
h2{
  font-family: 'Open Sans', sans-serif;
  font-size: 80px;
  font-weight: 800;
  line-height: 78px;
  background-image: url(https://2.bp.blogspot.com/-pKFE-5ysj68/TkjG9DvLB4I/AAAAAAAAEoM/rDKiHkvbC8o/s1600/Abstract_Wallpaper_8.jpg);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}









/*.........-------------............*/

section.service h3, .serv{
	text-align: center;
	padding-top: 40px;
	color:black;
	font-size: 2rem;
	letter-spacing: 4px;
	font-family: arial;
	font-weight: 100;
}

.service h3{
	background: RGB(220, 220, 220, .9);
	background: RGB(220, 220, 220, .2);
}


.items{
	width: 100wh;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-top: 40px;
	background: #E2E2E2;
	margin: auto;
	/* border: 3px solid black */

}


.item1{
	width: 40%;
	height: 75%;
	text-align: center;
	display: inline-block;
	flex: 1 auto;
	border-radius: 8px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    margin: 20px;
	transition: all 0.25s;

}

.item1:hover{
	transform: translateY(-15px);
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
}

article.item1 img{
	width: 450px;
	height: 300px;
}

.texto1{
	width: 86%;

}

.texto1 h1{
	width: 90%;
	padding: 0 0rem;
	padding-left: 80px;
}

p.t1{
	width: 99%;
    font-size: 16px;
    font-weight: 300;
	letter-spacing: 1px;
	color: #6a6a6a;
	padding-left: 80px;
	padding-right: 0%;

}


article.item1 p, h1{
	font-size: 16px;
	text-align: left;
	letter-spacing: 0px;
}


.item2{
	width:40%;
	height: 45%;
	text-align: center;
	flex: 1 auto;
	border-radius: 8px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    margin: 20px;
	transition: all 0.25s;
}

article.item2 img{
	width: 350px;
	height: 300px;
}

.texto2{
	width: 80%;
	display: inline-block;
	align-items: center;
}

.texto2 h1{
	width: 90%;
	text-align: center;
}



.item2 p{
	font-size: 16px;
	width: 95%;
	text-align: left;
	letter-spacing: 0px;

}

.item2:hover{
	transform: translateY(-15px);
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
}


.t2{
	padding: 0 1rem;
    font-size: 16px;
    font-weight: 300;
	letter-spacing: 1px;
	color: #6a6a6a;

}


.item3{
	width: 40%;
	height: 75%;
	text-align: center;
	display: inline-block;
	flex: 1 auto;
	border-radius: 8px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    margin: 20px;
	transition: all 0.25s;

}

.item3:hover{
	transform: translateY(-15px);
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
}

article.item3 img{
	width: 440px;
	height: 330px;
}

.item3 p{
	font-size: 16px;
	width: 80%;
	letter-spacing: 0px;

}

.texto3{
	width: 85%;
	display: inline-block;
	padding-left: 15%;
}




p.t3{
	width: 90%;
	font-size: 16px;
    font-weight: 300;
	color: #6a6a6a;
}


article.item3 p{
	text-align: left;
	letter-spacing: 0px;
}


.item4{
	width: 40%;
	height: 75%;
	text-align: center;
	display: inline-block;
	flex: 1 auto;
	border-radius: 8px ;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    margin: 20px;
	transition: all 0.25s;

}

.item4:hover{
	transform: translateY(-15px);
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
}

article.item4 img{
	width:70%;
	text-align: left;
}

.texto4{
	width: 85%;

}

.texto4 h1{
	width: 80%;
	padding-left: 20%;
}

p.t4{
	width: 80%;
	font-size: 16px;
    font-weight: 300;
	letter-spacing: 1px;
	color: #6a6a6a;
	padding-left: 20%;
}

.space{
	width: 100%;
	height:80px;
}

article.item4 p{
	text-align: left;
	letter-spacing: 0px;
}

.item5{
	width: 40%;
	height: 75%;
	text-align: center;
	display: inline-block;
	flex: 1 auto;
	border-radius: 8px ;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    margin-top: 5%;
	transition: all 0.25s;

}

.item5:hover{
	transform: translateY(-15px);
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
}

article.item5 img{
	width: 70%;

}

.texto5{
	width: 80%;
	display: inline-block;
	padding-left: 2rem;
	padding-right: 2rem;

}

.texto5 h1{
	width: 100%;
	padding: 0 1rem;
	margin-top: 20px;
	text-align: center;
}

p.t5{
	width: 450px;
	font-size: 16px;
    font-weight: 300;
	letter-spacing: 1px;
	color: #6a6a6a;
	padding-left: 20px;
	text-align: left;
}

.ss{
	background-color: lightgray;
margin-bottom: 10%;
}

.leyenda{
	font-size: 1.5rem;
	text-align: center;
}







 /* ..... Inicia Medias Queries ..... */




@media screen and (max-width: 2560px){
	header{
	height:195px;
}



	.item4{
		height: 375px;
	}



}

@media screen and (max-width: 1800px){
	header{
		height:200px;
	}

	.item2{
		height: 360px;
	}

	.item4{
		height: 370px
	}

}



@media screen and (max-width: 1680px){
	header{
		height:195px;
}

	.item2{
		width:40%;
		height: auto;
		text-align: center;
		flex: 1 auto;
		border-radius: 8px;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
		overflow: hidden;
		margin: 20px;
		transition: all 0.25s;
	}

	.item4{
		width: 40%;
		height: 395;
		text-align: center;
		display: inline-block;
		flex: 1 auto;
		border-radius: 8px ;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
		overflow: hidden;
		margin: 20px;
		transition: all 0.25s;
}

	article.item4 img{
		width:60%;
		text-align: left;
}
}

@media screen and (max-width: 1600px){
	.item4{
		width:40%;
		height: auto;
		text-align: center;
		flex: 1 auto;
		border-radius: 8px;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
		overflow: hidden;
		margin: 20px;
		transition: all 0.25s;
}
}


@media screen and (max-width: 1440px){
	header{
		height:170px;
	}
}


@media screen and (max-width: 1180px){
	header{
		height:120px;
	}


	div.logo img{
		width: 25%
	}
}


@media screen and (max-width: 968px){
	div.logo img{
		width: 45%
	}
}




@media screen and (max-width: 960px){
	header{
		height:160px;
	}
	div.logo img{
		width: 45%
	}
}


@media screen and (max-width: 947px){
	div.logo img{
		width: 45%
	}
}

@media screen and (max-width: 924px){
	div.logo img{
		width: 45%
	}
}


@media screen and (max-width: 896px){
	header{
		height:150px;
	}
	div.logo img{
		width: 45%
		}
}



@media screen and (max-width: 860px){
	.item1,.item2, .item3, .item4{
		width: 100%;
	}
}


@media screen and (max-width: 700px){
		div.logo img{
		width: 45%
		}
}


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

	body {
		padding-left: 20px;
		padding-right: 20px;
}

	div.logo img{
			width: 50%
	}



	.item2{
			margin-top: 10%;
	}

	.texto1{
		width: 86%;
	}

	.texto1 h1{
		width: 100%;
		padding-left: 20px;
	}

	p.t1{
		width: 99%;
		font-size: 16px;
		letter-spacing: 1px;
		color: #6a6a6a;
		padding-left: 25px;
	}


	.item2{
		width:50%;

	}

	article.item2 img{
		width: 300px;
		height: 260px;
	}

	p.t2{
	padding-left: 80px;
	width: 70%;
	}

	.item3{
		width: 50%;
	}

	p.t3{
			padding-left: 30px;
	}

	.texto3 h1{
	padding-left: 30px;
	}



	.item4{
		width: 55%;
		height: 75%;
		margin-top: 10%;
	}

	p.t4{
		padding-left: 23%;
	}

	.texto4 h1{
		padding-left: 23%;
	}

	.item5{
		width: 55%;
		height: 75%;
		margin-top: 10%;
	}
}



@media screen and (max-width: 500px){
		div.logo img{
		width: 60%
	}
}



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

	.contenido-principal article h2{
		font-size:4rem;
		padding-right: 50px;
		padding-top: 40px;
		font-weight: 900;
	}

	h2{
		padding-left: 5%;
	}
}




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

	header{
		height:120px;
		}

	p.t2{
		padding-left: 10px;
		width: 100%;
		}

	p.t3{
		padding-left: 0px;
		width: 100%;
		}
	.texto3	h1{
			padding-left: 0px;
		}

	.texto3{
		width: 85%;
		display: inline-block;
		padding-left: 0%;
		}

	p.t4{
		padding-left: 20px;
		width: 95%;
		}
	.texto4	h1{
		padding-left: 5%;
		font-size: 15px;
		width: 90%;
		}

	.texto4{
		width: 100%;
		display: inline-block;
		padding-left: 0%;
		}

		.item5{
			margin-top: 15%;
		}
}