:root {
  --main-color: #04438a;
  --secondary-color: rgb(247, 247, 247);
  --fontSizeText1: 17px;
  --fontSizeHeader2: 22px;
  --fontSizeHeader1: 30px;

  --fontSizeText1Mobile: 14px;
  --fontSizeHeader2Mobile: 17px;
  --fontSizeHeader1Mobile: 20px;
}

.text-align-center {
  text-align: center;
}

.text1 {
  font-size: var(--fontSizeText1);
}

.header2 {
  font-size: var(--fontSizeHeader2);
}

.header1 {
  font-size: var(--fontSizeHeader1);
}

.navbar {
  top: 0;
  background-color: white;
  z-index: 10000;
  width: 100%;
  margin-bottom: 0 !important;
  min-height: 95px !important;
  position: fixed !important;
}

.navbar img {
  float: left;
  margin-right: 22px;
  width: 70px;
}

.navbar > div {
  padding-right: 75px;
  padding-left: 75px;
  max-width: 100%;
  margin: 0 auto !important;
}

.navbar ul {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin-top: 20px;
}

.navbar li {
  font-size: 20px;
  font-weight: 500;
}

.navbar a {
  color: black !important;
  text-decoration: none !important;
}

.navbar .selectedNav {
  color: var(--main-color) !important;
  /*border-bottom: 1px solid var(--main-color);*/
}

.navbar .selectedNav::after {
  content: ""; /* required to display pseudo elements */
  height: 2px; /* this works like a border-width */
  width: auto; /* you can use a percentage of parent or fixed px value */
  background: var(--main-color); /* the color of border */
  position: absolute;
  bottom: 0; /* position it at the bottom of parent */
  margin: 0 auto;
  left: 15px;
  right: 15px; /* horizontal centering */
}

.content {
  margin-top: 95px;
}

.first-page img {
  height: 335px;
}

.my-banner {
  position: relative;
  margin-top: 50px;
}

.my-banner h1 {
  position: absolute;
  font-size: 50px;
}

.my-banner h1:nth-child(1) {
  left: 0;
  top: 0;
  color: var(--main-color);
  font-size: 90px !important;
  font-family: Dancing !important;
}

.my-banner h1:nth-child(2) {
  left: 100px;
  top: 100px;
  font-family: Neris !important;
}

.my-banner h1:nth-child(3) {
  left: 280px;
  top: 160px;
  font-family: Neris !important;
}

.my-banner img {
  left: 300px;
  top: 245px;
  position: absolute;
  width: auto !important;
  height: 70px !important;
  cursor: pointer;
}

.page {
  padding-left: 100px;
  padding-right: 100px;
  min-height: 50vh;
  padding-bottom: 40px;
}

.page:nth-child(even) {
  padding-top: 50px;
  background-color: var(--secondary-color);
}

.page:nth-child(odd):not(.first-page) {
  padding-top: 50px;
  background-color: white;
}

.first-page {
  min-height: 360px !important;
}

.second-page .main-color-header {
  color: var(--main-color);
}

.main-color {
  color: var(--main-color);
}

.medium-margin-top {
  margin-top: 20px;
}

@media only screen and (max-width: 767px) {
  .page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .first-page {
    min-height: 250px !important;
  }

  .nav > li > a {
    padding: 10px 10px !important;
  }
}

@media only screen and (max-width: 650px) {
  .navbar li {
    font-size: 15px !important;
  }

  .nav > li > a {
    padding: 10px 7px !important;
  }

  .navbar > div {
    padding-right: 30px !important;
    padding-left: 30px !important;
  }

  .navbar .selectedNav::after {
    left: 5px !important;
    right: 5px !important;
  }
}

@media only screen and (max-width: 600px) {
  .col-xs-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .text1 {
    font-size: var(--fontSizeText1Mobile) !important;
  }

  .header2 {
    font-size: var(--fontSizeHeader2Mobile) !important;
  }

  .header1 {
    font-size: var(--fontSizeHeader1Mobile) !important;
  }

  h1 {
    font-size: 30px !important;
  }
}

@media only screen and (max-width: 440px) {
  .navbar img {
    width: 40px !important;
    margin-right: 2px !important;
  }

  .navbar > div {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }

  .navbar li {
    font-size: 15px !important;
  }

  .nav > li > a {
    padding: 10px 4px !important;
  }
}

@media only screen and (max-width: 360px) {
  .navbar li {
    font-size: 13px !important;
  }
}

.center {
  text-align: center;
}