body, html{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
font-family: "Public Sans", sans-serif;
}
#container{
position: static;
height: 100%;
width: 100%;
top: 0;
display: flex;
}
.main{
height: 100%;
width: 100%;
}
#container video{
padding-top: 65px;
height: 90%;
width: 100%;
z-index: 1;
background-color: black;
}
.message{
width: 100%;
position: relative;
z-index: 2;
top: -25%;
display: flex;
justify-content: center;
}
.content{
margin-top: 10px;
width: 100%;
height: auto;
color: white;
background-color: white;
}
.info{
box-shadow: 0px 3px 10px 0px rgba(133, 133, 133, 0.56);
background-color: white;
position: relative;
margin: auto;
margin-top: 10px;
width: 95%;
height: 750px;
padding: 10px 35px;
}
.info2{
box-shadow: 0px 3px 10px 0px rgba(133, 133, 133, 0.56);
/* background-image: url(../img/list.png); */
/* background-size: cover; */
position: relative;
margin: auto;
margin-top: 10px;
width: 95%;
padding: 10px 35px;
}
.info3{
background-color: rgb(110, 110, 110);
position: relative;
margin-top: 10px;
color: white;
width: 100%;
height: auto;
padding: 10px 35px;
}
.info3 img{
display: block;
margin: auto;
width: 70%;
}
.getInfo, .getCategories{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 50px;
cursor: pointer;
background-color: #243746;
border: 2px solid #122744;
color: white;
text-decoration: none;
font-weight: 600;
}
.getCategories:hover{
background-color: white;
transition: 0.5s;
color: #24436d;
}
.getInfo:hover{
background-color: white;
transition: 0.5s;
color: #24436d;
}
.getInfo{
width: 180px;
height: 50px;
display: block;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-weight: 600;
}
.getCategories{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 50px;
cursor: pointer;
text-decoration: none;
font-weight: 600;
position: absolute;
bottom: 4%;
left: 3%;
width: 220px;
z-index: 2;
}
.secondColumn img{
padding-top: 20px;
padding-bottom: 20px;
}
.exploreCategories img{
width: 100%;
}
.exploreCategories h1{
color: #5f5f5f;
font-size: 60px;
}
.exploreCategories p{
color: #5f5f5f;
font-size: 20px;
}
.exploreCategories{
display: grid;
grid-template-columns: 60% 40%;
grid-template-rows: 100%;
grid-column-gap: 5px;
color: black;
text-align: center;
}
.exploreCategories .exploreIMG{
height: 100%;
}
.list img{
width: 100%;
}
.itemsTitle h1{
margin: auto;
padding-top: 10px;
padding-bottom: 40px;
color: #5f5f5f;
font-size: 55px;
}
.list{
/* background-image: url(../img/list.png); */
/* background-size: cover; */
/* box-sizing: border-box; */
color: black;
}
.itemsTitle{
height: max-content;
width: 100%;
text-align: center;
}
.items{
margin-top: 10px;
width: 100%;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
grid-column-gap: 5px;
}
.itemsIMG img{
height: 100%;
}
.content span {
color: black;
margin-top: 10px;
display: flex;
}
/*span:before, span:after {
color:gray;
content:'';
flex:1;
border-bottom:groove 1px;
margin: auto 0.65rem;
box-shadow: 0 1px ;
}*/
.numeral{
width: 80%;
margin: auto;
display: flex;
align-items: center;
}
.numeral h2{
font-size: 30px;
padding-right: 10px;
}
.numeral p{
color: #464646;
font-size: 18px;
}
/* Diseños para pantallas pequeñas */
@media only screen and (max-width: 1800px) {
.info{
height: 530px;
padding: 5px 10px;
}
.info2{
padding: 5px 10px;
}
.exploreCategories h1{
padding: 5px 10px 5px 10px;
font-size: 35px;
}
.exploreCategories p{
padding: 5px 15px 5px 15px;
font-size: 13px;
}
.getInfo{
width: 140px;
height: 40px;
font-size: 13px;
}
.getCategories{
width: 180px;
height: 40px;
font-size: 12px;
}
.itemsTitle h1{
padding-bottom: 20px;
font-size: 35px;
}
.numeral p{
font-size: 13px;
}
}
@media only screen and (max-width: 900px) {
.main{
height: 75%;
width: 100%;
}
.getInfo{
width: 140px;
height: 40px;
font-size: 13px;
}
.getCategories{
width: 180px;
height: 40px;
font-size: 12px;
}
.info{
height: 600px;
padding: 5px 10px;
}
.exploreCategories{
display: grid;
grid-template-columns: 45% 55%;
grid-template-rows: 100%;
grid-column-gap: 2px;
}
.message{
top: -30%;
}
}
@media only screen and (max-width: 700px) {
.getCategories{
width: 150px;
height: 40px;
font-size: 10px;
}
.getInfo{
width: 120px;
height: 40px;
font-size: 10px;
}
.message{
top: -15%;
}
}
@media only screen and (max-width: 615px) {
.items{
display: block;
}
.itemsTitle h1{
padding-bottom: 20px;
font-size: 32px;
}
.info2{
padding: 5px 10px;
}
.info3{
padding: 5px 0px;
}
.info3 img{
width: 100%;
}
}
@media only screen and (max-width: 560px) {
.message{
top: -15%;
}
}
@media only screen and (max-width: 495px) {
.message{
top: -18%;
}
.main{
height: 100%;
width: 100%;
}
.info{
height: auto;
}
.exploreCategories{
display: block;
}
.exploreCategories .exploreIMG{
height: 300px;
}
.getCategories{
width: 120px;
height: 30px;
font-size: 10px;
bottom: 58%;
left: 5%;
}
.getInfo{
width: 120px;
height: 30px;
font-size: 10px;
}
.headline{
font-size: 13px;
}
.numeral p{
font-size: 11px;
}
.exploreCategories h1{
font-size: 25px;
}
.exploreCategories p{
font-size: 11px;
}
.itemsTitle h1{
font-size: 22px;
}
.numeral h2{
font-size: 22px;
}
}