@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Roboto+Condensed&display=swap');

*{
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
	text-decoration: none;
	font-family: 'Roboto Condensed', sans-serif;
	/*outline: 1px solid green;*/
}


.wrapper {
	max-width: 960px;
	margin: auto;
}

nav{
	width: 100%;
}

.nav-title{
	display: block;
	padding-left: 5%;
}

.logo{
	height: 46px;
	padding: 0;
}

a:hover{
	text-decoration: none;
}

nav ul{
	width: 50%;
}

nav ul > li{
	margin-right: 100px;
}

nav ul > li > a{
	font-size: 1.2rem;
}

#navbarNavDropdown{
	justify-content: flex-end;
}

#navbarNavDropdown ul{
	justify-content: space-around;
}


/*header*/

header{
	height:93vh;
	display: flex;
}


#gruas{
	background-image: url(../img/grua.jpg);
	background-size: cover;
	background-position: center right;
	position: relative;
}


.fondo{
	position: absolute;
	background-color: rgba(0,0,0,0.65);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition-duration: 0.5s;
	display: flex;
	justify-content: center;
	align-items: center;
}

.fondo:hover{
	background-color: rgba(0,0,0,0);
	transition-duration: 0.5s;
}

.fondo:hover h2{
	color: rgba(0,0,0,0);
	transition-duration: 0.5s;
}

.fondo > h2{
	color: white;
	font-size: 2.2rem;
}


/*section*/

section {
	background: #E8E6ED;
	padding: 5%;
}

section h2 {
	font-size: 2.7rem;
	text-align: center;
}

#nos article {
	display: flex;
	text-align: center;
	justify-content: center;
	flex-wrap: wrap;
}

#nos p {
	padding: 2rem;
	text-align: left;
	display: block;
	min-width: 300px;
	width: 40%;
	font-size: 1.2rem;
	line-height: 1.8rem;
	margin:0;
}

input {
	justify-content: center center;
}


/*footer*/

footer {
 	text-align: center;
 	padding: 2%; 
}

footer h2{
	margin:3%;
	font-size: 2.5rem;
}

footer div{
	display: flex;
	align-items: baseline;
	justify-content: center;
}

footer div img {
	border-radius: 50%;
	filter: grayscale(100%);
	transition-duration: 0.5s;
}

footer div img:hover{
	filter: grayscale(0);
	transition-duration: 0.5s;
}

.footerInfo{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 8%;
}

.footerInfo ul{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	width: 100%;
}

.footerInfo ul li{
	display: flex;
	justify-content: center;
	align-items: center;
}
.footerInfo ul li a{
	padding-left: 10px;
	color: black;
}

.correo::before {
	content: url(../img/logos/msj.png);
}

.wp::before {
	content: url(../img/logos/wp.png);
}

.footer-sec{
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
}


/**{outline: 1px solid blue;}*/

/* 0,5625‬ */ 
#fondoAuto{
	background: url(../img/gruaA.jpg) center center no-repeat;
	background-size: cover;
	width: 100vw;
	height: calc(100vw * 0.5625);
	display: flex;
	align-items: flex-start;
	justify-content: center ;
	padding-top: 1.5em;
	max-height: 95vh;
}

#fondoAuto h2{
	color: black;
	font-size: 4rem;
	text-align: center;
}

article{
	margin-bottom: 2vh;
}

.productos{
	background: #FDAF00;
}

section ::selection{
	color: rgba(0,0,0,1);
}

.productos h2{
	text-align: center;
	padding:  2%;
}

details, summary {
    display: block;
}

details{
	background: white;
	width: 100%;
}

summary{
 list-style: none;
 cursor: pointer;
 padding:15px;
 width: 100%;
}

summary:focus{
	outline:none;
}

.wrapper-items{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	border-bottom: 3px solid #E5A71B;
	padding-bottom: 2%;	
}

.wrapper-items img {
	max-width: 300px;
	min-width: 200px;
}

.wrapper-items-info {
	width: 60%;
	padding-left:  2%;
}


.wrapper-items-info h3{
	text-align: left;
	font-size: 2rem;
	display: inline-block;
}

.wrapper-items-info p{
	text-align: left;
	margin: 2% 0;
	font-weight: bold;
	font-size: 1.2rem;
	display: block;
}

.wrapper-items-info a{
	float: right;
	display: inline-block;
	color:black;
	font-size: 1.2rem;
	border-bottom: 3px solid white;
	transition-duration: 0.5s;
}

.wrapper-items-info a:hover{
	transition-duration: 0.5s;
	border-bottom: 3px solid #E5A71B;
}

.wrapper-items-info ul li{
	list-style: circle;
	margin-bottom: 10px;
}

.st {
	background-image: url(../img/servicios/service.jpg);
	background-size: cover;
	background-position: center center;
}
.te {
	background-image: url(../img/servicios/tablero.jpg);
	background-size: cover;
	background-position: center center;
}

.te > div {
	min-height: 70vh;
}

.mme {
	background-image: url(../img/servicios/mantenimiento.jpg);
	background-size: cover;
	background-position: center center;
}

details > summary {
	background-color: white;
}

.wrapper-items-servicios {
	display: flex;
	justify-content: flex-start;
	padding: 2%;
}

.productos details details > summary {
	padding-left:  2.5%;
}

.wrapper-items-info h3 {
	font-weight: bold;
}

.wrapper-items-info p {
	font-weight: normal;
}


/*----------------------contacto;----------------------*/

.contact{
	background: #E8E6ED;
}

.formulario{
	min-height: 70vh;
	color: black;
	padding: 0.6%;
}


.formulario form{
	margin: 0;
	margin: auto;
}

.formulario form div{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
}

input:focus{
	outline-color: #FDAF00;
}

.formulario h2{
	text-align: center;
	padding-top:40px;
}

.formulario form div {
	max-width: 100%;
	margin: auto;
}

.formulario form div textarea{
	resize: none;
	border: none;
	width: 90%;
	height: 25%;
	margin: 0;
	outline-color: #FDAF00;
	padding-left: 10px;
	font-size: 1.2rem;
}

.formulario form div input{
	border: none;
	min-width: 250px;
	width: 44%;
	height: auto;
	padding: 1.2%;
	line-height: 25px;
	margin: 15px 10px;
	padding-left: 10px;
	font-size: 1.2rem;
}

.form-colum label{
	text-align: right;
}

.form-colum label input{
	margin-right: 5px;
}

.formulario form div{
	margin-top: 10px;
	display: flex;
}

#submit{
	margin: 0;
	margin-top: 2%;
	background-color: #FDAF00;
	color: black;
	width: 90%;
	height: auto;
	padding: 1.2%;
	line-height: 60px;
	transition-duration: 0.5s;
	font-size: 1.4rem;
}

#submit:hover{
	color: white;
	transition-duration: 0.5s;
}

.footer-form{
	height: 4vh;
}

.selec-cons{
		font-size: 1.2rem;
		padding: 1%;
}

.selec-cons select{
	padding: 1%;
}

select:focus{
	outline-color: #FDAF00;
}


/*gracias*/

#gracias{
	width: 100vw;
	height: 100vh;
	background: #E8E6ED;
}

#gracias {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}


#gracias h2{
	font-size: 2.5rem;
	margin-bottom: 8%;
}

#gracias a{
	margin: 1%;
	padding:1% 5%;
	background: red;
	background-color: #FDAF00;
	color: black;
	font-size: 1.2rem;
	transition-duration: 0.5s;
}

#gracias a:hover{
	color: white;
	transition-duration: 0.5s;
}


#gracias img{
	margin-bottom: 5%;
}


/************************************************************************Responsive*/

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

	/*index*/

	nav > div > ul{
		width: 100%;
	}

	header{
		height:93vh;
		flex-direction: flex;
	}	

	#automatizacion,#gruas{
		height: 50%;
		width: 100%;
	}

	#fondoAuto{
		/*background-image: none;*/
		background-color: #FDAF00;
		max-height: 95vh;
	}

	#fondoAuto h2{
		font-size: 3rem;
	}

	
	.productos details details > summary {
		padding-left:  2rem;
	}

	.wrapper-items-info {
		margin: auto;
		width: 90%;
		padding: 5%;
	}


	/*-------------nosotros--*/

	#nos p {
		padding: 0;
	}


	/*section / article*/

	.mme, .te, .st{
		background-image: none;
	}


	/*footer*/

	footer div{
		flex-direction: column;
		align-items: center;
	}

	.footerInfo{
		margin-top: 3%;
	}

	

}