/*
Theme Name: 20th
Description: Template for monokel-augenoptik.de
Author: Simon Schmidt
Author URI: http://schmidtsimon.com/
*/

/* css reset start */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* css reset end */

*{
    box-sizing:border-box;
}

html{
	height:100%;
	width:100%;
	font-family: 'Hind Siliguri', sans-serif;
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body{
	background-color:rgb(230,230,230);
	height:100%;
	width:100%;
	transition: background-color 1s ease;
}

.flex{
	display:flex;
}

.clmn{
	flex-direction:column;
}

section{
	margin:8em 0 4em;
}

section::after{
	content: "";
	clear: both;
	display: table;
}

.full{
	/*min-height:100vh;*/
	display:flex;
	align-items:center;
	margin:0 0 275px;
	padding-top:275px;
}

.startwidth{
	width:70%;
	margin:0 10% 0 20%;
}

.pagewidth{
	width:70%;
	margin:0 15%;
}

.fullwidth{
	width:80%;
	margin:0 10%;
}

.titlebox{
	position:relative;
}

.titlebox img{
	width:100%;
	background-color:#9C1A1F;
	height:500px;
	border-radius:10px;
	object-fit: cover;
	object-position:13% center;
}

.titlebox .titlebox_textbox{
	background:white;
	position:absolute;
	right:4em;
	top:-2em;
	width:420px;
	padding:2em;
}

.left_textbox{
	left:4em;
	right:auto;
}

.titlebox_textbox > p:first-child{
	color:#9C1A1F;
	margin-bottom:1.5em;
	font-size:.8rem;
	text-transform:uppercase;
	letter-spacing: .05em;
}

.quote p{
	color:#9C1A1F;
	width:80%;
	margin-right:20%;
	text-align:right;
}

.quote p:first-child{
	color:black !important;
	font-size:1.8rem;
	margin-bottom:2em;
	text-align:center;
	width:100%;
	line-height:4rem;
}

.textblock{
	text-align:center;
	width:60%;
	margin: 0 auto;
}

h1{
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	font-size:1.5rem;
	margin-bottom:2em;
}

h2{
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	font-size:1.5rem;
	margin-bottom:2em;
}

h3{
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	font-size:1.2em;
	margin-top:2em;
}

.center{
	text-align:center;
}

.bare{
	margin-top:4em;
}

p, a{
	font-size:1.2rem;
	line-height:1.8rem;
}

a{
	color:#9C1A1F;
	padding:0 5px;
	text-decoration:none;
	background:
	linear-gradient(
	  to bottom, white 0%,
	  white 100%
	);
   background-position: 0 100%;
   background-repeat: repeat-x;
   background-size: 2px 1px;
   transition: background-size .3s;
}

.titlebox_textbox a{
	color:#9C1A1F;
	padding:0 5px;
	text-decoration:none;
	background:
	linear-gradient(
	  to bottom, rgb(230,230,230) 0%,
	  rgb(230,230,230) 100%
	);
   background-position: 0 100%;
   background-repeat: repeat-x;
   background-size: 2px 1px;
   transition: background-size .3s;
   margin-left:-5px;
}

a:hover {
  background-size: 2px 50px;
}

.button{
	background:rgb(223, 200, 200) !important;
	border-radius:5px !important;
	color:#9C1A1F !important;
	padding:.4em 2em !important;
	display:inline-block !important;
	margin:2em auto 0 0 !important;
	text-decoration:none !important;
	transition:all .5s !important;
}

.button:hover{
	background:#9C1A1F !important;
	color:white !important;
}

#indexheader{
	height:calc(100vh - 12em);
	width:100%;
	background: url(img/sketch.png) no-repeat center;
	background-size:auto 80%;
	position:relative;
}

#philosophieHeader{
	height:calc(100vh - 12em);
	width:100%;
	background: url(img/sketch.png) no-repeat center;
	background-size:auto 80%;
	position:relative;
}

#header{
	width:80%;
	margin:100px 10% 0;
	position:relative;
	height:2.5em;
}

#header #mobilelogo{
	display:block;
	position:absolute;
	left:0;
	top:0;
	height:2.5em;
	width:auto;
}

#indexheader #header #mobilelogo{
	display:none;
}

.iconlist{
	margin-bottom:8em;
}

.iconlistelement{
	flex-grow:1;
	flex-basis:30%;
	border-left:1px solid black;
	text-align:center;
	margin-top:2em;
}

.iconlistelement:first-child{
	border:none;
}

.iconlistelement img{
	height:48px;
	width:auto;
	padding-top:1em;
	padding-bottom:0;
	transition:all .3s;
}

.iconlistelement:hover img{
	padding-top:0;
	padding-bottom:1em;
}

.iconlistelement p{
	width:80%;
	margin: 2em auto 1em;
}

.newslide{
	scroll-snap-align:center;
	background:white;
	flex-grow:1;
	flex-basis:30%;
}

.newsliderimage{
	object-fit: cover;
}

@media(min-width:1081px){

	.newsliderimage{
		object-fit: cover;
		width:85%;
		right:7.5%;
		height:500px;
		z-index:-1;
		object-fit:cover;
		position:absolute;
		margin-top:-450px;
	}

	.newslidersection{
		position: relative;
		padding-top:450px;
	}

}

.newslidewrap{
	padding:2em;
	display:flex;
	flex-direction:column;
	flex-grow:1;
}

.newsecondslide{
	margin-left:5%;
	margin-right:5%;
}

.newslide p:last-child{
	color:#9C1A1F;
	padding-top:1em;
	margin-bottom:0;
	margin-top:auto;
}

.slides{
	margin-top:-4em;
	z-index:9;
	overflow-x:scroll;
	scroll-snap-type: x mandatory;	
	/*scroll-padding:5%;*/
	position:relative;
}

.slider{
	height:500px;
	position:relative;
}

.slider img{
	width:85%;
	margin:0 7.5%;
	height:500px;
	z-index:1;
	object-fit:cover;
	position:absolute;
	}

.slide{
	flex-grow:1;
	flex-basis:30%;
	margin-left:5%;
	display:flex;
	min-width:250px;
	scroll-snap-align: center;
}


.slidewrap{
	background-color:white;
	border-radius:5px 5px 0 0;
	padding:2em;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	width:100%;
}

.slide:first-child{
	margin-left:0;
}

.slide p:last-child{
	color:#9C1A1F;
	padding-top:1em;
	margin-bottom:0;
	margin-top:auto;
}

.team{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 75px;
	grid-row-gap: 75px;
	grid-template-rows: auto;
	grid-template-areas:	"mitarbeiter1 mitarbeiter2 mitarbeiter3"
							"mitarbeiter4 mitarbeiter5 mitarbeiter6"
							"mitarbeiter7 job job";
}

.mitarbeiter{
	background-color:white;
	border-radius:5px 5px 0 0;
}

.mitarbeiter:nth-child(1){
	grid-area:mitarbeiter1;
}

.mitarbeiter:nth-child(2){
	grid-area:mitarbeiter2;
}

.mitarbeiter:nth-child(3){
	grid-area:mitarbeiter3;
}

.mitarbeiter:nth-child(4){
	grid-area:mitarbeiter4;
}

.mitarbeiter:nth-child(5){
	grid-area:mitarbeiter5;
}

.mitarbeiter:nth-child(6){
	grid-area:mitarbeiter6;
}

.mitarbeiter:nth-child(7){
	grid-area:mitarbeiter7;
}

.mitarbeiter:last-child{
	grid-area:job;
}

/*.mitarbeiter{
	width:30%;
	display:inline-block;
	background-color: white;
	margin-bottom:2em;
}

.mitarbeiter:nth-child(2), .mitarbeiter:nth-child(5), .mitarbeiter:nth-child(8){
	margin-left:4%;
	margin-right:4%;
}

.mitarbeiter:nth-child(8){
	width:64%;
	margin-right:0;
	margin-left:4%;
}*/

.mitarbeiter img{
	width:100%;
	height:350px;
	object-fit: cover;
	z-index:1;
	position:relative;
	border-radius: 5px 5px 0 0;
}

.mitarbeiter p{
	width:80%;
	margin:-2em auto 1em;
	text-transform:uppercase;
	line-height:2rem;
}

.mitarbeiter p:first-of-type{
	padding:2.5em 1em 1em;
	margin:-2em auto;
	width:80%;
	border:3px solid black;
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	font-size:1.8rem;
	margin-bottom:2em;
	text-transform:uppercase;
	z-index:5;
	position:relative;
}

.mitarbeiter:last-of-type p:first-of-type{
	text-transform:none;
}

#indexheader > ul{
	text-align:right;
	position:absolute;
	bottom:0;
}

#indexheader > ul li a{
    text-decoration:none;
    color:black;
    line-height:1.75em;
    text-transform:uppercase;
	letter-spacing:2px;
	background:none;
}

#indexheader > ul li a:hover:before{
    display:inline-block;
    margin-right:.5em;
    content:"⇃";
}

#indexheader > ul:after{
	display:inline-block;
	width:1em;
	height:1em;
    content:"T";
    transform:rotate(180deg);
	font-family: 'Open Sans', sans-serif;
    font-weight:600;
    margin:1em -.6em 0 0;
}

#nav{
	background-image: linear-gradient(to bottom right, rgb(146, 29, 32), rgb(116, 29, 32));
	z-index:900;
	display:none;
	overflow:auto;
	position:fixed;
	right:0;
	padding:2em;
	width:500px;
	margin-right:10%;
	top:0;
	margin-top:100px;
	max-width:500px;

}

#nav a{
	color:white;
	font-size: 1.4rem;
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height:3em;
	text-decoration:none;
	background:none;

}
	
#button{
    position: absolute;
	right:-40px;
	top:0;
	z-index: 995;
	width:30px;
	height:30px;
}

.btn-open::before{
	content:'Monokel Augenoptik';
    color: black;
	font-size: 1.4rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	position:absolute;
	width:300px;
	margin-left:-320px;
}

#header a{
	text-decoration:none;
	background:none;
}

.btn-bars{
	width:30px;
	height:30px;
	position:fixed;
	top:100px;
	}

.btn-open .close-bar1, .btn-open .close-bar2{
	display:none;
}

.btn-close .close-bar1, .btn-close .close-bar2{
	display:block;
}

.btn-open .open-bar1, .btn-open .open-bar2, .btn-open .open-bar3{
	display:block;
}

.btn-close .open-bar1, .btn-close .open-bar2, .btn-close .open-bar3{
	display:none;
}

.btn-open .open-bar1, .btn-open .open-bar2, .btn-open .open-bar3{
    background:black;
	width:30px;
	height:5px;
	margin-bottom:5px;
	transition-property:all .5s ease-in-out 0s;
	-moz-transition:all .5s ease-in-out 0s;
	-webkit-transition:all .5s ease-in-out 0s;
	-o-transition:all .5s ease-in-out 0s;
}

.btn-open:hover .open-bar1{
	width:22px;
}

.btn-open:hover .open-bar2{
	width:18px;
}

.btn-open:hover .open-bar3{
	width:27px;
}

.btn-close .close-bar1, .btn-close .close-bar2{
	background: black;
	width:30px;
	height:5px;
	transition-property:all .5s ease-in-out 0s;
	-moz-transition:all .5s ease-in-out 0s;
	-webkit-transition:all .5s ease-in-out 0s;
	-o-transition:all .5s ease-in-out 0s;	
}

.btn-close .close-bar1{
	margin-top:10px;
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.btn-close .close-bar2{
	margin-top:-5px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.btn-close:hover .close-bar1, .btn-close:hover .close-bar2{
	width:30px;
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
	
#logo_cut{
	top:0;
	position:fixed;
	height:100%;
	z-index:999;
	}
	
#logo_cut_mobile{
	top:0;
	width:100%;
	display:none;
	background-color:white;
	z-index:999;
	}

#footer{
	/*background-color:#9C1A1F;*/
	position:relative;
	min-height:100vh;
	transition:all 1s;
}

#footer .width{
	margin: 0 15%;
	width:100%;
}

#footer p{
	color: rgb(240,240,240) !important;
	text-align:center !important;
	margin-right:0;
	width:100%;
}

#footer .startwidth{
	margin:0 15%;
}

.isinviewport{
	background-color:#9C1A1F;
}

.toggle{
	margin:6em auto;
	border-radius:25px;
	height:50px;
	width:500px;
	background-color:white;
	font-family: 'Open Sans', sans-serif;
	text-transform:uppercase;
	text-align:center;
}

.toggle a{
	background:none;
}

.toggle a, .toggle p{
	font-size:1em;
	width:50%;
	line-height: 44px;
	margin: 3px;
	text-decoration:none;
}

.toggleoption{
	color:grey;
	height:44px;
}

.currenttogglestate{
	background-color:rgb(240,240,240);
	height:44px;
	border-radius:22px;
	color:black;
}

.servicelink{
	margin-bottom:2em;
	display:inline-block;
	background:none;
	vertical-align:center;
}

.servicelink:after{
	content:url(img/servicelink-arrow.svg);
	width:40px;
	display:inline-block;
	margin-left:10px;
}

.philosophy{
	height:calc(100vh - 10.5em - 100px);
	flex-direction:column;
}

.leitsatz{
	height:100vh;
	text-align:center;
	margin-bottom:2em;
}

.singleleitsatz{
	position:sticky;
	top:30vh;
	opacity:0;
	min-height:40vh;
	transition:all 2s;
	background-image: linear-gradient(to bottom right, #9C1A1F, rgb(116, 29, 32));
	box-shadow: 100px 30px 0px 0px rgba(255,255,255,.4), -40px 50px 0px 0px rgba(255,255,255,.4);
	justify-content:center;
	color:white;
	padding:20px;
}

.visible{
	opacity:1;
	transition:all 1s !important;
}

.leitsatz p:first-child{
	font-size:3em;
	font-weight:bold;
	text-transform:uppercase;
	margin-bottom:1em;
	line-height:1.2em;
}

.leitsatz p:last-child{
	font-size:1.2em;
	text-transform:uppercase;
}

.icon-scroll {
	position: relative;
	width: 32px;
	height: 55px;
	min-height:55px;
	border: 2px solid #9C1A1F;
	border-radius: 25px;
	margin: auto auto 2em;
	}

.icon-scroll:before{
	position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	background: #9C1A1F;
	margin-left: 10px;
	top: 8px;
	border-radius: 4px;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-name: scroll;
	left:0;
	}

@keyframes scroll {
  0% {
    opacity: 1;}
  100% {
    opacity: 0;
	transform: translateY(30px);}
  }

@media(max-width:1333px){

	.titlebox .titlebox_textbox, #footer .titlebox_textbox{
		width:320px;
	}

	h2{
		font-size:1.4rem;
		margin-bottom:1.4em;
	}

	.mitarbeiter p:first-of-type{
		font-size:1.4rem;
	}

	.quote p:first-child{
		font-size:1.4rem;
		margin-bottom:1.4em;
		line-height:3rem;
	}
	
	p, a{
		font-size:1rem;
	}

	.titlebox img{
		height:420px;
	}

	.team{
		grid-column-gap: 50px;
		grid-row-gap: 50px;
	}

	.mitarbeiter img{
		height:280px;
	}

}

@media(max-width:1080px){

	.full{
		margin:8em 0 4em;
		padding-top:calc(5% + 30px);
	}

	.titlebox .titlebox_textbox, #footer .titlebox_textbox{
		width:100%;
		margin: 0 auto 100px;
		position:relative;
		left:auto;
		right:auto;
	}

	.slide{
		/*display:inline-block;*/
		min-width:100%;
		/*border:20px solid rgba(0,0,0,0);
		background-clip:padding-box;*/
	}

	.newslide{
		min-width:70%;
		box-shadow: 5px 5px 20px rgba(0,0,0,.3);
		margin-bottom: 25px;
		margin-top: 25px;
		border-radius: 5px;
		overflow: hidden;
	}

	.newslidersection{
		overflow-x:scroll;
		scroll-snap-type:x mandatory;
		position:relative;
		width:100% !important;
		margin:0 !important;
	}
	
	.newslidersection:after{
		min-width:15%;
		content:'.';
		color:transparent;
	}
	
	.newfirstslide{
		margin-left:15%;
	}

	.newsliderimage{
		width:100%;
		max-height:280px;
	}

	.slidewrap{
		width:70%;
	}

	.sliderimage::after{}

	.slidersection{
		width:100% !important;
		margin:0 !important;
	}

	.slider img{
		width:70%;
		margin:0 15%;
	}

	#footer .titlebox_textbox{
		margin-bottom: 1em;
	}

	#footer .width{
		min-height:auto;
		margin-top:0;
	}

	.team{
		grid-template-columns: 1fr 1fr;
		grid-template-areas:	"mitarbeiter1 mitarbeiter2" 
								"mitarbeiter3 mitarbeiter4"
								"mitarbeiter5 mitarbeiter6"
								"mitarbeiter7 job";
	}

}

@media(max-width:920px){

	
	#logo_cut{
		display:none;
	}

	.width, .pagewidth, .fullwidth, .startwidth, #nav, .slidewrap, .slider img{
		width:calc(90% - 80px);
		margin:5% calc(5% + 40px);
		transition:width .5s;
	}

	.slidersection{
		width:100%;
		margin:0;
	}

	#mobilelogo, #indexheader #header #mobilelogo{
		display:block;
		position:absolute;
		left:0;
		top:0;
		height:2.5em;
		width:auto;
	}
	
	#indexheader{
		background-size:contain;
		height:calc(100vh - 12%)
	}
	
	#philosophieHeader{
		background-size:contain;
		height:calc(100vh - 12%)
	}
	
	#header{
	margin: 5%;
	height: 2em;
	position: relative;
	width:auto;
	}

	#button{
		right:0;
	}

	.btn-bars{
		top:0;
		margin-top:5%;
		}

	.btn-open::before{
		display:none;
	}

	#nav{
		padding: 2em;
	}

	.titlebox img{
		height:280px;
		border-radius:5px;
	}

	.slider img{
		height:300px;
		border-radius:5px;
	}

	.slider{
		height:300px;
	}

	.leitsatz p:first-child{
		font-size:2em;
	}

	.leitsatz p:last-child{
		font-size:.8em;
	}

	.iconlist{
		flex-direction:column;
	}

	.iconlistelement{
		flex-grow:1;
		flex-basis:30%;
		border-left:none;
		text-align:center;
		margin-top:1em;
	}

	.iconlistelement:not(first-child){
		margin-top:3em;
	}

	.iconlistelement img{
		border-top:1px solid black;
		padding-top:3em;
		height:5em;
	}

	.iconlistelement:hover img{
		padding-top:3em;
		padding-bottom:0;
	}

	.iconlistelement:first-child img{
		border:none;
	}

	.iconlistelement p{
		margin-top:1em;
	}
}

@media(max-width:750px){

	section{
		margin:4em 0 2em;
	}

	section:first-of-type{
		margin:8em 0 0;
	}

	#mobilelogo{
		height:2em !important;
	}

	.width, .pagewidth, .fullwidth, .startwidth, .slidewrap, .slider img{
		width:calc(90%);
		margin:5%;
	}

	#nav{
		width: calc(90% - 40px);
		margin: 5% calc(5% + 40px) 5% 5%;
	}

	.team{
		grid-template-columns: 1fr;
		grid-template-areas:	"mitarbeiter1"
								"mitarbeiter2" 
								"mitarbeiter3"
								"mitarbeiter4"
								"mitarbeiter5"
								"mitarbeiter6"
								"mitarbeiter7"
								"job";
	}
	
/*.slide{
	margin-left:0;
	margin-top:2em;
}

	.slidewrap, .slider img{
		width:85%;
		margin:0 7.5%;
	}*/

	.toggle a, .toggle p{
		font-size:.8em;
		line-height: 34px;
		height:34px;
	}

	.toggle{
		width:500px;
		max-width:100%;
		height:40px;
	}

	.leitsatz p:first-child{
		font-size:1.4em;
	}

	.newslidersection:after{
		min-width:10%;
	}
	
	.newslide{
		min-width:80%;
	}
	
	.newfirstslide{
		margin-left:10%;
	}

	/*#signet{
		display:block;
		position:absolute;
		left:0;
		top:0;
		margin-top:5%;
		height:2.5em;
		width:2.5em;
	}*/
}