:root {
    --buttons: #0070b0;
    --buttons__hover: #319cd8;
    --buttons__text: #ffffff;
    --background: #ffffff;
    --background__container: #e9e9e9;
    --misc: #353F51;
    --init__ring: #f7f3f0;
}

*, *:before, *:after {
    box-sizing: inherit;
  }

html{
    scroll-behavior: smooth;
}

@font-face {
    font-family: Oheavy;
    src: url(../content/fonts/Origin-Heavy.otf);
}

@font-face {
    font-family: Obold;
    src: url(../content/fonts/Origin-Bold.otf);
}

@font-face {
    font-family: Oregular;
    src: url(../content/fonts/Origin-Regular.otf);
}

@font-face {
    font-family: Olight;
    src: url(../content/fonts/Origin-Light.otf);
}

body{
    font-family:'Questrial', sans-serif;
    margin: 0%;
    padding: 0%;
    text-decoration: none;
    box-sizing: border-box;
    background-color: var(--background);
}













/*CUERPO*/

.logo{
    height: 140px;
}

.logo__container{
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner{
    height: 60vh;
    position: relative;
    bottom: 30px;
}












/*FIXED CONTACT*/

.contact__container{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 5;
}

.icon__contact{
    margin: 5px;
}

@media (max-width: 850px){
    .contact__container{
        top: inherit;
        bottom: 5px;
        right: 5px;
    }
    .icon__contact{
        margin: 2px;
    }
}










/*LINKS*/

.gral__container{
    display: flex;
    align-items: center;
    flex-direction: column;

}

.btn__b{
    padding: 15px 35px;
    width: 75%;
    transition: 0.2s;
    border-radius: 10px;
    background-color: var(--buttons);
    font-family: 'Questrial', sans-serif;
    transition: 0.5s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 0 0;
    text-decoration: none;
    color: var(--buttons__text);
    font-size: 20px;
}



.btn__b:hover{
    background-color: var(--buttons__hover);
}

@media(max-width: 520px){
    .btn__b{
        padding: 15px 35px;
        font-size: 17px;
    }
}

















.links__container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--background__container);
    width: 90%;
    border-radius: 15px;
    padding: 30px 0;
    margin: 30px 0;
}

.icon{
    width: 25px;
    margin: 0 5px 0 0;
}

.icon2{
    width: 30px;
    margin: 0 5px 0 0;
}


















/**PERFIL**/

.title__unique{
    font-size: 30px;
    color: var(--buttons);
    margin: 10px;
    font-family: Obold, questrial, sans-serif;
    text-align: center;
}

.subtitle__unique{
    text-align: center;
    margin: -10px 20px 0 20px;
}


.profile__banner{
    height: 35vh;
    width: 100%;
    background-image: url(../content/products/banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    display: flex;
    align-items: end;
    justify-content: center;
    margin: 0 0 50px 0;
}

.profile__init{
    height: 100px;
    width: 100px;
    position: relative;
    bottom: -50px;
    border-radius: 100%;
    background-image: url(../content/products/init.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: solid var(--init__ring) 3px;
}














/**Footer**/

footer {
    text-align: center;
    padding: 40px;
    font-size: 0.8rem;
}














/* MAPA */

.map__container{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 4% 0 4%;
}

.map{
    height: 45vh;
    width: 100%;
    border-radius: 15px;
    border: none;
}

@media(max-width: 780px){
    .map{
        height: 25vh;
        width: 100%;
    }
}

















/*GALERIA*/

.container__photo{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 400px));
    justify-content: center;
    align-items: center;
    padding: 50px 25px;
    grid-gap: 25px;
    
}

.photo{
    overflow: hidden;
}

.unique__photo{
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: 0.5s;
    position: relative;
    top: 0;
    justify-self: center;
    z-index: 1;
    filter: grayscale(50%);
}

.unique__photo:hover{
    top: -35px;
    filter: grayscale(0%);
}

@media(max-width: 780px){
    .container__photo{
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
        padding: 15px;
        grid-gap: 15px;
        grid-auto-rows: auto;
    }
    .unique__photo{
        filter: grayscale(0%);
    }
    .unique__photo:hover{
        top: 0;
    }
}



footer p{
    color: --misc;
}