style1.css

*{
margin: 0px;
padding: 0px;
}

body{
background-color: #E1E1E1;
}

/* ----- HEADER ----- *//* ----- HEADER ----- *//* ----- HEADER ----- *//* ----- HEADER ----- *//* ----- HEADER ----- */

header{
position: fixed;
z-index: 3;
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background-color: #F9F9F9;
box-shadow: 0px 0px 15px -5px #000000;
}

header ul{
display: flex;
list-style: none;
font-family: helvetica, sans-serif;
font-size: 18px;
}

header ul li a{
display: inline-block;
text-decoration: none;
letter-spacing: 1px;
color: #353535;
padding: 30px;
}

.bloq1{
position: absolute;
z-index: 4;
display: inline-block;
background-color: #763626;
width: 30px;
height: 70px;
left: 0px;
}

.bloq2{
position: absolute;
z-index: 4;
display: inline-block;
background-color: #383D3D;
width: 25px;
height: 70px;
left: 30px;
}

.bloq3{
position: absolute;
z-index: 4;
display: inline-block;
background-color: #336B87;
width: 20px;
height: 70px;
left: 55px;
}

.bloq4{
position: absolute;
z-index: 4;
display: inline-block;
background-color: #90AFC5;
width: 15px;
height: 70px;
left: 75px;
}

.bloq5{
position: absolute;
z-index: 4;
display: inline-block;
background-color: #E1E1E1;
width: 10px;
height: 70px;
left: 90px;
}

.init{
position: relative;
display: flex;
height: 34px;
top: 28%;
align-items: center;
background-color: #336B87;
border-radius: 6px;
}

.init a{
color: #F9F9F9;
}

.logs{
position: absolute;
left: 85%;
display: inline-block;
}

.logs img{
padding: 15px;
filter: grayscale(20%);
transition: 0.2s ease-in-out;
}

/* ----- FOOTER ----- *//* ----- FOOTER ----- *//* ----- FOOTER ----- *//* ----- FOOTER ----- *//* ----- FOOTER ----- */

footer{
width: 100%;
text-align: center;
background-color: #F9F9F9;
box-shadow: 0px 0px 15px -7px #000000;
}

footer img{
height: 175px;
width: auto;
}

footer div{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: gill sans, sans-serif;
}

.redesf{
width: 60px;
height: 60px;
filter: grayscale(20%);
transition: 0.2s ease-in-out;
}

.divgclaro{
width: 100%;
height: 15px;
background-color: #E1E1E1;
}

.divclaro{
width: 100%;
height: 25px;
background-color: #90AFC5;
}

.divazul{
width: 100%;
height: 35px;
display: flex;
justify-content: center;
background-color: #336B87;
}

.divgray{
width: 100%;
height: 45px;
display: flex;
justify-content: center;
background-color: #383D3D;
}

.divgray p{
color: #F9F9F9;
font-size: 13px;
letter-spacing: 1px;
}

.divgrown{
width: 100%;
height: 55px;
display: flex;
justify-content: center;
background-color: #763626;
}

.divgrown a{
color: #F9F9F9;
text-decoration: none;
font-size: 14px;
letter-spacing: 1px;
}

/* ----- IMAGEN INICIO ----- *//* ----- IMAGEN INICIO ----- *//* ----- IMAGEN INICIO ----- *//* ----- IMAGEN INICIO ----- */

.iniciomg{
width: 100%;
height: auto;
display: flex;
justify-content: center;
background-color: #F9F9F9;
padding-block: 20px;
box-shadow: 0px 0px 15px -7px #000000;
}

.iniciomg div{
position: absolute;
width: 100%;
height: 40%;
display: flex;
align-self: center;
background-color: #383D3D;
z-index: 1;
}

.initimg{
position: relative;
width: 82%;
z-index: 2;
border-radius: 15px;
box-shadow: 0px 0px 15px -5px #000000;
}

/* ----- SECTION ----- *//* ----- SECTION ----- *//* ----- SECTION ----- *//* ----- SECTION ----- *//* ----- SECTION ----- */

.sec{
width: 100%;
height: 20px;
background-color: #F9F9F9;
border: none;
box-shadow: 0px 0px 15px -7px #000000;
}

section{
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #383D3D;
padding: 20px 0px;
}

section h2{
font-size: 30px;
font-weight: normal;
font-family: helvetica, sans-serif;
letter-spacing: 2px;
color: #F9F9F9;
}

.section1{
position: relative;
text-align: center;
background-color: #E1E1E1;
padding: 20px;
}

.section1 table{
text-align: center;
background-color: #F9F9F9;
color: #336B87;
font-family: helvetica, sans-serif;
font-size: 20px;
border-spacing: 50px 15px;
}

.toldiv{
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
}

.section1 table img{
width: 200px;
height: auto;
border-radius: 10px;
box-shadow: 0px 0px 15px #999999;
transition: 0.2s ease-in-out;
}

.toltip{
width: 200px;
background-color: #336B87;
color: #F9F9F9;
font-family: gill sans, sans-serif;
font-size: 18px;
text-align: center;
border-radius: 10px;
padding: 10px;
}

.tab{
display: none;
}

/* ----- MAIN ----- *//* ----- MAIN ----- *//* ----- MAIN ----- *//* ----- MAIN ----- *//* ----- MAIN ----- */

main{
display: flex;
align-items: center;
justify-content: space-around;
padding-block: 18px;
background-color: #F9F9F9;
box-shadow: 0px 0px 15px -7px #000000;
}

main h2{
font-size: 30px;
font-weight: normal;
font-family: helvetica, sans-serif;
letter-spacing: 2px;
color: #F9F9F9;
}

.mainnn{
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-image: url('fondo2.jpg');
background-position: center;
background-size: cover;
border-radius: 17px;
}

.mainn{
width: 92%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.main{
width: auto;
background-color: #F9F9F9;
border-radius: 17px;
padding: 25px;
}

.main p{
color: #353535;
font-family: gill sans, sans-serif;
text-align: justify;
}

.fondblack{
position: relative;
width: 85%;
display: flex;
align-items: center;
justify-content: space-around;
padding: 25px 0px;
z-index: 2;
}

.fondblack::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.5;
z-index: -1;
}

.info2{
width: auto;
height: auto;
display: flex;
background-color: #F9F9F9;
padding: 10px;
}

.info2 div{
width: 240px;
height: auto;
background-color: #336B87;
box-shadow: 0px 0px 15px #999999;
border-radius: 10px;
background-image: url('vermas.png');
background-size: cover;
background-position-x: -475px;
background-position-y: center;
cursor: pointer;
transition: 0.5s ease-in-out;
}

.info2 div img{
width: 240;
height: 320px;
float: left;
border-radius: 10px;
transition: 0.5s ease-in-out;
}

.ubica{
background-color: #F9F9F9;
padding: 20px;
}

.let{
color: #336B87;
font-weight: bold;
}

/* ----- CONTACTANOS ----- *//* ----- CONTACTANOS ----- *//* ----- CONTACTANOS ----- *//* ----- CONTACTANOS ----- */

.cont{
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}

.fondgris{
position: absolute;
z-index: -1;
width: 100%;
height: 250px;
background-color: #383D3D;
}

.contact{
width: 480px;
height: 390px;
display: flex;
flex-direction: column;
background-image: url('fondo1.jpg');
background-size: cover;
box-shadow: 5px 0 12px -5px #0E0E0E, -5px 0px 12px -5px #0E0E0E;
border-radius: 17px;
padding: 35px;
}

.contact h2{
font-size: 30px;
font-weight: normal;
font-family: helvetica, sans-serif;
letter-spacing: 2px;
color: #F9F9F9;
}

.contact p{
margin-top: 5px;
font-family: gill sans, sans-serif;
font-weight: bold;
font-size: 15px;
padding: 12px 10px;
}

.contact img{
width: 50px;
height: 50px;
float: left;
margin-top: 5px;
margin-right: 10px;
}

.contact span{
font-weight: normal;
font-size: 13px;
}

.tel{
width: 280px;
height: 25%;
background-color: #F9F9F9;
border-radius: 10px 10px 0px 0px;
}

.ubi{
width: 280px;
height: 25%;
background-color: #E1E1E1;
}

.red{
width: 280px;
height: 25%;
background-color: #F9F9F9;
border-radius: 0px 0px 10px 10px;
}

/* ----- EVENTOS (NAV Y @MEDIA) ----- *//* ----- EVENTOS (NAV Y @MEDIA) ----- *//* ----- EVENTOS (NAV Y @MEDIA) ----- */

nav .init:hover{
background-color: #4691B6;
}

nav .cambio:hover{
color: #336B87;
}

.logs img:hover{
filter: brightness(1.2);
transform: scale(1.1);
}

.section1 table img:hover{
filter: brightness(1.2);
transform: scale(1.1);
}

.redesf:hover{
filter: brightness(1.2);
transform: scale(1.1);
}

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

@media(min-width: 1700px) and (max-width: 2000px){
.logs img{
width: 50px;
height: 50px;
}
.bloq1, .bloq2, .bloq3, .bloq4, .bloq5{
height: 80px;
}
header{
height: 80px;
}
header ul{
font-size: 24px;
}
.init{
height: 38px;
top: 29%;
}
section h2{
font-size: 34px;
}
.section1 table{
font-size: 25px;
}
.section1 table img{
width: 240px;
height: 240px;
}
.toldiv{
font-size: 20px;
}
main h2{
font-size: 34px;
}
.main p{
font-size: 20px;
}
.contact h2{
font-size: 34px;
}
.contact p{
font-size: 17px;
}
.contact span{
font-size: 16px;
}
.tel, .ubi, .red{
width: 320px;
}
footer img{
height: 200px;
width: auto;
}
.divgray p{
font-size: 15px;
}
.divgrown a{
font-size: 17px;
}
}

@media(max-width: 1180px){
section h2{
font-size: 26px;
}
.section1 table{
font-size: 18px;
}
.section1 table img{
width: 150px;
height: 150px;
}
.toldiv{
font-size: 15px;
}
main h2{
font-size: 26px;
}
.main p{
font-size: 14px;
}
.contact h2{
font-size: 26px;
}
.contact p{
font-size: 13px;
}
}

@media(max-width: 1150px){
.inf{
display: none;
}
.fondblack{
height: 330px;
}
.ubica{
height: 85%;
width: 60%;
}
.direc{
height: 100%;
width: 100%;
}
}

@media(max-width: 980px){
.logs{
display: none;
}
}

@media(max-width: 950px){
.section1 table{
border-spacing: 30px 10px;
}
header{
justify-content: right;
}
header nav{
padding-right: 110px;
}
}

@media(max-width: 850px){
.bloq1, .bloq2, .bloq3, .bloq4, .bloq5{
height: 52px;
}
header{
height: 52px;
}
header ul{
font-size: 15px;
}
header ul li a{
padding: 20px;
}
.init{
height: 30px;
top: 24%;
}
.br{
display: none;
}
section h2{
font-size: 24px;
}
.section1 table{
font-size: 16px;
}
.section1 table img{
width: 130px;
height: 130px;
}
.toldiv{
font-size: 13px;
}
main h2{
font-size: 24px;
}
.main p{
font-size: 13px;
}
.contact{
width: 350px;
height: 300px;
padding: 30px;
}
.contact h2{
font-size: 24px;
}
.contact p{
font-size: 12px;
}
.contact span{
font-size: 12px;
}
.contact img{
width: 35px;
height: 35px;
margin-top: 0px;
}
.tel, .ubi, .red{
width: 250px;
height: 76px;
}
}

@media(max-width: 700px){
header nav{
padding-right: 50px;
}
.ubica{
width: 75%;
}
}

@media(max-width: 650px){
header nav{
padding-right: 20px;
}
}

@media(max-width: 600px){
header nav{
padding-right: 0px;
}
header ul{
font-size: 14px;
}
header ul li a{
padding: 15px;
}
.init{
height: 25px;
top: 22%;
}
}

@media(max-width: 500px){
.fondblack{
width: 90%;
}
.ubica{
width: 75%;
}
}