/* Global Reset & Standards ---------------------- */

*, *:before, *:after { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}

html { 
font-size: 62.5%; 
}

body {  
font-family:  "Aller" ,Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 14px;
line-height: 1.2;
color: #fff;
position: relative;
-webkit-font-smoothing: antialiased; 
background: url(img/bg.jpg) center top no-repeat;
background-color: #67c6cf;
}


/* font-face
 ------------------------------------------------------------------------*/

@font-face {
font-family:"Aller";
src:url("ff/Aller_Rg.eot?")
format("eot"),url("ff/Aller_Rg.woff")
format("woff"),url("ff/Aller_Rg.ttf")
format("truetype"),url("ff/Aller_Rg.svg#Aller")
format("sag");font-weight:normal;font-style:normal;
}


    p.style1 {font: 19px 'Aller', Helvetica, Tahoma, Geneva, sans-serif;}
    p.style2 {font: 13px 'Aller', Helvetica, Tahoma, Geneva, sans-serif;}
	p.style3 {font: 9px 'Aller', Helvetica, Tahoma, Geneva, sans-serif;}
	

/* Back ---------------------- */

.back {
float: right;
color: #67c6cf ;
background-color: #fff;
padding: 5px;
}



/* Links ---------------------- */

a img {
border: none;
}

a {
color: #fff;
text-decoration: none;
line-height: inherit;
}

a:hover {
color: #a0bf33;
}

a:focus {
color: #a0bf33;
}

p a, p a:visited {
line-height: inherit;
}



/* Lists ---------------------- */

ul, ol, dl {
font-size: 14px;
line-height: 1.6;
margin-bottom: 17px;
list-style-position: outside;
}

ul li ul, ul li ol {
margin-left: 20px;
margin-bottom: 0;
}

ul.square, ul.circle, ul.disc {
margin-left: 17px;
}

ul.square {
list-style-type: square;
}

ul.square li ul {
list-style: inherit;
}

ul.circle {
list-style-type: circle;
}

ul.circle li ul {
list-style: inherit;
}

ul.disc {
list-style-type: disc;
}

ul.disc li ul {
list-style: inherit;
}

ul.no-bullet {
list-style: none;
}

ul.large li {
line-height: 21px;
}

ol {
margin-left: 20px;
}

ol li ul, ol li ol {
margin-left: 20px;
margin-bottom: 0;
}


/* contact ---------------------- */

.contact {
text-align: center;
font-size: 12px;
}



/* imprint ---------------------- */

.imprint {
margin-left: auto;
margin-right: auto;
width: 605px;
text-align: left;
color: #fff;
font-size: 14px;

}



/* Footer ---------------------- */

.footer {
margin-top: 200px;
text-align: center;
color: #84dde4;
-webkit-animation: FadeIn 1.5s ease-out 2s 1 alternate;
-moz-animation: FadeIn 1.5s ease-out 2s 1 alternate;
-o-animation: FadeIn 1.5s ease-out 2s 1 alternate;
animation: FadeIn 1.5s ease-out 2s 1 alternate;
}

.footer-fixed {
margin-top: 200px;
text-align: center;
color: #84dde4;

}


/*Custom Styles*/

.main {
width: 960px;
margin: 0 auto;    
transform-style: preserve-3d;
-moz-perspective:600px; 
}

.logo {
width: 500px;
margin-left: 250px;
-webkit-animation: Logo 1.5s ease-out 0s 1 alternate;
-moz-animation: Logo 1.5s ease-out 0s 1 alternate;
-o-animation: Logo 1.5s ease-out 0s 1 alternate;
animation: Logo 1.5s ease-out 0s 1 alternate;
}

.content {
width: 605px;
margin: 0 auto;
-webkit-animation: Content 1.5s ease-out 1s 1 alternate;
-moz-animation: Content 1.5s ease-out 1s 1 alternate;
-o-animation: Content 1.5s ease-out 1s 1 alternate;
animation: Content 1.5s ease-out 1s 1 alternate;
}

.content .line {
width: 605px;
margin: 0 auto;
margin-top: 60px;
background: url(img/line01.png);
background-repeat: no-repeat;
background-position: center;
height: 20px;
}

.content .line .text {
margin:0 auto;
width: 190px;
text-align: center;
color: #2482a5;
font-size: 18px;
font-weight: 300;
}

.content .motto {
padding: 20px 5px 20px 5px;
text-align: center;
color: #fff;
font-size: 22px;
width: 605px;
text-shadow: 0 -1px 1px rgba(139, 212, 237, 0.5);
line-height: 28px;
}

.content .line2 {
width: 605px;
margin: 0 auto;
background: url(img/line02.png);
background-repeat: no-repeat;
background-position: center;
height: 20px;
}

.social {
width: 350px;
margin: 0 auto;
margin-top: 70px;
-webkit-animation: FadeIn 1.5s ease-out 2s 1 alternate;
-moz-animation: FadeIn 1.5s ease-out 2s 1 alternate;
-o-animation: FadeIn 1.5s ease-out 2s 1 alternate;
animation: FadeIn 1.5s ease-out 2s 1 alternate;
}

.social ul {
padding: 0;
margin: 0;
list-style: none;
}

.social ul li {
float: left;
padding: 5px;
opacity: 0.6
}

.social ul li:hover {
opacity: 1;
-webkit-animation: SocialButtons 1.5s ease-out 0s 1;
-moz-animation: SocialButtons 1.5s ease-out 0s 1;
-o-animation: SocialButtons 1.5s ease-out 0s 1;
animation: SocialButtons 1.5s ease-out 0s 1;
}

.videoDivider {
z-index: -1;
position:absolute;
height: 700px;
width: 650px;
background-color: #fff;
opacity: 0.95;
-webkit-box-shadow:  0px 0px 30px 1px rgba(00, 00, 00, 1);
box-shadow:  0px 0px 30px 1px rgba(00, 00, 00, 1);
}



/*CSS Animations*/

.anim {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}



@keyframes Logo
{
 0% {
       transform: perspective(400) rotateX(90deg);
       opacity: 0;
    }
    45% {
       transform: perspective(400) rotateX(-15deg);
    }
    
    75% {
       transform: perspective(400) rotateX(15deg);
    }
    
    100% {
       transform: perspective(400) rotateX(0deg);
       opacity:1;
    } 
}

@-moz-keyframes Logo /* Firefox */
{
  0% {
       transform: rotateX(90deg);
       opacity: 0;
       
    }
    45% {
       transform: rotateX(-25deg);
    }
    
    75% {
       transform: rotateX(25deg);
    }
    
    100% {
       transform: rotateX(0deg);
       opacity:1;
    }  
}

@-webkit-keyframes Logo /* Safari and Chrome */
{
0% {
       -webkit-transform: perspective(400) rotateX(90deg);
       opacity: 0;
    }
    45% {
       -webkit-transform: perspective(400) rotateX(-15deg);
    }
    
    75% {
       -webkit-transform: perspective(400) rotateX(15deg);
    }
    
    100% {
       -webkit-transform: perspective(400) rotateX(0deg);
        opacity:1;
    }  
}

@-o-keyframes Logo /* Opera */
{
0% {
       -o-transform: perspective(400) rotateX(90deg);
       opacity: 0;
    }
    45% {
       -o-transform: perspective(400) rotateX(-15deg);
    }
    
    75% {
       -o-transform: perspective(400) rotateX(15deg);
    }
    
    100% {
       -o-transform: perspective(400) rotateX(0deg);
        opacity:1;
    }  
}



.Logo {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: Logo;
  -o-backface-visibility: visible !important;
  -o-animation-name: Logo;
  backface-visibility: visible !important;
  animation-name: Logo;
  -moz-animation-name: Logo;
  -moz-animation-fill-mode: both;

}





@keyframes Content
{
0% {
       -webkit-transform: perspective(400) rotateY(70deg);
       opacity: 0;
    }
    45% {
       -webkit-transform: perspective(400) rotateY(-15deg);
    }
    
    75% {
       -webkit-transform: perspective(400) rotateY(15deg);
    }
    
    100% {
       -webkit-transform: perspective(400) rotateY(0deg);
        opacity:1;
    }
}

@-moz-keyframes Content /* Firefox */
{
  0% {
       transform: rotateY(70deg);
       opacity: 0;
    }
    45% {
       transform: rotateY(-15deg);
    }
    
    75% {
       transform: rotateY(15deg);
    }
    
    100% {
       transform: rotateY(0deg);
        opacity:1;
    }
}

@-webkit-keyframes Content /* Safari and Chrome */
{
0% {
       -webkit-transform: perspective(400) rotateY(70deg);
       opacity: 0;
    }
    45% {
       -webkit-transform: perspective(400) rotateY(-15deg);
    }
    
    75% {
       -webkit-transform: perspective(400) rotateY(15deg);
    }
    
    100% {
       -webkit-transform: perspective(400) rotateY(0deg);
        opacity:1;
    } 
}

@-o-keyframes Content /* Opera */
{
0% {
       -o-transform: perspective(400) rotateY(70deg);
       opacity: 0;
    }
    45% {
       -o-transform: perspective(400) rotateY(-15deg);
    }
    
    75% {
       -o-transform: perspective(400) rotateY(15deg);
    }
    
    100% {
       -o-transform: perspective(400) rotateY(0deg);
        opacity:1;
    }
}



.Content {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: Content;
  -o-backface-visibility: visible !important;
  -o-animation-name: Content;
  backface-visibility: visible !important;
  animation-name: Content;
  -moz-animation-name: Content;  
  -moz-animation-fill-mode: both;

}




@keyframes SocialButtons /* Opera */
{
    from {
       -webkit-transform: perspective(0) rotateY(0deg);
       -webkit-transform-origin: 50% 50%;
       opacity: 0.6;}
    to {
       -webkit-transform: perspective(0) rotateY(360deg);
       -webkit-transform-origin: 50% 50%;
       opacity:1;}
}
@-moz-keyframes SocialButtons /* Opera */
{
    from {
       transform: rotateY(0deg);
       transform-origin: 50% 50%;
       opacity: 0.6;}
    to {
       transform: rotateY(360deg);
       transform-origin: 50% 50%;
       opacity:1;}
}

@-webkit-keyframes SocialButtons /* Opera */
{
    from {
       -webkit-transform: perspective(0) rotateY(0deg);
       -webkit-transform-origin: 50% 50%;
       -webkit-transform: translateZ(0);
       opacity: 0.6;}
    to {
       -webkit-transform: perspective(0) rotateY(360deg);
       -webkit-transform-origin: 50% 50%;
       -webkit-transform: translateZ(0);
       opacity:1;}
}

@-o-keyframes SocialButtons /* Opera */
{
    from {
       -o-transform: perspective(0) rotateY(0deg);
       -o-transform-origin: 50% 50%;
       opacity: 0.6;}
    to {
       -o-transform: perspective(0) rotateY(360deg);
       -o-transform-origin: 50% 50%;
       opacity:1;}
}




@-webkit-keyframes SocialButtons {
    from {
       -webkit-transform: perspective(0) rotateY(0deg);
       -webkit-transform-origin: 50% 50%;
       opacity: 0.6;
    }
    to {
       -webkit-transform: perspective(0) rotateY(360deg);
        -webkit-transform-origin: 50% 50%;
        opacity:1;
    }
}​




.SocialButtons {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation-name: SocialButtons;
  -o-backface-visibility: visible !important;
  -o-animation-name: SocialButtons;
  backface-visibility: visible !important;
  animation-name: SocialButtons;
  -moz-animation-name: SocialButtons;
  -moz-animation-fill-mode: both;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;

}







@keyframes FadeIn /* Opera */
{
0% {opacity: 0;}
100% {opacity:1;}
}
@-moz-keyframes FadeIn /* Opera */
{
0% {opacity: 0;}
100% {opacity:1; -moz-transform: translateZ(0)}
}

@-webkit-keyframes FadeIn /* Opera */
{
0% {opacity: 0;}
100% {opacity:1; -webkit-transform: translateZ(0)}
}

@-o-keyframes FadeIn /* Opera */
{
0% {opacity: 0;}
100% {opacity:1;}
}






.FadeIn {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation-name: FadeIn;
  -o-backface-visibility: visible !important;
  -o-animation-name: FadeIn;
  backface-visibility: visible !important;
  animation-name: FadeIn;
  -moz-animation-name: FadeIn;
  -moz-animation-fill-mode: both;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}