html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:#0074CC;text-shadow:none}::selection{background:#0074CC;text-shadow:none}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}





html { box-sizing: border-box; } *, *: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 0.3s ease;
text-decoration: none;
color: #0074CC; font-weight: 600;}
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{}
.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: #1a1a1a; letter-spacing: 0px; font-family: 'Red Hat Display', sans-serif; font-weight: 900; text-transform: uppercase;}
.whiteheader{color: #fff;}
p{margin: 0 0 10px 0;}
strong{font-weight: 800;}
img, iframe{max-width: 100%;}

.container{width: 100%; max-width: 1920px; margin: 0 auto; font-family: 'Red Hat Text', 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;}
body{background: #0074CC;}
.header{width: 100%; max-width: 1920px; padding: 30px 10%; display: flex; justify-content: space-between; flex-wrap: wrap; position: fixed; top: 0; z-index: 50000; transition: all 0.3s ease; background: linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,0) 100%);}
.thelogo{transition: all 0.3s ease; }
.logoholder{outline: 0px solid red; line-height: 30px;display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding: 20px 0; width: 200px; order: 1;}
.logo{width: 200px;}


.navigation{display: flex; justify-content: flex-end; flex-wrap: wrap; width: calc(100% - 200px); order: 2;}
.navlink{color: #fff; letter-spacing: 1px; font-size: 16px; position: relative; text-transform: uppercase; font-weight: 400; display: flex; justify-content: center; align-items: center; padding: 0 20px; outline: 0px solid red;}
.navigation span{margin: 0 20px; background: #feda6a; width: 1px; opacity: 0; display: none;}
.navlinker{position: absolute; top: 0; left: 0; width: 100%; height: 0; background: #0074CC; opacity: 0; transition: all 0.3s ease; display: none;}
.navlink:hover{opacity: 1; color: #0074CC;}
.navlink:hover .navlinker{opacity: 1; height: 20px;background: #0074CC;}

.current{font-weight: 900; color: #0074CC;}
.current .navlinker{height: 20px; background: #0074CC; opacity: 1;}


.newhero{width: 100%; padding: 0; height: 75vh; overflow: hidden; position: relative; z-index: 5;}
.newheroshallow{height: 50vh;}
.newheroslides{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6;}
.newheroslides img{width: 100%; height: 100%; object-fit: cover;}

.text2{background:#2B2A29; background: linear-gradient(#1a1a1a,#2B2A29 100%); color: white; mix-blend-mode: multiply; }
.text1{background:#001C31; background: linear-gradient(#004275,#001C31 100%); color: white; mix-blend-mode: multiply; }
.text3{background:#cc0000; background: linear-gradient(#800000,#cc0000 100%); color: white; mix-blend-mode: multiply; }
/*.text3{background: linear-gradient(216deg, rgba(77, 77, 77,0.05) 0%, rgba(77, 77, 77,0.05) 25%,rgba(42, 42, 42,0.05) 25%, rgba(42, 42, 42,0.05) 38%,rgba(223, 223, 223,0.05) 38%, rgba(223, 223, 223,0.05) 75%,rgba(36, 36, 36,0.05) 75%, rgba(36, 36, 36,0.05) 100%),linear-gradient(44deg, rgba(128, 128, 128,0.05) 0%, rgba(128, 128, 128,0.05) 34%,rgba(212, 212, 212,0.05) 34%, rgba(212, 212, 212,0.05) 57%,rgba(25, 25, 25,0.05) 57%, rgba(25, 25, 25,0.05) 89%,rgba(135, 135, 135,0.05) 89%, rgba(135, 135, 135,0.05) 100%),linear-gradient(241deg, rgba(55, 55, 55,0.05) 0%, rgba(55, 55, 55,0.05) 14%,rgba(209, 209, 209,0.05) 14%, rgba(209, 209, 209,0.05) 60%,rgba(245, 245, 245,0.05) 60%, rgba(245, 245, 245,0.05) 69%,rgba(164, 164, 164,0.05) 69%, rgba(164, 164, 164,0.05) 100%),linear-gradient(249deg, rgba(248, 248, 248,0.05) 0%, rgba(248, 248, 248,0.05) 32%,rgba(148, 148, 148,0.05) 32%, rgba(148, 148, 148,0.05) 35%,rgba(202, 202, 202,0.05) 35%, rgba(202, 202, 202,0.05) 51%,rgba(181, 181, 181,0.05) 51%, rgba(181, 181, 181,0.05) 100%),linear-gradient(92deg, hsl(214,0%,11%),hsl(214,0%,11%));}
/*
.text2{background: linear-gradient(45deg, rgb(64, 140, 190) 0%, rgb(64, 140, 190) 7%,rgb(62, 107, 145) 7%, rgb(62, 107, 145) 9%,rgb(49, 99, 131) 9%, rgb(49, 99, 131) 11%,rgb(116, 172, 211) 11%, rgb(116, 172, 211) 26%,rgb(125, 182, 214) 26%, rgb(125, 182, 214) 34%,rgb(40, 90, 136) 34%, rgb(40, 90, 136) 41%,rgb(39, 123, 190) 41%, rgb(39, 123, 190) 100%)}
.text4{background:#fff; color: black; mix-blend-mode: screen; }*/
.text{font-size: 80vh; line-height: 70vh; font-weight: bold; padding: 10px; width: 140vw; height: 140vh; position: absolute; left: -5vw;  bottom: -20vh; display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; z-index: 10;}
.shallowtext{font-size: 80vh; line-height: 70vh;}

.herobanner{position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 11; padding: 0 10%; display: flex; justify-content: flex-end; align-content: center; flex-wrap: wrap;}
.herobannertext{color: #fff; font-size: 40px; text-align: right; font-weight: 900; width: 100%; margin-bottom: 40px;}
.shallowherobannertext{font-size: 30px; margin-bottom: 0; padding-top: 60px;}
.round {
    position: relative;
    border: 2px solid #fff;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    transform: rotate(90deg);
    text-align: center;
}

#cta{
    width:100%; cursor: pointer; position: absolute; top: 0; left: 0;
}

#cta .arrow{left: 30%;}
.arrow {position: absolute; bottom: 0;  margin-left:0px; width: 12px; height: 12px; background-size: contain; top: 12px;}
.segunda{margin-left: 8px;}
.next {
	background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHN0eWxlPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxOS4xIDIxN2MyMC4yIDIwLjIgMTkuOSA1My4yLS42IDczLjdzLTUzLjUgMjAuOC03My43LjZsLTE5MC0xOTBjLTIwLjEtMjAuMi0xOS44LTUzLjIuNy03My43UzEwOSA2LjggMTI5LjEgMjdsMTkwIDE5MHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzE5LjEgMjkwLjVjMjAuMi0yMC4yIDE5LjktNTMuMi0uNi03My43cy01My41LTIwLjgtNzMuNy0uNmwtMTkwIDE5MGMtMjAuMiAyMC4yLTE5LjkgNTMuMi42IDczLjdzNTMuNSAyMC44IDczLjcuNmwxOTAtMTkweiIvPjwvc3ZnPg==);
}

@keyframes bounceAlpha {
  0% {opacity: 1; transform: translateX(0px) scale(1);}
  25%{opacity: 0; transform:translateX(10px) scale(0.9);}
  26%{opacity: 0; transform:translateX(-10px) scale(0.9);}
  55% {opacity: 1; transform: translateX(0px) scale(1);}
}

.bounceAlpha {
    animation-name: bounceAlpha;
    animation-duration:1.4s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}

.arrow.primera.bounceAlpha {
    animation-name: bounceAlpha;
    animation-duration:1.4s;
    animation-delay:0.2s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}

.arrow{
    animation-name: bounceAlpha;
    animation-duration:1.4s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}
.arrow.primera{
    animation-name: bounceAlpha;
    animation-duration:1.4s;
    animation-delay:0.2s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}

.hero{width: 100%; padding: 0; height: 90vh; overflow: hidden; position: relative; z-index: 5; border-bottom: 0px solid #f6f6f6;}
.shallowhero{height: 75vh;}

.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: #0074CC; background: #fff; cursor: pointer; outline: none;}



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





.homecontent{width:100%; margin:0; padding: 40px 10%; background: #fff;}
.hometext{width: 67%;}


.herolink:hover .herolinkarrow{display:inline-block;-webkit-animation:bounceRight 1s alternate ease infinite;animation:bounceRight 1s alternate ease infinite}

.bolink{padding: 15px 30px; background:#1a1a1a; text-transform: uppercase; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: 0px;}
.bolink:hover{opacity: 1; }
.bolink:hover .bolinkarrow{display:inline-block;-webkit-animation:bounceRight 1s alternate ease infinite;animation:bounceRight 1s alternate ease infinite}

@-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)}}

.bodylink{padding: 10px 20px; border: 1px solid #1a1a1a; text-transform: uppercase; color: #1a1a1a; font-size: 14px; letter-spacing: 1px;}
.bodylink:hover{opacity: 1; background: #1a1a1a; color: #fff;}


.footer{width: 100%; background: #f7f7f7; padding: 40px 10%; font-size: 12px;  display: flex; justify-content: center; flex-wrap: wrap; align-items: center; border-top: 0px solid #f6f6f6;}
.footerbuffer{width: 100%; height: 40px; background: #fff;}

.footersocial{display: flex; justify-content: center; flex-wrap: wrap; flex-grow: 1;outline: 0px solid red; width: 30%;}
.footersocial a{color: #1B2032; margin: 0 10px; font-size: 22px;}
.footersocial a:hover{ }
.footersocial a.gplink:hover{color: #ff0000;opacity: 1;}
.footersocial a.twlink:hover{color: #55acee;opacity: 1;}
.footersocial a.lilink:hover{color: #0077B5;opacity: 1;}
.footersocial a.fblink:hover{color: #3b5998;opacity: 1;}
.footersocial a.instalink:hover{color: #DD2A7B;opacity: 1;}
.copy{outline: 0px solid red; width: 35%; display: flex;}
.copy span{margin: 0 5px;}
.copy a{color: #0074CC; font-weight: 700;}

.copyright{color: #1B2032; justify-content: flex-start;}
.credits{color: #1B2032; justify-content: flex-end;}
.vat{color: #ccc; margin-bottom: 0;}



.bodyh{margin: 30px 0 20px 0; font-weight: 500; letter-spacing: 0px;}


.whitelink{padding: 10px 20px; background:#fff; border-radius: 5px; text-transform: uppercase; color: #0074CC; font-size: 14px; font-weight: 600; letter-spacing: 0px;}
.whitelink:hover{opacity: 1; background: #505055;}

.yellowlink{padding: 10px 20px; background:#0074CC; border-radius: 5px; text-transform: uppercase; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0px;}
.yellowlink:hover{opacity: 1; background: #505055;}

.homesections{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; background: #f6f6f6; border-bottom: 0px solid #f6f6f6; position: relative;}
.homeabout{width: calc(67% - 2px); padding: 100px 10%; position: relative; z-index: 5; overflow: hidden;}
.homeaboutcontent{position: relative; z-index: 6;}
.homeabout{color: #505055;}
.nobg{background: none;}
.inset{position: absolute; z-index: 5; pointer-events: none; bottom: 0; left: 0; bottom: -100px; left: -70px; font-size: 340px; line-height: 340px; font-weight: 900; opacity: 0.05;}

.homeopening{width: calc(33% + 2px); background: #fff; padding: 100px 10% 100px 40px; }
.homeopening{color: #fff; position: relative;}
.businessfooter{position: absolute; bottom: 0; left: 0; height: 200px; width: 100%; background: linear-gradient(to top,#505055 0, transparent); pointer-events: none;}
.sectorul{padding: 0; margin: 0; list-style-type: none;}
.buffer{width: 100%; margin: 20px 0 20px; height: 3px; position: relative;}
.greenbuffer{width: 150px; background: #0074CC; position: absolute; top: 0; left: 0; height: 3px;}
.greybuffer{width: 150px; background: #505055; position: absolute; top: 0; left: 0; height: 3px;}
.whitebuffer{width: 150px; background: #fff; position: absolute; top: 0; left: 0; height: 3px;}
.smallgreenbuffer{width: 50px; background: #0074CC; position: absolute; top: 0; left: 0; height: 3px;}
.smallgreybuffer{width: 50px; background: #505055; position: absolute; top: 0; left: 0; height: 3px;}
.smallwhitebuffer{width: 50px; background: #fff; position: absolute; top: 0; left: 0; height: 3px;}

.supporters{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px;}


.ttgrid{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px;}

.projectsgrid{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px;}
.eachsupporter{width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; opacity: 0.8; filter: grayscale(1);}
.eachsupporter:hover{opacity: 1; filter: grayscale(0);}
.eachsupporter img{max-width: 100%;}

.projectscontainer{position: relative; width: 100%;}
.projectstitle{position: relative; background: #fff; color: #000; font-size: 24px; font-weight: 900; text-transform: uppercase; padding: 20px 10%; z-index: 100000;}
.supportp{color: #1a1a1a;}
/*.projectstitle{position: relative; top: 0; left: 0; background: #fff; width: 100%; color: #000; font-size: 24px; padding: 20px 10%; z-index: 100000;}
*/


.whiteh{color: #fff;}
.darkh{color: #505055;}

.anotherswiper{z-index: 44 !important;}
.homeservices{width: 100%; background: #f6f6f6; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 100px 0; outline: 0px solid red;}
.homeservicesbg{position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(rgba(247, 197, 4, 1),rgba(247, 197, 4, 1) 50%,rgba(80, 80, 85, 1) 50.1%); z-index: 3;}

.thehomeservice{width: 100%; background: #f6f6f6; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; outline: 0px solid red; z-index: 4;}
.homeservicesimg{width: 45%; position: relative; z-index: 4; outline: 0px solid red;}
.homeservicesimgheader{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; background: rgba(0,0,0, 0.6); display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; padding: 40px 40px 40px 10vw; font-size: 30px; line-height: 50px; color: #fff; letter-spacing: 1px; }/*
.homeservicesimgheader{position: absolute; bottom: 0; left: 0; height: auto; width: auto; transform: rotate(-90deg); background: #fff; color: #000;font-size: 40px; line-height: 50px; font-family:quanticoregular, 'Red Hat Display', sans-serif; letter-spacing: 1px;transform-origin: 0% 0%;}*/
.homeservicesimg img{width: 100%; height: 100%; object-fit: cover;border: 0px solid #F7c504; border-left: 0px solid #F7c504;}
.homeservicescontent{width: 50%; padding: 0 5% 0 0; position: relative; z-index: 4; outline: 0px solid red;}



.breadcrumbs{font-size: 12px; background: rgba(255,255,255,0.5); width: 100%; margin:0; padding: 20px 10% 20px; background: #f7f7f7;}
.breadcrumbs a{color: #1a1a1a;}
.breadcrumbs span{margin: 0 5px;}

.businesslogos{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;}
.eachbusinesslogo{width: 100%; display: flex; justify-content: center ; align-content: center; flex-wrap: wrap; padding: 40px 40px 40px 0; background: rgba(255,255,255,0); filter: grayscale(1);}
.eachbusinesslogo img{width: 100%; }
.eachbusinesslogo:hover {filter: grayscale(0);}

.openinglogos{display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center;}
.eachopeninglogo{width: 200px; margin-right: 40px; margin-bottom: 40px; display: block;}


.businessgrid{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;}
.businessgrid1{display: grid; grid-template-columns: 1fr; grid-gap: 20px; width: 100%;}
.eachbusinessgrid{padding: 50px 50px 100px; text-align: left; position: relative; overflow: hidden;}
.eachbusinessgrid1{padding: 100px; text-align: left; position: relative; overflow: hidden;}
.eachbusinessgridtitle{position: relative; z-index: 5;transition: all 0.3s ease; transform:translateY(50px); transition: all 0.5s ease;}
.eachbusinessgridtitlename{font-size: 24px; font-weight: 600; color:#fff; width: 100%;}
.eachbusinessgridtitlename img{width: 70%; max-width: 200px;}

.eachbusinessgridtitle1{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; z-index: 5; transition: all 0.3s ease; transition: all 0.5s ease;}
.eachbusinessgridtitlename1{font-size: 24px; font-weight: 600; color:#fff; transform:translateY(0px); width: 50%; transition: all 0.3s ease;}
.eachbusinessgridtitlename1 img{width: 100%;}

.eachbusinessgridicon{width: 60px; margin: 30px auto; opacity: 0.4;transition: all 0.3s ease; display: none;}
.eachbusinessgridtext{margin-bottom: 30px; font-size: 14px; line-height: 20px; transform:translateY(100px); transition: all 0.5s ease; position: relative; z-index: 5;transition: all 0.5s ease; opacity: 0; color: #fff; width: 100%;}
.eachbusinessgridtext img{width: 70%;}
.eachbusinessgridlink{font-size: 14px; padding: 5px 10px; background: #0074CC; color: #fff; position: relative; z-index: 5; border-radius: 5px;}
.eachbusinessgridlink:hover{color: #0074CC; background: #fff;}
.eachbusinessgridimageholder{position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; filter: grayscale(0); opacity: 1; transition: all 0.3s ease;}
.eachbusinessgridimage{object-fit: cover; width: 100%; height: 100%; top: 0; left: 0;}
.eachbusinessgridcover{position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg,rgba(22,22,22,.78),transparent); transition: all 0.3s ease;}
.eachbusinessgridcover1{position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; background: rgba(22,22,22,.78); transition: all 0.3s ease;}
.homeservicewhite{background: rgba(255,255,255,0.4); transition: all 0.3s ease;}
.homeservicegrey{background: rgba(255,255,255,0.1); transition: all 0.3s ease;}

.eachbusinessgrid:hover .eachbusinessgridcover{height: 500%;}

.homeservicegrey:hover{background: rgba(255,255,255,0.4);}
.homeservicewhite:hover{background: rgba(255,255,255,0.1);}
.eachbusinessgrid:hover .eachbusinessgridtext{transform:translateY(0px); opacity: 1;}
.eachbusinessgrid:hover .eachbusinessgridtitle{transform:translateY(0px); color: #fff;}

.eachbusinessgrid1:hover .eachbusinessgridtext1{transform:translateY(0px); opacity: 1;}
.eachbusinessgrid1:hover .eachbusinessgridtitlename1{transform:translateY(-20px); color: #fff;}
.eachbusinessgrid1:hover .eachbusinessgridcover1{background: rgba(22,22,22,1);}

.eachbusinessgrid:hover .eachbusinessgridimageholder{opacity: 1;}
.eachbusinessgrid:hover .eachbusinessgridimageholder{transform: scale(1.1,1.1);}


.swiper-container {width: 100%;display: flex; background: #fff; padding: 0}
.eachhomeservice{padding: 50px 50px 50px; box-sizing: border-box; text-align: left; position: relative; overflow: hidden;}
.eachhomeservicetitle{position: relative; z-index: 5;transition: all 0.3s ease; transform:translateY(50px); transition: all 0.5s ease;}
.eachhomeservicetitlename{font-size: 24px; font-weight: 600; color:#fff;}
.eachhomeserviceicon{width: 60px; margin: 30px auto; opacity: 0.4;transition: all 0.3s ease; display: none;}
.eachhomeservicetext{margin-bottom: 30px; font-size: 14px; font-weight: 400; line-height: 20px; transform:translateY(100px); transition: all 0.5s ease; position: relative; z-index: 5;transition: all 0.5s ease; opacity: 0; color: #fff;}
.eachhomeservicelink{font-size: 14px; text-transform: uppercase; padding: 5px 10px; background: #F31B2A; color: #fff; position: relative; z-index: 5;}
.eachhomeservicelink:hover{color: #F31B2A; background: #fff;}
.eachhomeserviceimageholder{position: absolute; width: 110%; height: 100%; top: 0; left: -10%; z-index: 1; filter: grayscale(0); opacity: 1; transition: all 0.3s ease; }
.eachhomeserviceimage{object-fit: cover; width: 100%; height: 100%; top: 0; left: 0;}
.eachhomeservicecover{position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg,rgba(22,22,22,.78),transparent); transition: all 0.3s ease;}
.homeservicewhite{background: rgba(255,255,255,0.4); transition: all 0.3s ease;}
.homeservicegrey{background: rgba(255,255,255,0.1); transition: all 0.3s ease;}

.eachhomeservice:hover .eachhomeservicecover{height: 500%;}

.homeservicegrey:hover{background: rgba(255,255,255,0.4);}
.homeservicewhite:hover{background: rgba(255,255,255,0.1);}
.eachhomeservice:hover .eachhomeservicetext{transform:translateY(0px); opacity: 1;}
.eachhomeservice:hover .eachhomeservicetitle{transform:translateY(0px); color: #fff;}

.eachhomeservice:hover .eachhomeserviceimageholder{opacity: 1;}
.eachhomeservice:hover .eachhomeserviceimageholder{transform: scale(1.1,1.1); transform: translateX(8%);}


.buttonlinkholder{display: block; margin: 40px 0;}






.teamholder{width:100%; margin:0; padding: 40px 0; }
.eachaboutteam{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-content: center; margin-bottom: 40px; box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);}
.eachaboutteamimage{width: 150px; max-height: 150px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; filter: grayscale(1); overflow: hidden; transition:all 0.3s ease;}
.eachaboutteam:hover .eachaboutteamimage{filter: grayscale(0);}
.eachaboutteam:hover {box-shadow: 0 15px 45px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);}

.objectfit img{width: 100%; height: 100%; object-fit: cover;}
.eachaboutteamdetails{width: calc(100% - 240px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex-wrap: wrap; padding: 40px 40px 40px 0;}
.eachaboutteamname{font-weight: 900; font-size: 16px; margin-bottom: 10px; color:#0074CC}
.eachaboutteamjob{font-size: 16px; font-style: italic; margin-bottom: 10px;}
.eachaboutteambio{font-size: 14px; opacity: 0.6;}
.eachaboutteamcar{font-size: 14px; opacity: 0.6; color:#1a1a1a;}
.eachaboutteamtrack{font-size: 14px; opacity: 0.6; color:#1a1a1a;}
.eachaboutteamtag{font-size: 14px; opacity: 0.6; color:#1a1a1a;}






.eachracer{background:#fff; padding:20px; margin-bottom:20px;}




.eachfavourite{width: 100%; padding: 0; position: relative; background: #f6f6f6; border-top: 1px solid #f6f6f6;} 
.eachfavouritetitle{padding: 20px 20px 0; color: #1a1a1a; background: #fff; font-weight: 500; font-size: 16px;}
.eachfavouriteimage{border: 20px solid #fff;}
.eachfavouriteimage img{width: 100%;}







/* ==========================================================================
   NEWS
   ========================================================================== */
.newstextcontent{width: 100%;}
.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);}

.newsboxes{width:calc(100% - 80px); max-width: 1420px; margin: 0 auto; padding-bottom: 40px; display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: minmax(300px, auto);  
  grid-gap: 20px;  }

.newsbox{box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);  background:  #fff; position: relative; padding-bottom: 40px; padding-top: 225px; overflow: hidden;}
.newsbox:hover .homeboximage img{transform: scale(1.2,1.2);}
.newsbox:hover .homeboxlink{background-position: 0 -100%; color: #fff; letter-spacing: 2px;}
.newsbox:hover .hblightlink{background-position: 0 -100%; color: #004275;}
.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;
}


.eachmedia{background: #fff; min-width: 55%; width: 100%; position: relative; margin-bottom: 15px; display: block; overflow: hidden;}
.eachmediaimage{width: 100%; position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; z-index: 2; transition: 0.3s all ease;}
.eachmediacover{position: absolute; z-index: 3; top: 0; left: 0; right: 0; bottom: 0;background: rgba(27,32,50,0.4); transition: all 0.3s ease;}
.eachmediaimage img{width: 100%; height: 100%; object-fit: cover;}
.eachmediacontent{position: relative; z-index: 5; width:100%; height: 100%; text-align: right; padding: 20px 20px 20px 100px;}
.eachmediadetails{width: 50%; margin-left: 50%; padding: 40px 20px; text-align: left; position: relative; background: #fff;}
.eachmedianame{font-size: 32px; font-family: 'Roboto', sans-serif; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px; color: #fff;}

.eachmediajob{font-weight: 400; font-size: 14px; opacity: 1;color: #fff; display: none;}
.eachmedialink{font-weight: 300; font-size: 12px;  color: #1a1a1a;}

.eachmedia:hover{opacity: 1; box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);}
.eachmedia:hover .eachmediaimage img{transform: scale(1.1,1.1);}
.eachmediadate{position: absolute; top: -40px; left: 0; z-index: 5; text-transform: uppercase; padding: 20px 20px 20px 10px; width: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; display: flex; flex-direction: column; align-content: center; justify-content: center; text-align: left; height: calc(100% + 80px);}
.mediaday{font-size: 14px; display: block; margin: 0; font-weight: 800; color: #fff;}
.mediamonth{font-size: 16px; display: block; margin: 0; font-weight: 400; color: #fff;}
.mediayear{font-size: 14px; display: block; margin: 0; font-weight: 800; color: #fff;}

.newsheader{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.newsdate{display: inline-block; padding: 10px 20px; color: #fff; background: #F31B2A; font-size: 14px; text-align: center; width: 80px;}
.newsh1{width: calc(100% - 100px);}
.newsh1 h1{margin: 0; padding: 0;}
.tweeter{width:500px; max-width: 100%; margin: 60px auto; box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);}
/* ==========================================================================
   Table
   ========================================================================== */
.tablestyle {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.tablestyle th,
td {
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.2);
  color: #000;
}
.tablestyle th {
  text-align: left;
}
.tablestyle thead th {
  background-color: rgba(41,52,61,0.8);
}
.tablestyle tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.tablestyle tbody td {
  position: relative;
}
.tablestyle tbody td:hover:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9999px;
  bottom: -9999px;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: -1;
}
table.dataTable tbody tr{background:rgba(41,52,61,0.3) !important}
.tablepanel{padding: 20px }

.datatablestyle{color:#000 !important;}

.dataTables_length{padding: 10px 0;}
            .dataTables_length label{color: #fff;} 
            .dataTables_filter{padding: 10px 0;}
            .dataTables_filter label{color: #fff;}
            .dataTables_wrapper .dataTables_info{color: #fff;}
            .dataTables_wrapper .dataTables_paginate .paginate_button{color: #fff;}
            .dataTables_wrapper .dataTables_paginate .paginate_button.disabled{color: #000;}
            .dataTables_wrapper .dataTables_paginate .paginate_button{background: rgba(255,255,255,0.5); border: none;}
            .dataTables_wrapper .dataTables_paginate .paginate_button:hover{background: rgba(255,255,255,1); border: none; color: #333 !important;}
/* ==========================================================================
FORM
   ========================================================================== */

.contactcontent{display: flex; justify-content: space-between; flex-wrap: wrap;}
.contactinfo{width: 100%;}
.contactmap{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

.eachcontact{display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; margin-bottom: 10px;}
.contacticon{margin-right: 20px; min-width: 40px; text-align: center;}
.gm-style-mtc div{font-size: 12px !important;}

.contactsocial{display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 0 15px;}
.contactsocial a{color: #1a1a1a; margin-right: 20px; font-size: 16px;}
.contactsocial a:hover{ }
.contactsocial a.gplink:hover{color: #ff0000;opacity: 1;}
.contactsocial a.twlink:hover{color: #55acee;opacity: 1;}
.contactsocial a.lilink:hover{color: #0077B5;opacity: 1;}
.contactsocial a.fblink:hover{color: #3b5998;opacity: 1;}

.theform{width:100%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0; box-shadow: 0 15px 45px rgba(0,0,0,0.25), 0 7px 10px rgba(0,0,0,0.05); padding: 40px; margin: 40px 0 0;}
.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%; border:1px solid #0074CC; border-radius: 2px; color: #fff; padding: 15px; transition: 0.4s; cursor: pointer; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; background: #0074CC}
.submitbutton:hover{background: #fff; color: #0074CC;}
textarea{height: 200px; text-align: left;}
.smallprint{font-size: 12px;}


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

.privacylinks{width: 100%; padding: 40px 40px 20px; background: #0074CC; 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: 600; font-size: 14px;}
.privacylink:hover{background: rgba(255,255,255,0.5); }
.privacycontent{padding: 40px 0;}



.ptable{margin: 20px 0;}
.ptable tr td{padding: 20px; border: 1px solid #ccc;}
.ptable thead th{padding: 20px; background: #0074CC; }
.ptable thead th 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: #0074CC;}
.usefullink:hover{background: #fff; color: #0074CC;}


.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: yellow;}
.has-tooltip{color: #0074CC;}
.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(247,197,19, 0.75);
}
.tooltip.blue:after {
  border-top: 5px solid rgba(247,197,19, 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%);
}
/* ==========================================================================
   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{padding:30px 192px; width: 1920px;}}

@media only screen and (min-width: 1220px) {.navigation{display: flex!important;}.ham{display: none; order: 4;}}
@media only screen and (max-width: 1220px) {
    
    .header{align-items: center; z-index: 501;}
    .logoholder{order: 1;}
    .ham{display: block; order: 3;}
    
    .navigation{display: none; width: 100%; height: auto; text-align: right; padding-top: 40px; order: 4;}
    .navigation a{display: block; width: 100%; margin: 0; font-size: 18px; margin-bottom: 10px; padding: 0 0 20px 0; color: #fff;}
    .navlinker{display: none;}
    .fillbg{background: linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,0) 100%); background: rgba(0,0,0,0.9);}

    .herotext{max-width: 100%; z-index: 4;}
    .heroheader{font-size: 40px; line-height: 35px; }
    
    .contactinfo{width: 100%; margin-bottom: 20px;}
    .mapopening{height: 400px;}
    
    .homeabout{width: 100%; padding: 40px 10%; border-right: 0px solid #f6f6f6;}
    .homeopening{width: 100%; padding: 40px 10%;}
    .nocontent{display: none;}
    .businessopening{border-bottom: 5px solid #fff;}
        .homeservices{width: 100%; background: #f6f6f6; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 0; outline: 0px solid red;}


.thehomeservice{width: 100%; background: #f6f6f6; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; outline: 0px solid red; z-index: 4;}
.homeservicesimg{width: 100%; height: auto; position: relative; z-index: 4; outline: 0px solid red; }
.homeservicesimgheader{position:relative; width: 100%; height: auto; padding: 40px 10%; font-size: 40px; line-height: 50px;}
.homeservicesimg img{position: absolute; top:0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.homeservicescontent{width: 100%; padding: 40px 10%; position: relative; z-index: 4; outline: 0px solid red;}
.homeservicesbg{position: absolute; top: 0; right: 0; width: auto; height: auto; background: none; z-index: 46; outline: 0px solid red;}
.swiper-buttons{position: relative; display: flex; justify-content: flex-end; flex-wrap: wrap; top: 0;}
.swiper-button{padding: 5px 10px; color: #0074CC; background: #fff; cursor: pointer; outline: none;}
    
 .text{left: -30vw;  bottom: -20vh;}
 .supporters{grid-template-columns: 1fr 1fr 1fr;}
 
     .footersocial{justify-content: center; flex-grow: 0; width: 100%; margin-bottom: 20px;}
.copyright{color: #1B2032; width: 100%; justify-content: center; margin-bottom: 20px;}
.credits{color: #1B2032; width: 100%; justify-content: center;}
}
@media only screen and (max-width: 800px) {
    .container{width: 100%; margin: 0 auto;}
    .logo{width: 240px;}
  
 
  
    .herocover{padding: 0 5%;}
    .herotext{max-width: 90%;}
 
    .header{padding: 20px 5%;}
    .footer{padding: 40px 5% 80px;}



    .privacylink{width: 100%; }

    .heroheader{font-size: 30px; line-height: 40px; }
   
    
.ptable tr td{padding: 5px;}
.ptable thead th{padding: 5px; }
.homeabout{width: 100%; padding: 40px 5%;}
.homeopening{width: 100%; padding: 40px 5%;}
.homeservicescontent{width: 100%; padding: 40px 5%;}
.homeservicesimg{width: 100%; padding: 0;}
    
    .footleft{width: 100%; padding: 0;border-bottom: 1px solid rgba(255,255,255,0.2);}
.footleft img{width: 200px;}

.footmiddle{width: 50%; }
.footright{width: 50%;}
 .innerfooter{padding: 0;}   
.businessgrid{grid-template-columns: 1fr;}
    
 .text{left: -20vw;  bottom: -20vh; width: 160vw;}
    .text{font-size: 80vh; line-height: 80vh;}
    .newheroshallow{height: 30vh;}.shallowtext{font-size: 60vh; line-height: 50vh;}
    .projectstitle{padding: 20px 5%;}
    .herobannertext{color: #fff; font-size: 30px;}
        .eachaboutteamimage{width: 100px; max-height: 100px; border-top-right-radius: 50px; border-bottom-right-radius: 50px;}

.eachaboutteamdetails{width: calc(100% - 140px); }
}
@media only screen and (max-width: 501px) {
.supporters{grid-template-columns: 1fr 1fr;}
     .text{left: -20vw;  bottom: -30vh; width: 160vw;}
    .text{font-size: 70vh; line-height: 100vh;}
}
.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}}