html{
	height:100%;
}
body{ margin:0;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 100%;
	line-height:1.5;
	position: relative;
	height: 100%;
	color: #fff;
	background: #000;
	/*box-shadow: 0px 0px 200px #000 inset;*/
}
a, a:hover, a:visited { 
	color:#fff;
	text-decoration: none;
}

/* ===============================================================
Your custom styles, here you need to specify container's and slide's sizes, pagination, etc.
================================================================*/
.swiper-container { /* Specify Swiper's Size: */
	width:100%;
	height:100%;
}
.swiper-slide { /* Specify Slides's Size: */
	width:100%;
	height:100%;
}
.swiper-slide-active { /* Specific active slide styling: */
}
.swiper-slide-visible { /* Specific visible slide styling: */
}
/* ===============================================================
Pagination Styles
================================================================*/
.swiper-pagination-switch { /* Stylize pagination button: */	
}
.swiper-active-switch { /* Specific active button style: */	
}
.swiper-visible-switch { /* Specific visible button style: */	
}

.swiper-wrapper {
	width:100%;
	height:100%;
}
.swiper-container-menu .swiper-slide,
.swiper-container-main .swiper-slide {
	-webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	-moz-text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	position:relative;
}

.swiper-container-menu .swiper-slide {
	color: #333;
	display: table; /* vertical align*/
}
.swiper-container-menu .swiper-slide > .mytitle{
	display:table-cell; /* vertical align*/
	vertical-align: middle;
	padding: 1.5em;
}
.swiper-container-menu .swiper-slide-active {
	color: #fff;
}
.swiper-container-main .swiper-slide {
    position:relative; /* this is important! */
}

.background-image {
    margin: 0;
    /*border-width: 1em; */
    border-style: solid;
    position: absolute;
    top: 0;
    bottom: 0;    
    left: 0;
    right:0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    opacity : 0.5;
    z-index: -1;
    overflow: hidden;
    /*
	-webkit-filter: blur(5px);
	   -moz-filter: blur(5px);
		 -o-filter: blur(5px);
		-ms-filter: blur(5px);
			filter: blur(5px);
	*/
}

.mytitle {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	font-weight:bold;
	margin: 1em 1.5em 0.7em 1.5em;
	font-size: 2em;
	line-height:1.1;
	height:80%;
}
.myinfo {
	font-weight:bold;
	margin: 0.7em 1.5em 1em 1.5em;
	font-size: 1.7em;
	line-height:1.1;
	position:absolute;
	bottom:0;
}
#myoverlay {
	display: table-cell;
	vertical-align: middle;
	position: fixed;
	top:0;
	left: 0;
	right:0;
	bottom:0; 
	z-index:999;
	color: #fff;
	text-align: center;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.7);
}
.myreload,
.myerror,
.myspinner {
	position: absolute;
	top:50%;
	left:50%;
	text-indent: -9999px;
}

.myreload {
	height:3em;
	width:3em;
	margin-top: -6em;
	margin-left: -1.5em;
	display: block;
	background: url(../img/reload.svg);
	background-size: 3em 3em;
}
.myerror {
	height:6em;
	width:6em;
	margin-top: -3em;
	margin-left: -3em;
	display: block;
	background: url(../img/cloud-alert.svg);
	background-size: 6em 6em;
}

.myspinner {
	height:4em;
	width:4em;
	margin-top: -2em;
	margin-left: -2em;
	-webkit-animation: rotation .9s infinite linear;
	-moz-animation: rotation .9s infinite linear;
	-o-animation: rotation .9s infinite linear;
	animation: rotation .9s infinite linear;
	border-left:8px solid rgba(255,255,255,.15);
	border-right:8px solid rgba(255,255,255,.15);
	border-bottom:8px solid rgba(255,255,255,.15);
	border-top:8px solid white;
	border-radius:100%;
}

@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
	from {-o-transform: rotate(0deg);}
	to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
}

.swiper-container-article {
	display: table-cell;
	vertical-align: middle;
	position: fixed;
	text-align: center;
	z-index: 998;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
#myoverlay,
.myreload,
.swiper-container-article,
.swiper-container-outer {
	-webkit-transition: 200ms;
	-moz-transition: 200ms;
	-ms-transition: 200ms;
	-o-transition: 200ms;
	transition: 200ms;
}
.visible {
	visibility: visible;
	opacity: 1;
}

.invisible {
	visibility: hidden;
	opacity: 0;
}
#mycontent-slide {
	overflow-x: hidden;
	overflow-y: scroll;

	display: inline-flex; /* vertical center div */
}
#mycontent{
	font-size: 170%;
	text-align: left;
	color: #333;
	line-height: 1.6em;
	background-color:#fff;
	padding: 1em;
/*	margin: 1em;*/

	margin: auto; /* vertical center div */
	width:100%; 
}

#mycontent *{
	margin-left: 0;
	margin-top: 0;
}
#mycontent a,
#mycontent a:hover,
#mycontent a:visited { 
	color:#000;
	text-decoration: none;
}
#mycontent p{
	margin: 0 0 1em 0;
}
#mycontent img,
#mycontent video,
#mycontent object,
#mycontent figure {
    max-width: 100%;
	height: auto;
    margin: 0;
}


/* weird one off'ish ones */

#mycontent figure img{
	width: 100% !important;
}

#mycontent .element-invisible{
	display: none;
}