/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal; }

ul {
  list-style: none; }

button,
input,
select,
textarea {
  margin: 0; }

html {
  box-sizing: border-box; }

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

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

iframe {
  border: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0;
  text-align: left; }

body {
  background-color: #1b1b1b;
  font-family: 'Gothic A1', sans-serif;
  }

p {
  padding-bottom: 1rem;
}

hr {
  border: 1px solid;
  color: #dcdcdc;

}
/* -------------- */
/*     FONTS      */
/* -------------- */
/*@font-face {
  font-family: 'FuturaPTBook';
  src:  url('fonts/FuturaPTBook.woff2') format('woff2');
}
@font-face {
  font-family: 'FuturaPTBook';
  src:  url('fonts/FuturaPTBookOblique.woff2') format('woff2');
  font-style: oblique;
}*/
@font-face {
  font-family: 'FuturaPTCondExtraBold';
  src:  url('fonts/FuturaPTCondExtraBold.woff2') format('woff2');
}/*
@font-face {
  font-family: 'FuturaPTLightOblique';
  src:  url('fonts/FuturaPTLightOblique.woff2') format('woff2');
  font-style: oblique;
}*/

/* -------------- */
/* PAGE STRUCTURE */
/* -------------- */
.container {
  margin: 0 auto;
  width: 1200px;
  overflow: auto;
  position: relative;
}
@media only screen and (max-width: 1199px) {
  .container {width:100%; padding: 0 1rem;}
}

/* ---------- */
/* NAV HEADER */
/* ---------- */
.header {
  margin: 1rem 0;
  overflow: auto;
}
/* BOX LOGO */
.box_logo {
  float: left;
  font-family: 'Gothic A1', sans-serif;
  font-size: 2.5rem;
}
.box_logo a {
  text-decoration: none;
  color: #359378;
}
.box_logo a:hover span {
  display: none;
}
.box_logo a:hover:before {content:"■■"}


/* ----------------- */
/*    DESKTOP NAV    */
/* ----------------- */
nav.desktop {
  float: right;
  font-size: 1.5rem;
  font-family: 'Open Sans Condensed', sans-serif;
  font-style: italic;
}
@media only screen and (max-width: 1199px) {
  nav {display: none;}
}
nav a {
  text-decoration: none;
  color: #444;
}
nav a:hover {
  border-bottom: 5px solid #359378;
  color: #dcdcdc;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li {
  padding-right: 1.5rem;
  display: inline;
}
.last {
  padding-right: 0;
}

/* ---------------- */
/*    MOBILE NAV    */
/* ---------------- */
#nav {
  display: inline;
}
@media only screen and (min-width: 1199px) {
  #nav {display: none;}
}
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1b1b1b;
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  width: 100%;
  text-align: center;
  margin-top: 4rem;
  z-index: 99;
  overflow: auto;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-family: 'FuturaPTCondExtraBold', 'Gothic A1', sans-serif;
  font-size: 10vw;
  color: #dcdcdc;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #359378;
  text-decoration: none;
  border-bottom: none;
}

.overlay .closebtn {
  position: absolute;
  top: 0;
  right: 2rem;
  font-size: 5rem;
  padding:0;
  color: #359378;
}
.overlay .closebtn:hover {
  color: #dcdcdc;
}

@media screen and (max-height: 450px) {
  .overlay {
    overflow-y: auto;
  }
  .overlay a {
    font-size: 20px
  }
  .overlay .closebtn {
    font-size: 40px;
    top: .5rem;
    right: 1rem;
  }
}

.hamburger {
  position: absolute;
  font-family: 'Gothic A1', sans-serif;
  font-weight: bold;
  top: .5rem;
  right: 2rem;
  font-size: 3rem;
  cursor: pointer;
  color: #359378;
}
.hamburger:hover {
  color: #dcdcdc;
}

.hide {
  display: none;
}

/* ---------- */
/* SPAN TEXTS */
/* ---------- */

span.steven-denler {
  font-family: 'FuturaPTCondExtraBold', 'Gothic A1', sans-serif;
  font-size: 215px;
  letter-spacing: -4px;
  line-height: .8;
  color: #dcdcdc;
}
@media only screen and (max-width: 1199px) {
  span.steven-denler {font-size: 17vw; letter-spacing: -2px;}
}
/*@media only screen and (max-width: 600px) {
  span.steven-denler {font-size: 76px; letter-spacing: -2px;}
}*/

span.does {
  font-family: 'FuturaPTCondExtraBold', 'Gothic A1', sans-serif;
  font-size: 175px;
  letter-spacing: -4px;
  color: #359378;
  line-height: .8;
}
@media only screen and (max-width: 1199px) {
  span.does {font-size: 14vw; letter-spacing: -2px;}
}

span.sub-text {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 32px;
  color: #444;
  line-height: .9;
  font-style: italic;
}
@media only screen and (max-width: 1199px) {
  span.sub-text {font-size: 2.7vw; display: block; line-height: 1.2;}
}

.sec_title {
  font-family: 'FuturaPTCondExtraBold', 'Gothic A1', sans-serif;
  font-size: 128px;
  letter-spacing: -4px;
}
@media only screen and (max-width: 1199px) {
  .sec_title {font-size: 15vw;}
}

.sec_title span.cards {
  color: #1b1b1b;
  line-height: 2;
}

span.love {
  font-family: 'FuturaPTCondExtraBold', 'Gothic A1', sans-serif;
  font-size: 96px;
  letter-spacing: -4px;
  color: #000;
  line-height: .8;
  padding-top: 50px;
}
@media only screen and (max-width: 1199px) {
  span.love {font-size: 72px;}
}
@supports (-webkit-text-stroke: 4px) {
span.outline {
  color: transparent;
  -webkit-text-stroke-width: 4px;
  -webkit-text-stroke-color: #000;
}
}

span.footer_boxes {
  font-family: 'Gothic A1', sans-serif;
  font-size: 40px;
  color: #000;
}

/* ----------- */
/* MAIN BANNER */
/* ----------- */
.main_banner {
  padding: 2rem 0;
  position: relative;
}
@media only screen and (max-width: 1199px) {
  .main_banner {padding: 2rem 0 .5rem;}
}

.banner-img__container {
  overflow: hidden;
}

.steve_img {
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(../img/steve_img.png);
  width: 665px;
  height: 665px;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (max-width: 1199px) {
  .steve_img {
    width: 58vw;
    height: 58vw;
    right: -4vw;
  }
}


/* ---------- */
/* THE FOOTER */
/* ---------- */
.footer {
  padding: 6rem 0 5rem;
  overflow: auto;
}

.footer .social_nav {
  text-align: center;
  font-size: 3rem;
}

.footer .social_nav a {
  text-decoration: none;
  color: #000;
}

.footer .social_nav a:hover {
  color: #dcdcdc;
}

.footer .social_nav i {
  font-size: 3rem;
  margin-top: 25px;
}



/* ---------- */
/* FLIP CARDS */
/* ---------- */
#flip-card_container {
  width: 100%;
  background-color: #dcdcdc;
  padding: 0 0 3rem;
  overflow: auto;
}
.h-scroll_container {
  width:100%;
  overflow-x: scroll;
  overflow-y: hidden;
}
.h-scroll {
  white-space: nowrap;
  overflow-y: hidden;
  height: 498px;
  width: 2970px;
  padding: 20px 0;
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  display: inline-block;
  background-color: transparent;
  width: 300px;
  height: 450px;
  border: none;
  perspective: 2000px; /* Remove this if you don't want the 3D effect */
  float: left;
  margin: 0 15px 30px;
}
/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  -webkit-transition: 0.6s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  white-space: normal;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #fff;
  color: black;
}
/* Style the back side */
.flip-card-back {
  padding: 0;
  color: white;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.card-content {
  padding: 15px;
  hyphens: manual;
}
.dearheart {
  background-color: #7cc576;
}
.dearheart a {
  color: #7cc576;
}
.code {
  background-color: #7da7d9;
}
.code a {
  color: #7da7d9;
}
.counseling {
  background-color: #7accc8;
}
.counseling a {
  color: #7accc8;
}
.dirt {
  background-color: #f69679;
}
.dirt a {
  color: #f69679;
}
.tot {
  background-color: #ffdc73;
}
.tot a {
  color: #ffdc73;
}
.theden {
  background-color: #a67c52;
}
.theden a {
  color: #a67c52;
}
.travel {
  background-color: #f26d7d;
}
.travel a {
  color: #f26d7d;
}
.video {
  background-color: #c2e93c;
}
.video a {
  color: #c2e93c;
}
.online {
  background-color: #a186be;
}
.online a {
  color: #a186be;
}



/* ---------- */
/*    ABOUT   */
/* ---------- */

nav.about {
  padding-bottom: 5px;
}

nav.about a:hover {
  border-bottom-color: #1b1b1b;
}

nav.about a.active_about {
  color: #dcdcdc;
  border-bottom: 5px solid #1b1b1b;
}

.about__lefttop {
  display: block;
  float: left;
  width: 50%;
  background-color: #1b1b1b;
}
@media only screen and (max-width: 1199px) {
  .about__lefttop {width: 100%; padding: 0 1rem;}
}

.about__container-left {
  width: 600px;
  float: right;
  overflow: auto;
}
@media only screen and (max-width: 1199px) {
  .about__container-left {float: none; width: auto;}
}

.about__content-left {
  width: auto;
  text-align: center;
  padding-top: 5rem;
}
@media only screen and (max-width: 1199px) {
  .about__content-left {padding-top:0;}
}

.about__rightbottom {
  display: block;
  float: left;
  width: 50%;
  background-color: #359378;
}
@media only screen and (max-width: 1199px) {
  .about__rightbottom {width: 100%;}
}

.about__container-right {
  width: 600px;
  float: left;
  overflow: auto;
}
@media only screen and (max-width: 1199px) {
  .about__container-right   {float: none; width: auto;}
}

.about__content-right {
  width: auto;
  text-align: left;
  padding: 3rem 0 0 1rem;
}
@media only screen and (max-width: 1199px) {
  .about__content-right {padding: 3rem 1rem 0;}
}

.about__content-right p {
  font-family: 'Gothic A1', sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: #1b1b1b;
  padding: 0 0 1rem;
}
@media only screen and (max-width: 1199px) {
  span.about__content-right p {font-size: 3vw;}
}

.about__content-right p.first {
  margin-top: 3rem;
}


.about__content-right span.hello {
  font-family: 'FuturaPTCondExtraBold', 'Gothic A1', sans-serif;
  font-size: 215px;
  /*font-weight: 900;*/
  letter-spacing: -4px;
  line-height: .8;
  color: #dcdcdc;
  padding-bottom: 3rem;
}
@media only screen and (max-width: 1199px) {
  .about__content-right span.hello {font-size: 25vw; letter-spacing: -2px;}
}


/* -------------------- */
/*    THEOLOGY ON TAP   */
/* -------------------- */
.tot_title {
  font-family: 'FuturaPTCondExtraBold', 'Gothic A1', sans-serif;
  font-size: 72px;
  letter-spacing: -4px;
  color: #359378;
}
@media only screen and (max-width: 1199px) {
  .tot_title {line-height: .9;}
}

.tots p {
  color: #dcdcdc;
  font-size: 1.5rem;
}

span.strikethrough {
  text-decoration: line-through;
}

.tots p.tot_topic {
  color: #444;
  font-style: italic;
  font-size: 1.2rem;
}

.tot-page-title {
  text-align: center;
}

/* ---------- */
/*    VIDEO   */
/* ---------- */
.video {
  background-color: #c2e93c !important;
}

.vid-title {
  text-align: center;
  font-family: 'FuturaPTCondExtraBold', 'Gothic A1', sans-serif;
  font-size: 10rem;
  letter-spacing: -4px;
  line-height: .8;
  color: #dcdcdc;
  padding-bottom: 3rem;
  display: block;
}

.video-title {
  font-family: 'FuturaPTCondExtraBold', 'Gothic A1', sans-serif;
  font-size: 4rem;
  letter-spacing: -4px;
  line-height: .8;
  color: #359378;
  padding-bottom: 3rem;
}

.white-bar {
  background-color: #fff;
  width: 100%;
}
.video-margins {
  padding: 30px 0;
  min-height: 286px;
  overflow: auto;
}

.video-l {
width: 340px;
float: left;
}
@media only screen and (max-width: 1199px) {
  .video-l {width: 100%;}
}

.video-r {
margin-left: 30px;
width:590px;
float: right;
}
@media only screen and (max-width: 1199px) {
  .video-r {width: 100%; padding-top: 1rem;}
}

.video-r p {
  color: #dcdcdc;
  font-size: 1.5rem;
}

.video-link {
  width:340px;
  height:226px;
  position: relative;
  float: left;
}

.video-link img {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.video-link-text {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.video-link-text span {
  font-family: 'FuturaPTCondExtraBold', 'Gothic A1', sans-serif;
  font-size: 2rem;
  color: #359378;
}

.video-link:hover img {
  opacity: 0.3;
}

.video-link:hover .video-link-text {
  opacity: 1;
}

.podcast_nav {
  font-size: 2rem;
}

.podcast_nav a {
  text-decoration: none;
  color: #dcdcdc;
}

.podcast_nav a:hover {
  color: #359378;
}

.podcast_nav i {
  font-size: 2rem;
  margin-top: 0px;
}



/* TRAVELS */
.travel_header {
  z-index: 1000;
}
#count {
    font-size: 3rem;
    color: #ededed;
    text-align: center;
    font-weight: 800;
    padding-top: 0.5rem;
  }

#map {
  padding: 0;
  margin-top: -100px;
  position: relative;
  width: 100%;
  padding-top: 55%;
}
@media only screen and (max-width: 1199px) {
  #map {margin: 0 0 -1px;}
}
svg {
  margin: 0;
  padding:0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#country-list-container {
  background-color: #dcdcdc;
  width: 100%;
  padding: 30px;
}
#country-list {
  display: table;
  margin: 0 auto;
  font-size: 1.5rem;
}
#country-list h1 {
    font-family: 'FuturaPTCondExtraBold', 'Gothic A1', sans-serif;
    font-size: 72px;
    letter-spacing: -4px;
    color: #359378;
    text-transform: uppercase;
  }
  @media only screen and (max-width: 1199px) {
    #country-list h1 {font-size: 10vw;}
  }

/* BUTTON */
.btn {
  display: inline-block;
  background-color: #fff;
  border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
  box-shadow: 0px 0px 5px 0px #000000;
   -webkit-box-shadow: 0px 0px 5px 0px #000000;
   -moz-box-shadow: 0px 0px 5px 0px #000000;
  padding: 10px;
  width: 100%;
  text-align: center;
  margin-top: 7px;
}
.btn:hover {
  background-color: #ededed;
  cursor: pointer;
}
.btn:active {
  transform: translateY(1px);
  filter: saturate(150%);
}
a.btn {
  text-decoration: none;
  cursor: pointer;
}
.go {
  position: absolute;
  bottom:0;
  margin: 0 100px 30px;
  width: 100px;
  font-family: 'FuturaPTCondExtraBold', 'Gothic A1', sans-serif;
}
i {
  font-size: 1.2rem;
}

/* -------------------- */
/*       BIRTHDAY       */
/* -------------------- */
.menu-category_title {
  font-family: 'FuturaPTCondExtraBold', 'Gothic A1', sans-serif;
  font-size: 4rem;
  letter-spacing: -4px;
  line-height: .8;
  color: #359378;
  padding-bottom: 3rem;
}

.menu-drink_title {
  font-family: 'FuturaPTCondExtraBold', 'Gothic A1', sans-serif;
  font-size: 2.5rem;
  letter-spacing: -1px;
  line-height: .8;
  color: #F5F0BF;
  padding-bottom: 3rem;
}

.menu i {
  color: #dcdcdc;
  font-size: 2rem;
}

.menu p {
  color: #dcdcdc;
  font-size: 1.5rem;
}

.menu p.description {
  color: #444;
  font-style: italic;
  font-size: 1.2rem;
  margin-top: -1rem;
}

.menu-page-title {
  text-align: center;
  padding-top: 20px;
}

@media only screen and (min-width: 1199px) {
  .menu-page-title img {width: 500px;}
}

.menu ol {
  color: #dcdcdc;
  font-size: 1.5rem;
  list-style-type: square !important;
}

#venmo {
  border: solid 3px #dcdcdc;
  margin: 20px 0 0 0;
  padding: 10px;
}

#venmo span {
  color:#dcdcdc;
  font-size: 1.5rem;
  font-weight: bold;
}