/*
  crema WAG! Agentur für neue Medien, Schwetzingen
  http://www.crema.da
  Copyright (c) 2016 crema WAG!

  Farbwerte
  dunkelblau: #005395
  dunkelgrau: #444444

*/

/**********************************************/
/************** Layout Section ****************/
/**********************************************/
BODY {
background-color: rgb(250,250,250);
margin: 0px;
font-family: 'Droid+Sans',arial, sans-serif;
font-size: 16px;
font-style: normal;
/* line-height: 180%; */
color: black;
}

#pageset { }^

.clear {clear: both;}
.row {margin-right: 0px; margin-left: 0px;}
.col-sm-12 {margin-left: 20px; margin-right: 20px;}


/* HEADER */
.abclogo {position: absolute; right: 50px; top: 10px; z-index: 5;}
.abcimg {height: 120px; width: auto;}
.txtlogo {position: absolute; right: 130px; top: 10px;}
.verlauf {margin-top: 100px; height:20px; background: -moz-linear-gradient(left, #005395 40%, #ffffff 75%, #ffffff 75%); background: -webkit-linear-gradient(left, #005395 40%,#ffffff 75%,#ffffff 75%); background: linear-gradient(to right, #005395 40%,#ffffff 75%,#ffffff 75%);}
.flag-top-de {position:absolute; top: 20px; left:20px; width:40px; height:40px;}
.flag-top-en {position:absolute; top: 20px; left:65px; width:40px; height:40px;}

/* FOOTER */
.footer {background-color: #005395; padding: 50px;} 
a.txt-footer {color: white;}
a.txt-footer:hover {color: red;}
.glyph-spacer {margin-left: 13px;}
.glyph-spacer-blank {margin-left: 25px;}

/* IMAGES */
.titel-home {background-image: url('../images/img-title-home01.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; min-height: 650px;}
img {-webkit-box-shadow: 5px 5px 10px grey; -moz-box-shadow: 5px 5px 10px grey; box-shadow: 5px 5px 10px grey; height: auto; max-width: 100%!important;}
.schatten {-webkit-box-shadow: 0px 3px 6px black; -moz-box-shadow: 0px 3px 6px black; box-shadow: 0px 3px 6px black;}
.reflogo {margin: 15px 8px 1px 8px;}

/* BOXEN */
.boxen {margin-top: 300px;}
.box-zelle {background: rgba(255,255,255,0.8); padding: 3px; width: 100%; margin-top: 200px; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 14px;}

.box1 {position: relative; margin: 5px; background-image: url('../images/img-box-einkauf02.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; height: 250px; border: 1px solid black;}

.box1:hover {position: relative; margin: 5px; background-image: url('../images/img-box-einkauf01.jpg'); height: 250px; transition: all 1s ease-in-out; transform: scale(1.04);}

.box2 {margin: 5px; background-image: url('../images/img-box-interim02.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; height: 250px; border: 1px solid black;}
.box2:hover {background-image: url('../images/img-box-interim01.jpg'); height: 250px; transition: all 1s ease-in-out; transform: scale(1.04);}

.box3 {margin: 5px; background-image: url('../images/img-box-referenzen02.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; height: 250px; border: 1px solid black;}
.box3:hover {background-image: url('../images/img-box-referenzen01.jpg'); height: 250px; transition: all 1s ease-in-out; transform: scale(1.04);}

.box4 {margin: 5px; background-image: url('../images/img-box-ueber02.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; height: 250px; border: 1px solid black;}
.box4:hover {background-image: url('../images/img-box-ueber01.jpg'); height: 250px; transition: all 1s ease-in-out; transform: scale(1.04);}

/* INHALTE */
.box-content {margin-top: 30px;}
.box-content-img {margin-top: 55px;}

/* TEXTE */
h1 {font-size: 26px; color: #005395; font-weight: bold;}
a.txt {color: black;}
a.txt:hover {color: red;}
.txt-header {color: #005395; font-weight: bold; font-size: 28pt; text-shadow: black 0.02em 0.02em 0.2em;}
.txt-subheader {color: #005395; font-weight: bold; font-size: 14pt; text-shadow: black 0.01em 0.01em 0.1em;}
.txt-footer {color: white; font-size: 12px; line-height: 18pt;}
.bildunterschrift {font-size: 14px; color: #444444; line-height: 16px; text-align: center; margin-top: 20px;}
a.bildunterschrift {color: #444444;}
a.bildunterschrift:hover {color: red;}
.txt-bold {font-weight: bold;}


/**********************************************/
/************* Displays Section ***************/
/**********************************************/
@media (min-width: 100px) and (max-width: 399px) {
.abclogo {position: absolute; right: 5px; top: 2px; z-index: 50;}
.abcimg {height: 90px; width: auto;}
.txtlogo {position: absolute; left: 5px; top: 5px; z-index: 50;}
.txt-header {font-size: 20pt;}
.titel-home {margin-top: -300px; height: 200px!important;}
.boxen {padding-top: 300px;}
.box1, .box2, .box3, .box4 {height: 80px!important;}
.box-zelle {margin-top: 40px; width: 100%;}
.txt-subheader {font-size: 10pt; line-height: 5px;}
.box-content-img {text-align: center;}
}

@media (min-width: 400px) and (max-width: 767px) {
.txt-header {font-size: 20pt;}
.txt-subheader {font-size: 10pt;}
.titel-home {margin-top: -300px;}
.boxen {padding-top: 300px;}
.box1, .box2, .box3, .box4 {height: 80px!important;}
.box-zelle {margin-top: 40px; width: 100%;}
.box-content-img {text-align: center;}

}

@media (min-width: 768px) and (max-width: 990px) {
.titel-home {margin-top: -300px;}
.boxen {padding-top: 300px;}
.box1, .box2, .box3, .box4 {height: 80px!important;}
.box-zelle {margin-top: 40px; width: 100%;}
.box-content-img {text-align: center;}

}