@charset "utf-8";
 body, html {
color: #333;
background-color: #FFF;
font-size: 100%;
height: 100%;
font-family: Verdana, sans-serif;
font-weight: normal;
font-style: normal;
margin: 0px;
padding: 0px;
}
@font-face {
font-family: 'Creative Game';
src: url(https://www.creativegame.de/wp-content/themes/creativegame2017/webfonts/Creative-Game.eot);
src: url(https://www.creativegame.de/wp-content/themes/creativegame2017/webfonts/Creative-Game.eot?#iefix) format('embedded-opentype'),
url(https://www.creativegame.de/wp-content/themes/creativegame2017/webfonts/Creative-Game.woff) format('woff'),
url(https://www.creativegame.de/wp-content/themes/creativegame2017/webfonts/Creative-Game.ttf) format('truetype'),
url(https://www.creativegame.de/wp-content/themes/creativegame2017/webfonts/Creative-Game.svg#Creative-Game) format('svg');
font-weight: normal;
font-style: normal;
}
[class*='icon-']:before{
display: inline-block;
font-family: 'Creative Game';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: sub;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ic_gross:before{
padding-right:30px;
}
.ic_ch:before{
padding: 32px;
color:white;
}
.checktitel{
margin-left:60px;
} .ic_smaller:before{
font-size: smaller;
}
.ic_large:before{
font-size: 32px;
}
.ic_title:before{
font-size: 64pt;
margin-top: 20px;
}
.textalign_z{
text-align:center !important;
}
.blockelement{
position: relative;
display: block;
overflow: hidden;
}
.hoverunderline:hover{
text-decoration:underline !important;
}
.icon-file:before{content:'\0042';}
.icon-download:before{content:'\0043';}
.icon-kalender:before{content:'\0044';}
.icon-ort-2:before{content:'\0046';}
.icon-brief:before{content:'\0047';}
.icon-herz:before{content:'\0048';}
.icon-file2:before{content:'\0049';}
.icon-ort-3:before{content:'\004b';}
.icon-telefon:before{content:'\004c';}
.icon-telefon2:before{content:'\004d';}
.icon-handy:before{content:'\004e';}
.icon-drucken:before{content:'\004f';}
.icon-trainer:before{content:'\0051';}
.icon-news:before{content:'\0053';}
.icon-teilen:before{content:'\0054';}
.icon-liste:before{content:'\0055';}
.icon-facebook-leer:before{content:'\0056';}
.icon-gplus:before{content:'\0057';}
.icon-gplus-leer:before{content:'\0058';}
.icon-twitter:before{content:'\0059';}
.icon-facebook:before{content:'\005a';}
.icon-pfeil-rechts:before{content:'\0061';}
.icon-pfeil-links:before{content:'\0062';}
.icon-hacken:before{content:'\0063';}
.icon-link:before{content:'\0064';}
.icon-ort:before{content:'\0065';}
.icon-testimonial:before{content:'\0066';}
.icon-grafikdesign-seminare:before{content:'\006a';}
.icon-marketing-seminare:before{content:'\006b';}
.icon-marktforschungsseminare:before{content:'\006c';}
.icon-werbefilm-und-tv-trailer-seminare:before{content:'\006d';}
.icon-werbetext-seminare:before{content:'\006e';}
.icon-sprachseminare:before{content:'\006f';}
img {
border: none;
}
img.size-large, img.size-full{
width: 100%;
height: auto;
}
.stempel{
width: 150px;
height: 98px;
display: block;
position: absolute;
top: 150px;
z-index: 200;
right: 20px;
}
input:focus, textarea:focus {
outline: none !important;
}
.imgres {
overflow:hidden;
width: 100%;
height: 100%;
-webkit-filter: grayscale(55%);
-ms-filter: grayscale(55%);
filter: grayscale(55%);
}
#loader{
width: 100%;
height: 100%;
position:absolute;
overflow:hidden;
background: url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/loading.gif) 50% no-repeat;
background-color:#151515;
z-index:0;
}
header{
height: 61%;
box-sizing:border-box;
overflow: hidden;
position:relative;
top:0;
}
.fixer{
position: fixed;
width: 100%;
z-index: 100000;
height: 117px;
}
.body-fixer{
padding-top:61% !important;
}
section{
margin:50px 100px;
}
#navileiste{
display: block;
overflow: hidden;
height: 115px;
top:-150px;
width:100%;
left:0;
z-index:5000;
position:fixed;
background-color:#001F5B;
}
.logo_klein a{
width: 100%;
height: 100%;
display: block;
}
.grande{
height:61%;
}
.cat_titel{
z-index:100;
}
.cat_fig{
position: absolute;
top: 0;
right: 20%;
height:100%;
}
.transition_norm{
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.transition_fast{
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.transition_slow{
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.2s ease-in-out;
}
.muster_grafikdesign-seminare, .muster_grafikdesign-seminare_blk:hover, .hoverfarbe_grafikdesign-seminare:hover{
background:#001F5B url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-27.svg) 50px 50px repeat;
background-size:60px;
background-position:0 0;
}
.muster_werbetext-seminare, .muster_werbetext-seminare_blk:hover, .hoverfarbe_werbetext-seminare:hover{
background:#FF5000 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-28.svg) 50px 50px repeat;
background-size:80px;
background-position:0 0;
}
.muster_werbefilm-und-tv-trailer-seminare, .muster_werbefilm-und-tv-trailer-seminare_blk:hover, .hoverfarbe_werbefilm-und-tv-trailer-seminare:hover, .hoverfarbe_video-und-werbefilm-seminare:hover{
background:#E20079 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-29.svg) 50px 50px repeat;
background-size:60px;
background-position:0 0;
}
.muster_marktforschungsseminare, .muster_marktforschungsseminare_blk:hover, .hoverfarbe_marktforschungsseminare:hover{
background:#512C1D url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-30.svg) 50px 50px repeat;
background-size:60px;
background-position:0 0;
}
.muster_sprachseminare, .muster_sprachseminare_blk:hover, .hoverfarbe_sprachseminare:hover{
background:#B72323 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-31.svg) 50px 50px repeat;
background-size:83px;
background-position:0 0;
}
.muster_marketing-seminare, .muster_marketing-seminare_blk:hover, .hoverfarbe_marketing-seminare:hover{
background:#007A60 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-32.svg) 50px 50px repeat;
background-size:60px;
background-position:0 0;
}
.muster_grafikdesign-seminare_blk{
background:#B0B0B0 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-33.svg) 50px 50px repeat;
background-size:60px;
background-position:0 0;
}
.muster_werbetext-seminare_blk, ul#seminar_liste li.werbetext-seminare a.farbe_grau:hover{
background:#B0B0B0 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-34.svg) 50px 50px repeat;
background-size:80px;
background-position:0 0;
}
.muster_werbefilm-und-tv-trailer-seminare_blk{
background:#B0B0B0 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-35.svg) 50px 50px repeat;
background-size:60px;
background-position:0 0;
}
.muster_marktforschungsseminare_blk{
background:#B0B0B0 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-36.svg) 50px 50px repeat;
background-size:60px;
background-position:0 0;
}
.muster_sprachseminare_blk{
background:#B0B0B0 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-37.svg) 50px 50px repeat;
background-size:83px;
background-position:0 0;
}
.muster_marketing-seminare_blk{
background:#B0B0B0 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-38.svg) 50px 50px repeat;
background-size:60px;
background-position:0 0;
}
.muster_grafikdesign-seminare_grau{
background:#E0E0E0 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-33.svg) 50px 50px repeat;
background-size:60px;
background-position:0 0;
}
.muster_werbetext-seminare_grau{
background:#E0E0E0 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-34.svg) 50px 50px repeat;
background-size:80px;
background-position:0 0;
}
.muster_werbefilm-und-tv-trailer-seminare_grau{
background:#E0E0E0 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-35.svg) 50px 50px repeat;
background-size:60px;
background-position:0 0;
}
.muster_marktforschungsseminare_grau{
background:#E0E0E0 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-36.svg) 50px 50px repeat;
background-size:60px;
background-position:0 0;
}
.muster_sprachseminare_grau{
background:#E0E0E0 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-37.svg) 50px 50px repeat;
background-size:83px;
background-position:0 0;
}
.muster_marketing-seminare_grau{
background:#E0E0E0 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-38.svg) 50px 50px repeat;
background-size:60px;
background-position:0 0;
}
.muster_grau{
background:#E0E0E0 url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/ptn/ptn-33.svg) 50px 50px repeat;
background-size:60px;
background-position:0 0;
}
.btn {
display: inline-block;
font-family: 'BrandonGrotesqueWeb-Regular';
padding: 25px 50px;
width: 100%;
text-align: center;
box-sizing: border-box;
font-size: 18px;
height: 100%;
text-transform: uppercase;
text-decoration: none;
}
.kasten {
display: block;
font-family: 'BrandonGrotesqueWeb-Regular';
padding: 12px 25px;
width: 200px;
text-align: center;
box-sizing: border-box;
z-index: 1000;
left: 50%; margin: -90px 0 0px -100px;
font-size: 14px;
position: absolute; text-transform: uppercase;
text-decoration: none;
}
.kasten:after {
position: absolute;
left: 90px;
top: 41px;
border-left: 12px solid transparent;
border-top: 12px solid #ff5000;
border-right: 12px solid transparent;
content: "";
}
.nwsl{
margin: 0 !important;
}
.visibi{
overflow:visible !important;
}
.unten_bei{
margin: -25px 0 0px -100px;
}
.btn_klein{
padding: 20px;
display: block;
width: 70%;
overflow: hidden;
position: relative;
text-align: center;
margin: 50px auto;
text-decoration:none;
}
ul#seminar_liste li a h2{
color:white !important;
}
.farbe_grafikdesign-seminare, .hoverfarbe_grafikdesign-seminare{
background-color:#001F5B;
}
.farbe_werbetext-seminare, .hoverfarbe_werbetext-seminare, .farbe_das-drehbuch-zum-drehbuch{
background-color:#FF5000;
}
.farbe_wirkstoff-werbetext, .hoverfarbe_wirkstoff-werbetext{
background-color: #0a2451;
}
.farbe_werbefilm-und-tv-trailer-seminare, .hoverfarbe_werbefilm-und-tv-trailer-seminare, .farbe_urban-poetry, .hoverfarbe_video-und-werbefilm-seminare, .farbe_video-und-werbefilm-seminare{
background-color:#E20079;
}
.farbe_marktforschungsseminare, .hoverfarbe_marktforschungsseminare, .farbe_bullshit-bingo{
background-color:#512C1D;
}
.farbe_sprachseminare, .hoverfarbe_sprachseminare{
background-color:#B72323;
}
.farbe_marketing-seminare, .hoverfarbe_marketing-seminare, .farbe_bleiben-sie-dran{
background-color:#007A60;
}
.farbe_grau{
background-color:#B0B0B0;
}
.farbe_graudunkel, .farbe_kreativ-konzeption-employer-branding{
background-color:#3C3C3B;
}
.borderfarbe_grafikdesign-seminare{
border:1px solid #2DA88B;
}
.borderfarbe_werbetext-seminare{
border:1px solid #FFDB00;
}
.borderfarbe_werbefilm-und-tv-trailer-seminare{
border:1px solid #FFDB00;
}
.borderfarbe_marktforschungsseminare{
border:1px solid #FF5000;
}
.borderfarbe_sprachseminare{
border:1px solid #FF5000;
}
.borderfarbe_marketing-seminare{
border:1px solid #2DA88B;
}
.borderfarbe_grau{
border:1px solid #B0B0B0;
}
.borderfarbe_weiss, .hoverborderfarbe_weiss{
border:1px solid white;
}
.hoverborderfarbe_weiss:hover{
background-color:white;
}
.textfarbe_grafikdesign-seminare, .textfarbe_blau, ul#seminar_liste li a h2.textfarbe_das-drehbuch-zum-drehbuch, .textfarbe_das-drehbuch-zum-drehbuch{
color:#001F5B !important;
}
.textfarbe_werbetext-seminare, .textfarbe_orange, .hovertextfarbe_orange:hover{
color:#FF5000 !important;
}
.hovertextfarbe_orange, .btn.orange{
color:white !important;
}
.textfarbe_werbefilm-und-tv-trailer-seminare, .textfarbe_magenta, ul#seminar_liste li a h2.textfarbe_bleiben-sie-dran, .textfarbe_bleiben-sie-dran{
color:#E20079 !important;
}
.textfarbe_marktforschungsseminare{
color:#512C1D !important;
}
.textfarbe_sprachseminare{
color:#B72323 !important;
}
.textfarbe_marketing-seminare{
color:#007A60 !important;
}
.textfarbe_gelb, ul#seminar_liste li a h2.textfarbe_bullshit-bingo, .textfarbe_bullshit-bingo, ul#seminar_liste li a h2.textfarbe_urban-poetry, .textfarbe_urban-poetry{
color:#FFDB00 !important;
}
.textfarbe_weiss, ul#seminar_liste li a h2.textfarbe_kreativ-konzeption-employer-branding, .textfarbe_kreativ-konzeption-employer-branding{
color:white !important;
}
#cg_logo.logo_klein{
background: url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/creative_game_logo-schmal-26.svg) 50% no-repeat;
background-size:contain;
height: 35px;
width: 450px;
z-index:5000;
position:absolute;
position:fixed;
top:40px;
left:50px;
}
#cg_logo.logo_gross{
background: url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/creative_game_logo-25.svg) 50% no-repeat;
background-size: 40%;
height: 100%;
width: 100%;
z-index: 1;
position: absolute;
}
#tapador{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #001F5B;
display: none;
}
#cg_logo.logo_klein_pub{
background: url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/creative_game_logo-schmal-40.svg) 50% no-repeat;
background-size:contain;
height: 35px;
width: 450px;
z-index:5000;
position:fixed;
top:40px;
left:50px;
}
#cg_logo.logo_gross_pub{
background: url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/creative_game_logo-39.svg) 50% no-repeat;
background-size: 40%;
height: 100%;
width: 100%;
z-index: 1;
position: relative;
}
#mc_embed_signup{
clear: left;
width: 80%;
margin: 0 auto;
}
#wrapper {
width:100%;
z-index: 100;
padding: 50px 0px;
position: relative;
}
.schwarz{
background-color:#151515;
}
.weiss{
background-color:white;
}
.grau{
background-color:#eee;
}
.orange{
background-color:#FF5000 !important;
}
.blau, .hoverfarbe_blau{
background-color:#001F5B !important;
}
.hoverfarbe_blau:hover{
background-color:#FF5000;
}
.gruen{
background-color:#007A60;
}
.magenta{
background-color:#E20079;
}
#titel{
margin: 0 50px;
padding-top: 60px;
} .hamburger {
z-index: 5000;
position: fixed;
top: 50px;
right: 40px;
padding: 10px;
display: inline-block;
cursor: pointer;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.hamburger.fadeout {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
-webkit-animation-duration: .7s;
animation-duration: .7s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: all cubic-bezier(.77,0,.175,1);
animation-timing-function: all cubic-bezier(.77,0,.175,1);
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger-box {
width: 40px;
height: 0px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 4px;
background-color:#1d1c1b;
border-radius: 5px;
position: absolute;
}
.hamburger-inner.weiss, .hamburger-inner.weiss::before, .hamburger-inner.weiss::after{
background-color:white;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
} .hamburger--3dx .hamburger-box {
-webkit-perspective: 80px;
perspective: 80px;
}
.hamburger--3dx .hamburger-inner {
-webkit-transition: all cubic-bezier(.77,0,.175,1) .7s;
-ms-transition: all cubic-bezier(.77,0,.175,1) .7s;
transition: all cubic-bezier(.77,0,.175,1) .7s;
}
.hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
-webkit-transition: all cubic-bezier(.77,0,.175,1) .7s;
-ms-transition: all cubic-bezier(.77,0,.175,1) .7s;
transition: all cubic-bezier(.77,0,.175,1) .7s;
}
.hamburger--3dx.active .hamburger-inner {
background-color: transparent;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.hamburger--3dx.active .hamburger-inner::before {
background-color:white;
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg);
}
.hamburger--3dx.active .hamburger-inner::after {
background-color:white;
-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
transform: translate3d(0, -10px, 0) rotate(-45deg);
} .read-more-state {
display: none;
}
.read-more-target {
max-height: 0;
font-size: 0;
transition: .25s ease;
display:none;
}
.read-more-state:checked ~ .read-more-target {
display: block;
font-size: inherit;
max-height: 999em;
margin: 30px 0 100px;
}
.read-more-state ~ .read-more-trigger:before {
content: '+ ';
font-size: 30px;
position: relative;
top: 3px;
left: -9px;
}
.read-more-state:checked ~ .read-more-trigger:before {
content: '- ';
font-size: 30px;
position: relative;
top: 2px;
left: -9px;
}
.read-more-trigger {
cursor: pointer;
display: inline-block; font-family: 'BrandonGrotesqueWeb-Regular';
width: 910px;
margin-left: -60px;
color: white; padding: 10px 30px;
box-sizing: border-box;
text-transform: uppercase;
font-size: 18px;
}
ul#navi{
position:fixed;
right:-400px;
text-align:right;
top:120px;
width:400px;
padding:0px;
list-style:none;
opacity:0;
z-index:5000;
-webkit-transition: all cubic-bezier(.77,0,.175,1) .7s;
-ms-transition: all cubic-bezier(.77,0,.175,1) .7s;
transition: all cubic-bezier(.77,0,.175,1) .7s;
}
ul#navi.active{
right:50px;
padding:0px;
list-style:none;
opacity:1;
z-index:5000;
-webkit-transition: all cubic-bezier(.77,0,.175,1) .7s;
-ms-transition: all cubic-bezier(.77,0,.175,1) .7s;
transition: all cubic-bezier(.77,0,.175,1) .7s;
}
ul#navi li {
list-style: none;
padding:0px;
margin: 0px;
position: relative;
}
ul#navi li a{
font-size: 46pt;
line-height: 54pt;
font-weight: normal;
color:white;
text-transform:uppercase;
text-decoration:none;
font-family: 'BrandonGrotesqueWeb-Regular';
}
ul#navi li a:hover{
color:#FF5000;
}
#navi_wrapper{
width:100%;
height:100%;
position:fixed;
z-index:4000;
overflow:hidden;
left:0;
top:0;
text-align:left;
margin:0;
padding:70px 70px 0px;
box-sizing:border-box;
background-color:#001F5B;
opacity:1;
display:none;
}
ul#seminar_kat{
list-style:none;
width:990px;
margin:100px auto;
padding:0; display:block;
}
ul#seminar_kat li{
float:left;
width: 300px;
height: 300px;
margin: 15px;
}
ul#seminar_kat li a{
display: flex;
align-items: center;
justify-content: center;
width:100%;
text-decoration:none;
height:100%;
position:relative;
overflow:hidden;
}
ul#seminar_kat li a:hover .hoverbild{
bottom:0;
opacity:1;
}
ul#seminar_kat li a:hover h2{
-webkit-transform: translate(0, -80%);
-moz-transform: translate(0, -80%);
-o-transform: translate(0, -80%);
-ms-transform: translate(0, -80%);
transform: translate(0, -80%);
opacity:0;
}
ul#seminar_kat li h2 {
font-family: 'BrandonGrotesqueWeb-Bold';
text-align:center;
color:white;
text-transform: uppercase;
padding: 0 20pt;
font-size: 16pt !important;
opacity:1;
}
.hoverbild{
position: absolute;
height: 100%;
bottom: -20%;
opacity:0;
left:0;
}
ul#seminar_liste, ul#trainer_liste, ul#check_liste, ul#partner_liste, ul#blog_liste{
list-style:none;
width:990px;
margin:50px auto;
padding:0;
overflow:hidden;
display:block;
}
ul#check_liste{
list-style:none;
width:100%;
margin:50px auto;
padding:0;
overflow:hidden;
display:block;
}
ul#seminarueb_liste, ul#referenzen_liste, ul#kontakt_liste{
list-style:none;
width:990px;
margin:20px auto;
padding:0;
overflow:hidden;
display:block;
}
ul#tags_liste{
list-style:none;
width:100%;
margin:20px auto;
padding:0;
overflow:hidden;
display:block;
}
ul#kontakt_liste li{
float: left;
margin: 20px 10px 0px;
width: 475px;
padding: 30px 0px 30px 30px;
color: white;
text-align: left;
box-sizing: border-box;
position:relative;
font-size: 20pt;
font-family: 'BrandonGrotesqueWeb-Regular';
}
.icon-ort p{
margin: 20px 10px 0px;
width: 475px;
padding: 30px 0px 30px 30px;
color: white;
text-align: left;
box-sizing: border-box;
position:relative;
font-size: 20pt;
font-family: 'BrandonGrotesqueWeb-Regular';
}
.vorkasten{
width: 80px;
max-height: 100%;
height:100%;
float: left;
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
ul#kontakt_liste li.adresse{
width: 971px;
}
ul#kontakt_liste.leiste li{
margin: 20px 2% 0px;
width: 29%;
}
ul#test_liste {
overflow: hidden;
list-style: none;
padding: 0;
margin: 50px auto;
width:990px;
height:100%;
position:relative;
}
ul#test_liste li{
z-index:10;
width:100%;
height:100%;
}
#controls{
width:60px;
height:60px;
position:absolute;
bottom:50%;
margin-top:30px;
z-index:5000;
opacity:0.5;
}
#controls:hover{
cursor:pointer;
opacity:1;
}
#controls.left{
left:0px;
}
#controls.right{
right:0px;
}
#bullets{
width: 30px;
height: 15px;
position: absolute;
left: 0;
right: 0;
margin:auto;
bottom: 80px;
}
.bullet_aktiv {
opacity: 1 !important;
cursor:default !important;
}
.bullet{
width: 10px;
height: 10px;
position: absolute;
z-index: 500;
cursor:pointer;
box-sizing:border-box;
background-color: white;
opacity: 0.5;
}
.bullet:hover{
opacity: 1;
}
ul#referenzen_liste li, ul#tags_liste li{
float:left;
background-color:white;
margin:15px;
padding:30px;
}
ul#referenzen_liste li a, ul#tags_liste li a{
text-decoration:none;
}
ul#tags_liste li:hover{
background-color:#FF5000;
color:white;
}
ul#seminar_liste li{
float:left;
width:465px;
margin:15px;
}
ul#partner_liste li{
float:left;
width:215px;
height:215px;
background-color:white;
margin:15px;
}
#p_bild{
height: 80%;
width: 80%;
float: left;
margin: 10%;
}
.graustufe{
filter: grayscale(100%) opacity(70%);
-webkit-filter: grayscale(100%) opacity(70%);
-ms-filter: grayscale(100%) opacity(70%);
}
.graustufe:hover{
filter: grayscale(0%) opacity(100%);
-webkit-filter: grayscale(0%) opacity(100%);
-ms-filter: grayscale(0%) opacity(100%);
}
ul#check_liste li{
float: left;
width: 100%;
margin: 5px;
padding: 30px;
position: relative;
box-sizing: border-box; }
ul#check_liste li:hover .checktitel{
margin-left:90px;
}
ul#seminar_liste li{
background-color:white;
}
ul#seminarueb_liste li{
float: left;
width: 100%;
margin: 15px 0;
background-color: white;
position:relative;
display: block;
overflow: hidden;
}
ul#trainer_liste li{
float:left;
width:100%;
margin:15px 0;
background-color:white;
}
ul#blog_liste li{
float:left;
width:100%;
margin:15px 0;
background-color:white;
position:relative;
}
ul#seminar_liste li a, ul#termin_liste li a, ul#check_liste li a, ul#kontakt_liste li a, ul#trainer_liste.ubersicht li a{
color: white;
text-decoration: none;
z-index: 10;
overflow: hidden;
position: relative;
}
#sem_titel{
width: 100%;
min-height: 150px;
padding: 25px 0;
}
.sem_titel{
padding: 0 10%;
box-sizing: border-box;
}
.sem_cat, .tr_cat{
text-align: left;
box-sizing: border-box;
font-family: 'BrandonGrotesqueWeb-Regular';
display: block;
text-transform: uppercase;
}
.tr_portrait{
position: absolute;
bottom: 25%;
left: 50%;
height: 30%;
z-index: 500;
transform: translateX(-50%);
}
.sem_cat{
color: white;
padding: 0 50px;
}
.v_untertitel{
text-align: left;
box-sizing: border-box;
display: block;
padding: 0 50px;
color:white;
}
.v_type{
text-align: left;
box-sizing: border-box;
text-transform: uppercase;
display: block;
padding: 0 50px;
font-family: 'BrandonGrotesqueWeb-Regular';
}
.v_bild{
width:50%;
height:300px;
float:left;
}
.v_info{
float:left;
width:50%;
}
.sem_name{
text-align: left;
padding: 0 50px;
box-sizing: border-box;
display: block;
}
.sem_datum{
font-size:32px;
font-family: 'BrandonGrotesqueWeb-Bold';
text-align:center;
}
#sem_inhalt{
text-align: left;
padding: 50px 50px 0;
box-sizing: border-box;
display: block;
}
#termin_inhalt{
padding: 30px;
}
ul#termin_liste{
display: block;
overflow: hidden;
margin: 0 50px;
padding:0;
}
ul#termin_liste li{
width: 425px;
background-color: white;
box-sizing: border-box;
list-style: none;
float: left;
margin: 10px;
}
ul#termin_liste li.weit{
width:870px;
}
ul#termin_liste li p{
margin: 10px;
text-align: left;
line-height: normal !important;
}
.starteas{
width:800px !important;
margin-bottom: 50px !important;
}
#testimonial{
color:white;
}
#testimonial p{
color:white;
text-align:center;
width: 650px;
margin: 10px auto;
}
#testimonial{
text-align:center !important;
}
.test_img{
border-radius:50px;
width: 100px;
height: 100px;
overflow: hidden;
margin:30px auto 10px;
}
.test_img img{
width: 100%;
}
.test_name{
text-transform:uppercase;
font-family: 'MuseoSlab-500';
font-weight: normal;
font-style: normal;
}
.test_stelle{
text-transform:initial;
}
.zentriert{
padding:0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.zentriertlinks{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
}
.text_zentriert{
text-align:center !important;
}
.muster_parallax_fix{
background-attachment:fixed;
}
.parallax{
top: 0px;
}
#tr_img{
width:200px;
height:333px;
float:left;
}
.ubersicht #tr_img{
width:100px;
height:150px;
float:left;
}
#bl_img{
width:200px;
height:100%;
position:absolute;
overflow:hidden;
display:block;
float:left;
}
#semueb_cat{
width:990px;
margin:0 auto;
height:180px;
position:relative;
display:flex;
overflow:hidden;
text-decoration:none;
padding-left:60px;
box-sizing:border-box;
}
#semueb_cat h2{
color:white !important;
}
.semueb_cat_fig{
position: absolute;
top: 0;
right: 10%;
height: 100%;
}
#semueb_img{
width: 5%;
min-height: 100%;
float: left;
display: block;
overflow: hidden;
position:absolute;
}
#semueb_inhalt{
overflow: hidden;
padding: 2%;
width: 80%;
height: 100%;
box-sizing: border-box;
float: left;
margin-left: 60px;
}
.semueb_teaser p{
margin:0 !important;
}
#tr_inhalt{
overflow: hidden;
padding: 35px;
width: 790px;
height: 100%;
box-sizing: border-box;
float: left;
}
ul {
list-style-type:square;
color:#003366;
}
#whitebox ul li, .reintext li{
padding-bottom:20px;
padding-left: 10px;
}
#whitebox h3{
padding:30px 0px 0px;
}
#whitebox ul{
text-align: left;
padding-left: 50px;
margin-bottom:30px;
}
ul#test_liste li ul{
margin:20px auto;
width:50%;
text-align:left !important;
}
ul#test_liste li ul li{
padding-bottom:10px;
}
ul#test_liste li ul li{
color:white !important;
}
ul#social_list{
list-style:none;
width:30%;
margin:100px auto 60px;
text-align:center;
display: block;
position:relative;
overflow: hidden;
}
ul#social_list li{
float:left;
width:50%;
font-size: 30pt;
margin:0 auto;
} .ubersicht #tr_inhalt{
padding:20px !important;
width: 500px !important;
}
#bl_inhalt{
overflow: hidden;
padding: 35px;
width: 790px;
height: 100%;
box-sizing: border-box;
float: left;
margin-left:200px;
}
.vollbreite{
width:100% !important;
}
.voll{
width:100% !important;
height:100% !important;
display:block !important;
overflow:hidden !important;
}
.relative{
position:relative !important;
}
.height300px{
height:300px !important;
}
.overflow_vis{
overflow:visible !important;
}
.image-slider{
height:65%;
overflow:hidden;
margin-top:120px;
background-color:#151515;
}
ul#slides {
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
display:none;
width:100%;
height:100%;
position:relative;
background-color:#151515;
}
ul#slides li{
z-index:10;
}
.slide_align_oben{
background-position: center 10% !important;
}
.slide_align_unten{
background-position: center bottom !important;
}
.image-slider img{
width:100%;
-webkit-filter: grayscale(55%);
-ms-filter: grayscale(55%);
filter: grayscale(55%);
}
.wrapper-dropdown-3 {
border: none !important;
outline: none !important;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
width: 100%;
height:100px;
padding: 30px 50px 30px 30px;
margin: 5px;
font-weight: normal;
font-style: normal;
font-size: 12pt;
box-sizing: border-box;
color: white;
background: url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/creative-game-pfeil_weiss_90.svg) no-repeat;
background-position: 95%;
background-color:#001F5B;
position: relative;
}
#breadcrump{
display:block;
overflow:hidden;
}
.breadcrumps {
display: inline-block;
width: auto;
float: left;
}
.wrapper-dropdown-3:hover{
background-color: #FF5000;
}
.wrapper-dropdown-3 .dropdown { position: absolute;
top: 84px;
left: 0;
right: 0;
padding:0; background-color: #FF5000;
border-top:1px solid white;
transition: all 0.3s ease-in;
list-style: none;
max-height: 400px;
overflow-y: auto;
z-index:1100; opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-3 .dropdown li a {
display: block;
text-decoration: none;
transition: all 0.3s ease-out;
padding: 10px 20px;
width:100% !important;
box-sizing:border-box;
}
.wrapper-dropdown-3 .dropdown li{
padding:0px;
margin:0px !important;
box-sizing:border-box;
width:100% !important;
} .wrapper-dropdown-3 .dropdown li:hover a {
background-color: #303030;
}
.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}
#main {
width: 990px;
margin: auto;
overflow:hidden;
}
#whitebox, #kontaktbox{
margin:30px 15px;
padding: 100px 150px ;
position:relative;
box-sizing:border-box;
background-color:white;
}
#whitebox.whitecheck{
padding: 100px 150px 200px;
}
#ver-wrapper{
height:auto;
}
#whitebox.ver{
width:46% !important;
margin: 30px 2% 0px !important;
box-sizing:border-box;
height:100%;
float:left;
}
.clear{
clear:both;
}
#error ul, #sucess ul{
padding-left:0px !important;
}
#error ul li, #sucess ul li{
padding-bottom:10px;
list-style:none;
}
.noticenter{
text-align: center !important;
padding-left:0px !important;
margin: 0 !important;
}
#anmeldeformular{
margin: 0 auto;
width: 80%;
}
input[type="text"], input[type="email"], textarea {
font-family:Verdana, sans-serif;
font-size:12pt;
width: 100%;
padding:20px;
border:none;
margin:10px 0px;
box-sizing:border-box;
background-color:white;
}
input[type="text"], input[type="email"], textarea {
padding:30px 50px;
max-width: 100%;
border: 0px;
font-size: 15px;
font-weight: normal;
line-height: 22px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-webkit-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
background-color: #f5f5f5;
border-bottom: 1px solid #fff;
box-sizing: border-box;
color: #000000;
}
textarea {
height: 268px;
resize: none;
}
input[type="text"]:focus, input[type="email"]:focus {
border: 5px solid #FF5000;
padding:25px 45px;
color:#FF5000 !important;
}
label {
display: inline;
}
.regular-checkbox {
display: none;
}
.regular-checkbox + label {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-webkit-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
background-color: #f5f5f5;
border-bottom: 1px solid #fff;
box-sizing: border-box;
color: #000000;
padding: 11px;
display: inline-block;
position: relative;
float: left;
}
.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.regular-checkbox:checked + label {
background-color: #FF5000;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
color:white;
}
.regular-checkbox:checked + label:after {
position: absolute;
top: 0px;
left: 3px;
}
#checker{
margin: 20px;
width: 100%;
display: block;
overflow: hidden;
}
.check-text{
display: block;
margin-left: 50px;
width: 650px;
}
#footer {
clear: both;
display: block;
overflow: hidden;
background-color: #333;
color:#888;
padding: 50px;
text-align:center;
}
#footer a {
text-decoration:none;
color:white;
}#footer a:hover {
color:#FF5000;
}
#footer p {
text-align:center;
}
#footernavi{
width:750px;
margin:0 auto;
}
ul#footer_liste {
width:250px;
float:left;
margin: 20px 0 50px;
padding:0px;
list-style:none;
overflow:hidden;
}
ul#footer_liste li{
list-style: none;
display: inline-block;
padding: 5px;
margin: 0px;
float: left;
width: 100%;
}
ul#footer_liste li.text_orange a{
color:#FF5000 !important
}
a.eckbuttons, input[type="submit"] {
border: solid 1px white;
padding: 30px 70px;
margin: 40px auto 80px;
display: block;
background-color: #FF5000;
-webkit-transition: all 0.3s;
transition: all 0.3s;
cursor: pointer;
font-family: 'BrandonGrotesqueWeb-Bold';
font-size:18px;
text-transform: uppercase;
color:white;
}
#anmeldeform input[type="submit"] {
float:right;
}
a.eckbuttons:hover, input[type="submit"]:hover {
border:solid 1px white;
background-color:#001F5B;
color:white;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
h1 {
font-family: 'MuseoSlab-500';
color:white;
font-weight: normal;
font-style: normal;
font-size: 40pt;
position:relative;
margin:0;
text-align:center;
}
.starteas h2{
color:#001F5B;
text-align:left;
font-family: 'MuseoSlab-500';
margin:45px 0;
font-weight: normal;
font-style: normal;
font-size: 40pt;
position:relative;
}
h2{
font-family: 'MuseoSlab-500';
font-weight: normal;
font-style: normal;
font-size: 20pt;
position:relative;
color:#FF5000;
}
#whitebox h2{
margin:20px 0;
}
.starteas h3{
font-family: 'MuseoSlab-500';
font-weight: normal;
font-style: normal;
margin: 48px 0 30px 0 !important;
padding:0;
font-size: 20pt;
position:relative;
color:#FF5000 !important;
}
section h2 {
margin:48px 0 30px 0;
}
#sprungmarken{
line-height:1.6em;
}
ul#seminarueb_liste h2, .ubersicht h2{
margin:0;
color:inherit !important;
}
h3 {
font-family: 'MuseoSlab-500';
font-weight: normal;
font-style: normal;
margin:0px;
padding: 0 10pt;
font-size:16pt;
}
ul#projektliste .projekttext h3, ul#newsliste .newstext h3{
font-family: ProximaNova-Light, sans-serif;
font-size:12pt;
margin:auto 0px;
position:relative;
text-transform:none !important; }
h4 {
font-weight:normal;
margin:80px 0px;
line-height:150%;
font-size:18pt;
}
h5 {
font-family: ProximaNova-Light, sans-serif;
font-weight: normal;
font-style: normal;
font-size:12pt;
text-transform: uppercase;
padding: 0px;
margin:0px;
position:relative;
}
p {
font-family: Verdana, sans-serif;
margin:0px 0px 30px;
line-height:150%;
font-size:12pt;
text-align:left;
}
a:link {
color:#001F5B;
}
a:visited {
color:#001F5B;
}
a:active {
color:#FF5000;
}
a:hover {
color: #FF5000;
}
@media only screen and (max-width: 1200px) {
.sem_titel {
padding: 0 2%;
}
header {
height: 90%;
}
}
@media only screen and (max-width: 1000px) {
ul#seminar_kat, ul#partner_liste, ul#blog_liste, #semueb_cat, ul#seminarueb_liste, ul#referenzen_liste, ul#kontakt_liste,ul#test_liste,#main,.starteas{
width: 660px !important;
}
ul#seminar_liste{
width: 465px;
}
.read-more-trigger {
width: 580px !important;
}
ul#trainer_liste {
width: 580px !important;
margin-left: -60px !important;
}
ul#kontakt_liste.botter li {
padding: 30px 0px 30px 0px;
}
ul#footer_liste,#footernavi,ul#termin_liste li,ul#termin_liste li.weit,ul#kontakt_liste li  {
width: 100%;
}
header {
height: 90%;
}
.ubersicht #tr_inhalt {
width: 360px !important;
}
#tr_inhalt {
width: 460px;
}
.tr_portrait {
bottom: 0;
} #whitebox, #kontaktbox {
padding: 100px 80px;
}
#cg_logo.logo_gross,#cg_logo.logo_gross_pub {
background-size: 70%;
}
ul#partner_liste li {
margin: 10px;
width:200px;
height:200px;
}
ul#seminarueb_liste.vollbreite {
width: 100% !important;
}
#bl_img {
width: 100px;
}
#bl_inhalt {
width: 560px;
margin-left: 100px;
}
.cat_fig {
position: absolute;
top: 0;
right: -50%;
height: 100%;
}
.check-text {
width: 80%;
}
}
@media only screen and (max-width: 680px) {
#cg_logo.logo_klein{
background: url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/creative_game_logo-mobil-42.svg) 50% no-repeat;
}
#cg_logo.logo_klein_pub{
background: url(https://www.creativegame.de/wp-content/themes/creativegame2017/img/creative_game_logo-mobil-43.svg) 50% no-repeat;
}
a.eckbuttons, input[type="submit"]{
padding: 30px 30px;
}
ul#seminar_kat, ul#trainer_liste, ul#partner_liste, ul#blog_liste, #semueb_cat, ul#seminarueb_liste, ul#referenzen_liste, ul#kontakt_liste,ul#test_liste,#main,.starteas,ul#seminar_liste,.read-more-trigger,#tr_inhalt{
width: 320px !important;
}
#semueb_inhalt {
overflow: hidden;
padding: 20px;
width: 300px;
height: 100%;
box-sizing: border-box;
float: left;
margin-left: 20px;
}
.ubersicht #tr_inhalt{
width:220px !important;
}
#tr_img {
width: 100%;
height: 433px;
float:none;
margin: 0 auto;
}
ul#trainer_liste {
margin-left:auto !important;
}
#main.ohnerand{
width:100% !important;
}
ul#seminar_liste li {
width: 100% !important;
}
#bl_img {
width: 0px;
}
#bl_inhalt {
width: 320px;
margin-left: 0px;
} h1{
font-size:18pt !important;
}
h2{
font-size: 14pt !important;
}
.starteas h3 {
font-size: 14pt !important;
}
.sem_titel {
padding: 0 2%;
}
ul#navi li a {
font-size: 24pt;
line-height: 30pt;
}
section{
margin:50px 0px;
}
.read-more-trigger {
margin-left: 0px !important;
}
ul#termin_liste {
margin: 0px;
}
.sem_datum {
font-size: 24px;
}
#testimonial p {
width: 300px;
}
.v_info {
width: 100%;
}
#whitebox {
margin: 30px 0px;
padding:100px 30px !important;
}
#whitebox ul {
padding-left: 20px;
}
ul#kontakt_liste li,.icon-ort p {
font-size: 16pt;
}
ul#check_liste li:hover .checktitel{
margin-left:60px;
}
}