:root {
  --purple:#491045;
  --pink:#c61cd1;
  --blue:#04c1ff;
}

::selection {
  background-color:var(--pink);
  color:#fff;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
	font-family:inherit;
	color:inherit;
}

img {
	display:block;
	max-width:100%;
}

.wrap {
  position:relative;
  width:1220px;
  padding:0 10px;
  max-width:100%;
  margin:0 auto;
}

#burger,
.mobnav,
#mlogo {
  display:none;
}

body {
    font-size:62.5%;
    background-color:var(--purple);
    color:#fff;
    font-family: 'Almarai', sans-serif;
}

#bg_overlay,
#bgvid {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
}

  #bg_overlay img {
    width:100%;
    height:100%;
    object-fit: cover;
  }

#bgvid {
  mix-blend-mode: overlay;
  opacity:0.5;
}

video::-webkit-media-controls {
  display: none;
}

picture img {
  width:100%;
}

header {
  position: fixed;
  z-index:20;
	left:0;
  top:0;
  width:100%;
  background: rgb(0,182,255);
  background: linear-gradient(0deg, rgba(0,182,255,0.3) 0%, rgba(0,182,255,0) 100%);
  padding:0 5%;
}

    nav {
      width:100%;
    }
  
      .mainnav {
        display:block;
        margin:0 auto;
        float:none;
        list-style: none;
        text-align: center;
      }

        nav li {
          display:inline-block;
          vertical-align: top;
        }

          nav a {
            float:left;
            font-size:1.5em;
            padding:1.65em 1.75em;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight:300;
          }

          nav a:hover,
          nav a.active {
            color:var(--blue);
          }

          .social {
            padding:0.75em 0 0;
            margin-left:1em;
          }

            .social a {
              display:inline-block;
              width:auto;
              clear:none;
              border:none;
              padding:0;
              margin-left:0.2em;
              margin-top:1em;
              width:20px;
            }

            .social a img {
              width:100%;
            }

            .social a img:last-of-type {
              display:none;
            }

            .social a:hover img:first-of-type {
              display:none;
            }

            .social a:hover img:last-of-type {
              display:block;
            }

    #logo {
		  float:left;
      width:250px;
      padding:0;
    }
  
		#logo img {
			width:100%;
		}

.flex {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
}

.fcw {
  float:left;
  clear:left;
  width:100%;
}

h1,h2,h3,h4,h5,h6 {
	margin-bottom:1em;
	font-weight:normal;
}

main {
  float:left;
  width:100%;
}

main p,
main li{
	font-size:1.4em;
	line-height:1.6;
	margin-bottom:1em;
}

  p a,
  li a,
  td a {
    color:var(--lblue);
  }

main ul,
main ol {
	margin:2em;
}

  main li {
    padding-left:1em;
  }

.align_left {
  float:left;
}

.align_right {
  float:right;
}

.align_center {
  text-align: center;
}

img.align_left {
  margin:0.5em 1em 1em 0;
}

img.align_right {
  margin:0.5em 0 1em 1em;
}

img.align_center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.grad-btn {
  position: relative;
  clear:both;
  text-align: center;
  font-size:2em;
  letter-spacing: 0.075em;
  padding:0.75em 2.5em;
  border-radius:100em;
  background:var(--blue);
  background: linear-gradient(90deg, rgba(0,147,206,1) 0%, rgba(200,27,209,1) 100%); 
  text-transform: uppercase;
  font-weight:400;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  min-width:350px;
  max-width:90%;
  display:inline-block;
  margin:0 auto;
  z-index:2;
}

  .grad-btn:hover {
    box-shadow:0px 0px 30px rgba(200,27,209,1);
  }

.TextformatterVideoEmbed,
iframe {
  border:0;
  outline:0;
}
  
footer {
  position:relative;
  clear:both;
  float:left;
  width:100%;
  margin-top:5em;
  padding:0 5% 1em 5%;
  background: rgb(0,182,255);
  background: linear-gradient(180deg, rgba(0,182,255,0.3) 0%, rgba(0,182,255,0) 50%);
  z-index:4;
}

  .flogo {
    float:left;
    width:250px;
    margin-top:-7em;
  }

  .flinks {
    float:right;
    margin-top:2em;
  }

  .flinks a {
    float:left;
    font-size: 1.6em;
    text-decoration: none;
    text-transform: uppercase;
    margin-left:3em;
    margin-bottom:1em;
    padding:1em 0;
    font-weight:300;
  }

    .flinks a:hover {
      color:var(--blue);
    }

  footer .social {
    margin:0.5em 0 0 4em;
    float:left;
  }

  footer .social a {
    width:25px;
    margin:0 0.25em 0 0;
    padding:0;
  }

	.copyright {
    float:right;
    clear:right;
		opacity:0.5;
    font-size:1em;
	}

@media screen and (max-width:999px) {

  header {
    padding:0;
    background:none;
  }
  
  .mainnav {
    display:none;
  }

  .mlogo-outer {
    display:block;
    width:100%;
    background: linear-gradient(0deg, rgba(0,182,255,0.3) 0%, rgba(0,182,255,0) 100%);
  }

    #mlogo {
      display:block;
      float:none;
      width:200px;
      margin:0 auto;
      border:0;
      padding:0;
    }

    #burger {
      display:block;
      position: absolute;
      right:1em;
      top:1em;
      width:40px;
      z-index:11;
    }

  .mobnav {
    display: grid;
    align-content: center;
    position:fixed;
    z-index:10;
    width:300px;
    right:100%;
    top:0;
    height:100%;
    background-color:var(--pink);
    transition: all 0.5s ease-in-out;
  }

    .mobnav.visible {
      right:calc(100% - 300px);
    }

    .mobnav li,
    .mobnav a {
      float:left;
      clear:left;
      width:100%;
      text-align:center;
    }

    .mobnav a {
      border-bottom:1px dotted #fff;
      padding:1em;
    }

    .mobnav .social {
      text-align: center;
      margin:0;
    }

      .mobnav .social a {
        width:40px;
        margin:0.5em 0.15em;
        padding:0;
        clear:none;
        float:none;
        display:inline-block;
        border:0;
      }

      .mobnav li:hover .subnav {
        display:none;
      }
}

@media screen and (max-width:799px) {
  footer {
    padding-bottom:2em;
  }

  .flogo {
    width:160px;
    margin-top:-4em;
  }

    .flinks a {
      margin-bottom:0;
    }
}

@media screen and (max-width:699px) { 
  .flogo {
    width:160px;
    margin-top:-4em;
    margin:-4em auto 0 auto;
    float:none;
  }

  .flinks-outer {
    float:left;
    clear:left;
    width:100%;
  }

    .flinks,
    footer .social {
      width:100%;
      text-align: center;
      margin-top:0;
    }

      .flinks a {
        float:left;
        clear:left;
        width:100%;
        margin:0;
        border-bottom:1px dotted #fff;
        padding:0.75em 0;
      }

      footer .social {
        margin:0;
        padding:1em;
      }

        footer .social a {
          display:inline-block;
          float:none;
          clear:none;
          border-bottom:0;
        }

      .copyright {
        text-align: center;
        width:100%;
        padding:2em 0;
      }
}

@media screen and (max-width:599px) {
  .grad-btn {
    min-width:unset;
  }

}

@media screen and (max-width:499px) {

  footer .social {
    grid-column:unset;
    text-align:center;
  }

  main p,
  main li,
  main td {
    font-size:2em;
    line-height:1.4;
  }

  p a {
    word-break: break-all;
  }

  .hero h1,
  main h2  {
    font-size:6em;
  }

  footer h4 {
    margin-bottom:0;
  }
}
@media screen and (max-width:399px) {

  #logo {
    width:200px;
  }

  #burger {
    margin:0;
  }
}