/*
________                          ________              
\______ \ _____ __  _  ______    /  _____/_____  ___.__.
 |    |  \\__  \\ \/ \/ /    \  /   \  ___\__  \<   |  |
 |    `   \/ __ \\     /   |  \ \    \_\  \/ __ \\___  |
/_______  (____  /\/\_/|___|  /  \______  (____  / ____|
        \/     \/           \/          \/     \/\/     

Author:     Degas Guruve
Version:	2.0.0, July 2018

Index
-----
01 - JW GLOBAL			 30		
02 - FONTS	 	        107			
03 - TEXT STYLES	    148		
04 - LINKS				189		
05 - MAIN STYLES 		254		
06 - HEADER				289		
07 - FOOTER				358		
08 - ICONS				372				
09 - INTRO				385							
10 - TESTIMONIALS		449	
11 - CONTACT            494
     FORM				519
12 - CLEARFIX           544
13 - 404                561
14 - RESPONSIVE         570													
 */

/* ================================================
   01 - JW GLOBAL
   ============================================= */

		* { 		
		   -webkit-box-sizing: border-box; 
		   -moz-box-sizing: border-box; 
			box-sizing: border-box; 
			margin: 0;
			padding: 0;	
		}
		.none, .hidden {
			display: none;	
		}
		.clear {
			clear: both;
		}
		.fleft, .left {
			float: left;	
		}
		.fright, .right {
			float: right;	
		}
		.centre {
			text-align: center !important;	
		}
		a:active, a:focus { 
			outline: 0;
		}
		.upper {
			text-transform: uppercase;
		}
		.full {
			width: 100%;
		}
		.strong {
			font-weight: bold;	
		}
		.relative {
			position: relative;	
		}
		.absolute {
			position: absolute;	
		}
		.fixed {
			position: fixed;
	    } 
		img { 
			border: none;
			max-width: 100%;
			height: auto;	
				-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
				filter: grayscale(100%);
		}
		a img {
			display: flex;
			-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
			filter: grayscale(0%);
		}
		a img:hover, .intro .panel img {
			-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
			filter: grayscale(100%);				
		}
		p {
			margin-bottom: 1em;
			max-width: 80ex;
			hyphenate-limit-lines: 2;
		}
		p.click {
			width: 100%;
			min-width: 0;
			margin-left: 0;
			margin-right: 0;
			font-size: 0.9em;	
		}
		
		
/* ================================================
   02 - FONTS
   ============================================= */	

	body {
		 font-size: 15px;
		 line-height: 1.4;
	}

/* ================================================
   03 - TEXT STYLES
   ============================================= */

	body {
		font-family: "bree", sans-serif;
		font-weight: 400;
	}
	h1, h2 {
		font-family: "bree", sans-serif;
		font-weight: 300;
		font-size: 2.5em;
		margin-bottom: 0.5em;
		color: #DD2759;	
	}
	h1 {
		line-height: 1.1;
	}
	h2 {
		font-size: 1.8em;
		line-height: 1.2em;
	}
	
	h2.header {
		font-size: 2.2em;
	}
	p {
		margin-bottom: 22px;
	}
	em {
		font-family: "bree", sans-serif;
		font-weight: 400;
		font-style: italic;
	}
	.subhead {
		text-transform: uppercase;	
		margin-bottom: 0;
		color: #B32D5D;
	}
	h2.name {
		margin-bottom: 0.1em;	
		font-size: 1.7em;
	}

/* ================================================
   04 - LINKS
   ============================================= */


	a, footer a {
		text-decoration: none;	
		color: rgba(255,85,68,1);
	}
	footer a {	
		color: #666;
	}		
	a:hover, footer a:hover {
		padding-bottom: 1px;
		text-decoration: none;
		color: #B32D5D;	
	}
	header a, header a:hover {
		color: white;
		text-decoration: none;	
	}
	.menu a {
		border: 2px solid rgba(255,255,255,0.2);	
		margin-left: 0.25vw;
		border-radius: 0 0 4% 20%;		
		min-width: 80px;		
		float: left;		
		text-align: center;			
		padding: 1.5em 1.5vw;
		
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#DD2759+0,FF5544+100 */
		background: #DD2759; /* Old browsers */
		background: -moz-linear-gradient(top, #DD2759 0%, #FF5544 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #DD2759 0%,#FF5544 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #DD2759 0%,#FF5544 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DD2759', endColorstr='#FF5544',GradientType=0 ); /* IE6-9 */
	}
	.menu a:hover {
		background: #DD2759;
	}
	footer a, a img {
		transition: ease-in 0.25s;
		-webkit-transition: ease-in 0.25s;
	}
	a.mob-phone {
		margin-right: 1em;	
	}
	a.contact-link {
		padding: 0.5em 1em;
		border: 2px solid #B32D5D;
		border-radius: 99px;
		margin: 0 0.25em 0 0 !important;
		display: inline-block;
		box-shadow: 0 0 10px rgba(219,219,219,0.75);	
	}
	a.contact-link:first-of-type {
		margin: 0 0.25em 0.5em 0 !important;	
	}
	a.contact-link i { 
		margin: 0 0.1em !important;
		vertical-align: middle;
		color: #B32D5D;
	}

			
/* ================================================
   05 - MAIN STYLES
   ============================================= */
   
   .container {
		margin: 0 auto;
		width: 100%;
		max-width: 1200px; 
		padding: 1em 0;
   }
   p, .testimonial, .container-inner {
		width: 100%;
		/* max-width: 800px; */
	   		max-width: 950px;
		margin-left: auto;
		margin-right: auto;		
		color: #0D3757;
	}
   .slide.testimonials .container-inner, .novels .container-inner {
	   max-width: 1030px;
   }
	.novels {
		padding-top: 1em
	}
	.novels p {
		margin-left: 0;
		margin-right: 0;
		max-width: 87ex;
	}
   #main {
		padding: 25px 3% 0;  
   } 
   .slide .container {		   
		padding: 2em 0 2em calc(32px + 1.25vw);
		box-shadow: 0 0 2vw rgba(219,219,219,0.5);
		margin-bottom: 2vw;			
   }   
   a.anchor {
		display: block;
		position: relative;
		top: -150px;
		visibility: hidden;
	}
	a.anchor#features {
		top: -130px;
	} 
	a.anchor#novels {
		 top: -160px; 
	}
   
 /* ================================================
   06 - HEADER
   ============================================= */  
   
	header {
		width: 100%;
		position: fixed;
		padding: 0 3%;
		transition: ease-in 0.5s;
		-webkit-transition: ease-in 0.5s;	
		height: 55px;
		z-index: 50000;		
		background: #B32D5D;
		color: white;
	}
	header .container {
		display: flex;	
		padding-top: 0.5em;
	}
	header.offset {
		background: rgba(179,45,93,0.95);	
		transition: ease-in 0.5s;
		-webkit-transition: ease-in 0.5s;
	}
	.title {
		float: left; 
		text-align: center;
		padding: 1em 1.5em  1.5em;
		background: #DD2759;
		margin-right: 1.25vw;
		margin-top: -3em;
		padding-top: 3em;
		border-radius: 50%;		
	}
	.title h2 {
		display: inline-block;	
		font-size: 2.5em;
		margin: -3px 0 -3px;
	}
	header h2 span {
		font-size: 0.7em;
		color: white;
	}
	header h2 span.dg {
		/* font-size: 1em; */
			font-size: 0.9em;
	}
	header .phone {
		padding: 0.5em 1em;
		margin-top: 0;
	}
	header .phone:before {
		content: " ";
		padding-top: .75em;
		width: 7em;
		display: block;
		border-top: 1px solid white;
		margin: 0 auto;
	}
	.menu {
		float: right;	
		text-transform: uppercase;
		margin-left: auto;
		margin-top: -0.5em;
	}
	.menu li {
		display: inline-block;	
	}	
	
	
/* ================================================
   07 - FOOTER
   ============================================= */  
   
	footer {
		width: 100%;
		font-size: 0.9em;
		opacity: 0.8;
	}
	footer .container {
		padding-left: 65px;	
	}
	

/* ================================================
   08 - ICONS
   ============================================= */  
   
	.fa, .fab, .fal, .far, .fas {
		font-size: 20px;
		margin-left: 0.5em;
	}
	.fa-mobile-alt {
		margin-right: 0.25em;	
	}
	
	
/* ================================================
   09 - INTRO
   ============================================= */  
   
	#intro.slide .container {
		padding-top: 4.25em;
	}
	.panel {
		width: 48%;
		float: left;	
	}
	.panel:first-of-type {
		margin-right: 4%;	
	}
	.panel:nth-of-type(2) {
		padding-right: 4em;	
	}
	.panel h1 {
		margin-bottom: 0.5em;
    	font-size: 2.4em;	
	}
	.intro .panel:nth-of-type(2) p:first-of-type {
		margin-bottom: 1em;
		font-size: 1.2em;
	}
	.intro .panel:nth-of-type(2) p:first-of-type span {
		color: #B32D5D;	
		opacity: 0.8;
	}
	.work-examples {
		clear: both;
		float: left;
		margin: 2em 0;	
		width: 100%;
		padding: 1em;
		background: rgba(0,0,0,0.1);
		
		display: flex;
  		flex-wrap: wrap;
	}
	.work-examples .container-inner {
		width: 102%;
		max-width: 1020px;
	}
	.work-examples ul {
		display: flex;	
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 1.5em;
	}
	.work-examples li {
		/* width: 24%; */
			width: 23.5%;
		margin-bottom: 2%;
		list-style: none;
	}
	.work-examples li.double {
		/* width: 48%; */
			width: 49%;
	}
	.work-examples img {
		width: 100%;	
	}
	
   
/* ================================================
   10 - TESTIMONIALS
   ============================================= */  
   
   ul.list {
	  	display: flex;
	  	flex-wrap: wrap;
	  	padding-right: 3%;
	}
   .testimonial {
		list-style: none;
		font-family: "bree", sans-serif;
		font-weight: 300;
		margin-top: 0.25em;
		box-shadow: 0 0 10px rgba(219,219,219,0.5);		
		padding: 2vw 2vw 1.5vw;
		margin-bottom: 2%;
		border-radius: 0 5% 0 19%;
		width: 48%;	
		margin-left: 5px;
		text-indent: -8px;
		background: rgba(239,239,88,0.75);
		
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#F5F59B+0,F3F382+100 */
		background: #F5F59B; /* Old browsers */
		background: -moz-linear-gradient(top, #F5F59B 0%, #F3F382 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #F5F59B 0%,#F3F382 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #F5F59B 0%,#F3F382 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F5F59B', endColorstr='#F3F382',GradientType=0 ); /* IE6-9 */		
	}
	cite {
		border-top: 1px solid;
		display: block;
		margin-top: 1.5em;
		text-indent: 0;
		padding: 1em 0.5em;
		font-size: 15px;
		font-family: "bree", sans-serif;
		font-weight: 400;
		font-style: normal;
	}
   
/* ================================================
   11 - CONTACT
   ============================================= */ 
   
    .contact .panel:first-of-type {
		width: 30%;
	}
	.contact .panel:nth-of-type(2) {
		width: 66%;
		padding-top: 0.5em;
	}	
	.contact img {
		border-radius: 50%;
		margin-top: 1.85em;
		margin-bottom: 1em;	
	}
	.contact ul {
		margin: 0.75em 0 1.5em;
		max-width: 250px;
	}
	.contact li {
		list-style: none;
		border-bottom: 1px solid;
		padding: 0.75em 0;	
	}
	.contact li:first-child {
		border-top: 1px solid;
	}
	.contact li i {
		padding: 0.5em;
		border: 1px solid;
		border-radius: 50%;
		width: 2em;
		text-align: center;
		height: 2em;
		margin-right: 0.25em;
		margin-left: 0 !important;	
		color: #B32D5D;
	}

	/* Form */
	.wpcf7-form {
		margin-top: -1em;
	}
	.wpcf7-form p {
		margin-bottom: 0.5em;
	}
	input.wpcf7-form-control, textarea.wpcf7-form-control {
  		padding: 5px;
  		margin-top: 2px;
		width: 100%;
		max-width: 325px;  
		font-family: sans-serif;
	}

	input.wpcf7-form-control:focus, textarea.wpcf7-form-control:focus {
		border-color: #DD2759;
		outline:none !important;
		outline-width: 0 !important;
		box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
	}
	input.wpcf7-form-control.wpcf7-submit {
	  	padding: 8px 12px;
	  	font-size: 1.1em;
	  	color: white;
	  	background: #DD2759;
	  	border: none;
	}
	input.wpcf7-form-control.wpcf7-submit:hover {
		opacity: 0.75;	
	}
	.wpcf7-response-output {
		max-width: 325px;
  		margin-left: 0 !important;
	}
   
   
/* ================================================
   12 - CLEARFIX
   ============================================= */ 

	.clearfix:after {
		content:".";
		display:block;
		height:0;
		clear:both;
		visibility:hidden;
	}
	.clearfix {display:inline-block;}
		/* Hide from IE Mac \*/
	.clearfix {display:block;}
	/* End hide from IE Mac */	
	
	
/* ================================================
   13 - 404
   ============================================= */	

	.error404 #main {
		padding-top: 10em;	
	}


/* ================================================
   14 - RESPONSIVE
   ============================================= */	
	
	/* MIN */
	
	@media screen and (min-width: 800px) {	
	
		.testimonial::first-line {
			/* */font-size: 1.25em;			
			text-shadow: 0 0 1px rgba(13,55,87,0.25);
			color: #0D3757; 
		}		
	
	}
	
	@media screen and (min-width: 980px) { 	
		.menu li.mob {
			display: none;	
		}
		.menu a {
			padding: 1.5em 1.25vw;
		}	
	}

	@media screen and (min-width: 1050px) { 	
		.menu a {
			padding: 1.5em 1.375vw;
		}	
	}
	@media screen and (min-width: 1100px) { 	
		.menu a {
			padding: 1.5em 1.25vw;
		}	
	}

	
	/* MAX */
	@media screen and (max-width: 1275px) { 
	
		.slide .container {
			padding-left: calc(1.25vw + 206px);
		}
		.error404 .slide .container {
			padding-left: 2em;
			padding-right: 2em;	
		}
		.work-examples {
			padding: 0.5em 1em;
		}
			
	}
	
	@media screen and (max-width: 980px) { 
	
		.taptap-main-menu-button::before,
		.taptap-main-menu-button div.taptap-main-menu-button-middle::before,
		.taptap-main-menu-button::after {
			background-color: white !important;	
		}
		.taptap-menu-button-wrapper {
			right: 0 !important;
			left: auto;
			background: #FF5544;
			padding-left: 10px !important;
			width: 55px !important;
			top: 0 !important;
			height: 55px !important;
			padding-top: 5px !important;
		}	
		.taptap-by-bonfire ul li {
			width: 100%;
			min-height: 30px;
			list-style-type: none;
			margin: 0;
			padding: 1px;
			text-align: center;
		}
		.taptap-by-bonfire .menu li {
			width: 200px !important;
			margin: 0 calc(0.5*(100% - 200px)) !important;
			border-bottom: 1px solid rgba(255,255,255,0.5) !important;
		}
		.taptap-by-bonfire .menu li:first-of-type {
			border-top: 1px solid rgba(255,255,255,0.5) !important;
		}
		.taptap-by-bonfire ul li a {
			letter-spacing: 0;
			color: white;
			margin: 0 auto;
			width: 100%;
			padding: 1em 0;
			display: inline-block;
			text-decoration: none;
			-webkit-transition: all 0.2s ease;
			-moz-transition: all 0.2s ease;
			transition: all 0.2s ease;
		}
		.menu a {
			border: none;
			margin-left: 0;
			border-radius: 0;
			min-width: 80px;
			float: left;
			text-align: center;
			padding: 1em 1.5vw 1.75em;				
		}
		.menu a, .menu a:hover {
			background: none;
		}
		html {
			font-size: 1rem;	
		}
		#main {
			padding: 3em 3% 0;
		}
		.panel {
			width: 100%;
		}
		panel:first-of-type {
			margin-right: 0;	
		}
		h1 {
			font-size: calc(4vw + 1em);
			margin-top: 0.25em;
		}
		.work-examples li {
			/* width: 23%; */
				width: 23.5%;
		}
		.work-examples li.double {
			width: 49%;
			/* order: 2; */
		}
		.panel h1 {
			font-size: 4.4vw;
		}
		.title {
			margin-right: 1.75vw;
		}
		
	}
	
	@media screen and (max-width: 850px) { 
	
		.testimonial {
			width: 92%;	
			padding: 3vw;
		}
		.panel h1 {
			font-size: 4.25vw;
		}
		
	}
	
	@media screen and (max-width: 800px) { 
		
		#main {
			padding: 2em 0 0;
		}
		a.anchor, a.anchor#my-work {
			top: -85px;
		}
		.slide.intro .container {
			padding-right: 5%;
		}
		.work-examples {
			margin: 1.5em 0;
		}
		.work-examples ul {
			margin-top: 1em;	
		}	
		.taptap-main-inner-inner-toolbar {
			padding-top: 20vh !important;
		}	
		.panel h1 {
			font-size: 3.9vw;
		}	
		.testimonial {
			text-indent: -5px;	
		}
	
	}
	
	@media screen and (max-width: 675px) { 
		
		header h2 span.dg {
			/* font-size: 5.5vw; */
				font-size: 5vw;
		}
		header .phone {
			display: none;
		}
		header h2.tag span {
			font-size: 3vw;
		}
		.title {
			padding-left: 3vw;
			padding-right: 3vw;	
		}
		.slide .container {
			padding-left: 5%;
			padding-right: 5%;
		}
		#intro.slide .container {
			padding-top: 5%;
		}
		ul.list {
			padding-right: 0;
		}
		.testimonial {
			width: 100%;
			margin-left: 0;
			padding: 4vw 5vw;
		}
		.contact ul {
			display: inline-block;
		}
		.panel:nth-of-type(2) {
			padding-right: 0;
		}
		.contact .panel:first-of-type {
			width: 100%;
		}
		.contact .panel:nth-of-type(2) {
			width: 100%;
		}
		footer .container {
			padding-left: 5%;
		}
		.panel h1, h2.header {
			font-size: 6vw;	
		}
		.title h2 {
			margin: -10px 0 0;
		}
	
	}
	
	@media screen and (max-width: 500px) { 
	
		.cred1 {
			display: block;
		}
		.work-examples li {
			width: 49%;
		}
		.work-examples li.double {
			width: 100%;
		}
		.work-examples {
			padding: 0 1em;
		}
	
	}
	
	@media screen and (max-width: 450px) { 
	
		a.contact-link {
			margin: 0 .25em 0.5em 0 !important;	
		}
		.work-examples {
			margin: 0.5em 0 1em;
		}
		.title {
			margin-right: 1.5vw;
		}
		.contact img {
		  	margin-top: 0;
		  	margin-bottom: 0.5em;
		}
	
	}
		
	@media screen and (max-width: 375px) { 
	
		header h2 span {
			font-size: 0.6em;
		}
		.menu {
			margin-left: -6px;	
		}
		.menu a {
			padding: 6px;
		}
		.title {
			margin-left: -5px	
		}
		.title {
			margin-right: 1.25vw;
		}
		
	}
	
	@media screen and (max-width: 360px) { 
	
		.contact .fa, .contact .fab, .contact .fal, .contact .far, .contact .fas {
			font-size: 18px;	
		}
		
	}