/*
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) {}



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

.fixed-width {
	width: 100%;
	padding: 0 20px;
}
.fixed-width .carousel {
	width: 100vw;
    position: relative;
    left: -20px;
}

button.slick-prev {left: 10px;}
button.slick-next {right: 10px;}

/* Header */

.header .toggle,
.menu .close {left: 20px;}
.header .cta {right: 20px;}

}



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

.inner {
	width: 100%;
	padding: 0 20px;
}

h1, h2 {font-size: 48px;}
h3 {font-size: 44px;}
h4 {font-size: 26px;}
h5 {font-size: 21px;}

/* Blueprint */

.blueprint .l-splash .carousel .item {
	width: 100vw;
	padding: 0 20px;
	box-sizing: border-box;
}

.blueprint .l-gallery {padding: 60px 0 20px 0;}

.blueprint .l-contact .boxes {gap: 20px;}
.blueprint .l-contact.count-4 .boxes {grid-template-columns: repeat(2, minmax(0, 1fr));}

/* Header */

.menu .item p {font-size: 32px;}

/* Footer */

.footer .left {
    width: 100%;
    text-align: center;
}
.footer .left img {
	float: none;
	margin: 0 10px 20px 10px;
}
.footer .left .socials .item {float: none;}
.footer .right {
	width: 100%;
	text-align: center;
}

}



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

h1, h2 {font-size: 40px;}
h4 {font-size: 24px;}
h5 {font-size: 19px;}
h6 {font-size: 12px;}

p,
.blueprint .l-copy-and-image-collapsable ul li,
.alm-btn-wrap button.alm-load-more-btn, 
.alm-btn-wrap button.alm-load-more-btn:hover {font-size: 16px;}

.button p {
	font-size: 18px;
	padding: 5px 30px;
}

/* Header */

.menu .item p {font-size: 28px;}

/* Blueprint */

.blueprint .l-splash {padding: 40px 0;}
.blueprint .l-splash h2 {margin: 0 0 10px 0;}
.blueprint .l-splash .carousel .slick-dots li {
    width: 165px;
    height: 95px;
}

.blueprint .l-contact .boxes {
	width: 400px;
	float: none;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px 0;
	margin: 0 auto;
	background-color: rgb(255,255,255,0.8);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border-radius: 10px;
}
.blueprint .l-contact .boxes .box {
	padding: 0 20px;
    background-color: unset;
    backdrop-filter: unset;
    -webkit-backdrop-filter: unset;
}
.blueprint .l-contact .boxes .box .icon {display: none;}
.blueprint .l-contact .boxes .box .copy {        
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 10px 0;
}
.blueprint .l-contact .boxes .box .copy h4,
.blueprint .l-contact .boxes .box .copy p {margin: 0 auto;}
.blueprint .l-contact .boxes .box .copy img {display: inline-block;}
.blueprint .l-contact .boxes .box .button {margin: 0 auto;}

.blueprint .l-guides .filter select {font-size: 16px;}

.blueprint .l-community-spotlight .handles {
	flex-direction: column;
	gap: 20px;
}

.blueprint .l-gallery .images .alm-listing {grid-template-columns: repeat(2, minmax(0, 1fr));}

.blueprint .l-gallery-360 .stage .scrubber {height: 400px;}
.blueprint .l-gallery-360 .stage .fixed-width {padding: 0px;}
.blueprint .l-gallery-360 .stage .scrubber img {border-radius: 0px;}

}



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

h1, h2 {font-size: 32px;}
h2 br {display: inline-block;}
h3 {font-size: 28px;}
h4 {font-size: 18px;}
h5 {font-size: 16px;}
h6 {font-size: 10px;}

p,
.blueprint .l-copy-and-image-collapsable ul li,
.alm-btn-wrap button.alm-load-more-btn, 
.alm-btn-wrap button.alm-load-more-btn:hover {font-size: 15px;}

.content {margin-top: 80px;}

.wrapper-404 {padding: 60px 0 40px 0;}

.country-config .inside {padding: 30px 20px 20px 20px;}
.country-config .current {margin: 0 0 30px 0;}
.country-config .switch select {font-size: 14px;}
.country-config .switch p {font-size: 15px;}

button.slick-prev,
button.slick-next {
	width: 40px;
	height: 40px;
}

/* Header */

.header {height: 80px;}

.header .banner {height: 25px;}
.header .banner p {font-size: 14px;}

.header .logo {
	height: 45px;
	top: 30px;
}

.header .toggle {top: 32.5px;}
.header .toggle img {width: 30px;}

.header .cta {
	height: 40px;
	top: 32.5px;
}

.fixed-subscribe {bottom: 5px;}

.menu .close {
	top: 32.5px;
	left: 15px;
}
.menu .inside {padding: 70px 0;}
.menu .item p {font-size: 24px;}
.menu .item.subscribe {margin-top: 10px;}
.menu .country {margin: 20px 0 0 0;}

/* Footer */

.footer p {font-size: 13px;}

/* Blueprint */

.blueprint .asterisk {font-size: 13px;}

.blueprint .l-splash {padding: 30px 0;}
.blueprint .l-splash.style-image {padding: 40px 0 20px 0;}
.blueprint .l-splash .carousel .slick-dots li {
    width: 110px;
    height: 70px;
    margin: 0 5px;
}
.blueprint .l-splash .carousel .slick-dots {margin-top: -10px;}

.blueprint .l-gallery {padding: 40px 0 10px 0;}
.blueprint .l-gallery .title {margin: 0 0 10px 0;}
.blueprint .l-gallery .images .alm-listing {gap: 10px;}

.blueprint .l-gallery-360 {padding: 40px 0 0 0;}
.blueprint .l-gallery-360 .stage .hint {bottom: 30px;}
.blueprint .l-gallery-360 .stage .hint .icon {width: 100px;}
.blueprint .l-gallery-360 .stage .scrubber {height: 300px;}
.blueprint .l-gallery-360 .stage .scrub-bar {
	display: none;
	bottom: -30px;
}
.blueprint .l-gallery-360 .title {margin: 0 0 10px 0;}

.blueprint .l-banner-text {padding: 10px 20px;}

.blueprint .l-section-title {
	padding: 30px 0 0 0;
	border-width: 5px;
}
.blueprint .l-section-title h2 {margin: 0 0 10px 0;}

.blueprint .l-copy-and-image {padding: 40px 0 20px 0;}
.blueprint .l-copy-and-image.placeholder {padding: 20px 0 60px 0;}
.blueprint .l-copy-and-image.placeholder .image {aspect-ratio: 0.8/1;}
.blueprint .l-copy-and-image .title h3 {margin: 0 auto;}
.blueprint .l-copy-and-image .image.max-width {
	width: 100vw;
	position: relative;
	left: -20px;
}

.blueprint .l-copy-and-image-collapsable {padding: 40px 0 20px 0;}
.blueprint .l-copy-and-image-collapsable .title h3 {margin: 0 auto;}
.blueprint .l-copy-and-image-collapsable .image.max-width {
	width: 100vw;
	position: relative;
	left: -20px;
}
.blueprint .l-copy-and-image-collapsable .trigger {
	width: 40px;
	margin-top: 0px;
}

.blueprint .l-carousel {padding: 40px 0;}
.blueprint .l-carousel.less-padding {padding: 30px 0 30px 0;}
.blueprint .l-carousel .carousel .item {
	width: 100vw;
	max-width: 400px;
	padding: 0 20px;
	box-sizing: border-box;
}
.blueprint .l-carousel .title {margin: 0 0 10px 0;}
.blueprint .l-carousel .outro p,
.blueprint .l-carousel .outro h6 {margin: 0 auto;}
.blueprint .l-carousel .carousel .item .zoom {right: 5px;}

.blueprint .l-scroller {padding: 40px 0;}

.blueprint .l-journey {padding: 40px 0 20px 0;}
.blueprint .l-journey .list {padding: 10px 0 0 0;}

.blueprint .l-banner {height: 60px;}

.blueprint .l-divider {
	height: 20px;
	margin-top: -10px;
	margin-bottom: -10px;
}

.blueprint .l-howitworks {padding: 40px 0 20px 0;}
.blueprint .l-howitworks .list {column-gap: 10px;}

.blueprint .l-tv-advert {padding: 40px 0;}

.blueprint .l-tutorials {padding: 40px 0 20px 0;}
.blueprint .l-tutorials .list .item {
	padding: 0 0 20px 0;
	border-bottom: 1px solid #000000;
}

.blueprint .l-guides {padding: 40px 0;}
.blueprint .l-guides .list .item {
	width: 230px;
    margin: 0 auto;
    float: none;
}
.blueprint .l-guides .list .item .card {border: 1px solid #4A4A4A;}
.blueprint .l-guides .list .item .card .image {width: 100%;}
.blueprint .l-guides .list .item .card .copy {
	width: 100%;
	padding: 20px;
}
.blueprint .l-guides .filter select {font-size: 15px;}

.blueprint .l-faqs {padding: 40px 0 30px 0;}
.blueprint .l-faqs .answer li, 
.blueprint .l-faqs .answer p {font-size: 15px;}
.blueprint .l-faqs .list .section {margin: 0 auto;}
.blueprint .l-faqs .list .section .inside {margin: 0 0 10px 0;}
.blueprint .l-faqs .list .section .section-title .plus {top: 0;}
.blueprint .l-faqs .list .item {padding: 10px 0 0 0;}
.blueprint .l-faqs .list .item .question p {margin: 0 0 10px 0;}

.blueprint .l-trustpilot {padding: 15px 0 10px 0;}

.blueprint .l-contact {padding: 40px 0;}
.blueprint .l-contact .title {margin: 0 0 10px 0;}
.blueprint .l-contact .boxes {width: 300px;}

.blueprint .l-community-spotlight {padding: 40px 0 20px 0;}
.blueprint .l-community-spotlight .carousel {margin: 0 0 20px 0;}
.blueprint .l-community-spotlight .carousel .item {
	width: 90vw;
	max-width: 300px;
}
.blueprint .l-community-spotlight .carousel .item .label {padding: 5px 10px;}
.blueprint .l-community-spotlight .carousel .item .label p {font-size: 15px;}
.blueprint .l-community-spotlight .carousel .item .play img {width: 90px;}
.blueprint .l-community-spotlight .title {margin: 0 0 10px 0;}

.blueprint .l-buying-options {padding: 40px 0;}
.blueprint .l-buying-options .carousel .item {
	width: 80vw;
	max-width: 400px;
	padding: 0 10px;
	margin: 0 auto;
	box-sizing: border-box;
}
.blueprint .l-buying-options .title {margin: 0 0 10px 0;}

/* Overrides */

#premium.l-carousel .carousel::before {
	width: 80px;
	height: 80px;
	top: 0px;
	right: 10px;
	left: auto;
}

}


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

.blueprint .l-splash .carousel .slick-dots li {
    width: 100px;
    height: 60px;
}

}


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

.blueprint .l-splash .carousel .slick-dots li {margin: 0 2.5px;}

}