/* GLOBAL SETUP */

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	line-height: 1.6;
  font-weight: 500;
	padding: 0;
  margin: 0;
	background-color: #fffcc0;
	color: #000;
}

div.content {
  width: 80%;
  max-width: 900px;
}

/* TEXT FORMATTING */

p {
	margin: 0 0 18px 0;
}
p:last-child {
	margin: 0;
}

.b {
  font-weight: 800;
}
.bred {
  font-weight: 800;
  color: #711;
}
.gray {
  color: #999;
}

a {
	color: #711;
	text-decoration: none;
	border-bottom: 1px dotted #711;
}
a.button {
	display: inline-block;
	background-color: #711;
	color: #fff;
	font-weight: 800;
	padding: 9px 24px;
	border-radius: 5px;
}
img.hr { display: block; padding: 9px 0; }
}

h1 {
	font-family: 'Lobster', cursive;
	font-size: 36px;
	color: #711;
	margin: 0 0 -3px 0;
	word-spacing: 2px;
}
h2 {
	font-family: 'Lobster', cursive;
	font-size: 36px;
	color: #711;
	word-spacing: 2px;
	margin: 25px 0 20px 7vw;
  line-height: 1.1;
}
h3 {
	font-family: "Lobster", cursive;
	font-size: 24px;
	line-height: 1;
	color: #711;
	word-spacing: 2px;
	margin: 36px 0 15px 0;
}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/* ************************************** JUMBO ************************************** */

header {
	height: 69vh;
	width: 100%;
  margin: 0;
  background: url(hero2.jpg);
	background-position: 15% 35%;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

header div.greeter {
	position: absolute;
	top: 2%;
	width: 100%;
	margin: 0; 
	text-align: center;
}
header div.greeter img {
  display: inline-block;
  width: 120px;
  padding-top: 12px;
  vertical-align: middle;
}
header div.greeter div.caption {
  display: inline-block;
  vertical-align: middle;
}
header div.greeter div.caption h1 {
  font-family: 'Lobster', cursive;
	font-size: 36px;
	color: #711;
	margin: 0 0 -3px 0;
	word-spacing: 2px;
  line-height: 1.2;
  text-shadow: 0 0 18px #e9e6e1, 0 0 36px #e9e6e1;
}
header div.greeter div.caption h2 {
  font-family: 'Montserrat', sans-serif;
	font-size: 16px;
  color: #711;
  margin: 12px 0 0 0;
  font-weight: 800;
  font-size: 14px;
  text-shadow: 0 0 9px #e9e6e1, 0 0 15px #e9e6e1;
}

/* ************************************** RED STRIPE ************************************** */

div.redstripe {
  width: 100%;
  padding: 2% 4% 3% 4%;
  background-color: #711;
  color: #fffcc0;
  font-family: 'Lobster', cursive;
	margin: 0;
	word-spacing: 2px;
  text-align: center;
  line-height: 1.2;
}
div.redstripe h2 { color: #fffcc0; font-size: 48px; font-weight: 400; margin: 0; }
div.redstripe h3 { color: #fffcc0; font-size: 36px; font-weight: 400; margin: 5px 0 0 0; }

/* ************************************** DEAR FRIEND ************************************** */

div.dearfriend {
  width: 100%;
  background-color: #fffcc0;
  padding: 4%;
}
div.dearfriend img {
  display: inline-block;
  width: 28%;
  vertical-align: top;
  border-radius: 6px;
}
div.dearfriend img.logo {
  width: 180px;
  float: right;
}
div.dearfriend div.text {
  display: inline-block;
  width: 72%;
  padding-left: 4vw;
}
div.dearfriend div.text p.t1 {
  font-family: "Lobster", cursive;
	font-size: 34px;
	line-height: 1.2;
	color: #711;
	word-spacing: 2px;
	margin: 0;
}
div.dearfriend div.text p.t2 { color: #711; font-size: 20px; font-weight: 800; margin: 15px 0 30px 0; }
div.dearfriend div.text p.t3 { font-size: 18px; }

/* ************************************** VIDEO ************************************** */

div.video {
  width: 100%;
  background-color: #c3cbcd;
  padding: 5% 11% 8% 11%;
  text-align: center;
}

div.video h2 {
	font-family: 'Lobster', cursive;
	font-size: 36px;
	color: #711;
	word-spacing: 2px;
  margin: 0 0 30px 0;
}
div.video h2.second { margin-top: 7vw; }



/* ************************************** RESULTS ************************************** */

div.results {
  width: 100%;
  padding: 4%;
  margin: 0;
  background: url(bg1.jpg);
	background-size: cover;
	background-position: center;
}
div.results div.sheet {
  width: 85%;
  margin-left: 15%;
  background-color: #fff;
  border-radius: 6px;
  padding: 2% 3%;
}
div.results div.sheet1 { font-size: 16px; margin-bottom: 4%; }
div.results div.sheet2 { font-size: 22px; margin-bottom: 4%; }
div.results div.sheet3 { font-size: 16px; }

/* ************************************** MEETINGS ************************************** */

div.meetings {
  width: 100%;
  background-color: #fffcc0;
  padding: 4%;
  text-align: center;
}
div.meetings h2 {
	font-family: 'Lobster', cursive;
	font-size: 36px;
	color: #711;
	word-spacing: 2px;
  margin: 0;
}
div.meetings div.sheet {
  background-color: #fff;
  border-radius: 6px;
  width: 100%;
  margin-top: 4%;
}
div.meetings div.sheet div.sheetbody { padding: 3vw; text-align: left; }
div.meetings div.sheet div.sheetbody div.textblock { min-height: 320px; }
  

div.meetings div.sheet div.head {
  width: 100%;
  background-color: #711;
  font-family: "Lobster", cursive;
	font-size: 32px;
	line-height: 1;
	color: #fffcc0;
	word-spacing: 2px;
  text-align: center;
  padding: 1vw 3vw 1vw 3vw;
  border-radius: 6px 6px 0 0;
  xtext-decoration: underline;
}
div.meetings div.sheetleft { display: inline-block; vertical-align: top; width: 48%; margin-right: 4%; }
div.meetings div.sheetright { display: inline-block; vertical-align: top; width: 48%; }
div.meetings div.sheetcenter { display: block; width: 60%; margin-left: auto; margin-right: auto; }
div.meetings div.sheetcenter div.sheetbody { text-align: center; }
div.sheetbody a {
  display: inline-block;
  margin-top: 2vw;
	background-color: #d00;
	color: #fff;
	font-weight: 800;
  line-height: 1.4;
	padding: 12px 24px;
	border-radius: 6px;
  text-align: center;
  box-shadow: 0 0 27px #baa;
  transition: all 0.3s ease;
  border: none;
}
div.sheetbody a:hover { box-shadow: 0 0 36px #655; background-color: #f00; transition: all 0.3s ease; }
div.sheetbody h2 {
  font-family: 'Lobster', cursive;
	font-size: 36px;
	color: #711;
	word-spacing: 2px;
  margin: -1vw 0 1vw 0;
  text-align: center;
}
div.sheetbody p { margin-bottom: 12px; }

div.sheetbody div.note { padding-top: 3vw; font-size: 14px; }

table.meetlist {
  width: 100%;
  border: 0;
  border-collapse: collapse;
}
table.meetlist td { padding: 9px 18px 9px 9px; border-bottom: 1px solid #edb; }
table.meetlist tr:first-child td { border-top: 1px solid #edb; }
table.meetlist td:first-child { font-weight: bold; }

div.meetsmobile { display: none; }
div.meetsmobile div.meethead {
  font-weight: 800;
}
div.meetsmobile div.meettopic {
  margin-bottom: 3vw;
}


/* ************************************** NATALI ************************************** */

div.natali {
  width: 100%;
  padding: 4%;
  margin: 0;
  background: url(bg2.jpg);
	background-size: cover;
	background-position: center;
}
div.natali h2 {
  font-family: 'Lobster', cursive;
	font-size: 36px;
	color: #711;
	word-spacing: 2px;
  margin: 0;
  text-align: center;
  text-shadow: 0 0 24px #dcc;
}
div.natali div.sheet {
  width: 85%;
  margin: 2% 0 0 15%;
  background-color: #fff;
  border-radius: 6px;
  padding: 3%;
}
div.natali div.sheet img {
  position: relative;
  width: 35%;
  left: -20%;
  vertical-align: top;
  border-radius: 6px;
}
div.natali div.sheet div.text {
  display: inline-block;
  width: 75%;
  margin-left: -16%;
  vertical-align: top;
  line-height: 1.9;
  font-size: 18px;
}
div.natali div.sheet div.text h3 {
	font-family: "Lobster", cursive;
	font-size: 24px;
	line-height: 1;
	color: #711;
	word-spacing: 2px;
	margin: 0 0 24px 0;
}
/* div.natali a.button {
  display: inline-block;
  xwidth: 100%;
  margin-top: 2vw;
	background-color: #711;
	color: #fff;
  font-size: 16px;
	font-weight: 800;
	padding: 12px 24px;
	border-radius: 6px;
  text-align: center;
} */
div.natali a.button {
  display: inline-block;
  margin-top: 2vw;
	background-color: #d00;
	color: #fff;
	font-weight: 800;
  line-height: 1.4;
	padding: 12px 24px;
	border-radius: 6px;
  text-align: center;
  box-shadow: 0 0 27px #baa;
  transition: all 0.3s ease;
  border: none;
}
div.sheetbody a:hover { box-shadow: 0 0 36px #655; background-color: #f00; transition: all 0.3s ease; }


/* ************************************** PHOTOS ************************************** */

div.photos {
  width: 100%;
  background-color: #c3cbcd;
  padding: 4.5% 3%;
  text-align: center;
}
div.photos h2 {
	font-family: 'Lobster', cursive;
	font-size: 36px;
	color: #711;
	word-spacing: 2px;
  margin: 0 0 1.5vw 0;
}

div.photos div.video {
  display: inline-block;
  width: 50%;
  margin: 0;
  padding: 1.5vw 1.5vw 4vw 1.5vw;
}


div.photos div.gal-flexrow {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
}
div.photos div.gal-flexrow img {
	height: 35vw;
	object-fit: cover;
	object-position: 50% 30%;
	flex-grow: 1;
	flex-shrink: 1;
	line-height: 0;
	box-sizing: border-box;
	padding: 1.5vw;
	overflow: hidden;
}
div.photos div.high0 img { height: 20vw; }
div.photos div.high1 img { height: 25vw; }
div.photos div.high2 img { height: 30vw; } /* default */
div.photos div.high3 img { height: 35vw; }
div.photos div.high4 img { height: 40vw; }
div.photos div.high5 img { height: 45vw; }
div.photos div.high6 img { height: 50vw; }

/* ************************************** CONTACTS ************************************** */

div.contacts {
  width: 100%;
  background-color: #fffcc0;
  padding: 4%;
  text-align: center;
  font-size: 18px;
  line-height: 2;
}
div.contacts h2 {
	font-family: 'Lobster', cursive;
	font-size: 36px;
	color: #711;
	word-spacing: 2px;
  margin: 0 0 2vw 0;
}



















/* ********************* MEDIA: PHONE VERTICAL ************************ */
@media only screen and (max-width: 600px) {
  body { line-height: 1.5; }
  
  header div.greeter div.caption { padding: 0 5%; }
  header div.greeter div.caption h1 { font-size: 28px; }
  header div.greeter div.caption p { font-size: 18px; line-height: 1.1; }
  
  div.redstripe { padding: 6vw; }
  div.redstripe span.line1 { font-size: 38px; }
  div.redstripe span.line2 { font-size: 26px; }
  
  div.dearfriend { padding: 6vw; }
  div.dearfriend img { width: 100%; }
  div.dearfriend img.logo { float: none; display: block; margin: 5vw auto 5vw auto; }
  div.dearfriend div.text { width: 100%; padding-left: 0; margin-top: 4%; }
  div.dearfriend div.text p.t1 { font-size: 28px; text-align: center; }
  div.dearfriend div.text p.t2 { text-align: center; }
  div.dearfriend div.text p.t3 { font-size: 16px; }
  
  div.video { padding: 4% 4% 8% 4%; }
  div.video h2 { font-size: 30px; margin: 5vw 0; }
  
  div.results { padding: 6vw; }
  div.results div.sheet { width: 100%; margin-left: 0; padding: 6vw; }
  div.results div.sheet1 { font-size: 12px; }
  div.results div.sheet2 { font-size: 16px; }
  div.results div.sheet3 { font-size: 12px; }
  
  
  div.meetings { padding: 6vw; }
  div.meetings h2 { font-size: 30px; }
  div.meetings div.sheetleft { width: 100%; margin-right: 0; }
  div.meetings div.sheetright { width: 100%; }
  div.meetings div.sheetcenter { width: 100%; }
  div.meetings div.sheet { margin-top: 6vw; }
  div.meetings div.sheet div.head { font-size: 22px; padding: 4vw 2vw; }
  div.meetings div.sheet div.sheetbody { padding: 6vw; }
  div.sheetbody div.note { padding-top: 5vw; font-size: 12px; }
  div.sheetbody a { font-size: 14px; }
  div.sheetbody h2 { margin: 0 0 4vw 0; }
  div.sheetbody a { margin-top: 4vw; }
  table.meetlist { display: none; }
  div.meetsmobile { display: block; }
  
  div.natali { padding: 6vw; }
  div.natali h2 { margin: 0 0 4vw 0; }
  div.natali div.sheet { width: 100%; margin: 2% 0 0 0; padding: 6vw; }
  div.natali div.sheet img { position: static; width: 100%; }
  div.natali div.sheet div.text h3 { margin-top: 24px; }
  div.natali div.sheet div.text { display: block; width: 100%; margin: 0; line-height: 1.6; font-size: 16px; }
  div.natali a.button { font-size: 14px; margin-top: 7vw; }
  
  div.photos { padding: 4%; }
  div.photos h2 { margin: 0 0 4vw 0; }
  div.photos div.video { width: 100%; }
  
  div.contacts { padding: 10vw 6vw 12vw 6vw; font-size: 16px; line-height: 1.6; }
  div.contacts h2 { margin: 0 0 8vw 0; }
}

/* *************** MEDIA: PHONE HORIZ / TABLET VERT ****************** */
@media only screen and (min-width:601px) and (max-width:900px) {
  header div.greeter div.caption h1 { font-size: 28px; }
   
  div.dearfriend img { display: none; }
  div.dearfriend div.text { width: 100%; }
   
  div.results div.sheet1 { font-size: 12px; }
  div.results div.sheet2 { font-size: 16px; }
  div.results div.sheet3 { font-size: 12px; }
  
  table.meetlist td { font-size: 14px; }
  div.sheetbody div.note { font-size: 12px; }
  div.meetings div.sheet div.head { font-size: 24px; }
  div.meetings div.sheet div.sheetbody div.textblock { min-height: 420px; }
   
  
}

/* *************** MEDIA: PHONE HORIZ / TABLET VERT ****************** */
@media only screen and (min-width:901px) and (max-width:1023px) {
  div.meetings div.sheet div.sheetbody div.textblock { min-height: 400px; }
}