html,body {
height:3892px;
margin:0;
padding:0;
}

body{width:1260px;}

html {
width:100vw;
display:flex;
justify-content: center;
align-items: center;
}
header {
  background-image:URL(/img/header/Header-bg.png);
  height:720px;
  width:1260px;
  padding:64px 120px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  align-items: flex-start;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

section.dateandtime {
  color: #000;;
  font-family: "Inter", serif;
  display:flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: -1.5px;
  line-height: 100%;
  z-index:1;
  position:fixed;
  top:0;
  left:35vw;
  width:30vw;
  height:5vh;
  background-color:aliceblue;
  border-color: #292929;
  border-radius: 10px;
  border:1px solid #292929;
}
@media (max-width:1024){
  body{
    flex-direction:column;
    align-items:center;
    width:744px;
    display:flex;
  }

  header {    
    height:800px;
    width:100vw;
    padding:64px 72px;
    padding-bottom: 40px;
    }
    header {
      height:4735px;
    }
  }
#imglogo{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}
#logopng {
 width:190px;
 height:24px;
 margin-right:805px;
}

@media (max-width:1024px) {
  #logopng {
  margin-right:482px;
 }
}
#SoundWave {
  width:64px;height:76px;
}

#TheWorldShadesDiv{
  text-align:left;
  font-family:"Inter",serif;
  font-weight:700;
  font-size:48px;
  letter-spacing:-1.5px;
  line-height:100%;
  font-style:italic;
}
#TheWorldShades {
  height:212px;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  width:498px;
  align-items: flex-start;
  margin:0;
  padding:0;
}
#menupng{
  height:12px;
  width:18px;
}
main {
height:2480px; 
padding:120px;
width:1020px;
margin:0;
background-color:#fff;
box-sizing: content-box;
}


@media (max-width:1024) {
  html{
    width:744px;
    height:4735px;
 }
  main {
    height:3535px;
    width:744px;
    flex-direction: column;
    align-items:center;
    display:flex;
    padding:120px 72px;
  }
}
.HeaderSectionRecomendedAndCategories {
width:498px;
text-align:center;
font-weight:bold;
line-height:48px;
font-size:48px;
letter-spacing:-1.5px;
padding:0;
margin:0;
height:48px;
}
#SectionRecomended {
  height:550px;
  padding:0;
  font-family: "Inter",serif;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  align-items: center;
  width:1020px;
  margin:0;
  margin-bottom:120px;
}


footer {
  position:sticky;
  bottom:0;
  z-index:-1;
  height:460px;
  width:1260px;
  background-image:URL("/img/footer/footer.png")
}

table#TabelSectionRecomended{
  height:438px;
  width:1020px;
  /* border: 1px solid #000; */
  padding:0;
  border-spacing:24px;
}
.TabelSectionRecomendedRow {
  width:inherit;
  height:inherit;
  padding:0;
  margin:0;
}

TD.TabelSectionRecomendedCellsClass {
 
  height:438px;
  width:324px;
  /* border: 1px solid; */
}
div.DivTabelSectionRecomendedCellsClass{
 color:#292929;
 display:flex; 
 flex-direction: column;
  align-items:flex-start;
 justify-content: flex-start;
 width:inherit;
 height:inherit;
 font-style:"Inter",serif;
 font-size:16px;
 letter-spacing: 0px;
 line-height:140%;
 text-align:left;
 font-weight:500;
}
img.ImgTabelSectionRecomendedCellsClass {
  width:324px;
  height:320px;
  padding:0;
  margin:0;
  margin-bottom: 32px;
}
.imgsmartspeaker{
  width:324px;
  height:320px;
}
.hearderDivTabelSectionRecomendedCellsClass {
  text-align:left;
  font-weight:bold;
  font-size:16px;
  line-height:140%;
  letter-spacing:0px;
  margin-bottom:8px;
}

#ProductsByCategory {
   height:1398px;
  padding:0;
  font-family: "Inter",serif;
  display:flex;
  flex-direction:column;
  align-items: center;
  width:1020px;
  margin:0;
  margin-bottom:120px;
}
.H1ForCategories {
  margin:0;
  padding:0;
  height:96px;
  margin-top:64px;
}
.DivHeadersAndCatigories {
  width:1020px;
  height:370px;
  font-size:24px;
  font-weight:bold;
  line-height: 140%;
  letter-spacing:0px;
  /* border:1px solid; */
  margin-bottom:64px;
}
#DivAudioSunglasses{
  margin-bottom:120px;
}

.TableForCategories {
  height:320px;
  width:1020px;
  
  box-sizing: border-box;
}
#RowTableForCategories {
   height:320px;
   border-spacing:24px;
  width:1020px;
  margin:0;
  padding:0;

}
#FirstImgForHeadfonesAndSpeakers{
  width:672px;
  height:320px;
  padding:0;
  margin:0;
}
#CellFirstImgForHeadfonesAndSpeakers {
  width:672px;
  height:320px;
  padding:0;
  margin:0;
}
#CellsSecondImgForHeadfonesAndSpeakers{
  width:324px;
  height:320px;
  padding:0;
  margin:0;
}
#SecondImgForHeadfonesAndSpeakers{
  width:324px;
  height:320px;
  padding:0;
  margin:0;
}

#HowToBuy {
  width: 1020px;
  font-family:"Inter", Serif;
  border-collapse:separate;
  color:#292929;
  height:284px;
}
#HowToBuyRow {
   width: 1020px;
   height:284px;
   border-spacing:111px;
}
#HowToBuyFirstCell {
  width:411px;
  height:284px;
  position:relative;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

#TextInHowToBuyFirstCell{
  top:0;
  left:0;
  position: absolute;
  width:411px;
  height:96px;
  text-align:left;
  font-weight:bold;
  font-size:48px;
  letter-spacing:-1.5px;
  line-height:48px;
}

#HowToBuySecondCell {
  height:284px;
  width:498px;
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  flex-direction: column;
}
#FirstTextInHowToBuySecondCell {
  flex-direction: column;
  height:136px;
  width:498px;
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  font-weight:bold;
  font-size:16px;
  line-height:140%;
  letter-spacing: 0;
}
f {
  height:108px;
  white-space:pre-wrap;
  font-weight: 500;
  font-size:16px;
  line-height: 27px;
  letter-spacing: 0;
  width:498px;
}

.SizeForFirstTextInHowToBuySecondCell {
  width:498px;
  height:22px;
}

section#menu {
  width:1260px;
  height:720px;
  color:#292929;
  background-color:#E8EFF9;
  top:0;
  left:0; 
  position: absolute;
  padding:64px 120px;
  box-sizing: border-box;
}

@media screen and (max-width:1024) {
  section#menu{
    width:744px;
    box-sizing: border-box;
    height:800px;
    padding-left:72px;
    padding-right:72px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
 
}
div#bose {
  width:1020px;
  height:24px;
  display: flex;
  flex-direction:row;
  justify-content: space-between;
  align-items: center;
}
#imgbose {
  width:190px;
  height:24px;
}
#NavLinks {
  width:198px;
  height:184px;
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  flex-direction: column;
  margin: 0 0;
  padding:0 0;
  margin-top:64px;
  color:#292929;
  font-weight:bold;
  line-height:22px;
  font-size:22px;
  letter-spacing:2px;
  font-family:"Inter",serif;
}
#IconClose{
  width:24px;
  height:24px;
}
.show {
  transform: translateX(0.1vw);
  transition: transform 3s ease-in-out;
}
.starthide {
  transform: translateX(-99vw);
  /*transition: transform 1.5s ease-in-out;*/
}
.hide {
  transform: translateX(-99vw);
  transition: transform 1.5s ease-in-out;
}