/*Fuentes*/

@font-face {
    font-family: "latoLight";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("../fonts/Lato-Light.ttf") format("truetype");
}

@font-face {
    font-family: "latoRegular";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("../fonts/Lato-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "latoBold";
    font-style: normal;
    font-weight: 700;
    src: local("?"), url("../fonts/Lato-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "monserratLight";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("../fonts/Montserrat-Light.ttf") format("truetype");
}

@font-face {
    font-family: "monserratRegular";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("../fonts/Montserrat-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "monserratBold";
    font-style: normal;
    font-weight: 700;
    src: local("?"), url("../fonts/Montserrat-Bold.ttf") format("truetype");
}

/*Variables*/

:root {
    --ds-blue: #4daff8;
    --ds-orange: #f8974d;
    --ds-white: #ffffff;
    --ds-dark-gray: #cccccc;
    --ds-light-gray: #f9f9f9;
    --ds-gray: #95989a;
}

/*Inicialización*/

html, body{
	height: 100%;
	font-family: monserratRegular;
    color: var(--ds-gray) !important;
}

/*Clases utilitarias*/

.height100{
	height: 100% !important;
}

.height90{
	height: 90% !important;
}

.height80{
	height: 80% !important;
}

.height70{
	height: 70% !important;
}

.width100{
	width: 100% !important;
}

.width90{
	width: 90% !important;
}

.width80{
	width: 80% !important;
}

.width70{
	width: 70% !important;
}

.width60{
	width: 60% !important;
}

.width50{
	width: 50% !important;
}

.width30{
	width: 30% !important;
}

.width20{
	width: 20% !important;
}

.width10{
	width: 10% !important;
}

.latoLight{
    font-family: latoLight !important;
}

.latoRegular{
    font-family: latoRegular !important;
}

.latoBold{
    font-family: latoBold !important;
}

.monserratLight{
    font-family: monserratLight !important;
}

.monserratRegular{
    font-family: monserratRegular !important;
}

.monserratBold{
    font-family: monserratBold !important;
}

.text-ds-gray{
    color: var(--ds-gray) !important;
}

.text-ds-blue{
    color: var(--ds-blue) !important;
}

.text-ds-orange{
    color: var(--ds-orange) !important;
}

.text-line-height-52{
    line-height: 52px;;
}

.text-line-height-32{
    line-height: 32px;;
}

/* Diseños personalizados */

/*#main-navbar{
    border-bottom: .5px solid var(--ds-dark-gray);
}*/

#main-navbar{
    background-color: var(--ds-white) !important;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    background-color: #fff;
}

#navbarNavDropdown .nav-item{
    width: 150px;
    text-align: center;
    margin: 0 auto;
    font-size: 12px;
}

#navbarNavDropdown .nav-item.contact-navbar{
    border: 1px solid var(--ds-orange);
    border-radius: var(--bs-border-radius);
    background-color: transparent;
    font-size: 12px;
    color: var(--ds-orange);
    width: 50%;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

#navbarNavDropdown .nav-item.contact-navbar:hover{
    background-color: #ffefe3;
    border: 1px solid #ffefe3;
}

#navbarNavDropdown .nav-item.contact-navbar a{
    font-size: 12px;
    color: var(--ds-orange);
}

#welcomeSection{
    padding-top: 5%;
}

#welcomeSection #mainDevices{
    width: 80%;
}

#welcomeSection .contactButton, #contactSection .contactButton{
    background-color: var(--ds-orange);
    color: var(--ds-white);
}

#usersSection{
    padding-top: 5%;
    padding-bottom: 5%;
}

#usersSection .userImage{
    width: 70%;
}

#featuresSection{
    background-image: url("../media/img/background.png");
    padding-bottom: 5%;
}

#featuresSection #secondaryLogo{
    width: 20%;
}

#featuresSection #copyrightLegend{
    margin-top: 10%;
}

#contactSection{
    background-color: var(--ds-light-gray);
    padding-top: 5%;
    padding-bottom: 3%;
}

#contactSection .footerLink a{
    text-decoration: none;
    color: var(--ds-gray);
}

#contactSection .footerLink a:hover{
    text-decoration: underline;
    color: var(--ds-gray);
}

/*Estilos por tamaño de pantalla*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

    #welcomeSection{
        padding-top: 40%;
    }

    #usersSection{
        padding-top: 10%;
        padding-bottom: 10%;
    }

    #usersSection .userImage{
        width: 100%;
    }

    #featuresSection{
        padding-top: 20%;
        padding-bottom: 20%;;
    }

    #featuresSection #secondaryLogo{
        width: 70%;
    }  

    #featuresSection #applications{
        margin-top: 20%;
    }
    
    #featuresSection #moreInfo{
        margin-top: 15%;
    }

    #stepsSection{
        padding-top: 15%;
        padding-bottom: 15%;
    }
    
    #stepsSection .step{
        padding-top: 20%;
    }

    #contactSection{
        padding-top: 15%;
        padding-bottom: 10%;
    }
    
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

    #welcomeSection{
        padding-top: 40%;
    }

    #usersSection{
        padding-top: 10%;
        padding-bottom: 10%;
    }

    #usersSection .userImage{
        width: 100%;
    }

    #featuresSection{
        padding-top: 20%;
        padding-bottom: 20%;;
    }

    #featuresSection #secondaryLogo{
        width: 70%;
    }    

    #featuresSection #applications{
        margin-top: 20%;
    }
    
    #featuresSection #moreInfo{
        margin-top: 15%;
    }

    #stepsSection{
        padding-top: 15%;
        padding-bottom: 15%;
    }
    
    #stepsSection .step{
        padding-top: 20%;
    }

    #contactSection{
        padding-top: 15%;
        padding-bottom: 10%;
    }
    
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

    #welcomeSection{
        padding-top: 40%;
    }

    #usersSection{
        padding-top: 10%;
        padding-bottom: 10%;
    }

    #usersSection .userImage{
        width: 100%;
    }

    #featuresSection{
        padding-top: 20%;
        padding-bottom: 20%;;
    }

    #featuresSection #secondaryLogo{
        width: 50%;
    } 

    #featuresSection #applications{
        margin-top: 20%;
    }
    
    #featuresSection #moreInfo{
        margin-top: 15%;
    }

    #stepsSection{
        padding-top: 15%;
        padding-bottom: 15%;
    }
    
    #stepsSection .step{
        padding-top: 20%;
    }

    #contactSection{
        padding-top: 15%;
        padding-bottom: 10%;
    }
    
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    #welcomeSection{
        padding-top: 8%;
    }

    #usersSection{
        padding-top: 3%;
        padding-bottom: 5%;
    }

    #usersSection .userImage{
        width: 70%;
    }

    #featuresSection{
        padding-top: 8%;
        padding-bottom: 5%;;
    }

    #featuresSection #secondaryLogo{
        width: 20%;
    }  

    #featuresSection #applications{
        margin-top: 5%;
    }
    
    #featuresSection #moreInfo{
        margin-top: 3%;
    }

    #stepsSection{
        padding-top: 5%;
        padding-bottom: 5%;
    }
    
    #stepsSection .step{
        padding-top: 5%;
    }

    #contactSection{
        padding-top: 5%;
        padding-bottom: 3%;
    }
    
}