<style>

* {
  box-sizing: border-box;
}

@font-face {
font-family: diddy; 
src: url(fonts/diddy.ttf); 
}

@font-face {
font-family: raleway; 
src: url(fonts/Raleway-Regular.ttf); 
}


body {margin: 0px;
} 

h1 {
  font-family: raleway;
  font-size:18px;
  color: #000000;
  text-align: center;
  text-shadow: 1px 1px black;
}

h2 {
  font-family: diddy;
  font-size:28px;
  text-align: center;
  color: #000000;
}

p { 
    font-family: raleway;
	font-size:14px;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}

p.clear {
  clear: both;
}

img {
  max-width: 100%;
  height: auto;
}

hr {
  border: 1px dotted #000000;
}

table {
  padding:0px;
  text-align: center;
}

td, th {
  padding-right:20px;
  background-color: rgba(255, 255, 255, 0.5);
}

#center {
  text-align: center;
}

#shadow {
  box-shadow: 5px 5px 25px grey;
}

#header { 
	padding:0px;
}

table.center {
    margin-left:auto; 
    margin-right:auto;
}

.left {

  position: fixed;
  top: 0;
  left: 0;
  padding:0px;
  float:left;
  width:20%; /* The width is 20%, by default */
}

   
.main_right {
    width: 300px;
    float: right;
}

.main_left {
    float: none; /* not needed, just for clarification */
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}


.main {
  background-color: rgba(255, 255, 255, 0.9);
  height: auto;
  overflow: hidden;
  position: absolute;
  left: 20%;
  float:left;
  width:80%; /* The width is 80%, by default */
}


/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .left, .main {
    position:static;
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }

  .main_right {
    display:none;
  }

}

.menulist a, .social a {
  text-align:center;
  background-image: linear-gradient(to right, rgba(170,25,170,0), rgba(170,25,170,1),rgba(170,25,170,1),rgba(170,25,170,1), rgba(170,25,170,0));
  padding:0px;
  margin:1px;
  display:block;
  width:100%;
  color: #ffffff;
  text-decoration: none;
}

.menulist a:hover,.social a:hover {
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,0));
  color: white;
}

.img_shadow {
	box-shadow: 3px 3px 5px #635070;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
	width:100%;
    overflow: hidden;
}


.video-container iframe {
    frameborder=0;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.background_purple {
	background-image: url("../images/purp bground.jpeg");
	background-color: black;
	background-size: 100%;
	background-repeat: repeat-y;
 	background-attachment: fixed;
}

.background_black {
	background-color: black;
}

.logo {
}

.m-p-g{padding-bottom:20px;margin:0 auto;}.m-p-g__thumbs-img{margin:0;float:left;vertical-align:bottom;cursor:pointer;z-index:1;position:relative;opacity:0;filter:brightness(100%);-webkit-tap-highlight-color:transparent;will-change:opacity,transform;transition:all .5s cubic-bezier(.23,1,.32,1)}.m-p-g__thumbs-img.active{z-index:50}.m-p-g__thumbs-img.layout-completed{opacity:1}.m-p-g__thumbs-img.hide{opacity:0}.m-p-g__thumbs-img:hover{filter:brightness(140%)}.m-p-g__fullscreen{position:fixed;z-index:10;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;background:0 0;visibility:hidden;transition:background .25s ease-out,visibility 10ms .5s linear;will-change:background,visibility;backface-visibility:hidden}.m-p-g__fullscreen.active{transition:background .25s ease-out,visibility 10ms 0s linear;visibility:visible;background:rgba(0,0,0,.95)}.m-p-g__fullscreen-img{pointer-events:none;position:absolute;transform-origin:left top;top:50%;left:50%;max-height:100vh;max-width:100%;visibility:hidden;will-change:visibility;transition:opacity .5s ease-out}.m-p-g__fullscreen-img.active{visibility:visible;opacity:1!important;transition:transform .5s cubic-bezier(.23,1,.32,1),opacity .5s ease-out}.m-p-g__fullscreen-img.almost-active{opacity:0;transform:translate3d(0,0,0)!important}.m-p-g__controls{position:fixed;top:0;left:0;width:100%;z-index:200;height:20vh;background:linear-gradient(to top,transparent 0,rgba(0,0,0,.55) 100%);opacity:0;visibility:hidden;transition:all .5s cubic-bezier(.23,1,.32,1)}.m-p-g__controls-arrow,.m-p-g__controls-close{position:absolute;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:0 0}.m-p-g__controls.active{opacity:1;visibility:visible}.m-p-g__controls-arrow:focus,.m-p-g__controls-close:focus{outline:0}.m-p-g__controls-arrow{z-index:1;top:0;width:20%;height:100vh;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}.m-p-g__controls-arrow:hover{opacity:1}.m-p-g__controls-arrow--prev{left:0;padding-left:3vw;-ms-flex-pack:start;justify-content:flex-start}.m-p-g__controls-arrow--next{right:0;padding-right:3vw;-ms-flex-pack:end;justify-content:flex-end}.m-p-g__controls-close{top:3vh;left:3vw;z-index:5}.m-p-g__btn{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.07);transition:all .25s ease-out}.m-p-g__btn:hover{background:rgba(255,255,255,.15)}.m-p-g__alertBox{position:fixed;z-index:999;max-width:700px;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:25px;border-radius:3px;text-align:center;box-shadow:0 6px 12px rgba(0,0,0,.23),0 10px 40px rgba(0,0,0,.19);color:grey}.m-p-g__alertBox h2{color:red}



</style>
