/*
Theme Name: EastWestDialogue
Description: Custom theme for East/West Dialogue Project
Version: 1.0.0
Author: Mark Argent
Text Domain: eastwestdialogue
*/
/* from an image */
/* xyz */
/* 
  This was added for debugging purposes, but removing the
  1px padding and margin changes the appearance
*/
#masthead > div {
  /*border:1px dotted green;*/
  padding: 1px;
  margin: 1px; }

/* */
.flright {
  float: right; }

.colonwrap {
  padding-left: 1px; }

body {
  font-family: "Puritan", "gill sans", "gill sans MT", "serif", "helvetica", "sans-serif", "sansserif", "sanserif" !important;
  font-size: 14px;
  padding: 0px 0px 15px 0px;
  margin: 0px;
  border-collapse: collapse; }

a {
  color: #1578ab; }

a:hover {
  color: #ab4715; }

#masthead {
  position: relative;
  width: 100%;
  background-image: linear-gradient(180deg, #1578ab 0%, #27a5e5 10%, #27a5e5 80%, white 100%);
  display: grid;
  grid-template-columns: 208px 1fr 120px 0px;
  margin: 0px 0px 0px 0px;
  padding: 6px 0px 6px 6px; }

.title {
  grid-row: 1/1;
  grid-column: 1/1;
  margin: 10px;
  padding: 0px 0px 14px 0px; }

#masthead .t1, #masthead .t2 {
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 1px;
  color: yellow;
  white-space: nowrap; }

/* couldn't get the images to align right using flex, so switching to grid */
#imgouterwrap {
  grid-row: 1/1;
  grid-column: 2/2;
  display: grid;
  grid-template-columns: 1fr auto auto auto auto auto auto; }

#masthead .imgwrap {
  margin: 10px 0px 0px 11px;
  height: 70px;
  width: auto;
  position: relative;
  top: 16px; }

@media only screen and (max-width: 1010px) {
  #masthead .imgwrap {
    height: 60px;
    margin: 10px 0px 0px 8px;
    top: 20px; } }

#masthead .imgwrap img {
  height: inherit;
  width: auto;
  border: 1px solid yellow;
  filter: drop-shadow(1px 1px #ffff99); }

/* images at top */
#topimg0 {
  grid-row: 1/1;
  grid-column: 2/2; }

#topimg1 {
  grid-row: 1/1;
  grid-column: 3/3; }

#topimg2 {
  grid-row: 1/1;
  grid-column: 4/4; }

#topimg3 {
  grid-row: 1/1;
  grid-column: 5/5; }

#topimg4 {
  grid-row: 1/1;
  grid-column: 6/6; }

#topimg5 {
  grid-row: 1/1;
  grid-column: 7/7; }

@media only screen and (max-width: 910px) {
  #topimg0 {
    display: none; } }

@media only screen and (max-width: 860px) {
  #topimg1 {
    display: none; }
  #topimg2 {
    grid-row: 1/1;
    grid-column: 6/6; }
  #topimg4 {
    grid-row: 1/1;
    grid-column: 4/4; } }

@media only screen and (max-width: 780px) {
  #topimg2 {
    grid-row: 1/1;
    grid-column: 6/6; }
  #topimg4 {
    grid-row: 1/1;
    grid-column: 4/4;
    display: none; } }

@media only screen and (max-width: 670px) {
  #topimg3 {
    display: none; }
  #topimg2 {
    grid-row: 1/1;
    grid-column: 6/6; }
  #topimg4 {
    grid-row: 1/1;
    grid-column: 4/4;
    display: none; } }

@media only screen and (max-width: 600px) {
  /*  #topimg0, #topimg1, #topimg2, #topimg3, #topimg4, #topimg5{display: none;}  */
  #topimg0 {
    display: none; }
  #topimg1 {
    display: none; }
  #topimg2 {
    display: none; }
  #topimg3 {
    display: none; }
  #topimg4 {
    display: none; }
  #topimg5 {
    display: none; } }

#conveyThisPlaceholder {
  padding: 15px 0px 0px 0px;
  grid-row: 1/1;
  grid-column: 3/3; }

#mobhd {
  /* must not be set - so that the absolute position of the mobule menu is */
  /* relative to the page rather than this element                         */
  visibility: hidden;
  grid-row: 1/1;
  grid-column: 4/4; }

/* hrefs */
a {
  text-decoration: none; }

/* contact page */
.contacttable {
  padding: 10px 0px 0px 0px; }

.contacttable td {
  padding: 0px 0px 8px 0px; }

.contacttable .person {
  padding-right: 10px;
  padding-left: 20px;
  text-align: right; }

/* general layout */
#contentouter {
  max-width: 100%;
  padding: 0px;
  margin: 30px 0px 12px 0px;
  display: grid;
  grid-column-gap: 18px !important;
  grid-template-columns: 120px 1fr 140px 2px;
  justify-items: center; }

/*
#contentouter > div{  padding:1px; margin: 1px; border:1px dotted red;}
*/
.thecontent {
  padding: 0px !important;
  margin: 0px !important; }

#menuwrap {
  font-size: 14px;
  width: 120px;
  padding: 0px;
  grid-column: 1/1;
  grid-row: 1/1; }

.menu1 ul {
  list-style-type: none;
  padding: 0px 0px 0px 10px;
  margin: 0px; }

.menu1 li {
  padding: 0px 0px 8px 0px;
  position: relative; }

.menu1 ul.sub-menu {
  font-size: 14px;
  list-style-type: "-";
  padding: 0px;
  margin: 0px;
  position: absolute;
  top: -3px;
  left: 114px;
  background-color: white;
  z-index: 1000;
  display: none;
  width: 28ex;
  opacity: 75%;
  border-top: 1px dotted #82cbf0;
  border-right: 1px dotted #82cbf0;
  border-bottom: 1px dotted #82cbf0; }

.menu1 li {
  padding: 0px 0px 8px 0px; }

.menu1 li:hover .sub-menu {
  display: block; }

.menu1 .sub-menu li {
  padding: 3px 3px 3px 6px; }

.menu1 .sub-menu li + li {
  padding-top: 0px; }

#contentwrap {
  grid-column: 2/2;
  grid-row: 1/1;
  width: inherit;
  max-width: 70ex;
  margin: 0px auto 0px auto;
  font-size: 14px;
  line-height: 17px;
  color: #444444; }

#rightsidebar {
  grid-column: 3/3;
  grid-row: 1/1; }

#rightsidebarinner {
  width: 140px;
  margin: 0px;
  border: 1px solid #27a5e5;
  margin: 0px 0px 0px 0px;
  font-size: 11.9px;
  font-family: "Puritan", "gill sans", "gill sans MT", "serif", "helvetica", "sans-serif", "sansserif", "sanserif";
  font-weight: normal; }

#rightsidebar .hd {
  background-color: #27a5e5;
  font-weight: bold;
  padding: 4px;
  color: yellow;
  letter-spacing: 1px;
  text-align: right;
  font-size: 14px; }

#rightsidebarinner .title {
  font-weight: bold;
  color: #888888;
  margin: 0px;
  text-align: right;
  padding: 4px 4px 6px 4px;
  border-top: 1px dotted #ea8755;
  font-size: 14px; }

#rightsidebarinner .hd + .title {
  border-top: none; }

#rightsidebarinner .date {
  font-style: italic;
  font-size: 11.9px;
  padding: 2px 0px 0px 0px; }

#rightsidebarinner .date .timezone {
  font-size: 85%; }

#rightsidebarinner .image_for_right_sidebar {
  text-align: center; }

#rightsidebarinner .description_for_sidebar {
  padding: 4px 4px 4px 4px;
  display: block;
  text-align: start;
  color: #444444; }

#rightsidebarinner .more {
  margin: 6px 0px 0px 0px;
  padding: 4px;
  text-align: right;
  font-style: italic; }

#rightsidebarinner .title a {
  color: inherit; }

#rightsidebarinner .title a:hover {
  color: #999999; }

#rightsidebar .sidebarUserInfo {
  text-align: center;
  margin: 0px auto 10px auto;
  line-height: 150%;
  font-size: 11.9px;
  font-family: "Puritan", "gill sans", "gill sans MT", "serif", "helvetica", "sans-serif", "sansserif", "sanserif" !important; }

#rightsidebar .sidebarUserInfo .dashboardlink {
  text-align: center;
  font-style: italic;
  padding: 8px 0px 10px 0px; }

h1 {
  font-size: 120%;
  font-weight: bold;
  color: #0c4867;
  padding: 0px 40px 6px 14px;
  border-bottom: 1px solid #e56727;
  margin: 0px 0px 8px 0px;
  display: inline-block; }

p {
  text-align: justify;
  margin: 0px;
  padding: 0px; }

p + p {
  text-indent: 12px; }

/* home page */
.subhd {
  margin: 30px 0px 40px 0px;
  color: #0c4867;
  letter-spacing: 1px;
  line-height: 140%;
  font-size: 120%; }

.homehd {
  font-weight: bold;
  font-size: 110%;
  letter-spacing: 0.5px;
  color: #0c4867; }

.fpitem {
  margin: 0px 30px 0px 30px;
  padding: 10px 0px 0px 20px;
  text-indent: -20px;
  text-align: justify; }

.fpitem + p {
  margin-top: 10px; }

/* events */
.event {
  border: 1px dotted #27a5e5;
  margin: 0px 0px 16px 0px; }

.event .title {
  font-weight: bold;
  margin: 0px;
  padding: 6px 6px 6px 6px;
  background-color: #27a5e5;
  color: yellow; }

.event .title a {
  color: inherit; }

.event .title a:hover {
  color: #999999; }

.event .datevenuepricewrap {
  padding: 5px 6px 5px 6px;
  border-bottom: 1px dotted #f0a782; }

.event .datevenuepricewrap .date .timezone {
  font-size: 85%; }

.event .image_for_page_showing_all_events {
  float: left;
  margin: 0px 6px 4px 0px; }

.event .short_description {
  padding: 6px; }

.event .more {
  margin: 6px 0px 0px 0px;
  padding: 6px;
  text-align: right;
  font-style: italic; }

.event:after {
  content: "";
  font-size: 0px;
  height: 0px;
  clear: both;
  display: table; }

.EventSingle .date {
  padding: 0px 0px 4px 0px; }

.EventSingle .date .timezone {
  font-size: 85%; }

.EventSingle .description {
  padding: 8px 0px 4px 0px; }

.EventSingle .image_for_separate_event_page {
  width: inherit; }

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

.EventSingle .datevenuepricewrap {
  padding: 5px 6px 5px 6px;
  border-bottom: 1px dotted #ea8755;
  margin: 0px 0px 8px 0px; }

.EventSingle .addtocalendar {
  border-bottom: 1px dotted #82cbf0;
  padding: 0px 0px 6px 0px;
  margin: 0px 0px 30px 0px; }

.booking {
  background-color: #27a5e5;
  border-radius: 3px;
  padding: 3px 7px 3px 8px;
  font-weight: bold;
  color: white;
  letter-spacing: 1px;
  display: inline-block;
  position: relative;
  top: -10px;
  font-family: "Puritan", "gill sans", "gill sans MT", "serif", "helvetica", "sans-serif", "sansserif", "sanserif" !important;
  font-size: 14px; }

.bookingmtop30 {
  margin-top: 30px;
  font-size: 120%;
  padding: 5px 7px 4px 8px; }

#topBookingButton {
  color: white; }

.booking:hover, #topBookingButton:hover {
  color: #cccccc; }

.booking outerwrap {
  border: 1px solid white;
  padding: 0px 0px 10px 10px;
  margin-right: 12px; }

.bookwrap {
  display: block;
  padding: 6px 0px 3px 0px; }

.bookingdetails {
  display: none; }

.hideBookingDetails {
  margin: 10px 10px 10px 0px;
  text-align: right;
  font-style: italic; }

/* conveythis things */
#conveythis-wrapper {
  position: absolute !important;
  top: 8px !important;
  right: 0px !important; }

.language_title {
  letter-spacing: 0.5px;
  font-family: "Puritan", "gill sans", "gill sans MT", "serif", "helvetica", "sans-serif", "sansserif", "sanserif" !important;
  font-size: 11.9px !important; }

.conveythis-widget-main {
  flex-direction: column !important;
  text-align: left !important; }

.conveythis-widget-language {
  height: 30px  !important;
  line-height: 30px !important;
  width: 16ex !important;
  /*xyz*/
  position: relative;
  left: 10px;
  background-color: transparent !important; }

.conveythis-widget-language:hover {
  background-color: #b0def5 !important; }

.em,
.em label,
.em-bs-section,
.em-booking-section-title,
.em-booking-form-details-title,
.em-booking-form-summary-title
h3.em-booking-section-title,
h3.em-booking-form-summary-title,
.em-booking-form-tickets,
.em-booking-section {
  font-size: 14px !important;
  padding: 4px !important; }

.em-ticket-select {
  margin: 0px;
  padding: 0px; }

/* things for sign-up page */
.signupInput {
  padding: 4px 10px 4px 0px;
  text-align: right; }

.editfield fieldset {
  margin-bottom: 10px !important; }

@media only screen and (max-width: 660px) {
  #rightsidebarinner {
    display: none; } }

@media only screen and (max-width: 660px) {
  #contentouter {
    grid-template-columns: 120px 1fr !important;
    grid-template-rows: 1fr 20px;
    grid-column-gap: 18px !important;
    justify-items: center; }
  #rightsidebar {
    grid-column: 2/2;
    width: 100%;
    grid-row: 3/3;
    border-top: 1px solid #99d4f3;
    padding-top: 8px; }
  #menuwrap {
    grid-column: 1/1;
    grid-row: 1/1; }
  #contentwrap {
    grid-column: 2/2;
    grid-row: 1/1;
    width: inherit;
    padding-right: 30px !important;
    padding-bottom: 10px; } }

@media only screen and (max-width: 500px) {
  #contentouter {
    margin: 0px 0px 12px 0px;
    padding: 0px 10px 0px 10px;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 20px; }
  #rightsidebar {
    grid-column: 1/1;
    grid-row: 3/3;
    border-top: 1px solid #99d4f3;
    padding-top: 8px; }
  #menuwrap {
    display: none; }
  #imgouterwrap {
    display: none; }
  #contentwrap {
    grid-column: 1/1;
    grid-row: 1/1;
    width: inherit;
    padding-right: 30px !important;
    padding-left: 30px !important; }
  #mobhd {
    visibility: visible;
    grid-row: 1/1;
    grid-column: 4/4; }
  #masthead {
    grid-template-columns: 220px 1fr  100px  120px; }
  #conveythis-wrapper {
    right: 70px !important; }
  #conveyThisPlaceholder {
    padding: 15px 0px 0px 30px;
    grid-row: 1/1;
    grid-column: 3/3; } }

@media only screen and (max-width: 380px) {
  #masthead {
    grid-template-columns: 200px 1fr 164px 0px; } }

@media only screen and (max-width: 374px) {
  #masthead {
    grid-template-columns: 200px 1fr 180px 0px;
    background-color: red; }
  #masthead .title {
    text-shrink: text-shrink font-size; }
  .conveythis-widget-language {
    position: relative;
    left: -5px; } }

.mobile-nav-button {
  background-color: #99d4f3;
  padding: 4px;
  border-radius: 3px;
  opacity: 0.8;
  width: 35px;
  position: absolute;
  margin: 10px 0px 0px 0px;
  right: 10px;
  top: 0px;
  /* 4px;  */
  z-index: 999;
  cursor: pointer;
  width: 35px;
  height: 30px; }

.mobile-nav-button .mobile-nav-button__line {
  width: 100%;
  height: 4px;
  background: #0c4867;
  position: relative;
  transition: 1s ease; }

.mobile-nav-button .mobile-nav-button__line:nth-of-type(2) {
  margin: 0.5rem 0; }

.mobile-nav-button .mobile-nav-button__line--1 {
  transform: rotate(45deg);
  top: 16px;
  left: -1px;
  position: absolute; }

.mobile-nav-button .mobile-nav-button__line--2 {
  display: none; }

.mobile-nav-button .mobile-nav-button__line--3 {
  transform: rotate(135deg);
  top: 16px;
  left: -1px;
  position: absolute; }

.mobile-menu {
  display: none;
  /*block;       */
  width: 100%;
  height: 80vh;
  background-color: #27a5e5;
  opacity: 0.7;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -100;
  text-align: center;
  padding: 5vh 0px 0px 0px; }

.mobile-menu .menu1, .mobile-menu .menu2 {
  font-size: 100%;
  text-align: center;
  color: #99d4f3;
  display: block;
  padding: 0px;
  margin: 0px auto 0px auto;
  letter-spacing: 0.06ex;
  background-color: #1788c2;
  font-size: 18px;
  letter-spacing: 0.08ex;
  width: 40vw;
  max-width: 1200px; }

.mobile-menu .menu1 {
  padding: 18px 10px 0px 10px;
  border-top: 1px solid #27a5e5;
  border-right: 1px solid #27a5e5;
  border-left: 1px solid #27a5e5; }

.mobile-menu .menu2 {
  padding: 0px 10px 18px 10px;
  border-right: 1px solid #27a5e5;
  border-bottom: 1px solid #27a5e5;
  border-left: 1px solid #27a5e5; }

/* menu items for mobile: m0 m1 m1inner */
.mobile-menu ul {
  position: relative;
  padding: 16px;
  text-align: left;
  display: block; }

.mobile-menu ul li {
  list-style: none;
  text-align: center;
  font-weight: normal;
  padding: 4px; }

.mobile-menu a {
  text-decoration: none;
  color: white; }

.mobile-menu a:hover {
  text-decoration: none;
  color: black; }

.mobile-menu img {
  position: absolute;
  width: 150px;
  display: block;
  left: 50%;
  top: 3rem;
  transform: translatex(-50%);
  padding: 0;
  text-align: center; }

.mobile-menu--open {
  left: 0;
  /*right: 0; */
  opacity: 0.9; }

/* ********************************************* */
/* end mobile menu                               */
/* ********************************************* */