@keyframes bgAnimatedFadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
 /* Define mobile styles */
@media only screen {
	html, body {
		font-family: 'Open Sans', sans-serif;
		overflow-x: hidden;
	}
	
	h1, h2, h3, h4, h5, h6 {
	  font-weight: 100;
	} 
	h1 {
	  font-size: 1.4rem; 
	}
	h2 {
	  font-size: 1.3875rem; 
	}
	h3 {
	  font-size: 1.175rem; 
	}
	h4 {
	  font-size: 1rem; 
	}
	h5 {
	  font-size: 0.925rem; 
	}
	h6 {
	  font-size: 0.5rem; 
	}
	p {
		color: #222222;
	}
	.breadcrumbs > * {
	    float: none;
	}	
	.row.full {
		 width: 100%;
		  margin-left: 0;
		  margin-right: 0;
		  max-width: 100%;
	}
	header.bg {
		background: url(../img/bg_01.jpg) no-repeat;
		background-size: cover;
		width: 100%;
		height: auto;
	}		
	.contain-to-grid {
		background: transparent;
	}
	.top-bar {
	    background: none repeat scroll 0 0 transparent;
	    overflow: visible;
	    padding-top: 10px;
	    z-index: 10;
	}	
	.top-bar-section ul {
		width: auto;
	}
	.top-bar-section ul li {
	    background: none repeat scroll 0 0 #fff;
	    float: left;
	}	
	.top-bar-section ul li > a {
	    color: #000;
	    display: block;
	    font-family: 'Open Sans', sans-serif;
	    font-size: 0.8125rem;
	    font-weight: normal;
	    padding: 12px 0 12px 15px;
	    text-transform: none;
	    width: 100%;
	}	
	.top-bar-section ul.right li.active:not(.has-form) a:not(.button),
	.top-bar-section ul.right li.active:not(.has-form) a:hover:not(.button),
	.top-bar-section ul.right li:not(.has-form) a:hover:not(.button) {
		background: transparent;
		color: #9C9C9C;
	}		
	.top-bar-section li:not(.has-form) a:not(.button) {
		background: #fff;
	}	
	.top-bar-section li:not(.has-form) a:not(.button) {
	    background: none repeat scroll 0 0 transparent;
	    line-height: 45px;
	    padding: 0 5px;
	}	
	.top-bar-section ul.right {

	}
	.top-bar-section ul.right li a:after {
		content: "/";
		padding-left: 5px;
		color: #000;
	}	
	.top-bar-section ul.right li:last-child a:after {
		content: "";
	}		
	.top-bar-section li.active:not(.has-form) a:not(.button) {	    
	    padding: 0;
	}	
	.top-bar-section li:not(.has-form) a:not(.button),
	.top-bar-section li.active:not(.has-form) a:not(.button) {
		line-height: 20px;
	}
	.top-bar-section ul li {
	    background: transparent;
	}	
	.top-bar-section ul.left li:not(.has-form) a.fb-icon:not(.button),
	.top-bar-section ul.left li:not(.has-form) a.fb-icon:hover:not(.button) {
		background: transparent url(../img/icon_fb.png) no-repeat;
		width: 27px;
		height: 27px;
	}			
	.top-bar-section ul.left li:not(.has-form) a.insta-icon:not(.button),
	.top-bar-section ul.left li:not(.has-form) a.insta-icon:hover:not(.button) {
		background: transparent url(../img/icon_insta.png) no-repeat;
		width: 27px;
		height: 27px;
	}				
	.top-bar ul.left li a.fb-icon span,
	.top-bar ul.left li a.insta-icon span {
		visibility: hidden;
	}	

	h1.front-title {
		font-family: 'Lobster', cursive;
		font-size: 2.7rem;
		text-align: right;
		width: 100%;
	}	
	h2.front-title {
		font-family: 'Lobster', cursive;
		font-size: 2.7rem;
		text-align: center;
		width: 100%;	
	}
	h2.front-subtitle {
	    font-family: 'Open Sans', sans-serif;
		font-size: 0.9rem;
		text-align: right;
		margin-right: 65px;
		margin-top: -15px;
		width: 100%;
	}	
	h4.subtitle {
	    text-align: center;
	    font-family: "Open Sans",sans-serif;
	    font-size: 13px;
	    line-height: 1;
	    margin: 0;
	    padding-left: 80px;
	    position: relative;
	    top: -17px;
	}		
	.content {
	/* 	margin-top: 100px; */
	}
	.content .item { 
		float: left;
		width: auto;
	}	
	.content .item label {
	    font-family: 'Open Sans', sans-serif;
	    font-size: 15px;
		display: inline;
		vertical-align: bottom;
	}
	.content .row .columns {
		padding-bottom: 15px;	
	}
	.content header {
		margin-left: 15px;
		margin-bottom: 30px;		
	}
	.content header h1 {
		font-family: 'Open Sans', sans-serif;
		font-size: 17px;
		color: #1A1918;
	}
	.breadcrumbs {
		font-family: 'Open Sans', sans-serif;
		background: none;
		border: none;
		text-transform: uppercase;
	}
	.breadcrumbs > * a {
		color: #9C9C9C;
		font-size: 18px;
	}
	.breadcrumbs > *:before {
	    color: #9C9C9C;
	    content: "/";
	    margin: 0 0.75rem;
	    position: relative;
	    top: 1px;
	    font-size: 18px;
	}	
	.breadcrumbs > li.text-normalize {
		text-transform: none;
	}
	.side-nav {
		font-family: 'Open Sans', sans-serif;
		padding: 0;
		margin: 0;
	}
	.side-nav li a {
		font-size: 16px;
	}	
	.side-nav li a:hover:not(.button),
	.side-nav li a:focus:not(.button) {
		background: none;
		color: #020204;
		text-decoration: underline;
	}
	.side-nav li.active > a:first-child:not(.button) {
		color: #020204;
	}
	.side-nav li a:not(.button) {
	    color: #020204;
	    display: block;
	    margin: 0;
	    padding: 0.4375rem 0;
	}	
	.side-nav li a dfn ul li {
		list-style-type: lower-alpha;
	}
	#animated-background {
		display: none;
	}
	.underlined {
		border-bottom: 1px solid #9c9c9c;
		width: 200%;
		margin-bottom: 25px;
	}
	.breadcrumbs {
		padding: 40px 0 0 0;
	}
	.nopadding {
		padding: 0;
	}
	#about-page {	
		color: #1A1918;
	}	
	#about-page .about h2.front-title {
		font-family: 'Lobster', cursive;
		padding-left: 35px;
		text-align: left;
		font-size: 3rem;
		width: 100%;		
	}	
	#about-page header.about-header {
		margin-bottom: 0;
		padding-bottom: 0;
	}
	#about-page header.about-header h3 {
		font-family: 'Lobster', cursive;
		font-size: 1.5rem;
		text-align: left;
		width: 100%;		
	}
	#about-page header.about-header h3.muli {
		font-family: 'Open Sans', sans-serif;
		font-size: 1.3rem;
	}	
	#about-page figure {
		margin-left: 13px;
		margin-top: 0;
		padding-top: 0;
	}
	#about-page figure blockquote,
	#about-page figure p {
		margin: 0;
		padding: 0;
		border: 0;
		color: #1A1918;
		font-size: 11px;
	}
	#about-page figure blockquote {
		font-size: 13px;
	}		
	#about-page figure p em {
		font-style: normal;
		letter-spacing: 3px;
	}	
	#about-page article {
		margin-bottom: 40px;
		clear: both;
	}
	#about-page article figcaption {
		text-align: right;
		font-size: 11px;
		margin-top: 15px;
	}
	#about-page .about-bounded-right {
		max-width: 400px;
	}
	#about-page .about-right {
	    background-attachment: scroll;
		background-size: contain;
	    background-clip: border-box;
	    background-color: transparent;
	    background-image: url(../img/red-splash.png);
	    background-origin: padding-box;
	    background-position: -10px 300px;
	    background-repeat: no-repeat;
	    min-height: 600px;
	    overflow: visible;
	}
	#about-page .breadcrumbs,
	#contact-page .breadcrumbs {
	    float: right;
	    margin-top: 0;
	    padding-top: 0;
	    position: relative;
	    top: -27px;
	}	
	#about-page .breadcrumbs li a,
	#contact-page .breadcrumbs li a {
		font-size: 15px;
	}
	#about-page .about,
	#contact-page .about {
		margin-bottom: 0;
		padding-bottom: 0;
	}	
	#about-page .about hr,
	#contact-page hr.bottom-line {
		width: 400%;
		left: 40px;
		position: relative;
		overflow: hidden;
		border-color: #000;
		top: -20px;		
	}
	#gallery-page .gallery-desc {
		text-align: right;
		margin-top: 10px;
	}
	#gallery-page .gallery-desc header {
		margin: 0;
		padding: 0;
	}	
	#gallery-page .gallery-desc header h4 {
		font-family: 'Open Sans', sans-serif;
		font-size: 20px;
		color: #1A1918;
		padding: 0;
		margin: 0;
	}
	#gallery-page .gallery-desc p {
		font-family: 'Open Sans', sans-serif;
		font-size: 12px;		
		margin: 0;
		padding: 0;
		color: #1A1918;
	}	
	#gallery-page .clearing-thumbs li {
		margin: 0px 0px 10px 10px;
		float: right;
	}
	
	#offer-project li .subnav-desc {
		font-style: normal;
		padding: 25px 50px;
	}
	#offer-project li .subnav-desc > ul > li {
		margin-bottom: 0;
	}
	#subnav-text-container {
		min-height: 300px;
		font-size: 14px;
	}
	#subnav-text-container.subnav-desc {
		padding: 25px 100px;		
	}
	.fade-in {
		border: 0;
		opacity: 0;
		animation: fadeIn ease-in-out 1;
		-moz-animation: fadeIn ease-in-out 1;

		/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
		-webkit-animation-fill-mode:forwards;  	
		-moz-animation-fill-mode:forwards;
		animation-fill-mode: ;
		
		-webkit-animation-duration: 0.5s;
		-moz-animation-duration: 0.5s;
		animation-duration: 0.5s;
	}	
	#subnav-text-container ul li {
		font-size: 14px;			
	}
	#offer-project li:nth-child(n) .subnav-desc,
	#subnav-text-container.sd-0 {
		background: url(../img/splash-1.png) no-repeat scroll 0 0 / cover  transparent;
		background-size: 100% 100%;
	}
	#offer-project li:nth-child(2n) .subnav-desc,
	#subnav-text-container.sd-1	 {
		background: url(../img/splash-2.png) no-repeat scroll 0 0 / cover  transparent;
		background-size: 100% 100%;		
	}
	#offer-project li:nth-child(3n) .subnav-desc,
	#subnav-text-container.sd-2	 {
		background: url(../img/splash-3.png) no-repeat scroll 0 0 / cover  transparent;
		background-size: 100% 100%;		
	}
	#offer-project li:nth-child(4n) .subnav-desc,
	#subnav-text-container.sd-3	 {
		background: url(../img/splash-4.png) no-repeat scroll 0 0 / cover  transparent;
		background-size: 100% 100%;		
	}	
	#offer-project li:nth-child(5n) .subnav-desc,
	#subnav-text-container.sd-4	 {
		background: url(../img/splash-5.jpg) no-repeat scroll 0 0 / cover  transparent;
		background-size: 100% 100%;		
	}		

	/* 	contact page details */
	#contact-page {
		background: url("../img/red-splash.png") no-repeat scroll 0 0 / contain transparent;
	    height: 100%;
	    max-height: 500px;
	}
	.in-progress {
		background: url("../img/bg-red.jpg") no-repeat scroll 0 -100px / contain transparent !important;		
	    height: 100%;
	    max-height: 500px;
	}
	.in-progress .contact-top {
		margin-bottom: 45px;
	}

	#contact-page .contact-left {
		padding-bottom: 0;
		margin-top: 0;
		text-align: center;
	}		
	#contact-page .contact-top .columns {
		padding-bottom: 0;
		max-height: 90px;
	}
	#contact-page .contact-right .contact-form {
		padding: 0;
		margin: 0;
		line-height: 0;
	}
	#contact-page .contact-right .contact-form p label {
		color: #68686E;
		font-family: 'Open Sans', sans-serif;
	}	
	#contact-page .contact-right .contact-form p input,
	#contact-page .contact-right .contact-form p textarea {
		border-radius: 4px;	
	} 	
	#contact-page .contact-right .contact-form p input[type="submit"] {
		color: #68686E;
		border: 1px solid #ccc;
		background: white;
		padding: 5px;
		cursor: pointer;
		font-size: 13px;
	}	
	#contact-page .contact-right .contact-header {
		margin: 0 0 15px 0;
		padding: 0;
	}
	#contact-page header.contact-header {
		margin: 30px 0 0 0;
	}
	#contact-page header.contact-header h3 {
		font-family: 'Lobster', cursive;
		font-size: 1.5rem;
		text-align: center;
		width: 100%;			
		padding: 0;
		margin: 0;
	}
	#contact-page aside.contact-side p,
	#contact-page aside.contact-side a {
		margin: 0;
		padding: 0;
		color: #1A1918;
		font-size: 14px;
	}	
	#contact-page aside.contact-side a:hover {
		text-decoration: underline;
	}
	#contact-page aside.contact-side:last-child {
		margin-bottom: 40px;
	}	
	
	/* 	blog styles */
	#blog .post-entry {
		border-left: 1px solid #222;
		margin-bottom: 100px;
	}
	#blog .post-entry .post-meta {
		margin: 0;
	}	
	#blog .post-entry .post-meta .post-date {
		font-family: 'Open Sans', sans-serif;
		font-weight: 100;
		font-size: 14px;
		margin: 0 0 25px 0;
		padding: 0;
		color: #222;
	}
	#blog .post-entry .post-meta .post-title {
		font-family: 'Lobster';
		font-size: 28px;
		margin-bottom: 15px;
	}
	#blog .post-entry p {
		font-size: 12px;
	}
	#blog .post-entry a.read-more,
	#blog .post-entry a.see-more {
		font-family: 'Lobster';
		color: #222;
		float: right;	
		clear: both;	
	}
	#blog .post-entry a.see-more {
		float: none;
		text-align: center;
		display: block;
		padding-left: 40px;
		padding-top: 40px;
	}	
	#blog .post-entry a.read-more:hover,
	#blog .post-entry a.see-more:hover {
		text-decoration: underline;
	}	

	#blog .post-entry ul.polaroids {
		list-style: none;
		padding-top: 60px;
	}
	#blog .post-entry ul.polaroids li {
		float: left;
	}	
	#blog .post-entry ul.polaroids a:after {
	  content: attr(title);
	  display: block;
	  padding-top: 10px;
	}	
	/* By default, we tilt all our images -2 degrees */
	#blog .post-entry ul.polaroids a {
		background: none repeat scroll 0 0 #DDDDE4;
	    color: #333;
	    display: block;
	    float: left;
	    font-family: "Lobster";
	    font-size: 14px;
	    margin: 0;
	    padding: 8px 8px 10px;
	    text-align: center;
	    text-decoration: none;
	    transform: rotate(-20deg);
	    width: auto;	
	    box-shadow: inset 3px -4px 10px -6px black
	}
	#blog .post-entry ul.polaroids a img {
		border: 1px solid #222;
	}
	#blog .post-entry ul.polaroids li:nth-child(1) {
		position: relative;
		left: 40px;
	}		
	#blog .post-entry ul.polaroids li:nth-child(2) {
		position: relative;
		left: 20px;	
		bottom: 10px;
		z-index: 10;
	}
	#blog .post-entry ul.polaroids li:nth-child(2) a {
		-webkit-transform: none;
		-moz-transform: none;
		transform: none;
	}
	#blog .post-entry ul.polaroids li:nth-child(3) a {
		-webkit-transform: rotate(20deg);
		-moz-transform: rotate(20deg);
		transform: rotate(20deg);		
		position: relative;
		top: 10px;
	}	
}

/* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) {
	h1.front-title {
		font-family: 'Lobster', cursive;
		font-size: 6.0rem;
		text-align: right;
	}
	h2.front-subtitle {
	    font-family: 'Open Sans',sans-serif;
	    font-size: 1.4rem;
	    margin-top: -30px;
	    margin-right: 35px;
	    text-align: right;
	}	
	h4.subtitle {
	    float: left;
	    font-family: "Open Sans",sans-serif;
	    font-size: 16px;
	    line-height: 1;
	    margin: 0;
	    padding-left: 137px;
	    position: relative;
	    top: -17px;
	}	
	.breadcrumbs {
		padding-top: 90px;		
	}
	.breadcrumbs > * {
	    float: left;
	    line-height: 1rem;
	}	
	.content .item label {
	    font-family: 'Open Sans', sans-serif;
	    font-size: 15px;
		display: block;
		vertical-align: bottom;
		opacity: 0;
		-moz-opacity: 0;
		-webkit-opacity: 0;
	    transition: opacity .55s ease-in-out;
	    -moz-transition: opacity .55s ease-in-out;
	    -webkit-transition: opacity .55s ease-in-out;	
	    max-width: 110px;		
	}
	#front-page.content .item label {
		max-width: 132px;
	}
	.content .item {
		position: relative;
	}
	.content .item img {
		border: 0;
		opacity: 0.5;
		-moz-opacity: 0.5;
		-webkit-opacity: 0.5;
		filter: alpha(opacity=50);
	    transition: opacity 1s ease-in-out;
	    -moz-transition: opacity 1s ease-in-out;
	    -webkit-transition: opacity 1s ease-in-out;		
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		transform: rotate(0);	    	    		
	}
	.content .item:hover label {
		display: block;
		opacity: 1;
		-moz-opacity: 1;
		-webkit-opacity: 1;
		transition: opacity .55s ease-in-out;
		-moz-transition: opacity .55s ease-in-out;
		-webkit-transition: opacity .55s ease-in-out;
	}
	.content .item:hover img {
		border: 0;
		visibility: visible;
		opacity: 1;
		-moz-opacity: 1;
		-webkit-opacity: 1;
		transition: opacity .55s ease-in-out;
		-moz-transition: opacity .55s ease-in-out;
		-webkit-transition: opacity .55s ease-in-out;	

	}	
	.content .row .columns {
		padding-bottom: 0px;	
	}	
	hr.bottom-line {
		position: relative;
		left: 300px;
		overflow: hidden;
		border-color: #000;
		top: -20px;
	}
	hr.full-line {
		position: static;
		clear: none;
		display: block;
		overflow: hidden;
		border-color: #000;
		width: 100%;
		margin-top: 20px;
		padding: 0;		
	}	
	#animated-background img:nth-of-type(1) {
		animation-delay: 6s;
		right: 15%;
	    position: absolute;
	    top: -60px;
	}
	#animated-background img:nth-of-type(2) {
		left: 20%;
	    position: absolute;
	    top: -30px;
	    animation-delay: 4s;
	}
	#animated-background img:nth-of-type(3) {
		left: 15%;
	    position: absolute;
	    top: -100px;
	    animation-delay: 2s;
	}
	#animated-background img:nth-of-type(4) {
	  	animation-delay: 0;
		right: 15%;
	    position: absolute;
	    top: -60px;
	}	
	#animated-background {
		display: block;	
	    margin: 0 auto;
	    position: absolute;
	    top: -50px;
	    width: 100%;
	    height: auto;
	}
	#animated-background img {
	    animation-duration: 8s;
	    animation-iteration-count: infinite;
	    animation-name: bgAnimatedFadeInOut;
	    animation-timing-function: ease-in-out;
	    z-index: 0;
	}
	#animated-background img {
		opacity: 0;
	    position: absolute;
	    border: 0 none;
	    height: auto;
	    max-width: 100%;
	    vertical-align: middle;
	}	
	
	#about-page .about h2.front-title,
	#contact-page h2.front-title {
		font-family: 'Lobster', cursive;
		font-size: 3.3rem;
		padding-left: 35px;
		text-align: left;
		width: 100%;		
	}		
	#about-page .about-bounded-right {
		max-width: 600px;
	}	
	#about-page {
	    background: url("../img/about-bg_01.jpg") no-repeat scroll 0 0 / contain transparent;
	    height: 100%;
	    min-height: 700px;
	}
	#about-page article {
		margin-bottom: 40px;
		clear: both;
		padding-left: 30px;
	}
	#about-page figure blockquote,
	#about-page figure p {
		margin: 0;
		padding: 0;
		border: 0;
		color: #1A1918;
		font-size: 13px;
	}	
	#about-page .about-right {
	    background-attachment: scroll;
		background-size: contain;
	    background-clip: border-box;
	    background-color: transparent;
	    background-image: url(../img/red-splash.png);
	    background-origin: padding-box;
	    background-position: -10px 300px;
	    background-repeat: no-repeat;
	    min-height: 700px;
	    overflow: visible;
	}	
	#contact-page .contact-left {
		text-align: left;
	}
	#contact-page header.contact-header h3 {
		text-align: left;
	}	
	#contact-page .contact-top .columns {
		padding-bottom: 0;
		max-height: none;
	}	
}

/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) { 
	h1.front-title {
		font-family: 'Lobster', cursive;
		font-size: 12rem;
		text-align: center;
	}
	h2.front-subtitle {
		font-family: 'Open Sans', sans-serif;
		font-size: 1.6rem;
		font-weight: lighter;
		text-align: right;
		color: #1A1918;
		padding-right: 40px;
		margin-top: -40px;
	}		
	h2.front-title {	
		font-family: 'Lobster', cursive;	
		font-size: 5rem;
		text-align: center;
	}
	h4.subtitle {
	    float: left;
	    font-family: "Open Sans",sans-serif;
	    font-size: 20px;
	    line-height: 1;
	    margin: 0;
	    padding-left: 225px;
	    position: relative;
	    top: -25px;
	}	
	#about-page .about h2.front-title,
	#contact-page h2.front-title {
		font-size: 5rem;
	}			
}