@charset "utf-8";
@import url("https://use.typekit.net/goi5uot.css");



/* 
//~~~~~~~~~~~~~~~  ~~~~~~~~~~~~~~~~~~ 
//~~~~~~~~~~~~~~~  ~~~~~~~~~~~~~~~~~~    ROOT
//~~~~~~~~~~~~~~~  ~~~~~~~~~~~~~~~~~~ 
*/


:root {

   
   
   /* KEY COLORS */
   
   /* ~~ ~~ ~~ ~~ ~~ ~~ ~~ ~~ ART COLORS */
   --skypeach: #ffab70;
   --foreground: #ffe4ca;
   --vegitation: #c67c44;
   
   --shirt: #efe7dc;
   --jeans: #66c0bb;
   --boots: #ffd700;
   
   --hairmid: #e1a140;
   --hairhi: #ff5b29;
   
   
   --ltgreen: #84b59f;
   --mdgreen: #637c37;
   --dkgreen: #474c37;
   --dkbrown: #47342d;
   
   
   --dkred: #744253;
   --red:#a40e4c;
   
   
   --ltpurple: #3a405a;
   --purple: #332e3c;
   
   --black: #000;
   
   --dkgray: #333;
   --mdgray: #b6b6b6;
   --sandywhite: #FCF8EF;
   --creamwhite: var(--shirt);
   --white: #fff;
   
   --linkblue: #098db5 ;
   --linkbluehover: #13bce5 ;
   
   
   
   --grad1: linear-gradient(180deg, var(--ltpurple) 0%, var(--purple) 100%);
   
   /* ~~ ~~ ~~ ~~ ~~ ~~ ~~ ~~ VERB COLORS */
   
   
   --bkg1: var(--dkgray);
   --bkg2: var(--creamwhite);
   --bkg3: var(--dkbrown);
   --bkg4: var(--purple);
   --bkg5: var(--vegitation);
   --bkg6: var(--sandywhite);
   
   --heading1: var(--dkbrown);
   --heading2: var(--jeans);
   --heading3: var(--ltpurple);
   --heading4: var(--hairhi);
   --heading5: var(--jeans);
   
   --text1: var(--black);
   --text2: var(--white);
   --text3: var(--foreground);
   --text4: var(--sandywhite);
   
   --accent: var(--hairhi);
   --btnlearn: var(--jeans);
   --btnsale: var(--red);
   --btnsalehover: var(--dkred);
   --btnsoldout: var(--mdgray);
}

/* 
//~~~~~~~~~~~~~~~  ~~~~~~~~~~~~~~~~~~ 
//~~~~~~~~~~~~~~~  ~~~~~~~~~~~~~~~~~~    COLORS
//~~~~~~~~~~~~~~~  ~~~~~~~~~~~~~~~~~~ 
*/

 

body {
   background-color: var(--bkg1);
}

form {
  background-color: var(--bkg2);
  padding: 1em; 
}

#main-header,
#content-wrapper {
 background-color: var(--bkg3);
}

.rez-container{
   padding: 10px;
   background: rgba(255, 255, 255, 0.9);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading1);
}

h1 {
    color: var(--heading1);
}
h2 {
    color: var(--heading2);
}
h3 {
    color: var(--heading3);
}


a,
a:link,
a:visited {
   color: var(--linkblue);

}
a:hover {
   color: color: var(--linkbluehover);
   text-decoration: underline;
}

a.btn, button {
   background-color: var(--linkblue);
}

a.btn:hover, button:hover, a.btn:focus, button:focus {
   opacity: 1;
   background-color: var(--linkbluehover);
   
}

li#tripname {
   color: var(--heading1);
}

.navbar-inverse {
   background: var(--dkgray);
}


.lb {
   border-top: 2px solid #f09501;
   border-bottom: 1px solid #f09501;
}

li#tripdates, li#tripvenue {
   /* color: #050D22; */
}
legend {
   color: #098DB5;
}

#reservations {
  background-color: var(--bkg2);
  padding: 1em; 
}

/* .dates {
   display:none
} */

.red {
   color: var(--red);
}

.rez-summary {
   border-right: 1px solid var(--accent);
}

#rez-countdown .label {
   color:#333 !important;
}

.cat-container, .addon {
   border: none;
   background: #fff;
   padding: 1em;	
}



#main-footer {
   background: rgba(51, 51, 51, 0.7);
   background: var(--mdmtnblue);
   border: none;
}

#rezmagic-contact, #rezmagic-contact a:link, #rezmagic-contact a:visited  {
   color: #ccc;
   text-decoration: none;
}

#rezmagic-contact a:hover {
   text-decoration: underline;
}

.li-title {
   font-weight: bold;
   color:var(--dksand);
}


.pkg_includes li::before {
  color: var(--accent)
}

.skip-addon {
   background-color: var(--red) !important;
   border: 2px solid var(--red) !important;
}

.alert-info{
   color:var(--white);
   background-color: var(--skyorange);
   border-color: var(--dkmtnblue);
}

/* 
//~~~~~~~~~~~~~~~  ~~~~~~~~~~~~~~~~~~ 
//~~~~~~~~~~~~~~~  ~~~~~~~~~~~~~~~~~~    STRUCTURE
//~~~~~~~~~~~~~~~  ~~~~~~~~~~~~~~~~~~ 
*/





html {
   font-size: 62.5%;
}
body {
   font-family: proxima-nova,Helvetica,Arial, sans-serif !important;
   font-weight: 400;
   font-style: normal;
   font-size: 1.5em;
   line-height: 1.5em;
}

article {
   margin-left: 10px;
   margin-top: 0;
}

h1,
h2,
h3,
h4,
h5 {
   font-family: proxima-nova-extra-condensed, Arial, sans-serif;
   font-weight: 700;
   font-style: normal; 
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a {
   font-family: proxima-nova-extra-condensed, Arial, sans-serif;
   font-weight: 300;
}

.cat-descr h5 {
   font-weight: 400;  
} 

#logindisplay a,
#logindisplay a:link,
#logindisplay a:visited {
   text-decoration: underline;
}

.clear {
   clear: both;
}

.margin {
   margin-top: 3px;
   margin-right: 0px;
   margin-bottom: 5px;
   margin-left: 0px;
}

#content-wrapper {
   padding: .75em;
}


.rez-progress-bar {
   border-bottom: none;
   color: var(--text4);
}

.rez-progress-bar li {
   background: transparent url(../images/breadcrumb_arrow-yl.png) no-repeat scroll left center;
}

.navbar-brand {
   display: none;
   text-indent:-9999px;
}

a.navbar-brand {
   display: none;
   text-indent:-9999px;
}

.rez-content {
   border: none;
}

.rez-container{
   padding: 10px;
}

.rez-summary {
   border: none;
}

.cat-container, .addon {
   border: none;
   padding: 1em;	
}

.trip-info label.product-date {
   font-size: .8em;
   margin: .2em;
}

.li-title {
   font-weight: bold;
}

.pkg_includes {
   padding: 0em 1em;
   list-style: none;
}


.pkg_includes li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}