/* Navigation */

.dropmenubutton {
  background-color: #cecece;
  color: rgb(0, 0, 0);
  font-size: 15px;
  border: none;
  width: 100%;
}

.menu {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdowncontent {
  display: none;
  position: absolute;
  background: rgb(219, 219, 88);
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  text-align: center;
}
  

.dropdowncontent a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdowncontent a:hover {background: rgba(107, 206, 142, 0.7);}

.menu:hover .dropdowncontent {display: block;}

.menu:hover .dropmenubutton {background-color: #a1daa3;}
 /* END OF NAVIGATION */

body {
  
  background-image: url("felixstowe2.jpg");

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 100%;
}

 /* Headline */

.banner {
  text-align: center;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  background: rgba(206, 199, 199, 0.7); 
  padding: 10px;
  margin-bottom: 20px;
  margin-top: 10px;
  border-radius: 25px;
  color: #ffffff;

        }

/* END OF HEADLINE */

/* Parent wrapper for intro and seo */
.flex-parent-element {
  display: flex;
  flex-wrap: wrap;
  
  
}


/* About.php section introduction */


 .intro_2 {
  
  width: 50%;
  background: rgba(206, 199, 199, 0.7); 
  border-radius: 25px;
  margin-left: auto;
  margin-right: auto;
  color: #ffffff;
  padding: 10px;
  
        }





/* Introduction and CMS Logos */
.intro {
  
  flex: 40%;
  background: rgba(206, 199, 199, 0.7); 
  border-radius: 25px;
  margin-left: 10px;
  margin-right: 10px;
  color: #ffffff;
  padding: 10px;
  
        }


.intro p{

 margin: auto;
        }


.intro h1{

 margin: auto;
        }

.image_wrapper{
  display: flex;
  
}

.image_column{
  padding: 5px;
  margin: auto;
}

.image_column img {

  width: 4vw;

}

 /* END OF INTRODUCTION AND CMS LOGOS */

.seo {
  flex: 25%;
  margin-left: 10px;
  margin-right: 10px;
  background: rgba(202, 228, 117, 0.7); 
  border-radius: 25px;
  padding: 10px;
  color: #ffffff;
   

}



.seo_2 {
  flex: 25%;
  margin-left: 10px;
  margin-right: 10px;
  background: rgba(202, 228, 117, 0.7); 
  border-radius: 25px;
  padding: 10px;
  color: #ffffff;
   

}


.seo p{

 margin: auto;
        }


.seo_2 p{

 margin: auto;
        }

/* Center website - for the image portfolio */
.main {
  max-width: 98%;
  margin: auto;
  padding: 10px;
  box-sizing: border-box;
}

main h1{
  font-size: 50px;
  word-break: break-all;
}


.row {
  margin: 8px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 23.5%;
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}



 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

.seo_2{
          margin-top: 10px;
          flex: 90%;

        }


.seo{
          margin-top: 10px;
          flex: 90%;

        }

.intro{
          margin-top: 10px;
          flex: 90%;

        }


.intro_2{
          margin-top: 10px;
          width: 90%;

        }

.intro_2 p{
      font-size: 24px;
 
        }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

.seo_2{
          margin-top: 10px;
          flex: 90%;

        }


.seo{
          margin-top: 10px;
          flex: 90%;

        }

.intro{
          margin-top: 10px;
          flex: 90%;

        }


.intro_2{
          margin-top: 10px;
          width: 90%;

        }

.intro_2 p{
      font-size: 24px;
 
        }

.intro p{
      font-size: 24px;
 
        }

  .seo p {

    font-size: 24px;

        }

        
  .seo p{
          font-size: 24px;
      padding: 0px;
        }
  
.seo_2 {
font-size: 24px;

}


 .image_column img {

        width: 9vw;

        }

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
 .intro p{
      font-size: 24px;
 
        }

  .seo p {

    font-size: 24px;

        }

        
  .seo_2 p{
          font-size: 24px;

        }


.seo_2{
          margin-top: 10px;
          flex: 25%;

        }


.seo{
          margin-top: 10px;
          flex: 25%;

        }

.intro{
          margin-top: 10px;
          flex: 40%;

        }


.intro_2{
          margin-top: 10px;
          width: 60%;

        }

.intro_2 p{
      font-size: 24px;
 
        }


}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

  .intro p{
      font-size: 20px;
 
        }
    .seo p {

    font-size: 20px;
   
        }


      .seo_2 p {

    font-size: 20px;
   
        }

.flex-container {
    flex-direction: column;
  }


}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

  .intro p{
      font-size: 28px;
        }

 .seo p {
    font-size: 28px;
        }

 .seo_2 p {
    font-size: 28px;
        }


 .banner h1{
      font-size: 34px;
        }


 .image_column img {
        width: 7vw;
        }
  .main {
      clear: both;
    margin-left: auto;
    margin-right: auto;
        }


.column {
  float: left;
  width: 23.5%;
}


} 





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

/* 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 {
    width: 98%;
    padding: 0px;
  }
  
}