#menu-button-container {
	display: none;
	text-align: right;
	padding-top: 15px;
	z-index: 999;
}

/*
	###########
	Start ipad-mini style
	###########
*/

@media all and (min-width: 1820px) {

	.project-content-container img,
	.project-image-list-container img {
		width: 100%;
	}

	#slideshow-container {
		margin: 100px auto 0 auto;
		padding-left: 80px;
		padding-right: 100px;
	}


	}

@media all and (max-width: 1485px) {
	ul#menu a {
			padding: 0px 12px;
	}
	.featured-portfolio-content h3 {
		font-size: 24pt;
		max-width: 70%;
	}

	.featured-portfolio-content p {
    margin: 0 auto;
    max-width: 75%;
	}
}

@media all and (max-width: 1250px) {
	.wrapper {
		padding:0 20px;
	}
	#logo {
		float: left;
		width: 300px;
	}
}

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

	#menu-button-container {
		display: block;
	}

	#header {
		height:80px;
	}

	#header.unstick {
		position: absolute;
	}

	button.menu-trigger {
		background: transparent;
		border: none;
		cursor: pointer;
		display: inline-block;
		height: 40px;
		overflow: hidden;
		/*outline: none;*/
		position: relative;
		text-indent: -900em;
		vertical-align: top;
		width: 40px;
	}

	button.menu-trigger span {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 5px;
		margin: 8px 0;
		background: #1c1c1c;
		display: block;
		opacity: 1;
		border-radius: 1px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: all .25s ease-in-out;
		-moz-transition: all .25s ease-in-out;
		-o-transition: all .25s ease-in-out;
		transition: all .25s ease-in-out;
	}

	button.menu-trigger.active span {
		background: #1c1c1c;
	}

	button.menu-trigger span:first-child {
		top: 0;
	}

	button.menu-trigger span:nth-child(2) {
		top: 12px;
	}

	button.menu-trigger span:nth-child(3) {
		top: 24px;
	}

	button.menu-trigger.active span:first-child {
		top: -3px;
		left: 8px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	button.menu-trigger.active span:nth-child(2) {
		opacity: 0;
		width: 0%;
	}

	button.menu-trigger.active span:nth-child(3) {
		top: 26px;
		left: 8px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	a.phone-trigger {
		background-color: transparent;
		background-image: url( ../images/phone-menu-icon.png );
		background-repeat: no-repeat;
		background-size: 23px auto;
		background-position: center;
		border: 0;
		cursor: pointer;
		display: inline-block;
		height: 44px;
		margin-right: 0px;
		outline: none;
		overflow: hidden;
		position: relative;
		text-indent: -900em;
		/*float: right;*/
		text-align: left;
		width: 44px;
	}

	#navigation {
		display: none;
		height: auto;
		left: 0;
		margin: 0px;
		padding: 0px;
		position: absolute;
		text-align: left;
		top: 80px;
		width: 100%;
		z-index: 9999;
	}

	#navigation.open {
		display: block;
	}

	/* nav resets */

	ul#menu {
		display: block;
		height: auto;
	}

	ul#menu ul li {
		padding: 0 0 0 15px;
	}

	ul#menu li,
	ul#menu li ul li,
	ul#menu li ul li ul li,
	ul#menu li ul li ul li ul li {
		display: block;
		float: none;
		height: auto;
		text-align: left;
		width: 100%;
	}

	ul#menu ul,
	ul#menu ul ul,
	ul#menu ul ul ul,
	ul#menu ul ul ul ul {
		display: block;
		left: auto;
		position: relative;
		width: 100%;
	}

	ul#menu li a,
	ul#menu li ul li a,
	ul#menu li ul li ul li a,
	ul#menu li ul li ul li ul li a {
		background-color: #fff; /*background color of menu */
		color: #1c1c1c;
		display: block;
		float: none;
		font-size: 12pt;
		height: auto;
		line-height: 1.1em;
		padding: 15px;
		text-transform: uppercase;
		border-bottom:0;
	}

	ul#menu li:hover ul ul,
	ul#menu li:hover ul ul ul,
	ul#menu li.iehover ul ul,
	ul#menu li.iehover ul ul ul {
		display: block;
	}

	ul#menu li a {
		padding: 15px;
	}

	/* okay, lets start styling roll overs */

	ul#menu li.has_submenu > a {
		background-image: url( ../images/mobile-arrow.svg );
		background-size: 20px auto;
		background-position: calc(100% - 10px) 50%;
		background-repeat: no-repeat;
	}

	ul#menu li.has_submenu > a:hover,
	ul#menu li.has_submenu.clicked_menu > a {
		background-image: url( ../images/mobile-arrow-hover.svg );
	}

	ul#menu ul.closed_menu {
		display: none !important;
	}

	ul#menu ul.open_menu {
		display: block !important;
	}

	ul#menu a {
		margin-top:0;
	}

	ul#menu a:hover,
	ul#menu li:hover a,
	ul#menu li.iehover a {
		color: #1c1c1c;
		padding: 15px 30px 15px 15px;
		border-bottom: 0 !important
	}

	/* 2nd Menu */
	ul#menu li:hover li a,
	ul#menu li.iehover li a {
		color: #1c1c1c;
		padding: 15px 30px 15px 15px;
		border-bottom: 0 !important;
	}

	/* 2nd Menu Hover Persistence */
	ul#menu li:hover li:hover,
	ul#menu li.iehover li.iehover {
		background-color: #fff;
		color: #1c1c1c;
		border-bottom: 0;
	}

	ul#menu li:hover li a:hover,
	ul#menu li:hover li:hover a,
	ul#menu li.iehover li a:hover,
	ul#menu li.iehover li.iehover a {
		color: #212121;
		border-bottom: 0;
	}

	/* 3rd Menu */
	ul#menu li:hover li:hover li a,
	ul#menu li.iehover li.iehover li a {
		color: #212121;
	}

	/* 3rd Menu Hover Persistence */
	ul#menu li:hover li:hover li a:hover,
	ul#menu li:hover li:hover li:hover a,
	ul#menu li.iehover li.iehover li a:hover,
	ul#menu li.iehover li.iehover li.iehover a {
		background-color: #fff;
		color: #1c1c1c;
	}

	/* 4th Menu */
	ul#menu li:hover li:hover li:hover li a,
	ul#menu li.iehover li.iehover li.iehover li a {
		color: #1c1c1c;
	}

	/* 4th Menu Hover */
	ul#menu li:hover li:hover li:hover li a:hover,
	ul#menu li.iehover li.iehover li.iehover li a:hover {
		background-color: #fff;
		color: #1c1c1c;
	}

	#content-container.inside {
		margin-top: 80px;
	}
	
	div.page-title {
    padding: 20px 0;
	}

	#contact .page-title-contact {
		display: none;
	}
	.portfolio-image {
    padding-bottom: 60.03%;
	}

	div.featured-portfolio-main-container {
    margin: 0px 10px;
	}

	.col-sm-6 .portfolio-image {
    padding-bottom: 60.03%;
	}

	.featured-portfolio-content-wrapper {
    width: 100%;
	}

	.featured-blog {
		margin-bottom:20px;
	}

	.featured-blog .heading.four {
		margin-top:10px;
	}

	div.slide-image-container {
		height:auto !important;
	}

	#slideshow-container {
		height:400px;
		margin-left:0px;
		margin-right:0px;
	}

	.wrapper.inside {
		margin:0;
		padding:0 40px;
	}

	#cta-container {
		margin:0;
	}

	#cta-container .wrapper.inside {
		max-width: 100%;
		padding: 0 40px;
	}

	.blog-main-container {
		padding: 20px 0 20px;
	}

	.featured-portfolio-buttons {
		margin: 20px auto 0px;
		text-align: center;
	}

	.col-sm-6.project-image-thumbnail:first-of-type, .col-sm-4.project-image-thumbnail:first-of-type {
    padding-left: 10px;
    padding-right: 10px;
	}
	.col-sm-6.project-image-thumbnail, .col-sm-4.project-image-thumbnail {
			padding-right: 10px;
			padding-left: 10px;
	}
	.project-image-thumbnail {
			margin-bottom: 0px;
	}

	#about img.right,
	#about img.left {
		float: none!important;
		margin-left: 0;
		margin-bottom: 1em;
		max-width: 100%;
		padding: 0px;
		/*width:100% !important;*/
	}

	.watermark {
		display: none;
	}

	fieldset {
		padding: 20px 40px 20px;
	}

	.services-header {
		margin: 40px;
	}

	.footer-item-container {
		margin-bottom: 20px;
	}
}

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

	img.left {
		margin: 0px 15px 15px 0px;
		max-width: 415px;
	}

	img.right {
		margin: 0px 0px 15px 15px;
		max-width: 415px;
	}

}

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

	body {
		font-size: 11pt;
	}

	h1,
	.heading.one {
		font-size: 240%;
	}

	h2,
	.heading.two {
		font-size: 180%;
	}

	h3,
	.heading.three {
		font-size: 150%;
	}

	h4,
	.heading.four {
		font-size: 130%;
	}

	h5,
	.heading.five {
		font-size: 110%;
	}

	/*--- HEADER ---*/

	#logo {
		float: left;
		width: 235px;
	}

	#logo img {
		padding: 20px 0;
	}

	div.page-title {
		display: block;
	}

	/*.page-title-contact a:first-of-type {
		padding-right:10px;
	}*/

	#home .wrapper.inside,  
	#home .wrapper {
		padding: 0 10px;
	}

	.wrapper.inside  {
		padding: 0 20px;
	}

	.page-title-contact {
		display: none;
	}
	
	div.page-title .heading.one,
	div.page-title h1{
		color: #1c1c1c;
		text-align: center;
		text-transform: uppercase;
		margin: 0;
		clear: both;
		position: relative;
	}

	div.page-title .heading.one hr,
	div.page-title h1 hr {
		margin:0 auto;
	}
	
	.page-title-contact {
		position: relative;
		text-align:center;
		margin-top:20px;
		right:0;
		bottom:0;
		clear: both
	}

	#about img.left {
		margin:0 0 1em;
	}

	#slideshow-container {
		width: 100%;
		margin-top: 100px;
		height: auto;
	}

	#slideshow > li {
		float: none!important;
	}

	div.slide-container {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}

	div.slide-text-container .slide-title-container {
		display: block;
		padding: 20px 20px;
	}

	div.slide-text-container,
	div.slide-image-container {
		display: block;
	}

	.slideshow-title,
	.slideshow-subtitle {
		font-size: 110%;
		letter-spacing: 6px;
		padding: 13px 24px;
		line-height: 1.0em;
		margin: 5px 0 5px 0px;
	}

	.slideshow-subtitle {
		border-right: 50px solid #f1cf1c;
		margin-left: 0px;
	}

	.slideshow-link {
		text-align: right;
		position: relative;
		padding: 0 0px;
	}

	.slideshow-link .btn {
		padding: 8px 24px;
	}

	.slideshow-link:after {
		width: 90%;
		left: 0;
		right: 0px;
	}

	#slideshow > li img {
		display: block;
	}

	.blog-entry-image {
		margin:10px 0 20px;
		text-align: center;
		display: block;
	}

	.blog-list-item-container {
		margin-bottom:10px;
	}

	.blog-main-container {
		padding: 0px 0 20px;
	}

	.blog-main-container h1.heading.two {
		margin: 0 10px
	}

	.featured-blog:first-of-type {
		margin-top:10px;
	}


	#home #cta-container .wrapper.inside {
		margin: 0 !important;
	}

	#cta-container {
		margin: 0px 0 0;
	}

	#cta-container .heading.one {
		text-align: center;
	}

	#cta-container p {
		text-align: center;
	}

	#cta-container p:last-of-type {
		margin-bottom:0;
	}

	div.navigation-container {
    margin: 0px auto 40px auto;
	}

	.team-member-container {
		margin: 10px 0;
		text-align: center;
	}

	.featured-portfolio-content h3 {
		margin: 20px 0 20px;
		max-width: 100%;
		height:100%;
		display: block;
		position: relative;
	}

	.featured-portfolio-content-container {
		height: 100%;
		overflow: visible;
		padding-bottom: 0;
		position: relative;
		display: block;
	}

	.featured-portfolio-content-wrapper {
		position: relative;
		width: 100%;
	}

	.featured-portfolio-content p {
		margin: 0 auto 20px;
		max-width: 50%;
	}

	.featured-portfolio-buttons {
		margin: 20px auto 30px;
		text-align: center;
	}

	#blog-feature-blog .heading.one,
	#blog-feature-blog h1 {
		padding: 0 20px;
	}

	.featured-blog {
		margin:20px 10px;
	}

	.featured-blog .heading.four {
		margin-top:10px;
		line-height: 1em;
	}

	/* Services */

	fieldset {
		padding:0px 20px 20px;
	}

	.services-header {
		margin: 20px 0 40px 0;
	}

	.service-text {
		line-height: 2em;
		margin-bottom:0em;
	}

	.summary-content-container fieldset {
    margin: 20px 0 0px;
	}

	.summary-content-container img {
		margin:0 0 20px; 
	}

	.service-links {
		margin:-10px 0 1.5em 0;
	}

	.footer-logo {
		max-width: 70%;
	}

	.footer-item-container {
		margin-bottom: 20px;
	}

	#portfolio .project-content-container fieldset {
    margin: 20px 0 0;
	}

	.services-header .title-container {
		display: block;
		padding-top: 0;
		width: 100%;
	}

	.services-header .description-container {
		display: block;
		padding-top: 0;
		width: 100%;
	}

	.services-header .description-container p {
		max-width: 100%;
		margin: 0;
		padding-left: 0px;

	}

	.services-header .description-container:before {
		position: absolute;
		content: none;
		height: 2px;
		background-color: #f1cf1c;
		width: 110%;
		/*margin-left: 15px;*/
		top: 5.5em;
		left: -200px;
		right: 40px;
	}

	.services-header h2 {
		-webkit-box-decoration-break: slice;
		box-decoration-break: slice;
		display: block;
		line-height: 1.1em;
		padding: 0;
		margin: 0 0 10px 0;
	}

}

/*
	###########
	Start iphone style
	###########
*/


@media all and (max-width: 480px) {
	#logo {
    float: left;
    width: 200px;
	}
}

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

	div#map {
		height: 150px;
		width: 100%;
	}
}