/*!
Styles for full screen background video demo
*/
/* =============================================================================
  RESETS
============================================================================= */
html,
body,
div,
h1,
p,
a,
video {
  margin: 0;
  padding: 0;
}

/* =============================================================================
  HTML, BODY, Font
============================================================================= */
html,
body {
  height: 100%;
  background-color: #000000;
}

body {
  font-size: 20px;
  font-family: "SourceSansPro-Regular";
}

@font-face {
  font-family: 'SourceSansPro-Black';
  font-style: normal;
  font-weight: normal;
  src: local('SourceSansPro-Black'), url('/media/SourceSansPro-Black.otf') format('opentype');
}
@font-face {
  font-family: 'SourceSansPro-BlackIt';
  font-style: normal;
  font-weight: bold;
  src: local('SourceSansPro-BlackIt'), url('/media/SourceSansPro-BlackIt.otf') format('opentype');
}
@font-face {
  font-family: 'SourceSansPro-Regular';
  font-style: normal;
  font-weight: normal;
  src: local('SourceSansPro-Regular'), url('/media/SourceSansPro-Regular.otf') format('opentype');
}


/* =============================================================================
  Main
============================================================================= */
.content {
  position: fixed;
  z-index: 2;
  width: 85%;
  height: 100%;
}

.blackBox {
	position: fixed;
	left: 0;
	top: 0;
	display: none;
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	margin: 15px;
	margin-right: 0;
	height: calc(100% - 30px);
	padding: 10% 3%;
	padding-bottom: 0;
	overflow: hidden;
	width: 65%;
	box-sizing: border-box;
}

.blackBox p {
	width: 100%;
}

.blackBoxContent {
	position: fixed;
}

.blackBoxContent p {
	line-height: 1.3;
}

.blackBox::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

.blackBox::-webkit-scrollbar-thumb {
    background-color: #000000;
}

.forceOverflow {
	min-height: 45px;
	clear: both;
}

.blackBoxContent h1 {
  margin-bottom: 24px;
  color: #fff;
  font-size: 75px;
  font-family: SourceSansPro-BlackIt;
  background-color: #000000;
  display: inline-block;
  padding: 0px 10px 0px 10px;
  line-height: 1;
}
.blackBoxContent h2 {
  margin-bottom: 12px;
  color: #fff;
  font-size: 18px;
  font-family: SourceSansPro-Black;
  display: inline-block;
}

.blackBoxInnerContent {
	width: 95%;
	font-size: 15px;
}

#logo {
	position: fixed;
	top: 10px;
	left: 30px;
}

#socialButtons {
	position: fixed;
	bottom: 25px;
	left: 50px;
}

.hiddenFirst {
	display: none;
}

/* Scrolling, arrows and stuff */

.scroller {
	position: absolute;
	bottom: 15px;
	right: 15px;
	color: #fff;
	cursor: pointer;
	width: 100%;
	text-align: center;
	z-index: 3;
	height: 50px;
	margin-bottom: 15px;
}

.scrollUp {
	-moz-transform:rotate(180deg); /* Firefox 3.6 Firefox 4 */
	-webkit-transform:rotate(180deg); /* Safari */
	-o-transform:rotate(180deg); /* Opera */
	-ms-transform:rotate(180deg); /* IE9 */
	transform:rotate(180deg); /* W3C */
}

.scrollTo {
	cursor: pointer;
}

/* css arrow down */

.arrow,
.arrow:before {
	position: absolute;
	left: 50%;
	z-index: 10;
}

.arrow {
	width: 40px;
	height: 40px;
	top: 50%;
	margin: -20px 0 0 -20px;
	-webkit-transform: rotate(45deg);
	border-left: none;
	border-top: none;
	border-right: 2px #fff solid;
	border-bottom: 2px #fff solid;
}

.arrowUp {
	margin-bottom: 50px;
}

.arrow:before {
	content: '';
	width: 20px;
	height: 20px;
	top: 50%;
	margin: -10px 0 0 -10px;
	border-left: none;
	border-top: none;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-name: arrow;
}

@keyframes arrow {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(-10px, -10px);
	}
}


/* =============================================================================
  Video
============================================================================= */
.video {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

#video_skip_button {
	position: fixed;
	bottom: 10%;
	right: 10%;
	background-image: url("/media/button_skip.png");
	width: 156px;
	height: 46px;
	cursor: pointer;
}

.socialLink {
	text-decoration: none;
}

.socialLink a:hover, a:active, a:visited, a:link {
	color: #ffffff;
	text-decoration: none;
}



/* =============================================================================
  Navigation
============================================================================= */
.sidenav {
	height: 100%;
	width: 250px;
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	overflow-x: hidden;
	padding-top: 15%;
	font-family: SourceSansPro-BlackIt;
}

#navigation {
	background-color: #000;
	opacity: 0.5;
	z-index: 2;
}

#realNavigation {
	z-index: 3;
}

.navigationHover {
    text-decoration: none;
    text-align: center;
    font-size: 25px;
    color: #fff;
    display: inline-block;
    /*transition: 0.3s;*/
    padding: 0px 10px 0px 10px;
}

.navigationHover:hover {
    background-color: #000000;
    cursor: pointer;
}

.navigation_active {
	background-color: #000000;
}

#navigation_button {
	position: fixed;
	float: right;
	right: 0;
	top: 0;
	height: 39px;
	width: 39px;
	margin: 15px;
	padding: 0;
	z-index: 4;
	display: none;
	cursor: pointer;
}

.open {
	background-image: url("/media/button_menu_open.png");
}

.close {
	background-image: url("/media/button_menu_close.png");
}

/* =============================================================================
  Contact
============================================================================= */
.container input[type=text], .container select, .container textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

.container input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.container input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

.kontaktform_abstand {
	float:left;
	width:30%;
}

.blackBoxInnerContent input[type=text], .blackBoxInnerContent select, .blackBoxInnerContent textarea {
	border-radius: 0px;
	box-sizing: border-box;
	margin-bottom: 16px;
	border: 1px solid #ccc;
	width: 70%;
	background-color: #000000;
	color: #ffffff;
	height: 25px;
	opacity: 0.5;
}

input[type=checkbox] {

}

.blackBoxInnerContent input[type=text]:focus, .blackBoxInnerContent textarea:focus {
	opacity: 1;
	outline: none;
}

.blackBoxInnerContent select {
	background-color: #ffffff;
	color: #000000;
	border-radius: 0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-position: right 50%;
	background-repeat: no-repeat;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
}

.blackBoxInnerContent input[type=submit] {
	background-color: #ffffff;
	color: 000000;
	border: none;
	border-radius: 0px;
	cursor: pointer;
	width: 150px;
	height: 20px;
	float: right;
}

#contactInfo h1 {
	margin-bottom: 24px;
	color: #fff;
	font-size: 60px;
	font-family: SourceSansPro-BlackIt;
	background-color: transparent;
	display: inline-block;
	line-height: 1;
	padding: 0;
}

@media only screen and (max-width: 1500px) {
	#contactInfo h1 {
		font-size: 40px;
	}
}

@media only screen and (max-width: 1080px) {
	#contactInfo h1 {
		font-size: 20px;
	}
}

#contactInfo p {
	font-size: 20px
}

@media only screen and (max-width: 1080px) {
	#contactInfo p {
		font-size: 15px;
	}
}
#contact_done h2 {
	font-size: 30px;
}


/* =============================================================================
  Who We Are
============================================================================= */
.container_scrollable {
	height: 100%;
	width: 100%;
	top: 0;
	position: relative;
	transition:top 0.5s ease-out
}

.blackBox.scrolled .container_scrollable {
	top:-100%;
}

.container_scrollable_part {
	position: relative;
	float: left;
	height: 100%;
	width: 100%;
}

#freelance_creatives {
	position: relative;
	min-width: 320px;
}

.img_mosaic {
	position: relative;
	margin-right: 1%;
	display: flex;
	justify-content: center;
	align-items: center;
	float: left;
	width: 23%;
	height: auto;
}

.img_mosaic img {
	position: relative;
	width: 100%;
}

.img_mosaic p {
	position: absolute;
	width: 90%;
	height: 90%;
	background: rgba(0, 0, 0, 0.8);
	text-align: center;
	line-height: 1.2;
	padding: 5%;
	display: none;
	justify-content: center;
	align-items: center;
	font-size: 12px;
}

#split-text {
	position: relative;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 40px;
}

#split-text:before {
	content: "\201C";
}

/*#split-text:after {*/
	/*content: "\201D";*/
/*}*/

#split-text:before,
#split-text:after {
	font-size:90px;
	font-weight: bold;
	position: absolute;
	color:#fff;
	opacity:1;
	line-height: 65px;
	display: block;
	height: 30px;
	left: 0;
	top: 0;
	bottom: unset;
	right: unset;
}

#split-text span:first-child {
	opacity:1;
}

#split-text span:last-child {
	font-size:90px;
	font-weight: bold;
	position: absolute;
	color:#fff;
	opacity:1;
	line-height: 65px;
	height: 30px;
	/*right: auto;*/
	/*bottom: auto;*/
}

#second-animation-container {
	text-align: center;
}

#name-noel {
	display: inline-block;
	text-align: left;
	margin-right: 50px;
	overflow: hidden;
}

#name-noel > p,
#name-noel > div:nth-child(2) p {
	font-size: 32px;
	font-weight: bold;
	font-family: SourceSansPro-Black;
}

#name-noel > div {
	overflow: hidden;
}

#provided-services {
	display: inline-block;
	text-align: left;
	margin-left: 50px;
	overflow: hidden;
	vertical-align: top;
}

#provided-services > div:nth-child(1) p,
#provided-services > div:nth-child(2) p {
	font-size: 32px;
	font-weight: bold;
	font-family: SourceSansPro-Black;
}

#provided-services > div {
	overflow: hidden;
}

/* =============================================================================
  What We Do
============================================================================= */
#whatido .vimeo_container {
	width:75%;
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	opacity: 0.4;
}
.embed-container:hover {
	opacity: 1.0;
}
.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#moretocome {
	margin-top: 3%;
}

/* =============================================================================
  Clients
============================================================================= */
.client_tiles img {
	position: relative;
	float: left;
	top: 0px;
	width: 14%;
	height: auto;
	opacity: 0.6;
	border:0px;
	margin: 0px 5px 0px 0px;
}

.client_tiles img:hover {
	opacity: 0.4;
	border:0px;
}

.client_tiles a {
	color: inherit;
	text-decoration: none;
}

/* =============================================================================
  Imprint
============================================================================= */


#imprint {
	display: none;
	width: 100%;
	height: 100%;
	background-color: #000000;
	color: #ffffff;
	padding-left: calc(10% + 15px);
	padding-top: calc(5% + 15px);
	overflow: scroll;
}

#imprint_content {
	width: 50%;
	height: 75%;
	overflow: scroll;
}

#imprint h1 {
	padding: 0px;
}



#mCSB_1_scrollbar_vertical .mCSB_dragger{ height: 30px; }



#mCSB_1_scrollbar_vertical .mCSB_draggerRail {
	background-color: rgba(0,0,0,0);
}

#mCSB_1_scrollbar_vertical {
	margin-bottom: 5%;
}