#preloader{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #1a1b23; z-index: 10000;}.loader{position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; -webkit-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0); -moz-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0); -ms-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0); -o-transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0); transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0); -webkit-animation: loader 1.2s infinite ease-in-out; animation: loader 1.2s infinite ease-in-out; margin: auto !important;}.loader span{position: absolute; display: block; width: 20px; height: 20px; opacity: 0.8; background-color: #FFC300; -webkit-animation: loaderBlock 1.2s infinite ease-in-out both; animation: loaderBlock 1.2s infinite ease-in-out both;}.loader span:nth-child(1){top: 0; left: 0;}.loader span:nth-child(2){top: 0; right: 0; -webkit-animation: loaderBlockInverse 1.2s infinite ease-in-out both; animation: loaderBlockInverse 1.2s infinite ease-in-out both;}.loader span:nth-child(3){bottom: 0; left: 0; -webkit-animation: loaderBlockInverse 1.2s infinite ease-in-out both; animation: loaderBlockInverse 1.2s infinite ease-in-out both;}.loader span:nth-child(4){bottom: 0; right: 0;}@-webkit-keyframes loader{0%, 10%, 100%{width: 40px; height: 40px;}65%{width: 80px; height: 80px;}}@-webkit-keyframes loaderBlock{0%, 30%{-webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0);}55%{opacity: 1;}100%{-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);}}@-webkit-keyframes loaderBlockInverse{0%, 20%{-webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0);}55%{opacity: 1;}100%{-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);}}@keyframes loader{0%, 10%, 100%{width: 40px; height: 40px;}65%{width: 80px; height: 80px;}}@keyframes loaderBlock{0%, 30%{-webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0);}55%{opacity: 1;}100%{-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);}}@keyframes loaderBlockInverse{0%, 20%{-webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0);}55%{opacity: 1;}100%{-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);}}/*------------------- 3 ) General Rulas -------------------*/p,h1,h2,h3,h4,h5,h6{color: #343333;}html,body,textarea,button,input{font-family: 'Open Sans', sans-serif;}h1,h2,h3,h4,h5,h6{font-family: 'Hind', sans-serif;}p{font-size: 14px; line-height: 1.42;}h1{font-size: 63px; font-weight: 500;}h2{font-size: 36px; font-weight: 500;}h2.small-heading{padding: 60px 0 20px 0; text-align: center;}h3{font-size: 18px; font-weight: 500;}body{overflow-x: hidden;}/*--------------------- 4 ) Homepage Styles ---------------------*//* ( a ) Homepage */.home-page{width: 100vw; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 2000;}/* ( b ) Introduction Section */.introduction{float: right; padding: 0; overflow: hidden; position: relative;}.introduction img{position: absolute; top: 0; left: 0;}.mask{width: 100%; height: 100%; opacity: 0.8; position: absolute; top: 0; left: 0; background: #1a1b23;}.intro-content{position: relative; z-index: 10; top: 50%; opacity: 0.9; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}.intro-content h1{color: #fff; text-align: center;}.intro-content h1 span,.main-heading h1 span{color: #FFC300;}.intro-content h2{color: #fff; text-align: justify; font-size: 30px; line-height: normal; width: 80%; margin: auto;}.social-media{font-size: 25px; text-align: center; margin-top: 50px;}.social-media a{color: #fff; text-decoration: none; outline: 0 none; padding: 0 10px;}.social-media a + .tooltip > .tooltip-inner{background-color: transparent; color: #FFC300; font-size: 16px;}.social-media a + .tooltip > .tooltip-arrow{border-bottom-color: transparent;}/*Bootstrap tooltips Customized*/.social-media a:hover{color: #FFC300;}/* ( c ) Navigation Menu */.menu{float: right; padding: 0; position: relative;}.menu > div{width: 100%; height: 25%; overflow: hidden; position: relative; cursor: pointer; border-bottom: 2px solid #e7b103;}.menu > div:nth-last-child(1){border-bottom: 0;}.menu > div > img{position: absolute; top: 0; left: 0; width: 100%; height: auto; -webkit-transition: -webkit-transform 1s linear; -moz-transition: -moz-transform 1s linear; -ms-transition: -ms-transform 1s linear; -o-transition: -o-transform 1s linear; transition: transform 1s linear;}.menu > div:hover > img{-webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);}.heading{position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}.heading i{background: rgba(256, 256, 256, 0.2); border-radius: 50%; color: #fff; display: block; font-size: 25px; height: 60px; line-height: 60px; margin: auto auto 10px; text-align: center; box-shadow: 0 0 0 0 rgba(256, 256, 256, 0.2); width: 60px; -webkir-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}.menu > div:hover .heading i{box-shadow: 0 0 0 50px rgba(256, 256, 256, 0);}.heading h2{color: #fff; margin: 0; font-size: 25px; opacity: 0.9;}.heading h2 span{color: #FFC300;}.heading h3{color: #fff; margin-top: 5px; margin-bottom: 0; font-size: 16px; opacity: 0.9; font-weight: 300;}/*------------------ 5 ) Close Button ------------------*/.close-btn{background: url(../images/icon/close.png); z-index: 1000; cursor: pointer; width: 40px; height: 40px; position: fixed; right: 3%; top: 30px; background-size: cover; background-color: #ffffff;}/*------------------------------------------------- 6 ) General Rules for Content Pages Fixed Image -------------------------------------------------*/.test-page,.timeline-page,.scenes-page,.contact-page{position: absolute; top: 0; left: 0; width: 100%;}.image-container{height: 100vh; position: fixed; padding: 0; overflow: hidden;}.main-heading{position: relative; top: 50%; padding-left: 50px; -webkit-transform: translateY(200%); -moz-transform: translateY(200%); -ms-transform: translateY(200%); -o-transform: translateY(200%); transform: translateY(200%);}.main-heading h1{color: #fff; position: relative; text-align: left;}.main-heading h1:after{background-color: #FFC300; position: absolute; content: ""; top: 100%; left: 0; width: 400px; height: 6px;}.content-container{left: 41.666%; position: relative; padding: 0; background: #f5f5f5;}/*------------------ 7 ) Profile Page ------------------*//* ( a ) Story of Glory */.infographic-page .image-container{background: url(../images/background/profile_image.jpg); background-size: cover; background-position: bottom;}.story{background-size: cover; min-height: 100vh;}.story-content{padding: 20px;}.story-content img{padding: 0; border: 1px solid #FFC300;}.story-content div h3{color: #FFC300; line-height: 1; margin-top: 0;}.story-content div p{text-indent: 25px;}.story-content div a{border: 1px solid #FFC300; color: #FFC300; display: block; float: left; margin: 29px 5px; padding: 10px 25px; text-decoration: none; text-align: center; -webkir-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}.story-content div a:hover{background: #FFC300; color: #fff;}/* ( b ) What Can I Do */.services-container{background: #FFC300;}.services-container h2{color: #fff;}.services{text-align: center; padding: 15px; -webkir-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}.services i{background: #fff; border-radius: 50%; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.15), 0 0 0 0 rgba(255, 255, 255, 0.3); color: #FFC300; font-size: 36px; height: 60px; line-height: 60px; width: 60px; margin: 20px 0 10px 0; -webkir-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; cursor: pointer;}.services:hover i{box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.15), 0 0 0 40px rgba(255, 255, 255, 0);}.services p,.services h3{color: #fff;}/* ( c ) Some Facts */.facts{background-size: cover; text-align: center; padding: 50px 15px;}/*----------------- 8 ) Resume Page -----------------*//* ( a ) Education Section */.timeline-page .image-container{background: url(../images/background/resume_image.jpg); background-size: cover; background-position: bottom;}.education-container{position: relative; margin-bottom: 50px; margin-top: 25px;}.education-container:before{background: #FFC300; content: ""; height: 96%; left: 50px; position: absolute; top: 2%; width: 2px;}.item{position: relative; margin-bottom: 5px;}.education-container .bullet{background: #FFC300; border: 5px solid #f5f5f5; border-radius: 50%; height: 30px; left: 21px; display: inline-block; position: relative; width: 30px; -webkir-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; vertical-align: top;}.education-content{display: inline-block; padding: 0 15px; margin-left: 15px; width: 88%;}.education-content h3{background: #FFC300; color: #fff; display: block; margin: 0; padding: 10px; position: relative;}.education-content h3:before{border-color: transparent #FFC300 transparent transparent; border-image: none; border-style: solid; border-width: 10px; content: ""; position: absolute; right: 100%; top: 5px;}.education-content h3 span{font-size: 16px;}.education-content p{padding: 15px 5px;}/* ( b ) Experience Section */.experience{/*background: #FFC300;*/}.experience h2{color: #fff;}.experience-container{position: relative; margin-bottom: 50px; margin-top: 25px;}.experience-container:before{background: #ffc300; content: ""; height: 96%; right: 50px; position: absolute; top: 2%; width: 2px;}.experience-container .bullet{background: #fff; border: 5px solid #FFC300; border-radius: 50%; height: 30px; right: 21px; display: inline-block; position: absolute; width: 30px; vertical-align: top;}.experience-content{display: inline-block; padding: 0 15px; margin-left: 15px; width: 88%;}.experience-content h3{background: #ffc300; color: #ffffff; display: block; margin: 0; line-height: 1.42; padding: 10px; position: relative; font-weight: bold;}.experience-content h3:before{border-color: transparent transparent transparent #ffc300; border-image: none; border-style: solid; border-width: 10px; content: ""; position: absolute; left: 100%; top: 5px;}.experience-content h3 span{font-size: 16px;}.experience-content p{padding: 15px 5px; color: #232222;}/* ( c ) Skills Section */.skill-container{text-align: center; padding: 20px 15px;}.skill{text-align: center; padding: 20px 0; position: relative;}.skill span{color: #343333; font-size: 18px; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}/*-------------------- 9 ) Portfolio Page --------------------*//* ( a ) Portfolio Section */.scenes-page .image-container{background: url(../images/background/portfolio_image.jpg); background-size: cover; background-position: bottom;}.project-controls{padding: 20px 0; text-align: center;}.filter{background: none; border: 1px solid #FFC300; color: #FFC300; margin: 10px 0; padding: 10px 25px; -webkir-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}.filter:hover{background: #FFC300; color: #fff;}.filter.active{background: #FFC300; color: #fff;}#projects > .mix{display: none;}.projet-items{padding: 20px;}/*----- Hover Effect Portfolio Image --------*/.project{width: 100%; overflow: hidden; margin: 15px 0; position: relative; -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);}.project img{position: relative; width: 100%; height: 100%; top: 0; left: 0;}.project .ovrly{position: absolute; height: 100%; left: 0; top: 0; width: 100%; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}.project .buttons{position: absolute; bottom: 0; right: 10%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}.project .buttons a{-webkit-transform: scale(5); -moz-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); opacity: 0; margin: 0 2px; background: #fff; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; float: left; display: block; line-height: 40px; outline: none; font-size: 16px; text-align: center; text-decoration: none; width: 40px; height: 40px; color: #343333; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; -ms-transition: -ms-transform 0.3s, opacity 0.3s; -o-transition: -o-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;}.project .buttons .fa-search{-webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; background: #ffc300;}.project .buttons a{transform: scale(1); opacity: 1; width: 130%; border-radius: 15px;}.project .ovrly{opacity: 1; cursor: pointer;}/*----- Hover Effect Portfolio Image [ END] --------*/.pop-up-box{display: none;}.popup_content{max-width: 500px; border: 5px solid #FFC300; background: #fff;}.popup_content img{display: block; width: 100%; background: #fff; margin: 0 auto;}.popup_content .popup-content{padding: 15px; clear: both;}.popup_content h3{text-align: center; font-weight: bold; line-height: normal;}.popup-content p{direction: rtl; max-height: 200px; overflow-y: scroll; overflow-x: hidden; line-height: normal;}.popup_content a{border: 1px solid #FFC300; color: #FFC300; display: block; width: 150px; margin: 30px auto; padding: 10px 25px; text-decoration: none; text-align: center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}.popup_content a:hover{background: #FFC300; color: #fff;}/*----- Popup Sty;es [ END] --------*//* ( b ) Testimonial Section */.testimonials{background: #FFC300;}.testimonials h2{color: #fff;}.testimonials-container{padding: 20px;}.testimonials-container div div p{font-style: italic; color: #fff; font-size: 16px; text-align: center;}.testimonials-container div div p i{margin: 0 5px;}.testimonials-container div div h3{font-style: italic; color: #fff; text-align: center;}/*------------------- 10 ) Contact Page -------------------*//* ( a ) Contact Form */.contact-page .image-container{background: url(../images/background/contact_image.jpg); background-size: cover; background-position: bottom;}.contact-form{float: none; margin: 0 auto;}.contact-form input,.contact-form textarea{border: 1px solid #FFC300; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; border-radius: 2px; height: 40px; margin: 10px 0; padding: 5px 10px; background: #f5f5f5; width: 100%;}.contact-form textarea{height: 300px;}.contact-form input::-webkit-input-placeholder,.contact-form textarea::-webkit-input-placeholder{font-style: italic;}.contact-form input:-moz-placeholder,.contact-form textarea:-moz-placeholder{font-style: italic;}.contact-form input::-moz-placeholder,.contact-form textarea::-moz-placeholder{font-style: italic;}.contact-form input:-ms-input-placeholder,.contact-form textarea:-ms-input-placeholder{font-style: italic;}.contact-form input:focus,.contact-form textarea:focus,.contact-form input:hover,.contact-form textarea:hover{box-shadow: 0px 0px 3px 0px #FFC300;}.contact-form button{background: none; border-radius: 2px; border: 1px solid #FFC300; color: #FFC300; margin: 10px 0; padding: 10px 25px; text-align: center; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}.contact-form button:hover{background: #FFC300; color: #fff;}.error, .success{display: none;}.error h3,.success h3{border-radius: 2px; display: block; margin: 10px 0; padding: 15px 0; text-align: center; width: 100%;}.error h3{color: #c9302c; border: 1px solid #c9302c;}.success h3{color: #449d44; border: 1px solid #449d44;}.google-map{width: 100%; height: 700px;}/* ( b ) Contact Details */.contact{padding: 20px; height: 155px;}.contact p{text-align: center;}.contact p i{font-size: 25px; margin: 20px 0;}.contact-details .social-media{margin: 0; padding: 20px 0;}.contact-details .social-media a{background: #343333 none repeat scroll 0 0; border-radius: 50%; height: 50px; line-height: 50px; padding: 0; width: 50px; margin: 0 5px; font-size: 18px;}.contact-details .social-media a + .tooltip > .tooltip-inner{background-color: #343333; color: #FFC300; font-size: 16px; padding: 3px 10px 5px 10px; border-radius: 2px; border: 0 none;}.contact-details .social-media a + .tooltip > .tooltip-arrow{border-top-color: #343333;}/*------------- 11 ) Footer -------------*/.footer{background: #FFC300; padding: 10px 20px 6px 20px;}.footer a{color: #fff; text-decoration: none; font-size: 16px; float: left;}.footer p{color: #fff; margin:0; direction: rtl;}