/* Font downloaded from FontsForWeb.com */
@font-face {
         font-family: 'SansProLight';
         src: url('../font/SourceSansPro-Light.ttf') format('truetype');
}



body {-webkit-text-size-adjust:none;}
header,footer, nav, section {display:block;}

a:link, a:visited{font-size:14px; color:#0000EE; text-decoration:none; font-family:calibri, arial, sans-serif, helvetica;}
a:hover, a:focus, a:active{color:#681664; text-decoration:underline;}

html, body{margin:0; padding:0; width:100%; height:100%; background:#121212;}
body {font-family:'SansProLight', calibri, arial, sans-serif, helvetica; color:#333; overflow-x:hidden; overflow-y:auto;}

input[type="text"], input[type="button"] {width:50%; height:30px;}
div{overflow:hidden; box-sizing:border-box;}
h1, h2{margin-top:0px;}
img{border:0px;}

.poAb{position:absolute;}
.poRe{position:relative;}
.poFi{position:fixed;}

.fl{float:left;}
.fr{float:right;}

.w10{width:10%!important;}
.w20{width:20%!important;}
.w25{width:25%!important;}
.w33{width:33%!important;}
.w40{width:40%!important;}
.w50{width:50%!important;}
.wLeft, .wRight{width:49.5%!important;}
.wLeft{margin-right:1%;}
.w60{width:60%!important;}
.w70{width:70%!important;}
.w75{width:75%!important;}
.w80{width:80%!important;}
.w90{width:90%!important;}
.w100{width:100%!important;}
.wAuto{width:auto; overflow-x:scroll;}

.h100{height:100%;}

.maPa0{margin:0px; padding:0px;}
.mt25{margin-top:25px;}
.mt50{margin-top:50px;}

.mb25{margin-bottom:25px;}
.mb50{margin-bottom:50px;}

.pad25px{padding-top:25px; padding-bottom:25px;}
.pad50px{padding-top:50px; padding-bottom:50px;}

.pad5{padding-left:5%; padding-right:5%;}
.pad10{padding-left:10%; padding-right:10%;}
.pad20{padding-left:20%; padding-right:20%;}
.pad30{padding-left:30%; padding-right:30%;}

.pad25pxlr{padding-left:25px; padding-right:25px;}
.pad50pxlr{padding-left:50px; padding-right:50px;}


.paTo100{padding-top:100px;}
.paTo200{padding-top:200px;}
.pabo100{padding-bottom:100px;}

.diNo{display:none;}
.diIn{display:inline!important;}
.cuPo{cursor:pointer;}

.textWhite{color:#fff!important;}

.backgroundBlack{background:#000;}
.backgroundDarkGrey{background:#121212;}
.backgroundDarkGreyT{background-color: rgba(18, 18, 18, 0.7);}
.backgroundHamaVision{background:#007d85;}


.colorWhite{color:#fff;}
.colorBlack{color:#333;}
.colorGrey{color:#ccc;}
.HamaVisionColor{color:#007d85;}

.foSi15{font-size:15px!important;}
.foSi20{font-size:20px!important;}
.foSi22{font-size:22px!important;}
.foSi25{font-size:25px!important;}
.foSi30{font-size:30px!important;}
.foSi40{font-size:40px!important;}


.lineHeight50{line-height:50px;}
.lineHeight75{line-height:75px;}
.lineHeight100{line-height:100px;}

.ta_l{text-align:left;}
.ta_c{text-align:center;}
.ta_r{text-align:right;}

.ovVi{overflow:visible;}

/*===========================================================
                         Bewegung
===========================================================*/
#LogoBox, #SoundBox, #ImageBox, #menu{
                  -webkit-transition:all 1s ease;
                  -moz-transition:all 1s ease;
                  -o-transition:all 1s ease;
                  transition:all 1s ease;
}

/*===========================================================
                         Bewegung
===========================================================*/
.shadowWhite{-webkit-box-shadow: 2px 2px 5px 0px rgba(255,255,255,0.75);
             -moz-box-shadow: 2px 2px 5px 0px rgba(255,255,255,0.75);
             -o-box-shadow: 2px 2px 5px 0px rgba(255,255,255,0.75);
             box-shadow: 2px 2px 5px 0px rgba(255,255,255,0.75);
}



/*===========================================================
                         Header
===========================================================*/
#header{z-index:10; padding-top:5px; padding-left:50px; padding-right:50px;}
#logo, #menuButton{height:50px;}

#menu{z-index:15; right:-500px; top:0px; height:100vh; width:500px; padding:25px; line-height:50px;}
#menu.on{right:0px;}
#menu img{height:30px!important; width:auto; margin-right:10px; margin-left:5px; padding-top:10px;}
#Warenkorb{width:40px!important; margin-left:0px!important; margin-right:5px!important;}
#menu a:link, #menu a:visited{font-size:22px; color:#fff; text-decoration:none; font-family:calibri, arial, sans-serif, helvetica; display:block;}
#menu a:hover, #menu a:focus, #menu a:active{color:#007d85; text-decoration:underline;}

/*===========================================================
                         Slider
===========================================================*/
#slider{z-index:1; top:60px; min-height:750px; height:auto; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);}
#slider .datei{z-index:2;}
#slider .verlauf{z-index:3; height:750px!important; left:0px;}
#slider h1{font-size:75px;}
#slider .text{z-index:3;}
#slider .text a:link, #slider .text a:visited{font-size:22px; color:#007d85; text-decoration:none; font-family:calibri, arial, sans-serif, helvetica;}
#slider .text a:hover, #slider .text a:focus, #slider .text a:active{color:#007d85; text-decoration:underline;}
#SliderHerz, #SliderFavorit, #SliderQuelle, .SliderWarenkorb, .buttonStyle, #SliderAudio{height:25px;}

#slider h1, #slider h2{margin:0px;}

#Suchen input[type="button"] {width:50%; height:50px;}


/*===========================================================
                         Section
===========================================================*/
#section{z-index:5; color:#fff;}

.stockListe{display:inline;}

#SearchBox, #FavBox, #LogoBox, #SoundBox, #ImageBox{overflow-x:scroll; -ms-overflow-style:none; scrollbar-width:none;}
#SearchBox::-webkit-scrollbar, #FavBox::-webkit-scrollbar, #LogoBox::-webkit-scrollbar, #SoundBox::-webkit-scrollbar, #ImageBox::-webkit-scrollbar{display:none;}

/*===========================================================
                         Footer
===========================================================*/
#footer{z-index:10; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);}
#footer a:link, #footer a:visited{font-size:14px; color:#ccc; text-decoration:none; font-family:calibri, arial, sans-serif, helvetica; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);}
#footer a:hover, #footer a:focus, #footer a:active{color:#fff; text-decoration:underline;}

.lizenzfreieBilderBoxHuelle{float:left; width:250px; margin-right:25px; box-sizing:border-box;}
.lizenzfreieBilderBox{float:left; width:250px; height:225px; box-sizing:border-box; border:1px solid #ccc; margin-bottom:5px; border:1px solid #ccc; padding:5px; background:#fff; box-sizing:border-box;}
.lizenzfreieBilderBox img{width:100%; margin:0px; padding:0px; display:block; border:0px;}

/*===========================================================
                         Footer
===========================================================*/



@media screen and (max-width:1350px){
         .pad10{padding-left:5%; padding-right:5%;}
         .pad20{padding-left:10%; padding-right:10%;}
         .pad30{padding-left:20%; padding-right:20%;}
}


@media screen and (max-width:1200px){
         #sliderDisplayRightBox{display:none; visibility:hidden;}
         #slider .w50{width:100%!important;}
         #sliderImage{width:auto!important; height:650px;}
}

@media screen and (max-width:1024px){
         .pad20{padding-left:5%; padding-right:5%;}
         .pad30{padding-left:10%; padding-right:10%;}
         #logo, #menuButton{height:40px;}

         #slider{padding-top:50px;}
         #slider h1{font-size:40px!important;}
         #slider .w33{width:100%!important;}
         #slider .verlauf{display:none; visibility:hidden;}
}


@media screen and (max-width:765px){
         .pad30, #header.pad50pxlr {padding-left:5%!important; padding-right:5%!important;}
         .w33{width:50%!important;}
         .wLeft, .wRight{width:100%!important;}
         .wLeft{margin-right:0%; margin-bottom:25px;}

         #logo, #menuButton{height:30px;}
         #SuchenBox{padding-top:50px!important;}

         #sliderImage{width:auto!important; height:500px; margin-left:-150px;}
         #slider{min-height:500px; padding-top:40px;}
         #slider .w20, #slider .w70, #slider .w10{width:100%!important;}
         .sliderWarenkorbDateien{border-bottom:1px solid #fff; padding-bottom:25px; margin-bottom:25px;}
         .sliderListe{display:inline;}

         .stockListe{float:left; text-align:left; display:block; width:100%; font-size:20px;}
         .footer_links{ margin-bottom:25px;}
}

@media screen and (max-width:600px){

}

@media screen and (max-width:500px){
         #menu{width:100%; right:-100%;}
}