/* media query manager

 0-600px = phone
 600-900px = tablet portrait
 900-1200px = tablet landscape
  1200-1800 = normal style apply
 1800px = big desktop


 breakpoint argument choices
- phone
- tab port
- tab land
- big desktop

ORDER: Base, typography, general layout, grid >> page layout 

*/
* {
  padding: 0;
  margin: 0;
  box-sizing: inherit; }

body {
  background: #222020; }

html {
  font-size: 62.5%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
  @media (max-width: 75em) {
    html {
      font-size: 54.25%; } }
  @media (max-width: 56.25em) {
    html {
      font-size: 50%; } }
  @media (max-width: 37.5em) {
    html {
      font-size: 37.5%; } }
  @media (min-width: 112.5em) {
    html {
      font-size: 75%; } }

.break {
  border-top: 1px solid white; }

h1 {
  font-size: 3.5rem; }

h2 {
  font-size: 3.2rem; }

h3 {
  font-size: 2.9rem; }

h4 {
  font-size: 2.6rem; }

h5 {
  font-size: 2.3rem; }

h6 {
  font-size: 1.5rem; }

p {
  font-size: 2rem;
  font-weight: 300; }

.main-header {
  background: url(../img/main12.jpg);
  background-size: cover;
  background-position: center;
  height: 100vh;
  min-height: 60rem;
  color: gold;
  position: relative;
  margin-bottom: 5rem; }
  @media (max-width: 37.5em) {
    .main-header {
      height: 75vh; } }
  .main-header .primary-overlay {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .main-header .primary-overlay .transparent {
      border-bottom: 1px solid white; }
      .main-header .primary-overlay .transparent .container .nav-wrapper a,
      .main-header .primary-overlay .transparent .container .nav-wrapper ul {
        color: gold; }
      .main-header .primary-overlay .transparent .container .nav-wrapper ul a {
        font-size: 1.3rem; }
  .main-header .showcase {
    padding-top: 25rem; }
    .main-header .showcase img {
      position: absolute;
      width: 55rem;
      height: 12rem;
      top: 50%;
      transform: translate(0%, -50%); }
    .main-header .showcase h1 {
      font-size: 4.5rem; }
    .main-header .showcase h2 {
      font-size: 3.5rem; }
    .main-header .showcase h4 {
      font-size: 3rem; }
    @media (max-width: 56.25em) {
      .main-header .showcase {
        padding-top: 40rem; } }
    @media (max-width: 75em) {
      .main-header .showcase {
        padding-top: 15rem; } }
    @media (max-width: 37.5em) {
      .main-header .showcase {
        padding-top: 18rem; }
        .main-header .showcase h1 {
          text-align: center;
          font-size: 4rem; }
        .main-header .showcase h2 {
          font-size: 2.3rem;
          text-align: center; }
        .main-header .showcase h4 {
          font-size: 2.5rem;
          text-align: center; } }
  .main-header .scroll-icon {
    position: absolute;
    bottom: 5%;
    left: 47%;
    color: gold; }

.about {
  position: relative;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.8) 50%), url(/img/section/section.jpg);
  height: 50vh; }
  @media (max-width: 37.5em) {
    .about {
      background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 40%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.8) 40%), url(/img/section/section.jpg);
      height: 40vh; } }
  .about .row {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    padding: 2rem; }
    @media (max-width: 37.5em) {
      .about .row {
        top: 42%; } }
    .about .row .s12:nth-child(1) .mission {
      color: gold;
      padding: 2rem; }
      .about .row .s12:nth-child(1) .mission ol {
        font-size: 1.6rem; }
        .about .row .s12:nth-child(1) .mission ol li p {
          font-size: 1.6rem;
          line-height: 1.8; }
    @media (max-width: 75em) {
      .about .row .s12:nth-child(1) .mission ol li p {
        font-size: 1.6rem;
        line-height: 1.4; } }
    @media (max-width: 56.25em) {
      .about .row .s12:nth-child(1) .mission ol li p {
        font-size: 1.5rem;
        line-height: 1.4; } }
    @media (max-width: 37.5em) {
      .about .row .s12:nth-child(1) .mission {
        margin-top: 5rem; }
        .about .row .s12:nth-child(1) .mission ol {
          font-size: 1.5rem; }
          .about .row .s12:nth-child(1) .mission ol li p {
            font-size: 1.4rem;
            line-height: 1.4; } }
    .about .row .s12:nth-child(2) {
      padding: 2rem; }
      .about .row .s12:nth-child(2) .vision {
        margin-top: 4rem; }
        .about .row .s12:nth-child(2) .vision p {
          font-size: 2rem; }
      @media (max-width: 75em) {
        .about .row .s12:nth-child(2) .vision p {
          font-size: 1.6rem; } }
      @media (max-width: 56.25em) {
        .about .row .s12:nth-child(2) .vision p {
          font-size: 1.6rem; } }
      @media (max-width: 37.5em) {
        .about .row .s12:nth-child(2) .vision {
          margin-top: -4rem; }
          .about .row .s12:nth-child(2) .vision p {
            font-size: 1.5rem; } }

.graphs {
  display: none;
  margin-top: 5rem; }
  .graphs .container .data {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid white;
    margin-bottom: 2rem; }
    .graphs .container .data .row div:nth-child(1) .row .col .card-panel {
      border: 1px solid white; }

.galleries .container .row .col .card .center-align {
  height: 4rem;
  padding-top: 1rem; }
  .galleries .container .row .col .card .center-align span {
    font-size: 1.2rem; }
    @media (max-width: 56.25em) {
      .galleries .container .row .col .card .center-align span {
        font-size: 1rem;
        color: red; } }
    @media (max-width: 37.5em) {
      .galleries .container .row .col .card .center-align span {
        font-size: 0.8rem;
        color: red; } }

.galleries .container .row .col .card .card-image span {
  font-size: 2rem;
  color: black; }

.section-contact {
  position: relative; }

.section-contact .card-panel {
  position: relative;
  z-index: 10; }

footer .contactUs {
  font-size: 4rem; }

footer .row {
  display: flex;
  margin-top: 4rem;
  margin-bottom: 4rem; }
  @media (max-width: 37.5em) {
    footer .row {
      flex-direction: column; } }
  @media (max-width: 37.5em) {
    footer .row .social {
      margin-bottom: 4rem; } }
  footer .row .social .transparent h6 {
    margin-top: 6rem;
    margin-bottom: 2rem;
    font-size: 1.5rem; }
  footer .row .social .transparent .prop {
    margin-bottom: 2rem; }
    footer .row .social .transparent .prop p {
      font-size: 2.4rem; }
    footer .row .social .transparent .prop h5 {
      font-size: 1.5rem; }
    @media (max-width: 56.25em) {
      footer .row .social .transparent .prop p {
        font-size: 1.8rem; } }
    @media (max-width: 37.5em) {
      footer .row .social .transparent .prop p {
        font-size: 3.2rem; } }
  footer .row .social .transparent .info i {
    font-size: 1.5rem;
    color: white;
    margin-right: 1.5rem; }
  footer .row .social .transparent .info ul li a {
    color: gold;
    font-size: 1.5rem; }
  @media (max-width: 56.25em) {
    footer .row .social .transparent .info i {
      font-size: 1.3rem;
      margin-right: 1rem; }
    footer .row .social .transparent .info ul li a {
      color: gold;
      font-size: 1.3rem; } }
  @media (max-width: 37.5em) {
    footer .row .social .transparent .info i {
      font-size: 2rem;
      color: white;
      margin-right: 1rem; }
    footer .row .social .transparent .info ul li a {
      color: gold;
      font-size: 1.8rem; } }
  footer .row .social .transparent .social-icons {
    display: flex;
    margin-top: 2rem; }
    footer .row .social .transparent .social-icons div:nth-child(1) {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      border: 1px solid white;
      height: 2.5rem;
      width: 2.5rem;
      border-radius: 50%;
      margin-right: 2rem;
      background: #3b5998; }
    footer .row .social .transparent .social-icons div:nth-child(2) {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      border: 1px solid white;
      height: 2.5rem;
      width: 2.5rem;
      border-radius: 50%;
      background: #0072b1;
      margin-right: 2rem; }
    footer .row .social .transparent .social-icons div:nth-child(3) {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      border: 1px solid white;
      height: 2.5rem;
      width: 2.5rem;
      border-radius: 50%;
      background: #00acee; }
    footer .row .social .transparent .social-icons i {
      color: white;
      font-size: 1rem; }
  @media (max-width: 37.5em) {
    footer .row .social .transparent h6 {
      font-size: 2rem; } }
  footer .row .contact .card-panel {
    border-bottom: none; }
  footer .row .contact .transparent label {
    font-size: 1.5rem; }

.cRight {
  margin-top: 4rem;
  border-top: 1px solid white;
  padding-top: 2rem;
  padding-bottom: 2rem; }