/* =================================================================== 
 * Styleshout Demo Preview v4.1.0 Stylesheet
 * url: styleshout.com
 * 09-02-2020
 * ------------------------------------------------------------------- */


/* ------------------------------------------------------------------- 
 * ## minireset.css v0.0.6 | 
 *    MIT License | github.com/jgthms/minireset.css
 * ------------------------------------------------------------------- */
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}td:not([align]),th:not([align]){text-align:left}


/* ------------------------------------------------------------------- 
 * ## basic/base setup styles
 * ------------------------------------------------------------------- */
html {
	font-size: 10px;
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	background: black;
	font-family: "Inter", Sans-serif;
	font-size: 1.5rem;
	color: rgba(255, 255, 255 , .4);
	overflow: hidden;
	font-weight: normal;	
	word-wrap: break-word;

	-webkit-overflow-scrolling: touch;
	-webkit-text-size-adjust: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* links 
 * -------------------------- */
a, a:visited {
	color: rgba(255, 255, 255 , .35);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}
a:hover, a:focus, a:active {
	color: white;
	outline: 0;
}


/* ------------------------------------------------------------------- 
 * ## switcher
 * ------------------------------------------------------------------- */
#switcher {

}
#switcher ul {
	margin: 0;
	padding: 0;
}

/* left side 
 * -------------------------- */
.switcher__left {
	position: absolute;
	left: 0;
	top: 0;
}
.switcher__cta {
	display: inline-block;
	font-size: 1.4rem;
	height: 54px;
	padding: 0 2rem;
}
.switcher__cta a {
	color: white;
}

/* right side 
 * -------------------------- */
.switcher__right {
	position: absolute;
	right: 0;
	top: 0;
	padding-right: 4.5rem;
}

.switcher__download::before {
	content: "";
	display: inline-block;
	width: 40px;
	height: 54px;
	margin-right: 2px;
	float: left;
	background: url("../icons/download-icon.svg") no-repeat center center;
	opacity: .3;
	background-size: 22px 22px;
	transition: all 0.3s ease-in-out;
}
.switcher__download:hover::before {
	opacity: 1;
}
.switcher__download span {
	display: inline-block;
}

.switcher__sep {
	display: inline-block;
	width: 40px;
	height: 54px;
}
.switcher__sep span {
	display: inline-block;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: rgba(255, 255, 255 , .3);
	position: relative;
	left: 50%;
	top: -3px;
}
.switcher__sep span::before,
.switcher__sep span::after {
	content: "";
	background: inherit;
	height: 100%;
	width: 100%;
	position: absolute;
	border-radius: 50%;
}
.switcher__sep span::before {
	top: -8px;
}
.switcher__sep span::after {
	bottom: -8px;
}

.switcher__close {
	position: absolute;
	top: 12px;
	right: 18px;
	display: block;
	width: 30px;
	height: 30px;
	background: url("../icons/close-icon.svg") no-repeat center;
	opacity: .3;
	background-size: 26px 26px;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}
.switcher__close:hover {
	opacity: 1 !important;
}

/* MQ */
@media only screen and (max-width:600px) {
	.switcher__download::before {
		margin-right: -6px;
		margin-top: -1px;
	}
	.switcher__download span {
		display: none;
	}
}


/* ------------------------------------------------------------------- 
 * ## ads
 * ------------------------------------------------------------------- */
#ad-block {	
    z-index: 99999;
    display : -webkit-flex;
    display : flex;
    max-width: 520px;
    width: 84%;
    padding: 16px 36px 16px 16px;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    position: fixed;
    left: 50%;
    bottom: 12px;
}

.ad-block__thumb {
    -webkit-flex : 0 0 130px;
            flex : 0 0 130px;
    max-width: 130px;
    margin-right: 16px;
}
.ad-block__thumb img {
    vertical-align: bottom;
    border-radius: 4px;
}

.ad-block__text a {
    display: block;
    font-size: 15px;
    line-height: 1.467; /* 22px */
    color: #777777;
}
.ad-block__text .highlight {
    color: #252525;
    font-weight: 500;
}
.ad-block__text .sponsor-text {
    margin-top: 14px;
    display: block !important;
    color: #aaaaaa;
    font-size: 10px;
    line-height: 1.2; /* 12px */
    text-transform: uppercase;
    letter-spacing: .15em;
}

.ad-block__close {
	display: block;
	text-indent: 100%;
	overflow: hidden;
	width: 32px;
	height: 32px;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
	position: absolute;
	right: 4px;
	top: 4px;
}
.ad-block__close::before,
.ad-block__close::after {
	content: '';
	background-color: black;
	height: 2px;
	width: 14px;
	position: absolute;
	top: 15px;
	left: 9px;
}
.ad-block__close::after {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.ad-block__close::before {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* MQ */
@media only screen and (max-width:900px) {
    #ad-block {
        max-width: 420px;
    }
    .ad-block__thumb {
        -webkit-flex : 0 0 100px;
                flex : 0 0 100px;
        max-width: 100px;
    }
    .ad-block__text a {
        font-size: 14px;
    }
    .ad-block__text .sponsor-text {
        font-size: 9px;
    }
}
@media only screen and (max-width:600px) {
    .ad-block__thumb {
        -webkit-flex : 0 0 90px;
                flex : 0 0 90px;
        max-width: 90px;
    }
}
@media only screen and (max-width:500px) {
    .ad-block__thumb {
        display: none;
    }
}
@media only screen and (max-width:360px) {
    #ad-block {
        display: none;
    }
}


/* ------------------------------------------------------------------- 
 * ## iframe
 * ------------------------------------------------------------------- */
#iframe-wrap {
	height: 100%;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow: visible;
	position: relative;
	z-index: 50;
	transition: .3s ease-in-out !important;
}