* {

    box-sizing: 				content-box;
}

@font-face {

    font-family: 'mds';
    src: url('DejaVuSans-webfont.eot');
    src: url('DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('DejaVuSans-webfont.woff2') format('woff2'),
         url('DejaVuSans-webfont.woff') format('woff'),
         url('DejaVuSans-webfont.ttf') format('truetype'),
         url('DejaVuSans-webfont.svg#dejavu_sansbook') format('svg');
}


body {

	font-family: 				mds;
	height: 					auto;
	width: 						auto;
	background-origin: 			content-box;
	background-color: 			black;	
	background-image:			url(../images/mds.png);
    background-repeat:			no-repeat;
    background-position:		center;
	background-size: 			contain;
	background-blend-mode: 		lighten;
	background-attachment: 		fixed;
}

h1,
h2,
h3,
h4,
h5 {

    color:          			rgb(0, 75, 200);
    font-family:    			mds;
    font-weight:    			bold;
    font-style:     			italic;
}

header {

    text-align:     			center;
}

hr {

    position:       			relative;
    margin-left:    			auto;
    margin-right:   			auto;
}

aside {
	
	color:						white;
	font-size: 					12px;
	font-family: 				mds;
	margin: 					auto;
	text-align: 				justify-all;
}

.container-fluid {

	height: 					auto;
	width: 						auto;
}

.container {

    margin-left:    			auto;
    margin-right:   			auto;
}

article {
	
	display: 					block;
}

a {
	
	text-decoration: 			none;
	color: 						rgb(0, 70, 200);
	font-weight: 				bold;
}

a:hover {
	
	text-decoration: 			underline;
}

.article {
	
	margin-bottom: 				5%;
}

.article > h2 {

    text-align:     			center;
}

.article > p {

    text-align:     			justify;
    color:          			white;
    font-family:    			mds;
    text-indent:				50px;
}

.example {

	border: 					2px solid rgb(0, 70, 200);
	border-radius: 				10px;
}

ul,
ol,
dt {
	
	font-family: 				mds;
	color: 						white;
}

li,
dd {
	
	font-family: 				mds;
	color: 						white;
}

code {
	
	color: 						white;
	margin: 					auto;
}

pre {
	
	color: 						white;
	font-size: 					11px;
	margin: 					auto;
}

.footer > h6 {

    position:       			relative;
    font-family:    			mds;
    color:          			rgb(0, 75, 200);
    text-align:     			center;
}

.slideshow {

    position:       			fixed;
    margin:         			auto;
    padding:        			1%;
}

.slides {

    display:        			none;
    color:          			rgb(0, 75, 200);
    text-align:     			center;
    font-family:    			mds;
    font-style:     			italic;
    font-weight:    			bold;
    padding:        			10%;
}

.fade {

    -webkit-animation-name:     fade;
    -webkit-animation-duration: 1.5s;
    animation-name:             fade;
    animation-duration:         1.5s;
}

@-webkit-keyframes fade {

    from {opacity: 0.4}
    to {opacity: 1}
}

@@keyframes fade {

    from {opacity: 0.4}
    to {opacity: 1}
}

#m_btn {

	background-color: 			black;
	color: 						rgb(0, 75, 200);
	opacity: 					0.8;

	font-family:				mds;
	font-size:					14px;
		
	font-style: 				italic;
	font-weight: 				bold;
	
	text-align: 				center;
	
	border:						3px solid rgb(0, 75, 200);
	
	border-radius: 				10px;
    
    padding:                    10px;
	
	margin-right: 				auto;
	margin-left: 				auto;
	
	left: 						50%;
	-ms-transform:				translateX(-50%);
	-webkit-transform:			translateX(-50%);
	transform:					translateX(-50%);
}

.modal {

	position: 					fixed;
	z-index: 					1;
	left:						0;
	display: 					none;
	overflow: 					auto;
	text-align: 				center;
	opacity: 					0.9;
}

.modal-content {

	background-color: 			black;
	border:						3px solid rgb(0, 75, 200);
	border-radius: 				10px;
	margin-right: 				auto;
	margin-left: 				auto;
	max-width: 					300px;
}


.modal-header > p {

	font-family: 				mds;
	font-weight: 				bold;
	font-style: 				italic;
	text-align: 				center;
	color: 						rgb(0, 75, 200);
}

.modal-select > a {

	display: 					block;
	font-family: 				mds;
	font-weight: 				bold;
	font-style: 				italic;
	text-align: 				center;
	text-decoration: 			none;
	color: 						rgb(0, 75, 200);
}

.modal-select .btn {

	color: 						rgb(0, 75, 200);
	cursor: 					pointer;
	display: 					block;
	border:						none;
	margin-left: 				auto;
	margin-right: 				auto;
	text-align: 				center;
	background-color: 			black;
}

.modal-select .btn:not(last-child){

	border-bottom: 				none;
}

.menu {
	
	border-top:					2px solid rgb(0, 70, 200);
	border-left: 				none;
	border-right: 				none;
	border-bottom: 				none;
	margin-left: 				auto;
	margin-right: 				auto;
	height: 					auto;
}

.close {

	color: 						rgb(0, 75, 200);
	float: 						right;
	font-weight: 				bold;
	padding-right: 				2%;
}

.close:hover,
.close:focus {

	color: 						white;
	text-decoration: 			none;
	cursor: 					pointer;
}

button {

	position: 					relative;
	text-align: 				center;
	cursor: 					pointer;
}

.button {

	position: 					relative;
	display: 					block;
	text-align: 				center;
	text-decoration: 			none;
	margin-top:					10%;
	border-radius:				10px;
	color:						rgb(0, 75, 200);
	background-color: 			black;
	border-color: 				rgb(0, 75, 200);
}

#prev {

	float: 						left;
	margin-bottom: 				7%;
	font-size: 					20px;
	width: 						15%;
	border: 					2px solid rgb(0, 70, 200);
}

#next {

	float: 						right;
	margin-bottom: 				7%;
	font-size: 					20px;
	width: 						15%;
	border: 					2px solid rgb(0, 70, 200);
}

#select {

	left: 						30%;
	-ms-transform:				translateX(-25%);
	-webkit-transform:			translateX(-25%);
	transform:					translateX(-25%);
}

.video {
	
	position: 				relative;
	margin-left: 			auto;
	margin-right: 			auto;
	height:					auto;
	width:					auto;
}

.poster {

	position:				relative;
	margin-left:			auto;
	margin-right:			auto;
	height:					auto;
	width:					auto;
}