/*
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: 1920px) {

/* About */

.about-inside .spreads .fixed-width {
	width: 100%;
	float: left;
	padding: 0px;
}
.about-inside .spreads .inner {
    width: 120vw;
    left: -10vw;
    right: 0;
    margin: 0 auto;
}
.about-inside .spreads .inner .spread {
    width: 19%;
    margin: 0 0.5%;
}


}


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

.banner-ads {display: none;}


}


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

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

/* Header */

header .menu .item:nth-last-child(1) {display: none;}
header .menu .item:nth-child(7) {border-right: 1px solid #7981B2;}

header .search-bar {width: auto;}
header .search-bar form input[type=text] {display: none;}
header .search-bar form input[type=submit] {right: -10px;}

/* Footer */

footer .menu {width: 580px;}

/* Home */

.home-hero .carousel {
    width: 100vw;
    margin-left: -20px;
}
.home-hero .title h1 {margin: 30px 0 20px 0;}

.home-highlights {
    height: auto;
    padding: 0 0 40px 0;
}

.home-quote {
    height: auto;
    padding: 40px 0;
}
.home-quote .frame {
    height: auto;
    padding: 40px 80px 20px 80px;
    margin: 0 auto;
    background-size: 100% 100%;
}

.home-latest {padding: 70px 0 0 0;}

/* Latest issue */

.latest-issue-hero .cover {
    width: 40%;
    margin: 0 5% 0 0;
}
.latest-issue-hero .cover img {max-width: 100%;}
.latest-issue-hero .copy {
    width: 55%;
    padding: 0px;
}

.latest-issue-recent .list .item .image {padding: 30px 0;}
.latest-issue-recent .list .item .image img {height: 250px;}

/* Category */

.category-hero {padding: 40px 0;}
.category-hero .search-bar {margin: 10px 0 0 0;}

/* About */

.about-inside .spreads {padding: 0 0 20px 0;}
.about-inside .spreads .inner .spread {
    width: 30%;
    margin: 0 1.5%;
    margin-bottom: 20px;
}
.about-inside .spreads .inner .spread:nth-child(2n+1) {margin-top: 0px;}
.about-inside .spreads .inner .spread:nth-child(4) {margin-left: 18.5%;}

.about-inside .quote .frame {
    height: auto;
    padding: 40px 80px 20px 80px;
    margin: 0 auto;
    background-size: 100% 100%;
}


}


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

main {margin: 90px 0 0 0;}

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

/* Header */

header {
    height: 90px;
    background-image: none;
}
header .menu {
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: 100vh;
    padding: 20px 0 0 0;
    background-color: #283583;
    margin: 0 auto;
    position: absolute;
    top: 90px;
    left: 0;
}
header.active .menu {
    opacity: 1;
    visibility: visible;
}
header .menu .item {
    width: 100%;
    height: auto;
    border-left: 0px;
    border-bottom: 1px solid #7981B2;
}
header .menu .item:nth-child(7) {border-right: 0px;}
header .menu .item a {
    width: 100%;
    display: inline-block;
    float: left;
    padding: 10px 20px;
}
header .menu .item img {
    float: left;
    padding: 0px;
}
header .menu .item h4 {
    float: left;
    margin: 0 0 0 10px;
}

header .search-bar form input[type=text] {display: inline-block;}
header .search-bar form input[type=submit] {right: 0px;}

header .toggle {display: inline-block;}

/* Footer */

footer .story-house-egmont {
    width: 100%;
    text-align: center;
}

footer .menu {
    width: 500px;
    text-align: center;
}

footer .toxic {
    width: 100%;
    text-align: center;
}

/* Home */

.home-hero .title h1 {font-size: 30px;}

.home-quote .frame {padding: 20px 60px 0 60px;}
.home-quote .frame h2 {font-size: 26px;}

.home-highlights .list .item {width: 25%;}
.home-highlights .list .item:nth-last-child(1) {display: none;}

/* Posts */

.master-posts .item,
.master-posts .item:nth-child(5n+5) {
    width: 32%;
    margin: 0 2% 30px 0;
}
.master-posts .item:nth-child(3n+3) {margin: 0 0 40px 0;}
.home-latest .master-posts .item:nth-child(1n+4) {display: none;} 

/* Category */

.category-hero h1 {font-size: 36px;}

/* About */

.about-hero .title {padding: 20px 0 40px 0;}
.about-intro .left {margin-top: 50px;}
.about-intro .left h2 {font-size: 32px;}
.about-inside .banner {
    height: 30px;
    background-size: cover;
}
.about-inside .look-inside {padding: 30px 0;}
.about-inside .look-inside .carousel img {width: 600px;}

.about-inside .quote .frame {padding: 20px 60px 0 60px;}
.about-inside .quote .frame h2 {font-size: 26px;}

/* Latest issue */

.latest-issue-hero {padding: 60px 0 40px 0;}
.latest-issue-recent .list .item .image {padding: 20px 0;}
.latest-issue-recent .list .item .image img {height: 200px;}


}



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

.button-link h3 {font-size: 20px;}

/* Adverts */

.full-ad img.desktop,
.fixed-ad img.desktop {display: none;}
.full-ad img.mobile,
.fixed-ad img.mobile {display: inline-block;}

/* Home */

.home-hero .carousel .item img.desktop {display: none;}
.home-hero .carousel .item img.mobile {display: inline-block;}

.home-quote .frame {padding: 20px 20px 0 20px;}

.home-highlights .list .item h3 {font-size: 14px;}

/* Latest issue */

.latest-issue-hero {padding: 40px 0 20px 0;}
.latest-issue-hero .cover {
    width: 100%;
    margin: 0 0 20px 0;
}
.latest-issue-hero .cover img {max-width: 70%;}
.latest-issue-hero .copy {
    width: 100%;
    text-align: center;
}
.latest-issue-recent .list .item {
    width: 47.5%;
    margin: 0 5% 30px 0;
}
.latest-issue-recent .list .item:nth-child(2n+2) {margin: 0 0 30px 0;}
.latest-issue-recent .list .item .copy h2 {
    font-size: 22px;
    margin: 10px 0 5px 0;
}

/* Category */

.category-posts .latest .copy .button-link {margin-top: 0px;}

/* Posts */

.master-posts .alm-btn-wrap button, 
.master-posts .alm-btn-wrap button.alm-load-more-btn.done {font-size: 20px;}

/* About */

.about-intro .left {
    width: 100%;
    max-width: unset;
    text-align: center;    
}
.about-intro .right {
    width: 100%;
    margin-top: 20px;
    text-align: center;
}
.about-intro .right img {
    max-width: 80%;
    float: none;
}

.about-inside .look-inside .carousel img {width: 450px;}
.about-inside .quote .frame {padding: 20px 20px 0 20px;}


}



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

h1 {font-size: 26px;}
h2 {font-size: 22px;}
h3 {font-size: 20px;}
h5 {font-size: 17px;}

main {margin: 70px 0 0 0;}

/* Header */

header {height: 70px;}

header .logo {width: 145px;}

header .menu {top: 70px;}

header .search-bar {margin: 15px 0 0 0;}
header .search-bar form input[type=text] {display: none;}

header .toggle {margin: 15px 0 0 20px;}

/* Footer */

footer .menu {
    width: 100%;
    float: left;
    padding: 20px 0;
}
footer .menu .column,
footer .menu .column:nth-child(2) {
    width: 100%;
    margin: 0 auto;
    padding: 0px;
}

/* Home */

.home-hero .title h1 {
    font-size: 24px;
    margin: 20px 0;
}

.home-highlights {
    padding: 0 0 30px 0;
    background-size: cover;
    background-image: url(../im/home-highlights-bg-mobile.png);
}
.home-highlights .list .item {
    width: 50%;
    margin: 0 0 5px 0;
}
.home-highlights .list .item:nth-last-child(1) {
    float: none;
    margin: 0 auto;
    display: block;
    clear: both;
}
.home-highlights .title {padding: 60px 0 0 0;}

.home-latest .master-posts .item:nth-child(1n+3) {display: none;}

.home-quote {padding: 20px 0;}
.home-quote .frame h2 {font-size: 21px;}

/* Posts */

.master-posts .item, 
.master-posts .item:nth-child(3n+3),
.master-posts .item:nth-child(5n+5) {
    width: 47.5%;
    margin: 0 5% 20px 0;
}
.master-posts .item:nth-child(2n+2) {margin: 0 0 20px 0;}
.master-posts .item .tile .title {
    height: 50px;
    border: 7.5px solid #000000;
}
.master-posts .item .date h5 {font-size: 15px;}

/* Category */

.category-hero {padding: 30px 0;}
.category-hero h1 {font-size: 32px;}
.category-hero .search-bar {width: 100%;}

.category-posts {padding: 30px 0 10px 0;}
.category-posts .latest .image {
    width: 100%;
    margin: 0 0 10px 0;
}
.category-posts .latest .copy {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #707070;
}
.category-posts .latest .copy h3 {margin: 0 0 10px 0;}
.category-posts .latest .copy .button-link h3 {margin: 0 auto;}

/* Latest issue */

.latest-issue-hero {background-size: cover;}

.latest-issue-recent .list .item .image img {height: 180px;}
.latest-issue-recent .list .item .image .tag p {font-size: 18px;}

/* Posts */

.single-post {padding: 30px 0;}

/* About */

.about-hero {padding: 30px 0 0 0;}
.about-hero .title {
    font-size: 24px;
    padding: 20px 0 30px 0;
}

.about-intro {padding: 0 0 20px 0;}
.about-intro .left {margin-top: 30px;}
.about-intro .right {margin-top: 0px;}

.about-inside {padding: 40px 0;}
.about-inside .spreads {padding: 0 0 10px 0;}
.about-inside .look-inside {padding: 10px 0;}
.about-inside .look-inside .carousel img {width: 280px;}
.about-inside .look-inside .carousel button.slick-next {
    background-size: 80% auto;
    right: -10px;
}
.about-inside .look-inside .carousel button.slick-prev {
    background-size: 80% auto;
    left: -10px;
}
.about-inside .quote .frame h2 {font-size: 21px;}

}