html,body {
    overflow:hidden;

    /**
    background: #555a5f;
    background: -moz-radial-gradient(center, ellipse cover, #555a5f 0%, #000000 90%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#555a5f), color-stop(90%,#000000));
    background: -webkit-radial-gradient(center, ellipse cover, #555a5f 0%,#000 90%);
    background: -o-radial-gradient(center, ellipse cover, #555a5f 0%,#000000 90%);
    background: -ms-radial-gradient(center, ellipse cover, #555a5f 0%,#000000 90%);
    background: radial-gradient(center, ellipse cover, #555a5f 0%,#000000 90%);
    */

background-image: -webkit-gradient(
    linear,
        left bottom,
            left top,
                color-stop(0, rgb(0,102,204)),
                        color-stop(0.5, rgb(0,0,0)),
                            color-stop(1, rgb(0,102,204))
                            );

    background: -moz-radial-gradient(center, ellipse cover, #0066cc 0%, #000000 90%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#0066cc), color-stop(90%,#000000));
    background: -webkit-radial-gradient(center, ellipse cover, #0066cc 0%,#000 90%);
    background: -o-radial-gradient(center, ellipse cover, #0066cc 0%,#000000 90%);
    background: -ms-radial-gradient(center, ellipse cover, #0066cc 0%,#000000 90%);
    background: radial-gradient(center, ellipse cover, #0066cc 0%,#000000 90%);

    -webkit-perspective:600px;
    -moz-perspective:600px;
    -ms-perspective:600px;
    -o-perspective:600px;
    font-family: 'Lato', Times, 'Times New Roman', serif;
	font-size: 36px;
	font-weight: 200;
	letter-spacing: -0.02em;

	color: #eee;

}

/****** FONT FACE -- Credit to Hakim El Hattab for this part, and the cubic bezier values ******/


@font-face {
	font-family: 'League Gothic';
	src: url('league_gothic-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

h1, h2, h3, h4,a {
	margin: 0 0 20px 0;

	color: #eee;

	font-family: 'League Gothic', sans-serif;
	line-height: 0.9em;
	letter-spacing: 0.02em;

	text-transform: uppercase;
	text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
}

h1 { font-size: 136px; 	}
h2 { font-size: 76px;	}
h3 { font-size: 56px;	}
h4 { font-size: 36px;	}
p { font-size: 20px; }

h1.inverted,
h2.inverted,
h3.inverted,
h4.inverted {
	color: #fff;
	text-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}

h1 {
	text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 20px 20px rgba(0,0,0,.15);
}

.smaller {
    font-size:100px;
    text-align:center;
    z-index:1;
}

.header {
    margin-top:10px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width:600px;
    height:30px;
}

.smooth,.anArrow {
   -webkit-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  -moz-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  -ms-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
   -o-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
   transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}

.slideImg,.imgSlide {
    width:100%;
}

.imgSlideTall,.slideImgTall {
    height:100%;
}

.arrowHolder {
    position:absolute;
    top:5px;
    left:5px;
    height:100px;
    width:110px;
}

.anArrow {
    cursor:pointer;
}

.noArrow {
    opacity:0.1;
}

.yesArrow {
    opacity:1;
}



.imgUp {
    position:relative;
    top:-50px;
}


.imgReflect {
    -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.1)));
}

.imgBevel {
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
}


.slide {

   -webkit-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  -moz-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
  -ms-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
   -o-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
   transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);

   position:absolute;
   top:0px;
   width:100%;
   height:100%;
   overflow:visible;
 /*  border:2px solid white;*/
   display:none;
}

.center {
    display:block;
    opacity:1;
}

.holder {
    margin-top:10%;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    min-width:400px;
    min-height:500px;
    width:40%;
    height:70%;
    max-height:700px;

     -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   transform-style: preserve-3d;
}

.twoUp {
	display: block;
	opacity: 0.0;

	-webkit-transform: translate3d(0, -100%, 0) translate3d(0,-14%,200px);
	   -moz-transform:  translate3d(0, -100%, 0) translate3d(0,-14%,200px);
	    -ms-transform:  translate3d(0, -100%, 0) translate3d(0,-14%,200px);
	        transform:  translate3d(0, -100%, 0) translate3d(0,-14%,200px);
}

.oneUp {
	display: block;
	opacity: 0.7;

	-webkit-transform:  translate3d(0, -50%, 0) translate3d(0,-14%,200px);
	   -moz-transform:  translate3d(0, -50%, 0) translate3d(0,-14%,200px);
	    -ms-transform:  translate3d(0, -50%, 0) translate3d(0,-14%,200px);
	        transform:  translate3d(0, -50%, 0) translate3d(0,-14%,200px);
}

.oneUpExtra {
	display: block;
	opacity: 0.7;

	-webkit-transform:  translate3d(0, -90%, 0) translate3d(0,-14%,200px);
	   -moz-transform:  translate3d(0, -90%, 0) translate3d(0,-14%,200px);
	    -ms-transform:  translate3d(0, -90%, 0) translate3d(0,-14%,200px);
	        transform:  translate3d(0, -90%, 0) translate3d(0,-14%,200px);
}

.twoUpExtra {
    display:block;
    opacity:0.7;

	-webkit-transform:  translate3d(0, -90%, 0) translate3d(0,-14%,200px);
	   -moz-transform:  translate3d(0, -90%, 0) translate3d(0,-14%,200px);
	    -ms-transform:  translate3d(0, -90%, 0) translate3d(0,-14%,200px);
	        transform:  translate3d(0, -90%, 0) translate3d(0,-14%,200px);
}



.twoDown {
	display: block;
	opacity: 0.0;

	-webkit-transform: translate3d(0, 100%, 0)  translate3d(0,35%,-200px);
	   -moz-transform:  translate3d(0, 100%, 0) translate3d(0,35%,-200px);
	    -ms-transform:  translate3d(0, 100%, 0) translate3d(0,35%,-200px);
	        transform:  translate3d(0, 100%, 0) translate3d(0,35%,-200px);
}


.oneDown {
	display: block;
	opacity: 0.7;

	-webkit-transform: translate3d(0, 70%, 0)  translate3d(0,35%,-200px);
	   -moz-transform:  translate3d(0, 70%, 0) translate3d(0,35%,-200px);
	    -ms-transform:  translate3d(0, 70%, 0) translate3d(0,35%,-200px);
	        transform:  translate3d(0, 70%, 0) translate3d(0,35%,-200px);
}

.oneLeft {
	display: block;
	opacity: 0.7;

	-webkit-transform: translate3d(-75%, 0, 0) rotateY(-40deg) translate3d(-75%, 0, 0);
	   -moz-transform: translate3d(-75%, 0, 0) rotateY(-40deg) translate3d(-75%, 0, 0);
	    -ms-transform: translate3d(-75%, 0, 0) rotateY(-40deg) translate3d(-75%, 0, 0);
	        transform: translate3d(-75%, 0, 0) rotateY(-40deg) translate3d(-75%, 0, 0);
}

.oneDownLeft {
	display: block;
	opacity: 0.00;

	-webkit-transform: translate3d(-75%, 190%, 0) rotateY(-50deg) translate3d(-75%, 0, 0);
	   -moz-transform: translate3d(-75%, 190%, 0) rotateY(-50deg) translate3d(-75%, 0, 0);
	    -ms-transform: translate3d(-75%, 190%, 0) rotateY(-50deg) translate3d(-75%, 0, 0);
	        transform: translate3d(-75%, 190%, 0) rotateY(-50deg) translate3d(-75%, 0, 0);
}
.oneDownRight {
display: block;
opacity: 0.00;

-webkit-transform: translate3d(75%, 190%, 0) rotateY(50deg) translate3d(75%, 0, 0);
   -moz-transform: translate3d(75%, 190%, 0) rotateY(50deg) translate3d(75%, 0, 0);
    -ms-transform: translate3d(75%, 190%, 0) rotateY(50deg) translate3d(75%, 0, 0);
        transform: translate3d(75%, 190%, 0) rotateY(50deg) translate3d(75%, 0, 0);
}



.oneRight {
	display: block;
	opacity: 0.7;

	-webkit-transform: translate3d(75%, 0, 0) rotateY(50deg) translate3d(75%, 0, 0);
	   -moz-transform: translate3d(75%, 0, 0) rotateY(50deg) translate3d(75%, 0, 0);
	    -ms-transform: translate3d(75%, 0, 0) rotateY(50deg) translate3d(75%, 0, 0);
	        transform: translate3d(75%, 0, 0) rotateY(50deg) translate3d(75%, 0, 0);
}

.oneUpLeft {
	display: block;
	opacity: 0.00;

	-webkit-transform: translate3d(-75%, -190%, 0) rotateY(-50deg) translate3d(-75%, 0, 0);
	   -moz-transform: translate3d(-75%, -190%, 0) rotateY(-50deg) translate3d(-75%, 0, 0);
	    -ms-transform: translate3d(-75%, -190%, 0) rotateY(-50deg) translate3d(-75%, 0, 0);
	        transform: translate3d(-75%, -190%, 0) rotateY(-50deg) translate3d(-75%, 0, 0);
}

.ruhrho {
    display:block;
    z-index:100;
    position:absolute;
    background:#111;
    height:700px;
    width:700px;
    top:100px;
    left:0px;
}

.imgCenter80 {
    position:relative;
    top:-50px;
    text-align:center;
    height:80%;
}

.oneUpRight {
	display: block;
	opacity: 0.00;

	-webkit-transform: translate3d(75%, -190%, 0) rotateY(50deg) translate3d(75%, 0, 0);
	   -moz-transform: translate3d(75%, -190%, 0) rotateY(50deg) translate3d(75%, 0, 0);
	    -ms-transform: translate3d(75%, -190%, 0) rotateY(50deg) translate3d(75%, 0, 0);
	        transform: translate3d(75%, -190%, 0) rotateY(50deg) translate3d(75%, 0, 0);
}



.twoLeft {
	display: block;
	opacity: 0;

	-webkit-transform: translate3d(-100%, 0, 0) rotateY(-100deg) translate3d(-100%, 0, 0);
	   -moz-transform: translate3d(-100%, 0, 0) rotateY(-100deg) translate3d(-100%, 0, 0);
	    -ms-transform: translate3d(-100%, 0, 0) rotateY(-100deg) translate3d(-100%, 0, 0);
	        transform: translate3d(-100%, 0, 0) rotateY(-100deg) translate3d(-100%, 0, 0);
}

.twoRight {
	display: block;
	opacity: 0;

	-webkit-transform: translate3d(100%, 0, 0) rotateY(100deg) translate3d(100%, 0, 0);
	   -moz-transform: translate3d(100%, 0, 0) rotateY(100deg) translate3d(100%, 0, 0);
	    -ms-transform: translate3d(100%, 0, 0) rotateY(100deg) translate3d(100%, 0, 0);
	        transform: translate3d(100%, 0, 0) rotateY(100deg) translate3d(100%, 0, 0);
}

section.present {
	display: block;
	z-index: 11;
	opacity: 1;
}


@-webkit-keyframes pop {
    0% {
        scale(1)
    }
    50% {
        scale(1.2) }
    100% {
        scale(1) }
}

.arrow {
    border: 2px solid black;
}

.arrow:hover {
    -webkit-animation-name:rotateRight;
    -webkit-animation-duration:1000ms;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function:ease-out;
}

.hasLinks {
    z-index:50000;
}