@import "variables.css";
@import "jen-template.css";
@import "precarga.css";
@import "flexslider.css";


h1 {
	font-size: 1.6rem;
}

h1,
h2,
h3,
h4,
p,
li,
a,
body {
	color: var(--color3);
}

/*=================
--SECCION--HEADER--
=================*/
.nav {
	padding: 0 5% 0 5%;
	position: relative;
	grid-template-columns: 1fr;
}

.nav div img {
	width: 230px;
}

.nav img {
	vertical-align: top;
}

.nav a {
	color: var(--color3);
}

.nav a:hover {
	color: var(--color1);
}

.img-yaw,
.img-hyp,
.img-hua {
	right: 5%;
	top: -14px;
	display: block;
	position: absolute;
}

.img-yaw img,
.img-hyp img {
	height: 32px;
}

.img-hua img {
	height: 26px;
}

.jen-video {
	height: 180px;
	position: relative;
	box-shadow: var(--box-shadow1);
}

.flexslider .slides {
	box-shadow: var(--box-shadow1);
}

.slogan h1 {
	font-size: 1rem;
	font-family: 'Roboto-Regular';
}

@media screen and (min-width: 512px) {
	.nav {grid-template-columns: 288px 1fr;}

	.jen-video {
		height: 300px;
	}
}

@media screen and (min-width: 768px) {
	.nav {
		padding: 0;
	}

	.img-yaw,
	.img-hyp,
	.img-hua {
		right: 0;
	}

	.jen-video {
		height: 360px;
	}
}

@media screen and (min-width: 1024px) {
	.jen-video {
		height: 480px;
	}

	.slogan h1 {
		font-size: 1.3rem;
	}
}

@media screen and (max-width: 1407px) {
	.head2,
	.main-nav,
	.jen-video,
	.flexslider .slides {
		width: 90%;
	}
}

@media screen and (max-width: 767px) {
	.head2,
	.main-nav,
	.jen-video,
	.flexslider .slides {
		width: 100%;
	}
}


/*=====================
--SECCION--SOLUCIONES--
=====================*/
.solucBtn {
	box-shadow: var(--box-shadow2);
}

.solucBtn h1 {
	line-height: 1.5rem;
	font-weight: lighter;
}

.solucBtn img {
	transition: 0.5s;
}

.solucBtn:hover img {
	transform: scale(1.1);
}

@media screen and (max-width: 1407px) {
	.soluciones {
		width: 90%;
	}
}


/*=================
--SECCION--FOOTER--
=================*/
.direccion h3 {
	color: var(--color1);
}

.derechos p {
	margin-top: 30px;
	font-size: 0.8rem;
	color: var(--color4);
	background: linear-gradient(to right,
		rgba(32, 32, 32, 0)3%,
		rgba(32, 32, 32, 1)20%,
		rgba(32, 32, 32, 1)80%,
		rgba(32, 32, 32, 0)97%);
}

.guion {
	display: none;
}

@media screen and (min-width: 768px) {
	.guion {
		display: block;
	}
}

@media screen and (max-width: 1407px) {
	.foot {
		width: 90%;
	}
}


/*=============
--CONTACTENOS--
=============*/
.plano {
	overflow: hidden;
}

.jen-form .jen-camp input,
.jen-form .jen-camp textarea {
    font-size: 1rem;
    color: var(--color3);
    padding: 1.2rem 3rem 0rem 1rem;
    border-top: var(--line-weight2) solid var(--color1);
    border-left: var(--line-weight2) solid var(--color1);
    border-bottom: var(--line-weight4) solid var(--color1);
}

.jen-form .jen-camp textarea {
    height: 150px;
}

.jen-form .jen-camp label {
	left: 1rem;
	top: 0.3rem;
    font-size: 0.8rem;
    color: var(--color1);
}

.jen-form .jen-camp input:valid:focus+label,
.jen-form .jen-camp input:invalid:focus+label,
.jen-form .jen-camp textarea:valid:focus+label {
    color: var(--color1);
}

.jen-form .jen-camp input::placeholder,
.jen-form .jen-camp textarea::placeholder {
    color: var(--color3);
}

.jen-form .jen-camp input:placeholder-shown+label,
.jen-form .jen-camp textarea:placeholder-shown+label {
    font-size: 1rem;
    color: var(--color3);
}

.jen-form .btnSubmit {
    padding: 0.8rem 0;
    font-size: 1.2rem;
	color: var(--color3);
	background: var(--color2);
}

.jen-form .btnSubmit:hover {
	opacity: 0.8;
}

.contac2 {
	padding: 100px 0;
}

.pronto h2 {
	color: var(--color1);
}

.pronto h1,
.pronto h2 {
	text-align: center;
}

.pronto a {
	font-weight: bold;
	transition: 0.5s;
	color: var(--color3);
	text-decoration: none;
	background: var(--color2);
}

.pronto a:hover {
	opacity: 0.8;
}

@media screen and (max-width: 1407px) {
	.contac,
	.contac2 {
		width: 90%;
	}
}

@media screen and (max-width: 767px) {
	.plano {
		height: 300px;
	}
}


/*=========
--EQUIPOS--
=========*/
.mainEquipos {
	grid-template-columns: 180px 1fr;
}

.equipos1 a {
	display: block;
}

.equipos1 h3 {
	transition: 0.5s;
	color: var(--color4);
}

.equipos1 a:hover h3 {
	color: var(--color3);
}

.activo {
	color: var(--color3) !important;
}

.equipos2 {
	align-content: start;
}

.equipos2 a img {
	transition: 0.5s;
}

.equipos2 a:hover img {
	transform: scale(1.1);
}

.paginas a {
	color: var(--color3);
	padding: 0.3rem 0.2rem;
	transition: 0.5s;
}

.paginas a:hover {
	background: var(--color1);
}

.activo2 {
	background: var(--color1) !important;
}

@media screen and (max-width: 1407px) {
	.mainEquipos {
		width: 90%;
	}
}

@media screen and (max-width: 511px) {
	.mainEquipos {
		grid-template-columns: 1fr;
	}

	.equipos1 div {
		display: none;
	}
}


/*=============
--TAB--PANELS--
=============*/
.tabs {
	list-style: none;
}

.tabs li {
	cursor: pointer;
}

.tabs .act{
	font-weight: bolder;
}

.panel{
	display: none;
}

.tabPanels .panel.act{
	display: block;
}

#panel1 > img {
	width: 100%;
}

#panel1 p,
#panel2 p {
	font-size: 0.73rem;
}

#panel1 div img,
#panel2 div img {
	width: 278px;
}