/* Theme Name: So Alux Theme Description: Responsive WordPress Theme based on Boostrap and Font Awesome. Version: 1.0 Author: Giorgio Di Raimondo Author URI: Site: Text Domain: nakedpress Domain Path: /languages Tags: grid-layout, blog, custom-menu, featured-images, right-sidebar License: GNU General Public License v3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ :root { --menu-bg: #eff0f3; --menu-text: #0d0d0d; --menu-dropdown: #FFF; --menu-dropdown-hover: #FFF9F1; --accent-color:#444; --text-color:#0d0d0d; --button-bg: #ff8e3c; --button-text: #0d0d0d; --button-bg-hover: #e78d48; } /* /* @todo Smooth scrolling on the whole document */ html {scroll-behavior: smooth;} /* @todo Reset */ body, html{ font-size: 16px; background: #fff; color: var(--text-color);font-family: 'Neue Montreal',sans-serif ;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%;box-sizing: border-box;margin: 0;padding: 0;-webkit-text-size-adjust: none;} @font-face {font-family: 'Neue Montreal';font-style: normal; font-weight:700; scr : url('/fonts/NeueMontreal-Bold.woff');} @font-face {font-family: 'Neue Montreal';font-style: normal; font-weight:400; scr : url('/fonts/NeueMontreal-Regular.woff');} *,*:before,*:after{ box-sizing: border-box; } h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;} ol,ul{list-style-type: none;} img{height: auto;} a{text-decoration: none;} hr{border:none; border-bottom: 1px solid #ddd} a{text-decoration: none;color: var(--accent-color)} /* @todo Title System */ .text-0{font-size: 5rem; line-height: 1;} h1, .text-1{font-size: 3.4rem;color:#0d0d0d} h2, .text-2{font-size: 2.2rem;color:#2a2a2a} h3, .text-3{font-size: 1.5rem;color:#2a2a2a} h4, .text-4{font-size: 1.2rem;} p, .text-4{font-size: 1.1rem;line-height: 1.647rem;margin-bottom: 1rem;color:#2a2a2a} h5, .text-5{font-size: 0.9rem;} h6, .text-6{font-size: 0.8rem;} .text-sub{font-size: 1.1rem;line-height: 1.4} @media (max-width: 912px) { .text-0, .sma-text-0{font-size: 3.2rem} h1, .text-1, .sma-text-1{font-size: 2.2rem;} h2, .text-2, .sma-text-2{font-size: 1.8rem;} h3, .text-3, .sma-text-3{font-size: 1.4rem;} } h1, h2, h3, h4, h5, h6, ol, ul{margin-bottom: 1rem;line-height: 1.2} h1, h2, h3, h4, h5, h6, p{margin-top: 1rem;} ol{list-style:decimal; list-style-position: inside;counter-reset: ordered-list;} ul{list-style-type: circle;list-style-position: inside;} li{margin-bottom: 4px;} .home-title { position: absolute; top:-9999px;} /* @todo Button System */ .button, .wp-block-button__link{font-size: 0.9rem; text-transform: uppercase; font-weight: bold; background: var(--button-bg); color: var(--button-text); padding: 14px 25px;display: inline-block;border-radius: 5px} .button:hover, .wp-block-button__link:hover{background: var(--button-bg-hover); color: var(--button-text)} .is-style-outline .wp-block-button__link{background: var(--button-text); padding: 14px 25px; border-radius: 5px; font-weight: bold;border: 3px solid #9BD4FF} .is-style-outline .wp-block-button__link:hover{background: transparent; border-color: var(--button-bg);} /* @todo Header */ /*----------------------------------------------------------------------------------- */ .spacer{height: 220px;} @media (max-width: 1024px) { .spacer{height: 13vh;} } .spacer-no-image{height: 5vh;} /* Header Message*/ .header-notice{padding: 4px 0 6px 0; background: #3b739d;color: #fff; margin-bottom: 25px;font-weight: 600;} @media (max-width: 1024px) { .header-notice span {display: inline-block;font-size: 13px;} } .header{position: fixed; width: 100%;background: #fff;z-index: 999; transition: all 0.3s cubic-bezier(.215, .61, .355, 1);} .header-nav{display: -webkit-flex;display: -ms-flex;display: flex;max-width: 1210px;margin: 0 auto;padding: 0px;position: relative;align-items:center;} .nav-menu {width: 100%;background-color: #fff;position: relative;display: flex;justify-content: center; box-shadow: 0 5px 5px rgba(0 0 0 / 10%);} .nav-logo{display: flex;align-items:center;} .nav-logo .logo{padding: 5px;} .nav-logo .logo img{height: 80px; width: auto;transition: all 0.3s cubic-bezier(.215, .61, .355, 1);} .scroll-down .nav-logo .logo img {height: 55px;} .nav-logo, .nav-search, .nav-icons{min-height: 55px;} .nav-icon-search{display: none;} .nav-icon-user{display: block;padding: 13px;width: 50px;position: absolute;right: 60px;color:#000; top:0px} .nav-icon-user .icon-user{font-size: 22px;} .nav-search{width: 100%;} .nav-logo, .nav-icons{width: 30%;position: relative} .nav-search__close {display:none} /* Search */ .nav-search{width:100%;} .nav-search__form{position: relative;margin-top: 9px;border-radius: 45px; border: 3px solid #ddd; height: 44px} .nav-search__form input[type=text]{width: calc(100% - 40px ); border:none!important; height: 38px!important;background: transparent!important;outline:none;} .nav-search__form #datafetch{position: absolute;top:40px; left:2.5%;background: #fff;width: 95%;z-index:1;max-height: 400px; overflow-y: scroll;-webkit-overflow-scrolling: touch;} .nav-search__form #datafetch a, .nav-search__form #datafetch .product-not-found{display: block; padding: 20px 20px 20px 20px;border-bottom: 1px solid #ddd;border-left: 1px solid #ddd;border-right: 1px solid #ddd; margin-bottom: 0;position: relative;} .nav-search__form #datafetch a small{color:#000} .nav-search__form #datafetch a.product-search-item{padding: 20px 20px 20px 60px;} .nav-search__form .search-thumbnail{width: 40px;height: 40px;display: inline-block;margin-right: 10px;position: absolute;top:10px; left:10px;} .nav-search__icon{position: absolute; top: 0; right:0;height: 38px;border: none; background: transparent;font-size: 18px;padding-right: 10px;} @media (max-width: 1024px) { .header-notice {padding: 4px 5px 4px 5px;border-bottom: 1px solid #ddd; height: 44px;font-size: 12px;line-height: 17px; display: flex;width: 100%;align-items: center;justify-content: center;margin-bottom: 4px;} .header{transition: all 0.3s cubic-bezier(.215, .61, .355, 1);top:0;box-shadow: 0 5px 20px rgba(0 0 0 / 10%);} .scroll-down .header{top:-48px;} /* Search */ /* nav search panel disable */ .nav-search__close {display:block;position: absolute;right: 25px;top: 15px;cursor: pointer;} .nav-search{position: absolute;top:70px;background: #fff; padding: 0px;min-height: 0;height: 100vh;width: 100%;transform: translateX(-100%);overflow: hidden;transition: all .5s cubic-bezier(.215, .61, .355, 1);} .nav-search--open{transform: translateX(0%);} .nav-search__form{margin:55px 15px} .nav-search__form #datafetch {top:39px} .nav-search__form #datafetch p {border: none;} .nav-icon-search{display: block;font-size: 22px;padding: 13px;width: 50px;position: absolute;right: 110px;} /* Nav icons */ .nav-icons{width: 50%;background: #fff;z-index: 1001} .cart-icon { right: 80px!important;} .nav-icon-user{right: 148px;top:1px} .nav-menu{position: absolute;top:105px;z-index: 1100; width: 100%;min-height: 0;} .nav-mex{display: none;} .nav-logo{width: 50%;background: #fff;z-index: 1001} .nav-logo .logo img{padding: 5px;height:70px;} } @media (min-width: 1024px) { .scroll-down .header{transform: translateY(-114px);} } .header__menu {margin-bottom: 0;} .header__menu a{color:var(--menu-text); display: block; padding: 20px 15px; font-size:16px;font-weight: 700;text-transform: uppercase;} .header__menu > li > a:hover{text-decoration: underline;} .header__menu li{display: inline-block;position: relative;margin-bottom: 0;} .header__menu li ul{background: var(--menu-dropdown); visibility: hidden; opacity: 0; min-width: 200px; position: absolute; transition: all 0.5s ease; margin-top: 0px;left: 0; display: none;} /*Dropdown*/ .header__menu li ul > li > a:hover {background: var(--menu-dropdown-hover);} .header__menu li:hover > ul.dropdown-menu, .header__menu li ul.dropdown-menu {display: none;} .header__menu li:hover > ul.dropdown-menu.open, .header__menu li ul.dropdown-menu.open{ visibility: visible; opacity: 1; display: block; } /*Dropdown secondo livello*/ ul.dropdown-menu ul.dropdown-menu {border-top: 1px solid #ccc;} li.dropdown li.dropdown .arrow {right: 15px;} .header__menu li ul li { clear: both; width: 100%; border-bottom: 1px solid #ccc; } .header__menu li.active a {color: var(--menu-text); } .header__menu > li.menu-item-has-children > a{position: relative;padding-right: 30px;} /*Arrow Dropdown*/ .header__menu .arrow {width: 15px;height: 15px;opacity: 0.6;display: inline-block;top: 21px;right: -9px;position: absolute;background: url(img/arrow.svg) center center;background-size: 20px 20px;-webkit-transform: rotate(90deg);} .dropdown .select .arrow {transform: rotate(-90deg);} .animate {transition: all 0.4s;} .header__hamburger{display: none;} /* .header__menu li.lang-item a{border: 1px solid red;padding: 0;height: 18px;width: 18px;position: relative;display: inline-block;top:3px; border-radius: 100%;} .header__menu li.lang-item a img{display: none;} */ .header__menu li.lang-item a {padding: 5px;top: 2px;position: relative;} .header__menu li.lang-item a img { width: 14px!important; height: 14px!important; border-radius: 20px; } @media (max-width: 1024px) { .header__hamburger{display: block;font-size: 22px;padding: 13px;width: 50px;position: absolute;right: 12px;top:-3px} .header__hamburger span{width: 33px;height: 4px;background: var(--menu-text);margin-top: 8px;display: block;transition: all 0.15s cubic-bezier(.215, .61, .355, 1);} .header__menu a{padding: 10px 10px 16px 10px;} .header__menu{position:absolute;top:27px; left:0; width: 100%;background: var(--menu-bg);height: 0;overflow: hidden; transition: all 1s cubic-bezier(.215, .61, .355, 1);} .header__menu li{display: block;border-top: 1px solid #ddd;overflow: hidden;} .header__menu li ul {position: relative;transition: none;} .header__menu li ul li{background: var(--menu-dropdown);} .header__menu > li > a:hover {color: var(--menu-text)} .header__menu .arrow {right: 15px;} .header__menu li.lang-item{display: none;} .menu-open .header__hamburger span:nth-child(1){transform: translateY(4px) rotate(45deg);} .menu-open .header__hamburger span:nth-child(2){transform: translateY(-8px) rotate(-45deg);} .menu-open .header__menu{height: 100vh;} .menu-open{overflow:hidden;} /*Dropdown scroll max-height*/ .dropdown-menu {max-height: 500px;} .header__menu li ul li {border-bottom: 0px solid} } .blocco p {max-width: 800px;text-align:center;margin:0 auto;padding-bottom:26px} .blocco h2 {max-width: 800px;text-align:center;margin:0 auto;padding-bottom:26px} /* @todo Cover*/ .cover {padding-top:140px;padding-bottom:140px;text-align: center;position: relative;display: flex;min-height:60%;} @media (max-width: 768px) {.cover {min-height:50%;} } .cover:before {content: '';position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: #000000;opacity: 0.2;z-index: 0;} .cover h1, .cover p {color: #fff;z-index: 1;position: relative;} .cover p{max-width:600px;margin:auto;} /* @todo Home Page Cover */ .page-template-home-page-cover .spacer{height: 195px;} .page-template-home-page-cover .wp-block-cover__inner-container h2{max-width:800px;margin:auto; font-size:26px;line-height:35px; margin-bottom:15px} @media (max-width: 998px){ .page-template-home-page-cover .wp-block-cover__inner-container h2{font-size:20px;line-height:28px;} } @media (max-width: 1024px) { .page-template-home-page-cover .spacer{height: 55px;} } /* @todo Colonne Home */ .panel-split .wp-block-column { border: 2px solid #443E3E; overflow: hidden; padding-bottom: 30px; padding-top:0px; } .panel-split h2 { font-size: 26px; padding: 20px 20px 0px 20px; } .panel-split P { padding: 0px 20px 0px 20px; margin-bottom: 20px; } /* @todo Page no Cover*/ .page-no-image{background: linear-gradient(107.06deg, #fff2e8 20.87%, #fde5dd 77.45%);margin-top: 0;padding-top: 50px;padding-bottom:50px;} .page-icon { width: 460px; height: auto; margin-bottom: -30px; } /* @todo Hero Section*/ .hero--section {background: linear-gradient(107.06deg, #fff2e8 20.87%, #fde5dd 77.45%);margin-top: 0;padding-top: 50px;padding-bottom:50px;} .hero-title{font-size: 50px;line-height: 60px;} @media (max-width: 767px) { .hero-title {font-size: 32px;line-height: 38px;} .hero--section {padding-top: 0px;} } .hero-image {position: relative; z-index: 1;} .hero-image img{border-radius:6px} .hero-image .bottom-icon {position: absolute;bottom: 0;width: 80%;left: 50%;transform: translateX(-50%);} /* @todo blocco-articoli index single*/ .card-news .wp-block-latest-posts__featured-image{padding-bottom:10px} .card-news .wp-block-latest-posts__post-title {font-size: 1.25rem;line-height: 1.3;color: #375376;font-weight: 700;margin-top: 0.5rem;margin-bottom: 10px;} .card-news h4 {font-size: 1.25rem;line-height: 1.3;color: #375376;font-weight: 700;margin-top: 0.5rem;margin-bottom: 10px;} .card-news .post-time {font-size: .8125em;line-height: 1.2;} .card-news .wp-block-latest-posts__post-author, .wp-block-latest-posts__post-date{padding-top:10px} .card-news .wp-block-latest-posts__post-excerpt , .card-text p , .card-meta {font-size: 1.09rem;line-height: 1.2;margin-top: 0.5rem;margin-bottom: 0.5rem!important;} .card-news .wp-block-latest-posts__featured-image img {min-height: 211px;border: 1px solid #ddd;border-radius: 12px;} /* @todo Animation Freccia -------------------------------------------------------- */ .ball {animation: bounce 1s infinite alternate;-webkit-animation: bounce 1s infinite alternate;} @keyframes bounce {from {transform: translateY(0px);} to {transform: translateY(-20px);}} @-webkit-keyframes bounce {from {transform: translateY(0px);} to {transform: translateY(-20px);}} /* @todo Arrow -------------------------------------------------------- */ .container-arrow {margin-top: 15px;display: block;} .container-arrow span {display: inline-block;height: 40px;text-align: center;width: 46px; background: url('img/arrow-down-dark.png') no-repeat center center;background-size: 100%;} /* @todo contact form -------------------------------------------------------- */ .form-richiesta{background:#eff0f3;padding:30px;margin-top:20px;border-radius:20px;max-width:906px;margin-left:auto;margin-right:auto;font-size:18px} .form-richiesta input[type=email],.form-richiesta input[type=number],.form-richiesta input[type=tel],.form-richiesta input[type=text],.form-richiesta select,.form-richiesta textarea{ border:1px solid #375376;padding:12px;margin-top:8px;width:98%;font-size:18px} .form-richiesta input[type=submit]{font-weight:700;margin-top:20px;padding:15px;font-size:18px;border-radius:5px;height:65px;-webkit-appearance:none;width:98%;background:var(--button-bg); color:var(--button-text)} .form-richiesta input[type=submit]:hover {background:var(--button-bg-hover);} .form-richiesta .wpcf7-list-item {margin: 0;} .form-richiesta select {-webkit-appearance: none;-moz-appearance: none;background: url('img/br_down.png');background-repeat: no-repeat;background-position-x: 98%;background-position-y: 13px; color:#757575!important} @media (max-width: 767px){ .form-richiesta input[type=text], .form-richiesta input[type=email],.form-richiesta input[type=tel],.form-richiesta input[type=number],.form-richiesta select,.form-richiesta textarea { font-size: 15px;} .form-richiesta {padding: 15px;} .form-richiesta{margin-top:0px;} } [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer; } /* ! @todo Slider flickity */ .main-carousel h3{color:#fff;padding-bottom: 20px;max-width: 800px;margin: 0 auto;font-size:40px;line-height:45px} .main-carousel p{color:#fff;padding-bottom: 20px;max-width: 600px;margin: 0 auto;font-size:25px;line-height:35px} .main-carousel .carousel-cell{height: 750px;} .main-carousel .carousel-cell:before{ content: ' '; background: #000;position: absolute;top:0; left:0; width: 100%;height: 100%;z-index: 0; opacity: 0.65} @media (max-width: 1024px) { .main-carousel h3, .main-carousel p{text-align: center;} .main-carousel .wp-block-button{text-align: center;} } .carousel-cell{width: 100%;height: 350px;} .flickity-page-dots{bottom: 20px;} .vertical-center{display: flex; width: 100%; height: 100%; align-items: center;} .page-template-home-page .spacer{height: 180px;} /* ! Sub Slider */ .sub-slider{margin: 30px 0} .sub-slider__item{width: 80%;height: 400px;text-align: center; display: flex; align-items: center;position: relative;} .sub-slider__item:before{ content: ' '; background: #000;position: absolute;top:0; left:0; width: 100%;height: 100%;z-index: 0; opacity: 0.55} .sub-slider__item h3{width: 100%;margin-bottom: 0;position: relative;z-index: 1; color:#fff} .sub-slider .flickity-prev-next-button.next{right: -70px;} .sub-slider .flickity-prev-next-button.previous{display: none;} @media (min-width: 1024px) { .sub-slider__item{width: 33.33%;} } @media (max-width: 1024px) { .sub-slider .flickity-prev-next-button{display: none;} .sub-slider{margin: 20px -20px} } /* ! Text Slider */ .text-slider{margin: 30px 0; border-top: 3px solid #ddd;border-bottom: 3px solid #ddd;} .text-slider__item{width: 100%;min-height: 300px;text-align: center; display: flex; align-items: center;position: relative;} .text-slider__content{max-width: 800px; margin: 0 auto;} @media (max-width: 1024px) { .text-slider .flickity-prev-next-button{top:80%; transform: scale(0.5);} .text-slider p{padding: 5px 20px;margin: 0;} } .main-carousel ol li {padding-left: 22px!important;padding-bottom: 22px!important;} .main-carousel ol li:before {content: none;} .flickity-page-dots .dot {background: #ddd;} /* @todo Index */ /*----------------------------------------------------------------------------------- */ .img-index{ height: auto;width: 100%;object-fit: cover;border-radius: 12px;} .post-blog {display: inline-block;position: relative; margin-bottom: 1rem;border: 1px solid #ddd;border-radius: 12px;overflow: hidden;} .menu-cat {list-style-type: none;} .menu-cat li {display: inline-block;} .menu-cat li a {background: #375376;display: block;color: #fff;padding: 7px 14px;border-radius: 5px;text-transform: uppercase;font-size: 0.9rem;font-weight: 700;margin-right: 7px;} .menu-cat li.current-cat a {background: #e3704b;} .blog .menu-cat li.cat-item-all a {background: #e3704b;} /*----------------------------------------------------------------------------------- */ /* @todo Single */ /*----------------------------------------------------------------------------------- */ .single, .archive, .blog, .error404{ background: linear-gradient(107.06deg, #fdf2ef 20.87%, #fde5dd 77.45% ) no-repeat;background-size: 100% 550px;} @media (max-width: 768px) { .single, .archive, .blog, .error404 {background-size: 100% 420px;} } .img-single{border-radius: 12px;width: 100%;margin-bottom: 1rem;border:1px solid #ddd} .single .content h2 {margin-bottom: 3.4rem;font-weight: 800;} .post-tag {margin-bottom:10px;} .post-tag::before {color: #cccccc;content: '\f02c';font-size: 12px;font-family: 'FontAwesome';margin-right: 4px;} .post-tag a {letter-spacing: 0.01rem;font-weight: 400;font-style: normal;font-size: 13.5px;line-height: 30px;} .icon-clock {width: 14px;margin-right: 5px; margin-left:5px ;margin-bottom:-2px} .blog-meta {font-size: 14px;} .single-post ol li{list-style-type:none;position: relative;padding-left: 40px;padding-bottom: 30px;} .single-post ol li:before { counter-increment: ordered-list; content: counter(ordered-list); background-color: var(--button-bg); color: #f6f6f6; border-radius: 5px; display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 30px; position: absolute; top:3px; left:0; } .wp-block-image{margin-bottom: 15px;} /* --------------------------------------------------------------------------------------------------------------------------- */ /* @todo Footer /* --------------------------------------------------------------------------------------------------------------------------- */ #myFooter {margin-top: 100px;background-color: #202325;color: #fff;} #myFooter .footer-top {padding: 100px 15px 70px;} #myFooter .navbar-brand-footer img {width: 35%;} #myFooter .footer-copyright {padding: 30px 0;text-align: center;} #myFooter .border-top-tran {border-top: 1px solid rgba(255, 255, 255, 0.1);} #myFooter .footer-copyright p {margin: 5px;color: #fff;font-weight: 400;font-size: 16px;} #myFooter .footer-copyright a:hover {color: #e65f40;} #myFooter .footer-copyright a {color: #5e5757;} #myFooter .row {margin-bottom: 60px;} #myFooter .navbar-brand {height: 65px;} #myFooter ul {list-style-type: none;padding-left: 0;line-height: 1.7;} #myFooter h5 {text-transform: capitalize;margin-top: 10px;margin-bottom: 25px;font-size: 18px;color: #fff;} #myFooter h2 a {text-align: center;color: #fff;} #myFooter a {color: #fff;text-decoration: none;font-size: 14px;padding-bottom: 10px;} #myFooter a:hover {text-decoration: none;color: #c4d7e5;} #myFooter .social-networks {padding-top: 30px;padding-bottom: 16px;} #myFooter .social-networks a {font-size: 32px;color: #928d8ddd;padding: 10px;transition: 0.2s;} #myFooter .social-networks a:hover {text-decoration: none;} #myFooter .facebook:hover {} #myFooter .google:hover {color: #ef1a1a;} #myFooter .linkedin:hover {color: #ff0000;} #myFooter .btn {color: #fff;background-color: #ff7454;text-transform: uppercase;border-radius: 20px;border: none;width: 150px;display: block;margin: 0 auto;margin-top: 10px;line-height: 25px;} #myFooter .btn:hover {background-color: #11e7b6;color: #fff !important;} @media only screen and (max-width: 702px) and (min-width: 200px){ #myFooter {text-align: center;} #myFooter .navbar-brand-footer img{width:40%;} #myFooter .footer-copyright{padding: 50px 35px;} #myFooter .footer-copyright p {font-size: 16px;line-height: 1.4rem;} #myFooter a {font-size: 14px;} #myFooter .social-networks {text-align: center;} } @media only screen and (max-width: 998px) and (min-width: 703px){ #myFooter {text-align: center;} #myFooter .social-networks {text-align: center;} #myFooter .navbar-brand-footer img{width:20%;} } /* @todo Grid System*/ /*----------------------------------------------------------------------------------- */ .grid{display: flex; flex-wrap: wrap; max-width: 1270px; margin: 0 auto} .grid--small{max-width: 800px} .grid--center{justify-content: center;margin:auto} .grid--full{max-width: 100%} .col-20{width:20%} .col-25{width:25%} .col-30{width:30%} .col-33{width:33.33%} .col-40{width:40%} .col-50{width:50%} .col-60{width:60%} .col-70{width:70%} .col-80{width:80%} .col-90{width:90%} .col-100{width:100%} [class*='col-']{padding: 0 15px; position: relative;} .grid--full [class*='col-'], .gridgrid [class*='col-'] {padding:0px 0px 0px 0px;} @media (max-width: 991px) { .tab-20 { width: 20%; } .tab-25 { width: 25%; } .tab-33 { width: 33.33%; } .tab-50 { width: 50%; } .tab-100 { width: 100%; } } @media (max-width: 768px) { [class*='col-'] { width: 100%;left: 0; right: 0;} .sma-20 { width: 20%; } .sma-25 { width: 25%; } .sma-33 { width: 33.33%; } .sma-50 { width: 50%; } .sma-100 { width: 100%; } .sma-hide{display:none} } /* @todo Media-text Mobile*/ /*-----------------------------------------------------------------------------------*/ @media (max-width: 912px) { .wp-block-media-text.is-stacked-on-mobile { grid-template-columns: 100%!important; } .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { grid-column: 1; grid-row: 1; } .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media { grid-column: 1; grid-row: 2; } .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__media { grid-row: 2; } .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__content { grid-row: 1; } .wp-block-media-text__media video{width:60%; margin: 0 auto} .media-text-servizi .wp-block-media-text__media:after {background-size: 51%;} } /* @todo Helpers */ /*-----------------------------------------------------------------------------------*/ .img-res{width: 100%;} .video-res{width: 100%;height: 100%;overflow: hidden;} .video-res video{width: 100%;height: 100%;object-fit: cover} .mt-0{margin-top: 0;} .mt-1{margin-top: 1rem;} .mt-2{margin-top: 2rem;} .mt-3{margin-top: 3rem;} .mt-4{margin-top: 4rem;} .mt-5{margin-top: 30vh;} .mb-0{margin-bottom: 0;} .mb-1{margin-bottom: 1rem!important;} .mb-2{margin-bottom: 2rem!important;} .mb-3{margin-bottom: 3rem!important;} .mb-4{margin-bottom: 4rem!important;} .text-center{text-align: center;} .text-left{text-align: left} .text-right{text-align: right} @media (max-width: 768px) { .sma-text-center{text-align: center;} .sma-text-center .wp-block-buttons {justify-content: center;} } .p-0{padding: 0;} .p-1{padding: 1rem;} .p-2{padding: 2rem;} .p-3{padding: 3rem;} .p-4{padding: 4rem;} .pt-0{padding-top: 0;} .pt-1{padding-top: 1rem;} .pt-2{padding-top: 2rem;} .pt-3{padding-top: 3rem;} .pt-4{padding-top: 4rem;} .pb-0{padding-bottom: 0;} .pb-1{padding-bottom: 1rem!important;} .pb-2{padding-bottom: 2rem!important;} .pb-3{padding-bottom: 3rem!important;} .pb-4{padding-bottom: 4rem!important;} @media (max-width: 768px) { .sma-p-1{padding: 1rem} .sma-pt-1{padding-top: 1rem} .sma-pb-1{padding-bottom: 1rem} } .br{border: 1px solid red;} .icon-small{width: 40px;padding: 8px;} .icon-white{filter: invert(1);} .bg-dark{background: #000;} .text-white{color:#fff} .text-dark{color:#000} .v-center{display: flex; justify-content: center; flex-flow: column;align-items: flex-start;} .font-normal{font-weight: 400;} .overflow{overflow: hidden;} .upp{text-transform: uppercase;} .max-width-extra-small{max-width: 340px;margin: 0 auto;} .max-width-small{max-width: 400px;margin: 0 auto!important} .max-width{max-width: 800px; margin: 15px auto; padding-left: 15px;padding-right: 15px;} .max-width-2{max-width: 900px; margin: 0 auto} .max-width-3{max-width: 1000px;margin: 0 auto} .max-width-4{max-width: 1100px;margin: 0 auto} .round{border-radius: 20px} .none{display: none!important;} @media (max-width: 768px) { .sma-none{display: none;} .col-reverse{flex-direction: column-reverse;border: 1px solid red;} } @media (min-width: 768px) { .desktop-none{display: none;} } /* --------------------------------------------------------------------------------------------------------------------------- */ /* @todo 404 */ /* --------------------------------------------------------------------------------------------------------------------------- */ .error-content{padding:150px 0 70px}.error-text{text-align:center}.error{font-size:180px;font-weight:700}@keyframes bob{0%{top:0}50%{top:.2em}}.im-sheep{display:inline-block;position:relative;font-size:1em;margin-bottom:70px}.im-sheep *{transition:transform .3s}.im-sheep .top{position:relative;top:0;animation:bob 1s infinite}.im-sheep:hover .head{transform:rotate(0)}.im-sheep:hover .head .im-eye{width:1.25em;height:1.25em}.im-sheep:hover .head .im-eye:before{right:30%}.im-sheep:hover .top{animation-play-state:paused}.im-sheep .head{display:inline-block;width:5em;height:5em;border-radius:100%;background:#253858;vertical-align:middle;position:relative;top:1em;transform:rotate(30deg)}.im-sheep .head:before{content:'';display:inline-block;width:80%;height:50%;background:#253858;position:absolute;bottom:0;right:-10%;border-radius:50% 40%}.im-sheep .head:hover .im-ear.one,.im-sheep .head:hover .im-ear.two{transform:rotate(0)}.im-sheep .head .im-eye{display:inline-block;width:1em;height:1em;border-radius:100%;background:#fff;position:absolute;overflow:hidden}.im-sheep .head .im-eye:before{content:'';display:inline-block;background:#000;width:50%;height:50%;border-radius:100%;position:absolute;right:10%;bottom:10%;transition:all .3s}.im-sheep .head .im-eye.one{right:-2%;top:1.7em}.im-sheep .head .im-eye.two{right:2.5em;top:1.7em}.im-sheep .head .im-ear{background:#253858;width:50%;height:30%;border-radius:100%;position:absolute}.im-sheep .head .im-ear.one{left:-10%;top:5%;transform:rotate(-30deg)}.im-sheep .head .im-ear.two{top:2%;right:-5%;transform:rotate(20deg)}.im-sheep .body{display:inline-block;width:7em;height:7em;border-radius:100%;background:#0054d1;position:relative;vertical-align:middle;margin-right:-3em}.im-sheep .im-legs{display:inline-block;position:absolute;top:80%;left:10%;z-index:-1}.im-sheep .im-legs .im-leg{display:inline-block;background:#141214;width:.5em;height:2.5em;margin:.2em}.im-sheep::before{left:0;content:'';display:inline-block;position:absolute;top:112%;width:100%;height:18%;border-radius:100%;background:rgba(0,0,0,.2)} @media only screen and (max-width: 702px) and (min-width: 200px){ .error {font-size: 55px;} .error-content{padding:90px 0 70px} .error-content h4 {font-size: 18px;line-height: 20px;} } @media only screen and (max-width: 998px) and (min-width: 703px){ .error {font-size: 80px;} /* Add animation to "page content" */ .animate-bottom {position: relative;-webkit-animation-name: animatebottom;-webkit-animation-duration: 1s;animation-name: animatebottom;animation-duration: 1s} @-webkit-keyframes animatebottom {from { bottom:-100px; opacity:0 } to { bottom:0px; opacity:1 }} @keyframes animatebottom { from{ bottom:-100px; opacity:0 } to{ bottom:0; opacity:1 }} } /*----------------------------------------------------------------------------------- */ /* @todo Wordpress Styles */ /*----------------------------------------------------------------------------------- */ input[type=text], input[type=number], input[type=email], textarea{border: 3px solid #ddd; border-radius: 3px;padding: 10px;width: 100%;} input[type=submit]{background: #333; text-transform: uppercase;font-weight: bold;color:#fff;border:none; border-radius: 4px;padding: 14px 18px;font-size: 18px;width: auto;} .comments-area{margin-top: 80px;} .comments-area textarea{width: 100%;} .comments-area .comment-form-author input, .comments-area .comment-form-email input, .comments-area .comment-form-url input{width: 100%} .comments-area .form-submit input{background: #333; text-transform: uppercase;font-weight: bold;color:#fff;border:none; border-radius: 4px;padding: 14px 18px;font-size: 18px;} ol.comment-list, ol.comment-list li.comment ul{margin: 20px 0 20px; padding: 0;list-style-type: none;text-indent: 0} ol.comment-list li.comment {padding: 20px; margin-top: 20px;} ol.comment-list .comment-meta {margin-bottom: 0px;} ol.comment-list .comment-author img{width: 40px;border-radius: 100%} ol.comment-list .comment-author {line-height: 50px} ol.comment-list ol{list-style-type: none;} ol.comment-list li.comment p{margin-bottom: 10px;} .form-search {border: 3px solid #ddd;background: #fff; border-radius: 50px;max-width: 800px;margin: 0 auto;margin-bottom: 2rem;} .form-search input{border:none; width: calc( 100% - 70px );margin-left: 15px;font-size: 1.2rem;} .form-search button{border:none; background: transparent;} .form-search img{width: 30px;margin-bottom: -8px;} /* @todo Align*/ .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); } @media (min-width: 912px) { .alignwide { width: auto;max-width: 1000%;margin-right: calc(25% - 23vw);margin-left: calc(25% - 23vw);} } @media (min-width: 1240px) { .alignwide { width: 1270px; max-width: 1270px; margin-left: calc(50% - 626px);} } /* @todo Pagination*/ .pagination { margin: 40px 15px 40px 15px;text-align: center;} .pagination span, .pagination a {margin: 0 10px 10px 0; padding: 16px 21px; border: 2px solid #ddd; display: inline-block; } /* @todo Core Blocks Fix */ /* ------------------------------------------------------ */ /* Cover */ .wp-block-cover__inner-container{max-width: 1100px;} .wp-block-cover__inner-container img{margin-top: 20px;} /* Separator */ .wp-block-separator{border:none; border-bottom: 1px solid #ddd;margin-bottom: 1rem;} /* Spacing mobile */ @media (max-width: 768px) { .wp-block-spacer{height: 50px!important;} .sma-height-0, .wp-block-spacer.sma-height-0{height: 10px!important;} /*.wp-block-columns{margin-bottom: 0!important;gap: 0!important;}*/ } /* Media text*/ .media-right .wp-block-media-text__content{padding: 0% 8% 0% 0%!important;} .wp-block-media-text__media img{border-radius: 30px;} .no-round .wp-block-media-text__media img{border-radius: 0px;} .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__content{padding-top: 0!important;} @media (max-width: 912px) { .wp-block-media-text__media{padding-bottom: 1rem;} .wp-block-media-text__content{padding: 4% 2%!important;} } /* Image */ .wp-block-image figcaption{text-align: center;} /* Pin */ @media (min-width: 768px){ .pin-container{position: relative;border: 1px solid red;} .pin-element {position: sticky;top: 100px;z-index: 3;border: 1px solid red;} } /* Columns */ .wp-block-columns.sma-col-4 .wp-block-column{flex-basis: 25%!important;padding: 10px;margin:5px} .wp-block-columns.sma-col-3 .wp-block-column{flex-basis: 33%!important;padding: 10px;margin:5px} .wp-block-columns.sma-col-2 .wp-block-column{flex-basis: 43%!important;padding: 10px;margin:5px;border: 1px solid red;} .wp-block-columns.sma-col-2-3 .wp-block-column{flex-basis: 40%!important;padding: 10px;margin:5px;} .logos {margin-bottom: 0;padding-bottom: 0;padding-top: 0;} .logos img{max-width: 140px; margin: 0 auto;} /* Embed Youtube */ .wp-block-embed{overflow: hidden; border-radius: 20px; -webkit-mask-image: -webkit-radial-gradient(white, black);} .wp-block-embed.is-type-video, .wp-block-embed__wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .wp-block-embed.is-type-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .wp-block-column {padding-top: 25px;} /* --------------------------------------------------------------------------------------------------------------------------- */ /* @todo Share button /* --------------------------------------------------------------------------------------------------------------------------- */ .share-buttons svg {fill: #fff;width: 16px;height: 16px;} .share-twitter{background: #1da1f2;float:left;padding: 10px 30px 8px;text-align: center;} .share-linkedin{background: #1da1f2;float:left;padding: 10px 30px 10px;text-align: center;color: #fff!important;} .share-telegram{background: #6a64cfc4;float:left;padding: 10px 30px 10px;text-align: center;color: #fff!important;} .share-print{background: #FF8C20;float:left;padding: 10px 30px 10px;text-align: center;color: #ffff!important;} .share-copy{background: #3182d3;float:left;padding: 10px 30px 10px;text-align: center;color: #ffff!important;} .position-99999 {display: inline-block;position: absolute;top:-5355%;left: -1%;z-index: -999999999999;} .share-email{background: #848282;float:left;padding: 10px 30px 10px;text-align: center;color: #ffff!important;} .share-facebook {background: #3b5998;float:left;padding: 10px 30px 8px;text-align: center;} .share-twitter:hover{background: #73b0f2;} .share-linkedin:hover{background: #73b0f2;} .share-telegram:hover{background: #7d76e5c4;} .share-facebook:hover{background: #6886c6;} .share-print:hover {background: #f7a960;} .share-email:hover {background: #999999;} .share-copy:hover{background: #216fbe;} @media only screen and (max-width: 702px) and (min-width: 200px){ .share-twitter,.share-twitter,.share-linkedin,.share-telegram,.share-print,.share-copy,.share-email,.share-facebook {padding: 5px 15px 5px;} } @media only screen and (max-width: 998px) and (min-width: 703px){ .share-twitter,.share-twitter,.share-linkedin,.share-telegram,.share-print,.share-copy,.share-email,.share-facebook {padding: 5px 15px 5px;} } /* -------------------------------------------------------------------*/ /* @todo Preloader /* ------------------------------------------------------------------- */ /* @todo Bounce animation */ .bounce { animation: .7s down infinite alternate; -webkit-animation: .7s down infinite alternate; } @keyframes down{ 0%{transform:translateY(0px)} 100%{transform:translateY(20px)} } @-webkit-keyframes down{ 0%{-webkit-transform:translateY(0px)} 100%{-webkit-transform:translateY(20px)} } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: ' '; clear: both; height: 0; } /* ! Whatsapp */ .whatsapp{position:fixed;width:60px;height:60px;bottom:40px;right:40px;background-color:#25d366;border-radius:50px;text-align:center;font-size:30px;box-shadow:2px 5px 10px 0px rgba(0,0,0,0.30);z-index:100;} .whatsapp .my-float {position: absolute;top: 12px;left: 14px;background: url(img/whatsapp.svg) center center, no-repeat;background-size: 41px;width: 34px;height: 34px;} .whatsapp a{color:#fff} .whatsapp a:hover{color:#fff} .woocommerce-checkout .whatsapp{display:none} .woocommerce-cart .whatsapp{display:none} @media (max-width: 768px) { .whatsapp{bottom: 20px;right: 15px;padding: 0;height: 50px;width: 50px;} .whatsapp .my-float {position: absolute;top: 4px;left: 6px;background: url(img/whatsapp.svg) center center, no-repeat;background-size: 38px;width: 38px;height: 39px;} }