/* SVN FILE: $Id: _indexVideos.css 232 2019-03-11 11:26:38Z Wolff $ */
/**
 * @lastChangedBy       $LastChangedBy: Wolff $
 * @copyright           ARZA STUDIO
 * @version             $Revision: 232 $
 * @date                $Date: 2019-03-11 11:26:38 +0000 (lun. 11 mars 2019) $
 * @license             LICENSE.TXT
 * @filesource          $URL: file:///home/antoine/webapps/az_ikos_svn/trunk/protected/modules/media/assets/media/index/_indexVideos.css $
 */

 #indexVideos {
     padding: 80px 0 25px 0;
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }
     #indexVideos h2 {
         text-align: center;
         font-size: 26px;
         padding-bottom: 50px;
         margin: 0;
         opacity: 0;
         transition: opacity .25s;
     }
     @media (max-width: 767.9999px) {
         #indexVideos h2 {
             width: calc(100vw - 30px);
         }
     }
     #indexVideos.focused h2,
     .smartsection.sm_code.initialized.active #indexVideos h2 {
         opacity: 1;
     }
     @media (min-width: 768px) {
         #indexVideos h2 {
             font-size: 34px;
             padding-bottom: 25px;
         }
     }
     @media (min-width: 992px) {
         #indexVideos h2 {
             font-size: 38px;
         }
     }
     @media (min-width: 1200px) {
         #indexVideos h2 {
             font-size: 46px;
         }
     }
     @media (max-width: 767.9999px) {
         #indexVideos .container-fluid {
             width: 100vw;
             overflow: hidden;
         }
        #indexVideos .col-sm-4,
        #indexVideos .col-sm-8 {
            width: calc(100vw - 30px);
            height: auto;
            overflow: hidden;
        }
    }
    #indexVideos .col-sm-8 {
        aspect-ratio: 16 / 9;
    }
        #indexVideos .col-sm-4 h3 {
            font-family: 'FontFaceBold', Arial, Helvetica, sans-serif;
            font-size: 15px;
            line-height: 15px;
            margin: 0 0 10px 0;
            text-align: left;
        }
        @media (min-width: 768px) {
            #indexVideos .col-sm-4 h3 {
                font-size: 18px;
                line-height: 15px;
                margin: 0 0 25px 0;
            }
        }
        @media (min-width: 992px) {
            #indexVideos .col-sm-4 h3 {
                font-size: 22px;
                line-height: 20px;
                margin: 0 0 30px 0;
            }
        }
        @media (min-width: 1200px) {
            #indexVideos .col-sm-4 h3 {
                font-size: 26px;
                line-height: 25px;
                margin: 0 0 40px 0;
            }
        }
        #indexVideos .col-sm-4 p {
            font-size: 15px;
        }
        @media (min-width: 768px) {
            #indexVideos .col-sm-4 p {
                font-size: 16px;
            }
        }
        @media (min-width: 992px) {
            #indexVideos .col-sm-4 p {
                font-size: 17px;
            }
        }
        @media (min-width: 1200px) {
            #indexVideos .col-sm-4 p {
                font-size: 18px;
            }
        }
    #indexVideos .container {
        position: relative;
    }
        #indexVideosSlider {
            opacity: 0;
            transform: translateY(50%);
            transition: all .5s;
            transition-delay: .5s;
        }
        #indexVideos.focused #indexVideosSlider,
        .smartsection.sm_code.initialized.active #indexVideos #indexVideosSlider {
            transform: none;
            opacity: 1;
        }
            #indexVideosSlider .owl-dots {
                padding: 10px 0 10px 0;
                text-align: right;
                height: 35px !important;
            }
                #indexVideosSlider .owl-dot {
                    display: inline-block;
                    width: 15px !important;
                    margin-left: 3px;
                }
                    #indexVideosSlider .owl-dot span {
                        display: inline-block;
                        border-radius: 50%;
                        -webkit-border-radius: 50%;
                        -moz-border-radius: 50%;
                        width: 10px !important;
                        height: 10px !important;
                    }
            @media (min-width: 992px) {
        	    #indexVideosSlider .owl-dots {
        	    	padding: 15px 0 15px 0;
        	    	height: 35px !important;
        	    }
        	        #indexVideosSlider .owl-dot {
        	            width: 17px !important;
        	            margin-left: 4px;
        	        }
        	            #indexVideosSlider .owl-dot span {
        	                width: 10px !important;
        	                height: 10px !important;
        	            }
            }
            @media (min-width: 1200px) {
        	    #indexVideosSlider .owl-dots {
        	    	padding: 20px 0 20px 0;
        	    	height: 35px !important;
        	    }
        	        #indexVideosSlider .owl-dot {
        	            width: 19px !important;
        	            margin-left: 5px;
        	        }
        	            #indexVideosSlider .owl-dot span {
        	                width: 10px !important;
        	                height: 10px !important;
        	            }
            }
    #indexVideos .seeAllBtn {
        color: #6f6f6e !important;
        display: block;
        text-decoration: none;
        text-transform: uppercase;
        float: right;
        font-size: 12px;
        line-height: 12px;
        margin: 0;
        padding: 7px 0 5px 28px;
        opacity: 0;
        transform: translateX(-100px);
        transition: all .25s;
        transition-delay: 1s;
    }
    #indexVideos.focused .seeAllBtn {
        opacity: 1;
        transform: none;
    }
    #indexVideos .seeAllBtn::before {
        display: inline-block;
        content: '>';
        color: #ffed00;
        margin-top: -1px;
        margin-right: 8px;
        vertical-align: text-top;
        font-size: 10px;
    }
    #indexVideos .seeAllBtn:hover::before {
        color: #6f6f6e
    }
    @media (min-width: 768px) {
        #indexVideos .seeAllBtn {
            font-size: 13px;
            line-height: 13px;
            padding: 8px 0 6px 29px;
        }
    }
    @media (min-width: 992px)   {
        #indexVideos .seeAllBtn {
            font-size: 14px;
            line-height: 14px;
            padding: 8px 0 4px 30px;
            margin: 12px 0 0 0;
        }
    }
    @media (min-width: 1200px) {
        #indexVideos .seeAllBtn {
            font-size: 15px;
            line-height: 15px;
            padding: 8px 0 4px 31px;
            margin: 15px 0 0 0;
        }
    }