/*
Theme name: Goodwill NJ Kiosk
*/
/* CSS Document */
/*fonts */
@import url("https://fonts.googleapis.com/css?family=Comfortaa&display=swap");
/* Main Layout */
body {
  font-family: 'Comfortaa', sans-serif;
}

.align-content-center {
  align-items: center;
}

.employee {
  background-image: url(images/employees-at-kiosk.png);
  height: calc(100vh - 166px);
  background-size: cover;
  background-position: center;
  border: 15px solid #0053a0;
  text-align: center;
  padding-top: calc(100vh - 400px);
}

.logged-in .employee {
  height: calc(100vh - 198px);
}

.customer {
  background-image: url(images/customer-at-rack.png);
  height: calc(100vh - 166px);
  background-size: cover;
  background-position: center;
  border: 15px solid #7ac142;
  text-align: center;
  padding-top: calc(100vh - 400px);
}

.logged-in .customer {
  height: calc(100vh - 198px);
}

.btn {
  color: #fff;
  font-size: 40px;
  text-transform: uppercase;
  border-radius: 10px;
  border: 3px solid #fff;
  width: 60%;
  padding: 28px 25px 25px;
  /* .page-template-page-employees & {width: 85%; margin-top:25px;} */
}

.btn.btn-customer, .btn.btn-employee:hover {
  background-color: #7ac142;
}

.btn.btn-employee, .btn.btn-customer:hover {
  background-color: #0053a0;
}

.btn:hover {
  color: #fff;
}

.page-template-page-customer .btn, .page-template-page-employees .btn, .page-template-default .btn {
  width: 100%;
  margin-top: 20px;
  padding: 23px 15px 25px;
  font-size: 24px;
  height: 84px;
}

.btn.two-line {
  padding: 5px 15px 3px;
}

.heroback {
  min-height: calc(100vh - 166px);
  background-size: cover;
  background-repeat: no-repeat;
}

.logged-in .heroback {
  min-height: calc(100vh - 198px);
}

.heroback i {
  color: #fff;
}

.page-template-default .heroback .row {
  align-content: center;
  align-items: center;
  min-height: calc(100vh - 198px);
}

.page-template-default .heroback .row i {
  font-size: 8.5rem;
}

.page-template-page-employees .heroback .row {
  align-content: center;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 50px;
  min-height: calc(33vh - 63px);
}

.page-template-page-employees .heroback .row i {
  font-size: 8.5rem;
}

.page-template-page-customer .heroback .row {
  align-content: center;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 50px;
  min-height: calc(33vh - 63px);
}

.page-template-page-customer .heroback .row i {
  font-size: 8.5rem;
}

/* Links */
a {
  color: #000;
}

a:hover {
  color: #8c4e8f;
  text-decoration: none;
}

/* Text Styles */
h1 {
  font-size: 3.75rem;
  color: #0053a0;
  font-weight: 400;
  letter-spacing: 2px;
}

p {
  margin-bottom: 20px;
}

.accent {
  color: #8c4e8f !important;
}

.lower-case {
  text-transform: lowercase;
}

/* Navigation Adjustments*/
nav.navbar.navbar-expand-md {
  padding-right: 0px;
}

.nav-fill .nav-item:last-child .nav-link {
  margin-right: -15px;
}

.navbar {
  padding: .5rem 0;
}

.navbar-toggler i {
  color: #fff;
}

.navbar-toggler {
  border-radius: 0;
  border: 2px solid #fff;
  background-color: #797777;
}

.nav-link:hover {
  text-decoration: underline;
  background: #fd3329;
  color: #fff;
}

.dropdown-item {
  padding: .25rem .2rem;
}

.dropdown-menu {
  border-radius: 0;
}

.dropdown-item {
  display: block;
  padding: .5rem 1rem;
  color: #000;
  font-weight: 600;
  font-size: 14px;
}

.dropdown-item:hover {
  text-decoration: none;
  background-color: #ffd6d4;
}

.navbar-toggler {
  border-radius: 0;
  border: 2px solid #fff !important;
  background-color: #797777;
}

/* Misc */
.clear {
  clear: both;
}

.l {
  float: left;
}

.r {
  float: right;
}

.txt-r {
  text-align: right;
}

.txt-c {
  text-align: center;
}

.mb10 {
  margin-bottom: 10px;
}

.mb25 {
  margin-bottom: 25px;
}

.mr5 {
  margin-right: 5px;
}

.mr10 {
  margin-right: 10px;
}

.mr20 {
  margin-right: 20px;
}

.mr40 {
  margin-right: 40px;
}

.mr50 {
  margin-right: 50px;
}

.ml5 {
  margin-left: 5px;
}

.ml10 {
  margin-left: 10px;
}

.ml20 {
  margin-left: 20px;
}

.ml40 {
  margin-left: 40px;
}

.ml50 {
  margin-left: 50px;
}

.mt5 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt25 {
  margin-top: 25px;
}

.mt35 {
  margin-top: 37px;
}

.mt50 {
  margin-top: 50px;
}

.pr5 {
  padding-right: 5px;
}

.pr10 {
  padding-right: 10px;
}

.pr20 {
  padding-right: 20px;
}

.pr30 {
  padding-right: 30px;
}

.pr55 {
  padding-right: 55px;
}

.pt5 {
  padding-top: 5px;
}

.pt10 {
  padding-top: 10px;
}

.pt15 {
  padding-top: 15px;
}

.pt20 {
  padding-top: 20px;
}

.pb5 {
  padding-bottom: 5px;
}

.pb10 {
  padding-bottom: 10px;
}

.pb15 {
  padding-bottom: 15px;
}

.pb20 {
  padding-bottom: 20px;
}

.pl5 {
  padding-left: 5px;
}

.pl10 {
  padding-left: 10px;
}

.pl20 {
  padding-left: 20px;
}

.pl30 {
  padding-left: 30px;
}

/* Begin Default Wordpress WYSIWYG Editor Styles */
.entry-content img {
  margin: 0 0 1.5em 0;
}

.alignleft, img.alignleft {
  margin-right: 1.5em;
  display: inline;
  float: left;
}

.alignright, img.alignright {
  margin-left: 1.5em;
  display: inline;
  float: right;
}

.aligncenter, img.aligncenter {
  margin-right: auto;
  margin-left: auto;
  display: block;
  clear: both;
}

.alignnone, img.alignnone {
  /* not sure about this one */
}

.wp-caption {
  margin-bottom: 1.5em;
  text-align: center;
  padding-top: 5px;
}

.wp-caption img {
  border: 0 none;
  padding: 0;
  margin: 0;
}

.wp-caption p.wp-caption-text {
  line-height: 1.5;
  font-size: 10px;
  margin: 0;
}

.wp-smiley {
  margin: 0 !important;
  max-height: 1em;
}

blockquote.left {
  margin-right: 20px;
  text-align: right;
  margin-left: 0;
  width: 33%;
  float: left;
}

blockquote.right {
  margin-left: 20px;
  text-align: left;
  margin-right: 0;
  width: 33%;
  float: right;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
  min-height: 525px;
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .carousel-item {
  min-height: 525px;
  background-color: #062a5f;
}

.carousel-inner > .carousel-item > img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}

.carousel-inner .carousel-item {
  width: 100%;
  min-height: 525px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.carousel-inner > .carousel-item > ol {
  margin: 0 auto;
}

.ad1 {
  background: url(images/bannerphoto_01.jpg) no-repeat center center;
}

.ad2 {
  background: url(images/bannerphoto_01.jpg) no-repeat center center;
}

.ad3 {
  background: url(images/bannerphoto_01.jpg) no-repeat center center;
}

.ad4 {
  background: url(images/bannerphoto_01.jpg) no-repeat center center;
}

.carousel-indicators {
  float: right;
  text-align: right;
  width: auto;
  margin-left: auto;
  display: inline-block;
  left: auto;
  right: auto;
}

.carousel-caption h2 {
  text-transform: uppercase;
  font-size: 40px;
  color: #ef559d;
  display: inline-block;
  margin: 0;
}

.carousel-caption p {
  font-size: 17px;
  margin: 20px auto;
  color: #000;
}

/*==========  Non-Mobile First Method  ==========*/
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
  .col-12.col-sm-5.col-md-4.pt35 {
    padding: 0;
  }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {
  .social {
    display: none;
  }
  .navbar-light .navbar-toggler {
    margin-top: -65px;
  }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991px) {
  .nav-link {
    padding: .5rem;
  }
  .nav {
    display: block;
  }
  .dropdown-menu {
    position: relative;
    width: 100%;
  }
  nav.navbar.navbar-expand-md {
    padding-left: 0px;
  }
  .col-lg-6.col-xs-12.row-eq-height {
    margin: 30px 0px;
  }
  .row-grey .row {
    padding: 0;
  }
  .col-8.mr-auto.align-middle.ml-auto.mb50 {
    margin-bottom: 15px;
    margin-top: 25px;
  }
  .row + .row {
    padding-top: 0px;
  }
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199px) {
  .nav-link {
    padding: .5rem;
  }
}