/*
Theme Name: ICONIC21
Theme URI: 
Author: Fellow.
Author URI: iconic-21.com
Description: 
Version: 1.0.0
Text Domain: 
*/


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

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

/* Header */

.header .navigation .menu > li ul.sub-menu > li {margin: 30px 0 0 var(--gap-m);}
.header .button a {font-size: 18px;}

/* Footer */

.footer .top {
	display: flex;
	column-gap: var(--gap-xl);
}
.footer .bottom {
	display: flex;
	column-gap: var(--gap-xl);
}
.footer .bottom .legals,
.footer .bottom .links {flex: 1;}

/* Layouts */

.layout.l-top-games .title h5 {flex: 1;}
.layout.l-top-games .title h2 {min-width: unset;}

.layout.l-showcase-games .list .alm-listing .item .copy .arrow {
    width: 60px;
    height: 60px;
}

.layout.l-news.type-archive .sticky .copy {padding: var(--padding-l) var(--padding-s);}

.layout.l-gravity-scene .games .carousel .item .copy .arrow {
    width: 60px;
    height: 60px;
}

.l-top-games button.slick-prev {left: 100px;}
.l-top-games button.slick-next {right: 100px;}
.layout.l-top-games .stage .carousel .item .subtitle {max-width: 70%;}

/* Single Post */

.single-post .l-copy .related {
	padding: var(--padding-l) 40px;
	right: -40px;
}

}


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

:root {
	--gap-xs: 6px;
	--gap-s: 12px;
	--gap-m: 20px;
	--gap-l: 28px;
	--gap-xl: 36px;
	--padding-xs: 12px;
	--padding-s: 20px;
	--padding-m: 32px;
	--padding-l: 60px;
	--padding-xl: 92px;
}

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

h1 {font-size: 60px;}
h1.size-h2,
h2 {font-size: 44px;}
h3 {font-size: 36px;}
h4 {font-size: 22px;}

.content {margin-top: 100px;}

/* Header */

.header {
	top: 0;
	overflow: visible;
	background-color: var(--color-black);
}
.header .inside {
	padding: 0px;
	border-radius: 0px;
	box-shadow: none !important;
	position: static;
}
.header .navigation {
	opacity: 0;
	visibility: hidden;
	width: 100vw;
	height: calc(100vh - 100px);
	background-color: var(--color-black);
	position: absolute;
	top: 100px;
	left: 0px;
	-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 .navigation.active {
	opacity: 1;
	visibility: visible;
}
.header .navigation .menu {width: 40vw;}
.header .navigation .menu > li {
	width: 100%;
	padding: var(--padding-s) var(--padding-s) var(--padding-s) 32px;
	margin: 0 auto;
	box-sizing: border-box;
}
.header .navigation .menu > li .sub-menu-wrapper {
	opacity: 0;
	visibility: hidden;
	width: 60vw;
	height: 100%;
	padding: 0px;
	top: 0;
	left: auto;
	border-radius: 0;
	text-align: 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;
}
.sub-menu-active .header .navigation .menu > li .sub-menu-wrapper {
	opacity: 1;
	visibility: visible;
	top: 0;
}
.header .navigation .menu > li .sub-menu-wrapper:before {display: none;}
.header .navigation .menu > li ul.sub-menu {padding: 0px;}
.header .navigation .menu > li ul.sub-menu > li {
	width: 100%;
	float: left;
	padding: var(--padding-s) var(--padding-s) var(--padding-xs) var(--padding-s);
	margin: 0 auto;
}
.header .navigation li.menu-item-has-children > a::after {transform: rotate(270deg);}

.header .button {margin: 25px 72px 0 0;}

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

/* Footer */

.footer .top .navigation .column h5, 
.footer .top .navigation .column ul.menu li {font-size: 18px;}

/* Layouts */

.layout.l-hero.type-video {padding: 400px 0 var(--padding-xl) 0;}
.layout.l-hero.type-blur {min-height: 600px;}
.layout.l-hero.type-blur .stage {
	flex-direction: column;
    align-items: stretch;
    gap: 0px;
}
.layout.l-hero.type-gradient {padding: 100px 0 var(--padding-l) 0;}

.layout.l-prompt.type-video-gradient {padding: var(--padding-xl) 0 var(--padding-l) 0;}
.layout.l-prompt.type-video-gradient .stage {width: 100%;}
.layout.l-prompt.type-video-gradient .fade {background: linear-gradient(to right, var(--color-black) 0%, transparent 50%);}
.layout.l-prompt.type-video-gradient .copy {width: 100%;}

.layout.l-prompt.type-blur .stage {padding: var(--padding-m);}

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

.layout.l-how-we-work .list {grid-template-columns: repeat(2, minmax(0, 1fr));}

.layout.l-logos .list .item {
	width: 190px;
	height: 100px;
}

.layout.l-top-games .stage .carousel .item,
.layout.l-top-games .stage .slide-toolbar {width: 640px;}
.l-top-games button.slick-prev {left: 30px;}
.l-top-games button.slick-next {right: 30px;}

.layout.l-showcase-games .list .alm-listing {grid-template-columns: repeat(2, minmax(0, 1fr));}

.layout.l-news .list .alm-paging-content {grid-template-columns: repeat(2, minmax(0, 1fr));}
.layout.l-news.type-archive .sticky a {grid-template-columns: 1fr calc((100% - 24px) / 2);}

.layout.l-offices .copy {
	width: 50%;
	padding-right: var(--gap-xl);
}
.layout.l-offices .map {width: 50%;}

.layout.l-why-iconic {flex-direction: column;}
.layout.l-why-iconic .copy {
	width: 100%;
	padding: 0 32px;
}
.layout.l-why-iconic .copy .inside {
	width: 100%;
	padding: var(--padding-l) 0 var(--padding-s) 0;
}
.layout.l-why-iconic .stage {
	width: 100%;
	height: 400px;
}
.layout.l-why-iconic .stage .carousel .item {width: 100vw;}

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

.layout.l-feature-detail .stage {column-gap: var(--gap-xl);}

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

.layout.l-values .list .item .copy {padding: var(--padding-s) var(--padding-xs) 0 var(--padding-xs);}

.layout.l-form {padding: var(--padding-l) 0;}
.layout.l-form .stage {
	display: flex;
	flex-direction: column;
	gap: var(--gap-m);
}

.layout.l-form-resources .stage {
	display: flex;
	flex-direction: column;
	gap: var(--gap-m);
}

.layout.l-jobs .list .item {
	flex-wrap: wrap;
    row-gap: var(--gap-m);
}
.layout.l-jobs .list .item .subtitle {width: 100%;}

.layout.l-gravity-scene .logo-1 {transform: scale(0.6);}
.layout.l-gravity-scene .logo-2 {transform: scale(0.8);}
.layout.l-gravity-scene .logo-3 {transform: scale(1.3);}
.layout.l-gravity-scene .logo-4 {transform: scale(0.6);}
.layout.l-gravity-scene .logo-5 {transform: scale(1.2);}
.layout.l-gravity-scene .logo-6 {transform: scale(0.9);}
.layout.l-gravity-scene .logo-7 {transform: scale(1.1);}
.layout.l-gravity-scene .logo-8 {transform: scale(0.7);}

.layout.l-copy {padding: var(--padding-l) 0;}

/* Single Post */

.single-post .stage {padding: var(--padding-l) 0;}
.single-post .l-copy .fixed-width {
	flex-direction: column;
	padding: 0px;
}
.single-post .l-copy .related {
	width: 100%;
	padding: var(--padding-l) 32px;
	right: 0;
}
.single-post .l-copy .related .list {
	display: flex;
	column-gap: var(--gap-s);
}
.single-post.type-event .stage .fixed-width {
	display: flex;
	flex-direction: column;
	gap: var(--gap-xl);
}
.single-post .stage .image img,
.single-post.type-event .stage .image img {height: 400px;}

}


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

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

/* Header */

.header .toggle {right: 20px;}

.header .button {margin: 25px 64px 0 0;}

.header .navigation .menu > li {padding: var(--padding-s) var(--padding-s) var(--padding-s) 24px;}

/* Footer */

.footer .top {
	flex-direction: column;
	row-gap: var(--gap-m);
}
.footer .top .company {width: 100%;}
.footer .top .navigation {width: 100%;}

.footer .bottom {flex-direction: column;}
.footer .bottom .links p {margin: var(--gap-m) var(--gap-m) 0 0;}

/* Layouts */

.layout.l-hero {
	background-size: auto 300px;
    background-position: top center;
}
.layout.l-hero .fixed-width {padding: 0px;}
.layout.l-hero .stage {
	width: 100%;
	padding: var(--padding-m) 24px;
	margin: 300px 0 0 0;
	float: left;
	background-color: var(--color-black);
}
.layout.l-hero.type-video {padding: 0px;}
.layout.l-hero.type-video video {
	position: relative;
	float: left;
}
.layout.l-hero.type-video .stage {margin: 0;}
.layout.l-hero.type-gradient {padding: 0px;}
.layout.l-hero.type-gradient .fade,
.layout.l-hero.type-gradient .logomark {height: 300px;}
.layout.l-hero.type-blur {padding: 0px;}
.layout.l-hero.type-blur .stage {
	width: 100%;
	padding: var(--padding-m) 24px;
	backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    background: var(--color-black);
    border-radius: 0px;
}
.layout.l-hero.type-blur .stage .copy {max-width: 100%;}

.layout.l-prompt.type-blur .stage {flex-direction: column;}
.layout.l-prompt.type-blur .stage .title,
.layout.l-prompt.type-blur .stage .copy {width: 100%;}

.layout.l-top-games .stage .carousel .item,
.layout.l-top-games .stage .slide-toolbar {width: 500px;}
.layout.l-top-games .stage .slide-toolbar {
	flex-direction: column;
	row-gap: var(--gap-s);
}

.layout.l-showcase-games .filter .alm-filters {
	flex-wrap: wrap;
	row-gap: var(--gap-s);
}
.layout.l-showcase-games .filter #alm-filters-live_games li {margin: 0 var(--gap-m) var(--gap-s) 0;}
.layout.l-showcase-games .filter .alm-filters .alm-filter--sort, 
.layout.l-showcase-games .filter .alm-filters .alm-filter--search {flex: 1;}
.layout.l-showcase-games .filter .alm-filters .alm-filter--taxonomy {width: 100%;}

.layout.l-news .title {padding: 0px;}
.layout.l-news .title .button {position: relative;}

.layout.l-feature-detail .stage {
	flex-direction: column;
	row-gap: var(--gap-l);
}

.layout.l-jobs .list .item .description {width: 100%;}

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

/* Single */

.single-post .l-copy .related {padding: var(--padding-l) 24px;}

}


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

:root {
	--gap-xs: 4px;
	--gap-s: 8px;
	--gap-m: 16px;
	--gap-l: 24px;
	--gap-xl: 32px;
	--padding-xs: 8px;
	--padding-s: 16px;
	--padding-m: 24px;
	--padding-l: 40px;
	--padding-xl: 64px;
}

.fixed-width,
.inner-width {
	padding-left: 16px;
	padding-right: 16px;
}

.content {margin-top: 80px;}

h1 {font-size: 48px;}
h1.size-h2,
h2 {font-size: 40px;}
h3 {font-size: 32px;}
h4 {font-size: 20px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}

.button a, 
.button span {padding: 14px 20px 12px 20px;}

/* Consent */

.consent .stage {padding: var(--padding-l) var(--padding-m);}

aside#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p {
	font-size: 15px;
	margin: 0 0 20px 0;
}
aside#moove_gdpr_cookie_info_bar button.mgbutton,
.gdpr_lightbox .moove-gdpr-modal-content button.mgbutton {padding: 14px 20px 12px 20px !important;}

/* Header */

.header .inside {height: 80px;}

.header .logo {margin: 15px 0 0 0;}

.header .toggle {
	top: 16px;
	right: 12px;
}

.header .button {margin: 18px 56px 0 0;}
.header .button a {font-size: 16px;}

.header .navigation {
	height: calc(100vh - 80px);
	top: 80px;
}
.header .navigation .menu > li {padding: var(--padding-s) var(--padding-s) var(--padding-s) 16px;}

/* Footer */

.footer .top .navigation {
    flex-wrap: wrap;
    display: flex;
    row-gap: var(--gap-xl);
}
.footer .top .navigation .column:nth-last-child(1) {width: 100%;}

.footer .top .navigation .column ul.menu li {font-size: 17px;}

/* Layouts */

.layout.l-hero .stage,
.layout.l-hero.type-blur .stage {padding: var(--padding-m) 16px;}

.layout.l-products .list,
.layout.l-how-we-work .list,
.layout.l-feature-spotlight .list,
.layout.l-unique-tools .list,
.layout.l-values .list {display: block;}
.layout.l-products .list .slick-list,
.layout.l-how-we-work .list .slick-list,
.layout.l-feature-spotlight .list .slick-list,
.layout.l-unique-tools .list .slick-list,
.layout.l-values .list .slick-list {padding: 0px !important;}
.layout.l-products .list ul.slick-dots,
.layout.l-how-we-work .list ul.slick-dots,
.layout.l-feature-spotlight .list ul.slick-dots,
.layout.l-unique-tools .list ul.slick-dots,
.layout.l-values .list ul.slick-dots {float: none;}

.layout.l-top-games .stage .slide-toolbar .button {width: 100%;}
.layout.l-top-games .stage .carousel .item .subtitle {max-width: 60%;}
.l-top-games button.slick-prev {left: 10px;}
.l-top-games button.slick-next {right: 10px;}

.layout.l-logos .list .item {
	width: 170px;
	height: 90px;
}

.layout.l-top-games .title {flex-direction: column;}
.layout.l-top-games .stage .carousel .item, 
.layout.l-top-games .stage .slide-toolbar {width: 80vw;}
.layout.l-top-games .stage .carousel .item.prev-slide .subtitle,
.layout.l-top-games .stage .carousel .item.next-slide .subtitle {transform: translateY(-50%);}
.layout.l-top-games .stage .carousel .item .subtitle h2 {font-size: 32px;}

.layout.l-showcase-games .list .alm-listing {grid-template-columns: repeat(1, minmax(0, 1fr));}
.layout.l-showcase-games .filter #alm-filters-live_games li .field-radio {font-size: 19px;}
.layout.l-showcase-games .list .alm-listing .item .hero img {
	height: 240px;
	aspect-ratio: unset;
}

.layout.l-news.type-archive .sticky a {grid-template-columns: 1fr;}
.layout.l-news.type-archive .sticky .hero {height: 200px;}
.layout.l-news.type-archive .sticky .copy {padding: var(--padding-s);}

.layout.l-news .list .item .copy .excerpt,
.layout.l-news.type-archive .sticky .copy .excerpt {margin: 0 auto;}
.layout.l-news .list .item .copy h5,
.layout.l-news.type-archive .sticky .copy h3 {margin: 0 0 10px 0;}
.layout.l-news .list .alm-paging-content {grid-template-columns: repeat(1, minmax(0, 1fr));}
.layout.l-news.type-archive .filter .alm-filter--taxonomy li {margin: 0 var(--gap-s) var(--gap-s) 0;}

.layout.l-offices .copy {
	width: 100%;
	padding: 0 0 var(--gap-l);
}
.layout.l-offices .map {width: 100%;}

.layout.l-why-iconic .stage .carousel .item .subtitle {max-width: 200px;}

.layout.l-feature-detail .stage .copy .list {grid-template-columns: repeat(1, minmax(0, 1fr));}

.layout.l-jobs .list .item .details,
.layout.l-jobs .list .item .button {width: 100%;}

.layout.l-gravity-scene {margin-top: -150px;}
.layout.l-gravity-scene .games {height: 600px;}
.layout.l-gravity-scene .games .carousel .item .hero img {height: 320px;}
.layout.l-gravity-scene .logo-1 {
	transform: scale(0.6);
	left: 0;
}
.layout.l-gravity-scene .logo-2 {
	transform: scale(0.6);
	top: 670px;
    left: 5%;
}
.layout.l-gravity-scene .logo-3 {
	transform: scale(0.8);
	top: 790px;
	right: 5%;
}
.layout.l-gravity-scene .logo-4 {
	transform: scale(0.4);
	top: 220px;
    right: 0;
}
.layout.l-gravity-scene .logo-5 {
	transform: scale(1);
	left: 5%;
}
.layout.l-gravity-scene .logo-6 {
	transform: scale(0.7);
	left: 15%;
}
.layout.l-gravity-scene .logo-7 {
	transform: scale(0.9);
	right: 0;
}
.layout.l-gravity-scene .logo-8 {transform: scale(0.4);}

.layout.l-form .stage .form .frm_button_submit {padding: 14px 20px 12px 20px;}

/* Single */

.single-post .l-copy .related {padding: var(--padding-l) 16px;}
.single-post .l-copy .related .list {display: block;}
.single-post .l-copy .related .list .slick-list {padding: 0px !important;}
.single-post .l-copy .related ul.slick-dots {float: none;}
.single-post .l-copy .related .list .item {box-shadow: none;}

}