/* CSS Document */



/* 

*

*

[Table of intro]

*

*

*



    font-intro / @import url

  	preloader  / .preloader

  	overlay  / .overlay-main

  	background img / .mainbg

  	button intro / #buttons-intro

	

*

*

*/



/* font-intro */

@import url('https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,500,600,700');



/* general */

body{ color:#fff;}



/* preloader */

.preloader {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 999999;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-flow: row nowrap;

    -ms-flex-flow: row nowrap;

    flex-flow: row nowrap;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    background: #fff;

}

.prtf-smooth-transition-loader.prtf-hide-spinner .prtf-st-loader { display:none}

.prtf-st-loader1 {

 position:relative;

 height:100%

}

/*---MainCube----*/

.prtf-outline .prtf-line-1 {

 top:0;

 left:0;

 height:0;

 width:0;

 border-right:4px solid #111;

 -webkit-animation-name:animateHeight;

 animation-name:animateHeight;

 animation-duration:1.5s;

 animation-iteration-count:infinite;

 animation-timing-function:ease;

 animation-delay:0s;

 animation-fill-mode:forwards

}

.prtf-outline .prtf-line-2 {

 bottom:0;

 right:0;

 border-top:4px solid #111;

 -webkit-animation-name:animateWidth;

 animation-name:animateWidth;

 animation-duration:1.5s;

 animation-iteration-count:infinite;

 animation-timing-function:ease;

 animation-delay:0s;

 animation-fill-mode:forwards

}

.prtf-outline .prtf-line-3 {

 top:0;

 left:0;

 border-bottom:4px solid #111;

 -webkit-animation-name:animateWidth;

 animation-name:animateWidth;

 animation-duration:1.5s;

 animation-iteration-count:infinite;

 animation-timing-function:ease;

 animation-delay:0s;

 animation-fill-mode:forwards

}

.prtf-outline .prtf-line-4 {

 bottom:0;

 right:0;

 height:0;

 width:0;

 border-left:4px solid #111;

 -webkit-animation-name:animateHeight;

 -webkit-animation-duration:1.5s;

 -webkit-animation-iteration-count:infinite;

 -webkit-animation-timing-function:ease;

 -webkit-animation-delay:0s;

 -webkit-animation-fill-mode:forwards;

 animation-name:animateHeight;

 animation-duration:1.5s;

 animation-iteration-count:infinite;

 animation-timing-function:ease;

 animation-delay:0s;

 animation-fill-mode:forwards

}

.prtf-outline .prtf-line-1,.prtf-outline:after {

 -webkit-animation-duration:1.5s;

 -webkit-animation-iteration-count:infinite;

 -webkit-animation-timing-function:ease;

 -webkit-animation-delay:0s;

 -webkit-animation-fill-mode:forwards

}

.prtf-outline .prtf-line-2,.prtf-outline .prtf-line-3 {

 -webkit-animation-duration:1.5s;

 -webkit-animation-iteration-count:infinite;

 -webkit-animation-timing-function:ease;

 -webkit-animation-delay:0s;

 -webkit-animation-fill-mode:forwards;

 height:0;

 width:0

}

.prtf-outline .prtf-line-1,.prtf-outline .prtf-line-2,.prtf-outline .prtf-line-3,.prtf-outline .prtf-line-4,.prtf-outline .prtf-outline .prtf-portfolio-list-holder-outer.prtf-line-4,.prtf- portfolio-list-holder-outer {

 position:absolute;

 border-color:#555;

 opacity:0

}

/*---SecondCube. You can set cube size)---*/

.prtf-outline {

 position:absolute;

 top:calc(50% - 25px);

 left:calc(50% - 25px);

 width:50px;

 height:50px;

 background-color:#fff

}

/* preloader animation */

@-webkit-keyframes animateWidth {

 0% {opacity:1;width:0}

 40%,80% {width:30%;opacity:1}

 100% { opacity:0;width:100%}

}

@keyframes animateWidth {

 0% {opacity:1;width:0}

 40%,80% {width:30%;opacity:1}

 100% {opacity:0;width:100%}

}

@-webkit-keyframes animateHeight {

 0% {opacity:1;height:0}

 40%,80% {height:30%;opacity:1}

 100% {height:100%; opacity:0}

}

@keyframes animateHeight {

 0% {opacity:1;height:0}

 40%,80% {height:30%;opacity:1 }

 100% { height:100%;opacity:0}

}

.bg-preloader {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0px;

    left: 0px;

    background: #fff;

    z-index: 99999;

}

.bg-preloader-white {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0px;

    left: 0px;

    background: #fff;

    z-index: 999999;

    -webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    transition: all .3s ease-in-out;

}

.bg-preloader-white-bot {

    position: fixed;

    width: 0%;

    height: 100%;

    bottom: 0px;

    right: 0px;

    background: #fff;

    z-index: 999999;

    -webkit-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    transition: all .3s ease-in-out;

}

.bg-hide{

    height: 0% !important;

    -webkit-transition: all .6s ease-in-out;

    -moz-transition: all .6s ease-in-out;

    transition: all .6s ease-in-out;

}

/* end preloader */



/* overlay */

.overlay-main{

  position:absolute;

  width: 100%;

  height:100%;

  top:0px;

  left:0px;

  z-index:99;

}

/* background img */

.mainbg {

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  width: 100%;

  overflow-x: hidden;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

}



/* button intro */

#buttons-intro {

  position: fixed;

  top: 0px;

  right: 6px;

  width:auto;

  height:auto;

  text-align:right;

  opacity:0.8;

  z-index:99999;

}

#buttons-intro:hover { opacity:1; 

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}

.btn-intro{

  width: 45px;

  height: 38px;

  text-align: center;

  background:rgba(0,0,0,.9);

  display: inline-block;

  cursor:pointer;

  margin-left: 0px;

  margin-right: -6px;

  border-right:0px solid #efefef;

  color: #426895;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}

  

.left-intro {

  border-radius: 0 0 0 0;

}



.right-intro {

  border-radius: 0 0 0 0;

}



.btn-intro:hover {

  background:#dd4425;

  color: #fff;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;}



.btn-intro i {

  display:inherit;

  padding-top: 0px;

  font-size: 18px;

  color:#fff;

}



.skippintro{  position:relative;}  

.skippintro:before {

    content: "\f051";  

    font-family: FontAwesome;

	font-style:normal;

	position:absolute;

	left:-5px;

	top:-10px;

 }  

 

.soundOffintro, .soundOnintro{  position:relative;}  

.soundOnintro:before {

    content: "\f028";  

    font-family: FontAwesome;

    font-style:normal;

	position:absolute;

	left:-8px;

	top:-10px;

 }  

.soundOffintro:before {

    content: "\f026";  

    font-family: FontAwesome;

    font-style:normal;

	position:absolute;

	left:-5px;

	top:-10px;

 }

 

@media(max-width: 776px){

      li:nth-child(4) .tp-caption.big-heading.customin.customout.tp-resizeme{
        left:215.385px !important;
    }
     li:nth-child(4) .tp-caption.sub-heading.customin.customout.tp-resizeme{
      	left:239px !important;
    }
}