/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ==== END OF RESET ==== */


/* Color Scheme

#F8EBD3- Tan
#4EA399- Forrest Green
#133C40- Dark Green
#F07580- Salmon Pink
#BD868E- Mauve Pink
#573E41- Dark Pink
#2E2652- Dark Purple
#A3C0E0- Light Grey Blue

*/

/* ==== BODY ==== */

* {
	box-sizing: border-box;
}

body {
	max-width: 100%;
	margin: 0 auto;
	background-color: #F8EBD3;
	position: relative;
  font-family: Poppins, "Noto Sans Lao", "Open Sans", "Noto Sans Japanese", "Times New Roman", sans-serif;
}

/* ==== LINK STYLING ==== */

nav {
	  text-align: center;
	  margin: 0 auto;
    font-family: Poppins, "Noto Sans Lao", "Open Sans", "Noto Sans Japanese", "Times New Roman", sans-serif;
    font-size: 1.7em;
    background-color: #F8EBD3;
    list-style-type: none;
    padding: 1.0em;
}

nav li {
  display: inline-block;
  padding: 0.5em;
}

a:link, a:visited {
    color: #4EA399;
    text-decoration: none;
    font-weight: 600;
  }

a:hover,  a:active, a:focus{
    color: #F07580;
    background-color: #2E2652;
    padding: 1.0em;
    border-radius: 10px;
    font-weight: 600;
  }
  
footer a:hover,  a:active, a:focus {
    color: #F07580;
    font-weight: 600;
  }

.menu li {
    display: inline-block;
    list-style-type: none;
    padding: 0.5em;
  }

/* ==== END OF LINK STYLING ==== */

/* ==== IMAGES STYLING==== */

.banner {
display: block;
width: 100vw;
height: auto;
padding: 0;
background-size: contain;
}

.game-piece {
  display: block;
  text-align: center;
  margin: 0 auto;
  padding: 1.0em;
  margin-top: 1.5em;
}

/* Homepage elements */

/* ==== BOOK TICKET INFO STYLING ==== */

.theater-information {
  background-color: #4EA399;
  color: #2E2652;
  line-height: 2.0;
  text-align: center;
  padding: 0.5em;
}

h1 {
  margin-top: 0.3em;
  margin-bottom: 0.2em;
  font-family: "OPTINovelGothic XAgen", sans-serif;
  font-size: 3.8em;
  color: #2E2652;
}

.theater {
  font-weight: 700;
  font-size: 1.8em;
}

.street, .date {
  font-size: 1.4em;
  font-weight: 600;
}

.invite {
  text-align: center;
  color: #2E2652;
  background-color: #4EA399;
  font-size: 1.4em;
  line-height: 1.8;
  padding: 1.0em;  
}

.invite1 {
  text-align: center;
  background-color: #4EA399;
  color: #2E2652;
  font-size: 1.4em;
  font-weight: 600;
  padding: 1.0em;
}

/* Book Ticket and Read More link styling */

.book-ticket {
  background-color: #4EA399;
  padding: 4.0em;
  margin-top: -2.0em;
}

.book-ticket a {
  display: block;
  margin: 0 auto;
  box-shadow: 15.0px 15.0px 15.0px #133C40;
  background-color: #F8EBD3;
  border: 5.0px solid #2E2652;
  border-radius: 10px;
  font-size: 1.5em;
  font-weight: 700;
  color: #2E2652;
  text-align: center;
  padding: 1.5em;
  max-width: 250px;
  transition: 0.5s ease-in-out;
}

.book-ticket a:visited {
  color: #2E2652;
}

.book-ticket a:hover {
  color: #F07580;
  background-color: #F8EBD3;
  box-shadow: 25px 25px 25px #133C40;
  cursor: pointer;
}

/* ==== END OF BOOK TICKET STYLING ==== */

/* ==== CHARACTER STYLING ==== */

.read-more {
  background-color: #BD868E;
  padding: 4.0em;
  margin-top: -2.0em;
}

.read-more a {
  display: block;
  margin: 0 auto;
  box-shadow: 15.0px 15.0px 15.0px #573E41;
  background-color: #F8EBD3;
  border: 5.0px solid #2E2652;
  border-radius: 10px;
  font-size: 1.5em;
  font-weight: 700;
  color: #2E2652;
  text-align: center;
  padding: 1.5em;
  max-width: 250px;
  transition: 0.5s ease-in-out;
}

.read-more a:visited {
  color: #2E2652;
}

.read-more a:hover {
  color: #F07580;
  background-color: #F8EBD3;
  box-shadow: 25px 25px 25px #573E41;
  cursor: pointer;
}

/* End of link styling */

/* ==== CHARACTER STYLING ==== */

h2 {
    font-family: "OPTINovelGothic XAgen", sans-serif;
    font-size: 3.5em;
    text-align: center;
    color: #2E2652;
    background-color: #BD868E;
    padding: 1.0em;
  }

  strong {
    font-weight: 700;
  }
/* flexbox for character cards starts */

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  background-color: #BD868E;
  padding-bottom: 2.5em;
}

figure {
  padding: 1.0em;
}

figcaption {
    color: #2E2652;
    text-align: center;
    font-size: 1.5em;
    font-weight: 700;
    margin-top: 0.5em;
}

.figure img {
    border-radius: 10px;
}

/* End of flexbox styling */

.characters, .characters1 {
  color: #2E2652;
  background-color: #BD868E;
  text-align: center;
  font-size: 1.4em;
  line-height: 1.5;
  padding: 0.5em;
}

.characters {
  padding: 1.0em;
  margin-top: 1.0em;
}

.characters1 {
  font-size: 1.6em;
  font-weight: 600;
}

/* ==== END OF CHARACTER STYLING ==== */

/*==== YOUTUBE VIDEO STYLING ==== */

h3 {
  font-family: "OPTINovelGothic XAgen", sans-serif;
  font-size: 3.8em;
  text-align: center;
  color: #2E2652;
  background-color: #4EA399;
  padding-top: 1.0em;
}

h3 + p {
  font-size: 1.8em;
  font-weight: 600;
  text-align: center;
  color: #2E2652;
  background-color: #4EA399;
  padding: 1.0em;
}

/* Youtube video */

iframe {
  display: flex;
  padding: 0 2em 2em 2em;
  width: 100vw;
  height: 62vw;
  background-color: #4EA399;
}

/*==== END OF YOUTUBE VIDEO STYLING==== */

/*Ticket and theate.r page elements */

/* ==== TICKET AND SHOWTIME INFO STYLING ==== */

.tickets {
  background-color: #4EA399;
  margin-top: -2.2em;
}

.tickets h1 {
  padding: 1.0em;
  text-align: center;
}

.flex-container1>div {
  text-align: center;
  margin-top: 3.0em;
}

.tickets>div:first-of-type {
  justify-self: center;
  margin: 0 auto;
}

dl {
  display: inline-block;
  border: 3px solid #2E2652;
  border-radius: 10px;
  background-color: #A3C0E0;
  text-align: left;
  justify-content: center;
  padding: 1.0em;
  margin: 3.0em 3.0em 3.0em;
  transition: 0.5s ease-in-out;
  box-shadow: 10.0px 10.0px 10.0px #133C40;
}

 dt {
  font-size: 2.5em;
  font-weight: 700;
  margin-bottom: 1.0em;
  padding: 0.5em;
  color: #2E2652;
}

dd {
  display: block;
  margin: 0 auto;
  padding: 0 0 1.0em 0;
  text-align: left;
  font-size: 1.5em;
  font-weight: 600;
  color: #2E2652;
}

.flex-container1 span {
  float: right;
}

/* End of flexbox styling */

/* ==== END OF TICKET AND SHOWTIME STYLING ==== */

/* ==== MOVIE THEATER INFO ==== */

.book-ticket + h2 {
  margin-bottom: -1.0em;
}

.movie-theater {
  display: block;
  margin: 24px auto;
  width: 100%;
  height: auto;
  position: relative;
}

.theater-info {
  float: left;
  padding: 3.0em;
  font-size: 1.2em;
  line-height: 1.8;
  color: #2E2652;
  background-color: #BD868E;
}

.story {
  color: #2E2652;
  padding: 0.5em;
  font-size: 2.5em;
  text-align: center;
  background-color: #BD868E;
}

.story + p {
  margin-bottom: 1.0em;
}

/* ==== CONTACT STYLING ==== */

.contact-us {
  background-color: #4EA399;
}

.contact-us h3 {
  /*margin-top: 19.0em;*/
  padding: 1.0em;
}

/*.contact-us h3 {
  margin-top: 1.0em;
}*/

iframe map {
  display: flex;
  padding: 1.0em;
  margin: 1.0em auto;
  width: 62vw;
  height: 55vw;
  max-height: 450px;
}

h4 {
  font-family: "OPTINovelGothic XAgen", sans-serif;
  font-size: 2.5em;
  text-align: center;
  color: #2E2652;
  padding-top: 0.5em;
}

/* Flexbox styling */

.flex-container1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  padding-bottom: 2.5em;
}

.figure1 {
  padding: 0.8em;
}

/* End of flexbox styling */

h5 {
  color: #2E2652;
  font-size: 1.5em;
  font-weight: 600;
  margin-bottom: 1.0em;
}

h5 + p {
  color: #2E2652;
  font-size: 1.0em;
  font-weight: 600;
}

/* ==== END OF CONTACT STYLING ==== */

/* End of Tickets page */

/* Start of Film page */

/* ==== FILM SYNOPSIS STYLING ==== */

.synopsis h1 {
  padding: 1.0em;
  margin-top: -0.1em;
  margin-bottom: 0.2em;
  font-family: "OPTINovelGothic XAgen", sans-serif;
  font-size: 3.8em;
  text-align: center;
  color: #2E2652;
  background-color: #4EA399;
}

.origin p {
  color: #2E2652;
  text-align: left;
  font-size: 1.2em;
  line-height: 1.8;
  background-color: #4EA399;
  padding: 2.0em;
  margin-top: -3.0em;
}

.synopsis h2 {
  margin-top: -0.3em;
}

.synopsis h2 + p {
  font-size: 1.8em;
  font-weight: 600;
  margin-top: -0.5em;
}

.synopsis h3 {
  padding: 0.8em;
}

.synopsis .flex-container:last-of-type {
  background-color: #4EA399;
  font-size: 1.2em;
  line-height: 1.8;
  padding: 1.0em;
  text-align: center;
  margin-bottom: 1.0em;
}

.synopsis figcaption:last-of-type {
  padding: 1.0em;
}

/* ==== END OF SYNOPSIS STYLING ==== */

/* End of Film page */

/* ==== FOOTER ==== */

footer {
	font-size: 1.2em;
	color: #2E2652;
	text-align: center;
	margin: 0 auto;
  padding: 1.0em;
	line-height: 1.5;
}

footer nav {
	font-size: 1.2em;
	color: #2E2652;
	text-align: center;
	margin: 0 auto;
  padding: 0.3em;
	line-height: 1.0;
}

footer p {
  padding: 0.8em;
  font-weight: 600;
}

/* ==== END FOOTER ==== */

/* ==== MEDIA QUARIES ==== */

/* Small screen size: for phones */
@media (max-width: 844px) {
  
.movie-theater {
    display: block;
    text-align: center;
    margin: 24px auto;
    width: 100%;
    height: auto;
    position: relative;
  }

iframe map {
  display: flex;
  padding: 1.0em;
  margin: 1.0em auto;
  width: 62vw;
  height: 55vw;
  max-height: 450px;
}

}

/* Medium screen size: for tablets and larger */
@media (min-width: 841px) {

  .flex-container1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  dt {
    font-size: 2.5em;
  }

  .movie-theater {
    display: block;
    margin: 24px auto;
    width: 100%;
    height: auto;
    position: relative;
  }

  .contact-us h3 {
    margin-top: 3.0em;
  }

  iframe map {
    display: flex;
    padding: 1.0em;
    margin: 1.0em auto;
    width: 62vw;
    height: 55vw;
    max-height: 450px;
  }

}