/*
  Template Name: ShiftKey - Software & Startup Premium Landing Page Template
  Theme URL: https://themeforest.net/user/Jthemes
  Description: ShiftKey - Software & Startup Premium Landing Page Template
  Author: Jthemes
  Author URL: https://themeforest.net/user/Jthemes
  Version: 1.0.0
  Website: www.Jthemes.com
  Tags: Responsive, HTML5 Template, Jthemes, One Page, Landing, Startup, Software, Business, Company, Corporate, Creative, Freelancers
*/


html {
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
} 
 
body {
	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #333;
	font-weight: 300;
  background-color: #f8f9fb;
}

/*------------------------------------------------------------------*/
/*   IE10 in Windows 8 and Windows Phone 8 Bug fix
/*-----------------------------------------------------------------*/

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

/*------------------------------------------*/
/*	PAGE CONTENT
/*------------------------------------------*/

#page { overflow: hidden; }

/*------------------------------------------*/
/*   BACKGROUND SETTINGS FOR SECTION
/*------------------------------------------*/

.bg-scroll {width: 100%;background-attachment: fixed !important;background-repeat: no-repeat;background-position: center center;background-size: cover;}
.bg-fixed {width: 100%;background-repeat: no-repeat;background-position: center center;background-size: cover;}

/*------------------------------------------*/
/*  HEADERS
/*------------------------------------------*/

h1, h2, h3, h4, h5, h6 {color: #222;font-family: 'Noto Sans TC', sans-serif;font-weight: 700;letter-spacing: -0.025rem; }

/*------------------------------------------*/
/*  CONTENT
/*------------------------------------------*/

ul {margin: 0;padding: 0;list-style: none;}
a {text-decoration: none;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
a:hover {color: #444;text-decoration: none;}
a:focus {outline: none;text-decoration: none;}
.img-responsive {display: inline-block; }
.btn {background-color: #16a2e0;color: #fff;font-family: 'Noto Sans TC', sans-serif;font-size: 0.85rem;line-height: 1;font-weight: 700;letter-spacing: 0.5px;text-transform: uppercase;padding: 0.915rem 1.85rem;border: 2px solid #16a2e0;overflow: hidden;position: relative;-webkit-border-radius: 6px;-moz-border-radius: 6px; border-radius: 6px;-webkit-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.btn.btn-md {font-size: 0.875rem;padding: 0.975rem 1.85rem;}
.btn:hover {color: #fff;background-color: transparent;border-color: #fff;}
.btn:focus {color: #ffffff; -webkit-box-shadow: none;box-shadow: none; }
.btn-green {color: #fff;background-color: #06c668;border-color: #06c668;}

/*------------------------------------------*/
/*   SECTION TITLE    
/*------------------------------------------*/

.section-title {margin-bottom: 80px;}
.section-title h2 { color: #444;font-size: 3rem; line-height: 1;font-weight: 700;letter-spacing: -1.5px;margin-bottom: 12px;} 
.section-title p { color: #858585;font-size: 1.3rem;padding: 0 18%;margin-bottom: 0;} 
.white-color, .white-color h2, .white-color h3, .white-color h4, .white-color h5, .white-color h6, .white-color p, .white-color a, .white-color li, .white-color i, .white-color span {color: #fff;}

h2.tra-header { font-size: 7rem; line-height: 1; text-transform: uppercase; font-weight: 900; letter-spacing: -3px;  position: relative; opacity: .08; margin-top: -110px; }

/*------------------------------------------*/
/*   PRELOAD SPINNER   
/*------------------------------------------*/

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #f5f5f5;
}

#loader {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.cssload-loader {
  display: block;
  margin:0 auto;
  width: 60px;
  height: 60px;
  position: relative;
  border: 9px solid rgb(102,116,246);
  animation: cssload-loader 2.3s infinite ease;
  -o-animation: cssload-loader 2.3s infinite ease;
  -ms-animation: cssload-loader 2.3s infinite ease;
  -webkit-animation: cssload-loader 2.3s infinite ease;
  -moz-animation: cssload-loader 2.3s infinite ease;
}

.cssload-loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: rgb(102,116,246);
  animation: cssload-loader-inner 2.3s infinite ease-in;
  -o-animation: cssload-loader-inner 2.3s infinite ease-in;
  -ms-animation: cssload-loader-inner 2.3s infinite ease-in;
  -webkit-animation: cssload-loader-inner 2.3s infinite ease-in;
  -moz-animation: cssload-loader-inner 2.3s infinite ease-in;
}

@keyframes cssload-loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@-o-keyframes cssload-loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@-ms-keyframes cssload-loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes cssload-loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@-moz-keyframes cssload-loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@keyframes cssload-loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

@-o-keyframes cssload-loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

@-ms-keyframes cssload-loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

@-webkit-keyframes cssload-loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

@-moz-keyframes cssload-loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

/*------------------------------------------*/
/*   HEADER    
/*------------------------------------------*/

.navbar { padding: 16px 0;-webkit-transition: all 400ms ease-in-out;-moz-transition: all 400ms ease-in-out;-o-transition: all 400ms ease-in-out;-ms-transition: all 400ms ease-in-out;transition: all 400ms ease-in-out;z-index: 1000!important;}
.navbar.bg-tra {padding: 40px 0;background-color: transparent;  }
.navbar-expand-md .navbar-nav .nav-link {color: #fff;font-size: 1.1rem;font-weight: 500;padding: 0.65rem 1.5rem;margin-left: 1px;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px; }

/*------------------------------------------*/
/*  Navbar Scroll   
/*------------------------------------------*/

.navbar.scroll {padding: 12px 0;background-color: #fff;-webkit-box-shadow: 0 2px 3px rgba(96, 96, 96, .1);-moz-box-shadow: 0 2px 3px rgba(96, 96, 96, .1);box-shadow: 0 2px 3px rgba(96, 96, 96, .1);}

/*------------------------------------------*/
/*  Responsive Burger Menu   
/*------------------------------------------*/

.navbar-light .navbar-toggler,.navbar-dark .navbar-toggler, .navbar.bg-tra .navbar-toggler {color: #333;padding: 0 8px 0 0;font-size: 30px;border: none;}
.navbar-dark .navbar-toggler {color: #f5f5f5;}
.navbar-toggler:focus {outline: 0;}

/*------------------------------------------*/
/*  Logo Image
/*------------------------------------------*/

.logo-white, .logo-black {display: block;}
.scroll.navbar-dark .logo-white, .navbar-light.bg-light .logo-white, .navbar-dark.bg-dark .logo-black, .navbar-dark.bg-tra .logo-black, .navbar-light.bg-tra .logo-white {display: none;}
.scroll.navbar-dark .logo-black { display: block;}

/*------------------------------------------*/
/*   HERO    
/*------------------------------------------*/

.hero-overlay {
  width: 100%;
  height: 100%;
  padding-top: 200px; padding-bottom: 350px; 
  background: linear-gradient(-45deg, rgba(69, 104, 220, 0.92), rgba(176, 106, 179, 0.92));
  background-size: 400% 400%;
  -webkit-animation: Gradient 10s ease infinite;
  -moz-animation: Gradient 10s ease infinite;
  animation: Gradient 10s ease infinite;
  position: relative;
  z-index: 3;
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

#hero {background-image: url(../images/hero.jpg); }
.hero-txt {position: relative; }
#hero h2 { font-size: 11rem; color: #fff; text-transform: uppercase; opacity: .12; font-weight: 900;line-height: 1; letter-spacing: 8px; position: relative; margin-bottom: -60px; z-index: 2; }
#hero h3 {font-size: 3.25rem;color: #fff; font-weight: 700;line-height: 1.25; letter-spacing: -1px; padding: 0 10%; position: relative; z-index: 999;}
#hero p {color: #fff; font-size: 1.35rem; padding: 0 12%; margin-top: 30px;}
.vs {position: absolute;top: -30px;right: 90px; padding: 8px 18px; background-color:transparent;border: 2px solid #fff;color: #fff;font-size: 1.25rem;line-height: 1;font-weight: 700;letter-spacing: 2px;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px; }

.hero-wave {
  background-image: url(../images/hero-wave.png);
  height: 210px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;   
  background-size: cover;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 4;
}

/*------------------------------------------*/
/*	 SELECT    
/*------------------------------------------*/

#select {padding-bottom: 50px; margin-top: -285px; position: relative; }
#select .col-lg-4, #i-pages .col-lg-4 {position: relative;z-index: 3;margin-bottom: 50px;text-align: center;}
.select_link h4 {color: #000;font-size: 1.15rem;line-height: 1;font-weight: 700;	letter-spacing: -0.5px;margin-top: 2.5rem;}
.select_link h4 span {color: #555;font-weight: 600; margin-left: 5px;}
.hover-overlay {width: 100%;height: auto;overflow: hidden;position: relative;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;-webkit-box-shadow: 0 0 10px rgba(10, 10, 10, .2);-moz-box-shadow: 0 0 10px rgba(10, 10, 10, .2);box-shadow: 0 0 10px rgba(10, 10, 10, .2);}
.hover-overlay img {-webkit-transition: all 600ms;-moz-transition: all 600ms;-o-transition: all 600ms;transition: all 600ms;}

.overlay-content {position: absolute;bottom: 0;left: 0;z-index: 20;width: 100%;text-align: center;zoom: 1;opacity: 0;-webkit-transition: all 200ms ease-out;-moz-transition: all 200ms ease-out;-o-transition: all 200ms ease-out;transition: all 200ms ease-out;}
.item-overlay {opacity: 0;-moz-opacity: 0; position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(10, 10, 10, 0.65);-moz-transition: opacity 400ms ease-out;-webkit-transition: opacity 400ms ease-out;-o-transition: opacity 400ms ease-out;transition: opacity 400ms ease-out;}
.hover-overlay:hover > img {transform: scale(1.1);-ms-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-moz-transform: scale(1.1);}
.hover-overlay:hover .item-overlay {opacity: 1; -moz-opacity: 1; }
.select_link:hover .overlay-content {bottom: 43%;opacity: 1; -moz-opacity: 1; }

/*------------------------------------------*/
/*   INNER PAGES
/*------------------------------------------*/

#i-pages {padding-top: 30px; padding-bottom: 50px; position: relative; z-index: 3; }
.page-images { background-image: url(../images/bg-11.png); background-repeat: no-repeat; background-position: center center; background-size: cover; }

/*------------------------------------------*/
/*	 FOOTER  
/*------------------------------------------*/   

.footer {padding-top: 0;padding-bottom: 100px;position: relative;z-index: 1;}
.footer p {color: #757575; font-weight: 400;line-height: 1.2rem;letter-spacing: 0;margin-bottom: 8px;}
.footer .svg-inline--fa {font-size: 1.15rem;}

/*------------------------------------------*/
/*	  SCROLL TO TOP 
/*------------------------------------------*/ 

#scrollUp {display: none;width: 40px;height: 45px;position: fixed;bottom: 20px;right: 40px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background-image: url(../images/icons/back-to-top.png);background-repeat: no-repeat;background-position: 50% 48%;background-color: rgba(35, 35, 35, 0.65);-webkit-transition: all 250ms linear;-moz-transition: all 250ms linear;transition: all 250ms linear; }
#scrollUp:hover {background-color: #151515;}
nav a#pull { display: none;} 


@media (min-width: 1441px) and (max-width: 1920.99px) {
  .header .hover-menu { padding-left: 12%; padding-right: 12%; } 
  .st-content { margin: 0 12%; }.section-title p { padding: 0 22%; }
}

@media (min-width: 1281px) and (max-width: 1440px) {
  .btn {font-size: 0.8rem;padding: 0.85rem 1.65rem;}
  .header .hover-menu { padding-left: 2%; padding-right: 2%; }
  .st-content { margin: 0 2%; }

  .hero-overlay { padding-top: 160px; padding-bottom: 330px;}
  #hero h2 { font-size: 10rem; letter-spacing: 8px; margin-bottom: -60px; }
  #hero h3 {font-size: 3rem;font-weight: 700;letter-spacing: -1px; padding: 0 12%;}
  #hero p {color: #fff; font-size: 1.25rem; padding: 0 12%; margin-top: 30px;}
  .vs {right: 135px; padding: 7px 16px; font-size: 1.15rem;}
  #select .select_link, #i-pages .select_link { padding-left: 10px; padding-right: 10px; }
  .select_link:hover .overlay-content {bottom: 38%;opacity: 1; -moz-opacity: 1; }
  .footer {padding-bottom: 60px;}
}

@media (min-width: 1200px) and (max-width: 1280.99px) {
  .header .hover-menu { padding-left: 2%; padding-right: 2%; }
  .st-content {margin: 0 2%; }

  .section-title {margin-bottom: 60px;}
  .section-title h2 { font-size: 2.5rem;letter-spacing: -1.5px;margin-bottom: 12px;} 
  .section-title p {font-size: 1.2rem;padding: 0 18%;margin-bottom: 0;} 
   h2.tra-header { font-size: 5.85rem; letter-spacing: -3px; opacity: .08; margin-top: -95px; }

  .hero-overlay { padding-top: 160px; padding-bottom: 330px;}
  #hero h2 { font-size: 9rem; letter-spacing: 7px; margin-bottom: -60px; }
  #hero h3 {font-size: 2.85rem;font-weight: 700;letter-spacing: -1px; padding: 0 20%;}
  #hero p {color: #fff; font-size: 1.2rem; padding: 0 15%; margin-top: 30px;}
  .vs { right: 170px; top: -30px; font-size: 1.1rem; padding: 7px 16px }

  #select .select_link, #i-pages .select_link { padding-left: 10px; padding-right: 10px; }
  #i-pages {padding-top: 0; padding-bottom: 30px;  }

  .footer {;padding-bottom: 60px;}
}


@media (min-width: 992px) and (max-width: 1199.99px) {
	.btn { font-size: 0.85rem; padding: 0.8rem 1.6rem; }
  .btn.btn-md { font-size: 0.95rem; padding: 0.9rem 1.75rem; }
  .header .hover-menu { padding-left: 2%; padding-right: 2%; }
  .st-content {margin: 0 2%; }

  .section-title {margin-bottom: 60px;}
  .section-title h2 { font-size: 2.5rem;letter-spacing: -1px;margin-bottom: 12px;} 
  .section-title p {font-size: 1.2rem;padding: 0 10%;margin-bottom: 0;} 
   h2.tra-header { font-size: 5.85rem; letter-spacing: -3px; opacity: .08; margin-top: -95px; }

  .hero-overlay { padding-top: 150px; padding-bottom: 330px;}
  #hero h2 { font-size: 8rem; letter-spacing: 7px; margin-bottom: -50px; }
  #hero h3 {font-size: 2.5rem;font-weight: 700;letter-spacing: -0.5px; padding: 0 20%;}
  #hero p {color: #fff; font-size: 1.125rem; padding: 0 10%; margin-top: 30px;}
  .vs { right: 120px; top: -30px; padding: 6px 13px; font-size: 1.05rem;  }

  #select .select_link, #i-pages .select_link { padding-left: 10px; padding-right: 10px; }
  .select_link h4 { font-size: 1.1rem; margin-top: 2rem; }

  #i-pages {padding-top: 0; padding-bottom: 30px;  }

  .footer {;padding-bottom: 60px;}
  .footer p { font-size: 1rem; margin-bottom: 6px; }
}


@media (min-width: 768px) and (max-width: 991.99px) {	
	.btn { font-size: 0.85rem; padding: 0.8rem 1.6rem; }
  .btn.btn-md { font-size: 0.95rem; padding: 0.9rem 1.75rem; }
  
  .header .hover-menu { padding-left: 3%; padding-right: 3%; }
  .st-content {margin: 0 2%; }

  .section-title {margin-bottom: 60px;}
  .section-title h2 { font-size: 2.15rem;letter-spacing: -1px;margin-bottom: 10px;} 
  .section-title p {font-size: 1.1rem;padding: 0 10%;margin-bottom: 0;} 
   h2.tra-header { font-size: 5rem; letter-spacing: -3px; opacity: .08; margin-top: -85px; }

  .hero-overlay { padding-top: 140px; padding-bottom: 315px;}
  #hero h2 { font-size: 7rem; letter-spacing: 6px; margin-bottom: -45px; }
  #hero h3 {font-size: 2.25rem;font-weight: 700;letter-spacing: -0.5px; padding: 0 10%;}
  #hero p {color: #fff; font-size: 1.05rem; padding: 0 2%; margin-top: 25px;}
  .vs {right:45px;top:-25px; padding: 5px 10px;font-size: 1rem;}

   #select {padding-bottom: 30px; }
  .select_link h4 { font-size: 1.1rem; margin-top: 2rem; }

  #i-pages {padding-top: 0; padding-bottom: 30px;  }

  .footer {;padding-bottom: 60px;}
  .footer p { font-size: 1rem; margin-bottom: 6px; }
}


@media (min-width: 576px) and (max-width: 767.99px) {	
	.btn { font-size: 0.85rem; padding: 0.8rem 1.6rem; }
  .btn.btn-md { font-size: 0.95rem; padding: 0.9rem 1.75rem; }
  
  .header .hover-menu { padding-left: 4%; padding-right: 4%; }
  .st-content { margin: 0 4%; }

  .section-title {margin-bottom: 60px;}
  .section-title h2 { font-size: 2rem;letter-spacing: -1px;margin-bottom: 10px;} 
  .section-title p {font-size: 1rem;padding: 0; margin-bottom: 0;} 
   h2.tra-header { font-size: 4.35rem; letter-spacing: -3px; opacity: .08; margin-top: -75px; }

  .hero-overlay { padding-top: 100px; padding-bottom: 310px;}
  #hero h2 { font-size: 5.5rem; letter-spacing: 5px; margin-bottom: -35px; }
  #hero h3 {font-size: 1.75rem;font-weight: 700;letter-spacing: -0.5px; padding: 0 5%;}
  #hero p {color: #fff; font-size: 1rem; padding: 0 2%; margin-top: 20px;}
  .vs { right: 20px; padding: 5px 10px; font-size: 1rem; }

  #select {padding-bottom: 15px; }
  .select_link h4 { font-size: 1.1rem; margin-top: 2rem; }

  #i-pages {padding-top: 15px; padding-bottom: 30px;  }

  .footer {;padding-bottom: 60px;}
  .footer p { font-size: 0.95rem; margin-bottom: 5px; }
  #scrollUp { bottom: 15px; right: 20px; width: 35px; height: 40px; }
}	


@media (max-width: 575px) { 
	.btn { font-size: 0.85rem; padding: 0.8rem 1.6rem; }
  .btn.btn-md { font-size: 0.95rem; padding: 0.9rem 1.75rem; }
  
  .header .hover-menu { padding-left: 2%; padding-right: 2%; }
  .st-content {margin: 0 2%; }

  .section-title {margin-bottom: 40px;}
  .section-title h2 { font-size: 1.45rem;letter-spacing: -1px;margin-bottom: 10px;} 
  .section-title p {font-size: 0.95rem;padding: 0; margin-bottom: 0;} 
   h2.tra-header { font-size: 3rem; letter-spacing: -3px; opacity: .08; margin-top: -55px; }

  .header { display: none; }
  .hero-overlay { padding-top: 90px; padding-bottom: 300px;}
  #hero h2 { font-size: 3.5rem; letter-spacing: 3px; margin-bottom: -25px; }
  #hero h3 {font-size: 1.25rem;font-weight: 700;letter-spacing: 0; padding: 0;}
  #hero p {color: #fff; font-size: 0.95rem; padding: 0; margin-top: 15px;}
  .vs { right: 17px; padding: 5px 9px; font-size: 0.875rem; }

  #select {padding-bottom: 15px; }
  .select_link h4 { font-size: 1.1rem; margin-top: 2rem; }

  #i-pages {padding-top: 0; padding-bottom: 10px;  }
  
  .footer {;padding-bottom: 60px;}
  .footer p { font-size: 0.95rem; margin-bottom: 5px; }	
  #scrollUp { bottom: 15px; right: 15px; width: 35px; height: 40px; }
}