html,body{font: 15px "Helvetica","HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Arial",sans-serif;margin: 0;overflow-x: hidden}
div{position: absolute;margin: 0;padding: 0;border: 0;outline: none}

.page,#box{
    top: 90px;
    width: 900px;
	min-width: 320px;
    left: 50%;
    margin-left: -450px;
    display: none;
	-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none;
	-webkit-animation-fill-mode: both;-ms-animation-fill-mode: both;-o-animation-fill-mode: both;animation-fill-mode: both
}

.page>img,.page>div{
	position: relative;
    height: 140px;
    width: 140px;
    margin: 20px;
    padding: 0;
    outline: none;
	font-weight: bold;
    float: left
}

.page>img,.film{box-shadow: 10px 10px 5px grey;cursor: pointer}

#upbutton{
	position: fixed;
	width: 30px;bottom: 20px;right: 4%;
	display: none;
	z-index: 111;
	box-shadow: 4px 4px 4px grey;
	cursor: pointer
}

video{position: relative;left: 0;width: 50%;z-index: 11;border: 1px solid #000;margin: 30px 0px;outline: none}

#iPadx{position: absolute;top: 0;left: 0;width: 100%}

audio{
	display: none;
}

.wheel{margin: 0 !important;-webkit-animation: wheel 500ms linear infinite;animation: wheel 500ms linear infinite}
@-webkit-keyframes wheel{0%{-webkit-transform: rotate(0deg)}100%{-webkit-transform: rotate(23deg)}}
@keyframes wheel{0%{transform: rotate(0deg)}100%{transform: rotate(23deg)}}

/* DATA */
#box{top: -10px;left: 0;margin-left: 0;width: 100%;height: 1000px;background-color: white}
.head{position: absolute;top: 20px;left: 4%;width: 92%;background-color:red;color: white;font-size: 36px}
.wrapper{position: absolute;top: 80px;left: 4%;width: 92%;height: 200px;overflow: hidden}
.weeks{
	position: absolute;left: 0;width: 3200px;height: 200px;
    -webkit-column-width: 300px;-moz-column-width: 300px;-ms-column-width: 300px;column-width: 300px;
	-webkit-column-gap: 20px;-moz-column-gap: 20px;-ms-column-gap: 20px;column-gap: 20px}
.column{position: relative;float: left;margin-right: 20px}/*IE Column workaround*/

.header{position: absolute;top: 300px;left: 4%;width: 92%;background-color: red;color: white;font-size: 36px}
.knowledge{position: absolute;top: 350px;left: 0;width: 92%;padding: 0px 4%;background-color: #fff}

.issues{position: relative;display: inline-block;width: 100%;text-align: center;margin: 30px 0px 100px 0px}
.issues div{color: green;background-color: yellow;padding: 10px;left: 10%;width: 80%}

.yellow{background-color: yellow}

@media (max-device-width:1024px) and (orientation:landscape){.xtraP{display: none}}
@media (max-device-width:1024px) and (orientation:portrait){.xtraL{display: none} .right{text-align: right}}

/* iPad (landscape) */
@media (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape){.page{top: 10px;height: 620px;width: 900px}}
@media (height:748px) and (width:1024px) and (orientation:landscape){#iPadx{height:748px} .page{top: 40px}}/*Web App*/
@media (height:704px) and (width:1024px) and (orientation:landscape){#iPadx{height:704px} .page{top: 5px}}/*Menu Bar*/
/* iPad (portrait) */
@media (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait){
    .page{top: 0;height: 900px;margin-left: -250px;width: 550px}
    .page img{max-width: 90%}
    #iPadx{
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        transform:rotate(90deg);/*-webkit-transform-origin: 32.8125% 50%;*/
		top: 130px;left: -190px;width: 1024px;height: 650px}
}
@media (width:768px) and (height:1004px) and (orientation:portrait){#iPadx{top: 170px;left: -190px;width:1024px} .page{top: 40px}}/*Web App*/
/* Desktop */
@media (min-device-width:1025px){
    body{
		background-color: rgb(170,170,170);
        background-image: url('http://unisciencenet.org/Brian/Hintergrund.png');
        background-repeat: no-repeat;
        background-size: cover;
		-moz-background-size: cover
    }
    #iPadx{display: none}
    #Schrift{position: absolute;top: 700px;width: 860px;left: 50%;margin-left: -430px;display: block}
}
/* Mobile */
@media (max-width:1024px){
	video{width: 80%}}
@media (max-width:900px){
    body{background-color: rgba(170,170,170,.4)}
	.head{font-size: 30px;text-align: center}
	.header{font-size: 22px;text-align: center}
	.knowledge{overflow-x: hidden}
	.page{width: 750px;left: 50%;margin-left: -375px;top: 35px}
	.page img,.page div{height: 120px;width: 120px;margin: 15px}
    #iPadx{display: none}
	#Schrift{position: absolute;bottom: 10px;width: 92%;left: 4%;margin-left: 0;display: block}
	#box img,table{max-width: 99% !important}
	div:not(#box):empty{display: none}
}
@media (max-width:767px){
	.page{top: 50px;width: 600px;margin-left: -300px}
}
@media (max-width:620px){
	.page{width: 470px;margin-left: -235px}
}
@media (max-width:470px){
	.page{top: 50px;width: 300px;margin-left: -150px}
}

/* Touch */
.shake{-webkit-animation: shake 500ms ease;animation: shake 500ms ease}

.outLeft{-webkit-animation: outLeft 700ms ease;animation: outLeft 700ms ease;	-webkit-animation-fill-mode: both;-ms-animation-fill-mode: both;-o-animation-fill-mode: both;animation-fill-mode: both
}
.outRight{-webkit-animation: outRight 700ms ease;animation: outRight 700ms ease;	-webkit-animation-fill-mode: both;-ms-animation-fill-mode: both;-o-animation-fill-mode: both;animation-fill-mode: both
}
.inLeft{-webkit-animation: inLeft 700ms ease;animation: inLeft 700ms ease;	-webkit-animation-fill-mode: both;-ms-animation-fill-mode: both;-o-animation-fill-mode: both;animation-fill-mode: both
}
.inRight{-webkit-animation: inRight 700ms ease;animation: inRight 700ms ease;	-webkit-animation-fill-mode: both;-ms-animation-fill-mode: both;-o-animation-fill-mode: both;animation-fill-mode: both
}

@-webkit-keyframes shake{0%,100%{-webkit-transform: translateX(0);}20%,60%{-webkit-transform:translateX(-10px);}40%,80%{-webkit-transform:translateX(10px);}}
@keyframes shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-10px);}40%,80%{transform:translateX(10px);}}

@-webkit-keyframes outLeft{0%{opacity:1;-webkit-transform:translate3d(0,0,0);}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);}}
@keyframes outLeft{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(-100%);}}

@-webkit-keyframes inLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);}100%{opacity:1;-webkit-transform:translate3d(0,0,0);}}
@keyframes inLeft{0%{opacity:0;transform:translateX(-100%);}100%{opacity:1;transform:translateX(0);}}

@-webkit-keyframes outRight{0%{opacity:1;-webkit-transform:translate3d(0,0,0);}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);}}
@keyframes outRight{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(100%);}}

@-webkit-keyframes inRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);}100%{opacity:1;-webkit-transform:translate3d(0,0,0);}}
@keyframes inRight{0%{opacity:0;transform:translateX(100%);}100%{opacity:1;transform:translateX(0);}}

#flipBox{
    position: absolute;
	width: 140px;height: 186px;
	z-index: 99;
	display: none;
	-webkit-transition: -webkit-transform 700ms;-ms-transition: -ms-transform 700ms;transition: transform 700ms;
	-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none}

#flipper,#front,#back{
	position:absolute;
	top: 0;left: 0;width: 600px;height: 450px;
	display: inherit;
	outline: none;
	z-index: inherit}
#front{width: 450px;height: 450px;}
#front,#back{
	-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
	-webkit-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;
	-webkit-transition: -webkit-transform 700ms;-ms-transition: -ms-transform 700ms;transition: transform 700ms;
	-webkit-transform: scale(.31);-ms-transform: scale(.31);transform: scale(.31)}

#back{
	cursor: pointer;
	-webkit-transform: rotateY(180deg);-ms-transform: rotateY(180deg);transform: rotateY(180deg)}