/* GCA Custom CSS */
.thumb-info img {border-radius: 0px !important;}
.thumb-info-wrapper {border-radius: 0px !important;} 

/************ GCA2022 GLOBAL ADDITIONS - Any additions/changes to old site CSS media querys below will be noted as GCA2022 ... */

/***** FOR NON MENU NAVABAR ********
#header .header-nav-main nav > ul > li > a {text-transform: none; font-size: 16px;}
#header .header-nav-main nav > ul > li:hover > a {color: #999; background-color:transparent; text-transform: none; font-size: 16px;}
#header .header-nav-main {margin-top:0px; margin-left: -20px;}
#header .header-nav-bar {background:#fff;} 
*/

h1 {font-weight:600; font-size: 2.8em;}
h2 {font-weight:600; font-size: 2.0em;}
h3 {text-transform:none;}
body, p {color: #333;}

/* FOR MENUED NAVBAR */
#header .header-nav-main nav > ul > li > a {text-transform: none; font-size: 16px;}
#header .header-nav-main nav > ul > li:hover > a {text-transform: none; font-size: 16px;}
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a { 
    border-bottom:none;
    color: #000;
    font-size: 1.0em; 
    font-weight: 600;
    padding: 8px 20px 8px 8px;
    position: relative;
    text-transform: none;}
#header .header-nav-main {margin-top:0px; margin-left: -20px;}
#header .header-nav-bar {background:#fff;} 

/* TESTING - FOCUS ADDED TO DROP DOWN MENU ITEMS USING KEYBOARD TAB KEY */

/* li:focus-within > .dropdown-menu {
    
  top: auto !important; 
  display: block !important; 
    opacity: 1 !important; 
} 
*/

/*#header .container-fluid {margin-left:0px !important;}*/

/*animate and make the smaller LogoSmallNav.png in header*/
.invisibleImg {visibility: hidden;margin-right: -20px; margin-top: -5px;}
.invisibleImgLink.nohover:hover {background-color: transparent !important;}
.slideUp {animation-name: slideUp;animation-duration: 1s;visibility: visible;margin-right: -20px;margin-top: -5px;opacity: 0.5;}

@keyframes slideUp {0% { opacity: 0;}
100% {opacity: 0.5;}
 } 
/*END animate and make the smaller LogoSmallNav.png in header*/

/*Hide scroll to top icon bottom right of screen/viewport so the ChatBot icon can live there */
.scroll-to-top{visibility: hidden;}

.alert-warning{color: #000; background-color: #f5f5f5; border-color: #ddd;}
.btnstylings {font-weight:bold;}
a.btnstylings:hover {color: #dfdfdf; background-color: #343434 !important;}

.fullheight {height:100%;}
.zeromargins {margin:0px;}

/* BEFORE AFTER-IMAGE COMPARISON SLIDER on AboutUs page */
.ba-slider {position: relative; overflow: hidden;}
.ba-slider img {width: 100%;display:block;max-width:none;}
.ba-slider .resize {position: absolute;top:0;left: 0;height: 100%;width: 50%;overflow: hidden;}

.ba-slider .handle { /* Thin line seperator */
  position:absolute; left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background: rgba(255,255,255,.95);cursor: ew-resize;
}
 
.ba-slider .handle:after {  /*round handle */
    position: absolute;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    content:'\21d4';
    color:white;
    font-weight:bold;
    font-size:36px;
    text-align:center;
    line-height:54px;
    background: #000;
    border:3px solid #fff; 
    border-radius: 50%;
    transition:all 0.3s ease;
    box-shadow:
      0 2px 6px rgba(0,0,0,.3), 
      inset 0 2px 0 rgba(255,255,255,.5),
      inset 0 60px 50px -30px #000; 
}

.ba-slider .handle.ba-draggable:after {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px; /*ORIG -24px 0 0 -24px; */
    line-height:54px;
    font-size:30px;
}
/* END BEFORE-AFTER IMAGE COMPARISON SLIDER */

/*********** END GCA2022 GLOBAL ADDITIONS ********************/

/* TEMP to remove link to update delivery methods */
.tn-edit-delivery-link {display: none !important;}

/*STICKY version .topalertmessage {color: #8a6d3b;background-color: #9a014a;padding: 10px;top:0;width:100%;z-index:1000;} */
.topalertmessage {background-color: #9a014a;padding: 10px;}
/* ORIG .stickystuff{position:relative; top:0; z-index: 1200;} */
.stickystuff{position:relative; top:0; z-index: 200;}

/*Google Search FIX for search button icon sizing*/
button.gsc-search-button-v2 {
        font-size: 16px !important;
    /*height: 26px !important; margin-top: 0 !important; min-width: 13px !important; padding: 5px 26px !important; width: 68px !important;*/
    }

#header .header-body {border-top: 0px !important;}
a.whitefont:hover {color: #999; text-decoration: none;}
.underline {text-decoration: underline;}

/* Show or Hide Content used with contenthidedisplay.js */
  [gcadata-show-after],[gcadata-hide-after]{ display:none!important; }
  .gcatime-unhidden{ display:revert!important; }

/*Packages - Hide TNEW img wrapper and fix left side indent only on the Flex page to use the TN_Express_Sub_Synopsis instead for all the content -*/
.tn-flex-package-details__image-wrapper {display: none !important;}

/* Promo code message styles tr_web_source_ */
.tn-promo-description-1 {font-size:18px; font-weight:bold; line-height:24px !important;}
.tn-promo-description-2 {font-size:18px !important;}
.tn-heading-info {font-size:18px; font-weight:bold; line-height:24px !important;}
/*.tn-heading-info {font-size:18px; font-weight:bold; line-height:24px !important;}*/

/* Colors override. Hover changed for GCA2022. See default.css for colors. Class text-color-primary to force theme color */
a:hover {color: #999; text-decoration: none;} 
.redfont {color:red !important;}
.whitefont {color:white;}

.img-border {border:1px solid #ddd;}

/* To disable all details page videos add in display:none; below and for desktop users class below, for start of season for best performance */
.detailspagevideo {clear:both;} 

/* Not using nav-list for left menu - hold */
aside ul.nav-list > li > a {color: #bd8d00; font-weight:500;}

/* Homepage Items*/
.isotope-items-resco {width:16.66%; float: left;}

/* Colorize n' stylize the bg color of the left side nav hovers */

/* Newer accordion style Leftmenu using list-group panel */
.leftnavmenu  {background: none; font-weight:400; box-shadow:none;}
a.leftnavmenu {color:#bd8d00; background: none;}
a.leftnavmenusub {color:#777; background: none; font-size: 90%;  padding:2px 0px 2px 20px;}

div.leftnavmenu a:focus {
background: rgba(199,199,199,1);
background: -moz-linear-gradient(left, rgba(199,199,199,1) 0%, rgba(231,56,39,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(199,199,199,1)), color-stop(100%, rgba(231,56,39,0)));
background: -webkit-linear-gradient(left, rgba(199,199,199,1) 0%, rgba(231,56,39,0) 100%);
background: -o-linear-gradient(left, rgba(199,199,199,1) 0%, rgba(231,56,39,0) 100%);
background: -ms-linear-gradient(left, rgba(199,199,199,1) 0%, rgba(231,56,39,0) 100%);
/*Chrome below */
background: linear-gradient(to right, rgba(234,234,234,1) 0%, rgba(231,56,39,0) 100%);
}

div.leftnavmenu a:hover {
background: rgba(199,199,199,1);
background: -moz-linear-gradient(left, rgba(199,199,199,1) 0%, rgba(231,56,39,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(199,199,199,1)), color-stop(100%, rgba(231,56,39,0)));
background: -webkit-linear-gradient(left, rgba(199,199,199,1) 0%, rgba(231,56,39,0) 100%);
background: -o-linear-gradient(left, rgba(199,199,199,1) 0%, rgba(231,56,39,0) 100%);
background: -ms-linear-gradient(left, rgba(199,199,199,1) 0%, rgba(231,56,39,0) 100%);
/*Chrome below */
background: linear-gradient(to right, rgba(234,234,234,1) 0%, rgba(231,56,39,0) 100%);
}

ul.nav-list li a:hover {
text-decoration: none;                
background: rgba(199,199,199,1);
background: -moz-linear-gradient(left, rgba(199,199,199,1) 0%, rgba(231,56,39,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(199,199,199,1)), color-stop(100%, rgba(231,56,39,0)));
background: -webkit-linear-gradient(left, rgba(199,199,199,1) 0%, rgba(231,56,39,0) 100%);
background: -o-linear-gradient(left, rgba(199,199,199,1) 0%, rgba(231,56,39,0) 100%);
background: -ms-linear-gradient(left, rgba(199,199,199,1) 0%, rgba(231,56,39,0) 100%);
/*Chrome below */
background: linear-gradient(to right, rgba(234,234,234,1) 0%, rgba(231,56,39,0) 100%);
}

/* Add color to the lightbox hover icons */
.img-thumbnail.img-thumbnail-hover-icon:after
{color: #d8af70;}

/* Shadows divs and images */
.shadow-one {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);}
.shadow-two {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}

/* Positions */
.cus-centerthis {text-align: center;}
.center-image {margin: 0 auto !important;}
.cus-tenpixelsfromtop {padding-top: 10px;}
.cus-mainnavbg {background-image: url(../img/bg_marblepattern2.png);}

/* paddings */
.cus-margrt {margin:0 20px 10px 0;}

/* MISC */

/* Listing of Events page search */
#searchInput {background-image: url('../img/search.png'); background-position: 10px 12px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; }
.searchrefreshbutton {width: 100%; font-size: 16px; padding: 12px 20px 12px 20px; border: 1px solid #ddd; margin-bottom: 1px; }
#searchTable {font-size: 90%;}

/* Remove margins on some lists */
.listmb-none li  {margin-bottom: 1px;}

/* Remove borders from the grids */
.content-grid .content-grid-item:before {border:none;}
.content-grid .content-grid-item:after {border:none;}

/* FORMS valedations, inputs etc */
.formValedations {color: #C00;}
.formValedations ul {list-style-type: none; padding: 2px; color: #C00;}
.formValedations li:before {font-family: FontAwesome; content: "\f06a"; margin-right:5px;}
.esignatureFont {font: 400 24px/0.8 'Cookie', Helvetica, sans-serif;}
.form-control:focus {outline: #777 dotted medium; }
.ChkBoxClass input {width:20px; height:20px; margin-right: 5px; vertical-align: middle;}
.ChkBoxMargins input {margin:2px 5px 0px 15px;}

/* Add this class to a single p tag with   after detailspage content to stop SYOS or BA form from wrapping below details content with limited float left text content */
.stopwrapping {clear:both; line-height: 0px; margin: 0px;}

/*Hide Program buttons on event details pages globally add in display:none; */
.program-button{}

.programsInnertext{position: absolute; bottom: 10px; left: 10px; background-color:rgba(0,0,0,0.7); color: #fff; padding:7px; text-align: left;}
.programsContainer a {font-weight:500 !important;}
.programsContainer{position: relative;}
.programsContainer img {border:1px solid #ddd;}

/*GCRC styles*/
.gcrcposterimages{border: 1px solid #ddd;}

.onepixelborder {border: 1px solid #ddd;}

/* Add to Calendar and Reminder to Calendar button drop down for Details Pages and frontend pages */

.add-to-calendar-wrapper {
  position: relative;
  display: inline-block;  /* Disable if HIDE */
  /* display: none; HIDE if need to */
}

.add-to-calendar-container {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
}

 .add-to-calendar-menu {
  background: #fff;
  border: 1px solid #ccc;
  list-style: none;
  padding: 5px 0;
  margin: 4px 0 0 0;
  width: 220px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: none;
} 


.add-to-calendar-menu li {
  margin: 0;
  padding: 0;
}

.add-to-calendar-menu li a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.add-to-calendar-menu li a:hover {
  background-color: #f0f0f0;
}

/* END - Add to Calendar button drop down for Details Pages*/

/* ADDITIONAL PERFORMANCES BUTTON on Details Pages. */

.additional-perfs-wrapper {
  position: relative;
  display: inline-block;
}

.additional-perfs-container {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  min-width: 220px; /* allow dropdown wider than button */
}

.additional-perfs-menu {
  display: none;  /* hidden by default; JS toggles .is-open on container */
  background: #fff;
  border: 1px solid #ccc;
  list-style: none;
  padding: 5px 0;
  margin: 4px 0 0 0;
  width: max-content; /* expand to fit longest item */
  min-width: 220px;   /* but never smaller than base */
  max-width: 80vw;    /* prevent overflow on desktop */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  white-space: nowrap; /* prevent line wrapping on desktop */
}

.additional-perfs-container.is-open .additional-perfs-menu {
  display: block;
}

.additional-perfs-menu li {
  margin: 0;
  padding: 0;
}

.additional-perfs-menu li a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.additional-perfs-menu li a:hover {
  background-color: #f0f0f0;
}

/* Mobile: allow wrapping for narrow screens */
@media (max-width: 600px) {
  .additional-perfs-menu {
    white-space: normal;    /* allow wrap on phones */
    max-width: 90vw;        /* keep within viewport */
  }
  .additional-perfs-menu li a {
    white-space: normal;
    word-break: break-word; /* break long words/URLs if needed */
  }
}

/* END - ADDITIONAL PERFORMANCES for  Details Pages*/

/* SIZINGS DESKTOP */

@media (min-width: 992px) {

/* 60% of viewport width on Desktop views */
.detailspagevideo {clear:both; width: 50vw; padding-bottom: calc(60vw * 9 / 16); display: block;  margin: 0 auto;}

/* HIDE VIDEOS ON DESKTOP comment out above class*/
/*.detailspagevideo {display:none; } */

/* GCA2022 add some left and right padding to master pages container-fluid*/
/* .container-fluid {padding: 0px 40px 0px 40px !important;} */
.subpagespace{padding:0px 50px 0px 50px;}

/* For below try width: 100%; //OR// width: 950px; height: 450px; //OR// height: 300px;  only if you want fixed height*/ 
/* added width 100% to fit 1440p monitors or higher */
.halfsectionfitimage{object-fit: cover; width: 100%;}

/* Ghosted background images in 2 column blocks to fit 1440p monitors or higher*/
.section.section.section-background {background-repeat: round;}

.halfsectionspace{padding:0px 30px 0px 50px;}
.fullwidthspace{padding:0 20px 0 50px;}
.text-halfsizebigger{font-size:1.7rem; line-height:3rem;}
.text-onesizebigger{font-size:2rem; line-height:3rem;}
.text-twosizebigger{font-size:3rem; line-height:4rem;}
.videotopposition {top:-130px;}

/* FORCE EVENT DETAIL PAGES TO REFORMAT: for Desktop / Tablet Landscape Views - Additional Events Dropdown sent div to bottom of page, and widen content column */
/* ///TESTING NOW /// Move the left column below the SYOS Map by adding the below classes to QACustom.css: */

.tn-event-detail {
    flex-direction: column !important;
}

.tn-event-detail__additional-events-container {
    order: 3 !important;
    width: 100% !important;
}

.tn-prod-list-item__property--img-container img {border: 1px solid #ddd !important;}

.tn-event-detail__main-container {margin-bottom: 0px !important;}

/* Margins in TNEW Template left and right now set differently for desktops and mobiles */
.tnew-margins{margin: 0px 50px 0px 50px;}

/* 10 Columns and 5 Columns Grid. Better 5 columns grid below, see .five-cols classes */
 .ten-columns > .col-md-2 {
    width: 20%;
  }

 /* END GCA2022 ADDITIONS */

 /* Change to width:300px before new season when most of the details page images are TN500_XXX.webp */
.detailspageimage {width:300px; float:left; border:1px solid #ddd; margin:0 15px 5px 0;}

.fixedwidth{width: 300px;}
	
/* To add a mainnav image background */
/* html #header .header-nav-bar-primary {background-image: url(../img/MainNavBG.png) !important; color: #FFF !important;} */

/* NEW SITE changed to 0px ::: Bring main nav tag in mainheadernav.ascx pills down a tad*/
.nav {margin-top: 0px; }

.home-intro {padding: 10px 0 10px 0; margin-bottom: 25px;}
.home-intro p {padding-top:15px;}

.eventshomepage {font-size:80%;}

.cus-toolbar {padding:7px 25px 0 25px; text-align: right; font-size:170%; }


.genrespagetext{font-size: 1.5rem; line-height: 2.0;}
.genrespageimage{max-width: 250px;width: 100%;height: auto;}
.img-max-200 {max-width: 200px;width: 100%;height: auto;}
.img-max-250 {max-width: 250px;width: 100%;height: auto;}
.img-max-275 {max-width: 275px;width: 100%;height: auto;}
.img-max-300 {max-width: 300px;width: 100%;height: auto;}
.img-max-350 {max-width: 350px;width: 100%;height: auto;}
	
} 


/* END Sizings Desktop */

/* SIZINGS TABLET */

@media (max-width: 992px) {

/* GCA2022 added */

/*ADDED 2/6/23 to hide right side gap that appears in Pixel 4 phones and tablets */
html, body {overflow-x: hidden;}

.nav-pills{margin-left:30px;}

/* For below try width: 100%; //OR// width: 950px; height: 450px; //OR// height: 300px;  only if you want fixed height*/ 
.halfsectionfitimage {object-fit: cover; width:100%; height:100%; object-position: center center;} 
.halfsectionspace{padding:0px 20px 0px 20px;}
.fullwidthspace{padding:0 20px 0 20px;}
.subpagespace{padding:0px 20px 0px 20px;}
.img-forcefullwidth {display: block;width: 100%;}

/* FORCE EVENT DETAIL PAGES TO REFORMAT: for Desktop / Tablet Landscape Views - Additional Events Dropdown sent div to bottom of page, and widen content column */
/* ///TESTING NOW /// Move the left column below the SYOS Map by adding the below classes to QACustom.css: */

.tn-event-detail {flex-direction: column !important;}

.tn-event-detail__additional-events-container {
    order: 3 !important;
    width: 100% !important;
}

.tn-prod-list-item__property--img-container img {border: 1px solid #ddd !important;}

.tn-event-detail__main-container {margin-bottom: 0px !important;}

/* Margins in TNEW Template left and right now set differently for desktops and mobiles */
.tnew-margins{margin: 0px 50px 0px 50px;}

/* 10 Columns and 5 Columns Grid. Better 5 columns grid below, see .five-cols classes  */
 .ten-columns > .col-md-2 {width: 100%;}

/* END GCA2022 added */

/* .detailspageimage {float:left; border:1px solid #ddd; margin:0 15px 5px 0;} */

.detailspageimage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: none;
    border:1px solid #ddd;}

.fixedwidth{width: 300px;}

.home-intro {margin-bottom: 25px;} 

footer {text-align: center;} 

.eventshomepage {font-size:100%;}
.text-xs-center {text-align: center;}  
.image-xs-center {margin: 0 auto !important;}

/* In case you need buttons to resize on tablets */
.btn-responsive {padding:4px 9px; font-size:90%; line-height: 1.2;}

.cus-toolbar {padding:7px 25px 0 25px; text-align: center; font-size:170%; }

}
/*END Sizing Tablets */


/*SIZINGS MOBILE 479px*/

@media (max-width: 479px) {

/* GCA2022 added */

/*ADDED 2/6/23 to hide right side gap that appears in Pixel 4 phones and tablets */
html, body {overflow-x: hidden;}

.nav-pills{margin-left:30px;}
.halfsectionspace{padding:0px 20px 0px 20px;}
.fullwidthspace{padding:0 20px 0 20px;}
.subpagespace{padding:0px 20px 0px 20px;} 

/* Minimize H1 Text in fullscreen banners, etc if need to*/
.text-seventyfivepercent{font-size:1.7em; line-height:1.7em;}

/* Margins in TNEW Template left and right now set differently for desktops and mobiles */
.tnew-margins{margin: 0px 25px 0px 25px;}

/* 10 Columns and 5 Columns Grid. Better 5 columns grid below, see .five-cols classes  */
 .ten-columns > .col-md-2 {width: 100%;}

/* END GCA2020 added */

.detailspageimage {
    display: block;
    max-width: 100%;
    height: auto;
    border:1px solid #ddd;}

.btnfullwidth {width:100%; white-space: normal;}

.detailscontentimage {display: block;margin-left: auto;margin-right: auto;}

/* Calendar / Listing page by default hides images and shows descriptions for cell phones during LIST Views */
/* HIDE the event DESCRIPTIONS text for calendar List VIEW for Cell Phones only */
.tn-prod-list-item__property--description {display: none !important;}
/* SHOW the event IMAGES for calendar List VIEW for Cell Phones only */
.tn-prod-list-item__property--img-container {text-align: center !important; display: block !important;}
.tn-prod-list-item__property--img-container img {max-width:100% !important;}

footer {text-align: center;} 
	
.text-xs-center {text-align: center;}  
.image-xs-center {margin: 0 auto !important;}

.img-thumbnail {display:inherit !important; margin-bottom: 10px !important;}

/*Home-intro was from default.css, customized here*/
.home-intro {font-size: 11px; margin-bottom: 25px;} 

/* The next 2 are overrides to theme.css, for the header area when viewed on mobile */
/*#header .header-logo img {margin: 15px 0 0 0;}*/
#header .header-body {min-height: 100px; border-top: 0px !important;}

/* In case you need buttons to resize on phones */
.btn-responsive {padding:2px 4px; font-size:80%; line-height: 1; border-radius:3px;}

/* Add to BR tags, etc. anything that messes up formatting when viewing in mobile */
.mobile-hide {display: none;}
	
}
/* END Sizings mobile - max-width 479px*/


/* Shift far right ManNav submenu items to left side of dropdown for smaller desktop viewport sizes.
    See dropdown-to-left class referenced in MainHeaderNav Facilities menu
*/
@media (min-width: 991px) and (max-width: 1315px) {

	#header .header-nav-main nav > ul > li.dropdown-to-left .dropdown-menu {
		border-radius: 4px 0 4px 4px;
		right: 0;
		left: auto;
	}
	
	#header .header-nav-main nav > ul > li.dropdown-to-left .dropdown-menu li.dropdown-submenu > .dropdown-menu {
		right: 100%;
		left: auto;
	}
	
	#header .header-nav-main nav > ul > li.dropdown-to-left .dropdown-menu li.dropdown-submenu > a::after {
		left: 8px;
		border: none;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-right: 5px solid #bd8d00;
	}
	
	#header .header-nav-main nav > ul > li.dropdown-to-left .dropdown-menu li a {
		padding-left: 10px;
		padding-right: 8px;
	}
	
	#header .header-nav-main-sub-effect-1 nav > ul > li.dropdown-to-left .dropdown-menu li.dropdown-submenu > .dropdown-menu {
		transform: translate3d(30px, 0px, 0px);
	}
}


@media print {
  .hidden-print {display: none !important;}
  a[href]:after {content: none}

  /* This hides the rev slider style being writtin in by js, causing an empty area where slides are on print */
  .forcefullwidth_wrapper_tp_banner{display: none !important;}
}

/* PROPER 5 COLUMNS*/
.five-cols {
  text-align: center;
  font-size: 0; /* Removes inline-block spacing */
}
.five-cols .col-5 {
  display: inline-block;
  width: 20%;
  font-size: 16px; /* Reset font size */
}

@media (max-width: 991px) {
  .five-cols .col-5 {
    width: 33.33%; /* 3 per row on tablets */
  }
}

@media (max-width: 767px) {
  .five-cols .col-5 {
    width: 50%; /* 2 per row on mobile */
  }
}

@media (max-width: 479px) {
  .five-cols {
    text-align: center;
  }

  .five-cols .col-5 {
    width: 50%;
    display: inline-block;
    float: none;
    text-align: center;
  }

  .five-cols .col-5:last-child {
    width: 100%;
    text-align: center;
  }
}