html {
}
body {
margin:0;
padding:0;
font-family: 'Montserrat', Calibri, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
font-style: normal;
background-color:#F8F8F8;
}

#optin {
background-color: #68aa00;
color: #fff;
}

/* montserrat-200 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('https://coggy.de/fonts/montserrat-v15-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://coggy.de/fonts/montserrat-v15-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://coggy.de/fonts/montserrat-v15-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://coggy.de/fonts/montserrat-v15-latin-200.woff') format('woff'), /* Modern Browsers */
       url('https://coggy.de/fonts/montserrat-v15-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://coggy.de/fonts/montserrat-v15-latin-200.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('https://coggy.de/fonts/montserrat-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://coggy.de/fonts/montserrat-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://coggy.de/fonts/montserrat-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://coggy.de/fonts/montserrat-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('https://coggy.de/fonts/montserrat-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://coggy.de/fonts/montserrat-v15-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('https://coggy.de/fonts/montserrat-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://coggy.de/fonts/montserrat-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://coggy.de/fonts/montserrat-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://coggy.de/fonts/montserrat-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://coggy.de/fonts/montserrat-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://coggy.de/fonts/montserrat-v15-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('https://coggy.de/fonts/montserrat-v15-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://coggy.de/fonts/montserrat-v15-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://coggy.de/fonts/montserrat-v15-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://coggy.de/fonts/montserrat-v15-latin-500.woff') format('woff'), /* Modern Browsers */
       url('https://coggy.de/fonts/montserrat-v15-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://coggy.de/fonts/montserrat-v15-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('https://coggy.de/fonts/montserrat-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://coggy.de/fonts/montserrat-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://coggy.de/fonts/montserrat-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://coggy.de/fonts/montserrat-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('https://coggy.de/fonts/montserrat-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://coggy.de/fonts/montserrat-v15-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('https://coggy.de/fonts/montserrat-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://coggy.de/fonts/montserrat-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://coggy.de/fonts/montserrat-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://coggy.de/fonts/montserrat-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('https://coggy.de/fonts/montserrat-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://coggy.de/fonts/montserrat-v15-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-800 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('https://coggy.de/fonts/montserrat-v15-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://coggy.de/fonts/montserrat-v15-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://coggy.de/fonts/montserrat-v15-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://coggy.de/fonts/montserrat-v15-latin-800.woff') format('woff'), /* Modern Browsers */
       url('https://coggy.de/fonts/montserrat-v15-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://coggy.de/fonts/montserrat-v15-latin-800.svg#Montserrat') format('svg'); /* Legacy iOS */
}


/*  SECTIONS  */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/*  GROUPING  */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}
/*  GRID OF THREE  */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
/*  MOBILE */
@media only screen and (max-width: 750px) {
.col {
margin: 1% 0 1% 0%;
}
#nav a {
font-size:1.1em;
margin: 15px;
line-height:2.0em !important;
}
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 100%;
}
.span_1_of_3 {
width: 100%;
}
.span_2_of_2, .span_1_of_2 { 
width: 100%; 
}
.content_single_referenzen_ref a {
margin-top:0.5em !important;
padding: 2% !important;
}
.content_single_referenzen_ref p{
font-size:1.2em !important;
}
h1 {
font-size:1.4em !important;
font-weight:700;
}
.content_single_referenzen_ref_ref {
width:100% !important;
}
}
#headline {
font-size:11em;
letter-spacing: -0.05em;
line-height:90%;
color:#00bfff;
}
#headline_content {
margin:0 auto;
max-width:1200px;
padding:0.2em 1% 0.1em 1%;
width:98%;
}
#headline_2 {
font-size:8em;
color:#00bfff;
line-height:97%;
letter-spacing: -0.05em;
background: #fff;
margin-top:0.2em;
}
#headline_2_content {
margin:0 auto;
max-width:1200px;
padding:0 1% 0 1%;
width:98%;
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 7%;
  right: 20%;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #ff8717;
  font-size:35px;
  color: white;
  cursor: pointer;
  padding: 10px 15px 0px 15px;
  border-radius: 0px;
}

#myBtn:hover {
  background-color: #222;
}
h1 {
font-size:1.6em;
font-weight:700 !important;
color:#fff;
background-color:#0290fd;
padding:12px;
display:inline-block;
margin: 40px 0 20px 0px;
font-weight:200;
}
h2 {
font-size:1.5em;
color:#0290fd;
font-weight:500;
margin: 2% 1% 3% 0.5%;
line-height:1.1em;
}
h3 {
font-size:1.6em;
color:#555;
font-weight:500;
margin-top: 1.0em;
margin-left:0.3em;
}
a {
color: #0290fd;
text-decoration:none;
}
a img {
border-width: 0px;
}
ul li {
font-size:1.05em;
color:#555;
line-height:1.3em;
}
.content {
margin:0 auto;
max-width:1200px;
width:100%;
margin-bottom:70px;
}
.content p {
color:#333;
padding: 0 5px 0 5px;
font-size:1.15em;
line-height:1.4em;
font-weight:400;
}
.content img {
width:30%;
margin: 0 2% 2% 0;
float:left;
border-bottom:10px solid #00aef6;
}
.content_small p {
color:#4a4b57;
font-size:1.05em;
line-height:1.35em;
}
.content_small ul li {
font-size:1.0em;
color:#4a4b57;
line-height:1.5em;
margin-left:31%;
}
.content a {
color:#0290fd;
font-weight:normal;
text-decoration:none;
}
.content a:hover {
font-weight:normal;
text-decoration:none;
border-bottom:1px solid #000;
}
.content_single {
width:24%;
margin-right:1%;
float:left;
}
.content_single h2{
margin:0.5em 0 0.3em 0;
font-size:75%;
color:#777;
line-height:1.4em;
}
.content_single p{
margin-bottom:1.5em;
font-size:75%;
color:#777;
line-height:1.4em;
}
.content_single img {
width:100%;
margin-bottom: 5%;
border:0px;
}
.content_single a img {
width:100%;
margin-bottom: 5%;
border:0px;
}
.content_single_blue a {
color:#fff;
background-color:#0290fd;
padding: 5%;
}
.content_single_blue a:hover {
color:#000;
}
.content_single_triple {
width:33.0%;
padding-left:0.2%;
float: left;
}
.content_single_triple img {
width:100%;
margin-bottom: 5%;
border:0px;
}
.content_single_referenzen_ref_ref {
font-size:0.85em;
width:33%;
margin-right:0.3%;
float:left;
}
.content_single_referenzen_ref_ref img {
width:100%;
margin-bottom: 5%;
border:0px;
}
.content_single_referenzen_ref {
font-size:0.95em;
}
.colored {
width:33%;
margin: 0 0.3% 0 0;
float:left;
height:8px;
margin-bottom:3px;
}
.content_single_referenzen_ref h2{
margin:0.5em 0 0.3em 0;
font-size:0.9em;
color:#777;
line-height:1.4em;
}
.content_single_referenzen_ref p{
margin-bottom:1.5em;
font-size:0.96em;
font-weight:400;
color:#555;
line-height:1.35em;
}
.content_single_referenzen_ref img {
width:100%;
margin-bottom: 5%;
border:0px;
}
.content_single_referenzen_ref a {
color:#fff;
background-color:#0290fd;
padding: 5%;
line-height:3.5em;
}
.content_single_referenzen_ref a:hover {
color:#000;
}
.content_single_referenzen_ref_textlink a {
color:#000;
padding:0%;
background-color:#fff;
}
.content_single_media {
margin: 0 1% 10% 1%;
}
.content_single_media h2{
margin: 0.1em 0 0.7em 0;
font-size:1.2em;
font-weight:500;
color:#0e5db6;
}
.content_single_media p {
margin-bottom:1.5em;
font-size:0.95em;
font-weight:normal;
color:#555;
line-height:1.2em;
}
.content_single_media img {
width:100%;
border:0px;
border-bottom:3px solid #00aef6;
}
.content_single_media_blue a {
color:#fff;
background-color:#0290fd;
padding: 3%;
white-space: nowrap;
line-height:2.5em;
}
.content_single_media_blue a:hover {
color:#000;
}
.content_lingua {
margin:3% 0 0 0;
width:50%;
float:left;
height:2em;
}
.content_lingua_button a {
font-size:0.75em;
color:#fff;
background-color:#ff8717;
padding: 3%;
}
.content_lingua_button a:hover {
background-color:#3c424d;
}
.content_img {
margin:0 auto;
max-width:1200px;
width:98%; 
}
.content_img img {
width:100%;
margin: 0 0 2% 0;
border-bottom:10px solid #00aef6;
}
.content_showroom {
margin:0 auto;
max-width:1200px;
padding: 0 1% 0 1%;
width:98%;
margin-bottom:70px;
}
.content_showroom h1 {
font-size:1.8em;
color:#fff;
font-weight:normal;
margin-top:20px;
}
.content_showroom p {
font-size:1.0em;
color:#656575;
line-height:1.4em;
}
.content_showroom img {
width:80%;
margin: 0 2% 2% 0;
border-bottom:10px solid #00aef6;
}
.content_showroom a {
color:#00aef6;
font-weight:normal;
text-decoration:none;
}
.content_showroom a:hover {
font-weight:normal;
text-decoration:none;
border-bottom:1px solid #000;
}
#top_social {
margin:0 auto;
align:left;
width:98%; 
max-width:1200px;
padding:20px 1% 40px 1%;
}
#top_social_content {
float:left;
}
#top_social_start {
margin:0 auto;
align:left;
width:98%; 
max-width:1200px;
padding:20px 1% 20px 1%;
}
#top_social_start img {
width:50px;
}
#top_social_content_start {
float:left;
}
#head {
width:100% !important;
border-bottom: 0px solid #777;
margin-top:20px;
}
#head_content {
margin:0 auto;
width:98%; 
max-width:1200px;
padding:4% 1% 45px 1%;
}
#head_logo {
min-width:130px;
min-height:80px;
background-image:url(layout/coggy-kommunikation-logo.png);
background-repeat:no-repeat;
background-size: 140px 112px;
}
#head_logo img {
width:140px;
height:112px;
}
#head_content_start {
margin:0 auto;
width:98%; 
max-width:1200px;
padding:2.5% 1% 25px 1%;
}
#head_logo_start {
background-image:url(layout/coggy-kommunikation-logo.png);
background-repeat:no-repeat;
background-position: center;
margin-left:-5%;
background-size: 225px 180px;
}
#head_logo_start img {
width:225px;
height:180px;
position: relative;
left: 42%;
}
#head_name {
color:#0290fd;
font-size:1.0em;
letter-spacing: 1.4em;
font-weight:700;
margin:4.0em 0 0 0.6em;
padding-top:5px;
float:left;
}
#nav_hg {
width:100%;
border-top: 0px solid #00aef6;
border-bottom: 1px #000 solid;
}
#nav {
margin:0 auto;
padding: 1% 0 1.5% 0;
font-size:1.2em;
max-width:1200px;
width:98%; 
max-width:1200px;
}
#nav a {
color:#555;
font-size:1.0em;
font-weight: 700;
text-decoration:none;
margin: 0 20px 0 0;
line-height:1.65em;
}
#nav a:hover {
color:#000;
font-weight: 700;
text-decoration:none;
}
.nav_active {
color:#fff;
background-color: #0290fd;
padding:6px 10px 5px 10px;
font-size:1.0em;
font-weight: 700;
text-decoration:none;
margin: 0 20px 0 0;
line-height:1.6em;
}
#nav_kontakt a {
color:#fff;
font-size:1.0em;
background-color:#ffaa44;
padding:6px 10px 5px 10px;
font-weight: 700;
text-decoration:none;
margin: 0 20px 0 0;
line-height:1.6em;
}
#nav_kontakt a:hover {
text-decoration:none;
color:#fff;
background-color:#ff8717;
}
.nav_active_kontakt {
color:#fff;
font-size:1.0em;
font-weight: 700;
text-decoration:none;
margin: 0 20px 0 0;
line-height:1.6em;
}
#nav_hg_sub {
width:100%;
border-bottom: 0px #aaa solid;
}
#nav_hg_sub1 {
width:100%;
border-bottom: 0px #aaa solid;
}
#nav_sub1 {
margin:0 auto;
max-width:1200px;
width:98%; 
max-width:1200px;
padding: 8px 1% 10px 1%;
}
#nav_sub1 a {
color:#000;
font-size:1.0em;
letter-spacing:1px;
text-decoration:none;
margin: 0 13px 0 0;
line-height:1.4em;
}
#nav_sub1 a:hover {
color:#000;
text-decoration:none;
}
#nav_sub {
margin:0 auto;
max-width:1200px;
width:98%;
padding: 8px 1% 0px 1%;
}
#nav_sub a {
color:#555;
font-size:1.0em;
font-weight: 700;
text-decoration:none;
margin: 0 13px 0 0;
line-height:1.6em;
}
#nav_sub a:hover {
color:#000;
text-decoration:none;
}
.nav_active_sub {
color:#0290fd;
font-size:1.0em;
font-weight:700;
text-decoration:none;
margin: 0 13px 0 0;
line-height:1.6em;
}
#show {
width:100%;
background-color:#ff9705;
margin-top:1em;
}
#show_warm {
width:100%;
background-color:#bf0345;
margin-top:1em;
}
#show_black {
width:100%;
background-color:#111;
margin-top:1em;
}
#show_orange {
width:100%;
background-color:#ff7800;
margin-top:1em;
}
#show_yellow {
width:100%;
border-top: 1px solid #00aef6;
border-top: 5px solid #9be310;
border-bottom: 15px solid #9be310;
background-color:#f3e500;
margin-top:1px;
}
#show_yellow2 {
width:100%;
background-color:#f8bd25;
margin-top:1em;
}
#show_blue {
width:100%;
background-color:#00bffe;
margin-top:1em;
}
#show_darkblue {
width:100%;
background-color:#062784;
margin-top:1em;
}
#show_greyblue {
width:100%;
background-color:#aeb8c5;
margin-top:1em;
}
#show_pink {
width:100%;
background-color:#f50057;
margin-top:1em;
}
#show_transparent {
width:100%;
margin-top:1em;
}
#show_film {
width:100%;
background-color:#fff;
}
#show_2 {
width:100%;
border-bottom: 15px solid #9be310;
background-color:#fff;
margin-top:1px;
}
#show_content {
margin:0 auto;
width:100%;
}
#show_content img{
width:100%;
}
#show_full {
width:100%;
background-color:#00aef6;
margin-bottom:40px;
}
#show_content_full {
margin:-25px auto 0 auto;
max-width:100%;
padding:0;
width:100%;
background:#fff;
text-align:center;
}
#show_image img {
width:100%;
}
#show_gallery {
width:100%;
border-top: 1px solid #00aef6;
border-bottom: 15px solid #9be310;
background-color:#222;
margin-top:1px;
}
#show_content_gallery {
margin:0 auto;
max-width:1200px;
padding:0 1% 0 1%;
width:98%; 
max-width:1200px;
}
#show_content_gallery img{
}
.fluid_container {
margin: 0 auto;
width: 100%;
padding:0;
}
hr {
height: 1px;
color: #bbb;
background-color: #bbb;
border: none;
margin: 30px 0 35px 0;
}
#footer {
width:100%;
min-heigth:130px;
background-color:#222;
border-top:30px solid #0290fd;
margin-top:20px;
}
#footer_content {
margin:0 auto;
max-width:1200px;
width:98%; 
max-width:1200px;
padding: 10px 1% 100px 1%;
color:#fff;
}
#footer_content h1 {
font-size: 1.1em;
color:#fff;
background-color:#222;
display:block;
margin: 2.2em 0 0 -0.3em;
}
#footer_content p {
margin:0;
padding:0;
font-weight:normal;
font-size: 0.9em;
color:#fff;
line-height:1.6em;
}
.footer_single {
float:left;
margin-right:45px;
}
.footer_single img{
width:50px;
}
.footer_single_CI img{
width:200px;
}
#legal {
width:100%;
min-heigth:130px;
background-color:#333;
border-top:1px solid #555;
}
#legal_content {
margin:0 auto;
max-width:1200px;
width:98%;
padding: 10px 1% 30px 1%;
color:#fff;
}
.video-container {
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px; 
height: 0; 
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
width:100%;
position: absolute;
top: 0;
left: 0;
height: 100% !important;
}
.twitter_form {
margin: -0.7em 0 0 0;
padding: 0;
width: 100%;
float: left;
}
.content_twitter {
margin: -2.0em auto 1.0em auto;
max-width:1200px;
padding:0;
}
.content_twitter h2 {
font-size: 1.9em;
}
.twitter_ico {
float:left;
margin:0 12px 20px 0;
}
.twitter_ico img {
width:50px;
}
.twitter_coggy_logo {
float:left;
width: 40%;
margin-left:1.0em;
}
.twitter_coggy_logo img{
width: 85%
}
.tweet,
.query {
font-weight: 300;
font-size: 1.3em;
}
.tweet_list {
list-style: none;
margin: 0;
padding: 0;
overflow-y: hidden;
background-color: #fff;
}
.tweet_list li {
overflow-y: auto;
overflow-x: hidden;
padding: 0.3em;
list-style-type: none;
}
.tweet_list li a {
color: #00aef6;
font-size:1.3em:
}
.tweet_list .tweet_even {
background-color: #fff;
}
.tweet_list .tweet_avatar {
padding-right: 0.5em; float: left;
}
.tweet_list .tweet_avatar img {
vertical-align: middle;
}