@import url('https://fonts.googleapis.com/css?family=Raleway');

body {
    font-family: 'Raleway', sans-serif;
    color: black;
    background:rgb(228, 235, 247);
}

header {
  height: 28vh;
  background-image: url("../imgs/water.png");
  background-position: center; /* Center the image */
  background-size: cover; 
  padding-top: 13vh;
}

header h1 {
    font-weight: bold;
    color: white;
}

.bluebtn {
  background-color: #0D567F;
}

.whitebtn {
  border-color: #0D567F;
  background-color: white;
  color:#0D567F;
  font-weight: bold; 
  border-style: solid; 
  border-width: 1px
}

aside {
  position: sticky;
  top: 80px;
  margin-top: 180px;
  float: right;
  right: 4%;

}


#news-container h4{
  margin-left: 1rem;
  color: #0D567F;
}

#news-container h6 {
  color: rgb(66, 64, 64);
}

#news-container p {
  color: rgb(92, 91, 91);
}


/* video */
.news-video-container {
  background-color: rgb(60, 137, 195);
  margin-top: 50px;
  overflow: hidden;

  -webkit-transform: skewY(-3deg);
  -moz-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
  -o-transform: skewY(-3deg);
  transform: skewY(-3deg);
}

.subelement{
  color: white;
  -webkit-transform: skewY(3deg);
  -moz-transform: skewY(3deg);
  -ms-transform: skewY(3deg);
  -o-transform: skewY(3deg);
  transform: skewY(3deg);
}

#video-title{
  margin-top: 100px;
}
#video-title h3 {
  margin-bottom: 80px; 
  font-weight: bold;
}

.news-video-container > .wrapper{
  margin-left: 15%; 
  margin-right: 15%; 
  width: 70%; 
  margin-bottom: 180px
}

/* newsletter*/
.newsletter{
  margin-top: -100px;
  padding-left: 15%;
  padding-right: 15%;
}

#mc_embed_signup{
  background-color: white; 
  padding: 50px; 
  padding-bottom: 15px;
}

#mc_embed_signup p
{
  margin-bottom: 25px; 
  font-size: 22px;  
}

#mce-EMAIL{
  text-align: center;
}
#mce-error-response,
#mce-success-response
{
  display: none;
}

#mc-embedded-subscribe{
  font-size:13px;   
  background-color: #0D567F;
}


/* media queries */
.smallScreen{
  display: none;
}
@media only screen and (min-width: 992px)
{
  .newsletter{
    padding-left: 25%;
    padding-right: 25%;
  }
}

@media only screen and (max-width: 765px){
  .mediumScreen {
    display: none
  }
  .smallScreen {
    display: block;
  }
}

@media screen and (max-width: 600px){
  #mc_embed_signup h6
  {
    margin-bottom: 25px; 
    font-size: 17px;  
  }
}

@media only screen and (max-width: 768px)
{
  #video-title h3{
    font-size: 32px;
    margin-bottom: 40px;
  }
  #news-container{
  padding: 0 9% 0
}
}

@media only screen and (min-width: 1200px){
  #news-container {
    margin-left: 7%;
  }
}

@media only screen and (max-width: 1023px){
  aside{
    display: none;
  }
  #news-container{
  padding: 0 9% 0
}
}