/* BODY */
 body {
     color: white;
     box-sizing: border-box;
 }


 /* HEADER */
 header {
     position: relative;
     background-color: black;
     height: 80px;
     margin: 8px 0px;
     margin-bottom: 0px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
 }

 /* SIDE NAVIGATION BAR */
 .sidenav {
     height: 100%;
     width: 0;
     position: fixed;
     z-index: 1;
     top: 0;
     left: 0;
     background-color: #111;
     overflow-x: hidden;
     transition: 0.5s;
     padding-top: 60px;
 }

 .sidenav a {
     padding: 8px 8px 8px 32px;
     text-decoration: none;
     font-size: 25px;
     color: #818181;
     display: block;
     transition: 0.3s;
 }

 .sidenav a:hover {
     color: #f1f1f1;
 }

 .sidenav .closebtn {
     position: absolute;
     top: 0;
     right: 25px;
     font-size: 36px;
     margin-left: 50px;
 }

 /* OPEN NAV BTN */
 header span {
     position: absolute;
     top: 15px;
     left: 25px;
 }

 /* LOGO */
 #logo {
     position: relative;
     right: 80px;
     margin: 20px;
     height: 80px;
     width: 100px;
     background-image: url('img/logo2.jpg');
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
 }

 /* SYSTUMM HEADING */
 h1 {
     position: relative;
     right: 80px;
 }

 /* SEARCH BAR */
 form {
     position: absolute;
     right: 100px;
     background-color: white;
     width: 200px;
     height: 35px;
     border-radius: 20px;
     display: flex;
     flex-direction: row;
     align-items: center;
 }

 input {
     all: unset;
     font: 16px system-ui;
     color: black;
     height: 100%;
     width: 100%;
 }

 ::placeholder {
     color: black;
     opacity: 0.7;
 }

 button {
     position: absolute;
     right: 25px;
     color: rgb(0, 0, 0);
     cursor: pointer;
     width: 70px;
     height: 35px;
     border-radius: 15px;
 }

 /* SMALL VIEW PORT - MENU + SEARCH BAR */
 #media1 {
     display: none;
     height: 60px;
     background-color: grey;
     margin: 10px 0px;
 }

 /* WIDGET SLIDER */
 ul,
 ol {
     list-style: none
 }

 .main {
     width: 100%;
     margin: auto;
     overflow: hidden;
     color: #fff;
     margin-top: -10px;
 }

 .slider {
     position: relative
 }

 .slider .slider-parent {
     padding: 0;
     display: flex
 }

 .slider .slider-parent .images-list {
     background-size: cover;
 }

 .slider .slider-parent .images-list:first-of-type,
 .slider .slider-parent .images-list:last-of-type {
     background-image: url(img/systumm\ online\ .png)
 }

 .slider .slider-parent .images-list:nth-of-type(2) {
     background-image: url(img/shop\ systumm\ .png)
 }

 .slider .slider-parent .images-list:nth-of-type(3) {
     background-image: url(img/book\ systumm\ .png)
 }

 .slider .slider-parent .images-list:nth-of-type(4) {
     background-image: url(img/origmi\ systumm\ .jpg)
 }

 .slider .slider-parent .images-list:nth-of-type(5) {
     background-image: url(img/ent.\ systumm\ .png)
 }

 .slider .buttom-circles {
     position: absolute;
     transform: translate(-50%, -50%);
     left: 50%;
     bottom: 10px
 }

 .slider .buttom-circles .buttom-circles-list {
     display: inline-block
 }

 .slider .buttom-circles .buttom-circles-list:hover .fa:before,
 .slider .buttom-circles .buttom-circles-list.slider-active .fa:before {
     content: "\f111";
 }

 .slider>.fa {
     position: absolute;
     top: 45%
 }

 .slider>.fa:first-of-type {
     right: 5px
 }

 .slider>.fa:last-of-type {
     left: 5px
 }

 .slider .fa {
     text-shadow: 5px 5px 5px #555;
     cursor: pointer
 }

 @media(min-width: 100px) and (max-width: 767px) {
     .slider>.fa {
         font-size: 25px
     }

     .slider .buttom-circles .buttom-circles-list {
         visibility: hidden
     }
 }

 @media(min-width: 768px) and (max-width: 991px) {
     .slider>.fa {
         font-size: 50px
     }

     .slider .buttom-circles .buttom-circles-list {
         visibility: hidden
     }
 }

 @media(min-width: 992px) and (max-width: 1199px) {
     .slider>.fa {
         font-size: 75px
     }

     .slider .buttom-circles .buttom-circles-list {
         font-size: 17px
     }
 }

 @media(min-width: 1200px) {
     .slider>.fa {
         font-size: 100px
     }

     .slider .buttom-circles .buttom-circles-list {
         font-size: 25px
     }
 }

 /* SECTION */
 .cont {
     display: grid;
     grid-gap: 1rem;
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
     justify-content: center;
     align-items: center;
     text-align: center;
     margin-top: 10px;
 }

 .box {
     border: 2px solid black;
     height: 320px;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     transition: all 1s;
 }

 .box:hover {
     border-radius: 100px;
 }

 .cont a {
     color: black;
     text-decoration: none;
     transition: all 1s;
     font-weight: bold;
 }

 .cont a:hover {
     color: white;
     text-decoration: underline;
     font-size: 150%;
     -webkit-text-stroke-width: 1.5px;
     -webkit-text-stroke-color: black;
 }

 /* MAIN CONTENT  */
 #item-1 {
     background-image: url('img/NS.png');
     background-color: rgba(255, 255, 255, 0.1);
     background-blend-mode: lighten;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
 }

 #item-2 {
     background-image: url('img/SS.png');
     background-color: rgba(255, 255, 255, 0.1);
     background-blend-mode: lighten;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
 }

 #item-3 {
     background-image: url('img/ES.png');
     background-color: rgba(255, 255, 255, 0.1);
     background-blend-mode: lighten;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
 }

 #item-4 {
     background-image: url('img/HS1.png');
     background-color: rgba(255, 255, 255, 0.1);
     background-blend-mode: lighten;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
 }

 #item-5 {
     background-image: url('img/logo5.jpeg');
     background-color: rgba(255, 255, 255, 0.1);
     background-blend-mode: lighten;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
 }

 #item-6 {
     background-image: url('img/logo6.jpeg');
     background-repeat: no-repeat;
     background-color: rgba(255, 255, 255, 0.1);
     background-blend-mode: lighten;
     background-position: center;
     background-size: cover;
 }

 /* TRUST PILOT WIDGET */
 .trustpilot-widget {
     margin-top: 10px;
     margin-bottom: -10px;
 }

 /* FOOTER */
 #footer {
     display: grid;
     grid-template-areas:
         'grid1 grid2 grid3 '
         'grid1 grid2 grid3 '
         'grid1 grid2 grid3 '
         'grid1 grid2 grid3 '
         'grid1 grid2 grid3 ';
 }

 .btr {
     border: 2px solid black;
     padding: 10px 23px;
     background-color: rgb(0, 0, 0);
     margin: 20px 0px;
     display: grid;
 }

 .btr a {
     text-decoration: none;
     color: white;
     margin: 5px 0px;
     position: relative;
     left: 50px;
 }

 .btr a:hover {
     text-decoration: underline;
 }

 footer nav {
     grid-area: grid1;
 }

 footer section {
     grid-area: grid2;
 }

 footer aside {
     grid-area: grid3;
 }

 footer aside img {
     position: relative;
     left: 20px;
 }

 /* FOOTER FOR MOBILE */
 .mobile {
     display: none;
     background-color: black;
     height: 400px;
     margin: 5px 0px;
 }

 .mobile a {
     text-decoration: none;
     color: white;
     position: relative;
     left: 10px;
 }

 .mobile li {
     position: relative;
     right: 10px;
 }

 .mobile a:hover {
     text-decoration: underline;
 }

 .mobile img {
     width: 200px;
     position: relative;
     left: 20px;
     top: 10px;
 }

 /* COPYRIGHT */
 .right {
     background-color: black;
     height: 50px;
     display: flex;
     text-align: center;
     justify-content: center;
     align-items: center;
     margin-top: -10px;
 }

 /* media queries */
 @media only screen and (max-width:700px) {
     header span {
         position: absolute;
         top: 97px;
         left: 25px;
     }

     #media1 {
         display: block;
     }

     .cont {
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     }

     form,
     button {
         position: absolute;
         top: 100px;
     }

     form {
         right: 80px;
     }

     button {
         right: 10px;
     }

     header {
         margin: 5px -5px;
     }

     #logo {
         position: absolute;
         left: -35px;
     }

     h1 {
         position: absolute;
         right: 15px;
     }

     .mobile {
         display: block;
     }

     #footer {
         display: none;
     }

     .right {
         margin: 0;
     }

     .trustpilot-widget {
         position: relative;
         bottom: 7px;
     }
 }

 @media only screen and (min-width:701px) and (max-width:1024px) {
    button {
         position: absolute;
         right: 15px;
     }

     form {
         position: absolute;
         right: 85px;
     }

     #logo {
         position: absolute;
         left: 50px;
     }
 }