/* * Main content */ */
.main {
  margin-top: 30px; /* Add a top margin to avoid content overlay */
}

div.tooltip {
    position: absolute;
    text-align: center;
    width: 50px;
    height: 33px;
    pointer-events: none;
  }

body {font-family: Arial, Helvetica, sans-serif; 
      line-height: 160%; 
      font-size: 16px;  
      margin: 0;  
      text-align: center;
      z-index:1;
      background-color: white}

path.link {
fill: none;
stroke-width: 2px;
}
.node:not(:hover) .nodetext {
display: none;
}
header {padding: 20px; position: absolute; top: 0; left: 0;}
p { font-size: 20px;}

h1 { font-size: 48px; margin: 40px 10px 30px 10px; font-weight: normal; line-height: 45px;}
h2 { font-size: 32px; margin: 10px 10px 30px 10px; font-weight: normal;}
h3 { font-size: 26px; margin: 10px 10px 30px 10px; font-weight: normal;}
article { text-align: left; width: 90%; margin: 0 auto;}

@media only screen and (min-width: 768px) {
  article { text-align: left; width: 50%; margin: 0 auto;}
  h1 { font-size: 52px; margin: 40px 10px 30px 10px; font-weight: normal; line-height: 45px;}
  h2 { font-size: 36px; margin: 10px 10px 30px 10px; font-weight: normal;}
  h3 { font-size: 30px; margin: 10px 10px 30px 10px; font-weight: normal;}
}

a:link.oliverLink { color: #FF1493; text-decoration: none;}
a:visited.oliverLink { color: #FF1493; }
a:hover.oliverLink { color: #FFC0CB; text-decoration: underline;}
a:link.rosieLink { color: #141DFF; text-decoration: none;}
a:visited.rosieLink { color: #141DFF; }
a:hover.rosieLink { color: #89cff0; text-decoration: underline;}
a:active { color: #EE3124; }
#invalid {
  width:50%;
  visibility: hidden; 
  color: #d00;
  padding: auto;
  margin: auto;
  text-align: middle;
}
select {margin: 10px 10px 30px 10px}
svg {margin: 5px 5px 5px 5px}
/* checkbox grid format */
.checkbox-container {
  white-space: nowrap;
  width: 50%;
  height:50px;
  margin: 0 auto;
  padding-left:5%;
}

label {
  display: block;
  float: left;
  text-align: left;
  width: 25%;
  font-size: 14px;
}

img:hover {
  position:relative;
  top:0px;
  left:0px;
  width:200px;
  height:auto;
  display:block;
  z-index:800;
  transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -webkit-transition: width 1s ease-in-out;
}

@media screen and (max-width: 768px) {

.checkbox-container {
  padding-left:0;
}

label {
  display: block;
  float: left;
  text-align: left;
  width: 45%;
  padding-right:5%;
  font-size: 14px;
}

img:hover {
  position:relative;
  top:0px;
  left:0px;
  width:50px;
  height:100px;
  display:block;
  z-index:800;
  /* transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -webkit-transition: width 1s ease-in-out; */
}


}

.galleryLeft{
  display: grid;
  grid-template-columns: repeat(17, 5vw);
  grid-template-rows: repeat(17, 5vw);
  margin: auto;
}


@media only screen and (min-width: 768px) {
  .galleryLeft{
    display: grid;
    grid-template-columns: repeat(17, 2.5vw);
    grid-template-rows: repeat(17, 2.5vw);
    margin: auto;
  }
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gridParent {
  display: grid;
  margin: auto;
}

.breaker{
  color : #0e005e;
  border : 2px solid #0e005e;
  margin-bottom : 5px;
}

img.endPreview{
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

/* The navigation bar */
.navbar {
  overflow: hidden;
  background-color: #0e005e;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  z-index: 999;
  border-style: solid;
  border-width: 0px;
  border-bottom-width: 2px;
  border-bottom-color: #0e005e;
}

/* Links inside the navbar */
.navbar a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 30px;
  font-weight: bold;
}

/* Change background on mouse-over */
.navbar a:hover {
  background: white;
  color: #0e005e;
}

select {
  font-size: 15px;
}