/* -------------------------------------------------- 
   TABLE OF CONTENTS
-----------------------------------------------------
:: 1	Sportcamp App Page Styles - _sportcamps.scss - all account pg styles, shared styles, sdicamps logo, etc. 
:: 2	Custom Global/General Use Styles - body, header/text styles, links, buttons, photo-spaces, universal styles used throughout site, etc. 
:: 3 	Foundation Overrides - top-bar, modals, orbit, etc
:: 4	Framework Styles - container, content styles, photo-spaces, logo/header, etc
:: 5 	Custom index.php - index.php specific styles
:: 6 	Custom facilites.php/history.php - facilites.php/history.php specific styles
:: 7 	Custom video.php - video.php specific styles
:: 8 	Custom gallery.php - gallery.php specific styles
:: 9 	Custom staff.php/camp-counselors.php - staff.php/camp-counselors.php specific styles
:: 10	Custom Camps styles - add to carts, detail panels, info tables, registration closed, etc
:: 11 	Custom footer.php - disclaimer, footer content, etc
:: 12	Media Queries - nest with parent style, only included at end of file for code reference. 

*/


/* -----------------------------------------
   1 SPORTCAMPS APP PG DECLARATIONS
----------------------------------------- */

/* located in sportcamps.scss */


/* -----------------------------------------
   2 CUSTOM GLOBAL/GENERAL USE STYLES
----------------------------------------- */

body {
  background: #efeeea;
  font-size: 12px; 
  font-family: 'Roboto Condensed', sans-serif;;
}


/* typography */
h1, h2, h3, h4, h5, h6 { 
  font-weight: normal; 
  font-style: normal; 
  letter-spacing: 0.04em; 
  text-rendering: optimizeLegibility; 
  line-height: 1.1; 
  margin: 0 0 10px 0; 
}
.title { 
  text-transform: uppercase; color: rgb(255,255,255); 
  color: rgba(255, 255, 255, 0.9); 
  text-shadow: 3px 3px 0 rgba(0,0,0, 0.5); 
}

/* styles */
.thin { 
  font-family: 'Roboto Condensed', sans-serif; 
  text-rendering: optimizeLegibility; 
}
.thin-italic { 
  font-family: 'Roboto Condensed', sans-serif; 
  font-style: italic; 
  text-rendering: optimizeLegibility; 
}
.lt { 
  font-family: 'Roboto Condensed', sans-serif; 
  text-rendering: optimizeLegibility; 
}
.italic { 
  font-family: 'Roboto Condensed', sans-serif; 
  font-style: italic; 
  text-rendering: optimizeLegibility; 
}
.bold { 
  font-family: 'Roboto Condensed', sans-serif; 
  font-weight: bold !important; 
  text-transform: uppercase; 
  text-rendering: optimizeLegibility; 
}

/* colors */
.shadow-title { 
  color: rgb(51,51,51); 
  color: rgba(51,51,51,0.75); 
  text-shadow: 1px 1px 1px #f1f1f1, 0 0 0 #333333, 1px 1px 1px #ffffff; 
}
.orange-color { 
  color: rgb(251,89,43); 
  color: rgba(251,89,43,0.75); 
  text-shadow:1px 1px 1px #f1f1f1, 0 0 0 #333333, 1px 1px 1px #ffffff; 
}
.shadow { 
  text-shadow: 0 0 5px #000000; 
}
.primary-color { 
  color: #0b3562; 
}
.secondary-color { 
  color: #fb592b; 
}
.white-color { 
  color: #ffffff; 
}


/* bg colors */
.primary-bg { 
  background: #0b3562; 
}


/* links */
a { 
  color: #fb592b; 
  text-decoration: none; 
  line-height: inherit; 
}
a:hover { 
  color: #0b3562;
  -webkit-transition: 1s all ease;
  -moz-transition: 1s all ease;
  transition: 1s all ease;
  -o-transition: background-color 1s all ease;
 }
a:focus { 
  color: #000000;  
}
p a { 
  font-weight: bold; 
  font-family: 'Roboto Condensed', sans-serif; 
  background: #fb592b; 
  color: #ffffff; 
  padding: 3px; 
}
p a:hover { 
  color: #ffffff; 
  border-color: #ffffff; 
  background: #0b3562; 
  -webkit-transition: 1s all ease;
  -moz-transition: 1s all ease;
  transition: 1s all ease;
  -o-transition: background-color 1s all ease;
}


/* buttons */
.button {
  color: #ffffff;
  font-family: 'Roboto Condensed', sans-serif;
  border: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  background: #151515;
  -webkit-transition: 1s all ease;
  -moz-transition: 1s all ease;
  transition: 1s all ease;
  -o-transition: background-color 1s all ease;	
}		
/* sizes */
.small.button { 
  font-size: 11px; 
  padding: 8px 10px 8px; 
}
.medium.button { 
  font-size: 13px; 
}
.large.button { 
  font-size: 18px; 
  padding: 11px 48px 13px; 
}
/* colors */		 
.orange.button { background: #fb592b; }
.add-cart.button { margin-bottom: 10px; }
	
/* hovers */
.button:hover { 
  background: #fb8d2b; 
  color: #ffffff; 
}
.orange.button:hover { 
  background: #fb8d2b; 
  color: #ffffff; 
}
.success.button:hover {
  color: #ffffff; 
}


/* google map iframes */
iframe { 
  margin-bottom: 10px; 
}
p small a { 
  font-size: 14px; color: #fb592b; 
  font-family: 'Roboto Condensed', sans-serif; 
  text-transform: uppercase; 
  margin: 20px 0; 
}
/* medium screens */
@media only screen and (max-width: 1279px) and (min-width: 768px) {
  iframe { 
    width: 80% !important; 
  }
}


/* line breaks */
.center-hr { 
  height: 2px; 
  margin: 20px 0 30px 0;
  background: rgb(144,144,144); /* Old browsers */
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(144,144,144,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(144,144,144,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(144,144,144,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(144,144,144,1) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(144,144,144,1) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(144,144,144,1) 50%,rgba(255,255,255,0) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#909090',GradientType=0 ); /* IE6-9 */ 
}
hr { 
  border: dotted #dddddd; 
  border-width: 1px 0 0; 
  clear: both; 
  margin: 15px 0; 
  height: 0; 
}


/* lists */
ul li ul, 
ul li ol { 
  margin-left: 20px; 
  margin-bottom: 20px; 
}
ul.square { 
  margin-left: 40px; 
}
ul.square li { 
  color: #fb592b; 
}
ul.square li span { 
  color: #000000; 
}


/* tables */
table thead, table tfoot { 
  background: #0b3562; 
}
table thead tr th h4 { 
  color: #ffffff; 
  margin: 0; 
}
table tbody tr:nth-child(2n) { 
  background: #f1f1f1; 
}
table tbody tr:hover { 
  background: #f1f1f1; 
  -webkit-transition: 1s all ease; 
  -moz-transition: 1s all ease; 
  transition: 1s all ease; 
  -o-transition: background-color 1s all ease; 
}
table tbody tr:nth-child(2n):hover { 
  background: #ffffff; 
  -webkit-transition: 1s all ease; 
  -moz-transition: 1s all ease; 
  transition: 1s all ease; 
  -o-transition: background-color 1s all ease; 
}

/* small screens */
@media only screen and (max-width: 767px) { 
  iframe { 
    width: 90%; 
  }
  h4 a { 
    font-size: 14px; 
  }
}


/* -----------------------------------------
   3 FOUNDATION OVERRIDES
----------------------------------------- */

/* grid */
.row { 
  width: 1000px; 
  max-width: 100%; 
  min-width: 768px; 
  margin: 0 auto; 
}
/* small screens */
@media only screen and (max-width: 767px) { 
  .row { 
    width: auto; 
    min-width: 0; 
    margin-left: 0; 
    margin-right: 0; 
  }
  .column, .columns { 
    width: auto !important; 
    float: none; 
  }
}


/* pricing tables */
.pricing-table { 
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.75); 
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.75); 
  -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.75); 
}
.pricing-table .title { 
  background: #000000; 
  color: #ffffff; 
  font-family: 'Roboto Condensed', sans-serif; 
  font-weight: normal !important; 
  font-size: 24px; 
  text-transform: uppercase;  
}
.pricing-table .cta-button { 
  background: #f1f1f1; 
}


/* tool tips */
.has-tip { 
  color: #fb592b; 
  border-bottom: none; 
}
.has-tip:hover, 
.has-tip:focus { 
  border-bottom: dotted 1px #fb592b;
  color: #f1f1f1; 
}
.tooltip { 
  display: none; 
  background: black; 
  border-top: 2px solid #fb592b; 
  background: rgba(0, 0, 0, 0.85); 
  font-weight: normal; 
  text-transform: uppercase; 
  position: absolute; 
  color: #f1f1f1; 
  font-family: 'Roboto Condensed', sans-serif; 
  font-size: 14px; 
  padding: 8px; 
  z-index: 999; 
  -webkit-border-radius: 0; 
  -moz-border-radius: 0; 
  -ms-border-radius: 0; 
  -o-border-radius: 0; 
  border-radius: 0; 
  line-height: normal; 
}


/* th image links */
.th img { 
  border-radius: 0px; 
  box-shadow: 0 0 20px rgba(251, 89, 43, 0.35); 
  -webkit-box-shadow: 0 0 20px rgba(251, 89, 43, 0.35); 
  -moz-box-shadow: 0 0 20px rgba(251, 89, 43, 0.35); 
}
.th:hover img, 
.th:focus img { 
  box-shadow: 0 0 20px rgba(11, 53, 98, 0.35); 
  -webkit-box-shadow: 0 0 20px rgba(11, 53, 98, 0.35); 
  -moz-box-shadow: 0 0 20px rgba(11, 53, 98, 0.35); 
}

/* Small screens */
@media only screen and (max-width: 767px) { 	
  .th img { 
    margin: 0 auto 20px auto; 
  }
}



/* faq accordion */
ul.faq.accordion > li { 
  background: #f1f1f1; 
}
ul.faq.accordion > li:first-child { 
  background: #f1f1f1; 
  list-style-type: none; 
}
ul.faq.accordion > li.active { 
  border-top: 3px solid #fb592b; 
}
ul.faq.accordion > li.active .content { 
  background: #ffffff; 
  position: relative; 
  z-index: 1; 
}
ul.faq.accordion > li.active .title { 
  background: #f1f1f1; 
}
ul.faq.accordion > li > div.title h4 {
  text-shadow: none !important;
}

/* alt faq accordion */
ul.faq-alt.accordion > li { 
  background: #f1f1f1; 
}
ul.faq-alt.accordion > li.active { 
  border-top: 3px solid #fb592b; 
}
ul.faq-alt.accordion > li.active .content { 
  background: #f1f1f1; 
  position: relative; 
  z-index: 1; 
}
ul.faq-alt.accordion > li > div.title h4 {
  text-shadow: none !important;
}


/* default menu styles */
.menu-bar-js-breakpoint { width: 940px !important; visibility: hidden; }

/* Wrapped around .top-bar to contain to grid width */
.contain-to-grid { 
  width: 100%;
  z-index: 100;
  border-bottom: 4px solid #ffffff;
}

/* Wrapped around .top-bar to make it fixed at the top */
.fixed { width: 100%; left: 0; position: fixed; top: 0; z-index: 99; }

/* Add .sticky class for using top bar as a sticky navigation when scrolling passed it. Add the class .sticky to a top bar using .contain-to-grid but leave off .fixed, javascript will take care of that */
.sticky { float: left; overflow: hidden; }
.sticky.fixed { float: none; }

/* <nav> */
.menu-bar { margin: 0; background: none repeat scroll 0 0 rgba(255,255,255,0); margin-top: 20px; padding: 0; min-height: 40px; line-height: 40px; width: 100%; position: relative; /* Contain width to .row width */ /* First <ul> for branding, title, name, etc */ /* topbar global <ul> styles */ }
.contain-to-grid .menu-bar { max-width: 940px; margin: 0 auto; }
.menu-bar > ul .name h1 { line-height: 40px; margin: 0; }
.menu-bar > ul .name h1 a { font-weight: bold; padding: 0 22.5px; font-size: 17px !important; }
.menu-bar > ul .name img { margin-top: -5px; vertical-align: middle; }
.menu-bar.expanded { height: inherit; }
.menu-bar ul { margin-left: 0; display: inline; height: 40px; line-height: 40px; list-style: none; /* Main Navigation links style */ /* Left Side <ul> */ /* Right Side <ul> */ }
.menu-bar ul > li { font-family: 'Roboto Condensed', sans-serif; font-style: italic; text-transform: uppercase; float: left; /* Dividers between navigation */ /* Put a button in an <li> but give is a class */ /* Put a search bar or text input in the bar */ /* Put login bar in the top bar */ /* Hide the triangle for breakpoint menu */ /* li.has-dropdown */ }
.menu-bar ul > li a:not(.button) { color: #f1f1f1; padding: 0 14px; display: block; font-size: 14px; height: 40px; line-height: 40px; }
.menu-bar ul > li:not(.name):hover, .menu-bar ul > li:not(.name).active, .menu-bar ul > li:not(.name):focus { background: rgba(0,0,0,0); }
.menu-bar ul > li:not(.name):hover a { color: #fb592b; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.menu-bar ul > li:not(.name).active a, .menu-bar ul > li:not(.name):focus a { border-bottom: 3px solid #fb592b; color: #fb592b;  }
.menu-bar ul > li:not(.name) span span.icon-mail-send, .menu-bar ul > li:not(.name) span span.icon-user, .menu-bar ul > li:not(.name) span span.icon-phone-2 { font-size: 20px; }
.menu-bar ul > li.divider { background: black; -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1); -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1); height: 100%; margin-right: 1px; width: 1px; }
.menu-bar ul > li.has-button a.button { margin: 0 11.25px; }
.menu-bar ul > li.has-button:hover, .menu-bar ul > li.has-button:focus { background: #222222; }
.menu-bar ul > li.has-button:hover a, .menu-bar ul > li.has-button:focus a { color: #fff; }
.menu-bar ul > li.toggle-topbar { display: none; }
.menu-bar ul > li.has-dropdown { position: relative; /* Dropdown Level 2+ */ }
.menu-bar ul > li.has-dropdown:hover > .dropdown, .menu-bar ul > li.has-dropdown:focus > .dropdown { display: block; visibility: visible; }
.menu-bar ul > li.has-dropdown a { padding-right: 33.75px; }
.menu-bar ul > li.has-dropdown a:after { content: ""; display: block; width: 0; height: 0; border: solid 5px; border-color: white transparent transparent transparent; margin-right: 15px; margin-top: -2.5px; position: absolute; right: 0; top: 50%; }
.menu-bar ul > li.has-dropdown .dropdown { text-align: left; border: none; background: #fb592b; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); left: 0; margin: 0; width: 250px; padding: 0; position: absolute; visibility: hidden; z-index: 99; }
.menu-bar ul > li.has-dropdown .dropdown li { background: #222222; line-height: 1; min-width: 100%; }
.menu-bar ul > li.has-dropdown .dropdown li a { background: #fb592b; border: none; border-width: 0; color: #ffffff; display: block; font-size: 14px; height: auto; line-height: 1; padding: 15px 20px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; white-space: nowrap; }
.menu-bar ul > li.has-dropdown .dropdown li a:after { border: none; }
.menu-bar ul > li.has-dropdown .dropdown li a:hover, .menu-bar ul > li.has-dropdown .dropdown li a:focus { background: #000000; color: #fb592b; }
.menu-bar ul > li.has-dropdown .dropdown li label { color: #fb592b; background: #000000; font-size: 12px; padding: 3px; font-weight: normal; font-family: 'Roboto Condensed', sans-serif; font-style: italic; margin: 0; }
.menu-bar ul > li.has-dropdown .dropdown li.divider { border-top: solid 1px black; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset; height: 10px; padding: 0; width: 100%; }
.menu-bar ul > li.has-dropdown .dropdown li:last-child {  }
.menu-bar ul > li.has-dropdown .dropdown li.active a { background: black; }
.menu-bar ul > li.has-dropdown .dropdown li.has-dropdown > a { padding-right: 30px; }
.menu-bar ul > li.has-dropdown .dropdown li.has-dropdown > a:after { border: none; content: "\00bb"; right: 5px; top: 6px; }
.menu-bar ul > li.has-dropdown .dropdown li.has-dropdown .dropdown { position: absolute; left: 100%; top: 0; }
.menu-bar ul > li.has-dropdown .dropdown li.has-dropdown:hover > .dropdown, .menu-bar ul > li.has-dropdown .dropdown li.has-dropdown:focus > .dropdown { display: block; }
.menu-bar ul.left { float: left; width: auto; margin-bottom: 0; }
.menu-bar ul.right { float: right; width: auto; margin-bottom: 0; /* Dropdown Right Side Alignment */ }
.menu-bar ul.right .has-dropdown .dropdown { left: auto; right: 0px; }
.menu-bar ul.right .has-dropdown .dropdown li.has-dropdown > .dropdown { right: 100%; left: auto; width: 100%; }
.menu-bar .js-generated { display: none; }

/* Firefox Fixes */
@-moz-document url-prefix() { .menu-bar ul li .button.small { padding-bottom: 6px; }
  .menu-bar ul li.search form input[type=search] { font-size: 14px; height: 22px; padding: 3px; } }

/* IE8 Fixes */
.lt-ie9 .menu-bar ul li a { color: white; display: block; font-weight: bold; font-size: 13px; height: 40px; line-height: 40px; padding: 0 15px; }
.lt-ie9 .menu-bar ul li a.button { height: auto; line-height: 30px; margin-top: 7px; }
.lt-ie9 .menu-bar ul li a img { margin-top: -5px; vertical-align: middle; }

.lt-ie9 .menu-bar section > ul > li a:hover, .lt-ie9 .menu-bar section > ul > li a:focus { color: #fb592b; -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; -o-transition: all 0.15s ease; transition: all 0.15s ease; }
.lt-ie9 .menu-bar section > ul > li:hover, .lt-ie9 .menu-bar section > ul > li:focus {  background: none !important; }
.lt-ie9 .menu-bar section > ul > li.active { background: none !important; }
.lt-ie9 .menu-bar section > ul > li.active a { border-bottom: 3px solid #fb592b; }

.lt-ie9 .menu-bar ul li.has-dropdown { padding-right: 33.75px; }
.lt-ie9 .menu-bar ul li.has-dropdown > ul li { padding-right: 0; }

/* -------------------- MOBILE NAV TOP-BAR -------------------- */

#cartMobile {
    background: none repeat scroll 0 0 #fb592b !important;
    color: #000000 !important;
}


/* Topbar Specific Breakpoint that you can customize */
@media only screen and (max-width: 767px) { .mobNav.top-bar { margin-bottom: 0; overflow: hidden; height: 45px; background: #000000 !important; /* Override contain to grid stuff for breakpoint */ /* Setting up the sliding area */ /* When the Small Nav is Showing */ }
  .mobNav.top-bar .js-generated { display: block; }
  header.main { padding: 10px 0 !important; border: none !important; }
  .contain-to-grid .mobNav.top-bar { width: auto; }
  .mobNav.top-bar section { left: 0; position: relative; width: auto; -webkit-transition: left 300ms; -moz-transition: left 300ms; -o-transition: left 300ms; transition: left 300ms; }
  .mobNav.top-bar ul { width: 100%; height: 100%; margin-bottom: 0; display: block; }
  .mobNav.top-bar ul > li { float: none; /* Branding and name */ /* Dropdown Toggle */ /* Divider for breakpoint */ /* Search Overrides for breakpoint size */ /* Dropdown Level 1 */ /* Dropdown Level 2 */ }
  .mobNav.top-bar ul > li.active, .mobNav.top-bar ul > li:hover { background: #151515; }
  .mobNav.top-bar ul > li.name { background: #333333; height: 45px; }
  .mobNav.top-bar ul > li.name h1 { line-height: 1; width: 100px !important; }
  .mobNav.top-bar ul > li.name h1 a { color: #fb592b; display: block; line-height: 45px !important; padding-left: 15px; height: 45px; width: 100px !important; }
  .mobNav.top-bar ul > li:hover a, .mobNav.top-bar ul > li.active a { color: #ffffff !important; }
  .mobNav.top-bar ul > li:hover, .mobNav.top-bar ul > li.active  { background: #0b3562; -webkit-transition: 1s all ease; -moz-transition: 1s all ease; transition: 1s all ease; -o-transition: background-color 1s all ease; }
  .mobNav.top-bar ul > li.active:hover { background: #000000; }
  .mobNav.top-bar ul > li a:not(.button) { color: #fb592b; }
  .mobNav.top-bar ul > li.toggle-topbar { cursor: pointer; display: block; height: 45px; position: absolute; right: 0; top: 0; width: 50%; }
  .mobNav.top-bar ul > li.toggle-topbar a { content: ""; display: block; width: 0; height: 0; border: solid 8px; border-color: white transparent transparent transparent; padding: 0; position: absolute; top: 50%; right: 22.5px; margin-top: -4px; }
  .mobNav.top-bar ul > li.toggle-topbar:hover { background: inherit; }
  .mobNav.top-bar ul > li.toggle-topbar a { padding: 0 !important; }
  .mobNav.top-bar ul > li.divider { border-bottom: solid 1px #3c3c3c; border-top: solid 1px black; clear: both; height: 1px !important; margin: 8px 0 !important; width: 100%; }
  .mobNav.top-bar ul > li.search { padding: 0 22.5px; }
  .mobNav.top-bar ul > li.search form { width: 100%; }
  .mobNav.top-bar ul > li.search form input[type=text] { width: 75%; }
  .mobNav.top-bar ul > li.search form .button { top: 0; width: 25%; }
  .mobNav.top-bar ul > li.has-dropdown a { padding-right: 33.75px; }
  .mobNav.top-bar ul > li.has-dropdown:hover > .dropdown { display: block; visibility: hidden; }
  .mobNav.top-bar ul > li.has-dropdown .dropdown { background: #fb592b; visibility: hidden; z-index: 0 !important; }
  .mobNav.top-bar ul > li.has-dropdown.moved { position: static; }
  .mobNav.top-bar ul > li.has-dropdown.moved .dropdown { top: 0; visibility: visible; }
  .mobNav.top-bar ul > li.has-dropdown.moved .dropdown li label { border: none !important; margin-bottom: 0 !important; padding: 6px !important; color: #fb592b; background: #000000; font-size: 14px; font-weight: normal; font-family: 'Roboto Condensed', sans-serif; }
  .mobNav.top-bar ul > li.has-dropdown.moved .dropdown li:not(.title) { padding-bottom: 0; }
  .mobNav.top-bar ul > li.has-dropdown.moved .dropdown li:not(.title) a { padding: 8px 22.5px; font-size: 14px; }
  .mobNav.top-bar ul > li.has-dropdown.moved .dropdown li a, .top-bar ul > li.has-dropdown.moved .dropdown li label { padding: 0 22.5px; }
  .mobNav.top-bar ul > li.has-dropdown.moved .dropdown li a:hover { background: #000000; display: block; }
  .mobNav.top-bar ul > li.has-dropdown.moved .dropdown li.divider { border-bottom: solid 1px rgba(255, 255, 255, 0.1); margin-top: 8px !important; margin-bottom: 8px !important; }
  .mobNav.top-bar ul > li.has-dropdown.moved .back.title { padding-bottom: 0; }
  .mobNav.top-bar ul > li.has-dropdown.moved .back.title a:before { position: absolute; top: 50%; left: 17.5px; margin-top: -5px; width: 0; height: 0; content: ""; display: block; width: 0; height: 0; border: solid 5px; border-color: transparent white transparent transparent; }
  .mobNav.top-bar ul > li.has-dropdown.moved .back.title h5 { margin: 0; position: relative;padding-left: 18px; margin-left: -18px; }
  .mobNav.top-bar ul > li.has-dropdown.moved .back.title h5 a { border-top: none !important; background: transparent; padding-top: 8px; padding-bottom: 8px; font-size: 23px; font-weight: bold; }
  .mobNav.top-bar ul > li.has-dropdown .dropdown li { background: transparent; }
  .mobNav.top-bar ul > li.has-dropdown .dropdown li.has-dropdown .dropdown { left: 100% !important; top: 0; right: auto !important; }
  .mobNav.top-bar ul > li.has-dropdown .dropdown li.has-dropdown > a { padding-right: 33.75px; }
  .mobNav.top-bar ul > li.has-dropdown .dropdown li.has-dropdown.moved { position: static; }
  .mobNav.top-bar ul > li.has-dropdown .dropdown li.has-dropdown.moved .dropdown { top: 0; visibility: visible; }
  .mobNav.top-bar ul > li.has-dropdown .dropdown li.has-dropdown:hover { display: block; }
  .mobNav.top-bar ul.left, .top-bar ul.right { float: none; width: 100%; }
  .mobNav.top-bar ul.left > li, .top-bar ul.right > li { display: block; float: none; margin: 0 !important; }
  .mobNav.top-bar ul.left > li.has-dropdown .dropdown, .top-bar ul.right > li.has-dropdown .dropdown { left: 100% !important; top: 0; right: auto !important; }
  .mobNav.top-bar ul > li.has-dropdown .dropdown li.title.back .avatar img { margin-top: -3px !important; width: 30px !important; height: 30px !important; }
  .mobNav.top-bar ul.right li.logged-in li.title.back .avatar { font-size: 23px !important; }
  .mobNav.top-bar.expanded { height: 100%; }
  .mobNav.top-bar.expanded ul li.toggle-topbar a { content: ""; display: block; width: 0; height: 0; border: solid 8px; border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent; top: auto; bottom: 50%; margin-bottom: -4px; }
  .mobNav.top-bar ul li.has-button { padding: 5px 15px; }
  .mobNav.top-bar ul li .button.small { margin: 0 !important; display: inline-block; width: 100%; }
  .mobNav.top-bar ul > li.has-button a.button { margin: 0; }
  .mobNav.top-bar ul.right li.logged-in .avatar img { margin-top: 9px !important; } 
  .mobNav.top-bar ul.right li { border-top: none; border-left: none !important;}
  .mobNav.top-bar ul.right li a { border-top:#ffffff 1px solid !important; font-family: 'Roboto Condensed', sans-serif; font-style: italic; text-transform: uppercase; border-top: none; border-left: none !important; }
	
}


/* gen info onscroll highlight menu */
.sticky { 
  float: none; 
  text-align: center; 
}
#gen-menu {
  background: rgb(255,255,255); 
  background: rgba(255,255,255, 0.9);  
  padding: 10px 0;
  display: block; 
  text-align: center; 
  width: auto; 
  overflow: hidden; 
  margin-right: 0; 
  padding-top: 4px;
  z-index: 1000;
}
#gen-menu h2 { 
  width: 100%; 
  color: rgba(51,51,51,0.75); 
  text-shadow:1px 1px 1px #f1f1f1, 0 0 0 #333333, 1px 1px 1px #ffffff; 
  font-size: 32px;
  margin-bottom: 0; 
  font-family: 'Roboto Condensed', sans-serif; 
  font-weight: bold; 
  text-transform: uppercase; 
  font-weight: normal; 
}
#gen-menu li { 
  float: none; 
  display: inline-block; 
  margin-bottom: 10px; 
  margin-left: 9px;  
}
#gen-menu a {
  text-transform: uppercase; 
  font-size: 14px; 
  color: #b7b6b6; 
  font-family: 'Roboto Condensed', sans-serif; 
  font-style: italic; 
  text-decoration: none;
  border-bottom: 3px solid #ffffff;
  -webkit-transition: 1s all ease;
  -moz-transition: 1s all ease;
  transition: 1s all ease;
}
#gen-menu a:hover { 
  border-bottom: 3px solid #fb592b; 
  font-family: 'Roboto Condensed', sans-serif; 
  font-style: italic; 
  font-weight: normal; 
  background: none; 
  color: #797979; 
}
#gen-menu li.active a { 
  border-bottom: 3px solid #fb592b; 
  font-family: 'Roboto Condensed', sans-serif; 
  font-style: italic; 
  font-weight: normal; 
  background: none; 
  color: #797979; 
}


/* faq auto highlight onscroll menu */
#faq-menu {
  background: rgb(255,255,255); 
  background: rgba(255,255,255, 0.9);  
  display: block; 
  text-align: center; 
  width: auto; 
  overflow: hidden; 
  margin-right: 0; 
  padding-top: 4px;
  z-index: 1000;
  background: white;
}
#faq-menu h2 { 
  width: 100%; 
  color: rgba(51,51,51,0.75); 
  text-shadow:1px 1px 1px #f1f1f1, 0 0 0 #333333, 1px 1px 1px #ffffff; 
  font-size: 32px; 
  margin-bottom: 0; 
  font-family: 'Roboto Condensed', sans-serif; 
  font-weight: bold; 
  text-transform: uppercase; 
  font-weight: normal; 
}
#faq-menu li { 
  float: none; 
  display: inline-block; 
  margin-bottom: 10px; 
  margin-left: 9px; 
}
#faq-menu a {
  text-transform: uppercase; 
  font-size: 14px; 
  color: #b7b6b6; 
  font-family: 'Roboto Condensed', sans-serif; 
  font-style: italic; 
  text-decoration: none;
  border-bottom: 3px solid #ffffff;
  -webkit-transition: 1s all ease;
  -moz-transition: 1s all ease;
  transition: 1s all ease;
}
#faq-menu a:hover { 
  border-bottom: 3px solid #fb592b; 
  font-family: 'Roboto Condensed', sans-serif; 
  font-style: italic; 
  font-weight: normal; 
  background: none; 
  color: #797979;
}
#faq-menu li.active a { 
  border-bottom: 3px solid #fb592b; 
  font-family: 'Roboto Condensed', sans-serif; 
  font-style: italic; 
  font-weight: normal; 
  background: none; 
  color: #797979; 
}


/* orbit slider */
.orbit-wrapper .orbit-caption { 
  background: rgb(255,255,255);  
  background: rgba(255, 255, 255, 0.7); 
  z-index: 30; 
  color: #222222; 
  text-align: left; 
  padding: 20px; 
  font-size: 13px; 
  position: absolute; 
  right: 0; 
  bottom: 0; 
  width: 100%; 
}
.orbit-wrapper .orbit-caption h3 { 
  margin: 0; 
}
ul.orbit-bullets { 
  position: absolute; 
  z-index: 30; 
  list-style: none; 
  bottom: 0px; 
  left: 95%; 
  margin-left: -50px; 
  padding: 0; 
}
ul.orbit-bullets li { 
  float: left; 
  margin-left: 5px; 
  cursor: pointer; 
  color: #999999; 
  text-indent: -9999px; 
  background: rgb(0,0,0); 
  background: rgba(0,0,0,0.5); 
  box-shadow: inset 2px 2px 0px #000000; 
  -webkit-box-shadow: inset 2px 2px 0px #000000; 
  -moz-box-shadow:inset 2px 2px 0px #000000; 
  -webkit-border-radius: 1000px; 
  -moz-border-radius: 1000px; 
  -ms-border-radius: 1000px; 
  -o-border-radius: 1000px; 
  border-radius: 1000px; 
  width: 13px; 
  height: 12px; 
  overflow: hidden; 
}
ul.orbit-bullets li.active { 
  background: rgb(251,89,29); 
  background: rgba(251,89,29,0.75); 
  background-position: -8px 0;  
}
#featured {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 40px 0 40px 0;
  border: 3px solid #ffffff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}
/*make all images 100% width, centered on all resolutions */
#featured img {
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  width: 100%;	
}
/* required for js image preloader */
#featured img { 
  display: none; 
}
#featured.orbit { 
  background: none; 
}
#featured.orbit img { 
  display: block; 
}


/* -----------------------------------------
   4 FRAMEWORK/LAYOUT STYLES
----------------------------------------- */

/* containers */
#content { 
  margin: 0 auto; 
  display: none; 
}
#title { 
  width: 100%; 
  z-index: 100; 
}
#head { 
  padding: 10px 0 0 0; 
  background: url('../images/assets/headers/home-header.jpg'); 
  box-shadow: 0px 0px 30px rgba(0,0,0,0.5); 
  -webkit-box-shadow: 0px 0px 30px rgba(0,0,0,0.5); 
  -moz-box-shadow: 0px 0px 30px rgba(0,0,0,0.5);  
}
/* fixes float position in ie8 */
.lt-ie9 #head .row .left { 
  float: none; 
}

/* page container */
.page-content { 
  padding: 40px 0 0 0; 
  background: url('../images/logos/virginia-logo.png') no-repeat scroll right bottom #ffffff; 
  box-shadow: 0 0 20px rgba(0,0,0,0.4); 
  -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.4); 
  -moz-box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}
.page-content-padding { 
  padding: 40px 0; 
  background: url('https://cavalierswimcamps.com/images/virginia-logo.png') no-repeat scroll right bottom #ffffff; 
  box-shadow: 0 0 20px rgba(0,0,0,0.4); 
  -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.4); 
  -moz-box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}
.account-content { 
  min-height: 650px; 
  padding: 40px 0; 
  background: url('../images/logos/virginia-logo.png') no-repeat scroll right bottom #ffffff; 
  box-shadow: 0 0 20px rgba(0,0,0,0.4); 
  -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.4); 
  -moz-box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}


/* page head */
.page-head { 
  position: relative; 
  border: 2px solid #ffffff; 
  top: 230px;  
  padding: 10px;  
  width: 30%; 
  background: rgb(251, 89, 43); 
  background: rgba(251, 89, 43, 0.75); 
}
.page-head h1 { 
  padding-left: 20px; 
  margin: 0; 
  text-shadow: 3px 3px 0 rgba(0,0,0, 0.3); 
  text-transform: uppercase; 
  color: rgb(255, 255, 255); 
  color: rgba(255, 255, 255, 0.9); 
} 
/* medium screens */
@media only screen and (max-width: 1279px) and (min-width: 768px) {
  .page-head { 
    width: 48%; 
  }
}

/* text callouts */
.callout { 
  background: #fb592b; 
  padding: 3px 3px; 
  color: #ffffff; 
}
.callout-alt { 
  background: #0b3562; 
  padding: 3px 3px; 
  color: #ffffff; 
}
.callout-black { 
  background: #000000; 
  padding: 3px 3px; 
  color: #ffffff; 
}


/* panels */
.panel {
  margin: 0 0 22px 0; 
  padding: 20px; 
  background: rgb(11, 53, 98); 
  background: rgba(11, 53, 98, 0.75);
  color: #ffffff; 
  box-shadow: 0px 0px 20px rgba(255,255,255,0.5);
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.5);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.5);
}
.secondary-panel {
  margin: 22px 0 22px 0; 
  padding: 10px;
  background: #ffffff;
  box-shadow: 0 0 15px rgba(0,0,0,0.2); 
  -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.third-panel {
  margin: 0; 
  padding: 40px 20px; 
  background: #f1f1f1; 
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.4); 
  -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.4); 
  -moz-box-shadow: inset 0 0 20px rgba(0,0,0,0.4);
}
.fourth-panel {
  margin: 0 0 22px 0; 
  padding: 40px 20px; 
  z-index: 1;
  position: relative;
  background: url('../images/logos/virginia-logo.png') no-repeat scroll right bottom #ffffff; 
}
.fourth-panel:last-child { 
  margin: 0; 
}

/* alert panel callouts */
div.alert-box { 
  background: #fb592b; 
  padding: 10px; 
}
div.alert-box:hover { 
  background: #000000; 
  color: #fb592b; 
  -webkit-transition: 1s all ease; 
  -moz-transition: 1s all ease; 
  transition: 1s all ease; 
  -o-transition: background-color 1s all ease; 
}
div.alert-box p { 
  font-style: italic; 
  text-shadow: none; 
  margin-bottom: 0; 
}
div.alert-box.secondary { 
  background: #0b3562; 
  padding: 10px; 
  color: #ffffff; 
}
div.alert-box.secondary:hover { 
  background: #000000; 
  color: #fb592b; 
  -webkit-transition: 1s all ease; 
  -moz-transition: 1s all ease; 
  transition: 1s all ease; 
  -o-transition: background-color 1s all ease; 
}
div.alert-box.secondary p { 
  font-style: italic; 
  text-shadow: none; 
  margin-bottom: 0; 
}


/* Small screens */
@media only screen and (max-width: 767px) { 
  .page-head { 
    width: 100%; 
  }
  .page-head h1 { 
    padding-left: 0px; 
  } 		
  #camp-header, #info-header, #faq-header, #staff-header {  
    background-size: 200% auto; 
    height: 143px; 
    margin-top: -10px; 
  }
  .page-head { 
    top: 73px; 
  }
}


/* -----------------------------------------
   5 CUSTOM - CAMPS/CART STYLES
----------------------------------------- */

/* camp header */
#camp-header { 
  height: 300px; 
  background: url('../images/assets/headers/camp-header.jpg') 50% 0 repeat-x fixed; 
}

/* camp panel */
.camp {
  margin: 0 0 22px 0; 
  padding: 20px; 
  background: #ffffff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
}
.camp .button { 
  margin-left: 0; 
}

/* date */
h4.date { 
  margin: 0; 
  font-weight: normal; 
}
.date { 
  color: #000000; 
  line-height: 1em; 
  padding-right: 7px; 
  letter-spacing: 0.06em; 
}
.camp span.date { 
  display: inline-block; 
  margin-bottom: 10px; 
}

/* price */
.price { 
  font-weight: normal; 
  letter-spacing: 0.06em; 
}
.camp span.price { 
  display: inline-block; 
  margin-bottom: 10px; 
}
h4.reg-closed { 
  line-height: 1em; 
  padding-right: 7px; 
  letter-spacing: 0.06em; 
}


/* -----------------------------------------
   6 CUSTOM - STAFF.PHP
----------------------------------------- */

/* staff pg headers */
.page-head-staff { 
  position: relative; 
  border: 2px solid #ffffff; 
  top: 0;  
  padding: 10px;  
  width: 30%; 
  background: rgb(251, 89, 43); 
  background: rgba(251, 89, 43, 0.75); 
}
.page-head-staff h1 { 
  padding-left: 20px; 
  margin: 0; 
  text-shadow: 3px 3px 0 rgba(0,0,0, 0.3); 
  text-transform: uppercase; 
  color: rgb(255, 255, 255); 
  color: rgba(255, 255, 255, 0.9); 
} 
#staff-header { height: 300px; background: #292C33; }
/* medium screens */
@media only screen and (max-width: 1279px) and (min-width: 768px) {
  .coach-wrapper .coach .image { 
	margin: 0 6px 0 6px;
    height: 132px;
    width: 130px;
  }
  .page-head-staff { 
    top: -6px; 
  }
}

/* meet coaches sub nav */
.coach.row {
  min-width: 100%;
}
.coach-wrap { 
  padding: 20px 0; 
}
.coach-pic { 
  box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.3) inset; 
  -webkit-box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.3) inset; 
  -moz-box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.3) inset;
  border: 1px solid rgba(51,51,51,0.4);
  border-radius: 50%;
  margin-bottom: 20px;
  padding: 10px;
  margin: 0 20px 0 20px;
  height: 152px;
  width: 155px;
  display: inline-block;
}
.coach-pic .image-box { 
  box-shadow: 0 0 0 15px #ffffff inset; 
  -webkit-box-shadow: 0 0 0 15px #ffffff inset; 
  -moz-box-shadow: 0 0 0 15px #ffffff inset;
  border: 5px solid #f1f1f1;
  border-radius: 50%;
  margin: 0 0 20px 0;
  transition: all 0.2s ease 0s;
}
.coach-pic .image-box:hover { 
  border: 0 solid #FFFFFF; 
}
.coach-pic .image-box img { 
  border-radius: 50%; 
  overflow: hidden; 
  vertical-align: middle; 
}
.coach-pic .coach-name { 
  color: #f1f1f1; 
  font-family: 'Roboto Condensed', sans-serif; 
  font-style: italic; 
  text-transform: uppercase; 
}


/* large staff pics */
.coach-pic-large { 
  box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.3) inset; 
  -webkit-box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.3) inset; 
  -moz-box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.3) inset;
  border: 1px solid rgba(51,51,51,0.4);
  border-radius: 50%;
  margin-bottom: 20px;
  padding: 10px;
}
.coach-pic-large .image-box { 
  box-shadow: 0 0 0 15px #ffffff inset; 
  -webkit-box-shadow: 0 0 0 15px #ffffff inset; 
  -moz-box-shadow: 0 0 0 15px #ffffff inset;
  border: 5px solid #f1f1f1;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.2s ease 0s;
}
.coach-pic-large .image-box img { 
  border-radius: 50%; 
  overflow: hidden; 
  vertical-align: middle; 
}
.coach-pic-large .coach-name { 
  color: #f1f1f1; 
  font-family: 'Roboto Condensed', sans-serif; 
  font-style: italic; 
  text-transform: uppercase; 
}

/* small screens */
@media only screen and (max-width: 767px) { 
  .coach-pic { 
    width: 40%; 
  }
  .coach-pic .image-box { 
    width: 40%; 
  }
  .coach-pic-large { 
    width: 180px; 
    height: 180px; 
    float: right !important; 
  }
}


/* -----------------------------------------
   6 CUSTOM - GENERAL-INFO.PHP
----------------------------------------- */

/* info heder */
#info-header { 
  height: 300px; 
  background: url('../images/assets/headers/info-header.jpg') 50% 0 repeat-x fixed; 
}
.icon-bg { 
  opacity: 0.25; 
  margin: -60px 0 0 0; 
  z-index: -1; 
  position: relative; 
}
.icon-bg span { 
  font-size: 140px; 
  color: #cccccc; 
}


/* -----------------------------------------
   6 CUSTOM - FAQ.PHP
----------------------------------------- */

#faq-header { 
  height: 300px; 
  background: url('../images/assets/headers/faq-header.jpg') 50% 0 repeat-x fixed; 
}
.icon-faq-bg { 
  opacity: 0.15; 
  margin: -20px 0 0 0; 
  z-index: -1; 
  position: relative; 
}
.icon-faq-bg span, 
.icon-faq-bg i { 
  font-size: 100px; 
  color: #cccccc; 
}
.icon-faq-bg-alt { 
  opacity: 0.45; 
  margin: -20px 0 0 0; 
  z-index: -1; 
  position: relative; 
}
.icon-faq-bg-alt span, 
.icon-faq-bg-alt i { 
  font-size: 100px; 
  color: #ffffff; 
}


/* -----------------------------------------
   4 CUSTOM - INDEX.PHP
----------------------------------------- */

/* parralax scroll sections */
#home { 
  background: url('../images/assets/home.jpg') 50% 0 no-repeat fixed; 
  height: 1000px;  
  margin: 0 auto; 
  width: 100%; 
  background-size: cover !important;
  max-width: 1920px; 
  position: relative; 
}
#home-content { 
  margin: 0; 
  padding: 20px 0; 
  background: #ffffff; 
  z-index: 100;
  height: 340px;
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
  box-shadow: 0px 0px 20px rgba(0,0,0,0.85);
  -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.85);
  -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.85);
}
#about { 
  background: url('../images/assets/about.jpg') 50% 0 repeat fixed; 
  height: 700px;
  margin: 0 auto; 
  background-size: cover !important;
  width: 100%; 
  max-width: 1920px; 
  position: relative; 
}
#about h1 {
  margin-top: 60px !important;
}
#home article { 
  height: 458px; 
  position: absolute; 
  width: 100%; 
}
#about article { 
  height: 458px; 
  position: absolute; 
  width: 100%; 
}
#about article div h1 { 
  font-size: 80px; 
  margin: 0; 
  color: rgba(255,255,255, 0.75); 
  text-shadow: 3px 3px 0 rgba(0,0,0, 0.5); 
}


/* small screens */
@media only screen and (max-width: 767px) { 
  #home { 
    height: 1200px; 
    min-height: 100%; 
    background: url('../images/assets/home.jpg') 0 0 repeat-y fixed;  
  }	
}


/* -----------------------------------------
   4 CUSTOM - FOOTER.PHP
----------------------------------------- */

/* footer */
footer { 
  background: #000000; 
  padding: 20px 0 0 0; 
}


/* -----------------------------------------
   12 MEDIA QUERIES - NEST UNDER PARENT STYLE SECTION
----------------------------------------- */

/* very large screens */
@media only screen and (min-width: 1441px) { ... }

/* medium screens */
@media only screen and (max-width: 1279px) and (min-width: 768px) { ... }

/* small screens */
@media only screen and (max-width: 767px) { ... }

/* landscape orientation */
@media screen and (orientation: landscape) { ... }

/* portrait orientation */
@media screen and (orientation: portrait) { ... }

/* touch detection */
.touch .your-class { ... }

@media only screen and (max-width: 767px) { ... }