.main-container {
    height: 0;
    overflow: hidden;
    position:relative;
    z-index: 1;
}
.main-container.show {
    height: auto;
}
.bg-effect {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    z-index: 10000;
}
.transmodal-content {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.loading-wrapper {
    text-align: center;
    height: 100%;
}
.loader-icon {
    margin-top: -50px;
}
.loader-icon img {
   /*filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);*/
  opacity: 0.5;
    width: 80px;
    margin-bottom: 10px;
}
.loader-logo:before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0;
    background: url(../images/blur2-1.png) no-repeat center center;
    background-size: 105% 105%;
    overflow: hidden;
    z-index: -1;
    opacity: 0.3;
}
.loader-logo img {
        width: 100%;
    max-width: 200px;
}

/* Modal Window */
.cd-transmodal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  height: 100%;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}

.cd-transmodal.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity .7s, visibility 0s;
  transition: opacity .7s, visibility 0s;
}

/* Transition Layer */
.cd-transition-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.cd-transition-layer .bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-2%);
          transform: translateY(-50%) translateX(-2%);
  /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.cd-transition-layer.visible {
  opacity: 1;
  visibility: visible;
}
.cd-transition-layer.visible .bg-layer {
  -webkit-transform: translateY(-50%) translateX(-98%);
          transform: translateY(-50%) translateX(-98%);
}
.cd-transition-layer.opening .bg-layer {
  -webkit-animation-name: cd-sequence;
          animation-name: cd-sequence;
  -webkit-animation-timing-function: steps(24);
          animation-timing-function: steps(24);
  -webkit-animation-duration: .8s;
          animation-duration: .8s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.cd-transition-layer.closing .bg-layer {
  -webkit-animation-name: cd-sequence;
          animation-name: cd-sequence;
  -webkit-animation-direction: reverse;
          animation-direction: reverse;
  -webkit-animation-timing-function: steps(24);
          animation-timing-function: steps(24);
  -webkit-animation-duration: .8s;
          animation-duration: .8s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.no-cssanimations .cd-transition-layer {
  display: none;
}

/* -------------------------------- 

Scrub Effect

-------------------------------- */
.scrub-transition .cd-transmodal {
  background: #633b63;
}

.scrub-transition .cd-transition-layer .bg-layer {
  /* sprite composed of 25 frames */
  width: 2500%;
  background-image: url(../images/transitions/scrub.png);
}

/* -------------------------------- 

ink Effect

-------------------------------- */
.ink-transition .cd-transmodal {
  background: #3f2f44;
}

.ink-transition .cd-transition-layer .bg-layer {
  /* sprite composed of 25 frames */
  width: 2500%;
  background-image: url(../images/transitions/ink.png);
}

/* -------------------------------- 

Fire Extinguisher Effect

-------------------------------- */
.extinguisher-transition .cd-transmodal {
  /*background: #f55850;*/
  background: #444444;
}
.extinguisher-transition .cd-transition-layer .bg-layer {
  /* sprite composed of 25 frames */
  width: 2500%;
  background-image: url(../images/transitions/extinguisher.png);
}

.extinguisher-fun-transition .cd-transmodal {
  background: #f55850;
}
.extinguisher-fun-transition .cd-transition-layer .bg-layer {
  /* sprite composed of 25 frames */
  width: 2500%;
  background-image: url(../images/transitions/extinguisher-fun.png);
}

/* -------------------------------- 

Glitch Effect

-------------------------------- */
.glitch-transition .cd-transmodal {
  background: #ffffff;
}
.glitch-transition .cd-transition-layer .bg-layer {
  /* sprite composed of 25 frames */
  width: 2500%;
  background-image: url(../images/transitions/glitch.png);
}

/* -------------------------------- 

Scribble Effect

-------------------------------- */
.scribble-transition .cd-transmodal {
  background: #e44b60;
}
.scribble-transition .cd-transition-layer .bg-layer {
  -webkit-transform: translateY(-50%) translateX(-1.3158%);
          transform: translateY(-50%) translateX(-1.3158%);
  /* sprite composed of 38 frames */
  width: 3800%;
  background-image: url(../images/transitions/scribble.png);
}
.scribble-transition .cd-transition-layer.opening .bg-layer, .scribble-transition .cd-transition-layer.closing .bg-layer {
  -webkit-animation-name: cd-sequence-2;
          animation-name: cd-sequence-2;
  -webkit-animation-timing-function: steps(37);
          animation-timing-function: steps(37);
}
.scribble-transition .cd-transition-layer.visible .bg-layer {
  -webkit-transform: translateY(-50%) translateX(-98.6842%);
          transform: translateY(-50%) translateX(-98.6842%);
}

/* -------------------------------- 

Gummy Effect

-------------------------------- */
.gummy-transition .cd-transmodal {
  background: #ef8692;
}
.gummy-transition .cd-transition-layer .bg-layer {
  /* sprite composed of 25 frames */
  width: 2500%;
  background-image: url(../images/transitions/gummy.png);
}

/* -------------------------------- 

Gooey Effect

-------------------------------- */
.gooey-transition .cd-transmodal {
  background: #ff9900;
}
.gooey-transition .cd-transition-layer .bg-layer {
  /* sprite composed of 25 frames */
  width: 2500%;
  background-image: url(../images/transitions/gooey.png);
}

/* -------------------------------- 

Mirror Effect

-------------------------------- */
.mirror-transition .cd-transmodal {
  background: #ff9900;
}
.mirror-transition .cd-transition-layer .bg-layer {
  /* sprite composed of 25 frames */
  width: 2500%;
  background-image: url(../images/transitions/mirror.png);
}

/* -------------------------------- 

Diamond Effect

-------------------------------- */
.diamond-transition .cd-transmodal {
  background: #41355a;
}
.diamond-transition .cd-transition-layer .bg-layer {
  -webkit-transform: translateY(-50%) translateX(-2.5%);
          transform: translateY(-50%) translateX(-2.5%);
  /* sprite composed of 20 frames */
  width: 2000%;
  background-image: url(../images/transitions/diamond.png);
}
.diamond-transition .cd-transition-layer.opening .bg-layer, .diamond-transition .cd-transition-layer.closing .bg-layer {
  -webkit-animation-name: cd-sequence-3;
          animation-name: cd-sequence-3;
  -webkit-animation-timing-function: steps(19);
          animation-timing-function: steps(19);
}
.diamond-transition .cd-transition-layer.visible .bg-layer {
  -webkit-transform: translateY(-50%) translateX(-97.5%);
          transform: translateY(-50%) translateX(-97.5%);
}

/* -------------------------------- 

Cartoon Effect

-------------------------------- */
.cartoon-transition .cd-transmodal {
  background: #f55850;
}
.cartoon-transition .cd-transition-layer .bg-layer {
  /* sprite composed of 25 frames */
  width: 2500%;
  background-image: url(../images/transitions/cartoon.png);
}

/* -------------------------------- 

Clones Effect

-------------------------------- */
.clones-transition .cd-transmodal {
  background: #ffa700;
}
.clones-transition .cd-transition-layer .bg-layer {
  /* sprite composed of 25 frames */
  width: 2500%;
  background-image: url(../images/transitions/clones.png);
}

/* -------------------------------- 

Animations

-------------------------------- */
@-webkit-keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -webkit-transform: translateY(-50%) translateX(-2%);
            transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -webkit-transform: translateY(-50%) translateX(-98%);
            transform: translateY(-50%) translateX(-98%);
  }
}
@keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -webkit-transform: translateY(-50%) translateX(-2%);
            transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -webkit-transform: translateY(-50%) translateX(-98%);
            transform: translateY(-50%) translateX(-98%);
  }
}
@-webkit-keyframes cd-sequence-2 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-1.3158%);
            transform: translateY(-50%) translateX(-1.3158%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-98.6842%);
            transform: translateY(-50%) translateX(-98.6842%);
  }
}
@keyframes cd-sequence-2 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-1.3158%);
            transform: translateY(-50%) translateX(-1.3158%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-98.6842%);
            transform: translateY(-50%) translateX(-98.6842%);
  }
}
@-webkit-keyframes cd-sequence-3 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-2.5%);
            transform: translateY(-50%) translateX(-2.5%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-97.5%);
            transform: translateY(-50%) translateX(-97.5%);
  }
}
@keyframes cd-sequence-3 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-2.5%);
            transform: translateY(-50%) translateX(-2.5%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-97.5%);
            transform: translateY(-50%) translateX(-97.5%);
  }
}