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


/* 
-----------
BELOW 1920PX 
-----------
*/
@media screen and (max-width: 1919px) {

.header .stage {padding: 0 40px;}


/* 
-----------
BELOW 1320PX 
-----------
*/
@media screen and (max-width: 1319px) {

.fixed-width {
	width: 100%;
	padding-left: 40px;
	padding-right: 40px;
}

/* Footer */

.footer .stage {gap: 60px;}
.footer .stage .company {flex: 2.9;}
.footer .stage .navigation {flex: 1.75;}

/* Layouts */

.layouts .layout.l-copy-image .stage,
.layouts .layout.l-copy-image.style-split-background .stage {column-gap: 150px;}
.layouts .layout.l-copy-image.style-split-background .stage .copy {flex: 1;}
.layouts .layout.l-copy-image.style-split-background .stage .image img {aspect-ratio: 1/1;}
.layouts .layout.l-copy-image .stage .image .orange-square {left: -20px;}

}


/* 
-----------
BELOW 1024PX 
-----------
*/
@media screen and (max-width: 1023px) {

.fixed-width {
	padding-left: 20px;
	padding-right: 20px;
}

h1 {font-size: 52px;}
h2 {font-size: 34px;}
h3 {font-size: 22px;}
h4 {font-size: 19px;}

.cookie-banner .inside .stage {
	flex-direction: column;
	gap: 10px;
}
.cookie-banner .inside .stage .copy {padding-right: 30px;}
.cookie-banner .inside .stage .close {
	position: absolute;
	top: 25px;
	right: 40px;
}

/* Header */

.header .banner p {font-size: 15px;}

.header .stage {padding: 0 20px;}
.header .stage .navigation ul {gap: 30px;}

/* Footer */

.footer {padding: 50px 0;}
.footer .stage {
	flex-direction: column;
	gap: 40px;
}
.footer .stage .navigation ul.menu li {flex: 0;}

/* Layouts */

.layouts .layout.l-hero,
body.home .layouts .layout.l-hero {
	height: auto;
	padding: 150px 0;
}
.layouts .layout.l-hero a .arrow {bottom: 20px;}

.layouts .layout.l-copy-image .stage,
.layouts .layout.l-copy-image.style-split-background .stage {column-gap: 80px;}
.layouts .layout.l-copy-image.style-split-background {padding: 50px 0;}
.layouts .layout.l-copy-image.style-standard.type-reverse {padding: 50px 0;}
.layouts .layout.l-copy-image.style-overlap {padding: 100px 0;}
.layouts .layout.l-copy-image.style-overlap .stage .copy {flex: 1;}
.layouts .layout.l-copy-image.style-overlap .stage .image img {width: 120%;}
.layouts .layout.l-copy-image .stage .image .secondary {
	bottom: -10%;
	right: -10%;
}

.layouts .layout.l-copy-full-width-image {padding: 100px 0;}

.layouts .layout.l-cards .list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
}

.layouts .layout.l-form .form {
	width: 65%;
	padding: 50px 40px;
}
.layouts .layout.l-form .form .frm_radio label {padding: 10px 15px;}

}


/* 
-----------
BELOW 768PX 
-----------
*/
@media screen and (max-width: 767px) {

body.killscroll {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

.inner-width {
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
}

h1 {font-size: 48px;}
h2 {font-size: 32px;}
h3 {font-size: 20px;}
h4 {font-size: 18px;}

/* Header */

.header .banner {padding: 5px 0 0 0;}
.header .banner a {display: block;}
.header .banner p {
	font-size: 14px;
	line-height: 1.2;
}

.header .stage .navigation {
	opacity: 0;
	visibility: hidden;
	width: 100vw;
	height: calc(100vh - 75px);
	margin: 0 auto;
	text-align: center;
	position: absolute;
    top: 75px;
    left: 0;
    right: 0;
	background-color: rgba(138, 51, 0, 0.9);
}
.header.menu-active .stage .navigation {
	opacity: 1;
	visibility: visible;
}
.header .stage .navigation .menu-top-menu-container {
	width: 100%;
	display: flex;
}
.header .stage .navigation ul {
	width: 100%;
	flex-direction: column;
}
.header .stage .navigation ul li a {
	height: auto;
	color: #FFFFFF;
	font-size: 24px;
	margin: 0 0 5px 0;
}
.header .stage .navigation ul li:hover:after, 
.header .stage .navigation ul li.current-menu-item:after {height: 2px;}

.header .toggle {display: inline-block;}

/* Layouts */

.layouts .layout.l-copy-image .stage,
.layouts .layout.l-copy-image.type-reverse .stage {
	flex-direction: column;
	row-gap: 30px;
}
.layouts .layout.l-copy-image.style-overlap {background: linear-gradient(to bottom, #8A3300 65%, #EFEBE0 30% 100%);}
.layouts .layout.l-copy-full-width-image,
.layouts .layout.l-copy-image.style-overlap {padding: 50px 0;}
.layouts .layout.l-copy-image.style-overlap .stage .copy .button {float: left;}
.layouts .layout.l-copy-image.style-overlap .stage .image img {width: 100%;}
.layouts .layout.l-copy-image .stage .image {max-width: 400px;}
.layouts .layout.l-copy-image .stage .image .orange-square {
	width: 50%;
	bottom: -20px;
}
.layouts .layout.l-copy-image .stage .image .secondary {
	bottom: -20px;
    right: -20px;
}
.layouts .layout.l-copy-image .stage .copy {width: 100%;}

.layouts .layout.l-cards .list {margin: 0 0 30px 0;}

.layouts .layout.l-form .form {
	width: 100%;
	padding: 50px 30px 30px 30px;
}

}


/* 
-----------
BELOW 600PX 
-----------
*/
@media screen and (max-width: 599px) {

h1 {font-size: 42px;}
h2 {font-size: 28px;}
h3 {font-size: 18px;}

.content {margin-top: 60px;}

/* Header */ 

.header .banner a {display: inline-block;}

.header {height: 60px;}
.header .stage {height: 60px;}
.header .stage .logo {padding: 7.5px 0 0 0;}
.header .toggle {bottom: 10px;}
.header .stage .navigation {
	height: calc(100vh - 60px);
	top: 60px;
}
.header .stage .navigation ul {gap: 20px;}
.header .stage .navigation ul li a {font-size: 22px;}

/* Footer */

.footer .stage .navigation ul.menu li {
    flex: 0 0 50%;
    text-align: center;
}

/* Layouts */

.layouts .layout.l-hero, 
body.home .layouts .layout.l-hero {padding: 100px 0;}

.layouts .layout.l-cards .list {grid-template-columns: repeat(1, minmax(0, 1fr));}

.layouts .layout.l-form .form {padding: 30px 20px 20px 20px;}

.layouts .layout.l-logos .list {
	row-gap: 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}


}