/* html-minifier --remove-comments --collapse-whitespace --minify-css --minify-js --file-ext php /home/luca/html/www/html/css/style_animazioni_NOT_MINIMIZED.css -o /home/luca/html/www/html/css/style_animazioni.css */ /* ! Hero */ .hero{ position: relative; height: 100vh; max-height: 764px; display: flex; width: 100%;align-items: center; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,.2), rgba(0,0,0, 0.9)), url('https://atorinfriul.it/html/images/caricamento.gif') no-repeat center center; /* immagine di background da realizzare come mosaico degli screen shot dei vari video*/ background-size: cover; overflow: hidden; } .hero:after{ content: ' '; width: 100%; height: 100%; display: block; position: absolute; top:0; left:0; background: #000; opacity: 0.4 } .hero__content{ width: 100%; max-width: 1350px; max-height: 1024px; margin: 0 auto; padding: 30px; z-index: 5; position: relative; } .hero__content h1, .hero__content p{color: #fff; } .hero--small{height: 450px;text-align: center;} .video-back{ position:absolute; bottom:0; left:0; min-width: 100%; min-height: 100%; z-index: 0; background-position: center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; } video[poster] { background: rgba(0, 0, 0, 0.7); } #myVideo { position: relative; right: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index: 0; } .content_prova { position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; padding: 20px; z-index: 1; } @media (max-width: 768px) { .hero{ height: 65vh;} .content_prova h1{font-size: 18px;} } /* .shaped_circle{ -webkit-clip-path: circle(110.7% at 98% 100%); clip-path: circle(110.7% at 98% 100%); } .shaped_circle_reverse{ -webkit-clip-path: circle(73.7% at 29% 84%); clip-path: circle(73.7% at 29% 84%); } .container_pentagon{ overflow:hidden; /*height: 100vh; width: 100vw;*/ /* padding: 20px; } .shaped_pentagon { margin:0 auto; display:block; -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); } */ /* BG Cover */ .bg-cover{ display: flex;/* padding: 100px 0; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0, 0.7)), url('../images/varie/Zoncolan_sutrio.jpeg') no-repeat center center; background-size: cover;*/ } .bg-cover h3{ background: -webkit-linear-gradient(#eee, rgb(224,224,148)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .bg-cover p{color:white;text-align: justify;} .bg-cover__text{width: 70%;padding: 30px;} .bg-cover__title{width: 30%;padding: 50px;display: flex;align-items: center;} @media (max-width: 768px) { .bg-cover{flex-wrap: wrap; height: auto;} .bg-cover__text, .bg-cover__title{width: 100%;padding: 25px;} } /* ! Grid */ .grid{display: flex; max-width: 1350px; padding: 0 30px;margin: 0 auto;} .grid .col{width: 100%;} @media (max-width: 768px) { .grid{flex-wrap: wrap; padding: 0 15px;} } .my_columns { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .my_column { flex: 33.33%; align-self: center; } @media (min-width: 768px) { .columns { flex-wrap: nowrap; } output { padding-top: 0; } } /* ! Carousel */ .main-carousel{padding: 20px 20px;} .carousel-cell__copy{padding: 0 5px;font-weight: 400;line-height: 18px; } .carousel-cell__copy__right{text-align: right;padding-right: 15px;} .carousel-cell{ height: 350px; width: 350px; margin-right: 40px; } .carousel-cell__content{ width: 100%; height: 100%; /* background: #6adf91;*/ background: rgb(224,224,148); background: linear-gradient(90deg, rgba(224,224,148,1) 30%, rgba(108,112,89,1) 100%); border: 1px solid rgba(108,112,89,1); border-radius: 100%; line-height: 350px; text-align: center; } /* selettori per foto e testo dentro carousel in marchetti_design */ .carousel-cell__content__bis{ width: 100%; height: 100%; /* background: #6adf91;*/ background: rgb(0,0,0); /* background: linear-gradient(90deg, rgba(224,224,148,1) 30%, rgba(108,112,89,1) 100%);*/ border: 1px solid rgba(108,112,89,1); border-radius: 5%; line-height: 20px; text-align: center; } @media (max-width: 768px) { .main-carousel{padding: 20px 14px;} /* nasconde i testi nella slide di marchettidesign .top_left2 {display: none;} .bottom_right2 {display: none;}*/ } /* Panel Blue */ .panel-blue{ background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0, 0.7)), url('../images/varie/Zoncolan_sutrio.jpeg') no-repeat center center; background-size: cover; padding: 100px 30px;} .panel-blue__text{display: flex;align-items: center;} .dot{ height: 250px;width: 250px; border-radius: 100%; line-height: 250px; text-align: center; display: inline-block; margin-right: 40px; margin-bottom: 40px; } .dot__base{ background: #6adf91; } .dot__color__giallo{background: linear-gradient(315deg, rgba(245,255,0,0) 0%, rgba(245,255,0,0.7) 100%);} .dot__color__rosso{background: linear-gradient(45deg, rgba(255,0,14,0) 0%, rgba(255,0,14,0.7) 100%);} .dot__color__blu{background: linear-gradient(225deg, rgba(0,35,255,0) 0%, rgba(0,35,255,0.7) 100%);} .dot__color__verde{background: linear-gradient(135deg, rgba(39,255,0,0) 0%, rgba(9,255,0,0.7) 100%);} .dot__animated{transition: transform 2s ease;} .dot__animated:hover { transform: scale(1.25); } @media (max-width: 768px) { .dot{margin-right: 0px;} } @media (max-width: 1024px) { .dot{ height: 150px;width: 150px; line-height: 150px; margin-right: 20px; } } /* Popups */ /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; bottom: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ -webkit-animation-name: fadeIn; /* Fade in the background */ -webkit-animation-duration: 0.4s; animation-name: fadeIn; animation-duration: 0.4s } /* Modal Content */ .modal-content { position: fixed; bottom: 0; background-color: #fefefe; width: 50%; -webkit-animation-name: slideIn; -webkit-animation-duration: 0.4s; animation-name: slideIn; animation-duration: 0.4s } /* The Close Button */ .close { color: white; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } .modal-header { padding: 2px 16px; background: rgb(224,224,148); background: linear-gradient(180deg, rgba(224,224,148,1) 30%, rgba(108,112,89,1) 100%); text-align: center; color: #33334D; } .modal-body {padding: 2px 16px;} .modal-footer { padding: 2px 16px; background: rgb(224,224,148); background: linear-gradient(180deg, rgba(224,224,148,1) 30%, rgba(108,112,89,1) 100%); color: #33334D; text-align: center; } /* Add Animation */ @-webkit-keyframes slideIn { from {bottom: -300px; opacity: 0} to {bottom: 0; opacity: 1} } @keyframes slideIn { from {bottom: -300px; opacity: 0} to {bottom: 0; opacity: 1} } @-webkit-keyframes fadeIn { from {opacity: 0} to {opacity: 1} } @keyframes fadeIn { from {opacity: 0} to {opacity: 1} } @media (max-width: 768px) { .modal-header {font-size: 14px;} .modal-content { width: 100%;} } /* Footer */ .footer__animazione{ background: #010e30; padding: 150px 0; } /* ! Content */ .content__animazione{max-width: 900px; margin: 40px auto;} /* stile fonti */ .miafonte ul {padding-left: 25px;} .miafonte ul li {padding-left: 50px;} *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }