/* other fonts to try?
|El+Messiri|Josefin+Sans
*/

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body {
  height: 100%;
  font-size: 100%; 
  padding: 0; 
  margin: 0; 
}


body {
  background: #000;
  font-family: 'Bubbler One', Arial, sans-serif;
	color: #fff;
}

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

a:hover,
a:active {
	color: #ff6666;
}

button {
	border: none;
	padding: 0.6em 1.2em;
	background: #111;
	color: #fff;
	font-family: 'Cormorant SC', Georgia, serif;
  font-size: 18px; 
	cursor: pointer;
	display: inline-block;
	margin: 3px 2px;
	border-radius: 2px;
  transition: background-color 500ms ease;
}

button:hover {
	background: #222;
}

button i.fa { font-size: 14px; }


.text-stroke {
 text-shadow:
  #000  0px -1px 1px,
  #000 -1px  0px 1px,
  #000  0px  0px 1px,
  #000  1px  0px 1px,
  #000  0px  1px 1px,
  
  #000  0px  0px 5px
}
/* - unused from above -
  #000 -1px -1px 1px,
  #000  1px -1px 1px,
  #000 -1px  1px 1px,
  #000  1px  1px 1px
*/


/* ----- Logo ----- */

.logo { 
  position: absolute; 
  top: 0px; 
  height: 150px; 
  font-family: 'Cormorant SC', serif; 
  /*border-bottom: 3px double #fff;*/ 
  text-shadow: #000 0 0 2px; 
  font-weight: 300; 
  text-align: center;
  
  font-size: 30px; 
  line-height: 22px; 

  padding-top: 5px;
  left: 0px; 
  right: 0px; 
  box-shadow: none;
  box-shadow: inset 0px 100px 60px -50px #000; 
}

/* -- "The" text -- */

.logo > span:first-of-type { 
  display: block; 
  font-size: 14px;
}

/* -- logo overline -- */

.logo-overline {
  display: inline-block; 
  width: 92px; 
  border-bottom: 1px solid #fff; 
  height: 0; 
  box-shadow: 0 0 2px #000; 
  margin-bottom: 3px; 
}
.logo-overline-left {
  margin-right: 3px;
}
.logo-overline-right {
  margin-left: 3px;
}

/* -- "MBM" text -- */
.logo > span.mbm { 
  display: block; 
}

/* -- logo underline -- */

.logo-underline {
  display: inline-block; 
  width: 218px; 
  border-bottom: 1px solid #fff; 
  height: 0; 
  box-shadow: 0 0 2px #000; 
  vertical-align: top; 
  margin-top: 9px;
}

/* -- responsive -- */

@media screen and (min-width: 540px) and (min-height: 540px) {

  .logo { 
    font-size: 48px; 
    line-height: 32px;
  }

  /* -- "The" text -- */

  .logo > span:first-of-type { 
    font-size: 24px;
  }
  
  /* -- logo overline -- */

  .logo-overline {
    width: 140px; 
    margin-bottom: 5px; 
  }
  .logo-overline-left {
    margin-right: 10px;
  }
  .logo-overline-right {
    margin-left: 10px;
  }

  /* -- logo underline -- */

  .logo-underline {
    width: 350px; 
    margin-top: 15px;
  }
  
}

/* ----- Navigation ----- */

nav {
  position: absolute; 
  bottom: 0px; 
  left: 0px; 
  right: 0px; 
  height: auto; 
  
  font-family: 'Cormorant SC', serif; 
  font-size: 22px; 
  text-shadow: #000 0 0 2px; 
  font-weight: 400; 
  text-align: center; 
  
  box-shadow: inset 0px -40px 60px -50px #000;
  box-shadow: inset 0px -100px 60px -50px #000; 
  
  padding: 100px 10px 0;
}
nav > ul { 
  list-style-type: none; 
  padding: 0;
  margin: 0;
}
nav > ul > li {
  display: inline-block;
  margin: 0 8px;
  padding: 0;
}


/* -- responsive -- */

@media screen and (min-width: 540px) and (min-height: 540px) {

  nav {
    font-size: 36px; 
    padding: 100px 10px 0;
  }
  nav > ul > li {
    margin: 0 20px;
  }
  
}


/* ----- Slideshow ----- */

/* adapted from http://cssmojo.com/ken-burns-effect/ */

#slideshow { 

  z-index: -1; 
  position: fixed; 
  overflow: hidden; 
  
  top: 1%;
  bottom: 1%;
  height: 98%;
  
  left: 50%; 
  width: 98vh; 
  margin-left: -49vh;
  
  border-radius: 50%; 
  box-shadow: 0 0 10px #fff; 
} 

#slideshow .fx:first-child + div ~ div, 
#slideshow .fx1 { 
  z-index: -2; 
}

#slideshow .fx, #slideshow .fx1 { 
  -webkit-transform: scale(1.10) translate(0.0%); 
  -ms-transform: scale(1.10) translate(0.0%); 
  transform: scale(1.10) translate(0.0%); 
  opacity: 1; 
}


#slideshow div { 
  position:absolute; 
  z-index:-1; 
  width:105%; 
  height:105%; 
  top:-5%; 
  left:-5%; 
  
  background-position: center center; 
  background-repeat: no-repeat; 
  background-size: cover;
  opacity:0;
  
	-webkit-transition: opacity 3s, -webkit-transform 8s; 
  -ms-transition: opacity 3s, -ms-transform 8s; 
  transition: opacity 3s, transform 8s 
	}
  
/* -- slide origin -- */

#slideshow div  { -webkit-transform-origin:center center; -ms-transform-origin:center center; transform-origin:center center; }

#slideshow div.origin-top-left { -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left; }
#slideshow div.origin-top { -webkit-transform-origin:top center; -ms-transform-origin:top center; transform-origin:top center; }
#slideshow div.origin-top-right { -webkit-transform-origin:top right; -ms-transform-origin:top right; transform-origin:top right; }

#slideshow div.origin-left { -webkit-transform-origin:center left; -ms-transform-origin:center left; transform-origin:center left; }
#slideshow div.origin-center { -webkit-transform-origin:center center; -ms-transform-origin:center center; transform-origin:center center; }
#slideshow div.origin-right { -webkit-transform-origin:center right; -ms-transform-origin:center right; transform-origin:center right; }

#slideshow div.origin-bottom-left { -webkit-transform-origin:bottom left; -ms-transform-origin:bottom left; transform-origin:bottom left; }
#slideshow div.origin-bottom { -webkit-transform-origin:bottom center; -ms-transform-origin:bottom center; transform-origin:bottom center; }
#slideshow div.origin-bottom-right { -webkit-transform-origin:bottom right; -ms-transform-origin:bottom right; transform-origin:bottom right; }

/* -- slide position -- */

#slideshow div  { background-position: center center; }

#slideshow div.position-top-left { background-position: top left; }
#slideshow div.position-top { background-position: top center; }
#slideshow div.position-top-right { background-position: top right; }

#slideshow div.position-left { background-position: center left; }
#slideshow div.position-center { background-position: center center; }
#slideshow div.position-right { background-position: center right; }

#slideshow div.position-bottom-left { background-position: bottom left; }
#slideshow div.position-bottom { background-position: bottom center; }
#slideshow div.position-bottom-right { background-position: bottom right; }


/* ----- Page modals ----- */

.md-modal { 
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.5em;
  text-align: justify;
  overflow: hidden;
}

/* -- mobile modal size -- */

.md-modal {
	
	top: 55%;
  left: 50%;
    
  width: 90%;
  max-width: 90vh;
  
  padding: 35px 0 0;
	/*
  height: 100%;
  max-height: 100%;
  */
}

/* -- tab title -- */
.md-modal h2 {
  margin: 0;
  position: relative;
  top: -35px;
  font-family: "Cormorant SC";
  background: rgba(0,0,0,0.5);
  padding: 5px 25px;
  text-align: center;
  font-weight: 400;
}

/* -- close button -- */

.md-modal .md-close {
  position: absolute; top: 6px; right: 1px; font-size: 24px;
  cursor: pointer;
}

.md-modal .md-close :hover {
  color: #ff6666;
}

#modal-videos .md-close {
  top: 1px;
}

/* -- content styles -- */
.md-content { 
  max-height: calc( 100vh - 210px );
  overflow: hidden;
  padding: 15px 25px;
  margin: -35px auto 0;
}

.md-content p { 
  margin: 0 0 20px 0;
}

.md-content p:last-of-type { 
  margin: 0;
}

/* -- responsive -- */
@media screen and (min-width: 540px) and (min-height: 540px) {

  /* -- big screen modal size -- */
  .md-modal {

    font-size: 18px;
    
    top: 55%;
    left: 50%;

    height: auto;
    max-height: auto; 
    max-height: calc( 100% - 170px );
    
    width: 90vh;
    max-width: 90vw;
    
  }
}


/* ----- Videos ----- */

#modal-videos {
  top: 50%;
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  padding: 25px 0;
}

#modal-videos .md-content {
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

#modal-videos .md-content div.video {
  height: 100%;
  max-height: 100%;
  width: calc(100% - 100px);
  max-width: calc(100% - 100px);
  margin: 0 auto;
}

#modal-videos .md-content div.video video {
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* -- video title -- */

#modal-videos .video span {
  position: absolute;
  top: 10px;
  left: 0px;
 font-size: 24px; font-weight: 500; font-family: 'Cormorant SC', serif; display: block; text-align: center; width: 100%;
}

/* -- video navigation -- */

#modal-videos .video-nav div {
  position: absolute; top: 45%; font-size: 24px;
}

#modal-videos .video-nav div:hover {
  color: #ff6666;
}

#modal-videos .video-nav div.video-prev {
  left: 10px;
}

#modal-videos .video-nav div.video-next {
  right: 10px;
}


/* ----------- Form ----------- */

.md-content input, .md-content textarea {
  display: block;
  padding: 5px;
  font-size: 14px;
  width: 100%;
  font-family: 'Lato', Calibri, Arial, sans-serif;
  color: #ccc;
  border: 1px solid #666;
  border-radius: 5px; 
  font-weight: 300;
  background: #000;
  margin: 0 0 5px 0;
}

.md-content textarea { height: 100px; resize: vertical; }

.md-content button.form-submit-btn {
  border-radius: 50px; 
  padding: 17px 10px 19px 10px; 
  background: #aa3333; 
  box-shadow: 0 0 5px #fff, inset 0 0 10px #000; 
  margin-bottom: 5px; 
  letter-spacing: 0px;
}

.md-content span.error { 
  display: none; 
  background: rgba(128,0,0,0.5);
  padding: 2px 6px;
  font-size: 18px;
  border-radius: 3px;
}

.md-content span.error i.fa {
  color: #ff8;
  margin-right: 6px;
}

/* -- responsive -- */
@media screen and (min-width: 540px) and (min-height: 540px) {
  .md-content input, .md-content textarea {
    font-size: 18px;
    margin: 0 0 10px 0;
    padding: 10px;
  }
}


/* ----- Testimonials ----- */

blockquote {
  background: #111;
  border-radius: 5px;
  padding: 10px;
  width: 80%;
  margin: 30px auto;
  font-size: 12px;
  line-height: 1.5em;
}

/*
blockquote > p:first-of-type::before {
  float: left;
  font-size: 200%;
  content: '“';
}
*/

blockquote > p {

}

blockquote > cite {
  display: block;
  text-align: right;
  margin-top: 5px;
  font-style: normal;
  font-family: 'Cormorant SC', serif;
}

/* -- responsive -- */
@media screen and (min-width: 540px) and (min-height: 540px) {

  blockquote {
    font-size: 14px;
    line-height: 1.5em;
  }

}

/* ----- Text Selection ----- */

/* WebKit/Blink Browsers */
::selection {
  background: #666; 
  color: #fff;
}
/* Gecko Browsers */
::-moz-selection {
  background: #666;
  color: #fff;
}