/*
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 1500PX 
-----------
*/
@media screen and (max-width: 1499px) {

h1 {font-size: 85px;}

/* Header */

.header {padding: 0 40px;}

/* Footer */

.footer .contact-form .inside {padding: 0 100px 0 40px;}

/* Layouts */

.layout.l-hero img {max-width: 350px;}

}


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

h1 {font-size: 75px;}

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

/* Header */

.header .top-menu {display: none;}

/* Layouts */

.layout.l-testimonials .carousel {padding: 0px;}

.layout.l-gallery .gallery img:nth-child(1),
.layout.l-gallery .gallery img:nth-child(3) {width: calc(35% - 10px) ;}
.layout.l-gallery .gallery img:nth-child(2) {width: 30%;}

.layout.l-contact-map .map {flex: 0 0 50%}
.layout.l-contact-map .copy {flex: 0 0 50%;}
.layout.l-contact-map .copy .inside {
	width: unset;
	padding: 100px 40px 80px 40px;
}


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

h1 {font-size: 65px;}
h2 {font-size: 44px;}

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

/* Header */

.header {padding: 0 20px;}

/* Footer */

.footer .contact-form .inside {
	padding: 0 20px;
	text-align: center;
	flex-direction: column;
}
.footer .contact-form .form {width: 100%;}
.footer .contact-form .close {
	top: 20px;
	right: 20px;
	transform: none;
}
.footer .contact-form .telephone {margin: 10px 0;}

.footer .top .inside {width: 65%;}

.footer .bottom .row1 .socials {column-gap: 20px;}
.footer .bottom .row2 {column-gap: 30px;}

/* Layouts */

.layout.l-hero img {max-width: 300px;}

.layout.l-grid .row.type-2,
.layout.l-grid .row.type-3 {column-gap: 20px;}

.layout.l-testimonials .carousel .item {column-gap: 30px;}

.layout.l-contact-map .copy .inside {padding: 100px 20px 80px 30px;}

.layout.l-contact-form .inside {column-gap: 40px;}

.layout.l-online-store .stage .tabs {column-gap: 10px;}
.layout.l-online-store .stage .tabs .tab {padding: 15px;}

}


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

/* Footer */

.footer .contact-form .form form .frm_form_field {margin: 0 0 10px 0;}

.footer .top .inside {width: 50%;}

.footer .bottom .row1 {
	flex-direction: column;
	gap: 20px;
}
.footer .bottom .row2 {
	flex-direction: column;
	gap: 20px;
	text-align: center;
}

/* Layouts */

.layout.l-grid .row.type-2, 
.layout.l-grid .row.type-3 {flex-direction: column;}

.layout.l-online-store .stage {padding: 50px 20px;}
.layout.l-online-store .stage .tabs {
	flex-wrap: wrap;
	gap: 10px;
}
.layout.l-online-store .stage .tabs .tab {flex: 0 0 calc(33.333% - 20px);}

.layout.l-testimonials .carousel .item .image img {width: 200px;}

.layout.l-contact-map .copy .inside {padding: 50px 20px 30px 30px;}

.layout.l-contact-form .form form button.frm_button_submit {
	width: 100%;
	margin-top: 10px !important;
}

}


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

h1 {font-size: 52px;}
h2 {font-size: 36px;}

p, li {font-size: 17px;}

/* Header */

.header .side-menu {
	width: 100vw;
	padding: 20px 20px 0 20px;
	right: -100vw;
}

/* Footer */

.footer .bottom .row1 .logo {width: 260px;}

.footer .top .inside .logo {
	width: 120px;
	left: -125px;
}
.footer .top .inside .gromit {
	width: 70px;
	right: -90px;
}

.footer .contact-form .title h3 {padding: 0 50px;}

/* Layouts */

.layouts ul.slick-dots {margin-top: 10px;}

.layout.l-hero img {max-width: 200px;}

.layout.l-contact-map {flex-direction: column;}
.layout.l-contact-map .copy .inside {padding: 30px 20px 10px 20px;}
.layout.l-contact-map .map iframe {height: 200px;}

.layout.l-contact-form .inside {flex-direction: column;}
.layout.l-contact-form .image {
	margin: 20px 0 0 0;
	aspect-ratio: 1.5 / 1;
}

.layout.l-gallery .gallery {
	height: auto;
	flex-direction: column;
	gap: 10px;
}
.layout.l-gallery .gallery img:nth-child(1), 
.layout.l-gallery .gallery img:nth-child(2),
.layout.l-gallery .gallery img:nth-child(3) {
	width: 100%;
	aspect-ratio: 2 / 1;
}

.layout.l-testimonials .carousel .item {
	text-align: center;
	flex-direction: column;
	gap: 20px;
}

.layout.l-logo-carousel .carousel .item {
	width: 205px;
	height: 100px;
}

}