/** Line 420 contains the commented code responsible for **/
html {scroll-behavior: smooth;}


* {margin: 0px; padding: 0px;}


button:hover {cursor: pointer;}


.webpage {width: 100%; position: relative;}

.tobeanimated {opacity: 0; transform: translateY(-20px); transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);}
.tobeanimated#shown {opacity: 1; transform: translateY(0px);}

.loadingscreen {width: 100%; height: 100vh; background-color: rgba(255, 255, 255, 1); display: flex; align-items: center; justify-content: center; flex-direction: column; position: fixed; z-index: 3;}
.loadingscreen img {animation: logo-loadingscreen 3s cubic-bezier(0.075, 0.82, 0.165, 1);}
.loadingscreen h1 {display: none; padding: 2%; font-family: Roboto, sans-serif; font-weight: 300; color: rgba(2, 27, 48, 1);}


.navigation-menu {display: none; background-color: rgba(255, 255, 255, 0.9); width: 100%; height: 100%; position: fixed; padding: 5%; box-sizing: border-box; flex-direction: column; top: 0; z-index: 3; animation: animate-fade 1s cubic-bezier(0.075, 0.82, 0.165, 1);}
.navigation-menu .cross-icon {height: 20px; margin-left: auto; padding-bottom: 20px; position: relative; display: flex; align-items: center; cursor: pointer;}
.navigation-menu .cross-icon #ci-line {width: 20px; height: 1px; position: absolute; right: 0; transform: rotate(45deg); background-color: black;}
.navigation-menu .cross-icon #ci-line:nth-child(2) {transform: rotate(-45deg);}
.navigation-menu .webpage-links {width: 100%; padding-bottom: 5%; display: flex; justify-content: space-between;}
.navigation-menu .webpage-links a:nth-child(1) {font-weight: 500;}
.navigation-menu h1 {padding-bottom: 10px; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 18px;}
.navigation-menu a {text-decoration: none; color: black; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 18px; cursor: pointer;}
.navigation-menu li {padding-bottom: 10px; list-style-position: inside; list-style-type: disclosure-closed;}
.navigation-menu .sub-links-collection {height: 100%; position: relative;}
.navigation-menu .sub-links {width: 100%; height: 100%; display: none; justify-content: space-between; position: absolute; animation: animate-fade 1s cubic-bezier(0.075, 0.82, 0.165, 1);}
.navigation-menu .sub-links:nth-child(1) {display: flex;}
.navigation-menu .sub-links .text-section {}
.navigation-menu img {}
.navigation-menu a:hover {text-decoration: underline; text-decoration-color: lightskyblue; text-decoration-thickness: 3px; text-decoration-skip-ink: none; cursor: pointer;}


.side-navigation {background-color: rgba(255, 255, 255, 0.9); padding: 15px; box-shadow: 0px 0px 5px 5px rgb(0 0 0 / 10%); position: fixed; top: 50%; right: 0; z-index: 1; display: flex; flex-direction: column; grid-gap: 10px; transition: transform 0.2s;}
.side-navigation p {font-size: 18px; font-family: 'Roboto', sans-serif; font-weight: 300; white-space: nowrap; transition: 0.2s ease; text-decoration: none; color: black;}
.side-navigation .nav-circle {width: 8px; height: 8px; border-radius: 50%; border: 1px solid black; transition: 0.2s ease;}
.side-navigation .side-nav-link {display: flex; align-items: center; grid-gap: 10px; cursor: pointer;}
.side-navigation .side-nav-link:hover .nav-circle {background-color: black;}
.side-navigation .side-nav-link:hover p {text-decoration: underline; text-decoration-thickness: 1px; user-select: none;}

.side-navigation .nav-circle#active {background-color: black;}


.contact-details-bar {padding: 10px 5%; background-color: #065890; display: flex; justify-content: center;}
.contact-details-bar #vr {margin: 0 10px; width: 1px; background-color: white; border: none;}
.contact-details-bar p {font-size: 16px; text-align: center; color: white; font-family: 'Roboto', sans-serif; font-weight: 300;}
.contact-details-bar #bold-texts {font-weight: 500;}

.navigation-bar {display: flex; background-color: rgba(2, 27, 48, 0.8); width: 100%; padding: 10px 20px; box-sizing: border-box; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1; transition: 0.15s linear;}
.navigation-bar .company-logo-section {}
.navigation-bar .company-logo-section a {display: flex; align-items: center; text-decoration: none; color: black;}
.navigation-bar .company-logo-section img {height: 60px;}
.navigation-bar .company-logo-section .company-name {padding-left: 5px;}
.navigation-bar .company-logo-section .company-name p#yashka {font-family: 'Roboto', sans-serif; font-size: 22px; font-weight: bold; color: white;}
.navigation-bar .company-logo-section .company-name p#infotronics {font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 300; color: white; letter-spacing: 0.7px;}
.navigation-bar .navigation-links {display: flex; align-items: center; grid-gap: 20px;}
/* .navigation-bar .menu-section .hamburger-menu-icon {display: flex; flex-direction: column; grid-gap: 5px; cursor: pointer;}
.navigation-bar .menu-section .hamburger-menu-icon #hmi-line {background-color: white; width: 20px; height: 2px;}
.navigation-bar .menu-section p {font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 20px; color: white;} */
.navigation-bar .navigation-links a {color: white; text-decoration: none; font-family: 'Roboto', sans-serif;}
.navigation-bar .navigation-links a:active {color: cyan;}
.navigation-bar .navigation-links a#store-link {padding: 10px 20px; border: 1px solid white; border-radius: 7px; transition: 0.4s ease;}
.navigation-bar .navigation-links a#store-link:hover {background-color: white; color: black;}



.homepage {width: 100%; height: 100%; display: flex; justify-content: center; z-index: 0;}
.homepage #homepagebackground {position: fixed; top: 0; z-index: -1;}
.homepage .homepagecontent {max-width: 2000px; width: 100%; transition: transform 2s cubic-bezier(0.11, 0.85, 0.31, 1.07);}
.homepage .homepagecontent .slideshowcontainer {width: 100%; padding-top: 8%; padding-bottom: 8%; display: flex; flex-direction: column; justify-content: center;}
.homepage .homepagecontent .slideshowcontainer .topsection {width: 100%; margin-top: 0%; margin-bottom: 3%; display: flex; align-items: center;}
.homepage .homepagecontent .slideshowcontainer .topsection .prevslidebutton, .nextslidebutton {width: 10%; display: flex; justify-content: center; align-items: center;}
.homepage .homepagecontent .slideshowcontainer .topsection .prevarrow, .nextarrow {width: 30px; height: 30px; position: absolute; border-top: 3px solid white; border-right: 3px solid white; cursor: pointer;}
.homepage .homepagecontent .slideshowcontainer .topsection .prevarrow {transform: rotate(-135deg);}
.homepage .homepagecontent .slideshowcontainer .topsection .nextarrow {transform: rotate(45deg);}
.homepage .homepagecontent .slideshowcontainer .topsection .slideshow {width: 80%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative;}
.homepage .homepagecontent .slideshowcontainer .topsection .slideshow .slide {background-color: rgba(2, 27, 48, 0.9); width: 50%; margin-right: 0%; padding: 5%; display: flex; position: absolute; opacity: 0; transition: 0.5s ease; overflow: hidden; z-index: -1;}
.homepage .homepagecontent .slideshowcontainer .topsection .slideshow .slide .productimage {width: 100%; display: flex; position: absolute; bottom: 0; right: 0;}
.homepage .homepagecontent .slideshowcontainer .topsection .slideshow .slide .productimage img {width: 100%; opacity: 0.5;}
.homepage .homepagecontent .slideshowcontainer .topsection .slideshow .slide .information {width: 75%; height: 100%; display: flex; flex-direction: column; grid-gap: 20px; z-index: 0;}
.homepage .homepagecontent .slideshowcontainer .topsection .slideshow .slide .information h1 {font-size: 50px; font-family: 'Poppins', sans-serif; font-weight: 500; color: white; line-height: 1;}
.homepage .homepagecontent .slideshowcontainer .topsection .slideshow .slide .information p {width: 90%; font-size: 18px; font-family: Roboto, sans-serif; font-weight: 300; color: white; line-height: 1.5;}
.homepage .homepagecontent .slideshowcontainer .topsection .slideshow .slide .information a {text-decoration: none; color: white; text-transform: uppercase; font-family: Roboto, sans-serif; font-weight: 400; font-size: 18px;}
.homepage .homepagecontent .slideshowcontainer .topsection .slideshow .slide .information button {background-color: #065890; width: 150px; display: block; padding: 14px 0px; border: none; transition: 0.4s ease; cursor: pointer;}
.homepage .homepagecontent .slideshowcontainer .topsection .slideshow .slide .information button:hover {background-color: #044470;}
.homepage .homepagecontent .slideshowcontainer .topsection .slideshow .slide #pro-label {color: cyan; font-weight: 100;}
.homepage .homepagecontent .slideshowcontainer .slide-navigation-buttons {width: 100%; display: flex; justify-content: center; align-items: center;}
.homepage .homepagecontent .slideshowcontainer .slide-navigation-button {margin-left: 8px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid white; transition: 0.3s ease; cursor: pointer;}
.homepage .homepagecontent .slideshowcontainer .slide-navigation-button:hover {background-color: rgba(255, 255, 255, 0.5);}
.homepage .homepagecontent .mobileslideshow {display: none; flex-direction: column; position: relative; padding: 20px; margin: 20px; grid-gap: 10px; color: white; background-color: rgba(0, 0, 0, 0.8); font-family: 'Roboto'; font-size: 1em; line-height: 1.5; font-weight: 300;}
.homepage .homepagecontent .mobileslideshow h1 {font-weight: 500;}
.homepage .homepagecontent .mobileslideshow ul {margin-left: 20px;}
.homepage .homepagecontent .mobileslideshow li {}
.homepage .homepagecontent .mobileslideshow #greetingtext {}
.homepage .homepagecontent .mobileslideshow #contactparagraph {text-align: center}
/* .homepage .homepagecontent .mobileslideshow .topsection {display: flex; justify-content: center; padding-top: 20%; padding-bottom: 5%; position: relative;}
.homepage .homepagecontent .mobileslideshow .topsection img.slideshowpicture {position: absolute; max-width: 60%; opacity: 0; margin-right: 2%; transition: 0.5s ease;}
.homepage .homepagecontent .mobileslideshow .bottomsection {background-color: rgba(2, 27, 48, 1); display: flex; justify-content: space-between;}
.homepage .homepagecontent .mobileslideshow .bottomsection .productnames {width: -webkit-fill-available; margin: 10% 10%; position: relative;}
.homepage .homepagecontent .mobileslideshow .bottomsection .productnames .productname {position: absolute; top: 0; opacity: 0; transition: 0.5s ease;}
.homepage .homepagecontent .mobileslideshow .bottomsection .productnames .productname h1 {font-family: Roboto, sans-serif; font-size: 46px; font-weight: 500; color: white;}
.homepage .homepagecontent .mobileslideshow .bottomsection .productnames .productname a {font-family: Roboto, sans-serif; font-size: 16px; font-weight: 300; color: cyan; text-decoration: none;}
.homepage .homepagecontent .mobileslideshow .bottomsection .slidecontrols {width: 40%; display: flex; align-items: center; justify-content: space-evenly;}
.homepage .homepagecontent .mobileslideshow .bottomsection .slidecontrols .leftarrow {width: 15px; height: 15px; margin-right: 20px; border-top: 2px solid white; border-left: 2px solid white; transform: rotate(-45deg); cursor: pointer;}
.homepage .homepagecontent .mobileslideshow .bottomsection .slidecontrols .slidepos {margin-right: 5px;}
.homepage .homepagecontent .mobileslideshow .bottomsection .slidecontrols .rightarrow {width: 15px; height: 15px; margin-right: 20px; border-top: 2px solid white; border-right: 2px solid white; transform: rotate(45deg); cursor: pointer;} */

.homepage .homepagecontent .mobileslideshow .slide.one {display: flex;}

.homepage .homepagecontent .slideshowcontainer .topsection .slideshow .slide:nth-child(1) {position: relative;}
.homepage .homepagecontent .slideshowcontainer .topsection .slideshow .slide#active {opacity: 1; margin-right: 0%; z-index: 0;}
.homepage .homepagecontent .slideshowcontainer .slide-navigation-buttons #active {background-color: white;}
.homepage .homepagecontent .mobileslideshow .topsection img.slideshowpicture.one {position: relative;}
.homepage .homepagecontent .mobileslideshow .bottomsection .productnames .productname.one {position: relative;}
.homepage .homepagecontent .mobileslideshow .topsection img.slideshowpicture#active {margin-right: 0%; opacity: 1;}
.homepage .homepagecontent .mobileslideshow .bottomsection .productnames .productname#active {opacity: 1;}


.companybriefinfo {display: flex; align-items: center; flex-direction: column;}
.companybriefinfo .topcontent {background-color: rgba(2, 27, 48, 1); max-width: 2000px; height: 600px; padding-left: 10%; display: flex;}
.companybriefinfo .topcontent .leftsection {width: 60%; display: inline-block; box-sizing: border-box;}
.companybriefinfo .topcontent .leftsection .content {margin-right: 10%; padding-top: 10%; padding-bottom: 15%;}
.companybriefinfo .topcontent .leftsection .title {display: flex; align-items: center;}
.companybriefinfo .topcontent .leftsection .title h1 {font-size: 64px; font-family: Roboto, sans-serif; color: white; font-weight: 500;}
.companybriefinfo .topcontent .leftsection .title #coloredtext {color: cyan;}
.companybriefinfo .topcontent .leftsection .contentinfo {padding-top: 4%;}
.companybriefinfo .topcontent .leftsection .contentinfo p {color: white; font-family: Roboto, sans-serif; font-size: 20px; font-weight: 300; line-height: 35px;}
.companybriefinfo .topcontent .rightsection {width: 40%; overflow: hidden;}
.companybriefinfo .topcontent .rightsection .image {display: flex; flex-direction: column; align-items: center;}
.companybriefinfo .topcontent .rightsection .image #briefinfoimage {width: 100%;}
.companybriefinfo .bottomcontent {width: 100%; background-color: white;}
.companybriefinfo .bottomcontent .salesnumber {background-color: #003254; padding-left: 10%; padding-right: 10%; display: flex; justify-content: center;}
.companybriefinfo .bottomcontent .salesnumber .firsttwocolumns {display: flex;}
.companybriefinfo .bottomcontent .salesnumber .lasttwocolumns {display: flex;}
.companybriefinfo .bottomcontent .salesnumber .salesinfo {padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
/** .companybriefinfo .bottomcontent .salesnumber .salesinfo:hover .downarrow {opacity: 1;} **/
.companybriefinfo .bottomcontent .salesnumber .salesinfo h1 {font-size: 64px; font-family: Poppins, sans-serif; font-weight: 400; color: white;}
.companybriefinfo .bottomcontent .salesnumber .salesinfo p {font-size: 20px; font-family: Roboto, sans-serif; font-weight: 300; color: white;}
.companybriefinfo .bottomcontent .salesnumber .salesinfo .downarrow {width: 15px; height: 15px; margin-top: 10%; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg); opacity: 0; transition: 0.3s ease;}
.companybriefinfo .bottomcontent .salesnumberinfo {background-color: #efefef; display: none; overflow-y: hidden; transition: 0.5s ease; position: relative;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation {width: -webkit-fill-available; height: fit-content; padding-left: 15%; padding-right: 15%; padding-top: 5%; padding-bottom: 5%; display: flex; position: absolute; opacity: 0; transition: 0.3s ease;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .leftsection {width: 50%;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .leftsection .title h1 {font-size: 40px; font-family: Roboto, sans-serif; font-weight: 500;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .leftsection .leftsectioncontent {padding-top: 25px; display: flex; flex-direction: column;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .leftsection .leftsectioncontent p {width: 80%; padding-bottom: 10px; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 300; line-height: 25px;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection {width: 50%; display: flex; transition: 0.3s ease;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfoimages {width: 40%;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfoimages img {max-width: 100%;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfocontent {width: 55%; padding-left: 5%;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfocontent h1 {padding-bottom: 5%; font-size: 30px; font-family: Roboto, sans-serif; font-weight: 500;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfocontent p {padding-bottom: 5%; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 300;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfocontent a {background-color: #065890; display: inline-block; padding: 12px 15px; color: white; font-family: 'Poppins', sans-serif; font-size: 16px; transition: 0.4s ease; text-decoration: none; cursor: pointer;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfocontent a:hover {background-color: #044470;}

.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation.one .leftsection .leftsectioncontent p {width: fit-content; padding-bottom: 0; margin-bottom: 5px; font-family: Roboto, sans-serif; font-size: 18px; border-bottom: 1px solid transparent; font-weight: 300; transition: 0.3s ease; cursor: pointer;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation.one .leftsection .leftsectioncontent p:hover {border-bottom: 1px solid black;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation.one .leftsection .leftsectioncontent p#active {border-bottom: 1px solid black;}

.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfoimages img.hospitalinfoimage {display: none;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfocontent .informationtitles h1.hospitalinfotitle {display: none;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfocontent .informationcontents p.hospitalinfocontent {display: none;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfocontent .moreinformationlinks a.moreinfolink {display: none;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfoimages img.hospitalinfoimage.one {display: flex;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfocontent .informationtitles h1.hospitalinfotitle.one {display: flex;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfocontent .informationcontents p.hospitalinfocontent.one {display: flex;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfocontent .moreinformationlinks a.moreinfolink.one {display: inline-block;}

.companybriefinfo .bottomcontent .salesnumberinfo#shown {height: auto;}
.companybriefinfo .bottomcontent .salesnumberinfo#hidden {height: 0;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation.one {position: relative;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation#active {opacity: 1; z-index: 0;}
.companybriefinfo .bottomcontent .salesnumberinfo .salesinformation#hidden {opacity: 0; z-index: -1;}


.mediasection {background-color: white; padding-bottom: 5%; display: flex; justify-content: center;}
.mediasection .content {max-width: 2000px; margin-left: 10%; margin-right: 10%; display: flex; flex-direction: column; justify-content: center;}
.mediasection .content .title {padding-top: 4%; padding-bottom: 4%;}
.mediasection .content .title h1 {text-align: center; font-family: Poppins, sans-serif; font-size: 64px; font-weight: 500; color: rgba(2, 27, 48, 1);}
.mediasection .content .title p {text-align: center; font-family: Roboto, sans-serif; font-size: 20px; font-weight: 300;}
.mediasection .content .medias {display: flex; justify-content: space-evenly; flex-wrap: wrap;}
.mediasection .content .medias .medianews {min-width: 250px; flex-basis: min-content;}
.mediasection .content .medias .medianews .mediaimage img {max-width: 100%;}
.mediasection .content .medias .medianews .mediainfo {padding-top: 5%;}
.mediasection .content .medias .medianews .mediainfo h1 {font-size: 30px; font-family: Roboto, sans-serif; font-weight: 500; color: black;}
.mediasection .content .medias .medianews .mediainfo p {padding-top: 2%; padding-bottom: 5%; font-size: 20px; font-family: Roboto, sans-serif; font-weight: 300; color: black; line-height: 25px;}
.mediasection .content .medias .medianews .mediainfo button {background-color: #065890; display: block; padding: 12px 15px; border: none; color: white; font-family: 'Poppins', sans-serif; font-size: 16px; transition: 0.4s ease;}
.mediasection .content .medias .medianews .mediainfo button:hover {background-color: #044470;}


.productfeatures {background-color: white; padding-bottom: 5%; display: flex; justify-content: center;}
.productfeatures .content {max-width: 2000px; display: flex; justify-content: space-around; flex-direction: column;}
.productfeatures .content .title {padding: 4% 10%;}
.productfeatures .content .title h1 {text-align: center; font-family: Poppins, sans-serif; font-size: 64px; font-weight: 500; color: rgba(2, 27, 48, 1);}
.productfeatures .content .title p {text-align: center; font-family: Roboto, sans-serif; font-size: 20px; font-weight: 300;}
.productfeatures .content .feature {padding-left: 15%; padding-right: 15%; display: flex;}
.productfeatures .content .feature:nth-child(even) {background-color: #efefef;}
.productfeatures .content .feature:nth-child(even) .textsection {align-items: flex-start;}
.productfeatures .content .feature:nth-child(odd) .textsection {align-items: flex-end; order: 2;}
.productfeatures .content .feature:nth-child(odd) .imagesection {order: 1;}
.productfeatures .content .feature .textsection {width: 50%; padding-top: 20%; padding-bottom: 20%; display: flex; align-items: center; flex-direction: column;}
.productfeatures .content .feature .textsection h1 {width: 70%; padding-bottom: 1%; font-size: 46px; font-family: Poppins, sans-serif; font-weight: 600;}
.productfeatures .content .feature .textsection p {width: 70%; color: darkslategray; font-size: 20px; font-family: Roboto, sans-serif; font-weight: 300; line-height: 30px;}
.productfeatures .content .feature .imagesection {width: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.productfeatures .content .feature .imagesection img {width: 70%;}
.productfeatures .content .feature .imagesection img#elevated-image {box-shadow: 0px 0px 5px 2px rgba(1, 1, 1, 0.5);}
.productfeatures .content .feature .imagesection a {color: rgba(1, 1, 1, 0.1); position: absolute; right: 0; bottom: 0; text-decoration: none; font-family: 'Roboto', sans-serif;}
.productfeatures .content a:nth-child(odd) {left: 0;}


.productspreview {padding-top: 5%; padding-bottom: 15%; display: flex; justify-content: center;}
.productspreview .content {width: 2000px; height: 100%; margin: 0 10%; display: flex;}
.productspreview .content .pagetitle {width: 40%; display: flex; flex-direction: column; justify-content: center;}
.productspreview .content .pagetitle .title {width: 60%;}
.productspreview .content .pagetitle .title h1 {height: 60%; font-size: 64px; font-family: Poppins, sans-serif; font-weight: 500; color: rgba(2, 27, 48, 1);}
.productspreview .content .pagetitle .subtitle p {font-family: Roboto, sans-serif; font-size: 20px; font-weight: 300;}
.productspreview .content .previewsection {background-color: #efefef; width: 60%; height: 600px; display: flex; justify-content: center;}
.productspreview .content .previewsection .leftsection {width: 35%;}
.productspreview .content .previewsection .leftsection .productvarietybuttons {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.productspreview .content .previewsection .leftsection .productvarietybuttons .button {background-color: #065890; width: 150px; margin: 2% 0%; padding: 12px 0px; transition: 0.5s ease; text-align: center;}
.productspreview .content .previewsection .leftsection .productvarietybuttons .button a {width: 100%; color: white; position: relative; font-size: 20px; font-family: Roboto, sans-serif; font-weight: 300; transition: 0.3s ease;}
.productspreview .content .previewsection .leftsection .productvarietybuttons .button:hover {background-color: #044470;}
.productspreview .content .previewsection .leftsection .productinfosection {display: none; flex-direction: column;}
.productspreview .content .previewsection .leftsection .productinfosection .productnameheader {background-color: rgb(0 36 74); display: flex; align-items: center; justify-content: space-between;}
.productspreview .content .previewsection .leftsection .productinfosection .productnameheader .backbutton {width: 20%; display: flex; justify-content: center; cursor: pointer;}
.productspreview .content .previewsection .leftsection .productinfosection .productnameheader .backbutton .arrow {height: 15px; width: 15px; border-left: 2px solid white; border-top: 2px solid white; transform: rotate(-45deg);}
.productspreview .content .previewsection .leftsection .productinfosection .productnameheader .productnames {background-color: rgb(0 36 74); width: 80%;}
.productspreview .content .previewsection .leftsection .productinfosection .productnameheader .productnames .productnametext {padding-top: 2%; padding-bottom: 2%; display: none; color: white; font-size: 46px; font-family: Poppins, sans-serif; font-weight: 200;}
.productspreview .content .previewsection .leftsection .productinfosection .productspecinfo {padding-left: 8%; padding-top: 10%;}
.productspreview .content .previewsection .leftsection .productinfosection .productspecinfo .productspectitle h2 {font-family: Roboto, sans-serif; font-weight: 400;}
.productspreview .content .previewsection .leftsection .productinfosection .productspecinfo .productspecifications {padding-top: 5%;}
.productspreview .content .previewsection .leftsection .productinfosection .productspecinfo .productspecifications .productspecs {display: none; justify-content: center; flex-direction: column;}
.productspreview .content .previewsection .leftsection .productinfosection .productspecinfo .productspecifications .productspecs p {font-size: 18px; font-family: Roboto, sans-serif; font-weight: 300;}
.productspreview .content .previewsection .leftsection .productinfosection .productinformation {padding-left: 8%; padding-top: 10%;}
.productspreview .content .previewsection .leftsection .productinfosection .productinformation .productinfotitle h2 {font-family: Roboto, sans-serif; font-weight: 400;}
.productspreview .content .previewsection .leftsection .productinfosection .productinformation .productinfocontent {padding-top: 5%;}
.productspreview .content .previewsection .leftsection .productinfosection .productinformation .productinfocontent .productinfo {display: none;}
.productspreview .content .previewsection .leftsection .productinfosection .productinformation .productinfocontent .productinfo p {font-size: 18px; font-family: Roboto, sans-serif; font-weight: 300;}
.productspreview .content .previewsection .leftsection .productinfosection .productinformation .productinfocontent .productinfo a {text-decoration: none;}
.productspreview .content .previewsection .leftsection .productinfosection .productinformation .productinfocontent .productinfo a button {background-color: #065890; display: block; margin-top: 5%; padding: 12px 15px; border: none; color: white; font-family: 'Poppins', sans-serif; font-size: 16px; transition: 0.4s ease;}
.productspreview .content .previewsection .leftsection .productinfosection .productinformation .productinfocontent .productinfo a button:hover {background-color: #044470;}
.productspreview .content .previewsection .rightsection {width: 65%; height: 100%; display: flex; justify-content: center; align-items: center;}
.productspreview .content .previewsection .rightsection img {max-width: 75%; max-height: 75%; transition: 0.3s ease; opacity: 0;}
.productspreview .content .previewsection .rightsection #productimageone {opacity: 1;}
.productspreview .content .previewsection .rightsection #threedmodelcanvas {width: 100%; height: 100%;}


.testimonialspage {background-color: rgba(2, 27, 48, 1); display: flex; justify-content: center;}
.testimonialspage .content {max-width: 2000px; margin: 0 10%;}
.testimonialspage .content .pagetitle {display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 4%; padding-bottom: 4%;}
.testimonialspage .content .pagetitle h1 {color: white; font-size: 64px; font-family: Poppins, sans-serif; font-weight: 500;}
.testimonialspage .content .pagetitle p {text-align: center; font-family: Roboto, sans-serif; font-size: 20px; font-weight: 300; color: #efefef;}
.testimonialspage .content .testimonialsection {display: flex; justify-content: center;}
.testimonialspage .content .testimonialsection .testimonial {width: 80%; display: none; opacity: 0; transition: 0.3s ease;}
.testimonialspage .content .testimonialsection .testimonial.one {display: flex; opacity: 1;}
.testimonialspage .content .testimonialsection .testimonial .personpicture {width: 40%; height: 300px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-left: 5px solid white;}
.testimonialspage .content .testimonialsection .testimonial .personpicture img {width: 150%; object-fit: cover;}
.testimonialspage .content .testimonialsection .testimonial .personpicture .personinfo {padding-left: 5%; display: none; flex-direction: column;}
.testimonialspage .content .testimonialsection .testimonial .personpicture .personinfo h1 {color: white; font-family: Roboto, sans-serif; font-weight: 500;}
.testimonialspage .content .testimonialsection .testimonial .personpicture .personinfo p {color: white; font-family: Poppins, sans-serif; font-weight: 200;}
.testimonialspage .content .testimonialsection .testimonial .infocontent {width: 60%; height: 100%; padding-left: 5%; display: flex; flex-direction: column; justify-content: space-evenly}
.testimonialspage .content .testimonialsection .testimonial .infocontent .feedback p {color: white; font-size: 20px; font-family: Roboto, sans-serif; font-weight: 300; line-height: 1.8;}
.testimonialspage .content .testimonialsection .testimonial .infocontent .personinfo h1 {color: white; font-family: Roboto, sans-serif; font-weight: 500;}
.testimonialspage .content .testimonialsection .testimonial .infocontent .personinfo p {color: white; font-family: Poppins, sans-serif; font-weight: 200;}
.testimonialspage .content .pagesectioncontrols {padding-top: 5%; padding-bottom: 5%; display: flex; justify-content: center; align-items: center;}
.testimonialspage .content .pagesectioncontrols .pagechangebutton {cursor: pointer;}
.testimonialspage .content .pagesectioncontrols .pagechangebutton.previous {width: 10px; height: 10px; display: inline-block; border-top: 2px solid white; border-left: 2px solid white; transform: rotate(-45deg);}
.testimonialspage .content .pagesectioncontrols .pagechangebutton.next {width: 10px; height: 10px; display: inline-block; border-top: 2px solid white; border-right: 2px solid white; transform: rotate(45deg);}
.testimonialspage .content .pagesectioncontrols .slide-navigation-buttons {display: flex; margin-left: 5px; margin-right: 5px;}
.testimonialspage .content .pagesectioncontrols .slide-navigation-buttons .pageno {padding-left: 5px; padding-right: 5px; cursor: pointer;}
.testimonialspage .content .pagesectioncontrols .slide-navigation-buttons .pageno p {color: white; border-bottom: 2px solid transparent; padding-left: 5px; padding-right: 5px; font-size: 20px; font-family: Roboto, sans-serif; font-weight: 400; transition: 0.3s ease;}
.testimonialspage .content .pagesectioncontrols .slide-navigation-buttons .pageno p:hover {border-bottom: 2px solid white;}
.testimonialspage .content .pagesectioncontrols .slide-navigation-buttons .pageno #activebutton {border-bottom: 2px solid white;}


.companyprofile {display: flex; justify-content: center;}
.companyprofile .content {max-width: 2000px; margin: 0 10%; display: flex; flex-direction: column;}
.companyprofile .content .maincontent {padding-bottom: 5%;}
.companyprofile .content .maincontent .title {width: 100%; padding-top: 5%; padding-bottom: 4%; display: flex; flex-direction: column; align-items: center;}
.companyprofile .content .maincontent .title h1 {font-size: 64px; text-align: center; font-family: Poppins, sans-serif; font-weight: 500; color: rgba(2, 27, 48, 1);}
.companyprofile .content .maincontent .title p {text-align: center; font-family: Roboto, sans-serif; font-size: 20px; font-weight: 300;}
.companyprofile .content .maincontent .info .profileparagraph {padding-top: 5%; display: flex;}
.companyprofile .content .maincontent .info .profileparagraph .image {width: 30%;}
.companyprofile .content .maincontent .info .profileparagraph .image img {max-width: 100%; height: auto; box-shadow: 0px 0px 7px 0px rgba(1, 1, 1, 0.5);}
.companyprofile .content .maincontent .info .profileparagraph .paragraph {width: 65%; display: flex; flex-direction: column; justify-content: center;}
.companyprofile .content .maincontent .info .profileparagraph .paragraph h1 {padding-bottom: 10px; font-size: 50px; font-family: Poppins, sans-serif; font-weight: 600;}
.companyprofile .content .maincontent .info .profileparagraph .paragraph p {padding-bottom: 8%; font-size: 20px; font-family: Roboto, sans-serif; font-weight: 300; line-height: 30px;}
.companyprofile .content .maincontent .info .profileparagraph .paragraph:nth-child(odd) {padding-right: 5%;}
.companyprofile .content .maincontent .info .profileparagraph .paragraph:nth-child(even) {padding-left: 5%;}


.picturegallery {background-color: white; padding-bottom: 15%; display: flex; flex-direction: column; align-items: center;}
.picturegallery .content {max-width: 2000px; margin: 0 10%; display: flex; flex-direction: column;}
.picturegallery .content .title {padding-top: 4%; padding-bottom: 4%; flex-direction: column; align-items: center; text-align: center;}
.picturegallery .content .title h1 {color: rgba(2, 27, 48, 1); font-size: 64px; font-family: Poppins, sans-serif; font-weight: 500;}
.picturegallery .content .title p {text-align: center; font-family: Roboto, sans-serif; font-size: 20px; font-weight: 300;}
.picturegallery .content .pictures {display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}
.picturegallery .content .pictures .picture {height: fit-content; max-height: 400px; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; transition: 0.5s ease; cursor: pointer;}
.picturegallery .content .pictures .picture img {width: 100%; object-fit: cover; transition: 0.5s ease;}
.picturegallery .content .pictures .picture:hover {background-color: rgba(6, 88, 144, 0.6);}
.picturegallery .content .pictures .picture:hover .captions {opacity: 1;}
.picturegallery .content .pictures .picture:hover img {width: 110%;}
.picturegallery .content .pictures .captions {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: absolute; opacity: 0; transition: 0.5s ease;}
.picturegallery .content .pictures .captions h1 {padding-left: 5%; font-size: 30px; font-family: Roboto, sans-serif; font-weight: 500; color: white;}
.picturegallery .content .pictures .captions h2 {padding-left: 5%; padding-right: 5%; padding-bottom: 10%; font-size: 18px; font-family: Poppins, sans-serif; font-weight: 200; color: white;}


footer {background-color: rgba(2, 27, 48, 1); display: flex; align-items: center; flex-direction: column;}
footer .topcontent {width: 100%; max-width: 2000px; box-sizing: border-box; padding: 0 5%; display: flex; justify-content: space-between; padding-top: 5%; padding-bottom: 5%; grid-gap: 5%;}
footer .topcontent h1 {font-size: 16px; font-family: Roboto, sans-serif; font-weight: 400; color: white; text-transform: uppercase;}
footer .topcontent p {font-size: 16px; font-family: Roboto, sans-serif; font-weight: 300; color: lightsteelblue;}
footer .topcontent a {font-size: 16px; font-family: Roboto, sans-serif; font-weight: 300; color: lightsteelblue; text-decoration: none; transition: 0.3s ease;}
footer .topcontent a:hover {color: cyan;}

footer .topcontent .leftsection {max-width: 60%; }

footer .topcontent .companylogo {width: 100%; padding-bottom: 30px;}
footer .topcontent .companylogo img {max-width: 100%;}

footer .topcontent .text-content {display: flex; flex-wrap: wrap; grid-gap: 40px;}
footer .topcontent .text-content .information-container {display: flex; flex-direction: column; grid-gap: 10px;}

footer .topcontent .rightsection {max-width: 30%; position: relative; overflow: hidden;}
footer .topcontent .rightsection img {max-width: 100%;}

footer #footer-horizontal-ruler {width: 100%; height: 1px; border: none; background-color: rgba(255, 255, 255, 0.1);}

footer .bottomcontent {width: 100%;}
footer .bottomcontent .websitecopyrightinfo {padding: 30px; text-align: center;}
footer .bottomcontent .websitecopyrightinfo p {font-size: 16px; font-family: Roboto, sans-serif; font-weight: 300; color: white;}

@keyframes textFadeIn {
  from {opacity: 0.1;}
  to {opacity: 1;}
}

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

  #title64 {font-size: 50px;}
  #title50 {font-size: 42px;}
  
  #para20 {font-size: 16px; line-height: 25px;}

  .homepage .homepagecontent .slideshowcontainer {padding-top: 10%;}
  /** padding-top: 10%; **/

  .companybriefinfo .bottomcontent .salesnumber .salesinfo {padding: 20px;}
  .companybriefinfo .bottomcontent .salesnumberinfo .salesinformation {padding-left: 10%; padding-right: 10%; flex-direction: column;}
  .companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .leftsection {width: 100%;}
  .companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection {width: 100%; padding-top: 5%;}

}

@media screen and (max-width: 1200px) {
  
  #para20 {font-size: 16px; line-height: 25px;}

  #navigationbarcontent {padding: 10px 5%;}
  .navigationbar .onhovercontent .content .productvariety {width: 50%;}

  /** 
  .homepage .homepagecontent {}
  .homepage .homepagecontent .slideshowcontainer {}
   padding-top: 15%; padding-bottom: 10%; of homepagecontent or slideshowcontainer i guess **/

  .homepage .homepagecontent .slideshowcontainer .topsection .slideshow .slide {width: 70%;}

  .companybriefinfo .topcontent {padding-left: 0%;}
  .companybriefinfo .topcontent .leftsection {padding: 0 10%;}
  .companybriefinfo .topcontent .leftsection .content {margin-right: 0;}

  .productfeatures .content .feature {padding-left: 10%; padding-right: 10%; padding-top: 10%;}

  .productspreview .content .previewsection .leftsection {width: 40%;}
  .productspreview .content .previewsection .leftsection .productvarietybuttons {align-items: flex-end;}
  .productspreview .content .previewsection .leftsection .productvarietybuttons .button {width: 120px;}
  .productspreview .content .previewsection .leftsection .productvarietybuttons .button a {font-size: 16px;}
  .productspreview .content .previewsection .rightsection {width: 100%;}

  .testimonialspage .content .testimonialsection .testimonial {width: 80%;}
  .testimonialspage .content .testimonialsection .testimonial .infocontent .feedback p {width: 100%;}

  .picturegallery .content .pictures {grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}

  footer .topcontent .text-content {}
  footer .topcontent .content {flex-wrap: wrap;}
  footer .topcontent .content .companylogo {width: 100%; padding-bottom: 5%;}
  footer .topcontent .content .companylogo img {width: 30%;}
  footer .topcontent .content .productssection .productssectioncontent {margin-left: 0;}
  footer .topcontent .content .pagelinkssection .pagelinkssectioncontent {margin-left: 0;}

}

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

  .productfeatures .content .feature .textsection h1 {width: 100%;}
  .productfeatures .content .feature .textsection p {width: 100%;}

  .productspreview .content {flex-direction: column; align-items: center;}
  .productspreview .content .pagetitle {width: 100%; padding-bottom: 10%; align-items: center;}
  .productspreview .content .pagetitle .title {width: 100%; text-align: center;}
  .productspreview .content .previewsection {width: 100%; background-color: initial; flex-direction: column;}
  .productspreview .content .previewsection .leftsection {width: 100%; padding-bottom: 5%;}
  .productspreview .content .previewsection .leftsection .productvarietybuttons {flex-direction: row; flex-wrap: wrap; justify-content: center; grid-gap: 10px;}
  .productspreview .content .previewsection .leftsection .productvarietybuttons .button {padding: 12px; margin: 0;}
  .productspreview .content .previewsection .rightsection {background-color: #efefef; width: 100%;}

  .testimonialspage .content .testimonialsection .testimonial {width: 80%; grid-gap: 40px; flex-direction: column;}
  .testimonialspage .content .testimonialsection .testimonial .personpicture {width: 100%; height: 100%; order: 2; border-left: none;}
  .testimonialspage .content .testimonialsection .testimonial .personpicture img {width: 200px; height: 200px; border-left: 5px solid white;}
  .testimonialspage .content .testimonialsection .testimonial .personpicture .personinfo {display: flex;}
  .testimonialspage .content .testimonialsection .testimonial .infocontent {width: 100%; padding-left: 0; height: fit-content;}
  .testimonialspage .content .testimonialsection .testimonial .infocontent .personinfo {display: none;}

  .testimonialspage .content .pagesectioncontrols {padding: 5% 0;}
}

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

  /** padding-top: 20%; padding-bottom: 10%; **/
  .homepage {height: 90vh;}
  .homepage #homepagebackground {height: -webkit-fill-available}
  .homepage .homepagecontent .slideshowcontainer {display: none;}
  .homepage .homepagecontent .mobileslideshow {display: flex;}

  .contact-details-bar {display: none;}

  .companybriefinfo .topcontent {height: 700px; flex-direction: column;}
  .companybriefinfo .topcontent .leftsection {width: 100%; padding-left: 10%; order: 2;}
  .companybriefinfo .topcontent .rightsection {width: 100%;}
}

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

  .picturegallery .content .pictures {grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}

}

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

  #title40 {font-size: 30px;}

  #para18 {font-size: 16px;}

  .navigationbar nav .navbar {display: none;}
  .navigationbar nav .navmenu {display: flex;}
  .navigationbar .dropdownmenu {display: flex;}

  .homepage .homepagecontent .mobileslideshow .bottomsection .productnames {margin: 15% 10%;}

  .companybriefinfo .bottomcontent .salesnumber {padding: 10%; display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
  .companybriefinfo .bottomcontent .salesnumber .firsttwocolumns {display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200, 1fr));}
  .companybriefinfo .bottomcontent .salesnumber .lasttwocolumns {display: grid;  grid-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200, 1fr));}
  .companybriefinfo .bottomcontent .salesnumber .salesinfo {padding: 0;}
  .companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection {flex-direction: column;}
  .companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfoimages {width: 100%;}
  .companybriefinfo .bottomcontent .salesnumberinfo .salesinformation .rightsection .rightsectioninfocontent {width: 100%; padding-left: 0; padding-top: 5%;}

  .productfeatures .content .feature {flex-direction: column;}
  .productfeatures .content .feature .textsection {width: 100%; order: 2;}
  .productfeatures .content .feature .imagesection {width: 100%; order: 1;}

  .productspreview .content .pagetitle {padding-bottom: 10%;}
  .productspreview .content .previewsection .leftsection .productvarietybuttons .button {width: fit-content;}
  .productspreview .content .previewsection .leftsection .productvarietybuttons .button a {font-size: 14px;}

  .testimonialspage .content .testimonialsection .testimonial .personpicture img {width: 150px; height: 150px; border-left: 2px solid white;}
  .testimonialspage .content .testimonialsection .testimonial .personpicture .personinfo h1 {font-size: 26px;}
  .testimonialspage .content .testimonialsection .testimonial .infocontent .feedback p {font-size: 16px; font-weight: 300; line-height: 25px;}

  .companyprofile .content .maincontent .info .profileparagraph {flex-direction: column-reverse;}
  .companyprofile .content .maincontent .info .profileparagraph .image {width: 70%; margin: auto;}
  .companyprofile .content .maincontent .info .profileparagraph .paragraph {width: 100%;}
  .companyprofile .content .maincontent .info .profileparagraph.two .image {order: 2;}
  .companyprofile .content .maincontent .info .profileparagraph.two .paragraph {padding-left: 0;}

  footer .topcontent {padding-top: 10%;}
  footer .topcontent .content {flex-wrap: wrap;}
  footer .topcontent .content h1 {padding-bottom: 2%;}
  footer .topcontent .content .companylogo {width: 100%;}
  footer .topcontent .companylogo img {}
  footer .topcontent .content .productssection {width: 100%; padding-top: 10%;}
  footer .topcontent .content .productssection .productssectioncontent {margin-left: 0;}
  footer .topcontent .content .pagelinkssection {width: 100%; padding-top: 10%;}
  footer .topcontent .content .pagelinkssection .pagelinkssectioncontent {margin-left: 0;}
  footer .topcontent .content .contactsection {width: 100%; padding-top: 10%; padding-bottom: 10%;}
  
  footer .topcontent .leftsection .text-content {flex-flow: column; grid-gap: 30px;}
  footer .topcontent .rightsection {display: none;}
}


/* The Drop-Down  */

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

  #title64 {font-size: 42px;}
  #title50 {font-size: 30px;}
  #title46 {font-size: 38px;}
  #title40 {font-size: 30px;}
  #title30 {font-size: 24px;}
  
  #para20 {font-size: 14px; line-height: 20px; font-weight: 300;}
  #para18 {font-size: 14px; line-height: 20px; font-weight: 300;}
  #para16 {font-size: 12px;}

  .contact-details-bar {padding: 5%; flex-wrap: wrap;}
  .contact-details-bar #vr {background-color: rgba(255, 255, 255, 0.5); width: 100%; height: 1px; margin: 10px;}

  .navigationbar .dropdownmenu .dropdownmenucontent {flex-direction: column;}

  .homepage .homepagecontent .mobileslideshow .topsection {padding: 100px 0; padding-bottom: 20px;}

  .mediasection .content .medias .medianews {width: 100%; flex-basis: auto;}

  .productspreview .content {margin-left: 0%; margin-right: 0%;}
  .productspreview .content .pagetitle {width: fit-content; padding-left: 10%; padding-right: 10%;}
  .productspreview .content .previewsection .leftsection {width: fit-content; padding-left: 10%; padding-right: 10%;}

  .picturegallery .content .pictures {grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));}
}

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

  #title46 {font-size: 34px;}

}


@keyframes logo-loadingscreen {
  0% {opacity: 0; transform: scale(1.3);}
  100% {opacity: 1; transform: scale(1);}
}

@keyframes animate-fade {
    0% {opacity: 0; transform: translateX(-10px);}
    100% {opacity: 1; transform: translateX(0px);}
}