body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', sans-serif;
  overflow: hidden; }

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 1; }

h1 {
  font-size: 50pt;
  margin-bottom: 0; }

h2 {
  font-size: 35pt; }

#heading span {
  color: #fee203;
  margin-left: -0.5%; }

#heading-small span {
  color: #fee203; }

/*HOME*/
.home {
  background: linear-gradient(rgba(20, 20, 20, 0.5), rgba(20, 20, 20, 0.5)), url("../images/home-bg.jpg") center center no-repeat;
  background-size: cover;
  text-align: center;
  overflow: hidden; }

.hero {
  width: 100%;
  text-align: center;
  color: #fff; }

.home-title {
  padding-top: 15%; }

.home-subtitle {
  color: #fff;
  margin-top: 10px;
  padding: 0 10%;
  font-size: 18px; }

.winner {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  background: url("../images/tmp/partner_of_the_year.svg") center no-repeat;
  background-size: contain;
  width: 50%;
  height: 270px;
  text-align: center; }

/*IMPLEMENT*/
.implement {
  background: url("../images/implement-bg.jpg") center center no-repeat;
  background-size: cover;
  text-align: center;
  overflow: hidden; }

.text-container {
  position: absolute;
  overflow: hidden;
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
  margin-bottom: 4%; }

#implement-content {
  color: #686868;
  text-align: left;
  margin-top: 5%; }

#implement-content h3,
#implement-content h4,
#implement-content p {
  margin-top: 3%; }

#implement-content h4,
#implement-content p {
  padding-left: 20px; }

.divide {
  height: 1px;
  background: #686868;
  margin: 40px 0 20px; }

#implement-content a {
  text-decoration: none;
  color: #686868; }

.dark-title {
  color: #686868;
  margin-top: 10%; }

/*BUILD*/
.build {
  background: linear-gradient(rgba(20, 20, 20, 0.5), rgba(20, 20, 20, 0.5)), url("../images/build-bg.jpg") center center no-repeat;
  background-size: cover;
  text-align: center;
  overflow: hidden; }

#build-content {
  color: #fff;
  text-align: left;
  margin-top: 5%; }

#build-content h3,
#build-content h4,
#build-content p {
  margin-top: 3%; }

#build-content h4,
#build-content p {
  padding-left: 20px; }

.divide2 {
  height: 1px;
  background: #fff;
  margin: 40px 0 20px; }

#build-content a {
  text-decoration: none;
  color: #fff; }

.light-title {
  color: #fff;
  margin-top: 10%; }

/* TECH PARTNERS */
.partner {
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(5, 5, 5, 0.9)), url("../images/applications-bg4.jpg") center center no-repeat;
  background-size: cover;
  text-align: left;
  overflow: hidden; }

.partner #heading {
  margin-left: 10%; }

.partner-mobile {
  display: none;
  color: #FFFFFF;
  font-size: smaller;
  margin-left: 5%;
  margin-right: 5%; }

#partner-content {
  color: #FFFFFF;
  width: 80%;
  display: flex;
  flex-direction: row;
  margin-left: 10%;
  margin-right: 10%; }

#partner-content p {
  padding-right: 35px;
  margin-bottom: 50px; }

.microsoft,
.annata {
  display: flex;
  flex-direction: column;
  flex: 1 1 0; }

.partner-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start; }

.ms-logo {
  background: url("../images/microsoft-logo-of-the-year.svg") left no-repeat;
  background-size: contain;
  width: auto;
  height: 44px;
  display: flex;
  margin-top: 70px; }

.ax-logo {
  background: url("../images/ax-logo.svg") left no-repeat;
  background-size: contain;
  width: auto;
  height: 50px;
  display: flex;
  flex: 1 1 0; }

.application-heading {
  font-size: 26pt; }

.button {
  border: solid 2px white;
  color: #FFFFFF;
  text-align: center; }

.button:hover {
  background: #FFFFFF;
  color: #444444;
  transition: ease 0.3s; }

.button:active {
  background: #FEE203;
  border: solid 2px #FEE203;
  color: #444444; }

.button h4 {
  margin: 0; }

.primary {
  width: 150px;
  padding: 10px 5px 10px 5px; }

.down-links {
  text-align: left; }

.down-links h5 {
  color: #FFFFFF;
  margin: 0 0 5px 25px;
  padding-bottom: 2px;
  border-bottom: solid 1px white; }

.down-links h5:hover {
  border-bottom: solid 1px #FEE203;
  transition: ease 0.3s; }

.partner-desktop {
  display: inherit; }

.accordion {
  background: rgba(255, 255, 255, 0.2);
  width: 100%;
  cursor: pointer;
  padding: 10px;
  margin-bottom: 10px;
  box-sizing: border-box; }

.panel {
  display: none;
  overflow: hidden; }

/*INDUSTRIES*/
.industries {
  background: linear-gradient(rgba(225, 225, 225, 0.4), rgba(225, 225, 225, 0.4)), url("../images/industries-bg.jpg") center center no-repeat;
  background-size: cover;
  overflow: hidden; }

.text-container-large {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%; }

#industries-content {
  color: #686868;
  text-align: left;
  margin-top: 20px; }

#industries-content p {
  margin-top: 6px;
  margin-left: 10%;
  margin-bottom: 50px; }

.dark-title-left {
  color: #686868;
  margin-left: 10%;
  margin-top: 10%;
  margin-bottom: 2%; }

.ind-row {
  display: flex;
  flex-direction: row;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 40px; }

a,
.ind-row a,
.ind-row a:visited {
  color: inherit;
  text-decoration: inherit; }

.ind-row a:hover {
  color: inherit;
  text-decoration-color: #FEE203;
  text-decoration-thickness: 4px;
  color: #FEE203; }

.ind-item {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
  align-items: center;
  text-align: center; }

th {
  padding-top: 0.5%; }

td {
  padding-left: 4.5%; }

.table-web {
  visibility: visible; }

.table-mobile {
  visibility: hidden; }

.industries-icon {
  margin-bottom: 5px;
  display: inline-block;
  width: 62px;
  height: 62px;
  background: transparent url("../images/industries-icons.png") no-repeat;
  background-position: 0 top; }

.application-icon {
  margin-bottom: 5px;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-size: 100%; }

.application-icon.isales {
  background: transparent url("../images/asales.png") no-repeat;
  background-size: 100%; }

.application-icon.misales {
  background: transparent url("../images/asales.png") no-repeat;
  background-size: 40%; }

.application-icon.icservice {
  background: transparent url("../images/acservice.png") no-repeat;
  background-size: 100%; }

.application-icon.ifservice {
  background: transparent url("../images/afservice.png") no-repeat;
  background-size: 100%; }

.application-icon.ihresources {
  background: transparent url("../images/ahresources.png") no-repeat;
  background-size: 100%; }

.application-icon.ifinance {
  background: transparent url("../images/afinance.png") no-repeat;
  background-size: 100%; }

.application-icon.iscmanagement {
  background: transparent url("../images/ascmanagement.png") no-repeat;
  background-size: 100%; }

.application-icon.icomerce {
  background: transparent url("../images/acomerce.png") no-repeat;
  background-size: 100%; }

.application-icon.ipsautomation {
  background: transparent url("../images/apsautomation.png") no-repeat;
  background-size: 100%; }

.application-icon.imarketing {
  background: transparent url("../images/amarketing.png") no-repeat;
  background-size: 100%; }

.application-icon.ibcentral {
  background: transparent url("../images/abcentral.png") no-repeat;
  background-size: 100%; }

.application-icon.ipowerapps {
  background: transparent url("../images/powerapps.png") no-repeat;
  background-size: 100%; }

.application-icon.ipowerbi {
  background: transparent url("../images/powerbi.png") no-repeat;
  background-size: 100%; }

.application-icon.ipowerautomate {
  background: transparent url("../images/powerautomate.png") no-repeat;
  background-size: 100%; }

.application-icon.ivirtualagents {
  background: transparent url("../images/powervirtualagents.png") no-repeat;
  background-size: 100%; }

.application-content {
  width: 80%; }

.industries-icon.iinsure {
  background-position: -62px top; }

.industries-icon.ilend {
  background-position: -124px top; }

.industries-icon.iprof {
  background-position: -186px top; }

.industries-icon.imanufacture {
  background-position: -248px top; }

.industries-icon.iretail {
  background-position: -310px top; }

.industries-icon.ilogistic {
  background-position: -372px top; }

.industries-icon.idistribute {
  background-position: -434px top; }

.industries-icon.irent {
  background-position: -496px top; }

.industries-icon.imedical {
  background-position: -558px top; }

.industries-icon.ichemical {
  background-position: -620px top; }

.industries-icon.iequip {
  background-position: -682px top; }

/*TEAM*/
.team {
  background: url("../images/team-bg.jpg") center center no-repeat;
  background-size: cover;
  text-align: center;
  overflow: hidden; }

.team-banner {
  background: linear-gradient(rgba(20, 20, 20, 0.2), rgba(20, 20, 20, 0.2)), url("../images/team-banner.jpg") center center no-repeat;
  background-size: cover;
  height: 35%;
  top: 0;
  overflow: hidden; }

.team-banner .light-title {
  padding-top: 10px; }

.column .table-web td {
  vertical-align: top;
  padding: 0 2%; }

.column p {
  text-align: justify; }

.team-content {
  color: #686868;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 3%; }

/*JOIN US*/
.join {
  background: linear-gradient(rgba(20, 20, 20, 0.5), rgba(20, 20, 20, 0.5)), url("../images/join_us-bg.jpg") center center no-repeat;
  background-size: cover;
  overflow: hidden;
  width: 100%;
  height: 100%; }

.join-content {
  color: #fff;
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 30%; }

.join-content p {
  padding-top: 2%;
  margin-right: 60%; }

/*WORKSPACE*/
.workspace {
  background: #fff;
  background-size: cover;
  overflow: hidden; }

#workspace-content {
  text-align: left;
  color: #686868; }

#workspace-content p {
  margin-left: 10%; }

#workspace-content th {
  padding-top: 7%;
  width: 15.2%;
  text-align: left; }

#heading-small {
  margin-top: 5%; }

.work-row {
  display: flex;
  flex-direction: row;
  margin-left: 7%;
  margin-right: 5%;
  margin-top: 50px; }

.work-item {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
  align-items: center;
  text-align: center; }

.workspace_element {
  text-align: center;
  display: inline-block;
  margin-top: 2%;
  padding-right: 2%; }

.workspace-icon {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: transparent url("../images/workspace-icons.png") no-repeat;
  background-position: 0 top; }

.workspace-icon.ileave {
  background-position: -100px top; }

.workspace-icon.icoffee {
  background-position: -200px top; }

.workspace-icon.iadventure {
  background-position: -300px top; }

.workspace-icon.icater {
  background-position: -400px top; }

.workspace-icon.itech {
  background-position: -500px top; }

.workspace-icon.itravel {
  background-position: -600px top; }

/*CONTACT*/
.contact {
  background: url("../images/contact-bg.jpg") center center no-repeat;
  background-size: cover;
  overflow: hidden;
  text-align: right; }

.contact-content {
  color: #686868;
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 30%; }

.contact-content p {
  padding-top: 2%; }

.contact-content a {
  text-decoration: none;
  color: inherit; }

/*ISLE OF MAN & SOUTH AFRICA*/
.contact-details {
  background: #686868;
  background-size: cover;
  overflow: hidden;
  text-align: left; }

.contact-details-content {
  color: #fff;
  margin-left: 50%;
  margin-right: 10%;
  margin-top: 15%; }

.contact-details-content h2,
.contact-details-content h5,
.contact-details-content p {
  padding-left: 50px;
  padding-top: 2%; }

.map {
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: grey; }

.barn {
  padding-left: 50px;
  margin-bottom: -20px; }

/*SCROLL DOWN ICON*/
.scroll_down {
  top: 90%;
  position: absolute;
  z-index: 2; }

.scroll_down::after {
  position: relative;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 80%; }

#scroll-down,
#scroll-down-dark {
  position: relative;
  z-index: 2; }

#scroll-down a,
#scroll-down-dark a {
  padding-top: 60px;
  width: 10px;
  height: 10px; }

#scroll-down-dark:hover,
#scroll-down:hover {
  opacity: 0.5;
  transition: opacity 0.5s ease-out; }

#scroll-down a span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -12px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb04 3s infinite;
  animation: sdb04 3s infinite;
  box-sizing: border-box; }

#scroll-down-dark a span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -12px;
  border-left: 3px solid #686868;
  border-bottom: 3px solid #686868;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb04 3s infinite;
  animation: sdb04 3s infinite;
  box-sizing: border-box; }

@-webkit-keyframes sdb04 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0); }
  20% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px); }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0); } }

@keyframes sdb04 {
  0% {
    transform: rotate(-45deg) translate(0, 0); }
  20% {
    transform: rotate(-45deg) translate(-10px, 10px); }
  40% {
    transform: rotate(-45deg) translate(0, 0); } }

#scroll-down a span::before {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
  z-index: -1;
  content: '';
  width: 50px;
  height: 50px;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1);
  border-radius: 100%;
  opacity: 0;
  -webkit-animation: sdb03 3s infinite;
  animation: sdb03 3s infinite;
  box-sizing: border-box; }

#scroll-down-dark a span::before {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
  z-index: -1;
  content: '';
  width: 50px;
  height: 50px;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
  border-radius: 100%;
  opacity: 0;
  -webkit-animation: sdb03 3s infinite;
  animation: sdb03 3s infinite;
  box-sizing: border-box; }

@-webkit-keyframes sdb03 {
  0% {
    opacity: 0; }
  30% {
    opacity: 1; }
  60% {
    box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.1);
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes sdb03 {
  0% {
    opacity: 0; }
  30% {
    opacity: 1; }
  60% {
    box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.1);
    opacity: 0; }
  100% {
    opacity: 0; } }

/* HEADER*/
.yellow-header {
  height: 0;
  width: 100%; }

.yellow-logo {
  position: relative;
  z-index: 9;
  background: url("../images/tmp/logo_white.svg") no-repeat top right;
  background-size: auto 80px;
  margin-top: 63px;
  height: 80px;
  width: 40%;
  cursor: pointer; }

.logo-light {
  background: url("../images/tmp/logo_white.svg") no-repeat top right;
  background-size: auto 80px; }

.logo-dark {
  background: url("../images/tmp/logo.svg") no-repeat top right;
  background-size: auto 80px; }

#burger_animation > svg {
  margin-top: 65px;
  margin-left: 10%;
  height: 30px;
  position: absolute;
  visibility: visible;
  overflow: visible;
  z-index: 99 !important; }

.burger-dark path {
  fill: #686868 !important; }

.burger-light path {
  fill: #FFFFFF !important; }

/*Full screen menu*/
.yellow-menu {
  background: url("../images/menu-bg.png") bottom no-repeat;
  background-size: cover;
  position: absolute;
  padding-right: 10%;
  padding-top: 8%;
  top: 0;
  opacity: 0;
  min-height: 100%;
  min-width: 0;
  visibility: hidden;
  transition: min-width 0.5s ease-in-out, visibility 1.75s ease-in-out, opacity 0.75s ease-in-out; }

.top-spacing {
  position: relative;
  z-index: 0; }

.yellow-menu h1:hover {
  color: #e6e6e6;
  cursor: pointer; }

.yellow-menu.open {
  z-index: 10;
  min-height: 100%;
  min-width: 100%;
  opacity: 1;
  visibility: visible; }

.yellow-menu-content {
  position: relative;
  color: white;
  font-family: 'PT Sans', sans-serif;
  text-transform: uppercase;
  word-wrap: break-word; }

.menu-items {
  margin-left: 10%;
  width: 25%;
  height: 25%; }

.menu-titles {
  padding-bottom: 7%;
  margin-left: 10%;
  margin-top: -10%; }

.line {
  margin-right: 5%;
  margin-bottom: 4%;
  width: 6%;
  height: 6%; }

.line img {
  vertical-align: middle; }

.yellow-menu h1 {
  font-size: 25px; }

/* APPLICATIONS */
.application {
  background: linear-gradient(rgba(20, 20, 20, 0.5), rgba(20, 20, 20, 0.5)), url("../images/applications-bg-2.jpg") center center no-repeat;
  background-size: cover;
  text-align: center;
  overflow: hidden; }

#application-content {
  color: #fff;
  text-align: left;
  margin-top: 5%; }

#application-content h3,
#application-content h4,
#application-content p {
  margin-top: 3%; }

#application-content a {
  text-decoration: none;
  color: #fff; }

/* POWER PLATFORM */
.power-platform {
  background: linear-gradient(rgba(20, 20, 20, 0.5), rgba(20, 20, 20, 0.5)), url("../images/power-platform-bg2.jpg") center center no-repeat;
  background-size: cover;
  overflow: hidden;
  color: #FFF; }

.power-platform #heading {
  margin-left: 10%; }

/*FULL SCREEN MENU END*/
.swiper-container {
  width: 100% !important;
  height: 100% !important; }

.swiper-pagination {
  right: 2% !important; }

.swiper-pagination-bullet {
  background-color: #686868 !important;
  border-color: #FFF !important;
  color: #FFF !important;
  opacity: 0.7 !important;
  margin: 25px !important;
  width: 13px !important;
  height: 13px !important;
  border-style: solid;
  border-width: 2px 2px 2px 2px; }

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #fee200 !important;
  border-color: #fee200 !important;
  opacity: 1 !important; }

.mobile-link {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 2em;
  margin: -2em; }