/* Style the body */
html, body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background-color: #333;
  padding-top: 3%;  /* for fixed header, increae to move down */
}

/* Header/logo Title */
.header {
  padding-left: 160px;
  padding-bottom: 6%;
  background: #333;
  color: white;
  width: 100%;
  height: 100%;
}


/* Style the top navigation bar */
.navbar {
  padding: 0px;
  overflow: hidden;
  display: flex;
  background-color: #333;
  z-index: 1000;
  font-size: inherit;

}

/* Style the navigation bar links */
.navbar a {
  font-size: 15px;
  float: left;
  display: block;
  color: grey;
  text-align: center;
  /*vertical-align: bottom;*/
  padding: 10px 16px;
  text-decoration: none;
}

/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Visited tab */
.navbar a:visited {
  background-color: #ddd;
  color: grey;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Hamburger button (hidden on large screens) */
.menu-toggle {
  display: none;
  font-size: 24px;
  cursor: pointer;
  color: grey;
  margin-left: auto;
}


header, .navbar {
  position: fixed;   /* makes it stick */
  top: 0;            /* sticks to the very top */
  left: 0;
  width: 100%;       /* full width */
  z-index: 1000;     /* keeps it above other elements */
  font-size: inherit;

}


/* Main column */
.main {   
  /*-ms-flex: 70%; /* IE10 */
  /*flex: 70%;*/
  transition: margin-left 0.3s ease;
  background-color: #2E2E2E;
  padding-left: 0px;
  margin:0;
  display:block;
  float: left;
}


/* Column container */
.row {  
  /*display: -ms-flexbox; /* IE10 */
  display: flex;
  /*-ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  transition: margin-left 0.3s ease;
}


/* Expand sidebar + push content when hover */
.edge-hover-zone:hover ~ .side {
  width: 350px;           /* expanded state */
  padding: 20px; 0;
  word-wrap: break-word; /* break long words if needed */
  white-space: normal;
  opacity: 1;
}

.edge-hover-zone:hover ~ .side ~ .main {
  margin-left: 350px;     /* push content over */
  padding: 0;
}

/* Adjust hover zone to match collapsed sidebar */
.edge-hover-zone {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px; /* slightly larger than collapsed bar for easy hover */
  height: 100%;
  z-index: 1000;
}


/* Sidebar/left column */
.side {
  box-sizing: border-box;
  position: fixed;
  background-color: #333;
  padding: 20px 0;        /* remove side padding so collapsed state stays slim */
  top: 0;
  left: 0;
  width: 10px;            /* narrow collapsed bar always visible */
  height: 100%;
  overflow-x: hidden;
  transition: width 0.3s ease;
  overflow-x: hidden;
  white-space: normal;
  z-index: 999;
  opacity: 1;
}


/* Main Banner */
.banner {   
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: #2E2E2E;
  padding: 160px;
  margin:0;
  display:block;
}



/* Frame */
.frame {
  background-color: #161616;
  padding: 0px;
  float:left;
  display:block;
}

/* Images */
.img {
  padding: 0px;
  float:left;
  display:block;
}

/* Box */
.imgbox {
  width: 100%;
  padding: 0px;
  background-color: #2E2E2E;
  float:left;
  display:block;
}



/* Box */
.box {
  background-color: #2E2E2E;
  text-align: center;
  width: 100%;
  padding: 0px;
  float:left;
  display:block;
}

.box2 {
  background-color: #333;
  text-align: center;
  width: 100%;
  padding: 0px;
  float:left;
  display:block;
}

/* Footer */
.footer {
  padding: 1%;
  width:100%;
  font-size:26px; 
  color: grey;
  background: #333;
  padding: 16;
}

.footer a, h4, h5 {
  color: grey;
  text-decoration: none; /* optional: removes underline */
  font-size: 14px;
}

.footer a:hover {
  color: lightgrey; /* hover effect */
}

/* Page text styles */

a{
  color:lightgrey;
  font-size: 20px;
  text-decoration:none;
  text-align: right;
  line-height: 1.5;
}


/* Paragraphs */
p {
  font-size: 20px; 
  line-height: 1.6;   /* ~160% */
  color: grey;        /* default color */
  padding: 160px;
  width: 50%;
  margin-bottom: 20px;
  color:grey;
  text-wrap: balance;
  vertical-align: bottom;
}


/*Header special text setting */

.header h2 {
  letter-spacing: 4pt; 

}

/* Headings */
h2, h3, h4, h5 {
  float:left;
  color: grey;
  margin-top: 0;
  margin-bottom: 0pt;
  line-height: 1;
  font-weight: normal;
  letter-spacing: 0.5px;
  width: 100%;
  padding: 0px;
  display:block;


}

h1 { font-size: 40px; letter-spacing: 6pt;}
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 14px; }


/* Special text blocks */
.banner h2,{
  padding: 0px;
  color: grey;
  text-align: right;
  margin: 0;
}

.banner h5 {
  padding: 0px;
  color: grey;
  text-align: right;
  margin: 0;
}

.largebanner-text {
    /*font-size:160px;*/
    transition: margin-left 0.3s ease;
    font-size: clamp(32px, 8vw, 160px);
    font-weight: normal;
    text-align: right; 
    line-height: 94%;
    color:white; 
    background-color: black; 
    padding: 0px; 
    margin: 0px; 
    display: block;

}


/* Responsive layout - when the screen is more than 2000px wide, make the two columns side by side next to each other */
@media screen and (min-width: 2000px) {
  .responsive {   
    max-width: 10%;
  }
}



 Responsive layout - when the screen is less than 1400px wide, make the two columns stack on top of each other instead of next to each other 
@media screen and (max-width: 1800px) {
  .row {   
    flex-direction: column;
  }
  .p {
    float: none;
    width: 100%;
    padding: 0;
    display:block;
  }
}

/* Responsive layout - when the screen is less than 680px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 1400px) {

  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar a {
    float: none;
    display:none;
    width: 100%;
    font-size: 90%;
    text-align: right;
    padding: 0.1pt 16px;
    border-top: 1px solid #444;
  }

  .menu-toggle {
    display: block;  /* show hamburger */
    /*margin-left: auto;*/
  }

  .navbar.active a {
    display: block;  /* show links when toggled */
  }


  .header{
    padding: 16px;
  }

  .banner{   
    float: none;
    width: 100%;
    padding: 16px;
    display:block;
    font-size: 90%;
  }

  .banner h5{
    text-align: left;
    letter-spacing: 0.8px;
  }


  a, h1, h2, h3, h4, h5 {
    float: none;
    font-weight: normal; /*remove all bold text */
    font-size: 100%;
    letter-spacing: 0.6px;
    text-align: left;
  }


  p {
    font-size: 96%;
    line-height: 120%;
    color: lightgrey;
    width: 100%;
    margin: 0;
    padding: 16px;
    padding-top: 40px;
    vertical-align: bottom;
  }

  .footer {
    font-size:60%; 
  }
}