/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Abel|Archivo+Narrow:700');

html, body{ color: #fff; font-size: 18px; background: url(../img/bg-page.png) repeat center top; font-family: 'Abel', sans-serif;  height: 100%; margin: 0; padding: 0; }
a{ outline: 0; transition: all 0.2s Ease-Out; }
.logo{ display: block; min-width: 80px; width: 70%; margin: 60% 15% 10% 15%;}
.nav-evc{ width: 15%; border-radius: 0px; height: 100%!important; min-height: 100%; position: fixed; background:rgba(6,15,22,1.00); font-family: 'Archivo Narrow', sans-serif; transition: all 0.2s Ease-Out; }
.nav li, .nav li a, .nav li span{display: block; transition: all 0.2s Ease-In-Out;}
.nav li{ height: 100px; margin: 10px 0px;position: relative; overflow: hidden;}
.nav li:hover{ margin: 30px 0px 30px 0px; }
.nav li a{display: block; width: 100%; height: 100%; z-index: 2; /*border: 1px solid rgba(0,203,255,1.00);*/}
.nav li span{ display: block; width: 100%; height: 100%;  position: absolute; top: 0; left: 100%; padding-left: 0px; text-indent: 0px; text-align: right; overflow: hidden;z-index:1}
.nav li span img{ width: 90px; height: 90px; display: block; margin-top: 5px;}
.nav li a:hover{ text-indent: 10px; color: rgba(233,101,0,1.00);  border: 2px dotted rgba(0,203,255,1.00); background: none; font-size: 1.2em;}
.nav li:hover span{left: 50%;}

.nav li.social-nav{ height: 40px; width:40px; margin: 20px 20px;position: relative; overflow: hidden; opacity: 0.3; float:left!important;}
.nav li.social-nav a{display: block; width: 100%; height: 100%; z-index: 2; /*border: 1px solid rgba(0,203,255,1.00);*/ font-size: 0px; text-indent: -1234567px; }
.nav li.social-nav span{ display: block; width: 100%; height: 100%;  position: absolute; top: 0; left:0%; padding-left: 0px; text-indent: 0px; text-align: right; overflow: hidden;z-index:1}
.nav li.social-nav span img{ width: 100%; height: 100%; display: block; margin-top: 0px;}
.nav li.social-nav a:hover{ color: rgba(233,101,0,1.00);  border: none; background: none; font-size: 1.2em;}
.nav li.social-nav:hover span{height: 35px; width:35px; opacity: 0.5}



.wrapper-content{ margin-left: 15%; transition: all 0.2s Ease-Out;}
.nav li.active{background:rgba(233,101,0,1.00); color: white;}
.nav li.active a{color: white;}

/*Responsive navigation*/

.NavSM{width:5%;}
.NavSM div.navbar-collapse{padding: 5%!important;}
.NavSM a.logo{display: block; min-width: inherit!important; width: 85%!important; margin: 60% 5% 10% 5%;}
.NavSM .nav li span{ display: block; width: 100%; height: 100%;  position: absolute; top: 0; left: 0; padding-left: 0px; text-indent: 0px; text-align: center; overflow: hidden;z-index:1}
.NavSM .nav li span img{ width: 90%; height: 90%; display: block; margin: 5%;}
.NavSM .nav li a{ text-indent: -123456px; line-height: 0px;}
.NavSM .nav li a:hover{ text-indent: -123456px;  border: 2px dotted rgba(0,203,255,1.00); background: none; font-size: 1.2em;}
.NavSM .nav li:hover span{left:0%; width: 95%; height: 95%; margin: 2%;}


.NavSM .nav li.social-nav a{display: block; width: 100%; height: 100%; z-index: 2; /*border: 1px solid rgba(0,203,255,1.00);*/ font-size: 0px; text-indent: -1234567px}
.NavSM .nav li.social-nav span{ display: block; width: 100%; height: 90%;  position: absolute; top: 0; left:0%; padding-left: 0px; text-indent: 0px; text-align: right; overflow: hidden;z-index:1}
.NavSM .nav li.social-nav span img{ width: 100%; height: 100%; display: block; margin-top: 0px;}
.NavSM .nav li.social-nav a:hover{ color: rgba(233,101,0,1.00);  border: none; background: none; font-size: 1.2em;}
.NavSM .nav li.social-nav:hover span{height: 30px; width:35px; opacity: 0.8}


.NavMD{width:10%;}
.NavMD .logo{display: block; min-width: 85px;width: 70%;margin: 60% 5% 10% 5%;}
.NavMD .nav li span{ display: block; width: 100%; height: 100%;  position: absolute; top: 0; left: 0; padding-left: 0px; text-indent: 0px; text-align: center; overflow: hidden;z-index:1}
.NavMD .nav li span img{ width: 90%; height: 90%; display: block; margin: 5%;}
.NavMD .nav li a{ text-indent: -123456px; line-height: 0px;}
.NavMD .nav li a:hover{ text-indent: -123456px;  border: 2px dotted rgba(0,203,255,1.00); background: none; font-size: 1.2em;}
.NavMD .nav li:hover span{left:0%; width: 95%; height: 95%; margin: 2%;}

.NavMD .nav li.social-nav a{display: block; width: 100%; height: 100%; z-index: 2; /*border: 1px solid rgba(0,203,255,1.00);*/ font-size: 0px; text-indent: -1234567px}
.NavMD .nav li.social-nav span{ display: block; width: 100%; height: 90%;  position: absolute; top: 0; left:0%; padding-left: 0px; text-indent: 0px; text-align: right; overflow: hidden;z-index:1}
.NavMD .nav li.social-nav span img{ width: 100%; height: 100%; display: block; margin-top: 0px;}
.NavMD .nav li.social-nav a:hover{ color: rgba(233,101,0,1.00);  border: none; background: none; font-size: 1.2em;}
.NavMD .nav li.social-nav:hover span{height: 30px; width:35px; opacity: 0.8}


.NavMov{width:100%;}
.NavMov div.navbar-collapse{padding: 5%!important;}
.NavMov a.logo{display: block; min-width: inherit!important; width: 85%!important; margin: 5% 15% 5% 15%;}
.NavMov .nav li span{ display: block; width: 100%; height: 100%;  position: absolute; top: 0; left: 0; padding-left: 0px; text-indent: 0px; text-align: center; overflow: hidden;z-index:1}
.NavMov .nav li span img{ width: 100%; height: 100%; display: block; margin: 0px;}
.NavMov .nav li a{ text-indent: -123456px; line-height: 0px;}
.NavMov .nav li a:hover{ text-indent: -123456px;  border: 2px dotted rgba(0,203,255,1.00); background: none; font-size: 1.2em;}
.NavMov .nav li:hover span{left:0%; width: 95%; height: 95%; margin: 2%;}


.NavMov .nav li.social-nav a{display: block; width: 100%; height: 100%; z-index: 2; /*border: 1px solid rgba(0,203,255,1.00);*/ font-size: 0px; text-indent: -1234567px}
.NavMov .nav li.social-nav span{ display: block; width: 100%; height: 90%;  position: absolute; top: 0; left:0%; padding-left: 0px; text-indent: 0px; text-align: right; overflow: hidden;z-index:1}
.NavMov .nav li.social-nav span img{ width: 100%; height: 100%; display: block; margin-top: 0px;}
.NavMov .nav li.social-nav a:hover{ color: rgba(233,101,0,1.00);  border: none; background: none; font-size: 1.2em;}
.NavMov .nav li.social-nav:hover span{height: 30px; width:35px; opacity: 0.8}


.ContentSM{margin-left:5%;}
.ContentMD{margin-left:10%;}


h2{color: rgba(233,101,0,1.00)}
h3{color: rgba(0,203,255,1.00); }


.game-title{ display: block; clear: both;margin:100px 0px; text-align: center; background: url(../img/GamesIcon.svg) top center no-repeat; position: relative; transition: all 0.2s Ease-Out; }
.apps-title{display: block; clear: both; margin:100px 0px; text-align: center; background: url(../img/WebsitesIcon.svg) top center no-repeat; position: relative; transition: all 0.2s Ease-Out;}

.game-title:hover span.title,.apps-title:hover span.title{ padding-top: 20px; transition: all 0.2s Ease-Out; filter: brightness(105%) hue-rotate(350deg); padding-bottom: 20px; }
.game-title span.title, .apps-title span.title{ color: rgba(233,101,0,1.00); display: block; transition: all 0.2s Ease-Out;}
.game-title span.title-section,.apps-title span.title-section{transition: all 0.2s Ease-Out;}
.game-title:hover span.title-section,.apps-title:hover span.title-section{ transition: all 0.2s Ease-Out; }


.latest-title{ display: block; clear: both; margin: 10px 0px; text-align: left; font-size: 4em;}


.hello{ margin-top:135px}
.hello h1{ font-size: 5em; text-transform: uppercase; font-weight: bold;}
.hello h1 strong{color:rgba(233,101,0,1.00);}
.featured-item-big{ border:1px solid rgba(0,203,255,1.00); transition: all 0.2s Ease-Out; padding: 0px!important; overflow: hidden; min-height: 400px; text-transform: uppercase;}
.featured-item-big img{ width: 100%; height: 100%; }
.featured-item-big:hover p{ padding-right: 100px;}

.featured-item-med{ border:1px solid rgba(0,203,255,1.00); transition: all 0.2s Ease-Out;padding: 0px!important; overflow: hidden;text-transform: uppercase; }
.featured-item-med img{ width: 100%; height: 100%; }
.featured-item-med:hover p{ padding-right: 100px;}

.featured-item-small{ border:1px solid rgba(0,203,255,1.00) ; transition: all 0.2s Ease-Out;padding: 0px!important; overflow: hidden;text-transform: uppercase;}
.featured-item-small img{ width: 100%; height: 100%; }
.featured-item-small:hover p{ padding-right: 100px;}

.featured-item-big:hover,.featured-item-med:hover, .featured-item-small:hover{ /*transform: matrix(0.98, 0, 0, 0.98, 0, 0);*/ background:#fff; border:1px solid rgba(184,209,216,1.00); z-index: 999; box-shadow: 0 0 7px 0 rgba(0,203,255,1.00);}
.overlay-featured{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity:0; background: rgba(0,203,255,1.00) ;z-index: 2; /*transform: matrix(1.1, -1.5, 0.5, 1.1, -1.5, 0.5); 1*/ transition: all 0.2s Ease-Out; }
.featured-item-big:hover div.overlay-featured, .featured-item-med:hover div.overlay-featured,.featured-item-small:hover div.overlay-featured{opacity:0.6; z-index: 2; transform: matrix(1, 0, 0, 1, 0, 0);}
.link-featured{ display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;z-index: 999; opacity: 0;}


.featured-item-big div.featured-textbox{ position: absolute; left: 5%; bottom: 0%; width: 100%;z-index: 10; transition: all 0.13s Ease-Out;}
.featured-item-big div.featured-textbox h3{ font-size: 5em;  transition: all 0.13s Ease-Out; text-shadow: 1px 1px 3px #000;}
.featured-item-big:hover div.featured-textbox h3{ font-size: 6em;  color:rgba(233,101,0,1.00); padding-bottom: 20px; border-bottom: 3px dotted rgba(233,101,0,1.00); text-shadow: none;}
.featured-item-big div.featured-textbox p{ font-size: 0em;  transition: all 0.13s Ease-Out;display: block; max-width: 50%; opacity: 0.3; background: rgba(0,0,0,0.88); height: 0px;}
.featured-item-big:hover div.featured-textbox p{ font-size: 2em;  padding-top: 0px; opacity: 1; background:none; height: 100%;}
.featured-item-big:hover div.featured-textbox{bottom: 20%;}
.featured-item-big:hover img{ filter: blur(5px); }


.featured-item-big iframe{ width: 100%!important; height: 100%!important; min-height: 800px;}

.featured-item-med div.featured-textbox{ position: absolute; left: 5%; bottom: 0%; width: 100%;z-index: 10; transition: all 0.13s Ease-Out; }
.featured-item-med div.featured-textbox h3{ font-size: 4em; transition: all 0.13s Ease-Out; text-shadow: 1px 1px 3px #000;}
.featured-item-med:hover div.featured-textbox h3{ font-size: 5em;  color:rgba(233,101,0,1.00); padding-bottom: 20px; border-bottom: 3px dotted rgba(233,101,0,1.00); text-shadow: none;}
.featured-item-med div.featured-textbox p{ font-size: 0em;  transition: all 0.13s Ease-Out;display: block; max-width: 80%; opacity: 0.3; background: rgba(0,0,0,0.88); height: 0px}
.featured-item-med:hover div.featured-textbox p{ font-size: 2em; padding-top: 0px; opacity: 1; background:none;  height: 100%;}
.featured-item-med:hover div.featured-textbox{bottom: 5%;}
.featured-item-med:hover img{ filter: blur(5px)}

.featured-item-small div.featured-textbox{ position: absolute; left: 5%; bottom: 0%; width: 100%;z-index: 10; transition: all 0.13s Ease-Out;}
.featured-item-small div.featured-textbox h3{ font-size: 3em;  transition: all 0.13s Ease-Out; text-shadow: 1px 1px 3px #000;}
.featured-item-small:hover div.featured-textbox h3{ font-size: 4em;  color:rgba(233,101,0,1.00); padding-bottom: 20px; border-bottom: 3px dotted rgba(233,101,0,1.00); text-shadow: none;}
.featured-item-small div.featured-textbox p{ font-size: 0em;  transition: all 0.13s Ease-Out;display: block; max-width: 80%; opacity: 0.3; background: rgba(0,0,0,0.88); height: 0px}
.featured-item-small:hover div.featured-textbox p{ font-size: 1.5em;  padding-top: 0px;  opacity: 1; background:none; height: 100%;}
.featured-item-small:hover div.featured-textbox{bottom: 5%;}
.featured-item-small:hover img{ filter: blur(5px)}

/*projects pages*/

.project{margin-bottom: 30px;}
.project h1{ font-size: 5em; padding-left: 15px; margin-top: 110px;}
.project-page .featured-item-big:hover img, .project-page .featured-item-med:hover img, .project-page .featured-item-small:hover img { filter: blur(0px)!important; }


.btn-home{ width: 200px; height: 60px; background: url(../img/HomeIcon.svg) no-repeat center left; color: #fff; display: block; padding: 0px; text-align: center; transition: all 0.2s Ease-Out; z-index: 1030; position: fixed; top: 75%; left: 1%;}
.btn-home span{display: block; float: right; height: 40%; width: 0%; opacity: 0; vertical-align: top; overflow: hidden; color: rgba(0,203,255,1.00); margin-top: 35px; transition: all 0.2s Ease-Out; }
.btn-home:hover{margin: 0px 0px 0px -10px; }
.btn-home:hover span{width: 60%; background: rgba(233,101,0,1.00); opacity: 1; color: #ffffff;}

.home-portfolio{top:90%!important;}


.btn-back{ width: 200px; height: 100px; background: url(../img/Btn-Prev.svg) no-repeat center left; color: #fff; display: block; padding: 0px; text-align: center; transition: all 0.2s Ease-Out; z-index: 1030; position: fixed; top: 80%; left: 0%;}
.btn-back span{display: block; float: right; height: 30%; width: 0%; opacity: 0; vertical-align: middle; overflow: hidden; color: rgba(0,203,255,1.00); margin-top: 35px; transition: all 0.2s Ease-Out; }
.btn-back:hover{margin: 0px 0px 0px -10px; }
.btn-back:hover span{width: 60%; background: rgba(233,101,0,1.00); opacity: 1; color: #ffffff;}

.btn-next{ width: 200px; height: 100px; background: url(../img/Btn-Next.svg) no-repeat center left; color: #fff; display: block; padding: 0px; text-align: center; transition: all 0.2s Ease-Out; z-index: 1030; position: fixed; top: 85%; left: 0%;}
.btn-next span{display: block; float: right; height: 30%; width: 0%; opacity: 0;  vertical-align: middle; overflow: hidden; background: rgba(0,203,255,1.00); margin-top: 35px; color: rgba(0,203,255,1.00); transition: all 0.2s Ease-Out;}
.btn-next:hover{margin: 0px 0px 0px -10px; /*background: rgba(233,101,0,1.00)*/}
.btn-next:hover span{width: 60%; background: rgba(233,101,0,1.00); opacity: 1; color: #ffffff;}


.btn-top{ width: 100px; height: 110px; background: url(../img/../img/Btn-Top.svg) no-repeat center bottom; background-size: contain; color: #fff; display: block; padding: 0px; text-align: center; transition: all 0.2s Ease-Out; margin: 20px auto; text-decoration: none!important;}
.btn-top span{display: block; height: 0%; width: 100%; opacity: 0; vertical-align: middle;  background: rgba(0,203,255,1.00); color: rgba(0,203,255,1.00); transition: all 0.2s Ease-Out; text-decoration: none!important; border-bottom: none!important;}
.btn-top:hover{margin: 10px auto 0px auto; /*background: rgba(233,101,0,1.00)*/}
.btn-top:hover span{height:30%; background: rgba(233,101,0,1.00); opacity: 1; color: #ffffff;}


.sketchfab-embed-wrapper, .sketchfab-embed-wrapper iframe{min-height: 400px;}

.trailer{ width:100%; min-height: 720px; padding: 0px!important; margin: 0px !important;border: 2px dotted rgba(0,203,255,1.00);}

.zoom-image{ display: block; max-width: 89px; max-height: 67px; width: 7%; height:4%;  position: absolute; right: 2%; bottom: 2%;  z-index: 1000; transition: all 0.1s Ease-In;}
.zoom-pic{background: url(../img/Zoom-In.png) no-repeat center center; background-size: contain;}
.zoom-video{background: url(../img/video.png) no-repeat center center; background-size: contain;}
.featured-item-big:hover span.zoom-image,.featured-item-med:hover span.zoom-image, .featured-item-small:hover span.zoom-image{ width: 89px; height: 67px; }


.scroll-icon{ width: 55px; height: 45px; position: fixed; bottom: 10px; left: 51%; z-index: 1030; text-align: center; text-transform: uppercase; font-size: 1em; transition: all 0.2s Ease-Out;}
.scroll-icon span{background: url(../img/scroll.svg) no-repeat center bottom; display: block; width: 100%; height: 20px; margin: 0px auto;}
.scroll-hidden{display: none;}



 @keyframes spinNav {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
			
        }
		50%{
			-webkit-transform: rotate(180deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(180deg);  /* IE 9 */
            transform: rotate(180deg);  /* Firefox 16+, IE 10+, Opera */
			
			border-radius: 50%
		}
		70%{
			
	 }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
			
        }
    }






.title-section{
	display: block;
	width: 250px;
    height: 250px;
    margin: -125px 0 0 -125px;
	margin: 0px auto;
	position:ab;
	top: -125px;
	right: -50px;
	
	
}

 .title-section:before {
        content: "";
	 	position: absolute;
	 	top: 0px;
		 transition: all 0.2s Ease-Out;
		 width: 250px;
    	height: 250px;
    	display: block;
        border-radius: 0%;
        border: 1px dashed rgba(0,203,255,1.00);
         -webkit-animation: spin 1.5s ease-Out infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 1.5s ease-Out infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

.title-section:after {
        content: "";
        width: 250px;
    	height: 250px;
		position: absolute;
	 	top: 0px;
		transition: all 0.2s Ease-Out;
		display: block;
        border-radius: 00%;
        border: 1px solid rgba(233,101,0,1.00);
        -webkit-animation: spin 2.5s ease-In infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 2.5s ease-In infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }


 @keyframes spintitle {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
			
        }
		50%{
			-webkit-transform: rotate(180deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(180deg);  /* IE 9 */
            transform: rotate(180deg);  /* Firefox 16+, IE 10+, Opera */
			
			border-radius: 50%
		}
		70%{
			
	 }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
			
        }
    }



/*preloader*/

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1040;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
   
    z-index: 1040;
}


   
    #loader:before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        border-radius: 0%;
        border: 1px dashed rgba(0,203,255,1.00);
         -webkit-animation: spin 1.5s ease-Out infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 1.5s ease-Out infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 00%;
        border: 1px solid rgba(233,101,0,1.00);
        -webkit-animation: spin 2.5s ease-In infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 2.5s ease-In infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

   
    @keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
			-webkit-box-shadow: none; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          box-shadow: none; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
        }
		50%{
			-webkit-transform: rotate(180deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(180deg);  /* IE 9 */
            transform: rotate(180deg);  /* Firefox 16+, IE 10+, Opera */
			-webkit-box-shadow: 0px 0px 10px rgba(0,203,255,1.00); /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          	box-shadow: 0px 0px 10px rgba(0,203,255,1.00); /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
			border-radius: 50%
		}
		70%{-webkit-box-shadow: 0px 0px 100px rgba(233,101,0,1.00); /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          	box-shadow: 0px 0px 100px rgba(233,101,0,1.00); /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */}
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
			-webkit-box-shadow: none; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          box-shadow: none; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
        }
    }


    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #060F16;
        z-index: 1000;
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(0);  /* IE 9 */
        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
    }

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }

    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

    /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
				
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
				
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    
    .loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;  
                transition: all 0.3s ease-out;
    }
    .loaded #loader-wrapper {
        visibility: hidden;

        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.3s 1s ease-out;  
                transition: all 0.3s 1s ease-out;
    }
    
    /* JavaScript Turned Off */
    .no-js #loader-wrapper {
        display: none;
    }
    .no-js h1 {
        color: #222222;
    }


.is-loading{ overflow: hidden;}

/*responsive layouts*/


@media (max-width: 600px) {
	.wrapper-content{margin-left: 0px!important;}
	.nav-evc{ width: 100%; position: inherit; min-height: auto; height: auto!important; }
	.logo{margin: 5% 15% 5% 15%; display: block; float: none;}
	.navbar-collapse { border-top: 0px;  box-shadow: none;}
	.project h1 { font-size: 5em;    padding-left: 15px;    margin-top: 10px;}
	.featured-item-big {min-height: auto;}
	
	.featured-item-big div.featured-textbox{ width: auto}
	.featured-item-med div.featured-textbox{ width: auto}
	.featured-item-small div.featured-textbox{ width: auto}
	
	.featured-item-big div.featured-textbox h3 { font-size: 2em;}
	.featured-item-big:hover div.featured-textbox h3 {    font-size: 2em;}
	.featured-item-big div.featured-textbox p {    max-width: 100%; font-size: 1em!important; margin: 0px; padding: 0px;}

	.featured-item-med div.featured-textbox h3 {    font-size: 2em; }
	.featured-item-med:hover div.featured-textbox h3{font-size: 2em; }
	.featured-item-med:hover div.featured-textbox p {   font-size: 1.2em; max-width: 100%; margin: 0px; padding: 0px;}
	
	.featured-item-small div.featured-textbox h3 {    font-size: 2em; }
	.featured-item-small:hover div.featured-textbox h3{font-size: 2em;padding-bottom: 0px; }
	.featured-item-small:hover div.featured-textbox p {   font-size: 1em; max-width: 100%; margin: 0px; padding: 0px;}	
	
}

@media (max-width: 768px) {
	.wrapper-content{margin-left: 0px!important;}
	.nav-evc{ width: 100%; position: inherit; min-height: auto; height: auto!important; }
	.logo{margin: 5% 15% 5% 15%; display: block; float: none;}
	.navbar-collapse { border-top: 0px;  box-shadow: none;}
	.project h1 { font-size: 5em;    padding-left: 15px;    margin-top: 10px;}
	.featured-item-big {min-height: auto;}
	
	
	.featured-item-big div.featured-textbox{ width: auto}
	.featured-item-med div.featured-textbox{ width: auto}
	.featured-item-small div.featured-textbox{ width: auto}
	
	.featured-item-big div.featured-textbox h3 { font-size: 2em;}
	.featured-item-big:hover div.featured-textbox h3 {    font-size: 2em;}
	.featured-item-big div.featured-textbox p {    max-width: 100%; font-size: 1.5em; margin: 0px; padding: 0px;}

	.featured-item-med div.featured-textbox h3 {    font-size: 2em; }
	.featured-item-med:hover div.featured-textbox h3{font-size: 2em; }
	.featured-item-med:hover div.featured-textbox p {   font-size: 1.2em; max-width: 100%; margin: 0px; padding: 0px;;}
	
	.featured-item-small div.featured-textbox h3 {    font-size: 2em; }
	.featured-item-small:hover div.featured-textbox h3{font-size: 2em;padding-bottom: 0px; }
	.featured-item-small:hover div.featured-textbox p {   font-size: 1em; max-width: 100%; margin: 0px; padding: 0px;}	
	
	.btn-home{top: 75%!important;}
	.btn-back{top: 82%!important;}
	.btn-next{top: 88%!important;}
}

@media (max-width: 992px) {
	
	
.nav li {
    height: 80px;
    margin: 10px 0px;
    position: relative;
    overflow: hidden;
}
	
	.featured-item-big div.featured-textbox h3 { font-size: 3em;}
	.featured-item-big:hover div.featured-textbox h3 {    font-size: 3em;}
	.featured-item-big div.featured-textbox p {    max-width: 100%; font-size: 1.5em;}

	.featured-item-med div.featured-textbox h3 {    font-size: 2em; }
	.featured-item-med:hover div.featured-textbox h3{font-size: 2em; }
	.featured-item-med:hover div.featured-textbox p {   font-size: 1.2em; max-width: 100%; padding-right: 20px;}
	
	.featured-item-small div.featured-textbox h3 {    font-size: 2em; }
	.featured-item-small:hover div.featured-textbox h3{font-size: 2em;padding-bottom: 0px; }
	.featured-item-small:hover div.featured-textbox p {   font-size: 1em; max-width: 100%; padding-right: 20px;}
	
	
.btn-back{ width: 100px!important; height: 50px!important; top: 87%;}
.btn-back span{ height: 50%!important; margin-top: 15px!important;}
.btn-back:hover{margin: 0px 0px 0px -10px; }
.btn-back:hover span{width: 90%; background: rgba(233,101,0,1.00); opacity: 1; color: #ffffff;}

.btn-next{ width: 100px!important; height: 50px!important; top: 92%;}
.btn-next span{ height: 50%!important; margin-top: 15px;}
.btn-next:hover{margin: 0px 0px 0px -10px; /*background: rgba(233,101,0,1.00)*/}
.btn-next:hover span{width: 90%; background: rgba(233,101,0,1.00); opacity: 1; color: #ffffff;}

	.nav li.social-nav {    height: 30px;    width: 30px;    margin: 3px 5px;    position: relative;    overflow: hidden;    opacity: 0.3;    float: left !important;}
.nav li.social-nav:hover span {    height: 25px!important;    width: 25px!important;    opacity: 0.5;}
.btn-home {    width: 200px;    height: 40px;    background: url(../img/HomeIcon.svg) no-repeat center left;    color: #fff;    display: block;    padding: 0px;    text-align: center;    transition: all 0.2s Ease-Out;    z-index: 1030; position: fixed;    top: 83%;    left: 1%;}	

.btn-home span {    display: block;    float: right;    height: 65%;    width: 0%;    opacity: 0;    vertical-align: top;    overflow: hidden;    color: rgba(0,203,255,1.00);    margin-top: 10px;    transition: all 0.2s Ease-Out;}
	
.NavSM .nav li.social-nav:hover span {    height: 20px;    width: 21px;    opacity: 0.8;}
	
	
}

@media (min-width: 992px) and (max-width: 1199px) {
 
	.project h1{margin-top: 75px!important;}
	
	.featured-item-big div.featured-textbox h3 { font-size: 3em;}
	.featured-item-big:hover div.featured-textbox h3 {    font-size: 3em;}
	.featured-item-big div.featured-textbox p {    max-width: 100%; font-size: 1.5em;}

	.featured-item-med div.featured-textbox h3 {    font-size: 2em; }
	.featured-item-med:hover div.featured-textbox h3{font-size: 2em; }
	.featured-item-med:hover div.featured-textbox p {   font-size: 1.2em; max-width: 100%; padding-right: 20px;}
	
	.featured-item-small div.featured-textbox h3 {    font-size: 2em; }
	.featured-item-small:hover div.featured-textbox h3{font-size: 2em;padding-bottom: 0px; }
	.featured-item-small:hover div.featured-textbox p {   font-size: 1em; max-width: 100%; padding-right: 20px;}
	
.btn-back{ width: 100px!important; height: 50px!important; top: 90%!important; }
.btn-back span{ height: 50%!important; margin-top: 15px!important;}
.btn-back:hover{margin: 0px 0px 0px -10px; }
.btn-back:hover span{width: 90%; background: rgba(233,101,0,1.00); opacity: 1; color: #ffffff;}

.btn-next{ width: 100px!important; height: 50px!important; top: 95%!important; }
.btn-next span{ height: 50%!important; margin-top: 15px;}
.btn-next:hover{margin: 0px 0px 0px -10px; /*background: rgba(233,101,0,1.00)*/}
.btn-next:hover span{width: 90%; background: rgba(233,101,0,1.00); opacity: 1; color: #ffffff;}

.nav li.social-nav {    height: 25px;    width: 25px;    margin: 12px;    position: relative;    overflow: hidden;    opacity: 0.3;    float: left !important;}
.nav li.social-nav:hover span {    height: 25px;    width: 25px;    opacity: 0.5;}
.btn-home {    width: 200px;    height: 40px;    background: url(../img/HomeIcon.svg) no-repeat center left;    color: #fff;    display: block;    padding: 0px;    text-align: center;    transition: all 0.2s Ease-Out;    z-index: 1030; position: fixed;    top: 85%;    left: 1%;}	

.btn-home span {    display: block;    float: right;    height: 65%;    width: 0%;    opacity: 0;    vertical-align: top;    overflow: hidden;    color: rgba(0,203,255,1.00);    margin-top: 10px;    transition: all 0.2s Ease-Out;}
	
.NavSM .nav li.social-nav:hover span {    height: 23px;    width: 24px;    opacity: 0.8;}
	
}

@media (min-width: 1199px) and (max-width: 1367px) {
 
	.project h1{margin-top: 105px!important;}

	
.btn-back{ width: 100px!important; height: 50px!important; top: 90%!important; }
.btn-back span{ height: 50%!important; margin-top: 15px!important;}
.btn-back:hover{margin: 0px 0px 0px -10px; }
.btn-back:hover span{width: 90%; background: rgba(233,101,0,1.00); opacity: 1; color: #ffffff;}

.btn-next{ width: 100px!important; height: 50px!important; top: 95%!important; }
.btn-next span{ height: 50%!important; margin-top: 15px;}
.btn-next:hover{margin: 0px 0px 0px -10px; /*background: rgba(233,101,0,1.00)*/}
.btn-next:hover span{width: 90%; background: rgba(233,101,0,1.00); opacity: 1; color: #ffffff;}

.nav li.social-nav {    height: 25px;    width: 25px;    margin: 12px;    position: relative;    overflow: hidden;    opacity: 0.3;    float: left !important;}
.nav li.social-nav:hover span {    height: 25px;    width: 25px;    opacity: 0.5;}
.btn-home {    width: 200px;    height: 40px;    background: url(../img/HomeIcon.svg) no-repeat center left;    color: #fff;    display: block;    padding: 0px;    text-align: center;    transition: all 0.2s Ease-Out;    z-index: 1030; position: fixed;    top: 85%;    left: 1%;}	

.btn-home span {    display: block;    float: right;    height: 65%;    width: 0%;    opacity: 0;    vertical-align: top;    overflow: hidden;    color: rgba(0,203,255,1.00);    margin-top: 10px;    transition: all 0.2s Ease-Out;}
	
.NavSM .nav li.social-nav:hover span {    height: 23px;    width: 24px;    opacity: 0.8;}
	
}

@media (min-width: 1367px) and (max-width: 1921px) {
 
	.project h1{margin-top:155px!important;}
	
}

@media (min-width: 1921px) {
 
	.project h1{margin-top: 210px!important;}
	
}