body {
	padding: 0;
	margin: 0;
	font-size: 16px;
	font-family: 'Open Sans Condensed', sans-serif;
	color: #ffffff;
}

h1 {
	margin: 0;
	font-family: 'Oswald', sans-serif;
}

h2 {
	font-family: 'Open Sans Condensed', sans-serif;
}

a {
	text-decoration: none;
	color: #ffffff;
}

p {
	font-weight: 300;
}


/************** HEADLINE ***************/
.headline {

}

.headline--medium {
	font-size: 2em;
	text-transform: uppercase;
}

.headline--larger {
	font-size: 4em;
 
    padding: 5px 40px;
    display: inline-block;
    text-transform: uppercase;
}

.headline--slightlylarge {
	font-size: 5em;
}

.headline--large {
	font-size: 6em;
	font-size: 13em;
    
    padding: 5px 40px;
    display: inline-block;
    text-transform: uppercase;
}

.headline--tagline {
	padding: 0;
	margin: 0;
	font-weight: 100;
	text-transform: uppercase;
}

.headline--box {
	background-color: #000000;
	text-transform: uppercase;
}

.headline--shadow {
	text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
}

.headline--dark {
	color: #000000;
}

/************** ITEM ***************/

.item {
	height: 300px;
	background-color: #dddddd;
	width: 100%;
	background-size: cover;
	position: relative;
	background-position: center;
}

.item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 20%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0+100 */
	background: -moz-linear-gradient(left,  rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}

.item::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 20%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.6+100 */
	background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=1 ); /* IE6-9 */

}

.item__text {
	text-align: center;
	max-width: 600px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	padding: 20% 0;

}

.item__text--end {
	text-align: center;
	max-width: 600px;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	padding: 10% 0;
}

.item__links {
	list-style: none;
    position: absolute;
    text-align: center;
    padding: 0;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 10%;
    font-size: 2em;
}

.item__info {
	text-align: left;
    padding: 0 15px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.item__info p:first-of-type {
	padding-top: 0;
	margin-top: 0;
}

.item--tall {
	height: 400px;
}

.item--short {
	height: 240px;
}

.item--modal {
	
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
   	left: 0;
   	background-size: cover;
	background-position: center;
}

.item--show {
	display: block;
}

.item--abouttext {
	max-width: 900px;
	padding: 50px 0;
}

.item--about::after {
	display: none;
}

.item--about::before {
	display: none;
}


.item--about-text {
    padding: 0;
    max-width: 100%;
    bottom: 10%;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
}

.item--about-text .item__info {
	margin-right: 25px;
	max-width: 450px;
}

.item--contact-text {
	font-size: 2em;
    line-height: 2em;
}

.item--header {
	padding: 0;
	max-width: 100%;
	top: 50%;
	transform: translateY(-45%);
	-webkit-transform: translateY(-45%);
	-moz-transform: translateY(-45%);
	-ms-transform: translateY(-45%);
}


/************** CONACT **************/

.contact-list {
	list-style: none;
	padding: 0;
	margin-top: 0;
}

.contact-list strong {
	text-transform: uppercase;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.contact-list li {
	line-height: 1.2em;
	padding: 0 0px;
}

/************** GRAPHICAL ELEMENTS ***************/
.arrow {
	position: relative;
	height: 200px;
}

.arrow::after {
	content: '';
	bottom: 0;
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 17px 10px 0 10px;
	border-color: #ffffff transparent transparent transparent;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

.arrow::before {
	content: '';
	position: absolute;
	height: 100%;
	border-left: 1px solid #ffffff;
}

.arrow-single {
	height: 30px;
}

.arrow-single::after {
	content: '';
	bottom: 0;
	position: absolute;
	width: 0;
	height: 0;
	left: 0;
	right: 0;
	margin: auto;
	border-style: solid;
	border-width: 17px 10px 0 10px;
	border-color: #ffffff transparent transparent transparent;
	
}

.item__back {
	padding: 10px;
	text-transform: uppercase;
    font-weight: bold;
    font-size: 1.4em;
    display: block;
}

.item__back span {
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 20px 10px 0;
	border-color: transparent #ffffff transparent transparent;
	position: relative;
    top: 2px;
}

.vimeolink img {
	width: 30px;
}



/************** UTILS ***************/

.vspace-m-top {
	padding-top: 15px;
}

.vspace-l-top {
	padding-top: 30px;
}

.vspace-m-bottom {
	padding-bottom: 15px;
}

.vspace-l-bottom {
	padding-bottom: 30px;
}



/************** MEDIA QUERIES **************/
@media (max-width: 760px) {
	.headline--larger {
		font-size: 2em;
	}

 	.headline--large {
		font-size: 4em;
	}

	.item::after,
	.item::before {
		display: none;
	}

	.item--tall {
		height: auto;
		min-height: 400px;
	}
/*
	.item--about {
		position: relative;
		display: block;
	}
*/
	.item__info {
		text-align: left;
		 -webkit-column-count: 1; /* Chrome, Safari, Opera */
	    -moz-column-count: 1; /* Firefox */
	    column-count: 1;
	    padding: 15px 15px;
	}

	.contact-list {
		margin-bottom: 0;
	}
}


}