/*
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, 09:26:29
    Author     : juergen kind
*/


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

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

*/
@media (min-width: 200px) and (max-width:576px) {
.florack-hover-col {
        margin-bottom: 10px;
}
}
    


/* Höhe der Kacheln */

@media (min-width: 200px) and (max-width: 576px) {

    .florack-hover-col .frame {
        /*border: 1px solid green;*/
        width: 100%;
        height: 100%;
        min-height: calc(100vw / 9 * 7);
        /*max-height: 300px;*/

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

    .florack-hover-col .frame {
        /*border: 1px solid green;*/
        width: 100%;
        height: 100%;
        min-height: 240px;
        

    }
}

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

    .florack-hover-col .frame {
        /*border: 1px solid green;*/
        width: 100%;
        height: 100%;
       

    }
}

@media (min-width: 992px) and (max-width: 1200px) {

    .florack-hover-col .frame {
        /*border: 1px solid green;*/
        width: 100%;
        height: 100%;
        min-height: 100%;
        /*max-height: 300px;*/

    }
}

@media (min-width: 1200px)  {

    .florack-hover-col .frame {
        /*border: 1px solid green;*/
        width: 100%;
        height: 100%;
        min-height: 100%;
        /*max-height: 300px;*/

    }
}








@media (min-width: 200px) {

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

  


    .florack-hover-col .frame .frame-backgroundimage-container .frame-backgroundimage {

        /*background-position: left;*/
        /*background-size: 100%;*/
        transition: all ease-out .3s;


    }



    /* Text unter Kachel */
    .florack-hover-col .frame .frame-container {
        color: white;
        padding-top:  1rem;
        padding: 1rem;
        position: absolute;

    }


    /* Überschrift */

    .florack-hover-col .frame .frame-container .frame-inner .frame-header {
        color: white;
        /*        height: 2rem;*/
        /*border: 1px solid red;*/
        display: flex;
        align-content: center;
        /*        height: 3rem;*/


    }
    .florack-hover-col .frame .frame-container .frame-inner .frame-header .element-header {
        
        color: white;
        font-size: 1rem;
        font-weight: 600;

    }

    .florack-hover-col .frame .frame-container .frame-inner .frame-header .element-header a {
        
        color: white;
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        cursor: default;
    }





    /* text */
    .florack-hover-col .frame .frame-container .frame-inner p {
        
        color: white;
        font-size: .725rem;
        font-weight: 300;
        /* border: 1px solid green; */
        line-height: 1.3;
        cursor: default;
    }



    /* Textcol in Startseite hover kacheln */
    .florack-hover-row .florack-gal-text {
        display: flex;
        align-content: center;
        height: 100%;
        min-height: 100%;
    }
    
        .florack-hover-row .florack-gal-text .frame {
        /* display: flex; */
        /* align-content: center; */
        /* border: 0px solid green; */
        /* padding-top: 0; */
        /* padding-bottom: 0; */
    }
    
    .florack-hover-row .florack-gal-text .frame {
        height: 100%;
        min-height: 100%;
        /* min-height: 300px; */
        /* max-height: 300px; */
        /* overflow-y: hidden; */
        /* margin-bottom: 10px; */
        /*        border: 4px solid green;*/
    }
    

    .florack-hover-row .florack-gal-text .btn { 
        color: white;
        background: #4c4a48;
        
    }





}



/* HOVER GALLERY florack-gal-row */
@media (min-width: 200px) and (max-width:576px) {

    .florack-hover-row .florack-gal-text .frame {
        /* border: 1px solid green; */
        height: unset;
        min-height: unset;
        max-height: unset;
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .florack-hover-row .florack-gal-text .frame .frame-container { 
/*        border: 1px solid red;*/
        height: unset;
        min-height: unset;
        max-height: unset;
        width: 100%;
        padding-left: 0rem;
        padding-right: 0rem; /* FIX */
        margin-left: 0px;
        margin-right: 0px;
    }



  

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

    .florack-hover-row .florack-gal-text .frame {/*        border: 1px solid red;*//* height: unset; *//* min-height: unset; *//* max-height: unset; *//* margin-bottom: 10px; *//* padding-top: 2rem; *//* padding-bottom: 2rem; */}
  

}


/* Knopf mit arrow */

/* gallery btn in textframe */
.florack-hover-row .florack-gal-text .btn {
    padding-right: 3rem;
    padding-left: 1.5rem;
    display: inline-block;
    background-image: url(/fileadmin/user_upload/Icons/arrow.svg);
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    background-size: .4rem;

}



/* Darstellung an / aus  */ 

@media (min-width: 200px) {


    /* Kachelbild hover aktivieren */
    /*
    .florack-hover-col .frame .frame-backgroundimage-container :hover {    background-size: 121%;    }
    */

    .florack-hover-col .frame .frame-container.aus {
       
        color: white;
        padding-top:  1rem;
        padding: 1rem;
        bottom: 0;
        position: absolute;
        transition: all ease-in-out .3s;

        top: calc(100% - 3rem);
    }

    /* AN */
    .florack-hover-col .frame .frame-container.an {
       
        color: white;
        padding-top:  1rem;
        padding: 1rem;
        bottom: 0;
        position: absolute;

    }





}

@media (min-width: 768px) {

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



/* Zweizeilige Überschrift cut */
/*
@media (min-width: 200px) {
    .aus .element-header {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    max-height: 1rem;
    overflow-y: hidden;
    }
    .an .element-header {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    max-height: 3rem;
    overflow-y: visible;
    }
}   
*/




/* 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) ;
    }
    
    .florack-hover-col .frame .frame-container.an {
       /*background-color: rgba(176,74,72,.9) ;*/
    }
    
    
    
}





/* youtube bild */



/* youtube bild */


/* youtube bild */

.myYoutubeButton {
    position: absolute;
    z-index: 1010;
    top: 25%;
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    opacity: 1;
}

.myYoutubePlayButton {
    width: 100px;
    height: 100px;
    opacity: .6;
    transition: .7s ease-in-out;
    
}
.myYoutubePlayButton:hover {
    
    opacity: .9;
    

}


.florack-hover-col .frame .frame-container {
    z-index: 1020;
}