/*==================================================
  Template Name: Void 
  Description: Onepage Parallax Personal Portfolio Template
  Author: thunder-team
  Author URL: https://themeforest.net/user/thunder-team
  Version: 1.1
==================================================*/

/*==================================================

  [Table of Contents]
  --------------------------------------------------
  - body
    - Typography
    - Common 
    - Navigation
    - Homepage
      - Intro
      - Demo
      - Responsive
      - Features
      - Footer
    - Media Queries 
      - 992px
      - 768px
      - 480px
    - Preloader
    
==================================================*/


body{
  background: #fff;
  height: 100%;
  width: 100%;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  line-height: 28px;
  color: #333;
}


/*==================================================
  Typography
  ==================================================*/

h1, h2, h3, h4, h5{
  font-family: 'Poppins', sans-serif;
  color: #000;
  font-weight: 700;  
}

h1{
  line-height: 60px;
}

.headline{
  margin-bottom: 0px;
  position: relative;
}

.headline::before{
  content: "";
  background: transparent;
  border: 2px solid #14ea70;
  width: 65px;
  height: 120px;
  position: absolute;
  left: 0;
  right: 0;
  top: -50px;
  margin: auto;
  z-index: -1;
}

.headline h2{
  text-transform: uppercase;
  font-size: 36px;
  line-height: 60px;
}

.section-title{
  font-size: 36px;
  line-height: 60px;
}

.white{
  color: #fff;
}

.color{
  color: #14ea70;
}

a{
  color: #F9ED32;
}

a:hover{
  color: #D7DF23;
}

a,
a:active,
a:focus 
{outline: none;}


/*==================================================
  Common
  ==================================================*/

section{
  position: relative;
}
  
.container{
  max-width: 1030px;
  position: relative;
}

.container-fluid{
  position: relative;
}

.wrapper{
  padding-top: 80px;
  padding-bottom: 20px;
  position: relative;
}

.btn-primary{
  background: #14ea70;
  border: 2px solid #14ea70;
  padding: 5px 30px;
  font-family: 'Poppins', sans-serif;
  color: #000;
  font-size: 16px;
  border-radius: 50px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus{
  background: #15e99d;
  border: 2px solid #15e99d;
  color: #000;
  text-decoration: none;
  transition: all .5s;
}

.btn-secondary{
  background: #fff;
  border: 2px solid #14ea70;
  padding: 5px 30px;
  font-family: 'Poppins', sans-serif;
  color: #14ea70;
  font-size: 16px;
  font-weight: 700;
  border-radius: 50px;
  margin-bottom: 20px;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus{
  background: #14ea70;
  border: 2px solid #14ea70;
  color: #000;
  transition: all .5s;
}

.form-control{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-bottom: 2px solid #f5f5f5;
  border-radius: 0;
  font-size: 15px;
}

ul.element-scroll-parallax li{
  list-style: none;
  position: absolute;
  z-index: 999;
}

.margin-0{
  margin: 0 !important;
}

.overflow-h{
  overflow: hidden;
}


/*==================================================
  Navigation
  ==================================================*/

#header.on-scroll{
  left: 0;
  position: fixed;
  right: 0;
  transform: translateY(-50px);
  transition: all 0.5s ease-in-out 0s;
  visibility: hidden;
  z-index: 1001;
}
#header.on-scroll.visible{
  transform: translateY(0px);
  visibility: visible;
}
  
nav.nav-center-aligned{
  background: #000;
  border: 0;
  border-radius: 0;
}

nav.nav-center-aligned .navbar-collapse{
  text-align: center;
}

nav.nav-center-aligned .navbar-nav{
  display: inline-block;
  float: none;
  vertical-align: top;
}

nav.nav-center-aligned .navbar-nav li:last-child::after{
  content: none;
}

nav.nav-center-aligned .navbar-nav li a{
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  padding: 25px 20px 0 20px;
}

nav.nav-center-aligned .navbar-nav li a:hover,
nav.nav-center-aligned .navbar-nav li a:focus,
nav.nav-center-aligned .navbar-nav li a:active{
  color: #14ea70;
  transition: all 1s;
}

nav.nav-center-aligned .navbar-nav li.active a,
nav.nav-center-aligned .navbar-nav li.active a:hover
nav.nav-center-aligned .navbar-nav li.active a:active,
nav.nav-center-aligned .navbar-nav li.active a:focus{
  background: transparent !important;
  color: #14ea70 !important;
  transition: all .2s;
}

nav.nav-center-aligned .navbar-nav li a span{
  position: absolute;
  font-size: 11px;
  top: 5px;
  left: 15px;
  color: #6D6E71;
}

nav.nav-center-aligned .navbar-collapse, 
nav.nav-center-aligned .navbar-toggle{
  border: 0;
}

nav.nav-center-aligned .navbar-toggle:focus, 
nav.nav-center-aligned .navbar-toggle:hover{
  background: transparent;
}

nav.nav-center-aligned .menu-sign{
  color: #6D6E71; 
  font-size: 16px; 
  font-weight: 700;
}

nav.nav-center-aligned .menu-sign img{
  margin-left: 10px;
}


/*==================================================
Intro Section
==================================================*/

#intro{
  background: url(../media/demo/Main.jpg) fixed no-repeat;
  background-size: cover;
  background-position: center;
  height: 600px;
  color: #fff;
  text-align: center;
}

#intro .green-box{
  background: transparent;
  height: 375px;
  width: 250px;
  border: 5px solid rgba(20,234,112, .15);
  border-top: none;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
}

.template-info{
  position: relative;
  text-align: center;
}

.template-info .logo img{
  margin: 20px auto;
}

.template-info .page-headline h1 span{
  display: block;
  color: #14ea70;
}

.template-info a.btn-primary{
  position: absolute;
  display: inline-block;
  left: 50%;
  top:365px;
  transform: translateX(-50%);
  
}

.screens{
  position: absolute;
  width: 100%;
  top: 420px;
  left: 0;
  right: 0;
  margin: auto;
}


.screens span{
  position: absolute;
  top: 90px;
  display: inline-block;
}

.screens span:nth-child(1){
  left: calc(50% - 510px);
  transform: translateX(-50%)
}

.screens span:nth-child(2){
  left: calc(50% - 293px);
  transform: translateX(-50%);
}

.screens span:nth-child(3){
  right: calc(50% - 293px);
  transform: translateX(50%);
}

.screens span:nth-child(4){
  right: calc(50% - 510px);
  transform: translateX(50%);
}

.screens span:nth-child(5){
  right: calc(50% - 5px);
  transform: translateX(50%);
  top: 0;
}


.screens span img{
  position: relative;
  box-shadow: 5px 5px 35px rgba(0,0,0, .3);
}

.screens span:nth-child(5) img{
  box-shadow: none;
}


/*==================================================
Demos Section
==================================================*/

#demos{
  text-align: center;
}

.demo{
  position: relative;
  margin-bottom: 60px;
}

.demo::before{
  content: url("../media/demo/dots.png");
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: -2
}

.demo::after{
  content: "";
  height: 82%;
  width: 50%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.demo.inverse::before{
  content: url("../media/demo/dots-inverse.png");
  right: 0;
  left: initial;
}

.demo.inverse::after{
  left: 0;
}

.demo .demo-info{
  text-align: right;
}

.demo.inverse .demo-info{
  text-align: left;
}

.demo-info .demo-number{
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 105px;
  font-weight: 700;
  margin-top: 30px;
  line-height: 75px;
}

.demo .demo-img{
  margin-top: 120px;
  text-align: right;
}

.demo .demo-img a img{
  transition: all 1s;
  display: inherit;
}

.demo.inverse .demo-img{
  text-align: left;
}

.demo-img a img:hover{
  transform: scale(1.03);
}

ul.memphis-parallax{
  margin: 0;
  padding: 0;
}

ul.memphis-parallax li{
  list-style: none;
  position: absolute;
  z-index: 0;
}


/*Designer Portfolio*/

.designer.demo::after{
  background: #F9ED32;
}

.designer .demo-info .demo-number{
  color: #F9ED32;
  margin-right: -26px !important;
}

.designer.demo ul.memphis-parallax li:nth-child(1){
  right: 0;
  top: -60px;
}

.designer.demo ul.memphis-parallax li:nth-child(2){
  right: 150px;
  top: 0;
}

.designer.demo ul.memphis-parallax li:nth-child(3){
  right: 500px;
  top: 0;
}


/*Photographer Portfolio*/

.photographer.demo::after{
  background: #f4593b;
}

.photographer .demo-info .demo-number{
  color: #f4593b;
  margin-left: -26px !important;
}


.photographer.demo ul.memphis-parallax li:nth-child(1){
  right: 350px;
  top: 0;
}

.photographer.demo ul.memphis-parallax li:nth-child(2){
  left: 100px;
  top: 0;
}


/*Model/Actress Portfolio*/

.model.demo::after{
  background: #ed1e79;
}

.model .demo-info .demo-number{
  color: #ed1e79;
  margin-right: -26px !important;
}

.model.demo ul.memphis-parallax li:nth-child(1){
  left: 300px;
  top: -30px;
}

.model.demo ul.memphis-parallax li:nth-child(2){
  right: 250px;
  top: 150px;
}

.model.demo ul.memphis-parallax li:nth-child(3){
  right: 200px;
  top: 200px;
}


/*Architect Portfolio*/

.architect.demo::after{
  background: #15e99d;
}

.architect .demo-info .demo-number{
  color: #15e99d;
  margin-left: -26px !important;
}


.architect.demo ul.memphis-parallax li:nth-child(1){
  right: 100px;
  top: 0;
}

.architect.demo ul.memphis-parallax li:nth-child(2){
  left: 250px;
  top: 0;
}


/*Singer Portfolio*/

.singer.demo::after{
  background: #f7941e;
}

.singer .demo-info .demo-number{
  color: #f7941e;
  margin-right: -26px !important;
}

.singer.demo ul.memphis-parallax li:nth-child(1){
  right: 100px;
  top: -60px;
}

.singer.demo ul.memphis-parallax li:nth-child(2){
  left: 150px;
  top: 0;
}



/*==================================================
 Mobile Responsive Section
==================================================*/

#responsive{
  text-align: center;
  color: #fff;
  background: rgba(0,0,0,.8);
  overflow: hidden;
}

#responsive .green-box{
  background: transparent;
  height: 320px;
  width: 250px;
  border: 5px solid rgba(20,234,112, .15);
  display: block;
  position: relative;
  margin: auto;
}

.res-contents{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}


/* Parallax */

#responsive ul.section-parallax{
  margin: 0;
  padding: 0;
}

#responsive ul.section-parallax li{
  list-style: none;
  position: absolute;
  z-index: -1;
}

#responsive ul.section-parallax li:nth-child(1){
  left: calc(50% - 100px);
  transform: translateX(-50%);
  top: 90px;
}

#responsive ul.section-parallax li:nth-child(2){
  left: calc(50% - 340px);
  transform: translateX(-50%);
  top: 400px;
}

#responsive ul.section-parallax li:nth-child(3){
  left: calc(50% - 200px);
  transform: translateX(-50%);
  top: 200px;
}

#responsive ul.section-parallax li:nth-child(4){
  right: calc(50% - 120px);
  transform: translateX(50%);
  top: 380px;
}

#responsive ul.section-parallax li:nth-child(5){
  left: calc(50% - 100px);
  transform: translateX(-50%);
  top: 450px;
}



/*==================================================
 Features Section
==================================================*/

#features{
  text-align: center;
}

.feature-item{
  background: #fff;
  margin-bottom: 30px;
}

.feature-item span{
  color: #14ea70;
  font-size: 50px;
  margin-top: -10px;
}

.feature-item h4{
  color: #14ea70;
}

/*==================================================
 Footer
==================================================*/

#footer{
  background: #000;
}

#footer .bg{
  background: url(../media/demo/intro.jpg) no-repeat;
  background-position: center;
  background-size: cover;
  height: 300px;
}

.footer-contents{
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

.footer-contents .btn{
  color: #000;
}




/*==================================================
 CSS for width 992px
==================================================*/ 


@media only screen and (max-width : 1240px) {
  
  #intro{height: 540px;}
  .screens span{top: 60px;}
  .screens span:nth-child(1){left: calc(50% - 395px);}
  .screens span:nth-child(2){left: calc(50% - 225px);}
  .screens span:nth-child(3){right: calc(50% - 225px);}
  .screens span:nth-child(4){right: calc(50% - 395px);}
  .screens span img{width: 150px;}
  .screens span:nth-child(5) img{width: 340px;}
  
}


  
@media only screen and (max-width : 992px) {
  
  .screens span:nth-child(1),
  .screens span:nth-child(4){display: none;}
  
}


/*==================================================
 CSS for width 768px
==================================================*/ 


@media only screen and (max-width : 767px) {
  
  nav.nav-center-aligned .navbar-collapse{text-align: left;}
  nav.nav-center-aligned .navbar-nav li::after{content: none;}
  nav.nav-center-aligned .navbar-collapse{max-height: 100%;}
  
  #intro{height: 480px;}
  #intro .green-box{display: none;}
  .template-info .page-headline h1{font-size: 28px; line-height: 40px;}
  .screens{top: 385px;}
  .screens span:nth-child(2){left: calc(50% - 150px);}
  .screens span:nth-child(3){right: calc(50% - 150px);}
  .screens span:nth-child(5){right: calc(50% - 3px);}
  .screens span img{width: 100px;}
  .screens span:nth-child(5) img{width: 240px;}
  
  .demo::after,
  .demo.inverse::after{height: 45%;}
  .demo .demo-info{padding-right: 22%;}
  .demo.inverse .demo-info{padding-left: 22%;}
  
}


/*==================================================
 CSS for width 480px
==================================================*/ 

@media only screen and (max-width : 480px) {
  
  #intro{height: 510px;}
  .screens{top: 450px;}
  .screens span{top: 30px;}
  .screens span:nth-child(2){left: calc(50% - 110px);}
  .screens span:nth-child(3){right: calc(50% - 110px);}
  .screens span img{width: 70px;}
  .screens span:nth-child(5) img{width: 160px;}
  
  .template-info a.btn-primary{padding: 5px 15px;}
  
}


/*==================================================
 Preloader CSS
==================================================*/ 

.preloader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 9999999;
}

.sk-cube-grid {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #14ea70;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); 
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  } 
}

/*====================================================================================The End====================================================================================*/

/*==================================================
  Buy Now Button
==================================================*/

.btn-buy{
  background: #333;
  padding: 10px 30px;
  position: fixed;
  bottom: 30px; 
  right: 30px;
  color: #82B541;
  font-weight: 700;
  font-style: italic;
  box-shadow: 0 5px 20px rgba(0,0,0, .2);
  z-index: 999;
}

.btn-buy:hover,
.btn-buy:active,
.btn-buy:focus{
  color: #fff;
  box-shadow: 0 0 20px rgba(0,0,0, .3);
  transition: all 1s;
}

.btn-buy .italy{
  font-size: 13px;
  font-style: italic;
  margin-right: 5px;
  color: #fff;
}

.btn-buy .price{
  position: relative;
  margin-left: 15px;
  color: #82B541;
}

.btn-buy .price::before{
  content: "";
  background: rgba(255,255,255, .9);
  height: 15px;
  width: 1px;
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
}