/*

===========================================================================

 EXCLUSIVE ON themeforest.net

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 Project Name		: Persoway - Responsive CV/Resume Template

 Author 			: Yahya Essam

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 Copyright (c) 2016 - Yahya Essam - https://themeforest.net/user/yahyaessam

===========================================================================

  Content Table

===========================================================================

[1] General

[2] Loading Animation

[3] Nav Bar

[4] Header

[5] About

[6] Features

[7] Portfolio

[8] Contact

[9] Footer

[10] Responsive

===========================================================================

*/

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

[1] General

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

*{

    box-sizing:border-box;

}

body {

    overflow:hidden;

	font-family: 'Raleway', sans-serif;

}

h1,h2,h3,h4,h5,h6 {

    font-weight:bold;

}

a,

button {

	outline: none;

}

a {

	text-decoration: none;

}

section {

    padding:100px 0;

}

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

[2] Loading Animation

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

.loading {

    display:table;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background-color:#000;

    z-index:9999;

}

.table-cell {

    display:table-cell;

    vertical-align: middle;

}

.sk-fading-circle {

  margin: 100px auto;

  width: 69px;

  height: 60px;

  position: relative;

}

.flexBox{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


.sk-fading-circle .sk-circle {

  width: 100%;

  height: 100%;

  position: absolute;

  left: 0;

  top: 0;

}



.sk-fading-circle .sk-circle:before {

  content: '';

  display: block;

  margin: 0 auto;

  width: 15%;

  height: 15%;

  background-color: #FFF;

  border-radius: 100%;

  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;

          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;

}

.sk-fading-circle .sk-circle2 {

  -webkit-transform: rotate(30deg);

      -ms-transform: rotate(30deg);

          transform: rotate(30deg);

}

.sk-fading-circle .sk-circle3 {

  -webkit-transform: rotate(60deg);

      -ms-transform: rotate(60deg);

          transform: rotate(60deg);

}

.sk-fading-circle .sk-circle4 {

  -webkit-transform: rotate(90deg);

      -ms-transform: rotate(90deg);

          transform: rotate(90deg);

}

.sk-fading-circle .sk-circle5 {

  -webkit-transform: rotate(120deg);

      -ms-transform: rotate(120deg);

          transform: rotate(120deg);

}

.sk-fading-circle .sk-circle6 {

  -webkit-transform: rotate(150deg);

      -ms-transform: rotate(150deg);

          transform: rotate(150deg);

}

.sk-fading-circle .sk-circle7 {

  -webkit-transform: rotate(180deg);

      -ms-transform: rotate(180deg);

          transform: rotate(180deg);

}

.sk-fading-circle .sk-circle8 {

  -webkit-transform: rotate(210deg);

      -ms-transform: rotate(210deg);

          transform: rotate(210deg);

}

.sk-fading-circle .sk-circle9 {

  -webkit-transform: rotate(240deg);

      -ms-transform: rotate(240deg);

          transform: rotate(240deg);

}

.sk-fading-circle .sk-circle10 {

  -webkit-transform: rotate(270deg);

      -ms-transform: rotate(270deg);

          transform: rotate(270deg);

}

.sk-fading-circle .sk-circle11 {

  -webkit-transform: rotate(300deg);

      -ms-transform: rotate(300deg);

          transform: rotate(300deg); 

}

.sk-fading-circle .sk-circle12 {

  -webkit-transform: rotate(330deg);

      -ms-transform: rotate(330deg);

          transform: rotate(330deg); 

}

.sk-fading-circle .sk-circle2:before {

  -webkit-animation-delay: -1.1s;

          animation-delay: -1.1s; 

}

.sk-fading-circle .sk-circle3:before {

  -webkit-animation-delay: -1s;

          animation-delay: -1s; 

}

.sk-fading-circle .sk-circle4:before {

  -webkit-animation-delay: -0.9s;

          animation-delay: -0.9s; 

}

.sk-fading-circle .sk-circle5:before {

  -webkit-animation-delay: -0.8s;

          animation-delay: -0.8s; 

}

.sk-fading-circle .sk-circle6:before {

  -webkit-animation-delay: -0.7s;

          animation-delay: -0.7s; 

}

.sk-fading-circle .sk-circle7:before {

  -webkit-animation-delay: -0.6s;

          animation-delay: -0.6s; 

}

.sk-fading-circle .sk-circle8:before {

  -webkit-animation-delay: -0.5s;

          animation-delay: -0.5s; 

}

.sk-fading-circle .sk-circle9:before {

  -webkit-animation-delay: -0.4s;

          animation-delay: -0.4s;

}

.sk-fading-circle .sk-circle10:before {

  -webkit-animation-delay: -0.3s;

          animation-delay: -0.3s;

}

.sk-fading-circle .sk-circle11:before {

  -webkit-animation-delay: -0.2s;

          animation-delay: -0.2s;

}

.sk-fading-circle .sk-circle12:before {

  -webkit-animation-delay: -0.1s;

          animation-delay: -0.1s;

}



@-webkit-keyframes sk-circleFadeDelay {

  0%, 39%, 100% { opacity: 0; }

  40% { opacity: 1; }

}



@keyframes sk-circleFadeDelay {

  0%, 39%, 100% { opacity: 0; }

  40% { opacity: 1; } 

}

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

End Of Loading Animation

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

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

[3] Nav Bar

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

.custom-navbar {

    border: none;

    margin-bottom: 0;

    background-color: transparent;

    padding:5px 0px;

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

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

}

.scroll {

    background-color:#111 !important;

}

.custom-navbar .navbar-brand {

    color: #FFF;

    font-weight: bold;

    font-size: 3rem;

    line-height: 35px;

}

.custom-navbar .nav li a {

    font-size: 14px;

    color: #FFF;

    line-height:40px;

    padding-right:0 20px;

    letter-spacing:1px;

    text-transform:capitalize;

    font-weight:500;

}



.custom-navbar .navbar-nav > li > a:hover,

.custom-navbar .navbar-nav > li > a:focus,

.nav li a.active {

  background-color: transparent;

  color:crimson;

  

}

.custom-navbar .nav li.active > a {

    background-color: transparent;

    color:crimson;

}

.custom-navbar .navbar-toggle {

    border: none;

    padding-top: 10px;

}

.custom-navbar .navbar-toggle {

    background-color: transparent;

}

.custom-navbar .navbar-toggle .icon-bar {

    background: #000;

    border-color: transparent;

}

@media(min-width:768px) {

    .custom-navbar {

        border-bottom: 0;

    }

    .custom-navbar.top-nav-collapse {

        background: #ffffff;

        box-shadow:0 40px 100px rgba(0,0,0,.2);

        padding: 0px 0;

    }



}

.special {

    font-weight:bold;

    color:crimson;

}

@media (max-width:768px){

    .navbar-collapse {

        text-align:center;  

    }

    .custom-navbar .nav li a {

        line-height:20px;

        overflow:hidden;

    }

}

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

   End NavBar

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



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

[4] Header

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

@font-face {

	font-weight: normal;

	font-style: normal;

	font-family: 'codropsicons';

	src:url('../fonts/codropsicons.eot');

	src:url('../fonts/codropsicons.eot?#iefix') format('embedded-opentype'),

		url('../fonts/codropsicons.woff') format('woff'),

		url('../fonts/codropsicons.ttf') format('truetype'),

		url('../fonts/codropsicons.svg#codropsicons') format('svg');

}

.large-header {

    display:none;

	position:relative;

	width: 100%;

	background: #333;

	overflow: hidden;

	background-size: cover;

	background-position: center center;

	z-index: 1;

}

.table {

    display:table;

    width:100%;

    height:100%;

    position:absolute;

    top:0;

    left:0;

    text-align:left;

}

#home h1 {

    color:#f9f9f9;

    font-size:42px;

    font-weight:500;

    letter-spacing:1px;

    margin-bottom:50px;

    text-transform: capitalize;

}

#home h1 span {

    color:crimson;

}

#home p {

    font-size:24px;

    color:#FFF;

    letter-spacing:1px;

    line-height:2;

    text-transform:capitalize;

}

#home p span {

    font-weight:700;  

}

#home a {

    text-transform:none;

    color:#f9f9f9;

    font-size:14px;

    letter-spacing:1px;

    padding:14px 20px;

    background-color:crimson;

    border-radius:6px;

    font-weight:bold;

    border:1px solid crimson;

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

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

}

#home a:hover,

#home a:focus {

    text-decoration:none;

    background-color:transparent;

    color:crimson;

    border:1px solid crimson;

}

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

   End Header

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



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

[5] about

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

#about h2 {

    color:crimson;

    font-weight:500;

    letter-spacing:1px;

    margin:10px 10px 5px 10px;

    text-transform: capitalize;

}

#about h3 {

    letter-spacing:1px;

    font-weight:400;

    margin:10px;

    font-size:18px;

}

#about p {

    font-size:16px;

    line-height:32px;

    letter-spacing:1px;

    font-weight:300;

    text-align:left;

    margin:30px 39px 10px 10px;

    color:#333;

    padding-bottom:30px;

}

#about p span {

    font-weight:400;

}

.btn-about {

    margin:10px;

    border:1px solid crimson;

    outline:none;

    color:#FFF;

    background-color:crimson;

    padding:15px;

    font-weight:bold;

    font-size:16px;

    letter-spacing:1px;

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

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

}

.btn-about:hover {

    background-color:#FFF;

    color:crimson;

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

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

}

#about img {

    -webkit-box-shadow:0 0 20px #DDD;

    box-shadow:0 0 20px #DDD;

}

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

   End about

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



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

[6] Services

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

#services {

    background-color:rgba(221,221,221,0.4);

    box-sizing:border-box;

}

#services h2 {

    letter-spacing:1px;

    text-transform:capitalize;

    color:#222;

}

#services .sub-title {

    font-size:14px;

    letter-spacing:1px;

    font-weight:300;

    margin:15px auto;

    color:#333;

    padding:10px;

    line-height:25px;

}

.feature p {

    font-size:14px;

    letter-spacing: 1px;

    font-weight:300;

    line-height:25px;

    margin:20px auto;

    padding:10px;

    color:#333;

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

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

}

.feature {

    padding:20px 0;

    background:none repeat scroll 0 0 #fff;

    color:#777;

    box-shadow:0 0 20px #999;

    margin:15px auto;

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

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

    

}

.feature h3 {

    color:#333;

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

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

}

.feature:hover{

    background-color:crimson;

    color:#FFF !important;

    transform: translate(0,-12px);

    box-shadow: 0px 9px 29px rgba(51, 51, 51, 0.55);

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

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

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

}

.feature:hover h3,

.feature:hover p {

    color:#FFF;

}

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

   End Services 

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



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

[7] Portfolio 

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

#portfolio .sub-title {

    font-size:14px;

    letter-spacing:1px;

    font-weight:300;

    margin:15px auto;

    color:#333;

    padding:10px;

    line-height:25px;

}

figure {

	position: relative;

	overflow: hidden;

	background: #3085a3;

	text-align: center;

	cursor: pointer;

    margin:15px auto;

}

figure img {

	position: relative;

	display: block;

	opacity: 0.8;

    width:100%;

    max-height:500;

}

figure figcaption {

	padding: 2em;

	color: #fff;

	text-transform: uppercase;

	font-size: 1.25em;

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden;

}

figure figcaption::before,

figure figcaption::after {

	pointer-events: none;

}

figure figcaption,

figure figcaption > a {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

}

figure figcaption > a {

	z-index: 1000;

	text-indent: 200%;

	white-space: nowrap;

	font-size: 0;

	opacity: 0;

}

figure h2 {

	word-spacing: -0.15em;

	font-weight: 300;

}

figure h2 span {

	font-weight: 800;

}

figure h2,

figure p {

	margin: 0;

}

figure p {

	letter-spacing: 1px;

	font-size:14px;

}

figure.effect {

	background: crimson;

}

figure.effect img {

	opacity: 0.95;

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

	transition: opacity 0.35s, transform 0.35s;

	-webkit-transform: scale3d(1.05,1.05,1);

	transform: scale3d(1.05,1.05,1);

}

figure.effect figcaption::before {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: rgba(255,255,255,0.5);

	content: '';

	-webkit-transition: -webkit-transform 0.6s;

	transition: transform 0.6s;

	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);

	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);

}

figure.effect p {

	position: absolute;

	right: 0;

	bottom: 0;

	margin: 3em;

	padding: 0 1em;

	max-width: 150px;

	border-right: 4px solid #fff;

	text-align: right;

	opacity: 0;

	-webkit-transition: opacity 0.35s;

	transition: opacity 0.35s;

}

figure.effect h2 {

	text-align: left;

}

figure.effect:hover img {

	opacity: 0.6;

	-webkit-transform: scale3d(1,1,1);

	transform: scale3d(1,1,1);

}

figure.effect:hover figcaption::before {

	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);

	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);

}

figure.effect:hover p {

	opacity: 1;

	-webkit-transition-delay: 0.1s;

	transition-delay: 0.1s;

}

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

   End portfolio

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



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

Hire Me

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

#hire-me {

    background-color:#222;

}

#hire-me p {

    font-size:15px;

    color:#DDD;

    letter-spacing:1px;

    font-weight:300;

}

#hire-me h3 {

    letter-spacing:1px;

    color:#f5f5f5;

    padding:0;

    margin:20px auto 50px;

    font-size:42px;

    line-height:55px;

}

#hire-me h3 span {

    font-weight:300;

}

#hire-me a {

    text-decoration:none;

    color:currentColor;

    padding:14px 20px;

    background-color:crimson;

    color:#FFF;

    border-radius:5px;

    font-weight:bold;

    letter-spacing:1px;

    font-size:16px;

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

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

}

#hire-me a:hover {

    background-color:#FFF;

    color:crimson;

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

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

}

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

   End Hire Me 

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



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

[8] Contact

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

#contact .overlay {

    background-color:rgba(2,2,2,.7);

    padding:100px 0;

}

#contact h2 {

    color:#f6f6f6;

}

#contact .sub-title {

    font-size:14px;

    letter-spacing:1px;

    font-weight:300;

    margin:15px auto;

    color:#f9f9f9;

    padding:10px;

    line-height:25px;

}

#contact input,

#contact textarea {

    width:100%;

    border-radius:6px;

    margin:10px auto;

    outline:none;

    height:46px;

    text-indent:10px;

    border:none;

    background-color:rgba(5,5,5,0.3);

    color:#FFF;

    font-size:14px;

    letter-spacing:1px;

}

#contact input:focus,

#contact textarea:focus {

    -webkit-box-shadow:0 0 7px crimson;

    box-shadow:0 0 7px crimson;

}

#contact textarea {

    resize:none;

    height:90px;

    line-height:25px;

}

#contact div.btn {

    background-color: crimson;

    font-weight: 700;

    letter-spacing: 1px;

	width:100%;

    border-radius:6px;

    margin:10px auto;

    outline:none;

    height:46px;

    text-indent:10px;

    border:none;

	line-height: 2.2;

    color:#FFF;

    font-size:14px;

    letter-spacing:1px;

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

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

}

#contact div.btn:hover {

    background-color:#FFF;

    color:crimson;

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

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

}

#contact .info {

    background-color:rgba(5,5,5,.3);

    color:#f9f9f9;

    overflow:hidden;

    margin-top:10px;

    margin-bottom:10px;

    border-radius:6px;

    padding:10px;

    display:table;

    text-align:left;

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

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

    

}

#contact .info p {

    font-size:14px;

    letter-spacing:1px;

    line-height:25px;

    font-weight:300;

    text-indent:10px;

    display: table-cell;

    vertical-align: middle;

}

p.phone:before,

p.email:before,

p.address:before {

    font-family:"FontAwesome";

    color:#f9f9f9;

}

p.phone:before {

    content: "\f095";

}

p.email:before {

    content:"\f003";

}

p.address:before {

    content:"\f041";

    text-indent:50px;

}

#contact .info:hover {

    background-color:crimson;

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

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

}

/*Success Message Style*/

.form_success {

	width:100%;

	height:100%;

	font-family:"Raleway", sans-serif;

	font-size:14px;

	padding:10px;

	background:rgba(3,3,3,.6);

	border:2px solid crimson;

	box-shadow: 0 0 20px #cbcbcb;

	-moz-box-shadow: 0 0 20px #cbcbcb;

	-webkit-box-shadow: 0 0 20px #cbcbcb;

	-webkit-border-radius: 4px;

	-moz-border-radius: 4px;

	border-radius: 4px;

	line-height:25px;

	color:#f9f9f9;

}

/*Error Messages Style*/

.form_info {  

	width:100%;

	height:100%;

	text-align:left;

	border-bottom: 2px solid crimson;

	padding:8px 10px 8px 10px;

	font: normal 14px Raleway;

	-moz-box-shadow: 0 0 5px #888;

	-webkit-box-shadow: 0 0 5px#888;

	box-shadow: 0 0 5px #888;

	-webkit-border-radius: 4px;

	-moz-border-radius: 4px;

	border-radius: 4px;

	line-height:25px;

	color: #f9f9f9;

	background: rgba(3,3,3,.6);

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

}

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

   End Contact

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



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

[9] footer

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

#footer {

    background-color:#111;

    color:#ffffff;

    padding:100px 0;

}

#footer h5 {

    font-size:14px;

    margin-top:50px;

}

.name {

    font-weight:bold;

    color:crimson;

}

.name:hover {

    color:#FFF;

}

#footer .social-media a {

    text-decoration:none;

    color:transparent;

    padding:10px 15px;

    border:1px solid rgba(255,255,255,.4);

    margin:25px 5px;

    font-size:14px;

}

#footer .social-media a:hover {

    color:crimson;

    background-color:crimson;

}

#footer .fa {

    margin:5px;

    color:#FFF;

}

#footer .fa:hover {

    color:#FFF;

}

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

   End Footer 

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



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

   Responsive 

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

/* Medium Layout: 1280px. */

@media only screen and (min-width: 992px) and (max-width: 1200px) { 

    

}

/* Tablet Layout: 768px. */

@media only screen and (min-width: 768px) and (max-width: 991px) { 

   /*about*/

    #about h2 {

        margin-top:45px;

    }

    /* contact */

    .tab {

        margin-left:15px;

    }

}

/* Mobile Layout lower than: 320px. */

@media only screen and (max-width: 768px) { 

    /* Nav */

    .custom-navbar .navbar-brand {

        line-height:20px;

    }

    .custom-navbar .navbar-toggle .icon-bar {

        color:crimson;

        background-color:crimson;

    }

    /* about */

    #about h2 {

        margin-top:45px;

    }

    /* contact */

    .tab {

        margin-left:15px;

    }

    /*portfolio */

    figure {

        max-width: 500px;

        max-height: 500px;

    }

}

/* Wide Mobile Layout: 480px. */

@media only screen and (min-width: 480px) and (max-width: 767px) { 

    

}

@media only screen and (max-width: 480px) {

   /* Nav */

    .navbar-collapse {

     background-color:#222;

    }

    .custom-navbar .navbar-toggle .icon-bar {

        color:crimson;

        background-color:crimson;

    }

    .custom-navbar .navbar-brand {

        font-size:2rem;

        line-height:20px;

    }

    

    /* Home */

    #home p {

        font-size:14px;

    }

    #home h1 {

        font-size:20px;

    }

    /* about */

    #about h2 {

        margin-top:45px;

        line-height:25px;

    }

    #about p {

        margin: 30px 20px 10px 10px;

    }

    #about h3 {

        line-height: 25px;

    }

    /* portfolio */

    figure h2 {

        font-size:24px;

    }

    /* Hire Me */

    #hire-me h3 {

        font-size:30px;

    }

    /* footer */

    #footer .social-media a {

        padding:10px 10px;

        line-height:50px;

    }

    #footer p {

        line-height:25px;

    }

}

@media only screen and (max-width: 321px) {



}