* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}


/* Header */


.header_wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;

}

.header_wrapper>* {
  flex: 1;
  margin: 0.313em;
}

.header_wrapper>.box-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header_wrapper>.box-wrap>.box {
  flex: 1;
  margin: 0px;
}

.header_wrapper>.box-wrap>.box:first-child {
  margin-top: 0;
}

.header_wrapper>.box-wrap>.box:last-child {
  margin-bottom: 0;
}


<!–– 
.box {
  border: 0.063em solid;
}
and the comment closes with ––>


.box .header1 {
  color: red;
  font-size: 20px;
}

.box .headercenter {
  color:#222;
  font: normal 2.250em 'Times New Roman', cursive;
  text-align: center;
}

.box .header2 {
  font-family: "Times New Roman", Times, serif;
  font-size:1.375em; 
  color:#000000; 
  text-align: right
}

.box .header2_span {
  font-family: "Times New Roman", Times, serif;
  font-size:1.375em; 
  color:#CC0000; 
  text-align: right
}

.box .header3 {
  font-size:0.938em;
  font-style:italic;
  color:#555;
  text-align: right;
}
    
    @media (max-width: 768px) {
      .header_wrapper {
        -webkit-flex-direction: column;
        flex-direction: column;
      }
      .box .header1, .box .header2, .box .header3  
       {
        text-align: center;
      }
    }



/* Style the navigation menu */


#main-nav a {
   color: #222;
   background: #ffffff;
   display: block;
   height: 3.0em;
   font-family: Arial, Helvetica, sans-serif;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   transition: background 0.4s;
   border-color: #222; 
   border-bottom-style: solid; 
   border-bottom-width: thin;
}

#main-nav a:hover {
   color: #CC0000
}

#main-nav ul {
   list-style: none;
   display: flex;
}

#main-nav li {
   width: 100%;
   text-align: center;
   position: relative;
}

#main-nav li:hover .submenu > li {
   display: block;
   top: 0px;
}

.submenu li {
   display: none;
   position: absolute;
   top: 0px;
}

.submenu {
   display: flex;
   flex-direction: column;
   position: absolute;
   width: 100%;
}

@media only screen and (max-width: 979px) {
  #main-nav ul {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1;
    flex: 1;
    display:flex;
  }
}





/* Style the content */

.wrapper {
  margin-right: auto; /* 1 */
  margin-left:  auto; /* 1 */

  max-width: 960px; /* 2 */

  padding-right: 0.625em; /* 3 */
  padding-left:  0.625em; /* 3 */
}

.wrapperwider {
  margin-right: auto; /* 1 */
  margin-left:  auto; /* 1 */

  max-width: 1200px; /* 2 */

  padding-right: 0.625em; /* 3 */
  padding-left:  0.625em; /* 3 */
}

profile {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #ffffff;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  profile {
    text-align: center;
  }
}

profilepampas {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  profilepampas {
    text-align: left;
  }
}

profilered {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  margin: 1.250em;
  background-color: #C00000;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  profilered {
    text-align: center;
  }
}

h1 {
  color: #222;
  font-size: 1.5em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

h3 {
  color: #222;
  font-size: 1.125em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

p {
  color: #222;
  font-size: 1.0em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

h4 {
  color: #CC0000;
  font-size: 1.125em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the landing page */
landing {
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/landing.jpg") no-repeat;
  background-position: center;
  background-size: cover;
display: block;
position: relative;
}

.landingtext  
{
font-family: Arial, Helvetica, sans-serif;
font-size:1.25em; 
color:#ffffff; 
text-shadow: 0.125em 0.125em 10px #555; 
text-align: center;
}


.areaname {
font-family: Arial, Helvetica, sans-serif;
font-size:1.5em;
color:#ffffff; 
text-shadow: 0.125em 0.125em 0.313em #555; 
text-align: center;
}

.areatagline  
{
font-family: Arial, Helvetica, sans-serif;
font-size:1.125em; 
font-style:italic; 
color:#ffffff; 
text-shadow: 0.125em 0.125em 0.313em #555; 
text-align: center;
}

.article-h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size:1.125em; 
  color:#ffffff; 
  text-align: left
}

.articlewhite {
  font-family: Arial, Helvetica, sans-serif;
  font-size:1.0em; 
  color:#ffffff; 
  text-align: left
}

.plainlistwhite {
  text-align: left;
  color: #ffffff;
  padding: 0;
  margin: 0; 
  padding-left: 1em; 
  list-style-type:circle;
}
.plainlistwhite > ul {
  display: inline-block;
}

a.pagelink:link,
a.pagelink:visited { color: #CC0000; text-decoration: none; }
a.pagelink:active { color: #CC0000; text-decoration: none; }
a.pagelink:hover { color: #000000; text-decoration: none; }

a.pagelinkreverse:link,
a.pagelinkreverse:visited { color: #FFFFFF; text-decoration: none; }
a.pagelinkreverse:active { color: #FFFFFF; text-decoration: none; }
a.pagelinkreverse:hover { color: #000; text-decoration: none; }

a.pagelinkwhite:link,
a.pagelinkwhite:visited { color: #FFFFFF; text-decoration: none; }
a.pagelinkwhite:active { color: #FFFFFF; text-decoration: none; }
a.pagelinkwhite:hover { color: #CC0000; text-decoration: none; }

/* Container for flexboxes */
totalarea {
  display: -webkit-flex;
  display: flex;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  totalarea {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

/* Style the areas of law pages*/
leftarea {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: red;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftarea ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #555;
  text-align: left;
}


leftareaadmiralty {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #000033;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareaadmiralty ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #000033;
  text-align: left;
}

leftareacompany {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #800020;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareacompany ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #800020;
  text-align: left;
}

leftareafamily {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #6082B6;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareafamily ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #000033;
  text-align: left;
}

leftarearegulatory {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #986868;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftarearegulatory ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #986868;
  text-align: left;
}

leftareaenergy {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #2F4F4F;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareaenergy ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #2F4F4F;
  text-align: left;
}


leftareaolive {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #6B8E23;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareaolive ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #6B8E23;
  text-align: left;
}

leftareasalmon {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #FA8072;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareasalmon ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #FA8072;
  text-align: left;
}

leftareatomato {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: red;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareatomato ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: red;
  text-align: left;
}


leftareaship {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #A91101;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareaship ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}

leftareanavy {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: navy;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareanavy ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}

leftareagray {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: gray;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareagray ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: gray;
  text-align: left;
}

leftareadarkslategray {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #2F4F4F;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareadarkslategray ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #2F4F4F;
  text-align: left;
}

leftareagreen {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #2E8B57;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareagreen ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #2E8B57;
  text-align: left;
}

leftareatomato {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: tomato;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareatomato ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: tomato;
  text-align: left;
}

leftareacornflowerblue {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: cornflowerblue;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareacornflowerblue ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: cornflowerblue;
  text-align: left;
}

leftarearoyal_blue {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #4169e1;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftarearoyal_blue ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #4169e1;
  text-align: left;
}

leftareapurple {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #8e59e9;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareapurple ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #8e59e9;
  text-align: left;
}

leftareaorange {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #DC143C;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareaorange ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #DC143C;
  text-align: left;
}

leftareamocha {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #A57C00;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareamocha ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #A57C00;
  text-align: left;
}

leftareablood {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #C00000;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareablood ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #C00000;
  text-align: left;
}

leftareaIMOblue {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #1E7ECD;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareaIMOblue ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #1E7ECD;
  text-align: left;
}

leftareaplum {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #7d6d6f;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareaplum ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #7d6d6f;
  text-align: left;
}

/* Style the areas of law pages*/
leftareaphoto {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #C00000;
  padding: 1.250em;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareaphoto ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #222;
  text-align: center;
}

leftareapampas {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareapampas ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #222;
  text-align: left;
}

leftareapampas2 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #f8f7f5;
  padding: 1.250em;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
leftareapampas2 ul {
  list-style-type: none;
  margin: 1.250em;
  padding: 0;
  color: #222;
  text-align: center;
}

rightarearegulatory {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Style the list inside the menu */
rightarearegulatory ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #222;
  text-align: left;
}


rightarea {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: black;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightarea {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaprofile {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaprofile {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaenvironmental {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/F-4-x-6-v.jpg") no-repeat;
  background-position: left bottom;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaenvironmental {
    text-align: center;
    margin: 1.250em;
  }
}


rightareaarbitration {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/arbitration.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaarbitration {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaadmiralty {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Ship-admiralty.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaadmiralty {
    text-align: center;
    margin: 1.250em;
  }
}


rightareacharity {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/charity.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareacharity {
    text-align: center;
    margin: 1.250em;
  }
}


rightareafamily1 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Family1.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareafamily1 {
    text-align: center;
    margin: 1.250em;
  }
}

rightareafamily2 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Family2.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareafamily2 {
    text-align: center;
    margin: 1.250em;
  }
}


rightareafamily3 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Family3.jpg") no-repeat;
  background-position: bottom;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareafamily3 {
    text-align: center;
    margin: 1.250em;
  }
}


rightareacompany {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/company.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareacompany {
    text-align: center;
    margin: 1.250em;
  }
}

rightareahumanrights {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/humanrights.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareahumanrights {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaship {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Ship-admiralty.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaship {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaship2 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Ship-FPSO.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaship2 {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaship3 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Ship-draught.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaship3 {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaship4 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Ship-form.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaship4 {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaship5 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Ship-offshore.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaship5 {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaenergy {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Energy-turbine.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaenergy {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaenergy2 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Energy-wind.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaenergy2 {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaenergy3 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Energy-wind.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaenergy3 {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaenergy4 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Energy-wind.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaenergy4 {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaenergy5 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Energy-electricity.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaenergy5 {
    text-align: center;
    margin: 1.250em;
  }
}


rightareaenergy6 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Energy-solar.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaenergy6 {
    text-align: center;
    margin: 1.250em;
  }
}



rightareacompany {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/company.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareacompany {
    text-align: center;
    margin: 1.250em;
  }
}


rightareacompany2 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/company2.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareacompany2 {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaEPC {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/EPC-water.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaEPC {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaEPC2 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/EPC-girders.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaEPC2 {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaEPC3 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/EPC-2.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaEPC3 {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaEPC4 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/EPC-downstream.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaEPC4 {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaEPC5 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Ship-offshore.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaEPC5 {
    text-align: center;
    margin: 1.250em;
  }
}

rightareacommercial {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/commercial.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareacommercial {
    text-align: center;
    margin: 1.250em;
  }
}

rightareamaritime {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/maritime.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareamaritime {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaemployment {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/employment.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaemployment {
    text-align: center;
    margin: 1.250em;
  }
}

rightareaclipper {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: blue;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/Clipper.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  rightareaclipper {
    text-align: center;
    margin: 1.250em;
  }
}



/* Style the areas of menu grid*/

.grid-item-h3 {
font-family: Arial, Helvetica, sans-serif;
font-size:1.125em;
color:#ffffff; 
text-align: center;
}

.grid-item-list {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.0em;
  text-align: center;
  color: #ffffff;
  padding: 0;
  margin: 0; 
  list-style-type:none;
}

      .container {
        width: 50%;
        max-width: 790px;
        margin: 0 auto;
        font-size: 14;
        text-align: center;
      }
      .grid-item, .grid-item-large {
        width: 200px;
        height: 200px;
        display: inline-block;
        margin: 0.250em;
        font-size: 1rem;
        vertical-align: top;
        padding: 1.0em;
        border: 0.313em solid transparent;
        transition:1s;
      }

      .grid-item-large {
        height: 300px;
      }
      .green {
        background-color: #2E8B57;
      }
      .olive {
        background-color: #6B8E23;
      }
      .red {
        background-color: tomato;
      }
      .blue {
        background-color: cornflowerblue;
      }
      .royal_blue {
        background-color: #4169e1;
      }
      .navy {
        background-color: navy;
      }
      .purple {
        background-color: #8e59e9;
      }
      .orange {
        background-color: #DC143C;
      }
      .white {
        background-color: white;
      }
      .gray {
        background-color: gray;
      }
      .mocha {
        background-color: #A57C00;
      }
      .blood {
        background-color: #C00000;
      }
      .logo-red {
        background-color: #fc0404;
      }
      .landing-green {
        background-color: #39820a;
      }
      .landing-blue {
        background-color: #1a4380;
      }
      .magnolia {
        background-color: #F0E10C;
      }
      .darkslategray {
        background-color: #2F4F4F;
      }
      .darkblue {
        background-color: #0c071c;
      }
      .turkeyred {
        background-color: #A91101;
      }
      .IMOblue {
        background-color: cornflowerblue;
      }
      .midnight {
        background-color: #000033;
      }
      .plum {
        background-color: #7d6d6f;
      }
      .boatblue {
        background-color: #1E7ECD;
      }
      .pampas {
        background-color: #f8f7f5;
      }
      .lightsalmon {
        background-color: #FFA07A;
      }
      .salmon {
        background-color: #FA8072;
      }
      .glaucous {
        background-color: #6082B6;
      }
      .burgundy {
        background-color: #800020;
      }
      .marsala {
        background-color: #986868;
      }



.grid-item:hover{    
    border-top: 0.313em solid red;
    border-left: 0.313em solid red;
    border-right: 0.313em solid #CC0000;
    border-bottom: 0.313em solid #CC0000;
transition:1s;}
  


      .grid-item-logo {
        width: 200px;
        height: 200px;
        display: inline-block;
        margin: 0.250em;
        font-size: 1rem;
        vertical-align: top;
        transition:1s;
      }

	.imageflexboxlogo200
	{
	width:100px;
	height:100px;
	object-fit:cover;
	}


/* Style the profiles */

/* border for profile picture  */
.border { border-width: 0.438em; border-color: white; border-style: ridge; }

/* Container for flexboxes */
profilesection {
  display: -webkit-flex;
  display: flex;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  profilesection {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}


/* Style the side */
profileside {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #C00000;
  padding: 1.250em;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  profileside {
    text-align: center;
  }
}

/* Style the content */
profilearticle {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #C00000;
  padding: 0.625em;
}

.profilenameblack {
Font-size:1.5em;
color:#555; 
text-shadow: 0.125em 0.125em 0.313em #ffffff; 
text-align: center;
}

.profiletaglineblack  
{
font-size:1.0em; 
font-style:italic; 
color:#555; 
text-shadow: 0.125em 0.125em 0.313em #ffffff; 
text-align: center;
}

.profilename {
Font-size:1.5em;
color:#ffffff; 
text-shadow: 0.125em 0.125em 0.313em #555; 
text-align: center;
}

.profiletagline  
{
font-size:1.25em; 
font-style:italic; 
color:#ffffff; 
text-shadow: 0.125em 0.125em 0.313em #555; 
text-align: center;
}

.profileemail  
{
font-size:1.0em;
color:#ffffff;
text-shadow: 0.125em 0.125em 0.313em #555;
text-align: center;
}

.profilepracticeareas  
{
font-size:1.0em;
color:#555;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: white;
}


    @media (max-width: 768px) {
      .profilename  
       {
        text-align: center;
      }
      .profiletagline  
       {
        text-align: center;
      }
      .profileemail   
       {
        text-align: center;
      }
      .profilepracticeareas   
       {
        text-align: center;
      }
    }

a.one:link {color:#ffffff;}
a.one:visited {color:#ffffff;}
a.one:hover {color:#000000;}

/* Container for flexboxes */
section2 {
  display: -webkit-flex;
  display: flex;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  section2 {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

/* Style the navigation menu */
areas {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #ffffff;
  padding: 1.250em;
  text-align: left;
}



.collapsible {
  background-color: #ffffff;
  color: black;
  cursor: pointer;
  padding: 1.125em;
  margin: 0.313em;
  width: 100%;
  border-style: ridge;
  border-width: 0.063em;
  border-color: #777; 
  text-align: left;
  outline: none;
  font-size: 1.0rem;
}

.active, .collapsible:hover {
  background-color: #ffffff;
}

.collapsible:after {
  content: '\002B';
  color: black;
  font-weight: bold;
  float: right;
  margin-left: 0.313em;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 1.125em;
  margin-left: 0.938em;
  display: none;
  overflow: hidden;
  background-color: white;
}


.parent {
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  color: #222;
  padding: 0;
  margin: 0; 
  padding-left: 1em; 
  list-style-type:circle;
  line-height: 1.5em;
  font-size:1.0em;
  display: inline-block;
}

@media (max-width: 768px) {
  .parent {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  List-style-type:none;
  Padding-left:0;
  line-height: 1.5em;
  font-size:1.0em;
}
}



.collapsedlist {
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  color: #222;
  padding: 0;
  margin: 0; 
  padding-left: 1.5em; 
  list-style-type:circle;
  line-height: 1.5em;
  font-size:0.875em; 
  display: inline-block;
}


@media (max-width: 768px) {
  .collapsedlist {
  font-family: Arial, Helvetica, sans-serif;
  List-style-type:circle;
  padding-left: 1.5em; 
  line-height: 1.5em;
  font-size:0.875em; 
  text-align: left;
  }
}


/* Style the gallery*/


ul.big {
    list-style: none;
    font-size: 300%
}

li.right::before {
    position: relative;
    /* top: 3pt; Uncomment this to lower the icons*/
    content: "";
    display: inline-block;
    /* By using an em scale, the arrows will size with the font */
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
    margin-right: 0.0em;
}

/* Change color */
li.right:hover {
  color: red; /* For the text */
}
li.right:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}

li.left::before {
    position: relative;
    /* top: 3pt; Uncomment this to lower the icons*/
    content: "";
    display: inline-block;
    /* By using an em scale, the arrows will size with the font */
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(225deg);
    margin-left: 0.0em;
}

/* Change color */
li.left:hover {
  color: red; /* For the text */
}
li.left:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}


.containergallery {
margin: auto;
text-align: center;
}

.grid-item-narrow {
width: 50px;
height: 400px;
margin: 1.250em;
font-size: 1em;
vertical-align: top;
padding: 0px;
border: 0.313em solid transparent;
line-height: 400px;
display: inline-block;
}

/* grid-item-narrow hidden on mobile */
@media (max-width: 1100px) {
  .grid-item-narrow {
    display: none;
  }
}

.grid-item-left {
  width: 400px;
  height: 400px;
  display: inline-block;
  margin: 1.250em;
  font-size: 1em;
  vertical-align: top;
}

.grid-item-right {
width: 400px;
height: 400px;
display: inline-block;
margin: 1.250em;
font-size: 1em;
vertical-align: top;
padding: 1.0em;
border: 0.313em solid transparent;
text-align: left
}

.dropbtn {
  background-color: white;
  color: black;
  padding: 1.0em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.0em;
  border-style: double;
  border-color: red;
  cursor: pointer;
  min-width: 240px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 240px;
  box-shadow: 0px 0.5em 1.0em 0px rgba(0,0,0,0.2);
  z-index: 1;
   font-family: Arial, Helvetica, sans-serif;
}

.dropdown-content a {
  color: black;
  padding: 0.375em 1.0em;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1; color: red;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #777;}


/* Style links to galleries */

.link-to-gallery{
  font-family: Arial, Helvetica, sans-serif;
}

a.link-to-gallery:link,
a.link-to-gallery:visited { color: #222; text-decoration: none; }
a.link-to-gallery:active { color: #222; text-decoration: none; }
a.link-to-gallery:hover { color: #CC0000; text-decoration: none; }


.link-to-gallery-white{
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
}

a.link-to-gallery-white:link { color: #ffffff; text-decoration: none; }
a.link-to-gallery-white:visited { color: #ffffff; text-decoration: none; }
a.link-to-gallery-white:active { color: #ffffff; text-decoration: none; }
a.link-to-gallery-white:hover { color: #CC0000; text-decoration: none; }


.link-to-gallery-white2{
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
}

a.link-to-gallery-white2:link { color: #ffffff; text-decoration: none; }
a.link-to-gallery-white2:visited { color: #ffffff; text-decoration: none; }
a.link-to-gallery-white2:active { color: #ffffff; text-decoration: none; }
a.link-to-gallery-white2:hover { color: #222; text-decoration: none; }


/* Style the scroll pages */

.top-container {
  background-color: #f1f1f1;
  padding: 1.875em;
  text-align: center;
}

.header {
  padding: 0.625em 1.0em;
  background: #ffffff;
  color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
}

.temp-content {
  padding: 1.0em;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .temp-content {
  padding-top: 6.375em;
}

.pipe-separated-list-container {
  overflow-x: hidden;
}
.pipe-separated-list-container ul {
  list-style-type: none;
  position: relative;
  left: -0.063em;
  padding: 0;
}
.pipe-separated-list-container ul li {
  display: inline-block;
  line-height: 1;
  padding: 0 1em;
  margin-bottom: 1em;
  border-left: 0.063em solid;
}

.scroll-link{
  font-family: Arial, Helvetica, sans-serif;
}

a.scroll-link:link,
a.scroll-link:visited { color: #222; text-decoration: none; }
a.scroll-link:active { color: #222; text-decoration: none; }
a.scroll-link:hover { color: #CC0000; text-decoration: none; }


.scroll-header {
  font-size: 1.125em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  text-align: center;
}

.left-header {
  color: #CC0000;
  font-size: 1.125em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  text-align: left;
}

.imageflexboxlogo400
{
width:400px;
height:400px;
object-fit:cover;
}

.left-list {
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  color: #222;
  padding: 0;
  margin: 0; 
  list-style-type:none;
  line-height: 1.5em;
  font-size:0.875em; 
  display: inline-block;
}

/* Style gallery inner columns */

/* Set additional styling options for the columns*/
.column {
float: left;
width: 50%;
background-color:#f8f7f5;
}
.row:after {
content: "";
display: table;
clear: both;
}

/* Style bottom areas links to gallery */




profilebottom {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  margin: 1.250em;
  background-color: #CCf7f5;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  profilebottom {
    text-align: center;
  }
}


/*   */

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  border: none; 
}

.button {
  background-color: #222;
  border: none;
  color: white;
  padding: 0.938em 2.0em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.0em;
  margin: 0.250em 0.125em;
  cursor: pointer;
  align: center;
  justify: center;
  font-family: Arial, Helvetica, sans-serif;
}

a.button:link { background-color: #222; text-decoration: none; }
a.button:visited { background-color: #222; text-decoration: none; }
a.button:active { background-color: #222; text-decoration: none; }
a.button:hover { background-color: #CC0000; text-decoration: none; }

.button2 {
  background-color: #222;
  border: none;
  color: white;
  padding: 0.938em 2.0em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.0em;
  margin: 0.250em 0.125em;
  cursor: pointer;
  align: center;
  justify: center;
  font-family: Arial, Helvetica, sans-serif;
}

a.button2:link { background-color: #222; text-decoration: none; }
a.button2:visited { background-color: #222; text-decoration: none; }
a.button2:active { background-color: #222; text-decoration: none; }
a.button2:hover { background-color: #f8f7f5; text-decoration: none; color: #222}


.button3 {
  background-color: #f8f7f5;
  border: none;
  color: #222;
  padding: 0.938em 2.0em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.0em;
  margin: 0.250em 0.125em;
  cursor: pointer;
  align: center;
  justify: center;
  font-family: Arial, Helvetica, sans-serif;
}

a.button3:link { background-color: #f8f7f5; text-decoration: none; }
a.button3:visited { background-color: #f8f7f5; text-decoration: none; }
a.button3:active { background-color: #f8f7f5; text-decoration: none; }
a.button3:hover { background-color: #63B8FF; text-decoration: none; }


/* Style contact page */

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-gap: 0px;
  background-image: repeating-linear-gradient(135deg, #F29B91 0px, #F09290 30px, transparent 30px, transparent 50px, #83B3DB 50px, #84ADCB 80px, transparent 80px, transparent 100px);
  padding: 23px;
   box-sizing: content-box;

}


.grid-item-stamp {
  background-color: #F7F6F4;
  text-align: right;
  padding: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.0em;
}

.grid-item-contact-left {
  background-color: #F7F6F4;
  text-align: center;
  padding: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.0em;
  border-right: 0.125em dashed #222;
}

.grid-item-contact-right {
  background-color: #F7F6F4;
  text-align: center;
  padding-top: 8px;
  padding-right: 8px;
  padding-left: 8px;
  padding-bottom: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.0em;
}

a.contactlink:link { color: #222; text-decoration: none; }
a.contactlink:visited { color: #222; text-decoration: none; }
a.contactlink:active { color: #CC0000; text-decoration: none; }
a.contactlink:hover { color: #CC0000; text-decoration: none; }


/* profiles */

.containerprofilesgallery {
margin: auto;
text-align: center;
display: flex; 
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;

}

.grid-item-profilesgallery {
  width: 300px;
  height: 300px;
  margin: 1.250em;
  font-size: 1em;
}

.plainlistwhitecenter {
  text-align: center;
  color: #ffffff;
  padding: 0;
  margin: 0; 
  list-style-type:none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.0em;
}



/* Style the list inside the menu */
.sitemaplisttier1 {
  list-style-type: circle;
  margin: 0px;
  padding-left: 1.250em;
  color: #222;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}


wood {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/wood.jpg") no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
}

areawoodpine {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/wood-pine.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Style the list inside the menu */
areawoodpine ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}

areawoodyewlight {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/wood-yew-light.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Style the list inside the menu */
areawoodyewlight ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}

areawoodyewdark {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/wood-yew-dark.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Style the list inside the menu */
areawoodyewdark ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}

areawoodpinelight {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/wood-pine-light.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Style the list inside the menu */
areawoodpinelight ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}

areawoodcherry {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/wood-cherry.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Style the list inside the menu */
areawoodcherry ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}

areawoodpinesoft {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/wood-pine-soft.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Style the list inside the menu */
areawoodpinesoft ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}

areawoodbeech {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/wood-beech.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Style the list inside the menu */
areawoodbeech ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}

areawoodoak {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/wood-oak.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Style the list inside the menu */
areawoodoak ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}

areawoodmaple {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/wood-maple.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Style the list inside the menu */
areawoodmaple ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}

areawoodsilver {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/wood-silver.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Style the list inside the menu */
areawoodsilver ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}


areawoodwalnut {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/wood-walnut.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Style the list inside the menu */
areawoodwalnut ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}

areawoodmaplestained {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/wood-maple-stained.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Style the list inside the menu */
areawoodmaplestained ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}

areawoodteak {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 1.250em;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  background: url("Images/wood-teak.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}

/* Style the list inside the menu */
areawoodteak ul {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #ffffff;
  text-align: left;
}


ul.insights {
  list-style-type: circle;
  margin: 1.250em;
  padding: 0;
  color: #222;
  text-align: left;
}

ul.insights-decimal {
  list-style-type: decimal;
  margin: 1.250em;
  padding: 0;
  color: #222;
  text-align: left;
}

ul.insights-upper-latin {
  list-style-type: upper-latin;
  margin: 1.250em;
  padding: 0;
  color: #222;
  text-align: left;
}

.insights-h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size:1.125em; 
  color:#ffffff;
  text-shadow: 0.125em 0.125em 0.313em #555; 
  text-align: center
}

.insights-p-red {
  color: #CC0000; 
  font-size: 1.0em;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left
  line-height: 1.5em;
}

.insights-h3-grey {
  color: #222;
  font-size: 1.0em;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left
  line-height: 1.5em;
}

.insights-h3-white {
  color:#ffffff; 
  font-size: 1.0em;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left
  line-height: 1.5em;
}

.insightswhite {
  margin: 1.250em;
  background-color: white;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  text-align: left;
}

span.redcircle {
  background: #CC0000;
   border-radius: 1.6em;
  -moz-border-radius: 1.6em;
  -webkit-border-radius: 1.6em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 1.0em;
  text-align: center;
  width: 1.6em; 
}

.michaelprofilepicture {
  width: 100%;
  max-width: 340px;
  height: 340px;
  background-image: url("Images/work.jpg");
  background-repeat: no-repeat;
  background-size: contain;
border-width: 0.438em; border-color: white; border-style: ridge;
margin: 0 auto;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 900px) {
  .michaelprofilepicture {
  width: 100%;
  max-width: 250px;
  height: 250px;
  }
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  .michaelprofilepicture {
  width: 100%;
  max-width: 200px;
  height: 200px;
  }
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 480px) {
  .michaelprofilepicture {
  width: 100%;
  max-width: 150px;
  height: 150px;
  }
}

.alprofilepicture {
  width: 100%;
  max-width: 340px;
  height: 340px;
  background-image: url("Images/al_mustakim.jpg");
  background-repeat: no-repeat;
  background-size: contain;
border-width: 0.438em; border-color: white; border-style: ridge;
margin: 0 auto;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 900px) {
  .alprofilepicture {
  width: 100%;
  max-width: 250px;
  height: 250px;
  }
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 768px) {
  .alprofilepicture {
  width: 100%;
  max-width: 200px;
  height: 200px;
  }
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 480px) {
  .alprofilepicture {
  width: 100%;
  max-width: 150px;
  height: 150px;
  }
}

profilepampashome {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  margin: 1.250em;
  background-color: #f8f7f5;
  padding: 0.625em;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  text-align: center;
}

.higher{
	background-color: #f8f7f5;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	vertical-align: top;
	line-height: 1.25em;
	color:  #222;
	font-weight: normal;
	display: block;
	color:  #222;
	text-align: center;
	font: sans-serif;
	font-size: 1.0em;
	padding: 3.438em 3.125em;
	margin-top: 0;
	margin-bottom: 1.25em;
}




a.abovefooterpagelink:link,
a.abovefooterpagelink:visited { color: #222; text-decoration: none; }
a.abovefooterpagelink:active { color: #222; text-decoration: none; }
a.abovefooterpagelink:hover { color: #CC0000; text-decoration: none; }