/**
 * Embedded videos and maps (and other embedded elements) responsive
 * style, with 16 by 9 aspect ratio.
 *
 * Usage:
 *     <div class="embed-responsive embed-responsive-16by9">
 *         <iframe src="#" class="embed-responsive-item"></iframe>
 *     </div>
 */
.embed-responsive {position:relative;display:block;width:100%;padding:0;overflow:hidden}
.embed-responsive:before {display:block;content:""}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0;background:no-repeat center / cover;}

.embed-responsive-21by9:before {padding-top:42.857143%}
.embed-responsive-16by9:before {padding-top:56.25%}
.embed-responsive-4by3:before {padding-top:75%}
.embed-responsive-1by1:before {padding-top:100%}

/**
 * Style for images, to make them floating by default.
 * Usage:
 *     <img src="#" class="image-float-left" />
 */
img.image-float-left {max-width:60%;float:left;margin-right:15px;margin-bottom:15px;}
img.image-float-right {max-width:60%;float:right;margin-left:15px;margin-bottom:15px;}

@media only screen and (max-width:1024px) {
    img.image-float-left {max-width:40%;}
    img.image-float-right {max-width:40%;}
}

@media only screen and (max-width:767px) {
    img.image-float-left {float:none;margin:0;max-width:100%}
    img.image-float-right {float:none;margin:0;max-width:100%}
}


/**
 * Lazy loaded Embedded (YouTube) videos.
 *
 * Usage:
 *     <div class="embed-responsive embed-responsive-16by9 embed-video-lazy-load" data-video-id="{{ videoId }}" data-player-type="youtube"> 
 *         <div class="embed-video-lazy-load-play-button"></div> 
 *     </div>
 */
.embed-video-lazy-load {background-color:#000;margin-bottom:30px;cursor:pointer;background-size:cover;background-repeat:no-repeat;background-position:center center;}
.embed-video-lazy-load .embed-video-lazy-load-play-button {width:90px;height:60px;background-color:#333;box-shadow:0 0 30px rgba(0,0,0,.6);z-index:1;opacity:.9;border-radius:6px;transition:.12s all;}
.embed-video-lazy-load .embed-video-lazy-load-play-button:before {content:"";border-style:solid;border-width:15px 0 15px 26.0px;border-color:transparent transparent transparent #fff;margin-left:2px;}
.embed-video-lazy-load:hover .embed-video-lazy-load-play-button {background-color:red;opacity:1;}
.embed-video-lazy-load img,
.embed-video-lazy-load .embed-video-lazy-load-play-button {cursor:pointer;}
.embed-video-lazy-load img,
.embed-video-lazy-load iframe,
.embed-video-lazy-load .embed-video-lazy-load-play-button,
.embed-video-lazy-load .embed-video-lazy-load-play-button:before {position:absolute;z-index:100;}
.embed-video-lazy-load .embed-video-lazy-load-play-button,
.embed-video-lazy-load .embed-video-lazy-load-play-button:before {top:50%;left:50%;transform:translate3d(-50%,-50%,0);}
.embed-video-lazy-load iframe {height:100%;width:100%;top:0;left:0;}
.embed-video-lazy-load .embed-video-lazy-load-loader {display:block;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;height:32px;width:32px;}
.embed-video-lazy-load .embed-video-lazy-load-loader::before,
.embed-video-lazy-load .embed-video-lazy-load-loader::after {content:"";display:block;position:absolute;top:0;left:0;bottom:0;right:0;z-index:5;margin:auto;height:32px;width:32px;border:2px solid #FFF;border-radius:50%;opacity:0;-webkit-animation:embed-video-lazy-load-loader-1 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) infinite;animation:embed-video-lazy-load-loader-1 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) infinite;}
.embed-video-lazy-load .embed-video-lazy-load-loader::after {-webkit-animation:embed-video-lazy-load-loader-2 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) .25s infinite;animation:embed-video-lazy-load-loader-2 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) .25s infinite;}

@-webkit-keyframes embed-video-lazy-load-loader-1 {
    0%   { -webkit-transform:translate3d(0, 0, 0) scale(0); opacity:1; }
    100% { -webkit-transform:translate3d(0, 0, 0) scale(1.5); opacity:0; }
}
@keyframes embed-video-lazy-load-loader-1 {
    0%   { transform:translate3d(0, 0, 0) scale(0); opacity:1; }
    100% { transform:translate3d(0, 0, 0) scale(1.5); opacity:0; }
}
@-webkit-keyframes embed-video-lazy-load-loader-2 {
    0%   { -webkit-transform:translate3d(0, 0, 0) scale(0); opacity:1; }
    100% { -webkit-transform:translate3d(0, 0, 0) scale(1); opacity:0; }
}
@keyframes embed-video-lazy-load-loader-2 {
    0%   { transform:translate3d(0, 0, 0) scale(0); opacity:1; }
    100% { transform:translate3d(0, 0, 0) scale(1); opacity:0; }
}


/**
 * No gutters for Bootstrap GRID.
 */
.no-gutters {margin-right:0;margin-left:0;}
.no-gutters > .col,
.no-gutters > [class*="col-"] {padding-right:0;padding-left:0;}

@media only screen and (min-width:1200px) {
    .no-gutters-xl {margin-right:0;margin-left:0;}
    .no-gutters-xl > .col,
    .no-gutters-xl > [class*="col-"] {padding-right:0;padding-left:0;}
}

@media only screen and (min-width:992px) {
    .no-gutters-lg {margin-right:0;margin-left:0;}
    .no-gutters-lg > .col,
    .no-gutters-lg > [class*="col-"] {padding-right:0;padding-left:0;}
}

@media only screen and (min-width:768px) {
    .no-gutters-md {margin-right:0;margin-left:0;}
    .no-gutters-md > .col,
    .no-gutters-md > [class*="col-"] {padding-right:0;padding-left:0;}
}

@media only screen and (min-width:576px) {
    .no-gutters-sm {margin-right:0;margin-left:0;}
    .no-gutters-sm > .col,
    .no-gutters-sm > [class*="col-"] {padding-right:0;padding-left:0;}
}