/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,section,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,section,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
* { box-sizing:border-box; *behavior:url("boxsizing.htc"); }
@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'nexabold';
    src: url("../font/nexabold-webfont.eot");
    src: url("../font/nexabold-webfont.eot-#iefix") format('embedded-opentype'), url("../font/nexabold-webfont.woff") format('woff'), url("../font/nexabold-webfont.ttf") format('truetype'), url("../font/nexabold-webfont.svg#nexabold") format('svg');
}
@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'nexalight';
    src: url("../font/nexalight-webfont.eot");
    src: url("../font/nexalight-webfont.eot-#iefix") format('embedded-opentype'), url("../font/nexalight-webfont.woff") format('woff'), url("../font/nexalight-webfont.ttf") format('truetype'), url("../font/nexalight-webfont.svg#nexalight") format('svg');
}
@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'nexaheavy';
    src: url("../font/nexaheavy-webfont.eot");
    src: url("../font/nexaheavy-webfont.eot-#iefix") format('embedded-opentype'), url("../font/nexaheavy-webfont.woff") format('woff'), url("../font/nexaheavy-webfont.ttf") format('truetype'), url("../font/nexaheavy-webfont.svg#nexaheavy") format('svg');
}
@font-face {
    font-family: 'playfairitalic';
    src: url("../font/playfairdisplay-italic-webfont.eot");
    src: url("../font/playfairdisplay-italic-webfont.eot-#iefix") format('embedded-opentype'), url("../font/playfairdisplay-italic-webfont.woff") format('woff'), url("../font/playfairdisplay-italic-webfont.ttf") format('truetype'), url("../font/playfairdisplay-italic-webfont.svg#playfair_displayitalic") format('svg');
    font-weight: normal;
    font-style: normal;
}
html, body {
    width: 100%;
    height: 100%; 
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: 'nexalight', Helvetica, sans-serif;
    line-height: 1;
    color: #fff;

}

html.home{
  overflow: hidden;
}

body.main.home {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

h1.title{
  height: 0;
  text-indent: -99999px;
}

 video.bgvid {
    position: relative;
   /* right: 0; top:0;*/
    transform: translate(-50%, 0%);
    left: 50%;
    top: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index:0;
    /*background: url(img/1.png) no-repeat;*/
    background-size: cover;
 }
.home video.bgvid {
    position: absolute;
}

.screen nav,
.sectiontitle {
  position: absolute;
  top: 50%;
  display: block;
  float: left;
  margin: 0 auto;
  padding-bottom: 20px;
  width: 100%;
  color: white;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.0625em;
  font-size: 4em;
  font-family: 'nexaheavy';
  -webkit-transform:translateY(-50%);
  transform:translateY(-50%);
  z-index: 502;
}
.sectiontitle:after{
  position: absolute;
  left: 50%;
  display: block;
  margin-top: 50px;
  margin-left: -60px;
  width:120px;
  height: 4px;
  background: white;
  content:'';
}

.icon-logo{
  margin-left: -1px;
}

nav a,
nav a:visited,
nav a:link,
nav a:active {
  text-decoration: none;
  color: white;
}
/*@background*/

.page, .cover {
    width: 100%;
    height: 100%;
    margin: auto;
    text-align: center;

}
.cover {
    background: url("../img/cover-home-index.jpg") center center no-repeat;
    background-size: cover;
}
/*.page {
    border: 20px white solid;
}*/
/*.page:before {
  z-index: -1;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;00
  left: 0;
  background-image: -webkit-linear-gradient(to bottom right,#f36f50, #f7941e, #fcce2d);
  opacity: .7; 
}
*/
/*@cloud*/
#sky {
  position: absolute;
  height: 100%;
  width: 100%; 
}
#sky .cloud {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#sky #cloud_1 {
  background: url("../img/midground2-2560.png") center center no-repeat;
  background-size: cover;
}  

#sky #cloud_2 {
  background: url("../img/midground1-2560.png") center center no-repeat;
  background-size: cover;
}

#sky #cloud_3 {
  background: url("../img/foreground2-2560.png") center center no-repeat;
  background-size: cover;
}

#sky #cloud_4 {
  background: url("../img/foreground1-2560.png") center center no-repeat;
  background-size: cover;
}
/*@gradient*/
#gradient{
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  content: '';
  opacity: .75;
}
/* nav */

/**** nav.menu-logo ***/

nav.menu-logo a:before {
  color: white!important;
}

nav.scroll-menu.menu-logo a.bt-menu-trigger .bar {
  background: white!important;
  }

@media (max-width: 767px){  
/*nav.menu-logo .logo.icon-logo:before{content: "\e601";}*/
nav .icon-logo{
	background: url(../img/logo_small.png) no-repeat;
    width: 300px;
    height: 90px;
}
}
@media (min-width: 771px) {
nav .icon-logo{
	background: url(../img/logo.png) no-repeat;
    width: 300px;
    height: 90px;
}
.pin li {
    float: left;
}
}

nav .icon-logo_bird{
	background: url(../img/logo_small.png) no-repeat;
    width: 100px;
    height: 100px;
}

/**** nav.origin *****/
nav.origin a:before {
  color: white!important;
  transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;

}
nav .logo:before {
  transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
}
nav.origin a.bt-menu-trigger .bar
{
  background: white!important;
  
}
/**** nav.origin end *****/

nav .logo {
    position: fixed;
    top: 5px;
    left: 20px;
    z-index: 10000;
    display: block;

    font-size: 90px;
    cursor: pointer;
	
}


nav .navbutton a{
    display: block;
    position: fixed;
    top: 28px;
    right: 26px;
    z-index: 10000;
    display: block;
    width: 24px;
    height: 20px;
    text-indent: -9999px;
}


.navbutton:hover {
    cursor: pointer;
}

a.bt-menu-trigger .bar {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  top:8px;
  background-color: #fff;
  font-size: 0px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;


    -webkit-transition: all 350ms ease-in;
    transition: all 350ms ease-in;


}


a.bt-menu-trigger .bar-top {
    top: 0px;

     -webkit-transition-delay:translate3d 0s;
            transition-delay:translate3d 0s;
    
}
a.bt-menu-trigger .bar-bottom {
    top: 16px;

     -webkit-transition-delay:translate3d 0s;
            transition-delay:translate3d 0s;

}



a.bt-menu-trigger:hover .bar-top.move {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);

    -webkit-transition: all 0.2s ease-out;
            transition: all 0.2s ease-out;
   
}
a.bt-menu-trigger:hover .bar-bottom.move {
    -webkit-transform: translate3d(0,4px,0);
            transform: translate3d(0,4px,0);

     -webkit-transition: all 0.2s ease-out;
            transition: all 0.2s ease-out;

}

a.bt-menu-trigger.bt-close:hover .bar-top.move {
    -webkit-transform: translate3d(0,-15px,0);
            transform: translate3d(0,-15px,0);

    -webkit-transition: all 350ms ease-in;
            transition: all 350ms ease-in;
   
}
a.bt-menu-trigger.bt-close:hover .bar-bottom.move {
    -webkit-transform: translate3d(0,15px,0);
            transform: translate3d(0,15px,0);

     -webkit-transition: all 350ms ease-in;
            transition: all 350ms ease-in;

}



a.bt-menu-trigger .bar-1,
a.bt-menu-trigger .bar-2,
a.bt-menu-trigger .bar-3,
a.bt-menu-trigger .bar-4 {
    -webkit-transition-delay:all 0s;
    transition-delay:all 0s;
}
a.bt-menu-trigger .bar-1 {
  -webkit-transform: rotate3d(0,0,1,45deg) translate3d(-30px,0,0);
   -webkit-transition:none;
   -webkit-transform: rotate3d(0,0,1,45deg) translate3d(-30px,0,0);
           transform: rotate3d(0,0,1,45deg) translate3d(-30px,0,0);
   -webkit-transition:none;
           transition:none;
  opacity: 0;

}
a.bt-menu-trigger .bar-2 {
  -webkit-transform: rotate3d(0,0,1,-45deg) translate3d(30px,0,0);
          transform: rotate3d(0,0,1,-45deg) translate3d(30px,0,0);
  -webkit-transition:none;
          transition:none;
  opacity: 0;
}
a.bt-menu-trigger .bar-3 {
  -webkit-transform: rotate3d(0,0,1,45deg) translate3d(30px,0,0);
          transform: rotate3d(0,0,1,45deg) translate3d(30px,0,0);
  -webkit-transition:all 0.3s ease-out;
          transition:all 0.3s ease-out;
  opacity: 0;

}
a.bt-menu-trigger .bar-4 {
  -webkit-transform: rotate3d(0,0,1,-45deg) translate3d(-30px,0,0);
          transform: rotate3d(0,0,1,-45deg) translate3d(-30px,0,0);
  -webkit-transition:all 0.3s ease-out;
          transition:all 0.3s ease-out;
  opacity: 0;
}


a.bt-menu-trigger.bt-close .bar {
  height: 3px;
  background: white;
} 

a.bt-menu-trigger.bt-close .bar-top {
  
  -webkit-transform: translate3d(0,-15px,0);
          transform: translate3d(0,-15px,0);

  -webkit-transition:all 0.5s ease-in;
          transition:all 0.5s ease-in;
  opacity: 0;
}

a.bt-menu-trigger.bt-close .bar-center {

  -webkit-transform:rotate3d(0,0,1,90deg);
          transform:rotate3d(0,0,1,90deg);

  -webkit-transition:all 0.5s ease-in;
          transition:all 0.5s ease-in;
  opacity: 0;
}

a.bt-menu-trigger.bt-close .bar-bottom {
 
  -webkit-transform: translate3d(0,15px,0);
          transform: translate3d(0,15px,0);

  -webkit-transition:all 0.5s ease-in;
          transition:all 0.5s ease-in;
  opacity: 0;
}

a.bt-menu-trigger.bt-close .bar-1 {
 
  -webkit-transform: rotate3d(0,0,1,45deg) translate3d(0,0,0);
          transform: rotate3d(0,0,1,45deg) translate3d(0,0,0);

  -webkit-transition:all 0.3s ease-in;
          transition:all 0.3s ease-in;
  opacity: 1;
}
a.bt-menu-trigger.bt-close .bar-2 {
  
  -webkit-transform: rotate3d(0,0,1,-45deg) translate3d(0,0,0);
          transform: rotate3d(0,0,1,-45deg) translate3d(0,0,0);

  -webkit-transition:all 0.3s ease-in;
          transition:all 0.3s ease-in;
  opacity: 1;
}

a.bt-menu-trigger.bt-close .bar-3 {
  
  -webkit-transform: rotate3d(0,0,1,45deg) translate3d(0,0,0); 
          transform: rotate3d(0,0,1,45deg) translate3d(0,0,0);

  -webkit-transition:opacity 1.5s ease-in;
          transition:opacity 1.5s ease-in; 
  opacity: 1;

}
a.bt-menu-trigger.bt-close .bar-4 {
  
   -webkit-transform: rotate3d(0,0,1,-45deg) translate3d(0,0,0);
           transform: rotate3d(0,0,1,-45deg) translate3d(0,0,0);

   -webkit-transition:opacity 1.5s ease-in;
           transition:opacity 1.5s ease-in;
  opacity: 1;
}
a.bt-menu-trigger.bt-close .bar-1,
a.bt-menu-trigger.bt-close .bar-2,
a.bt-menu-trigger.bt-close .bar-3,
a.bt-menu-trigger.bt-close .bar-4 {
    -webkit-transition-delay:0.5s;
   transition-delay:0.5s;
}


/*button end*/

.content .text-content.intro {
  width: 100%;
  min-height: 412px;
  /*overflow: hidden;*/
  position: relative;
}

.content h2 {
  
  /*top: 150%;*/
  /*display: block;*/
  margin: 90px auto 50px;
  /*padding-bottom: 20px;*/
  width: 90%;
  text-align: center;
  font-size: 1.5em;
  line-height: 150%;
  font-family: 'nexaheavy';
/*  -webkit-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%);*/
}

.text-content {
  width: 100%;
  max-width: 980px!important;
  padding: 50px 0;
  margin: 0 auto;
  text-align: center; 
  overflow: hidden;
}

.text-content p {
  width: 90%;
  font-size: 1.125em;
  font-family: "nexabold","HiraginoSansGB-W6","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  color: #9d9b97; 
  line-height: 1.5; 
  text-align: center;
  margin: 35px auto;
}


.text-content.intro p {

  display: block;
  margin: auto;
  width: 100%;
  color: #b4b3b1;
  text-align: center;
  font-family: "nexabold","HiraginoSansGB-W6","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  font-size: 1em;
  line-height: 50px;
  /*position:absolute;*/
  /*bottom: 50px; */
  left: 0;

}

.text-content.intro p:before{
  position: absolute;
  left: 50%;
  display: block;
  margin-left: -40px;
  width:80px;
  height: 4px;
  background: #e5e5e5;
  content:'';

}

.home-title {
    position:absolute;
    display: block;
    margin: 0;
    /*  top:500px;*/
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 200;
}
.home-title h1 {
    font-family: 'nexaheavy', Helvetica, sans-serif;
    font-size: 2.75em;
    color: #fff;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}


/*h1:after {

  display: block;
  width: 180px;
  height: 2px;
  margin: 40px auto 0px;
  background: white;
  content: '';
}*/

.home-title a {
    display: block;
    font-family: 'playfairitalic', sans-serif;
    font-size: 1.625em;
    text-align: left;
    letter-spacing: 0.05em;
    color: #fff;
    width: 216px;
    margin: auto;
    padding: 15px;

    text-decoration: none;
}
.home-title a span {
    /* float: right; */
    text-align: center;
    display: block;
    margin: 0 auto 0px;
    font-family: 'nexaheavy';
 
}
.page {
    width: 100%;
    height: 100%;
    background-size: auto;
}


.home-title {
    /*position:fixed;*/
    display: block;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}




.page1 {
    background-image: -ms-linear-gradient(top left, #f7941e, #f36f50);
    background-image: -o-linear-gradient(top left, #f7941e, #f36f50);
    background-image: -moz-linear-gradient(top left, #f7941e, #f36f50);
    background-image: -webkit-linear-gradient(top left, #f7941e, #f36f50);
    background-image: linear-gradient(to bottom right, #f7941e, #f36f50);
}



/**** border *****/

.border {
    position: fixed;
    background-color: white;
    z-index: 990;
    -webkit-transition: background-color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background-color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);

    /*transition: 0.6s ease-in;
    -webkit-transition: 0.6s ease-in;*/
     transition: 0.1s ease-in;
  -webkit-transition: 0.1s ease-in;
   
}

.home .border {

  transition: 0.6s ease-in;
  -webkit-transition: 0.6s ease-in;
   
}

.menu-open .border {
    background-color: #333
}


   .border.top{width:100%;height:0;top:0px;left:0}
   .border.left{width:0;height:200%;top:0;left:0}
   .border.bottom{width:100%;height:0;bottom:0;left:0}
   .border.right{width:0;height:200%;top:0;right:0}

.is-scrolled.border {
   /*transition: 0.6s ease-in;
  -webkit-transition: 0.6s ease-in;*/
  transition: 0.1s ease-in;
  -webkit-transition: 0.1s ease-in;
}

.home .is-scrolled.border {

  transition: 0.6s ease-in;
  -webkit-transition: 0.6s ease-in;
}


  .is-scrolled.border.top,
  .is-scrolled.border.bottom{
    height: 8px;
  }
  .is-scrolled.border.left,
  .is-scrolled.border.right{
    width: 8px;
  }


/********** clearfix ***********/
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

/**********
* footer *
***********/
footer {
  width: 100%;
  overflow: hidden;
}
 footer h3 {
   width: 100%;
   font-family: "playfairitalic"; 
   font-size: 1.5em;
   color: #9d9b97;
   text-align: center;
   margin: 110px auto 60px;
 }


 footer h3:before {
   position: absolute;
   display: block;
   width:80px;
   height: 4px;
   background: #e5e5e5;
   content:'';
   left:50%;
   margin-top: -50px;
   margin-left: -40px;

 }

 footer .badges {
   display: block;
   width: 100%;
   text-align: center;
 }

 footer .badges .badge {
   width: 100%;
   height: 180px;
/*   background: #e5e5e5;*/
   float: left;
   background-repeat: no-repeat;
   background-size: cover;
   text-align: center;
 }

 footer .badges,
 footer .badges .badge {
   overflow: hidden;
   position: relative;
   background-size: cover;
   background-size: 100%;
   background-position: center;

   -webkit-transition: all 0.3s ease;
           transition: all 0.3s ease;

 }

footer .badges .badge:before {
   width: 100%;
   height: 100%;
   content: "";
    position: absolute;
    left: 0;
   overflow: hidden;
   background-size: cover;
   background-position: center;

   -webkit-transition: all 0.3s ease;
           transition: all 0.3s ease;

 } 
/*
 footer .badges .badge:hover {
   background-size: 120%;
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
 }
*/
footer .badges .badge:hover::before {
  transform: scale(1.2);
}
 footer .badges .badge a {
   z-index: 10;
   position: absolute;
   left: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 100%;
 }
footer .badges .badge a img {
  width: 160px;
  height: 160px;
  margin: 15px auto;
}
/************* end footer************/
.grey-back {
  width: 100%;
  background-color: #f9f9f9;
}


  .icon-move {
    margin-top: 20px;
    height: 60px;
    width: 60px;
    animation: icon-move 1.2s steps(25) infinite;
    -webkit-animation: icon-move 1.2s steps(25) infinite;
    -moz-animation: icon-move 1.2s steps(25) infinite;
    -o-animation: icon-move 1.2s steps(25) infinite;
    z-index: 500;
    }

  .icon-desktop {
    background-image: url("../img/icon-phone-desktop.png"); 
    background-size: 100%;
    background-position: 0 0;
    position: absolute;
    bottom: 10%;
    left: 50%;
    margin-left: -30px;
    }
   
   .icon-move p {
    font-family: "nexabold";
    font-size: 0.875em;
    width: 200px;
    margin-top: 70px;
    margin-left: -70px;
    }

  @-o-keyframes icon-move {  
    0% {background-position: 0 0; } 
    100% {background-position: 0 -1500px; } 
}
  @-moz-keyframes icon-move {  
    0% {background-position: 0 0; } 
    100% {background-position: 0 -1500px; } 
}
  @-webkit-keyframes icon-move {  
    0% {background-position: 0 0; } 
    100% {background-position: 0 -1500px; } 
  }
@keyframes icon-move {  
    0% {background-position: 0 0; } 
    100% {background-position: 0 -1500px; } 
  }


@media only screen and (min-width: 601px) and (max-width: 770px) {

  .home-title h1{font-size:3.75em;}
  .icon-desktop {
           background-image: url("../img/icon-desktop.png"); 
  }
          nav .logo {
              top: 12px;
              left: 22px;
          }
          nav .navbutton a {
              display: block;
              top: 48px;
              right: 48px;
          }
          
          .content h2 {
             margin: 85px auto 50px;
          }


           .is-scrolled.border.top,
            .is-scrolled.border.bottom{
               height: 16px;
            }
            .is-scrolled.border.left,
            .is-scrolled.border.right{
              width: 16px;
            }



}


@media only screen and (min-width: 771px){

  .home-title h1{ font-size:3.75em;}
        .icon-desktop {
         background-image: url("../img/icon-desktop.png"); 
        }
      .content {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        overflow: hidden;

      }
     
     .content h2 {
        margin: 70px auto 50px;
       font-size: 2.75em;
       width: 100%;
     }

      .text-content {
        padding: 50px 50px 50Ppx;
      }

      .text-content p {
        width: 100%;
        font-size: 1.125em;
      }

      .image-content {
        max-width: 980px;
        margin: 0 auto;
      }
      .limit-content {
        max-width: 1180px;
        margin: auto;
        overflow: hidden;
      }

      nav .logo {
          top: 20px;
          left: 40px;
      }
      nav .navbutton a {
          top: 48px;
          right: 48px;
      }
      nav.menu-logo a.bt-menu-trigger .bar,
      nav.origin.menu-logo a.bt-menu-trigger .bar {
        background: white!important;
      }

         .is-scrolled.border.top,
          .is-scrolled.border.bottom{
            height: 20px;
          }
          .is-scrolled.border.left,
          .is-scrolled.border.right{
            width: 20px;
          }

       footer h3 {
          font-size: 2.25em;
       }
       footer .badges .badge {
         width: 33.3%;
         height: 260px;
		 padding-top: 5px;
       }
      footer .badges .badge a img {
          width: 200px;
          height: 200px;
          margin: 50px auto;
        } 

}