@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');
*{
  font-family:Arial,sans-serif;
  margin:0;
  padding:0;
  box-sizing:border-box;
}

#navbar{
  background:#222f5b;
  padding-bottom:20px;
  opacity: 0.95;
  position:fixed;
  width:100%;

}

#navbar .barlist{
  display:flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;

}




#navbar h1{
  padding-top:20px;
  padding-left:20px;
}

#navbar h1 a{
  font-size:25px;
  color:#fff;
  text-decoration: none;
}

#navbar .barlist ul{
  margin-right:30px;
  padding-top:20px;
  list-style: none;
  display:flex;
}



#navbar .barlist ul li{
  margin-right:30px;
}




#navbar .barlist li a{
  padding:10px 0;
  color: #fff;
  text-decoration: none;
}

#navbar .barlist li a:hover{
  color:#ffd700;
  border-spacing: 2px;
  border-bottom:1px #ffd700 solid;

}

.content{
  display:flex;
  flex-direction: column;
  justify-content: center;
  background:url(../img/IMG_7510.png) no-repeat center center/cover;
  height:100vh;
  text-align: center;
  align-items: center;
  color:#fff;
}

.content h1{
  margin:25px
}
.content p{
  margin:10px;
}

.content a{
  
  background:transparent;
  box-sizing: border-box;
  border:1px #fff solid;
  border-radius:30px;
  text-decoration: none;
}

.content a:hover{
  background-color: #fff;
  color:black;
}
.content-team{
  display:flex;
  flex-direction: column;
  justify-content: center;
  background:url(../img/IMG_6155.jpg) no-repeat center center/cover;
  height:100vh;
  text-align: center;
  align-items: center;
  color:#fff;
  padding-top:140px;
}

.content-team h1{
  margin:25px;
  font-size:5rem;
}
.content-team p{
  margin:10px;
  font-size: 3rem;
}

.content-team a{
  
  background:transparent;
  box-sizing: border-box;
  border:1px #fff solid;
  border-radius:30px;
  text-decoration: none;
}

.content-team a:hover{
  background-color: #fff;
  color:black;
}

.flex-items{
  display:flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height:100%
}

.flex-columns{
  display:flex;
  flex-direction: row;
  width:100%;
  
}

 .flex-columns .row{
  display:flex;
  flex-direction: row;
  width:100%
}

.flex-columns .column{
  display:flex;
  flex-direction: row;
  justify-content: space-around;
  flex-basis:100%;
  flex:1;
  width:100%;
}

.flex-columns .column-2{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:30px;

}

.column-2 h2{
  
  display: flex;
  align-items: center;
  justify-content: center;
  line-height:5.7rem;
}

.column-2 p{
  line-height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-left:11px;
}

.column-2 a {
  margin-top:20px;
  text-decoration: none;
  border:1px #fff solid;
  border-radius: 50px;
}

.column-2 a:hover{
  background-color: #fff;
  color:black;
}




.flex-columns img{ 
  width:100%;
  height:100%;
  object-fit: cover;
}


.row.flex-reverse{
  flex-direction: row-reverse ;
}

.footer a{
  color:#fff;
  margin:10px;
}
.footer .social a:hover{
  color:#ffd700;
}

.footer .social > *{
  margin-right:30px;
}

.footer {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.7;
  padding-top:20px;
  width:100vh

}

.flex-columns .contact{
  display:flex;
  flex-direction:row ;
}

.contact .column-1 a{
  color:GREEN;
  margin-left:20px;
  object-fit: cover;
}


.contact .column-2 p{
  line-height: 20px;
  flex-wrap: wrap;
  
}

.contact .column-1{
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width:200px;
  margin-right:20px
}

.contact{
  display: flex;
}

.contact .column-2{
  max-width:200px;
}

.contact .column-2 a{
  border:0
}

.contact .column-3{
  max-width:200px;
  padding-left:30px;
}


.contact.row{
  font-family:Georgia, 'Times New Roman', Times, serif;
  padding-top:30px;
  margin:auto;
}

.contact{
  background-color:#f4f4f4;
}

/* Fencing Club */
.content.fc{
  font-size: 5rem;
  background:url("../img/IMG_3288.png") no-repeat center center/cover;
  height:90vh;
}

.content.fc h1{
  margin-bottom:200px;
}

.content.fc span{
  color:#ffd700
}

@media(max-width:768px){
  #navbar .container.barlist{
    display: flex;
    flex-direction: column;
    overflow: auto;

  }

  #navbar .container.barlist ul{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: auto;
  }

  #navbar .container.barlist ul li{
    display: block;
    margin-left:70px;
    line-height:2;
  }

  #navbar .container.barlist h1{
    display:block;
    margin:auto;
    
  }

  .flex-columns .row{
    display: flex;
    flex-direction: column;
    overflow:auto;
  }

  .contact .contact.row{
    display: flex;
    flex-direction: column;
  }


  .contact .contact.row .column-2 .down{
    margin-top:30px;
  }
  .contact .contact.row .column-3{
    margin-top:20px;
  }

  .contact .contact.row .column-3 .down{
    line-height:1.7
  }

}

.contact .contact.row .column-3 .down{
  padding-bottom:10px;
  margin-left:20px;
} 

.content.fc {
  width:100%;
  overflow: auto;
}

.footer{
  width:100%
}

.flex-columns .column .jong{
  display:flex;
  flex-direction: column;
  overflow: auto;
  border:2px #222f5b solid;
}

.section-padding h2, .section-padding h3{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.jong{
  width:45vh;
}

.cases header{
  display: flex;
  flex-direction: column;
  color: #ffd700;
  padding:50px 0;
}

.cases header h2{
  line-height: 1.7;
}

.cases header p{
  text-align: center;
}

.cases{
  background:#222f5b
}

.column-team img{
  display:flex;
  flex-direction: row;
  overflow: auto;
  width:40vh;
}