/*

	Name: Phase
	
	Type: Under Construction Template
	Author: Kmmrafi
	Version: 1.0
	
*/







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


	Table of Contents
	
	

		01. Generel Styles 

			+Generate Google Fonts 
			+Essential Styles
			+Buttons
			+Floats
			+Overlays
			+Borders

		02. Responsive Grid

			+Columns
			+Box Sizes

		03. Section Titles

		04. Font Styles

			+Font Classes
			+Font Positions
			+Font Weight
			+Font Transformation
			+Font Colors
			+Font Sizes

		05. Loading Screen

			+Loader Container
			+Loader Logo
			+Loader Logo
			+After Loading
			+JavaScript Off

		06. Backgrounds

			+Solid Backgrounds
			+Gradient Backgrounds
			+Image Backgrounds
			+Animated Backgrounds
			+Other Backgrounds

		07. Navigations

		08. Homepage
			
			+Splitted Halfs
			+Contents Over Background
			+Logo Styles
			+Homepage Titles
			+Homepage Social Links
			+Separators
			+Countdown Styles


		09. Sliders

		10. About

		11. Skills

		12. Subscribe

		13. Quotes

		14. Services

		15. Works

		16. Team

		17. Contact

		18. Clients

		19. Map

		20. Footer

			+Extra Footer


		21. Responsive

			+Resolution Under 1275px
			+Resolution Under 1125px
			+Resolution Under 1000px
			+Resolution Under 900px
			+Resolution Under 650px
			+Resolution Under 530px
			+Resolution Under 400px
			+Resolution Under 320px
				
	
====================================================*/







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

	01. Generel Styles 

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




/* Generate Google Fonts 
-------------------------*/



	/* Raleway */
	@import url(https://fonts.googleapis.com/css?family=Raleway:800,700,600,400,300,200,100);
	
	/* Source Sans Pro */
	@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:900,800,700,600,400,300,200,100);
	
	/* Roborto */
	@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);

	
	
	
/* Essential Styles
-------------------------*/




	*{
		margin: 0%;
		padding: 0%;
		
	}

	::selection {
		background-color: #ececec;
	}
	
	
	html, body {
		width:100%;
		height:100%;
		padding:0;
		margin-left:0;
		margin-right:0;
		font-family: 'Source Sans Pro', sans-serif;
		-webkit-font-smoothing: antialiased;
		text-align: center;
		font-size: 1em;
	}

	body{
		overflow-x: hidden; 
	}
	
		
	.container {
		margin: 0 auto;
		padding: 0px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		height: auto;
		text-align: center;
		float: none;
	}
	

	img {
	    -moz-user-select: none; 
	    -webkit-user-select: none;
	    -ms-user-select: none; 
	    user-select: none; 
	    -webkit-user-drag: none;
	    user-drag: none;
	}
	
	a{
		color: #e5e5e5;
		text-decoration:none;
		outline:none;

	}

	a:hover,
	a:active,
	a:focus
	{
		text-decoration:none;
		outline:none;
		color: #505050;
	
	}
	
	a i:hover,
	a i:active,
	a i:focus
	{
		text-decoration:none;
		outline:none;
		color: #ff0000;
	}
	


	h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
		font-family: 'Raleway', sans-serif;
		font-weight:100;
	}

	p{
		margin:0 0 5px;
		font-family: 'Source Sans Pro', sans-serif;
	}

	.clear{
		clear:both;
	}

	ol, ul{
		list-style:none;
		padding:0;
	}

	.no-padding{
		padding:0 !important;
	}

	.no-margin{
		margin:0 !important;
	}
	
	
	
	
/* Buttons
-------------------------*/




	.button{
		position: relative;
		z-index: 5;
		background: transparent;
		cursor: pointer;
		width: 150px;
		height: 50px;

	}

	.button:hover{
		border: 1px solid #ff0000;
		background: #ff0000;
		color: #8c8c8c;
		
	}
	
	
	
	
/* Floats
-------------------------*/

	
	.float-l{
		float: left !important;
	}
	
	.float-r{
		float: right !important;
	}


	
	
/* Overlays
-------------------------*/



	
	.pattern-black:after,
	.pattern-white:after{
		content:'';
		width: 100%;
		height: 100%;
		top:0;
		left:0;
		position: absolute;
		z-index:2;
	}
	
	.pattern-black:after{
		
		background: url(../img/pattern-1.png) repeat;
	}
	
	.pattern-white:after{
		
		background: url(../img/pattern-2.png) repeat;
	}
	
	.over-dark{

		background: url(../img/pattern-1.png) repeat;
	
	}
	
	.over-white{
		
		background: url(../img/pattern-2.png) repeat;
		
	}
	
	.over-img{
		
		background: url(../img/bg-01.jpg) repeat;
		
	}
	
	.over-img-2{
		
		background: url(../img/bg-02.jpg) repeat;
		
	}
	
	.over-img-3{
		
		background: url(../img/bg-03.jpg) repeat;
		
	}
	
	.over-solid{
		
		background: #353535;
		
	}
	
	.box-overlay{
		background-size: cover;
		background-position: 50% 50%;
		background-attachment: fixed !important;
		background-repeat: repeat;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		line-height: 300px;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
		
	}
	
	
/* Borders
-------------------------*/




	.gray-border{
		border: 1px solid #505050;
	}
	
	.white-border{
		border: 1px solid #e5e5e5;
	}

	.colored-border{
		border: 1px solid #ff0000;
	}

	.gray-border-left{
		border-left: 1px solid #505050;
		margin: 10px;
	}

	.gray-border-right{
		border-right: 1px solid #505050;
		padding-right: 10px;
		margin-right: 10px;
	}
	
	
	
	
	
	
	
/*======================

	02. Responsive Grid

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




/* Columns
-------------------------*/




	.col-container{
		width : 100%;
		box-sizing: border-box; 
		float: left;
	}
	
	.row:before, 
    .row:after {
        content:"";
        display: table ;
        clear:both;
    }

	
	.col-1{
		max-width: 8.333%;
		width: 8.333% !important;
		height: auto;
	}
	
	.col-2{
		max-width: 16.666%;
		width: 16.666% !important;
		height: auto;
	}
	
	.col-3{
		max-width: 25%;
		width: 25% !important;
		height: auto;
	}
	
	.col-4{
		max-width: 33.333%;
		width: 33.333% !important;
		height: auto;
	}
	
	.col-5{
		max-width: 41.666%;
		width: 41.666% !important;
		height: auto;
	}
	
	.col-6{
		max-width: 50%;
		width: 50% !important;
		height: auto;
	}
	
	.col-7{
		max-width: 58.333%;
		width: 58.333% !important;
		height: auto;
	}
	
	.col-8{
		max-width: 66.666%;
		width: 66.666% !important;
		height: auto;
	}
	
	.col-9{
		max-width: 75%;
		width: 75% !important;
		height: auto;
	}
	
	.col-10{
		max-width: 83.333%;
		width: 83.333% !important;
		height: auto;
	}
	
	.col-11{
		max-width: 91.666%;
		width: 91.666% !important;
		height: auto;
	}
	
	.col-12{
		max-width: 100%;
		width: 100% !important;
		height: auto;
	}
	
	
	
	
/* Box Sizes
-------------------------*/



	
	.box-small{
		
		height: 150px;
	}
	
	.box{
		
		height: 300px;
	}
	
	.box-auto{

		min-height: 100%;
	}


	.box-small, 
	.box, 
	.box-big, 
	.box-auto{
		z-index: 99;
		position: relative;
		text-align: center;
		width: 100%;
		overflow: hidden;
	}
	
	
	
	
	
/*======================

	03. Section Titles

========================*/
	
	
	
	
	.section-title {	
		position: relative;
		padding: 0px 0px 50px 12%;
		color: #212121;
		font-weight: 400;
		word-spacing: 5px;
		font-size: 18px;
		letter-spacing: 0.34em;
	}
	
	.section-content{
		padding: 0px 12% 0px 12%;
	}
	
	.box-over-title{
		position: relative;
		letter-spacing: 3px;
		word-spacing: 3px;
		z-index: 99;
	}

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

	04. Font Styles

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




/* Font Classes
-------------------------*/




	.raleway{
		font-family: 'Raleway', sans-serif;
		
	}

	.source-sans{
		font-family: 'Source Sans Pro', sans-serif;
	}
	
	.numbers{
		font-family: 'Roboto', sans-serif;
	}
	



/* Font Positions
-------------------------*/




	.t-left{
		text-align:left !important;
	}

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

	.t-right{
		text-align:right !important;
	}
	
	
	
	
/* Font Weight
-------------------------*/




	.ultrabold{
		font-weight: 900;
	}

	.extrabold{
		font-weight: 800;
	}

	.bold{
		font-weight: 700;
	}

	.semibold{
		font-weight: 600;
	}

	.normal{
		font-weight: 400;
	}
	
	.light{
		font-weight: 300;
	}

	.lighter{
		font-weight: 100;
	}
	
	
	
	
/* Font Transformation
-------------------------*/




	.italic{
		font-style: italic;
	}

	.uppercase{
		text-transform: uppercase;
	}
	
	

/* Font Colors
-------------------------*/




	.dark{
		color: #353535;
	}

	.white{
		color:#e5e5e5;
	}

	.gray1{
		color:#a8a7a7;
	}

	.gray2{
		color:#505050;
	}

	.colored{
		color: #ff0000;
	}
	
	
	
	
	
/* Font Sizes
-------------------------*/


	
	.f-small{
		font-size: 14px;
		
	}
	
	.f-normal{
		font-size: 1em;
		
	}
	
	.f-semi-expanded{
		font-size: 1.5em;
		
	}
	
	.f-medium{
		font-size: 28px;
		
	}
	
	.f-expanded{
		font-size: 2.5em;
		
	}
	
	.f-big{
		font-size: 3em;
		
	}
	
	.f-large{
		font-size: 3.5em;
		
	}
	
	.f-extra-expanded{
		font-size: 4em;
		
	}
	
	
	
	
/*======================

	05. Loading Screen

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




/* Loader Container
-------------------------*/




	#loader-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		overflow: hidden;
	}
	#loader {
		display: block;
		position: relative;
		left: 50%;
		top: 50%;
		width: 150px;
		height: 150px;
		margin: -75px 0 0 -75px;
		border-radius: 100%;
		border: 1px solid transparent;
		border-top-color: #FF000;
		-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
		animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
		z-index: 1001;
		overflow: hidden;
	}
	
	
	
	
/* Loader Logo
-------------------------*/




	.loader-img img{
		display: block;
		position: absolute;
		left: 46%;
		bottom: 45%;
		width: 80px;
		height: auto;
		z-index: 1002;
	}
	
	
	
	
/* Loader Animation
-------------------------*/




    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 100%;
        border: 1px solid transparent;
        border-top-color: #e5e5e5;
		overflow: hidden;
        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 100%;
        border: 1px solid transparent;
        border-top-color: #a8a7a7;
		overflow: hidden;
        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    @-webkit-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 */
        }
        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 */
        }
    }
    @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 */
        }
        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 */
        }
    }

    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 50%;
        height: 100%;
		overflow: hidden;
		background-color: rgba(0, 0, 0, 0.9);
		background: rgba(0, 0, 0, 0.9);
		color: rgba(0, 0, 0, 0.9);
        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;
    }

	
	
	
/* After Loading
-------------------------*/




    .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;
    }
    
	
	

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

	06. Backgrounds

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




/* Solid Backgrounds
-------------------------*/




	.white-bg{
		background-color: #e5e5e5 !important;
	}

	.gray-bg{
		background-color:#505050 !important;
	}

	.dark-bg{
		background-color: #353535 !important;
	}
	
	.colored-bg{
		background-color: #ff0000;
	}
	
	
	
	
/* Gradient Backgrounds
-------------------------*/


	
	.gradient-bg{
		background:-moz-linear-gradient(17% 81% 67deg, #E4A4B8, #86FFF4 90%);
	}
	
	.gradient-bg{
		
		background:-webkit-gradient(linear, 91% 91%, 20% 0%, from(#B869A4), to(#6DC7A5))
	}
	
	
	
	
/* Image Backgrounds
-------------------------*/
	
	
	
	
	.image-bg{
		background: url(../img/bg-01.jpg);
	}
	
	.image-bg-2{
		background: url(../img/bg-04.jpg);
	}
	
	.image-bg-3{
		background: url(../img/bg-05.png);
		
	}
	
	.image-bg, 
	.image-bg-2, 
	.image-bg-3{
		width: 100%;
		height: 100vh;
		background-size: cover;
		display: block;
		position: relative;
		overflow: hidden;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		z-index: 1;
	}
	
	
	
	
/* Other Backgrounds
-------------------------*/



	.transparent{
		background:transparent !important;
	}

	.pattern-bg{
		background: url(../img/pattern.jpg);
	}

	#bg{
		width: 200%;
	}




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

	07. Navigations

========================*/
	
	
	
	
	.panel {
		position: fixed;
		left: -100%;
		width: 100%;
	}


	#menu{
		background: rgba(0, 0, 0, 0.8);
		z-index: 998;
	}

	#menu ul{
		position: absolute;
		top: 50%;
		left: 43%;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	#menu li{
		text-align: center;
		transition: all 0.4s ease;
		margin: 25% 0;
	}

	#menu li a{
		color: #fff;
		font-size: 25px;
		text-decoration: none;
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 5px;
		padding: 5px;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		transition: all 0.2s;
	}

	#menu li a:hover{
		background: #ff0000;
		color: #353535;
	}

	.menu-link {
	  transform: scale(0.5);
	  z-index: 999;
	  display: block;
	  position: fixed;
	  top: 0;
	  left: 0;
	  overflow: hidden;
	  margin: 0;
	  padding: 0;
	  width: 80px;
	  height: 80px;
	  font-size: 0;
	  text-indent: -9999px;
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  box-shadow: none;
	  border-radius: none;
	  border: none;
	  cursor: pointer;
	  -webkit-transition: background 0.3s;
		transition: background 0.3s;
	  background-color: transparent;
	}

	.menu-link:focus {
	  outline: none;
	}

	.menu-link span {
	  display: block;
	  position: absolute;
	  top: 36px;
	  left: 18px;
	  right: 18px;
	  height: 6px;
	  border-radius: 2px;
	  background: white;
	  -webkit-transition: background 0 0.3s;
			  transition: background 0 0.3s;
	}

	.menu-link span::before,
	.menu-link span::after {
	  position: absolute;
	  display: block;
	  left: 0;
	  width: 100%;
	  height: 6px;
	  border-radius: 2px;
	  background-color: #fff;
	  content: "";
	  -webkit-transition-duration: 0.3s, 0.3s;
		transition-duration: 0.3s, 0.3s;
	  -webkit-transition-delay: 0.3s, 0;
		transition-delay: 0.3s, 0;
	}

	.menu-link span::before {
	  top: -15px;
	  -webkit-transition-property: top, -webkit-transform;
			  transition-property: top, transform;
	}

	.menu-link span::after {
	  bottom: -15px;
	  -webkit-transition-property: bottom, -webkit-transform;
			  transition-property: bottom, transform;
	}

	/* active state, i.e. menu open */
	.menu-open {
	  background-color: transparent;
	}

	.menu-open span {
	  background: none;
	}

	.menu-open span::before {
	  top: 0;
	  -webkit-transform: rotate(45deg);
		  -ms-transform: rotate(45deg);
			  transform: rotate(45deg);
	}

	.menu-open span::after {
	  bottom: 0;
	  -webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.menu-open span::before,
	.menu-open span::after {
	  -webkit-transition-delay: 0, 0.3s;
		transition-delay: 0, 0.3s;
	}
	
	
	
/*======================

	08. Homepage

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




/* Splitted Halfs
-------------------------*/	




	.left-half{
		width: 50%;
		position: fixed;
		left: 0px;
		top: 0px;
		height: 100vh;
		z-index: 1;
	}
	
	
	.right-half{
		width: 50%;
		position: absolute;
		right: 0px;
		top: 0px;
		height: 100%;
		z-index:1;
	}
	
	
	
	
/* Contents Over Background
----------------------------*/	

	
	.content{
		position: absolute;
		top: 50%;
		left: 10%;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		z-index: 99;
	}

	
	
/* Logo Styles
----------------------------*/	




	.logo img{
		display: block;
		max-width: 80px;
		height: auto;
		padding: 10px;
		margin-top: 10%;
		margin-bottom: 5%;
	}

	
	
	
/* Homepage Titles
----------------------------*/	



	
	.title{
		display: block;
		padding: 10px;
		float: left;
		letter-spacing: 3px;
		word-spacing: 3px;
	}
	
	.semi-title {
		margin-left: 15px;
		margin-bottom: 15px;
		line-height: 22px;
		word-spacing: 2.5px;
	}
	
	
	
	
/* Homepage Social Links
----------------------------*/




	.social-links{
		margin-left: 15px;
	}
	
	.social-links a i{
		margin-right: 20px;
		margin-top: 10px;

	}
	
	
	
	
/* Separators
----------------------------*/	



	
	.separator {
		height: 1.5px;
		background: #ff0000 none repeat;
		margin: 22% 15px;
	}
	
	.separator-small {
		height: 1px;
		background: #505050 none repeat;
		margin-top: 30px;
	}
	
	
	
/* Countdown Styles
----------------------------*/	



	.styled {
		margin-left: 15px;
	}
	
	.styled div {
	    display: inline-block;
	    margin-right: 35px;
		font-size: 2em;
	}
	
	.styled div span {
		display: block;
		font-size: 14px;
		font-weight: 400;
		text-align: center;
		text-transform: uppercase;
		font-family: Raleway;
		color: #A8A7A7;
	}
	
	
	

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

	09. Sliders
	
==========================*/
	
	
	
	.rslides {
	    position: relative;
	    list-style: none;
	    overflow: hidden;
	    width: 100%;
	    height: 100vh;
	    padding: 0;
	    margin: 0;
	}

	.rslides li {
	    -webkit-backface-visibility: hidden;
	    position: absolute;
	    display: none;
	    width: 100%;
		height: 100%;
	    left: 0;
	    top: 0;
	}

	.rslides li:first-child {
	    position: relative;
	    display: block;
		float: left;
	 }

	.rslides img {
		display: block;
		float: left;
		width: 100%;
		height: 100vh;
		border: 0;

	}



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

	10. About
	
==========================*/



	
	#about{
		position: relative;
		padding-top: 100px;
		padding-bottom: 100px;
		background: #fff;
	}
		
	#about .quote{
		line-height: 50px;
		margin-top: 38px;
		font-weight: 400;

	}
	
	#about .section-content p{
		line-height: 25px;
		margin-top: 25px;
	}


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

	11. Skills
	
==========================*/
	
	
	
	
	#skills{
		position: relative;
		padding-top: 100px;
		padding-bottom: 100px;
		background: #f5f5f5;
	}
	
	#skills .section-content{
		margin-top: 50px;
	}
	

	
	.skillbar {
		position: relative;
		display: block;
		margin-bottom: 90px;
		width: 100%;
		height: 1px;
		-webkit-transition:0.4s linear;
		-moz-transition:0.4s linear;
		-ms-transition:0.4s linear;
		-o-transition:0.4s linear;
		transition:0.4s linear;
	}
	
	
	.skillbar-title {
		position:absolute;
		bottom: 10px;
		left: 8px;
		width: auto;
	}
	

	.skillbar-title span {
		letter-spacing: 1px;
		word-spacing: 3px;
		width: 100%:
	}

	.skillbar-bar {
		height: 1px;
		width:0px;
	}

	.skill-bar-percent {
		position:absolute;
		right:10px;
		top:0;
		font-size:11px;
		height: 1px;
		line-height: 1px;
	}

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

	12. Subscribe
	
==========================*/




	#subscribe{
		z-index: -1;
		overflow: hidden;
		width: 100%;
		height: 300px;
		line-height: 300px;
	}
	
	#subscribe:hover .box-overlay, #subscribe:hover .box-overlay-white{
		opacity: 0;
		transform: rotate(0deg) scale(1) translate(100%);
		-webkit-transform: rotate(0deg) scale(1) translate(100%);
		-moz-transform: rotate(0deg) scale(1) translate(100%);
		-o-transform: rotate(0deg) scale(1) translate(100%);
		-ms-transform: rotate(0deg) scale(1) translate(100%);
	}
	
	.subscribe-form{
		position: relative;
		z-index: 3;
	}
	
	.form-control{
		padding-bottom: 7px;
		transition:none;
		background:transparent;
		border: none;
		border-bottom: 1px solid #353535;
		color: #A8A7A7;
		font-size: 0.8em;
		font-weight: 400;
		text-align: left;
		width: 240px;
		margin-right: 20px;
	}
	
	




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

	13. Quotes

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

	
	
	#the-quote, .rslides-quotes{
		width: 100%;
		height: 350px;
		line-height: 350px;
		z-index: 100;
		overflow: hidden;
		z-index: 95;
	}
	
	.quote{
		word-spacing: 3px;
		z-index: 999;
	}
	
	
	.quote i{
		transform: scale(7);
		opacity: 0.1;
	}
	
	

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

	14. Services

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


	
	
	#services{
		position: relative;
		padding-top: 100px;
		padding-bottom: 100px;
		background: #fff;
	}
	
	#services .section-content{
		margin-top: 30px;
	}
	
	.focus{
		margin-top: 85px;
		line-height: 25px;
	}
	
	.focus:hover i{
		background: transparent;
		transform: scale(1.2);
	}
	
	.focus i{
		margin-bottom: 15px;
		background: #ff0000;
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		transition: all 0.2s;
	}
	
	.focus span{
		letter-spacing: 4px;
		word-spacing: 6px;
	}

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

	15. Works

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




	#works{
		position: relative;
		padding-top: 100px;
		padding-bottom: 100px;
		background: #f5f5f5;
	}
	
	#works .section-content{
		margin-top: 30px;
	}
	

	.work li{
		display: inline-block;
		opacity: 0.8;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
	}
	

	.work li:hover{
		
		opacity: 1;
		
	}
	
	
	.work img{
		background: transparent;
		width: 150px;
		display: inline-block;
		
	}
	

	


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

	16. Team

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




	
	#team{
		position: relative;
		height: auto;
		padding-top: 100px;
		background: #fff;
	}
	
	#team .section-title{
		margin-bottom: 30px;
	}
	

	
	.member img{
		width: 100%;
		height: auto;
	}
	
	.member .member-links{
		opacity: 0;
		z-index: 5;
		position: absolute;
		top: -100%;
		left: 0px;
		width: 100%;
		transform: scale(2);
		-webkit-transform: scale(2);
		-moz-transform: scale(2);
		-o-transform: scale(2);
		-ms-transform: scale(2);
	}
	
	.member:hover .member-links{
		opacity: 1;
		position: absolute;
		top: 30px;
		transform: scale(1);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}

	
	.member-links a i{
		margin-left: 20px;
	}

	
	.member .name{
		width: 100%;
		position: absolute;
		bottom: 30px;
		left: 0px;
	}
	
	
	.member .separator-small {
		background: #ccc none repeat;
		position: absolute;
		top: 50%;
		left: 46%;
		width: 100%;
		height: 1px;
	}
	
	
	#team .member-links{
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
		
	}
	
	.member:hover .box-overlay{
		opacity: 0;
		transform: rotate(0deg) scale(1) translate(100%);
		-webkit-transform: rotate(0deg) scale(1) translate(100%);
		-moz-transform: rotate(0deg) scale(1) translate(100%);
		-o-transform: rotate(0deg) scale(1) translate(100%);
		-ms-transform: rotate(0deg) scale(1) translate(100%);
		-webkit-transition-delay: 0s;
		-moz-transition-delay: 0s;
		-o-transition-delay: 0s;
		transition-delay: 0s;
	}

	
	
	

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

	17. Team

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




	
	#contact{
		position: relative;
		padding-top: 100px;
		padding-bottom: 100px;
		background: #fff;
	}
	
	#contact .section-content{
		margin-top: 30px;
	}

	#contact  form input,form textarea {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-bottom: 10px;
		margin-bottom: 50px;
		transition: none;
		background: transparent;
		width: 100%;
		border: none;
		border-bottom: 1px solid #E9E9E9;
		font-size: 1em;
		font-weight: 400;
		word-spacing: 2.5px;
		text-align: left;
		word-spacing: 2.5px;
		color: #353535;
	}
	
	#message{
		font-family: 'Source Sans Pro', sans-serif;
		height: 100px;
	}

	#contact-form{text-align:left;}

	#contact-form p span {
		display: block;
		letter-spacing: 2px;
		text-transform: uppercase;
	}

	::-webkit-input-placeholder {
	 color: #999;
	}

	#contact-form  label {
		cursor: text;
		display: block;
		margin: 0;
		position: relative;
		top: 0;
		width: 100%;
	}
	:-moz-placeholder { /* Firefox 18- */
	 color: #999;
	}

	::-moz-placeholder {  /* Firefox 19+ */
	 color: #999;
	}

	:-ms-input-placeholder {
	 color: #999;
	}

	#contact-form .error {
		bottom: 12px;
		font-family: inherit;
		font-size: 12px;
		font-weight: normal;
		left: auto;
		font-style:italic;
		letter-spacing: 0;
		position: absolute;
		right: 20px;
		text-transform: capitalize;
		width: auto;
	}

	.response h3 {
		letter-spacing: 2px;
		margin: 10px 0 25px;
		text-transform: uppercase;
	}

	
	

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

	18. Clients Section

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


	
	
	#clients{
		position: relative;
		z-index: 4;
		padding-top: 100px;
		padding-bottom: 100px;
		background: #fff;
	}

	

    #clients-carousel .item img{
        display: block;
        width: 150px;
        height: auto;
		margin: 0px auto;
		opacity: 0.8;
		z-index: 9;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		transition: all 0.2s;
    }
	
	#clients-carousel .item img:hover{
		opacity: 1;
		transform: scale(1.05);
		-webkit-transform: scale(1.05);
		-moz-transform: scale(1.05);
		-o-transform: scale(1.05);
		-ms-transform: scale(1.05);
	}
	
	
	
	
	
/*========================

	19. Map Section

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




	#map{
		background: transparent;
	}
	
	.map{
		letter-spacing: 5px;
		margin-bottom: 10px;
	}
	
	#map_canvas {
	height: 300px;
	width: 100%;
	opacity: 0.9;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;

	}
	
	#map_canvas:hover{
		opacity: 1;
	}
	
	
	
	
	
	
	
/*========================

	20. Footer Section

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




	#footer-content{
		position: relative;
		z-index: 4;
	}

	#footer-content .main{
		width: 100%;
		height: 150px;
		line-height: 150px;
		position: absolute;
		top: 0px;
		left: 100%;
		letter-spacing: 1px;
		opacity: 0;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
	}
	
	#footer-content:hover .main{
		opacity: 1;
		position: absolute;
		left: 0%;
	}
		
	.foot .box-overlay{
		line-height: 150px;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		
	}

	.foot:hover .box-overlay{
		opacity: 1;
		width: 10%;
	}
	
	
	
	
/* Extra Footer
----------------------------*/	


	
	.love p{
		background: transparent;
		width: 100%;
		height: 150px;
		line-height: 150px;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		transition: all 0.2s;
	}
	
	
	
	.love:hover p{
		opacity: 0;
		transform: scale(0.1);
		-webkit-transform: scale(0.1);
		-moz-transform: scale(0.1);
		-o-transform: scale(0.1);
		-ms-transform: scale(0.1);
	}
	
	.love:hover .love-big{
		opacity: 1;
		transform: scale(1);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
	}
	
	.love-big{
		background: transparent;
		width: 100%;
		height: 150px;
		line-height: 150px;
		position: absolute;
		top: 0px;
		left: 0px;
		transform: scale(0.1);
		-webkit-transform: scale(0.1);
		-moz-transform: scale(0.1);
		-o-transform: scale(0.1);
		-ms-transform: scale(0.1);
		opacity: 0;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		transition: all 0.2s;
		
	}
	
	
	
	
	
	
	
/*========================

	21. Responsive

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




/* Resolution Under 1275px
----------------------------*/




	@media all and (max-width: 1275px) {
		
		.col-4{
			max-width: 50%;
			width: 50% !important;
		}	
		
	

	}
	
	
	
	
/* Resolution Under 1125px
----------------------------*/




	@media all and (max-width: 1125px) {
		
		.col-5,
		.col-6,
		.col-7,
		.col-8{
			max-width: 100%;
			width: 100% !important;
			overflow: hidden;
			}	
			
		
		.rslides {
			height: auto;
		}
		
		#bg{
			width: auto;
		}
	
	}
	
	
	
	
/* Resolution Under 1000px
----------------------------*/




	@media all and (max-width: 1000px) {
		
		.col-4{
			max-width: 100%;
			width: 100% !important;
		}


	
	}
	
	
	
	
/* Resolution Under 900px
----------------------------*/	
	
	
	
	
	@media all and (max-width: 900px) {
		
		
		.left-half{
			width: 100%;
			height: 100vh;
			position: absolute;
			display: block;
			z-index: 2;
			overflow: hidden;

			
		}
		
		.right-half{
			width: 100%;
			position: absolute;
			top: 100%;
			left: 0%;
			height: auto;
			display: block;
			overflow: hidden;

		}
		

		
		.col-1
		.col-2,
		.col-3,
		.col-4,
		.col-5,
		.col-6,
		.col-7,
		.col-8{
			
			max-width: 50%;
			width: 50% !important;
			overflow: hidden;
		}	
			
		
		#menu ul{
			left: 38%;
		}
		
		.rslides img {
			height: auto;

		}
		
		.menu-link {
			background: url(../img/pattern-1.png) repeat;
		}

	
	}
	
	
	
	
	
	
	
/* Resolution Under 650px
----------------------------*/	
	
	
	
	
	@media all and (max-width: 650px) {
		
		.col-1
		.col-2,
		.col-3,
		.col-4,
		.col-5,
		.col-6,
		.col-7,
		.col-8{
			max-width: 100%;
			width: 100% !important;
		}	
		

		
		#menu ul{
			left: 34%;
		}
		
		
		#home .rslides img{
			width: auto;
		}
		
	
	}
	
	
	
	
/* Resolution Under 530px
----------------------------*/	




	@media all and (max-width: 530px) {



		
		#menu ul{
			left: 30%;
		}
		
			
		.form-inline .button{
			position: absolute;
			top: 60%;
			left: 40%;
		}
		
		.loader-img img{
			left: 40%;
		}
		
	}
	
	
	
	
	
	
/* Resolution Under 400px
----------------------------*/




	@media all and (max-width: 400px) {
		

		.content{
			left: 2%;
		}
		
		.f-medium{
		font-size: 1.8em;
		
		}
		
		.f-expanded{
			font-size: 2em;
			
		}
		
		.f-big{
			font-size: 2.5em;
			
		}
		
		#menu ul{
			left: 25%;
		}
		
		.styled div {
	    margin-right: 25px;
		font-size: 1.7em;
		}
		
		.styled div span {
		font-size: 11px;
		}
	
	}
	
	
	
/* Resolution Under 320px
----------------------------*/




	@media all and (max-width: 320px) {
		

		.content{
			left: 0%;
		}
		
		.f-medium{
		font-size: 1.6em;
		
		}
		
		
		.loader-img img{
		left: 35%;
		}
		
	
	}