/* CSS Document */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding: 62px;
}

body {
	margin:0;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	text-align:center;
    color:  white;
	background-color: #3a595b;
}

header {
    background-color: #101010;
    text-align: center;
    position: fixed;
    z-index: 200;
    width: 100%;
    top: 0;
}

nav {
    position: absolute;
    text-align: center;
    top: 100%;
    left: 0;
    background-color: #101010;
    width: 100%;
}

nav a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    text-transform: uppercase;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    margin-bottom: 1em;
    margin-left: 0.5em;
}

nav a:hover, nav a:focus {
	color: #efb274;
}

.logo_txt {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 1.3rem;
    text-align: left;
	color: #efb274;
	margin: 0.4em;
    float: left;
}

.logo_part2 {
	color:#efb274;
}

.logo_txt a {
	color: #efb274;
	text-decoration: none;
}

.logo_part2 a {
	color:#efb274;
}

.logo_dash {
    color: white;
}

.scrolled_header {
	background-color: #101010;
}

.nav-toggle {
    display: none;
}

.nav-toggle-label {
    position: absolute;
    top: 0;
    font-size: 1.8rem;
    color: white;
    left: 48%;
    display: inline-block;
    cursor: pointer;
}

.menu_hidden {
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 100ms ease-in-out;
}

.menu_hidden a {
    opacity: 0;
    transition: opacity 150ms ease-in-out;
}

.menu_visible {
    transform: scale(1, 1);
}

.menu_visible a {
    opacity: 1;
    transition: opacity 250ms ease-in-out 100ms;
}

.button_invisible {
    display: none;
}

#hidemenu_button {
    font-size: 1.8rem;
}

section::after {
	content: '';
	display: block;
	clear: both;
}

.text-block {
    color: white;
    margin-top: 1em;
    text-align: left;
    padding: 1em;
}

.text-block a {
    color: white;
}

.text-block a:hover {
    color: #efb274;
}

.button {
	display:inline-block;
	font-size: 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
	border-width: 2px;
	border-style: solid;
	padding: 0.5em 1.7em;
}

.topjoin_button {
    display: inline-block;
    position: absolute;
    right: 0;
    margin: 0.5em;
}

.button-menu {
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.4em 1.3em;
	border: none;
    color: white;
	background: #efb274;
	-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.button-accent {
	color: #efb274;
	border-color: #efb274;
	font-weight: 600;
}

.button-accent:hover, .button-accent:focus{
	background: #efb274;
	color: white;
}

.button-small {
	font-size: 0.8rem;
	font-weight: 600;
	background-color: #3a595b;
}

.button_big {
	color: white;
	border-color: white;
	background-color: #efb274;
	font-weight: 600;
	font-size: 1.6rem;
}

.button_big:hover, .button_big:focus {
	border-color: white;
	background-color: transparent;
}

.button-simple {
	color: white;
	border-color: #efb274;
	background-color: #efb274;
	font-weight: 600;
	font-size: 0.8rem;
}

.button-simple:hover {
	background-color: white;
	color: #efb274;
}

.button_block {
	margin-bottom: 3em;
}

.button-simple_r {
	margin-left: 1em;
	padding: 0.5em 2.9em;
}

.button-menu:hover {
	color: #3a595b;
}

.buttons_block {
	text-align: center;
	padding: 1em;
}

.tterms {
	text-align: left;
}

.first_block {
	margin-top: 3em;
}

.text_block {
	text-align: left;
}

.text_block a {
	color: white;
	text-decoration: underline;
}

.text_block a:hover {
	text-decoration: none;
}

.main_block {
	margin: 2em 1em 3em;
	padding: 1em;
}

.top_text_block {
	margin-top: 4em;
}

/*===============*/
.age_check_warning {
    color: white;
	text-align: center;
	padding: 1em;
	margin: 6em 0.4em 3em;
	max-width: 50em;
	background-color: #202025;
}

.button_agecheck {
	display: inline-block;
	color: white;
	border-color: white;
    font-size: 1.6rem;
	font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    border-width: 2px;
    border-style: solid;
	background-color: #efb274;
	padding: 0.4em 1.5em;
	margin-bottom: 1.6em;
	cursor: pointer;
}

.button_agecheck:hover {
	background-color: #202025;
}

.agewarning_simple_buttons_block {
	margin: 3em 0.2em 2em;
}

.agew_button_simple {
	display: inline-block;
	color: white;
	border-color: white;
    font-size: 0.7rem;
	font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    border-width: 2px;
    border-style: solid;
	background-color: #202025;
	padding: 0.5em 1.5em;
	cursor: pointer;
}

.agew_button_simple:hover {
	background-color: #efb274;
}

.aw_button_simple_r {
	margin-left: 1em;
    padding: 0.5em 2.9em;
}

.top_cta {
	color: white;
	background-color: #3a595b;
	font-weight: 500;
	font-size: 1.2em;
	padding: 0.2em 0.9em 0.9em;
}

.top_block {
	display: none;
}

.top_block_mobile {
	margin-top: 0;
    color: white;
	background-color: #3a595b;
	overflow: hidden;
}

.top_block_mobile figure {
	margin: 0;
}

.top_block_mobile img {
	width: 100%;
	height:auto;
}

.top_block_mobile p {
	margin: 4em 1em 1.2em;
	text-align: justify;
}

.container {
	width: 95%;
	margin: 0 auto;
}

.top_container {
    position: absolute;
    top: 65%;
    width: 100%;
}

.video-bg {
    display: none;
}

.mobile_video_block {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 3em;
}

.mobile_video {
	width: 100%;
	display: block;
}

.desktop_video_block {
	display: none;
}


.pictures-block {
	margin: 0;
	background-color: #3a595b;
}

.pictures-block img {
	width: 100%;
	height:auto;
}

.one-picture {
	position:relative;
	margin: 0;
}

.one-picture img {
	display: block;
}

.picture-descr {
	position:relative;
	display:block;
	bottom: 0em;
	left: 0em;
	right: 0em;
	background-color: #3a595b;
	color: white;
	padding-bottom: 0.6em;
}

.expand_link {
	cursor: pointer;
}

.close_button {
	cursor: pointer;
}

.girlname {
	text-align:left;
	font-weight:bold;
	display: inline-block;
	width: 100%;
	padding: 0 1em;
}

.storytext {
	margin: 0 1em 1em;
	text-align: left;
}

.story_spacer {
    padding: 0.1em;
}

.hidden_text {
	display: none;
	transition: display 2s;
}

.readmore_link {
	color: white;
	text-decoration: underline;
}

.viewmore_link {
	display: none;
}

.collapse_link {
	margin-right: 3em;
	padding: 0.5em 2.5em;
}

.achtung_text {
    color: white;
    font-size: 1rem;
    text-align: center ! important;
}

.index_contact {
    display: none;
}



/*============= */



/*===============*/

@media screen and (min-width: 460px) {
	header {
		height: 53px;
	}
	.top-block-mobile {
		margin-top: 53px;
	}
	.logo_txt {
		font-size: 1.7rem;
		margin: 0.4em;
	}

	.nav-toggle-label {
		font-size: 2.1rem;
	}

	#hidemenu_button {
		font-size: 2.1rem;
	}

	nav ul {
		margin: 0.2em;
	}

	.button-menu {
		font-size: 0.9rem;
	}

	.topjoin_button {
		margin: 0.6em;
	}

}

/*==== */
@media screen and (min-width: 600px) {
    .index_contact {
        display: inline-block;
    }
}

/*===== */

@media screen and (min-width: 600px) {

    .nav-toggle-label {
        display: none;
    }

    .menu_hidden {
        transform: none;
    }

    .menu_hidden a {
        opacity: unset;
    }

    .menu_visible {
        transform: none;
    }

    .menu_visible a {
        opacity: unset;
    }

    nav {
        all: unset;
        float: right;
        margin-right: 8.6em;
    }

    nav ul {
        display: inline-block;
        margin: 0.4rem;
    }

    nav li {
        display: inline-block;
        margin: 0.45em;
    }

    nav a {
        font-size: 1rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .picture-descr {
        padding-bottom: 1.6em;
    }

    .girlname {
        padding: 1em;
    }

}

@media screen and (min-width: 830px) {
	.age_check_warning {
		margin: 8em auto 4em;
	}
}
	
@media screen and (min-width: 1000px) {
	header {
        height: 62px;
        padding: 0.45em 0.8em;
    }

	.logo_txt {
		font-size: 2.5rem;
		margin: 0;
	}

	nav li {
		margin: 0.125em 1em;
	}

	nav ul {
		margin: 0.56em;
	}
	
	nav a {
		font-weight: 700;
		font-size: 1rem;
		padding: 0.2em;
	}
	
	.button-menu {
		font-size: 1rem;
	}

	.button-simple {
		font-size: 1.2rem;
	}

	.topjoin_button {
		margin: 0.3em 0.8em;
	}

	.buttons_block {
		padding: 2em;
	}

	.first_block {
		margin-top: 5em;
	}

	.button-small {
		background-color: white;
	}
	
	.age_check_warning {
		padding: 2em;
		margin: 6em auto;
	}

	.agew_button_simple {
		font-size: 1.2rem;
	}

}


@media screen and (min-width: 1200px) {
	header {
		background-color: rgb(80, 80, 80, 0.6);
		transition: all 0.3s linear;
	}

	.viewmore_link {
		display: inline;
	}
	
}

@media screen and (min-width: 62rem) {
	.main_block {
		max-width: 62rem;
		margin: 5em auto;
	}

	.top_text_block {
		margin-top: 5em;
	}
	
}



/*=================*/

@media screen and (min-width: 1000px) {
	.picture-descr {
		position:absolute;
		z-index: 100;
		background: rgba(0,0,0,0.6);
		color: white;
	}
	.hidden_text {
		display: none;
	}
	
	.top_block_mobile {
		margin-top: 26px;
	}
	
	.top_cta {
		font-size: 2em;
		padding: 0.8em;
	}
}

@media screen and (min-width: 1200px) {
.top_block {
	display: block;
	background: rgba(0, 0, 0, 0.25);
	height: 100vh;
	margin-top: 0;
	color: #FFF;
	overflow: hidden;
	position: relative;
}

.top_block_mobile {
	display: none;
}
.video-bg {
	display: inline-block;
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
}

.title {
	font-size: 3.6rem;
}
.button_big {
	font-size: 2rem;
	margin-top: 2rem;
}

.mobile_video_block {
	display: none;
}

.desktop_video_block {
	display: block;
	width: 100%;
	height: auto;
	padding: 0.1em 0.6em;
	background-color: #3a595b;
}

.desktop_video {
	width: 100%;
	display: block;
	cursor: pointer;
}

.pictures-block {
	padding: 0.3em;;
}
.one-picture {
	width: 50%;
	float:left;
	overflow: hidden;
	padding: 0 0.3em;
	margin: 0.3em 0;
}
.picture-descr {
	 transform: translateY(150%);
	margin: 0 0.3em;
}
.one-picture:hover .picture-descr {
	transform: translateY(0%);
	transition: all ease-in-out 250ms;
}

.achtung_text {
	font-size: 1.2rem;
	padding: 2em;
}
}

@media screen and (min-width: 1850px) {
.pictures-block {
	width: 1832px;
	margin: 0 auto;
	padding: 0;
}

.pictures-block img {
	width: 900px;
	height:auto;
}

.one-picture {
	width: 900px;
	margin: 8px;
	padding: 0;
}

.picture-descr {
	margin: 0;
}

.desktop_video_block {
	width: 1816px;
	margin: 8px auto;
	padding: 0;
}
}

@media screen and (min-width: 1930px) {
.one-picture {
	width: 33.3333334%;
	padding: 0 0.3em;
	margin: 0.3em 0;
}


.pictures-block {
	width: 100%;
	padding: 0.3em;
}

.picture-descr {
	margin: 0 0.3em;
}

.pictures-block img {
	width: 100%;
	height:auto;
}

.desktop_video_block {
	width: 100%;
	height: auto;
	padding: 0.1em 0.6em;
}
}





/* CTA ================ */

.cta {
    color: white;
	background-color: #3a595b;
	padding: 1em 0 3em;
	font-size: 1.2rem;
}

@media screen and (min-width: 1000px) {
	.cta {
		padding: 4em 0;
		font-size: 1.6rem;
		background-color: #3a595b;
	}
}

/* FOOTER ==============*/

footer {
	color: white;
	background-color: #3a595b;
	text-align: left;
	padding: 1em 1em 2em;
    margin-bottom: 0;
    overflow: hidden;
}

footer ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

footer a {
	color: white;
	text-decoration: none;
}

footer a:hover {
	color: #efb274;
	text-decoration: underline;
}

.footer_block1 {
	width: 100%;
	margin-bottom: 1em;
}

.footer_block2 {
	width: 100%;
}

@media screen and (min-width: 1000px) {

	footer {
		padding: 1.6em;
		font-size: 0.9em;
	}

	footer ul {
		padding: 0 1em;
	}

	.footer_block1 {
		width: 50%;
		float: left;
		padding-right: 0.5em;
	}

	.footer_block2 {
		width: 25%;
		float: left;
		padding-left: 1em;
	}

	.sticky_footer {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
	}

}

/* overlay ================ */

.overlay {
	visibility: hidden;
}




@media screen and (min-width: 1000px) {
	.overlay {
        visibility: visible;
        position: fixed;
        height: 100%;
        width: 100%; 
        top: 0;
        z-index: 1001;
        -webkit-backdrop-filter: blur(30px);
        backdrop-filter: blur(30px);
    }

    .story_overlay {
        z-index: 1002;
        background-color: white;
        margin: 0 auto;
        padding: 50px;
        clear: left;
        width: 1000px;
        float: none;
        box-shadow: 0 1px 10px rgb(0 0 0 / 50%);
        
    }

    .story_overlay figcaption {
        transform: none;
        position:relative;
        width: 900px;
        background-color: white;
        color: black;
		margin: 0;
    }

    .story_overlay img {
        width: 900px;
    }

}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}

	body,
	.button-small,
	.top_cta,
	.top_block_mobile,
	.pictures-block,
	.picture-descr,
	.desktop_video_block,
	.cta,
	footer {
		background-color: #121212;
	}

	header, nav {
		background-color: #323c3d;
		transition: none;
	}

	.scrolled_header nav {
        background-color: #101010;
    }

		input,
	textarea,
	select {
		background-color: #1e2628;
		border-color: #3f4a4d;
		color: #fff;
		color-scheme: dark;
	}

	input:focus,
	textarea:focus,
	select:focus {
		background-color: #1e2628;
		border-color: #efb274;
		color: #fff;
		outline: 0;
	}

	input::placeholder,
	textarea::placeholder {
		color: #b8c0c2;
	}

	.button-simple:hover,
	.button-small {
		background-color: #1e2628;
	}

	.button-menu:hover {
		color: #121212;
	}
}

@media (prefers-color-scheme: dark) and (min-width: 600px) {
	.scrolled_header nav {
        background-color: transparent;
    }
}