html {
  font-family: Raleway;
}

.site {
  margin: 0 auto !important;
  max-width: 1600px !important;
  min-width: 320px !important;
}

main {
  margin: 0 auto;
  width: 100%;
  min-width: 320px;
}

button,
.button,
.btn {
  margin-bottom: 6%;
  background-color: #d1c410;
  color: #0069cd;
  padding: 2% 6%;
  font-size: 90%;
  text-transform: uppercase;
  font-weight: 700;
  max-width: 75%;
  line-height: 1.5;
}

header .button,
.video .button {
  text-decoration: none;
}

header {
  background-image: url("./img/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 30px;
}

header .header-img .Rectangle {
  display: none;
}

header .logo {
  margin-top: 15%;
  margin-bottom: 8%;
  width: 66%;
}

header h1 {
  width: 100%;
  color: white;
  font-size: 250%;
  text-align: center;
  font-weight: 400;
}

header #bold {
  font-weight: 700;
}

header p {
  color: white;
  width: 76%;
  margin-left: 13%;
  margin-bottom: 6%;
  text-align: left;
  font-size: 90%;
  line-height: 2em;
  font-weight: 400;
}

header .Rectangle {
  width: 60%;
}

header .ruler {
  width: 80%;
  margin: 0 auto;
  border-top: 1px solid #e2d308;
}

header .nav-bar {
  background-color: #d2d2d2;
  list-style-type: none;
  margin: 0 0;
  padding: 1.7% 0;
  overflow: hidden;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  width: 100%;
  display: none;
}

header li {
  display: none;
}

header ul li a {
  color: #0069cd;
  font-size: 78%;
  font-weight: 600;
  text-align: center;
  padding: 1.7% 4%;
  text-decoration: none;
}

header ul li a:hover {
  background-color: #0069cd;
  color: #d2d2d2;
}

.what-is {
  margin-bottom: 10%;
}

.what-is h2 {
  margin: 5% 0;
  font-size: 190%;
  color: #595959;
  text-align: center;
  font-weight: 600;
}

.what-is img {
  width: 100%;
  margin: auto;
}

.what-is p {
  width: 90%;
  font-size: 100%;
  margin-left: 5%;
  text-align: left;
  line-height: 2em;
  color: #595959;
  font-weight: 600;
}

.what-is p #mark-blue {
  color: #0069cd;
}

.what-is a {
  margin-left: 5.5%;
  font-style: italic;
  font-size: 90%;
  color: #0069cd;
  font-weight: 600;
}

.Modules {
  background-color: #e5e5e5;
  width: 100%;
  text-align: center;
  color: #595959;
  padding: 2% 0;
}

.Modules img {
  width: 18%;
  margin: 20px 0 10px 0;
}

.Modules h2 {
  padding-top: 0.8%;
  font-size: 190%;
  font-weight: 600;
}

.Modules h3 {
  font-size: 120%;
  margin: 5% 0;
  font-weight: 600;
}

.Modules p {
  width: 85%;
  font-size: 88%;
  font-weight: 600;
  margin-left: 5%;
  line-height: 2em;
  color: #595959;
}

.quotes {
  text-align: left;
}

.quotes blockquote {
  width: 90%;
  font-size: 100%;
  font-style: italic;
  margin-left: 5%;
  text-align: left !important;
  line-height: 2em;
  color: #595959;
}

.quotes .img-container {
  text-align: center;
}

.quotes img {
  width: 25%;
  padding: 8% 0 0 0;
}

.quotes .quotes-grid-img2 {
  display: none;
}

#name {
  color: #0069cd;
  font-style: unset !important;
  font-size: 90% !important;
  margin-left: 5%;
}

.quotes .fold-up {
  max-height: 0;
  overflow: hidden;
}

:checked ~ .fold-up {
  max-height: 1000px;
}

input[type="checkbox"] {
  display: none;
}

:checked ~ .check-in {
  display: none;
}

:checked ~ .check-out {
  display: inline-block;
}

.check-out {
  display: none;
}

.check-in,
.check-out {
  color: #0069cd;
  cursor: pointer;
}

.quotes .button-container {
  text-align: center;
  padding: 1.5% 0 2.5% 0;
}

.projects {
  background-color: #0069cd;
  font-size: 85%;
  margin: 20px auto;
  text-align: center;
  padding-top: 45px;
  padding-bottom: 20px;
}

.projects h2 {
  font-size: 220%;
  color: #fff;
  font-weight: 600;
  text-align: center;
  margin-top: 0;
}

.projects .project {
  display: grid;
  grid-template-columns: auto auto;
  width: 95%;
  max-width: 400px;
  margin: auto;
  text-align: left;
}

.projects .fixed {
  display: none;
}

.projects img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: auto;
}

.projects ul {
  color: #fff;
  list-style: none;
  line-height: 2em;
  padding-left: 3%;
}

.projects .states {
  font-style: italic !important;
  color: #e2d308;
  font-weight: 600;
}

.projects .title {
  font-weight: 700;
}

.before-video {
  width: 90%;
  text-align: center;
  margin-left: 8%;
  background-color: #fff;
  padding-bottom: 20px;
}

.before-video h2 {
  color: #0069cd;
  font-size: 222%;
  text-align: center;
  margin-bottom: 8%;
  font-weight: 400 !important;
}

.before-video p {
  width: 90%;
  max-width: 600px;
  font-size: 110%;
  text-align: left !important;
  line-height: 1.7em;
  color: #0069cd;
  font-weight: 300;
}

.before-video .semi-bold {
  font-weight: 600;
}

.before-video #bold {
  font-weight: 700;
  font-size: 145%;
}

.before-video button {
  margin: 6% 0 8% 0;
}

.video-container {
  /* padding-left: 30px; */
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.video-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

#gallery {
  text-align: center;
}

/* #gallery {
  width: 100%;
  margin-left: 2px;    
  background-color: #a3a3a3;
  padding:20px o;
} */

/* #gallery a {
  padding:auto;
} */

footer {
  margin: 40px 0 0 0;
  padding: 40px;
  height: 60px;
  color: #fff;
  background-color: #0069cd;
  text-align: center;
}

/*------------------ Css Grid for monden browsers----------------*/

@supports (grid-area: auto) {
  @media screen and (min-width: 768px) {
    .site {
      max-width: 100%;
    }

    button {
      margin: 3% 0 9% 0;
      font-size: 92%;
    }

    h2 {
      font-size: 260% !important;
    }

    header {
      background-image: url("./img/background2.png");
      background-repeat: no-repeat;
      padding-bottom: 0;
    }

    header .header-main {
      display: grid;
      grid-template-columns: 40% auto 50%;
      background-repeat: no-repeat;
    }

    header .logo {
      margin: auto 0;
      padding: 23% 10%;
      width: 99.2%;
    }

    header .ruler {
      height: 55%;
      border-right: 2px solid #e2d308;
      margin: auto 0;
      border-top: none;
    }

    header .header-content {
      margin: auto auto;
      width: 90%;
    }

    header h1 {
      font-size: 284%;
    }

    header p {
      width: 77%;
    }

    header .nav-bar {
      display: block;
    }

    header li {
      display: inline;
    }

    header ul li a {
      font-size: 100%;
    }

    .what-is h2 {
      margin: 8% auto;
    }

    .what-is img {
      padding-bottom: 30px;
    }

    .Modules {
      padding-bottom: 8%;
    }

    .Modules h3 {
      font-size: 150%;
      margin-bottom: 20px;
    }

    .Modules p {
      font-size: 100%;
      width: 67%;
      margin: 0 auto;
      padding: 0 0 4% 0;
      color: #a3a3a3;
    }

    .Modules img {
      width: 80px;
      margin-top: 20px;
    }

    .quotes {
      display: grid;
      grid-template-columns: 17% 66% 14%;
      width: 102%;
    }

    .quotes img {
      width: 90%;
      padding: 72% 0 20% 0;
      margin: auto 0;
    }

    .quotes .quotes-grid-img2 {
      display: block;
    }

    .quotes-grid-content {
      width: 90%;
      padding-left: 5%;
      padding-top: 12%;
    }

    .quotes-grid-content button {
      margin-top: 3%;
    }

    .projects {
      padding: 10px 10px;
    }

    .projects img {
      width: 71px;
      height: 71px;
      border-radius: 50%;
      margin: auto;
    }

    .projects ul {
      font-size: 90%;
      padding-left: 8%;
    }

    .projects .slides {
      display: none;
    }

    .projects .fixed {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto;
    }

    .projects .project {
      margin: 0 15px;
      margin-bottom: 20px;
    }

    .video {
      display: grid;
      grid-template-columns: 50% 50%;
      margin: 4% 5%;
    }

    .video .before-video {
      text-align: left;
      padding-bottom: 0;
    }

    .video .before-video h2 {
      text-align: left;
      font-size: 233% !important;
    }

    .video-container {
      padding-top: 8%;
    }

    .before-video #bold {
      font-size: 134%;
    }
  }
}

/*------------------ Css Grid for monden browsers----------------*/

@supports (grid-area: auto) {
  @media screen and (min-width: 992px) {
    .site {
      max-width: 100%;
    }

    p {
      font-size: 1em;
    }

    h2 {
      font-size: 250% !important;
    }

    header {
      background-image: url("./img/background2.png");
      background-repeat: no-repeat;
    }

    header .header-main {
      display: grid;
      grid-template-columns: 40% auto 50%;
      background-repeat: no-repeat;
    }

    header .logo {
      margin: auto 0;
      padding: 21% 10%;
      width: 100.2%;
    }

    header .ruler {
      height: 55%;
      border-right: 2px solid #e2d308;
      margin: auto 0;
      border-top: none;
    }

    header .header-content {
      margin: auto auto;
      width: 90%;
    }

    header h1 {
      font-size: 315%;
    }

    header ul li a {
      font-size: 120%;
    }

    .what-is h2 {
      letter-spacing: 0.8;
      margin: 6% auto;
    }

    .what-is .what-is-grid {
      margin: auto;
    }

    .what-is p {
      margin-left: 20px;
    }

    .what-is img {
      margin-left: 15%;
      width: 70%;
    }

    .what-is {
      margin-bottom: 3.5%;
    }

    .Modules .modules-grid {
      padding: 2% 6% 6% 6%;
    }

    .Modules {
      padding-bottom: 1.5%;
    }

    .Modules img {
      width: 80px;
      margin-bottom: 3%;
    }

    .Modules .financial,
    .Modules .PUBLIC-SPEAKING,
    .Modules .SALES-AND-MARKETING,
    .Modules .LEADERSHIP {
      width: 90%;
      margin: 0 auto;
    }

    .Modules p {
      color: #a3a3a3;
      font-weight: 600;
    }

    .Modules h2 {
      margin-bottom: 10px;
    }

    .Modules h3 {
      font-size: 164%;
    }

    .quotes {
      display: grid;
      grid-template-columns: 17% 66% 17%;
      width: 100%;
    }

    .quotes img {
      width: 90%;
      padding: 48% 0 20% 0;
      margin: auto 0;
    }

    .quotes .quotes-grid-img2 {
      display: block;
    }

    .quotes-grid-content {
      width: 90%;
      padding: 7% 0 1% 5%;
    }

    .quotes-grid-content button {
      margin-top: 3%;
    }

    .projects img {
      width: 90px;
      height: 90px;
      margin: auto;
    }

    .projects {
      padding-bottom: 3%;
    }

    .video {
      display: grid;
      grid-template-columns: 60% 40%;
      margin: 4% 5%;
    }

    .video .before-video {
      text-align: left;
    }

    .video .before-video h2 {
      text-align: left;
    }

    .video .before-video h2 #bold {
      font-size: 145%;
    }

    .video-container {
      width: auto;
      padding-top: 8%;
      margin-top: 15%;
    }
  }
}
/*------------------ Css Grid for monden browsers----------------*/

@supports (grid-area: auto) {
  @media screen and (min-width: 1200px) {
    button {
      font-size: 93%;
    }

    p {
      font-size: 1em;
    }

    h2 {
      font-size: 320% !important;
    }

    header .logo {
      width: 105.2%;
      padding: 13% 8%;
    }

    header h1 {
      font-size: 420%;
      margin-bottom: 4%;
    }

    header p {
      font-size: 130%;
      line-height: 1.5em;
      width: 80%;
      margin-top: 0;
    }

    header ul li a {
      font-size: 150%;
    }

    .what-is h2 {
      font-size: 480%;
      margin: 4% auto 0;
    }

    .what-is .what-is-grid {
      margin: 5% 5%;
    }

    .what-is p {
      width: 100%;
      font-size: 115%;
      margin: 0;
    }

    .what-is img {
      width: 70%;
      margin: auto 15%;
    }

    .what-is {
      margin-bottom: 3.5%;
    }

    .Modules .modules-grid {
      display: grid;
      grid-template-columns: auto auto;
      padding: 0 6% 3% 6%;
    }

    .Modules .PUBLIC-SPEAKING {
      padding-top: 10px;
    }

    .Modules .financial,
    .Modules .PUBLIC-SPEAKING,
    .Modules .SALES-AND-MARKETING,
    .Modules .LEADERSHIP {
      margin: 0 auto;
    }

    .Modules .SALES-AND-MARKETING,
    .Modules .LEADERSHIP {
      margin-top: 7%;
    }

    .Modules img {
      width: 18%;
      margin-top: 50px;
    }

    .Modules p {
      font-size: 1em;
      color: #a3a3a3;
      width: 90%;
    }

    .Modules h3 {
      font-size: 160%;
      padding-bottom: 2.5%;
    }

    .quotes {
      display: grid;
      grid-template-columns: 17% 66% 17%;
      width: 100%;
    }

    .quotes img {
      width: 80%;
      padding-top: 78%;
    }

    .quotes-grid-content {
      font-size: 135%;
      padding-top: 5%;
    }

    .projects img {
      width: 120px;
      height: 120px;
      margin-left: 15px;
    }

    .projects .slidesToShow ul {
      padding: 0 0 4% 8%;
    }

    .projects {
      font-size: 120%;
      padding-bottom: 3%;
    }

    .projects h2 {
      margin: 0 0 3% 0;
    }

    .video {
      display: grid;
      grid-template-columns: 50% 50%;
    }

    .video .before-video {
      width: 80%;
    }

    .video .before-video h2 #bold {
      font-size: 145%;
    }

    .video .before-video p {
      font-size: 180%;
    }

    .video .video-container {
      margin: 1% 0 0 8%;
    }
  }
}

/*------------------ Css Grid for monden browsers----------------*/

@supports (grid-area: auto) {
  @media screen and (min-width: 1600px) {
    .what-is p {
      width: 100%;
      font-size: 140%;
      margin: 0;
    }
  }
}