/*S1-WHAT =============================== *//* */ /*S-FONTS ==================================== */ #what .text_wrap { font-family: 'El Messiri', sans-serif;} #what .text_wrap div, #what .geo, #what .geo > div { font-family: 'Geologica', sans-serif;} /*E-FONTS --------------------------- */ /*S-TEXT ==================================== */ #what .text_wrap { border:0px solid red; position: absolute; text-align: left; } #what .text_wrap h1 { color: #193c4a; margin: 0;/*text-transform: uppercase;*/ } #what .text_wrap h2 { position: relative; color: #59bc6c; } #what .text_wrap div { color: #FFF; font-weight:100;} /* MOBILE-FIRST ----------------- */ #what .text_wrap { top:17%; left:32%; width:60%; } #what .text_wrap h1 { font-size: 40px; line-height: 40px; margin: 0; } #what .text_wrap h2 { font-size: 22px; line-height: 22px; top: -20px; margin-bottom: 10px; } #what .text_wrap div { font-size: 19px; line-height: 22px; padding: 0 0 0; height: 140px; overflow-y: auto;} @media screen and (min-width: 768px) { #what .text_wrap { top:26%; left:40%; width:45%;} #what .text_wrap h1 { font-size: 60px; line-height: 50px; margin-bottom: 20px;} #what .text_wrap h2 { font-size: 26px; line-height: 26px;} #what .text_wrap div { font-size: 22px; line-height: 26px; height: auto; overflow-y: unset;} } @media screen and (min-width: 1024px) { #what .text_wrap { top:30%; width:38%;} #what .text_wrap div { font-size: 24px; line-height: 30px;} } @media screen and (min-width: 1280px) { #what .text_wrap { top:35%; } #what .text_wrap h1 { font-size: 70px; line-height: 70px; } #what .text_wrap h2 { font-size: 29px; line-height: 26px;} #what .text_wrap div { font-size: 30px; line-height: 30px; } } /*E-TEXT ==================================== */ /*S-GEO-BTNs ==================================== *//* */ #what .geo { position:absolute; white-space:nowrap; color:#F0F0F0; font-weight:100; background-color: transparent ; /*background-color: #59bc6ea6;#59bc6e*/ text-align:left; /* text-transform:uppercase; transition:top 500ms;*/ } /* MOBILE-FIRST ----------------- *//**/ #what .geo { left:32%; width:60%; padding:5px 0; font-size:20px; top:-100px; } #what .geo.bdesign { top: 47%; display:none;} #what .geo.pdesign { top: 63%; display:none;} #what .geo.ddesign { top: 80%; display:none; } @media screen and (min-width: 768px) { #what .geo { left:20%; width:70%; padding:5px 0; font-size:27px; top:-100px; } #what .geo.bdesign { top: 52%; } #what .geo.pdesign { top: 66%; } } #what .geo.active { padding-bottom:0; z-index:2; opacity:1; } /**/ #what .geo:hover { cursor:pointer; color:#DDD; /*border-bottom:1px solid #F0F0F0;background-color: #40874f; */} /* ----- */ #what .geo p { margin:0; border-bottom:1px solid #FFF;} #what .geo i { position:absolute; } #what .geo div { display:none; color: #FFF; white-space:normal; } /* MOBILE-FIRST ----------------- *//**/ #what .geo span { font-size:14px; } #what .geo i { right: 0px; top: 12px; font-size: 16px; } #what .geo div { margin: 0 -10px; padding: 5px 12px; min-height:69px; box-sizing: border-box; } #what .geo div span { font-size: 15px; line-height:16px;} @media screen and (min-width: 768px) { #what .geo { left:40%; width:50%; padding:5px 0; font-size:36px; } #what .geo span { font-size:20px; line-height:19px;} #what .geo i { top: 20px; font-size: 20px; } #what .geo div { margin: 0 -20px; padding: 10px 20px;} #what .geo div span { font-size: 20px; line-height:20px;} } @media screen and (min-width: 1024px) { #what .geo { left:40%; width:40%; padding:7px 0 2px; } #what .geo i { top: 20px; font-size: 18px; } #what .geo div { font-size: 22px; } } /*E-GEO-BTNs --------------------------- */ /*S-SUB-NAVIGATION --------------------------- */ /* #what .ion-ios-circle-outline */ #what .ion-android-checkbox-outline-blank { left:42%; bottom: 6%; font-size:24px; } #what .ion-android-checkbox-blank { left:40%; bottom: 6%; font-size:24px; } #what .ion-android-checkbox-blank:hover { opacity:1; cursor:default; } /*E-SUB-NAVIGATION --------------------------- */ /*S-SVG-LOTTIE ==================================== #what iframe { border: none; position: absolute; } *//* MOBILE-FIRST ----------------- #what iframe { top: -10px; left: 0; width: 100%; height: 30%;} @media screen and (min-width: 667px) {#what iframe { top: -10px; left: 0; width: 70%; height: 40%;}} @media screen and (min-width: 768px) {#what iframe { top: -10px; left: 0; width: 94%; height: 30%;}} @media screen and (min-width: 1024px) {#what iframe { top: -10px; left: 5%; width: 74%; height: 30%;}} @media screen and (min-width: 1280px) {#what iframe { top: -10px; left: 13%; width: 64%; height: 40%;}} *//*E-SVG-LOTTIE --------------------------- */ /*S-SVG_B ==================================== #what svg.B {border:0px solid red; position: absolute; } *//* MOBILE-FIRST ----------------- #what svg.B {left: 8%; width: 92%; height: 25%; } @media screen and (min-width: 768px) { #what svg.B { height: 30%; } } *//*E-SVG_B ==================================== */ /*S-SVG ==================================== #what svg { border:0px solid red; position: absolute; top: 0; } #what svg { left: 0; width:80%; height:20%;} @media screen and (min-width: 1025px) { #what svg { left: 17%; width:50%; height:32%; } } *//*#traccia_A_S { } */ /*E-SVG --------------------------- */ /* BCK IMG ============================================ */ /* .s1_bckimg {border:0px solid red; position:absolute; background-size: auto 100%; background-repeat:no-repeat; } .s1_bckimg.a { background-image:url('img_foto/s1_bckimg_a.jpg'); background-position:right center; } .s1_bckimg.b { background-image:url('img_foto/s1_bckimg_b.jpg'); background-position:right; } *//* MOBILE-FIRST ----------------- .s1_bckimg.a { right:0; top:65%; width:55%; height:30%; display:none;} .s1_bckimg.b { right:0; bottom:-2%; width:30%; height:40%;} @media screen and (min-width: 768px) { .s1_bckimg.a { right:0; top:55%; width:50%; height:30%;display:block;} .s1_bckimg.b { right:0; bottom:0; width:30%; height:50%;} } @media screen and (min-width: 1024px) { .s1_bckimg.a { right:0; top:35%; width:50%; height:50%;} .s1_bckimg.b { right:0; bottom:0; width:30%; height:100%;} } @media screen and (min-width: 1280px) { .s1_bckimg.a { height:60%;} } *//*E-BCK IMG ============================================ */ /* */ /*S-MAX-HEIGHT ON-OFF ============================================ */ /* */ @media screen and (max-height: 500px) { #what .s1_bckimg { display:none; } #what .text_wrap { top: 20%; } #what .text_wrap h1 { margin-bottom: 10px; } #what .text_wrap h2 { top:0; font-size: 20px; } #what .text_wrap div { font-size: 16px; } #what .geo_wrap { display:none; } #what svg { top: -20px; } } /*E-MAX-HEIGHT ON-OFF ============================================ */ /*E-SLIDE-2 CONTENT =============================== */