/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         eranndd
 Text Domain:  twenty-fifteen-child
*/


/* LANDING-PAGE CSS */


iframe#ytplayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-filter: sepia(1);
  filter: sepia(1);

}
@media (min-aspect-ratio: 16/9) {
iframe#ytplayer {
    height: 300%; top: -100%;
    /* or height: 200%; top: -50%;
       or height: 400%; top: -150%; */
  }
}
@media (max-aspect-ratio: 16/9) {
iframe#ytplayer {
    width: 300%; left: -100%;
    /* or width: 200%; left: -50%;
       or width: 400%; left: -150%; */
  }
}
 
body#landingpage #page {display: none !important;}
 
.hide {display: none;}

section.erann {
  position: fixed; 
  left: 54%; top: 50%;
  width: 700px; 
  max-width: 100%;
  height: auto;
  z-index: 999999;
  transform: translate(-50%,-50%);
  display: table;
  opacity: 0;
  animation: fadein 2s forwards;
 }

@keyframes fadein {
	to {opacity:1;}
}

section.erann > div {   
	display: table-cell;
    float: none;
    vertical-align: top;
    position: relative;
    }

section.erann .left {width: 5%;}
section.erann .mid {width: 65%;}
section.erann .right {width: 30%;}

/* left */
section.erann .left #followus {
	position: absolute;
	bottom: 0;
	right: -30%;
	max-width:100%;
	}
section.erann .left #followus img {width: 100%;}

/* mid */
section.erann .mid #toptext {margin-bottom:10px;}
section.erann .mid #toptext > img {width: 100%;}

section.erann .mid .front > img {width: 100%;}
section.erann .mid .back img {border: 10px solid transparent; animation: fadeborder 5s forwards; -webkit-filter: sepia(1); filter: sepia(1);}
section.erann .mid .logo {
	position: absolute; top: 65%; left: 50%; 
	transform: translate(-50%,-50%); 
	width: 95%;
	}
section.erann .mid .logo img {float: left;}
section.erann .mid .logo img:first-child {
	width: 86.5%;
	margin-right: 1%;
}
section.erann .mid .logo img:last-child {
	width: 12.5%; 
	background: url('pil.png') no-repeat center center;
	background-size: contain;
	}

section.erann .mid .logo #svglogo {
	width: 100%;
	float: none;
	margin: 0 auto;
	padding: 0;
	display: block;
}

section.erann .mid .logo #playbtn {
	margin: 25% 0 0;
	
}
section.erann .mid .logo #playbtn p {
	margin: 0;
	vertical-align: bottom; 
	color: white; 
	text-align: center; 
	line-height: .9; 
	font-size: 23px; 
	letter-spacing: 0.2px; 
	font-family:'Arimo'; 
	font-weight: 700;
	
}
section.erann .mid .logo #playbtn p i {
	font-size: 20px; 
	vertical-align: bottom; 
	padding-left: 5px;
}


section.erann .mid #fake {
	float: left;
	visibility: hidden;
	opacity: 0;
	width:100%;
	}

section.erann .mid #footer {margin-top:10px;}
section.erann .mid #footer svg {float: left; width: 25%; margin-left: 5%;}
section.erann .mid #footer img:last-child {float: right; width: 20%;}

section.erann .mid #footer a {display: block;}

/* right */
section.erann .right {padding-left: 2%;}
section.erann .right #newsinglevertical {visibility: hidden;}
section.erann .right #newsinglevertical img {width: 9%;}

section.erann .right #newsinglehorizontal {padding-top: 5%; visibility: hidden;}
section.erann .right #newsinglehorizontal img {width: 80%; margin-bottom: 5px;}

section.erann .right #stores {position: absolute; top: 88%; left: 7%;}
section.erann .right #stores a {float: left; width: 45%; margin-right: 10%;}
section.erann .right #stores a:last-child {margin: 0;}
section.erann .right #stores img {}

#footer_mobil {display: none; width: 100%; margin:2em auto 0;}
#footer_mobil svg {display: block; width:50%; height: auto; margin: 2em auto 0;}
#footer_mobil img:last-child {display: block; width: 30%; margin: 2em auto 0;}

/* FLIP ANIMATION */

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
	transform-style: preserve-3d;
}
	/*  UPDATED! flip the pane when hovered 
	.flip-container:hover .back {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front {
	    transform: rotateY(180deg);
	}*/

.flip-container, .front, .back {
	width: 100%;
	height: auto;
		cursor: pointer; 
}


/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
	
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden; /* children of flip only works 1 side (FRONT)*/
}

/*  UPDATED! front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(-180deg);
}

.flip-container.hover .flipper, .flip-container.flip .flipper {
	transform: rotateY(-180deg);
	
}

/* GLOW ANIMATION*/

 .glow {
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#873847')";
filter: url(/wp-content/themes/twentyfifteen-child/img/dropshadow.svg#drop-shadow);
-webkit-filter: drop-shadow(0px 0px 10px RGB(168, 17, 25));
filter: drop-shadow(0px 0px 10px RGB(168, 17, 25));

animation: glow 1s infinite alternate;
transform: translateZ(0); 

 }

@keyframes glow {
	to {-webkit-filter: drop-shadow(0 0 5px RGB(168, 17, 25)); filter: drop-shadow(0 0 5px RGB(168, 17, 25));}
	
}

@keyframes fadeborder {
	to {border-color: white;}
}
 /* REAL-WEBSITE CSS */

section.erann div:after, 
.group:after {
  content: "";
  display: table;
  clear: both;
}

/* fundament */

html {}

body {}
body:before {content: none;}

.site-content {
	display: block;
	float: none;
	margin-left: 0;
	width: auto;
	}

img, svg {max-width: 100%; height: auto;}

/* MEDIAQUERIES */

@media only screen 
and (max-width : 736px) {
	/* LANDINGPAGE */
	html {background: url('/wp-content/themes/twentyfifteen-child/img/bg_mobile.jpg') no-repeat center center fixed; background-size: cover;}
	body {background: none;}
	
	iframe#ytplayer {display: none;}
	
	section.erann {
		padding: 5%;
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 100%;
		height: auto;
		z-index: auto;
		transform: none; 
		display: block;
	}
	
	section.erann > div {
		display: block;
		float: none;
		vertical-align: top;
		position: static;
		}
	
	section.erann .left,
	#newsinglevertical,
	#newsinglehorizontal {display: none;}
	

	section.erann .mid,
	section.erann .right {width: 100%; padding: 0; float: none;}
	
	section.erann .right #stores {
		position: static;
		top: auto;
		left: auto;
		width: 70%;
		margin: 2em auto 0;
		}
	
	#footer {display: none;}
	#footer_mobil {display: block;}
}