@font-face{
    font-family:"Montserrat-Bold";
    src:url('../fonts/Montserrat-ExtraBold.ttf');
}
@font-face{
    font-family:"Montserrat-Light";
    src:url('../fonts/Montserrat-Light.ttf');
}
@keyframes bg-animation{
    0% {
       
        /* animation-timing-function: ease-in; */
    }
    5% {
        /* opacity: 1;
        animation-timing-function: ease-out; */
    }
    28% {
        /* opacity: 1; */
    }
    50% {
        /* opacity: 1; */
        transform: scale(1.3);
    }
    /* 100% { opacity: 1 } */
}
@keyframes zoomInAmimation {
    0% {
        opacity: 0.5;
        animation-timing-function: ease-in;
    }
    5% {
        opacity: 1;
        animation-timing-function: ease-out;
    }
    28% {
        opacity: 1;
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
    100% { opacity: 1 }
}




.top, .l-l-img, .l-r-img,.right-image{overflow: hidden;}
.about-image-container img, .what-we-second img, .what-we-third img,.contact-right img {
    -webkit-backface-visibility: hidden;
        -webkit-animation: zoomInAmimation 16s linear infinite 0s;
        -moz-animation: zoomInAmimation 16s linear infinite 0s;
        -o-animation: zoomInAmimation 16s linear infinite 0s;
        -ms-animation: zoomInAmimation 16s linear infinite 0s;
        animation: zoomInAmimation 16s linear infinite 0s;
}
@keyframes twoImgAnimation {
    0% {
        opacity: 0.3;
        animation-timing-function: ease-in;
    }
    5% {
        opacity: 1;
        animation-timing-function: ease-out;
    }
    28% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        transform: scale(1.3);
    }
    100% { opacity: 1 }
}

html,
button,
input,
select,
textarea {
    color: #222;
    font-family:"Montserrat-Light" !important;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
 

img {
    vertical-align: middle;
    /* animation: twoImgAnimation 5s linear infinite 0s; */
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Parallax Scroll
   ========================================================================== */
body, html {
	height: 100%;
	min-height: 100%;
	background-color: #000000;
}
body {
	
}
.no-js {
	padding-top: 106px;
}
h2 {
	margin-top: 0;
}
.loading {
	background: url('../img/ico_loading.gif') no-repeat center center;
}
section {
	min-width: 960px;
	opacity: 0;
}
.loaded section,
.no-js section {
	opacity: 1;
	-webkit-transition: opacity 300ms ease-out;
	-moz-transition: opacity 300ms ease-out;
	transition: opacity 300ms ease-out;
}
main {
	overflow-x: hidden;
}

.bcg {
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	height: 100%;
	width: 100%;
}
/* Slide 1 */
#slide-1 .bcg {background-image:url('../img/bcg_slide-1.jpg')}

/* Slide 2 */
#slide-2 .bcg {background: none; background-color: #010101; text-align: center}

/* Slide 3 */
#slide-3 .bcg {background-image:url('../img/bcg_slide-3.jpg')}
#slide-3 .bcg2 { background-color: #000000; position: absolute; top: 0; left: 0;}

/* Slide 4 */
.curtainContainer {width: 100%; height: 100%; position: relative;}
.curtainContainer .curtain {width: 300%; height: 1px; background-color: #000000; position: absolute; top: 25%; left: 0; opacity: 0}
.curtainContainer .copy {position: absolute; bottom: 30%; left: 0; width: 100%; text-align: center;}

#slide-4 .bcg {background-image:none;
}

/* Slide 5 */
#slide-5 {position: relative;}
#slide-5 .bcg {background-image:url('../img/bcg_slide-5.jpg')}
#slide-5 .bcg2 {background-image:url('../img/bcg_slide-5b.jpg'); position: fixed; bottom: 0; left: 0; opacity: 0; z-index: 1}
#slide-5 .bcg3 {background: none; background-color: #010101; z-index: 2;  position: fixed; bottom: 0; left: 0; opacity: 0; z-index: 2;}

.hsContainer {
	display: table;
	table-layout: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.hsContent {
	max-width: 450px;
	margin: -150px auto 0 auto;
	display: table-cell;
	vertical-align: middle;
	color: #ebebeb;
	padding: 0 8%;
	text-align: center;
	position: relative;
	z-index: 10;
}
	.hsContent h2,
	.copy h2 {
		color: #ffffff;
		font-size: 45px;
		line-height: 48px;
		margin-bottom: 12px;
	}
	.hsContent p {
		width: 400px;
		margin: 0 auto;
		color: #b2b2b2;
	}
	.hsContent a {
		color: #b2b2b2;
		text-decoration: underline;
	}
	.bgBlack {
		background-color: rgba(0,0,0,0.75);
		padding: 3px 10px;
	}


/* Navigation */
#slideNav {
	display: none;
	position: fixed;
	right: 0;
	top: 50%;
	margin-top: -80px;
	z-index: 11;
}
#slideNav ul {
	list-style: none;
	color: #000000;
	font-size: 13px;
	text-align: center;
}
#slideNav li {
	width: 50px;
	height: 50px;
	line-height: 50px;
	background-color: rgba(255,255,255,0.70);
	margin-bottom: 1px;
}
.no-rgba  #slideNav li {background-color: #ffffff}
#slideNav a {
	display: none;
	width: 50px;
	height: 50px;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	color: #000000;
}
#slideNav a.disabled {
	cursor: default;
}




/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

.home-content{
    width: 40%;
    font-size: 190% !important;
    position: relative;
}
.home-slides {
    /* background-size: cover; */
    /* background-position: center center !important; */
    background-position: center center !important;
    background-attachment: unset !important;
    background-size: cover !important;
    /* background-color: #272728; */


}

.prepare-to-amaze{
    position: absolute;
    right: 10%;
    margin-top: 2%;
    color: black;
    text-shadow: 6px 13px 17px #ffffff75;
    font-size: 400%;
    font-weight: bold;
}

/* .slideNav{ display: none !important;} */
.black-bg{
    background-image: url(../img/black-bg.jpg);
    width: 30%;
    height: 100%;
    float: left;
    position: absolute;
    left: 0;
}
.orange-bg{
    /* background-color: orange; */
    background-image: url(../img/orange-bg.jpg);
    width: 70%;
    height: 100%;
    float: left;
    position: absolute;
    left: 30.1%
}
.home-slides {
    height: 88%;
    position: absolute;
}
.home-logo{
    height: 12%;
    background: white;
    text-align: right;
}
.home-logo img{     width: 20%;
    margin-right: 3%;}
.menu-nav {
    list-style: none;
    margin: 0 auto;
    /* width: 53%; */
    float: right;
    position: absolute;
    bottom: 3%;
    left: 50%;
}
.menu-nav li {
    float: left;
    margin: 0 10px;
    color: white;
}
.menu-nav li a {
    color: black;
    text-decoration: none;
    /* font-weight: bold; */
    font-size: 20px;
    outline: none;
}
.menu-nav li a:hover {
    text-decoration: underline;
    /* text-decoration-color: white; */
}

/* About Us */
.about-us{
    overflow: auto;
    
    height: 100%;
    width: 100%;
    position: relative;
}
.aboutus-slide .bcg{ background-color: white !important;}
.aboutus-slide{ }
.about-image-container{
    position: absolute;
    left: 0;
    width: 70%;
}
.about-content{
    position: absolute;
    left: 70%;
    width: 28.5%;
    color: black;
    text-align: justify;
    line-height: 25px;
    padding-top: 25px;
    padding-left: 1.5%;
    bottom: 10%;
}

.about-image-container{
    /* position: relative; */
    margin-top: 3%;
}
.left-image{
    position: absolute;
    width: 70%;
    height: 60%;
    /* overflow: hidden; */
    border: 1px solid;
    background: red;
    left: 0;
    top: 0;
}
.right-image{
    width: 30%;
    height: 100%;
    /* overflow: hidden; */
    /* border: 1px solid;
    float: left; */
    position: absolute;
    left: 70%;
    top: 0;
    margin-top: 1px;
    height: 122.5%;
}
.right-image img{ width: 100%;    height: 123%;

}
.left-image img{ width: 100%;}
.l-l-img,.l-r-img{ width: 50%; float: left;}


.studio-content
{
    opacity: 1;
    position: absolute;
    top: 15% !important;
    width: 60% !important;
    right: 5% !important;
    background: black;
    /* height: 70%; */
    /* padding-top: 2%; */
    left: auto !important;
    padding: 5% 5%;
}
.studio-content h2{ font-size: 26px !important; }
.studio-content p{ text-align: justify;
    margin-top: 25px;
    font-weight: bold;}

.what-we-first{
    background-color: #ef5595;
    left: 0;
    padding: 2% 4%;
    width: 26.33% !important;
    text-align: justify;
    color: black;
    line-height: 25px;
}    
.what-we-first h2{
    color: white;
}
.what-we-second{
    left: 33.33%;
    width: 30% 
}
.what-we-third{
    left: 63%;
    width: 37%;
    overflow: hidden;
}
.what-we-first, .what-we-second, .what-we-third{
    /* width: 33.33%; */
    float: left;
    position: absolute;
    height: 100%;
    /* overflow: hidden; */
}    
.w-w-s{width: 100%; overflow: hidden;float: left;
    height: 33.33%;}
.what-we-second img{
    width: 100%;
    float: left;
    height: 100%;
}
.what-we-third img{
    width: 100%;
    float: left;
    height: 100%;
    
}
/* .homeSlideTall{
    height: 100% !important;
} */

/* #slide-5 {} */
#slide-5 .bcg{
    background-image: url(../img/team.jpg);
}
#slide-5 h2{ font-size: 25px !important; line-height: 25px; }
#slide-5 .team-content{
    width: 20% !important;
    background: #f15b29;
    padding: 2% 2%;
    position: absolute;
    right: 5%;
    top: 45%;
    text-align: justify;
}

.contact-us-content{

}
.contact-left {
    width: 68%;
    float: left;
    background-image: url(../img/contact-us.jpg);
    height: 70%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
}
.contact-right {
    width: 30%;
    position: absolute;
    right: 0;
}
.contact-img {
    width: 35%;
    margin: 2% 2%;
    float: left;
    height: 130px;
    overflow: hidden;
}
/* .contact-right img {
    width: 35%;
    margin: 2% 2%;
} */
.contact-right img {
    width: 100%;
    height: 100%;
}
.contact-right img:nth-child(odd) {
    margin-left: 10%;
}

.loader-container {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #ededede8;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 550;
    height: 100%;
    width: 100%;
  }

.loader {
    max-width: 15rem;
    width: 100%;
    height: auto;
    stroke-linecap: round;
  }
  
  circle {
    fill: none;
    stroke-width: 3.5;
    -webkit-animation-name: preloader;
            animation-name: preloader;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-transform-origin: 170px 170px;
            transform-origin: 170px 170px;
    will-change: transform;
  }
  circle:nth-of-type(1) {
    stroke-dasharray: 550px;
  }
  circle:nth-of-type(2) {
    stroke-dasharray: 500px;
  }
  circle:nth-of-type(3) {
    stroke-dasharray: 450px;
  }
  circle:nth-of-type(4) {
    stroke-dasharray: 300px;
  }
  circle:nth-of-type(1) {
    -webkit-animation-delay: -0.15s;
            animation-delay: -0.15s;
  }
  circle:nth-of-type(2) {
    -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
  }
  circle:nth-of-type(3) {
    -webkit-animation-delay: -0.45s;
            animation-delay: -0.45s;
  }
  circle:nth-of-type(4) {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
  }
  
  @-webkit-keyframes preloader {
    50% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  
  @keyframes preloader {
    50% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  
.contact-maps img {
    width: 100%;
}
  .contact-maps {
    width: 28%;
    /* margin-top: 52%; */
    /* float: left; */
    /* overflow: hidden; */
    /* margin-left: 5%; */
    position: absolute;
    bottom: 0;
    left: 5%;
}
.contact-address {
    width: 28%;
    /* margin-top: 52%; */
    /* float: left; */
    /* overflow: hidden; */
    /* margin-left: 5%; */
    position: absolute;
    bottom: 1.5%;
    left: 36%;
    color: white;

}

/* Text Effects */
#rotate-words {
    max-width:400px;
    margin:auto;
    padding:20% 0;
    font-size:2.2em;
    text-transform:uppercase;
    margin-top: -33%;
  }
  
  #rotate-words div {
   position:absolute;
   opacity:0;
   overflow:hidden;
   left: 0vw;
   width: 41vw;
   line-height:1.2em;
   animation: rotate-word 30s linear infinite 0s;
  }
  
  @keyframes rotate-word {
      0% { opacity: 0;  transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
      3% { opacity: 1;  transform: translateX(0);filter:blur(0px);transform:scale(.9)}
      12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
      16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
      /* 80% { opacity: 0} */
      100% { opacity: 0}
  }

  /* #rotate-words div:nth-child(1) { animation-delay: 2s} */
  #rotate-words div:nth-child(2) { animation-delay: 4s}
  #rotate-words div:nth-child(3) { animation-delay: 8s}
  #rotate-words div:nth-child(4) { animation-delay: 12s}
  #rotate-words div:nth-child(5) { animation-delay: 16s}
  #rotate-words div:nth-child(6) { animation-delay: 20s}
  #rotate-words div:nth-child(7) { animation-delay: 24s}
  #rotate-words div:nth-child(8) { animation-delay: 28s}
  #rotate-words div:nth-child(9) { animation-delay: 32s}
  
  @keyframes author {
      0% { opacity: 0;  transform: translateY(100px);filter:blur(10px);transform: scaleY(2)}
      20% { opacity:0; transform: translateY(200px);filter:blur(10px); transform: scaleY(2)}
      30% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(1)}
      90% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(.9)}
      100% { opacity:0; transform: translateY(0);filter:blur(10px);transform: scale(2)}
  }
  .mobile-menu{ display: none;}
  .mobile-menu + ul.menu {
    display: none;
}
  /* #### Mobile Phones Portrait or Landscape #### */
@media only screen and (max-width: 780px){
    body{ overflow: auto !important;
        margin-top: 15%;
    }
    section{
        min-width: 100% !important;
    }
    .mobile-menu + ul.menu {
        display: block;
    }
    .home-logo{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 500;
        height: 10%
    }
    .home-logo img{ width: 260px;
        width: 45%;
        /* float: right; */
        right: 1%;
        position: absolute;
        top: 5%; 
        
    }
    .prepare-to-amaze{
        display: none;
    }
    .home-slides {
        height: 100%;
    background-color: white;
    /* padding-top: 87%; */
    position: absolute;
    top: 0%;
    }
        #slide-1 .bcg {
            background-image: url(../img/mobile_bcg_slide-1.jpg);
            /* background-size: contain !important;
            background-position: left !important; */
            background-size: 100% 100% !important;
            background-position: center center !important;
            
        }
        #rotate-words{

        }
        .home-content {
            width: 100%;
            font-size: 150% !important;
            position: relative;
            line-height: 30px !important;
            margin-top: 30px !important;
        }
        .home-slides .hsContent {
            vertical-align: baseline !important;
            padding-top: 1%;
        }
        #rotate-words div {
            top: 160%;
            width: 90%;
            left: 5%;
            font-size: 60%;
        }
        .menu-nav{display: none}
        .mobile-menu{ display: block;}
        .mobile-menu{
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(231, 114, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
            width: 37px;
            height: 25px;
            -webkit-text-stroke: black;
            position: fixed;
            left: 5%;
            top: 3.5%;
            background-repeat: no-repeat;
            cursor: pointer;
        }
        .mobile-menu + .menu {
            overflow: auto;
            /* float: left; */
            width: 100%;
            background-color: black!important;
            position: fixed;
            z-index: 25;
            left: 0;
            display: none;
            top: 7%;
            color: white;
        }
        .mobile-menu + .menu li a{ color: white; 
            text-decoration: none;
            margin: 2% 0;
            display: block;    
        }
        .mobile-menu + .menu li{
            float: none;
            list-style: none;
            text-align: left;
        }

        /* About us page */
        .about-image-container{ width: 100%}
        .about-content
        {
            left: 0;
            width: 100%;
            top: 32%;
        }


        #slide-3 .bcg2 {
            width: 100%;
            height: 41%;
            background-color: #f5deb300 !important;
        }
        #slide-3 .hsContent{
            position: absolute;
            width: 100%;
            left: 0;
            top: 60%;
            padding: 2px !important;
            height: 73%;
        }
        
        #slide-3 .bcg {
            background-image: url(../img/bcg_slide-3.jpg);
            background-position: 50% 50% !important;
            background-attachment: unset;
        }
        .studio-content {
            width: 100% !important;
            left: 0 !important;
            /* top: 41% !important; */
            padding: 5% 2px !important;
            height: 100%;
            top: 0 !important;
        }

        #slide-4 .bcg{
            position: relative;
        }
        .what-we-first {
            width: 92% !important;
            top: 0;
            position: unset !important;
        }
        .what-we-content{
            position: unset !important;
            width: 100% !important;
        }
        .what-we-second {
            /* left: 33.33%; */
            width: 40%;
            z-index: 5000;
            top: 63%;
            height: 35% !important;
            left: 5%;
        }

        .what-we-third {
            left: 45%;
            width: 50%;
            overflow: hidden;
            height: 35% !important;
            top: 63%;
        }
        .what-we-first h2{ color: black;}
        #slide-5 .bcg { height: 45%; background-attachment: unset;}
        #slide-5 .team-content { 
            width: 92% !important;
            left: 0;
            top: 65%;
            height: 35%;
            padding: 10% 5%;
            background: #fcb040;
            color: black;
        }
        #slide-5 h2 { color: black !important; }
        .contact-left{ display: none !important;}
        .contact-right {
            width: 100%; left: 0.5%;top: -2%;}
        .contact-img {
            width: 23%;
            margin: 0.5% 0.5%;
            float: left;
            height: 80px;
            overflow: hidden;
            margin-left: 1%;
            margin-bottom: 2%;
        }
        .contact-address{
            left: 0;
            width: 100%;
            text-align: center;
            top: 30%;
        }
        .contact-maps{
            top: 60%;
            width: 90%;
        }
}