/* --------------------------- Global CSS*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Poppins:400,500,600,700,800&display=swap');
/* --------------------------- Global CSS*/

:root{
    --white: rgba(255,255,255,.9);
    --grey: rgba(0,0,0,.5);
    --grey-dark: rgba(0,0,0,.6);
    --grey-lite: rgba(0,0,0,.04);
    --color: #03a9f4;
    --color-light: #00e2ff;
    --color-light2: #e4f7ff;
    --color2: #ec6102;
    --shadow: 0px 0px 70px rgba(0,0,0,0.2);
    --shadow-light: 0px 5px 5px -5px rgba(0,0,0,.2);
    --ft1: 1rem;
    --ft1-2: 1.2rem;
    --ft1-4: 1.4rem;
    --ft1-7: 1.7rem;
    --ft2: 2rem;
    --ft3: 3rem;
    --ft4: 4rem;
}

/* -------------------------------------------- */

* {
    box-sizing: border-box;
    outline: none;
    font-family: "Poppins";
    text-decoration: none;
}
body {margin:0;overflow-x:hidden;}
/*---------------------------------------------- */
.bttn {
    cursor: pointer;
    transition: all .4s;
    font-size: var(--ft1);
    font-weight: 600;
    padding: 10px 25px 10px;
    margin: 15px 20px 15px;
    display: inline-block;
    border: 2px solid var(--color);
    color: var(--color) !important;
    border-radius: 40px;
}

.bttn:hover {background-color: var(--color)!important;color: white !important;}

.bttn-white {
    cursor: pointer;
    transition: all .4s;
    font-size: var(--ft1);
    font-weight: 600;
    padding: 12px 17px 12px;
    margin: 15px 20px 15px;
    display: inline-block;
    border: 2px solid var(--white);
    color: var(--white) !important;
    border-radius: 40px;
}


.bttn-gradient {
    cursor: pointer;
    background: linear-gradient(0.25turn, var(--color), var(--color-light));
    display: inline-block;
    text-decoration: none;
    color: white !important;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 50px;
    padding: 15px 20px;
    color: white !important;
}

.bttn-white:hover {
    background-color: var(--white);
    color: var(--color) !important;
}


div.title {
    font-family: "Open sans";
    text-transform: uppercase;
    font-size: var(--ft2);
    color: var(--color);
    text-align: center;
}

.text {
    text-align: justify;
    font-weight: 500;
    font-size: var(--ft1-2);
    color: var(--grey-dark);
    line-height: 1.4;
}

.mini {font-size: var(--ft1);font-weight: 500;}

.card {padding: 25px 0 25px;margin: 0 0 25px;text-align: center;}

.strong {font-weight: 600;}

.img-round {display: inline-block;background-color: var(--color);padding: 25px;margin: 25px;border-radius: 50%;}
.img-round img {width:64px;margin:15px;}
.img-round svg {width:64px;margin:15px;}
.img100 {width: 100% !important;}

.bottom {border-bottom: 1px solid var(--color);padding-bottom: 7px;}
.bottom-white {border-bottom: 1px solid var(--white);padding-bottom: 7px;}

.center {display: flex;justify-content: center;align-items: center;}
.hcenter {display: flex;align-items: center;}
.between {display: flex; justify-content:space-between;}
.around {display: flex; justify-content:space-around;}
.vcenter {display: flex;justify-content: center;}

.hover { transition: all .4s; box-shadow: var(--shadow); }
.hover:hover { box-shadow: var(--shadow-light); transform: translateY(10px); }

.hover2 { transition: all .4s;}
.hover2:hover {transform: scale(1.1); }

.white, .white * {color: white;}

/* -------------------------------------------- */
/* IMAGE CSS*/
.img-lc {clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);}
.img-rc {clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);}
.cut-down {clip-path: polygon(50% 100%, 0 90%, 0 0, 100% 0, 100% 90%);}
.cut-down2 {clip-path: polygon(100% 0, 100% 90%, 30% 100%, 0 90%, 0 0);}
.cut-down3 {clip-path: ellipse(90% 70% at 50% 30%);}
.cut-up {clip-path: polygon(50% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);}
.cut-right {clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);}
.cut-left {clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);}
/* SHADOW CLASS */
.shadow { box-shadow: var(--shadow);}
.shadow-light { box-shadow: var(--shadow-light);}
/* FONT SIZE COLOR CLASS */
.ft-6 { font-size: .6rem;}
.ft-7 { font-size: .7rem;}
.ft-8 { font-size: .8rem;}
.ft-9 { font-size: .9rem;}
.ft1 { font-size: 1rem;}
.ft1-1 { font-size: 1.1rem;}
.ft1-2 { font-size: 1.2rem;}
.ft1-3 { font-size: 1.3rem;}
.ft1-4 { font-size: 1.4rem;}
.ft1-5 { font-size: 1.5rem;}
.ft1-6 { font-size: 1.6rem;}
.ft1-7 { font-size: 1.7rem;}
.ft1-8 { font-size: 1.8rem;}
.ft1-9 { font-size: 1.9rem;}
.ft2 { font-size: 2rem;}
.ft2-5 { font-size: 2.5rem;}
.ft3 { font-size: 3rem;}
.ft3-5 { font-size: 3.5rem;}
.ft4 { font-size: 4rem;}
.ft4-5 { font-size: 4.5rem;}
.ft5 { font-size: 5rem;}
.ft5-5 { font-size: 5.5rem;}
.ft6 { font-size: 6rem;}
/* COLOR CLASS */
.white { color: var(--white); }
.grey { color: var(--grey-lite); }
.grey2 { color: var(--grey); }
.grey3 { color: var(--grey-dark); }
.color { color: var(--color); }
.color2 { color: var(--color2); }
.bkg-grey { background-color: var(--grey-lite); }
.bkg-white { background-color: white; }
.bkg-color { background-color: var(--color); }
.bkg-light { background-color: var(--color-light); }
.bkg-light2 { background-color: var(--color-light2); }
.bkg-color2 { background-color: var(--color2); }
.bkg-img {background-size: cover;background-position: center;}
/* SPACE CLASS */

/* PADDING */
.p7{padding:7px;}.p15{padding:15px;}.p25{padding: 25px;}.p50{padding:50px;}.p100{padding:100px;}
.pt7{padding-top:7px;}.pt15{padding-top:15px;}.pt25{padding-top:25px;}.pt50{padding-top:50px;}.pt100{padding-top:100px;}
.pb7{padding-bottom:7px;}.pt15{padding-bottom:15px;}.pt25{padding-bottom:25px;}.pt50{padding-bottom:50px;}.pt100{padding-bottom:100px;}
.ph7{padding-right:7px;padding-left:7px;}.ph15{padding-right:15px;padding-left:15px;}.ph25{padding-right:25px;padding-left:25px;}.ph50{padding-right:50px;padding-left:50px;}
.pv7{padding-top:7px;padding-bottom:7px;}.pv15{padding-top:15px;padding-bottom:15px;}.pv25{padding-top:25px;padding-bottom:25px;}.pv50{padding-top:50px;padding-bottom:50px;}
.ptb7{padding-top:7px;padding-bottom:7px;}.ptb15{padding-top:15px;padding-bottom:15px;}.ptb25{padding-top:25px;padding-bottom:25px;}.ptb50{padding-top:50px;padding-bottom:50px;}.ptb100{padding-top:100px;padding-bottom:100px;}
.pr7{padding-right:7px;}.pr15{padding-right:15px;}.pr25{padding-right:25px;}.pr50{padding-right:50px;}.pr100{padding-right:100px;}
.pl7{padding-left:7px;}.pl15{padding-left:15px;}.pl25{padding-left:25px;}.pl50{padding-left:50px;}.pl100{padding-left:100px;}
.p0{padding:0;}

/* MARGIN */
.m0 {margin:0;}
.m-auto {margin:auto;}
.m7{margin:7px;}.m15{margin:15px;}.m25{margin:25px;}.m50{margin:50px;}.m100{margin:100px;}
.mr7{margin-right:7px;}.mr15{margin-right:15px;}.mr25{margin-right:25px;}.mr50{margin-right:50px;}.mr100{margin-right:100px;}
.ml7{margin-left:7px;}.ml15{margin-left:15px;}.ml25{margin-left:25px;}.ml50{margin-left:50px;}.ml100{margin-left:100px;}
.mt7{margin-top:7px;}.mt15{margin-top:15px;}.mt25{margin-top:25px;}.mt50{margin-top:50px;}.mt100{margin-top:100px;}
.mb7{margin-bottom:7px;}.mb15{margin-bottom:15px;}.mb25{margin-bottom:25px;}.mb50{margin-bottom:50px;}.mb100{margin-bottom:100px;}
.mh7{margin-right:7px;margin-left:7px;}.mh15{margin-right:15px;margin-left:15px;}.mh25{margin-right:25px;margin-left:25px;}.mh50{margin-right:50px;margin-left:50px;}.mh100{margin-right:100px;margin-left:100px;}
.mv7{margin-top:7px;margin-bottom:7px;}.mv15{margin-top:15px;margin-bottom:15px;}.mv25{margin-top:25px;margin-bottom:25px;}.mv50{margin-top:50px;margin-bottom:50px;}.mv100{margin-top:100px;margin-bottom:100px;}
/* WIDTH HEIGHT */
.wh100{width:100%;height:100%;}.w100{width:100%;}.h100{height:100%;}
.wh50{width:50%;height:50%;}.w50{width:50%;}.h50{height:50%;}
.wh32{width:32%;height:32%;}.w32{width:32%;}.h32{height:32%;}
/* TEXT */
.tl{text-align:left;}.tr{text-align:right;}.tc{text-align:center;}.tj{text-align:justify;}.underline{text-decoration:underline;}
.uppercase{text-transform:uppercase;}.lowercase{text-transform:lowercase;}
.text-top {display: inline-block !important;position: relative !important;bottom: .7ex !important;font-size: 70% !important;margin: 2px !important;margin-right: 5px !important;}
.text-bottom {display: inline-block !important;position: relative !important;top: .3ex !important;font-size: 70% !important;margin: 2px !important;margin-right: 5px !important;}

/* DISPLAY */
.dblock{display:block;}.dinline{display:inline-block;}.dnone{display:none;}.vnone{visibility:hidden;}
/* LINE HEIGHT */
.lh1-4{line-height:1.4}.lh1-7{line-height:1.7}
/* OPACITY */
.opacity {position: relative;z-index: 8;}
.opacity .lay {background:rgba(0,0,0,.6);position:absolute;z-index:9;top:0;bottom:0;left:0;right:0;}
.opacity * {position: relative;z-index: 10;}
/* GRADIENT */
.gradient {background: linear-gradient(0.25turn, var(--color), var(--color-light));}
.gradient2 {background: linear-gradient(145deg, var(--color), var(--color-light));}
/* EFFECT */
.bounce {position: absolute;animation: bounce 2s infinite;}
@-webkit-keyframes bounce {0%, 20%, 50%, 80%, 100%{-webkit-transform: translateY(0);}40%{-webkit-transform:translateY(-7px);}60%{-webkit-transform:translateY(-7px);}}
@-moz-keyframes bounce {0%,20%,50%,80%,100%{-moz-transform:translateY(0);}40%{-moz-transform:translateY(-7px);}60%{-moz-transform:translateY(-7px);}}
@keyframes bounce {0%,20%,50%,80%,100%{transform:translateY(0);}40%{transform:translateY(-7px);}60%{transform:translateY(-7px);}}
/* BORDER */
.br-none{border-right:none !important}.bl-none{border-left:none !important}.bt-none{border-top:none !important}.bb-none{border-bottom:none !important}
/* BORDER RADIUS */
.border1{border-radius:50px 10px !important;}.border2{border-radius:7px !important;}
/* ------------------  WAVES ------------------------ */
.vagues {position: relative;text-align: center;color: white;}
.waves {position: relative;width: 100%;height: 15vh;margin-bottom: -7px;min-height: 100px;max-height: 150px;}
.parallax>use {animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;}
.parallax>use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;}
.parallax>use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;}
.parallax>use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;}
.parallax>use:nth-child(4) {animation-delay: -5s;animation-duration: 20s;}
@keyframes move-forever {0% {transform: translate3d(-90px, 0, 0);}100% {transform: translate3d(85px, 0, 0);}}
@media (max-width: 768px) {.waves {height: 40px;min-height: 40px;}}
/*------------------------ PRINT */
.page {
    display: block;
    background: white;
    size: A4 ;
    margin: 20px auto 20px;
    width: 21cm;
    height: 29.7cm;
    box-shadow: 0 0 16px rgba(0,0,0,0.5);
}

@media print {
    html, body, .page {
        margin: 0 !important;
        box-shadow: unset !important;
        background: white !important;
        width: 100% !important;
        height: 99.9% !important;
    }
    @page {
        size: A4 portrait;
        margin: 0;
    }
}
.frow {display: flex;flex-direction: row;}
.fcol {display: flex;flex-direction: column;}
.square {height: 15px;width: 15px;border: 2px solid rgba(0,0,0,.7)}
.round {height: 15px;width: 15px;border: 2px solid rgba(0,0,0,.7);border-radius:50%;}
.block {border: 2px solid rgba(0,0,0,.6);margin-right:15px;margin-left:15px;padding:7px;display:flex;justify-content: center; align-items: center;text-align:center;}
.champ {display:inline-block;border-bottom: 2px solid rgba(0,0,0,.7);padding-bottom: 3px;text-align:center;margin-right:15px;margin-left:15px}
.input {display: inline-block;font-weight: 600;}
/*------------------------ */

/*------------------------ */
.principal {
    background-color: white !important;
}
.hide {
    display: none;
}

.gui .content {
    background-color: white;
    box-shadow: var(--shadow);
    overflow: hidden;
    border-radius: 3px;
    margin-bottom: 25px;
}

.gui .im {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 200px;
}


.gui .info {
    padding: 15px;
}


.gui .h2 {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
    height:58px;
}

.gui .p {
    font-size: 14px;
    color: rgba(0,0,0,.75);
    margin-bottom: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height:58px;
}

.gui .more {
    font-size: 12px;
    font-weight: bold;
    color: var(--color2);
    transition: all .4s;
}

.gui .more:hover {
    color: var(--color);
}