/*S0-HOME =============================== *//* */ /*S-FONTS --------------------------- */ #home .subnav_txt, #home .content_wrap .A0, #home .content_wrap .A1 { font-family: 'Geologica', sans-serif; } #home .numMono { font-family: 'Roboto Mono', sans-serif;} #home .logoclaim_wrap h1 { font-family: 'El Messiri', sans-serif;} #home .logoclaim_wrap h2 { font-family: 'Pt Sans', sans-serif;} /*E-FONTS --------------------------- */ /*S-LOGOCLAIM ==================================== */ #home .logoclaim_wrap { border:0px solid red; position: absolute; text-align: left;} #home .logoclaim_wrap h1{ color:#59bc6e; /*text-transform:uppercase; */} #home .logoclaim_wrap h2{ color:#FFF; } /* MOBILE-FIRST ----------------- */ #home .logoclaim_wrap { top:20%; left:5%; width:90%; max-width:600px} #home .logoclaim_wrap svg { width:170px;; height:auto; margin-bottom: 20px;} #home .logoclaim_wrap h1 { margin:0 0 10px; font-size: 23px; line-height: 25px;} #home .logoclaim_wrap h2 { margin:0; font-size: 16px; font-weight: normal;} @media screen and (min-width: 360px){} @media screen and (min-width: 667px){} @media screen and (min-width: 768px){ #home .logoclaim_wrap { top:20%; left:12%; width:52%;} #home .logoclaim_wrap svg { width:300px ;margin-bottom: 40px;} #home .logoclaim_wrap h1 { margin:0 0 20px; font-size: 36px; line-height: 35px;} #home .logoclaim_wrap h2 { font-size: 25px; } } @media screen and (min-width: 1024px){ #home .logoclaim_wrap { top:14%; } } @media screen and (min-width: 1280px){ #home .logoclaim_wrap { top:20%; } #home .logoclaim_wrap svg { width:300px;} } /*E-LOGOCLAIM ==================================== */ /* CLONED SLIDE ==================================== */ .slick-cloned .slide.s0 div {display:none} /* CLONED SLIDE ==================================== */ /* ---------------------------- *//**/ /* SUBNAV */ /* ---------------------------- */ /* ABOUT SUBNAV --------- */ #home .about_nav_wrap { display: none; /* display: flex; position: absolute; left: 40%; top: 55%; */ z-index:1;} #home .about_nav_wrap i { position: static; font-size: 20px; margin: 40px 8px 0 0; caret-color: transparent; } #home i.ion-android-checkbox-outline-blank:hover { opacity:0.5; cursor:pointer; } #home i.ion-android-checkbox-blank:hover { opacity:1; cursor:default; } #home i.ion-android-checkbox-blank { animation-name: subnav_blink; animation-duration: 900ms; animation-fill-mode: none; animation-timing-function: linear; animation-direction: alternate; animation-iteration-count:infinite; } @keyframes subnav_blink { from { opacity: 0.4;} to { opacity: 1; }} /* SUBNAV --------- */ /* ARROW-READMORE ==================================== *//**/ #home .subnav_txt { display:none; position: absolute; bottom:5.5%; color: white; font-size:16px; font-weight:100; text-transform: uppercase; } #home .subnav_txt:hover { cursor:pointer; opacity:0.7; } /* MOBILE-FIRST ----------------- */ #home .subnav_txt { left: 50%; margin-left: -53px;} #home #h_sb_visu { display:none;} @media screen and (min-width: 768px){ #home .subnav_txt { left:40%; margin-left:auto;} #home #h_sb_visu { display:block;} } #home .ion-ios-arrow-down { display:none; position:absolute; bottom:14px; left: 35%; font-size:40px; } @media screen and (min-width: 768px) { #home .ion-ios-arrow-down { }} @media screen and (min-width: 1024px) { #home .ion-ios-arrow-down { }} @media screen and (min-width: 1280px) { #home .ion-ios-arrow-down { }} /* ARROW END ==================================== */ /*######################################################################################### */ /*S-SCOPRI DI PIU ANIM ==================================== */ /*######################################################################################### */ #home .ion-ios-arrow-down { animation: hp_scopri 800ms infinite} @keyframes hp_scopri { from { bottom: 24px;opacity:1;} to { bottom: 14px; opacity:0.4} } /* SUBNAV END ==================================== */ /*######################################################################################### */ /*S-CONTENT A0 ==================================== */ #home .content_wrap { opacity:1; display:none; position: absolute; color: white; text-align: left; font-weight:100; } /* MOBILE-FIRST ----------------- */ #home .content_wrap { top: 20%; left: 32%; right: 8%; font-size: 19px; line-height: 24px; } @media screen and (min-width: 768px) { #home .content_wrap { top: 40%; left: 40%; right: 10%; font-size: 24px; line-height: 30px; }} @media screen and (min-width: 1024px) { #home .content_wrap { }} @media screen and (min-width: 1280px) { #home .content_wrap { font-size: 28px; right: 20%; }} /*----------------- */ #home .content_wrap .A0, #home .content_wrap .A1 { min-height:270px; } #home .content_wrap .A0 { opacity:1; } #home .content_wrap .A1 { opacity:1; display:none; } /*----------------- */ #home .content_wrap .A0.no-anim { opacity:0; } #home .content_wrap .A1.anim_ON, #home .content_wrap .A0.anim_ON { animation-name: home_content_wrap_A0; animation-fill-mode: both; animation-delay: 0s; animation-duration: 1s; } #home .content_wrap .A0.anim_OFF, #home .content_wrap .A1.anim_OFF{ opacity: 0; z-index:-1;} /*----------------- */ @keyframes home_content_wrap_A0 { from {opacity: 0; z-index:-1;} to { opacity:1; z-index:1;}} /*S-CONTENT A0 ==================================== */ /*######################################################################################### */ /*######################################################################################### */ /*S-FRECCE IMG ==================================== */ /*######################################################################################### */ #home #frecce_wrap { background:transparent; border-top:0px solid red; border-bottom:0px solid red; position: absolute; } /* MOBILE-FIRST ----------------- */ /*#home #frecce_wrap { top:0; left:-20%; width:130%; height:85%; display:none; transform:scale(0.5)}*/ #home #frecce_wrap { top:0; left:0; width:130%; height:85%; display:none; } @media screen and (min-width: 768px) { #home #frecce_wrap { top:0; left:0; width:100%; height:90%; display:block; transform:none} } /* ----------------- */ #home .frecce { position:absolute; animation-timing-function: linear; animation-fill-mode: both; } /* MOBILE-FIRST ----------------- */ #home .frecce { width:50px; margin-left:-60px; margin-top:-18px; } @media screen and (min-width: 768px){ #home .frecce { width:160px; margin-left:-160px; margin-top:-48px; } } #home .frecce.t3hero {/*position:fixed; margin:0;*/ margin-left:0; } @media screen and (min-width: 768px){} /* ANIM1 [9sec] ----------------- */ #home .frecce.anim1 { animation-timing-function: ease-out;} #home .frecce.anim1.t1dx1 { top: 18%; animation-name: frecce_anim1_t1dx1; animation-duration: 8s; } #home .frecce.anim1.t1dx2 { top: 18%; animation-name: frecce_anim1_t1dx2; animation-duration: 9s; } #home .frecce.anim1.t2dx1 { top: 35%; animation-name: frecce_anim1_t2dx1; animation-duration: 6s; } #home .frecce.anim1.t2dx2 { top: 35%; animation-name: frecce_anim1_t2dx2; animation-duration: 7s; } #home .frecce.anim1.t2dx3 { top: 35%; animation-name: frecce_anim1_t2dx3; animation-duration: 8s; } #home .frecce.anim1.t3hero { top: 50%; animation-name: frecce_anim1_t3hero;animation-duration: 8s; } #home .frecce.anim1.t3dx2 { top: 50%; animation-name: frecce_anim1_t3dx2; animation-duration: 8s; } #home .frecce.anim1.t4dx1 { top: 68%; animation-name: frecce_anim1_t4dx1; animation-duration: 6s; } #home .frecce.anim1.t4dx2 { top: 68%; animation-name: frecce_anim1_t4dx2; animation-duration: 7s; } #home .frecce.anim1.t4dx3 { top: 68%; animation-name: frecce_anim1_t4dx3; animation-duration: 8s; } #home .frecce.anim1.t5dx1 { top: 86%; animation-name: frecce_anim1_t5dx1; animation-duration: 8s; } #home .frecce.anim1.t5dx2 { top: 86%; animation-name: frecce_anim1_t5dx2; animation-duration: 9s; } /* ANIM1 ----------------- */ @keyframes frecce_anim1_t1dx1 { from { left: 0%;} to { left: 70%;} } @keyframes frecce_anim1_t1dx2 { from { left: -20%;} to { left: 35%;} } @keyframes frecce_anim1_t2dx1 { from { left: 0%;} to { left: 85%;} } @keyframes frecce_anim1_t2dx2 { from { left: -20%;} to { left: 55%; } } @keyframes frecce_anim1_t2dx3 { from { left: -30%;} to { left: 30%; } } @keyframes frecce_anim1_t3hero { from { left: 100%;} to { left: 50%; } } @keyframes frecce_anim1_t3dx2 { from { left: 0%;} to { left: 50%; } } @keyframes frecce_anim1_t4dx1 { from { left: 0%;} to { left: 85%;} } @keyframes frecce_anim1_t4dx2 { from { left: -20%;} to { left: 55%; } } @keyframes frecce_anim1_t4dx3 { from { left: -30%;} to { left: 30%; } } @keyframes frecce_anim1_t5dx1 { from { left: 0%;} to { left: 70%;} } @keyframes frecce_anim1_t5dx2 { from { left: -20%;} to { left: 38%;} } /* ANIM_1B [9sec] ----------------- */ #home .frecce.anim1B { animation-timing-function: ease-out;} #home .frecce.anim1B.t1dx1 { top: 18%; animation-name: frecce_anim1B_t1dx1; animation-duration: 10s; } #home .frecce.anim1B.t1dx2 { top: 18%; animation-name: frecce_anim1B_t1dx2; animation-duration: 11s; } #home .frecce.anim1B.t2dx1 { top: 35%; animation-name: frecce_anim1B_t2dx1; animation-duration: 8s; } #home .frecce.anim1B.t2dx2 { top: 35%; animation-name: frecce_anim1B_t2dx2; animation-duration: 10s; } /* B */ #home .frecce.anim1B.t2dx3 { top: 35%; animation-name: frecce_anim1B_t2dx3; animation-duration: 12s; } /* A */ #home .frecce.anim1B.t3hero { top: 50%; animation-name: frecce_anim1B_t3hero; animation-duration: 8s; } #home .frecce.anim1B.t3dx2 { display:none; /*top: 50%; animation-name: frecce_anim1B_t3dx2; animation-duration: 8s; */ } #home .frecce.anim1B.t4dx1 { top: 68%; animation-name: frecce_anim1B_t4dx1; animation-duration: 8s; } #home .frecce.anim1B.t4dx2 { top: 68%; animation-name: frecce_anim1B_t4dx2; animation-duration: 9s; } /* B */ #home .frecce.anim1B.t4dx3 { top: 68%; animation-name: frecce_anim1B_t4dx3; animation-duration: 14s; } /* A */ #home .frecce.anim1B.t5dx1 { top: 86%; animation-name: frecce_anim1B_t5dx1; animation-duration: 10s; } #home .frecce.anim1B.t5dx2 { top: 86%; animation-name: frecce_anim1B_t5dx2; animation-duration: 11s; } /* ANIM1B ----------------- */ @keyframes frecce_anim1B_t1dx1 { from { left: 0%;} to { left: 120%;} } @keyframes frecce_anim1B_t1dx2 { from { left: -20%;} to { left: 120%;} } @keyframes frecce_anim1B_t2dx1 { from { left: 0%;} to { left: 120%;} } @keyframes frecce_anim1B_t2dx2 { from { left: -20%;} to { left: 120%;} } @keyframes frecce_anim1B_t2dx3 { from { left: -30%;} to { left: 120%;} } @keyframes frecce_anim1B_t3hero { from { left: 100%;} to { left: 43px;} } @media screen and (min-width: 768px){ @keyframes frecce_anim1B_t3hero { from { left: 100%;} to { left: 80px;} }} @keyframes frecce_anim1B_t3dx2 { from { left: 0%;} to { left: 120%;} } @keyframes frecce_anim1B_t4dx1 { from { left: 0%;} to { left: 120%;} } @keyframes frecce_anim1B_t4dx2 { from { left: -20%;} to { left: 120%;} } @keyframes frecce_anim1B_t4dx3 { from { left: -30%;} to { left: 120%;} } @keyframes frecce_anim1B_t5dx1 { from { left: 0%;} to { left: 120%;} } @keyframes frecce_anim1B_t5dx2 { from { left: -20%;} to { left: 120%;} } /* ANIM2 [9sec] ----------------- */ #home .frecce.anim2.t1dx1 { top: 18%; animation-name: frecce_anim2_t1dx1; animation-duration: 3s; } #home .frecce.anim2.t1dx2 { top: 18%; animation-name: frecce_anim2_t1dx2; animation-duration: 9s; } #home .frecce.anim2.t2dx1 { top: 35%; animation-name: frecce_anim2_t2dx1; animation-duration: 3s; } #home .frecce.anim2.t2dx2 { top: 35%; animation-name: frecce_anim2_t2dx2; animation-duration: 5s; } #home .frecce.anim2.t2dx3 { top: 35%; animation-name: frecce_anim2_t2dx3; animation-duration: 8s; } #home .frecce.anim2.t3hero { top: 50%; animation-name: frecce_anim2_t3hero; animation-duration: 2s; animation-timing-function: ease-out; } #home .frecce.anim2.t3dx2 { top: 50%; animation-name: frecce_anim2_t3dx2; animation-duration: 5s; } #home .frecce.anim2.t4dx1 { top: 68%; animation-name: frecce_anim2_t4dx1; animation-duration: 3s; } #home .frecce.anim2.t4dx2 { top: 68%; animation-name: frecce_anim2_t4dx2; animation-duration: 5s; } #home .frecce.anim2.t4dx3 { top: 68%; animation-name: frecce_anim2_t4dx3; animation-duration: 6s; } #home .frecce.anim2.t5dx1 { top: 86%; animation-name: frecce_anim2_t5dx1; animation-duration: 3s; } #home .frecce.anim2.t5dx2 { top: 86%; animation-name: frecce_anim2_t5dx2; animation-duration: 8s; } /* ANIM2 ----------------- */ @keyframes frecce_anim2_t1dx1 { from { left: 70%;} to { left: 120%; }} @keyframes frecce_anim2_t1dx2 { from { left: 35%;} to { left: 120%; }} @keyframes frecce_anim2_t2dx1 { from { left: 85%;} to { left: 120%; }} @keyframes frecce_anim2_t2dx2 { from { left: 55%;} to { left: 120%; }} @keyframes frecce_anim2_t2dx3 { from { left: 30%;} to { left: 120%; }} @keyframes frecce_anim2_t3hero { from { left: 50%;} to { left: 100px; }} /*@keyframes frecce_anim2_t3hero { to { left: 50px; }}*/ @keyframes frecce_anim2_t3dx2 { from { left: 50%;} to { left: 120%; }} @keyframes frecce_anim2_t4dx1 { from { left: 85%;} to { left: 120%; }} @keyframes frecce_anim2_t4dx2 { from { left: 55%;} to { left: 120%; }} @keyframes frecce_anim2_t4dx3 { from { left: 30%;} to { left: 120%; }} @keyframes frecce_anim2_t5dx1 { from { left: 70%;} to { left: 120%; }} @keyframes frecce_anim2_t5dx2 { from { left: 38%;} to { left: 120%; }} /*E-FRECCE IMG ==================================== */ /*######################################################################################### */ /*S-MAX-HEIGHT ON-OFF ============================================ */ /* */ @media screen and (max-height: 400px) { #home .logoclaim_wrap { top:5%; } #home .logoclaim_wrap svg { width:120px;} #home .quad.q4, #home .alphanum_wrap.A2, #home .alphanum_wrap.A1 { display:none; } #home .logoclaim_wrap h1 { margin:0 0 10px; font-size: 23px; line-height: 25px;} #home .logoclaim_wrap h2 { margin:0; font-size: 16px; font-weight: normal;} } /*E-MAX-HEIGHT ON-OFF ============================================ */