/* CSS Document */


body{margin: 0; color:#000; background-color: #fff; font-family: mus;}
a{text-decoration: none;color:transparent;}
a:active{color:transparent;}
a:visited{color:transparent;}

h1,h2,h3,h4,p{margin: 0; font-weight: normal;}

.no_sel {-webkit-touch-callout: none;-webkit-user-select: none; user-select: none;-webkit-tap-highlight-color: transparent; }
.no_sel:focus { outline: none !important;}
.no_sel:hover { outline: none !important; background-color: transparent;}

@media (max-width: 720px){
    .hideMob{display:none!important;}
}
.commonTitIn{
	position: relative; transition: .5s opacity .2s linear, .6s top .2s ease-out;
}
@media(max-width: 540px){
	.commonTitIn{
		opacity: 1; top: 0;  transition: none;
    }
}

/*   FONTS   */


@font-face {
    font-family: 'mus';
    src:  url('../fonts/musr-100.woff2') format('woff2'),
          url('../fonts/musr-100.woff') format('woff');
    font-weight: 100; font-style: normal;
}
@font-face {
    font-family: 'mus';
    src:  url('../fonts/musr-300.woff2') format('woff2'),
          url('../fonts/musr-300.woff') format('woff');
    font-weight: 300; font-style: normal;
}
@font-face {
    font-family: 'mus';
    src:  url('../fonts/musr-500.woff2') format('woff2'),
          url('../fonts/musr-500.woff') format('woff');
    font-weight: 500; font-style: normal;
}
@font-face {
    font-family: 'mus';
    src:  url('../fonts/musr-700.woff2') format('woff2'),
          url('../fonts/musr-700.woff') format('woff');
    font-weight: 700; font-style: normal;
}
@font-face {
    font-family: 'mus';
    src:  url('../fonts/musr-900.woff2') format('woff2'),
          url('../fonts/musr-900.woff') format('woff');
    font-weight: 900; font-style: normal;
}
@font-face {
    font-family: 'zab';
    src:  url('../fonts/zab.woff2') format('woff2'),
          url('../fonts/zab.woff') format('woff');
    font-style: normal;
}

/* ANIMATION  */

.animRot360{animation: rot360 6s linear infinite}
.animRot360_out{animation: rot360 15s linear infinite}
@keyframes rot360{
    100%{transform: rotate(360deg)}
}
.animOscY{animation: osY 1s ease-in-out alternate infinite}
@keyframes osY{
    100%{transform: translateY(10px)}
}
.animPulse{animation: pulse 4s ease-in-out infinite; animation-delay: 0;}
@media(max-width: 540px){
    .animPulse{animation: none}
}

.d1{animation-delay: 400ms;}
.d2{animation-delay: 800ms;}
@keyframes pulse{
    83%{transform: scale(1)}
    88%{transform: scale(1.15)}
    93%{transform: scale(1)}
    97%{transform: scale(1.1)}
    100%{transform: scale(1)}
}
.animFadeHeader{
    opacity: 0;
    animation: fadeIn 500ms ease-out 500ms;
    animation-fill-mode: forwards;
}
.animFadeLogo{
    opacity: 0;
    animation: fadeIn 1s ease-out 1200ms;
    animation-fill-mode: forwards;
}
.animTitIn{
    opacity: 0; transform: translateY(40px);
    animation: fadeMoveIn 1s ease-in-out 1600ms;
    animation-fill-mode: forwards;
}
.animFadeText{
    opacity: 0;
    animation: fadeIn 1s ease-out 2300ms;
    animation-fill-mode: forwards;
}
@keyframes fadeIn{
    100%{opacity: 1;}
}

@keyframes fadeMoveIn{
    100%{opacity: 1; transform: translateY(0)}
}
.animThumb{
    opacity: 0; transform: scale(.3);
    animation: fadeScaleIn 700ms ease-in-out 2600ms;
    animation-fill-mode: forwards;
}
@keyframes fadeScaleIn{
    100%{opacity: 1; transform: scale(1)}
}

.txCenter{text-align: center;}
.txUpper{text-transform: uppercase;}

.roll{
    transform: scale(1); transition: transform 250ms ease-out;
}
.roll:hover{
    transform: scale(1.1);
}
@media(max-width: 720px){
    .roll:hover{
        transform: scale(1);
    }
}


.txH1{font-family: zab; font-size: 57px; line-height: 57px}
.txH2{font-family: zab; font-size: 48px; line-height: 52px}
.txH3{font-family: mus; font-size: 30px; line-height: 30px; text-transform:uppercase; letter-spacing: .5px; font-weight: 200;}
.txItemH3{font-family: mus; font-size: 16px; line-height: 16px;font-weight: 700; text-transform: uppercase;} 


.txLink{font-family: mus; font-weight: 500; font-size: 13.5px; line-height: 13px;}
.txTextHead{font-family: mus; font-weight: 700; font-size: 18px; line-height: 28px; letter-spacing: .8px;}
.txText{font-family:mus; font-size: 16px; line-height: 29px; font-weight: 400;}

@media(max-width: 720px){
    .txH1{font-size: 35px; line-height: 57px; text-align: center;}
}
@media (orientation: portrait) and (max-width: 540px){
    .txLink{font-size: 12px; letter-spacing: .1px;}
    .txTextHead{font-size: 18px; line-height: 24px; letter-spacing: .4px; width:100%}
    .txH3{font-size: 26px; line-height: 32px;text-align: center; width:88%;}
    .txText{font-size: 16px; line-height: 28px;}
}

.txLiteUpper{font-family: mus; font-size: 14px; line-height: 17px;font-weight: 300; text-transform: uppercase; letter-spacing: .8px;}

.sdwH1{text-shadow: 2px 2px 2px rgba(0,0,0,.3);}
.sdwH4{text-shadow: 1px 1px 2px rgba(0,0,0,.25);}
.sdwText{text-shadow: 1px 1px 2px rgba(0,0,0,.4);}

.sdwHead{box-shadow: 0 4px 4px rgba(0,0,0,.25);}
.sdwHead2{box-shadow: 0 4px 4px rgba(0,0,0,.15);}


.bgOrange{
    background-image: url('../img/home_bg_02.jpg');
    background-size: 1920px 100%; color:#fff;
}
.bgBlue{
    background-image: url('../img/home_bg_03.jpg');
    background-size: 1920px 100%; color:#fff;
}
.bgGrey{
    background-color: #efefef;
}
.col570, .col960, .col1200{ position: relative;display: flex; flex-direction: column; align-items: center;width:100%;}
.col570{
    max-width: 570px;
}
.col960{
     max-width: 960px;
}
.col1200{
     max-width: 1200px;
}
@media (max-width: 720px){
    .col570, .col960, .col1200{width:88%}
}

/*        HEADER       */

header{
    display: flex; flex-flow: column; align-items: center; 
    width: 100%; background: url('../img/home_bg_01.jpg') no-repeat;
    background-position: top center; background-size: 1920px 100%;
    color:#fff; background-color: #5ab2e2;
    padding-top: 90px;
}
header h1{margin: 50px 0 40px;}
header>div{margin: 40px 0 100px;}
hr{width: 90px; border:none; border-bottom: 1.2px solid #fff;}

@media(min-width: 1920px){
    header{background-size: 100% 100%;  }
}
@media (orientation: portrait) and (max-width: 540px){
    header{background-size: 180% 110%;  }
    header{padding-top: 70px;}
    header>div{margin: 40px 0 120px;}
    header span img{width: 135px; height: auto;}
    header h1{margin: 30px 0 20px;}
}


/*           NAV          */

nav{
    position: absolute; width:100%;  justify-content: center;
    display: flex;align-items: center; margin:35px 0 40px 0;
    z-index:1; 
}
nav a{display: flex; align-items: center;}
nav a div{margin:0 10px; color:#0084db}

@media (orientation: portrait) and (max-width: 540px){
    nav{
        position: fixed; 
        margin: 0;  padding:10px 0 8px 0; 
        background: url('../img/home_bg_01.jpg') no-repeat;
        background-position: top center; background-size: 180% 200px;
        box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
        min-width: 310px;
    }
    nav a div{margin:0 3px; color: #006daa;}
    nav a img{width:8px; height: auto}
}

/*           SECTIONS       */

section{ 
    display: flex; position: relative; justify-content: center;
    width: 960px; margin: 0 auto;
}
.homeSec1{ margin-top: -100px; padding-top: 235px;color:#666;}
.homeSec1>img{position: absolute; top:0; left:20px}
.imgThumb{
    border-radius: 100%; border: 6px solid #fff;
}
.sec1Item{
    position: relative;
    display: flex; text-align: justify; justify-content: space-between; height: 130px; width:100%;
}
.sec1Ico{
    width: 60px; height: 70px; margin-top:-20px; margin-left: 8px;
    background-image: url('../img/da_enums.png');
}
.sIco2{background-position-x:center}
.sIco3{background-position-x:right}
.sec1Tx{width:480px;}

@media(max-width: 980px){
    section{width: 100%}
    .sec1Tx{width: 90%; margin-left: 10%;}
}
@media (orientation: portrait) and (max-width: 540px){
    .homeSec1{ 
        flex-flow: column wrap; align-items: center;
        margin-top: -82px; padding: 20px 0 30px 0;
    }
    .homeSec1 img{
        width: 160px; height: auto;
        position: relative; top:auto; left: auto;
        margin-top: -20px;
    }
    .sec1Item{height:auto; text-align: left; margin: 20px 0;}
    .sec1Ico{
       position: absolute; transform: scale(.7);
       transform-origin: left top; top:12px;
       margin-left: 0;
    }
    .sec1Tx{
        width: 82%; margin-left: 18%;
     }
}
@media (orientation: portrait) and (max-width: 340px){
    .sec1Ico{
        transform: scale(.5);
     }
}


/*       MAIN - Hola    */

main{
    display: flex; flex-flow: column; width:100%;margin: 10px 0 0 0; align-items: center; padding-bottom: 60px;
}
.mainTop{
    display: flex; flex-flow: column; align-items: center;
    width:100%; padding:40px 0 35px 0;
}
@media(min-width: 1920px){
    .mainTop{background-size: 100% 100%;}
}
.mainTop > div{
    display: flex; flex-flow: column; align-items: center;
}
.mainTop p{margin: 30px 0;}
.mainImage{
    width:100%; height: 600px;
    background: url('../img/home_fullpict_01.jpg') no-repeat;
    background-position: top center;
    background-color: #ddd;
}
main h4{margin: 80px 0 60px 0;color:#ff9f3e;}
.txHighlite{
    display: flex; align-items: center; justify-content: space-between;
    width:100%;
    background-image: url("../img/home_bg_02.jpg"); background-size: cover; border-radius: 20px; color: #fff; margin: 17px 0; ;padding: 5px 0;
}
.txHighlite img{
    margin: 0 14px;;
}

@media (orientation: portrait) and (max-width: 540px){
    .mainImage{height: 370px; background-size: cover;}
     main h4{margin:60px 0 40px 0; transform: scale(1.3)}
    .txHighlite{text-align: center; padding-top: 20px; padding-bottom: 20px;}
    .mainTop p{font-weight: 700}
}

/*   POR QUE  */

.homeSec2{ width: 100%; height: 205px; padding: 40px 0; margin-bottom: 40px;}

.homeSec2 h2{margin:40px 0;}
.homeSec2 img{ position: absolute; left:0; top:0;}
.button{
    display: flex; width: 200px; height: 40px; justify-content: center; align-items: center;
    border: 1px solid #fff; border-radius: 30px;
    cursor:pointer; color:#fff;
} 
.button p{
    font-size: 15px; line-height: 15px; font-weight: 500; letter-spacing: .4px;
}
@media (orientation: portrait) and (max-width: 540px){
    .homeSec2 img{ position: relative;}
    .homeSec2{ height: auto; text-align: center};
}



/*   OFRECER  */

.homeSec3{ width: 100%; padding: 70px 0; flex-direction: column; align-items: center; text-align: center;}
.homeSec3 h2{color:#aaa; margin-bottom: 40px;}

.pausasItems{display: flex; flex-wrap: wrap; justify-content: space-evenly;}
.pausaItem{
    display: flex; flex-direction: column; align-items: center;
     width: 28%; min-width: 300px; margin: 40px 0;
}
.pausaItem>img{margin-bottom: 30px;}
.pausaItem>p{margin: 20px 0 25px 0;height:145px}
.pausaItem h3{color:#4685bf}
.btPausas{
    border-color: #666; color: #666; width: 160px; height: 35px;
}
@media (orientation: portrait) and (max-width: 540px){
    .pausaItem>p{margin: 20px 0 25px 0;height:auto}
}

/*    ACTIVARON    */

.homeSec4{ width: 100%; padding: 60px 0 40px 0; margin-bottom: 40px; }

.actItems{
    display: flex; flex-wrap: wrap; width:100%; justify-content: space-around;
    margin: 60px 0 30px 0;
}
.actItem{
    display: flex; flex-flow: column wrap; align-items: center;
    text-align: center; max-width:220px; color:#fff; margin-bottom: 32px;
}
.actItem img{
    border-radius: 30px; border: 5px solid #fff; margin-bottom:15px;
}
.actItem p{
    display: flex; height: 40px; align-items: center; justify-content: center;
}
@media (orientation: portrait) and (max-width: 540px){
    .homeSec4{ text-align: center;}
    .homeSec4 h2{ line-height: 60px;}
    .actItems{flex-direction: column; align-items: center}
    .actItem{width: 100%; margin-bottom: 30px;}
    .actItem img{width:100%; height: auto;}
    .actItem p{font-weight: 600;}
}

/*    EMPRESAS    */

.empLogos{display: flex; flex-wrap:wrap ; justify-content: center;}
.empLogos img{width: 30%; height:auto}
@media (orientation: portrait) and (max-width: 540px){
    .empLogos{flex-wrap: wrap; justify-content: space-around;}
    .empLogos img{width: 50vw; height: 50vw;}
}


/*    ACTIVARON    */

.homeSec5{ width: 100%; padding: 40px 0 60px 0;}
.homeSec5 h2{margin: 90px 0 0 0;}
.homeSec5 nav a div{color:#fff}
.homeSec5 nav{position: relative;}

.stats{margin: 90px 0;}
.stat{width:240px}
.stat img{border:none; border-radius: 0;}
.stat p{font-weight: 700;}
.btStats{
    width:380px;color:#3a90bd; background-color: #fff; 
    border:none; margin-bottom: 100px;
}
.btContact{
    margin-top: 30px;
}
@media (orientation: portrait) and (max-width: 540px){
    .homeSec5{ text-align: center; padding-top: 0; padding-bottom: 90px;}
    .homeSec5 h2{ line-height: 65px;}
    .stat img{width:70%; height: auto;}
    .stat{margin-bottom: 50px;}
    .stats{margin: 60px 0;}
    .btStats{
        width:80vw; margin-bottom: 80px;
    }
    .btContact{
        margin-top: 15px;
    }
    .homeSec5 nav{background: transparent; box-shadow: none;}
}

/*   FOOTER   */

footer{
    position: fixed; bottom: 0;
    display:flex; justify-content: center;
    width:100%; padding: 7px 0 3px 0;
    color:#ff9e3e;
    background-color: #333;
    z-index: 2;
}
.footerConte{
    display:flex; flex-direction: row; 
    align-items: center;justify-content: space-between;
    width:100%; line-height: 15px;
}
.footerConte>div{display:flex; align-items: center;}
.footerConte span{display:flex; align-items: center;}
.footerConte img{margin-right: 5px; cursor:pointer}
.footerConte div:last-child img{margin-left: 2px;}
.footerConte a{color:#ff9e3e;}
.icoWhatA{ 
    position:absolute;  bottom: 0px; 
    border-radius: 100%; background-color: #333; overflow: hidden;
}
.icoWhat{
    width: 44px; height: 44px; margin: 0!important;
}
.numWhat{
    padding-left:48px;
}
.fDot{margin: 0 10px !important; cursor: default!important;}
.wMax{width:max-content}
.onlineDot{width:15px; height:15px; border-radius:999px;
    background-color:#80F700; margin-left:12px;
}
.onlineMsgBg{
    background:transparent;
    background-color: #FFAB66;
}

@media (max-width: 540px){
    .footerConte img{width:30px; height: auto; padding: 0 0 1px 0;}
    .icoWhatA{ 
        bottom: 3px; left: 7px;
        border-radius: 100%; background-color: #333; overflow: hidden;
    }
    .icoWhat{
        width:50px!important; height: auto!important; 
        border-radius: 100%; margin: 0!important;
    }
}