*{
margin:0;
padding:0;
}
html,body{
font-family: sans-serif;
background: url(images/fondo5.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
display: block;
}
.contenedor{
background: rgb(0,0,0,0.5);
margin:100px;
display: inline-table;
width: 80%;
padding: 50px;
}
.contenedor_equi{
position: relative;
margin-top: 7%;
width: 100%;
background: rgb(0,0,0,0.5);
}
.cuerpo_imagenes{
width: 85%;
height: 100%;
margin-left: 5%;
margin-bottom: 40px;
}
/**---------------------------*/
.carros{
height: 500px;
background: url(img_equi/carrosG.jpg);
margin-bottom:20px;
background-size: 100% 100%;
box-shadow: 0px 0px 8px 4px #fff;
cursor:pointer;
}
.carros:hover .info {
opacity:1;
}
.carros:hover p.headline {
margin-left: 15%;
}
.carros:hover p.descripcion {
margin-top: 25%;
margin-left: -40%;
}
/**---------------------------*/
.comando{
height: 500px;
background: url(img_equi/comando.jpg);
background-size: 100% 100%;
margin-bottom:20px;
box-shadow: 0px 0px 8px 4px #fff;
cursor:pointer;
}
.comando:hover .right {
opacity:1;
}
.comando:hover p.headline {
margin-left: 30%;
}
.comando:hover p.descripcion {
margin-top: 25%;
padding-left: 10%;
padding-right: 5%;
}
.comando .dis{
margin-left: 40%;
margin-right: 5%;
}
/*********.......................*/
.dx{
height: 500px;
background: url(img_equi/dxg.jpg);
background-size: 100% 100%;
margin-bottom:20px;
box-shadow: 0px 0px 8px 4px #fff;
cursor:pointer;
}
.dx:hover .info {
opacity:1;
}
.dx:hover p.headline {
margin-left: 30%;
}
.dx:hover p.descripcion {
margin-top: 20%;
margin-left: 2%;
padding-right: 150px;
}
/**......................................*/
.ejc{
height: 500px;
background: url(img_equi/ejc416.jpg);
background-size: 100% 100%;
margin-bottom:20px;
box-shadow: 0px 0px 8px 4px #fff;
cursor:pointer;
}
.ejc:hover .right {
opacity:1;
}
.ejc:hover p.headline {
margin-left: 30%;
}
.ejc:hover p.descripcion {
padding-left: 9%;
padding-right: 5%;
margin-top: 20%;
}
.ejc .dis{
margin-left: 40%;
}
/*.....................¿*/
.eimco{
height: 500px;
background: url(img_equi/eimcoG.jpg);
background-size: 100% 100%;
margin-bottom:20px;
box-shadow: 0px 0px 8px 4px #fff;
cursor:pointer;
}
.eimco:hover .info {
opacity:1;
}.eimco:hover p.headline {
margin-left: 115px;
}
.eimco:hover p.descripcion {
margin-top: 20%;
margin-left: 2%;
padding-right: 150px;
}
/*,,,,,,,,,,,,,.................*/
.matic{
height: 500px;
background: url(img_equi/maticG.jpg);
background-size: 100% 100%;
margin-bottom:20px;
box-shadow: 0px 0px 8px 4px #fff;
cursor:pointer;
}
.matic:hover .right {
opacity:1;
}
.matic:hover p.headline {
margin-left: 30%;
}
.matic:hover p.descripcion {
margin-top: 20%;
margin-left: 10%;
padding-right: 4%;
}
.matic .dis{
margin-left: 40%;
}
/*.................................*/
.ventilador{
height: 500px;
background: url(img_equi/ventiladorG.jpg);
background-size: 100% 100%;
margin-bottom:20px;
box-shadow: 0px 0px 8px 4px #fff;
cursor:pointer;
}
.ventilador:hover .info {
opacity:1;
}
.ventilador:hover p.headline {
margin-left: 115px;
}
.ventilador:hover p.descripcion {
margin-top: 20%;
margin-left: 2%;
padding-right: 150px;
}
/*..............................*/
.tamrok{
height: 500px;
background: url(img_equi/tamrok.jpg);
background-size: 100% 100%;
margin-bottom:20px;
box-shadow: 0px 0px 8px 4px #fff;
cursor:pointer;
}
.tamrok:hover .right {
opacity:1;
}
.tamrok:hover p.headline {
margin-left: 40%;
}
.tamrok:hover p.descripcion {
margin-top: 20%;
margin-left: 10%;
padding-right: 4%;
}
.tamrok .dis{
margin-left: 40%;
}
/*************************************/
p.headline {
position: absolute;
font-weight: bold;
font-size: 1.5rem;
margin-left: -75px;
margin-top: 10%;
transition: margin-left 0.3s;
}
p.descripcion {
font-size: 1rem;
font-weight: bolder;
text-align: center;
margin-top: 200px;
transition: margin-top 0.4s;
color:orange;
}
.info {
position:absolute;
width: 50%;
height: 500px;
font-weight: bold;
background-color: rgba(0,0,0,0.5);
opacity:0;
transition: opacity 0.3s;
color: white;
-webkit-clip-path: polygon(0 0, 100% 0, 55% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 55% 100%, 0% 100%);
}
.right {
position:relative;
width: 50%;
height: 500px;
float: right;
background-color: rgba(0,0,0,0.5);
opacity:0;
transition: opacity 0.3s;
color: white;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}
#intro {
-webkit-animation-name: movimiento-diagonal;
-webkit-animation-duration: 3s;
left: 10%;
color: darkorange;
font-weight: bold;
font-size: 20px;
font-weight: bold;
padding: 20px;
width: 80%;
position: relative;
text-align: justify;
font-family: trasandina, sans-serif;
background: rgb(0,0,0,0.5);
margin-top: 12px;
}
@keyframes movimiento-diagonal {
from {
left: -100px;
}
to {
left: 10%;
}
}
.dis{
color: white;
background: rgba(0,0,0,0.5);
padding: 5px;
margin-left: 15%;
font-weight: bolder;
border:3px solid darkorange ;
border-radius: 5px;
}
.dis:hover{
background: darkorange;
color: black;
border:3px solid white;
-webkit-transition: width 2s, background 0.9s;
-moz-transition: widt 2s, background 0.9s;
-o-transition: width 2s, background 0.9s;
transition: width 2s, background 0.9s;
}
#dispo{
font-weight: bold;
font-size: 15px;
color: #23ff23;
}
@media screen and (max-width:360px) {
html, body{
margin: 0;
padding: 0;
}
#intro{
font-size: 15px;
padding: 20px;
margin-top:20%;
margin-left: -7%;
width: 92%;
}
.carros{
height: 300px;
}
.carros:hover p.headline {
margin-left: 10%;
margin-top: 5%;
}
.carros:hover p.descripcion {
margin-top: 25%;
margin-left: 5%;
}
/*--------------------*/
.comando{
height: 300px;
}
.comando:hover p.headline {
margin-left: 10%;
margin-top: 5%;
}
.comando:hover p.descripcion {
margin-top: 15%;
margin-left: -5%;
}
.comando .dis{
margin-left: 17%;
}
/*--------------------*/
.dx{
height: 300px;
}
.dx:hover p.headline {
margin-left: 30%;
margin-top: 5%;
font-size: 14px;
}
.dx:hover p.descripcion {
font-size: 12.5px;
margin-top: 10%;
padding: 10px;
text-align: justify;
}
.dx .dis{
margin-left:17%;
}
/*--------------------*/
.ejc{
height: 300px;
}
.ejc:hover p.headline {
margin-left: 30%;
margin-top: 5%;
font-size: 14px;
}
.ejc:hover p.descripcion {
font-size: 12.5px;
margin-top: 10%;
padding: 10px;
text-align: justify;
}
.ejc .dis{
margin-left: 17%;
}
/*--------------------*/
.eimco{
height: 300px;
}
.eimco:hover p.headline {
margin-left: 20%;
margin-top: 5%;
font-size: 14px;
}
.eimco:hover p.descripcion {
font-size: 12.5px;
margin-top: 10%;
padding: 10px;
text-align: justify;
}
.eimco .dis{
margin-left: 17%;
}
/*--------------------*/
.matic{
height: 300px;
}
.matic:hover p.headline {
margin-left: 20%;
margin-top: 5%;
font-size: 14px;
}
.matic:hover p.descripcion {
font-size: 12.5px;
margin-top: 10%;
padding: 10px;
margin-left: 2%;
text-align: justify;
}
.matic .dis{
margin-left: 17%;
}
/*--------------------*/
.ventilador{
height: 300px;
}
.ventilador:hover p.headline {
margin-left: 20%;
margin-top: 5%;
font-size: 14px;
}
.ventilador:hover p.descripcion {
font-size: 12.5px;
margin-top: 10%;
padding: 10px;
text-align: justify;
}
.ventilador .dis{
margin-left: 17%;
}
/*--------------------*/
.tamrok{
height: 300px;
}
.tamrok:hover p.headline {
margin-left: 20%;
margin-top: 5%;
font-size: 14px;
}
.tamrok:hover p.descripcion {
font-size: 12.5px;
margin-top: 10%;
padding: 10px;
text-align: justify;
margin-left: 2%;
}
.tamrok .dis{
margin-left: 17%;
}
/*--------------------*/
.info{
width: 85%;
overflow: hidden;
height: inherit;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.right{
width: 100%;
overflow: hidden;
height: inherit;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
p.headline{
font-size: 20px;
}
p.descripcion{
font-size: 15px;
}
}
@media screen and (max-width:640px) and (min-width: 361px){
/*Resoluciones menores de 640 píxeles de ancho (pero mayores que 361 píxeles de ancho).*/
html{
margin: 0;
padding: 0;
}
#intro{
font-size: 20px;
padding: 20px;
margin-top:10%;
margin-left: -7%;
width: 92%;
}
.carros{
height: 400px;
}
.carros:hover p.headline {
margin-left: 20%;
margin-top: 5%;
font-size: 30px;
}
.carros:hover p.descripcion {
margin-top: 20%;
margin-left: 7%;
font-size: 25px;
}
.carros .dis{
margin-left: 25%;
}
/*--------------------*/
.comando{
height: 400px;
}
.comando:hover p.headline {
margin-left: 25%;
margin-top: 5%;
font-size: 30px;
}
.comando:hover p.descripcion {
margin-top: 15%;
margin-left: -5%;
font-size: 25px;
}
.comando .dis{
margin-left: 25%;
}
/*--------------------*/
.dx{
height: 400px;
}
.dx:hover p.headline {
margin-left: 30%;
margin-top: 5%;
font-size: 30px;
}
.dx:hover p.descripcion {
margin-top: 10%;
padding: 10px;
font-size: 20px;
}
.dx .dis{
margin-left:25%;
}
/*--------------------*/
.ejc{
height: 400px;
}
.ejc:hover p.headline {
margin-left: 30%;
margin-top: 5%;
font-size: 30px;
}
.ejc:hover p.descripcion {
margin-top: 10%;
padding: 10px;
font-size: 20px;
}
.ejc .dis{
margin-left: 25%;
}
/*--------------------*/
.eimco{
height: 400px;
}
.eimco:hover p.headline {
margin-left: 20%;
margin-top: 5%;
font-size: 30px;
}
.eimco:hover p.descripcion {
font-size: 20px;
margin-top: 10%;
padding: 10px;
}
.eimco .dis{
margin-left: 25%;
}
/*--------------------*/
.matic{
height: 400px;
}
.matic:hover p.headline {
margin-left: 20%;
margin-top: 5%;
font-size: 30px;
}
.matic:hover p.descripcion {
font-size: 20px;
margin-top: 10%;
padding: 10px;
margin-left: 2%;
text-align: justify;
}
.matic .dis{
margin-left: 25%;
}
/*--------------------*/
.ventilador{
height: 400px;
}
.ventilador:hover p.headline {
margin-left: 20%;
margin-top: 5%;
font-size: 30px;
}
.ventilador:hover p.descripcion {
font-size: 20px;
margin-top: 10%;
padding: 10px;
text-align: justify;
}
.ventilador .dis{
margin-left: 25%;
}
/*--------------------*/
.tamrok{
height: 400px;
}
.tamrok:hover p.headline {
margin-left: 20%;
margin-top: 5%;
font-size: 30px;
}
.tamrok:hover p.descripcion {
font-size: 17px;
margin-top: 10%;
padding: 10px;
text-align: justify;
margin-left: 2%;
}
.tamrok .dis{
margin-left: 25%;
}
/*--------------------*/
.info{
width: 85%;
overflow: hidden;
height: inherit;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.right{
width: 100%;
overflow: hidden;
height: inherit;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}
@media screen and (max-width:790px) and (min-width: 641px){
html,body{
padding: 0;
margin: 0;
}
.info{
width: 80%;
}
.right{
width: 80%;
}
}