html, body {
    position: relative;
    height: 100%;
} 

.cfl-swiper-gallery h1 {                
    font-family: Khand,sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 2px 25px rgba(1,2,2,.75);
    text-transform: uppercase;
    width: 70%;
    background: none;
    *zoom: 1;
    display: block;
    background-size: auto;
    padding: 0;    
    margin-bottom: 15px;
    width: auto; 
    margin-top: 15px !important; 
}

@media (min-width: 800px){
   .cfl-swiper-gallery h1 {
         font-size: 58px;
    }
}


.cfl-swiper-gallery {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    color: #FFF;
    margin: 20px 0px; 
    overflow: hidden; 
}

.cfl-swiper-gallery-fullscreen.cfl-swiper-gallery {
    margin: 0; 
}

.swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.gallery-shortcode-embed .swiper-container {
    height: 500px;   
}

.swiper-slide {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.cfl-swiper-container {
    /* position: fixed; */
    position: relative; 
    height: 100%;
    width: 100%;
    /* top: -110%;*/
    background: black none no-repeat; 
    z-index: 10;
    /*
    transition: top 0.3s, opacity 0.3s; 
    transition-timing-function: ease; 
    opacity: 1;  */
}

.article-content .cfl-swiper-container {    
    height: 300px;     
}

.article-content .cfl-swiper-container .boxPicDescription {
    /* Hide it regardless of if we display the description */ 
    height: 0;
    overflow: hidden; 
}

.article-content .cfl-swiper-container .icons a {    
    color: #FFF;       
}

@media screen and (min-width: 768px) { 
    .article-content .cfl-swiper-container {
        height: 500px; 
    }
    
    .article-content .cfl-swiper-container .boxPicDescription {
    /* Hide it regardless of if we display the description */ 
    height: 0;
    overflow: hidden; 
    }
    
}

@media screen and (max-width: 767px) { 
    /* Override the *[class^="grid-col"], *[class*=" grid-col"] rule*/
    .swiper-info .grid-col-3 {
        float: left; 
        width: calc(25% - 10px) !important;         
    }
    
    .swiper-info .grid-col-6 {
        
        float: left; 
        width: calc(50% - 10px) !important; 
    }
    
    .swiper-info .grid-col-9 {
        
        float: left; 
        width: calc(75% - 10px) !important; 
    }
    
    .swiper-info .grid-col-12 {
        
        float: left; 
        width: calc(100% - 10px) !important; 
    }
    
}

/* .gallery-top.gallery-top-visible {
    top: 0%; 
    opacity: 1; 
    z-index: 1001;
} */

/* .gallery-thumbs {
    position: relative;
   //  top: -100%; 
    height: 100%;
    width: 100%;
    background: black none no-repeat; 
    z-index: 1000; 
    transition: top 0.3s, opacity 0.3s;    
    transition-timing-function: ease;     
    opacity: 1; 
}

.gallery-thumbs .img-responsive-16by9 { // Override the CFL.ca class 
    display: block;
    max-width: 100%;
    height: auto !important;
    padding-bottom: 0 !important; 
}

.gallery-thumbs.gallery-thumbs-visible {
    top: 0%; 
    opacity: 1; 
}

.gallery-thumbs .col-3 { // 5 images per row. 
    max-width: 16%; 
    padding: 5px;                                 
}

@media (min-height: 481px) {
    .gallery-thumbs .col-3 {
        max-width: 18%; 
    }
}

.gallery-thumbs .col-3 img {
    cursor: pointer; 
}            

*/

.swiper-info {
    display: table; 
    position:absolute;               
    bottom: 0px;
    padding-bottom: 10px;
    padding-top: 10px; 
    color: #FFF;                
    width: 100%;
    z-index: 7;
    transition: bottom 0.3s;
    background-color: rgba(0,0,0,0.6);
}

.swiper-info.swiper-info-social {    
    z-index: 8;
    background-color: rgba(0,0,0,0.0);
}

.swiper-info.swiper-info-desc.hide {    
    bottom: -30%; 
}

.swiper-info .row {
    display: table-row;     
}

.swiper-info .row .swiper-info-box  {
    display: table-cell;
    float: none;
}

.cfl-swiper-gallery .title-overlay {    
    display: none; 
    color: #fff;
    position: absolute;
    z-index: 9;
    top: 0;
    transition: left 0.3s, right 0.3s;
    transition-timing-function: ease;
}

.cfl-swiper-gallery .title-overlay h1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 100%;
    width: 100%;
  
}

.cfl-swiper-gallery.cfl-swiper-gallery-fullscreen .title-overlay {
    display: table; 
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
}

@media screen and (max-width: 767px) { 
    
    .swiper-info .row .swiper-info-box.grid-col-12 {
        width: 100% !important;
        margin: 10px 0px !important; 
        display: block;         
    }
    .swiper-info .row .swiper-info-box.grid-col-6 {
        width: 50% !important;
        padding-left: 10px !important;              
    }
    
    .swiper-info .row .swiper-info-box.grid-col-9 {
        width: 75% !important;
        padding-left: 10px; 
    }    

    .swiper-info .row .swiper-info-box.grid-col-3 {
        width: 25% !important;
        padding-right: 10px;
        vertical-align: bottom; 
        line-height: normal; 
    }        
        
    .swiper-info #lblPicDescription {
        display: none; 
    }
    
}

.swiper-info .row .swiper-info-box.grid-col-md-9 {
    width: 75%;
    padding-left: 10px; 
}    

.swiper-info .row .swiper-info-box.grid-col-md-3 {
    width: 25%;
    padding-right: 10px;
    vertical-align: bottom; 
    line-height: normal; 
}    

.gallery-thumbs .swiper-info.container-fluid .swiper-info-box {
    line-height: 50px;
}

.bootstrap-wrapper .gallery-thumbs-swiper {
    height: 100%;
    padding-left: 12%; /* centers the thumb page */        
    margin-top: 15px;
}

@media (min-height: 481px) {
    .bootstrap-wrapper .gallery-thumbs-swiper {
        padding-left: 6%; /* centers the thumb page */
    }       
}

.swiper-info .swiper-info-box {                                
    font-size: 100%;                          
}

.swiper-info .info {                
    vertical-align: bottom; 
    /* min-height: 52px; */
}

.swiper-info .info div {
    margin: 0px 0px 0px 10px;
}            

.swiper-info .desc {                
    vertical-align: bottom; 
    position: relative;     
    /* margin-bottom: 20px; */
    margin-top: 10px;    
}

.swiper-info .desc #boxPicDescription {
    margin-left: 10px;     
}

@media (min-width: 1250px) {
    .swiper-info .desc {    
        min-height: 52px; 
    }
}

@media (min-width:1250px) {
    .swiper-info .desc {   
        margin-bottom: 0; 
        margin-top: 0; 
    }
}            

@media (min-width:1250px) {
    .swiper-info .desc #boxPicDescription {                 
        position: absolute; 
        bottom: 0; 
    }
}

.swiper-info .icons {
    vertical-align: bottom; 
    text-align: right; 
    min-height: 52px; 
    line-height: 52px; 
}         

.swiper-info .icons a {
    display: inline-block; 
}

.swiper-info .icons span {
    transform: scale(0.7);                
}

.swiper-info .icons div {
    margin: 0px 0px 0px 10px;
}            

.swiper-info .icons span.icono-facebook {
    margin: 4px 11px 4px 14px;                 
}

.swiper-info .icons span.icono-twitter {
    margin: 4px 7px 7px 13px;                 
}


.swiper-info .icons span.icon-social-facebook{
    margin: 4px 3px;                 
    height: 20px; 
    width: 20px; 
}

.swiper-info .icons span.icon-social-twitter {
    margin: 4px 3px;                 
    height: 20px; 
    width: 20px;
}


.swiper-info-box.icons a.btn_fs_gallery {
    color: #FFF;    
}

.swiper-info-box.icons a.btn_fs_gallery:hover {
    color: rgb(181, 38, 47);    
}

.csicon {
    margin: 4px 3px;
    height: 20px;
    width: 20px;
    background-repeat: no-repeat; 
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
    text-indent: -9999em;
}

.csicon-close {
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50.13 50.1'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23202020;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3ECFL_Icons_Gallery%3C/title%3E%3Cpath class='cls-1' d='M25.12,30.11l-20,20L.07,45,20,25.13,0,5.14,5.06.08,25,20,45,0l5.07,5.07-20,20q10.06,10.08,20,20l-5,5Z'/%3E%3C/svg%3E");    
}

.csicon-close-white {
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50.13 50.1'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EWhite_Icons%3C/title%3E%3Cpath class='cls-1' d='M25.12,30.11l-20,20L.07,45,20,25.13,0,5.14,5.06.08,25,20,45,0l5.07,5.07-20,20q10.06,10.08,20,20l-5,5Z'/%3E%3C/svg%3E");
}

.csicon-info {
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50.1 50.1'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23202020;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3ECFL_Icons_Gallery%3C/title%3E%3Cpath class='cls-1' d='M25.05,0A25.05,25.05,0,1,0,50.1,25.05a25.06,25.06,0,0,0-25-25Zm2.78,38h-5.6V20h5.6ZM25,17.75a2.75,2.75,0,0,1-2.92-2.57,2,2,0,0,1,0-.25,2.76,2.76,0,0,1,2.66-2.84H25a2.83,2.83,0,1,1,.45,5.65,3.38,3.38,0,0,1-.45,0Z'/%3E%3C/svg%3E");  
}

.csicon-info-white {
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50.1 50.1'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EWhite_Icons%3C/title%3E%3Cpath class='cls-1' d='M25.05,0A25.05,25.05,0,1,0,50.1,25.05a25.06,25.06,0,0,0-25-25Zm2.78,38h-5.6V20h5.6ZM25,17.75a2.75,2.75,0,0,1-2.92-2.57,2,2,0,0,1,0-.25,2.76,2.76,0,0,1,2.66-2.84H25a2.83,2.83,0,1,1,.45,5.65,3.38,3.38,0,0,1-.45,0Z'/%3E%3C/svg%3E");
}

.csicon-full-screen {
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 49'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23202020;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3ECFL_Icons_Gallery%3C/title%3E%3Cg id='fullscreen'%3E%3Cpath class='cls-1' d='M7,31.5H0V49H17.5V42H7Zm-7-14H7V7H17.5V0H0ZM42,42H31.5v7H49V31.5H42ZM31.5,0V7H42V17.5h7V0Z'/%3E%3C/g%3E%3C/svg%3E");
}

.csicon-full-screen-white {
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 49'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EWhite_Icons%3C/title%3E%3Cg id='fullscreen'%3E%3Cpath class='cls-1' d='M7,31.5H0V49H17.5V42H7Zm-7-14H7V7H17.5V0H0ZM42,42H31.5v7H49V31.5H42ZM31.5,0V7H42V17.5h7V0Z'/%3E%3C/g%3E%3C/svg%3E");
}

.cfl-swiper-gallery a.btn_close_gallery {
    display:none;
}

.cfl-swiper-gallery.cfl-swiper-gallery-fullscreen a.btn_close_gallery {
    display: inline-block; 
}

.cfl-swiper-gallery.cfl-swiper-gallery-fullscreen .swiper-info-box.icons a {
    text-decoration: none; 
}

.cfl-swiper-gallery.cfl-swiper-gallery-fullscreen .swiper-info-box.icons a.btn_fs_gallery {
    display:none;
}
