@import url("ojr0gcy.css");

/* is there anyone out there? */

body {
    background-color: #000;
    background-size: cover;
    background-image: url(img/bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'neue-haas-unica', sans-serif;
    font-style: normal;
    margin: 0;
    font-weight: 100;
    font-size: 14px;
    color: #FFF;
    height: 100%;
    

}

h1{font-size: 2em}
h2{font-size: 1.6em}
h3{font-size: 1.2em}

.small {font-size:10px}
.medium {font-size: 16px}
.large {font-size: 22px}

.entry-form {width: 50%; float: right;}

/* YouTube video wrapper */
.video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    max-width: 1920px;
    margin: 0 auto;
}
    .video-wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-height: 1080px;
    }

/* BUTTONS */

.button {
  position:relative;
  margin-top:1%;
  margin-bottom: 1%;
  background-color:#f15f22;
  padding:10px 25px;
  font-size:1em;
  color:white;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  transition: all 300ms ease-in-out;
  left:0;
  top:0;
}

.button:hover {
  left:4px;
  top:4px;
  cursor: pointer;
  text-decoration: none;
}
/* 
.button {
  position:relative;
  margin-top:1%;
  margin-bottom: 1%;
  background:#f15f22;
  border:1px solid white;
  padding:20px;
  font-size:0.9em;
  color:white;
  box-shadow:4px 4px 0px 0px white;
  font-weight:700;
  letter-spacing:5px;
  text-transform:uppercase;
  transition: all 300ms ease-in-out;
  left:0;
  top:0;
}

.button:hover {
  left:4px;
  top:4px;
  box-shadow:0 0 0 0 white;
  cursor: pointer;
} */

/* FORMS */

input, select {padding:1em; width: 100%; margin-bottom:10px}
ul {list-style-type: none;padding-inline-start: 0.75em;}
mark {background-color: #f15f22;color: #FFF;}
.response {background-color: #f15f22; color: #FFF; font-size: 24px; text-align: center; padding:1em}

 .asterisk {color: #f15f22}


.terms-container {border: 1px solid #333; padding: 1em; background: rgba(0, 0, 0, .8)}
.terms {text-decoration: underline;}


.bg1 {
    background-image: url(img/algiers-2022.jpg);
    background-size: cover;
}

.bg2 {
    background-image: url(img/bg.jpg);
    background-size: cover;
}

/* columns */

/* Layout: */

.col-main {
  flex: 1.2;  
}  

.col-complementary {
  flex: 0.8;  
}

/* Responsive: */

@media only screen and (min-width: 640px) {
  .layout {
    display: flex;
  }
}

/* etc */

.twoCol {
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.col {
  padding: 0;
  margin: 0;
}

.pad3 {padding: 3rem;}
.pad0 {padding-top: 0px !important;}
.pad40 {padding-top: 40px !important;}
.break {margin-bottom: 3rem;}
.tours {width: 50%; text-align:right; float: right}
.titles {padding-top: 3rem}
.contact {padding-bottom: 3rem;}
.uppercase {text-transform: uppercase;}
.paragraph {padding: 0 6em}

.bit-widget .bit-venue {text-transform: uppercase;}
.bit-widget .bit-event .bit-date {font-weight: normal !important;text-transform: uppercase;}
.bit-widget .bit-event .bit-location {font-weight: normal !important;margin-top: 1px;text-transform: uppercase;}
.bit-widget .bit-logo {display: none;}
.bit-widget .bit-top-track-button {display: none !important;}
.bit-widget .bit-event-list-title {display: none !important;}

.navLink a{color: #000}
.navLink a:hover {color: #FFF; text-decoration: none;}

.buttons a {
    background-color: red !important;
}
.email {
    width: 300px;
    padding: 16px 24px;
    margin: 8px 0;
    box-sizing: border-box;
    font-size: 16px;
    font-family: Arial, sans-serif;
    color: #000;
    text-align: center;
}
.emailBtn {
    width: 150px;
    padding: 20px;
    margin: 8px 0;
    box-sizing: border-box;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    border: 0px;
}
a {
    color: #f15f22;
    text-decoration: none;
}
a:hover {
    color: #ffffff;
    text-decoration: underline;
    cursor: pointer;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #666;
text-align: center;
}
::-moz-placeholder { /* Firefox 19+ */
color: #666;
text-align: center;
}
:-ms-input-placeholder { /* IE 10+ */
color: #666;
text-align: center;
}
:-moz-placeholder { /* Firefox 18- */
color: #666;
text-align: center;
}
::selection {
    color: none;
    background: none;
}
/* For Mozilla Firefox */
::-moz-selection {
color: none;
background: none;
}
/* fonts */
@font-face {
    font-family: cinderblock125;
    src: url(fonts/Cinderblock-125.otf);
}
@font-face {
    font-family: cinderblock100;
    src: url(fonts/Cinderblock-100.otf);
}
@font-face {
    font-family: cinderblock75;
    src: url(fonts/Cinderblock-75.otf);
}
.font50 {
    font-family: cinderblock50;
    font-size: 5rem;
}
.font75 {
    font-family: cinderblock75;
    font-size: 5rem;
}
.font100 {
    font-family: cinderblock100;
    font-size: 5rem;
}
.font125 {
    font-family: cinderblock125;
    font-size: 100px;
    line-height: 100px;
    color: #000;
}
.font200 {
    font-family: cinderblock175;
    font-size: 5rem;
}
.font400 {
    font-family: cinderblock200;
    font-size: 5rem;
}

.bioTitle {
    font-family: 'cinderblock75';
    font-size: 5em;
    line-height: 50px;
    color: white;
}
/* modal */

.cta {
    color: #fff;
    display: inline-block;
    text-decoration: none;
}
.cta:hover {
    background-color: none;
    cursor: pointer !important;
}

.modalTerms {
    background-color:white; 
    color: black; 
    text-align: left; 
    padding:0 2em; 
    font-size: 1.25em;
}

.modaloverlay {
    background: rgba(241, 95, 34, 0.9);
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    z-index: -1;
    display: none;
    text-align: center;
}
.modaloverlay:target {
    display: block;
    opacity: 1;
    pointer-events: auto;
    z-index: 99999;
}
.modaloverlay .modal {
    background-color: none;
    height: 100%;
    position: relative;
    margin: 0 auto;
    padding: 3em;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 60em) {
.modaloverlay .modal {
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}
}
.modaloverlay .modal > iframe, .modaloverlay .modal > div {
    border: none;
    width: 100%;
    height: 100%;
}
.modaloverlay .close {
    background-color: #000;
    color: white;
    font-size: 24px;
    padding: 12px 12px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0;
    z-index: 1;
}
/* embeds */

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* modal */


/* nav */
.logo {margin-top: 10px}

.navigation-wrapper {
    background: #f15f22;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 90px;
    position: fixed;
    width: 100%;
    z-index: 10000;
}
.center-column {
    grid-column: 2;
    justify-self: center;
}
.right-column {
    justify-self: end;
}
.icon {
    width: 16px;
    margin: 36px 16px 0 0
}

.soundcloud {
    width:32px;
    margin: 36px 2px 0 16px
}

.icon1 {
    width: 26px;
    margin: 0 16px 0 0
}
.menu {
    width: 22px;
    margin: 26px 16px 0 15px
}
/* accordions */

.container {
    padding-top: 90px;
}

.right{text-align: right;}
.center{text-align: center;}
.left {text-align: left;}
.greybg{background-color: #242424;}
.blackbg {background-color: #000}
.purplebg {background-color: #7b72be;}
.purple {color: #7b72be;}
.orange{color: #f15f22;}
.white{color:#FFF}
.footer {padding: 1em;}
.lp {max-width: 100%;}

.faq-drawer {
    margin-bottom: 0px;
}
.faq-drawer__content-wrapper {
    font-size: 1.25em;
    line-height: 1.4em;
    max-height: 0px;
    overflow: hidden;
    transition: 0.25s ease-in-out;
}
.faq-drawer__title {
    border-top: #000 0px solid;
    cursor: pointer;
    display: block;
    font-size: 1.25em;
    font-weight: 700;
    padding: 0px 0 0 0;
    position: relative;
    margin-bottom: 0;
    transition: all 0.25s ease-out;
}
.faq-drawer__title::after {
    border-style: solid;
    border-width: 0px 0px 0 0;
    color: #000;
    content: " ";
    display: inline-block;
    float: left;
    height: 10px;
    left: 20px;
    position: relative;
    right: 20px;
    top: 2px;
    transform: rotate(135deg);
    transition: 0.35s ease-in-out;
    vertical-align: top;
    width: 10px;
}
/* OPTIONAL HOVER STATE */
.faq-drawer__title:hover {
    color: #4E4B52;
}
.faq-drawer__trigger:checked + .faq-drawer__title + .faq-drawer__content-wrapper {
    max-height: 33350px;
}
.faq-drawer__trigger:checked + .faq-drawer__title::after {
    transform: rotate(-45deg);
    transition: 0.25s ease-in-out;
}
input[type="checkbox"] {
    display: none;
}
.fuck {
    height: 200px;
    max-width: 80%;
}
.fuck1 {
    height: 400px;
    max-width: 80%;
}
.navImg {
    margin-bottom: -5px;
    margin-right: 40px;
    max-width: 100%;
}

.shopify-buy__product__price {
    margin-bottom: 15px;
    display: none !important;
}

.shopify-buy__product__actual-price {display: none !important;}

@media only screen and (max-width: 800px) {
.logo {width: 120px;}
.tours {width: 100%}
.container {padding-top: 40px}
.navigation-wrapper {height: 90px;}
.emailBtn {padding: 30px}
.bite-back {width: 77%;}
.store {width: 48%;}
.id {width: 90%;}
.tour {width: 85%}
.crew {width: 60%}
.contact {width: 60%; padding-bottom: 3rem;}
.car {display: none}
.paragraph {padding: 0px}
.entry-form {width: 100%; float: right;}
.lp {padding-top: 3em; padding-bottom: 1em; max-width: 100%;}
.social-wrapper {margin-left: -20px; margin-top: 14px;}
.icon, .soundcloud {display: none;width: 16px;margin: 20px 4px 0 0}
.menu {width: 20px;margin: 20px 4px 0 12px;padding-right: 20px;}
}

.logo-small {
    max-height: 70px;
    padding: 10px;
}