html,body {
  height:100%;
}


.first {

}


.myButtonLink {
	display: block;
	src: url('/') bottom;
}
.myButtonLink:hover {
	background-position: 0 0;
}

.container-video {
    position: relative;
    width: 100%;
    height: 80%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}


.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.fittobox {                /* give fit to box an aspect ratio */
    display: inline-block; /* let it be styled thusly */
    padding: 0;            /* get rid of pre-styling */
    margin: 0;
    width: 100%;           /* take up full width available */
    padding-top: 56.25%;   /* give aspect ratio of 16:9; "720 / 1280 = 0.5625" */
    height: 0px;           /* don't want it to expand beyond padding */
    position: relative;    /* allow for absolute positioning of child elements */
}

.fittobox > iframe {
    position: absolute;    /* expand to fill */
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
height: 100%;
}




.affix {
  -webkit-transition:padding 0.2s ease-out;
  -moz-transition:padding 0.2s ease-out;  
  -o-transition:padding 0.2s ease-out;         
  transition:padding 0.2s ease-out;

}

@media (min-width:768px) {
    .affix-top {
      /* navbar style at top */
      background:transparent;
      border-color:transparent;
      padding: 15px;
      -webkit-transition:all 0.5s ease;
      -moz-transition:all 0.5s ease; 
      -o-transition:all 0.5s ease;         
      transition:all 0.5s ease;  
    }
}

.carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #2F2E2E;
    border: 1px solid #000;
    border-radius: 10px;
}

.affix-top .nav>li>a {
   color: #000;
}

.affix-top.navbar .nav>li>a:hover,
.affix-top.navbar .navbar-brand
{
   color: #333;
}

.page {margin-top: 5%}

.page2 {padding-top: 4%}

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: right !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}



.img-responsive {
    margin: 0 auto;
}

@font-face {
    font-family:'UltraLight';
    src: url('UltraLight.eot');
	src: url('UltraLight.eot?#iefix') format('embedded-opentype'),
		url('UltraLight.woff2') format('woff2'),
		url('UltraLight.woff') format('woff'),
		url('UltraLight.svg#UltraLight') format('svg');

    unicode-range: U+0020-00FE;
}


@font-face {
    font-family:'Bold';
    src: url('Bold.eot');
	src: url('Bold.eot?#iefix') format('embedded-opentype'),
		url('Bold.woff2') format('woff2'),
		url('Bold.woff') format('woff'),
		url('Bold.svg#Bold') format('svg');

    unicode-range: U+0020-00FE;
}

@font-face {
    font-family:'Light';
    src: url('Light.eot');
	src: url('Light.eot?#iefix') format('embedded-opentype'),
		url('Light.woff2') format('woff2'),
		url('Light.woff') format('woff'),
		url('Light.svg#Light') format('svg');
   
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family:'Helvetica55Roman';
    src: url('HelveticaNeue-Roman.eot');
	src: url('HelveticaNeue-Roman.eot?#iefix') format('embedded-opentype'),
		url('HelveticaNeue-Roman.woff2') format('woff2'),
		url('HelveticaNeue-Roman.woff') format('woff'),
		url('HelveticaNeue-Roman.svg#HelveticaNeue-Roman') format('svg');

    unicode-range: U+0020-00FE;
}

@font-face {
    font-family:'HelveticaNeueLTProThCn';
    src: url('../fonts/font/HelveticaNeueLTPro-ThCn.eot');
	src: url('../fonts/font/HelveticaNeueLTPro-ThCn.eot?#iefix') format('embedded-opentype'),
		url('../fonts/font/HelveticaNeueLTPro-ThCn.woff2') format('woff2'),
		url('../fonts/font/HelveticaNeueLTPro-ThCn.woff') format('woff'),
		url('../fonts/font/HelveticaNeueLTPro-ThCn.svg#HelveticaNeueLTPro-ThCn') format('svg');
    font-weight: 200;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}


@font-face {
    font-family:'HelveticaNeueLTProMdCn';
    src: url('../fonts/font/HelveticaNeueLTPro-MdCn.eot');
	src: url('../fonts/font/HelveticaNeueLTPro-MdCn.eot?#iefix') format('embedded-opentype'),
		url('../fonts/font/HelveticaNeueLTPro-MdCn.woff2') format('woff2'),
		url('../fonts/font/HelveticaNeueLTPro-MdCn.woff') format('woff'),
		url('../fonts/font/HelveticaNeueLTPro-MdCn.svg#HelveticaNeueLTPro-MdCn') format('svg');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@media (max-width: 767px) {
    /* CSS goes here */
    h1 {
    
    font-size: 35px;
     font-family:'UltraLight';
    color: #2F2E2E;
    
}
.bigtext {
    font-family:"HelveticaNeueLTProMdCn", Arial, sans-serif;
    font-size: 25px;
    color: #dfb255;
    line-height: 20px;
    font-weight:600;
}

.small { 
    font-family:"HelveticaNeueLTProThCn", Arial, sans-serif;
    font-size: 11px;
    font-weight:600;
}

.medium { 
    font-family:"Helvetica-LightCond", Arial, sans-serif;
    font-size: 15px;
}

.lineheight {
    
    
    line-height: 15px;
   
    
}
.footer {

  width: 100%;
  padding: 30px;
  height: 80px;
  background-color: #f1f1f2;
     font-family:'Helvetica55Roman';
      color: #2F2E2E;
      font-size:10px;
  
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

.slider-size {
height: 200px; /* This is your slider height */
}
.carousel {
width:100%; 
margin:0 auto; /* center your carousel if other than 100% */ 
}

}







@media (min-width: 767px) {
    /* CSS goes here */
    h1 {
    
    font-size: 45px;
     font-family:'UltraLight';
    color: #2F2E2E;
    
}


.bigtext {
    font-family:"HelveticaNeueLTProMdCn", Arial, sans-serif;
    font-size: 30px;
    color: #dfb255;
    line-height: 30px;
    font-weight:600;
}

.small { 
    font-family:"HelveticaNeueLTProThCn", Arial, sans-serif;
    font-size: 16px;
    font-weight:600;
}

.medium { 
    font-family:"Helvetica-LightCond", Arial, sans-serif;
    font-size: 20px;
}

.lineheight {
    
    
    line-height: 20px;
   
    
}
.footer {

  width: 100%;
  padding: 30px;
  height: 80px;
  background-color: #f1f1f2;
     font-family:'Helvetica55Roman';
      color: #2F2E2E;
       font-size:12px;
  
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

.slider-size {
height: 800px; /* This is your slider height */
}
.carousel {
width:100%; 
margin:0 auto; /* center your carousel if other than 100% */ 
}


}




h3 {
    font-family:"HelveticaNeueLTProThCn", Arial, sans-serif;
    letter-spacing: 4px;
    font-weight: bold;
    font-style: normal;
    font-size: 22px;
    color: #2F2E2E;
    padding-top: 50px;
}

h4 {
    
    font-family:"HelveticaNeueLTProThCn", Arial, sans-serif;
    font-size: 20px;
    color: #dfb255;
    
}

    
    





.info {
    
    font-family:"HelveticaNeueLTProThCn", Arial, sans-serif;
    font-size: 25px;
    color: #2F2E2E;
    margin-bottom: 30px;
    margin-top: 0px;
    
}



.gold {color: #dfb255;}

.grey {color: #2F2E2E;}

.bolder { font-family:'Light';}



.dummy {
   
    min-height: 625px;
}
.in2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 650px;
}
.red{
    
}
.green{
    
}
.yellow{
   background: url('../images/zenfone3-lifestyle.jpg') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    background-size: cover;
}

.blue{
    background-color: blue;
}
.gray{
    background: url('../images/zenfone-lifestyle.jpg') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    background-size: cover;
}
.magenta{
       background: url('../images/zenfone3-photo-lifestyle.jpg') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    background-size: cover;
}

.infobox {
    
    
    width: 170px;
    height: 85px;
    float: left;
    margin: 10px;
    padding-top: 5px;
    
}

#outer {
    float: right;
    position: relative;
    left: -50%;
}

#inner {
    position: relative;
    left: 50%; 
    list-style-type: none;
}

#inner > li {
    float: left;
}

.lefttxt {
    
    text-align: center !important;
    
}








.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #333;
  text-decoration: none;
}
.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;
}
a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}
.btn-default {
    color: #dfb255;
    background-color: #fff;
    border-color: #dfb255;
    border-radius: 0px;
    font-family:'Light';
    letter-spacing: 0px;
    padding: 6px 16px;
    border-radius:5px;
}
.btn-default:focus,
.btn-default.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.btn-default:hover {
  color: #fff;
  background-color: #dfb255;
  border-color: #dfb255;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
  background-color: #fff;
  border-color: #ccc;
}

.btn-primary {
    color: #fff;
    background-color: #dfb255;
    border-color: #dfb255;
    border-radius: 5px;
    font-family:'Light';
    letter-spacing:0px;
    padding: 6px 12px;
}
.btn-primary:focus,
.btn-primary.focus {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
.btn-primary:hover {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
  color: #fff;
  background-color: #204d74;
  border-color: #122b40;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
  background-color: #337ab7;
  border-color: #2e6da4;
}

.btn-gold {
     color: #fff;
  background-color: #D4AF37;
  border-color: #D4AF37;
    border-radius: 15px;
   font-family:'Light';
    letter-spacing: 1px;
    padding: 10px 10px;
    font-size: 14px;
}
.btn-gold:focus,
.btn-gold.focus {
  color: #fff;
  background-color: #ab8b23;
  border-color: #ab8b23;
}
.btn-gold:hover {
  color: #fff;
  background-color: #ab8b23 !important
  border-color: #ab8b23;
}
.btn-gold:active,
.btn-gold.active,
.open > .dropdown-toggle.btn-gold {
  color: #fff;
  background-color: #ab8b23;
  border-color: #ab8b23;
}
.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.open > .dropdown-toggle.btn-success:focus,
.btn-success:active.focus,
.btn-success.active.focus,
.open > .dropdown-toggle.btn-success.focus {
  color: #fff;
  background-color: #ab8b23;
  border-color: #ab8b23;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  background-image: none;
}
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus {
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn-success .badge {
  color: #5cb85c;
  background-color: #fff;
}



.btn-greycolor {
     color: #fff;
  background-color: #4a4a4a;
  border-color: #4a4a4a;
    border-radius: 15px;
   font-family:'Light';
    letter-spacing: 1px;
    padding: 10px 10px;
    font-size: 14px;
}
.btn-greycolor:focus,
.btn-greycolor.focus {
  color: #fff;
  background-color: #3a3a3a;
  border-color: #3a3a3a;
}
.btn-greycolor:hover {
  color: #fff;
  background-color: #3a3a3a !important
  border-color: #3a3a3a;
}
.btn-greycolor:active,
.btn-greycolor.active,
.open > .dropdown-toggle.btn-greycolor {
  color: #fff;
  background-color: #3a3a3a;
  border-color: #3a3a3a;
}
.btn-greycolor:active:hover,
.btn-greycolor.active:hover,
.open > .dropdown-toggle.btn-greycolor:hover,
.btn-greycolor:active:focus,
.btn-greycolor.active:focus,
.open > .dropdown-toggle.btn-greycolor:focus,
.btn-greycolor:active.focus,
.btn-greycolor.active.focus,
.open > .dropdown-toggle.btn-greycolor.focus {
  color: #fff;
  background-color: #3a3a3a;
  border-color: #3a3a3a;
}
.btn-greycolor:active,
.btn-greycolor.active,
.open > .dropdown-toggle.btn-success {
  background-image: none;
}






.btn-white {
     color: #000;
  background-color: #fff;
  border-color: #000;
    border-radius: 15px;
   font-family:'Light';
    letter-spacing: 1px;
    padding: 10px 10px;
    font-size: 14px;
}
.btn-white:focus,
.btn-white.focus {
  color: #000;
  background-color: #fff;
  border-color: #000;
}
.btn-white:hover {
  color: #000;
  background-color: #fff !important
  border-color: #000;
}
.btn-white:active,
.btn-white.active,
.open > .dropdown-toggle.btn-white {
  color: #000;
  background-color: #fff;
  border-color: #000;
}
.btn-white:active:hover,
.btn-white.active:hover,
.open > .dropdown-toggle.btn-white:hover,
.btn-white:active:focus,
.btn-white.active:focus,
.open > .dropdown-toggle.btn-white:focus,
.btn-white:active.focus,
.btn-white.active.focus,
.open > .dropdown-toggle.btn-white.focus {
  color: #000;
  background-color: #fff;
  border-color: #000;
}
.btn-white:active,
.btn-white.active,
.open > .dropdown-toggle.btn-success {
  background-image: none;
}






.btn-black {
     color: #fff;
  background-color: #000;
  border-color: #000;
    border-radius: 15px;
   font-family:'Light';
    letter-spacing: 1px;
    padding: 10px 10px;
    font-size: 14px;
}
.btn-white:focus,
.btn-white.focus {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
.btn-white:hover {
  color: #fff;
  background-color: #000 !important
  border-color: #000;
}
.btn-white:active,
.btn-white.active,
.open > .dropdown-toggle.btn-white {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
.btn-white:active:hover,
.btn-white.active:hover,
.open > .dropdown-toggle.btn-white:hover,
.btn-white:active:focus,
.btn-white.active:focus,
.open > .dropdown-toggle.btn-white:focus,
.btn-white:active.focus,
.btn-white.active.focus,
.open > .dropdown-toggle.btn-white.focus {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
.btn-white:active,
.btn-white.active,
.open > .dropdown-toggle.btn-success {
  background-image: none;
}



.btn-pink {
     color: #fff;
  background-color: #FFB6C1;
  border-color: #FFB6C1;
    border-radius: 15px;
   font-family:'Light';
    letter-spacing: 1px;
    padding: 10px 10px;
    font-size: 14px;
}
.btn-pink:focus,
.btn-pink.focus {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
.btn-pink:hover {
  color: #fff;
  background-color: #000 !important
  border-color: #000;
}
.btn-pink:active,
.btn-pink.active,
.open > .dropdown-toggle.btn-pink {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
.btn-pink:active:hover,
.btn-pink.active:hover,
.open > .dropdown-toggle.btn-pink:hover,
.btn-pink:active:focus,
.btn-pink.active:focus,
.open > .dropdown-toggle.btn-pink:focus,
.btn-pink:active.focus,
.btn-pink.active.focus,
.open > .dropdown-toggle.btn-pink.focus {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
.btn-pink:active,
.btn-pink.active,
.open > .dropdown-toggle.btn-pink {
  background-image: none;
}



.btn-warning {
 color: #fff;
   font-family:'Light';
    background-color: transparent;
    letter-spacing: 1px;
    padding: 4px 10px;
    font-size: 14px;
}
.btn-warning:focus,
.btn-warning.focus {
  color: #fff;
  background-color: #ec971f;
  border-color: #985f0d;
}
.btn-warning:hover {
  color: #fff;
  background-color: transparent;
  border-color: transparent;
    text-decoration: underline;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  color: #fff;
  background-color: #ec971f;
  border-color: #d58512;
}
.btn-warning:active:hover,
.btn-warning.active:hover,
.open > .dropdown-toggle.btn-warning:hover,
.btn-warning:active:focus,
.btn-warning.active:focus,
.open > .dropdown-toggle.btn-warning:focus,
.btn-warning:active.focus,
.btn-warning.active.focus,
.open > .dropdown-toggle.btn-warning.focus {
  color: #fff;
  background-color: #d58512;
  border-color: #985f0d;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  background-image: none;
}

.modal-backdrop.in {
    opacity: 0.8;
}


.3-max-grey {
    
    display: none !important
    
    
}

.navbar-inverse{ background-color:#000;}