* {
  box-sizing: border-box;
}



body {
  font-family: 'Montserrat', sans-serif;
  margin: Auto;
  padding-top: 50px;
  background-color: white; 
  min-height: 100vh;
  background-repeat: no-repeat;
  color: #1d2a6e; 
  text-align: center;
  /*vertical-align: center; */
  }

  .container-eye {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  width: 50% !important;
  
} 
 
  .pill-nav a {
  position: relative;
  display: inline-block;
  margin: 1rem 1rem 1rem 0;
  float: right;
  box-shadow: 1px 1px 2px #e60445, 7px 7px 25px 1px #1d2a6e;
  color: white;
  text-align: center;
  padding: .4em .7em ;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2rem;
  border-radius: 50px;
}
.pill-nav a:hover {
  background-color: #e60445;
  color: white;
}
.pill-nav a.active {
  background-color: #1d2a6e;
  color: #07d5f5;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3; 
}

.responsive {
  width: 100%;
  height: auto;
}
/* Line Separation */
hr.new1 {
  height: 5px;
  background-color: #07bdf5;
  border-color:  #07bdf5;
  border-radius: 25px;
  width: 100%;
}

hr {
  width: 85%;
  height: 3px;
  background-color: #07bdf5;
  text-align: center;

}

.imgradius {
border-radius: 10%;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-top {position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}

.w3-image{
  max-width:100%;height:auto;align:center;}

a {
text-decoration: none;
color: black
}

.page-title {
font-size: 10vw; 
font-weight: 700; 
text-align: center; 
color:#fdd878;
padding: 5%;
}

.company-title{
text-align: left;
color: #1d2a6e; 
font-weight: 600;
font-size: 5vw;
padding-left: 2%;
}

.drop-shadow {
  filter: drop-shadow(8px 8px 10px gray);
 -webkit-filter: drop-shadow(8px 8px 10px gray);
} 

.headline2 {
font-size: 7vw; 
font-weight: 600; 
text-align: center;
color:#fdd878;
}
.headline3 {
font-size: 3.5vw; 
font-weight: 300; 
text-align: center; 
color: #1d2a6e;
}
.headline4 {
font-size: 3vw; 
font-weight: 300; 
text-align: center; 
color: #1d2a6e;
margin: .7em;
}



.p {
font-size: 2vw; 
font-weight: 200;
line-height: 2; 
text-align: left; 
color: #1d2a6e;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.email-container {
  display: flex;
  justify-content: center;
  width: 100% !important;
}
/* Column container */
.row {
  display: flex;
  flex-wrap: wrap;
  height: stretch; 
}

/* Create four equal columns that sits next to each other */
.column-flex {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}
.column-flex img {
  margin-top: 4px;
  vertical-align: middle;
  width: 25%;
}
/* Create three equal columns that sits next to each other */

.row3 {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  width: 100%;
}
.column-flex3  {
  flex: 33%;
  max-width: 33%;
  padding: 0 4px;
}
.column-flex3 img {
  margin-top: 4px;
  vertical-align: middle;
  width: 33%;
}



/* Create Two equal columns that sits next to each other */
.row50 {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  width: 90%;
}

.column-flex50 {
  flex: 50%;
  max-width: 50%;
  padding: 2%;
}
.column-flex50 img {
  margin-top: 4px;
  vertical-align: middle;
  width: 50%;
  border-radius: 2%;
 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column-flex{
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column-flex{
    flex: 100%;
    max-width: 100%;
  }
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column-flex50{
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column-flex50{
    flex: 100%;
    max-width: 100%;
  }
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column-flex3{
    flex: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column-flex3{
    flex: 100%;
    max-width: 100%;
  }
}