@font-face {
	font-family: "code-bold";
	src: url(../fonts/code-bold.otf)
}
@font-face {
	font-family: "code-light";
	src: url(../fonts/code-light.otf)
}
@font-face {
	font-family: "dancing-script";
	src: url(../fonts/dancing-script.otf)
}
@font-face {
	font-family: "OpenSans-Regular";
	src: url(../fonts/OpenSans-Regular.ttf)
}
h1 {
	font-family: "code-bold";
	text-transform: uppercase;
	font-size: 3.7em
}
h2 {
	font-family: "dancing-script";
	font-size: 2.2em;
	margin-bottom: -20px
}
h3 {
	font-family: "code-light";
	text-transform: uppercase;
	font-size: 2.8em;
	color: white
}
p {
	font-family: "OpenSans-Regular"
}
html body {
	background: url("../img/bg-byron2.jpg") no-repeat 50% -10%;
	background-color: #0c0b10
}

@media(min-width:768px) {
html body {
	background: url("../img/bg-byron2.jpg") no-repeat top center
}
}
html body .btn-primary.btn-nofill {
	background-color: transparent;
	border-width: 2px;
	margin-top: 30px;
	font-family: "dancing-script";
	font-size: 2em;
	color: #fff
}

html body .btn-primary.btn-filler {
	background-color: #000;
	border-width: 2px;
	margin-top: 20px;
	font-family: "dancing-script";
	font-size: 1.4em;
	color: #fff;
	border-color: #000;
}

html body .btn-primary.btn-filler:hover {
	background-color: #f6e128;
	border-color: #f6e128;
	color: #000;
}

html body .btn-primary.btn-nofill:hover {
	background-color: #f6e128;
	border-color: #f6e128;
	color: #000
}
html body.works {
	padding: 10px;
	background-image: none;
	background-color: #272725;
	text-align: center
}

@media(min-width:768px) {
html body.works {
	padding: 20px
}
}
html body.works .visit-website {
	margin-top: 30px
}
html body.works h2 {
	color: #000;
	margin-bottom: 40px;
	font-size: 3.5em
}

html body.works .works-container {
	background-color: white;
	width: 100%
}
html body.works .works-container .portfolio-close a {
	position: absolute;
	left: 30px;
	top: 30px;
	background: url("../img/portfolio-close.jpg") no-repeat;
	width: 72px;
	height: 72px
}

@media(min-width:768px) {
html body.works .works-container .portfolio-close a {
	top: 40px;
	left: 45px
}
}
html body.works .works-container .portfolio-nav a.portfolio-left-button {
	position: absolute;
	right: 112px;
	top: 30px;
	background: url("../img/portfolio-nav-left.jpg") no-repeat;
	width: 72px;
	height: 72px
}

@media(min-width:768px) {
html body.works .works-container .portfolio-nav a.portfolio-left-button {
	top: 40px;
	right: 127px
}
}
html body.works .works-container .portfolio-nav a.portfolio-right-button {
	position: absolute;
	right: 20px;
	top: 30px;
	background: url("../img/portfolio-nav-right.jpg") no-repeat;
	width: 72px;
	height: 72px
}

@media(min-width:768px) {
html body.works .works-container .portfolio-nav a.portfolio-right-button {
	top: 40px;
	right: 40px
}
}

html body.works .works-container .container img {
	width: auto !important;
}

html body.works .works-container .container {
	padding-top: 110px;
	padding-bottom: 110px;
	width: 90%;
	text-align: left;
}

@media(min-width:1200px) {
html body.works .works-container .container {
	width: 60%;
}
}


@media(min-width:768px) {
html body.works .works-container .container {
	padding-top: 180px
}
}
html body.works .works-container .container img {
	margin-top: 20px;
	margin-bottom: 20px
}
html .section1 {
	height: 580px;
	padding-top: 30px
}

@media(min-width:768px) {
html .section1 {
	height: 1100px
}
}
html .section1 .nav {
	margin: auto;
	position: absolute;
	left: 0;
	bottom: 3%;
	right: 0
}

@media(min-width:768px) {
html .section1 .nav {
	bottom: 20%
}
}
html .section1 .nav a i {
	font-size: 40px;
	color: #000
}
html .section1 .nav a i:hover {
	color: #cecece
}
html .section1 .nav a:hover {
	background-color: transparent
}
html .section1 ul {
	text-align: center;
	float: none
}
html .section1 ul li {
	float: none;
	text-align: center;
	display: inline-block;
	padding: 10px;
	padding-top: 0;
	padding-bottom: 0;
	text-transform: uppercase;
	font-weight: bold;
	font-size: .9em
}
html .section1 .content-container {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px
}

@media(min-width:768px) {
html .section1 .content-container {
	width: 550px;
	text-align: left
}
}

@media(min-width:992px) {
html .section1 .content-container {
	width: 720px;
	text-align: left
}
}

@media(min-width:768px) {
html .section1 .content-container {
	margin-top: 180px
}
}

@media(min-width:992px) {
html .section1 .content-container {
	margin-top: 180px
}
}

@media(min-width:768px) {
html .section1 .content-container .content-left {
	float: left
}
}
html .section1 .content-container .content-left img {
	max-width: 200px
}

@media(min-width:992px) {
html .section1 .content-container .content-left img {
	max-width: none
}
}
html .section1 .content-container .content-left .img-responsive {
	display: inline-block
}

@media(min-width:768px) {
html .section1 .content-container .content-left .img-responsive {
	display: block
}
}

@media(min-width:768px) {
html .section1 .content-container .content-right {
	float: right
}
}
html .section1 .content-container .content-right .text {
	position: relative;
	top: 10px
}

@media(min-width:768px) {
html .section1 .content-container .content-right .text {
	top: 53px
}
}

@media(min-width:992px) {
html .section1 .content-container .content-right .text {
	top: 68px
}
}
html .section1 .content-container .content-right h1 {
	font-size: 2.2em
}

@media(min-width:768px) {
html .section1 .content-container .content-right h1 {
	font-size: 2.7em
}
}

@media(min-width:992px) {
html .section1 .content-container .content-right h1 {
	font-size: 3.7em
}
}
html .section1 .content-container .content-right h2 {
	font-size: 1.8em
}

@media(min-width:768px) {
html .section1 .content-container .content-right h2 {
	font-size: 2.2em
}
}

@media(min-width:992px) {
html .section1 .content-container .content-right h2 {
	font-size: 2.2em
}
}
html .section2 {
	padding-bottom: 70px;
}
html .section2 p {
	color: #a19c9f
}
html .section2 h3 {
	padding-top: 70px
}

@media(min-width:992px) {
html .section2 h3 {
	margin-top: 0
}
}
html .section3 {
	background-color: #F5F5F5;
	padding-top: 70px;
	padding-bottom: 70px;
	text-align: center
}

html #casestudies {
	background-color: #fff;
	padding-top: 70px;
	padding-bottom: 70px;
	text-align: center
}

html .section3 h1, html .section3 h2, html .section3 h3 {
	color: black
}
html .section3 .image-grid {
	margin-top: 10px;

}
html .section3 .image-grid img {
	width: 100%
}
html .section3 .image-grid .view img {
	position: relative;
	z-index: 999
}
html .section3 .image-grid .view a {
	position: relative;
	z-index: 99999999
}
html .section3 .image-grid .view .mask {
	margin-top: 30px
}

@media(min-width:768px) {
html .section3 .image-grid .view .mask {
	margin-top: 30px
}
}

@media(min-width:992px) {
html .section3 .image-grid .view .mask {
	margin-top: 50px
}
}

@media(min-width:1200px) {
html .section3 .image-grid .view .mask {
	margin-top: 70px
}
}
html .section3 .image-grid .your-project {
	margin-top: 30px
}
html .section4 {
	background-color: #fff;
	background: url("../img/bg-map.jpg") top center;

	text-align: center
}
html .section4 h1, html .section4 h2, html .section4 h3 {
	color: black
}
html .section4 h3 {
	margin-top: 80px
}

@media(min-width:768px) {
html .section4 {
	text-align: left
}
}
html .section4 .contact-container {
	width: 100%;
	margin-left: auto;
	margin-right: auto
}

@media(min-width:768px) {
html .section4 .contact-container {
	width: 100%
}
}

@media(min-width:992px) {
html .section4 .contact-container {
	width: 80%
}
}
html .section4 .contact-container img {
	width: 100%
}

@media(min-width:768px) {
html .section4 .contact-container img {
	width: 90%
}
}

@media(min-width:992px) {
html .section4 .contact-container img {
	width: 90%
}
}
html .section4 .contact-container a {
	color: #333;
	font-family: OpenSans-Regular
}
html .section4 .contact-container i.icon-mobile-phone {
	font-size: 30px;
	position: relative;
	bottom: -5px
}
html .section4 .contact-container i.icon-envelope {
	font-size: 20px;
	position: relative;
	bottom: -4px
}
html .section4 .contact-container .text {
	margin-bottom: 70px
}

@media(min-width:768px) {
html .section4 .contact-container .text {
	margin-top: 80px;
	margin-bottom: 0
}
}

@media(min-width:992px) {
html .section4 .contact-container .text {
	margin-top: 80px;
	margin-bottom: 0
}
}

@media(min-width:1200px) {
html .section4 .contact-container .text {
	margin-top: 140px;
	margin-bottom: 0
}
}

.indented-box {
	padding-left: 20px;
	border-left: 7px solid #f2f2f2;
	margin-top: 25px !important;
	margin-bottom: 25px !important;
}

.case-study h4 {
	font-size: 26px;
	margin-top: 20px;
	border-bottom: 1px solid #cecece;
	padding-bottom: 8px;
	margin-bottom: 20px;
	margin-top: 60px;
}


.firstchildh5 {
	margin-top: 30px !important;
}

.case-study h5 {
	font-size: 20px;
	margin-top: 65px;
}

.case-study h6 {
	font-size: 15px;
	margin-top: 25px;
}

.key-findings-box {
	padding: 30px;
	padding-top: 25px;
	padding-bottom: 15px;
	margin-left: 0px;
	margin-top: 30px;
	margin-bottom: 45px;
	border-radius: 5px;
	background-color: #f2f2f2;
}

.key-findings-box h5 {
	margin-top: 0px;
	font-size: 16px;
}

.key-findings-box h6 {
	margin-top: 0px;
}



@media(min-width:1200px){
	.casestudycontainer {
		width: 75%;
	}
}

.casestudycontainer {
	margin-top: 30px;
	text-align: left;
	border-radius: 5px;
	display: inline-block;
	box-shadow: 0 0px 15px 0 rgba(0,0,0,.090), 0 1px 2px 0 rgba(0,0,0,.15);
}

@media(min-width:768px){
.casestudycontainer img {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
}

.casestudycontainer:hover {
	box-shadow: 0 4px 25px 0 rgba(0,0,0,.2), 0 0 1px 0 rgba(0,0,0,.25);
	cursor: pointer;
}


.casestudycontainer .col-xs-12 {
	padding: 0px;
}


.casestudytext {
	padding: 37px !important;
}

.casestudytext h4 {
	font-family: "OpenSans-Regular";
	font-size: 24px;
	margin: 0px;
	margin-bottom: 20px;
}

@media(max-width:768px){
.icon-angle-down {
	color: #fff !important;
}
}