/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
    background-color: #000000;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   custom styles
   ========================================================================== */


body {
	background: #666666;
	font-family: Georgia, Times New Roman, Times, serif;
	font-weight: bold;
	font-size: 30px;
	text-align: center;
}

h1, h2, h3, h4, h5 { margin: 0; padding: 0; font-weight: normal; text-transform: uppercase; line-height: 1; font-family: "Arial Black",Gadget,sans-serif; }

a, a:visited {
    /*
	color: #D92B00;
	font-weight: bold;
	font-style: italic; */
    text-decoration: none;
}

ul {
	list-style: none;
}

pre {
	font-size: 18px;
}

img{ /* position: absolute; top:0; left:0; margin:0; padding:0; */}


/*----------------------------------------
    SHARED ONE MATCH STYLES
/*---------------------------------------- */
.circle {
    display: block; position: relative;
    width: 200px; height: 200px; top:0;
    background-color: #FFFFFF;
    -webkit-border-radius: 99em;
    -moz-border-radius: 99em;
    border-radius: 99em;
    box-shadow: 4px 9px 9px rgba(0, 0, 0, 0.55);
}

.circle.inner, .circle.outer,
.box.inner, .box.outer { position:absolute !important; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/canvas-texture-20.png) repeat; top:0; left:0; margin:0; }

.outer.circle { width:100%; height: 100%; }

.dotted-circle{
    display: block; position: relative;
    width: 120px; height: 120px;
    -webkit-border-radius: 99em;
    -moz-border-radius: 99em;
    border-radius: 99em;
    border: 3px dotted #e5e1da;
    margin:-3px;
}
.dot {
    display: block; position: relative;
    width:12px; height: 12px;
    -webkit-border-radius: 99em;
    -moz-border-radius: 99em;
    border-radius: 99em;
}

.boxes .box {
    display: block; position: relative;
    width: 200px; height: 200px;
    box-shadow: 4px 9px 9px rgba(0, 0, 0, 0.55);
}

.boxes .outer {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.round-box{
    position:relative;
    height: auto; width: auto;
    -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
    background-color: #ebece7;
    border: 0px solid #000000;
    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    -o-box-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    -ms-box-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

.border {
    -webkit-border-image:url(https://s3.amazonaws.com/cbs-onematch-comic/img/border.png) 30 30 round; /* Safari 5 */
    -o-border-image:url(https://s3.amazonaws.com/cbs-onematch-comic/img/border.png) 30 30 round; /* Opera */
    border-image:url(https://s3.amazonaws.com/cbs-onematch-comic/img/border.png) 3 3 round;
}
.border-h { position:absolute; margin:-1px 0; padding:0; height:3px; width:100%; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/border-h.png) repeat;}
.border-v { position:absolute; margin:0 -1px; padding:0; width:3px; height:100%; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/border-v.png) repeat;}
.sprite { background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/onematch-sprite.png) no-repeat; }
.texture { background:url(https://s3.amazonaws.com/cbs-onematch-comic/img/canvas-texture-20.png) repeat; }

.yellow-btn{ display:block; position:relative; width:157px; height:43px; }
.yellow-btn .yellow-box{ position:absolute; width:100%; height:100%; background-color: #eadf9f; box-shadow: -4px 5px 0px rgba(0, 0, 0, 1); }
.yellow-btn .yellow-box .box{ position: absolute; width:162px; height:50px; margin:-5px 0 0 -3px; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/onematch-sprite.png) no-repeat 0px -90px;}
.yellow-btn p{ position: absolute; left:0; width:100%; font-size: 12px; color: #000000; text-align: center; line-height: 1.7; }
.yellow-btn p.line2{ font-size: 9px; line-height: 1.5; margin-top:6px;}

.yellow-btn:hover .yellow-box{ background-color: #FFFFFF; }

.red-circle { display: block; position: absolute; top:0; width:1280px; height: 720px; }
.red-circle .circles { display: block; position: relative; width:120px; height: 120px; top:100px; left:10px; }

/*.click-drag .draggable.circles { display: block; position: relative; width:120px; height: 120px; top:100px; left:10px; } */
.red-circle .circles .inner.circle{ width:120px; height: 120px; margin:0px; background-color: #e0dcd3; }
.red-circle .circles .outer.circle{ width:140px; height: 140px; margin:-10px; background-color: #ec2229; }
.red-circle p, .white-circle p{ position:absolute; font-size: 15px; color: #c12e2e; width:100%; line-height: 1.5; top:0; }

.txt-armyourself{ margin-top:32px; color:#c12e2e; }

.click-drag .droppable{ position:absolute; top:220px; left:390px; width: 120px; height: 120px; }
.click-drag .droppable .circle{ width: 100%; height: 100%; background-color: black; box-shadow: none !important; opacity: .4; }

.click-drag .line{ position:absolute; display:block; width:1px; height: 1px; top:200px; left:300px; }
.click-drag .line .dotted-line{ position:absolute; display:block; width:100px; top:0px; right:0px; margin-right:0px; border-top: 3px dotted #e5e1da;/*#e5e1da;*/ }
.click-drag-over { margin-right:69px !important; }


/* DRAG AND DROP */
.ui-state-active {
	/*background-color: red !important; padding:10px; */
    border-color: #c12e2e;
    transform:scale(1.15);
    -ms-transform:scale(1.15); /* IE 9 */
    -webkit-transform:scale(1.15); /* Safari and Chrome */

    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #212121;
	text-decoration: none;
}

.btn { cursor: pointer; }

/* ***********************
    PRELOADER
 *********************** */
/*
#preloader { }
#preloader .valign-vid-middle {height:275px; }
#preloader .logo{ margin-bottom: 58px; opacity: 0; }

#loader{ display:none; width:500px; height:4px; margin: 0 auto; margin-bottom:13px; background-color:#e0e0e0; }
#loader .wrapper{ position:relative; left:50%; }
#loader-per{ position:absolute; color:#318ac6; font-size: 15px; width:100%; text-align: center; left:-50%; margin-top: -30px; }
#loader-bar{ position:relative; width:.1%; left:-50%; margin:0 auto; height:4px; background-color: #0b84d5; }

#preloader p.loader-copy{ opacity:0; text-align: center; color: #cecece; font-size: 19px; }

}

#static-buffer { display:none; position:absolute; top:50%; left:50%; }
#static-buffer .child{ position:absolute; width:24px; height:24px; top:-12px; left:-12px; background: url(../img/buffer-gr.png) no-repeat -280px -100px; }
 */

.circle-loader { position:absolute; top:-10px; left:-10px; width:20px; height:20px; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/circle-loader.gif) no-repeat center; }
.chapter-card .loader-holder { position:absolute; top:290px; left:50%; width:40px; height:40px; z-index: 1; }
.chapter-card .loader-holder .circle{ position:absolute; width:40px; height:40px; top:-20px; left:-20px; box-shadow:none; }

.buffer { display:block; position:absolute; top:50%; left:50%; z-index: 10; }
.buffer .child{ position:absolute; width:20px; height:20px; top:-10px; left:-10px; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/circle-loader2.gif) no-repeat center; }

#main-nav .loader-holder { position:absolute; width:70px; height:70px; z-index: 1; }
#main-nav .loader-holder .circle{ position:absolute; width:70px; height:70px; top:0px; left:0px; box-shadow:none; background-color: #000000; opacity: .7; }
#main-nav .loader-holder .circle-loader{ position:absolute; top:25px; left:25px; width:20px; height:20px; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/circle-loader2.gif) no-repeat center; }



#site-buffer { display:block; }
#tap-to-enter{ position:relative; display:block; opacity:0; margin: 0 auto; width:150px; text-align: center; }


/* ----------------------------------------
    HEADER
/* ---------------------------------------- */
#header { position:fixed; display:block; width:100%; height: 54px; top:0; z-index: 100;}

#header .title{ display:block; position:absolute; top:-55px; width:100%; height:100%; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/canvas-texture-20.png) repeat; }
#header .title .tint{ width:100%; height:100%; bottom:0px; background-color: #000000; opacity: .5; }
#header .title .border-h{ bottom:0px; }
#header .title .one-hero{ position:relative; top:12px; margin:-3px auto 0 auto; width:268px; height: 37px; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/onematch-sprite.png) no-repeat;}

#controller{ position:absolute; right:10px; top:17px; }
#controller ul{ position:relative; float: right; margin:0; padding:0 5px; }
#controller ul li{ float: left; }
#controller ul li.animeAceReg { color:#7e7c77; font-size: 9px; line-height: 1; padding:5px; }

.toggle-btn { display:block; position:relative; width:38px; height:20px;  }
.toggle-btn .dot { position:absolute; margin:-2px; left:0; width:23px; height:22px; background-position: -364px 0;  }
.toggle-btn .bg { position:absolute; width:100%; height:100%; top:0; left:0; }

.autoplay .toggle-btn .bg { /*background-position: -281px 0;*/ }
.sound .toggle-btn .bg{ /*background-position: -281px -20px;*/ }

.autoplay { display:none; }
.toogle-on{ background-position: -281px -20px; }
.toogle-off{ background-position: -281px 0; }

/*----------------------------------------
    NAV (NAV LEFT)
/*---------------------------------------- */
/* MAIN NAV */
#main-nav{ position:fixed; display:none; bottom: -90px; margin-bottom:-16px; z-index: 11; left:50%; width:920px; height:150px; }
#main-nav .wrapper{ position:absolute; left:-50%;  margin-left:-3px; width:100%; height:100%; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/paper-green.png) repeat; }
#main-nav ul.nav { position: absolute; top:0; margin:14px 10px; padding:0px; }
#main-nav ul.nav li{ float:left; margin:0px; width:146px; padding:0;  }

#main-nav ul.nav li .dots{ position:relative; margin:0 auto; width:70px; height: 70px;  }
#main-nav ul.nav li .dot{ position:absolute; }

#main-nav ul.nav li .dot.inner { margin:2px; width:66px; height: 66px; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/thumbs.jpg) no-repeat; }

#main-nav ul.nav li .dot.outer { width:70px; height: 70px; background-color: #000000; }

#main-nav ul.nav li .label{ width:96px; height: 25px; background-color: #e5e0d6; margin: 7px auto 0 auto; box-shadow: -2px 3px 0px rgba(0, 0, 0, 0.65); }
#main-nav ul.nav li .label p{ font-size: 9px; color:#303326; margin:0; padding:0; line-height: 2.7; }

.label-shadow {
    background-color: #e5e0d6;
    box-shadow: -2px 3px 0px rgba(0, 0, 0, 0.65);
}

.label-shadow-over {
    background-color: #f7f4ed !important;
}

.label-shadow-on {
    background-color: #e5e0d6;
    box-shadow: -2px 3px 0px rgba(0, 0, 0, 0.65);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.label-shadow-off {
    background-color: #85827b !important;
    box-shadow: -2px 3px 0px rgba(0, 0, 0, 0) !important;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

#main-nav .line { top:50px; left:100px; }

#main-nav .lock-icon { position:absolute; display:block; left:802px; top:16px; width:66px; height:66px; background-position: -680px -170px; }
#main-nav .unlocked { position:absolute; left:717px; top:-80px; width:227px; height:78px; background-position: -450px -170px; }
#main-nav .blocker { position:absolute; display:block; width:438px; height:100%; left:460px; opacity: 0;  z-index: 1;}

/* SHORT NAV */
#short-nav{ position:absolute; display:none; right:12px; top: 50px; z-index: 100; }
#short-nav ul li{ display:block; position:relative; width:22px; height: 22px; margin:0; opacity: .5; }
#short-nav ul li .dot{ top:5px; left:5px; width:12px; height: 12px; background-color: #e5e0d6; opacity: .5; }
#short-nav ul li .dot-over-box { position:absolute; right:20px; top:0px; width:80px; height: 20px; background-color: #efe7af; border: 2px solid #303326; }
#short-nav ul li .dot-over-box p{ position:absolute; top:0px; width:100%; color:#303326; font-size: 8px; text-align: center; line-height: 1; margin: 5px 0; }

#short-nav .lock-icon { position:absolute; display:block; right:5px; top:146px; width:10px; height:10px; background-position: -400px -90px;  }

.active-short{ background-color: #ece29f; opacity: .55; }
.active-main{  }

/*----------------------------------------
    FOOTER
/*---------------------------------------- */

footer { position: fixed; bottom:0; width:100%; height: 48px; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/footer-bg.png) repeat; z-index: 99999; }
footer ul,
footer ul li{margin:0; padding:0; }

#toggle-nav{ display:none; width:220px; background-color: #e4dfd5; position:relative; margin: 2px auto; height:46px; color:#2c2c2c; cursor: pointer; }
#toggle-nav li{ position:absolute; }
#toggle-nav .caret{ top:3px; left:105px; width:11px; height:17px; background-position: -370px -25px;}
#toggle-nav .copy{ top:13px; left:15px; width:190px; height:25px; background-position: -90px -165px; }

#legals { position: absolute; top:18px; left:10px; margin:0; padding: 0px; font-size: 10px; }
#legals li{ float: left; margin:0; padding: 0 8px; border-right: 1px solid #2c2c2c; }
#legals li:last-child{ border-right: 0px; }
#legals li a{ color: #2c2c2c; cursor: pointer; }
#legals li a:hover{ color: #ede9e3; }

#legals li .register { display:none; }
#legals li:nth-child(2) { border-right: 0px; }

footer .sign-up { position:absolute; display:none; left:200px; top:-80px; width:230px; height:78px; background:url('https://s3.amazonaws.com/cbs-onematch-comic/img/signup-pop.png') no-repeat; }

/* SHARE */
.share {position: absolute; top:9px; right:16px; margin:0; }
.share li{ width:32px; height:32px; float: left; margin: 0 5px; }
.share li:first-child {margin-left:0; }
.share li:last-child {margin-right:0; }
.share li a{ display:block; width:100%; height: 100%; background: url('https://s3.amazonaws.com/cbs-onematch-comic/img/icon-share.png') no-repeat;}

.share .fb { background-position: 0 0 }
.share .gp { background-position: -40px 0; }
.share .tw { background-position: -80px 0; }

.share a:hover.fb {background-position:0 -40px;}
.share a:hover.gp {background-position:-40px -40px;}
.share a:hover.tw {background-position:-80px -40px;}


/*----------------------------------------
    PRELOADER
/*---------------------------------------- */
#preloader { position:fixed; top:0; left:0; width:100%; height: 100%; padding:0; margin: 0; background-color: #000000; z-index: 99998; }
#preloader .wrapper{ position:absolute; top:0; left:0; padding:0; margin: 0; left:50%; top:50%; width:500px; height: 385px; }

#preloader h3{ position:absolute; top:-350px; width:720px; margin-left:-360px; font-size: 31px; color:#FFFFFF; line-height: 1.2; text-align: center; }

#preloader ul{ position:absolute; left:-250px; top:-200px; width:500px; height: 385px; padding:0; margin: 0; overflow: hidden;  }
#preloader ul li{ position:absolute; width:100%; top:0; left:0; padding:0; margin: 0; }
#preloader .hero{ top:100px; left:-400px; }
#preloader .hero-bg{ opacity: 0; }
#preloader .hero .tire-light{ position:absolute; top:108px; width:90px; height:90px; }
#preloader .hero .tire-light.left{ left:20px; }
#preloader .hero .tire-light.right{ left:232px; }
#preloader .per { top:300px; }
#preloader .per p{ font-size: 18px; color: #FFFFFF; text-align: center; opacity: 0;}
/*
#preloader .hero-bg{ background: url(../img/loader/loader-bg.jpg) no-repeat; }
#preloader .hero-mask{ background: url(../img/loader/loader-mask.png) no-repeat; }
 */
#preloader .texture{ position:absolute; top:0; left:0; width:100%; height: 100%; padding:0; margin: 0; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/noise-texture.png) repeat; }

#preloader-footer{ display: block; position: absolute; bottom: 45px; width:100%; height: 112px; overflow: hidden; background-color: #fcf6ea; z-index: 100000; }
#preloader-footer ul{ display: block; position: relative; width:980px; height: 100%; left:auto; top:auto;  margin:0 auto; margin-top:20px; padding:0; }
#preloader-footer ul li{ position:relative; display: inline-block; width:auto; margin-right: 40px; float: left; }
#preloader-footer ul li:last-child{ margin-left: 0px;}
#preloader-footer .copy { width:540px; margin-top:12px;  }
#preloader-footer .copy p { margin:0; text-align: right; font-size: 17px; color:#202020; line-height: 1.5;}
#preloader-footer .one-match-logo{ margin-top:9px; width:172px !important; height: 46px; background-position: 0 -40px; }
#preloader-footer .cbs-logo{  }

/*----------------------------------------
    CONTAINER
/*---------------------------------------- */

#scroll-container { position: absolute; display:block; overflow: hidden; width:100%; height:100%; background-color: black; }
#scroll-container .viewport{ position: fixed;  display:block; overflow: hidden; top:0; left:0; width:1280px; height:720px; }

#scroll-content { position: absolute;  display:block; top:0; left:0; }

/* make overflow hidden from viewport on touch devices todo */
.touch #viewport-wrapper {
    overflow: hidden;
}

#spacer .wrapper { position:relative; top:0px; left:2px; height:1000px; width:2px;  }
/*----------------------------------------  BLOCKS */
.chapter { width: 1280px; }

.scrollblock { position: relative; margin: 0; width: 1280px; height: 720px; left:0; overflow: hidden; background-color: #000000; }
.scalable    { position: relative; margin: 0; width: 1280px; height: 720px; left:0; top:0; background-color: #000000;}

.layer{ position: absolute; margin:0; padding:0; }
.layer-holder, .hero-holder { position: absolute; height: 720px; margin:0; padding:0;}

.pin-container { position: relative; width: 1280px; overflow: hidden; /*todo: without border - pin scrollbar is jumping */ /*margin-bottom: -200px;*/ }

.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; }


/* ----------------------------------------------
    OVERLAY SCREEN
   ---------------------------------------------- */
.tint{ position:absolute; width:100%; height: 100%; background-color: #000000; }
.tint.reload{ opacity: 0; display: none; z-index: 10; }

#start { position:relative; width:100%; height: 100%; }

/* OVERLAY */
.middle {position:absolute; top:50%; margin:0; }
.overlay { position:absolute; top:0; left:0; z-index: 10; width:100%; height: 100%; padding:0; margin:0; }
.overlay .tint{ opacity: .5; }
.overlay .center { position:absolute; left:50%; margin:0;}
.overlay .wrapper { position:absolute; top:-244px; left:-244px; width:488px; height:488px;  }

.overlay .holder .boxes { width:100%; height:100%; }
.overlay .holder .outer { width:100%; height:100%; background-color: #787c63; opacity: .9; }
.overlay .holder .inner { width:452px; height: 452px; margin:18px; background-color: #e3ded5; }

.overlay .content { display: block; position:relative; margin:18px; }
.overlay .content h3 { position:relative; font-size: 73px; color: #6e725d; }
.overlay .content h5 { position:relative; font-size: 18px; color: #363629; line-height: 1.4; }
.overlay .content .btn { margin:0 auto; }


.scroll-arrow { position:absolute; height: 62px; top:670px; left:50%; }
.scroll-arrow ul{ position:absolute; top:-50px; left:0px; width:240px; height: 50px; padding:0; margin:0; /*background: url(../img/onematch-sprite.png) no-repeat -190px -70px; */ }

.scroll-arrow ul li.copy{ position:absolute; top:0px; left:-200px; width:400px; height: 12px; padding:0; margin:0; background-position: 0px -390px;  }
.scroll-arrow ul li.arrow{ position:absolute; top:35px; left:-11px; width:23px; height: 15px; padding:0; margin:0; background-position: -260px -50px;  }
/*.scroll-arrow ul li{ position:absolute; opacity:0; top:25px; left:16px; width:31px; height: 19px; padding:0; margin:0; background: url(../img/onematch-sprite.png) no-repeat -40px -160px;  } */


#c1-2 .overlay{ width:100%; height: 100%;}
#c1-2 .overlay .email{ left:50%; height: 200px; width:100px; }
#c1-2 .overlay .wrapper { width:680px; height:560px; left:-340px; top:-270px; }

#c1-2 .overlay .wrapper .round-box  { width:100%; height:100%; opacity: .7; }
#c1-2 .overlay .wrapper .bottom,
#c1-2 .overlay .wrapper .bottom-copy{ position:absolute; width:100%; height:42px; bottom:0; }
#c1-2 .overlay .wrapper .bottom  {
        -webkit-border-radius: 0px 0px 6px 6px; -moz-border-radius: 0px 0px 6px 6px; border-radius: 0px 0px 6px 6px;
        background-color: #000000; border: 0px solid #000000;  opacity: .2;
}
#c1-2 .overlay .wrapper .bottom-copy  { font-size: 15px; color:#070705; line-height: 2.8; margin:0px; text-transform: uppercase;  }
#c1-2 .overlay .wrapper .bottom-arrow  { position:absolute; bottom:-16px; left:328px; width:20px; height:16px; background-position: -300px -230px; }
#c1-2 .overlay .wrapper .correct-icon{ position: relative; display:none; margin: 20px auto 0 auto; width:25px; height:20px; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/onematch-sprite.png) no-repeat -390px 0px;  }

/*
#c1-2 .overlay .holder .outer { }
#c1-2 .overlay .holder .inner { width:486px; height:450px; margin:20px; }
*/
#c1-2 .overlay .content{ position:absolute; display: block; top:0; width:100%; height:100%; margin:0; }
#c1-2 .overlay .content ul{ position:relative; display: inline-table; width:100%; margin:0; padding:0;}
#c1-2 .overlay .content ul.subject{ margin-top:23px; }
#c1-2 .overlay .content ul li{ position:relative; display:block; float: left; }
#c1-2 .overlay .content ul.upper li{ margin: 5px 0px; padding:0; height: 25px; line-height: 1.5; }
#c1-2 .overlay .content ul.upper li:first-child {width:12%; text-align: right; font-size: 18px; color: #363629;  }
#c1-2 .overlay .content ul.upper li:last-child{ background-color: #FFFFFF; width:84.2%; font-size: 14px; text-align: left; margin-left: 10px; text-indent: 15px;}
#c1-2 .overlay .content ul.upper li h5{ line-height: 1.4; }
#c1-2 .overlay .content ul.subject li h5{ color:#ec1a29;}

#c1-2 .overlay .content .body{ position:relative; margin-top:0px; width:95%; height: 290px; left:2.5%; overflow: hidden; }
#c1-2 .overlay .content .body .body-bg,
#c1-2 .overlay .content .body .copy{ position:absolute; top:0; width:100%; }
#c1-2 .overlay .content .body .body-bg{ background-color: #8e8e8e; opacity: .5; height: 290px; }

#c1-2 .overlay .content .body .copy{ width:97%; height:100%; padding:0% 1.5%; overflow: hidden;}
#c1-2 .overlay .content .body .blocker{ width:100%; height: 100%; top:0; left:0; position: absolute; border: 1px solid green; }
#c1-2 .overlay .content .body p{ font-size: 13px; margin:14px; line-height: 1.8; text-align: left; }
#c1-2 .overlay .content .body p.dear{ margin:11px; margin-top:20px; }

#c1-2 .overlay .content .enter-email-copy{ font-size: 12px; color:#FFFFFF; text-align: center; margin-top:25px; }
#c1-2 .overlay .content .input-container{ position:relative; width:620px; }

#c1-2 .overlay .content ul.input-container {width:590px; height:45px; margin-top:0px; margin-bottom: 0px; }

#c1-2 .overlay .content ul.input-container .input-box{ position:relative; margin: 0; padding:0; width:390px; height: 37px; background-color: #FFFFFF; border: 2px solid #212121; }
#c1-2 .overlay .content ul.input-container .input-box input{ position:absolute; top:0; left:2%; width:95%; height: 25px; line-height: 1; border:0; padding:0; margin:5px; font-size: 10px; color:#2f2f2f; text-align: left; }

#c1-2 .overlay .content .btn { margin-left:30px; margin-top:-1px !important; }
#c1-2 .overlay .content .btn .yellow-box{ transform: scale(1.1,.9); -ms-transform: scale(1.1,.9); /* IE 9 */ -webkit-transform: scale(1.1,.9); /* Safari and Chrome */ }
#c1-2 .overlay .content .btn.yellow-btn p{ font-size: 10px !important; margin-top:13px !important;}
#c1-2 .overlay .content p.error{ display:none; width:100%; font-size: 10px; color:#ec1a29; text-align: left; margin-top: 2px; line-height: 1; }


/* ----------------------------------------------
    START SCREEN
   ---------------------------------------------- */

/* ----------------------------------------------
    CHAPTER CARD
   ---------------------------------------------- */
.chapter-card { position:absolute; top:0; width:100%; height: 100%; z-index: 1; }
.chapter-card .tint { opacity: .55; }
.chapter-card .ch-txt-container { position:relative; border: 2px solid #FFFFFF; height: 290px; margin:200px auto; padding: 0; }
.chapter-card .ch-txt-container li { position:relative; float:left; margin:0; top:20px; padding: 0; width:550px; height: 140px; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/chapter-texts.png) no-repeat;  }
.chapter-card .ch-txt-container li:first-child { margin-left:22px; }
.chapter-card .ch-txt-container li:last-child { margin-left:15px; }
.chapter-card .ch-txt-container .sub-copy { position:absolute; color: #e4dfd6; font-size: 16px; width:100%; bottom:45px; }
.chapter-card .lock { position:relative; margin:0 auto; top:232px; width:58px; height:58px; background-position: -690px -240px; }

/* ----------------------------------------------
    SPEECH BUBBLES
   ---------------------------------------------- */

.bubble-holder, .bubble .img{ position:absolute; }

/*
.bubble-holder { border: 2px solid pink; !important;}
.bubble { border: 1px solid deepskyblue !important; }
.double-bubbles { border: 2px solid deeppink !important; }
 */

.comic-copy.yellow-copy { top:50px; left:0; }
.bubbles { top:0px; left:0; }

.comic-copy .caption { top:0; left:0; margin:24px; border: 2px solid #000000;  background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/canvas-texture-20.png) repeat; background-color: #ffd303; }
.comic-copy .caption.blue { background-color: #c6ecf2;  }
.comic-copy .caption.white { background-color: #eae6de;  }
.comic-copy .caption p{ margin:13px 16px; font-size: 10px; color: #323131; line-height: 1.6; text-transform: uppercase; }
.comic-copy .caption.white p{ font-size: 13px;  }
.comic-copy .caption.blue p{ margin:13px 24px;  }

.bubble, .bubble-holder{ position: absolute; display: block; }
.comic-copy .bubble .c1{ background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/chapters/speech-bubbles-ch1.png) no-repeat;}
.comic-copy .bubble .c2{ background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/chapters/speech-bubbles-ch2.png) no-repeat;}
.comic-copy .bubble .c3{ background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/chapters/speech-bubbles-ch3.png) no-repeat;}
.comic-copy .bubble .c4{ background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/chapters/speech-bubbles-ch4.png) no-repeat;}
.comic-copy .bubble .c5{ background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/chapters/speech-bubbles-ch5.png) no-repeat;}


/* ----------------------------------------------
    FRAME BORDER
   ---------------------------------------------- */
.frame-border { display:block; position:absolute; bottom:0; left:0; width:100%; height: 20px; margin:0; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/frame-border.png) repeat; z-index: 1; }


/*----------------------------------------
    LANDING - INTRO
/*---------------------------------------- */
#vid-container{ position:absolute; display:block; overflow: hidden; top:0; left:0; width:1280px; height: 720px; }
#vid-container .poster{ position:absolute; display:block; overflow: hidden; top:0; left:0; width:1280px; height: 720px; }
#intro-vid { position:absolute; display:block; }

#skip-intro { position: fixed; display:block; width:100px; right:63px; bottom:65px; }
#skip-intro .btn .yellow-box { transform: scale(.85,.9); -ms-transform: scale(.85,.9); /* IE 9 */ -webkit-transform: scale(.85,.9); /* Safari and Chrome */ }
#skip-intro .btn p{font-size: 11px; line-height: 2; }

#landing { top:0; }
#landing .layer{ display: none; }
#landing .content-holder{ position:absolute; left:50%; top:0; width:562px; height: 340px; }
#landing .content-holder .content{ position:absolute; left:-281px; top:-190px; height: 340px; }
#landing .content-holder .title{ position:relative; }
#landing .copy-1{ position:relative; margin: 8px auto; background-position: 0 -340px; width:504px; height:22px;}
#landing .copy-2{ position:relative; margin: 8px auto; background-position: 0 -370px; width:384px; height:12px;}

#landing ul.input-container{ position:relative; width:492px; margin:40px auto 0 auto; padding:0; }
#landing ul.input-container .input-box{ position:relative; margin: 0; padding:0; width:100%; height:64px; }
#landing ul.input-container .input-box .input-bg{ width:100%; height:100%; margin: 0; padding:0; background-color: #FFFFFF; opacity: .1;  }
#landing ul.input-container .input-box input,
#landing ul.input-container .input-box .enter-name{ position:absolute; display:none; top:0; left:0; width:100%; line-height: 1; border:0; padding:0; margin:10px 0; font-size: 45px; text-transform:uppercase; color: #FFFFFF; text-align: center; background-color:transparent; }
#landing ul.input-container .input-box .enter-name{ top:4px; display:block; }
#landing ul.input-container .input-box .enter-name .input-cursor{ display:inline-block; font-family: "Arial",sans-serif,helvetica; font-weight: normal; margin-top:-10px;
    vertical-align: text-top; _vertical-align: top;
}
#landing ul.input-container .yellow-btn { margin:27px auto; }
#landing ul.input-container .yellow-btn p{  }

#landing .scroll-arrow ul li{ opacity:0; }


/* ----------------------------------------------
    CHAPTER 1
   ---------------------------------------------- */
/* CH 1-1 */
#c1-1 .sky{ left:150px; top:0px; }
#c1-1 .moon{ left:580px; }
#c1-1 .buildings{ left:100px; }
#c1-1 .hero{ left:20px;}
#c1-1 .screen-light{ top:21px; left: 204px; }
#c1-1 .light{ top:35px; left: 869px; opacity: 0; }
#c1-1 .sofa{ left:800px; top:370px; }
#c1-1 .room{ width:300px; height: 720px; }
#c1-1 .room-holder{ width:1280px; height: 720px; }



/* CH 1-2 */
#c1-2 .bg{ left:0px; top:0px; }
#c1-2 .fg{ left:585px; height: 720px;}
#c1-2 .desk{ left:-270px; bottom:0px; }
#c1-2 .hero, #c1-2 .hero-bk{ height: 592px; bottom:0px; }
#c1-2 .hero-holder{ width:10px; height:720px; left:-85px; top:0px; }

#c1-2 .screen-light{ width:180px; height: 180px; left:-100px; top:60px;
    transform:scale(4);
    -ms-transform:scale(4); /* IE 9 */
    -webkit-transform:scale(4); /* Safari and Chrome */ }



/* CH 1-3 */

#c1-3 .container-left .hero-left { bottom:0px; left:100px; }
#c1-3 .container-left .room-left { left:0px;}
#c1-3 .container-left .room-left2 { left:575px; }
#c1-3 .container-left .bg-left { left:0px; }

#c1-3 .container-right .holder {
    transform: rotate(-11.5deg); -ms-transform:scale(-11.5deg); -webkit-transform: rotate(-11.5deg);
    position:absolute; top: -100px; left: 0px; width: 900px; height: 880px; overflow: hidden;
}
#c1-3 .container-right .hero-right, #c1-3 .container-right .bg-right { transform: rotate(11.5deg); -ms-transform:scale(11.5deg); -webkit-transform: rotate(11.5deg); }
#c1-3 .container-right .hero-right { top:70px; }
#c1-3 .container-right .bg-right { top:60px;}
#c1-3 .container-right .white-line { left:-90px;}

#c1-3 .comic-copy { top:0; left:0; }
#c1-3 .comic-copy .bubble.left { top:135px; left:260px; }
#c1-3 .comic-copy .bubble.left .img{ width:235px; height: 128px; top:-95px; left:-233px; }

#c1-3 .comic-copy .bubble.right { top:500px; left:970px; }
#c1-3 .comic-copy .bubble.right .img{ width:226px; height: 174px; top:0; left:-30px; background-position: -260px 0; }


/* CH 1-4 */
#c1-4 .bike{ bottom:-332px; z-index: 2;}
#c1-4 .room{ top:-100px; }

#c1-4 .suit-holder{ top:66px; left:288px; width:390px; height: 552px; z-index: 1; }
#c1-4 .suit-holder .suit-glow{ display: none; }

#c1-4 .suit-holder .suit-4-holder{ left:143px; top:233px; }
#c1-4 .suit-holder .suit-3-holder{ left:72px; top:209px; }
#c1-4 .suit-holder .suit-2-holder{ left:47px; top:395px; }
#c1-4 .suit-holder .suit-1-holder{ left:34px; top:30px; }
#c1-4 .suit-holder .suit-0-holder{ left:272px; top:43px; }

#c1-4 .hero-holder .hero-suited{ display: none; }

#c1-4 .click-drag { z-index: 1;}
#c1-4 .click-drag .draggable { top:200px; left:330px; }
#c1-4 .click-drag .droppable { top:260px; left:700px; }
#c1-4 .click-drag .line .dotted-line { width:350px; }

#c1-4 .comic-copy.bubbles { z-index: 1; }
#c1-4 .comic-copy .bubble-holder.left { display:none; opacity: 0; }
#c1-4 .comic-copy .bubble-holder.right {  }

#c1-4 .comic-copy .bubble.left { left:740px; top:235px; }
#c1-4 .comic-copy .bubble.left .img{ width:315px; height: 176px; left:-310px; top:-160px; background-position: -250px -180px; }

#c1-4 .comic-copy .bubble.right { left:865px; top:200px; }
#c1-4 .comic-copy .bubble.right .img{ width:240px; height: 160px; top:-130px; background-position: 0px -180px; }

#c1-4 .frame-border{z-index: 2;}

/* CH 1-5 */
#c1-5 .hero-holder{ top:370px; width:350px; height: 526px; }
#c1-5 .sky{ right:0px; }
#c1-5 .moon{ right:220px; top:250px; }
#c1-5 .light{ right:195px; top:118px; }
#c1-5 .street{ width:1280px; height: 720px;}
#c1-5 .street-left{ }
#c1-5 .street-right{ left:900px; }

#c1-5 .comic-copy.bubbles { left:665px; top:370px; }
#c1-5 .comic-copy .bubble.left { bottom:128px; right:127px; }
#c1-5 .comic-copy .bubble.left .img{ width:324px; height: 196px; left:-324px; top:-196px; background-position: 0px -370px; }

#c1-5 .comic-copy .bubble.right { bottom:50px; right:50px; }
#c1-5 .comic-copy .bubble.right .img{ top:-152px; left:-296px; width:348px; height: 204px; background-position: -340px -370px; }

/* ----------------------------------------------
    CHAPTER 2
   ---------------------------------------------- */

/* CH 2-1 */
#c2-1 .hero-holder{ width:596px; height: 654px; bottom: 0; }
#c2-1 .comic-copy .bubble.top { left:810px; top:260px; }
#c2-1 .comic-copy .bubble.top .img{ left:-328px; top:-152px; width:332px; height: 170px; }
#c2-1 .comic-copy .bubble.bottom { left:830px; top:280px; }
#c2-1 .comic-copy .bubble.bottom .img{ left:-315px; top:-2px; width:320px; height: 185px; background-position: -350px 0; }

#c2-1 .mirror-container{ position:absolute; top:0; left:0; background-color: transparent; z-index: 2; }
#c2-1 .mirror{ left:255px; top:179px; width:158px; height: 232px; z-index: 100; opacity: 0; cursor: pointer; }
#c2-1 .mirror-broken{ left:255px; top:179px; width:158px; height: 232px; opacity: 0;}

#c2-1 .white-circle { position: absolute; left:420px; top:250px; width:130px; height: 130px; }
#c2-1 .white-circle .circle{ width:130px; height:130px; background-color: #FFFFFF; }
#c2-1 .white-circle p{ font-size: 12px; margin-top:30px; }

#c2-1 .stems { position:absolute; top:95px; left:46px; width:100px; padding:0; margin:0px; }
#c2-1 .stems .stem { position:relative; float:left; padding:0; margin:0px; width:18px; height:40px; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/onematch-sprite.png) no-repeat -370px -90px; }
#c2-1 .yellow-copy { z-index: 100;  }

/* CH 2-2 */
#c2-2 .hero-holder{ width:10px; height:10px; left:-120px; bottom:-30px; }
#c2-2 .hero{ left:0px; bottom:0px; }
#c2-2 .blast1{ left:210px; bottom:0px; }

/* CH 2-3 */
#c2-3 .char-holder{ width: 1280px; height: 720px; }

/* CH 2-4 */
#c2-4 .stage-1, #c2-4 .stage-2, #c2-4 .stage-3 {opacity: 0;}
#c2-4 .blast-1 {top:150px; left:500px;}
#c2-4 .blast-2 {top:150px; left:530px;}
#c2-4 .blast-3 {top:250px; left:580px;}

#c2-4 .comic-copy.bubbles .bubble { left:0px; top:0px; }
#c2-4 .comic-copy.bubbles .bubble .img{ left:-2px; top:-28px; width:270px; height: 130px; background-position: -350px -340px; }

#c2-4 .comic-copy.yellow-copy { top:170px; left:180px; }


/* CH 2-5 */
#c2-5 .sofa {top:700px; left:780px;}

#c2-5 .comic-copy.bubbles.first .bubble.right { left:600px; top:292px; }
#c2-5 .comic-copy.bubbles.first .bubble.right .img { width:288px; height: 128px; left:-285px; top:-32px; background-position: 0px -190px; }
#c2-5 .comic-copy.bubbles.first .bubble.left { left:565px; top:630px; }
#c2-5 .comic-copy.bubbles.first .bubble.left .img{ width:320px; height: 150px; background-position: -330px -190px; }

#c2-5 .comic-copy.bubbles.second .bubble.right { left:620px; top:310px; }
#c2-5 .comic-copy.bubbles.second .bubble.right .img { width:312px; height: 138px; left:-312px; top:-35px; background-position: 0px -320px; }

#c2-5 .comic-copy.bubbles.third { left:585px; top:620px; }
#c2-5 .comic-copy.bubbles.third .bubble.top { left:0px; top:0px; }
#c2-5 .comic-copy.bubbles.third .bubble.top .img{ width:338px; height: 135px; top:-70px; background-position: 0px -460px; }
#c2-5 .comic-copy.bubbles.third .bubble.bottom { left:233px; top:87px; }
#c2-5 .comic-copy.bubbles.third .bubble.bottom .img{ width:308px; height: 165px; left:-140px; top:-70px; background-position: -350px -470px; }


/* CH 2-6 */
#c2-6 .hero-holder {top:115px; }
#c2-6 .hero-holder .tire-light {}
#c2-6 .hero-holder .tire-light.left { top:395px; left:60px; }
#c2-6 .hero-holder .tire-light.right { top:385px; left:735px; }

#c2-6 .bg-container { width:100%; height: 100%; overflow: hidden;  }
#c2-6 .bg-container .bg-holder{ width:5120px; }

#c2-6 .efg, #c2-6 .efg2 { z-index: 1;}
#c2-6 .bg, #c2-6 .bg2 {bottom:0px; }
#c2-6 .bg2, #c2-6 .bg-objs2 { left:2560px; }

#c2-6 .bubble-holder { left:760px; top:285px; }
#c2-6 .bubble-holder .caption{ position:absolute; }

#c2-6 .bubbles-1 .bubble.hero-b{ left:0px; top:0px; }
#c2-6 .bubbles-1 .bubble.hero-b .img{ left:-2px; top:-45px; width:230px; height: 102px; background-position: 0px -600px; }
#c2-6 .bubbles-1 .caption{ left:190px; top:-200px; }

#c2-6 .bubbles-2 .bubble.hero-b.top{ left:100px; top:-123px; }
#c2-6 .bubbles-2 .bubble.hero-b.top .img{ left:-100px; top:-60px; width:283px; height: 136px; background-position: 0px -710px; }
#c2-6 .bubbles-2 .bubble.hero-b.bottom{ left:0px; top:0px; }
#c2-6 .bubbles-2 .bubble.hero-b.bottom .img{ left:0px; top:-85px; width:296px; height: 130px; background-position: 0px -848px;  }

#c2-6 .bubbles-2 .caption{ left:240px; top:-235px; }
#c2-6 .bubbles-2 .caption.blue p{ width:80px; }

#c2-6 .bubbles-3 .bubble.hero-b{ left:0px; top:0px; }
#c2-6 .bubbles-3 .bubble.hero-b .img{ left:-2px; top:-56px; width:286px; height: 124px; background-position: -350px -635px;  }
#c2-6 .bubbles-3 .caption{ left:190px; top:-200px; }
#c2-6 .bubbles-3 .caption.blue p{ width:140px; }

#c2-6 .bubbles-4 .bubble.hero-b.top{ left:140px; top:-98px; }
#c2-6 .bubbles-4 .bubble.hero-b.top .img{ left:-100px; top:-60px; width:210px; height: 116px; background-position: -391px -760px; }
#c2-6 .bubbles-4 .bubble.hero-b.bottom{ left:0px; top:0px; }
#c2-6 .bubbles-4 .bubble.hero-b.bottom .img{ left:0px; top:-76px; width:270px; height: 116px; background-position: -350px -882px;  }

/*
#c2-6 .comic-copy.bubbles.third { left:595px; top:680px; }
#c2-6 .comic-copy.bubbles.third .bubble.top { left:0px; top:-70px; }
#c2-6 .comic-copy.bubbles.third .bubble.top .img{ width:338px; height: 135px; top:-70px; background-position: 0px -460px; }
#c2-6 .comic-copy.bubbles.third .bubble.bottom { left:233px; top:17px; }
#c2-6 .comic-copy.bubbles.third .bubble.bottom .img{ width:308px; height: 165px; left:-140px; top:-70px; background-position: -350px -460px; }
*/

/*
#c2-6 .comic-copy .bubble.top { width:332px; height: 170px; }
#c2-6 .comic-copy .bubble.bottom { width:320px; height: 185px; background-position: -350px 0; }
*/


/*
#c2-6 .bg-ob-holder { height: 10px; bottom:310px; border: 1px solid red; }
#c2-6 .bg-ob-holder .layer { bottom:0; left:-100px; } */

/* ----------------------------------------------
    CHAPTER 3
   ---------------------------------------------- */
/* CH 3-1 */
/*
#c3-1 .doors-open { height: 702px; }
#c3-1 .doors-top {left:212px; bottom:0px; } */
#c3-1 .hero-top-holder {left:290px; bottom:0; width:656px; height: 445px; }

#c3-1 .container-bottom { top:720px; height: 620px; }
#c3-1 .hero-bottom { left:590px; bottom:70px; }
#c3-1 .blast-left { left:50px; bottom:10px; }
#c3-1 .blast-right { left:740px; bottom:-100px; }
#c3-1 .bg-bottom-1 { top:11px; }
#c3-1 .bg-bottom-2 { top:120px; }
#c3-1 .smack-left { left:140px; top:245px; }
#c3-1 .smack-right { left:1088px; top:270px; }

#c3-1 .comic-copy .bubble { left:700px; top:342px; }
#c3-1 .comic-copy .bubble .img{ width:290px; height: 128px; left:-287px; top:-36px; }

#c3-1 .speed-lines-holder {  }
#c3-1 .speed-lines { left:-30px; top: -40px; }

#c3-1 .speed-lines-holder{
    position:absolute; top: 70px; left: -30px; width:1350px; height: 618px; overflow: hidden;  border: 1px solid #000000;
    transform: rotate(4.76deg); -ms-transform:scale(4.76deg); -webkit-transform: rotate(4.76deg);  }
#c3-1 .speed-lines-holder .speed-lines {
    top: -110px; left: -20px; width:1320px; height: 830px;
    transform: rotate(-4.76deg); -ms-transform:scale(-4.76deg); -webkit-transform: rotate(-4.76deg);  }



/* CH 3-2 */
#c3-2 .hero-facial{  left:30px; top:70px; }
#c3-2 .hero-facial .hero-suprise, #c3-2 .hero-facial .hero-angry{  left:97px; top:105px; }
#c3-2 .hero-holder{ left:822px; top:258px; }
#c3-2 .hero-dark {opacity: 0; }
#c3-2 .blast{ left:0px; top:0px; }
#c3-2 .comic-copy .bubble { left:875px; top:275px; }
#c3-2 .comic-copy .bubble .img{ width:372px; height: 177px; left:-365px; top:-49px; background-position: 0 -130px; }

/* CH 3-3 */
#c3-3 .hero-holder{ left:190px; top:120px; }
#c3-3 .bg-right, #c3-3 .bg-right3{ left:150px; }
#c3-3 .bg-right2{ left:250px; }
#c3-3 .hero-holder .hero-arm-2, #c3-3 .hero-holder .hero-arm-3 { display:none; }

/* CH 3-4 */
#c3-4 .blast{ bottom:-100px; }
#c3-4 .effects { left: 260px; top:250px; width:260px; height: 360px; }

/* CH 3-5 */
#c3-5 .bg{ bottom:0;}
#c3-5 .container-left .hero{ left:700px; top:70px;}
#c3-5 .container-left .scientist{ left:50px; top:120px;}
#c3-5 .container-right .bg-right-2{ left:100px; }
#c3-5 .container-right{  }

#c3-5 .container-right .hero-holder{ position:absolute; top: 300px; left: 85px; width: 250px; height: 350px; overflow: hidden;
    transform: rotate(-7.3deg); -ms-transform:scale(-7.3deg); -webkit-transform: rotate(-7.3deg);  }
#c3-5 .container-right .hero-holder .hero { top: -20px; left: -110px;
    transform: rotate(7.3deg); -ms-transform:scale(7.3deg); -webkit-transform: rotate(7.3deg);  }



#c3-5 .comic-copy .bubble.scientist-1 { left:440px; top:370px; }
#c3-5 .comic-copy .bubble.scientist-1 .img{ width:322px; height: 151px; background-position: 0px -310px; }

#c3-5 .comic-copy .bubble.scientist-2 { left:445px; top:385px; }
#c3-5 .comic-copy .bubble.scientist-2 .img{ width:320px; height: 158px; left:-20px; background-position: 0px -600px; }
#c3-5 .comic-copy .bubble.c-hero { left:810px; top:227px; }
#c3-5 .comic-copy .bubble.c-hero .img{  width:312px; height: 137px; left:-310px; top:-37px; background-position: 0px -460px; }

#c3-5 .comic-copy.bubbles.right {}
#c3-5 .comic-copy.bubbles.right .bubble.hero-b { left:630px; top:530px; }
#c3-5 .comic-copy.bubbles.right .bubble.hero-b .img{  width:235px; height: 112px; left:-2px; top:-100px; background-position: 0px -760px; }



/* ----------------------------------------------
    CHAPTER 4
   ---------------------------------------------- */
/* CH 4-1 */
#c4-1 .bg-holder{ height:720px; }
#c4-1 .bg{ bottom:0;}
#c4-1 .hero{ bottom:-15px; left:350px; }
#c4-1 .stairs{ bottom:0; left:300px; }

#c4-1 .bubbles { top:330px; left:570px;}
#c4-1 .bubbles .bubble.top{ top:-139px; left:0px; }
#c4-1 .bubbles .bubble.top .img{ width:292px; height: 124px; }
#c4-1 .bubbles .bubble.bottom{ top:-45px; left:0px; }
#c4-1 .bubbles .bubble.bottom .img{ width:270px; height: 117px;background-position: 0 -124px; }

/* CH 4-2 */
#c4-2 .container-right{ left:507px; height: 720px; }
#c4-2 .left-bg-B{ left:500px; }
#c4-2 .bg-B{ left:120px; }
#c4-2 .bubbles .bubble{ top:295px; left:300px;}
#c4-2 .bubbles .bubble .img{ top:-97px; width:222px; height: 110px; background-position: 0 -240px;}

/* CH 4-3 */

#c4-3 .container-left .haima{ left:100px; }
#c4-3 .container-left .hero{ left:750px; }

#c4-3 .container-right{ z-index: 1;}
#c4-3 .container-right .haima{ top:210px; left:100px; }
#c4-3 .container-right .hero{ bottom:-10px; left:890px; }
#c4-3 .container-right .blast{ top:-200px; }

#c4-3 .bubbles.left .bubble-holder{ left:370px; top:340px; }
#c4-3 .bubbles.left .bubble.haima-1{ /*left:380px; top:330px;*/ }
#c4-3 .bubbles.left .bubble.haima-1 .img{ top:-114px; left:-3px; width:312px; height: 138px; background-position: 0 -350px;}
#c4-3 .bubbles.left .bubble.hero { left:830px; top:500px; }
#c4-3 .bubbles.left .bubble.hero .img{ left:-274px; top:-43px; width:276px; height: 116px; background-position: 0 -490px;}
#c4-3 .bubbles.left .bubble.haima-2{ left:370px; top:353px; }
#c4-3 .bubbles.left .bubble.haima-2 .img{ top:-60px; width:346px; height: 148px; background-position: 0 -610px;}

#c4-3 .bubbles.right{ z-index: 2; }
#c4-3 .bubbles.right .double-bubbles{ left:935px; top:115px; }
#c4-3 .bubbles.right .double-bubbles .bubble.top{ top:0px; left:-4px; }
#c4-3 .bubbles.right .double-bubbles .bubble.top .img{ left:-290px; top:-60px; width:330px; height: 125px; background-position: 0 -760px;}
#c4-3 .bubbles.right .double-bubbles .bubble.bottom{ left:-141px; top:88px; }
#c4-3 .bubbles.right .double-bubbles .bubble.bottom .img{ left:-154px; top:-50px; width:306px; height: 112px; background-position: 0 -888px;}

#c4-3 .bubbles.right .bubble.haima{ left:390px; top:505px; }
#c4-3 .bubbles.right .bubble.haima .img{ top:-60px; left:-3px; width:324px; height: 140px; background-position: 0 -1000px;}




/* CH 4-4 */
#c4-4 .bg{ top:-240px; }
#c4-4 .haima{ left:100px; top:200px; }
#c4-4 .hero{ left:750px; bottom:0;}
#c4-4 .blast{ left:250px; width:900px; height:680px;}
#c4-4 .blast-eye{ left:350px; top:205px;}

#c4-4 .bubbles.hero-b1 .bubble{ left:915px; top:555px; }
#c4-4 .bubbles.hero-b1 .bubble .img{ left:-312px; top:-152px; width:316px; height:176px; background-position: 0 -1500px;}

#c4-4 .bubbles.hero-b2 .bubble{ left:920px; top:545px; }
#c4-4 .bubbles.hero-b2 .bubble .img{ left:-272px; top:-43px; width:276px; height:120px; background-position: 0 -1380px; }

#c4-4 .double-bubbles{ left:412px; top:380px; }
#c4-4 .double-bubbles .bubble.top{ top:-129px; }
#c4-4 .double-bubbles .bubble.top .img{ width:267px; height: 122px; background-position: 0 -1140px;}
#c4-4 .double-bubbles .bubble.bottom{ left:50px; top:-5px; }
#c4-4 .double-bubbles .bubble.bottom .img{ left:-50px; top:-40px; width:270px; height: 116px; background-position: 0 -1264px;}

/* CH 4-5 */
#c4-5 .container-right{ width:2400px; height: 300px; /*width:500px; height: 300px;*/ }
#c4-5 .bg{ left:10px;}
#c4-5 .blast{ top:-10px; left:610px;}
#c4-5 .haima{ bottom:0px; left:60px;}
#c4-5 .hero{ bottom:-500px; left:460px; height: 800px;}
#c4-5 .hero-body{ top:0px; }
#c4-5 .hero-arm{ top:-118px; left:-70px; display: none; }
#c4-5 .stem{ display: none; height: 380px; }
#c4-5 .char-holder{ top: 0px; width:1000px; height: 720px; }

#c4-5 .caption.white{ margin-top:74px !important; }
#c4-5 .caption p{ font-size: 13px !important;}

#c4-5 .bubbles .bubble.haima-b{ left:610px; top:110px; }
#c4-5 .bubbles .bubble.haima-b .img{ left:-123px; top:-2px; width:254px; height:208px; background-position: -350px 0px; }

#c4-5 .bubbles .bubble.hero-b2{ left:675px; top:508px; }
#c4-5 .bubbles .bubble.hero-b2 .img{ left:-2px; top:-17px; width:236px; height:124px; background-position: -350px -210px; }

#c4-5 .bubbles .bubble.allison-b{ left:403px; top:347px;  }
#c4-5 .bubbles .bubble.allison-b .img{ left:-2px; top:-145px; width:285px; height:160px; background-position: -350px -350px; }
#c4-5 .bubbles .bubble.allison-b .bubble-copy{ position: absolute; left:80px; top:-115px; width: 135px; height: 90px; display: table; }
#c4-5 .bubbles .bubble.allison-b .bubble-copy p { display: table-cell; vertical-align: middle; font-size: 14px; margin:auto auto;
    white-space:normal; word-wrap: break-word; /* Internet Explorer 5.5+ */ word-break: break-all;}

#c4-5 .tint{ left:0px; top:0px;  }
/* CH 4-6 */
#c4-6 .mg .mg-bottom{ top:640px;  }
#c4-6 .hero { left:180px; height:682px; }
#c4-6 .allison { left:530px; height:580px;}

#c4-6 .bubbles.double-bubbles{ left:810px; top:350px; }
#c4-6 .bubbles.double-bubbles .bubble.top{ top:-159px; left:87px; }
#c4-6 .bubbles.double-bubbles .bubble.top .img{ left:-100px; top:-50px; width:212px; height: 109px; background-position: -350px -510px;}
#c4-6 .bubbles.double-bubbles .bubble.bottom{ left:0px; bottom:0px; }
#c4-6 .bubbles.double-bubbles .bubble.bottom .img{ left:-13px; top:-137px; width:245px; height: 150px; background-position: -350px -620px;}

#c4-6 .bubbles .bubble.hero-b{ left:360px; top:205px;  }
#c4-6 .bubbles .bubble.hero-b .img{ left:-193px; top:-145px; width:238px; height:145px; background-position: -350px -770px; }

#c4-6 .bubbles .bubble.allison-b{ left:815px; top:320px;  }
#c4-6 .bubbles .bubble.allison-b .img{ left:-2px; top:-134px; width:238px; height:140px; background-position: -350px -920px; }

#c4-6 .yellow-copy{ top:60px; right:50px; left:auto; }
#c4-6 .yellow-copy .caption p{ /*margin:15px 12px !important;*/ }
#c4-6 .yellow-copy .caption p span{ display:inline-block; padding-top:5px; }

/* ----------------------------------------------
    CHAPTER - BONUS
   ---------------------------------------------- */
/* CH 5-1 */
#c5-1 .people {left:200px; }

#c5-1 .comic-copy.bubbles{ left:0px; top:0px;  }
#c5-1 .bubbles.first .bubble.hero-b{ left:355px; top:290px;  }
#c5-1 .bubbles.first .bubble.hero-b .img{ left:-218px; top:-82px; width:220px; height:103px; }
#c5-1 .bubbles.first .bubble.guy{ left:548px; top:310px;  }
#c5-1 .bubbles.first .bubble.guy .img{ left:-2px; top:-90px; width:242px; height:112px; background-position: 0px -110px; }

#c5-1 .bubbles.second .bubble.hero-b{ left:345px; top:275px;  }
#c5-1 .bubbles.second .bubble.hero-b .img{ left:-188px; top:-27px; width:200px; height:95px; background-position: 0px -230px; }
#c5-1 .bubbles.second .bubble.guy{ left:550px; top:295px;  }
#c5-1 .bubbles.second .bubble.guy .img{ left:-2px; top:-54px; width:275px; height:122px; background-position: 0px -330px; }

/* CH 5-2 */
#c5-2 .container-left .hero-holder{ width:10px; height: 10px; top:640px; left:90px; }
#c5-2 .container-left .door-closed{ position:absolute; top:100px; left:280px;  }
#c5-2 .container-left .hero{ top:-420px; left:-75px; }
#c5-2 .container-left .smack{ top:263px; left:383px; }

#c5-2 .container-right { left:460px; }
#c5-2 .container-right .bg-2{position:absolute; left: 70px; }
#c5-2 .container-right .hero{ top:560px; left:40px; width:300px; }

#c5-2 .bubbles.first .bubble.hero-b{ left:850px; top:605px;  }
#c5-2 .bubbles.first .bubble.hero-b .img{ left:-5px; top:-140px; width:240px; height:146px; background-position: 0px -460px;}

#c5-2 .bubbles.second .bubble.haima{ left:760px; top:305px;  }
#c5-2 .bubbles.second .bubble.haima .img{ left:-176px; top:-136px; width:216px; height:142px; background-position: 0px -610px; }

#c5-2 .bubbles.second .bubble.hero-b{ left:850px; top:610px;  }
#c5-2 .bubbles.second .bubble.hero-b .img{ left:-2px; top:-101px; width:274px; height:127px; background-position: 0px -760px; }



/* CH 5-3 */
#c5-3 .container-left {  }
#c5-3 .container-left .hero{ top:30px; }
#c5-3 .container-left .door{ left:1000px; }
#c5-3 .container-left .door-2{ left:10px; }

#c5-3 .container-right { left:1303px; width:1310px; height: 720px; overflow: hidden;}
#c5-3 .container-right .hero{ left:10px;}
#c5-3 .container-right .door-2{ left:510px; }

#c5-3 .bubbles.double-bubbles{ left:385px; top:280px; }
#c5-3 .bubbles.double-bubbles .bubble.top{ top:-158px; left:66px; }
#c5-3 .bubbles.double-bubbles .bubble.top .img{ left:-100px; top:-50px; width:284px; height: 126px; background-position: 0px -890px;}
#c5-3 .bubbles.double-bubbles .bubble.bottom{ left:28px; top:-21px; }
#c5-3 .bubbles.double-bubbles .bubble.bottom .img{ left:-62px; top:-95px; width:294px; height: 124px; background-position: 0px -1022px;}

#c5-3 .bubbles.left .bubble.haima-b{ left:800px; top:320px;  }
#c5-3 .bubbles.left .bubble.haima-b .img{ left:-12px; top:-126px; width:342px; height:148px; background-position: 0px -1150px; }

#c5-3 .bubbles.right .bubble.hero-b{ left:700px; top:510px;  }
#c5-3 .bubbles.right .bubble.hero-b .img{ left:-325px; top:-63px; width:330px; height:142px; background-position: 0px -1300px; }

/* CH 5-4 */
#c5-4 .layer-holder{ left:640px; top:0px; height: 10px; width:10px; }
#c5-4 .layer-holder .street{ left:-800px; top:0px; }
#c5-4 .yellow-copy{ right:150px; left:auto; }
#c5-4 .yellow-copy.bottom{ right:50px; top:182px; }
#c5-4 .yellow-copy .caption p{ margin:15px 12px !important;; }

#c5-4 .yellow-copy.bottom{ right:49px; top:204px; width:225px; height: 79px; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/chapters/speech-bubbles-ch5.png) no-repeat 0px -1450px; }

#c5-4 .comic-copy.yellow-copy.bottom .caption { position:absolute; display: table; height: 74px; margin:0px !important; padding:0px !important; background-image: none; background-color: transparent; border-width: 0;}
#c5-4 .comic-copy.yellow-copy.bottom .caption p{ width:222px; display: table-cell; vertical-align: middle; text-align: center; }

/* ----------------------------------------------
    END CARD
   ---------------------------------------------- */
.char-photo.circle.inner, .char-photo { width:218px; height:218px; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/one-hero-characters.jpg); }

.end-card-holder { position:relative; width: 900px; height: 660px; margin: 0 auto;}
/*.maskee { overflow: hidden; -webkit-mask-image: url(../img/gradient.png);} */

/*.black-gradient{ position:absolute;border: 1px solid red; width:100%; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAH0CAYAAAD8PUeXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpERjdENTRFQzEwQzAxMUUzQkU5NkE5M0I0OERENEM0MyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpERjdENTRFRDEwQzAxMUUzQkU5NkE5M0I0OERENEM0MyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRGN0Q1NEVBMTBDMDExRTNCRTk2QTkzQjQ4REQ0QzQzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRGN0Q1NEVCMTBDMDExRTNCRTk2QTkzQjQ4REQ0QzQzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FMPI/wAAAG5JREFUeNrklMEKwDAMQl1h///Hc8txowOlmEtzEPUlxxYAOB7BtsK3E6IAwnLZVOjUKABrpc31nkXcyoofrU6lOZm+RpDc83OrOcsdE8EfCMuwqdCpUQDWSpvrPYu4lRU/Wp1KcwIRfGMNbwEGALaWyuCrr5qNAAAAAElFTkSuQmCC) repeat; }*/
.black-gradient{ position:absolute; width:100%;  }
.black-gradient.top{ top:0; height:250px; background:url(https://s3.amazonaws.com/cbs-onematch-comic/img/gradient-black-top.png) repeat; }
.black-gradient.bottom{ top:540; height:180px; background:url(https://s3.amazonaws.com/cbs-onematch-comic/img/gradient-black-bottom.png) repeat;}

.end-card { position:absolute; top:0; left:0; padding:0; margin: 0; height:100%; width:100%;  }
.end-card .tint { opacity: .85;}
.end-card .end-layer  { position: absolute; margin: 0; padding:0; width:100%; height: 100%;  }
.end-card .content  { position: absolute; margin: 0; width:100%; top:50%; }
.end-card .wrapper{ position: relative !important; margin: 0 auto; left:auto; }

.end-card .end-1 { width:100%; /*position: absolute; margin: 0; width:100%; top:50%;*/ }
.end-card .end-1 .wrapper{ width:550px; height:366px; top:-160px; /* width:680px; height:550px; */ }

#end-card .end-1 .photos{ position: relative; width:340px; height:168px; margin: 0 auto;}
#end-card .end-1 .photos li{ position:absolute; width:160px; height:162px; }
#end-card .end-1 .photos li.cartoon{ left:0; left:108px; background-position: -430px 0px; }
#end-card .end-1 .photos li.real{ opacity:0; left:178px; left:108px; background-position: -590px 0px;  }

#end-card .end-1 .title{ position: relative; margin: 28px auto 10px auto; width:494px; height:44px; background-position: 0 -290px; }
#end-card .end-1 h5{ margin-top:10px; font-size: 15px; color: #FFFFFF; line-height: 1.6; }
#end-card .end-1 h5 span.animeAceB{ font-size: 13px; }

#end-card .scroll-to-continue{ margin-top:30px; font-size: 10px; color: #FFFFFF; }

#end-card .end-2 { width:100%; color: #FFFFFF; }
#end-card .end-2 .content{ }
#end-card .end-2 .wrapper{ width:840px; height:310px; top:-150px; }
#end-card .end-2 .one-match-logo{ position: relative; margin:0 auto; width:172px; height: 46px; background-position: 0 -40px;  }
#end-card .end-2 h4{ line-height: 1; margin: 53px 0 0 0; color:#7aa036;}
#end-card .end-2 h4 .copy-1{ font-size: 45px;}
#end-card .end-2 h4 .copy-2{ font-size: 60px;}
#end-card .end-2 h6{ font-size: 14px; line-height: 1.8; margin-top: 9px;}
#end-card .end-2 h6 a{ color: #ec302a; cursor: pointer; }
#end-card .end-2 h6 a:hover{ color: #eadf9f; }


#end-card .end-3 { width:100%; color: #FFFFFF; }
#end-card .end-3 .wrapper{ height:460px; top:-215px; }

#end-card .end-3 .click{ margin:0 auto; width:140px; height: 34px; background-position: -400px -255px; }
#end-card .end-3 p.select{ font-size: 10px; color: #c8c9c9; margin-top: 0px; }

#end-card .end-3 .characters { position:relative; display:block; padding:0; height: 140px; width:770px; margin:46px auto 0 auto; }
#end-card .end-3 .characters .char { position:relative; display:block; float: left; margin-top:0; margin-left:55px; padding:0; width:110px; height: 140px; top:0; left:0; cursor: pointer;}
#end-card .end-3 .characters li:first-child {margin-left:0px; left:0; }
#end-card .end-3 .characters .char p{ font-size: 10px; line-height: 1.7; position: absolute; top:110px; width:100%; }
#end-card .end-3 .characters .char .circle{ position:absolute; width:104px; height:104px; box-shadow: none; top:0; left:0; }
#end-card .end-3 .characters .char .circle.outer{ width:110px; height:110px; background-color:#b1a486; background-image:none;  }
#end-card .end-3 .characters .char .char-photo{ top:3px; left:3px; background-size: 520px 104px; }

#end-card .end-3 .characters .char.allison .char-photo{  }

#end-card .end-3 .characters .char.hero .char-photo{ background-position: -104px 0; }
#end-card .end-3 .characters .char.haima .char-photo{ background-position: -208px 0; }
#end-card .end-3 .characters .char.blast .char-photo{ background-position: -312px 0; }
#end-card .end-3 .characters .char.stem .char-photo{ background-position: -416px 0; }

.end-card .replay{ position:relative; margin:45px auto 0 auto; width:136px; height:16px; cursor: pointer; z-index: 3; }
.end-card .replay .icon{ position:absolute; margin-top:-3px; width:18px; height:24px; background-position:-340px -87px;  }
.end-card .replay p{ position:absolute; width:130px; top:0; left:23px; font-size: 8px; text-align: left; margin-top:3px;  }

.end-card .cta-holder{ position:relative; display:block; margin: 90px auto 0 auto; width:500px; height: 100px; }
.end-card .cta-holder .cta { float: left; width:130px; height: 100px; margin-left: 38px; }
.end-card .cta-holder .cta .title{ position:relative; margin: 0 auto; height: 27px; }
.end-card .cta-holder .cta p.copy{ margin-top:-1px; text-transform: uppercase; font-size: 8px; line-height: 1.9; }

.end-card .cta-holder .cta.sign-up .title{ width:160px; height:34px; background-position: -230px -255px; }
.end-card .cta-holder .cta.end-share .title{ width:102px; background-position: 0px -260px; }
.end-card .cta-holder .cta.watch .title{ width:109px; background-position: -110px -260px; }

/* END - SIGN UP */
.end-card .cta-holder .cta.sign-up { width:160px; margin-top:-13px; }
.end-card .cta-holder .cta.sign-up p.copy{ font-size: 11px;}
.end-card .cta-holder .cta.sign-up .yellow-btn{ left:2px; top:0px;  transform: scale(.8,.8); -ms-transform: scale(.8,.8); /* IE 9 */ -webkit-transform: scale(.8,.8); /* Safari and Chrome */ }
.end-card .cta-holder .cta.sign-up .yellow-btn p{ font-size: 14px !important; margin-top:9px !important;}

/* END - WATCH */
.end-card .cta-holder .cta.watch .youtube { position: relative; margin: 11px auto; display:block; width:32px; height:32px; background-position: -260px -90px; }
.end-card .cta-holder .cta.watch a:hover.youtube { background-position: -300px -90px;}

/* END SHARE */
.end-card .cta-holder .cta.end-share {margin-left: 0;}
.end-card .cta-holder .cta.end-share .share {position: relative; top:0px; left:0; right:auto; margin:11px 0; padding:0; }
.end-card .cta-holder .cta.end-share .share li{ width:32px; height:36px; float: left; margin: 0 5px; }
.end-card .cta-holder .cta.end-share .share li:first-child{ margin-left: 6px; }
.end-card .cta-holder .cta.end-share .share li:last-child{ margin-right: 0; }

.end-card .cta-holder .cta.end-share .share .fb { background-position: 0 -80px; margin-left: 0; }
.end-card .cta-holder .cta.end-share .share .gp { background-position: -40px -80px; }
.end-card .cta-holder .cta.end-share .share .tw { background-position: -80px -80px; }

.end-card .cta-holder .cta.end-share .share a:hover.fb {background-position:0 -120px;}
.end-card .cta-holder .cta.end-share .share a:hover.gp {background-position:-40px -120px;}
.end-card .cta-holder .cta.end-share .share a:hover.tw {background-position:-80px -120px;}

#bonus-end-card { color:#FFFFFF; }
#bonus-end-card .end-1 .wrapper{ height:320px; top:-150px; }
#bonus-end-card .the-end{ position:relative; margin: 0 auto; width:490px; height: 78px; background-position: 0 -410px; }
#bonus-end-card .cta-holder{ margin-top:65px; }

#bonus-end-card .replay { width:180px; margin-top:60px;  }
#bonus-end-card .replay p{ top:0; left:33px; font-size: 10px; margin-top:5px; width:160px; }
#bonus-end-card .replay .icon{ margin-top:-3px; width:22px; height:28px; background-position:-338px -110px; }


/* OVERLAY */

#end-card .overlay{ display:none; width:100%; height: 100%;}
#end-card .overlay .char-detail{width:100%; height: 100%; }
#end-card .overlay .wrapper{ width:590px; height:366px; top:-170px;  }
#end-card .overlay .char-container{ position:relative !important; margin:0 auto; padding:0; width:236px; height:236px;  }
#end-card .overlay .char-container .circle.outer{ margin:0; padding:0; top:0; left:0; width:100%; height:100%; background-color: #777c64; box-shadow: none;  }
#end-card .overlay .char-container .char-photo{ position:absolute; margin:9px !important; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.55); }

#end-card .overlay .copy-container{ position:relative; }
#end-card .overlay h4{ position:relative; margin-top:38px; font-size: 28px; color: #eadf9f; text-align: center; }
#end-card .overlay p{ position:relative; margin-top:6px; font-size: 12px; color: #FFFFFF; line-height: 1.6; }

#end-card  .close{ position:absolute; top:-2px; right:50px; width:50px; }
#end-card .close li{ height:26px; }
#end-card .close .icon{ position:absolute; left:0; width:26px; height:26px; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/onematch-sprite.png) no-repeat -200px -40px;}
#end-card .close p{ position:absolute; left:25px; font-size:14px; color: #e3ded5; line-height: 1; margin-top:6px; }
#end-card a:hover .close p{ color:#eadf9f;  }
#end-card a:hover .close .icon{ background-position: -230px -40px; }

#end-card  .arrow{ position:absolute; top:105px; width:30px; height: 32px; cursor: pointer; }
#end-card  .arrow.left{ left:121px; background-position: 0px -160px; }
#end-card  .arrow.right{ left:438px; background-position: -10px -195px; }

#end-card .overlay .bubbles{ position:absolute; display: block; left:210px; top:150px; z-index: 10;}
#end-card .overlay .bubbles .bubble.top{ top:-75px; left:-215px; opacity: 0; }
#end-card .overlay .bubbles .bubble.top .img{ left:-130px; top:-70px; width:258px; height: 143px; background-position: -350px -1060px; }
#end-card .overlay .bubbles .bubble.bottom{ left:-40px; bottom:0px; opacity: 0; }
#end-card .overlay .bubbles .bubble.bottom .img{ left:-305px; top:-35px; width:348px; height: 150px; background-position: -350px -1208px;}


/* ----------------------------------------------
    knowledge-test
   ---------------------------------------------- */
/*
#knowledge-test {width:1280px; height: 100%;  display: block; top:0; left:0; }
 */
.close{  margin: 0; }
.close li{ float: left; height:30px; margin: 0; padding:0; }
.close .icon{ width:30px; height:30px; background: url(https://s3.amazonaws.com/cbs-onematch-comic/img/onematch-sprite.png) no-repeat -290px -50px;}
.close p{ font-size:16px; color: #373737; line-height: 1; margin: 7px; }

#knowledge-container { position: fixed; display:none; width:100%; height:100%; margin: 0; padding:0; top:0; left:0; z-index: 99998; background-color: red;}
#knowledge-container .iframe-container{ margin: 0; padding:0; }
#knowledge-container iframe{display: block; position: absolute; width:100%; height: 100%; }
#knowledge-container .close{ display: block; position: fixed; top:10px; right:15px; }
#knowledge-container a:hover .close p{ color:#c43d43;  }
#knowledge-container a:hover .close .icon{ background-position: -330px -50px; }

/* ==========================================================================
   IE8 & lower
   ========================================================================== */

#upgrade-ie { z-index: 9999; width:100%; height: 100%; position: fixed; display:block; top:0; left:0; background-color:#000000; }
#upgrade-ie .wrapper{ position:relative; top:50%; left:50%; }
#upgrade-ie img{position:absolute; margin:0; top:-140px; left:-323px }
#upgrade-ie .btn{position:absolute; margin:0; top:150px; left: -90px; }

/*FWA*/
#fwa-ribbon{ position:fixed; top:0; left:0; z-index: 99998;}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}


@media only screen and (max-width : 980px) {
    #preloader-footer ul{ width:768px; }
    #preloader-footer .copy { width:300px; margin-top:5px; }
    #preloader-footer .copy p{ font-size: 15px; }
}

@media only screen and (max-width : 767px)
{
    #preloader h3{ font-size: 27px; }
    #preloader-footer { height:180px; }
    #preloader-footer ul{ width:640px; }
    #preloader-footer .copy { width:90%; margin-left:5%; margin-bottom:10px; float: none; }
    #preloader-footer .copy p{ font-size: 17px; text-align: center; }
    #preloader-footer .one-match-logo{ margin-left:150px; }
}
/*

MOBILE - Styles for screen height 746 and lower

*/

@media only screen and (max-height : 746px) {

    #end-card .end-3 .wrapper{ height:360px; top:-185px; }
    #end-card .end-3 h6{ margin-bottom: 0px;}
    #end-card .end-3 p.scroll-over{ margin-top: 25px; }
    #end-card .end-3 .characters { margin-top: 14px; }
    #end-card .end-3 .cta-holder{ margin-top: 50px; }
    #end-card .end-3 .replay{ margin-top:30px; }

    #preloader .wrapper {}
    #preloader h3 {font-size: 27px; top:-280px;}
    #preloader ul{ /*position:absolute; left:-200px; top:-154px;*/ transform: scale(.8,.8); -ms-transform: scale(.8,.8); /* IE 9 */ -webkit-transform: scale(.8,.8); /* Safari and Chrome */   }

    #preloader-footer{ height: 85px; }
    #preloader-footer ul{ margin-top: 5px;}
    #preloader-footer .copy p { font-size: 16px; }

}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}