#content-desktop {
       display: block;
    }
 
    #content-mobile {
       display: none;
    }
 
    .hidden-lg {
       display: none;
    }
 
    .display-4 {
       color: #ffffff;
       font-family: DaxPro-WideLight;
       font-size: 3rem;
    }
 
    .display-6 {
       color: #ffffff;
       font-family: DaxPro-WideLight;
       font-size: 2rem;
    }
 
    .display-5 {
       font-size: 5.5rem;
       color: #ffffff;
       font-family: DaxPro-WideLight;
       margin-top: 100px;
       line-height: 2.2;
    }
 
    .dark {
       color: #DE5E20;
       font-weight: 700;
       line-height: 4.5rem;
       font-family: DaxPro-WideLight;
    }
 
    strong {
       font-weight: 900;
       color: #000000;
    }
 
    .qut_bld {
       font-weight: 900;
       color: #E05312;
    }
 
 
    .brand-page header h1 {
       font-size: 4.25rem;
 
    }
 
 
    .black {
       color: #53565a;
       line-height: 4.5rem;
       letter-spacing: 0;
    }
 
 
    .col-12.p-2.p-sm-3.p-md-5 {
       top: 55%;
 
    }
 
    .jumbotronBrand {
       padding: 6rem 1rem;
       margin-bottom: 2rem;
       border: 1px #FFFFFF;
       border-style: solid;
       background-color: #e67035;
       border-radius: .1875rem;
       width: 100%;
    }
 
    .white {
 
       border: 1px #f3f3f3;
       border-style: solid;
       background-color: #ffffff;
       background-image: url("../FP2.jpg?$staticlink$");
    }
 
    /* Button animation */
    .outer {
       margin: 50px;
       margin-left: 0px;
    }
 
    .brandButton {
       border: 1px solid #000;
       width: 200px;
       height: 45px;
       display: block;
       background: linear-gradient(to right, black 50%, white 50%);
       background-size: 200% 100%;
       background-position: right bottom;
       transition: all .5s ease-out;
    }
 
    .brandButton:hover {
       background-position: left bottom;
    }
 
    .brandText {
       text-align: center;
       font-size: 16px;
       line-height: 30px;
       color: black;
       transition: all .6s ease-out;
       display: block;
       font-family: DaxPro-WideLight;
       font-weight: bold;
       margin-top: 3%;
    }
 
    .brandText:hover {
       color: white;
    }
 
 
    .brand-page header h1 {
       text-transform: capitalize;
 
    }
 
    .brand-page header>div {
       width: 75%;
       position: absolute;
       top: 50%;
       left: 52%;
       -webkit-transform: translate(-50%, -70%);
       -moz-transform: translate(-50%, -70%);
       transform: translate(-50%, -70%);
    }
 
    .bText {
       color: white;
       text-align: justify;
 
    }
 
    .img-space {
       width: 15%;
       margin-bottom: 2rem;
       margin-bottom: 2rem;
    }
 
    .img-fluid {
       margin-bottom: 1rem;
    }
 
    .tempur_mat {
       width: 12%;
       margin-bottom: 1rem;
    }
 
    .mb-3,
    .my-3 {
       margin-bottom: 2rem !important;
       margin-top: 2rem !important;
    }
 
    .mt-3 {
       margin-bottom: 4rem !important;
       margin-top: 4rem !important;
    }
 
 
 
    .nasa_col {
       margin-top: 28%;
 
    }
 
    .header-overlay {
       z-index: 1;
       position: absolute;
       top: 0;
       left: 15px;
       width: 97%;
       /* max-width: 1376px; */
       height: 93%;
       background: rgb(0, 0, 0);
       opacity: 1;
       background-size: cover;
    }
 
    #find {
 
       position: absolute !important;
       margin-left: 115px !important;
 
    }
 
    #explore {
 
       position: absolute !important;
       margin-left: 115px !important;
       margin-top: 65px;
 
 
    }
 
    #range {
 
       position: absolute !important;
       margin-left: 115px !important;
       margin-top: 125px;
       cursor: pointer;
       display: inline-block;
       padding: 0.375rem 1.875rem;
       border-radius: 0rem;
       -webkit-box-shadow: 0.25rem 0.375rem 1.375rem 0rem rgba(0, 0, 0, 0.18);
       box-shadow: 0.25rem 0.375rem 1.375rem 0rem rgba(0, 0, 0, 0.18);
       text-transform: uppercase;
       border-radius: 0;
       -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
       transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
       transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
       transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
       text-align: center;
       border: 0;
       font-family: DaxBold;
       font-size: 0.875rem;
       color: #fff;
       line-height: 1.5rem;
       letter-spacing: 0.05625rem;
       background-color: #131313;
       border-color: transparent;
       padding: 0.75rem 1.125rem;
       font-size: 1rem;
       font-weight: bold;
       min-width: 10.3125rem;
       position: relative;
 
    }
 
    #mat {
 
       font-size: 19px;
       position: absolute;
 
    }
 
    #para {
       font-size: 1rem !important;
       line-height: 2rem !important;
       text-align: justify !important;
 
 
    }
 
    #para2 {
       font-size: 1rem !important;
       line-height: 2rem !important;
       text-align: justify !important;
       text-shadow: 2px 2px 25px #000000;
 
 
    }
 
 
 
 
    @keyframes dash {
       to {
          stroke-dashoffset: 0;
       }
    }
 
    svg.linePoint1,
    svg.linePoint2,
    svg.linePoint3 {
       position: inherit;
       z-index: 2;
    }
 
    g#Group-2 {
       animation: move 10s linear;
       animation-fill-mode: forwards;
       stroke-dasharray: 1353px;
       stroke-dashoffset: 1353px;
    }
 
    @keyframes move {
       100% {
          stroke-dashoffset: 0;
       }
    }
 
    circle#Oval {
       animation: fadeIn ease 5s;
       -webkit-animation: fadeIn ease 5s;
       -moz-animation: fadeIn ease 5s;
       -o-animation: fadeIn ease 5s;
       -ms-animation: fadeIn ease 5s;
    }
 
    @keyframes fadeIn {
       0% {
          opacity: 0;
       }
 
       90% {
          opacity: 0;
       }
 
       100% {
          opacity: 1;
       }
    }
 
    .overflow-p {
       overflow-y: scroll;
       height: 110px;
       text-align: justify;
    }
 
    @media screen and (max-width: 1126px) {
       #content-desktop {
          display: block;
       }
 
       #content-mobile {
          display: none;
       }
 
       .display-4 {
          font-size: 2.1rem;
          line-height: 1.4;
       }
 
       .display-5 {
          font-size: 4.1rem;
          margin-top:260px;
       }
 
       .brand-page header h1 {
          font-size: 3.25rem;
       }
 
       .brandText {
          font-size: 0.9rem;
       }
 
       .img-space{
          display: none;
       }
 
    }
 
    @media only screen and (max-width : 768px) and (max-height : 1024px) {
       .brand-page header>div {
          width: 75%;
          position: absolute;
          top: 51%;
          left: 53%;
          -webkit-transform: translate(-50%, -70%);
          -moz-transform: translate(-50%, -70%);
          transform: translate(-50%, -70%);
       }
 
       .header-overlay {
          z-index: 1;
          position: absolute;
          top: 0;
          left: 15px;
          width: 96%;
          /* max-width: 1376px; */
          height: 98%;
          background: rgb(0, 0, 0);
          opacity: 1;
          background-size: cover;
       }
 
       .img-space {
          display: none;
       }
 
       .display-5 {
          font-size: 3.1rem;
       }
 
       .display-4 {
          font-size: 1.6rem;
          padding-bottom: 10px;
       }
 
       #para2 {
          font-size: 1rem !important;
          line-height: 2rem !important;
          text-align: justify !important;
          text-shadow: 2px 2px 10px #000000;
          padding: 0px !important;
       }
 
       .brand-page header h1 {
          font-size: 2.25rem;
       }
 
       .jumbotronBrand {
          padding: 3rem 1rem;
          margin-bottom: 2rem;
          border: 1px #FFFFFF;
          border-style: solid;
          border-radius: .1875rem;
          width: 100%;
       }
 
       .dark {
          color: #DE5E20;
          font-weight: 700;
          line-height: 4.5rem;
          font-family: DaxPro-WideLight;
       }
    }
 
    @media screen and (max-width: 600px) {
       #content-desktop {
          display: none;
       }
 
       #content-mobile {
          display: block;
       }
 
       .display-4 {
          font-size: 1.5rem;
          line-height: 1.5;
       }
 
       .display-5 {
          font-size: 2rem;
          margin-top: 89px;
       }
 
       .brand-page header h1 {
          font-size: 1.25rem;
       }
 
       .brandText {
          font-size: 0.9rem;
       }
 
       .header-overlay {
          display: none;
       }
 
       .brand-page header h1 {
          font-size: 2.25rem;
       }
 
       .overflow-p {
          overflow-y: scroll;
          height: 210px;
          text-align: justify;
       }
 
       .dark {
          color: #DE5E20;
          font-weight: 700;
          line-height: 2.5rem;
          font-family: DaxPro-WideLight;
       }
 
       .brand-page header>div {
          width: 75%;
          position: absolute;
          top: 57%;
          left: 53%;
          -webkit-transform: translate(-50%, -70%);
          -moz-transform: translate(-50%, -70%);
          transform: translate(-50%, -70%);
       }
 
       /* width */
       ::-webkit-scrollbar {
          width: 5px;
       }
 
       /* Track */
       ::-webkit-scrollbar-track {
          box-shadow: inset 0 0 5px grey;
          border-radius: 10px;
       }
 
       /* Handle */
       ::-webkit-scrollbar-thumb {
          background: #ffffff;
          border-radius: 10px;
       }
 
       /* Handle on hover */
       ::-webkit-scrollbar-thumb:hover {
          background: #ffffff;
       }
    }
 
    @media screen and (max-width: 480px) {
       #content-desktop {
          display: none;
       }
 
       #content-mobile {
          display: block;
       }
 
       .display-4 {
          font-size: 1rem;
       }
 
       .display-5 {
          font-size: 1.6rem;
       }
 
       .brand-page header h1 {
          font-size: 1.25rem;
       }
 
       .header-overlay {
          display: none;
       }
 
       .brand-page header>div {
          width: 75%;
          position: absolute;
          top: 58%;
          left: 53%;
          -webkit-transform: translate(-50%, -70%);
          -moz-transform: translate(-50%, -70%);
          transform: translate(-50%, -70%);
       }
 
       .jumbotronBrand {
          padding: 1.6rem 1rem;
          margin-bottom: 0rem;
          border: 1px #FFFFFF;
          border-style: solid;
          border-radius: .1875rem;
          width: 100%;
       }
 
       .dark {
          color: #DE5E20;
          font-weight: 700;
          line-height: 1.7rem;
          font-family: DaxPro-WideLight;
       }
 
       .qut_bld {
          font-weight: 900;
          color: #C5622A;
       }
 
       h1 {
          font-family: DaxPro-WideRegular, Dax-Regular;
          font-size: 1.05rem;
          color: #53565a;
          line-height: 0.1rem;
          letter-spacing: .125rem;
          word-break: break-word;
       }
 
       .black {
          color: #53565a;
          line-height: 2rem;
          letter-spacing: 0;
          font-size: 1.3rem;
       }
 
       .tempur_mat {
          width: 18%;
          margin-bottom: 1rem;
       }
 
       #mat {
          font-size: 15px;
          position: absolute;
       }
 
       #para {
          font-size: 0.80rem !important;
          line-height: 1.7rem !important;
          text-align: justify !important;
       }
 
       .overflow-p {
          overflow-y: scroll;
          height: 110px;
          text-align: justify;
       }
 
       /* width */
       ::-webkit-scrollbar {
          width: 5px;
       }
 
       /* Track */
       ::-webkit-scrollbar-track {
          box-shadow: inset 0 0 5px grey;
          border-radius: 10px;
       }
 
       /* Handle */
       ::-webkit-scrollbar-thumb {
          background: #ffffff;
          border-radius: 10px;
       }
 
       /* Handle on hover */
       ::-webkit-scrollbar-thumb:hover {
          background: #ffffff;
       }
    }
 
    @media screen and (max-width: 320px) {
       #content-desktop {
          display: none;
       }
 
       #content-mobile {
          display: block;
       }
 
       .display-4 {
          font-size: 1rem;
       }
 
       .display-5 {
          font-size: 1rem;
       }
 
       .brand-page header h1 {
          font-size: 1.25rem;
       }
 
       .header-overlay {
          display: none;
       }
 
       .brand-page header>div {
          width: 75%;
          position: absolute;
          top: 50%;
          left: 53%;
          -webkit-transform: translate(-50%, -70%);
          -moz-transform: translate(-50%, -70%);
          transform: translate(-50%, -70%);
       }
 
       .img-space {
          display: none;
       }
 
       .overflow-p {
          overflow-y: scroll;
          height: 130px;
          text-align: justify;
       }
 
       .qut_bld {
          font-weight: 900;
          color: #C5622A;
       }
 
       .tag_bld {
          font-weight: 900;
          color: #ffffff;
       }
 
       .dark {
          color: #DE5E20;
          font-weight: 700;
          line-height: 1.6rem;
          font-family: DaxPro-WideLight;
       }
 
       /* width */
       ::-webkit-scrollbar {
          width: 5px;
       }
 
       /* Track */
       ::-webkit-scrollbar-track {
          box-shadow: inset 0 0 5px grey;
          border-radius: 10px;
       }
 
       /* Handle */
       ::-webkit-scrollbar-thumb {
          background: #ffffff;
          border-radius: 10px;
       }
 
       /* Handle on hover */
       ::-webkit-scrollbar-thumb:hover {
          background: #ffffff;
       }
    }