@charset "utf-8"; 
@font-face { font-family: Economica; src: url(../res/font/Economica-Regular.ttf); }
@font-face { font-family: OpenSansCondLight; src: url(../res/font/Aller_Lt.ttf); }

body { position: relative; margin: 0; padding: 0; font-family: OpenSansCondLight; font-size: 1em; color: rgba(255,255,255,0.75); line-height: 2em; background-color: #000; }
body * { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; cursor: default; outline: none; }
header { margin: 0; }

.linadong { position: fixed; margin: 0; padding: 0; height: 100vh; width: 100%; color: #eee; font-size: 2em; font-family: Economica; font-variant: normal; font-weight: normal; background-color: #050505; z-index: 999; display: flex; align-items: center; justify-content: center;}
.doglet {
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: blinker;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	animation-name: blinker;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.poulo { height: 100vh; width: 100vw; overflow: hidden; }

p { margin: 0; padding: 0; }
a, a:link, a:visited { padding: 0; color: rgba(100,200,255,1); text-decoration: none; display: block; font-family: Economica; }
a:hover { color: rgba(255,255,255,0.75); } a: active { color: rgba(255,255,255,0.75); }

ul { margin: 0; padding: 0; list-style: none; }
li { margin: 0; padding: 0; line-height: 20px; }

h1 { margin: 0 0 0em 0; font-size: 2em; line-height: 2em; color: rgba(51,153,255,1); font-family: Economica; font-variant: normal; font-weight: normal; } 
h2 { margin: 0; padding: 0; font-size: 0.85em; line-height: 1em; font-variant: normal; font-weight: lighter; }
.h1less { margin: 0 0 1.5em 0; padding: 0; font-size: 1em; line-height: 1.5em; } 

.pointer { cursor: pointer !important; }

.no_border { border-bottom: none !important; padding-bottom: 3em !important; }

.more_margin_height {}

.preamble { max-width: 400px; width: 100%; float: right;}

.content_text { margin: 1em 0 0 0; font-size: 1em; text-align: left; }

.long_text { font-size: 0.9em; line-height: 1.5em; }

.involvement { color: rgba(255,153,51,0.75); }

.bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../res/img/bg_pixie.png), url(../res/img/bg_grunge.jpg) repeat-y; background-size: auto, contain; background-blend-mode: overlay, multiply; opacity: 0.75; }

.clerasil { clear: both; }

.lang_sound { position: relative; width: 179px; height: 186px; float: left; text-align: right; font-size: 12px; }

.creative_director { margin: 0.7em 0 0 0; color: rgba(255,153,51,0.75); }

.email { display: block; margin: 2em 1.5em 0 -1em; float: left; font-size: 1.5; letter-spacing: 0.5px; border-radius: 500px; transition: background 0.5s, color 0.5s; }
.email:hover { background: rgba(51,153,255,1); color: rgba(255,255,255,1); }
.email:active { background: rgba(255,153,51,0.75); color: rgba(0,0,0,1); }

.what_can_I_do_you_for { margin: 3em 2em -3em; }
.what_can_I_do_you_for li {
	margin: 0 0.5em 2em;
	padding: 0.85em 1em;
	color: rgba(255,255,255,0.5);
	text-align: center;
	font-style: italic;
	background: rgba(0,0,0,0.5);
	display: inline-block;
	overflow: hidden;
	border-radius: 500px;
}

.degree { font-size: 0.75em; line-height: 2em; }

.pig_cave { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; mix-blend-mode: overlay multiply; transform: rotateY(180deg); pointer-events: none; }
	.pig { position: absolute; width: 100px; height: 40px; background-image: url(../res/img/berry_logo_blue.png); background-position: center; background-repeat: no-repeat; background-size: cover;}

.contented { width: 100%; margin: 0 auto 0 auto; padding: 0px; z-index: 1; }

.the_juice { position: relative; margin: 0; width: 100%; text-align: center; }

.some_work_title { margin: -5px 0 25px 0; }

.artiste_kiosk img { float: right; }

.ipad_small { position: relative; width: 200px; height: 150px; padding: 0; perspective: 20px; overflow: hidden; transform: scale(1.25, 1.25); }
.screen_set { position: absolute; width: 100%; height: 100%; margin: 7px 0 0 40px; overflow: hidden; }
.screen_inner { position: absolute; }

.greekbrew { position: relative; margin: 2em 0 1em; padding: 0 0.5em; overflow: hidden; text-align: center; }
.greekbrew img { max-width: 100%; min-width: 350px; border-radius: 212px; overflow: hidden;  }

.container { width: 186px; height: 99px; position: relative; margin: 2em auto 0em; perspective: 750px; }
.carousel { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transform: translateZ(-663px) rotateY(-1188deg); pointer-events: none; }
.ready .carousel { transition: transform 1s; }
.carousel.panels-backface-invisible figure { backface-visibility: hidden; }
.carousel figure { display: block; position: absolute; padding: 6px 0 0 0; width: 158px; height: 105px; text-align: center; background: url(../res/img/mac_monitor_4_2-5.png); }
.ready .carousel figure { transition: opacity 1s, transform 1s; }

.webstuff { position: absolute; font-size: calc(12px + (1vh*0.66)); line-height: 5vh; top: -10vh; width: 500%; margin: 0 0 0 -50%; }
	
.row { position: relative; width: auto; margin: 0 auto ; padding: 5em 0 6em; overflow: hidden; border-bottom: dashed 6px rgba(0,0,0,0.75); 
	background: linear-gradient(to bottom, rgba(100,125,150,0.05), rgba(0,0,0,0.75));
	background: -moz-linear-gradient(to bottom, rgba(100,125,150,0.05), rgba(0,0,0,0.75));
	background: -webkit-linear-gradient(to bottom, rgba(100,125,150,0.05), rgba(0,0,0,0.75));
}
	.row_title { display: block; margin: 0 auto 3em; text-align: center; }

	.i_work_with { width: auto; margin: 5em auto 0em; text-align: center; color: rgba(255,255,255,0.75) }
	.i_work_with div { display: inline-block; margin: 0.5em 0.5em 0; }

	.up2 { position: relative; width: auto; margin: 0 auto; display: flex; flex-direction: row; align-items: top;}
		.up2 .up2col { height: auto; width: 30%; min-width: 320px; padding: 0 5% 0 15%; text-align: right; }
		.up2 .up2col:last-of-type { padding: 0 15% 0 5%; text-align: left; }

.cmb { text-align: left !important; }

	.column_txt { position: relative; text-align: left; overflow: hidden; }
		.txt { padding: 0 5em 3em; text-align: center; font-family: OpenSansCondLight; font-size: calc(6px + (1vh)); font-size: -moz-calc(6px + (1vh)); font-size: -webkit-calc(6px + (1vh)); line-height: 20px; }

	.imac { position: relative; float: left; margin: -3em 0 0 0; width: 400px; height: 389px; perspective: 1000px; }
		.imac_machine { position: absolute; width: 400px; height: 389px; background-image: url(../res/img/imac_small.png); background-size: cover; transform-style: preserve-3d; transform: translateZ(1px); pointer-events: none; }
		.imac_video { position: absolute; top: 19px; right: 20px; width: 400px; height: 250px; transform-style: preserve-3d; transform-origin: top right; transform: rotateY(-30deg) skewY(-4.5deg) skewX(-2deg) scale(1.16, 0.975); }

	.imac_reverse { position: relative; float: right; margin: 0 0 0 0; width: 400px; height: 389px; perspective: 1000px; }
	.imac_reverse .imac_machine { position: absolute; width: 400px; height: 389px; background-image: url(../res/img/imac_small_reverse.png); background-size: cover; transform-style: preserve-3d; transform: translateZ(1px); pointer-events: none; }
	.imac_reverse .imac_video { position: absolute; top: 19px; left: 20px; width: 400px; height: 250px; transform-style: preserve-3d; transform-origin: top left; transform: rotateY(30deg) skewY(4.5deg) skewX(2deg) scale(1.18, 1.075); }

	.android_phone { position: relative; float: right; margin: -3em 0 0 0; width: 250px; height: 450px; perspective: 1000px; }
	.android_phone .android_phone_machine { position: absolute; width: 250px; height: 450px; background-image: url(../res/img/android.png); background-size: cover; transform-style: preserve-3d; transform: translateZ(1px); pointer-events: none; }
	.android_phone_video { position: absolute; top: 52px; left: 18px; width: 250px; height: 400px; transform-style: preserve-3d; transform-origin: top left; transform: scale(0.85); }
	.android_phone_insetter { box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,1); }

	.tv_oldschool { position: relative; margin: 3em auto 0; width: 525px; height: 338px; perspective: 1000px; cursor: pointer; }
	.tv_oldschool_machine { position: absolute; width: 525px; height: 338px; background-image: url(../res/img/tv_oldschool.png); background-size: cover; transform-style: preserve-3d; transform: translateZ(1px); }
	.tv_oldschool_machine { pointer-events: none; }
	.tv_oldschool_video, .tv_oldschool .play_button { position: absolute; top: 45px; left: 45px; width: 335px; height: 251px; transform-style: preserve-3d; transform-origin: top left; transform: scale(1); cursor: pointer; }
	.tv_oldschool_insetter { box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,1); pointer-events: none; }

	.tv_oldschool .play_button { font-size: 13px; line-height: 13px; background-color: rgba(0,0,0,0.5); background-image: url(../res/img/play_mini.png); background-repeat: no-repeat; background-position: center; }

	.eco_hydraulic { margin: 0 auto; width: 100%; max-width: 400px;}

	.watson_img { width: 100%; margin: 1em 0 0 0; }

	.marmoset { margin: 1.5em 0 0 0; font-size: 0.85em; font-style: italic; line-height: 1.5em; text-align: center; }

	.play_button { font-size: 13px; line-height: 13px; background-color: rgba(0,0,0,0.5); background-image: url(../res/img/play.png); background-repeat: no-repeat; background-position: center; }

	.bb { display: inline-block; margin: 0.5em 1em; cursor: pointer; }
	
	.img_rotator { position: relative; margin: 1em auto 1.5em; width: 100%; height: auto; text-align: center; display: block; overflow: hidden; }
		.img_rotator img { position: absolute; top: 0; right: 0; width: 100%; }

.m3_vid_enbiggen { transform-origin: center middle; transition: all 1s; }

.insetter { position: absolute; width: 100%; height: 100%; box-shadow: inset 0px 0px 50px 5px rgba(0,0,0,1); pointer-events: none; }

footer { position: absolute; bottom: 0px; left: 0px; padding: 0 0 2em 3em; font-size: 0.65em; color: rgba(255,255,255,0.5); text-shadow: -2px 2px 5px black; }

.hell_awaits {}
	.christus_in_de_limbus { margin: 0; width: 100%; height: calc(100vh - 4em); max width: 1680px; background: #eee url(../res/img/christus_in_de_limbus.jpg) no-repeat; background-size: cover; background-position: center; background-blend-mode: luminosity overlay;}
	.smokies { bottom: 6em; position: absolute; mix-blend-mode: screen; transform-origin: bottom center; transform: scale(1, 2); }
	.no_further { margin: 0 auto; padding: 1em 1em 1.5em ; text-align: center; font-size: 1.5em; font-family: Economica; color: #fff; line-height: 1.5em; background: rgba(0,0,0,1); mix-blend-mode:  }

.snitch { position: fixed; top: 0px; left: 0px; width: 0px; height: 0px; }

.plaisio { width: 100%; padding: 0 0 5em 0; overflow: hidden; }

@-webkit-keyframes spinner { from{ transform: rotateY(0deg); } to{ transform: rotateY(-360deg); } }
.stage { margin: 1em auto; width: 100%; transform-origin: center; }
.spinner { animation-name: spinner; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 180s; transform-style: preserve-3d; }
.spinner_div { position: absolute; width: 158px; text-align: center; background-image: url(../res/img/mac_monitor_4_2-5.png); background-repeat: no-repeat; box-shadow: inset 0px 0px 20px rgba(0,0,0,0.8); }
.spinner_div img { padding: 6px 0 0 0; height: 99px; }

.cmb_center { text-align: center; }
.cmb_box_33 { min-width: 320px; max-width: 600px; margin: 0 auto; padding: 0 0.5em; }
.cmb_space_h_3 { margin: 3em 0 0 0; }

.m3_sb_scuba { width: 100%; height: 2000px;}

.light_beams_group { pointer-events: none; opacity: 0; transform: skew(13deg); }

.flowmaps { position: relative; margin: 2em auto 1em; width: 100%;  height: 350px; overflow: hidden; opacity: 0.65; background: url(../res/img/flowmaps.jpg); background-position: top left; background-repeat: repeat-x; }
	.shadow_x { position: absolute; top: 0; left: -20%; width: 140%;  height: 350px; box-shadow: inset 0px 0px 100px 15px rgba(0,0,0,1); }
	.flowstrip { position: absolute; top: 0; left: 0; background: url(../res/img/flowmaps.jpg); background-position: top left; background-repeat: repeat-x; }

.up2 .up2col:first-of-type h1, .up2 .up2col:first-of-type .involvement { display: none; }
.m3_sb_tv .up2 .up2col:first-of-type, .m3_sb_tv .up2 .up2col:first-of-type h1, .m3_sb_tv .up2 .up2col:first-of-type .involvement, 
.m3_sb_3d .up2 .up2col:first-of-type, .m3_sb_3d .up2 .up2col:first-of-type h1, .m3_sb_3d .up2 .up2col:first-of-type .involvement,
.m3_sb_pbr .up2 .up2col:first-of-type, .m3_sb_pbr .up2 .up2col:first-of-type h1, .m3_sb_pbr .up2 .up2col:first-of-type .involvement { display: block; text-align: left; }
.m3_sb_tv .up2 .up2col:last-of-type h1, .m3_sb_tv .up2 .up2col:last-of-type .involvement,
.m3_sb_3d .up2 .up2col:last-of-type h1, .m3_sb_3d .up2 .up2col:last-of-type .involvement,
.m3_sb_pbr .up2 .up2col:last-of-type h1, .m3_sb_pbr .up2 .up2col:last-of-type .involvement { display: none; }
.cmb_space_h_3 h1, .cmb_space_h_3 .involvement { display: block !important; } 

.m3_anim { display: inline-block; margin: 5%; }
.m3_anim_cap { margin: 15px 0 0 0; }

.m3_sb_wartype_air .play_button, .m3_sb_wartype_land .play_button { position: absolute; width: 100%; height: 100%; cursor: pointer; }

.nebojsa_b { display: none; }
.prologos {padding: 2.5em 5% 3em; color: rgba(255,153,51,0.75); font-family: Economica; font-size: 1.15em; letter-spacing: 1px; text-align: center; background: rgba(0,0,0, 1);}
.bbtxt_2 {display: none; margin: auto 5%;}
.m3_sb_pbr .bbtxt_2 { display: block; }
.m3_sb_pbr .haider { display: none; }

.scroll_here { position: fixed; bottom: 25px; right: 25px; width: 178px; height: 42px; background-image: url(../res/scroller3D/scroll_here.png);
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: blinker;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	animation-name: blinker;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@-moz-keyframes blinker {  
	0% { opacity: 1.0; }
	25% { opacity: 0.0; }
	50% { opacity: 1.0; }	
	100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
	0% { opacity: 1.0; }
	25% { opacity: 0.0; }
	50% { opacity: 1.0; }	
	100% { opacity: 1.0; }
}
@keyframes blinker {
	0% { opacity: 1.0; }
	25% { opacity: 0.0; }
	50% { opacity: 1.0; }	
	100% { opacity: 1.0; }
}

@media only screen and (max-width: 768px) {

	.more_margin_height { margin-top: 2em; }

	.nebojsa_a { display: none; }
	.nebojsa_b { display: block; }

	.bbtxt_1 {display: none;}
	.bbtxt_2 {display: block;}

	.artiste_kiosk img { float: unset; }

	.imac_reverse { margin-bottom: 20px;}
	.imac_reverse, .android_phone { float: none; margin: 0 auto 15px; }

	.img_rotator { margin-bottom: 50px; }
	.involvement, .texty { text-align: center; }
	.m3_sb_tv .up2col:last-of-type, .m3_sb_3d h1, .m3_sb_pbr h1, .m3_sb_3d .involvement, .m3_sb_pbr .involvement, .up2col { text-align: center !important; }

	.cmb h1, .up2col .cmb { text-align: left !important; }
	.up2 {display: block; text-align: center; }
	.up2 .up2col { width: 90%; padding: 0 5%; }

	.up2 .up2col:first-of-type h1,
	.up2 .up2col:first-of-type .involvement,
	.m3_sb_tv .up2 .up2col:last-of-type h1,
	.m3_sb_tv .up2 .up2col:last-of-type .involvement,
	.m3_sb_pbr .haider { display: block; }

	.up2 .up2col:first-of-type .involvement { margin-bottom: 2em; }
	.up2 .up2col:last-of-type h1,
	.up2 .up2col:last-of-type .involvement,
	.m3_sb_tv .up2 .up2col:first-of-type h1,
	.m3_sb_tv .up2 .up2col:first-of-type .involvement { display: none; }
	
	.watson_img { width: 100%; margin: 1em 0; }

	.eco_hydraulic { margin: 3em auto 2em; }
	
	.preamble { float: none; max-width: 100%; margin-left: 0; }
	.what_can_I_do_you_for { float: left; clear: both; text-align: left; margin-left: 5%; }
	.what_can_I_do_you_for li { margin: 0 0 0.5em; padding: 0 1.5em 0 0; }
	h1 { width: auto; text-align: center; }
	.i_work_with, .cmb_box_33, .m3_sb_tv h1, .m3_sb_greekbrew h1 { padding-left: 5%; padding-right: 5%; }
	.m3_sb_flowmaps h1 { text-align: center; }
	.m3_sb_websites h1 { padding-left: 5%; padding-right: 5%; }
	footer { position: unset; padding: 0; color: rgba(255,255,255,1); }
}