:root {
    --color-fondo: rgb(32, 33, 37);
}

@font-face {
	font-family: MSGothic;
	src: url('resources/fonts/MS\ Gothic.ttf');
}

@font-face {
	font-family: CenturyGothicBold;
	src: url('resources/fonts/centurygothicbold.ttf');
}

@font-face {
	font-family: CenturyGothic;
	src: url('resources/fonts/centurygothic.ttf');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
  }

body {
    margin: 0;
}

.slide {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(transparent, transparent, transparent, var(--color-fondo)), 
    url("resources/images/backgrounds/fondo_mutualidad_blur.jpg");
    /*background-image: url("resources/images/backgrounds/fondo_mutualidad_blur.jpg");*/
    background-position: center;
	background-repeat: no-repeat;
    background-size: cover;
}

.slide img {
    width: 25vmax;
	height: auto;
}

.slide label {
    color: white;
    text-shadow: 0 14px 28px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
	font-family: CenturyGothicBold;
    font-size: 4vw;
}

#div_main {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#div_buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 16px;
}

#btn_conoce_mas {
    background-color: white;
    color: black;
    border-radius: 50px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    border: none;
    display: inline-flex;
    align-items: center;
    transition: all .2s ease-out;
}

#btn_conoce_mas:hover {
    cursor: pointer;
    background-color: rgb(0, 151, 155);
    color: white;
}

#btn_contactanos {
    background-color: transparent;
    color: white;
    border-radius: 50px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    border: none;
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    margin-left: 8px;
    transition: all .2s ease-out;
}

#btn_contactanos:hover {
    cursor: pointer;
    background-color: #ffffff57;
}

.slide-about {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    background: var(--color-fondo);
}

.slide-about label {
    font-family: CenturyGothicBold;
    color: white;
}

.slide-about p {
    color: white;
}

#div_about {
    display: flex;
    flex: 4;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--color-fondo);
    padding: 16px;
}

#lbl_section_title {
    font-family: CenturyGothicBold;
    font-size: 3.5vw;
}

#lbl_nosotros {
    font-family: CenturyGothic;
    font-size: 3vw;
}

#lbl_servicios {
    font-family: CenturyGothic;
    font-size: 3vw;
}

#div_about p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vmax;
}

hr {
    width: 99%;
    display: block;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}

.slide-contact {
    height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    background: var(--color-fondo);
}

#div_contact {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px;
}

.slide-contact label {
    color: white;
}

.slide-contact p {
    color: white;
}

#lbl_contact {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5vw;
}

#lbl_subtitle {
    font-family: CenturyGothic;
    font-size: 2.7vw;
}

a {
    text-decoration: none;
}

#btn_whatsapp {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 8px;
    border-radius: 4px;
    color: white;
    border: none;
    background: #128C7E;
    transition: all .2s ease-out;
}

#btn_whatsapp:hover {
    cursor: pointer;
    background: #075E54;
}

#icon_phone, #icon_mail {
    font-size: 24px;
    color: white;
}

#lbl_phone, #lbl_mail {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    margin-left: 8px;
}

iframe {
    flex: 1;
    border: none;
}

footer {
    color: white;
    background: var(--color-fondo);
    font-family: Arial, Helvetica, sans-serif;
}

/* Celular */
@media only screen and (max-width: 480px) {
    #div_main {
        display: flex;
        flex-direction: column;
    }

    #div_title {
        text-align: center;
    }

    .slide img {
        width: 30vmax;
        height: auto;
    }
    
    .slide label {
        font-size: 5vw;
    }
    
    #div_buttons {
        justify-content: center;
    }

    #lbl_section_title {
        font-size: 7vw;
    }
    
    #lbl_nosotros {
        font-size: 6.5vw;
    }
    
    #lbl_servicios {
        font-size: 6.5vw;
    }
    
    #div_about p {
        font-size: 2.7vmax;
    }

    .slide-contact {
        flex-direction: column;
    }

    #lbl_contact {
        font-size: 4vw;
    }

    #lbl_subtitle {
        font-size: 4vw;
    }

    #icon_phone, #icon_mail {
        font-size: 4.5vw;
        color: white;
    }
    
    #lbl_phone, #lbl_mail {
        font-size: 4.5vw;
    }
}

@media screen and (max-device-width: 1080px) and (orientation: portrait) {
   #div_main {
        display: flex;
        flex-direction: column;
    }

    #div_title {
        text-align: center;
    }

    .slide img {
        width: 30vmax;
        height: auto;
    }
    
    .slide label {
        font-size: 5vw;
    }
    
    #div_buttons {
        justify-content: center;
    }

    #lbl_section_title {
        font-size: 7vw;
    }
    
    #lbl_nosotros {
        font-size: 6.5vw;
    }
    
    #lbl_servicios {
        font-size: 6.5vw;
    }
    
    #div_about p {
        font-size: 2.7vmax;
    }

    .slide-contact {
        flex-direction: column;
    }

    #lbl_contact {
        font-size: 4vw;
    }

    #lbl_subtitle {
        font-size: 4vw;
    }

    #icon_phone, #icon_mail {
        font-size: 4.5vw;
        color: white;
    }
    
    #lbl_phone, #lbl_mail {
        font-size: 4.5vw;
    }
}