/*

	Name: Epoch
	
	Type: Coming Soon Template
	Author: Orbmob
	Version: 1.0
	
*/







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


	Table of Contents
	
	

		01. Generel Styles

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

		02. Sections

		03. Font Styles

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

		04. Loading Screen

			+ Loader Container
			+ Loader Logo
			+ Loader Animation
			+ After Loading

		05. Backgrounds

			+ Solid Backgrounds
			+ Gradient Backgrounds
			+ Image Backgrounds
			+ pattern Background
			+ Youtube Background

		06. Navigations

			+ Dropdown

		07. Homepage

			+ Contents Over Background
			+ Logo Styles
			+ Homepage Social Links
			+ Countdown Styles
			+ Newsletter


		08. Sliders

		09. About

		10. Skills

		11. Services

		12. Works

		13. Team

		14. Social

		15. Pre-Order

		16. Contact

		17. Map Section

		18. Footer Section

		19. Responsive

			+ Resolution Under 1125px
			+ Resolution Under 992px
			+ Resolution Under 960px
			+ Resolution Under 850px
			+ Resolution Under 400px
	
	
			* Uncompressed Version is Inside The Main Download File*
	
====================================================*/



/*

	Name: Epoch
	
	Type: Coming Soon Template
	Author: Orbmob
	Version: 1.0
	
*/







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


	Table of Contents
	
	

		01. Generel Styles

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

		02. Sections

		03. Font Styles

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

		04. Loading Screen

			+ Loader Container
			+ Loader Logo
			+ Loader Animation
			+ After Loading

		05. Backgrounds

			+ Solid Backgrounds
			+ Gradient Backgrounds
			+ Image Backgrounds
			+ pattern Background
			+ Youtube Background

		06. Navigations

			+ Dropdown

		07. Homepage

			+ Contents Over Background
			+ Logo Styles
			+ Homepage Social Links
			+ Countdown Styles
			+ Newsletter


		08. Sliders

		09. About

		10. Skills

		11. Services

		12. Works

		13. Team

		14. Social

		15. Pre-Order

		16. Contact

		17. Map Section

		18. Footer Section

		19. Responsive

			+ Resolution Under 1125px
			+ Resolution Under 992px
			+ Resolution Under 960px
			+ Resolution Under 850px
			+ Resolution Under 400px
	
	
	
====================================================*/







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

	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: #9ca290;
	}
	


	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: 'Raleway', sans-serif;
	}

	.clear{
		clear:both;
	}

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

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

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




	.button{
		position: relative;
		z-index: 5;
		background: transparent;
		cursor: pointer;
		width: 120px;
		height: 40px;
		line-height: 30px;
		border: none;
		color: #777777;
		border: 2px solid #9ca290;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;

	}

	.button:hover{
		background: #9ca290;
		color: #fff;
		
	}
	
	
	
	
/* 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(../images/pattern-1.png) repeat;
	}
	
	.pattern-white:after{
		
		background: url(../images/pattern-2.png) repeat;
	}

	

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


	
	.separator-small {
		width: 40px;
		height: 1px;
		background: #505050 none repeat;
		margin-top: 30px;
	}
	
	.separator-center {
		width: 60px;
		height: 1px;
		background: #505050 none repeat;
		margin: 30px auto;
	}

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

	02. Sections

========================*/
	
	
	.sections{
		width: 100%;
		height: 100%;
		z-index:1;
	}
	
	
	.section-title {	
		position: relative;
		padding: 0px 0px 50px 12%;
		max-width: 200px;
		color: #212121;
		font-weight: 400;
		word-spacing: 5px;
		font-size: 18px;
		letter-spacing: 0.34em;
	}
	
	.section-content{
		padding: 0px 12% 0px 12%;
	}
	

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

	03. 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:#fff;
	}

	.gray1{
		color:#a8a7a7;
	}

	.gray2{
		color:#505050;
	}

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


	
	.f-small{
		font-size: 13px;
		
	}
	
	.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;
		
	}
	
	
	
	
/*======================

	04. 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: #9ca290;
		-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: 48%;
		bottom: 48%;
		width: 50px;
		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.96);
		background: rgba(0, 0, 0, 0.96);
		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;
    }
    
	
	

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

	05. Backgrounds

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



	.fullscreen{
		width: 100%;
		height: 100vh;
		z-index: 99;
		overflow: hidden;
	}


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




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

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

	.dark-bg{
		background-color: #191919 !important;
	}

	.colored-bg{
		background-color: #9ca290;
	}
	
	.colored-bg-2{
		background-color: #9B9BFF;
	}
	
	
	
/* Gradient Backgrounds
-------------------------*/


	
	.gradient-bg{
		
		background: #E55D87; /* fallback for old browsers */
		background: -webkit-linear-gradient(to left, #E55D87 , #5FC3E4); /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to left, #E55D87 , #5FC3E4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


	}

	
	
/* Image Backgrounds
-------------------------*/
	
	
	.image-bg{
		background: url(../images/at_background.jpg);
	}
	
	.image-bg-thomas{
	background-image: url(../images/at_thomasst.jpg);
	}
	
	.image-bg-2{
		background: url(../images/bg-02.jpg);
	}
	
	.image-bg-3{
		background: url(../images/bg-03.jpg);
		
	}
	
	.image-bg-4{
		background: url(../images/bg-04.jpg);
		
	}

	.image-bg-5{
		background: url(../images/bg-05.jpg);
		
	}
	
	.image-bg, 
	.image-bg-2, 
	.image-bg-3,
	.image-bg-4,
	.image-bg-5{
		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;
	}
	
	
	
	
/* pattern Background
-------------------------*/


	.pattern-bg{
		background: url(../images/pattern.jpg);
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-repeat: repeat;
		z-index: 1;
	}
	
	
/* Youtube Background
-------------------------*/	
	
	
	#youtube{
		width: 100%;
		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;
	}
	

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

	06. Navigations

========================*/
	
	
	.navigation{
		background: #191919;
		z-index: 99999999;
		padding: 15px 2% 15px 2%;
	}
	
	.navbar-brand img{
		width: 40px;
	}
	
	.nav{
		float: right;
	}

	
	.nav li a{
		margin-right: 10px;
		color: #ccc;
	}
	
	.nav > li > a:focus, .nav > li > a:hover {
		text-decoration: none;
		background-color: transparent;
		color: #fff;
	}

	.nav .open > a, 
	.nav .open > a:focus, 
	.nav .open > a:hover {
		background-color: transparent;
		border-color: transparent;
	}
	
	.navbar-toggle{
		border-radius: 0px;
		border: 2px solid #777777;
	}
	
	.icon-bar{
		background: #777777;
	}
	
	.nav li a{
		text-align: left;
	}
	

/* Dropdown
-------------------------*/	



	.dropdown-menu{
		background: #2f2f2f;
	}
	
	.dropdown-menu li{
		margin-bottom: 15px;
	}
	
	.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
		color: #fff;
		text-decoration: none;
		background-color: transparent;
	}
	

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

	07. Homepage

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



	#home{
		width: 100%;
		height: 100vh;
		z-index: 1;
	}
	

	
/* Contents Over Background
----------------------------*/	

	
	.content{
		position: absolute;
		top: 50%;
		left: 50%;
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		z-index: 99;
		text-align: center;
	}
	
	.content h2{
	letter-spacing: 7px;
	word-spacing: 2px;
	max-width: 800px;
	margin: auto;
	}
	
	.content h3{
		word-spacing: 5px;
		letter-spacing: 1px;
	}
	

	.content h4{
		line-height: 30px;
	}

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




	.logo-text img{
		max-width: 80px;
		margin-bottom: 20px;
	}
	
	.logo-countdown img{
	max-width: 500px;
	margin-bottom: 20px;
	}
	

	
	
/* Homepage Social Links
----------------------------*/




	.social-links{
		margin-top: 30px;
	}
	
	.social-links a i{
		margin-right: 35px;
		margin-top: 10px;

	}
	
	

	
	
/* Countdown Styles
----------------------------*/	



	.styled {
		margin-left: 35px;
	}
	
	.styled div {
	    display: inline-block;
	    margin: 5px 50px 25px 0px;
		font-size: 2em;
	}
	
	.styled div span {
		display: block;
		font-size: 13px;
		font-weight: 400;
		text-align: center;
		text-transform: uppercase;
		font-family: Raleway;
		color: #A8A7A7;
	}
	
	
	
/* Newsletter
----------------------------*/	
	
	
	.subscribe-form{
		position: relative;
		margin-top: 30px;
		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;
	}
	
	
	

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

	08. 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: auto;
		border: 0;

	}



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

	09. About
	
==========================*/



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

	}
	
	#about .section-content p{
		line-height: 35px;
	}


	.sign img{
		width: 80px;
		margin-top: 20px;
		float: left;
	}
	
	
	
/*========================

	10. Skills
	
==========================*/
	
	
	
	
	#skills{
		position: relative;
		padding-top: 100px;
		padding-bottom: 50px;
		background: #fff;
	}
	
	#skills .section-content{
		padding-top: 30px;
	}

	
	.skill h4{
		margin-top: 10px;
	}
	
	.skill .separator-center{
		width: 30px;
		margin-top: 20px;
	}
	
	.skill .f-small{
		font-size: 11px;
	}

	.skill{
		padding-bottom: 80px;
	}
	
	
	
/*========================

	11. Services

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


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

	
	.focus{
		line-height: 25px;
		text-align: center;
		padding-bottom: 120px;
	}
	
	.focus:hover i{
		background: transparent;
		
	}
	
	.focus i{
		float: left;
		-webkit-transform: scale(0.9);
		-moz-transform: scale(0.9);
		-o-transform: scale(0.9);
		transform: scale(0.9);
	}
	
	.focus h2{
		float: left;
		margin: 4px 0px 0px 15px;
		word-spacing: 3px;
		letter-spacing: 1px;
	}
	
	.focus p{
		float: left;
		margin: 15px 25px 0px 0px;
	}

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

	12. Works

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



	#portfolio{
		position: relative;
		padding-top: 100px;
		padding-bottom: 150px;
		background: #fff;
	}
	
	#portfolio .section-content{
		margin-top: 50px;
	}
	

	.works a img{
		opacity: 0.7;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
		padding: 5px;
	}
	

	.works a img:hover{
		
		opacity: 1;
		
	}



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

	13. Team

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


	#information{

		padding-top: 100px;
		padding-bottom: 50px;
		background: #fff;
	}

	#information .section-content p{
		line-height: 35px;
	}
	
	#information p{
		margin-bottom: 80px;
	}

	.info i{
		margin-bottom: 20px;
		
	}
	
	.info h2{
		padding-bottom: 10px;
	}
	
	
	
	
	
/*========================

	14. Social

==========================*/	
	
	
	
	#social{
		position: relative;
		padding-top: 100px;
		padding-bottom: 50px;
		background: #fff;
	}
	
	#social .section-content{
		padding-top: 50px;
	}
	
	
	.social-link{
		margin-bottom: 80px;
	}
	
	.social-link .fa-facebook{
		background: #3b5998;
	}
	
	.social-link .fa-pinterest{
		background: #bd081c;
	}
	
	.social-link .fa-instagram{
		background: #e1306c;
	}
	
	.social-link .fa-behance{
		background: #1769ff;
	}
	
	.social-link .fa-youtube-play{
		background: #cd201f;
	}
	
	.social-link .fa-rss{
		background: #f26522;
	}
	
	.social-link .fa-twitter{
		background: #1da1f2;
	}
	
	.social-link .fa-google-plus{
		background: #dd4b39;
	}
	
	.social-link .fa-dribbble{
		background: #ea4c89;
	}

	
	.social-link a i{
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 100%;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
	}
	
	.social-link a i:hover{
		background: #9ca290;
		transform: scale(1.1);
		color: #fff;
	}
	
	
	
/*========================

	15. Pre-Order

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

	
	#pre-order .button{
		margin-top: 25px;
	}
	
	#pre-order .logo img{
		margin-bottom: 25px;
		width: 80px;
	}
	
	
	
	
	

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

	16. Contact

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



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

	#contact  form input,form textarea {
		font-family: 'Raleway', sans-serif;
		-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: 2px solid #E9E9E9;
		font-size: 1em;
		font-weight: 400;
		word-spacing: 2.5px;
		text-align: left;
		word-spacing: 2.5px;
		color: #353535;
	}
	
	#message{
		height: 100px;
	}

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

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

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

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

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

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

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

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

	17. Map Section

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




	#map{
		background: transparent;
		overflow: hidden;
	}

	
	#map_canvas {
		width: 100%;
		height: 100vh;
		opacity: 0.9;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
		overflow: hidden;

	}
	
	#map_canvas:hover{
		opacity: 1;
	}
	

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

	18. Footer Section

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




	#footer{
		padding: 100px 30px 80px 30px;
	}
	
	.footer-section p{
		text-align: left;
	}
	
	
	
	
	
/*========================

	19. Responsive

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


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


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

		
		.rslides {
			height: auto;
		}
		

	
	}
	
	
	
/* Resolution Under 992px
----------------------------*/


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

	
		.navbar-collapse{
			position: absolute;
			left: 0px;
			background: #191919;
			width: 100%;
			z-index: 99999999;
		}
		
		
		.f-big{
			font-size: 1.8em;
		}
		
		.logo-text img{
			width: 50px;
			margin-bottom: 20px;
		}
		
		.nav{
			float: left;
		}
		
		#skills .section-content .no-padding{
			padding-bottom: 100px !important;
		}
		
		.focus{
			margin-bottom: 120px !important;
		}
		
		#services .section-content .no-padding{
			padding-bottom: 120px !important;
		}
		
		#portfolio{
			padding-top: 0px;
		}
		
		.info{
			margin-bottom: 100px;
		}
		
		.social-link{
			margin-bottom: 100px;
		}
		
		#social .section-content .no-margin{
			margin-bottom: 100px !important;
		}
		
		#map_canvas {

			height: 280px;


		}
		
		.form-control{
			margin: auto;
		}
		
		.subscribe-form .button{
			margin-top: 8px;
		}

	
	}
	
	
	
/* Resolution Under 960px
----------------------------*/


	@media all and (max-width: 960px) {	
		#home .rslides img{
			min-width: 960px;
			height: 100vh;
		}
		
	}
	
	
/* Resolution Under 850px
----------------------------*/
	
	@media all and (max-width: 850px) {
		
		.styled {
			margin-left: 35px;
			width: 240px;
		}
	
		.styled div {
			display: inline-block;
			margin-right: 20px;
			font-size: 1.2em;
		}
		
		
		.nav li a{
			margin-right: 0px;
			color: #ccc;
		}
		
		
		
	}
	

/* Resolution Under 400px
----------------------------*/


	@media all and (max-width: 400px) {
		.loader-img img{
			left: 43%;

		}
		

	}