/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

:root{
    --black: #272727;
    --white: #fff;
    --red: #E4261B;
    --blue: #325EB5;
    --yellow: #F9DE2A;
    --grey: #F3F3F3;
}

.border-bottom {position:relative; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), 0% 100%);}
.border-bottom:after {content:""; position:absolute; background:var(--black); left:0; right:0; bottom:0; height:80px; transform:translateY(0%); z-index: 1; clip-path: polygon(0 calc(100% - 16px), 100% 0, 100% 16px, 0% 100%);}

.border-bottom-reverse {position:relative; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% calc(100% - 64px));}
.border-bottom-reverse:after {content:""; position:absolute; background:var(--black); left:0; right:0; bottom:0; height:80px; transform:translateY(0%); z-index: 1; clip-path: polygon(0 16px, 0 0, 100% calc(100% - 16px), 100% 100%);}

.half-bg-grey {background: linear-gradient(360deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, var(--grey) 50%, var(--grey) 100%) !important;}
.half-bg-grey.reverse-bg {background: linear-gradient(360deg, var(--grey) 0%, var(--grey) 50%, rgba(0,0,0,0)50%, rgba(0,0,0,0) 100%) !important;}

.fusion-accordian .fusion-panel {border-width: 2px !important;}
.fusion-accordian .fusion-toggle-icon-right .panel-heading a .fusion-toggle-icon-wrapper {transition:.3s}
.fusion-accordian .fusion-toggle-icon-right .panel-heading a.active .fusion-toggle-icon-wrapper {transform:rotate(180deg)}

/* Buttons */
.buttons-wrapper {display:flex; gap:8px; flex-wrap: wrap;}
.button {padding:15px 30px; line-height:1; border:solid var(--black) 8px; text-decoration: none !important; background:var(--red); color:var(--white); font-size:18px;}
.button:hover {background:var(--yellow); color:var(--black);}

.button.layout-3,
.button.blue {background:var(--blue); color:var(--white)}
.button.layout-3:hover,
.button.blue:hover {background:var(--red); color:var(--white)}

.button.layout-1,
.button.yellow {background:var(--yellow); color:var(--black)}
.button.layout-1:hover,
.button.yellow:hover {background:var(--blue); color:var(--white)}

/* Flyout menu */
.hamburger-wrapper {width:110px; height:100px; display:flex; align-items: center; justify-content: center; position:relative; border:solid 16px var(--black); background:#fff; z-index: 99999;}
.hamburger .line{width: 50px;height: 8px;background-color: var(--black);display: block;margin: 6px auto;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.hamburger:hover{cursor: pointer;}
.flyout-active .hamburger {-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;-webkit-transition-delay: 0.6s;-o-transition-delay: 0.6s;transition-delay: 0.6s;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
.flyout-active .hamburger .line:nth-child(2){width: 0px;}
.flyout-active .hamburger .line:nth-child(1),
.flyout-active .hamburger .line:nth-child(3){-webkit-transition-delay: 0.3s;-o-transition-delay: 0.3s;transition-delay: 0.3s;}
.flyout-active .hamburger .line:nth-child(1){-webkit-transform: translateY(14px);-ms-transform: translateY(14px);-o-transform: translateY(14px);transform: translateY(14px);} 
.flyout-active .hamburger .line:nth-child(3){-webkit-transform: translateY(-14px) rotate(90deg);-ms-transform: translateY(-14px) rotate(90deg);-o-transform: translateY(-14px) rotate(90deg);transform: translateY(-14px) rotate(90deg);}

.flyout-wrapper {position:fixed; left:-5px; top:0; bottom:0; right:-5px; display:flex; opacity:0; visibility: hidden; pointer-events: none; transition:.3s; z-index: 9999; border:solid var(--black); border: solid var(--black); border-top-width: 16px;border-bottom-width: 16px;}
.flyout-wrapper .flyout-left {height:100%; width:calc(50% + 200px); padding: 16px; display:flex; justify-content: flex-end; align-items: center; background:var(--blue); border-right:solid 8px var(--black); transition:.3s; transform:translateX(calc(-100% - 16px));}
.flyout-wrapper .flyout-right {height:100%; width:calc(50% - 200px); padding:16px; display:flex; justify-content:flex-start; align-items:center; background:var(--yellow); border-left:solid 8px var(--black); transition:.3s; /*transition-delay: .3s;*/ transform:translateX(calc(100% + 16px));}
.flyout-active .flyout-wrapper .flyout-left {transform:translateX(0)}
.flyout-active .flyout-wrapper .flyout-right {transform:translateX(0)}
.admin-bar .flyout-wrapper {top:var(--adminbar-height);}
.flyout-active .flyout-wrapper {opacity:1; visibility: visible; pointer-events: all;}

.flyout-wrapper .flyout-left > div {width: calc(var(--site_width) / 2 - 24px + 200px); display:flex; justify-content: center;}
.flyout-wrapper .flyout-left > div ul {padding:0px; margin:0; list-style:none;}
.flyout-wrapper .flyout-left > div ul li a {font-family:'nove'; font-size:90px; color:var(--white)}
.flyout-wrapper .flyout-left > div ul li.current_page_item a,
.flyout-wrapper .flyout-left > div ul li a:hover {color:var(--yellow)}

.flyout-wrapper .flyout-right > div {width: calc(var(--site_width) / 2 - 24px - 200px); display:flex; flex-direction: column;  padding-left:80px;}
.flyout-wrapper .flyout-right > div img {max-width:300px; border: solid var(--black) 8px}
.flyout-wrapper .flyout-right > div .menu-socials {display:flex; gap:16px; font-size:32px; margin-top:24px}
.flyout-wrapper .flyout-right > div .menu-socials a{transition:.3s;}
.flyout-wrapper .flyout-right > div .menu-socials a:hover {color:var(--blue); transform:scale(1.2)}

.contact-info {display:flex; flex-direction: column; line-height: 2;}
.contact-info span,
.contact-info a {display:flex; gap:12px; align-items: flex-start; text-decoration: none !important;}
.contact-info span i,
.contact-info a i {line-height:2}
.contact-info a span {text-decoration: underline !important;}

.contact-info a:hover {color:var(--blue)}

/* Titlebar */
.titlebar-wrapper {width:100%; display:flex; align-items: center; justify-content: center; padding:0 16px; background:var(--blue); border-top:solid 16px var(--black); border-bottom:solid 16px var(--black); overflow:hidden; position:relative;}
.titlebar-wrapper:before {content:""; position:absolute; left:0; top:0; bottom:0; right:0; background-image:url('images/dots.webp'); background-size:cover}
.titlebar-wrapper .titlebar-container {width:100%; max-width:var(--site_width); display:flex; justify-content: center;}
.titlebar-wrapper .titlebar-container .titlebar-content {max-width:1100px; width: 100%; display:flex; align-items: flex-start; justify-content:center; flex-direction: column; position:relative; min-height:800px;}
.titlebar-wrapper .titlebar-container .titlebar-content h1 {max-width:800px; position: relative; z-index: 1; color:#fff; margin-top:0px}
.titlebar-wrapper .titlebar-container .titlebar-content p {max-width:500px; position: relative;  z-index: 1; color:#fff;}
.titlebar-wrapper .titlebar-container .titlebar-content img {position:absolute; right:0; bottom:-1px;}
.titlebar-wrapper .titlebar-container .titlebar-content .buttons-wrapper {margin-top:24px;}

/* Oblique menu */
.oblique-menu {height:150px; display:flex; margin-top:-16px;}
.oblique-menu .item {width:100%; background:var(--black); color:#fff; position:relative; }
.oblique-menu .item > div {position:absolute; left:16px; top:16px; right:16px; bottom:16px; padding:32px; display:flex; align-items: center; justify-content: space-between;}
.oblique-menu .item > div span {font-family: 'nove'; font-size:20px;  word-spacing:9999999px}
.oblique-menu .item > div i {font-size:32px}

.oblique-menu .item:nth-child(1) {clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 100%, 0% 100%); position:relative; z-index: 6;}
.oblique-menu .item:nth-child(1) > div {clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 100%, 0% 100%); background:var(--yellow); color:var(--black)}

.oblique-menu .item:nth-child(2) {clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0% 100%); position:relative; z-index: 5; margin-left:-40px; }
.oblique-menu .item:nth-child(2) > div {clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0% 100%); background:var(--blue);}

.oblique-menu .item:nth-child(3) {clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 100%, 0% 100%); position:relative; z-index: 4; margin-left:-40px;}
.oblique-menu .item:nth-child(3) > div {clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 100%, 0% 100%); background:var(--red); }

.oblique-menu .item:nth-child(4) {clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 100%, 0% 100%); position:relative;z-index: 3; margin-left:-40px}
.oblique-menu .item:nth-child(4) > div {clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 100%, 0% 100%); background:var(--yellow); color:var(--black)}

.oblique-menu .item:nth-child(5) {clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0% 100%); position:relative; z-index: 2; margin-left:-40px;}
.oblique-menu .item:nth-child(5) > div {clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0% 100%); background:var(--blue); }

.oblique-menu .item:nth-child(6) {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); position:relative; z-index: 1; margin-left:-40px}
.oblique-menu .item:nth-child(6) > div {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); background:var(--red); }

.oblique-menu.before {position: absolute;right: calc(100% - 1.92% - 16px);top: 0;width: var(--site_width);}
.oblique-menu.after {position: absolute;left: calc(100% - 1.92% - 16px);top: 0;width: var(--site_width);}

/* 3 oblique columns */
.two-color-bg {background: linear-gradient(90deg, var(--yellow) 0%, var(--yellow) 50%, var(--red) 50%, var(--red) 100%) !important;}

.oblique-column {background:var(--black);}
.oblique-column .fusion-column-wrapper{position:relative}
.oblique-column:before {content:""; position:absolute; left:16px; top:0; right:16px;; bottom:0;}

.oblique-column.column-1 {clip-path: polygon(24px 0, 100% 0, calc(100% - 24px) 100%, 0% 100%); z-index: 3 !important;}
.oblique-column.column-1:before {background:var(--red); clip-path: polygon(24px 0, 100% 0, calc(100% - 24px) 100%, 0% 100%);}

.oblique-column.column-2 {margin:0 -40px}
.oblique-column.column-2:before {background:var(--blue)}

.oblique-column.column-3 {clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 24px 100%); z-index: 3 !important;}
.oblique-column.column-3:before {background:var(--yellow); clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 24px 100%)}

/* Reviews */
.swiper {max-width:100%; width:100%;}

.swiper#reviews .swiper-wrapper {align-items: center;}
.swiper#reviews .single {display:flex; align-items: center; background-size:100% 100%; background-position: center; background-repeat: no-repeat; text-align: center;}
.swiper#reviews .single .review-content {display:flex; align-items: center; min-height:320px;}

.swiper#reviews .single.layout-1 {background-image:url(images/review-layout-1.svg)}
.swiper#reviews .single.layout-1 .review-content {padding:10% 20% 30% 15%}

.swiper#reviews .single.layout-2 {background-image:url(images/review-layout-2.svg)}
.swiper#reviews .single.layout-2 .review-content {padding:10% 20% 20% 10%}

.swiper#reviews .single.layout-3 {background-image:url(images/review-layout-3.svg)}
.swiper#reviews .single.layout-3 .review-content {padding:20% 15% 30% 23%}

.swiper#reviews .single.layout-4 {background-image:url(images/review-layout-2.svg)}
.swiper#reviews .single.layout-4 .review-content {padding:10% 20% 20% 10%}

.quote-1 {display:inline-block; position:relative; transform:translateY(-50%); margin-right:8px;}
.quote-2 {display:inline-block; position:relative; transform:translateY(50%); margin-left:8px;}

/* Contact */
.contact-column {background:var(--black); position:relative; clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 100%, 0% 100%); margin-left:-128px; z-index: 3 !important}
.contact-column.contact-page {margin-left:0;}
.contact-column:before {content:""; position:absolute; background:var(--yellow); left: 16px; top:16px; right:16px; bottom:16px; clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 100%, 0% 100%);}
.contact-column .fusion-column-wrapper {position:relative}

/* Logos */
.swiper#logos {overflow:hidden;}
.swiper#logos .single {display:flex; align-items: center; justify-content: center;}
.swiper#logos .single img {max-height:100px}

.swiper#logos > .swiper-wrapper {transition-timing-function : linear;}

/* Blogs */
.swiper#blogs .single {max-width:620px; background:var(--black); position:relative; user-select: none;}
.swiper#blogs .single:before {content:""; position:absolute; left:16px; top:0; bottom:0; right:16px;}
.swiper#blogs .single > div {display:flex; flex-direction: column; align-items:center; padding:80px; text-align:center; transition:.3s; position:relative}
.swiper#blogs .single > div img {border:solid 16px var(--black); max-width:350px}

.swiper#blogs .single.layout-1 {z-index: 3; clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0% 100%);}
.swiper#blogs .single.layout-1:before {background:var(--red); clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0% 100%); left:0;}
.swiper#blogs .single.layout-1 > div h3,
.swiper#blogs .single.layout-1 > div p {color:#fff;}

.swiper#blogs .single.layout-2 {z-index:2; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 100%, 0% 100%); margin-left:-40px;}
.swiper#blogs .single.layout-2:before {background:var(--blue);clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 100%, 0% 100%)}
.swiper#blogs .single.layout-2 > div h3,
.swiper#blogs .single.layout-2 > div p {color:#fff;}

.swiper#blogs .single.layout-3 {z-index:1; margin-left:-40px;}
.swiper#blogs .single.layout-3:before {background:var(--yellow)}

/* Contact */
.contact-titlebar:after {content:""; position:absolute; right:calc(50% - (var(--site_width) / 2)); bottom:0; width:612px; height:977px; background-image:url(images/contact-bg.webp); background-size: contain; background-repeat: no-repeat;}

#main .wpforms-container {margin:0 !important; max-width:500px}
#main .wpforms-container button {padding:15px 30px; height:auto; border-radius:0; box-shadow: none; line-height:1; border:solid var(--black) 8px; text-decoration: none !important; background:var(--red); color:var(--white); font-size:18px;}
#main .wpforms-container button:hover {background:var(--yellow); color:var(--black);}
#main .wpforms-container button:after {display:none;}

#main .wpforms-container input,
#main .wpforms-container textarea {border-radius:0 !important; resize:none; border: solid var(--black) 8px;}

#main .wpforms-container input {height:60px;}
#main .wpforms-container textarea {height:180px}