@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

*
{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;

}

html,body {

    min-height: 200vh;
    max-width: 100%;
    overflow-x: hidden;
    
}



.smallSpace{
    padding-top: 50px;
}

/*Header/Navigation bar*/
header {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    transition: 0.6s;
    background: #fff; 
    z-index: 9999;

}

header:hover {

    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.466);

}

nav {

    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}

nav img {
    width: 200px;
}

.nav-Links {

    flex: 1;
    text-align: right;

}

.nav-Links ul li {

    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;

}

.nav-Links ul li::after {

    content: '';
    width: 0%;
    height: 2px;
    background: rgb(63, 120, 206);
    display: block;
    margin: auto;
    transition: 0.5s;
    border-radius: 2px;

}



.nav-Links ul li:hover::after{

    width: 100%;
}

.nav-Links ul li a {

    color: #000;
    text-decoration: none;

}

header li {

    transition-duration: 0.5s;
    display: block;

}

header li:hover{
    cursor: pointer;
}

nav ul li ul {

    visibility: hidden;
    opacity: 0;
    position: absolute;
    transition: all 0.5s ease;
    margin-top: 1rem;
    left: 0;
    display: none;
    padding-top: 15px;
    
    
}


.nav-Links ul li:hover > ul,
.nav-Links ul li ul:hover {

    visibility: visible;
    opacity: 1;
    display:-webkit-inline-flex;
    
    
}

.nav-Links ul li ul li {

    clear: both;
    width: 100%;
    text-align:justify;
    
}


.nav-Links ul li .activeLink{

    border-bottom: 2px solid rgb(63, 120, 206);
    border-radius: 2px;
   
}

.subNav a{

    font-size: 14px;

}


/* Read more function*/
#more {
    
    display: none;
    
    
}

.button {
    background:transparent;
    border: none;
    color: rgb(0, 0, 0);
    padding: 0px 5px;
    text-align: center;
    text-decoration: none;
    display:inline-block;
    font-size: 15px;
    margin: 4px 2px;
    cursor: pointer;
  }


  /*visit us button*/

  .linkWrapper {

    display: inline-block;
    color: #fff;
    border: 1px solid rgba(210, 210, 211, 0.7);
    padding: 12px 34px;
    font-size: 16px;
    background: transparent;
    position: relative;
    cursor: pointer;
    list-style-type: circle;
    
    
    
}

.linkWrapper a {

    color: #000;
    text-decoration: none;
    
}

.linkWrapper:hover {

    border: 1px solid rgb(63, 120, 206);
    background: rgb(63, 120, 206);
    transition: 1s;

}



  /*Programmes page*/

  .course {

    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
    
    
  }

  h3 {

      font-size: 33px;
      font-weight: 500;

  }

  p {

    color: #777;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    margin-left: auto;
    margin-right: auto;

  }

 .course ul{

      list-style-type:circle;
      color: #fff;
      list-style-position: inside;
      flex-basis: 31%;
      border-radius: 10px;
      margin-bottom: 5%;
      padding: 20px 12px;
      box-sizing: border-box;
      transition: 0.5s;
      width: 60%;
      margin-left: auto;
      margin-right: auto;
      
  }

  #grad{
    background: -webkit-linear-gradient(110deg, #1460ee 60%, #3c88eb 60%);
    background: -o-linear-gradient(110deg, #1460ee 60%, #3c88eb 60%);
    background: -moz-linear-gradient(110deg, #1460ee 60%, #3c88eb 60%);
    background: linear-gradient(110deg, #1460ee 60%, #3c88eb 60%);
  }

  .course ul li{
   text-align: justify;
   margin: 0 auto;
   width: 300px;

  }

  .course ul:hover {
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.466);
  }

.oliveGeneral {

    width: 80%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 200px;

}


.oliveColumn {

    width: 40%;
    align-content: center;
    margin-bottom: 50px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.15);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.oliveColumn img {

     width: 100%;
     display: block;
     border-radius: 8px;
     margin-bottom: 10px;

}

.oliveColumn ul {

    list-style-type:circle;

}

.oliveColumn a {

    display: inline-block;
    color: #fff;
    background-color: #2196f3;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
}

.oliveColumn a:hover {

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

.oliveColumn p {

  margin-left: auto;
  margin-right: auto;
  height: 90px;
  overflow: hidden;
  
}



.oliveColumn.showContent p {

    height: auto;

}

.oliveColumn.showContent a.readMoreButton {

    background-color: red;

}



@media (max-width: 700px) {
    .row {
        flex-direction: column;
    }

    .row p {

        font-size: 12px;
    }
}

/*Voices starting page*/

.voices {

    width: 80%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 200px;
    
}

.voicesColumn {

    width: 50%;
    align-content: center;
    margin: 20px 20px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.15);
    display: block;
    margin-left: auto;
    margin-right: auto;

}



.voicesColumn img {

    width: 100%;
     display: block;
     border-radius: 8px;
     margin-bottom: 10px;

}

.voicesColumn p {

    padding: 0;

}

.voicesColumn h3 {

    margin-top: 16px;
    margin-bottom: 15px;
    font-size: 25px;
    font-weight: 300;
    text-align: center;
    color: rgb(26, 62, 116);
}

.voicesColumn ul {

    list-style-type:circle;

}

.voicesColumn a {

    display: inline-block;
    color: #fff;
    background-color: #2196f3;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
}

.voicesColumn a:hover {

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

.voicesColumn p {

  margin-left: auto;
  margin-right: auto;
  height: 90px;
  overflow: hidden;
  
}



.voicesColumn.showContent p {

    height: auto;

}

.voicesColumn.showContent a.readMoreButton {

    background-color: red;

}


.voicesBlogtxt{

    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 100px;
    width: 80%;
}



.voicesBlogBanner img{

    width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 50px;
    display: block;

}

.voicestxtBox {

    width: 80%;
    margin: auto;
    text-align: justify;
    box-sizing: border-box;
    display: flex;
    
}

.voicestxtBoxColumn {

    width: 80%;
    margin: 10px 30px;
    padding: 25px;
    background: #f8ffff;
    border: 1px solid #016e81 #64c5d6;
    color: #101c5f;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
   

}



p strong .blockquoteTxt{
    text-align: center;
}

.blockquoteBordered {

    border-left-width: 10px;
}

.blockquoteTxt {

    font-style: italic;
    font-size: 1.15em;
    line-height: 1.5;
    margin: 0;
    color: #000;
}

.blockquoteTxt:not(:last-child){

    margin-bottom: 1em;

}

.blockquoteTxtName {

    font-weight: bold;
    font-style: normal;
    text-align: center;
    color: #000;
    padding-top: 50px;
}



.voicesBlockquoteQuotes::before {

    content: "❝";
    font-size: 100px;
    color: rgb(46, 158, 185);
    display: block;
    margin-bottom: -40px;
    margin-top: -20px;
    text-align: center;
}

/* Read more function*/
.voicestxtBoxColumn a {

    display: inline-block;
    color: #000;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 10px;
    border: transparent;
    
}


.voicestxtBoxColumn a:hover {

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
    
}

.voicestxtBoxColumn p {

    margin-left: auto;
    margin-right: auto;
    height: 500px;
    overflow: hidden;
    margin-bottom: 16px;
    
  }
  
  
.voicestxtBoxColumn.showContent p {
  
      height: auto;
  
  }

.space {
    padding-bottom: 200px;
}

.storiesImage{
    left: 100px;
}

.storiesImage img{

    width: 30%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 50px;
    display: block;
    
}


.voicesStories{

    width: 80%;
    text-align: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 100px;

}

.voicesStories h1 {
    padding-top: 50px;
}

.voicesStories p{
    text-align: justify;
}

.top{
    text-align: center;
    padding-top: 0px;
}

.top a {

    display: inline-block;
    color: #000;
    background-color: transparent;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
    
}



.top a:hover {

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}










/*About the Team page*/


.box h3 {
    
    font-weight: bold;
    letter-spacing: 0px;
    font-size: 18px;
    text-align: center;
    
}

.container{

    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 200px;
    box-sizing: border-box;
}

.teamContainer{
    width: 100%;
    height: auto;
    padding-top: 40px;
    
}

.teamRow{

    width: 100%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-items: center;
    justify-content: center;
}

.teamRow1{

    width: 100%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-items: center;
    justify-content: center;
}

.profileCard{

    background-color: #ffffff;
    width: 250px;
    height: auto;
    margin: 20px 10px 10px 10px;
    
    border-radius: 8px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.15);

}

.profileContent{

    padding: 15px;

}

.profileImage img{

    width: 80px;
    height: 80px;
    border-radius: 50px;
    background-color: #32323e;
}

.profileImage {

    text-align: center;

}

.teamTxt{

    text-align: center;

}

.teamTxt h1{
    font-size: 20px;
    color: rgb(53, 57, 63);
    font-family: bebas kai;
    font-weight: bold;
}

.teamTxt h3{

    font-size: 13px;
    color: rgb(53, 57, 63);
    font-weight: bold;
}

.teamTxt a {

    display: inline-block;
    color: #fff;
    background-color: #2196f3;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
    
}

.teamTxt a:hover {

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

.teamTxt p {

  margin-left: auto;
  margin-right: auto;
  height: 100px;
  overflow: hidden;
  
}

.teamTxt h3 {

    text-align: center;
    font-size: 15px;
    font-weight: bold;
    
  }



  .teamTxt.showContent p {

    height: auto;

}



.teamTxt.showContent a.readMoreButton {

    background-color: red;

}



.aboutTeachers {

    width: 80%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 200px;
    padding-bottom: 50px;
    
}





/* Slideshow container */
.slideshow-container {
    position: relative;
    background: #fff;
    border: 0.3px solid #717171;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .slideshow-container:hover{

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);

  }

  .slideshow-container1 {
    position: relative;
    background: #fff;
    border: 0.3px solid #717171;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .slideshow-container1:hover{

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);

  }
  
  /* Slides */
  .mySlides {
    display: none;
    padding: 80px;
    text-align: center;
  }

   /* Slides */
   .mySlides1 {
    display: none;
    padding: 80px;
    text-align: center;
  }
  
  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -30px;
    padding: 16px;
    color: #888;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    text-decoration: transparent;
  }
  
  /* Position the "next button" to the right */
  .next {
    position: absolute;
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
    color: white;
  }
  
  /* The dot/bullet/indicator container */
  .dot-container {
    text-align: center;
    padding: 20px;
    background: rgb(199, 215, 228);
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    border: 0.3px solid #717171;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

   /* The dot/bullet/indicator container */
   .dot-container1 {
    text-align: center;
    padding: 20px;
    background: rgb(199, 215, 228);
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    border: 0.3px solid #717171;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px ;
  }
  
  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: rgb(150, 168, 207);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .dot-container:hover{

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);

  }

  /* The dots/bullets/indicators */
  .dot1 {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: rgb(150, 168, 207);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    
  }

  .dot-container1:hover{

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);

  }


  
  /* Add a background color to the active dot/circle */
   .activated, .dot:hover{
    background-color: #2196f3;
  }

    /* Add a background color to the active dot/circle */
    .activated, .dot1:hover{
    background-color: #2196f3;
}


.mySlides a {

    display: inline-block;
    color: #fff;
    background-color: #2196f3;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
    
}

.mySlides a:hover {

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

.mySlides p {

  margin-left: auto;
  margin-right: auto;
  height: 147px;
  overflow: hidden;
  
}



.mySlides.showContent p {

    height: auto;

}

.mySlides.showContent a.readMoreButton {

    background-color: red;

}

.mySlides1 a {

    display: inline-block;
    color: #fff;
    background-color: #2196f3;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
    
}

.mySlides1 a:hover {

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

.mySlides1 p {

  margin-left: auto;
  margin-right: auto;
  height: 147px;
  overflow: hidden;
  
}



.mySlides1.showContent p {

    height: auto;

}

.mySlides1.showContent a.readMoreButton {

    background-color: red;

}

.teachersColumn1 {

    width: 80%;
    align-content: center;
    margin: 50px 20px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.15);
    display: block;
    margin-left: auto;
    margin-right: auto;

}

.teachersColumn1 a {

    display: inline-block;
    color: #fff;
    background-color: #2196f3;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
    
}

.teachersColumn1 a:hover {

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

.teachersColumn1 p {

  margin-left: auto;
  margin-right: auto;
  height: 147px;
  overflow: hidden;
  
}



.teachersColumn1.showContent p {

    height: auto;

}

.teachersColumn1.showContent a.readMoreButton {

    background-color: red;

}





   /*About us Page*/

   /*olive slideshow*/


.oliveSliderTxt {

    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 200px;
    
}

.oliveSlider {

    width: 80%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
   
    
}
    

.box {

    width: 350px;
    height: 480px;
    background-color: rgba(210, 210, 211, 0.7);
    border-radius: 10px;
    box-shadow: 2px 10px 12px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 20px 10px;
    align-items: center;
    justify-content: center;
    
}

.model {

    height: 200px;
    max-height: 100%;
    max-width: 100%;
    
}

.details {

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;

}

.details p {

    font-family: calibri;
    font-weight: bold;
    color: rgb(26, 62, 116);
    text-align: center;
    margin-top: 5px;

}

.team {

    color: #32323e;
    font-weight: bold;
    letter-spacing: 0px;
    font-family: bebas kai;
    font-size: 22px;
    text-align: center;
}


.teamLink{

   text-align: center;

}

.teamLink a{

    color: #2196f3;
    text-decoration: none;

}

.deutsch {

    width: 80%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
    padding-top: 100px;

}

.deutsch h1{

    font-size: 21px;
}

.deutsch h3{
    text-align: center;
}

.deutsch a{

    text-decoration: none;
    color: #2196f3;

}



.txtBox{

    width: 80%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding-top: 100px;

}

.txtBox h1{
    text-align: center;
    font-size: 28px;
    padding-bottom: 50px;
}

.slideshow-container2 {
    width: 60%;
    position: relative;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(63, 120, 206);
    color: #101c5f;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .slideshow-container2:hover{
    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
  }

    /* Next & previous buttons */
    .prev1, .next1 {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -30px;
        padding: 16px;
        color: #888;
        font-weight: bold;
        font-size: 20px;
        border-radius: 0 3px 3px 0;
        user-select: none;
        text-decoration: transparent;
      }
      
      /* Position the "next button" to the right */
      .next1 {
        position: absolute;
        right: 0;
        border-radius: 3px 0 0 3px;
      }
      
      /* On hover, add a black background color with a little bit see-through */
      .prev1:hover, .next1:hover {
        background-color: rgba(0,0,0,0.8);
        color: white;
      }
      
      /* The dot/bullet/indicator container */
      .dot-container2 {
        text-align: center;
        padding: 20px;
        background: rgb(199, 215, 228);
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        border: 0.3px solid #717171;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    
 
      
      /* The dots/bullets/indicators */
      .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: rgb(150, 168, 207);
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
      }
    
      .dot-container:hover{
    
        box-shadow: 0 5px 5px rgba(0,0,0,0.2);
    
      }
    
   
    
    
      
      /* Add a background color to the active dot/circle */
       .activated, .dot:hover{
        background-color: #2196f3;
      }
    
        /* Add a background color to the active dot/circle */
        .activated, .dot1:hover{
        background-color: #2196f3;
    }

.txtBoxColumn {

   padding: 80px;
   display: none;
    text-align: center;
   
}

.blockquoteBordered {

    border-left-width: 10px;
}

.blockquoteTxt1 {

    font-style: italic;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    color: #000;
    
}



.blockquoteTxtName {

    font-weight: bold;
    font-style: normal;
    text-align: center;
    color: #000;
    
}



.blockquoteQuotes::before {

    content: "❝";
    font-size: 100px;
    color: #2196f3;
    display: block;
    margin-bottom: -40px;
    margin-top: -20px;
}

/* Read more function*/
.txtBoxColumn a {

    display: inline-block;
    color: #000;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 10px;
    border: transparent;
}

.txtBoxColumn a:hover {

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
    
}

.txtBoxColumn p {

    margin-left: auto;
    margin-right: auto;
    height: 125px;
    overflow: hidden;
    margin-bottom: 16px;
    
  }
  
  
  .txtBoxColumn.showContent p {
  
      height: auto;
  
  }






@media (max-width: 700px) {
    .row {
        flex-direction: column;
    }

    .row p {

        font-size: 12px;
    }
}

/*About the project Page*/

.aboutProjectBanner img {

    display: block;
    width: 20%;
    padding-top: 200px;
    margin-left: auto;
    margin-right: auto;
    
  }

.aboutProjectBanner h3 {

    text-align: center;
    font-size: 30px;
    padding-top: 50px;

}
  
  .aboutProject {
  
      
      padding-top: 50px;
      width: 80%;
      margin: auto;
      text-align:justify;
      
  }

  .aboutProject h1 {

    text-align: center;
    font-size: 30px;
  }
  
  .aboutProject h3 {
  
      position: relative;
      padding-top: 50px;
      font-size: 23px;
  
  }

  .aboutProject h3::after {
  
    content: '';
    height: 2px;
    width: 20%;
    background: rgb(92, 133, 54);
    position: absolute;
    left: 0;
    bottom: -10%;
    padding-bottom: 1.5px;
}

.curriculum{

    width: 80%;
    margin: auto;
    text-align: center;
    display: block;
    align-items: center;
    padding-top: 50px;
}

.button.effect3{

    color:#32323e;
    border: transparent;
    position: relative;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;

}

.button.effect3.effect3::after,
.button.effect3.effect3::before{

    content: "";
    display: block;
    position:absolute;
    width: 20%;
    height: 20%;
    border: 2px solid;
    transition: all 0.6s ease;
    border-radius: 2px;
}

.button.effect3.effect3::after{

    bottom: 0;
    right: 0;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: rgb(92, 133, 54);
    border-right-color: rgb(92, 133, 54);

}

.button.effect3.effect3::before{

    top: 0;
    left: 0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-color: rgb(92, 133, 54);
    border-left-color: rgb(92, 133, 54);
}



.button.effect3.effect3:hover:after,
.button.effect3.effect3:hover:before {
    border-bottom-color: rgb(92, 133, 54);
    border-right-color: rgb(92, 133, 54);
    border-top-color: rgb(92, 133, 54);
    border-left-color: rgb(92, 133, 54);
    width: 100%;
    height: 100%;
}






/*Resources page*/


.resources {

    width: 80%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    padding-top: 200px;
     
}



p.pSpace {
    padding-bottom: 50px;
}

.resources a img {

    width: 30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-top: transparent;
}


.resourcesTxt {

    padding-top: 100px;
    width: 80%;
    margin: auto;
    text-align:justify;

    
}

.resourcesTxt a img {

    width: 30%;
    display:block;
    margin-left: auto;
    margin-right: auto;
    border: 0.2px solid #a1a1a1;
    border-top: transparent;
}

.resourcesTxt h3 {
    text-align: center;
    padding-bottom: 50px;
}


p.output {
    width: 80%;
    text-align: justify;
}

.output a{

    color: rgb(45, 187, 187);
    text-decoration: none;
    
}

.resources a img {

    width: 30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 0.2px solid #a1a1a1;
    border-top: transparent;

}

.resourcesTxt p {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}




.curriculumResTxt {

    width: 80%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    padding-top: 100px;
    
}

.curriculumResTxt p {

    padding-bottom: 50px;
}

.row {

    display: flex;
    padding-bottom: 20px;
  }



.REIsColumn {

    width: 25%;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;

    
    
}

.REIsColumn a img {

    width: 100%;
    border: 0.2px solid #a1a1a1;
    border-top: transparent;

}

.curriculumRes {

    width: 80%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    padding-top: 50px;
    
}



.curriculumRes a img {

    width: 30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 0.2px solid #a1a1a1;
    border-top: transparent;
}


.briefings{

    text-align: center;
    margin: 0;
    padding: 0;
    display: block;
    padding-top: 100px;
}

.briefings h1{
    padding-top: 100px;
}

.newZealand {

    width: 80%;
    margin: 0;
    padding: 0;
    padding-top: 50px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    

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

.newZealand p{
    text-align: center;
    
}

.newZealandBanner img{

    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 50px;
    display: block;

}

.newZealandTxt{

    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
    box-sizing: border-box;
    border: transparent;
}

.newZealandTxt a{

    color: rgb(45, 187, 187);
    text-decoration: none;

}

.newZealandTxt h3 {

    text-align: center;
    
}

.newZealandTxt p {
    width: 82%;
    
}

p.italic{

    text-align: center;
    font-style: italic;

}

p.italic1 {

    text-align: center;
    font-style: italic;

}

p.writer{
   
    text-align: end;
    height: 50px;
}

.blockquoteTxt {

    font-style: italic;
    font-size: 1.15em;
    line-height: 1.5;
    margin: 0;
    color: #000;
}

.blockquoteTxt:not(:last-child){

    margin-bottom: 1em;

}


/* Read more function*/
a.readMoreButton1 {

    display: inline-block;
    color: #000;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 10px;
    border: transparent;
    height: auto;
   
}




a.readMoreButton1:hover {

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
    
}

.newZealandTxt p {

    margin-left: auto;
    margin-right: auto;
    height: 190px;
    overflow: hidden;
    margin-bottom: 16px;
    
  }

  .newZealandTxt.showContent p {
  
    height: auto;

}







/*Olive Classic Page*/

.oliveClassicBanner img {

    display: block;
    width: 15%;
    padding-top: 200px;
    margin-left: auto;
    margin-right: auto;
    
      
  }
  
  .oliveClassic {
  
      
      padding-top: 100px;
      width: 80%;
      margin: auto;
      text-align:justify;
      padding-bottom: 100px;
      
  }

  .oliveClassic h4 {
  
    text-align: center;
    padding-top: 50px;
    font-size: 26px;

}

  .oliveClassic h1 {

    font-size: 30px;
    position: relative;
    padding-top: 50px;
    
  }

  .oliveClassic h1::after {
  
    content: '';
    height: 2px;
    width: 20%;
    background: rgb(92, 133, 54);
    position: absolute;
    left: 0;
    bottom: -10%;
    padding-bottom: 1.5px;
    border-radius: 2px;
}

.classicTxt {

    padding-bottom: 50px;
}
  

  .classicTxt h1{

    
    text-align: center;
  }

 

  .classictxtBox {

    width: 80%;
    margin: auto;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    
}

.classictxtBoxColumn {

    width: 35%;
    margin: 10px 30px;
    padding: 25px;
    background: rgb(231, 240, 231);
    border: 1px solid rgb(92, 133, 54);
    color: #101c5f;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
   

}

.blockquoteBordered {

    border-left-width: 10px;
}

.blockquoteTxt {

    font-style: italic;
    font-size: 1.15em;
    line-height: 1.5;
    margin: 0;
    color: #000;
}

.blockquoteTxt:not(:last-child){

    margin-bottom: 1em;

}

.blockquoteTxtName {

    font-weight: bold;
    font-style: normal;
    text-align: center;
    color: #000;
    padding-top: 50px;
}



.classicBlockquoteQuotes::before {

    content: "❝";
    font-size: 100px;
    color: rgb(92, 133, 54);
    display: block;
    margin-bottom: -40px;
    margin-top: -20px;
}

.space {
    padding-bottom: 200px;
}


/* Read more function*/
.classictxtBoxColumn a {

    display: inline-block;
    color: #000;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 10px;
    border: transparent;
}

.classictxtBoxColumn a:hover {

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
    
}

.classictxtBoxColumn p {

    margin-left: auto;
    margin-right: auto;
    height: 90px;
    overflow: hidden;
    margin-bottom: 16px;
    
  }

  .classictxtBoxColumn.showContent p {
  
    height: auto;

}

  /*Olive Youth page*/

.oliveYouthBanner img {

    display: block;
    width: 20%;
    padding-top: 200px;
    margin-left: auto;
    margin-right: auto;
    
      
  }
  
  .oliveYouth {
  
      
      padding-top: 50px;
      width: 80%;
      margin: auto;
      text-align:justify;
      padding-bottom: 100px;
      
  }
  
  .oliveYouth h1 {
  
      position: relative;
      padding-top: 50px;
      
  
  }
  
  .oliveYouth h1::after {
  
      content: '';
      height: 2px;
      width: 20%;
      background: rgb(219, 133, 34);
      position: absolute;
      left: 0;
      bottom: -10%;
      padding-bottom: 1.5px;
      border-radius: 2px;
  }

  .oliveYouth p {

    padding-top: 50px;
    
  } 

  .youthTxt {

    padding-bottom: 50px;
}
  

  .youthTxt h1{

    
    text-align: center;
  }

 

  .youthtxtBox {

    width: 80%;
    margin: auto;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    
}

.youthtxtBoxColumn {

    width: 35%;
    margin: 10px 30px;
    padding: 25px;
    background: rgb(240, 229, 220);
    border: 1px solid rgb(219, 133, 34);
    color: #e74c04;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
   

}

.youthBlockquoteQuotes::before {

    content: "❝";
    font-size: 100px;
    color: rgb(219, 133, 34);
    display: block;
    margin-bottom: -40px;
    margin-top: -20px;
}

  /* Read more function*/
.youthtxtBoxColumn a {

    display: inline-block;
    color: #000;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 10px;
    border: transparent;
}

.youthtxtBoxColumn a:hover {

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
    
}

.youthtxtBoxColumn p {

    margin-left: auto;
    margin-right: auto;
    height: 90px;
    overflow: hidden;
    margin-bottom: 16px;
    
  }

  .youthtxtBoxColumn.showContent p {
  
    height: auto;

}

  /*Olive Women page*/

.oliveWomenBanner img {

    display: block;
    width: 20%;
    padding-top: 200px;
    margin-left: auto;
    margin-right: auto;
    
      
  }
  
  .oliveWomen {
  
      
      padding-top: 50px;
      width: 80%;
      margin: auto;
      text-align:justify;
      padding-bottom: 100px;
      
  }
  
  .oliveWomen h1 {
  
      position: relative;
      padding-top: 50px;
  
  }
  
  .oliveWomen h1::after {
  
      content: '';
      height: 2px;
      width: 20%;
      background: rgb(64, 213, 224);
      position: absolute;
      left: 0;
      bottom: -10%;
      padding-bottom: 1.5px;
      border-radius: 2px;
  }
  
  .oliveWomen p {
  
      padding-top: 50px;
  
  }
  
  .oliveWomen a{
  
      color: rgb(64, 213, 224);
  }

  .womenTxt {

    padding-bottom: 50px;
}
  

  .womenTxt h1{

    
    text-align: center;
  }

  .womentxtBox {

    width: 80%;
    margin: auto;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    
}

.womentxtBoxColumn {

    width: 35%;
    margin: 10px 30px;
    padding: 25px;
    background: #f8fffe;
    border: 1px solid #b0d2cb;
    color: #0b4237;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
   

}

.blockquoteBordered {

    border-left-width: 10px;
}

.blockquoteTxt {

    font-style: italic;
    font-size: 1.15em;
    line-height: 1.5;
    margin: 0;
    color: #000;
}

.blockquoteTxt:not(:last-child){

    margin-bottom: 1em;

}

.blockquoteTxtName {

    font-weight: bold;
    font-style: normal;
    text-align: right;
}

.blockquoteTxtName::before {

    content: "\2014\0020";
    
}

.womenBlockquoteQuotes::before {

    content: "❝";
    font-size: 100px;
    color: rgb(64, 213, 224);
    display: block;
    margin-bottom: -40px;
    margin-top: -20px;
}

 /* Read more function*/
 .womentxtBoxColumn a {

    display: inline-block;
    color: #000;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 10px;
    border: transparent;
}

.womentxtBoxColumn a:hover {

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
    
}

.womentxtBoxColumn p {

    margin-left: auto;
    margin-right: auto;
    height: 90px;
    overflow: hidden;
    margin-bottom: 16px;
    
  }

.womentxtBoxColumn.showContent p {
  
    height: auto;

}



  /*End of pages*/

.endHome {

    width: 100%;
    background-color: #fff;
    height: 70vh;
    padding-top: 100px;
    color: #777;
    text-align: center;
    display: flex;
    border-top: 0.3px solid rgb(187, 183, 183);
    
}

  .endHome h3{

    font-size: 20px;
    
}

.endHome .banner img {

    flex: 33%;
    width: 55%;
      
  }

  .endHome .banner1 img {

    flex: 33%;
    width: 80%;
      
  }

  .signature {

    width: 100%;
    background-color: #fff;
    height: 10vh;
    color: #777;
    text-align: center;
    
}

.signature a{

    color: #777;
    text-decoration-line: none;
}

nav .fa {
    display: none;
}




@media(max-width:720px){

    /*team Slider rensponsive*/

    .oliveSlider {

        width: 95%;
        height: 600px;
    }
	.box{
		width: 95%;
		height: 500px;
	}
	.model{
		height:150px;
	}
	.details p{
		font-size: 16px;
		width: 250px;
	}
	
}

@media (max-width: 700px) {

    /*About Team rensponsive*/
    .row {
        flex-direction: column;
    }

    .row1 {
        flex-direction: column;
       
       
    }


    .row2 {
        flex-direction: column;
        
    }

    .teamGroup .row1{

        width: 80%;
    }

    .teamGroup .row2{

        width: 75%;
    }

    .teamGroup .row1 img{

        width: auto;
        border-radius: 50%;

    }

    .teamGroup .row1 img.Gert {
        width: 55%;
        border-radius: 50%;
    }

    .teamGroup img.katerina {
        width: 60%;
        border-radius: 50%;
    }

   

    .teamGroup .row2 img{

        width: auto;
        border-radius: 50%;

    }

    .teamGroup .row2{
        width: 80%;
    }

    .teamGroup .row1{
        width: 80%;
    }

    .teamGroup .teamColumn{
        width: 65%;
    }

    .teachersColumn{
        width: 90%;
    }

    .row p {

        font-size: 12px;
    }
    .aboutColumn {
        width: auto;
    }

    .oliveColumn {
        width: auto;
    }
    .voicesColumn {
        width: auto;
    }

    .slideshow-container{
        width: 90%;
    }

    .dot-container{
        width: 90%;
    }

    .slideshow-container1{
        width: 90%;
    }

    .dot-container1{
        width: 90%;
    }

    /*Resources page rensponsive*/

    .sections{
        height: 55vh;
    }
    

    .sections a{

        font-size: 9px;
        margin-left: 3px;
        width: 21%;
    }


    .resources a img{
        width: 80%;
        
    }

    .resourcesTxt a img{
        width: 80%;
        
    }

    .curriculumRes a img{
        width: 80%;
    }

    .REIsColumn {
        width: 80%;
    }
    .REIsColumn a img {
        width: 100%;
    }


    .teamColumn1{
        width: auto;
    }
}

@media(max-width: 700px){

 

    .course ul {
        
        width: 100%;
        margin-left: auto;
        margin-right: auto;
     
       }
  
  /*women rensponsive*/

    .oliveWomenBanner img {
        width: 60%;
    }
  
    .womentxtBox p {
        font-size: 12px;
      }

    .womentxtBox {
        flex-direction: column;
        width: 100%;
    }

    .womentxtBoxColumn{
          width: 80%;
      }

      /*classic rensponsive*/

    .oliveClassicBanner img {
        width: 60%;
    }

    .classictxtBox  p {
        font-size: 12px;
    }

    .classictxtBox {
        flex-direction: column;
        width: 100%;
    }

    .classictxtBoxColumn{
        width: 80%;
    }

    /*youth rensponsive*/

    .oliveYouthBanner img {
        width: 60%;
    }

    .youthtxtBox  p {
        font-size: 12px;
    }

    .youthtxtBox {
        flex-direction: column;
        width: 100%;
    }

    .youthtxtBoxColumn{
        width: 80%;
    }

    .voicestxtBoxColumn{
        width: 100%;
    }
     
  
    .linkWrapper{
          display:flexbox;
          width: 68%;
          text-align: center;
      }
  
  
    .row{
          flex-direction: column;
  
      }
  

    .curriculum{

        display:flexbox;
        width: 68%;
        text-align: center;

  }

  /*in students' words rensponsive*/

  .voicesBlogtxt h3{
      font-size: 25px;
  }

  .voicesBlogBanner img{
      width: 100%;
  }

  p.italic{
      width: 100%;
  }

  /*about the project rensponsive*/
  .aboutProjectBanner img{
      width: 60%;
  }

  /*About us rensponsive*/

  .slideshow-container2{
      width: 100%;
  }

  .dot-container2{
      width: 100%;
  }

  p.blockquoteTxt1{
      width: 140%;
      margin-left: -20%;
      margin-right: -20%;
  }

  


}

@media(max-width:700px){


       /*Navigation bar rensponsive*/

       .nav-Links ul li {
        display: block;
    }
  
  .nav-Links ul li:hover > ul,
  .nav-Links ul li ul:hover {
  
      visibility: visible;
      opacity: 1;
      display: flex;
      flex-direction: column;
      position:-webkit-sticky;
      -ms-flex-direction: column;
      z-index: 9;
      background: #f44336;
      
  }
  
  
    .nav-Links {
        position: absolute;
        background: #f44336;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
        display: flexbox;
    }
  
    nav .fa{
        display: block;
        color:#32323e;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
  
    .nav-Links ul{
        padding: 30px;
    }
    
    nav .logo1{
  
      
      width: 130px;
    }
  
    nav .logo2{
  
      
      width: 130px;
    }
}
 

@media(max-width:1250px){


    /*Navigation bar rensponsive*/

    .nav-Links ul li {
     display: block;
 }

.nav-Links ul li:hover > ul,
.nav-Links ul li ul:hover {

   visibility: visible;
   opacity: 1;
   display: block;
   flex-direction: column;
   position:relative;
   -ms-flex-direction: column;
   z-index: 9;
   background: #f44336;
   
}

.dropDownMenu a{

    visibility: hidden;

}


  
.dropDownMenu.showContent a {
  
      visibility: visible;
  
}


 .nav-Links {
     position: absolute;
     background: #f44336;
     height: 100vh;
     width: 200px;
     top: 0;
     right: -220px;
     text-align: left;
     z-index: 2;
     transition: 1s;
     display: flexbox;
 }

 nav .fa{
     display: block;
     color:#32323e;
     margin: 10px;
     font-size: 22px;
     cursor: pointer;
 }

 .nav-Links ul{
     padding: 30px;
 }
 
 nav .logo1{

   
   width: 160px;
 }

 nav .logo2{

   
   width: 160px;
 }
}

@media (max-width: 700px) {

    /*About Team rensponsive*/
    .row {
        flex-direction: column;
    }

    .row1 {
        flex-direction: column;
       
       
    }

    .row2 {
        flex-direction: column;
        
    }

    .teamGroup .row1{

        width: 80%;
    }

    .teamGroup .row2{

        width: 75%;
    }

    .teamGroup .row1 img{

        width: auto;
        border-radius: 50%;

    }

    .teamGroup .row1 img.Gert {
        width: 55%;
        border-radius: 50%;
    }

    .teamGroup img.katerina {
        width: 60%;
        border-radius: 50%;
    }

   

    .teamGroup .row2 img{

        width: auto;
        border-radius: 50%;

    }

    .teamGroup .row2{
        width: 80%;
    }

    .teamGroup .teamColumn{
        width: 65%;
    }

    .teachersColumn{
        width: 90%;
    }

}

/*About team/ Team section - rensponsive*/

@media(max-width:768){
    .teamRow{
        width: 100%;
    }
    .teamRow1{
        width: 80%;
    }
}

@media(max-width:468){

    .profileCard{

        width: 290px;
        
    }
}