/*
#####################################
#                                   #
#       EDO-& Diving-Service        #
#                                   #
#####################################
*/
/* lato-regular - latin */
/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/lato-v17-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/lato-v17-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/lato-v17-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/lato-v17-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/lato-v17-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/lato-v17-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}

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

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

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

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

/* Mein Zeichensatz mit Zeichen für Externen Link einbinden (enthält nur 1 Zeichen)) */
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?pn5eqi');
  src:  url('fonts/icomoon.eot?pn5eqi#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?pn5eqi') format('truetype'),
    url('fonts/icomoon.woff?pn5eqi') format('woff'),
    url('fonts/icomoon.svg?pn5eqi#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Externen Link automatisch kennzeichnen */
a[href^="http:"]:after, a[href^="https:"]:after
{
	  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  color:blue;
  content: " \e900";
  margin:0;
  padding:0;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Externen Link kennzeichnen - Kennzeichnung für Links auf der eigenen Seite wieder entfernen */
a[href^="https://www.eod-diving.com"]:after, a[href^="https://www.eod-diving.com"]:after
{
	content: "";
	padding: 0px;
}
/* Externen Link kennzeichnen - Mit einem zusätzlichen Button - funktioniert auch innerhalb eines Links */
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  color:blue;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-Externer_Link_final:before {
  content: " \e900";
  margin:0;
  padding:0;
}

p {
    margin-bottom: 1.5em;
}
.kursiv {
    font-style: italic;
}
.mitte {
    text-align: center;
}
.braun {
    color: #880000;
}
.padding10 {
    padding:10px;
}



* { margin: 0;
    padding: 0;}
    
html, body {
    width:100%;
    font-family:'Lato',arial,sans-serif;
    color: #586667;
    line-height: 1.6;
    font-size: 1.0em;
    padding:0px;
    margin:0px;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
header, nav, main {
    display: block;
}

nav#scrollup {
    position:absolute;
    width:100%;
    background-color: #fff;
    z-index: 1100;
}



div#top {
    width: 100%;
    margin:auto auto;
    border-top : 5px solid #880000; 
}
div#topdesktop {
    display:none;
}
div#top ul {
    display: block;
    width:100%;
    max-width: 940px;
    background-color: #fff;
    margin: auto auto;
     
}
div#top ul li {
    display: table;
    float: right;
}
div#top ul li a {
    text-align: center;
    display: table-cell;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px 0 15px;
    width: 100%;
    height:4.55em;
    vertical-align: middle;
    color:#666;
}

div#top ul li a:hover {
    color: #880000;
}

header {
     width:100%;
    margin: auto auto;
}

img#logo {
    display:none;
}

img#logo_nav {
    margin: 3px 10px;
    position: absolute;
    left: calc((100vw - 956px) / 2 );
    box-shadow: 0 0 4px #000000;
}

#bild_startseite {
    text-align: center;
    background-color: #808080;
    border-bottom : 5px solid #880000;
}

#bild_startseite img {
    width:100%;
    max-width: 940px;
    height: auto;
    vertical-align: bottom;
}

div#eod-slider-wapper {
    width:100%;
    background-color: #808080;
    border-bottom : 5px solid #880000;
}

div#eod-slider {
    display: block;
    width:100%;
    max-width: 940px;
    margin: auto auto;
}

a.umenue {
    display: inline-block;
    text-decoration: none;
    padding: 7px 5px;
    border: 1px solid #DADADA;
    background-color: #EAEAEA;
    color: #586667;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    font-size: 0.8em;
}

main {
      width:97%;
    margin: auto auto;
    max-width: 910px;
    padding: 0 1.5% 40px 1.5%;  
}

h1 {
    padding: 2.0em 0 0.6em 0;
    border-bottom: 1px solid #EAEAEA;
    font-weight: normal;
    color: #880000;
    text-align: center;
    margin-bottom: 0.8em;
}

h2 {
    color: #880000;
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.2em;
}
h2.ol {
    text-align: left;
}

h3 {
    color: #586667;
    font-size: 1.05em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.6em;
}
h3.ol {
    text-align: left;
}

hr {
    display: block;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
    border-style: inset;
    border-top-style: inset;
    border-bottom-style: inset;
    border-top: #fff;
    border-bottom: 1px solid #EAEAEA;
}

div.abstand {
    height:70px;
    border-bottom: ;
}

div.einbildblock{
    width: 100%;
    text-align: center;
    margin-bottom: calc(940 * 0.02px);
}

div.einbildblock img{
    max-width: 100%;
    vertical-align: bottom;
}

div.zweibildblock_r img, div.zweibildblock_l img{
    width:100%;
    max-width: 640px;
    vertical-align: bottom;
    text-align: center;
}
div.zweibildblock_r, div.zweibildblock_l {
    margin-bottom: calc(940 * 0.02px);
}

div.zweibildblock_r {
    display: inline-block;
    width: 49%;
    margin-left: 1%;
}

div.zweibildblock_l {
    display: inline-block;
    width:49%;
    margin-right: 1%;
}

div.dreibildblock_l img, div.dreibildblock_m img, div.dreibildblock_r img {
    width:100%;
    max-width: 640px;
    vertical-align: bottom;
    text-align: center;
}

div.dreibildblock_l, div.dreibildblock_m, div.dreibildblock_r {
    display: inline-block;
    width: 32%;
}

div.dreibildblock_l {
    margin-right: 2%;
}
div.dreibildblock_m{
    margin: 0px;
}

div.dreibildblock_r {
    margin-left: 2%;
}

blockquote {
    padding: 12.5px 25px;
    margin: 0 0 25px;
    font-size: 16px;
    border-left: 5px solid #880000;
    background-color: #eeeeee;
}

ul.einruecken {
    margin-left:2%;
    width:98%;
}
ul.aufzaehlung2 {
    margin-top: 1.8ex;
    column-count: 2;
    column-gap: 2em;
    column-width: 270px;
    column-rule-style: solid;
    column-rule-width: 1px;
    column-rule-color: #fff;
}



footer {
    display: block;
    background-color: #3F3F3F;
    padding: 7px 0 7px 0;
    border-bottom: 15px solid black;
    max-width: 100%;
    margin:auto auto;
    padding: 0;
    color:#fff;
    font-size: 0.8em;
}
div#flexbox_footer {
    width:100%;
    margin-bottom: 1em;
    -moz-box: 1; /* Safari 6.1+ */
    -ms-flexbox: 1; /* IE 10 */
    -webkit-flex: 1; /*Chrome*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}
div#fuss1, div#fuss2, div#fuss3 {
    flex-grow: 1;
    width:100%;
    color:#fff;
    align-self: stretch;
    line-height: 2em;
}
div#fuss1 {
    max-height: 220px;
}
div#fuss1 ul.sitemap, div#fuss2 ul.sitemap, div#fuss3 ul.sitemap {
    margin: 0;
    padding:0;
}
div#fuss3 li {
    list-style: none;
    float:left;
    margin-right:2em;
}
div#fuss3 li a {
    text-decoration: none;
    color: #fff;
    padding: 6px 0;
    text-decoration: underline;
}
div#fuss1 li a, div#fuss2 li a {
    display:inline-block;
    padding: 0.4em 0;
    text-decoration: underline;
}

div#fuss4 {
    display: block;
    width:100%;
    max-width: 940px;
    margin: 0 auto;
    color:#fff;
    padding:5px 0 20px 0;
    font-size: 0.8em;
    line-height: 1em;
    border-top: 1px solid #fff;
    text-align: center;
}

div#fuss4 a {
    color: #fff;
    margin: 0 10px;
}

.emailadresse a {
    color:#fff;
    padding:5px;
}

ul.seite_sitemap li {
    display: run-in;
    height:2em ;
    margin-bottom: 1em;

}
ul.seite_sitemap li a {
    border:1px solid #C0C0C0;
    padding:4px ;
    background-color: #fff;
    text-decoration: none;
    color: #740000;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.umapkarte {
    width: 100%; max-width: 455px; height: auto;
}

div.copyright_osm {
    position: relative;
    top: -65px;
    margin:0px;
    padding:0px;
    font-size:10px;
    line-height: 12px;
    width:100%;
    max-width: 455px;
    background-color: rgba(255,255,255,0.7);
    color: #808080;
    border-bottom: 30px solid #3f3f3f;
    z-index: 11;
}
div.copyright_osm a {
    text-decoration: none;
}
 ul.sitemap {
     display: block;
     list-style-type: none;
     width:100%;
     max-width: 940px;
     margin: auto auto;
 }
 ul.sitemap li {
     float: left;
 }

div#slider_links {
    position: absolute;
    top:50%;
    left:50%;
    width:100%;
    max-width:940px;
    z-index:12;
    background-color: rgba(0,0,0,0);
    transform: translate3d(-50%,-50%,0);
    text-align: center;
    color:#fff;
}
a.link_button {
    display: inline-block;
    /* border:        1px solid #AA0000; */
    border-radius: 11px;
    box-shadow:    2px 2px 4px #000000;
    padding:       5px 10px;
    color:         #ffffff;
    display:       inline-block;
    text-align:    center;
    background-image: linear-gradient(#E30000, #AA0000);
    font-size:1.5em;
    text-decoration: none;
    line-height: 0.8em;
}
.text_uppercase {
    text-transform: uppercase;
    font-size: 1.5em;
    text-shadow: 1px 2px 7px #000,1px 2px 10px #000, 1px 2px 15px #000, 1px 2px 25px #000;
}

.referenzen {
    width:100%;
    display: flex;
    -moz-box: 1; /* Safari 6.1+ */
    -ms-flexbox: 1; /* IE 10 */
    -webkit-flex: 1; /*Chrome*/
    flex-direction: row;
    flex-wrap: wrap;
    align-items: strech;
    justify-content: space-between;
}
article.referenzen h2 {
    width:100%;
}
.referenzen_item1, .referenzen_item2 {
    min-width: 280px;
}
.referenzen_item3, .referenzen_item4, .referenzen_item5 {
    min-width: 280px;
}
.referenzen_item1 {
    padding: 3% 1.5% 0 0;
    width:45%;
}
.referenzen_item2  {
    padding: 3% 0 0 1.5%;
    width:auto;
    min-width: 150px;
}

.referenzen_item3 {
    padding: 0.5em;
    background-color: #E9E9E9;
    min-width: 200px;
    text-align: center;
}
.referenzen_item4 {
    padding: 0.5em;
    background-color: #E9E9E9;
    min-width: 200px;
    text-align: center;
}
.referenzen_item5 {
    padding: 0.5em;
    background-color: #E9E9E9;
    min-width: 200px;
    text-align: center;
}

.referenzen_item1 img, .referenzen_item2 img {
    width: 100%;
    vertical-align: bottom;
}

.stellenanzeigen h2 {
    font-size: 1em;
    text-align: left;
}
.stellenanzeigen h3 {
    font-weight: normal;
    text-align: left;
    color: #880000;
}
.stellenanzeigen img {
    float: right;
    width: 49%;
    max-width:360px;
    height: auto;
    margin-left:1em;
}
.stellenanzeigen ul{
    margin-bottom: 0.5em;
}

.stellenanzeigen blockquote{
    margin-bottom: 0.5em;
    margin-left:1.7em !important;
}

span.ort {
    font-size: 0.8em;
}
.clear {
    clear: both;
    height:1em;
}
/* KONTAKTFORMULAR */
form#kontakt {
    margin:0 6% 0 6%;
    padding:0;
    font-size: 1.2em;
}
form#kontakt label {
    display: inline-block;
    width:23%;
    margin: 0 2% 0 0.3em;
}
form#kontakt label.nachricht {
    float:left;
}
form#kontakt label.control-label {
    float:left;
    width:100%
}
form#kontakt input {
    height:2.0em;
}
span.datenschutz {
    display: inline-block;
    width: 100%;
    font-size: 0.8em;
    line-height: 1em;
    margin-left:0.3em;
}
form#kontakt textarea, form#kontakt input{
    font-size:0.9em;
    line-height:1em;
    width:95%;
    font-family: 'Arial', sans-serif;
    border: 1px solid #C0C0C0;
    color: #7D7D7D;
    margin:0.3em;
    padding:0px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

span.senden {
    display: inline-block;
    padding: 0.35em 0.5em 0.35em 0.5em !important;
    font-size: 1.4em;
    color: #808080;
}
.input_zahl {
    width:80px !important;
}
input#datenschutz {
		height: 1em !important;
		width: 1em !important;
}
input#antispam {
    display:none;
}
input#datenschutz {
    height: 1em !important;
    width: 1em !important;
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    padding: 10px !important;
}
td.kontakt_success {
    vertical-align: top;
    width: auto;
    min-width: 30%;
}
button.formular {
    background: -moz-linear-gradient(top, #E4E4E4 0%, #DDDDDC 50%,#CDCDCD 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E4E4E4), color-stop(50%,#DDDDDC), color-stop(100%,#CDCDCD));
    background: -webkit-linear-gradient(top, #E4E4E4 0%,#DDDDDC 50%,#CDCDCD 100%);
    background: -o-linear-gradient(top, #E4E4E4 0%,#DDDDDC 50%,#CDCDCD 100%);
    background: -ms-linear-gradient(top, #E4E4E4 0%,#DDDDDC 50%,#CDCDCD 100%);
    background: linear-gradient(to bottom, #E4E4E4 0%,#DDDDDC 50%,#CDCDCD 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#CDCDCD',GradientType=0 );
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #808080;
    color: #808080 !important;
    margin:0.3em;
    font-size: 1.3em;
}
.border_normal {
    border: 1px solid #034F82 !important;
}
.border_rot {
    border: 1px solid red !important;
}
.error_abstand {
    margin-left: 0.3em !important;
}
/* before: erzeugt hier ein vorangestelltes <br /> */
span.error_abstand::before {
  content: "\A";
  white-space: pre;
}
.rot, .alert-danger, ul.fehler_massages {
    color:red;
}
table.success_tpl {
    font-size:1.3em;
}
.col-sm-10 img {
    border: 1px solid #C0C0C0;
}

/* ANIMATION STARTSEITE */

ul#box_startseite {
    list-style-type: none;
}
li.box_item {
    outline: 6px solid;
    -moz-transition-property: outline-offset, outline-color;
    -o-transition-property: outline-offset, outline-color;
    -webkit-transition-property: outline-offset, outline-color;
    transition-property: outline-offset, outline-color;
    outline-offset: 15px;
    outline-color: rgba(136,0,0,0);;
    width:31.7%;
    background-color: #fff;
    transition-duration: 0.5s;
    margin-right:21px;
    margin-top: 10px;
    margin-bottom:11px;
    float:left; 
    background-color: #878787;
    display: block;
}

.box_item:focus,
.box_item:hover {
    outline-color: rgba(136,0,0,0.5);
    outline-offset: -6px;    
}
li.box_item:nth-child(3n) {
    margin-right:0px;
}
.box_item img {
    width:100%; 
    height: auto;
    vertical-align: bottom;
}

li.box_item div {
    display: inline-block;
    width:96%;
    padding:2%;
    color:#fff;
    min-height: 4em;
    text-align: center;
    
}

li.box_item div.nurtext {
    display: table-cell;height:278px; background-color:#880000; font-size:1.2em; font-style:italic; vertical-align:middle;
}

/* ####################################################################################################################### */
/* # bis 380                                                                                                         # */
/* ####################################################################################################################### */
@media only screen and (max-width: 380px) {
#eod-slider-wapper {
    display: none;
}
}

/* ####################################################################################################################### */
/* # bis 799                                                                                                         # */
/* ####################################################################################################################### */
@media only screen and (max-width: 799px) {


div#fuss1 {
    text-align: center;
}
div#fuss2 {
    text-align: center;
    font-size: 1.4em;
}
div#fuss3 {
    text-align: center;
}
div#fuss4 {
    text-align: center;
    font-size: 1.4em;
}
div#fuss4 ul {
    display: block;
    width:90%;
    padding: 5%;
    margin-bottom: 0.1em;
    clear: both;
}
div#fuss4 ul li a {
    display: block;
    padding: 0.5em;
    margin-bottom: 5px;
}
div.copyright_osm {
    margin: auto auto;
}
.umapkarte {
    width: 100%; max-width: 799px; height: auto;
}

a.umenue {
    font-size: 1.2em;
}
div#top ul li a {
    padding:0;
}


}



/* ####################################################################################################################### */
/* # 800 bis 1199                                                                                                          # */
/* ####################################################################################################################### */
@media only screen and (min-width: 800px) and (max-width: 939px) {

div#flexbox_footer {
    width:100%;
    margin-bottom: 1em;
    -moz-box: 1; /* Safari 6.1+ */
    -ms-flexbox: 1; /* IE 10 */
    -webkit-flex: 1; /*Chrome*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}
div#fuss1, div#fuss2, div#fuss3 {
    flex:1;
    flex-grow: 1;
    color:#fff;
    align-self: stretch;
    line-height: 1.2em;
}
div#fuss1 {padding: 2%;
    min-width:310px;
    text-align: center;
    font-size: 1.2em;
}

div#fuss2 {padding: 2%;
    min-width:310px;
    font-size: 1.2em;
}

div#fuss3 {padding: 2%;
    min-width:310px;
}
div#fuss3 {
    text-align: center;
}
div#fuss3 p img {
clear:both;
    text-align: center;
}

div#fuss1 ul.sitemap, div#fuss2 ul.sitemap, div#fuss3 ul.sitemap {
    margin: 0;
    padding:0;
}
div#fuss3 li {
    list-style: none;
    float:left;
    margin-right:2em;
}
div#fuss3 li a {
    text-decoration: none;
    color: #fff;
    padding: 6px 0;
    text-decoration: underline;
}
div#fuss1 li a, div#fuss2 li a {
    display:inline-block;
    padding: 0.4em 0;
    margin-bottom: 0.4em;
    text-decoration: underline;
}



div#fuss4 {
    width:100%;
    color:#fff;
}
ul.seite_sitemap li {
    display: run-in;
    height:2em ;
    margin-bottom: 1em;

}
ul.seite_sitemap li a {
    border:1px solid #C0C0C0;
    padding:4px ;
    background-color: #fff;
    text-decoration: none;
    color: #740000;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

}

/* ####################################################################################################################### */
@media only screen and (max-width: 940px) {
img#logo_nav {
    display:none;
}

div#top ul li a {
    height:2.5em;
    color:#666;
}

div#top ul li a:hover {
    color: #880000;
}

main {
      width:96%;
    margin: auto auto;
    max-width: 940px;
    padding: 0 2% 40px 2%;
}
/* ANIMATION STARTSEITE */

ul#box_startseite {
    list-style-type: none;
}
li.box_item {
    outline: 6px solid;
    -moz-transition-property: outline-offset, outline-color;
    -o-transition-property: outline-offset, outline-color;
    -webkit-transition-property: outline-offset, outline-color;
    transition-property: outline-offset, outline-color;
    outline-offset: 15px;
    outline-color: rgba(136,0,0,0);;
    width:48.0%;
    background-color: #fff;
    transition-duration: 0.5s;
    margin-right:21px;
    margin-top: 10px;
    margin-bottom:11px;
    float:left;
    background-color: #878787;
    display: block;
}

.box_item:focus,
.box_item:hover {
    outline-color: rgba(136,0,0,0.5);
    outline-offset: -6px;
}

li.box_item:nth-child(3n) {
    margin-right:21px;
}

li.box_item:nth-child(2n) {
    margin-right:0px;
}
.box_item img {
    width:100%;
    height: auto;
    vertical-align: bottom;
}

li.box_item div {
    display: inline-block;
    width:96%;
    padding:2%;
    color:#fff;
    min-height: 5em;
    text-align: center;

}

div.dreibildblock_l, div.dreibildblock_m, div.dreibildblock_r {
    display: inline-block;
    width: 46%;
    margin: 0 2%;
}

div.dreibildblock_r {
    display: block;
    clear: both;
    width:96%;
    text-align: center;
    margin-top:4%;
}

div#top ul li a {
    padding:0px;
}

.referenzen_item1, .referenzen_item2 {
    width:48%;
}
.referenzen_item3, .referenzen_item4, .referenzen_item5 {
    width: 30%;
    min-width: 120px;
    margin: 4% 0 4% 0;
}


}

/* ####################################################################################################################### */
/* # bis 640                                                                                                         # */
/* ####################################################################################################################### */
@media only screen and (max-width: 640px) {
li.box_item {
    width:100% !important;
}
div.copyright_osm {
    height:2em;
    top: -73px;
}
div.dreibildblock_l, div.dreibildblock_m, div.dreibildblock_r {
    clear: both;
    display: block;
    width: 100%;
    margin: 4% 0 0 0 ;
    text-align: center;
}

div.zweibildblock_r, div.zweibildblock_l {
    margin-bottom: calc(940 * 0.02px);
}

div.zweibildblock_r {
    display: block;
    width: 100%;
    margin: 4% 0 0 0 ;
    text-align: center;
}

div.zweibildblock_l {
    display: block;
    padding:0;
    width:100%;
    margin: 4% 0 0 0;
    text-align: center;
}

ul.einruecken {
    margin-left:5%;
    width:95%;
}

.referenzen_item1, .referenzen_item2 {
    width:100%; 
    padding:0px;
}
.referenzen_item3, .referenzen_item4, .referenzen_item5 {
    width: 100%;
    min-width: 120px;
    margin: 1% 0 1% 0;
}

div#slider_links {
    position: absolute;
    top:35%;
    left:50%;
    width:100%;
    max-width:940px;
    z-index:12;
    background-color: rgba(0,0,0,0);
    transform: translate3d(-50%,-50%,0);
    text-align: center;
    color:#fff;
}
a.link_button {
    display: inline-block;
    /* border:        1px solid #AA0000; */
    border-radius: 11px;
    box-shadow:    2px 2px 4px #000000;
    padding:       5px 10px;
    color:         #ffffff;
    display:       inline-block;
    text-align:    center;
    background-image: linear-gradient(#E30000, #AA0000);
    font-size:1.2em;
    text-decoration: none;
    line-height: 0.8em;
}
.text_uppercase {
    text-transform: uppercase;
    font-size: 1.1em;
    line-height: 1.1em;
    text-shadow: 1px 1px 5px #000,1px 1px 7px #000, 1px 2px 10px #000;
}


}

/* ####################################################################################################################### */
@media only screen and (min-width: 940px) {

div#top {
    display: none;
}

div#topdesktop {
    display:block;
    width: 100%;
    margin:auto auto;
    border-top : 5px solid #880000;
}

div#topdesktop ul {
    display: block;
    width:100%;
    max-width: 940px;
    background-color: #fff;
    margin: auto auto;

}
div#topdesktop ul li {
    display: table;
    float: right;
}
div#topdesktop ul li a {
    text-align: center;
    display: table-cell;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px 0 15px;
    width: 100%;
    height:4.55em;
    vertical-align: middle;
    color:#666;
}

div#topdesktop ul li a:hover {
    color: #880000;
}

.referenzen_item1, .referenzen_item2 {
    flex: 1;
    min-width: 350px;
}
.referenzen_item3, .referenzen_item4, .referenzen_item5 {
    flex: 2;
    width: 150px;
}

.referenzen_item3 {
    padding: 0.5em;
    margin: 4% 0 4% 0;
    background-color: #E9E9E9;
    min-width: 200px;
    text-align: center;
}
.referenzen_item4 {
    padding: 0.5em;
    margin: 4% 4% 4% 4%;
    background-color: #E9E9E9;
    min-width: 200px;
    text-align: center;
}
.referenzen_item5 {
    padding: 0.5em;
    margin: 4% 0 4% 0;
    background-color: #E9E9E9;
    min-width: 200px;
    text-align: center;
}

div#flexbox_footer {
    width:940px;
    margin: auto auto;
    margin-bottom: 1em;
    -moz-box: 1; /* Safari 6.1+ */
    -ms-flexbox: 1; /* IE 10 */
    -webkit-flex: 1; /*Chrome*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}
div#fuss1, div#fuss2, div#fuss3 {
    flex:1;
    flex-grow: 1;
    color:#fff;
    align-self: stretch;
    line-height: 2em;
}
div#fuss1 {
    padding: 0 1.5% 0 0;
    min-width: 455px;
}
div#fuss1 ul.sitemap, div#fuss2 ul.sitemap, div#fuss3 ul.sitemap {
    margin: 0;
    padding:0;
}
div#fuss3 li {
    list-style: none;
    float:left;
    margin-right:2em;
}
div#fuss3 li a {
    text-decoration: none;
    color: #fff;
    padding: 6px 0;
    text-decoration: underline;
}
div#fuss1 li a, div#fuss2 li a {
    display:inline-block;
    padding: 0.4em 0;
    margin-bottom: 0.4em;
    text-decoration: underline;
}


div#fuss2 {padding: 0 1.5% 0 1.5%;}
div#fuss3 {padding: 0 0 0 1.5%;}
div#fuss3 img {
    float:right;
}
div#fuss4 {
    width:100%;
    color:#fff;
}
ul.seite_sitemap li {
    display: run-in;
    height:2em ;
    margin-bottom: 1em;

}
ul.seite_sitemap li a {
    border:1px solid #C0C0C0;
    padding:4px ;
    background-color: #fff;
    text-decoration: none;
    color: #740000;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
form#kontakt textarea, form#kontakt input{
    width:70%;
}
}

/* ####################################################################################################################### */
@media only screen and (min-width: 1350px) {
img#logo {
    display: block;
    position: fixed;
    left:6%;
    left: calc((100vw - 1356px) / 4 );
    top:25%;
    box-shadow: 0 0 6px #000000;
    z-index:10;
}
img#logo_nav {
    display: none;
}
}
}