@font-face{
  font-family:'San Francisco';
  font-weight:400;
  src:url('https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff');
}
html,body{ height:100%; background:#000; color:#fff; font-family:'Montserrat',sans-serif; }
a{ color:#fff; text-decoration:underline; } a:hover{ color:#bbb; }
h1,h2,h3,h4{ font-weight:bold; text-align:center; color:#fff; }
h1{ font-size:2em; } h2{ font-size:1.2em; } h3{ font-size:1.5em; } h4{ font-size:40px; }
p{ text-align:center; color:#fff; }
img{ width:100%; height:auto; padding:16px 0; }

/* Navbar */
.navbar-inverse{ border:none; background:rgba(0,0,0,0.9); }
.navbar .navbar-collapse{ text-align:center; }
.navbar .navbar-nav{ display:inline-block; float:none; }
.navbar-inverse .navbar-nav>li>a{ color:#fff; font-weight:100; }
.navbar-inverse .navbar-nav>li>a:hover{ color:#bdbdbd; }
.navbar-inverse .navbar-toggle .icon-bar{ background:#fff; }
.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{ background:none; }

/* Hero */
.indexhero{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; width:100%; margin:0 auto; font-size:2em; font-weight:300; line-height:2em; }
.indexhero-logo{ width:100%; height:auto !important; margin:0 auto 12px; display:block; filter:invert(1) brightness(1.1); }
@media (min-width:992px){ .indexhero img { max-width:66.6667%; } }
@media (max-width:768px){ .indexhero{ min-height:90vh; padding:60px 0; font-size:1.3em; line-height:1.3em;} .indexhero-logo{ margin-bottom:8px; } }
/* Scroll-down indicator */
.scroll-down {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 40px auto 0;
  width: 60px;
  height: 100px;
  border: 5px solid #fff;
  border-radius: 35px;
  box-sizing: border-box;
  animation: ease-in-out 1.2s both;
}

/* The moving dot inside */
.scroll-down::before {
  content: "";
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  margin-top: 8px;
  animation: scroll-down 2s infinite;
}

/* Animation keyframes */
@keyframes scroll-down {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  60% {
    transform: translateY(18px);
    opacity: 0.3;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Fade-in effect for entrance */
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Sections */
.homepageBackground{ text-align:center; background:url(image/newbackground.png) center/cover no-repeat; height:100vh; margin:0; }
.homepagecontent{ margin-top:-2px; padding-top:120px; padding-bottom:40px; text-align:center; background:#000; color:#fff; }
.footer{ background:#000; color:rgba(255,255,255,0.5); width:100%; text-align:center; padding:2em 0 3em; }

/* Grid */
.row{ font-size:1.5em; }
.thumbnail{ border:none; background:none; margin-bottom:0; }

/* About */
.aboutcontainer{ text-align:left; }
.aboutcontainer h2,.aboutcontainer p{ text-align:left; }
.aboutcontainer img{ width:50px; height:80px; }
.aboutmesmall{ display:none; }
.aboutmesmall img{ width:50px; }
.aboutmesmallprofile{ display:none; width:100%; }

/* Toolkit images */
.designToolKitContainer{ text-align:left; margin-top:24px; }
.designToolKitContainer img{ height:100px; width:auto; display:inline-block; vertical-align:middle; margin-right:12px; margin-bottom:8px; }

/* Misc */
.spacing{ padding:40px 0; line-height:2em; }
.container{ font-family:'Montserrat',sans-serif; }
.checked{ color:orange; }

/* Video */
.video{ min-width:100%; min-height:100%; width:100%; height:100%; }
.videoWrapper{ position:relative; padding-bottom:56.25%; height:0; }
.videoWrapper iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }

/* Optional dark variants */
.statistics{ background:#111; padding:40px 0 60px; margin-bottom:60px; color:#fff; }
.statisticsDark{ background:#222; padding:40px 0 60px; margin-bottom:60px; }
.statisticsDark h2{ color:#fff; }
.greyContainer{ background:#111; padding:40px 0; margin-bottom:60px; color:#fff; }

/* Responsive */
@media screen and (max-width:991px){
  .aboutmelarge{ display:none; }
  h3{ text-align:center; }
  .aboutmesmallprofile{ width:100%; display:block; }
  .aboutmesmall{ display:inline-block; }
  .aboutmesmall img{ width:52px; height:80px; }
}
@media screen and (max-width:768px){
  body{ font-size:14px; }
  .videosara{ display:none; }
  .plussize{ display:none; }
  .smallsize{ display:inline-block; }
  h3{ text-align:center; }
  .saleshublarge{ display:none; }
  .saleshubsmall{ display:inline-block; }
  .aboutmelarge{ display:none; }
  .aboutmesmall img{ width:52px; height:80px; }
}
@media screen and (max-width:480px){
  .kevinauyeung{ font-size:4em; }
  h3{ text-align:center; }
  .aboutmesmall img{ width:52px; height:80px; }
}