html { height: 100%; font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif; }
body { margin: 0; height: 100%; }
.content { width: 1254px; margin: auto; position: relative; }
.hidden { opacity: 0 !important; }
header { width: 100%; height: 105px; background-color: #000; position: relative; }
header .content { background-image: url(../img/syphiens-logo.png); background-position: left center; background-repeat: no-repeat; }
/*header #donate { background: #000000; background: -moz-linear-gradient(left, #000000 0%, #f83e2e 58%); background: -webkit-linear-gradient(left, #000000 0%,#f83e2e 58%); background: linear-gradient(to right, #000000 0%,#f83e2e 58%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#f83e2e',GradientType=1 ); height: 30px; width: 70%; position: absolute; right: 0; text-align: right; }*/
header #donate { background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 33%, rgba(248,62,46,0.61) 48%, rgba(248,62,46,1) 100%); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 33%,rgba(248,62,46,0.61) 48%,rgba(248,62,46,1) 100%); background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 33%,rgba(248,62,46,0.61) 48%,rgba(248,62,46,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#f83e2e',GradientType=1 ); height: 30px; width: 100%; position: relative; text-align: right; }
header #donate p { color: #fff; margin: 0; display: inline-block; font-weight: bold; text-transform: uppercase; font-size: 13px; height: 30px; vertical-align: sub; }
header #donate p:nth-child(2) { margin-right: 40px; }
header #donate p a { text-decoration: none; color: #fff; /*background-color: #fc04af;*/ }
header #donate div { height: 30px; width: 23px; position: absolute; top: 5px; right: 5px;}
header #donate div img { position: absolute; top: 0; left: 0; }
header #donate .syphiens-logo-micro { position: absolute; bottom: -17px; right: 0; }
header #menu { list-style-type: none; text-align: right; margin: 0; height: 75px; vertical-align: middle; }
header #menu li { display: inline-block; margin: 25px 20px 0 20px; }
header #menu li a { transition: all linear 100ms; border-style: solid; border-width: 0; text-decoration: none; color: #fff; font-weight: bold; text-transform: uppercase; }
header #menu li a:hover { border-width: 0 0 3px 0; }
#video-section { height: 500px; width: 100%; background-image: url(../img/stars-background.jpg); position: relative; text-align: center; padding-top: 30px; background-size: cover; background-position: center; z-index: 1; }
#video-section video { /*display: none; */}
#gradient { height: 270px; width: 100%; background-image: url(../img/gradient.jpg); position: relative; }
#carousel { background-color: #f64646; background-image: url(../img/carousel-background.png); background-repeat: no-repeat; background-position: bottom center; }
#carousel .title { background-image: url(../img/syphiens-logo-micro2.png); background-repeat: no-repeat; background-position: bottom left; }
#carousel .title h2, #carousel .title p { margin: 0; color: #0f0e10; }
#carousel .title h2 { font-family: 'DeadIsland'; font-size: 40px; }
#carousel .title p {}
#carousel .carousel-controller-prev, #carousel .carousel-controller-next { top: 41%; position: absolute; }
#carousel .carousel-controller-prev { left: 0; }
#carousel .carousel-controller-next { right: 0; }
#carousel .char-info { text-align: center; position: relative; z-index: 1; margin-top: 10px; }
#carousel .char-info h1 { color: #fff; font-family: 'DeadIsland'; text-transform: capitalize; font-size: 60px; margin: 0; opacity: 1; transition: all ease-in-out .3s; }
#carousel .char-info p { color: #6a84f3; width: 533px; margin: auto; opacity: 1; transition: all ease-in-out .3s; max-height: 60px; overflow: hidden; }
#carousel .char-info button { transition: all ease-in-out 1s; color: #fff; text-transform: uppercase; font-weight: bold; font-size: 17px; cursor: pointer; background: rgb(192,53,163); background: -moz-linear-gradient(top, rgba(192,53,163,1) 0%, rgba(221,39,84,1) 100%); background: -webkit-linear-gradient(top, rgba(192,53,163,1) 0%,rgba(221,39,84,1) 100%); background: linear-gradient(to bottom, rgba(192,53,163,1) 0%,rgba(221,39,84,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c035a3', endColorstr='#dd2754',GradientType=0 ); font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif !important; border-style: none; padding: 10px 15px; margin-top: 15px; margin-bottom: 15px; }
#carousel .char-info button:hover {background: rgb(168, 45, 142); background: -moz-linear-gradient(top, rgba(192,53,163,1) 0%, rgba(177, 34, 69, 1) 100%); background: -webkit-linear-gradient(top, rgba(192,53,163,1) 0%,rgba(177, 34, 69, 1) 100%); background: linear-gradient(to bottom, rgba(192,53,163,1) 0%,rgba(177, 34, 69, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c035a3', endColorstr='#B12298',GradientType=0 ); }
#carousel .character-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; background-color: rgba(12,10,27, .94); opacity: 1; transition: all ease-in-out .3s; padding: 50px; } 
#carousel .character-modal .log { min-height: 650px; background-color: #302c5a; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: initial; padding: 30px 40px; }
#carousel .character-modal .log > span { color: #fff; position: absolute; top: 0; right: 15px; font-size: 35px; cursor: pointer; }
#carousel .character-modal .log .log-info, #carousel .character-modal .log .log-media { display: inline-block; vertical-align: top; }
#carousel .character-modal .log .log-info { width: 35%; }
#carousel .character-modal .log .log-info h1 { font-size: 58px; }
#carousel .character-modal .log .log-info h2 { font-size: 35px; }
#carousel .character-modal .log .log-info h1, #carousel .character-modal .log .log-info h2 { color: #fff; font-family: 'DeadIsland'; margin: 0; }
#carousel .character-modal .log .log-info .log-text { color: #6a84f3; max-height: 530px; overflow: auto; padding-right: 5px; }
#carousel .character-modal .log .log-info .portrait { width: 110px; height: 110px; }
#carousel .character-modal .log .log-info .portrait, #carousel .character-modal .log .log-info .title { display: inline-block; }
#carousel .character-modal .log .log-info .title { margin-left: 10px; vertical-align: top; }
#carousel .character-modal .log .log-media { width: 60%; }
#carousel .character-modal .log .log-media h3 { text-transform: uppercase; }
#carousel .character-modal .log .log-media h4 { margin-bottom: 15px !important; font-weight: initial; }
#carousel .character-modal .log .log-media h3, #carousel .character-modal .log .log-media h4 { color: #fff; margin: 0; }
#carousel .character-modal .log .log-media video { border-style: solid; border-width: 5px; border-color: #cf2d79; border-radius: 8px; }
#carousel .character-modal .log .log-media .gallery { width: 100%; overflow: auto; }
#carousel .character-modal .log .log-media .gallery img { border-style: solid; border-color: #fff; border-width: 1px; border-radius: 2px; margin: 10px 3px 0 3px; }
#carousel .character-modal .log .log-media .gallery img:first-child { margin-left: 0; }
#carousel .character-modal .log .log-media .gallery img:last-child { margin-right: 0; }
#comic { height: 836px; width: 100%; background-image: url(../img/stars-background2.jpg); position: relative; text-align: center; padding-top: 30px; background-size: cover; background-position: center; }
#comic .comic-cover { width: 500px; height: 700px; background-image: url(../img/temp/bd-cover.jpg); background-size: cover; margin: auto; cursor: pointer; }
#comic .book-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; background-color: rgba(12,10,27, .94); opacity: 1; transition: all ease-in-out .3s; padding: 50px; } 
#comic .book-modal .book { width: 100%; height: 800px; }
#comic .book-modal .book .page { width: 50%; height: 100%; margin: auto; opacity: 1; }
#comic .book-modal .book .page .page-block { background-color: #fff; display: inline-block; /*transition: all ease-in-out .3s;*/ }
#comic .book-modal > span { color: #fff; position: absolute; top: 0; right: 15px; font-size: 35px; cursor: pointer; }
#comic .book-modal .book-controller {  }
#comic .book-modal .book-controller.disabled { opacity: .2; pointer-events:none;-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#comic .book-modal .book-controller span { color: #fff; cursor: pointer; margin: 0 20px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#comic .book-modal .book-controller .real-previous-block, #comic .book-modal .book-controller .real-next-block { display: none; }
footer { text-align: center; margin-top: -90px; z-index: 1; position: relative; }
footer p { color: #fff; }
footer p a { color: #e3254e; text-decoration: none; transition: all linear 100ms; border-style: solid; border-width: 0; }
footer p a:hover { border-width: 0 0 3px 0; }