/* start shared  */

body {
    background: #ffffff;
    color: #383838;
    font-family: 'Nunito Sans', sans-serif;
    overflow-x: hidden; /* prevent horizontal scrollbar from appearing */
}

a:hover {
    text-decoration: none;
}

@media (min-width: 576px) { 
    .container {
        width: 90%;
    }
}

@media (min-width: 1200px) { 
    .container {
        max-width : 1368px;
    }
}

.padd-top {
    padding-top: 60px;
}

.padd-right {
    padding-right: 60px;
}

.padd-bottom {
    padding-bottom: 60px;
}

.padd-bottom-half {
    padding-bottom: 30px;
}

.padd-left {
    padding-left: 60px;
}

@media (max-width : 575px) {
    .padd-top {
        padding-top: 40px;
    }
    
    .padd-right {
        padding-right: 30px;
    }
    
    .padd-bottom {
        padding-bottom: 40px;
    }

    .padd-bottom-half {
        padding-bottom : 20px;
    }
    
    .padd-left {
        padding-left: 30px;
    }
}

.shadow-box {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #8A8A8A;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #8A8A8A;
   opacity:  1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #8A8A8A;
   opacity:  1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #8A8A8A;
}

::-ms-input-placeholder { /* Microsoft Edge */
   color:    #8A8A8A;
}

/* end shared */


/* start header */

header .container-fluid {
    padding-left : 0;
    padding-right : 0;
}

header .container-fluid > div {
    /* 
    height : 66vh;
    min-height: 300px; 
    */
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

header .container-fluid .container {
    padding-top : 65px;
    padding-bottom : 32.5px;
}

/* 16x9 Aspect Ratio */
header .iframe-container {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

/* 4x3 Aspect Ratio */
header .iframe-container-4x3 {
    overflow: hidden;
    position : relative;
    padding-bottom: 20%;
}

header .iframe-container iframe, 
header .iframe-container-iframe-4x3 iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    max-height : calc(100vh - 97.5px);
    position:absolute;
}

header .iframe-container video, 
header .iframe-container-iframe-4x3 video {
    left:0;
    top:0;
    height:100%;
    width:100%;
    max-height : 100vh;
    position:absolute;
}

header iframe {
    /* margin-top : 65px; */
    height : 100%;
    width : 100%;
}


/* end header */


/* start intro  */

#intro b {
    font-weight : 800;
}

#intro .title {
    font-size : 100%; 
}

#intro .text {
    font-size : 125%; 
    line-height : 180%;
    font-weight : 200;
    padding-top : 40px;
    padding-bottom : 40px;
}

@media (max-width : 359px) {
    #intro .spacer {
        display : none;
    }
}

@media (max-width : 575px) {
    #intro .title {
        font-size : 75%;
    }

    #intro .text {
        font-size : 100%; 
        line-height : 150%;
    }
}

@media (max-width : 989px) {
    #intro .logo {
        padding-top : 60px;
        padding-bottom : 30px;
    }
}

@media (max-width : 1199px) {
    #intro .spacer,
    #intro .title {
        padding-top : 60px;
    }
}

/* end Intro */


/* start concepto */

#concepto b {
    font-weight : 600;
}

#concepto .title  {
    font-size: 250%;
    font-weight: 600;
    line-height: 120%;
    padding-bottom : 30px;
}

#concepto .text-1,
#concepto .text-2 {
    font-size : 125%; 
    line-height : 180%;
    font-weight : 200;
    padding-left : 10%;
    padding-right : 10%;
}

#concepto .text-2 {
    padding-top : 15px;
}

@media (max-width : 575px) {
    #concepto .text-1,
    #concepto .text-2 {
        font-size : 100%; 
        line-height : 150%;
    }
}

/* end concepto */


/* start beneficios */

#beneficios b {
    font-weight : 800;
}

#beneficios .item-1,
#beneficios .item-2,
#beneficios .item-3,
#beneficios .item-4 { 
    background-size : fill; 
    background-repeat: no-repeat;
    background-position: center top;
}

#beneficios .item-1 {
    background-image: url('../img/WEB Signage_2-17.png'); 
}

#beneficios .item-2 {
    background-image: url('../img/WEB Signage_2-18.png'); 
}

#beneficios .item-3 {
    background-image: url('../img/WEB Signage_2-19.png'); 
}

#beneficios .item-4 {
    background-image: url('../img/WEB Signage_2-20.png'); 
}

#beneficios .item-1 > div,
#beneficios .item-2 > div,
#beneficios .item-3 > div,
#beneficios .item-4 > div { 
    min-height : 250px; 
    /* 
    display : flex; 
    align-items : center; 
    justify-content : center; 
    */
    padding-top : 25%;
    font-weight : 600;
}

@media (max-width : 575px) {
    #beneficios .title {
        text-align : center;
    }

    #beneficios .item-1 {
        background-image: url('../img/WEB Signage_2-17-B.png'); 
    }

    #beneficios .item-3 {
        background-image: url('../img/WEB Signage_2-19-B.png'); 
    }

    #beneficios .item-1 > div,
    #beneficios .item-2 > div,
    #beneficios .item-3 > div,
    #beneficios .item-4 > div {
        min-height : 212px;
    }
}

/* end beneficios */