/* 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 { background: white; font-family: 'Open Sans', sans-serif;
       font-weight: normal; font-style: normal; font-size: 14px;
       line-height: 1; color: #222222; position: relative;
       -webkit-font-smoothing: antialiased; 
       background-image: url(../img/bg.jpg);}

/* Links ---------------------- */
a img { border: none; }
a { color: #2ba6cb; text-decoration: none; line-height: inherit; }
a:hover { color: #2795b6; }
a:focus { color: #2795b6; }
p a, p a:visited { line-height: inherit; }
/* Misc ---------------------- */
.left { float: left; }
.right { float: right; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.hide { display: none; }
.hide-override { display: none !important; }
.highlight { background: #ffff99; }
#googlemap img, object, embed { max-width: none; }
#map_canvas embed { max-width: none; }
#map_canvas img { max-width: none; }
#map_canvas object { max-width: none; }
/* Reset for strange margins by default on <figure> elements */
figure { margin: 0; }
/* Base Type Styles Using Modular Scale ---------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; font-size: 14px; direction: ltr; }
p { font-family: inherit; font-weight: normal; font-size: 14px; line-height: 1.6; margin-bottom: 17px; }
p.lead { font-size: 17.5px; line-height: 1.6; margin-bottom: 17px; }
aside p { font-size: 13px; line-height: 1.35; font-style: italic; }
h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: bold; font-style: normal; color: #222222; text-rendering: optimizeLegibility; line-height: 1.1; margin-bottom: 14px; margin-top: 14px; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; }
h1 { font-size: 44px; }
h2 { font-size: 37px; }
h3 { font-size: 27px; }
h4 { font-size: 23px; }
h5 { font-size: 17px; }
h6 { font-size: 14px; }
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 22px 0 21px; height: 0; }
.subheader { line-height: 1.3; color: #6f6f6f; font-weight: 300; margin-bottom: 17px; }
em, i { font-style: italic; line-height: inherit; }
strong, b { font-weight: bold; line-height: inherit; }
small { font-size: 60%; line-height: inherit; }
code { font-weight: bold; background: #ffff99; }
/* 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; }
/* Blockquotes ---------------------- */
blockquote, blockquote p { line-height: 1.5; color: #6f6f6f; }
blockquote { margin: 0 0 17px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
blockquote cite { display: block; font-size: 13px; color: #555555; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited { color: #555555; }
abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222222; border-bottom: 1px solid #ddd; cursor: help; }
abbr { text-transform: none; }
input {font-family: 'Open Sans', sans-serif; outline: none;}

/*Custom Styles*/

.main {width: 600px; margin: 0 auto;    
       transform-style: preserve-3d;
       -moz-perspective:600px; }
.logo {width:280px; margin: 0 auto; -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: #ffffff; font-size: 18px; font-weight: 300;}
.content .motto {padding: 20px 5px 20px 5px; text-align: center; color: #ffffff; font-size: 18px; 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;}

.form {width: 455px; margin:  0 auto; margin-top: 25px; padding: 10px; -webkit-animation: FadeIn 1.5s ease-out 2s 1 alternate; -moz-animation: FadeIn 1.5s ease 2s 1 alternate; -o-animation: FadeIn 1.5s ease-out 2s 1 alternate; animation: FadeIn 1.5s ease-out 2s 1 alternate;}
.form .mail{ padding: 3px 3px 3px 38px; float: left; height: 42px; border: 1px solid #bbb; color: #555; width: 300px; background: url('../img/icon_mail.png') #fff no-repeat left center; background-position:5px 13px; font-size: 15px; font-weight: 300; -webkit-border-radius: 5px; border-radius: 5px; }
.form .mail:hover {border-color: #3596b9;}
.form .mail:placeholder {color:#999;}
.form .joinusButton { background: url(../img/button.png); cursor: pointer; float: left; width: 122px; height: 42px; margin-left: 10px; text-align: center; font-weight: 700; color: #fff; font-size: 16px; line-height: 40px; text-shadow: 1px 1px 0px #146482; filter: dropshadow(color=#146482, offx=1, offy=1);}
.form .joinusButton:hover {background: url(../img/button_hover.png);}

.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; }

.formvalidate {background: #ae3030; position: absolute; display: none; -webkit-border-radius: 5px; margin-top: -37px; border-radius: 5px; padding: 10px; text-align: center; font-size: 14px; font-weight: 300; color: #fff;}
.formvalidate .arrow {position: absolute; margin-top: 8px; margin-left: -3px; }

.formsent {background: #86ae30; position: absolute; width: 550px; margin-left: -60px; -webkit-border-radius: 5px; margin-top: -20px; border-radius: 5px; padding: 20px 10px 20px 10px; text-align: center; font-size: 14px; line-height: 20px; font-weight: 300; color: #fff;}
.formsent span {font-weight: normal; display: block;}
.formsent .arrow {position: absolute; margin-top: 14px; margin-left: 253px;}

.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;
}


/*For responsive*/

@media screen and (max-width: 640px){
    body {
        zoom: 0.8;
		-moz-transform: scale(0.8);}
}

@media screen and (max-width: 480px){
    body {
        zoom: 0.6;
		-moz-transform: scale(0.6); }
}

@media screen and (max-height: 640px){
    body {
        zoom: 0.7;
		-moz-transform: scale(0.7); }
	.main { margin-top:50px !important;}
}