/* sezione originale by marchetti design*/ .carousel-inner > .item {min-height: 600px; background-size: cover; background-position: center center} .tab-pane{min-height: 300px;} .btn-roadbook{ /*background-color: transparent;*/ background: linear-gradient(90deg, rgba(224,224,148,1) 30%, rgba(108,112,89,1) 100%); /* border: 1px dashed #333;*/ width:80%; border-radius: 25px; margin:0 auto; display:block; } .btn-primary { color: #333; background-color: transparent; border-color: #333; border-radius: 0; border-width: 4px; } .btn-primary:hover { color: #fff; background-color: #000; border-color: #000; } .btn-default_2 { color: #D7D7D7; background: radial-gradient(ellipse farthest-corner at left bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); border-color: #6A3805; } .popover {z-index: 100; width: 230px; border-radius: 10px; border: 1px solid ##9f7928; background: radial-gradient(ellipse farthest-corner at left bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); } .popover-content img{height:122px;margin-bottom: 5px; width:100%;padding: 5px;} .img_map_pop{float: left;height:7vh; width:5vw;} .panel h4{margin:0;} .panel h4 a{display: block;background: #333;color:#fff;padding: 15px 20px;text-decoration: none;} .panel h4 a:hover{background: #555;} .panel-padding {padding: 20px;} .panel-group .panel{border-radius:0;} /*------------------------------------ Animate ------------------------------------*/ .animated { animation-duration: 1s; animation-fill-mode: both; } .animated.infinite { animation-iteration-count: infinite; } .animated.hinge { animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { animation-duration: .75s; } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } .fadeInUp { animation-name: fadeInUp; } /*---------------------------------- style per popup images in percorsi ------------------------------------*/ /* padding-bottom and top for image */ .mfp-no-margins img.mfp-img { padding: 0; } /* position of shadow behind the image */ .mfp-no-margins .mfp-figure:after { top: 0; bottom: 0; } /* padding for main container */ .mfp-no-margins .mfp-container { padding: 0; } /* for zoom animation uncomment this part if you haven't added this code anywhere else */ /* .mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg { opacity: 0; -webkit-backface-visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; } .mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; } */ /*--------------------------------- mio stile ---------------------------------*/ .vcenter { display: flex; align-items: center; } /*dimezza la dimensione delle icone usate nelle tab*/ .img__icon { display: block; margin-left: auto; margin-right: auto; width: 3vw; } @media (max-width: 768px) { .vcenter a{text-shadow: none; font-size: 12px;} } @media (max-width: 767px) { .img__icon { width: 4vw;} .text-justify{display: none;} } /* agginge layer opacity a immagine in primo piano*/ .image-holder { position: relative; } .image-holder:before { background: rgba(0, 0, 0, 0.6); border-radius: 25px; position: absolute; content: ''; width: 100%; height: 100%; bottom: 0; left: 0; top: 0; } .image-holder a:hover{ color: yellow !important; text-shadow: -1px 0 yellow, 0 1px white, 1px 0 #000, 0 -1px #000; transition: all 1s cubic-bezier(.215, .61, .355, 1);} @media (max-width: 768px) { .image-holder a{color:#777;} } .image-holder2 { position: relative; } .image-holder2:before { background: rgba(0, 0, 0, 0.2); border-radius: 25px; position: absolute; content: ''; width: 100%; height: 100%; bottom: 0; left: 0; top: 0; } .image-holder2 a:hover{ color: yellow !important; text-shadow: -1px 0 yellow, 0 1px white, 1px 0 #000, 0 -1px #000; transition: all 1s cubic-bezier(.215, .61, .355, 1);} @media (max-width: 768px) { .image-holder2 a{color:#777;} } .my_percent { /*background-color: rgba(108,112,89,1);*/ color: white; display: flex; align-items: center; justify-content: center; height: 100vh; } /* ! Poster */ .poster{ display: flex; height: 100vh; width: 100%; align-items: center; } /*------------------------ Traccia e Tracciati ------------------------ .track{background: #fff;height: 70%;}*/ .track{background: #fff;} .track__image{width: 100%; float: left;height: 100%; /* background-size: cover; -o-background-size: cover; -moz-background-size: cover; background-repeat: no-repeat ; background-position: center center; background-image: url("../images/valbruna_2015.png") ; */ } /* .track__copy__text{display: block;text-align: center; padding: 55px ; margin:50px; border: 60px solid rgba(0, 0, 0, 0.4); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 255, 0.19); color: rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), 0 0 25px rgba(0, 0, 255, 0.2), 0 0 5px rgba(0, 0, 139, 0.2); border-radius: 10px; }*/ .track__copy__text { display: block; text-align: center; padding: 55px; margin: 50px; margin-left: 70px; border: 15px double rgb(0, 0, 0, 30%); box-shadow: 0 0 0 10px rgb(0 0 0 / 10%); color: rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), 0 0 25px rgba(0, 0, 255, 0.2), 0 0 5px rgba(0, 0, 139, 0.2); outline: 30px double rgb(0,0,0, 20%); background: radial-gradient(ellipse farthest-corner at left bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .track__copy__text_bis{display: block;text-align: center; padding: 25px ; margin:20px; border: 40px solid rgba(0, 0, 0, 0.4); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 255, 0.19); color: rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), 0 0 25px rgba(0, 0, 255, 0.2), 0 0 5px rgba(0, 0, 139, 0.2); border-radius: 10px; } .slider_image{background-size:cover; background-position: center center;} @media (max-width: 767px) { /*.track{height: 75vh;} .track__image{ background-size: auto; } .track__copy__text{ padding: 5px ; border: 10px solid rgba(0, 0, 0, 0.4); margin: 10px; display: wrap; justify-content: center; align-items: center; } */ .track__copy__text { /* margin: 40px;*/ margin-left: 45px; padding:5px; } .track__copy__text_bis { padding: 5px ; border: 10px solid rgba(0, 0, 0, 0.4); margin: 10px; margin-top: 20px; display: wrap; justify-content: center; align-items: center; } } .track_summary {text-shadow: none;} .track_details {padding: 0} .track_main-carousel { padding: 20px 14px;} @media (max-width: 768px) { .track_main-carousel{padding: 20px 0px;} } /* Container sovrapposizione image e testo */ .container__mio {position: relative; text-align: left; /*color: #fff;text-shadow: -1px 0 #f5d033, 0 1px #000, 1px 0 #000, 0 -1px #000;*/} .container__mio a{color: #f5d033; text-decoration:none;} .classeprova:hover{color: #f5d033;text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;transition: all 1s cubic-bezier(.215, .61, .355, 1);} .carousel-cell__2{ height: 320px; width: 320px; margin-right: 40px; } .bottom-left-wc { position: absolute; bottom: 10%; left: 5%;background: rgba(0, 0, 0, 0.9);} .top-left-wc { position: absolute; top: 5%; left: 5%;background: rgba(0, 0, 0, 0.9);} .top-right-wc { position: absolute; top: 5%; right: 5%;background: rgba(0, 0, 0, 0.9);} .bottom-right-wc { position: absolute; bottom: 10%; right: 5%;background: rgba(0, 0, 0, 0.9);} .bottom-left { position: absolute; bottom: 10%; left: 16%;} .top-left { position: absolute; top: 5%; left: 10%;} .top-right { position: absolute; top: 5%; right: 10%;} .bottom-right { position: absolute; bottom: 10%; right: 10%;} .centered { position: absolute; top: 45%; left: 40%; transform: translate(-50%, -50%);font-size: 40px;font-weight: 500;line-height: 40px;} .centered__footer{ position: absolute; top: 45%; left: 50%; font-size: 50px; transform: translate(-50%, -50%);font-weight: 500;line-height: 40px;} .tipo_tracciato{text-decoration: underline solid lime 2px;} .tipo_tratto{text-decoration: underline solid cyan 2px;} .tipo_itinerario{text-decoration: underline solid red 2px;} .testo_tracciato{color: lime; text-shadow: -1px 0 yellow, 0 1px white, 1px 0 #000, 0 -1px #000;} .testo_tratto{color: cyan; text-shadow: -1px 0 yellow, 0 1px white, 1px 0 #000, 0 -1px #000;} .testo_itinerario{color: red; text-shadow: -1px 0 silver, 0 1px black, 1px 0 black, 0 -1px silver;} /* nella cartella gpx/css eventualmente modificare come segue .testo_tracciato{color: lime !important; text-shadow: -1px 0 yellow, 0 1px white, 1px 0 #000, 0 -1px #000;} .testo_tratto{color: cyan !important; text-shadow: -1px 0 yellow, 0 1px white, 1px 0 #000, 0 -1px #000;} .testo_itinerario{color: red !important; text-shadow: -1px 0 yellow, 0 1px white, 1px 0 #000, 0 -1px #000;} */ [data-title]:hover:after { visibility: visible; } [data-title]:after { content: attr(data-title); border-radius: 10px; border: 1px solid ##9f7928; color:rgba(192,192,192, 0.1); /*background: radial-gradient(ellipse farthest-corner at left bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); */font-size: 110%; line-height: 100%; position: absolute; bottom: 25%; left:2%; right:2%; padding: 4px 8px 4px 8px; visibility: hidden; z-index: 11; /*font-family: 'Allura', cursive; font-weight: 200;*/ } .hover-title { display: inline; pointer-events: auto; cursor: pointer; } .hover-image { visibility: hidden; } body:not(.mobile) .hover-title:hover + .hover-image { visibility: visible; pointer-events: none; } .hover-image { display: flex; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; pointer-events: none; flex-direction: column; align-items: center; justify-content: center; /* Change width and height to scale images */ width: 70vw; height: 70vh; } .hover-image img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; margin-bottom: 0; } .poster__percorsi{ display: flex; height: 100vh; width: 100%; align-items: center; padding: 0 20px; } .poster__content__percorsi{width: 35%;padding: 25px; margin-top: 150px;} .poster__img{width: 75%; height: 100%;} .poster__img img{object-fit: cover; width: 100%;height: 100%;} .poster__img_bis{width: 100%; height: 100%;} .poster__img_bis img{object-fit: cover; width: 100%;height: 100%;} .poster__content{width: 35%;padding: 50px;} .poster__content__reverse{width: 75%;padding: 20px;} .poster__img__tab {width: 100vw; height: 100vh;} .poster__img__tab img{object-fit: cover; width: 100%;height: 100%;} .poster__content__reverse__tab {width: 85%;padding: 20px;} /* espande la proprietà over con cambio colore a tutta l'immagine */ /*.poster__img:hover{color: #f5d033;text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;transition: all 1s cubic-bezier(.215, .61, .355, 1);}*/ /* mantiene la dismensione dell'immagine di presentazione fuori carousel visibile */ .img_percorso{min-height:310px; border-radius: 25px;} /* il ter è usato per lo slide dei percorsi*/ .carousel-cell__content__ter{ width: 100%; height: 100%; /*background: #33334D; border: 1px solid rgba(108,112,89,1); */ border-radius: 5%; /* line-height: 35px; text-align: center;*/ } .poster__img2{width: 100%; height: 100%;} .poster__img2 img{object-fit: contain; width: 100%;height: 100%; } .container__mio2 {position: relative; text-align: left; color: white;} .bottom_left2 { position: absolute; bottom: 5px; left: 5px;font-size: small;} .top_left2 { position: absolute; top: 5px; left: 5px;font-size: small;color:#fff;} .top_right2 { position: absolute; top: 5px; right: 5px;font-size: small;} .bottom_right2 { position: absolute; bottom: 5px; right: 5px;font-size: small;} .centered2 { position: absolute; top: 20%; left: 35%; transform: translate(-50%, -50%);font-weight: 500} @media (max-width: 768px) { .poster{flex-wrap: wrap;height: auto;} /* .poster__img, .poster__content{width: 100%;}*/ .poster__img, .poster__content__percorsi{width: 100%;margin-top: auto;} .poster__percorsi{flex-wrap: wrap;height: auto;} .bottom-left-wc { position: absolute; bottom: 10%; left: 5%;font-size: small;} .top-left-wc { position: absolute; top: 5%; left: 5%;font-size: small;} .top-right-wc { position: absolute; top: 15%; left: 5%;font-size: small;} .bottom-right-wc { position: absolute; bottom: 20%; left: 5%;font-size: small;} /*	.centered {font-size: 18px;} .top-left {left:auto;right: 16px;} .top-right { top: 60px; right: 16px;}*/ } /* griglia*/ .row { display: flex; flex-wrap: wrap; } .column__img { /* display: flex; position: relative; margin-top: 15px;*/ vertical-align: middle; width: 100vw; width: 100%; } .column__img__opaque{opacity: 0.2} .column__video { width: 100%; height: 100%; height: 66vh; padding: 5px; } @media (max-width: 768px) { .column__video { height: 40vh; padding: 0; } } @media (max-width: 425px) { .column__video { height: 33vh; padding: 0; } } /* centra nella grid bootstrap3*/ .display-flex-center { display:flex; align-items:center; } /* ! dimensione plugin meteo */ .meteo_img1{min-height:425px; min-width: 325px; } .meteo_img2{min-height:350px; min-width: 325px; } /* foto effetto polaroid nella sezione APPROFONDIMENTI pagina percorsi*/ .polaroid { width: 80%; background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .polaroid img {width: 100%} .container__polaroid { text-align: center; padding: 10px 20px; } .segnale_stradale{ border: 2px solid #000; border-radius: 15px; vertical-align: middle; width: 100%; height: auto; background-color: white; } .segnale_stradale h4{ letter-spacing: -1px; text-align: center; font-family: sans-serif; font-weight: 600;} @media (max-width: 768px) { .segnale_stradale h4{ font-size: small;} } .info_aggiuntive{ border: 2px dashed #000; border-radius: 100%; vertical-align: middle; text-align: center; font-family: sans-serif; } .info_aggiuntive h3{ color: #ffffff; font-weight: 600; text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000; letter-spacing: 2px; } .center-pills { display: flex; justify-content: center; } .gpxtruder{ overflow:hidden; transform-origin: 0px 0px 0px; transform: scale(3); } .gpxtruder_help{ display: block; } @media (max-width: 768px) { .gpxtruder{padding-left:15px; transform: scale(2);} .gpxtruder_help{display: none;} } @media (max-width: 767px) { .gpxtruder{ transform: scale(1.5); padding-left: 0; margin-left: -5px; } .gpxtruder_help{ display: none } } .summary_POI{display: flex; align-items: center;} .img_POI{width:28px; height:28px;padding-right:5px;} .resize_overlay_map{ width: 100%; height: 100%; min-height: 66vh; } .my_percent_container_image_control { background-repeat: no-repeat; background-size: cover; background-clip: text; -webkit-background-clip: text; color: transparent; } .my_percent_container2 { background-repeat: no-repeat; background-size: cover; background-clip: text; -webkit-background-clip: text; color: transparent; padding-top:200px; max-width: 280px; min-height:320px; font-size: 145px; font-weight: 900; } .my_percent2 { background-color: rgba(108,112,89,1); border-radius: 25px; color: white; display: flex; align-items: center; justify-content: center; height: 320px; } .my_percent_container { padding-top:180px; max-width: 900px; min-height:500px; font-size: 330px; font-weight: 900; } @media (max-width: 1024px) { .my_percent_container { padding-top: 180px; max-width: 700px; min-height: 500px; font-size: 330px; font-weight: 900; } } @media (max-width: 768px) { .my_percent_container { padding-top:180px; max-width: 750px; min-height:300px; font-size: 280px; } } @media (max-width: 435px) { .my_percent_container { padding-top:180px; max-width: 410px; min-height:300px; font-size: 180px; } } @media (max-width: 375px) { .my_percent_container { padding-top:180px; max-width: 360px; min-height:300px; font-size: 150px; } } /* offuscamento indirizzo mail*/ #MyToHide{display: none;} /* styling dei popup per le mappe in leaflet*/ body .leaflet-tooltip { color: rgb(224,224,148); box-shadow: 0 3px 14px rgba(0,0,0,0.4); text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000; border-radius: 5px; border: 1px solid ##9f7928; background: radial-gradient(ellipse farthest-corner at left bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); } body .leaflet-popup-content-wrapper, .leaflet-popup-tip { color:silver; text-align: center; text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000; border-radius: 5px; border: 1px solid ##9f7928; background: radial-gradient(ellipse farthest-corner at left bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); box-shadow: 0 3px 14px rgba(0,0,0,0.4); } body .leaflet-container a { color: rgb(224,224,148); } body .leaflet-container a { -webkit-tap-highlight-color: rgba(108,112,89,0.4); } /* Helpers specifici per la pagina*/ .mt-3_percorsi{margin-top: 150px;} .mt-2_percorsi{margin-top: 50px;margin-bottom: 50px;} .mt-1_percorsi{margin-top: 25px;margin-bottom: 25px;} .tx_c{text-align: center!important;} .tx_l{text-align: left!important;} .tx_r{text-align: right!important;} .tx_j{text-align: justify!important; text-justify: inter-character; display: block;} .grand-big-text{font-size: 90px;font-weight: 500;} .big-text{font-size: 70px;font-weight: 900;} .semi-big-text{font-size: 60px;font-weight: 800;} .grand-text{font-size: 55px;font-weight: 700;} .med-text{font-size: 40px;} .mid-text{font-size: 30px;} .normal-text{font-size: 20px;} .text{font-size: 14px;} .p25{padding: 25px 0;} .p25_bis{padding: 25px;} .p25_ter{padding-left: 25px;padding-right: 25px;} .p15{padding: 15px;} .p35_sx_dx{padding-left: 35px;padding-right: 35px;} .p50_tp{padding-top: 50px;} .p25_tbp{padding-top: 25px;padding-bottom: 25px;} .no_pad{padding-left: 0;padding-right: 0;} .pad_top_100{padding-top: 100px;} .puntini{border: 1px dashed blue;} .no_mar{margin-left: 0;margin-right: 0;} .min_vh33{min-height: 33vh;} .min_vh50{min-height: 50vh;} .min_vh75{min-height: 75vh;} .max_wh{max-width: 768px;} .max_wh2{max-width: 1024px;} .mappa_global{max-width: 1350px; width: 100%; min-height: 85vh; height: 100%; border-radius: 25px; padding-left: 2%; padding-right: 2%; margin: 0px auto; position: relative; z-index: 1;} .centerone { margin: auto;display: block;} .fs_sr{font-size: smaller;} .dr50{border-radius: 25%;} .w50p{width: 50px;} .pr{position: relative; width: 100%; height: 100%;} .pa{height: 100%; width: 100%; position: absolute;} .bgw{ background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%); /*background-image: linear-gradient(to bottom, #ffffff, #ffebfc, #ffd3e2, #ffbfb1, #ffb878, #e5b362, #c7af51, #a6ab45, #969c4c, #878e52, #797f56, #6c7059);*/ } @media (max-width: 768px) { .mt-3_percorsi{margin-top: 70px;} .grand-big-text{font-size: 50px;font-weight: 700;} .semi-big-text{font-size: 40px;font-weight: 800;} .grand-text{font-size: 35px;font-weight: 700;} .med-text{font-size: 30px;} .mid-text{font-size: 20px;} .button { margin-top: 10px; padding: 8px 18px;} } /* ! Helpers */ .mt-0{margin-top: 25px;} .mt-1{margin-top: 50px;} .mt-2{margin-top: 100px;} .mt-3{margin-top: 150px;} .tw{color:#fff;text-align: justify;} .tb{color: blue;} /* Gradiente del colore di testo*/ .grade{ background: #eee; background: -webkit-linear-gradient(#eee, rgb(224,224,148)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .grade_green{ background: -webkit-linear-gradient(rgba(9,255,0,0.7), rgba(108,112,89,1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .grade_dark{ background: -webkit-linear-gradient(rgba(108,112,89,0.7),#f5d033); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .grade_Gold{ background: radial-gradient(ellipse farthest-corner at left bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at right top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} @media (max-width: 768px) { .mt-sma-0{margin-top: 0} .mb-sma-0{margin-bottom: 0} .mt-3{margin-top: 75px;}}