html,body {
    height:100%;
    width:100%; 
    min-height: 100% !important;
    padding:0px;
    margin:0px;
}
body {
	font-family: 'Open Sans';
	font-weight: 300;
	color:#000000;
	background-color: #000000;
}

@keyframes zoomFlow {
	0%{transform:scale(.3);opacity:0}
	50%{transform:scale(1.2)}
	100%{transform:scale(1);opacity:1}
}

@-webkit-keyframes zoomFloww {
	0%{-webkit-transform:scale(.3);opacity:0}
	50%{-webkit-transform:scale(1.2)}
	100%{-webkit-transform:scale(1);opacity:1}
}

@-moz-keyframes zoomFlowm {
	0%{-moz-transform:scale(.3);opacity:0}
	50%{-moz-transform:scale(1.2)}
	100%{-moz-transform:scale(1);opacity:1}
}

@-webkit-keyframes slowOpacity {
	0%{opacity:0;padding-top:0}
	100%{opacity:1;padding-top:25px}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}
  
@-webkit-keyframes spinw {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}
 
@-moz-keyframes spinm {
    from { -moz-transform: rotate(0deg);}
    to { -moz-transform: rotate(360deg);}
}

.animZoom {
	-animation: zoomFlow .5s both ease-in-out .2s;
	-webkit-animation: zoomFloww .5s both ease-in-out .2s;
    -ms-animation: zoomFlow .5s both ease-in-out .2s;
    -moz-animation: zoomFlowm .5s both ease-in-out .2s;

}

.refresh-animate {

    -animation: spin .7s infinite linear;
    -ms-animation: spin .7s infinite linear;
    -webkit-animation: spinw .7s infinite linear;
    -moz-animation: spinm .7s infinite linear;
}

@media (max-width: 768px)  {
	.left-title {
		top: calc(50% - 30px) !important;
		font: 400 50px/50px 'gentium book basic' !important;
	}
	
	.right-title {
		top: calc(50% - 30px) !important;
		font: 400 50px/50px 'gentium book basic' !important;
	}	
	
	.footer {
		text-align:left !important;
	}
	
	.footer-text {
		margin-left:10px;
	}

	.sponsor {
		display: none;
	}
}

@media (max-width: 500px)  {
	.left {
		height:50% !important;
		width:100% !important;
		float:none !important;
	}	
	
	.right {
		height:50% !important;
		width:100% !important;
		float:none !important;		
	}
	
	.darken-left {
		position:absolute;
		bottom: 0;
		width:100% !important;
		height:50% !important;
		background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)) !important;	
	}
	
	.darken-right {
		position:absolute;
		width:100% !important;
		height:50% !important;
/*		top:50% !important; */
		top:0 !important;
		background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)) !important;
	}
	
	.left-title {
/*		bottom: calc(50% + 50px) !important; */
		bottom: 50px !important;
		top: auto !important;
		right: 0px !important;
		width:100%;
		text-align:center !important;
		font: 400 50px/50px 'gentium book basic' !important;
	}
	
	.right-title {
/*		top: calc(50% + 45px) !important; */
		top: 45px !important;
		left: 0px !important;
		width:100%;
		text-align:center !important;	
		font: 400 50px/50px 'gentium book basic' !important;
	}
	
	.left-author {
		bottom:10px !important;
		right:20px;
		left:auto !important;
	}
	
	.share {
		left: 10px !important;
		top: calc(50% - 25px) !important;
	}

	.share-box {
		top: calc(50% - 25px) !important;
	}
}

a {
	color:#000000;
	text-decoration:none;
}

a:hover {
	color:#000000;
	text-decoration:none;
}

a:focus {
	color:#000000;
    outline:none;
    text-decoration:none;
}  

a:link {
	text-decoration: none;
}

.main {
	position:relative;
	width:100%;
	height:calc(100% - 34px);
	margin:0px;
	padding:0px;
	cursor:pointer;
	cursor:hand;
}

.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 8px 0px;
	font-size: 13px;
	background: #fff;
	color: #6B6B6B;
	text-align: center;
	z-index: 100;
	overflow:hidden;
}

.header {
	position: fixed;
	top: 0;
	width: 100%;
	padding: 8px 0px;
	font-size: 16px;
	background: #fff;
	color: #6B6B6B;
	text-align: center;
	z-index: 100;
}

.left {
	position:relative;
	width:50%;
	height:100%;
	float:left;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

.right {
	position:relative;
	width:50%;
	height:100%;
	float:right;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

.plus {
	position:absolute;
	top: calc(50% - 30px);
	left: calc(50% - 5px);
	background: white;
	height: 60px;
	width: 10px;
	z-index:9999;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.plus:after {
	background: white;
	content: "";
	height: 10px;
	left: -25px;
	position: absolute;
	top: 25px;
	width: 60px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.share {
	position:absolute;
	top: calc(66%);
	left: calc(50% - 35px);
	z-index:9999;
	font-size: 50px;
	line-height: 0;
}

.share a {
	color:#fff;
	opacity: 0.3;	
}

.share a:hover {
	opacity: 1;
}

.share-box {
	position:absolute;
	top: calc(66%);
	left:0;
	right:0;
	padding:5px;
	z-index:9999;
	background-color: #eee;
	text-align:center;
}

.share-box a {
	font-size: 30px;
}

.darken-left {
	position:absolute;
	width:50%;
	height:100%;
	right: 0;
	background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));	
}

.darken-right {
	position:absolute;
	width:50%;
	height:100%;
	left: 0;
	background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

.left-title {
	position:absolute;
	top: calc(50% - 45px);
/*	right: calc(50% + 100px); */
	right: 100px;
	color:white;
	font: 400 80px/80px 'gentium book basic';
	font-style: italic;
	text-transform: none;	
	text-align:right;
	z-index:9999;
	word-wrap: break-word;
	transition: 0.8s ease-in-out;
	
}

.fade {
	opacity: 0;
}

.unfade {
	opacity: 1;
}

.right-title {
	position:absolute;
	top: calc(50% - 45px);
/*	left: calc(50% + 100px); */
	left: 100px;
	color:white;
	font: 400 80px/80px 'gentium book basic';
	font-style: italic;
	text-transform: none;	
	z-index:9999;
	word-wrap: break-word;
	transition: 0.8s ease-in-out;
}

.hidden, .hide {
	display:none;
}

.show {
	display:block;
}

.left-author {
	position:absolute;
	bottom:10px;
	left:20px;
}

.right-author {
	position:absolute;
	bottom:10px;
	right:20px;
}

.author a {
	color:white;
	font: 400 36px/36px 'gentium book basic';
	opacity: 0.5;
}

.author a:hover {
	color:white;
	text-decoration:none;
	opacity: 1;
}

.pull-right {
	float:right;
	margin-left:10px;
	line-height:34px;
}

.footer-right {
	position:absolute;
	right:10px;
	bottom:0px;
	height:100%;
}


.pull-right:hover {
	text-decoration:underline;
	
}

.sponsor {
	height:90px;
	width:780px;
	position:fixed; 
	top:0;
	z-index:9999;
	opacity:0.5;
	left:50%;
	margin-left:-364px;
}

.sponsor:hover {
	opacity: 1;
}

.sponsor-close {
	float:right;
	color: #fff;
}

.hide-slow {
	top: -100px;
	transition: top 700ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

.main-white {
	width:100%;
	height:100%;
	background-color: white;
	color:black;
}

.sponsored-container {
	width:50%;
	margin-left:auto;
	margin-right:auto;
	padding-top:30px;
}

.sponsored-container > h2 {
	font-size:32px;
	border-bottom:solid 1px #000000;
	font-weight:300;
}

.sponsored-container > p > a {
	text-decoration:underline;
}

.sponsor-img {
	width:100%;
	max-width:1200px;
	margin-bottom:100px;
}

.back-link {
	position:absolute;
	left:20px;
	top:20px;
}

.no-underline {
	text-decoration:none !important;
}