/* Theme Name: Translation Table */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,main,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}img{border:0;}*,*:before,*:after{box-sizing:border-box;}a{text-decoration:none;}*,*:before,*:after{box-sizing:border-box;}



/* //////////////////// RESPONSIVE //////////////////// */

@media only screen and (min-width: 1200px) {

	.cont {width: 1100px;}
	
	.desk-only {display: block !important;}
	
	#projects a, #projects > div {width: 22%; margin-bottom: 40px;}

}


@media only screen and (min-width: 740px) and (max-width: 1199px) {

	.cont {width: 90%;}
	
	.tab-hide {display: none !important;}
	.tab-full {width: 100% !important;}
	img.tab-full {height: auto !important;}
	
	.tab-only {display: block !important;}
	
	#projects a {width: 31%; margin-bottom: 30px;}
	#projects > div {display: none;}

}


@media only screen and (min-width: 1031px) {
	.slicknav_menu {display: none;}
}
@media only screen and (max-width: 1030px) {
	#header {display: none;}
	.slicknav_menu {display: block;}
}


@media only screen and (min-width: 320px) and (max-width: 739px) {
	
	.cont {width: 90%;}
	
	.mob-hide {display: none !important;}
	.mob-full {width: 100% !important;}
	.mob-center {text-align: center;}
	.mob-nofloat {float: none !important;}
	.mob-margb {margin-bottom: 20px;}
	.mob-only {display: block !important;}
	
	img.mob-full {height: auto !important;}
	.overlay {display: block !important;}
	
	.mob-order-1 {-webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1;}
	.mob-order-2 {-webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2;}
	
	h1 {text-align: center;}
	
	h1,h2,h3,h4,h5 {line-height: 1.2 !important;}
	
	footer {height: auto !important; margin-top: 50px;}
	
	#header {display: none;}
	.slicknav_menu {display: block;}
	
	
	#projects a {width: 48%; margin-bottom: 30px;}
	#projects > div {display: none;}
	
}


.desk-only, .tab-only, .mob-only {display: none;}




/* //////////////////// FLEX //////////////////// */

.flex {list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-flow:row wrap;flex-wrap:wrap;-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}

.flex.start {-webkit-justify-content:flex-start;justify-content:flex-start}

.flex > div, .flex > li {min-width: 1%;}

.order-1 {-webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1;}
.order-2 {-webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2;}

.gold-a {width: 59.8%;} .gold-b {width: 36.2%;}

.full {width: 100%;} .threequad {width: 75%;} .twothirds {width: 66%;} .half {width: 48%;} .third {width: 30%;} .quad {width: 25%;} .fifth {width: 20%;}

.columns-1, .tcolumns-1 th, .tcolumns-1 td {width: 100%;}
.columns-2, .tcolumns-2 th, .tcolumns-2 td {width: 48%;}
.columns-3, .tcolumns-3 th, .tcolumns-3 td {width: 31%;}
.columns-4, .tcolumns-4 th, .tcolumns-4 td {width: 25%;}
.columns-5, .tcolumns-5 th, .tcolumns-5 td {width: 20%;}
.columns-6, .tcolumns-6 th, .tcolumns-6 td {width: 16.666%;}



/* //////////////////// BODY //////////////////// */

body {font-family: 'Roboto', Arial, sans-serif; font-weight: 300; color: #777; background: #fff;}

a {color: #008cde;} a:hover {color: #222; text-decoration: none;}

.cont {margin: 0 auto;}


/* //////////////////// CLASSES //////////////////// */

.hidden {display: none !important;}

.clear {position: relative; float: none; clear: both;}

img {display: block;}
img.full {width: 100%; height: auto;}

.relative {position: relative;}

.lazyload {background: url(img/loader.svg) center center no-repeat; min-height: 200px; border: 0 !important; border-style: none !important;}
.lazyloaded {opacity: 1;}

img:not([src]){opacity: 0;}

.lazyload, .lazyloaded {-webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out;}

.left {float: left;} .right {float: right;}
.iblock {display: inline-block;}
.center, .aligncenter {text-align: center;}


.overlay {position: relative; display: inline-block; line-height: 0;}
.overlay:before {background-color: rgba(0,0,0,0.04); content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}


.nomarg {margin: 0 !important;}

hr {border-top: solid 1px #ddd; border-bottom:0; border-left: 0; border-right: 0; height: 0; margin: 30px 0; float: none; clear: both;}


/* //////////////////// TEXT //////////////////// */

p {margin-bottom: 30px; line-height: 1.5;}

h1,h2,h3 {color: #222;}

h1 {font-size: 36px; margin-bottom: 30px; line-height: 1; font-weight: 500;}
h2 {font-size: 24px; margin-bottom: 30px; line-height: 1;}
h3 {font-size: 20px; margin-bottom: 30px; line-height: 1;}

h1 span {color: #999; font-weight: 300;}

small {font-size: 0.8em; color: #999;}

.bold, b, strong {font-weight: 500;}

.tright {text-align: right;}



/* //////////////////// TRANSITION //////////////////// */

input, input:hover,
.button, .button:hover,
#projects a, #projects a:hover,
#projects .overlay:before {-webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out;}



/* //////////////////// BUTTONS //////////////////// */

.button {line-height: 40px; padding: 0 12px; font-size: 18px; border: 0 !important; display: inline-block !important; margin: 0 !important; font-weight: 500; background: #c00; color: #fff; cursor: pointer; border: 1px solid #c00;}








/* //////////////////////////////////////// LAYOUT //////////////////////////////////////// */


/* //////////////////// HEADER //////////////////// */

#header {padding: 15px 0; background: #008cde; color: #fff;}

#logo {color: #fff;} a#logo:hover .logo-icon {color: #222;}
#logo .logo-icon {float: left; margin-right: 15px; font-size: 33px;}
#logo .logo-name {font-weight: 400; text-transform: uppercase; font-size: 18px; margin-bottom: 3px;}
#logo .logo-slogan {opacity: 0.5; font-size: 13px;}


.slicknav_menu #logo {float: left; width: 65%; margin: 5px 0 0 5px;}
.slicknav_menu #logo .logo-name {padding-top: 8px;}



/* //////////////////// NAVI //////////////////// */

#header .right {}

.menu-header-container,
.menu-header-deutsch-container {float: left;}

/*
#header .menu li {display: inline; margin-left: 20px;}
#header .menu a {font-weight: 400; text-transform: uppercase; font-size: 18px; line-height: 30px; color: #fff;}
*/




#header .menu li {
  display: inline-block;
}
#header .menu li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 3px;
}
#header .menu li a,
#header .menu li a:after,
#header .menu li a:before {
  transition: all .5s;
}
#header .menu li a {
  position:relative;
  z-index: 1;
}
#header .menu li a:hover {
  color: #008cde;
}
#header .menu li a:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  content: '.';
  color: transparent;
  background: #fff;
  visibility: none;
  opacity: 0;
  z-index: -1;
}
#header .menu li a:hover:after {
  opacity: 1;
  visibility: visible;
  height: 100%;
}

#header .menu .current-menu-item a {background: rgba(0,0,0,0.3);}


#lang_sel {float: right; margin-top: 4px; font-family: 'Roboto', Arial, sans-serif; margin-left: 20px;}
#lang_sel img.iclflag {display: inline !important;}
#lang_sel a {font-size: 12px; font-weight: 400; color: #777;}
#lang_sel ul ul, #lang_sel li {width: 120px !important;}



/* //////////////////// FORMS //////////////////// */

.input, button {font-family: 'Roboto', Arial, sans-serif;}

input {font-family: 'Roboto', Arial, sans-serif;}

input[type="text"], input[type="email"], textarea {box-sizing:border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; width: 100%; background: #fff; border: 1px solid #ddd; border-bottom: 1px solid #ccc; padding: 5px; line-height: 30px; font-size: 1em;}

input[type="text"]:hover, input[type="text"]:focus {background: #fff;}

label {font-weight: 400; text-transform: uppercase;}

.wpcf7 {padding: 20px 20px 10px 20px !important; background: #f5f5f5; width: 60%;}

.wpcf7-form-control-wrap {margin-top: 5px; display: block;}

input[type="submit"] {padding: 5px 15px; line-height: 40px; display: inline-block; color: #fff; background: rgba(0, 140, 222, 1); border: 0; font-size: 1.2em; text-transform: uppercase; cursor: pointer;}

input[type="submit"]:hover {background: #03629b;}


/* //////////////////// HOME PAGE //////////////////// */

#projects {margin: 20px 0 40px 0;}

#projects a {display: block; border-bottom: 1px solid #ccc; background: #f5f5f5; color: #777; position: relative;}

#projects a:hover {border-bottom: 1px solid #008cde; -webkit-box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1); background: #fff; color: #008cde;}

#projects a:hover .overlay:before {background: none !important;}

#projects a .inside {padding: 20px;}

#projects .game-image {text-align: center;}
#projects .game-title {margin-top: 10px;}

#projects .working {position: absolute; z-index: 20; width: 100%; left: 0; top: 0; background: rgba(245, 235, 187, 0.9); color: #777; text-align: center;}

.status-work .game-image {opacity: .5;}
.status-work .game-image img {filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray; -webkit-filter: grayscale(100%);}

.status-work:hover .game-image {opacity: 1;}



/* //////////////////// DETAIL PAGE //////////////////// */

header {padding-top: 40px;}

#detail header {border-bottom: 1px solid #ddd; padding: 40px 0; margin-bottom: 30px;}


.video {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; margin-bottom: 50px;}
.video iframe, .video object, .video embed {position:absolute; top:0; left:0; width:100%; height:100%;}

.title {font-size: 18px; margin-bottom: 20px; line-height: 1; text-transform: uppercase; font-weight: 400; color: #222;}

.title i {float: right; color: #ccc; font-size: 24px; margin-top: -4px;}

#facts table {width: 100%;}

#facts table th, #facts table td {padding: 10px; border-bottom: 1px dotted #ddd; line-height: 1.2;}

#facts table tr:first-child th, #facts table tr:first-child td {padding-top: 0;}
#facts table tr:last-child th, #facts table tr:last-child td {border: 0 !important; padding-bottom: 0;}

#facts table th {text-align: left;}
#facts table td {color: #222; font-weight: 400;}


.flag-icon {margin-right: 5px;}

#facts td i {margin-right: 5px;}

.hasimg {position: relative; overflow: hidden;}
.topimg {position: absolute; right: -30px; top: -100px; opacity: .1; width: 40%; height: auto; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray; -webkit-filter: grayscale(100%); }


.working {padding: 12px; background: #f5ebbb; margin-bottom: 30px;}
.working i {margin-right: 8px;}

#nextprev {margin-bottom: 40px;}

#nextprev a {padding: 0 12px; line-height: 40px; display: inline-block; background: rgba(0, 140, 222, 0.05);}
#nextprev a:hover {color: #fff; background: rgba(0, 140, 222, 1);}


/* //////////////////// FOOTER //////////////////// */


html, body {height: 100%;}

.clearfooter {height: 50px; clear: both;}

#container {min-height: 100%; margin-bottom: -50px; position: relative;}

footer {height: 50px; padding: 15px 0; position: relative; background: #333; font-size: 0.9em; color: #999; line-height: 20px;}

footer a {color: #999;} footer a:hover {color: #fff;}

footer li {display: inline; margin-left: 20px;}











/* //////////////////// COOKIE INFO //////////////////// */

.cc_banner-wrapper{z-index:9001;position:relative}.cc_container .cc_btn{cursor:pointer;text-align:center;font-size:0.6em;transition:font-size 200ms;line-height:1em}.cc_container .cc_message{font-size:0.6em;transition:font-size 200ms;margin:0;padding:0;line-height:1.5em}.cc_container .cc_logo{display:none;text-indent:-1000px;overflow:hidden;width:100px;height:22px;background-size:cover;background-image:url(//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.9/logo.png);opacity:0.9;transition:opacity 200ms}.cc_container .cc_logo:hover,.cc_container .cc_logo:active{opacity:1}@media screen and (min-width: 500px){.cc_container .cc_btn{font-size:0.8em}.cc_container .cc_message{font-size:0.8em}}@media screen and (min-width: 768px){.cc_container .cc_btn{font-size:1em}.cc_container .cc_message{font-size:1em;line-height:1em}}@media screen and (min-width: 992px){.cc_container .cc_message{font-size:1em}}@media print{.cc_banner-wrapper,.cc_container{display:none}}.cc_container{position:fixed;left:0;right:0;bottom:0;overflow:hidden;padding:10px 15px 50px}.cc_container .cc_btn{padding:8px 16px;background-color:#f1d600;position:absolute;bottom:10px;left:15px;right:15px;text-align:center}@media screen and (min-width: 500px){.cc_container{left:initial;right:20px;bottom:20px;width:300px;padding-bottom:77px}.cc_container .cc_btn{right:15px;bottom:37px}.cc_container .cc_logo{display:block;position:absolute;bottom:8px;left:calc(50% - 50px)}}@media screen and (min-width: 768px){.cc_container{padding-bottom:87px}.cc_container .cc_message{font-size:1em}}.cc_container{background:#fff;color:#999;font-size:17px;font-family:"Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;box-sizing:border-box;border:1px solid #ccc}.cc_container ::-moz-selection{background:#ff5e99;color:#fff;text-shadow:none}.cc_container .cc_btn,.cc_container .cc_btn:visited{color:#000;background-color:#f1d600;transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;-webkit-transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;border-radius:5px;-webkit-border-radius:5px}.cc_container .cc_btn:hover,.cc_container .cc_btn:active{background-color:#d7bf00;color:#000}.cc_container a,.cc_container a:visited{text-decoration:none;color:#31a8f0;transition:200ms color}.cc_container a:hover,.cc_container a:active{color:#555}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.cc_container{-webkit-animation-duration:0.6s;animation-duration:0.6s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:0.8s;-moz-animation-duration:0.8s;-o-animation-duration:0.8s;animation-duration:0.8s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@media screen and (min-width: 500px){.cc_container{border-radius:5px;box-shadow:0px 5px 10px rgba(0,0,0,0.2)}}







/* //////////////////// MOBILE NAV //////////////////// */


/*!
 * SlickNav Responsive Mobile Menu v1.0.10
 * (c) 2016 Josh Cope
 * licensed under MIT
 */
.slicknav_btn {
  position: relative;
  display: block;
  vertical-align: middle;
  float: right;
  padding: 0.438em 0.625em 0.438em 0.625em;
  line-height: 1.125em;
  cursor: pointer; }
  .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
    margin-top: 0.188em; }

.slicknav_menu {
  *zoom: 1; }
  .slicknav_menu .slicknav_menutxt {
    display: block;
    line-height: 1.188em;
    float: left; }
  .slicknav_menu .slicknav_icon {
    float: left;
    width: 1.125em;
    height: 0.875em;
    margin: 0.188em 0 0 0.438em; }
    .slicknav_menu .slicknav_icon:before {
      background: transparent;
      width: 1.125em;
      height: 0.875em;
      display: block;
      content: "";
      position: absolute; }
  .slicknav_menu .slicknav_no-text {
    margin: 0; }
  .slicknav_menu .slicknav_icon-bar {
    display: block;
    width: 1.125em;
    height: 0.125em;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
  .slicknav_menu:before {
    content: " ";
    display: table; }
  .slicknav_menu:after {
    content: " ";
    display: table;
    clear: both; }

.slicknav_nav {
  clear: both; }
  .slicknav_nav ul {
    display: block; }
  .slicknav_nav li {
    display: block; }
  .slicknav_nav .slicknav_arrow {
    font-size: 0.8em;
    margin: 0 0 0 0.4em; }
  .slicknav_nav .slicknav_item {
    cursor: pointer; }
    .slicknav_nav .slicknav_item a {
      display: inline; }
  .slicknav_nav .slicknav_row {
    display: block; }
  .slicknav_nav a {
    display: block; }
  .slicknav_nav .slicknav_parent-link a {
    display: inline; }

.slicknav_brand {
  float: left; }

.slicknav_menu {
  font-size: 16px;
  box-sizing: border-box;
  background: #008cde;
  padding: 5px; }
  .slicknav_menu * {
    box-sizing: border-box; }
  .slicknav_menu .slicknav_menutxt {
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 3px #000; }
  .slicknav_menu .slicknav_icon-bar {
    background-color: #fff; }

.slicknav_btn {
  margin: 5px 5px 6px;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: #222; }

.slicknav_nav {
  color: #fff;
  margin: 0;
  padding: 0;
  font-size: 0.875em;
  list-style: none;
  overflow: hidden; }
  .slicknav_nav ul {
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0 0 0 20px; }
  .slicknav_nav .slicknav_row {
    padding: 5px 10px;
    margin: 2px 5px; }
    .slicknav_nav .slicknav_row:hover {
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      background: #ccc;
      color: #fff; }
  .slicknav_nav a {
    padding: 5px 10px;
    margin: 2px 5px;
    text-decoration: none;
    color: #fff; }
    .slicknav_nav a:hover {
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      background: #ccc;
      color: #222; }
  .slicknav_nav .slicknav_txtnode {
    margin-left: 15px; }
  .slicknav_nav .slicknav_item a {
    padding: 0;
    margin: 0; }
  .slicknav_nav .slicknav_parent-link a {
    padding: 0;
    margin: 0; }

.slicknav_brand {
  color: #fff;
  font-size: 18px;
  line-height: 30px;
  padding: 7px 12px;
  height: 44px; }