/* ============ FONTS =============== */

/* montserrat-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('fonts/montserrat-v29-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/montserrat-v29-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/montserrat-v29-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/montserrat-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/montserrat-v29-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/montserrat-v29-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/montserrat-v29-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/montserrat-v29-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/montserrat-v29-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* ============ GENERAL =============== */

body {   -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         margin:0;
         padding:0;



         animation:fadein 0.9s;
         -moz-animation:fadein 0.9s;
         -webkit-animation:fadein 0.9s;
         scroll-behavior: smooth;

         /*
         -ms-user-select: none;
         -webkit-user-select: none;
         -moz-user-select: none;
         user-select: none;
         */

         }

div {   margin:0;
         padding:0;
        }

.wrapper {
        max-width: 1280px;
        padding: 0 0 0 0;
        margin: 0 auto;
         }



@media all and (max-width: 1300px) {
        .wrapper {
        max-width: 80%;
        padding: 0 0px 0 0px;
         }
}


@media all and (max-width: 1000px) {
        .wrapper {
        max-width: 800px;
        padding: 0 15px 0 15px;
         }
}


.wrapperwide {
        max-width: 1920px;
        padding: 0 80px 0 80px;
        margin: 0 auto;
         }


@media all and (max-width: 1460px) {
        .wrapperwide {
        padding: 0 15px 0 15px;
         }
}




.wrappereng {
        max-width: 800px;
        padding: 0 0 0 0;
        margin: 0 auto;
        border:0px solid #FF0000;
         }



@media all and (max-width: 1300px) {
        .wrappereng {
        max-width: 80%;
        padding: 0 0px 0 0px;
        border:0px solid #00FF00;
         }
}


@media all and (max-width: 1000px) {
        .wrappereng {
        width: 800px;
        padding: 0 15px 0 15px;
        border:0px solid #FFFF00;
         }
}

/* ============ IMG =============== */
img {width:100%;}

.img80 {width: 80%; margin-left:10%;}
         @media all and (max-width: 560px) { .img80 {width: 80%; margin-left:10%;}}

.img50 {width: 50%; margin-left:25%;}
         @media all and (max-width: 560px) { .img50 {width: 80%; margin-left:10%;}}

.img25 {width: 25%; margin:15px 37.5%;}
         @media all and (max-width: 560px) { .img25 {width: 50%; margin-left:25%}}




.imgpraem {width: 25%; margin-top:20px; margin-left:37.5%; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; }
         @media all and (max-width: 560px) { .imgpraem {width: 60%; margin-left:20%}}

.round {border-radius:50%;}


.imgmedaille {width: 80px; float:left; padding-right:15px;margin-top:15px;}
         @media all and (max-width: 560px) { .imgmedaille {width: 80px;}}


.imgtwin {width: 50%;float:left;}
         @media all and (max-width: 560px) { .imgtwin {width: 100%;}}

.imgthirds {width: 33.33%;float:left;}
         @media all and (max-width: 560px) {  .imgthirds {width: 50%;}}

.imgquads {width: 25%;float:left;}
         @media all and (max-width: 560px) {.imgquads {width: 50%;}}









/* ============ LOGO =============== */

.logohead {width:50.0%; margin:0;}

         @media all and (max-width: 1200px) {
         .logohead { width:49.5%; }

         }

         @media all and (max-width: 640px) {
         .logohead { width:99%; }

         }




.logo {width:28.0%; margin:60px auto 40px 36%;}

         @media all and (max-width: 1200px) {
         .logo { width:40%; margin:60px auto 40px 30%;}

         }

         @media all and (max-width: 640px) {
         .logo { width:70%;  margin:60px auto 40px 15%;}

         }


.logosub {font-size:110%; text-align:center; color:#ffffff; margin-bottom:20px; }
         @media all and (max-width: 1200px) {.logosub{font-size:100%; line-height: 1.3em; margin-bottom:30px; }}
         @media all and (max-width: 800px) {.logosub {font-size:90%; line-height: 1.3em; margin-bottom:30px; }}
         @media all and (max-width: 640px) {.logosub {font-size:70%; line-height: 1.3em; margin-bottom:30px;}}

/* ============ BACKGROUNDS =============== */

.btow {background-image: linear-gradient(#000000, #FFFFFF);}

.bgcolor_grey {background-color: #EFEFEF;}
.bgcolor_midgrey {background-color: #AFAFAF;}
.bgcolor_lightgrey {background-color: #DFDFDF;}

.bgcolor_one {background-color: #b1aba4;}
.bgcolor_white {background-color: #FFFFFF;}
.bgcolor_two {background-color: #dedbc1;}

.bgcolor_darkblue {background-color: #000025;}
.bgcolor_nightblue {background-color: #000f39;}
.bgcolor_blue {background-color: #184193;}
.bgcolor_lightblue {background-color: #a2b7e1;}
.bgcolor_shinyblue {background-color: #bccbe9 ;}
.bgcolor_brightblue {background-color: #dce9ff;}
.bgcolor_midblue {background-color: #0c206d;}



.bgcolor_blackdark {background-color: #000000;}

.bgcolor_black {background-color: #0D2F2E;}
.bgcolor_gold {background-color: #bea681;}

.bgcolor_rose {background-color: #fde7e7;}
.bgcolor_red {background-color: #011b40;}



.bgimg_1 {background-image: url(images_header/beerenhell2_comp.jpg)}



/* ============ buttons =============== */

.goto50,
.goto100 {

        margin-left:0%;
        margin-bottom:0px;
        color: #0000BF;
        border-top: 1px solid #0000BF;
        border-bottom: 1px solid #0000BF;
        background: ;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;


        opacity:1;


        font-family: 'Montserrat', Helvetica, Arial, sans-serif;
                font-size: 90%;
                font-weight:500;
                color: #CFCFCF;
                line-height:1.3em;
                letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;


        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}

.goto50 {
        width: 50%;
        background: #5F5F5F;
        float:left;
}



.goto100 {
        margin-top:30px;

        height: 40px;
        background: ;
        height: 100px;
        width: 100%;

        margin-left:0%;
        margin-bottom:0px;

}


.goto50:hover,
.goto100:hover {
        cursor:pointer;
        color: #FFFFFF;
        border: 0px solid #AFAFAF;
        background: #7ddc1c;
        transform: scale(1.0);

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}

.goto50:hover {
        background: #7ddc1c;
}

.goto100:hover {
        color: #FFFFFF;
        background: #7ddc1c;
}

/* Mid screens */
@media all and (max-width: 1700px) {
        .goto100 {
        height: 60px;

                }
}








.gotomore {
        margin-top:20px;
        border-top: 1px solid #6F6F6F;
        border-bottom: 1px solid #6F6F6F;
        margin-top:30px;
        width: 50%;
        margin-left:25%;
        height: 40px;
        background: ;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;
        opacity:1;

        font-family: 'Montserrat', Helvetica, Arial, sans-serif;
                font-size: 90%;
                font-weight:500;
                color: #6F6F6F;
                line-height:1.3em;
                letter-spacing: 0.3em;
                text-align:center;
                text-transform: uppercase;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}



.gotomore:hover {
        cursor:pointer;
        color: #0000BF;
        border-top: 1px solid #0000BF;
        border-bottom: 1px solid #0000BF;
        background: ;

        width: 56%;
        margin-left:22%;

        letter-spacing: 0.4em;
        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}


@media all and (max-width: 560px) {
        .gotomore {height: 50px; font-size: 70%;}
}


.hell   {
        border-top: 1px solid #bea681;
        border-bottom: 1px solid #bea681;
        color: #bea681;
}

.hell:hover   {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        color: #fff;
}






.order {
        margin-top:20px;
        border: 1px solid  #184193;

        margin-top:30px;
        width: 100%;
        margin-left:0%;
        height: 40px;
        background: #184193;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;
        opacity:1;

        font-family: 'Montserrat', Helvetica, Arial, sans-serif;
                font-size: 90%;
                font-weight:500;
                color: #bea681;
                line-height:1.3em;
                letter-spacing: 0.3em;
                text-align:center;
                text-transform: uppercase;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}



.order:hover {
        cursor:pointer;
        color: #fff;
        border: 1px solid #fff;
        background: #184193;

        letter-spacing: 0.4em;
        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}



/* ============ FONTS ATTRIBUTES =============== */
.bold {
        font-family: 'Montserrat', Helvetica, Arial, sans-serif;
        font-weight:600;
        letter-spacing: 0.4em;
        text-transform:uppercase;

}


.left {text-align:left;}
         @media all and (max-width: 640px) {.left {text-align:center; }}

.right {text-align:right;}
         @media all and (max-width: 640px) {.right {text-align:center; }}

.center {text-align:center;}
         @media all and (max-width: 640px) {.center {text-align:center; }}




/* ============ FONTS TYPO =============== */



h1,
h2 {
        font-family: 'Montserrat', Helvetica, Arial, sans-serif;
        font-weight:400;
        line-height: 1.2em;
        letter-spacing: 0.4em;
        color: #0000DF;
        text-transform:uppercase;
        margin:0;
}





.head1 {font-size:400%;}
         @media all and (max-width: 1200px) {.head1 {font-size:280%; }}
         @media all and (max-width: 800px) {.head1 {font-size:240%; }}
         @media all and (max-width: 640px) {.head1 {font-size:150%; }}


.head2 {font-size:220%;}
         @media all and (max-width: 1200px) {.head2{font-size:180%; line-height: 1.3em; }}
         @media all and (max-width: 800px) {.head2 {font-size:140%; line-height: 1.3em; }}
         @media all and (max-width: 640px) {.head2 {font-size:115%; line-height: 1.3em; }}







h3 {
        font-family: 'Montserrat', Helvetica, Arial, sans-serif;
        font-size: 120%;
        font-weight: 400;
        color: #000000;
        line-height:160%;
        letter-spacing: 0.25em;
        text-transform:uppercase;
        text-align:center;

}

         @media all and (max-width: 560px) {h3 {font-size:80%; line-height: 1.4em; }}


p {
        font-family: 'Montserrat', Helvetica, Arial, sans-serif;
        font-size: 140%;
        font-weight: 400;
        color: #000000;
        line-height:150%;
        letter-spacing: 0.05em;
}

         @media all and (max-width: 1200px){p {font-size:100%; line-height: 1.5em; }}
         @media all and (max-width: 860px) {p {font-size:95%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {p {font-size:95%; line-height: 1.4em; }}
         @media all and (max-width: 560px) {p {font-size:90%; line-height: 1.4em; }}


.longcopy {
        font-size: 120%;
        font-weight: 400;
        color: #000000;
}

         @media all and (max-width: 1200px){.longcopy {font-size:100%; line-height: 1.5em; }}
         @media all and (max-width: 860px) {.longcopy {font-size:95%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {.longcopy {font-size:95%; line-height: 1.4em; }}
         @media all and (max-width: 560px) {.longcopy {font-size:90%; line-height: 1.4em; }}



.anlauf {
        font-size: 160%;
        font-weight: 600;
        color: #000000;
        line-height:150%;
        letter-spacing: 0.05em;
}


@media all and (max-width: 1200px){.anlauf {font-size:140%;}}

.hyph,
.longcopy,
.anlauf {
         -moz-hyphens: auto;
         -o-hyphens: auto;
         -webkit-hyphens: auto;
         -ms-hyphens: auto;
         hyphens: auto;
}

.ergaenzungstext {
        font-size: 100%;
        font-weight: 300;
        color: #000000;
        line-height:160%;
        letter-spacing: 0.05em;
}

         @media all and (max-width: 560px) {.ergaenzungstext {font-size:80%; line-height: 1.4em; }}


.manifest {
        font-family: 'Roboto', sans-serif;
        font-family: 'Roboto Slab', serif;
        font-size: 180%;
        font-weight: 300;
        color: #000000;
        line-height:150%;
        letter-spacing: 0.05em;
         padding:0 30px 0 30px;

}

         @media all and (max-width: 1200px){.manifest {font-size:140%; line-height: 1.5em; }}
         @media all and (max-width: 860px) {.manifest {font-size:120%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {.manifest {font-size:100%; line-height: 1.4em; }}
         @media all and (max-width: 560px) {.manifest {font-size:100%; line-height: 1.4em; }}







.ziffer {font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-weight:300; font-size:1400%; letter-spacing:0.25em; text-align:center; color: #000000; margin-top:20px;}
         @media all and (max-width: 1500px) {.ziffer {font-size:800%; }}
         @media all and (max-width: 1200px) {.ziffer {font-size:600%; }}
         @media all and (max-width:  800px) {.ziffer {font-size:400%; margin-left:0%;}}
         @media all and (max-width:  640px) {.ziffer {font-size:360%; margin-left:0%;}}


.jahr {font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-weight:300; font-size:500%; letter-spacing:0.25em; text-align:center; color: #000000; margin-top:20px;}
         @media all and (max-width: 1500px) {.ziffer {font-size:300%; }}
         @media all and (max-width: 1200px) {.ziffer {font-size:200%; }}
         @media all and (max-width:  800px) {.ziffer {font-size:200%; margin-left:0%;}}
         @media all and (max-width:  640px) {.ziffer {font-size:200%; margin-left:0%;}}



.bu {
        font-size: 80%;
        color: #000000;
        line-height:160%;

}
         @media all and (max-width: 1200px){.bu {font-size:80%; line-height: 1.6em; }}
         @media all and (max-width: 860px) {.bu {font-size:75%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {.bu {font-size:65%; line-height: 1.4em; }}





.little {
        font-size: 80%;
        color: #000000;
        line-height:160%;
        padding:0 20px 0 20px;
}
         @media all and (max-width: 1200px){.little {font-size:80%; line-height: 1.6em; }}
         @media all and (max-width: 860px) {.little {font-size:75%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {.little {font-size:65%; line-height: 1.4em; }}







ul  {   font-family: 'Roboto', sans-serif;
        font-size: 105%;
        font-weight: 300;
        color: #000000;
        line-height:160%;
        letter-spacing: 0.05em;
        padding-left: 14px;
        list-style-type: square;
}

         @media all and (max-width: 1200px){ul {font-size:100%; line-height: 1.5em; }}
         @media all and (max-width: 860px) {ul {font-size:95%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {ul {font-size:95%; line-height: 1.4em; }}

li  {  }












a {
        color: #6F6F6F; text-decoration: none;
}

a:hover {
        color: #7ddc1c;
}







/* ---------- Startseite Weinflaschen nebeneinander ------------ */
.prod {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 80px;
grid-column-gap: 0px;
grid-row-gap: 0px;
margin:0 20px 0 20px;
border:0px solid #FF0000;

}

@media all and (max-width: 560px) {.prod {margin:0 5px 0 5px;}}

.prod_box { width:11.1%; float:left; }
.prod_pic { grid-area: 1 / 1 / 2 / 2; padding-bottom: 20px;}
.prod_txt { grid-area: 2 / 1 / 3 / 2; border:0px solid #FF0000; }


.prod_pic:hover { scale:1.05;
         -webkit-transition: .3s ease-in-out;
          transition: .3s ease-in-out;}

.prod_box:hover {
         filter: brightness(1.15);
         cursor:pointer;
         color:blue;
         -webkit-transition: .3s ease-in-out;
          transition: .3s ease-in-out;
          }

.wein {
        font-family: 'Montserrat', Helvetica, Arial, sans-serif;
        font-size: 80%;
        font-weight: 600;
        color: #000000;
        text-align:center;
        line-height:150%;
        letter-spacing: 0.05em;
        padding:0;
        margin:0;
        text-transform:uppercase;
}


/* unterzeile */
@media all and (max-width: 1500px){.wein {font-size:80%;}}
@media all and (max-width: 860px) {.wein {font-size:80%;}}
@media all and (max-width: 640px) {.wein {font-size:80%;}}
@media all and (max-width: 560px) {.wein {font-size:65%;}}

/* container Flasche und Text */
@media all and (max-width: 1600px) {.prod_box { width:16.666%;}}
@media all and (max-width: 1400px) {.prod_box { width:20%;}}
@media all and (max-width: 1100px) {.prod_box { width:25%;}}
@media all and (max-width: 700px)  {.prod_box { width:33.3%;}}
@media all and (max-width: 560px)  {.prod_box { width:33.333%;}}


















/*  ----- footer  --- */


.footer {background-color: #184193; }

.p_footer {
        font-size: 95%;
        font-weight: 300;
        color: #FFFFFF;
        line-height:160%;
        letter-spacing: 0.3em;
        text-transform:uppercase;
        margin:0;
        text-align:center;
}

@media all and (max-width: 640px) {.p_footer {font-size:70%; line-height: 1.4em; }}

.jump {
        color: #FFFFFF; text-decoration: none;
}

.jump:hover {
        color: #c3916a;
}






/* Social Media Icons */
.img_smicons {width: 50px;}

@media all and (max-width: 560px) {
         .img_smicons { width: 30px;}
         ul.share-buttons li{margin-right:8px;}
}

.img_smicons:hover {transform: scale(1.1);}

ul.share-buttons{
  list-style: none;
  padding: 0px;
  text-align: center;
  margin-left:15px;
}

ul.share-buttons li{
  display: inline;
  margin-right:15px;

}

ul.share-buttons .sr-only {
  position: absolute;
  padding: 0px;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}



/* ============ COLORS =============== */

.caram           {color: #7ddc1c;}
.gold2           {color: #c29315;}
.gold            {color: #bea681;}


.white           {color: #FFFFFF;}
.grey            {color: #9F9F9F;}

.darkblue       {color: #00413c;}
.blue           {color: #006390;}
.blau           {color: #184193;}
.midblue        {color: #59ab8d;}
.lightblue      {color: #b2dbc3;}

.orange          {color: #7ddc1c;}
.darkorange      {color: #9c2b03;}



/* ============ POSITIONS =============== */

.pad_L      {margin-left:40px;}
.pad_R      {margin-right:40px;}

.third_L      {margin-left:10%; padding: 0 15px 0 15px; }
.third_R      {margin-right:10%; padding: 0 15px 0 15px; }



@media all and (max-width: 680px) {
         .pad_L      {margin-left:0px;}
         .pad_R      {margin-right:0px;}

         .third_L      {margin-left:0%; padding: 0 15px 0 15px; }
         .third_R      {margin-right:0%; padding: 0 15px 0 15px; }

}






/*  ----- distancer  --- */

.gap5   {border-left: 0px solid; height: 5px; width: 0px;}
.gap10   {border-left: 0px solid; height: 10px; width: 0px;}
.gap20   {border-left: 0px solid; height: 20px; width: 0px;}
.gap40   {border-left: 0px solid; height: 40px; width: 0px;}
.gap60   {border-left: 0px solid; height: 60px; width: 0px;}
.gap80   {border-left: 0px solid; height: 80px; width: 0px;}
.gap100   {border-left: 0px solid; height: 100px; width: 0px;}


@media all and (max-width: 860px) {
.gap5   {border-left: 0px solid; height: 5px; width: 0px;}
.gap10   {border-left: 0px solid; height: 5px; width: 0px;}
.gap20   {border-left: 0px solid; height: 10px; width: 0px;}
.gap40   {border-left: 0px solid; height: 20px; width: 0px;}
.gap60   {border-left: 0px solid; height: 30px; width: 0px;}
.gap80   {border-left: 0px solid; height: 40px; width: 0px;}
.gap100   {border-left: 0px solid; height: 50px; width: 0px;}
}

/*  ----- displaying  --- */
.displaymob_none {display: none;}
         @media all and (min-width: 560px) {.displaymob_none {display: block;}
}




.displaysmart_none {display: none;}
         @media all and (min-width: 560px) {.displaysmart_none {display: block;}
}


.displaysmart_on {display: none;}
         @media all and (max-width: 559px) {.displaysmart_on {display: block;}
}

/* schaltet ungradzahlige Bilder aus */
.UGoff {display: block;}
         @media all and (max-width: 559px) {.UGoff {display: none;}
}






@keyframes fadein{
        from{
        opacity:0;}to{opacity:1;}}
        @-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}
        @-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}
        @-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}