/* exo-2-300 - latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/exo-2-v20-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/exo-2-v20-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* exo-2-regular - latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/exo-2-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/exo-2-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* exo-2-700 - latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/exo-2-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/exo-2-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* exo-2-800 - latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('../fonts/exo-2-v20-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/exo-2-v20-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* exo-2-900 - latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 900;
  src: local(''),
       url('../fonts/exo-2-v20-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/exo-2-v20-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
} 


body {
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
}

video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: url('//demosthenes.info/assets/images/polina.jpg') #000 no-repeat center center fixed;
    background-size: cover;
    transition: 1s opacity;
}
.stopfade { 
   opacity: .5;  /* löschen für Standbild */
}

#Logomain { 
    float: right;
	position: fixed;
	top: 40%;
	left: 50%;
    transform: translate(-30%, -30%);
}

ul.topnav {
    position: fixed;
	bottom: 2em;
	width: 100%;
	margin: 0 auto;
	list-style-type: none;
	padding: 0;
	z-index: 5;
	text-align: center;
	background: rgba(0,0,0,0.6);
}
	
ul.topnav li {
	display: inline;
    padding-left: 1.5em;
	padding-right: 1.5em;
}

ul.topnav li a {
	text-decoration: none;
	font-size: 2em;
	font-style: normal;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 1.3em;
	color: #ffffff;
	transition: .4s color; 
	transition: .6s background; 
}

ul.topnav a:hover {
	text-decoration: none;
	font-size: 2em;
	font-style: normal;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 1.3em;
	color: #838055;
    background:rgba(0,0,0,0.9); 

}

ul.topnav li.icon {display: none;}

ul.topnav li.socialmedia {display: none;}

ul.topnav li.imprint {display: none}


main {	
position: fixed;
top: 2em;
bottom: 0;
right: 0;
left: 0;
overflow: auto;
height:81%;
}
	

article {
	position: relative;
	float: right;
    margin: 0 auto;
	padding: 1em;
	max-width: 50em;
	background: rgba(0,0,0,0.6);
	color: #ffffff;
	font-size: 1em;
	}

#tdetail img{
	float: right;
	margin: 0 0 1em 1em;
}

h1 {
	font-size: 2em;
	text-decoration: bold;
	color: #838055;
}

h3 {
	font-size: 1.5em;
	text-decoration: none;
	color: #ffffff;
}

footer.responsive {
    position: fixed;
    bottom: 0;
    width: 100%;
	text-align: center;
	color: #ffffff;
	transition: .4s color; 
	padding: .5em;
	display: none;
}


/* responsive footer */
footer.responsive a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background: none;
}

footer.responsive a:hover {
	color: #838055;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
	text-align: center;
	color: #ffffff;
	transition: .4s color; 
	padding: .5em;
}

footer a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background: none;
}

footer a:hover {
	color: #838055;
}


/* a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background: none;
  padding: .5rem;
  transition: .6s background; 
}
*/
a:hover{
/*  background:rgba(0,0,0,0.6); */
}

/* Was ist Airsoft? Accordion */

button.accordion {
    background: none; 
    color: #fff;
    cursor: pointer;
    padding: 18px 18px 18px 0;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
	font-size: 1.5em;
	text-decoration: none;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active {
    background-color: none;
}

button.accordion:hover {
	color: #838055;
    background:rgba(0,0,0,0.9); 
}	
	
/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 0;
    background-color: none;
    display: none;
}

/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show {
    display: block;
	padding: 0;
}




/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Input */

form {
float: left;
margin-top: 1em;
}


input,
textarea {
font-size: 100%;
font-family: 'Exo 2', Arial, sans-serif;
line-height: 1.5em;
padding: 0.5em;
margin-right: 0.5em;
margin-top: 0.5em;
margin-bottom: 0.5em;
min-width: 23em;
display: block;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Image Zoom */

.item {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

.item img {
  max-width: 100%;
  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Circle Image Zoom */

.item-circle {
  position: relative;
  margin: 0.35em 0.7em 0.35em 0;
  overflow: hidden;
/*  border-radius: 50%; */
  float: left;
}

.item-circle img {
  max-width: 11em;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.item-circle:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Gallery */

:focus {
    outline: medium none;
}
.gallery {
    min-height: 500px;
    margin: 1em auto;
    position: relative;
    width: 100%;
}
a.imggal {
    border: none;
    box-sizing: border-box;
    display: inline-block;
    height: 113px;
    position: relative;
    width: 170px;
	margin: 0.35em 0.7em 0.35em 0;

}

a.imggal img {
    -moz-user-select: none;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition-duration: 1.5s;
    transition-property: width, height, top, bottom, left, right, z-index;
    width: 100%;
    z-index: 10;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

a.imggal:hover img {
    -moz-user-select: none;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0;w
    position: absolute;
    top: 0;
    transition-duration: 1s;
    transition-property: width, height, top, bottom, left, right, z-index;
    width: 100%;
    z-index: 10;
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.closed {
    color: #838055;
    cursor: pointer;
    display: none;
    font-size: 70px;
    font-weight: bold;
    height: 20px;
    position: absolute;
    right: 180px;
    text-align: center;
    text-shadow: 0 0 5px #000;
    top: 105px;
    transform: rotate(45deg);
    width: 20px;
    z-index: 30;
}
.closed-layer {
    background: transparent none repeat scroll 0 0;
    cursor: pointer;
    display: none;
    height: 352px;
    left: 150px;
    position: absolute;
    top: 140px;
    width: 493px;
    z-index: 30;
}
a.imggal:focus ~ .closed, a:focus ~ .closed-layer {
    display: block;
}
a.imggal:focus {
    border: medium none;
}
a.imggal:focus img {
    box-shadow: none;
    cursor: default;
    height: 290%;
    position: absolute;
    transition-duration: 1s;
    transition-property: width, height, top, bottom, left, right, z-index;
    width: 290%;
    z-index: 25;
}
a.imggal:focus:nth-child(4n+1) img {
	left: 112px;	/* 112px // -340 */
}
a.imggal:focus:nth-child(4n+2) img {
    left: -73px;	/*-73px  // -525 */
}
a.imggal:focus:nth-child(4n+3) img {
    left: -258px;	/*-258px // -710 */
}
a.imggal:focus:nth-child(4n+4) img {
    left: -442px;
}
a.imggal:focus:nth-child(-n+4) img {
    top: 140px;
}
a.imggal:focus:nth-child(n+9) img {
    top: -150px;
}
a.imggal:focus:nth-child(n+13) img {
    top: -295px;
}


iframe {
	width: 355px;
	height: 200px;
	margin: 0.35em 0.7em 0.35em 0;
}


@media screen and (max-width: 800px) { 
  main{height: 76%;}
  ul.topnav { bottom: 4em;}
  ul.topnav.responsive {position: fixed; bottom: 4em; width: 100%;}
  ul.topnav.responsive li.icon {
    position: absolute;
    left: 0;
	top: 0;
	font-size: 50px;
  }
    ul.topnav.responsive li.socialmedia {
    position: absolute;
    left: 0;
	top: 0;
  }

  ul.topnav.responsive li {
    float: none	;
    display: inline;
  }

    ul.topnav.responsive li.socialmedia {
display: none;
  }

  ul.topnav.responsive li.imprint {
display: inline;

}

  ul.topnav.responsive li a {
    display: block;
    text-align: center;
  }

  ul.topnav li {display: none;}
  ul.topnav li.icon {
    float: none;
    display: inline-block;
  }

    ul.topnav li.socialmedia {
    float: none;
    display: inline-block;
  }
  imprint {display: none;}
  imprint.responsive {display: inline-block;}
  footer {display:none;}
  footer.responsive {display: inline;}
}

@media screen and (max-height: 400px) { 
  main{height: 62%;}
}
@media screen and (max-height: 600px) { 
  main{height: 62%;}
}
@media screen and (max-height: 750px) { 
  main{height: 70%;}
}
@media screen and (max-device-width: 800px) {
  html { background: url(//demosthenes.info/assets/images/polina.jpg) #000 no-repeat center center fixed; }
  #bgvid { display: none;}
  article{font-size: 1.7em;}
  article{margin-left: 0;}  
  ul.topnav {font-size: 1.7em;}
  ul.topnav { bottom: 4em;}
  ul.topnav.responsive {position: fixed; bottom: 4em; width: 100%;}
  ul.topnav.responsive li.icon {
    position: absolute;
    left: 0;
	top: 0;
	font-size: 70px;
  }
    ul.topnav.responsive li.socialmedia {
    position: absolute;
    left: 0;
	top: 0;
  }
  ul.topnav.responsive li {
    float: none	;
    display: inline;
  }
    ul.topnav.responsive li.socialmedia {
display: none;
  }
   
  ul.topnav.responsive li.imprint {
display: inline;
}

  ul.topnav.responsive li a {
    display: block;
    text-align: center;
  }

  ul.topnav li {display: none;}
  ul.topnav li.icon {
    float: none;
    display: inline-block;
  }
    ul.topnav li.socialmedia {
    float: none;
    display: inline-block;
  }
  imprint {display: none}
  imprint.responsive {display: inline-block;}
  footer {display:none;}
  footer.responsive {display: inline; color: #ffffff;}
  


.item-circle img {
  max-width: 10em;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  
}

}

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

/* 2 Spalten */


a.imggal:focus img {
    box-shadow: none;
    cursor: default;
    height: 200%;
    position: absolute;
    transition-duration: 1s;
    transition-property: width, height, top, bottom, left, right, z-index;
    width: 200%;
    z-index: 25;
}

a.imggal:focus:nth-child(2n+1) img {
	left: 8px;	/* 112px // -340 */
}

a.imggal:focus:nth-child(2n+2) img {
    left: -177px;	/*-73px  // -525 */
}
a.imggal:focus:nth-child(2n+3) img {
    left: 8px;	/*-258px // -710 */
}
a.imggal:focus:nth-child(2n+4) img {
    left: -178px;
}
a.imggal:focus:nth-child(-n+4) img {
    top: 140px;
}
a.imggal:focus:nth-child(n+9) img {
    top: -150px;
}
a.imggal:focus:nth-child(n+13) img {
    top: -295px;
}


iframe {
	width: 355px;
	height: 200px;
	margin: 0.35em 0.7em 0.35em 0;
}

}

@media screen and (max-width: 784px) {

/* 3 Spalten */


a.imggal:focus img {
    box-shadow: none;
    cursor: default;
    height: 290%;
    position: absolute;
    transition-duration: 1s;
    transition-property: width, height, top, bottom, left, right, z-index;
    width: 290%;
    z-index: 25;
}

a.imggal:focus:nth-child(3n+1) img {
	left: 23px;	/* 112px // -340 */
}

a.imggal:focus:nth-child(3n+2) img {
    left: -162px;	/*-73px  // -525 */
}
a.imggal:focus:nth-child(3n+3) img {
    left: -347px;	/*-258px // -710 */
}

a.imggal:focus:nth-child(-n+3) img {
    top: 140px;
}
a.imggal:focus:nth-child(n+7) img {
    top: -150px;
}
a.imggal:focus:nth-child(n+11) img {
    top: -295px;
}


iframe {
	width: 540px;
	height: 304px;
	margin: 0.35em 0.7em 0.35em 0;
}



}