.big-div {
    display: flex;
}

.big-div2 {
  display: none;
}

.history-container {
    margin: 0;
    height: auto;
}

.history-header {
    margin: 1rem 2rem 0;
}

.history-para {
    margin: 0 0 2rem 2rem;
}

.history-image {  
    background-image: url(images/about7.jpg);
    background-position: 50% 5%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 77vh;
    margin: 6rem 0 0;
}

.history-container > h2 {
    border-bottom: 1px solid rgb(78, 74, 74);
    color: rgb(0, 123, 255);
    margin: 0;
    text-align: center;
}

.history-container > p {
    width: 90%;
    margin: 2rem auto 1rem;
    box-shadow: 0 0 5px 1px gray;
    border-radius: 5px;
    padding: 1em;
    line-height: 2.4vw;
}

.history-container > div {
    width: 90%;
    margin: 2rem auto 1rem;
    box-shadow: 0 0 5px 1px gray;
    border-radius: 5px;
    padding: 1em;
    line-height: 1.5em;
}

.customer-logos {
    display: flex;
    margin: 0;
}

.container-m0bile {
  display: none;
}

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

  .about-body {
    font-size: 4vw;
  }

  .history-image {
    background-image: url(images/about7.jpg);
    background-position: 50% 8%;
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: fixed;
    width: 100%;
    height: 45vh;
    margin: 0;
  }

  .history-header {
    font-size: 10vw;
  }

  .history-para {
    font-size: 4vw;
  }

  .big-div {
    display: none;
  }

  .big-div2 {
    display: flex;
    flex-direction: column;
  }

  .history-container > p {
    width: 90%;
    margin: 2rem auto 1rem;
    box-shadow: 0 0 5px 1px gray;
    border-radius: 5px;
    padding: 1em;
    line-height: 7.4vw;
  }

  .history-container > h2 {
    font-size: 10vw;
  }

  .our-clients {
    font-size: 10vw;
  }

}


/*==============================
Careers
================================*/

.career-body {
  font-size: 1.2vw;
}

.careers-container {
    background-image: url(images/careers2.jpg);
    background-position: 50% 30%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 77vh;
    margin: 6rem 0 1rem;
    width: 100%;
}

.our-careers {
    display: flex;
}

.our-careers > div {
    height: 100px;
    margin: 0 2rem;
    width: 50%;
    box-shadow: 1px 1px 10px 2px gray;
    height: auto;
    border-radius: 10px;
    padding: 1em 2em;
    background-color: whitesmoke;
}

.career-header {
    color:rgb(0, 123, 255);
    margin: 2rem;
}

.career-color {
    color:rgb(0, 123, 255);
}

.our-careers > div > a {
    background: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    color: white;
    text-decoration: none;
    padding: .5em 1em;
    transition: .8s;
    border-radius: 5px;
}

.our-careers > div > a:hover {
    background: rgb(0, 123, 255);
}

.benefits {
    margin: 4rem 2rem 2rem;
}

.benefits-header {
    color: rgb(0, 123, 255);
}

.benefits > img {
    width: 50%;
    border-radius: 10px;
}

.inside-flosmart {
    display: flex;
    margin: 4rem 2rem;
}

.inside-flosmart2 {
  display: none;
}

.inside-flosmart > img {
    width: 50%;
}

.inside-container {
    width: 50%;
    padding: 1em 2em;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    line-height: 2.4vw;
}

.career-join > h2 {
    margin-bottom: 2rem;
}

.role-container {
    margin: 2rem;
}

.role-container > a {
    color:rgb(0, 123, 255);
}

.role-container > a:hover {
    text-decoration: none;
}

.our-people {
  display: flex;
  width: 100%;
  margin: 0 auto 5rem;
  justify-content: space-between;
}

.our-people > div > h4 {
  font-weight: bold;
}

.our-people > div > h5 {
  font-weight: bold;
}

.our-stories {
  text-align: center;
  margin: 5rem auto;
}

.our-people > div {
  width: 80%;
  padding: 0 3em 1em 1em;
  background: whitesmoke;
  margin: 0 2rem 0 0;
}

.kayode {
  width: auto;
  height: 50vh;
  border-radius: 5px;
  margin: 0 auto;
}

@media only screen and (max-width: 600px) {
  .career-body {
    font-size: 4vw;
  }

  .career-header {
    margin-top: 0;
    font-size: 10vw;
  }

  .careers-container {
    background-image: url(images/careers2.jpg);
    background-position: 50% 8%;
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: fixed;
    height: 55vh;
    margin: 0;
    width: 100%;
  }

  .our-careers {
    display: flex;
    flex-direction: column;
    
  }

  .our-careers > div {
    margin: 0;
    width: 100%;
    height: auto;
    border-radius: 0;
    padding: .5em 1em;
    background-color: whitesmoke;
  }

  .our-careers > div > h2 {
    font-size: 10vw;
  }

  .benefits {
    margin: 4rem 0 4rem;
    padding: 0 1em;
  }

  .benefits > img {
    width: 100%;
    border-radius: 0;
  }

  .inside-flosmart {
    display: none;
  }

  .inside-flosmart2 {
    display: flex;
    flex-direction: column;
    margin: 4rem auto;
  }

  .inside-container {
    width: 100%;
    padding: 1em;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    line-height: 7.4vw;
  }

  .inside-container > h1 {
    font-size: 10vw;
  }

  .our-people {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto 5rem;
    justify-content: space-between;
  }

  .our-people > div > h4 {
    font-weight: bold;
    padding: 0 1em;
    padding-top: 1em;
    font-size: 4vw;
  }
  
  .our-people > div > h5 {
    font-weight: bold;
    padding: 0 1em;
    padding-bottom: .5em;
    font-size: 4vw;
  }

  .role-container > h1 {
    font-size: 10vw;
  }
  
  .our-stories {
    text-align: center;
    margin: 5rem auto;
    font-size: 10vw;
  }
  
  .our-people > div {
    width: 100%;
    padding: 0;
    background: whitesmoke;
    margin: 0;
    margin-bottom: 2rem;
  }

  .our-people > div > p {
    padding: 0 1em;
  }
  
  .kayode {
    width: 100%;
    height: auto;
    border-radius: 0;
    margin: 0 auto;
  }

}


/*==========================
Services page
===========================*/

.services-body {
    font-size: 1.2vw;
    padding: 0;
}

.services-container {
    display: flex;
    flex-direction: column;
}

.hideall {
    display: none;
}

.active7 {
    display: block;  
}

.btn-state {
    outline: none;
    background: rgb(0, 123, 255);
  }

.switch.active7 {
    background: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    color: white;
}

.service-page1 {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.service-page1 > h1 {
    color:rgb(0, 123, 255);
}

.service-page1 {
    background-image: url(images/loggingtruck.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    border-radius: 5px;
    margin: 2.5rem 0 0;
    height: 80vh;
}

.service-page1 > a {
    background-color: rgb(0, 123, 255);
    color: white;
    text-decoration: none;
    padding: .5em 1em;
    width: 50%;
}

.service-page1 > a:hover {
    background-color: rgb(0, 123, 255, .9);
    text-decoration: none;
}

.service-page2 {
    margin: 1rem 0;
    color:rgb(0, 123, 255);
}

.service-page2 > h1 {
  text-align: center;
  margin: 0;
  padding: .5em 0;
}

.wireline-page {
    width: 100%;
    margin: 0 0 5rem;
}

.flex-div {
    display: flex;
    width: 100%;
    box-shadow: 0 0 5px 1px rgb(230, 230, 230);
    height: 60vh;
    margin: 0;
}
.wireline-para {
    width: 100%;
    margin: 0 auto;
    padding: 2em;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    line-height: 2.4vw;
}

.div-wireline {
    background-image: url(images/unit.jpg);
    background-position: 50% 45%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    width: 100%;
}


.div-wireline2 {
    background-image: url(images/intro3.png);
    background-position: 50% 65%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    width: 100%;
}

.div-wireline3 {
    background-image: url(images/dst.jpg);
    background-position: 50% 65%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    width: 100%;
}

.div-wireline4 {
    background-image: url(images/gravel.jpg);
    background-position: 50% 65%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    width: 100%;
}

.div-wireline5 {
    background-image: url(images/completions2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    width: 100%;
}

.div-wireline6 {
    background-image: url(images/wellhead2.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    width: 100%;
}

.div-wireline7 {
    background-image: url(images/sensor.jpg);
    background-position: 50% 65%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    width: 100%;
}

.services-btn {
    background-color: black;
    display: flex;
    flex-direction: column;
}

.services-btn > button {
    margin: 0;
    padding: 1.5em .5em;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    font-weight: bold;
    width: 100%;
    border: none;
    text-align: left;
}

.services-btn > button:hover {
    background: rgb(0, 123, 255);
    color: white;
    transition: .6s;
}

.services-btn > button:focus {
    background: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    border: 2px solid linear-gradient(to top, #00c6fb 0%, #005bea 100%);
}

.list-div {
    margin: 2rem 2rem .5rem;
    color:rgb(0, 123, 255);
}

.solutions-div {
    width: 100%;
    margin: 0 auto;
    display: flex;justify-content: space-between;
}

.solutions-div > div > ul > li {
    line-height: 2.4vw;
    font-weight: bold;
}

.big-box {
    display: flex;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
}

.box {
    margin: 0;
    padding: 0;
    width: 20%;
    height: 100%;
}

.box2 {
    width: 80%;
    margin: 0;
    padding: 0;
    background-color: white;
}

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

  .services-body {
    font-size: 4vw;
    line-height: 7.4vw;
    padding: 0;
    margin: 0;
  }

  .service-page1 {
    background-image: url(images/loggingtruck.jpg);
    background-attachment: fixed;
    background-position: 50% 10%;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    border-radius: 0;
    margin: auto;
    height: 35.5vh;
  }

  .service-page2 > h1 {
    font-size: 10vw;
  }

  .list-div {
    font-size: 10vw;
  }

  .big-box {
    display: flex;
    flex-direction: column;
  }

  .services-btn {
    background-color: black;
    display: flex;
    flex-direction: column;
    width: 100%;
    font-weight: bold;
  }

  .services-btn > button {
    margin: 0;
    padding: .8em .5em;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    font-weight: bold;
    width: 100%;
    display: flex;
  }

  .box {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .box2 {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
  }

  .flex-div {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-shadow: 0 0 5px 1px rgb(230, 230, 230);
    height: auto;
    margin: 0;
  }

  .div-wireline,
  .div-wireline2,
  .div-wireline3,
  .div-wireline4,
  .div-wireline5,
  .div-wireline6,
  .div-wireline7 {
    height: 40vh;
    width: 100%;
  }

  .wireline-para {
    width: 100%;
    margin: 0 auto;
    padding: 1em;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    line-height: 7.4vw;
    font-size: 4vw;
  }

  .solutions-div {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    font-size: 4vw;
    padding: 0;
    padding-right: .5em;
  }

  .solutions-div > div > ul > li {
    line-height: 7.4vw;
    font-weight: bold;
  }

  .solutions-div {
    display: flex;
    flex-direction: column;
  }


}


/*=============================
Contact us
===============================*/

.contact-body {
    color: black;
    font-size: 1.2vw;
}

.contact-page1 {
    padding: 1rem 2em 3em;
    margin: 10rem auto 3rem;
    text-align: center;
    width: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    border-radius: 10px;
}

#contact-page2 {
    display: flex;
    margin-bottom: 2rem;
}

.page-form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.page-form > input {
    padding: .5em;
    border: none;
    border-radius: 5px;
    margin: 0;
}

.input-tag {
    text-align: left;
}

#message {
    margin-top: 0;
}

#submit-message {
    background: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    box-shadow: none;
    border-radius: 5px;
    transition: .6s;
    color: white;
    margin-top: 3rem;
}

#submit-message:hover {
    background: rgb(0, 123, 255);
}

.left-container {
    margin: 0 auto;
    text-align: center;
}

.left-container > div {
    margin: 0;
    padding: .5em 1em;
}

.contact-page3 {
    margin: 1rem 2rem;
}

.contact-page3 > p {
    margin-top: 1rem;
}

.port {
  background-image: url(images/port-harcourt.jpeg);
  background-position: 50% 30%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 80vh;
  margin-top: 6rem;
}

iframe {
  width: 100%;
}


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

  .contact-body {
    color: black;
    font-size: 4vw;
    line-height: 7.4vw;
  }

  #contact-form > input {
    font-size: 4vw;
    line-height: 7.4vw;
    padding: .8em .3em;
    height: auto;
  }

  .port {
    background-image: url(images/port-harcourt.jpeg);
    background-position: 50% 8%;
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: fixed;
    width: 100%;
    height: 40vh;
    margin-top: 0;
  }

  .contact-page1 {
    padding: 1rem .5em 3em;
    margin: 0;
    text-align: center;
    width: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    border-radius: 0;
  }

  .contact-page1 > h1 {
    font-size: 10vw;
  }

  .page-form {
    width: 100%;
    font-size: 4vw;
    line-height: 7.4vw;
  }

}

  /*=============================
  Login
  ===============================*/

  .login-body {
    padding: 0;
    margin-top: 15rem;
  }

  .login {
    width: 50%;
    padding: 2em 0 2em;
    margin: 0 auto 5rem;
    border-radius: 10px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
  }

  .login > p {
    color: whitesmoke;
    text-align: center;
    font-weight: 100;
    font-size: 3vw;
    margin: 0 0 1rem 0;
  }

  .login-header {
    margin: 3rem 3rem;
  }

  .login-header > a {
    text-decoration: none;
    color: whitesmoke;
    padding: .5em 1em;
    background: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    border-radius: 5px;
  }

  .login-header > a:hover {
    background: rgb(0, 123, 255);
  }

  .login-form {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
    color: whitesmoke;
  }

  #small-screen {
    margin: .6rem 0;
    padding: 1em 1.5em;
    border-radius: 10px;
    border: none;
  }

  .login-form > input {
    margin: .6rem 0;
    padding: 1em 1.5em;
    border-radius: 10px;
    border: none;
  }

  .login-button {
    padding: 1em 1.5em;
    width: 50%;
    margin: 1rem auto 0;
    border-radius: 5px;
    background: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    cursor: pointer;
    border: none;
    font-weight: bold;
    color: white;
  }

  .login-button:hover {
    background: rgb(0, 123, 255);
  }

  #small-screen {
    color: black;
  }

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

    .login-body {
      padding: 0;
      font-size: 4vw;
      margin-top: 10rem;
    }

    .login-header {
      margin: 2rem 1rem;
    }

    .login {
      width: 100%;
      padding: 2em 0 1em;
      margin: 4rem auto 2rem;
      border-radius: 0;
      background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
      height: auto;
    }

    .login > p {
      color: whitesmoke;
      text-align: center;
      font-weight: 100;
      font-size: 4vw;
      margin: 0 0 1rem 0;
    }

    .login-form > input {
      margin: 4rem 0;
      padding: .6em 1em;
      border-radius: 5px;
      border: none;
      font-size: 4vw;
    }

    #small-screen {
      padding: .8em 1em;
      font-size: 4vw;
      margin-bottom: 2rem;
      color: black;
    }

    .login-button {
      padding: .8em;
    }

  }


  /*================================
  Quote
  ==================================*/

  .quote-form2 {
    width: 70%;
    margin: 0 auto;
    margin-top: 0;
  }

  .quote-form {
    width: 70%;
    margin: 0 auto;
    box-shadow: 0 0 5px 1px gray;
    border-radius: 10px;
  }

  .quote-form2 > h1 {
    margin: 15rem 0 2rem;
    color:rgb(0, 123, 255);
    text-align: center;
  }

  .quote-form > h3 {
    text-align: center;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    color: white;
    padding: .5em 0;
    width: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    margin: 0;
  }

  .client-rating {
    width: 100%;
    margin: 0 auto;
  }

  .looking {
    width: 80%;
    margin: 0 auto;
  }

  .quote-content {
    background-color: white;
    margin: 0;
    padding: 0 1em;
  }

  .quote-content > h2 {
    margin: 0 0 1rem;
    padding: 1.5em 1em .5em
  }

  .quote-content > h4 {
    font-weight: bold;
    padding: 0 1.5em;
    margin: 0;
  }

  #ice-cream-choice {
    margin: 0 0 4rem;
    width: 100%;
    border: none;
    border-bottom: 2px solid gray;
    padding: .5em .3em;
    border-radius: 5px;
  }

  .quote-list {
    margin: 0;
    padding: 0 2em;
  }

  .quote-form > h4 {
    margin: 0;
    padding-top: 2em;
    font-weight: bold;
    width: 100%;
    margin-left: 3rem;
  }

  .input-quote {
    padding: 0 2em;
    padding-bottom: 2em;
  }

  .input-quote > input {
    margin: 1rem 0 4rem;
    width: 100%;
    border: none;
    border-bottom: 2px solid gray;
    padding: .5em .3em;
    border-radius: 5px;
  }

  .input-quote > h4 {
    margin: 2rem 0;
    font-weight: bold;
  }

  .input-quote > label {
    margin: 0;
  }

  #quote-button {
    background: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    color: white;
    border: none;
  }

  #quote-button:hover {
    background: rgb(0, 123, 255);
    color: white;
    
  }

  #company-body {
      margin: 0 0 4rem;
      width: 100%;
      border: none;
      border-bottom: 2px solid gray;
      padding: .5em .3em;
      border-radius: 5px;
  }

  .client-rating > h3 {
    text-align: center;
    margin: 4rem 0;
  }

  .looking {
    text-align: center;
    margin-bottom: 8rem;
    margin-top: 5rem;
  }

  .looking > h3 {
    margin-bottom: 4rem;
  }

  .looking > a {
    background: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    color: white;
    padding: 1em 3em;
    margin-top: 2rem;
    border-radius: 5px;
  }

  .looking > a:hover {
    background: rgb(0, 123, 255);
    color: white;
    text-decoration: none;
  }

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

    .quote-form {
      width: 100%;
      margin: 0 auto;
      border-radius: 0;
      padding: 0;
    }

    .quote-form2 {
      width: 100%;
      margin: 0 auto;
      margin-top: -5rem;
      padding: 0;
      font-size: 4vw;
      line-height: 7.4vw;
    }

    .quote-form > h3 {
      border-radius: 0;
      margin: 0;
    }

    .quote-content {
      padding: 0;
    }

    .quote-content > h2 {
      font-size: 10vw;
    }

    #fname-body {
      font-size: 4vw;
      line-height: 7.4vw;
    }

    #company-body {
      font-size: 4vw;
      line-height: 7.4vw;
    }

    .quote-form2 > h1 {
      font-size: 10vw;
    }

  }


  /*==============================
  News
  ==============================*/

  .main-body {
    padding: 0;
    margin: 7rem 2rem 2rem;
    display: flex;
    justify-content: space-between;
  }

  .left-news {
    width: 25%;
    box-shadow: 0 0 10px .2px gray;
    margin: 0;
  }

  .left-news  > h5 {
    border-bottom: 1px solid gray;
    margin: 2rem .5rem 0;
    font-weight: bold;
  }

  .right-news {
    width: 73%;
  }

  .bulletin-image {
    background-image: url(images/bulletin.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 40vh;
  }

  .bulletin-image2{
    background-image: url(images/ex2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 70vh;
    
  }

  .huge-bullet {
    box-shadow: 0 0 10px 1px gray;
    padding-bottom: 1em;
  }

  .huge-bullet > a > h2 {
    color:rgb(0, 123, 255);
  }

  .right-news > div > a > h2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 1em;
  }

  .right-news > div > a > h2:hover {
    color: rgb(87, 74, 74);
  }

  .bulletin-news {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid gray;
  }

  .bulletin-news > a > h4 {
    color:rgb(0, 123, 255);
    text-decoration: none;
  }

  .bulletin-news > a > h4:hover {
    border-bottom: 1px solid gray;
  }

  .news-display {
    display: flex;
  }

  .news-right {
    display: flex;
    width: 100%;
    margin: 0 auto;
  }

  .news-right2 {
    display: flex;
    width: 100%;
    margin: 0 auto;
  }

  .news-right > div {
    margin: 1rem;
  }

  .news-right2 > div {
    margin: 1rem;
  }

  .latest-bulletin > img {
    width: 100%;
  }

  .latest-bulletin > a > h3 {
    color:rgb(0, 123, 255);
    text-decoration: none;
  }

  .latest-bulletin > a >:hover {
    color: rgb(87, 74, 74);
    text-decoration: none;
  }

  .small-screen {
    display: none;
  }

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

    .main-body {
      padding: 0;
      margin: 7rem 0 2rem;
    }

    .left-news {
      display: none;
    }

    .right-news {
      width: 100%;
    }

    .small-screen {
      display: block;
      background-image: url(images/bulletin.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 40vh;
      width: 100%;
    }

  }


  /*========================
  whistle blowing
  ==========================*/

  .report-head {
    text-align: center;
    margin-bottom: 2rem;
  }

  .whistle-form {
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    width: 50%;
    margin: 15rem auto 3rem;
    border-radius: 10px;
    padding: 1em 2em 3em;
    box-shadow: 2px 2px 5px #ccc;
  }

  .whistle-form > label {
    margin: 0;
  }

  label {
    display: block;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 1.2vw;
    border-radius: 5px;
    margin-bottom: 1rem;
    color: black;
  }

  input[type="submit"] {
    background: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    border-radius: 5px;
    margin-top: 3rem;
  }

  input[type="submit"]:hover {
    background:rgb(0, 123, 255);
  }

  .report {
    margin-top: 0;
  }

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

    .whistle-form {
      background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
      width: 100%;
      margin: 10rem auto 3rem;
      border-radius: 0;
      padding: 3em .5em;
      box-shadow: 2px 2px 5px #ccc;
      font-size: 4vw;
    }

    .email, .name {
      font-size: 4vw;
    }

    #fname-whistle,
    #email-whistle,
    #subject-whistle {
      font-size: 4vw;
      line-height: 7.4vw;
      padding: .8em .3em;
    }

    .report-head {
      font-size: 10vw;
    }

  }


  /*=====================
  Exhibition
  ======================*/


  .exhibition-container {
    margin-top: 12rem;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 7rem;
  }

  .ex-div > h1 {
    text-align: center;
    color:rgb(0, 123, 255);
  }

  .ex-div > img {
    width: 100%;
    height: 70vh;
    object-fit: contain;
    object-position: center;
  }

  .ex-div2 > h2 {
    color:rgb(0, 123, 255);
  }

  .ex-div2 > ul > li {
    margin-bottom: 1rem;
    line-height: 2.4vw;
  }

  .ex-div2 > ul > li > span {
    font-weight: bold;
  }


  @media only screen and (max-width: 600px) {
    .exhibition-container {
      margin: 0 auto 5rem;
      width: 100%;
      font-size: 4vw;
      line-height: 7.4vw;
    }

    .ex-div2 > ul > li {
      font-size: 4vw;
      line-height: 7.4vw;
    }

  }