html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:var(--main);text-shadow:none;color:#fff;}::selection{background:var(--main);text-shadow:none;color:var(--accent);}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
:root {
  --main: #FFF03F;
  --darkermain: #e6d839;
  --accent: #009FE3;
  --darkeraccent: #006f9f;
  --white: #ffffff;
  --offwhite: #fafafa;
  --black: #1a1a1a;
  --lightblue: #A1DAF7;
  --green: #3FA535;
--sidepadding: 15%;
}

body::-webkit-scrollbar {
  width: 11px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--main) var(--black);
}
body::-webkit-scrollbar-track {
  background: var(--black);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--main);
  border-radius: 6px;
  border: 3px solid var(--main);
}

html { box-sizing: border-box; font-size: 16px;} *, *:before, *:after { box-sizing: inherit; }
a{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition: all .3s ease-in-out;
text-decoration: none;
color: var(--accent); font-weight: 400;}
a img{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease;}
a:hover{color: var(--black);}
.smoothie{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease;}
h1,h2,h3,h4,h5,h6{margin: 0 0 10px 0; color: var(--accent); font-weight: 500; font-family:'Outfit', sans-serif;}

p{margin: 0 0 10px 0;}
strong{font-weight: 500; color: var(--accent);}
img, iframe{max-width: 100%;}

.container{width: 100%; max-width: 1920px; margin: 0 auto; font-family: 'Outfit', sans-serif; font-weight: 400; color: #222; /*box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); border-radius: 5px; */background: #fff; overflow: hidden;}
.privacycontainer{width: 100%; max-width: 1920px; margin: 0 auto; font-family: 'Outfit', sans-serif; font-weight: 400; color: #222; background: #fff;}
body{background: #f2f2f2; font-size: 18px;}
.header{width: 100%; max-width: 1920px; padding: 20px 40px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; position: absolute; top: 0; left: 0; z-index: 50000; transition: all 0.3s ease; background: linear-gradient(180deg,rgba(0,0,0,.58),transparent);}

.darkheader{background: var(--black);}
.logoholder{outline: 0px solid red; line-height: 30px; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding: 0; width: 200px;}
.logo{width: 100%; height: auto; position: relative; }

.navigation li{margin: 0; padding: 0;}
.navigation{list-style: none; list-style-type: none; position: relative; text-align: left; }
.navigation{display: flex; justify-content: flex-start; flex-wrap: wrap; order: 2; flex-grow: 0; outline: 0px solid red; align-items: center; margin: 0; padding: 0;}

.topnav{position: absolute; top: 0; right: 0; padding: 0 60px; color: #fff;}
.navlink{color: #fff; letter-spacing: 0px; font-size: 16px; position: relative; text-transform: uppercase; font-weight: 500; padding: 20px 30px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.navlink:hover{color: var(--main);}
.current{font-weight: 900;color: var(--main);}

.contactlink{padding: 10px 20px; background: var(--main); color: var(--accent); border-radius: 0px; font-size: 16px; margin-left: 20px; font-weight: 400; position: relative; overflow: hidden;}
.contactlink:hover{color: var(--main);}

.contactlink::before {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;transform: translateX(-100%);transition: all .3s;z-index: -1;}

.contactlink:hover::before {transform: translateX(0);}
.contactlink::before{background-color: var(--accent);}




.menu{background-color:transparent;border:none;cursor:pointer;display:flex;padding:0}.line{fill:none;stroke:var(--main);stroke-width:6;transition:stroke-dasharray 600ms cubic-bezier(.4,0,.2,1),stroke-dashoffset 600ms cubic-bezier(.4,0,.2,1)}.line1{stroke-dasharray:60 207;stroke-width:6}.line2{stroke-dasharray:60 60;stroke-width:6}.line3{stroke-dasharray:60 207;stroke-width:6}.opened .line1{stroke-dasharray:90 207;stroke-dashoffset:-134;stroke-width:6}.opened .line2{stroke-dasharray:1 60;stroke-dashoffset:-30;stroke-width:6}.opened .line3{stroke-dasharray:90 207;stroke-dashoffset:-134;stroke-width:6}



ul.primary,ul.sub{list-style: none; list-style-type: none; position: relative; text-align: left; }
/* prime */
ul.primary li a {display: block;}
ul.primary li {display: block;}

.hoverclass{background: var(--main); color: var(--accent);}

ul.primary {}
ul.sub { }
.subby {display: none;}
/* subs */
ul.sub {position: absolute;  width: auto; margin: 0; padding: 0;transition:all 0.3s; height: 0; pointer-events: none;border-top-right-radius: 10px;}

ul.sub li {float: none; margin: 0; background: var(--white); transform: translateY(-100%); transition: all 0.3s ease; opacity: 0;}

ul.sub li a {padding: 20px 30px; text-transform: capitalize; font-size: 14px; font-weight: 400; max-width: 300px;}


ul.sub li:last-child a {}
ul.sub li:first-child {box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.9); border-top: 0px solid var(--accent);}
ul.sub li:last-child {border-bottom-left-radius: 10px;border-bottom-right-radius: 10px; overflow: hidden;  }
/* sub display*/
ul.primary li:hover ul {display: block; opacity: 1; height: 500px; --count:8; height:calc(var(--count)*45px);pointer-events: all;}
ul.primary li a.drop{transition: 0.3s all ease; border-top-left-radius: 10px; border-top-right-radius: 10px;/*border-top-left-radius: 10px; border-top-right-radius: 10px;*/}
/* keeps the tab background white */
ul.primary li:hover a.drop {/*background: #fff;background: rgba(246,246,246,0.9); color: #1a1a1a;*/}

ul.sub li a{color: var(--accent); background: var(--main); text-transform: uppercase;}
ul.sub li a:hover {background: var(--darkermain);}

ul.primary li:hover a.drop {background: #fff; }

ul.sub li{--index:1;transition-delay: calc(0.1s * var(--index));}
ul.primary li:hover ul.sub li {transform: translateY(0); opacity: 1;}

.subarrow{position: absolute; bottom: -6px; left: 0; width: 100%; display: flex; justify-content: center; flex-wrap: wrap; color: var(--main);display: none; }

.navdrop:hover{background: var(--main); color: var(--accent);}
.primary:after{/*content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; background: #fff;*/}
.navlink{z-index: 6;}


.headersocial{display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 10px 0 0;}
.headersocial a{color: var(--black); margin-right: 10px; font-size: 16px; border: 1px solid var(--black); width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; border-radius: 50%;}
.contactsocial a{color: var(--accent); margin-right: 10px; font-size: 16px; border: 1px solid var(--accent); width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; border-radius: 50%;}
.headersocial a i{width: 24px; text-align: center;}
.contactsocial a i{width: 24px; text-align: center;}

.headersocial a.lilink{background: #0077B5; border: 1px solid #0077B5; color: #fff;}
.headersocial a.fblink{background: #3b5998; border: 1px solid #3b5998; color: #fff;}
.headersocial a.twlink{background: #55acee; border: 1px solid #55acee; color: #fff;}
.headersocial a.instalink{background: #C13584; border: 1px solid #C13584; color: #fff;}
.headersocial a.emaillink{background: var(--accent); border: 1px solid var(--accent); color: var(--main);}
.headersocial a.phonelink{background: var(--accent); border: 1px solid var(--accent); color: var(--main);}
.headersocial a.memberlink{background: var(--main); border: 1px solid var(--main); color: var(--accent);}

.headersocial a:hover{background: var(--main); border: 1px solid var(--main); color: var(--accent);}




.swiperholders{position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.swiper-slide{outline: 0px solid red;}

.swiper-buttons{position: absolute; top: 70px; /*left: calc((100% - 1200px) / 2);*/ right:0; z-index: 10; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.swiper-button{padding: 5px 10px; color: var(--main); background: #fff; cursor: pointer; outline: none;}

.swiper-btns{position: absolute; bottom: 20px; right: 20px; color: #fff; z-index: 6; display: flex; justify-content: flex-end;}
.swiper-btn{cursor: pointer; margin-left: 10px; border: 0px solid #fff; padding: 5px 10px 7px; border-radius: 50%; box-sizing: border-box; background: rgba(255,255,255,0.5); transition: all 0.3s ease;}
.swiper-btn img{width: 15px; }
.swiper-btn:hover{background: #fff;}



.hero{width: 100%; padding: 0; height: 80vh; overflow: hidden; position: relative; z-index: 5; border-bottom: 0px solid var(--main); display: flex; justify-content: flex-end; flex-wrap: wrap;}
.shallowhero{height: 60vh;}


.hero{background: #000;}
.herocover{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 0 40px; z-index: 5; background: rgba(0,0,0,0.4);}

.herotext{max-width: 60%; z-index: 4; padding-top: 100px; padding-top: 0; outline: 0px solid red; text-align: left;margin-top: 0px; position: relative; font-weight: 500;}
.shallowherocover{padding-top: 40px;}


.shallowherotext{width: 100%; z-index: 4; padding-top: 100px; margin: 0 auto; height: 100%; display: flex; justify-content: flex-start; align-content: center; flex-wrap: wrap;}
.heroheadernew{font-size: 48px; line-height: 60px; color: #fff; margin:0px; opacity: 1; font-weight: 500; text-align: center; }

.herosub{font-size: 16px; line-height: 26px; font-weight: 500; color: #fff;text-shadow: 0px 0px 7px rgba(0,0,0,0.6); padding: 20px 0;}

.herosub ul li{margin: 0; padding: 0;text-shadow: 0px 0px 7px rgba(0,0,0,0.6);}
.homeherosub{margin-bottom: 40px;}

.herobutton{padding-top: 20px;}
.herobuttonnew{padding-top: 10px; width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; outline: 0px solid red;}

.herolink{padding-top: 10px;}
.herobtn{padding: 10px 20px; background:var(--main); border-radius: 5px; text-transform: uppercase; color: var(--accent); font-size: 18px; font-weight: 400; letter-spacing: 1px;}
.herobtn:hover{opacity: 1; background: var(--accent);}

.heroslideshow{width: 100%; height: 100%; position: relative; z-index: 1; position: relative; }
.heroslideshow img{width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 4;}

.shallowheroslideshow{width: 100%; height: 100%; position: relative; z-index: 1; position: relative; }
.shallowheroslideshow img{width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 4;}

.heroslide{width: 100%; height: 80vh; z-index: 4; position: relative; }
.shallowheroslide{height: 60vh;}
.heroslide img{width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 4;}
.testslide{background-size: cover !important; background-repeat: no-repeat !important; background-blend-mode: multiply !important;}

.topslide{object-position: top center;}
.centerslide{object-position: center center;}
.bottomslide{object-position: bottom center;}


/*https://usavolleyball.org/
 */
.comingsoon{position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background: var(--white); flex-direction: column;}
.comingsoonimage{width: 80%; max-width: 300px;}
.comingsoontext{padding-top: 40px;text-align: center; color: var(--main);}
/* ==========================================================================
   FOOTER
   ========================================================================== */

.subfooter{width: 100%; background-image: url(../img/students.jpg); background-color: var(--main); background-size: cover; background-position: bottom; background-blend-mode: soft-light; padding: 80px var(--sidepadding); display: flex; justify-content: center; flex-wrap: wrap; position: relative;box-shadow: inset 0 20px 20px -20px rgb(0 0 0 / 30%), inset 0 -20px 20px -20px rgb(0 0 0 / 30%); }
.subform{width: 50%; position: relative; z-index: 10; text-align: left;}
.subformimage{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4;}
.subformimage img{width: 100%; height: 100%; object-fit: cover; filter: grayscale(1);}
.subformcover{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; background: var(--main); opacity: 0.9; display: none;}

.sform{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.sforminput{width: calc(100% - 100px); padding: 10px; border: 3px solid var(--accent);}
.sformsubmit{width: 100px; border: 1px solid var(--accent); padding: 10px 15px; background: var(--accent); color: var(--main); transition: all 0.3s ease; cursor: pointer; font-size: 12px; font-weight: 500; text-transform: uppercase; }
.sformsubmit:hover{background: var(--main); color: var(--accent); border: 1px solid var (--accent);}

.footer{width: 100%; font-size: 12px; background: #2D3047; background: var(--main); color: #1a1a1a; background: #fafafa; position: relative; overflow: hidden;box-shadow: inset 0 5px 5px -5px rgb(0 0 0 / 20%), inset 0 -5px 5px -5px rgb(0 0 0 / 20%); }
.innerfooter{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; width: 100%; margin: 0 auto; padding: 80px 40px 20px;}
.footerleft{width: 25%; }
.footleft img{width: 200px;}

.footermiddle{width: 50%; display: flex; justify-content: flex-start;}
.footlinks1{width: 50%;}
.footlinks2{width: 50%;}


.footerright{width: 25%;}
.logofooter{width: 100%; max-width: 200px; display: inline-block; margin-bottom: 20px;}
.logofooter img{width: 100%;}
.logofooter svg{width: 100%; height: auto;}

.logowhite{color: #fff; transition: all 0.3s ease;}
.logowhite:hover{color: var(--main);}
.footerstatement{font-size: 20px; margin-bottom: 30px;}

.footlinks a{display: block; color: var(--accent); margin-bottom: 10px; font-size: 18px; font-weight: 400;}
.footlinks a:hover{color: var(--main);}
.footlinks a.fullerlink{font-weight: 700;}
.footlinks a.footcurrent{font-weight: 700;}
.footcontactlinks a{display: block; color: #1a1a1a; margin-bottom: 10px; font-size: 18px; padding-left: 0px;}
.footcontactlinks a:hover{color: var(--main);}

.footright{width: 100%; outline: 0px solid white; padding: 0;background: linear-gradient(to bottom, rgba(0,173,239,0.5) 0%, rgba(0,173,239,1) 100%); position: relative;}
.footbottom{width: 100%; text-align: left; background: var(--accent); padding: 20px 40px;}

.foothead a{width: 100%; font-size: 24px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; color: #fff; letter-spacing: -1px;}
.foothead{margin-bottom: 20px;}

.foothead a:hover{color: var(--main);}


.footaddress{padding: 0; font-size: 18px;}
.footnav{width: 100%;}
.footnavflex{width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 20px;}
.footnav a{display: block; margin-bottom: 2px;}
.footnavlink{color: #1a1a1a;}
.footnavlink:hover{color: var(--main);}

.leftfootnav{display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 20px; display: none;}
.leftfootnav span{color: #fff; margin: 0 5px;}
.leftfootnav a{color: var(--main);}
.leftfootnav a:hover{color: #fff;}



.footersocial{display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 20px 0 0;}
.footersocial a{color: var(--accent); margin-right: 10px; font-size: 16px; border: 1px solid var(--accent); width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; border-radius: 50%;}

.footersocial a i{width: 24px; text-align: center;}
.contactsocial a i{width: 24px; text-align: center;}



.footersocial a.lilink:hover{background: #0077B5; border: 1px solid #0077B5; color: #fff;}
.footersocial a.fblink:hover{background: #3b5998; border: 1px solid #3b5998; color: #fff;}
.footersocial a.twlink:hover{background: #55acee; border: 1px solid #55acee; color: #fff;}
.footersocial a.instalink:hover{background: #C13584; border: 1px solid #C13584; color: #fff;}
.footersocial a.emaillink:hover{background: var(--main); border: 1px solid var(--main); color: #fff;}

.contactsocial a.lilink:hover{background: #0077B5; border: 1px solid #0077B5; color: #fff;}
.contactsocial a.fblink:hover{background: #3b5998; border: 1px solid #3b5998; color: #fff;}
.contactsocial a.twlink:hover{background: #55acee; border: 1px solid #55acee; color: #fff;}
.contactsocial a.instalink:hover{background: #C13584; border: 1px solid #C13584; color: #fff;}
.contactsocial a.emaillink:hover{background: var(--main); border: 1px solid var(--main); color: #fff;}

.copy span{margin: 0 5px;}
.copy a{color: var(--main); font-weight: 700;}
.copy a:hover{color: var(--offwhite);}
.copyright{padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.2); margin-bottom: 15px; display: inline-block;}
.vat{ color: var(--offwhite); margin-bottom: 5px;}

/*ALT FOOTER COLORS*/


.footersocial a:hover{background: var(--main);}

.footer a:hover{transform: translateX(3px);}

.nohero{width: 100%; padding: 100px 0 0; height: auto; overflow: hidden; position: relative; z-index: 5; display: flex; justify-content: flex-end; flex-wrap: wrap; background: #f6f6f6; box-shadow: 0 0 transparent;}

/* ==========================================================================
   hOMEPAGE
   ========================================================================== */

.maincontent{width: 100%; background: #f7f7f7 url(../img/shape1.png) top right no-repeat; display: block; padding-bottom: 0px;}


.homeheadings{margin: 0 auto; width: 100%; padding: 100px var(--sidepadding) 0;}
.homecontent{margin: 0 auto; width: 100%; padding: 40px var(--sidepadding) 0;}
.homeinnercontent{margin: 0 auto; width: 100%; padding: 0 var(--sidepadding) 0;}

.homeheadingsbutton{margin: 0;}


.homestories{width: 100%; padding: 60px var(--sidepadding); background: linear-gradient(to bottom, /*rgba(0,173,239,0.1)*/transparent 20%, var(--accent) 20.1%, var(--darkeraccent) 79.9%, transparent 80%); }
.homevideo{background: #fff; width: 100%; padding: 0px; box-shadow:  0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.059); box-shadow: 5px 5px 60px rgb(0 0 0 / 30%); border-radius: 10px; overflow: hidden; position: relative; border: 5px solid var(--accent);}

/* center the blockquote in the page */

.blockquote{position:relative;font-weight:800;color:var(--accent);padding:30px 0;width:100%;max-width:1900px;z-index:1;margin:0 0 80px;align-self:center;border-top:solid 1px;border-bottom:solid 1px}
.blockquote h2{position:relative;color:var(--black);font-size:1.5rem;font-weight:800;line-height:1;margin:0}
.blockquote:after{position:absolute;content:"”";color:var(--accent);font-size:10rem;line-height:0;bottom:-43px;right:30px}

.blockquote h4{position:relative;color:var(--accent);font-size:1.1rem;font-weight:400;line-height:1;margin:0;padding-top:20px;z-index:1}

.smallquote h2{font-size: 1.1rem;}
.smallquote h4{font-size: 0.8rem;}


.panelsection{background: linear-gradient(to right,var(--main),var(--accent)); padding: 80px; width: 100%; margin: 40px auto; display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center; box-shadow: inset 0 20px 20px -20px rgb(0 0 0 / 30%), inset 0 -20px 20px -20px rgb(0 0 0 / 30%); position: relative; min-height: 300px;}
.panelsectionimage{width: 50%; height: 100%; position: absolute; top: 0; left: 0; z-index: 4;}
.panelsectionimagecover{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index:5;}
.panelsectionimage img{top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 4;}
.panelsectioncontent{width: 70%; background: #fff; padding: 40px; position: relative; z-index: 5; margin-right: 0px;box-shadow: rgba(0,0,0,.25) 0 3px 11px 0;}

.panelhead{font-size: 1.0rem; font-weight: 500; color: var(--accent); margin-bottom: 20px;}
.paneltext{font-size: 0.9rem; font-weight: 500; color: var(--accent);}
.contacttext a{color: var(--offwhite);}
.contacttext a:hover{color: var(--accent);}

.contactbutton{margin: 40px 0;}


.contactimage{width: 100%;}

.contactsection{background: linear-gradient(to right,#f8ca1b,#f9b233); padding: 40px var(--sidepadding); width: 100%; margin: 0px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; box-shadow: inset 0 20px 20px -20px rgb(0 0 0 / 30%), inset 0 -20px 20px -20px rgb(0 0 0 / 30%);
}
.contactsectionleft{width: 49%;}
.contactsectionright{width: 49%;}

.contacthead{font-size: 20px; font-weight: 400; color: var(--accent); margin-bottom: 20px;}
.contacttext{font-size: 22px; font-weight: 400; color: var(--accent);}
.contacttext a{color: var(--offwhite);}
.contacttext a:hover{color: var(--accent);}

.contactbutton{margin: 40px 0;}


.contactimage{width: 100%;}


.btn {
 display: inline-block;
 padding:10px 20px;
 font-size: 16px;
 font-weight: 700;
 cursor: pointer;
 position: relative;
 border-radius: 10px;
 text-decoration: none;
 overflow: hidden;
 z-index: 1;
 font-family: inherit;
}

.btn::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 
 transform: translateX(-100%);
 transition: all .3s;
 z-index: -1;
}

.btn:hover::before {
 transform: translateX(0);
}
.btn-yellow{color: #fff;background: var(--main);}
.btn-yellow::before{background-color: var(--accent);}
.btn-yellow:hover{color: var(--main);}

.btn-dark{color: #fff;background: var(--accent);}
.btn-dark::before{background-color: var(--main);}
.btn-dark:hover{color: var(--accent);}


/* ==========================================================================
   SKEW GRID
   ========================================================================== */
*{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.containero{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:40px;padding:40px}
.containero .wrapper{transform:skew(-10deg);transition:0.25s}
.containero .wrapper:before{content:'';left:0;top:0;height:calc(100% - 10px);width:calc(100% - 10px);border-radius:40px;opacity:0;border:2px solid #ece9e6;position:absolute;z-index:-1;transition:0.5s 0.05s}
.containero .wrapper:hover:before{opacity:1;transform:translateY(1.5rem) translateX(1.5rem)}
.containero .wrapper:hover{transform:translateX(-1rem) translateY(-1rem) skew(-10deg)}
.containero .wrapper:hover .card{box-shadow:.5rem .5rem 1rem rgba(0,0,0,.1)}
.containero .wrapper:hover .card:after{background-blend-mode:normal}
.containero .wrapper:hover .card .fal{bottom:4rem;background-color:rgba(255,255,255,.8)}
.containero .card{background-color:#fff;border-radius:40px;height:15rem;padding:2rem;position:relative;overflow:hidden}
.containero .card .fal{position:absolute;bottom:-1rem;right:3rem;border-radius:100%;padding:1rem;font-size:1.5rem;color:#373f51;z-index:1;transform:skew(10deg) translateY(50%);text-align:center;transition:0.25s}
.containero .card .cardtitle{position:absolute;display:block;bottom:0;left:0;z-index:100;font-size:24px;width:100%;color:var(--main);font-weight:500;background:var(--accent);padding:20px}
.cardimage{position:absolute;display:block;bottom:0;left:0;top:0;right:0;z-index:95;background-color:#373f51;background-blend-mode:screen;transform:skew(10deg) scale(1.2);transition:all 0.3s ease}
.cardimage img{width:100%;height:100%;object-fit:cover}.wrapper:hover .cardimage{transform:skew(10deg) scale(1.1)}


/* ==========================================================================
   HOME TESTIMONIALS
   ========================================================================== */
.hometestimonials{background-image: url(../img/students.jpg); background-color: var(--main); background-size: cover; background-position: bottom; background-blend-mode: soft-light; padding: 80px var(--sidepadding);box-shadow: inset 0 20px 20px -20px rgb(0 0 0 / 30%), inset 0 -20px 20px -20px rgb(0 0 0 / 30%); margin: 40px 0;}
.testimonialswiper {width: 100%;height: 100%; box-sizing: border-box; overflow: hidden; padding-bottom: 80px; position: relative;}
.testimonialslide {text-align: center;font-size: 18px; padding: 20px 22%;}
.quoteholder{width: 100%; display: flex; justify-content: center; margin-bottom: 40px;}
.quote{font-size: 72px; line-height: 80px; color: var(--darkeraccent); border: 2px solid var(--darkeraccent); display: inline-block; width: 50px; height: 50px; display: flex; justify-content: center; align-content: center; border-radius: 25px;}
.thequote{font-size: 22px; color: var(--darkeraccent);}
.testimonial-name{font-size: 16px;}
.testimonial-title{font-size: 12px; color: var(--accent);}
.testheader{padding: 0 0 40px; text-align: center; color: var(--darkeraccent); font-weight: 400; }

.swiper-pagination-bullet {width: 16px;height: 16px; border-radius: 8px; border: 1px solid var(--darkeraccent); background: none;}
.swiper-pagination-bullet-active {background: var(--darkeraccent);}

.fund-slide{display: flex; justify-content: center; align-items: center; height: auto !important; filter: grayscale(1); transition: all 0.3s ease;}
.fund-slide img{max-width: 160px; max-height: 120px;}
.fund-slide:hover{filter: grayscale(0);}
.swiper-funders{padding:40px 0 40px;}

.homelogos{ background: rgba(255,255,255,1);}

.peopleboxes{width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px; padding: 40px var(--sidepadding);}
.peoplebox{background: #fff;border-radius: 0px; position: relative;box-shadow:  20px 20px 60px #bebebe, 20px -20px 60px #ffffff;}
.peopleboxbar{position: absolute; top: 0; left: 0; width: 100%; height: 30px;background: linear-gradient(to right,#f8ca1b,#f9b233); z-index: 3;}
.peopleboxupper{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 10px 0 0 10px; z-index: 4; position: relative;}
.peopleboximage{width: 200px; height: 200px; overflow: hidden; }
.peopleboximage img{width: 100%; height: 100%; object-fit: cover;filter: grayscale(1);}
.peopleboxquote{width: calc(100% - 240px); padding-right: 40px;}
.peopleboxdetails{width: 100%; padding: 40px;}
.peopleboxtitle{font-size: 22px; color: var(--accent); transition: all 0.3s ease;}
.peopleboxjob{font-size: 16px; color: var(--main); font-weight: 400; margin-bottom: 5px; transition: all 0.3s ease;}
.peoplebox:hover img{transform: scale(1.1,1.1);filter: grayscale(0);}
.peoplebox:hover .peopleboxtext{color: var(--main);}
.peoplebox:hover {box-shadow:  10px 10px 20px #bebebe, 10px -10px 20px #ffffff;}

.peopleboxquote{color: var(--accent); font-size: 16px;}
.peopleboxquote strong{color: var(--accent); font-size: 20px;} 




.personheadings{margin: 0 auto; width: 100%; padding: 100px var(--sidepadding) 0; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}
.personimage{width: 300px; height: 300px;}
.personimage img{width: 100%; height: 100%; object-fit: cover;}
.personheadingtext{width: calc(100% - 300px); padding-left: 40px;}


.sqtables{display: flex; justify-content: space-between; flex-wrap: wrap;}

.skillstable{ width: calc(50% - 20px);}

.skillstable {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.skillstable thead tr {
    background-color: var(--main);
    color: var(--accent);
    text-align: left;
    font-weight: 700;
}

.skillstable th,
.skillstable td {
    padding: 12px 15px;
}

.skillstable tbody tr {
    border-bottom: 1px solid #dddddd;
}

.skillstable tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.skillstable tbody tr:last-of-type {
    border-bottom: 2px solid var(--main);
}




.projecttestimonialholder{background: #fff; padding: 40px; box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); width:calc(100% - 80px); margin: 80px auto;}
.projecttestimonial{font-style: italic; font-size: 18px;}
.projecttestimonialtitle{font-size: 14px; margin-bottom: 0px;}
.projecttestimonialtitle span{font-weight: 900;}



.logogrid{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px; padding: 40px 0;}
.eachlogo{filter: grayscale(0); display: flex; justify-content: center; align-content: center; align-items: center; transition: all 0.3s ease;}
.eachlogo:hover{filter: grayscale(1);}
.eachlogo img{max-height: 100px; width:auto;}



/* ==========================================================================
   MOSAIC
   ========================================================================== */
.mosaicbreadcrumbs{margin-bottom: 20px;}
.bclink{font-size: 22px; font-weight: 500;}
.bclink:hover{}
.mosaiccontent{width: 100%; max-width: 820px; padding: 80px 40px; margin: 0 auto; position: relative;}
.mosaicpanel{width: calc(100% + 80px); transform: translateX(-40px); background: #F9FAFB; padding: 80px 40px; margin: 40px 0; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.mosaicbutton{margin: 20px 0;}
.mosaicpanelh2{font-weight: 700; margin-bottom: 20px;}
.bodyh{margin: 30px 0 20px 0; font-weight: 500; letter-spacing: 0px;}

.mosaicheader{font-size: 22px; margin: 20px 0 10px;}
.mainheader{color: var(--main);}
.accentheader{color: var(--accent);}
.thinheader{font-weight: 300;}
.thickheader{font-weight: 500;}

.singleimage{width: 100%; margin:40px auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.singleimage img{width: 100%;}
.halfsingleimagewidth img{width: 50%;}

.centersingleimagealign{justify-content: center;}
.rightsingleimagealign{justify-content: flex-end;}
.leftsingleimagealign{justify-content: flex-start;}

.tabsection{margin: 40px 0;}


.newsimagecontent{width:100%; margin: 60px auto; outline: 0px solid red;box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);}

.accordionholder{width: 100%; margin: 40px auto;}



.accordionheader{font-weight: 700; color: var(--accent);}


.mosaictable td{padding: 10px 10px 10px 0;}
  



.embed-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0;
	height: 0;
}
.embed-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    border: none;
}

.embed-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    border: none;
}

.gallerycontent{box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); width:calc(100% - 80px); margin: 40px auto;}
.shadowgallery{box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); width:100%; margin: 40px auto;}


.oursupporters{padding: 40px 10%; color: var(--accent); font-weight: 500; font-size: 24px; text-align: center; width: 100%;}
.logogrid{display: flex; justify-content: space-around; flex-wrap: wrap; align-items: center; padding: 0 0 40px;}
.logogrid{display: grid; grid-template-columns: 1fr 1fr 1fr;}

.eachlogo{margin: 20px 20px 0 0; margin: 0; outline: 0px solid red; text-align: center; }
.eachlogo img{height: 70px; width: auto;}

[data-tab-label] {font-weight: 900;}

/* ==========================================================================
   SEARCH
   ========================================================================== */

.eachsearcharticle{width: 100%; background: #fff; padding: 20px; margin-bottom: 20px; position: relative; overflow: hidden;display: block; font-weight: 400;border-bottom: 5px solid var(--main);}

.onsearchbox{width: 100%;}

.eachnewsarrow{position: absolute; bottom: 0; right: 0; color: #fff; background: var(--main); padding: 10px 15px; z-index: 4; opacity: 0; transition: all 0.3s ease; transform: translateY(100%);}

.eachnewsarrow:hover i{-webkit-animation:bounceRight 1s alternate ease infinite;animation:bounceRight 1s alternate ease infinite}

.onsearchform{width: 100%;}

.searchform{width: auto; max-width: 0px; transition:all 0.5s linear; visibility: hidden; opacity: 0;}
.searchform.show{max-width: 1000px;visibility: visible; opacity: 1;}


.searchresultlink{color: #1a1a1a; font-family: 'Outfit', sans-serif; font-size: 14px; text-transform: uppercase; font-weight: 400; padding: 0;}
.searchresultlink:hover{opacity: 0.7;}
.eachsearcharticlecategory{position: absolute; bottom:5px; right:0; color: #fff; padding: 5px 10px;}
.eachsearchlink{font-weight: 300; font-size: 16px;}
.eachsearcharticle:hover .eachnewsarrow{opacity: 1; transform: translateY(0);}

.searchlink{width: 30px; font-size: 20px;}

.searchform{width: 100%; display: flex; justify-content: flex-end; flex-wrap: wrap;}
.searchbar{width: 100%; background: var(--main); padding: 20px 40px; display: none;}
.querysearchbar{width: 100%; background: #fff; padding: 0; display: none; margin-bottom: 20px;}
.innersearch{}
.searchbox{display: flex; flex-wrap: nowrap; align-self: center; justify-content: flex-end;}
.searchbox input{padding: 10px 10px; border: 0px solid #efefef; border: 0px solid var(--main); border-right: none; width:calc(100% - 40px); background: #f6f6f6;}
.searchbox input:focus{outline: 0px solid #1a1a1a; background: #efefef;}
.si1{width:calc(100% - 40px);}
.searchbtn{border: 0px solid var(--main); border-left: none; background: var(--main); color: #fff; text-transform: uppercase; width: 40px; transition:all 0.3s linear; outline: none; cursor: pointer;}


.searchbtn:hover{background:#fff;}
.searchbtn span{display: none;}

@-webkit-keyframes bounceRight{0%{-webkit-transform:translate(0);transform:translate(0)}50%{-webkit-transform:translate(5px);transform:translate(5px)}to{-webkit-transform:translate(0);transform:translate(0)}}@keyframes bounceRight{0%{-webkit-transform:translate(0);transform:translate(0)}50%{-webkit-transform:translate(5px);transform:translate(5px)}to{-webkit-transform:translate(0);transform:translate(0)}}


.paginatedtop{width:100%; display:flex; justify-content:space-between; flex-wrap:wrap; padding:5px 0; font-weight:400; font-size:0.8rem; color:var(--main); grid-column: 1 / 4;}
.noresults{font-size:1.1rem; font-weight: 400; color: var(--main);}
/*
    Paginator -
    Source: http://www.strangerstudios.com/sandbox/pagination/diggstyle.php (strangerstudios.com)
*/

div.pagination {
    padding: 3px;
    margin: 3px;
}

div.pagination a {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid var(--main);
    * zoom: 100%;
    text-decoration: none; /* no underline */
    font-size:0.8rem; font-weight: 400; color: var(--main);
}
div.pagination a:hover, div.pagination a:active {
    border: 1px solid var(--main);
background-color: var(--main);
    color: #fff;
}
div.pagination span.page_current {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid var(--main);

    * zoom: 100%;
    font-size:0.8rem;
    
    background-color: var(--main);
    color: #FFF;
}
div.pagination span.page_disabled {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #EEE;
    font-size:0.8rem;
    * zoom: 100%;

    color: #aaa;
}

* span.elipsis {zoom:100%}
                /*
                .listimage2{display: none;}
                .listinfo{padding-left: 20px;}
                */
.searchfooter{width: 100%;grid-column: 1 / 4;}
.thepaginator{width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}


/* ==========================================================================
   FORM
   ========================================================================== */
.contactbody{padding: 40px 0 0 20%;}
.contactinnercontent{display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0;}
.contactleft{width: 65%; padding:80px 40px 40px 40px;}
.contactcontent{width: 100%; max-width: 820px; padding: 80px 40px; margin: 0 auto;}
.contactinfo{width: 100%;}
.contactmap{width: 35%;}
.contacth1{width: 100%; padding-right: 0;}
.eachcontact{display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; margin-bottom: 10px;}
.contacticon{margin-right: 20px; min-width: 20px; text-align: left;}
.contactdetails{width: calc(100% - 60px); outline: 0px solid red;}
.gm-style-mtc div{font-size: 12px !important;}


.theform{width:100%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; margin: 40px 0 0; background: #fff;}
.halfinput{width:  49%; position: relative;}
.fullinput{width: 100%; position: relative;}
.theform label{font-size: 12px;}
.textinput{width: 100%; border:1px solid #f9f9f9; padding: 10px; font-size: 0.8rem; background: rgba(0,0,0,0.05); background: #fff; outline: 1px solid #aaa; color: #0C0C0B; margin-bottom: 20px;}
.textinput:focus{outline: 1px solid #0f0f0f; background: #f6f6f6;}
.submitbutton{width: 100%; font-weight: 500; text-transform: uppercase; padding: 15px; font-size: 18px; transition: 0.4s; cursor: pointer; margin-bottom: 20px; color: var(--main);background: var(--accent);}
.submitbutton:hover{background: var(--main); color: var(--accent);}
textarea{height: 200px; text-align: left;}
.smallprint{font-size: 12px;}
.subsmallprint{font-size: 12px;}


.linkemail{word-break: break-all;}

/* ==========================================================================
   GDPR
   ========================================================================== */

.privacylinks{width: 100%; padding: 40px 40px 20px; background: var(--main); display: flex; justify-content: space-between; flex-wrap: wrap; }
.privacylink{width: calc(50% - 10px); margin-bottom: 20px; padding: 10px; background: #fff; color: #00134E; transition: all 0.3s cubic-bezier(.25,.8,.25,1); text-transform: uppercase; font-weight: 400; font-size: 14px;}
.privacylink:hover{background: rgba(255,255,255,0.5); }

.privacycontent{width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.newprivacylinks{position: sticky; width: calc((100% - 820px) / 2); width: 340px; display: flex; flex-direction: column; justify-content: flex-start; top: 40px; left: 0; outline: 0px solid red;align-self: flex-start; padding: 80px 0;}

.newprivacylink{margin-bottom: 20px; display: block; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}
.newprivacyline{width: 60px; margin-right: 20px; height: 1px; background: #ccc; transition: all 0.3s ease;}
.newprivacytext{width: calc(100% - 80px);font-weight: 400; font-size: 12px; color: var(--black); transition: all 0.3s ease;}
.privacylink:hover{}

.newprivacycontent{padding: 80px 0 80px 40px; width: calc(100% - 360px); max-width: 820px; position: relative;}

.newprivacylink.active .newprivacytext{color: var(--main);width: calc(100% - 90px);}


.newprivacylink.active .newprivacyline{width: 70px; background: #222;}



.ptable{margin: 20px 0;}
.ptable tr td{padding: 20px; border: 1px solid #ccc;}
.ptable th{padding: 20px; background: var(--main); }
.ptable td.tpink{padding: 20px; background: var(--main); }
.ptable th p strong{font-weight: 700; color: #fff;}
.ptable td.tpink p strong{font-weight: 700; color: #fff;}

.sitemapul{}
.sitemapul ul{padding: 10px 0 0 20px; margin-bottom: 20px;}
.sitemapul li{margin-bottom: 5px;}


.eachuseful{width:100%; background:#f7f7f7; padding:20px 20px 40px 20px; margin-bottom:20px; position:relative;}

.usefullink{position:absolute; bottom:0; right:0; padding:10px; color: #fff; background: var(--main);}
.usefullink:hover{background: #fff; color: var(--main);}


.has-tooltip:hover + .tooltip,
.has-tooltip:focus + .tooltip,
.has-tooltip.hover + .tooltip {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1) rotate(0deg);
  pointer-events: inherit;
}
.has-tooltip:hover + .textinput { background-color: var(--accent);}
.has-tooltip{color: var(--accent);}
.tooltipper{font-weight: 700; width: 16px; height: 16px; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; background: var(--accent); color: #fff; border-radius: 8px; font-size: 10px;}
.fullinput label{display: flex; justify-content: flex-start; flex-wrap: wrap; padding-bottom: 5px;}
.tooltip {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.75) rotate(5deg);
  transform-origin: bottom center;
  padding: 10px 30px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
  color: #fff;
  transition: 0.15s ease-in-out;
  opacity: 0;
  width: 100%;
  max-width: 100%;
  pointer-events: none;
  z-index: 5;
}
.tooltip.blue {
  background: rgba(0,159,227, 0.75); 
}
.tooltip.blue:after {
  border-top: 5px solid rgba(0,159,227, 0.75);
}

.tooltip:hover {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1) rotate(0deg);
  pointer-events: inherit;
}
.tooltip img {
  max-width: 100%;
}
.tooltip:after {
  content: "";
  display: block;
  margin: 0 auto;
  widtH: 0;
  height: 0;
  border: 5px solid transparent;
  border-top: 5px solid rgba(0, 0, 0, 0.75);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
}

/* Preloader */
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:var(--accent); /* change if the mask should be a color other than white */
	z-index:9999999; /* makes sure it stays on top */
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeout forwards;
    animation-delay: 2s;
    animation-duration: 2s;
    transition: all ease 1s;
}

@keyframes fadeout {
    from { opacity: 1;}
    to { opacity: 0; z-index: -1000;}
}






/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 1920px) {.header{width: 1920px;left: calc((100% - 1920px)/2);}}

@media only screen and (min-width: 1220px) {.navigation{display: flex!important;}.ham{display: none; order: 4;}}
@media only screen and (max-width: 1220px) {
    :root {--sidepadding: 40px;}
    .navcalllink{display: none;}
    .header{align-items: center; z-index: 501; padding: 20px var(--sidepadding);}
    .topnav{padding: 0 var(--sidepadding);}
    .logoholder{order: 1;}
    .ham{display: block; order: 3; margin-right: 0px;}
    .fillbg{background: rgba(0,0,0,0.9);}
    
    .navigation{display: none; width: 100%; height: auto; text-align: right; padding: 40px; order: 4;}
    .navlink{display: block; width: 100%; margin: 0; font-size: 18px; margin-bottom: 10px; padding: 0 0 20px 0;}
    ul.primary li:hover ul { display: none;}
    .navlink i{display: none;}
    .navlink:hover{background: none;}
    .subby {display: block;}
    .subnavlink{font-size: 14px; margin-left: 20px;}
    .navpill{display: inline-block; padding: 0 !important;}
     .heroheadernew{font-size: 35px; line-height: 45px;}
    .containero{display:grid;grid-template-columns:1fr 1fr;}
     .testimonialslide {text-align: center;font-size: 18px; padding: 20px var(--sidepadding);}
    .footerleft{width: 100%; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ccc; text-align: center;}
    .footermiddle{width: 100%; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ccc; text-align: center;}
    .footerright{width: 100%; text-align: center;}
    .footersocial{display: flex; justify-content: center;}
    .footbottom{text-align: center;} 
    .containero{grid-template-columns: 1fr; grid-gap: 30px;}
}

@media only screen and (max-width: 800px) {
    
    .panelsection{padding: 80px 40px;}
    .panelsectioncontent{width: 100%; padding: 20px;}
    .subform{width: 100%;}
    .heroheadernew{font-size: 32px; line-height: 40px;}
    .herotext{max-width: 80%; }
    .maincontent{width: 100%; background: #f7f7f7 url(../img/shape2.png) top right no-repeat; }
    
    
     
    
   
}
@media only screen and (max-width: 500px) {
    :root {--sidepadding: 20px;}

    .herotext{max-width: 90%; }
    
}
/*
@media only screen and (max-width: 1220px) {
    .herotext{max-width: 100%; z-index: 4;}
    .heroheader{font-size: 40px; line-height: 45px; }
    .shallowheroheader{font-size: 60px; line-height: 60px; }
    .contactinfo{width: 100%; margin-bottom: 20px;}
    .mapopening{height: 400px;}
    

    
    .nocontent{display: none;}

.contactbartext1{padding-right: 200px;}
    
    .contactlink{background: none; padding: 0; color: #fff;}
    .contactlink.current{color: var(--main);}
    .contactlink:hover{color: var(--main);}
    .contactlink::before{display: none;}
    
    
    

    .current{background: none;}
    
}
@media only screen and (max-width: 1024px) {
    .homeinnercontent{padding: 80px 40px 0;}   

    .innerfooter{padding: 80px 40px 20px;}

    
    .locationlinks{width: 100%; padding: 0;}
.locationmap{width: 100%; height: 400px;}
    .locationinnercontent{ padding: 40px;}
    .contactcontent{display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 0 40px 0;}
        .homeservicesgrid{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;}
.hometestimonialholder{width: 100%; padding: 40px; background: url(../img/quotespad.png) center center no-repeat; text-align: center;}
    .homeservicesheader{text-align: center;}
    
    .hometestimonialimages{display: flex; justify-content: center; flex-wrap: wrap;}
    .hometestimonialimage{margin: 0 10px;}
     .footerleft{width: 100%; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--black); text-align: center;}
    .footermiddle{width: 100%; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--black); text-align: center;}
    .footerright{width: 100%; text-align: center;}
    .footersocial{display: flex; justify-content: center;}
    .footbottom{text-align: center;} 
    .homegrid{display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0;}
.grid1{grid-column: 1 / 4; transition: all 0.3s ease;justify-content: center; }
    
    .newheroh1{font-size: 42px;}
.newherop{font-size: 18px;}
    
.privacycontent{width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 80px 20px;}
.newprivacylinks{position: relative;width: 100%; max-width: 820px; margin: 0 auto; padding: 0 0 80px;}
.newprivacycontent{padding: 0; width: 100%; max-width: 820px; position: relative; margin: 0 auto;}
    .newprivacyline{display: none;}
    .newprivacytext{width: 100%;}
    
    
    
    
    .homeheadings{margin: 0 auto; width: 100%; padding: 60px 40px 0;}
.homeh1{font-size: 26px;}
.homeh2{font-size: 20px;}
    .caseboxes{padding: 40px;}
    .contactsection{padding: 40px;}
.homepanel{width: 100%; margin: 40px 0;}
.righthomepanel{padding-left: 40px;}
.lefthomepanel{padding-right: 40px;}
.homepanelcontent{background: #fff; padding: 80px;}
.righthomepanelcontent{padding-right: 40px;}
.lefthomepanelcontent{padding-left: 40px;}

.righthomepanelcontent{padding-right: 40px;}
.lefthomepanelcontent{padding-left: 40px;}    
.newsboxes{grid-template-columns: 1fr 1fr; padding: 60px 40px;}
    
    .peopleboxes{grid-template-columns: 1fr;  padding: 60px 40px;}
    .personheadings{margin: 0 auto; width: 100%; padding: 60px 40px 0; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}
.personimage{width: 100px; height: 100px;}
.personheadingtext{width: calc(100% - 200px); padding-left: 40px;}
    .skillstable{ width: 100%; margin-bottom: 20px;}
    h1{font-size: 1.4em;}
}


@media only screen and (max-width: 800px) {
    .container{width: 100%; margin: 0 auto;}
    

    .herotext{max-width: 90%;}
 

.heroslideshow{width: 100%;} 


    .privacylink{width: 100%; }

    .heroheader{font-size: 30px; line-height: 40px; }

   
    
.ptable tr td{padding: 5px;}
.ptable thead th{padding: 5px; }


    
    .heroheadernew{font-size: 24px; line-height: 36px;}

    
    
     
    .homeinnercontent{padding: 80px 20px 0;}   
    .aboutinnercontent{padding: 80px 20px;}   
    .homestories{padding: 80px 20px;} 
    
    .innerfooter{padding: 80px 40px 20px;}
    .locationinnercontent{ padding: 40px 20px;}
    .logoholder{padding: 0 20px; width: 300px;}
    .logo{width: 300px; }
    .header{padding-right: 0px;}
    .herocover{padding: 0 20px;}
    
    
.homesplit{display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;}
.homesplitleft{width: 100%; position: relative; display: flex; justify-content: flex-start; align-content: flex-start; flex-wrap: wrap; padding: 40px 40px 80px;}
.homesplitleft:after{position: absolute; top:100%; left: 0; height: 100%; width: 100%; height: 2px; background: #1a1a1a; content: '';}
.homesplitright{width: 100%; padding: 80px 0 0;}
  
    .header{width: 100%; top: 0; left: 0;}
    
    
       .newheroh1{font-size: 32px;}
.newherop{font-size: 16px;}
    .griditem{min-height: 200px;}
    
    .testholder{min-height: 300px; position: relative; overflow-y: auto; padding-top: 20px;}
    .newsboxes{grid-template-columns: 1fr;}
    .casebox{width: 100%; margin-bottom: 20px;}
    .servicelist li{padding: 12px; font-size: 12px;}
    .righthomepanel{padding-left: 0px;}
.lefthomepanel{padding-right: 0px;}
    .homepanelcontent{padding: 40px;}
    
    .contactsectionleft{width: 100%; margin-bottom: 0px;}
.contactsectionright{display: none;}
    
    .sectorlist{grid-template-columns: 1fr 1fr;}
   .logogrid{grid-template-columns: 1fr}
    .logogrid img{max-width: 150px;}
}

@media only screen and (max-width: 600px) {
    .subinput{width: 100%; max-width: 100%;}
    .subinputname{border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-right: 0px solid #fff; border-bottom: 1px solid var(--main);}
    .subscribesubmit{width: 100%; border-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;}
    
     .paginatedtop{grid-column: 1 / 2;}
    .searchfooter{grid-column: 1 / 2;}
    .eachspaceimage{width: 100%;}
    .eachspacecontent{width: 100%;}
    
        .homegrid{grid-template-columns: 1fr;}
.grid1{grid-column: 1 / 2;}
    .hometestimonialimage{width: 60px; border-radius: 30px; margin: 0 10px;}
    .hometestimonialimage img{width: 60px;}
    .viewallimage{width: 60px; border-radius: 30px; margin: 0 10px;}
    .viewallimage img{width: 60px;}
        .sectorlist{grid-template-columns: 1fr;}
     .mosaiclist{grid-template-columns: 1fr;}
}

*/
.hidden{display:none!important}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}@media print{*,*:before,*:after{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}