@font-face {
    font-family: helveticaNeu; 
    src: url("fonts/HelveticaNeue.ttf"); 
}

@font-face {
    font-family: helveticaNeuLight; 
    src: url(fonts/HelveticaNeue-UltraLight.ttf); 
}

body {
	margin: 0;
	font-family: helveticaNeuLight, "helveticaNeu", "HelveticaNeue-Light", "Helvetica Neue Light", sans-serif; 
	width: 100vw;
}

header {
	padding-top: 2vh;
	max-height: 23vh;
	width: 100vw;
}

#img-container {
	width: 100vw;
	height: 100vh;
}

#img-container a{
	width: 100%;
	height: 100%;
}

#brand-img {
	width: 55vw;
	margin: 5vh 22.5vw 2vh 22.5vw;
    border-radius: 2px;
}

#brand-typo {
	width: 20vw;
	margin: 2vh 40vw;
	background: rgba(255, 255, 255, 0.5);
}

/*
.box-shadow {
	-webkit-box-shadow: -1px 3px 5px -1px rgba(0,0,0,0.28);
	-moz-box-shadow: -1px 3px 5px -1px rgba(0,0,0,0.28);
	box-shadow: -1px 3px 5px -1px rgba(0,0,0,0.28);
}
*/

.topNav {
	width: 50vw;
	max-width: 450px;
	display: block;
	margin:auto;
	height: 5vh;
	padding: 1vh 0 0 0;
}

.topNav li {
	height: 100%;
	list-style: none;
	float: left;
}

.topNav li a{
	display: block;
	width: 100%;
	height: 100%;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	color: #000000;
	text-decoration: none;
	text-align: center;
}

.selected {
	color: #ff4d4d !important;
	/*
	background: rgba(255,77,77,0.5);
	border-bottom: 1px solid rgba(230,230,230,1);
	-webkit-box-shadow: -1px 1px 2px -1px rgba(220,220,220,0.3);
	-moz-box-shadow: -1px 1px 2px -1px rgba(220,220,220,0.3);
	box-shadow: -1px 1px 2px -1px rgba(220,220,220,0.3);
	*/
}

.topNav li.sports {
	text-align: left;
	width: 12%;
}

.topNav li.sports a {
	text-align: left;
}

.topNav li.contact{
	text-align: right;
	width: 12%;
}

.topNav li.contact a{
	text-align: right;
}

.people {
	width: 15%;
}

.travel {
	width: 15%;
}

.stills {
	width: 14%;
}

.berlinRandoms {
	width: 32%;
}

#brand {
	width: 50vw;
	max-width: 450px;
	display: block;
	margin: auto;
	max-height: 15vh;
}

#brand:hover{
	cursor: pointer;
}

#slider-container {
	width: 100vw;
	height: 70vh;
	border: none;
	margin-top: 2vh;
}

.main-content-container {
	width: 100%;
}

.slider-item {
	margin: 5px;
}

.slider-item img{
	max-width: 100vw;
	max-height: 70vh;
	border-radius: 1px;
}

 .mobile {
  display: none;
  width: 100%;
  top: 0;
}

.mobile-header-row {
	height: 10vh;
}

.mobile ul {
    display: none;
}

.moblie img {
	display: block;
}

.menu-container {
	padding: 0% !important;
	width: 30vw;
	float: left;
}

.mobile button {
    border: 0;
    text-indent: 200%;
    overflow: hidden;
    background: rgba(255,255,255,.8) url(http://i.imgur.com/vKRaKDX.png) center no-repeat;
    /*background: rgba(255,255,255,.8) url(img/burger_menu.png) center no-repeat;*/
    background-size: 80%;
    width: auto;
    height: 7vh;
    outline: none;
    transition: all 400ms ease;
    &.expanded
      transform: rotate(90deg);
      background-color: transparent;
      border: 0;
}

.mobile-header-container {
	height: 10vh;
}

.mobile-brand-container {
	width: 70vw;
	float: left;
}

.toggle-container {
	height: 100%;
	width: 30vw;
	float: left;
}

#mobile-nav-container {
	display: none;
	position: absolute;
	padding: 0;
	z-index: 1;
}

#mobile-nav-container a {
    display: block;
    width: 100vw;
    text-decoration: none;
    text-align: center;
    font-family: 'Lato', sans-serif;
	color: #000000;
	background: #fdfdfa;
	border-bottom: 1px solid rgba(240,240,240,0.4);
	padding: 1vh 0;
}

#toggle {
	height: 100%;
	margin-left: 50%;
}

#toggle img {
	max-width: 40%;
	max-height: 100%;
}

.contact-container {
	width: 100vw;
}

.contact-info, .clients-container, .urheberrecht, .datenschutz, .haftungFuerInhalte, .impressums-container {
	margin-top: 7vh;
	width: 35vw;
	margin-left: 32.5vw;
	text-align: left;
	font-size: 18px;
}

.datenschutz {
	margin-bottom: 5vh;
}

.from {
	width: 35vw;
	margin-left: 32.5vw;
	margin-bottom: 10vh;
}

.from p {
	width: 100%;
	text-align: center;
	font-size: 12px;
}

.contact-info h3, .clients-container h3, .urheberrecht h3, .datenschutz h3, .haftungFuerInhalte h3 {
	font-weight: 600;
}

.contact-info p, .urheberrecht p, .datenschutz p, .haftungFuerInhalte p{
	line-height: 1.2;
	text-align: justify;
	font-weight: 600;
	letter-spacing: 0.75px;
}

.clients-container p{
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0.75px;
}

.impressums-container {
	margin-top: 10vh;
}

.impressums-container h1{
	font-weight: 600;
}

/*
 * Media Queries
 */
@media (max-width: 800px){
	.mobile {
		display: block;
	}

	.brand-container {
		width: 70vw;
		float: left;
	}

	#brand {
		max-height: 10vh;
		margin: 0 auto 0 1vw;
		width: auto;
		max-width: 100%;
	}
    
	.desktop {
		display: none;
	}

	.contact-info, .clients-container, .urheberrecht, .datenschutz, .haftungFuerInhalte, .impressums-container {
		width: 80vw;
		margin-left: 10vw;
		font-size: 14px;
	}

	#slider-container {
		margin-top: 10vh;
	}
}