@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto:wght@400;500;700&display=swap');

:root {
  --pink: #bf0376;
  --blue: #1c7ab7;
  --red: #fe0000;
}

html{width:100%; height:100%}
body{width:100%; height: 100%; margin:0; font-size:16px; color:#666; background-color:#fff; font-family: 'Open Sans', sans-serif;overflow-x: hidden}
body{overflow-x: hidden}

div{background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; box-sizing: border-box}
h1, h2, h3, h4, h5{margin: 0px; padding: 0 0 30px; font-family: font-family: 'Roboto', sans-serif;}
h1{}
h2{color:#006aae; padding: 15px 0}
h3{padding: 30px 0}

a{text-decoration: none; color:#006aae; transition:all 300ms ease}

footer{min-height: 300px; background-color: #006aae; display: block; padding: 40px 10px; background-image: url("../images/footer-watermark.png"); background-size: contain; background-position: left; background-repeat: no-repeat !important}
footer > div{max-width: 1200px; margin: 0px auto; color: #fff; display:flex; justify-content: space-between; align-items: stretch}
footer > div > div{flex-grow: 1; width:100%; max-width: 50%}
footer > div > div:last-of-type{text-align: right}
footer a{color: #fff}
footer a:hover{color: pink}
footer i{font-size:20px; margin: 0 6px 0 0}
footer i:hover{opacity:0.7}

footer > div:nth-of-type(2){font-size:14px; margin: 20px auto 0}
footer > div:nth-of-type(2) > div:last-of-type{font-size:12px}

main{padding:0 0 60px}
main p{margin: 0px; padding: 10px 0 10px}

.button{display: inline-block; padding: 10px 30px; border:2px solid var(--blue); text-transform: uppercase; transition:all 300ms ease}
.button:hover{color:var(--pink); border:2px solid var(--pink)}
.center{text-align: center}

.footernav ul{list-style: none; padding: 0px; margin: 0px}
.footernav li{display:inline-block; padding:0px; margin: 0px}
.footernav a{display:block; padding: 0 15px 0 0; transition:all 300ms ease}
.footernav a:hover{opacity:0.5}

.fixedwidth{max-width:900px; margin: 0 auto}

#mastheadOuter{background:#fff; height: 80px; width:100%; text-align: center; box-shadow: 0px 0px 30px #000; z-index: 101; box-sizing: content-box}
#mastheadOuter.floated{position:fixed !important; top:-150px !important; left:0px !important; transition:all 1000ms ease}
#mastheadOuter.floated2{top:0px !important}
#mastheadInner{width:100%; max-width:1200px; margin: 0 10px; display: inline-block; position: relative}

#mobnavbutton{width:40px; position: fixed; top:30px; right:-100px; cursor:pointer; opacity: 0.7; transition:all 300ms ease; z-index: 120}
#mobnavbutton:hover{opacity: 1}
#mobnavbutton > div{height: 6px; width:100%; border-radius:10px; background-color: #666; margin: 0 0 8px}

#mobnav{background: #006aae; color: #fff; z-index: 200; position: fixed; top:0px; left:0px; width:100%; padding: 50px 10px 10px; display:none}
#mobnav ul{list-style: none; padding: 0px; margin: 0px}
#mobnav a{color:#fff; display: block; padding: 5px; border-bottom:1px solid #1f8bd0}
#mobnav ul > li:last-of-type a{border:0px}

#mobnavclose{width:40px; position: absolute; top:20px; right:20px; z-index: 10; cursor:pointer; opacity: 0.7; transition:all 300ms ease}
#mobnavclose:hover{opacity: 1}
#mobnavclose > div{height: 6px; width:100%; border-radius:10px; background-color: #fff; margin: 0 0 8px}

.mainnav{position: absolute; right:10px; top:2px; text-transform: uppercase; letter-spacing: 1px}
.mainnav ul{list-style: none; padding:0px; margin:0px; text-align: right}
.mainnav ul > li{margin:0px; display: inline-block; padding: 0 15px}
.mainnav a{font-weight:normal; font-size:16px; text-decoration: none; color: var(--pink); transition:all 300ms ease; display:block; border-bottom:3px solid #fff}
.mainnav a:hover{color: #006aae !important; border-bottom:2px solid #006aae}
.mainnav ul > li:last-of-type a{background: rgb(135,200,242);
background: var(--blue); color:#fff; padding: 10px 20px; border-radius:60px; border:0px}
.mainnav ul > li:last-of-type a:hover{color:#fff !important; background: var(--pink)}

.logo{position: absolute; left:10px; top:-5px; width:200px; height: 55px; background-image: url("../images/logo-top.jpg"); background-size: contain; background-repeat: no-repeat; background-position: center}

#heroOuter{background: #000; height:460px; width:100%; position: relative}
.heroH1{position: absolute; top:0px; left:0px;  width:100%; height: 100%; display: flex; justify-content: space-around; align-items: center; transition:all 300ms ease; z-index: 3; color:#fff; font-size:40px}
#heroOuter .mask{height:30px; background-image:url(../images/mask.png); position:absolute; width:100%; bottom:0px; z-index: 5; background-size: contain; background-repeat: no-repeat}
#heroOuter .mask h2{position:absolute; top:20px; text-align: center; width:100%}

#hero{position: absolute; width:100%; height: 100%; background-image: url(/wp-content/uploads/2022/02/vcom-blue.jpg); background-size: cover; background-position: center; z-index: 1}

#panelpos{width:100%; max-width: 1100px; margin: 0 auto; position: relative}

#panelpos .panel{width:100%; max-width:1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; position: absolute; left:0px; top:-400px; z-index: 100; color: #000}
#panelpos .panel > div{width:100%; transition:all 2s ease}
#panelpos .panel > div:first-of-type{color:#fff; text-shadow:1px 1px 5px rgb(0,0,0,1); font-size:18px}
#panelpos .panel > div:last-of-type{width: 100%; padding: 30px; background: rgb(255,255,255,0.8); backdrop-filter: blur(5px); max-width: 400px; min-width:400px}
#panelpos .panel > div:last-of-type strong{color:var(--pink)}
#panelpos h1{font-size:44px; margin: 0px; padding: 0px}
#panelpos h2{color:#fff}
#panelpos h3{color: var(--pink); margin: 0px; padding: 0 0 10px}
#panelpos p{margin: 0px; padding: 0 0 15px}

#pepOuter{background-color: #666; padding: 100px; margin: 0px auto 100px; color: #fff; text-align: center}

.slideleft{transform: translate(-50px, 0px); opacity: 0}

.pageHeading{text-align:center; color:#3A4245; font-size:40px; padding: 60px 10px 30px; margin: 0}

.seeAll{text-align: center; padding: 30px 10px}
.seeAll a{display:inline-block; padding: 12px 40px 15px; border:2px solid #333; text-align: center; font-size:30px; color: #333}
.seeAll a:hover{background-color: #333; color: #fff}

.ctaBoxes{display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; max-width:1200px; margin: 30px auto 0; padding: 0 10px; color: #fff}
.ctaBoxes > div{flex-grow: 1; width:100%; max-width:270px; height:270px; background:black; margin: 0 0 36px; overflow: hidden;background-image: url(https://www.meerkats.co.uk/images/hosting.jpg); background-position: center; background-size: cover}
.ctaBoxes a{width:100%; height: 100%; display: block}
.ctaBoxes a{color: #fff}
.ctaBoxes h2{display: block; position: absolute; bottom:20px; left:20px; padding: 0px; margin: 0px; transition:all 500ms ease; color: #fff}
.colorWedge{background-color: orange; position: absolute; transform:rotate(45deg); bottom:-200px; left:-200px; width:145%; height: 145%; transition:all 500ms ease; opacity: 0.5}
.ctaBoxes a:hover .colorWedge{left:-100px; bottom:-100px; opacity: 0.8}
.ctaBoxes a:hover h2{left:70px}

.ctaBoxes i{font-size:40px; position: absolute; bottom:15px; left:-50px; transition:all 500ms ease}
.ctaBoxes a:hover i{left:20px}

.ctaBoxes > div:nth-of-type(1){background-image:url(/wp-content/uploads/2022/02/card-05.jpg)}
.ctaBoxes > div:nth-of-type(4){background-image:url(/wp-content/uploads/2022/02/card-04.jpg)}
.ctaBoxes > div:nth-of-type(2){background-image:url(/wp-content/uploads/2022/02/card-08.jpg)}
.ctaBoxes > div:nth-of-type(3){background-image:url(/wp-content/uploads/2022/02/card-02.jpg)}
.ctaBoxes > div:nth-of-type(5){background-image:url(/wp-content/uploads/2022/02/card-07.jpg)}
.ctaBoxes > div:nth-of-type(6){background-image:url(/wp-content/uploads/2022/02/card-06.jpg)}
.ctaBoxes > div:nth-of-type(7){background-image:url(/wp-content/uploads/2022/02/card-03.jpg)}
.ctaBoxes > div:nth-of-type(8){background-image:url(/wp-content/uploads/2022/02/card-01.jpg)}

.ctaBoxes > div:nth-of-type(1) .colorWedge{background-color: #ff0084}
.ctaBoxes > div:nth-of-type(2) .colorWedge{background-color: #ff9000}
.ctaBoxes > div:nth-of-type(3) .colorWedge{background-color: #04ac00}
.ctaBoxes > div:nth-of-type(4) .colorWedge{background-color: #8a00c3}
.ctaBoxes > div:nth-of-type(5) .colorWedge{background-color: #00C3FF}
.ctaBoxes > div:nth-of-type(6) .colorWedge{background-color:#FF3700}
.ctaBoxes > div:nth-of-type(7) .colorWedge{background-color: #ff0084}
.ctaBoxes > div:nth-of-type(8) .colorWedge{background-color: #FFBE00}

.twoCols{padding: 30px; max-width: 1000px; column-count: 2; margin: 0px auto 30px}
.twoCols h2{padding: 0 0 15px; margin: 0px}

.newscontrols{width:100%; max-width: 1200px; margin: 0 auto}
.arrow{width:20px; height: 60px; position: absolute; top:120px; cursor:pointer; opacity:0.7; transition:all 300ms ease; background-size: 40%; background-color: #efefef; border:1px solid #666}
.arrow:hover{opacity:1}
.newscontrols .arrowl{left:-35px; background-image: url("../images/arrowl.png")}
.newscontrols .arrowr{right:-35px; background-image: url("../images/arrowr.png")}

.newsBoxes{max-width: 1200px; margin: 0 auto; height: 320px}
.newsBoxes > div{width:100%;  display: flex; justify-content: space-between; align-items: stretch; position: absolute; top:0px; position:absolute; top:0px; left:0px; transform:translate(2000px)}
.newsBoxes > div:first-of-type{transform:translate(0px)}
.newsBoxes > div > div{flex-grow:1; width:100%; max-width:47%; height: 300px; background-image: url(/wp-content/uploads/2022/02/card-03.jpg)}
.newsBoxes > div > div:nth-of-type(1){background-image: url(/wp-content/uploads/2022/02/card-06.jpg)}
.newsBoxes h2{color:#fff; font-size:30px; padding: 0px; margin: 0px}
.newsBoxes .newsTitle{background-color: rgba(255,126,000,0.8); position: absolute; left:-30px; top:-30px; padding: 15px; width:90%}
.newsBoxes > div > div:first-of-type .newsTitle{background-color: rgba(0,126,255,0.8)}

.silverPanel{padding: 60px 10px; margin: 50px 0 0; background: #efefef; width:100%}

.twoColsFlex{display: flex; justify-content: space-between; align-items: stretch; max-width:1200px; margin: 30px auto}
.twoColsFlex > div{width:43%; padding: 20px 30px}
.twoColsFlex > div{background-color: #fff; border-radius:20px; text-align: center}
.twoColsFlex h2{font-size:40px; color: var(--blue)}

#clients{display: flex; flex-wrap:wrap; justify-content: space-around; align-items: center; max-width: 1200px; margin: 30px auto 30px}
#clients > div{width:100%; max-width:100px; text-align: center; margin: 0 5px 20px}
#clients img{max-width:90%; max-height: 90%}

.calendarWrap{max-width:400px; height: 400px; border:1px solid #ccc; background-color: #fff; margin: 0 auto; border-radius: 6px}

.evItem{background: rgba(243,50,169,1); background: linear-gradient(to bottom, rgba(243,50,169,1) 0%, rgba(243,50,169,1) 18%, rgba(191,3,119,1) 71%, rgba(142,3,88,1) 100%);color: #fff; font-weight:bold; margin: 0 auto 5px; padding:15px; border-radius:4px; font-size:18px; text-align: left; cursor:pointer; transition:all 300ms ease}
.evItem:hover{transform:scale(1.02); background: linear-gradient(to bottom, rgba(47,130,181,1) 0%, rgba(47,130,181,1) 18%, rgba(0,107,174,1) 64%, rgba(0,51,82,1) 100%);}
.evItem i{position: absolute; top:20px; right:20px}
.evItem a{color: #fff}

.evButton{display: inline-block; padding: 10px 30px;  background: var(--blue); color:#fff; border-radius:4px; margin: 10px auto 0}
.evButton:hover{background: #333;}
	
.view-article{display: none}
.newslist{}
.newslist > div{margin: 30px auto; padding: 30px; border-top:8px solid var(--pink)}
.newsThumb{width: 200px; height: 200px; background-size: contain; background-position: center; background-repeat:no-repeat; float:right; margin-left: 50px}
.newsThumb img{max-width:100%; max-height:100%; display: none}
.newsbuttonwrap{background: var(--pink); color:#fff; display:inline-block; padding: 10px 40px; border-radius:20px; margin: 20px 0 0; transition:all 300ms ease}
.newsbuttonwrap:hover{background-color: #006aae}
.newsbuttonwrap a{color:#FFFFFF}
.newsInner{position: relative}
.newsInner .arrow-down{top:-30px !important}

.thedate{letter-spacing: 4px; text-transform: uppercase; font-size:14px; padding: 0 0 10px}

.newsMainImg{padding-bottom: 50%; background-position: center; background-size: contain}

#pepInner h2{color: #fff}

.newsH2{text-align: center; margin: 0px; padding: 0 10px 90px 10px; font-size:40px}
.clientsH2{text-align: center; margin: 30px 0 0; font-size:40px}
.eventsH2{text-align: center; margin: 0px 0 0; font-size:40px}

.filterswitches{display:none}

.splashstrip{background-color: #f8f8f8; height: 200px; background-position: center; background-size: cover}


#upcomingevents{display: flex; justify-content: space-around; align-items: stretch; max-width:1200px; margin: 30px auto; color: #fff; flex-wrap:wrap}
#upcomingevents > div{width:100%; max-width:32%; background-color: #ccc; padding: 30px 30px 60px; transition:all 300ms ease; cursor: pointer; z-index: 1; border-top-left-radius:5px; border-top-right-radius:5px}
#upcomingevents > div:hover{box-shadow:0 0 20px rgb(0,0,0,0.5); z-index: 2}
#upcomingevents > div:hover .arrow-down{top:0px}

#upcomingevents > div:nth-of-type(1){background-image:url(/wp-content/uploads/2022/02/card-06.jpg); border-top:8px solid green}
#upcomingevents > div:nth-of-type(2){background-image:url(/wp-content/uploads/2022/02/card-05.jpg); border-top:8px solid var(--pink)}
#upcomingevents > div:nth-of-type(3){background-image:url(/wp-content/uploads/2022/02/card-04.jpg); border-top:8px solid orangered}

#upcomingevents h3{margin: 0; padding: 0; text-shadow:1px 1px 0px rgb(0,0,0,0.6)}
#upcomingevents .title{z-index: 2; border-bottom:3px solid rgb(255,255,255,0.6); padding: 0 0 30px; margin: 0 0 30px}
#upcomingevents .date{padding-left: 22px; z-index: 2}
#upcomingevents .date i{display: block; width:18px; text-align: center; position: absolute; top:4px; left:0px}

#upcomingevents .location{padding-left: 22px; margin: 5px 0 0; z-index: 2}
#upcomingevents .location i{display: block; width:18px; text-align: center; position: absolute; top:2px; left:0px}
#upcomingevents .desc{z-index: 2}

#upcomingevents .fade{z-index: 1; background-color: rgb(0,0,0,0.7); width: 100%; height: 100%; position: absolute; top:0px; left:0px}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid var(--pink);
    z-index: 2;
    position: absolute; top:-5px; left:20px;
        transition:all 300ms ease
}
#upcomingevents > div:nth-of-type(1) .arrow-down{border-top: 20px solid green}
#upcomingevents > div:nth-of-type(3) .arrow-down{border-top: 20px solid orangered}

@media only screen and (max-width: 1100px) {
    .ctaBoxes{justify-content: space-around}
    #panelpos{max-width: 90%; margin: 30px auto}
    #panelpos .panel{position:relative; top:inherit; left:inherit; flex-direction: column}
    #panelpos .panel > div{max-width: 100% !important; padding: 0px !important}
    #heroOuter{height: 300px}
    #panelpos h1{font-size:44px; margin: 0px; padding: 0px; color:var(--blue); text-shadow:none !important}
    #panelpos h2{color:#666; text-shadow:none !important}
}

@media only screen and (max-width: 1000px) {
    .mask{background-image: none; padding: 40px 10px; bottom:-100px !important}
    .mainnav{display:none}
    #mobnavbutton{right:30px} 
}
@media only screen and (max-width: 900px) {
    .twoColsFlex{flex-direction: column}
    .twoColsFlex > div{width:100%; max-width: 100%}
    .newsThumb{float:none}
    #upcomingevents{flex-direction: column}
    #upcomingevents > div{width:96%; max-width: 600px !important; margin: 0 auto 30px}
}
@media only screen and (max-width: 800px) {
    .heroH1{font-size:20px !important}
    .twoCols{column-count: 1}

    footer > div{flex-direction: column}
    footer > div > div{max-width:100% !important; text-align: left !important; padding-left: 30px}
    footer > div > div:last-of-type{padding: 30px}
}