/* BRAND GUIDELINES */
:root {
  --white: #ffffff;
  --black: #131313;
  --grey-800: #3b3b3b;
  --grey-400: #717171;
  --grey-100: #f2f2f2;
  --red-500: #a11831;
  --red-400: #ba222e;
  --red-100: #ee3342;
  --orange-400: #cc940d;

  --blue-400: #253055;

  --font-size-base: 16;
  --font-size-22: calc(22 / var(--font-size-base) * 1rem);
  --font-size-28: calc(28 / var(--font-size-base) * 1rem);
}

.bentonpark h3, .bentonpark .heading3 {color: var(--orange-400);}
.bentonpark h4, .bentonpark .heading4 {color: var(--red-400);}

.bentonpark .bluetext {color: var(--blue-400)!important;}
.bentonpark .redtext {color: var(red-400)!important;}
.bentonpark .yellowtext {color: var(--orange-400)!important;}


.wrap.loading {display: initial;}

.fullwidthbutton a, .blockbutton a {font-weight: 700;}

.arrowbutton {display: inline-block;}
.arrowbutton a {padding: unset; text-decoration: none;}
.arrowbutton a::after {content: unset; cursor: pointer;}

.sociallinks {padding: 0; color: #3b3b3b; font-weight: 700; display: flex; gap: 5px; align-items: center;}
.sociallinks a {color: #3b3b3b!important; text-decoration: none; display: inline-block; margin: 0 0 0 20px; border-radius: 100vw; width: 30px; height: 30px; margin: 0; display: grid; justify-content: center; align-items: center;  -webkit-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.sociallinks a:hover {transition: all 0.2s ease;}
.sociallinks a.tw:hover {background: #1da1f2; color: var(--white) !important;}
.sociallinks a.fb:hover {background: #29487d; color: var(--white) !important;}
.sociallinks a.yt:hover {background: #ff0033; color: var(--white) !important;}
.sociallinks a.ig:hover {background: linear-gradient(115deg, rgb(249, 206, 52), rgb(238, 42, 123), rgb(98, 40, 215)); --contrast-color: #ffdcff; color: var(--white) !important;}
.sociallinks a.th:hover {background: var(--black); color: var(--white) !important;}

.bentonpark .top-header-wrap .border {background: none; border-top: 5px solid var(--blue-400);}
.bentonpark .header {padding: 20px 0 0 0;}
.bentonpark .header .left {width: 240px;}
.bentonpark .header .right {padding: 21px 0 0 0;}
.header .right .col1 {width: 255px; margin: 0;}
.bentonpark .header a.logo {background: url(../images/bentonpark-logo.png) no-repeat 0 0; background-size: 95px; width: 100%; height: 115px; margin-block: -30px 0; position: relative; z-index: 99;}
.bentonpark .introbanners {height: 750px;}
.bentonpark .introbanners .content-wrap {display: flex; align-items: center;}
.bentonpark .introbanners .content .latest .heading {background: var(--blue-400);}
.bentonpark .introbanners .content h1:after {background: var(--grey-400);}

.bentonpark .nav-wrap {background: unset; margin-top: unset; position: relative;}
.bentonpark .nav-wrap li:has(.dropdown-wrap) > a::after {content: "\f078"; font-family: "Font Awesome 6 Pro"; display: inline-block; position: relative; margin-left: 3px; transition: transform 0.3s ease;}
.bentonpark .nav-wrap li:has(.dropdown-wrap) > a:hover::after {transform: rotate(180deg); transition: transform 0.3s ease;}

.bentonpark .nav {width: 100%; margin-left: auto; max-width: unset;}
.bentonpark .nav .inner {background: none; width: unset; background-color: var(--blue-400); border-top-left-radius: 30px; padding-block: 5px;}
.bentonpark .nav li a {color: var(--white);}
.bentonpark .nav li.selected a, .bentonpark .nav li:hover a {text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; color: var(--grey-100);}
.bentonpark .nav li ul li, .bentonpark .nav li ul li.selected a, .bentonpark .nav li ul li:hover a {text-decoration: none!important;}
.bentonpark .nav .dropdown-wrap {background: var(--red-400); top: 44px}
.bentonpark .nav .dropdown li a, .bentonpark .nav li:hover .dropdown li a, .bentonpark .nav li.selected .dropdown li a {color: var(--white); text-decoration: none!important;}
.bentonpark .nav .dropdown li.selected a, .bentonpark .nav li.selected .dropdown li.selected a, .bentonpark .nav li:hover .dropdown li.selected a {color: var(--orange-400); text-decoration: none!important;}
.bentonpark .nav .dropdown li:hover a, .bentonpark .nav li:hover .dropdown li:hover a, .bentonpark .nav li.selected .dropdown li:hover a {color: var(--orange-400); padding-left: 5px; text-decoration: none!important;}

.bentonpark .snavblock {background: url(../images/bentonpark-watermark.png) no-repeat center bottom; padding: 0 0 122% 0; background-size: 100%;}
.bentonpark .snav li.selected a, .bentonpark .snav li.selected li.selected a, .bentonpark .snav li.selected li:hover a, .bentonpark .snav li:hover a {color: var(--red-400);}
.bentonpark .snav li.selected li a {color: var(--grey-800); border-top: 0;}
 .bentonpark .snav li.selected li:not(:last-of-type) {margin-bottom: 5px;}
.bentonpark .snav {background: none; border-bottom: 1px solid var(--grey-800);}
.bentonpark .snav li a {background: none; border-top: 1px solid var(--grey-800);}
.bentonpark .snav li.selected ul {background: none; border-bottom: 0; border-top: 1px solid var(--grey-800); padding: 8px 0 8px 30px;}
.bentonpark .snav li.selected ul li ul {padding: 8px 0 8px 25px;}
.bentonpark .snav li.selected ul li.selected ul li a {color: var(--grey-800);}
.bentonpark .snav li.selected ul li.selected ul li.selected a, .bentonpark .snav li.selected ul li.selected ul li:hover a {color: var(--blue-400);}

.bentonpark .title-container {background: var(--blue-400);}
.bentonpark .title-container.imageset {min-height: 200px;}
.bentonpark .title-container .title p, .bentonpark .title-container .title h1 { color: #ffffff; font-size: 480%; font-weight: 700; text-transform: uppercase; padding: 0;}

.bentonpark .content-wrap.offerfeatures {background: var(--grey-800) url(../images/bentonpark-features-border.png) no-repeat top center; background-size: auto 6px;}

.bentonpark .whatweoffer .box h3 {color: var(--orange-400);}

.bentonpark .footer-wrap.white {background: var(--blue-400); color: var(--white);}
.bentonpark .footer-wrap.white .footer p, .bentonpark .footer-wrap.white .footer h4 {color: var(--white)!important;}

.bentonpark .bottomfooter {background: var(--white); border-top: 5px solid var(--blue-400);}
.bentonpark .white .footer .left {width: 460px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px; align-items: center;}
.bentonpark table th {background: var(--orange-400);}

.bentonpark .content-wrap a:hover {text-decoration: underline;}
.bentonpark .content-wrap a:not(.snav a, .newsfeed a, .blockbutton a, .arrowbutton a, .fullwidthbutton a) {color: var(--red-500); text-decoration: none; font-weight:700;}
.bentonpark .content-wrap a:not(.snav a, .newsfeed a, .blockbutton a, .arrowbutton a, .fullwidthbutton a):hover {text-decoration: underline;}

.bentonpark .homeintro {background: var(--grey-100) url(../images/bentonpark-watermark.png) no-repeat 98% 90%;}
.bentonpark .homeintro .image {display: none;}
.bentonpark .homeintro img {width: auto;}
.bentonpark .homeintro .introtext {width: 100%; padding: 60px 85px;}
.bentonpark .footer p.logo {margin-top: -20px;}
.bentonpark .footer .sociallinks {text-align: center; padding: 20px 0 20px 0;}
.bentonpark .footer .translate {text-align: center;}
.bentonpark .footer a {transition: all 0.2s ease;}
.bentonpark .footer a:hover:not(.tw, .fb, .yt, .ig, .th) {color: var(--blue-400)!important; text-decoration: underline;}
.bentonpark .footer .quicklinks li {margin-bottom: 8px;}

.bentonpark h2 {color: var(--grey-800); text-transform: none;}
.bentonpark h3 {color: var(--blue-400); text-transform: none;}
.bentonpark h4 {color: var(--grey-400); text-transform: none;}
.bentonpark .blockbutton a {background: var(--blue-400); color: var(--white); text-decoration: none;}
.bentonpark .fullwidthbutton a {background: var(--orange-400); color: var(--white); display: block;}
.bentonpark .subnewsfeed .newsstory.n1 .text p, .bentonpark .subnewsfeed .newsstory.n1 .text p a {color: var(--grey-800);}
.bentonpark .introbanners .content .latest .twitter .tweets {min-height: 295px;}
.bentonpark .introbanners .content .latest .box {min-height: 315px;}
.bentonpark .breadcrumb a {color: var(--blue-400);}

.bentonpark .grid .box h4 {color: var(--grey-800); margin-bottom: 10px;}

.bentonpark .redtext {color: var(--red-400)!important;}
.bentonpark .yellowtext {color: var(--orange-400)!important;}

.slide-arrow.prev-arrow.slick-arrow {background: var(--blue-400) url(../images/arrow-alt-circle-left-regular-white.png) no-repeat center center; background-size: 100%; width: 60px; height: 60px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 10; border: none; cursor: pointer; border-radius: 50%;}
.slide-arrow.next-arrow.slick-arrow {background: var(--blue-400) url(../images/arrow-alt-circle-right-regular-white.png) no-repeat center center; background-size: 100%; width: 60px; height: 60px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 10; border: none; cursor: pointer; border-radius: 50%;}

.introbanners .newsstorys .slick-list {position: relative; height: auto;}
.introbanners .newsstorys .slick-track {position: relative; height: auto;}

.bentonpark .addthis_sharing_toolbox {text-align: center;}

.bentonpark .accreditations {width: 100%; display: table;}
.bentonpark .accreditations .logo {display: table-cell; float: none; width: auto; padding: 0 20px;}

.bentonpark .form input[type="submit"] {color: var(--white); background: var(--blue-400); font-weight: 600; margin-bottom: 40px; text-transform: uppercase;}
.bentonpark .form input[type="submit"]:hover {background: var(--orange-400);}

.bentonpark .newsfeedarchive {margin: 20px 0; border-top: 1px solid var(--grey-800); border-bottom: 1px solid var(--grey-800);}
.bentonpark .newsfeedarchive h2 {text-align: center; font-size: 95%; padding: 10px 15px;}
.bentonpark .newsfeedarchive ul li a {color: var(--grey-800);}
.bentonpark .newsfeedarchive ul li.selected a {color: var(--blue-400);}
.bentonpark .newsfeedarchive ul li.selected ul li a {color: var(--grey-800);}
.bentonpark .newsfeedarchive ul li.selected ul li.selected a {color: var(--blue-400);}

.bentonpark .galleries {width: 102%; margin-left: -2%;}
.bentonpark .galleries .gallery {width: 31.33333%; float: left; margin-left: 2%;}

.bentonpark .gallery-thumb.inner {width: 102%; margin-left: -2%;}
.bentonpark .gallery-thumb.inner .seecmsgallery img {width: 23%; float: left; margin: 0 0 2% 2%;}
.bentonpark .galleriesback {margin-left: 2%;}

.bentonpark .curriculum {width: 100%;}
.bentonpark .curriculum ul {width: 102%; margin-left: -2%;}
.bentonpark .curriculum ul li {float: left; width: 31.33333%; margin: 0 0 2% 2%; padding: 0; background: var(--grey-800);}
.bentonpark .curriculum ul li:before {content: none;}
.bentonpark .curriculum ul li a {display: block; padding: 10px; background: var(--grey-800); color: var(--white); font-weight: 700;}
.bentonpark .curriculum ul li a i {float: right;}

.eventsfeed + .grid-links {margin-top: 30px;}

.bentonpark .grid-links > div::after {content:unset;}

.grid-links {width: 100%; margin-left: 0;}

.grid-links > div, .grid-links > a {position: relative;}
.grid-links:not(.staff-grid) > div::before, .grid-links > a::before {content: ""; visibility: visible; float: left; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; opacity: 0.5; background: radial-gradient(rgba(29, 29, 27, 0.3) 0%, rgb(29, 29, 27) 100%); z-index: 3; transition: opacity 0.3s ease;}
.grid-links > a:hover::before {opacity: 0.8; transition: opacity 0.3s ease;}


.grid-links .box {float: unset; width: unset; margin: unset; height: 100%;}
.grid-links .box img {--webkit-transform: unset; transform: unset; margin: unset; top: unset; right: unset; left: unset; width: 100%; height: 100%; max-width: unset; max-height: 260px; position: relative; z-index: 0; object-fit: cover;}
.grid-links .box .title {font-size: var(--font-size-22); position: absolute; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; z-index: 4;}



@media screen and (max-width: 1240px){
  .bentonpark .white .footer .left {width: 40%;}
}

@media (max-width: 1180px){
  .bentonpark .header a.logo {height: 0; padding-bottom: 55%;}
}

@media (max-width: 985px){
  .bentonpark .top-header-wrap .border {background-size: 100% 100%;}
  .bentonpark .mobile-header .left {width: 168px;}
  .bentonpark .mobile-header .right {padding: 30px 0 0 0;}
  .bentonpark .mobile-header a.logo {background: url(../images/bentonpark-logo.png) no-repeat 0 0; background-size: 100%; background-size: contain;}

  .bentonpark .mobile-nav .top, .bentonpark .mobile-nav li a {background: var(--orange-400);}
  .bentonpark .mobile-nav li li a {background: var(--white); color: var(--black);}
  .bentonpark .mobile-nav li.selected a, .bentonpark .mobile-nav li.selected li.selected a {color: var(--blue-400);}
  .bentonpark .mobile-nav li.selected li a {color: var(--grey-800);}
  .bentonpark .title-container {border-top: 2px solid var(--white);}

  .bentonpark .snavblock {padding: 0; background: none;}

  .mobile-header-wrap .buttons a.b1, .mobile-header-wrap .buttons a.b2, .mobile-header-wrap .buttons a.b3 {background: var(--blue-400);}
}

@media (max-width: 740px){
  .bentonpark .white .footer .left {padding: 0 0 0 20px;}
}

@media (max-width: 667px){
  .bentonpark .white .footer .left {width: 100%; margin: 0 0 20px 0;}
  .bentonpark .introbanners {height: auto;}
  .bentonpark .homeintro .introtext {padding: 30px 25px;}

  .bentonpark .addthis_sharing_toolbox, .bentonpark .footer .sociallinks {text-align: left;}
  .bentonpark .footer .translate {text-align: left;}

  .bentonpark .title-container .title p {font-size: 280%;}

  .bentonpark .introbanners .content .latest .twitter .tweets {min-height: 5px;}
}

@media (max-width: 600px){
  .slide-arrow.prev-arrow.slick-arrow {width: 30px; height: 30px;}
  .slide-arrow.next-arrow.slick-arrow {width: 30px; height: 30px;}

  .bentonpark .curriculum ul li {width: 48%;}
}

@media (max-width: 420px){
  .bentonpark .title-container .title p {font-size: 170%;}
  .bentonpark .title-container .title p, .bentonpark .title-container .title h1 {font-size: 200%;}
}
