/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 08.12.2018, 15:07:05
    Author     : juergen
*/

/* iconrow */

/* Fest im templte - nicht mehr benutzen!! */
@media (min-width: 200px) {
    .iconrow1 h1 { color: #000; font-weight: 300;font-size: 4em;}
    .iconrow1 h2 { color: #000; font-weight: 300;font-size: 2em;}
    .iconrow1 h3 { color: #000; font-weight: 300;font-size: 1.5em;}
    .iconrow1 h4 { color: #000; font-weight: 300;font-size: 1em;}
    .iconrow1 h5 { color: #000; font-weight: 300;font-size: 1em;}
    .iconrow1 p  { color: #000; font-weight: 400;font-size: 1em;}

    .iconrow1 {
        border-top: 42px solid #94c11c;
        background: url('/fileadmin/templates/spiruli1/img/bg-iconrow-1.jpg');
        width: 100%;
        border-bottom: 42px solid  #94c11c;
        padding-top:32px;
        padding-bottom:32px;
        color: #000;
    }
    
}
@media (min-width: 768px) {

 .iconrow1 {
        border-top: 42px solid #94c11c;
        background: url('/fileadmin/templates/spiruli1/img/bg-iconrow-1.jpg');
        width: 100%;
        border-bottom: 42px solid  #94c11c;
        padding-top:32px;
        padding-bottom:32px;
        color: #000;
    }
    .iconrowcontent1 {
        width: 100%;
        margin: auto;
                padding-left: 8%;
        padding-right: 8%;
    }

    .iconrowcontent1 figure img {
        max-height: 4em;
    }
    
    .iconrow1 h2 {
       font-size: 1.5em;
           color: #559040;
    }
    
}
@media (min-width: 992px) {

 .iconrow1 {
        border-top: 42px solid #94c11c;
        background: url('/fileadmin/templates/spiruli1/img/bg-iconrow-1.jpg');
        width: 100%;
        border-bottom: 42px solid  #94c11c;
        padding-top:32px;
        padding-bottom:32px;
        color: #000;
    }
    .iconrowcontent1 {
         border: 0px solid red;
         margin: auto;
         padding-left: 8%;
         padding-right: 8%;
    }

     .iconrowcontent1 figure img {
      max-height: 200px;
    }

    .iconrow1 h1 {
       font-size: 4em;
       color: #000;
       font-weight: 300;
    }
    .iconrow1 h2 {
       font-size: 2em;
       color: #000;
       font-weight: 300;
    }
    .iconrow1 h3 {
       font-size: 1.5em;
       color: #000;
       font-weight: 300;
    }
   
    
}
/* Fest im templte - nicht mehr benutzen!! */



/* frame-icons1  SCHWARZ */
@media (min-width: 992px) {
    
    .frame-icons1 { 
        border: 1px solid red;
        border-top: 42px solid #94c11c;
        background: url('/fileadmin/templates/spiruli1/img/bg-iconrow-1.jpg');
        width: 100%;
        border-bottom: 42px solid  #94c11c;
        padding-top:32px;
        padding-bottom:32px;
        color: #000;
        padding-left: calc(8vw);
        padding-right: calc(8vw);
    }
    
    .frame-icons1 {
/*         border: 1px solid red;
         margin: auto;
         padding-left: 8%;
         padding-right: 8%;*/
    }

     .frame-icons1 figure img {
      max-height: 200px;
    }

    .frame-icons1 h1 {
       font-size: 4em;
       color: #333;
       font-weight: 300;
    }
    .frame-icons1 h2 {
       font-size: 2em;
       color: #333;
       font-weight: 300;
    }
    .frame-icons1 h3 {
       font-size: 1.5em;
       color: #333;
       font-weight: 300;
    }
    
    
    .border-top-gruen-dunkel { border-top: 42px solid #94c11c; }
    .border-bottom-gruen-dunkel { border-bottom: 42px solid #94c11c; }
    
    .border-top-gruen-hell { border-top: 42px solid #94c11c; }
    .border-bottom-gruen-hell { border-bottom: 42px solid #94c11c; }
    
    
    
    

}

/* frame-icons1  WEISS MOBILE BERSION */

/* frame-icons1  WEISS */
@media (min-width: 200px) {
    
    .frame-icons1-weiss { 
        width: 100%;
        padding-top:32px;
        padding-bottom:32px;
        color: #fff;
    }
    
    .frame-icons1-weiss {
    }

     .frame-icons1-weiss figure img {
      
    }

    .frame-icons1-weiss h1 {
       font-size: 3em;
       color: #fff;
       font-weight: 300;
    }
    .frame-icons1-weiss h2 {
       font-size: 2em;
       color: #fff;
       font-weight: 300;
    }
    .frame-icons1-weiss h3 {
       font-size: 1.5em;
       color: #fff;
       font-weight: 300;
    }
    .frame-icons1-weiss h4 {
       font-size: 1.5em;
       color: #fff;
       font-weight: 300;
    }
    .frame-icons1-weiss h5 {
       font-size: 1.5em;
       color: #fff;
       font-weight: 300;
    }
    .frame-icons1-weiss p {
       line-height: 1.1em;
       color: #fff;
       font-weight: 300;
    }
 
    
    
    
    
    .border-top-gruen-dunkel { border-top: 42px solid #94c11c; }
    .border-bottom-gruen-dunkel { border-bottom: 42px solid #94c11c; }
    
    .border-top-gruen-hell { border-top: 42px solid #94c11c; }
    .border-bottom-gruen-hell { border-bottom: 42px solid #94c11c; }
    
    
    
    

}







/* frame-icons1  WEISS */
@media (min-width: 992px) {
    
    .frame-icons1-weiss { 
        width: 100%;
        padding-top:32px;
        padding-bottom:32px;
        color: #fff;
        padding-left: calc(8vw);
        padding-right: calc(8vw);
    }
    
    .frame-icons1-weiss {
/*         border: 1px solid red;
         margin: auto;
         padding-left: 8%;
         padding-right: 8%;*/
    }

     .frame-icons1-weiss figure img {
      /* max-height: 213px; */
      max-width: 100%;
    }

    .frame-icons1-weiss h1 {
       font-size: 4em;
       color: #fff;
       font-weight: 300;
    }
    .frame-icons1-weiss h2 {
       font-size: 2em;
       color: #fff;
       font-weight: 300;
    }
    .frame-icons1-weiss h3 {
       font-size: 1.5em;
       color: #fff;
       font-weight: 300;
    }
    .frame-icons1-weiss h4 {
       font-size: 1.5em;
       color: #fff;
       font-weight: 300;
    }
    .frame-icons1-weiss h5 {
       font-size: 1.5em;
       color: #fff;
       font-weight: 300;
    }
    .frame-icons1-weiss p {
       color: #fff;
       font-weight: 400;
       line-height: 1.4;
    }
 
    
    
    
    
    .border-top-gruen-dunkel { border-top: 42px solid #94c11c; }
    .border-bottom-gruen-dunkel { border-bottom: 42px solid #94c11c; }
    
    .border-top-gruen-hell { border-top: 42px solid #94c11c; }
    .border-bottom-gruen-hell { border-bottom: 42px solid #94c11c; }
    
    
    
    

}






/* frame-icons2*/
@media (min-width: 992px) {
    
    .frame-icons2 { 
        border: 1px solid red;
        border-top: 42px solid #94c11c;
        background: url('/fileadmin/templates/spiruli1/img/bg-iconrow-2.jpg');
        width: 100%;
        border-bottom: 42px solid  #94c11c;
        padding-top:32px;
        padding-bottom:32px;
        color: #000;
    }

/*
.bg-bild1 { background: url('/fileadmin/templates/spiruli1/img/bg-iconrow-1.jpg'); }
.bg-bild2 { background: url('/fileadmin/templates/spiruli1/img/bg-iconrow-2.jpg'); }
.bg-bild3 { background: url('/fileadmin/templates/spiruli1/img/bg-iconrow-3.jpg'); }
.bg-bild4 { background: url('/fileadmin/templates/spiruli1/img/bg-iconrow-4.jpg'); }
*/


}


/* Icons unter der Dose 3 */
@media (min-width: 992px) {
    
    .frame-icons3 { 
        border: 0px solid red;
        width: 100%;
        padding-top:12px;
        padding-bottom:0px;
        color: #fff;
    }

    .frame-icons3 h1 { color: white; font-size: 3em; font-weight: 300; }
    .frame-icons3 h2 { color: white; font-size: 2em; font-weight: 300; }
    .frame-icons3 h3 { color: white; font-size: 1.5em; font-weight: 300; }
    .frame-icons3 h4 { color: white; font-size: 1.5em; font-weight: 300; }
    .frame-icons3 h5 { color: white; }
    .frame-icons3 p { color: white; }
    .frame-icons3 a { color: white; }


    .frame-icons3 {border: 1px solid blue;position: relative;margin-top: -235px;}


    .frame-icons3-left { width: 33%; border: 0px solid red; }
    .frame-icons3-right {width: 66%;border: 0px solid red; }

    /* nach oben rutschen */
    .frame-icons3-left {width: 33%;border: 0px solid red;position: relative;max-height: 150px;}
    .frame-icons3-right {width: 66%;border: 0px solid red;position:relative;max-height: 150px;}

    
    .frame-icons3-right img {max-height: 80px; }
    .frame-icons3-right .gallery-item { max-height: 80px; padding: 5px; margin: 0px; float: left; border: 0px solid red; }
    .frame-icons3-right .gallery-item img { margin: 0px; margin-left: 0px; margin-right: 0px;border: 0px solid red; }
    .frame-icons3-right  .col-md-2 {  margin: 0px; padding: 0px; float: left; width: 120px; margin-top: 20px;}

}


/* Positionen des grünen Balken */

@media (min-width: 992px) and (max-width: 1300px) {
     .frame-icons3 {margin-top: -80px;}
     .frame-icons3-left {width: 33%;border: 0px solid red;position: relative;max-height: 250px; height: 150px;}
    .frame-icons3-right {width: 66%;border: 0px solid red;position:relative;max-height: 250px;}

}
@media (min-width: 1300px) and (max-width: 1450px) {
     .frame-icons3 {margin-top: -185px;}

}
@media (min-width: 1450px) and (max-width: 1600px) {
    .frame-icons3 {border: 0px solid blue;position: relative;margin-top: -215px;}

}


.layer-1 { z-index: 1005; }
.layer-2 { z-index: 1006; }
.layer-3 { z-index: 1007; }


/* iconrow6 */

@media (min-width: 200px) {
    
    .iconrow6  { border: 1px solid red; }


    .iconrow6.rand-oben-hell { border-top: 32px solid #cfe09a; }
    .iconrow6.rand-unten-hell { border-bottom: 32px solid #cfe09a; }
    
    .iconrow6.rand-oben-dunkel { border-top: 32px solid #94c11c; }
    .iconrow6.rand-unten-dunkel { border-bottom: 32px solid #94c11c; }
    
    .iconrow6.bg-color-gruen-hell { background: #cfe09a; }
    .iconrow6.bg-color-gruen-dunkel { background: #94c11c;}

    .frame-icons1-weiss img  {max-width: 50%;}
    
}

@media (min-width: 992px) {
    
   .iconrow6 .gallery-row {max-width: calc(54vw);margin: auto;}
   
    .iconrow6 .gallery-row img {  }
}







    .border-top-gruen-dunkel { border-top: 42px solid #94c11c; }
    .border-bottom-gruen-dunkel { border-bottom: 42px solid #94c11c; }
    
    .border-top-gruen-hell { border-top: 42px solid #94c11c; }
    .border-bottom-gruen-hell { border-bottom: 42px solid #94c11c; }
    
    .rand-oben-hell { border-top: 42px solid #cfe09a; }
    .rand-unten-hell { border-bottom: 42px solid #cfe09a; }
    
    .rand-oben-dunkel { border-top: 42px solid #94c11c; }
    .rand-unten-dunkel { border-bottom: 42px solid #94c11c; }
    
    .bg-color-gruen-dunkel { background: #94c11c; } 
    .bg-color-gruen-hell { background: #cfe09a; } 
    
    .bg-grau { background: #e9e9e9; }

    @media (min-width:768px) and (max-width:992px) {
        .frame-icons3 {
            /* border: 1px solid red; */
            width: 100vw;
        }
    }



/* Aktualisierte Bildet*/
.bg-bild1 { background: url('/fileadmin/templates/spiruli1/img/hg_green_light.jpg'); background-size: auto; }
.bg-bild2 { background: url('/fileadmin/templates/spiruli1/img/hg_green.jpg'); background-size: auto; }





     /* Icons Glutenfrei ... */
 @media (min-width: 768px) and (max-width: 992px) {
    .iconrow6 .col-sm-3 {
    width: 32%;
}
}