/*=============FONTS====================*/

	@font-face {
	    font-family: 'proxima_nova_rgregular';
	    src: url('proximanova-reg-webfont.eot');
	    src: url('proximanova-reg-webfont.eot?#iefix') format('embedded-opentype'),
	         url('proximanova-reg-webfont.woff2') format('woff2'),
	         url('proximanova-reg-webfont.woff') format('woff'),
	         url('proximanova-reg-webfont.ttf') format('truetype'),
	         url('proximanova-reg-webfont.svg#proxima_nova_rgregular') format('svg');
	    font-weight: normal;
	    font-style: normal;

	}



/*========== BASIC HEADER ============*/
	html{
	}

	body {

		background-image: url("#");
		font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
		width: 100%;
		margin: 0 auto;
		text-rendering: optimizelegibility;
		
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		-webkit-text-size-adjust: none;
		-webkit-font-smoothing: antialiased;
		
		-moz-tap-highlight-color:rgba(0,0,0,0); 
		-moz-text-size-adjust: none;
		-moz-font-smoothing: antialiased;
		
		-ms-tap-highlight-color:rgba(0,0,0,0); 
		-ms-text-size-adjust: none;
		-ms-font-smoothing: antialiased;
	}


	/*======RESPONSIVE NAV======*/
			body, div,
			h1, h2, h3, h4, h5, h6,
			p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
			fieldset, form, label, legend, th, td,
			article, aside, figure, footer, header, hgroup, menu, nav, section,
			summary, hgroup {
			  margin: 0;
			  padding: 0;
			  border: 0;
			}

			a:active,
			a:hover {
			  outline: 0;
			}

			@-webkit-viewport { width: device-width; }
			@-moz-viewport { width: device-width; }
			@-ms-viewport { width: device-width; }
			@-o-viewport { width: device-width; }
			@viewport { width: device-width; }


			/* ------------------------------------------
			  RESPONSIVE NAV STYLES
			--------------------------------------------- */

			.nav-collapse ul {
			  margin: 0;
			  padding: 0;
			  width: 100%;
			  display: block;
			  list-style: none;
			}

			.nav-collapse li {
			  width: 100%;
			  display: block;
			}

			.js .nav-collapse {
			  clip: rect(0 0 0 0);
			  max-height: 0;
			  position: absolute;
			  display: block;
			  overflow: hidden;
			  zoom: 1;
			}

			.nav-collapse.opened {
			  max-height: 9999px;
			}

			.disable-pointer-events {
			  pointer-events: none !important;
			}

			.nav-toggle {
			  -webkit-tap-highlight-color: rgba(0,0,0,0);
			  -webkit-touch-callout: none;
			  -webkit-user-select: none;
			  -moz-user-select: none;
			  -ms-user-select: none;
			  -o-user-select: none;
			  user-select: none;
			}

			@media screen and (min-width: 750px) {
			  .js .nav-collapse {
			    position: relative;
			  }
			  .js .nav-collapse.closed {
			    max-height: none;
			  }
			  .nav-toggle {
			    display: none;
			  }
			}


			/* ------------------------------------------
			  DEMO STYLES
			--------------------------------------------- */

			section {
			  border-bottom: 1px solid #999;
			  text-align: center;
			  padding: 100px 0 0;
			  height: 800px;
			  width: 100%;
			}

			h1 {
			  margin-bottom: .5em;
			}

			p {
			  width: 90%;
			  margin: 0 auto;
			}


			/* ------------------------------------------
			  FIXED HEADER
			--------------------------------------------- */

			header {
			  position: fixed;
			  z-index: 3;
			  width: 100%;
			  left: 0;
			  top: 0;
			  padding: 0 40px;
			  		margin: 0 auto;
				position: relative;
				max-width: 960px;
			}


			.logo {
			  background-image: ;
			  -webkit-tap-highlight-color: rgba(0,0,0,0);
			  text-decoration: none;
			  font-weight: bold;
			  line-height: 55px;
			  margin-top:20px;
			  color: #fff;
			  float: left;
			}


			/* ------------------------------------------
			  MASK
			--------------------------------------------- */

			.mask {
			  -webkit-transition: opacity 300ms;
			  -moz-transition: opacity 300ms;
			  transition: opacity 300ms;
			  visibility: hidden;
			  position: fixed;
			  opacity: 0;
			  z-index: 2;
			  bottom: 0;
			  right: 0;
			  left: 0;
			  top: 0;
			}

			.android .mask {
			  -webkit-transition: none;
			  transition: none;
			}

			.js-nav-active .mask {
			  visibility: visible;
			  opacity: 1;
			}



			@media screen and (min-width: 40em) {
			  .mask {
			    display: none !important;
			    opacity: 0 !important;
			  }
			}


			/* ------------------------------------------
			  NAVIGATION STYLES
			--------------------------------------------- */

			.fixed {
			  position: fixed;
			  width: 100%;
			  left: 0;
			  top: 0;
			}

			.nav-collapse,
			.nav-collapse * {
			  -webkit-box-sizing: border-box;
			  -moz-box-sizing: border-box;
			  box-sizing: border-box;
			}

			.nav-collapse,
			.nav-collapse ul {
			  list-style: none;
			  width: 100%;
			  float: left;
			  margin-top: 5px;
			}

			@media screen and (min-width: 750px) {
				  .nav-collapse {
				    float: right;
				    width: auto;
				    margin-top: 20px;
				  }

				.nav-collapse li {
				  float: left;
				  width: 100%;
				}
			}

			@media screen and (min-width: 750px) {
			  .nav-collapse li {
			    width: auto;
			  }

			}

			.nav-collapse a {
				font-size: 20px;
				font-family: 'Josefin Sans', sans-serif;
				text-transform: lowercase;
				color: #2b2829;			
				border-top: 1px solid white;
				text-decoration: none;
				background: #00927C;
				padding: 0.7em 1em;
				color: #fff;
				width: 100%;
				float: left;
				font-weight: bold;
				text-align: center;
				border-bottom: 1px solid white;
				padding: 16px;
				text-align: center;
				border-top: 0;
				float: left;
				margin: 0;	
			}

			.nav-collapse a:active,
			.nav-collapse a:hover,
			.nav-collapse .active a {
			  background: #101010;
			  color: #F4F4F3;
			  font-weight: bold;
			}

			.nav-collapse ul ul a {
			  background: #ca3716;
			  padding-left: 2em;
			}

			@media screen and (min-width: 40em) {
				  .nav-collapse a {
				  	background: none;
				  	border: none;
				  	color: #101010;
				  	font-weight: normal;
				  }

				.nav-collapse .active a {
					background: none;
				  	border: none;
				  	color: #101010;
				  	text-decoration: underline;
				}

				.nav-collapse a:hover {
					background: none;
				  	border: none;
				  	color: #101010;
				  	font-weight: normal;
				  	text-decoration: underline;
				}

				.nav-collapse li.ncontact a {
					font-size: 20px;
					font-family: 'Josefin Sans', sans-serif;
					text-transform: lowercase;
					color: #006858;			
					display: block;

				}

				body#dindex li.nhome a,
				body#dabout li.nabout a,
				body#dorders li.norders a,
				body#dbakery li.norders a,
				body#dcafe li.norders a,
				body#dcontact li.ncontact a {
			 		color: #2b2829;
			 		font-weight: bold;
				    text-decoration: underline;
				    -webkit-transition: all 300ms ease-in-out;
				    -moz-transition: all 300ms ease-in-out;
				    -o-transition: all 300ms ease-in-out;
				    transition: all 300ms ease-in-out;
				}

			}

			.nav-collapse ul ul a {
				/*
			  background: #ca3716;
			  padding-left: 2em;
			  */
			}

			@media screen and (min-width: 40em) {
			  .nav-collapse ul ul a {
			    display: none;
			  }
			}


			/* ------------------------------------------
			  NAV TOGGLE STYLES
			--------------------------------------------- */

			@font-face {
			  font-family: "responsivenav";
			  src:url("../icons/responsivenav.eot");
			  src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
			    url("../icons/responsivenav.ttf") format("truetype"),
			    url("../icons/responsivenav.woff") format("woff"),
			    url("../icons/responsivenav.svg#responsivenav") format("svg");
			  font-weight: normal;
			  font-style: normal;
			}

			.nav-toggle {
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;
			  text-decoration: none;
			  text-indent: -300px;
			  position: relative;
			  overflow: hidden;
			  width: 60px;
			  height: 55px;
			  float: right;
			  margin-top: 22px;
			}

			.nav-toggle:before {
			  color: #fff; /* Edit this to change the icon color */
			  font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
			  font-family: 'Josefin Sans', sans-serif;
			  text-transform: none;
			  text-align: center;
			  position: absolute;
			  content: "\2261"; /* Hamburger icon */
			  text-indent: 0;
			  speak: none;
			  width: 100%;
			  left: 0;
			  top: 0;
			  background-color: #00927c;
			}

			.nav-toggle.active:before {
			  /*font-size: 24px;*/
			  content: "\78"; /* Close icon */
			}

/* ========== BASIC FOOTER ============*/


	/*  FOOTER BAR  */
		footer {
			clear: both;
			padding: 0px;
			padding-bottom: 10px;
			margin-top: 20px;
			text-align: center;
		}


		h2.copyright{
			padding-top: 10px;
			font-size: 12px;
			font-family: 'Josefin Sans', sans-serif;
			opacity: 0.4;
			text-decoration: none;
		}

		h2.copyright a{
			text-decoration: none;
		}
		


		.socialize{
			background-color: #2b2829;
			width: 100%;
			margin: 0 auto;
			padding: 10px 0;
			text-align: center;
		}

		.socialize ul{
			margin: 0 auto;
			list-style: none;
			text-align: center;
		}	

		.socialize ul li{
			display: inline-block;
			display:inline; /* for IE7 */
			vertical-align:top;
			padding: 0 5px;
		
		}

		.socialize li.facebook_lnk a {
			display: inline-block;
			width: 40px;
			height: 37px;
			background: url(../images/facebook.png); 
		}
			
		.socialize li.facebook_lnk a:hover {
			display: inline-block;
			width: 40px;
			height: 37px;
			background: url(../images/facebook.png) 0 -38px; 
		}


		.socialize li.twitter_lnk a {
			display: inline-block;
			width: 40px;
			height: 37px;
			background: url(../images/twitter.png); 
		}
			
		.socialize li.twitter_lnk a:hover {
			display: inline-block;
			width: 40px;
			height: 37px;
			background: url(../images/twitter.png) 0 -38px; 
		}
			

		.socialize li.behance_lnk a {
			display: inline-block;
			width: 40px;
			height: 37px;
			background: url(../images/behance.png); 
		}
			
		.socialize li.behance_lnk a:hover {
			display: inline-block;
			width: 40px;
			height: 37px;
			background: url(../images/behance.png) 0 -38px; 
		}
			

		.socialize li.linked_lnk a {
			display: inline-block;
			width: 40px;
			height: 37px;
			background: url(../images/linked.png); 
		}
			
		.socialize li.linked_lnk a:hover {
			display: inline-block;
			width: 40px;
			height: 37px;
			background: url(../images/linked.png) 0 -38px; 
		}	

/* ========== HOME CONTENT ============*/

	/* BANNER IMG */

		#banner_img{
			margin-top: 10px;
		}

		#banner_img img{
			width: 100%;
			margin: 0 auto;
		}


	/*  SECTIONS  */
		section {
			clear: both;
			width: 100%;
			margin: 0 auto;
			max-width: 960px;
			text-align:center;
			padding: 10px 0;
		}


		.group h2{
			padding-bottom: 30px;
			font-family: 'Grand Hotel', cursive;
			font-size: 28px;
			font-weight: none;
			letter-spacing: 1px;
			color: #2b2829;

		}


	/*  COLUMN SETUP  */
		.col {
			display: block;
			float:left;
			margin: 0 auto;
			padding-bottom: 40px;
		}

		.col { margin-left: 0; }



	/*  GROUPING  */
		.group:before,
		.group:after {
			content:"";
			display:table;
		}
		.group:after {
			clear:both;
		}
		.group {
			zoom:1; /* For IE 6/7 */
			
		}

	/*  THREE WHYS  */

		.span_1_of_3 {
			width: 100%;
		}

		.span_1_of_3 img{
			width: 35%;
		}

		.span_1_of_3 h3{
			text-align: center;
			font-size: 20px;
			color: #2b2829;
			font-family: 'Josefin Sans', sans-serif;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-top: 20px;

		}

	/*CONTACT FORM INDEX*/

		.index_contact{
			margin-top: -10px;
		}

		.index_contact h2{
			padding-bottom: 20px;
			font-family: 'Grand Hotel', cursive;
			font-size: 28px;
			font-weight: none;
			letter-spacing: 1px;
			color: #2b2829;
		}

		.index_contact p{
			text-align: center;
			font-size: 18px;
			letter-spacing: 1px;
			color: #2b2829;
			font-family: 'Josefin Sans', sans-serif;
			padding: 10px 20px;

		}



		aside.contact_info{
			font-size: 16px;
			letter-spacing: 1px;
			color: #2b2829;
			font-family: 'Josefin Sans', sans-serif;
			padding: 20px 40px;
			width: 100%;
		}

		aside.contact_info a{
			color: #00927C;
		}

		aside.contact_info p{
			text-align: center;
			font-size: 16px;
			letter-spacing: 1px;
			color: #2b2829;
			font-family: 'Josefin Sans', sans-serif;
			padding: 10px 20px;

		}



		aside .personal_info{
			text-align: center;
			font-size: 18px;
			letter-spacing: 1px;
			color: #2b2829;
			font-family: 'Josefin Sans', sans-serif;
			padding: 10px 0;
			margin: 0 auto;
			width: 100%;


		}


		aside .personal_info a:hover{
			text-decoration: underline;
		}

		aside .contact_bar{
			background-color: #2b2829;
			width: 85%;
			margin: 0 auto;
			height: 2px;
		}

/* ========== RESPONSE CONTENT ============*/

	header .success_logo img {
		margin: 0 auto; 
		width: 100%;
		padding-bottom: 10px;
		max-width: 960px;
		min-width: 400px;
	}
	

	.form_confirm{
		margin: 0 auto;
		max-width: 600px;
		border-radius: 10px;
		padding-bottom: 30px;
		
	}

	#success h3{
		font-family: 'Josefin Sans', sans-serif;
		font-size: 18px;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: #101010;
		padding-bottom: 10px;
	}

	#success p{
		font-size: 14px;
		font-family: 'proxima_nova_rgregular';
		color: #101010;
		letter-spacing: 2px;
		line-height: 16px;
		margin-top: 10px;
		width: 100%;

	}

	.button_work{
		margin-top: 20px;
		padding: 5px 0;

	}

	a.return_buttons{
		color: #8d4b57;
		border: 3px solid #8d4b57;
		text-align: center;
		font-size: 30px;
		font-family: 'Josefin Sans', sans-serif;
		letter-spacing: 1px;
		padding: 5px 10px;
	}

	a.return_buttons:hover{
		color: #101010;
		border: 3px solid #101010;
		text-align: center;
		font-size: 30px;
		font-family: 'Josefin Sans', sans-serif;
		letter-spacing: 1px;
		padding: 5px 10px;
	}


/* ============ MEDIA QUERIES ============*/

	@media print {
		/* All your print styles go here */
		header,
		footer,
		#nav {
			display:none !important;
		}
	}

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

			a.custom-box-2 h3{
			font-size: 22px;

		}

	
	}
	
	@media only screen and (min-width: 485px){

	
	}

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

		.work_main figure img{
			display: none;
		}

		#success h3{
			font-size: 26px;

		}

		article.home_intro{
			display:none;
		}


		/* CONTACT CONTENT */	
			.form_intro p{
				display:none;
			}



	}

	@media only screen and (min-width: 600px){

		.group h2, .index_contact h2{
			font-size: 34px;

		}


		.span_1_of_3 img{
			width: 30%;
		}

		
		a.custom-box-2 h3{
			font-size: 20px;
		}

		.span_1_of_4 {
			width: 25%;
			padding: 0 4px;
		}






	}

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





		

	}

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



	}

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


	



	}

	@media only screen and (min-width: 800px){


}

	@media only screen and (min-width: 850px){

	

	}



	@media only screen and (min-width: 900px){



	}

	@media only screen and (min-width: 960px){


	}

	@media only screen and (orientation:landscape) and (max-width: 800px){

		body{
			

		}
	}
	/* check to see if the monitor/device is widescreen

	@media only screen and (device-aspect-ratio:16/9), screen and (device-aspect-ratio:16/10){
		body{
			background-color:#f7d86d;
		}

	}*/

	/*as long as it is not landscape*/
	/*@media not screen and (orientation:landscape){
		body{
			width: 70%;

		} 
	}*/

	/*as long as it is a square or landscape*/
	@media only screen and (min-aspect-ration:1/1){
		body{
			width:50%;
		}
		}