*,::after,
::before
{box-sizing:border-box}

body,
html{
font-family:"Source Sans Pro",sans-serif;
margin:0;
padding:0;
line-height:1.2
}

h1,h2,h3,
p{
margin:0;
font-weight:400
}
a{
text-decoration:none;
color:#fff}

.coverPage{
display:flex;
align-items:center;
justify-content:center;
height:100svh;
width:100vw;
background-image:url(/assets/img/construccion.jpg);
background-repeat:no-repeat;
background-size:cover
}

.coverPage::before{
content:"";
display:block;
position:absolute;
background:#000;
opacity:.9;
width:100%;
height:100%;
top:0
}

.__coverPage-content{
display:flex;
justify-content:center;
flex-direction:column;
color:#fff;
height:100%;
width:50%;
text-align:center;
opacity:.9;
padding:1em
}

.__coverPage-content h1{
font-size:3.2rem;
color:#f9a825;
opacity:.8
}

.__coverPage-content h2{
font-size:2em;
margin-bottom:1.5em
}

.__coverPage-content h3{
font-size:1.1em;
margin-bottom:.8em;
text-transform:uppercase;
opacity:.7
}

.__coverPage-content p{
font-size:.95em;
line-height:1.5;
opacity:.7
}

.socialMedia{
margin-top:1em
}

.socialIcon{
margin-right:10px;
opacity:.7
}

.socialIcon i{
display:inline-flex;
justify-content:center;
align-items:center;
font-size:20px;
border:2px solid #fff;
border-radius:50%;
padding:15px;
height:25px;
width:25px;
transition:all .3s
}

.socialIcon i:hover{
color:#f9a825;
border-color:#f9a825
}

.projectsListTitle{
margin-top:2em;
margin-bottom:.5em;
font-size:1.3rem!important;
text-transform:capitalize
}

.projectsList{
display:flex;
justify-content:center;
width:100%;
column-gap:1em
}

.btn-projects{
background-color:#fff;
color:#333;
font-weight:700;
padding:1em;
width:250px!important;
transition:all .3s;
border:2px solid transparent;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-ms-transition:all .3s;
-o-transition:all .3s
}

.btn-projects:hover{
background-color:#f9a825;
color:#fff;
border-color:#1b1b1b
}

@media only screen and (max-width:1023px){
.__coverPage-content{
width:100%
}

.__coverPage-content h1{
font-size:2.8rem
}

.__coverPage-content h2{
font-size:2rem
}

.projectsList{
flex-direction:column;
row-gap:1em
}

.btn-projects{
text-align:center;
width:100%!important
}
}

@media only screen and (max-width:1023px) and (orientation:landscape){
.__coverPage-content h1{
font-size:1.7rem
}

.__coverPage-content p{
font-size:.8rem
}
.__coverPage-content h2{
font-size:1.2rem;
margin-bottom:1em
}
.__coverPage-content h3{
font-size:.9rem
}
.__coverPage-content a{
font-size:.8rem
}
.socialIcon i{
font-size:15px
}
.projectsList{
flex-direction:row;
column-gap:1em
}
.projectsListTitle{
margin-top:1.5em!important;
margin-bottom:.1em;
font-size:1.2rem!important
}
}