@import url("https://fonts.googleapis.com/css2?family=Hubballi&family=League+Gothic&family=Frijole&display=swap");

:root {
  --Header-font: "LeagueGothic";
  --Content-font: "Hubballi";
  font-size: 20px;
  --Logo-font: "Frijole";
}

body {
  background: linear-gradient(
    180deg,
    rgba(40, 128, 130, 1) 0%,
    rgba(40, 28, 4, 1) 40%);
  color: darkgrey;

  font-family: var(--Content-font);
}

.container {
  max-inline-size: 1024px;
  margin: 0 auto;
  padding: 10px 10px 10px 10px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--Header-font);
}

* {
  box-sizing: border-box;
}

/*BROWSER FORMAT MIN: 0 MAX: 767*/
/*BROWSER FORMAT MIN: 0 MAX: 767*/

@media screen and (min-width: 0px) and (max-width: 767px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, auto);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  nav {grid-area: 1 / 1 / 2 / 2;}
  .lijn01 {grid-area: 2/ 1 / 3 / 2;}
  picture {grid-area: 3/ 1 / 4 / 2;}
  .lijn02 {grid-area: 4/ 1 / 5 / 2;}
  .contenta {grid-area: 5/ 1 / 6 / 2;}
  .lijn03 {grid-area: 6/ 1 / 7 / 2;}
  .media1 {grid-area: 7/ 1 / 8 / 2;}
  .lijn04 {grid-area: 8/ 1 / 9 / 2;}
  .cardsSection {grid-area: 9/ 1 / 10 / 2;}
  footer {grid-area: 10/ 1 / 11 / 2;}

  nav {
    display: flex;
    justify-content: center;
    flex-flow: wrap;
  }

  .logo {
    margin-block-end: 10px;
  }

  .topnav a,
  .dropbtn {
    display: none;
  }

  .topnav a.icon {
    display: block;
  }

  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive .icon {
    position: absolute;
    left: 0px;
    top: 0px;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }

  .topnav.responsive .dropdown {
    float: none;
  }

  .topnav.responsive .dropdown-content {
    position: relative;
  }

  .topnav.responsive .dropdown .dropbtn {
    display: block;
    inline-size: 100%;
    text-align: center;
  }

  .topnav {
    display: block;
    inline-size: 100%;
  }

  .contenta1 {
    column-count: 1;
    margin-inline-start: 15px;
    margin-inline-end: 15px;
  }

  .contentb2 {
    margin-block-end: 20px;
  }

  .contentb5 {
    margin-block-start: 20px;
    margin-block-end: 20px;
  }

  video {
    margin-block-start: 20px;
  }

  .contentb1 {
    position: relative;
    padding-block-end: 56.3%;
    block-size: 0px;
    border: 0px;
  }

  .card {
    margin-inline-start: 10px;
    margin-inline-end: 10px;
  }

  .brandTableimage,
  .brandTableinfo {
    display: block;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  .visserijTableimage,
  .visserijTableinfo {
    display: block;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  .responsivegalery {
    display: flex;
    flex-direction: column;
  }
}

/*BROWSER FORMAT MIN: 767 MAX: 1023*/
/*BROWSER FORMAT MIN: 767 MAX: 1023*/

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(11, auto);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  nav {
    grid-area: 1 / 1 / 2 / 13;
  }
  .lijn01 {
    grid-area: 2 / 1 / 3 / 13;
  }
  picture {
    grid-area: 3 / 1 / 4 / 13;
  }
  .lijn02 {
    grid-area: 4 / 1 / 5 / 13;
  }
  .contenta {
    grid-area: 5 / 1 / 6 / 13;
  }
  .lijn03 {
    grid-area: 6 / 1 / 7 / 13;
  }
  .media1 {
    grid-area: 7 / 1 / 9 / 13;
  }
  .lijn04 {
    grid-area: 9 / 1 / 10 / 13;
  }
  .cardsSection {
    grid-area: 10 / 1 / 11 / 13;
  }
  footer {
    grid-area: 11 / 1 / 12 / 13;
  }

  h1 {
    grid-area: 5 / 1 / 6 / 13;
  }
  .responsivegalery {
    grid-area: 6 / 1 / 7 / 13;
  }

  article {
    grid-area: 6 / 1 / 7 / 13;
  }
  .visserijTable {
    grid-area: 7 / 1 / 8 / 13;
  }

  .mapouter {
    grid-area: 3 / 1 / 4 / 13;
  }
  .contact {
    grid-area: 6 / 1 / 7 / 13;
  }

  .responsivegalery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .media1 {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
  }

  .box:nth-child(5),
  .box:nth-child(4) {
    grid-column: span 6;
  }

  .box:nth-child(3),
  .box:nth-child(2),
  .box:nth-child(1) {
    grid-column: span 4;
  }

  nav {
    display: flex;
    justify-content: space-between;
  }

  .topnav {
    float: right;
    display: block;
    min-inline-size: 350px;
    margin-block-start: auto;
    margin-block-end: auto;
  }

  .contact {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
  }

  .contentb2 {
    margin-inline-end: 10px;
  }

  .contentb4 {
    margin-inline-end: 10px;
  }

  .contentb3 {
    margin-inline-start: 10px;
  }

  .contentb1 {
    position: relative;
    padding-block-end: 56.3%;
    block-size: 0;
    border: 0;
  }

  .contenta {
    display: flex;
  }

  .contenta1 {
    inline-size: 47.5%;
    margin-inline-end: 2.5px;
    margin-inline-start: 25%;
  }

  .contenta2 {
    inline-size: 47.5%;
    margin-inline-start: 2.5px;
  }

  .cardsSection {
    display: flex;
    flex-direction: row;
  }

  /* .card{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 
    ". header header header header ."
    "text text text image image image"
    ". . . ."
    ". . button button . .";
  }

  .newCard {
    grid-area: header;
  }

.cardText{
  grid-area: text;
}

  .img_left{
    grid-area: image;
  }

  a.newCard{
    grid-area: button;
  } */

  .card {
    border-radius: 8px;
    margin-inline-start: auto;
    margin-inline-end: auto;
    inline-size: 31%;
    block-size: 550px;
  }
}

/*MAX CONTENT FORMAT: 1024 IN BROWSER FORMAT MIN: 1024 AND LARGER*/

@media screen and (min-width: 1024px) {
  .container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(10, auto);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  nav {
    grid-area: 1 / 1 / 2 / 13;
  }
  .lijn01 {
    grid-area: 2 / 1 / 3 / 13;
  }
  picture {
    grid-area: 3 / 1 / 4 / 13;
  }
  .lijn02 {
    grid-area: 4 / 1 / 5 / 13;
  }
  .contenta {
    grid-area: 5 / 1 / 6 / 13;
  }
  .lijn03 {
    grid-area: 6 / 1 / 7 / 13;
  }
  .media1 {
    grid-area: 7 / 1 / 9 / 13;
  }
  .lijn04 {
    grid-area: 9 / 1 / 10 / 13;
  }
  .cardsSection {
    grid-area: 10 / 1 / 11 / 13;
  }
  footer {
    grid-area: 11 / 1 / 12 / 13;
  }

  h1 {
    grid-area: 5 / 1 / 6 / 13;
  }
  .responsivegalery {
    grid-area: 6 / 1 / 7 / 13;
  }

  article {
    grid-area: 6 / 1 / 7 / 13;
  }
  .visserijTable {
    grid-area: 7 / 1 / 8 / 13;
  }

  .mapouter {
    grid-area: 3 / 1 / 4 / 13;
  }
  .contact {
    grid-area: 6 / 1 / 7 / 13;
  }

  .responsivegalery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .media1 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }

  nav {
    inline-size: 100%;
    display: flex;
    justify-content: space-between;
  }

  .contact {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
  }

  .topnav {
    float: right;
    display: block;
    min-inline-size: 350px;
    margin-block-start: auto;
    margin-block-end: auto;
  }

  .contentb1 {
    position: relative;
    padding-block-end: 67%;
    block-size: 0;
    border: 0;
  }

  .contenta {
    display: flex;
  }

  .contenta1 {
    inline-size: 47.5%;
    margin-inline-start: 25%;
  }


  .cardsSection {
    display: flex;
    flex-direction: row;
  }

  .card {
    border-radius: 8px;
    inline-size: 31%;
    block-size: 550px;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }
}

/* OVERIGE */

hr {
  border: 2px white solid;
  border-radius: 5px;
  inline-size: 100%;
  margin-block-start: 10px;
  margin-block-end: 10px;
}

img {
  inline-size: 100%;
  block-size: auto;
}

/* LOGO MAIN*/

.logo {
  border: 4px black groove;
  border-radius: 40%;
  inline-size: 346px;
  block-size: 200px;
  background-image: url("../image/logo_kaal.png"),
    linear-gradient(180deg, rgb(59, 175, 177) 35%, rgb(168, 123, 33) 90%);
}

.center {
  margin-block-start: 95px;
  margin-inline-start: 50px;
  transform: rotate(-19deg);
  font-size: 22px;
  font-family: var(--Logo-font);
  background: linear-gradient(rgb(255, 232, 196), rgb(202, 255, 248));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

/* Menu */

.topnav {
  overflow: hidden;
  background-color: #333;
  border-radius: 8px;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* .topnav a:hover {
  background-color: #ddd;
  color: black;
} */

.topnav a.active {
  background-color: rgb(168, 123, 33);
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 12px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-inline-size: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: rgb(168, 123, 33);
  color: white;
}

/* .dropdown-content a:hover {
  background-color: rgb(168, 123, 33);
  color: black;
} */

.dropdown:hover .dropdown-content {
  display: block;
}

/* CONTENT DEEL A*/

.contenta {
  background-color: #28625c;
  padding-block-end: 10px;
  border-radius: 8px;
}

h1.kolom {
  column-span: all;
  margin-block-start: 25px;
  padding: 8px 8px 0 8px;
  text-align: center;
}



/* CONTENT DEEL B*/

video {
  inline-size: 100%;
  block-size: auto;
}

iframe {
  border: none;
}

.contentb1 iframe,
.contentb1 object,
.contentb1 embed {
  position: absolute;
  inline-size: 100%;
  block-size: 100%;
}

.box {
  display: flex;
  align-items: stretch;
}

/* CONTENT DEEL C*/

a.newCard:link {
  color: currentColor;
  text-decoration: none;
}

.card {
  border: 4px solid #28625c;
  background-color: rgba(105, 78, 19, 0.384);
  border-radius: 8px;
  display: flex;
  flex-flow: column;
  margin-block-end: 15px;
}

h2.newCard {
  margin-block-start: 0px;
  padding: 8px 8px 0 8px;
}

p.cardText {
  padding: 0 8px 8px 8px;
  flex: 1;
}

a.newCard {
  background-color: #28625c;
  border: 1px solid black;
  color: #171717;
  margin-block-end: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  align-self: center;
}

/*GALERIJ PAGINA*/

.gallery {
  border: 1px solid #ccc;
  border-radius: 5px;
}

.gallery:hover {
  border: 5px solid rgb(168, 123, 33);
}

.desc {
  padding: 15px;
  text-align: center;
}

.responsivegalery {
  float: left;
  inline-size: 100%;
  column-gap: 10px;
  row-gap: 10px;
  margin-block-end: 20px;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*FOOTER*/

.logo_footer {
  border: 4px black groove;
  border-radius: 40%;
  inline-size: 175px;
  block-size: 101px;
  background-image: url("../image/logo_kaal_footer.png"),
    linear-gradient(180deg, rgb(59, 175, 177) 35%, rgb(168, 123, 33) 90%);
  margin: 0 auto;
  margin-block-end: 15px;
}

.center_footer {
  margin-block-start: 44px;
  margin-inline-start: 15px;
  transform: rotate(-19deg);
  font-size: 11px;
  font-family: var(--Logo-font);
  background: linear-gradient(rgb(255, 232, 196), rgb(202, 255, 248));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

footer {
  background-color: #14312e;
  padding-block-start: 20px;
  font-size: 15px;
  line-height: 24px;
  color: #737373;
  padding-bottom: 0;
  text-align: center;
  border-radius: 8px;
}

footer hr {
  opacity: 0.5;
}

footer h6 {
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  margin-block-start: 5px;
  letter-spacing: 2px;
}

footer a {
  color: #737373;
}

footer a:hover {
  color: #3366cc;
  text-decoration: none;
}

.footer-links {
  padding-inline-start: 0;
  list-style: none;
}

.footer-links a {
  color: #737373;
}

.footer-links a:active,
.footer-links a:focus,
.footer-links a:hover {
  color: #3366cc;
  text-decoration: none;
}

.copyright-text {
  margin: 0;
  text-align: center;
}

/*CONTACT PAGINA*/

.contact {
  display: flex;
  justify-self: center;
}

.mapouter {
  position: relative;
  text-align: right;
  block-size: 500px;
  inline-size: 100%;
}

.gmap_canvas {
  overflow: hidden;
  background: none !important;
  block-size: 500px;
  inline-size: 100%;
  border: none;
  margin-block: 0px;
  margin-inline: 0px;
  overflow: hidden;
}

/*MERKEN PAGINA*/

.brandTable {
  inline-size: 100%;
  border-spacing: 15px;
}

.brandTableimage {
  inline-size: 25%;
}

.brandTableinfo {
  inline-size: 75%;
}

/*VISSERIJ PAGINA*/

.visserijTable {
  inline-size: 100%;
  border-spacing: 15px;
}

.visserijTableimage {
  inline-size: 30%;
}

.visserijTableinfo {
  inline-size: 70%;
}