/*
Theme Name: Bopgun
Theme URI: 
Author: bopgun
Author URI: http://www.bopgun.com
Description: 
Version: 1.0.0
Text Domain: 
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}

textarea:focus, input:focus{outline: none;}
*:focus {outline: none;}

body {
	width: 100%;
	font-family: "myriad-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	line-height: 1.1;
	color: #234E6C;
}

h1,h2,h3,h4,h5,h6 {
	margin: 0 0 20px 0;
	font-family: "barlow-condensed", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
}

h1 {font-size: 98px;}
h2 {font-size: 48px;}
h3 {font-size: 28px;}
h4 {font-size: 24px;}
h5 {font-size: 20px;}
h6 {
	font-size: 16px;
	font-family: "myriad-pro", sans-serif;
	font-weight: 400;
	line-height: 1.2;
	text-transform: none;
}

.normal {font-weight: 400;}
.medium {font-weight: 500;}
.bold {font-weight: 700;}

p, li {
	font-size: 18px;
	line-height: 1.2;
}
p {margin: 0 0 20px 0;}

b, strong {font-weight: bold;}
i {font-style: italic;}
a {
	text-decoration: none;
	color: inherit;
}

.white {color: #FFFFFF;}
.yellow {color: #F0C80F;}

.wrapper {
	width: 100%;
	float: left;
	overflow: hidden;
}

.full-width {
	width: 100%;
	float: left;
	box-sizing: border-box;
}
.fixed-width {
	width: 1040px;
	margin: 0 auto;
	box-sizing: border-box;
}
.content {margin-top: 70px;}


/* Carousel */

.layouts ul.slick-dots {
	width: max-content;
	float: none;
	margin: 0 auto;
    margin-top: 30px;
    text-align: center;
}
.layouts ul.slick-dots li {    
	list-style: none !important;
	width: 10px;
    height: 10px;
    float: left;
    margin: 0 5px;
    cursor: pointer;
}
.layouts ul.slick-dots li button {
    width: 100%;
    height: 100%;
    padding: 0px;
    float: left;
    background: #79ABD7;
    border: 0px;
    color: transparent;
    border-radius: 100%;
}
.layouts ul.slick-dots li.slick-active button {background: #FFFFFF;}

/* /Carousel */


/* Transitions */

.transition {
	-moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
.transition-slow {
	-moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

/* /Transitions */


/* Header */

.header {
	height: 70px;
	padding: 0 70px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #FFFFFF;
	box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.10);
	z-index: 999;
}
.header .logo {
	width: 170px;
	float: left;
	margin: 5px 0 0 0;
}
.header .logo img {
	width: 100%;
	height: auto;
	float: left;
}

.header .top-menu {
	width: 600px;
	height: 100%;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.header .top-menu .menu-top-menu-container {height: 100%;}
.header .top-menu .menu {
	display: flex;
	align-items: center;
	height: 100%;
}
.header .top-menu .menu > li {
	display: flex;
	flex-direction: column;
	height: 100%;
	flex: 0 0 25%;
	max-width: 25%;
	text-align: center;
}
.header .top-menu .menu > li a {
 	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.header .top-menu .sub-menu-wrapper {
	opacity: 0;
    visibility: hidden;
    width: 100vw;
    padding: 0 0 20px 0;
    background-color: #FFFFFF;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.10);
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
}
.sub-menu-active .header .top-menu .sub-menu-wrapper {
	opacity: 1;
	visibility: visible;
}
.header .top-menu .sub-menu-wrapper .inside {
	width: 600px;
	margin: 0 auto;
}
.header .top-menu .sub-menu-wrapper .inside .sub-menu {
	width: 25%;
	float: right;
}

.header .side-menu {
	width: 400px;
	height: calc(100vh - 70px);
	margin: 0 auto;
	padding: 90px 70px;
	position: absolute;
	top: 70px;
	right: -410px;
	background-color: #FFFFFF;
	box-shadow: -10px 10px 10px 0 rgba(0, 0, 0, 0.10);
	overflow-y: auto;
	box-sizing: border-box;
}
.header.menu-active .side-menu {right: 0;}
.header .side-menu .menu > li {margin: 0 0 20px 0;}
.header .side-menu .menu .sub-menu {
	max-height: 0px;
	overflow: hidden;
	width: 100%;
	float: left;
	-moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}
.header .side-menu .menu li:hover .sub-menu {max-height: 240px;}

.header .menu .sub-menu {margin: 15px 0 5px 0;}
.header .menu .sub-menu li {margin: 0 0 10px 0;}
.header .menu .sub-menu li a {font-size: 17px;}
.header .menu > li > a {
	font-family: "barlow-condensed", sans-serif;
	font-size: 20px;
	font-weight: 500;
	text-transform: uppercase;
}
.header .menu li a {	
	-moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
.header .menu li a:hover,
.header .menu li.current_page_item {color: #F0C80F;}

.header .toggle {
	float: right;
	margin: 25px 0 0 0;
}

/* /Header */


/* Footer */

.footer .contact-form {
	padding: 20px 0;
	margin: 0 auto;
	background-color: #F0C80F;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
}
.footer .contact-form.destroy {
	opacity: 0;
	visibility: hidden;
}
.footer .contact-form .close {
	width: 30px;
	height: auto;
	margin: 0 auto;
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
	right: 35px;
	cursor: pointer;
}
.footer .contact-form .inside {
	display: flex;
	column-gap: 50px;
	padding: 0 100px;
	align-items: center;
}
.footer .contact-form .title {flex: 1;}
.footer .contact-form .title h3,
.footer .contact-form .title p {margin: 0 0 5px 0;}
.footer .contact-form .form {flex: 1;}
.footer .contact-form .form form button.frm_button_submit {
	width: 100%;
	padding: 10px 0;
	font-family: "barlow-condensed", sans-serif;
	background-color: #FFFFFF;
}
.footer .contact-form .telephone {
	display: flex;
	flex: 0 0 auto;
}
.footer .contact-form .telephone a {
	display: flex;
	align-items: center;
	column-gap: 20px;
}
.footer .contact-form .telephone a img {
	width: 20px;
	height: auto;
}
.footer .contact-form .telephone a p {margin: 0 auto;}

.footer .top {
	padding: 30px 0 10px 0;
	text-align: center;
	background-color: #4597D2;
}
.footer .top .inside {
	width: 600px;
	margin: 0 auto;
	position: relative;
}
.footer .top .inside .logo {
	width: 130px;
	height: auto;
	margin: 0 auto;
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
    left: -150px;
}
.footer .top .inside .gromit {
	width: 85px;
	height: auto;
	margin: 0 auto;
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
    right: -105px;
}

.footer .bottom {
	padding: 30px 0;
	background-color: #234E6C;
}
.footer.extra-padding .bottom {padding-bottom: 130px;}
.footer .bottom .row1 {
	display: flex;
	align-items: center;
  	justify-content: center;
	column-gap: 100px;
	margin: 0 0 30px 0;
}
.footer .bottom .row1 .logo {width: 300px;}
.footer .bottom .row1 .logo img {
	width: 100%;
	height: auto;
}
.footer .bottom .row1 .socials {
	display: flex;
	column-gap: 40px;
}
.footer .bottom .row1 .socials img {
	width: 30px;
	height: auto;
}
.footer .bottom .row2 {
	display: flex;
	align-items: center;
  	justify-content: center;
	column-gap: 100px;
}
.footer .bottom .row2 .descriptor {text-align: center;}
.footer .bottom .row2 .descriptor h6 {margin: 0 auto;}
.footer .bottom .row2 .menu {flex: 0 0 auto;}
.footer .bottom .row2 .contact {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}
.footer .bottom .row2 .contact .item {display: flex;}
.footer .bottom .row2 .contact .item a {
	display: flex;
	align-items: center;
	column-gap: 20px;
}
.footer .bottom .row2 .contact .item a img {
	width: 20px;
	height: auto;
}
.footer .bottom .row2 .contact .item a p {margin: 0 auto;}

/* /Footer */


/* Layouts */

.layouts ul,
.layouts ol {
	width: 100%;
	float: left;
	margin: 0 0 10px 0;
	text-align: left;
}
.layouts ul li,
.layouts ol li {margin: 0 0 10px 20px;}
.layouts ul li {list-style: disc;}
.layouts ol li {list-style: decimal;}

.layouts form button.frm_button_submit {font-family: "barlow-condensed", sans-serif;}

.layout.l-hero {
	height: 500px;
	text-align: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgba(35, 78, 108, 0.3);
	background-blend-mode: darken;
	position: relative;
}
.layout.l-hero.type-text {height: 400px;}
.layout.l-hero .curve {
	width: 100%;
	height: 130px;
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(../im/curve.png);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.layout.l-hero img {
	width: 100%;
	max-width: 400px;
	height: auto;
	margin: 0 auto;
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
}
.layout.l-hero h1 {
	margin: 0 auto;
	padding: 0 20px;
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
}

.layout.l-copy {
	margin: 0 0 30px 0;
	text-align: center;
}

.layout.l-grid {margin: 0 0 30px 0;}

.layout.l-grid .row.type-2 {
	display: flex;
	column-gap: 40px;
}
.layout.l-grid .row.type-3 {
	display: flex;
	column-gap: 40px;
    align-items: stretch;
}
.layout.l-grid .row.type-3 .left {
	flex: 1;
	display: flex;
}
.layout.l-grid .row.type-3 .right {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.layout.l-grid .row.type-3 .box {
	display: flex;
	flex-direction: column;
}
.layout.l-grid .row.type-3 .box .image {flex: 1;}
.layout.l-grid .row .box {flex: 1;}
.layout.l-grid .row .box .image {
	margin: 0 0 20px 0;
	aspect-ratio: 1.75 / 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgba(35, 78, 108, 0.3);
	background-blend-mode: darken;
	position: relative;
}
.layout.l-grid .row .box .image a {
	display: block;
	height: 100%;
}
.layout.l-grid .row .box .image a .caption {
	padding: 20px 20px 0 20px;
	margin: 0 auto;
	position: absolute;
	bottom: 0;
	left: 0;
}

.layout.l-online-store {
	margin: 0 0 30px 0;
	text-align: center;
}
.layout.l-online-store .stage {
	padding: 100px 50px;
	margin: 0 0 20px 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgba(35, 78, 108, 0.3);
	background-blend-mode: darken;
	position: relative;
}
.layout.l-online-store .stage .title {position: relative;}
.layout.l-online-store .stage .tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 20px;
	position: relative;
}
.layout.l-online-store .stage .tabs .tab {
	flex: 1;
	padding: 15px 20px;
	border-radius: 30px;
}
.layout.l-online-store .stage .tabs .tab h5 {margin: 0 auto;}
.layout.l-online-store .stage .tabs .tab:nth-child(1) {background-color: #234E6C;}
.layout.l-online-store .stage .tabs .tab:nth-child(2) {background-color: #74B443;}
.layout.l-online-store .stage .tabs .tab:nth-child(3) {background-color: #F0C80F;}
.layout.l-online-store .stage .tabs .tab:nth-child(4) {background-color: #8D4DA0;}
.layout.l-online-store .stage .tabs .tab:nth-child(5) {background-color: #BDD82F;}
.layout.l-online-store .stage .tabs .tab:nth-child(6) {background-color: #DF9C5C;}

.layout.l-logos {
	margin: 0 0 30px 0;
	text-align: center;
}
.layout.l-logos .logos img {
	width: auto;
	height: 80px;
	margin: 0 15px 20px 15px;
	display: inline-block;
}

.layout.l-logo-carousel {
	margin: 0 0 50px 0;
	text-align: center;
}
.layout.l-logo-carousel .carousel .title {margin: 0 0 30px 0;}
.layout.l-logo-carousel .carousel .item {
	width: 225px;
	height: 110px;
}
.layout.l-logo-carousel .carousel .item img {
	max-width: 100%;
	height: auto;
	float: left;
}
.layout.l-logo-carousel .carousel .next,
.layout.l-logo-carousel .carousel .previous {display: none;}

.layout.l-gallery {
	margin: 0 0 50px 0;
	text-align: center;
}
.layout.l-gallery .gallery {
	height: 270px;
	display: flex;
	column-gap: 10px;
}
.layout.l-gallery .gallery img {
	width: auto;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.layout.l-gallery .gallery img:nth-child(1) {width: 420px;}
.layout.l-gallery .gallery img:nth-child(2) {width: 180px;}
.layout.l-gallery .gallery img:nth-child(3) {width: 420px;}

.layout.l-testimonials {
	padding: 50px 0;
	margin: 0 0 50px 0;
	background-color: #4597D2;
}
.layout.l-testimonials .title {
	text-align: center;
	margin: 0 0 10px 0;
}
.layout.l-testimonials .carousel {padding: 0 80px;}
.layout.l-testimonials .carousel .item {
	display: flex;
	column-gap: 50px;
	align-items: center;
}
.layout.l-testimonials .carousel .item .image img {
	width: 250px;
	aspect-ratio: 1/1;
	object-fit: cover;
	object-position: center;
	border-radius: 100%;
}

.layout.l-contact-map {
	display: flex;
	margin: 0 0 50px 0;
	background-color: #4597D2;
}
.layout.l-contact-map .map {flex: 1;}
.layout.l-contact-map .map iframe {
	width: 100%;
	height: 100%;
	float: left;
}
.layout.l-contact-map .copy {flex: 1;}
.layout.l-contact-map .copy .inside {
	width: 520px;
	float: left;
	padding: 100px 0 80px 50px;
	box-sizing: border-box;
}

.layout.l-contact-form {	
	padding: 50px 0;
	margin: 0 0 50px 0;
	background-color: #4597D2;
}
.layout.l-contact-form .inside {
	display: flex;
	column-gap: 50px;
	align-items: stretch;
}
.layout.l-contact-form .form {
	flex: 1;
	text-align: center;
}
.layout.l-contact-form .image {
	flex: 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* /Layouts */


/* Burger */

.hamburger {
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible; 
}
.hamburger:hover {opacity: 1;}
.hamburger.is-active:hover {opacity: 1;}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {background-color: #234E6C;}
.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative; 
}
.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px; 
}
.hamburger-inner, 
.hamburger-inner::before, 
.hamburger-inner::after {
    width: 35px;
    height: 2px;
    background-color: #234E6C;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; 
}
.hamburger-inner::before, 
.hamburger-inner::after {
    content: "";
    display: block; 
}
.hamburger-inner::before {top: -10px;}
.hamburger-inner::after {bottom: -10px;}

/* Spin */
.hamburger--spin .hamburger-inner {
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin.is-active .hamburger-inner {
    transform: rotate(225deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* /Burger */