*, *::after, *::before{box-sizing:border-box;}
.cd-btn{display:inline-block;padding:1.6em 2.4em;font-size:1.4rem;letter-spacing:.15em;font-weight:700;text-transform:uppercase;box-shadow:0 2px 10px rgba(0, 0, 0, 0.08);-webkit-transition:box-shadow .3s;transition:box-shadow .3s;}
.cd-btn:hover{box-shadow:0 6px 20px rgba(0, 0, 0, 0.2);}
.cd-main-content{position:relative;z-index:1;width:100%;height:100vh;display:table;}
.cd-main-content .center{display:table-cell;vertical-align:middle;text-align:center;}
.cd-modal{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-modal .modal-content{height:100%;overflow-y:auto;padding:3em 5%;}
.cd-modal h1, .cd-modal h2{text-align:center;}
.cd-modal p{line-height:1.6;margin:2em auto;max-width:1000px;}
.cd-modal .modal-close{position:absolute;z-index:1;top:20px;right:5%;height:45px;width:45px;border-radius:50%;overflow:hidden;white-space:nowrap;text-indent:100%;color:transparent;visibility:hidden;opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:visibility 0s .3s, opacity .3s 0s, -webkit-transform .3s 0s;transition:visibility 0s .3s, opacity .3s 0s, -webkit-transform .3s 0s;transition:transform .3s 0s, visibility 0s .3s, opacity .3s 0s;transition:transform .3s 0s, visibility 0s .3s, opacity .3s 0s, -webkit-transform .3s 0s;}
.cd-modal .modal-close::before, .cd-modal .modal-close::after{content:'';display:inline-block;position:absolute;height:2px;width:20px;top:calc(50% - 1px);left:calc(50% - 10px);}
.cd-modal .modal-close::before{-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.cd-modal .modal-close::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.cd-modal.visible{opacity:1;visibility:visible;-webkit-transition:opacity .7s, visibility 0s;transition:opacity .7s, visibility 0s;}
.cd-modal.visible .modal-content{-webkit-overflow-scrolling:touch;}
.cd-modal.visible .modal-close{visibility:visible;opacity:1;-webkit-transition:visibility 0s 0s, opacity .3s 0s, -webkit-transform .3s 0s;transition:visibility 0s 0s, opacity .3s 0s, -webkit-transform .3s 0s;transition:transform .3s 0s, visibility 0s 0s, opacity .3s 0s;transition:transform .3s 0s, visibility 0s 0s, opacity .3s 0s, -webkit-transform .3s 0s;-webkit-transform:scale(1);transform:scale(1);}
@media only screen and (min-width:1100px){.cd-modal .modal-content{padding:6em 5%;}
.cd-modal .modal-close{height:60px;width:60px;}
.cd-modal .modal-close::before, .cd-modal .modal-close::after{height:2px;width:26px;top:calc(50% - 1px);left:calc(50% - 13px);}
.cd-modal p{font-size:1.4rem;}
}
.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%);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, .cd-transition-layer.closing .bg-layer{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.no-cssanimations .cd-transition-layer{display:none;}
.scrub-transition{font-family:"PT Sans", sans-serif;color:#2c1a32;}
.scrub-transition h1, .scrub-transition h2{font-family:"Sigmar One", serif;margin-bottom:.4em;font-size:4rem;}
.scrub-transition .cd-btn{background:#b24160;color:#ffffff;border-radius:50em;}
.scrub-transition .cd-main-content{background:#ffbc59;}
.scrub-transition .cd-modal{background:#633b63;}
.scrub-transition .cd-modal .modal-content{color:#ffffff;}
.scrub-transition .cd-modal .modal-close::before,
.scrub-transition .cd-modal .modal-close::after{background:#ffffff;}
.scrub-transition .cd-modal .modal-close{background:#543254;}
.scrub-transition .cd-modal .modal-close:hover{background:#452945;}
.scrub-transition .cd-transition-layer .bg-layer{width:2500%;background-image:url(../img/scrub.png);}
.scrub-transition .cd-transition-layer.opening .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards;animation:cd-sequence 0.8s steps(24) forwards;}
.scrub-transition .cd-transition-layer.closing .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards reverse;animation:cd-sequence 0.8s steps(24) forwards reverse;}
@media only screen and (min-width:768px){.scrub-transition h1{font-size:8rem;}
.scrub-transition h2{font-size:6rem;}
}
.extinguisher-transition{font-family:"Merriweather Sans", sans-serif;color:#f1faee;}
.extinguisher-transition h1, .extinguisher-transition h2{font-family:"Merriweather", serif;margin-bottom:.4em;font-size:3.2rem;}
.extinguisher-transition .cd-btn{background:#1c3458;color:#f1faee;border-radius:50em;}
.extinguisher-transition .cd-main-content{background:#e93741;}
.extinguisher-transition .cd-modal{background:#f1faee;}
.extinguisher-transition .cd-modal .modal-content{color:#437a9f;}
.extinguisher-transition .cd-modal .modal-close::before,
.extinguisher-transition .cd-modal .modal-close::after{background:#f1faee;}
.extinguisher-transition .cd-modal .modal-close{background:#cdd5ca;}
.extinguisher-transition .cd-modal .modal-close:hover{background:#a9afa7;}
.extinguisher-transition .cd-transition-layer .bg-layer{width:2500%;background-image:url(../img/extinguisher.png);}
.extinguisher-transition .cd-transition-layer.opening .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards;animation:cd-sequence 0.8s steps(24) forwards;}
.extinguisher-transition .cd-transition-layer.closing .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards reverse;animation:cd-sequence 0.8s steps(24) forwards reverse;}
@media only screen and (min-width:768px){.extinguisher-transition h1{font-size:6rem;}
.extinguisher-transition h2{font-size:5.4rem;font-weight:700;}
}
.glitch-transition{font-family:"Work Sans", sans-serif;color:#ffffff;}
.glitch-transition h1, .glitch-transition h2{margin-bottom:.4em;font-size:4rem;font-weight:700;}
.glitch-transition .cd-btn{background:#676970;color:#ffffff;}
.glitch-transition .cd-main-content{background:#2e2f36;}
.glitch-transition .cd-modal{background:#ffffff;}
.glitch-transition .cd-modal .modal-content{color:#676970;}
.glitch-transition .cd-modal .modal-close::before,
.glitch-transition .cd-modal .modal-close::after{background:#ffffff;}
.glitch-transition .cd-modal .modal-close{background:#d9d9d9;}
.glitch-transition .cd-modal .modal-close:hover{background:#b3b3b3;}
.glitch-transition .cd-transition-layer .bg-layer{width:2500%;background-image:url(../img/glitch.png);}
.glitch-transition .cd-transition-layer.opening .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards;animation:cd-sequence 0.8s steps(24) forwards;}
.glitch-transition .cd-transition-layer.closing .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards reverse;animation:cd-sequence 0.8s steps(24) forwards reverse;}
@media only screen and (min-width:768px){.glitch-transition h1{font-size:8rem;}
.glitch-transition h2{font-size:6rem;}
}
.scribble-transition{font-family:"PT Sans", sans-serif;color:#fcf4e1;}
.scribble-transition h1, .scribble-transition h2{margin-bottom:.4em;font-family:"Rock Salt", cursive;font-size:4rem;font-weight:700;}
.scribble-transition .cd-btn{background:#fcb586;color:#fcf4e1;border-radius:50em;}
.scribble-transition .cd-main-content{background:#653d55;}
.scribble-transition .cd-modal{background:#e44b60;}
.scribble-transition .cd-modal .modal-content{color:#fcf4e1;}
.scribble-transition .cd-modal .modal-close::before,
.scribble-transition .cd-modal .modal-close::after{background:#fcf4e1;}
.scribble-transition .cd-modal .modal-close{background:#c24052;}
.scribble-transition .cd-modal .modal-close:hover{background:#a03543;}
.scribble-transition .cd-transition-layer .bg-layer{-webkit-transform:translateY(-50%) translateX(-1.3158%);transform:translateY(-50%) translateX(-1.3158%);width:3800%;background-image:url(../img/scribble.png);}
.scribble-transition .cd-transition-layer.opening .bg-layer{-webkit-animation:cd-sequence-2 0.8s steps(37) forwards;animation:cd-sequence-2 0.8s steps(37) forwards;}
.scribble-transition .cd-transition-layer.closing .bg-layer{-webkit-animation:cd-sequence-2 0.8s steps(37) forwards reverse;animation:cd-sequence-2 0.8s steps(37) forwards reverse;}
.scribble-transition .cd-transition-layer.visible .bg-layer{-webkit-transform:translateY(-50%) translateX(-98.6842%);transform:translateY(-50%) translateX(-98.6842%);}
@media only screen and (min-width:768px){.scribble-transition h1{font-size:7.2rem;}
.scribble-transition h2{font-size:5.8rem;}
}
.gummy-transition{font-family:"Nunito", sans-serif;color:#f2f2f2;}
.gummy-transition h1, .gummy-transition h2{margin-bottom:.4em;font-size:4rem;font-weight:700;}
.gummy-transition .cd-btn{background:#3f5074;color:#f2f2f2;border-radius:50em;}
.gummy-transition .cd-main-content{background:#001d5b;}
.gummy-transition .cd-modal{background:#ef8692;}
.gummy-transition .cd-modal .modal-content{color:#f2f2f2;}
.gummy-transition .cd-modal .modal-close::before,
.gummy-transition .cd-modal .modal-close::after{background:#f2f2f2;}
.gummy-transition .cd-modal .modal-close{background:#cb727c;}
.gummy-transition .cd-modal .modal-close:hover{background:#a75e66;}
.gummy-transition .cd-transition-layer .bg-layer{width:2500%;background-image:url(../img/gummy.png);}
.gummy-transition .cd-transition-layer.opening .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards;animation:cd-sequence 0.8s steps(24) forwards;}
.gummy-transition .cd-transition-layer.closing .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards reverse;animation:cd-sequence 0.8s steps(24) forwards reverse;}
@media only screen and (min-width:768px){.gummy-transition h1{font-size:7.2rem;}
.gummy-transition h2{font-size:5.8rem;}
}
.gooey-transition{font-family:"PT Sans", sans-serif;color:#ffffff;}
.gooey-transition h1, .gooey-transition h2{margin-bottom:.4em;font-size:4rem;font-weight:700;font-family:"Averia Sans Libre", cursive;}
.gooey-transition .cd-btn{background:#cdf199;color:#053644;border-radius:50em;}
.gooey-transition .cd-main-content{background:#053644;}
.gooey-transition .cd-modal{background:#466c5e;}
.gooey-transition .cd-modal .modal-content{color:#ffffff;}
.gooey-transition .cd-modal .modal-close::before,
.gooey-transition .cd-modal .modal-close::after{background:#ffffff;}
.gooey-transition .cd-modal .modal-close{background:#3c5c50;}
.gooey-transition .cd-modal .modal-close:hover{background:#314c42;}
.gooey-transition .cd-transition-layer .bg-layer{width:2500%;background-image:url(../img/gooey.png);}
.gooey-transition .cd-transition-layer.opening .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards;animation:cd-sequence 0.8s steps(24) forwards;}
.gooey-transition .cd-transition-layer.closing .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards reverse;animation:cd-sequence 0.8s steps(24) forwards reverse;}
@media only screen and (min-width:768px){.gooey-transition h1{font-size:8rem;}
.gooey-transition h2{font-size:6rem;}
}
.mirror-transition{font-family:"Open Sans", sans-serif;color:#ffffff;}
.mirror-transition h1, .mirror-transition h2{margin-bottom:.4em;font-size:4rem;font-weight:700;}
.mirror-transition .cd-btn{background:#7e8aa3;color:#ffffff;}
.mirror-transition .cd-main-content{background:#000000;}
.mirror-transition .cd-modal{background:#ff9900;}
.mirror-transition .cd-modal .modal-content{color:#ffffff;}
.mirror-transition .cd-modal .modal-close::before,
.mirror-transition .cd-modal .modal-close::after{background:#ffffff;}
.mirror-transition .cd-modal .modal-close{background:#d98200;}
.mirror-transition .cd-modal .modal-close:hover{background:#b36b00;}
.mirror-transition .cd-transition-layer .bg-layer{width:2500%;background-image:url(../img/mirror.png);}
.mirror-transition .cd-transition-layer.opening .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards;animation:cd-sequence 0.8s steps(24) forwards;}
.mirror-transition .cd-transition-layer.closing .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards reverse;animation:cd-sequence 0.8s steps(24) forwards reverse;}
@media only screen and (min-width:768px){.mirror-transition h1{font-size:8rem;}
.mirror-transition h2{font-size:6rem;}
}
.diamond-transition{font-family:"Lato", sans-serif;color:#656e8d;}
.diamond-transition h1, .diamond-transition h2{margin-bottom:.4em;font-size:4rem;font-weight:700;}
.diamond-transition .cd-btn{background:#211426;color:#ffffff;}
.diamond-transition .cd-main-content{background:#f2efde;}
.diamond-transition .cd-modal{background:#41355a;}
.diamond-transition .cd-modal .modal-content{color:#ffffff;}
.diamond-transition .cd-modal .modal-close::before,
.diamond-transition .cd-modal .modal-close::after{background:#ffffff;}
.diamond-transition .cd-modal .modal-close{background:#372d4d;}
.diamond-transition .cd-modal .modal-close:hover{background:#2e253f;}
.diamond-transition .cd-transition-layer .bg-layer{-webkit-transform:translateY(-50%) translateX(-2.5%);transform:translateY(-50%) translateX(-2.5%);width:2000%;background-image:url(../img/diamond.png);}
.diamond-transition .cd-transition-layer.opening .bg-layer{-webkit-animation:cd-sequence-3 0.8s steps(19) forwards;animation:cd-sequence-3 0.8s steps(19) forwards;}
.diamond-transition .cd-transition-layer.closing .bg-layer{-webkit-animation:cd-sequence-3 0.8s steps(19) forwards reverse;animation:cd-sequence-3 0.8s steps(19) forwards reverse;}
.diamond-transition .cd-transition-layer.visible .bg-layer{-webkit-transform:translateY(-50%) translateX(-97.5%);transform:translateY(-50%) translateX(-97.5%);}
@media only screen and (min-width:768px){.diamond-transition h1, .diamond-transition h2{font-weight:300;}
.diamond-transition h1{font-size:8rem;}
.diamond-transition h2{font-size:6rem;}
}
.cartoon-transition{font-family:"PT Sans", sans-serif;color:#eeeeee;}
.cartoon-transition h1, .cartoon-transition h2{margin-bottom:.4em;font-size:4rem;font-weight:700;font-family:"Boogaloo", serif;}
.cartoon-transition .cd-btn{background:#f0ce00;color:#0d2228;border-radius:8px;}
.cartoon-transition .cd-main-content{background:#256276;}
.cartoon-transition .cd-modal{background:#f55850;}
.cartoon-transition .cd-modal .modal-content{color:#eeeeee;}
.cartoon-transition .cd-modal .modal-close::before,
.cartoon-transition .cd-modal .modal-close::after{background:#eeeeee;}
.cartoon-transition .cd-modal .modal-close{background:#d04b44;}
.cartoon-transition .cd-modal .modal-close:hover{background:#ac3e38;}
.cartoon-transition .cd-transition-layer .bg-layer{width:2500%;background-image:url(../img/cartoon.png);}
.cartoon-transition .cd-transition-layer.opening .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards;animation:cd-sequence 0.8s steps(24) forwards;}
.cartoon-transition .cd-transition-layer.closing .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards reverse;animation:cd-sequence 0.8s steps(24) forwards reverse;}
@media only screen and (min-width:768px){.cartoon-transition h1, .cartoon-transition h2{font-weight:300;}
.cartoon-transition h1{font-size:8rem;}
.cartoon-transition h2{font-size:6rem;}
}
.clones-transition{font-family:"Raleway", sans-serif;color:#ffffff;}
.clones-transition h1, .clones-transition h2{margin-bottom:.4em;font-size:4rem;font-weight:100;}
.clones-transition .cd-btn{background:#46165f;color:#ffffff;}
.clones-transition .cd-main-content{background:#948ec6;}
.clones-transition .cd-modal{background:#da9057;}
.clones-transition .cd-modal .modal-content{color:#ffffff;}
.clones-transition .cd-modal .modal-close::before,
.clones-transition .cd-modal .modal-close::after{background:#ffffff;}
.clones-transition .cd-modal .modal-close{background:#717171;opacity:.7;}
.clones-transition .cd-modal .modal-close:hover{background:#717171;opacity:1;}
.clones-transition .cd-transition-layer .bg-layer{width:2500%;background-image:url(../img/clones.png);}
.clones-transition .cd-transition-layer.opening .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards;animation:cd-sequence 0.8s steps(24) forwards;}
.clones-transition .cd-transition-layer.closing .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards reverse;animation:cd-sequence 0.8s steps(24) forwards reverse;}
@media only screen and (min-width:768px){.clones-transition h1, .clones-transition h2{font-weight:300;}
.clones-transition h1{font-size:7.2rem;}
.clones-transition h2{font-size:3.6rem;}
}
.kaleidoscope-transition{font-family:"Playfair Display", serif;color:#ffffff;}
.kaleidoscope-transition h1, .kaleidoscope-transition h2{margin-bottom:.4em;font-size:4rem;font-weight:700;}
.kaleidoscope-transition .cd-btn{background:#32ae9f;color:#ffffff;}
.kaleidoscope-transition .cd-main-content{background:#13172a;}
.kaleidoscope-transition .cd-modal{background:#3b3d89;}
.kaleidoscope-transition .cd-modal .modal-content{color:#ffffff;}
.kaleidoscope-transition .cd-modal .modal-close::before,
.kaleidoscope-transition .cd-modal .modal-close::after{background:#ffffff;}
.kaleidoscope-transition .cd-modal .modal-close{background:#323474;}
.kaleidoscope-transition .cd-modal .modal-close:hover{background:#292b60;}
.kaleidoscope-transition .cd-transition-layer .bg-layer{width:2500%;background-image:url(../img/kaleidoscope.png);}
.kaleidoscope-transition .cd-transition-layer.opening .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards;animation:cd-sequence 0.8s steps(24) forwards;}
.kaleidoscope-transition .cd-transition-layer.closing .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24) forwards reverse;animation:cd-sequence 0.8s steps(24) forwards reverse;}
@media only screen and (min-width:768px){.kaleidoscope-transition h1{font-size:7.2rem;}
.kaleidoscope-transition h2{font-size:5.6rem;}
}
@-webkit-keyframes cd-sequence{0%{-webkit-transform:translateY(-50%) translateX(-2%);transform:translateY(-50%) translateX(-2%);}
100%{-webkit-transform:translateY(-50%) translateX(-98%);transform:translateY(-50%) translateX(-98%);}
}
@keyframes cd-sequence{0%{-webkit-transform:translateY(-50%) translateX(-2%);transform:translateY(-50%) translateX(-2%);}
100%{-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%);}
}