<style type="text/css">
 /* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

html { height: 100%; }

body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
	background-color: #ced2d8;
}

h1, h3 {
	/*text-shadow:  0px 0px 0px 4px rgba(206, 210, 216, .8);*/
	position: relative;
	text-shadow:0px 0px 4px #ced2d8;
	margin-right: 10px;
	top: 30px;
}
h2 {
	position: relative;
	text-shadow:0px 0px 10px #020202;
	font-size:75px;
	font-family: 'Abel', sans-serif;
	color:white;
}
.darkPurple {
	background-color: #442056;
}
.lightPurple {
	background-color: #ac2286;
}
.mediumPurple {
	background-color: #59198a;
}
.darkRed {
	background-color: #552023;
}
.lightRed {
	background-color: #f85032;
}
.mediumRed {
	background-color: #8a1919;
}
.darkCyan {
	background-color: #045045;
}
.lightCyan {
	background-color: #4fa4b1;
}
.mediumCyan {
	background-color: #198a79;
}
.darkGreen {
	background-color: #2f5000;
}
.lightGreen {
	background-color: #a7cf78;
}
.mediumGreen {
	background-color: #5b8a19;
}
.more {
	text-align: vertical;
	top: 22px;
	position: relative;
	font-size: 70px;
	font-family: 'Abel', sans-serif;
	color: white;
}
.contact {
	position: relative;
	font-family: 'Myriad Pro';
	font-size:40px;
	font-weight: bolder;
	text-align: right;
	height:50px;
	top:-40px;
	text-shadow:0px 0px 4px #ced2d8; /*allows visibility against background images*/
	margin-right: 10px;
}
#header{
	text-align: right;
	font-size: 6.9vw;
	font-family: 'Raleway', sans-serif;
	white-space: nowrap;
}
.pushUp {
	position: relative;
	top:-20px;
}
.section {
	height: 140px;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size: calc(15vw + 2rem);
	text-align: right;
	background-color: black;
	width:100%;
}
.category {
	height: 140px;
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size: calc(15vw + 2rem);
	text-align: right;
	background-color: black;
	width: 100%;
}

span {
	display:inline;
	margin-left: 20px;
	margin-right: 10px;
}

img {
    max-width: 40%;
    height: auto;
}
a {
	position: relative;
	display:inline;
	color: black;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #1d3e5f;
}

.grow {
    transition: all 1s;
	transform: scale(1);
}
.grow:hover {
    transform: scale(1.1);
}
.overlap {
	z-index: 1;
	top: -400px;
}
.images {
	z-index: 1;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 2px;
	padding-right: 2px;
	height: calc(100% - 80px);
	width: calc(100% - 4px);
	text-align:center;
	overflow:hidden;
}
.galleryImage {
	position:relative;
	max-width:45%;
	object-fit: cover;
	height:100%;
	opacity: 1;
}

.highlightRed {
	width: 100%;
	height: 100%;
	position:relative;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8a1919+0,f85032+25,f85032+40,f6290c+72,f02f17+78,8a1919+100 */
	background: #8a1919; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #8a1919 0%, #f85032 25%, #f85032 40%, #f6290c 72%, #f02f17 78%, #8a1919 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #8a1919 0%,#f85032 25%,#f85032 40%,#f6290c 72%,#f02f17 78%,#8a1919 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #8a1919 0%,#f85032 25%,#f85032 40%,#f6290c 72%,#f02f17 78%,#8a1919 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a1919', endColorstr='#8a1919',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.highlightPurple {
	width: 100%;
	height: 100%;
	position:relative;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#59198a+0,ad1283+23,aa5091+40,ad1283+72,59198a+100 */
	background: #59198a; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #59198a 0%, #ad1283 23%, #aa5091 40%, #ad1283 72%, #59198a 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #59198a 0%,#ad1283 23%,#aa5091 40%,#ad1283 72%,#59198a 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #59198a 0%,#ad1283 23%,#aa5091 40%,#ad1283 72%,#59198a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59198a', endColorstr='#59198a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.highlightCyan {
	width: 100%;
	height: 100%;
	position:relative;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#198a79+0,4c9193+31,50aaba+72,4c9193+92,198a79+100 */
	background: #198a79; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #198a79 0%, #4c9193 31%, #50aaba 72%, #4c9193 92%, #198a79 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #198a79 0%,#4c9193 31%,#50aaba 72%,#4c9193 92%,#198a79 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #198a79 0%,#4c9193 31%,#50aaba 72%,#4c9193 92%,#198a79 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#198a79', endColorstr='#198a79',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.highlightGreen {
	width: 100%;
	height: 100%;
	position:relative;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5b8a19+6,76b76c+23,abd179+44,76b76c+79,5b8a19+100 */
	background: #5b8a19; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #5b8a19 6%, #76b76c 23%, #abd179 44%, #76b76c 79%, #5b8a19 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #5b8a19 6%,#76b76c 23%,#abd179 44%,#76b76c 79%,#5b8a19 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #5b8a19 6%,#76b76c 23%,#abd179 44%,#76b76c 79%,#5b8a19 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b8a19', endColorstr='#5b8a19',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

#designDesc {
	/*background-color: #891919;*/
}
.gallery {
	height: 400px;
	width: 100%;
}
.description {
	background-color: black;
	height: 40px;
	color: white;
	font-family: 'Abel', sans-serif;
	font-size: 22px;
	text-align: right;
	width: 100%;
}

.hugBottom span {
	position: absolute;
	bottom: 0;
	right: 0;
}

.space {
	margin-top:20px;
}

.menu, .chosenMenu{
	position:relative;
	text-align: center;
	float:left;
	font-size: 38px;
	font-family: 'Raleway', sans-serif;
	color: white;
}
.chosenMenu {
	height:100px;
}
#menuDiv {
	height: 50px;
	position: relative;
	top:12px;
	border-radius: 5px;
	background-color: #848484
}

.menu:hover {
	height:100px;
	/*-webkit-box-shadow: -16px -10px 7px 4px rgba(102,102,102,0.38);
	-moz-box-shadow: -16px -10px 7px 4px rgba(102,102,102,0.38);
	box-shadow: -16px -10px 7px 4px rgba(102,102,102,0.38);*/
}

#menuReturn:hover {
	background-color: #a84f00;
	color: white;
}
#menuDesign:hover {
	background-color: #8a1919;
	color: white;
}
#menuDevelop:hover {
	background-color: #59198a;
	color: white;
}
#menuBiz:hover {
	background-color: #198a79;
	color: white;
}
#menuAbout:hover {
	background-color: #5b8a19;
	color: white;
}
#menuSmall {
	height: 80px;
	position: relative;
	top:12px;
	border-radius: 5px;
	background-color: #2d2d2d;
	border-radius: 30px;
	text-align:center;
}
.icon {
	opacity: 0.7;
	position: relative;
	top: 6px;
	margin: 0 30px;
}
.icon:hover {
	opacity: 1;
	position: relative;
	top: 6px;
	margin: 0 30px;
}

.container {
	background-color: white;
	margin: 40px;
	float:left;
	padding: 0;
}
.container img {
	max-width: 100%;
	max-height: 100%;
	overflow:hidden;
	vertical-align: middle;
}
.small, .smallMedium, .medium{
	max-height: 300px;
	min-height: 300px;
	width: calc(100% - 80px);
	overflow:hidden;
}
.mediumBig {
	max-height: 100%;
	min-height: 300px;
	width: calc(100% - 80px);
	overflow:hidden;
	flex: 1;
}

.big{
	max-height: 100%;
	min-height: 300px;
	width: calc(100% - 80px);
	overflow:hidden;
	flex: 1;
}
.imgFill {
    object-fit: cover;
	min-height: 300px;
}

.details {
	margin: 40px;
	float:left;
}

.bigContainer {
	position: relative;
    width: 100%;
    margin: 0 auto;
	display: flex;
	flex-direction: column;
	text-align: center;
	top:-270px;
	background-color: #2d2d2d;
}
.block {
	display:inline-block;
	text-align: center;
	margin:0 auto;
	width: 100%;
	flex: 1;
	position: relative;
	z-index:1;
	background-color: #c0c1c2;
}
.blockBottom {
	height: 172px;
	border-radius: 30px;
	text-align:center;
	display:inline-block;
	margin:0 auto;
	position: relative;
	z-index:0;
	top: -86px;
	width: 100%;
	background-color:#848484;
}
ul li {
	text-align:left;
	font-size: 17px;
	list-style-type: none;
	position: relative;
	left: -20px;
	margin: 3px 0;
	color: black;
	background-color: #c5c5c5;
	padding: 5px;
	font-family: 'Josefin Sans', sans-serif;
}
.extendedContent {
	display:none;
}
.extendIcon {
	position:relative;
	top:95px;
	opacity: 0.5;
}
.extendIcon:hover {
	opacity: 1;
}
#backTitleImage {
	position: relative;
	height:100%;
	top:50px;
	min-width: 600px;
	max-width:100%;
}
#top {
	position: relative;
	background-repeat: no-repeat;
	background-size: auto 475px;
	top:-60px;
}
#mainList {
	position:relative;
	top:-300px;
}
@media only screen and (min-width: 480px) {
	/* Large Phones */
	
	#header {
		position:relative;
		text-align: right;
		font-size: 6.9vw;
		font-family: 'Raleway', sans-serif;
		white-space: nowrap;
	}
	#top {
		position: relative;
		background-repeat: no-repeat;
		background-size: auto 475px;
	}
	h2 {
		font-size:80px;
	}
}
.fader {
	width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
	background: rgba(206,210,216,0.5);
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
	.col-0 {width: 0%;}
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
	.col-20{width: 20%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
	
	[class*="col-"] {
		float: left;
	}
	
	.pushUp {
		position: relative;
		top: -50px;
	}
	#top {
		top: 0px;
	}
	h1, h3 {
		/*text-shadow:  0px 0px 0px 4px rgba(206, 210, 216, .8);*/
		text-shadow:0px 0px 4px #ced2d8;
		margin-right: 10px;
	}
	
	.section {
		background-color: black;
		height: 400px;
		color: white;
		font-family: 'Montserrat', sans-serif;
		font-size: 76px;
	}
	.noflip {
		-ms-transform: none !important; /* IE 9 */
		-webkit-transform: none !important; /* Chrome, Safari, Opera */
		transform: none !important;
		top: 0px !important;
		left: 0px !important;
		font-size: calc(15vw + 2rem) !important;
		font-family: 'Montserrat', sans-serif;
		text-align: center;
		display: block;
		width: 100%;
		color: white;
	}
	.flip {
		-ms-transform: rotate(-90deg); /* IE 9 */
		-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
		transform: rotate(-90deg);
		text-align: center;
		position: relative;
		font-family: 'Montserrat', sans-serif;
		font-size: 76px;
		color: white;
		width:400px;
		top:154px;
		left: -22vw;
	}
	.gallery {
		width: 83.33%;
		float: left;
	}
	.description {
		background-color: black;
		height: 40px;
		color: white;
		font-family: 'Abel', sans-serif;
		font-size: 3.3vw;
		float: left;
	}
	img {
		max-width: 60%;
		height: auto;
	}
	.title {
		background-color: black;
		/*padding-left: 100px;
		padding-right: 100px;*/
		text-align: center;
		font-family: 'Montserrat', sans-serif;
		font-size: calc(2.4vw + 56px);
		color: white;
	}
	.menu, .chosenMenu{
		float:left;
		font-size: 30px;
		font-family: 'Raleway', sans-serif;
	}
	#menuDiv {
		height: 50px;
		position: relative;
		top: 12px;
	}
	.small {
		width: calc(50% - 80px);
	}
	.smallMedium {
		width: calc(100% - 80px);
	}
	.details.small, .details.smallMedium {
		width: calc(100% - 80px);
	}
	#menuSmall {
		display:none;
	}
	.contact {
		position: relative;
		font-family: 'Myriad Pro';
		font-size:40px;
		font-weight: bolder;
		text-align: right;
		height:50px;
		margin-right: 10px;
	}
	.bigContainer {
		top:30px;
	}
	#mainList {
		top:-60px;
	}
	.galleryImage {
		position:relative;
		max-width:30%;
		object-fit: cover;
		height:100%;
		opacity: 1;
	}
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
	h2 {
		font-size:120px;
	}
	#header {
		position:relative;
		text-align: right;
		font-size: calc(2vw + 27px);
		font-family: 'Raleway', sans-serif;
		white-space: nowrap;
	}
	.pushUp {
		position: relative;
		top: -50px;
	}
	.flip {
		left: -12vw;
	}
	.block {
		width: 760px;
		max-height:100%;
		overflow-y: visible;
	}
	.blockBottom {
		width: 760px;
	}
	.medium, .mediumBig{
		width: 680px;
	}
	.small, .smallMedium {
		width: 300px;
	}
	.details.small {
		width: 300px;
	}
	.section {
		width: 200px;
	}
	.gallery {
		width: calc(100% - 200px);
	}
	.category {
		height: 400px;
		color: white;
		font-family: 'Montserrat', sans-serif;
		font-size: 76px;
	}
	.noflip {
		-ms-transform: rotate(-90deg); /* IE 9 */
		-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
		transform: rotate(-90deg);
	}
	.extendedContent {
		display:block;
	}
	.extendIcon {
		display: none;
	}
}
@media only screen and (min-width: 900px) {
	.menu, .chosenMenu{
		float:left;
		font-size: 38px;
		font-family: 'Raleway', sans-serif;
	}
	#menuDiv {
		height: 50px;
		position: relative;
		top:12px;
	}
	.section {
		width: 200px;
	}
	.gallery {
		width: calc(75% - 200px);
	}
	.description {
		width: 25%;
		height: 400px;
	}
	span {
		display:block;
	}
	.fader {
		background: rgba(206,210,216,0.25);
	}
}

@media only screen and (min-width: 1200px) {
	.flip {
		left: -5vw;
	}
	.big {
	width: calc(100% - 80px);
	overflow:hidden;
}
	.block {
		width: 1140px;
	}
	.blockBottom {
		width: 1140px;
	}
	.fader {
		background: rgba(206,210,216,0);
	}
}

