/*
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 : 09.05.2020, 15:35:56
    Author     : juergen kind
*/

/* FARBCODES */
/*
Hier auch noch die Farb-Codes:

Rot             #e30613
Gelb            #ffdd0f
Grün            #219a33
Grau            #c6c6c6
Anthrazit       #4c4a48
Hellgrau        #e3e3e3

 */
 
  
  /*
 
 Bootstrap has 4 breakpoints

.col-sm for larger mobile phones (devices with resolutions ≥ 576px);
.col-md for tablets (≥768px);
.col-lg for laptops (≥992px);
.col-xl for desktops (≥1200px)
 
 
 */

 

@media (min-width: 200px) {
    
    .florack-hover-col .frame {
        margin-bottom: 10px;
        overflow-y: hidden;
    }
    
    /* Kontaktseite Bilder der Personen */
    .florack-hover-col .frame .frame-container .frame-inner .frame-header {
        display: flex; flex-direction: column;
    }
     .florack-hover-col .frame .frame-container .frame-inner .frame-header .element-header {
        font-size: 1rem;
    }
     .florack-hover-col .frame .frame-container .frame-inner .frame-header .element-subheader {
        font-size: .875rem;
    }
    .florack-hover-col .frame .frame-container .frame-inner a {
        /* font-size: .875rem; */
        color: white;
        text-decoration: none;
    }
    
    
    
}
@media (min-width: 200px) {
    
    
    
    /* Kontaktseite Bilder der Personen */
    .florack-hover-col .frame .frame-container .frame-inner .frame-header {
        display: flex; flex-direction: column;
    }
     .florack-hover-col .frame .frame-container .frame-inner .frame-header .element-header {
        font-size: 1rem;
    }
     .florack-hover-col .frame .frame-container .frame-inner .frame-header .element-subheader {
        font-size: .675rem;
    }
    .florack-hover-col .frame .frame-container .frame-inner a {
        /* font-size: .675rem; */
        color: white;
        text-decoration: none;
    }
    
    
    
}

@media (min-width: 768px) and (max-width: 992px) {
    
    
    
    /* Kontaktseite Bilder der Personen */
    .florack-hover-col .frame .frame-container .frame-inner .frame-header {
        display: flex; flex-direction: column;
    }
     .florack-hover-col .frame .frame-container .frame-inner .frame-header .element-header {
        font-size: 1rem;
    }
     .florack-hover-col .frame .frame-container .frame-inner .frame-header .element-subheader {
        font-size: .775rem;
    }
    .florack-hover-col .frame .frame-container .frame-inner a {
        font-size: .775rem;
        color: white;
        text-decoration: none;
    }
    
    
    
}



/* Anderes Offset für Menschen */
@media (min-width: 200px) {
    
    .florack-hover-col .frame .frame-container.aus {
   color: white;
   padding-top: 0rem;
   /* padding: 0rem; */
   padding-left: 1rem;
   position: absolute;
   /*transition: all ease-in-out .3s;*/
   top: calc(100% - 4.5rem);
}
    
    
}



/* SOLID      */
@media (min-width: 200px) {
    
    .florack-hover-col .frame .frame-container.aus {
    /*background-color: #4c4a48 !important;*/
    
}
    
    
}

/* TRANSPARENT */
@media (min-width: 200px) {
    
    .florack-hover-col .frame .frame-container {
    background-color: rgba(76,74,72,.9) ;  
    }
    
    .florack-hover-col .frame .frame-container.aus {
    /*background-color: rgba(76,74,72,.9) ;*/  
    }
    
    
}


/* Dimension der MA Kacheln anpassen */

@media (min-width: 568px) and (max-width: 768px) {

    .florack-hover-row {/*        border: 2px solid green;*//* height: calc( 520px / 1.3); */overflow-y: hidden;margin-bottom: 10px;}
    
    .florack-hover-col .frame {
        /*border: 5px solid blue;*/
        height: calc( 520px / 1.3);
        overflow-y: hidden;
        margin-bottom: 10px;
    }
    
}

@media (min-width: 768px) {

    .florack-hover-row {
        border: 0px solid red;
        height: 180px;
        overflow-y: hidden;
        margin-bottom: 10px;
    }
}

@media (min-width: 992px) {

    .florack-hover-row {
        border: 0px solid blue;
        height: 240px;
        overflow-y: hidden;
        margin-bottom: 10px;
    }
}
@media (min-width: 1200px) {

    .florack-hover-row {
        border: 0px solid transparent;
        height: 280px;
        overflow-y: hidden;
        margin-bottom: 10px;
    }
}


@media (min-width:200px) {

.florack-hover-col h2 { font-weight: 600; font-size: 1rem; margin-top: 0rem; padding: 0rem; padding-bottom: 0rem; margin-bottom: .25rem;}
.florack-hover-col p{}

/* Test halbe breite */
.florack-hover-col .frame .frame-container.aus {
    color: white;
    padding-top: 0rem;
    /* padding: 0rem; */
    padding-left: 1rem;
    position: absolute;
    transition: all ease-in-out .3s;
    top: calc(100% - 4.25rem);
    /*    width: auto;
    right: 0;*/
}
.florack-hover-col .frame .frame-container.aus p:nth-child(3) {
    border: 0px solid green;
    margin-top: 1rem;
    transition: all ease-in-out .3s;
}



.florack-hover-col .frame .frame-container.aus.an p:nth-child(3) {
        border: 0px solid red;
}




}


/* Test Tablet */
@media (min-width:768px) and (max-width:1200px) {

.florack-hover-col h2 { font-weight: 600; font-size: 1rem; margin-top: 0rem; padding: 0rem; padding-bottom: 0rem; margin-bottom: .25rem;}
.florack-hover-col p{}

/* Test halbe breite */
.florack-hover-col .frame .frame-container.aus {
    color: white;
    padding-top: 0rem;
    /* padding: 0rem; */
    padding-left: 1rem;
    position: absolute;
/*    transition: all ease-in-out .3s;*/
    top: calc(100% - 4.5rem);
/*    width: auto;
    right: 0;*/
}
.florack-hover-col .textpic-item.textpic-gallery {
/*
    margin-bottom: 0rem;
    border:0px solid red;
    */
}
.frame-backgroundimage {
    transition: none;
}


}

@media (min-width: 768px) {
    .florack-hover-row { margin-bottom: 3rem;}
}

@media (min-width: 768px) and (max-width:992px) {
    .florack-hover-col .textpic-item.textpic-gallery {

    margin-bottom: 0rem;
    border:0px solid red;

}

.florack-hover-col .frame {
    margin-bottom: 10px;
    overflow-y: visible;
}

 .florack-hover-row {
        border: 0px solid red;
        height: 290px;
        overflow-y: hidden;
        margin-bottom: 10px;
    }
    
    /* Mitte Balken bei Tablet weg */
    
    .florack-hover-row .col-md-5 {
    flex: 0 0 49%;
    max-width: 49%;
    }
    .florack-hover-row .col-md-2 {
    flex: 0 0 2%;
    max-width: 2%;
    }
    .florack-hover-row {
        margin-bottom: 1.5rem;
        height: 280px;
    }

    
}

@media (max-width:992px) {
    
       .florack-hover-col .frame .frame-container {

    transition: none;

    }
    
    
    .florack-hover-col .frame .frame-container.aus {

    transition: none;

    }
    .florack-hover-col .frame .frame-container.an {

    transition: none;

    }
    
    
}



/* bullets */

@media (min-width:200px) {
      .florack-bullets  ol, ul, dl {
                margin-top: 0;
                margin-bottom: 0rem;
                /*border:  1px solid red;*/
                margin-left: -5px;
      }

      .florack-bullets ul .text-primary {font-weight: 600;font-size: 1.2rem; color: #4c4a48 !important; }
      
      .florack-bullets  .list-normal li {
      margin-left: -10px;
      padding-left: 0px;
      list-style: none;
      }
     
      .florack-bullets  li::before {
      content: "■";
      font-family:"Arial Black";
      color: #ffdd0f;
      margin-left: -25px;
      margin-top: -5px;
      position: absolute;
      font-size: 26px;
      }

      /*
.florack-bullets > .text-primary {
      color: #4c4a48;
}
   */   

     .florack-bullets  li {
           margin-bottom: .0rem;
     }
    .florack-bullets p {
           margin-left: 25px;
            
           
     }
     

      .florack-bullets p small {
            color: #4c4a48 !important;
            font-size: .76em;
            font-weight: 300;
            line-height: 0rem;
     }
     .florack-bullets:not([small]) {
        line-height: 1.4rem;
        }



}



@media (max-width:992px) {
    
    /* Korrektur bilder */
     .florack-hover-col .frame .frame-container.an {
       color: white;
        
       padding-top: .75rem;
       padding-left: 1rem;
       padding-right: 1rem;
       bottom: 0;
       position: absolute;
    }
    
    /* emailadresse anrücken */
     .florack-hover-col .frame>.frame-container.an p {
      border: 0px solid red;
      margin-bottom: 0rem;
    }
    
    
    
}

/* Fotos 768px bis 992px */
@media (min-width: 768px) and (max-width:992px) {
    
    /* Korrektur bilder */
     .florack-hover-col .frame .frame-container.an {
       color: white;
        
       padding-top: .75rem;
       padding-left: 1rem;
       padding-right: 1rem;
       bottom: 0;
       position: absolute;
    }
    
    /* emailadresse anrücken */
     .florack-hover-col .frame>.frame-container.an p {
      border: 0px solid red;
      margin-bottom: 0rem;
    }
    
    
    
}

@media (max-width: 576px) {
    
    
    .textmedia-gallery, .textpic-gallery {
    margin-bottom: 0rem;
}

}


@media (min-width: 200px) {
    
  .florack-bullets ul {
    padding-left: 4.5rem;  
  }
  .florack-bullets li {
    margin-top: .25rem;
  }


     .florack-bullets li::before {
      /*
      content: "■";
      */
      color: transparent;
      width: 2rem;
      border: 0px solid red;
      padding-top: .25rem;
      }


  .florack-bullets li::before  {
  background-image: url('/fileadmin/user_upload/bullets/li-before-1.png');
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  padding-left: 30px; /* Adjust according to image size to push text across. */
  margin-left: -2rem;

}

.florack-bullets li {


}



}



/* Menschen headerbild nach rechts bei desktopn */

#carousel-361 .carousel .carousel-backgroundimage-container, .carousel .carousel-backgroundimage {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-position: right;
    background-size: cover;
}