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

* 	[Master Stylesheet]
	
	Theme Name :  NGEN
	Version    :  1.1
	Author     :  Roman Ahmed
	Author URI :  https://themeforest.net/user/desroman
	
====================================================

	TOC:
	=======
	
	1. PRIMARY STYLES
		PAGE LOADER
	2. PAGE CONTENT ON VISIBLE ANIMATIONS
	3. MENU STYLING
		LOGO
		MAIN MENU
		SLIDE PAGE ON MENU VISIBLE
		TOGGLE CAKE ICON
	4. FIXED ELEMENTS STYLINGS
		PAGE NAIGATION NEXT PREV BUTTON
		FIXED PHONE AND EMAIL WRITINGS 
		LEFT WRITING 
		RIGHT WRITING
		FOOTER_WRITING
		VISIT WEBSITE BTN
	5. PAGEPILING SLIDING ANIMATIONS
	6. SINGLE PAGE STYLING
		LEFT AREA
		RIGHT AREA
		QUOTO AREA
	7. PAGEPILING CUSTOM STYLING
		PAGE ANIMATIONS
		NAVIGATION 

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



/* ---------------------------------
0. FONTS
--------------------------------- */


/* ---titilium web ---*/

@font-face {
    font-family: 'Titillium Web';
    font-display: swap;
    src: url('../../fonts/custom/titilliumweb-bold-webfont.woff2') format('woff2'),
         url('../../fonts/custom/titilliumweb-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Titillium Web';
    font-display: swap;
    src: url('../../fonts/custom/titilliumweb-regular-webfont.woff2') format('woff2'),
         url('../../fonts/custom/titilliumweb-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}


/* ---open sans ---*/

@font-face {
    font-family: 'Open Sans';
    font-display: swap;
    src: url('../../fonts/custom/OpenSans-Regular.woff2') format('woff2'),
        url('../../fonts/custom/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    font-display: swap;
    src: url('../../fonts/custom/OpenSans-Light.woff2') format('woff2'),
        url('../../fonts/custom/OpenSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    font-display: swap;
    src: url('../../fonts/custom/OpenSans-SemiBold.woff2') format('woff2'),
        url('../../fonts/custom/OpenSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}






/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */

html { font-size: 100%; height: 100%; width: 100%; }

body{ margin: 0; overflow-x: hidden; font-size: 15px; font-family: 'Open Sans', sans-serif;  word-wrap: break-word; 
	-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }

h1, h2, h3, h4, h5, h6, p, a, ul, span, li, img{ margin: 0; padding: 0; }

h1,h2,h3,h4,h5,h6,ul,a{ font-family: 'Titillium Web', sans-serif; font-weight: 300; }

h1,h2,h3,h4,h5,h6{ font-weight: 400; line-height: 1.3; }

p{ line-height: 1.6; font-weight: 300; }

h1{ font-size: 6em; line-height: 1;  }
h2{ font-size: 4em; }
h3{ font-size: 2.2em; }
h4{ font-size: 1.8em; }
h5{ font-size: 1.1em; }
h6{ font-size: .85em; letter-spacing: 2px; }

a{ display: inline-block; text-decoration: none; color: inherit; }

a:focus, a:active, a:hover { text-decoration: none; }

b{ font-weight: 700; }

img{ width: 100%; }

.navbar{ font-weight: 300; letter-spacing: 2px; }

li{ list-style: none; }

input,textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.center-text{ text-align: center!important; }


/* PAGE LOADER */
	
.css-loader{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: #000; color: #fff; z-index: 99999; 
	text-align: center; }

.css-loader span{ font-size: .9em; animation: font-blur 5s infinite; margin: 0 4px; line-height: 100vh; }

.css-loader span:nth-child(1){ animation-delay: 0.9s; }
.css-loader span:nth-child(2){ animation-delay: 0s; }
.css-loader span:nth-child(3){ animation-delay: .4s; }
.css-loader span:nth-child(4){ animation-delay: .8s; }
.css-loader span:nth-child(5){ animation-delay: 1.2s; }
.css-loader span:nth-child(6){ animation-delay: 1.6s; }
.css-loader span:nth-child(7){ animation-delay: 2s; }
.css-loader span:nth-child(8){ animation-delay: 2.4s; }

@keyframes font-blur{
	0%{ filter: blur(0px); }
	50%{ filter: blur(4px); }
	100%{ filter: blur(0px); }
}



/* ---------------------------------
2. PAGE CONTENT ON VISIBLE ANIMATIONS
--------------------------------- */

.to-top,
.to-bottom,
.to-left,
.to-right,
.scale-up,
.scale-down,
[data-animation-in],
[data-animation-out]{ animation-duration: .6s; animation-timing-function: cubic-bezier(0.770, 0.01, 0.425, 0.820);
	animation-fill-mode: forwards; opacity: 0; }

.to-top{ animation-name: to-top-anim; }

@keyframes to-top-anim{
	0%{ opacity: 0; transform: translateY(60px); }
	100%{ opacity: 1; transform: translateY(0px); }
}
.to-bottom{ animation-name: to-bottom-anim; }

@keyframes to-bottom-anim{
	0%{ opacity: 0; transform: translateY(-60px); }
	100%{ opacity: 1; transform: translateY(0px); }
}

.to-left{ animation-name: to-left-anim; }

@keyframes to-left-anim{
	0%{ opacity: 0; transform: translateX(40%); }
	100%{ opacity: 1; transform: translateX(0px); }
}

.to-right{ animation-name: to-right-anim; }

@keyframes to-right-anim{
	0%{ opacity: 0; transform: translateX(-40%); }
	100%{ opacity: 1; transform: translateX(0px); }
}

.scale-up{ animation-name: scale-up-anim; }

@keyframes scale-up-anim{
	0%{ opacity: 0; transform: scale(.95); }
	100%{ opacity: 1; transform: scale(1); }
}

.scale-down{ animation-name: scale-down-anim; }

@keyframes scale-down-anim{
	0%{ opacity: 0; transform: scale(1.05); }
	100%{ opacity: 1; transform: scale(1); }
}

.to-opacity-1{ animation-name: to-opacity-1-anim; }

@keyframes to-opacity-1-anim{
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}

.delay-2{ animation-delay: .7s; }
.delay-3{ animation-delay: .85s; }
.delay-4{ animation-delay: 1s; }



/* ---------------------------------
3. MENU STYLING
--------------------------------- */

header{ position: fixed; top: 20px; left: 0; right: 0; z-index: 10000; padding: 0 50px; }

	
/* LOGO */

.logo{ height: 40px; float: left; margin: 10px 0; position: relative; z-index: 1000; }

.logo a{ display: block; height: 100%; }

.logo img{ width: auto; height: 100%;  }


/* MAIN MENU */

.main-menu{ position: fixed; top: 0; height: 100%; width: 40%; z-index: 100; text-align: center; left: -40%; 
	opacity: 1; overflow: hidden; transition: all .6s cubic-bezier(0.770, 0.01, 0.425, 0.820); display: table; }

.menu-wrapper { display: table-cell; vertical-align: middle; }

.main-menu.visible{ left: 0; }

.menu-to-right{ animation: menu-to-right-anim .6s cubic-bezier(0.770, 0.01, 0.425, 0.820); }

@keyframes menu-to-right-anim{
	0%{ transform: translateX(0%); }
	100%{ transform: translateX(70%); }
}

.main-menu ul.nav-menu> li{ font-size: 2em; margin: 10px 0; letter-spacing: 5px; }

.main-menu ul.nav-menu> li> .icons>li{ font-size: 20px; display: inline-block; margin: 30px 0px 10px; }

.main-menu ul.nav-menu> li> .icons>li>a{ padding: 5px ; }



#slide_down_ul{
	font-size: 25px;
	letter-spacing: 2px;
	display: none;
}


/* SLIDE PAGE ON MENU VISIBLE */

[data-slide-page-for-menu]{ transition: all .65s cubic-bezier(0.770, 0.01, 0.425, 0.820); }
	
.page-slide-to-right{ transform: translateX(15%); }


/* TOGGLE CAKE ICON */

.nav-icon{ border-radius: 0; border: 0; margin: 21.5px 0; height: 11px; width: 23px; position: relative; float: right;
	background: none; cursor: pointer; z-index: 10000; transition: all .2s ease-in-out; margin-right: 15px; }

.nav-icon:after{ content:''; position: absolute; top: -16px; bottom: -18px; right: -12px; left: -12px; z-index: -1; 
	border-radius: 100px; border-width: 1px; border-style: solid; transition: all .4s ease-in-out; }

.nav-icon:hover:after{ transform: scale(1.1); }

.nav-icon span{ display: block; position: absolute; height: 1px; width: 100%; left: 0; transition: all .4s ease-in-out; }
	
.nav-icon span:nth-child(1){ top: 0; width: 80%; }

.nav-icon span:nth-child(2){ top: 6px; }

.nav-icon span:nth-child(3){ top: 12px; margin-left: 30%; width: 70%;}

.nav-icon:hover span{ width: 100%; margin-left: 0; }

.nav-icon.close-btn{ transform: rotate(-90deg); }

.nav-icon.close-btn span{ width: 100%; margin-left: 0; }

.nav-icon.close-btn span:nth-child(2){ opacity: 0; }
	
.nav-icon.close-btn span:nth-child(1){ transform: translateY(6px) rotate(45deg); }

.nav-icon.close-btn span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }



/* ---------------------------------
4. FIXED ELEMENTS STYLINGS
--------------------------------- */

.scroll_wheel{
    position: fixed;
    z-index: 999;
    height: 45px;
    width: 33px;
    left: 50%;
    bottom: 9%;
    transform: translateX(-50%);
}

.type_of_projects{
    position: fixed;
    z-index: 999;
    right: -100px;
    bottom: 50%;
    color: white;
    font-size: 30px;
    transform: rotate(90deg);
}

/* PAGE NAIGATION NEXT PREV BUTTON*/

.page-nav-area{ position: fixed; bottom: 30px; right: 20px; height: 50px; z-index: 20; }

.page-nav-area .next,
.page-nav-area .prev{ position: absolute; right: 0; text-align: right; }

.page-nav-area .next{ bottom: -5px; transform: rotate(90deg); }

.page-nav-area .prev{ top: -5px; transform: rotate(-90deg); }

.page-nav-area i{ font-size: 2em; }


/* FIXED PHONE AND EMAIL WRITINGS */

.fixed-writing{ position: fixed; z-index: 20; }

.fixed-writing a,
.fixed-writing .copyright{ letter-spacing: 4px; }

.fixed-writing .copyright{ margin-left: 20px; line-height: 14px; }

.fixed-writing .copyright .cpy-icon{ height: 14px; width: 14px; margin-right: 10px; float: left; }


/* LEFT WRITING */

.left-writing{ top: 50%; left: 20px; line-height: 40px; margin-top: -20px;
	transform-origin: left top; transform: rotate(-90deg) translateZ(0) translateX(-50%); }

/* RIGHT WRITING */

.right-writing{ top: 50%; right: 20px; line-height: 40px; margin-top: -20px;
	transform-origin: right top; transform: rotate(90deg) translateZ(0) translateX(50%); }


/* FOOTER_WRITING */

.footer-writing{ bottom: 30px; }

.footer-writing.left{ left: 60px; }

.footer-writing.right{ right: 60px; }

.footer-writing .icons{ margin-right: 20px; }

.footer-writing .icons > li{ display: inline-block; }

.footer-writing .icons > li > a{ padding: 0 5px; font-size: .85em; }


/* VISIT WEBSITE BTN */

.visit .visit-btn-area{ position: absolute; bottom: 30px; height: 30px; z-index: 9; overflow: hidden; }

.visit .visit-website-btn{ position: absolute; bottom: 0; }

.visit .left-btn{ left: 0; right: 50%;  }

.visit .right-btn{ left: 50%; right: 0%; }

.visit .left-btn .visit-website-btn{ right: 0; transform: translateX(50%); font-size: 25px; transition: 0.2s all ease}

.visit .right-btn .visit-website-btn{ left: 0; transform: translateX(-50%); font-size: 25px; transition: 0.2s all ease}
	
.visit .left-btn .visit-website-btn a,
.visit .right-btn .visit-website-btn a{ animation: left-btn-anim 3s forwards infinite linear; animation-play-state: paused; transition: 0.2s all ease }

.visit:hover .visit-btn-area a,
.visit:hover .visit-btn-area a{color: inherit; cursor: default;}

@keyframes left-btn-anim{
	0%{ transform: translateX(0px); }
	25%{ transform: translateX(-15px); }
	75%{ transform: translateX(15px); }
	100%{ transform: translateX(0px); }
}


/* ---------------------------------
5. PAGEPILING SLIDING ANIMATIONS
--------------------------------- */

.bg-to-top-small,
.bg-to-bottom-small,
.content-to-top,
.content-to-bottom,
.bg-to-top,
.bg-to-bottom{ animation-duration: .6s; animation-fill-mode: forwards;
	animation-timing-function:  cubic-bezier(0.770, 0.05, 0.475, 0.870); }
	
.content-to-top{ animation-name: content-to-top-anim; }

@keyframes content-to-top-anim{
	0%{ transform: translateY(90%);}
	100%{ transform: translateY(0%);}
}

.content-to-bottom{ animation-name: content-to-bottom-anim; }

@keyframes content-to-bottom-anim{
	0%{ transform: translateY(0%); }
	100%{ transform: translateY(90%);}
}
.bg-to-top{ animation-name: bg-to-top-anim; }

@keyframes bg-to-top-anim{
	0%{ transform: translateY(90%); }
	100%{ transform: translateY(0%); }
}

.bg-to-bottom{ animation-name: bg-to-bottom-anim; }

@keyframes bg-to-bottom-anim{
	0%{ transform: translateY(0%); }
	100%{ transform: translateY(90%); }
}


.bg-to-top-small{ animation-name: bg-to-top-small-anim; }

@keyframes bg-to-top-small-anim{
	0%{ transform: translateY(200px); }
	100%{ transform: translateY(0%); }
}

.bg-to-bottom-small{ animation-name: bg-to-bottom-small-anim; }

@keyframes bg-to-bottom-small-anim{
	0%{ transform: translateY(0%); }
	100%{ transform: translateY(200px); }
}



/* ---------------------------------
6. SINGLE PAGE STYLING
--------------------------------- */

.single-page{ overflow: hidden; }

.single-page .title{ margin-bottom: 20px;  }

.single-page .page-wrapper{ height: 100%; }

.single-page .go-back-btn{ margin-top: 20px; }



/* LEFT AREA */

.single-page .left-area{ float: left; width: 50%; height: 100%; display: table; }

.left-area .content-wrapper{ display: table-cell; vertical-align: middle; }

.left-area .content-wrapper .contents{ width: 75%; margin: 0 10% 0px 15%;;  }

.left-area .content-wrapper .p-info{ overflow: hidden; }

.left-area .content-wrapper .p-info .info{ clear: both; }

.left-area .content-wrapper .p-info span{ padding: 10px 0; }

.left-area .content-wrapper .p-info span.left{ float: left; width: 20%; }

.left-area .content-wrapper .p-info span.right{ float: right; width: 75%; }


/* RIGHT AREA */

.single-page .right-area{ width: 50%; float: right; height: 100%; position: relative; }

.single-page .right-area-bg{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-size: cover; 
	z-index: 1; }

.single-page .right-area-bg:after{ content:''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; 
	z-index: -1; }



/* QUOTO AREA */

.quoto-area{ margin: 0px 0 25px; }

.quoto-area .quoto i{ font-size: 1.6em; display: inline-block; }

.quoto-area .quoto i:first-child{ transform: rotate(180deg); margin-right: 10px;  }

.quoto-area .quoto i:last-child{ margin-left: 20px; position: absolute;  }

.quoto-area .quoto-name{ position: relative; padding-left: 30px; margin-top: 20px; }

.quoto-area .quoto-name:after{ content:''; position:absolute; top: 50%; height: 1px; width: 20px; left: 0; }



/* ---------------------------------
7. PAGEPILING CUSTOM STYLING
--------------------------------- */

/* PAGE ANIMATIONS */

.pp-easing {
    -webkit-transition: all 600ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -moz-transition: all 600ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    -o-transition: all 600ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    transition: all 600ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.770, 0.05, 0.475, 0.870);
    -moz-transition-timing-function: cubic-bezier(0.770, 0.05, 0.475, 0.870);
    -o-transition-timing-function: cubic-bezier(0.770, 0.05, 0.475, 0.870);
    transition-timing-function:  cubic-bezier(0.770, 0.05, 0.475, 0.870);
}


/* NAVIGATION */

#pp-nav{ bottom: 30px; z-index: 10; }

#pp-nav.right {
    left: 20px;
}

#pp-nav li, .pp-slidesNav li{
	width: auto;
	height: auto;	
	margin: 0;
}
#pp-nav li>a, .pp-slidesNav li>a{
	padding: 6px 0; 
	height: 1px;
	width: 15px;
}
#pp-nav span, .pp-slidesNav span{
	height: 1px;
	margin: 3px 0;
	width: 100%;
	border: 0;
	border-radius: 0;
	transition: all .2s ease-in-out;
}
#pp-nav li:hover span, .pp-slidesNav:hover span{
	width: 23px; 
}
#pp-nav li .active span, .pp-slidesNav .active span{
	width: 25px; 
}





/* ---------------------------------
8. NUNO CUSTOM STYLING
--------------------------------- */

#projects_project_title{width: 80%;}

.single-page .page-wrapper .left-area .contents a{
	background-color: white;
	padding: 20px 35px;
	border-radius: 100px;
	border: 2px solid black;
	font-weight: 900;
	transition: all .2s ease-in-out;
	color: black;
	margin-top: 30px;
	text-align: center;
}

.single-page .page-wrapper .left-area .contents a:hover{
	transform: translateY(5px);
	color: black;
	text-decoration: none;
}


.plus_icon{
	position: absolute;
	z-index: 99999;
	top: 45%;
	left: 10%;
	height: 44px;
	width: 45px;
	display: none;
	cursor: pointer;
}



.h2_modified{
    font-size: 6em;
    line-height: 1;
}