*,
*:before,
*:after {
   box-sizing: border-box;
}

body {
   width: 100%;
   margin: 0;
   padding: 0;
   background-color: #666; /*#f4f4f4;*/
   color: #555;
   font-family: Arial, Helvitica, sans-serif;
   font-size: 16px;
   line-height: 1.6em;
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: 0 0;
   background-image: url("../resources/images/Icons/leather.jpg");
   background-position: center;
   background-repeat: repeat;
   background-size: contain;
}
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/

#header {
   background-color: #9f7732;
   background-image: linear-gradient(to bottom right, #9f7732, #bfa477);
   color: darkcyan; /*#6b0000;*/
   text-align: center;
   word-spacing: 0.5em;
   text-shadow: 2px 2px 3px #6b0000;
}

#header h1 {
   font-size: 4vmax;
}

#header h2 {
   font-size: 3vmax;
}

/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/

#nav-container {
   position: sticky;
   top: 0;
   background-color: #333;
   color: #fff;
   padding: 0.05em 0.1em;
   min-height: 2em;
   z-index: 100;
}

#nav-items {
   padding: 0.1em 0 0.2em;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   align-content: space-around;
}

.nav-item {
   height: 100%;
   text-decoration: none;
   text-align: center;
   display: block;
   /*white-space:nowrap;*/
   background-color: #333;
   color: #fff;
   margin: 0.2em 0.2em;
   padding: 0.1em 0.5em;
   border: 0.1em solid #999;
   border-radius: 1em;
   box-shadow: 0.1em 0.1em 0.2em 0.1em rgba(255, 127, 80, 0.7); /*#ff7f50 = coral;*/
}

.nav-current-page {
   color: #999;
}

.nav-allowed:hover /*, .nav-allowed:focus*/ {
   background-color: #bfa477;
   transform: scale(0.92);
   /* box-shadow:0.05em 0.05em 0.8em 0.05em rgba(255,127,80,0.7);*/
   /*padding:0.1em 0.41em .1em .59em; */
}

.menu-icon {
   /*border:3px solid red;*/
   padding: 0.5em 0.5em;
   margin: 0.1em;
   position: relative;
   float: left;
   cursor: pointer;
   display: none;
}

.menu-icon .nav-icon {
   background: #fff; /*#333;*/
   display: block;
   height: 2px;
   width: 1.1em;
   position: relative;
   transition: background 0.2s ease-out;
}

.menu-icon .nav-icon:before {
   content: "";
   background: #fff; /*#333;*/
   display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   transition: all 0.2s ease-out;
   top: 5px;
}

.menu-icon .nav-icon:after {
   content: "";
   background: #fff; /*#333;*/
   display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   transition: all 0.2s ease-out;
   top: -5px;
}

.menu-btn {
   display: none;
}

.menu-btn:checked ~ #nav-items {
   display: flex;
}

.menu-btn:checked ~ .menu-icon .nav-icon {
   background: transparent;
}

.menu-btn:checked ~ .menu-icon .nav-icon:before {
   transform: rotate(-45deg);
   top: 0;
}

.menu-btn:checked ~ .menu-icon .nav-icon:after {
   transform: rotate(45deg);
   top: 0;
}

/*------------------*/

@media (max-width: 700px) {
   #nav-items {
      flex-flow: column;
      display: none;
   }
   .nav-item {
      margin-bottom: 0.4em;
   }
   .menu-icon {
      display: block;
   }
}
/*-------------------------------------------------*/
/*-------------------------------------------------*/
/*-------------------------------------------------*/

#show-case {
   background-image: url("../resources/images/Icons/logo.png"), url("../resources/images/Icons/leather.jpg");
   background-position: center, center;
   background-repeat: no-repeat, repeat;
   background-size: contain;
   height: 20vmin; /*300px;*/
   margin-bottom: 1.3em; /*30px;*/
   text-align: center;
}
/*------------------*/

@media (max-width: 700px) {
   #show-case {
      height: 20vmin; /*150px;*/
      margin-bottom: 0px;
   }
}

/*-------------------------------------------------*/
/*-------------------------------------------------*/
/*-------------------------------------------------*/

#main-grid {
   width: 95%;
   margin: auto;
   display: grid;
   grid-gap: 1em 1em;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   grid-auto-flow: row dense;
   margin-bottom: 1em;
}

/*------------------*/

@media (max-width: 700px) {
   #main-grid {
      grid-template-columns: 1fr;
      width: 100%;
   }
}

/*-------------------------------------------------*/
/*-------------------------------------------------*/
/*-------------------------------------------------*/

#footer-grid {
   background-color: #333;
   color: rgb(110, 185, 185); /*#fff;*/
   text-align: center;
   /* padding-bottom: 0.6em; */
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   align-content: center;
   /* gap:0 3em; */
}

#footer-grid a {
   text-decoration: none;
   color: #86abd3;
}
#footer-grid a:hover {
   color: #ddd;
}

#copyright {
   width: 100%;
   text-align: center;
}

#phone,
#email {
   text-align: center;
   margin: 0 1em;
}

/*------------------*/

@media (max-width: 700px) {
   #footer-grid {
      flex-flow: column;
   }
}
/*------------------*/
/*------------------*/
/*------------------*/

#main-article {
   grid-column: span 2;
   padding: 1px 10px 10px 10px;
   background-color: rgb(164, 222, 255); /*#eee;*/
   /* color: #110553; */
   color: rgb(5, 37, 37);
   font-weight: 400;
}

#main-article h1 {
   background-color: darkcyan; /*#110553;*/
   /* background-image: linear-gradient(to bottom right, #0278b4, #86abd3); */
   background-image: linear-gradient(to bottom right, rgb(9, 39, 39), rgb(5, 107, 107));
   /* color: #110553; */
   color: rgb(36, 230, 230);
   padding: 0.2em;
}

/*------------------*/

#side-bar {
   grid-column: span 1;
   padding: 1px 10px 10px 10px;
   background-color: rgb(192, 238, 238); /* #fbfde9;*/
   /* color: #006930; */
   color: rgb(5, 44, 44);
   font-weight: 400;
}

#side-bar h1 {
   background-color: cyan; /*#006930;*/
   /* background-image: linear-gradient(to bottom right, #9fce64, #cbe3aa); */
   background-image: linear-gradient(to bottom right, rgb(25, 138, 138), rgb(36, 212, 212));
   /* color: #006930; */
   color: rgb(5, 44, 44);
   padding: 0.2em;
}

/*------------------*/

@media (max-width: 700px) {
   #main-article,
   #side-bar {
      grid-column: span 1;
      padding: 0 0.5em;
   }
}

/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
#mags-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   grid-template-rows: repeat(auto-fit, 100px);
   gap: 2vmin;
   grid-auto-flow: row dense;
}
.magazine-div > img {
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
   display: block;
}

.magazine-div > p {
   padding: 0.5em 1em;
   margin: 0;
   font-size: 3vmin;
   line-height: 1em;
}

.magazine-div {
   margin: auto;
   gap: 0;
   background-color: #333;
   color: blanchedalmond;
   padding: 0;
   width: 90%;
   border: 2px solid rgb(206, 32, 32);
   box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
   border-radius: 2vmin;
   overflow: hidden;
}

.magazine-div:hover {
   /* transform: scale(0.8); */
   filter: drop-shadow(0px 0px 10px rgb(28, 70, 94)) brightness(0.8);
   cursor: pointer;
}
/* *************************************** */
/* *************************************** */
/* *************************************** */
#books-main-article {
   grid-column: span 2;
   padding: 1px 10px 10px 10px;
   background-color: #00000000; /* rgb(164, 222, 255); /*#eee;*/
   color: rgb(5, 37, 37);
   font-weight: 400;
}

#books-main-article h1 {
   background-color: darkcyan; /*#110553;*/
   /* background-image: linear-gradient(to bottom right, #0278b4, #86abd3); */
   background-image: linear-gradient(to bottom right, rgb(9, 39, 39), rgb(5, 107, 107));
   color: rgb(36, 230, 230);
   padding: 0.2em;
}

#books-container {
   gap: 2vmin;
   display: flex;
   flex-direction: row;
   flex-flow: wrap;
   justify-content: center;
}

.book-div {
   background-color: #333;
   color: blanchedalmond;
   min-width: 150px;
   max-width: 250px;
   border: 2px solid rgb(206, 32, 32);
   box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
   border-radius: 2vmin;
   overflow: hidden;
   text-align: center;
   display: grid;
   grid-template-columns: 1fr 1fr;
}

.book-image-container {
   grid-column: span 2;
}

.book-image {
   width: 100%;
   height: 100%;
}

.amazon-button,
.book-sample-button {
   grid-column: span 1;
   display: block;
   color: steelblue;
   background-color: rgb(203, 198, 221);
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   outline: none;
   padding: 0.5rem;
   font-weight: 700;
   border: solid 2px steelblue;
   border-radius: 1vmin;
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
   text-align: center;
}

.amazon-button:hover,
.book-sample-button:hover {
   background-color: rgb(42, 97, 143);
   color: rgb(203, 198, 221);
}

.amazon-icon,
.book-sample-icon {
   display: block;
   width: 6vmin;
   height: 6vmin;
   margin: auto;
}

/* *************************************** */
/* *************************************** */
/* *************************************** */

#papers-container {
   gap: 2vmin;
   display: flex;
   flex-direction: row;
   flex-flow: wrap;
   justify-content: center;
}

.paper-div {
   background-color: #333;
   color: blanchedalmond;
   min-width: 150px;
   max-width: 250px;
   border: 2px solid rgb(206, 32, 32);
   box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
   border-radius: 2vmin;
   overflow: hidden;
   text-align: center;
   display: grid;
   grid-template-rows: 5fr 1fr;
}

.paper-image-container {
   width: 100%;
   grid-row: span 5;
}

.paper-image {
   width: 100%;
   height: 100%;
}

.paper-sample-button {
   grid-row: span 1;
   color: steelblue;
   background-color: rgb(203, 198, 221);
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   outline: none;
   padding: 0.5rem;
   font-weight: 700;
   border: solid 2px steelblue;
   border-radius: 1vmin;
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
   text-align: center;
}

.paper-sample-button:hover {
   background-color: rgb(42, 97, 143);
   color: rgb(203, 198, 221);
}

.paper-sample-icon {
   display: block;
   width: 6vmin;
   height: 6vmin;
   margin: auto;
}

/* *************************************** */
/* *************************************** */
/* *************************************** */

#videos-container {
   gap: 2vmin;
   display: flex;
   flex-direction: row;
   flex-flow: wrap;
   justify-content: center;
}

.video-div {
   background-color: #333;
   color: blanchedalmond;
   min-width: 250px;
   max-width: 350px;
   min-height: 350px;
   max-height: 420px;
   border: 2px solid rgb(206, 32, 32);
   box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
   border-radius: 2vmin;
   overflow: hidden;
   text-align: center;
   display: grid;
   grid-template-rows: 1fr 6fr;
   position: relative;
}

.video-title {
   grid-row: span 1;
   width: 100%;
}

.video-image {
   width: 100%;
   /* height: 100%; */
   display: block;
   grid-row: span 6;
}

.video-play {
   position: absolute;
   bottom: 1vmin;
   right: 1vmin;
   height: 5vmin;
   color: steelblue;
   background-color: rgba(0, 0, 0, 0);
   outline: none;
   cursor: pointer;
   filter: drop-shadow(1px 1px 2px #444444ee);
}
.mouse-in {
   filter: invert();
}
.player {
   width: 100%;
   grid-row: span 6;
}

iframe {
   width: 100%;
   height: 90%;
}

.hidden {
   display: none;
}