// main: ../../../less/style.less

/* -------------------- Media Sections  -------------------- */


.ct-mediaSection {
  background-color:    #fff;
  position:            relative;
  display:             table;
  width:               100%;
  video, iframe {
    min-width:  100%;
    min-height: 100%;
    width:      auto;
  }
  .ct-mediaSection-inner{
    position:        relative;
    display:         table-cell;
    vertical-align:  middle;
    width:           100%;
  }

  &.noVCenter{
    display: block;
    width: 100%;

    .ct-mediaSection-inner{
      display: block;
      width: 100%;
    }
  }
}

[data-background] {
  background-size:     cover;
  background-repeat:   no-repeat;
  background-position: center;
}


// Firefox has problems with display table and min height
.browser-mozilla {
  .ct-mediaSection{
    display: flex;
    justify-content: center;
    align-items: center;

    .ct-mediaSection-inner{
      display: block;
    }
  }
}

// Parallax //
.ct-mediaSection[data-stellar-background-ratio]{
  background: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}


@media (min-width: @screen-sm){
  [data-stellar-background-ratio]{
    background-attachment: fixed;
  }
}

// Pattern //
.ct-mediaSection[data-type="pattern"]{
  background-size:   contain;
  background-repeat: repeat;
}


// Video //
.ct-mediaSection[data-type="video"]{
  overflow: hidden;
  .ct-mediaSection-video{
    position:   absolute;
    min-width:  100%;
    overflow:   hidden;
    background-color: #000;

    // if video is distorted comment height and max-height here and uncomment for .browser-msie !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    height: 100%;
    max-height: 100%;


    top:        50%;
    left:       50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
  }
}

.browser-msie{
  .ct-mediaSection[data-type="video"]{
    .ct-mediaSection-video{
      //height: 100%;
      //max-height: 100%;
    }
  }
}


// Ken Burns Effect //
.ct-mediaSection[data-type="kenburns"]{
  overflow: hidden;
  .ct-mediaSection-kenburns{
    height:   100%;
    width:    100%;
    overflow: hidden;
    position: absolute;
    top:      0;
    > img {
      vertical-align: middle;
      max-width:      none;
      position:       absolute;
      //top:            50%;
     // margin-top:     -550px;
      min-width:      120%;
      min-height:     100%;
      opacity:        0;
      &.singlefx{
        opacity: 1;
      }
      //margin-left: -5%;
      -webkit-transition-property: opacity, -webkit-transform;
              transition-property: opacity, transform;
      -webkit-transition-duration: 3s, 8s;
              transition-duration: 3s, 8s;
    }
  }
}

.ct-mediaSection[data-type="kenburns"] .ct-mediaSection-kenburns> img  {
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
.ct-mediaSection[data-type="kenburns"] .ct-mediaSection-kenburns :nth-child(2n+1) {
  -webkit-transform-origin: top right;
          transform-origin: top right;
}
.ct-mediaSection[data-type="kenburns"] .ct-mediaSection-kenburns :nth-child(3n+1) {
  -webkit-transform-origin: top left;
          transform-origin: top left;
}
.ct-mediaSection[data-type="kenburns"] .ct-mediaSection-kenburns :nth-child(4n+1) {
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}
.ct-mediaSection[data-type="kenburns"] .ct-mediaSection-kenburns .fx:first-child + img ~ img  {
  z-index:-1;
}
.ct-mediaSection[data-type="kenburns"] .ct-mediaSection-kenburns .fx {
  opacity: 1;
  -webkit-transform: scale(1.1) translate(30px);
          transform: scale(1.1) translate(30px);
}
.ct-mediaSection[data-type="kenburns"] .ct-mediaSection-kenburns .singlefx {
  -webkit-animation: singleimageloop 20s infinite; /* Safari 4+ */
  animation:         singleimageloop 20s infinite; /* IE 10+ */
}
@-webkit-keyframes singleimageloop {
  0%   {  -webkit-transform: scale(1)   translate(0px);}
  50%  {  -webkit-transform: scale(1.1) translate(30px);  }
  100% {  -webkit-transform: scale(1)   translate(0px); }
}
@keyframes singleimageloop {
  0%   {  transform: scale(1)   translate(0px); }
  50%  {  transform: scale(1.1) translate(30px); }
  100% {  transform: scale(1)   translate(0px); }
}
