/**
 * Kiiwik landing page. Main css file.
 * Created by Erick A. Montañez. September 11th, 2017.
 *
 * Content:
 * x. General styles
 * 1. Navbar
 * 2. Video section
 * x. Screens
 * x. Download
 * x. Footer
 * x. Support classes
 */

/** 1. General styles **/
* {
  -webkit-font-smoothing: antialiased;
}

body {
  padding-top: 56px;
  padding-bottom: 24px;
  font-family: 'Cabin', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

a {
  transition: color 200ms;
}

  @media (max-width: 1199px) {
    .container {
      max-width: 97.5% !important;
    }
  }

  
/** 1. Navbar **/

.navbar {
  padding-left: 15px;
  padding-right: 15px;
  background-color: white;
  box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.3);
}

.navbar-nav {
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 18px;
  font-family: 'Cabin', Arial, sans-serif;
  font-weight: 600;
}

.nav-item {
  text-align: center;
}

.navbar-light .navbar-nav .nav-link {
  color: #bdbdbd;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: #999;
}

.navbar-light .navbar-nav .nav-link.active {
  color: #ff3d00;
}

.navbar-light .navbar-toggler {
  outline: none;
  border: none;
}

.navbar-light .navbar-toggler-icon {
  background-image: url('../images/hamburger.svg');
}

.navbar-light .google-play-link {
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-light .google-play-link img {
  width: 130px;
}

@media (min-width: 576px) {
  .navbar {
    padding-left: 45px;
    padding-right: 45px;
    height: 56px;
  }

  .navbar-light .google-play-link {
    margin-left: 15px;
  }
}

@media (max-width: 575px) {
  .nav-item {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .navbar-light .google-play-link {
    margin-top: 15px;
  }
}

/** 2. Video section **/

.video-section-container {
  background-color: #f5f5f5;
}

#video {
  position: relative;
  height: 624px;
  text-align: center;
}

  /* Video height in MEDIUM screen sizes */
  @media (min-width: 992px) and (max-width: 1199px) {
    #video {
      height: 523px;
    }
  }

  /* Video height in SMALL screen sizes */
  @media (min-width:768px) and (max-width:991px) {
    #video {
      height: 388px;
    }
  }

  /* Video height in EXTRA SMALL screen sizes */
  @media (max-width:767px) {
    #video {
      height: 287px;
    }
  }

#video-wrapper {
  z-index: 999;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 600ms;
}

#video-player {
  width: 100%;
  height: 100%;
}


.separator {
  width: 100%;
  height: 8px;
  background-color: #ff3d00;
}

/** x. Screens **/

#screens {
  width: 100%;
  padding-top: 100px;
  background-color: white;
}

#screens .feature {
  min-height: 436px;
  margin-bottom: 80px;
  padding: 0 120px;
  background-repeat: no-repeat;
}

  /* Feature padding in SMALL screen sizes */
  @media (max-width: 991px) {
    #screens .feature {
      padding: 0;
    }
  }

#screens .left-pulled.feature {
  background-position-x: -160px;
  background-position-y: 15px;
  background-size: auto 75%;
  background-image: url('../images/backgrounds/orange-triangle.svg');
}

#screens .left-pulled.feature:first-of-type {
  margin-top: 0;
}

#screens .right-pulled.feature {
  margin-top: -60px;
  background-position-x: -160px;
  background-position-y: -30px;
  background-size: auto 75%;
  background-image: url('../images/backgrounds/gray-triangle.svg');
}

#screens .feature .meet-kiiwik.screen,
#screens .feature .publish-articles.screen,
#screens .feature .safe-selling.screen {
  width: 188px;
  height: 388px;
}

/* Specific case */
#screens .feature .mutual-friends.screen {
  width: 247px;
  height: 388px;
}

#screens .feature .screen-container {
  margin-bottom: 20px;
}

#screens .right-pulled.feature .screen-container {
  padding-top: 55px;
}

#screens .right-pulled.feature .screen-title,
#screens .right-pulled.feature .screen-description {
  margin-left: auto;
}

#screens .screen-details {
  padding: 0 15px;
}

#screens .screen-details .screen-title {
  display: block;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 700;
  color: #ff3d00;
}

#screens .screen-details .screen-description {
  margin-bottom: 0;
  color: #4a4a4a;
}

  /* Screen details in SMALL and bigger screens */
  @media (min-width: 576px) {
    #screens .left-pulled.feature {
      margin-top: 90px;
      background-size: auto;
      background-position-x: left;
      background-position-y: center;
    }

    #screens .left-pulled .screen {
      position: relative;
      top: -15px;
    }

    #screens .right-pulled.feature {
      margin-top: -60px;
      background-size: auto;
      background-position-x: right;
      background-position-y: center;
    }

    #screens .right-pulled .screen {
      position: relative;
      top: 20px;
    }

    #screens .screen-details {
      padding-top: 130px;
      padding-left: 40px;
      padding-right: 0;
    }

    #screens .screen-details .screen-title,
    #screens .screen-details .screen-description {
      max-width: 360px;
    }
  }

  /* For large devices */
  @media (min-width: 992px) {
    #screens .screen-details .screen-title,
    #screens .screen-details .screen-description {
      max-width: 420px;
    }
  }

/** Download **/

#download {
  height: 400px;
  padding-top: 80px;
  text-align: center;
  background-color: #ff3d00;
  color: white;
}

#download .section-title {
  margin-bottom: 12px;
  font-size: 20px;
}

#download .logo {
  display: block;
  width: 240;
  height: 72px;
  margin: 0 auto 32px;
}

#download .google-play-badge {
  display: block;
  width: 204px;
  height: 60px;
  margin: 0 auto;
  box-shadow: 0 9px 12px -5px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}


/** Footer **/

#footer {
  background-color: white;
}

#footer .copyright,
#footer .social-icons {
  margin: 24px 0 0;
}

#footer .copyright {
  font-size: 14px;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  color: #4a4a4a;
}

#footer .social-icon:last-of-type {
  margin-right: 0;
}

#footer .social-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  cursor: pointer;
}

#footer .facebook.social-icon {
  background-image: url('../images/facebook-icon.svg');
}

#footer .youtube.social-icon {
  background-image: url('../images/youtube-icon.svg');
}

/*  Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  #footer {
    padding: 0 80px;
  }
}


/** x. Support classes **/
.no-padding {
  padding-left: 0;
  padding-right: 0;
}