@charset "utf-8";


/* ----------------------------------

Name: style.css
Author: Fourtabs
Website: https://www.fourtabs.com
Exclusively available here: https://themeforest.net/user/fourtabsthemes

------------------------------------- */




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


	Table of Contents
	
	

		01. Generel Styles

			+ Generate Google Fonts
			+ Essential Styles
			+ Buttons
			+ Floats
			+ Overlays
			+ Row Fix
			+ Section Styles
			+ Separators

		02. Typography

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

		03. Backgrounds

			+ Solid Backgrounds
			+ Image Backgrounds

		04. Navigation

		05. Homepages

			+ Headings
			+ Contact Button

		06. Portfolio

		07. Blog

			+ Excerpt and Essentials
			+ Full Post
			+ Comments

		08. Contact

		09. Footer

		10. Social Media Icons

		11. Responsive

			+ Resolution Under 990px
			+ Resolution Under 768px
			+ Resolution Under 530px
			+ Resolution Under 450px
			+ Resolution Under 400px
			+ Resolution Under 375px


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







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

	01. Generel Styles 

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


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



	
	/* Lato */
	@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
	
	/* Quicksand */
	@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700);

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




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

	::selection {
		background: gold;
		color: #191919;
		text-shadow: none;
	}
	
	
	html, body {
		width:100%;
		height:100%;
		padding:0;
		margin-left:0;
		margin-right:0;
		font-family: 'Quicksand', sans-serif;
		-webkit-font-smoothing: antialiased;
		text-align: center;
		font-size: 1em;
	}

	body{
		overflow-x: hidden; 
	}
	
		
	.container{
		margin: 0px 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: #191919;
		text-decoration:none;
		outline:none;

	}

	a:hover,
	a:active,
	a:focus
	{
		text-decoration:none;
		outline:none;
		color: #505050;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
	
	}
	
	a i:hover,
	a i:active,
	a i:focus
	{
		text-decoration:none;
		outline:none;
		color: #505050;
	}

	

	h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
		font-family: 'Quicksand', sans-serif;
		font-weight:100;
		margin: 0px;
		padding: 0px;
	}

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

	.clear{
		clear:both;
	}

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

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

	.no-margin{
		margin:0 !important;
	}
	
	.no-margin-bottom{
		margin-bottom:0 !important;
	}
	
	.no-margin-top{
		margin-top:0 !important;
	}
	
	.no-border{
		border: none !important;
		border-style: none !important;
	}
	
	.no-line-height{
		line-height: 1 !important;
	}
	
	.no-letter-spacing{
		letter-spacing: 0px !important;
	}
	
	
	
/* Buttons
-------------------------*/



	.button{
		z-index: 0;
		border: 3px solid #ccc;
		cursor: pointer;
		color: #191919;
		display: block;
		width: 150px;
		height: 60px;
		line-height: 55px;
		font-weight: 900;
		text-align: center;
		letter-spacing: 3px;
		font-family: 'Quicksand', sans-serif;
		text-transform: uppercase;
		font-size: 13px;
		word-spacing: 1px;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
	}
	
	.button:hover{
		border: 3px solid #191919;
	}

	
	
	
/* 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: -1;
	}
	
	.pattern-black:after{
		
		background: url(../img/pattern-1.png) repeat;
	}
	
	.pattern-white:after{
		
		background: url(../img/pattern-2.png) repeat;
	}
	



/* Row Fix
-------------------------*/

	
	.row:before, 
    .row:after {
        content:"";
        display: table ;
        clear:both;
    }
	

	
	
/* Section Styles

-------------------------*/

	
	.section-content{
		padding: 0px 12% 0px 12%;
		z-index: 9999;
	}
	
	
	.sections{
		width: 100%;
		z-index:1;
		padding: 150px;
	}
	
	
	
	
/* Separators
----------------------------*/	


	
	.separator { 
		width: 100px;
		height: 5px;
		background: #505050 none repeat;
		margin: 30px 0px 30px 0px;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
	}
	
	.separator-center { 
		width: 40px;
		height: 1px;
		background: #505050 none repeat;
		margin: 35px auto;
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
	}
	

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

	02. Typography

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




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




	.quicksand{
		font-family: 'Quicksand', sans-serif;
		
	}

	.lato{
		font-family: 'Lato', 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;
	}
	
	.lowercase{
		text-transform: lowercase;
	}
	
	
	
	

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




	.dark{
		color: #191919;
	}

	.white{
		color: #efefef;
	}

	.gray1{
		color: #777777;
	}

	.gray2{
		color: #505050;
	}

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

	.f-smaller{
		font-size: 10px;
		
	}
	
	.f-small{
		font-size: 13px;
		
	}
	
	.f-normal{
		font-size: 15px;
		
	}
	
	.f-semi-expanded{
		font-size: 1.5em;
		
	}
	
	.f-medium{
		font-size: 28px;
		
	}
	
	.f-expanded{
		font-size: 2.5em;
		
	}
	
	.f-big{
		font-size: 45px;
		
	}
	
	.f-large{
		font-size: 4em;
		
	}
	
	.f-extra-expanded{
		font-size: 6em;
		
	}
	
	
	
/*======================

	03. Backgrounds

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




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




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

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

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

	
/* Image Backgrounds
-------------------------*/
	
	
	
	
	.image-bg-1{
		background: url(../img/background/01.jpg);
	}
	
	.image-bg-2{
		background: url(../img/background/02.jpg);
	}
	
	.image-bg-3{
		background: url(../img/background/03.jpg);
		
	}
	
	.image-bg-4{
		background: url(../img/background/04.jpg);
		
	}
	
	.image-bg-5{
		background: url(../img/background/05.jpg);
		
	}
	
	.image-bg-6{
		background: url(../img/background/06.jpg);
		
	}
	
	.image-bg-7{
		background: url(../img/background/07.jpg);
		
	}
	
	.image-bg-8{
		background: url(../img/background/08.jpg);
		
	}
	
	.image-bg-9{
		background: url(../img/background/09.jpg);
		
	}
	
	.image-bg-10{
		background: url(../img/background/10.jpg);
		
	}
	
	.image-bg-11{
		background: url(../img/background/11.jpg);
		
	}
	
	.image-bg-12{
		background: url(../img/background/12.jpg);
		
	}
	
	.image-bg-13{
		background: url(../img/background/13.jpg);
		
	}
	
	.image-bg-14{
		background: url(../img/background/14.jpg);
		
	}
	
	.image-bg-15{
		background: url(../img/background/15.jpg);
		
	}
	
	.image-bg-16{
		background: url(../img/background/16.jpg);
		
	}
	
	.image-bg-1, 
	.image-bg-2, 
	.image-bg-3,
	.image-bg-4,
	.image-bg-5,
	.image-bg-6,
	.image-bg-7,
	.image-bg-8,
	.image-bg-9,
	.image-bg-10,
	.image-bg-11,
	.image-bg-12,
	.image-bg-13,
	.image-bg-14,
	.image-bg-15,
	.image-bg-16{
		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;
	}

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

	04. Navigation

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


	
	#navigation{
		position: fixed;
		top: 150px;
		right: 60px;
		z-index: 9999;
	}
	
	#navigation ul li{
		margin-bottom: 30px;
	}
	
	#navigation ul li a i{
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
	}
	
	
	
/*======================

	05. Homepages

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




/* Headings
----------------------------*/	



	#header{
		position: relative;
		padding-top: 150px;
		padding-bottom: 150px;
		background: #fff;
		
	}
	
	#header-dark{
		position: relative;
		padding-top: 150px;
		padding-bottom: 150px;
		background: #191919;
		
	}
	
	.big-text h2{
		max-width: 100%;
		letter-spacing: 1px;
		word-spacing: 3px;
		line-height: 1.2;
	}
	
	.big-text h3{
		max-width: 800px;	
		letter-spacing: 1px;
		word-spacing: 3px;
		line-height: 1.6;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	.home-03{
		max-width: 150px;
		padding: 10px;
		
	}
	
	.home-09-pro h2{
		margin: 25px 0px 40px 0px;
	}
	
	.big-gap{
		padding: 0px 8px 0px 8px;
	}
	
	.header-content li{
		display: inline-block;
		margin: 0px 0px 0px 25px;
		
	}
	
	.header-content li i{
		font-size: 2em;
	}
	
	.header-content li img{
		opacity: 0.9;
		max-width: 150px;
		border-radius: 100%;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		transition: all 0.2s;
	}
	
	.header-content li img:hover{
		opacity: 1;
	}



/* Contact Button
----------------------------*/	


	#contact-page{
		position: relative;
		background: #fff;
		padding-bottom: 150px;
	}
	
	#contact-page-dark{
		position: relative;
		background: #191919;
		padding-bottom: 150px;
	}


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

	06. Portfolio

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




	#portfolio{
		position: relative;
		background: #fff;
		padding-bottom: 150px;
	}
	
	#portfolio-dark{
		position: relative;
		background: #191919;
		padding-bottom: 150px;
	}

	
	.works-filter,
	.works-filter-full{
		width: 100%;
		font-size: 13px;
		word-spacing: 3px;
		letter-spacing: 3px;
		text-align: center;
		margin-bottom: 30px;
		color: #191919;
	}
	
	.works-filter li,
	.works-filter-full li{
		margin-right: 20px;
		
	}
	
	.works-filter-full{
		margin-left: 10%;
	}
	
	.uk-subnav > *{
		margin: 0px;
	}
	
	.uk-subnav > * > :focus, .uk-subnav > * > :hover{
		color: #ccc;
	}
	
	.uk-subnav > .uk-active > *{
		color: #8A8A8A;
		text-decoration: line-through;
	}

	.work li{
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
		overflow: hidden;
	}
	
	.work{
		overflow: hidden;

	}
	
	.work li:hover{
		opacity: 1;
		
	}
	
	
	.work img{
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
		overflow: hidden;
	}
	
	
	.work .hover,
	.work .hover-dark{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		overflow: hidden;
		opacity: 0;
		-moz-transform: translate(100%, 0%);
		-webkit-transform: translate(100%, 0%);
		-o-transform: translate(100%, 0%);
		transform: translate(100%, 0%);
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		transition: all 0.4s;
	}
	
	.work .hover{
		background: #fff;

	}
	
	.work .hover-dark{
		background: #191919;
	}
	
	
	.work .hover p,
	.work .hover-dark p{
		position: absolute;
		top: 50%;
		left: 50%;
		letter-spacing: 7px;
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		text-align: center;
	}

	
	.work:hover .hover,
	.work:hover .hover-dark{
		opacity: 1;
		-moz-transform: translate(0%, 0%);
		-webkit-transform: translate(0%, 0%);
		-o-transform: translate(0%, 0%);
		transform: translate(0%, 0%);

	}
	
	.work:hover img{
		-o-transform: scale(1.1) translate(-100%, 0%);
		-moz-transform: scale(1.1) translate(-100%, 0%);
		-webkit-transform: scale(1.1) translate(-100%, 0%);
		transform: scale(1.1) translate(-100%, 0%);
	}
	

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

	07. Blog

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


	
	#blog{
		position: relative;
		padding-top: 150px;
		padding-bottom: 150px;
		background: #fff;
		
	}
	
	#blog-dark{
		position: relative;
		padding-top: 150px;
		padding-bottom: 150px;
		background: #191919;
		
	}
	
	
/* Excerpt and Essentials
----------------------------*/	
	
	.blog-excerpt{
		margin-bottom: 75px;
	}

	
	.blog-excerpt h2{
		letter-spacing: 1px;
		word-spacing: 2px;
	}
	
	.blog-excerpt ul{
		margin: 20px 0px 20px 0px;
	}
	
	.blog-excerpt ul li{
		display: inline-block;
		border-left: 1px solid #b2b2b2;
		padding: 0px 20px 0px 20px;
	}
	
	.blog-slider ul li{
		border: none;
	}
	
	.blog-excerpt img{
		width: 100%;
	}


	.blog-excerpt p{
		line-height: 1.8;
		margin: 20px 0px 20px 0px;
	}
	
	
	.blog-excerpt .button{
		margin-top: 30px;
	}

	
	.blog-excerpt iframe{
		min-width: 100%;
		height: 600px;
	}
	
	
/* Full Post
----------------------------*/	
	
	
	.blog-post{
		margin-bottom: 75px;
	}

	
	.blog-post blockquote{
		line-height: 1.2;
	}
	
	.post-text p{
		margin-bottom: 25px;
	}
	

	
/* Comments
----------------------------*/	



	
	.comments{
		padding-bottom: 150px;
	}
	
	.comment-form{
		float: left;
		text-align: left;
	}
	
	.form{
		margin-top: 50px;
	}
	
	.form input{
		padding: 15px;
		margin-bottom: 20px;
		float: left;
		width: 100%;
		border: 1px solid #e5e5e5;
		background: transparent;
	}
	
	.form .button{
		margin-top: 20px;
	}

	.comment-form{
		margin-bottom: 100px;
	}
	
	.comment-form h3{
		margin-bottom: 20px;
	}

	.form textarea{
		width: 100%;
		padding: 15px;
		border: 1px solid #e5e5e5;
		background: transparent;
		color: #777777;
		
	}

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

	08. Contact

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


	
	#contact{
		padding-bottom: 150px;
		background: #fff;

	}
	
	#contact-dark{
		padding-bottom: 150px;
		background: #191919;

	}

	#contact-wrapper form input, form textarea{
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 15px;
		margin-bottom: 30px;
		transition: none;
		background: transparent;
		width: 100%;
		border: none;
		color: #191919;
		float: left;
		border: 1px solid #e5e5e5;
		font-size: 13px;
		font-weight: 500;
		word-spacing: 2.5px;
		text-align: left;
	}
	
	
	#message{
		
		height: 100px;
	}

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

	#contact-form p span {
		display: block;
		letter-spacing: 2px;
		text-transform: uppercase;
	}
	
	#contact-form p{
		margin-top: 15px;
	}
	
	#contact-form  i{
		margin-right: 5px;
	}
	
	#contact-form  p{
		float: right;
	}
	
	.contact-full{
		margin-top: 100px;
	}
	
	.contact-wrapper{
		max-width: 800px;
		background: red;
	}
	
	.contact-btn{
		float: left;
		background: transparent;
	}

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

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

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

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

	#contact-form .error {
		bottom: 12px;
		font-family: inherit;
		font-size: 16px;
		font-weight: 900;
		left: auto;
		letter-spacing: 0;
		position: absolute;
		text-transform: uppercase;
		letter-spacing: 1px;
		word-spacing: 3px;
		left: 0px;
		width: auto;
		color: #777777;
	}

	.response h3 {
		letter-spacing: 2px;
		margin: 10px 0 25px;
		text-transform: uppercase;
	}
	
	.contact-info h2{
		margin-bottom: 30px;
		line-height: 1;
	}

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

	09. Footer

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


	#footer{
		padding-top: 150px;
	}
	
	#footer p{
		letter-spacing: 3px;
	}
	
	#footer i{
		border: 1px solid #ccc;
		width: 35px;
		height: 35px;
		line-height: 30px;
		margin-top: 20px;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		transition: all 0.2s;
	}
	
	#footer i:hover{
		border: 1px solid #191919;
	}
	

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

	10. Social Media Icons

==========================*/
	
	
	.fa-500px{
		color: #0099e5;
	}
	
	.fa-amazon{
		color: #ff9900;
	}
	
	.fa-android{
		color: #a4c639;
	}
	
	.fa-apple{
		color: #999999;
	}
	
	.fa-bitbucket,
	.fa-bitbucket-square{
		color: #205081;
	}
	
	.fa-bluetooth,
	.fa-bluetooth-b{
		color: #3B5998;
	}
	
	.fa-cc-mastercard{
		color: #cc0000;
	}
	
	.fa-cc-stripe{
		color: #00afe1;
	}
	
	.fa-cc-visa{
		color: #1a1f71;
	}
	
	.fa-cc-paypal{
		color: #003087;
	}
	
	.fa-chrome{
		color: #CC0033;
	}
	
	.fa-codepen{
		color: #0ebeff;
	}
	
	.fa-delicious{
		color: #3399ff;
	}
	
	.fa-deviantart{
		color: #05cc47;
	}
	
	.fa-digg{
		color: #005be2;
	}
	
	.fa-dropbox{
		color: #007ee5;
	}
	
	.fa-drupal{
		color: #0077c0;
	}
	
	.fa-edge{
		color: #0078d7;
	}
	
	.fa-etsy{
		color: #d5641c;
	}
	
	.fa-etsy{
		color: #d5641c;
	}
	
	.fa-facebook,
	.fa-facebook-f,
	.fa-facebook-official,
	.fa-facebook-square{
		color: #3b5998;
	}
	
	.fa-firefox{
		color: #e66000;
	}
	
	.fa-flickr{
		color: #0063dc;
	}
	
	.fa-foursquare{
		color: #f94877;
	}
	
	.fa-github,
	.fa-github-square{
		color: #4078c0;
	}
	
	.fa-gitlab{
		color: #fca326;
	}
	
	.fa-gittip{
		color: #663300;
	}
	
	.fa-google{

		color: #4285f4;
	}
	
	.fa-google-plus,
	.fa-google-circle,
	.fa-google-official,
	.fa-google-square{
		color: #dd4b39;
	}
	
	.fa-hacker-news{
		color: #ff4000;
	}
	
	.fa-html5{
		color: #e34f26;
	}
	
	.fa-joomla{
		color: #f44321;
	}
	
	.fa-lastfm,
	.fa-lastfm-square{
		color: #d51007;
	}
	
	.fa-likedin,
	.fa-likedin-square{
		color: #0077b5;
	}
	
	.fa-linux{
		color: #333333;
	}
	
	.fa-mixcloud{
		color: #52aad8;
	}
	
	.fa-odnoklassniki,
	.fa-odnoklassniki-square{
		color: #ed812b;
	}
	
	.fa-opera{
		color: #cc0f16;
	}
	
	.fa-paypal{
		color: #003087;
	}
	
	.fa-pinterest,
	.fa-pinterest-p,
	.fa-pinterest-square{
		color: #cb2027;
	}
	
	.fa-reddit{
		color: #ff4500;
	}
	
	.fa-reddit,
	.fa-reddit-alien,
	.fa-reddit-square{
		color: #ff4500;
	}
	
	.fa-scribd{
		color: #1a7bba;
	}
	
	.fa-skype{
		color: #00aff0;
	}
	
	.fa-slack{
		color: #6ecadc;
	}
	
	.fa-slideshare{
		color: #0077b5;
	}
	
	.fa-snapchat,
	.fa-snapchat-ghost,
	.fa-snapchat-square{
		color: #fffc00;
	}
	
	.fa-soundcloud{
		color: #ff8800;
	}
	
	.fa-spotify{
		color: #1db954;
	}
	
	.fa-stack-exchange{
		color: #1e5397;
	}
	
	.fa-stack-overflow{
		color: #f48024;
	}
	
	.fa-steam,
	.fa-steam-square{
		color: #00adee;
	}
	
	.fa-stumbleupon{
		color: #eb4924;
	}
	
	.fa-stumbleupon,
	.fa-stumbleupon-circle{
		color: #eb4924;
	}
	
	.fa-stumbleupon{
		color: #eb4924;
	}
	
	.fa-telegram{
		color: #0088cc;
	}
	
	.fa-twitter,
	.fa-twitter-square{
		color: #1da1f2;
	}
	
	.fa-tripadvisor{
		color: #00af87;
	}
	
	.fa-tumblr,
	.fa-tumblr-square{
		color: #35465c;
	}
	
	.fa-vimeo{
		color: #1ab7ea;
	}
	
	.fa-vimeo,
	.fa-vimeo-square{
		color: #1ab7ea;
	}
	
	.fa-vine{
		color: #00b488;
	}
	
	.fa-wechat{
		color: #7bb32e;
	}
	
	.fa-wikipedia{
		color: #000000;
	}
	
	.fa-windows{
		color: #0078d7;
	}
	
	.fa-wordpress{
		color: #21759b;
	}
	
	.fa-xing,
	.fa-xing-square{
		color: #026466;
	}
	
	.fa-yahoo{
		color: #410093;
	}
	
	.fa-dribbble{
		color: #ea4c89;
	}
	
	.fa-behance,
	.fa-behance-square{
		color: #053eff;
	}
	
	.fa-twitch{
		color: #6441a5;
	}
	
	.fa-snapchat{
		color: #fffc00;
	}
	
	.fa-youtube,
	.fa-youtube-play,
	.fa-youtube-square{
		color: #ff0000;
	}
	
	.fa-windows{
		color: #0078d7;
	}
	
	.fa-whatsapp{
		color: #075e54;
	}
	
	.fa-quora{
		color: #a82400;
	}
	
	.fa-instagram{
		color: #e1306c;
	}

	
	.fa-imdb{
		color: #f5de50;
	}

	.fa fa-yelp{
		color: #af0606;
	}
	
	
	
	
/*========================

	11. Responsive

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


	

/* Resolution Under 990px
----------------------------*/	


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

		.sections{
			padding: 20px;
		}

		
		#footer{
			padding: 150px 0px 150px 0px;
		}


	}
	
	
/* Resolution Under 768px
----------------------------*/	
	
	
	
	@media all and (max-width: 768px) {
		
		
		.sections{
			padding-top: 0px;
		}
		
		#navigation{
			position: fixed;
			top: 35%;
			right: 3px;
			z-index: 9999;
			background: #8A8A8A;
			padding: 10px 10px 0px 10px;
			border-radius: 50px;
		
		}
	
		#navigation ul li{
			margin-bottom: 100%;
		}
		
		.f-extra-expanded{
			font-size: 2.5em;
		}
		
		.f-large{
			font-size: 1.5em;
		}
		
		.f-expanded{
			font-size: 1.3em;
		}
		
		.header-content li img{
			max-width: 50px;
		}
		
		.blog-excerpt iframe{
			height: 100%;
		}
		
		
	}
	
	
	
/* Resolution Under 530px
----------------------------*/

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

		
		.blog-excerpt ul li{
			border-left: 1px solid #b2b2b2;
			
		}
		
		.blog-excerpt ul li{
			padding: 0px 5px 0px 5px;
		}
		
		.header-content li i{
			font-size: 1em;
		}


	}
	

	
	
/* Resolution Under 450px
----------------------------*/	



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

		
		
		#contact-form p{
			float: left;
			margin-top: 20px;
		}

		.sections{
			padding: 0px;
			background: #191919;
		}
		
	}
	
	
	
/* Resolution Under 400px
----------------------------*/	


	
	@media all and (max-width: 400px) {
		
		.big-text h2{
			width: 100%;
		}
		
		
		.f-medium,
		.f-expanded{
			font-size: 20px;
		}
		

		.big-text h3{
			letter-spacing: 1px;
			word-spacing: 3px;
		}
	
		
		.works-filter li,
		.works-filter-full li{
			margin-right: 18px;
		
		}

	}
	
/* Resolution Under 375px
----------------------------*/	

	
	@media all and (max-width: 375px) {
		
		
		.f-big{
			font-size: 20px;
		}

	}