:root{
  --text-white:#ffffff; 
  --bg: #4d8abd;
  --text-black: #000000;
  --letter-spacing: 0.01rem;
  --product-bg: #e7ebef;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
button {
  outline: none;
  border: 0;
}
a,
a:hover,
a:active,
a:focus {
  outline: none !important;
  text-decoration: none;
  /* color: #ffffff !important; */
}

.max-width-sony {
  max-width: 1190px;
  width: 105%;
  margin: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.logo.row.wrapper {
  max-width: 1190px;
  width: 100%;
  margin: auto;
}
#s-main-wrapper {
  width: 100%;
  padding: 0 7%;
  margin: 0 auto;
}
#s-main-wrapper h1 {	
  font-family: "SST W20 Medium", Helvetica, Arial, sans-serif;	
}	
#s-main-wrapper h2 {	
  font-family: "SST W20 Medium", Helvetica, Arial, sans-serif;	
}	
#s-main-content {	
  font-family: "SST W20 Medium", Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 22px;
  margin: 0;
  /* padding-top: 40px;
  padding-bottom: 0px; */
  padding: 70px 0;
}
#s-main-content p {
  margin-bottom: 24px;
  font-size: 1rem;
  line-height: 22px;
  color: #000000;
}

/* classes */
.d-block-620 {
  display: none;
}
.d-block-476 {
  display: none;
}
.pt-100 {
  padding-top: 100px;
}
.pb-100 {
  padding-bottom: 100px;
}
.pt-50 {
  padding-top: 50px;
}
.pb-50 {
  padding-bottom: 50px;
}
.primary-head {
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: 0.6px;
  line-height: 1.1;
  margin-bottom: 1rem;
  font-weight: medium;
  font-family: sst-medium;
}
.secondary-head {
  font-weight: 600;
  font-size: 3rem;
  letter-spacing: 0.6px;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.primary-para {
  font-weight: 400;
  font-size: 1.4rem;
  color: #000000;
  line-height: 1.4;
  margin-bottom: 1rem;
}

/* slider */
.slider{
  background-color: var(--bg);
  min-height: 30.438rem;
  display: flex;
  align-items: center;
  padding-top:40px;
  padding-bottom:40px;
}
.slider-head{
  font-size: 2.2rem;
  color: var(--text-white);
  font-weight: 700;
  max-width: 850px;
  letter-spacing: var(--letter-spacing);
}
.slider-para-con {
  max-width: 550px;
  margin-bottom: 1.2rem;
}
.slider-para-con p , .slider-link{
  font-size: 1rem;
  color: var(--text-white);
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
}
.slider-link{
   display: block;
   letter-spacing: var(--letter-spacing);
}
.slider-link:hover{
  color: var(--text-white);
}
.placeholder-image{
  margin-left: 150px;
}
/* slider ends*/
.smaller-text{
  font-size: .8rem;
  /* margin-bottom: .8rem; */
  color: var(--text-white);
  font-weight: 400;
}
/* select product */
.products-con{
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.select-prodct-head{
  font-size: 1.8rem;
  margin-bottom: 2.5rem;
  color: var(--text-black);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
}
.product{
  min-width: 270px;
  min-height: 185px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--product-bg);
  position: relative;
  margin: .5rem;
  cursor: pointer;
  box-shadow: 0 0 100px 0px rgb(0, 0, 0, .10%);
}
.product-image{
  max-width: 105px;
}
.product p{
  margin-bottom: 0 !important;
  margin-top: 1rem;
  font-size: 1.1rem;
  color: var(--text-black);
  font-weight: 500 !important;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  line-height: 1.2 !important;
}
.product::after{
  position: absolute;
  content: "";
  background-color: var(--bg);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition:all .2s linear;
  z-index: -1;
}
.product:hover::after{
    top: .2rem;
}
/* select product ends*/
#back-to-up{
  background-color: transparent;
  max-width: 60px;
}

/* modal box */
.modalpopup{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .80);
  z-index: 300;
  display: none;
  animation: popup .3s linear; 
}
.modal-content{
  max-width: 1000px;
  min-height: 400px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1rem 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  background: #e8e8e8;
  border-radius: 0;
}
.modal-content-text{
  position: relative;
}
.close-modal{
  position: absolute;
  top: 0rem;
  right: 0px;
  background: none;
  border: 0;
  outline: none;
  max-width: 20px;
}
.modal-content-text h2{
  font-size: 1.5rem;
  margin-bottom: .7rem;
  color: var(--text-black);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  margin-top: 2rem;
}
.modal-content-text p , .table-style tr td , .table-style tr td span , .table-style tr td strong {

  font-size: 1rem;
  color: var(--text-black);
  font-weight: 500 !important;
  letter-spacing: var(--letter-spacing);
  text-align: center;
  line-height: 1.2 !important;
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: .5rem;

}
.table-style{
  margin-top: 1rem;
}
.table-style tr td {
  line-height: 22px !important;
  font-size:16px;
}
.table-style tr td{
  padding-bottom: .5rem;
  padding-left: .5rem ;
}
.table-style tr td , .table-style tr td span{
  text-align: left;
}
.modal-content-image{
  max-width: 60%;
  margin: 2rem auto;
}
.table-style tr td strong{
  font-weight: 700 !important;
  font-size:16px;
}
@keyframes popup {
     from{
      opacity: 0;
     }
     to{
      opacity: 1;
     }
}
.modal-content::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.modal-content {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/* modal box ends*/
.hidden-product{
  display: none;
}
.product1, .product2, .product3, .product4, .product5, .product6, .product7{
  background-image: url("https://www.sony.com.sg/HP/images/mysony/mysonystatic/images/images/bravia.png");
  background-repeat: no-repeat;
  min-width: 80px;
  min-height: 80px;
  max-width: 80px;
  max-height: 80px;
  background-size: contain;
  background-position: center;
}
.product2{
  background-image: url("https://www.sony.com.sg/HP/images/mysony/mysonystatic/images/images/home-theatre.png");
}
.product3{
  background-image: url("https://www.sony.com.sg/HP/images/mysony/mysonystatic/images/images/interchangable.png");
}
.product4{
  background-image: url("https://www.sony.com.sg/HP/images/mysony/mysonystatic/images/images/compact-camera.png");
}
.product5{
  background-image: url("https://www.sony.com.sg/HP/images/mysony/mysonystatic/images/images/camera-lenses.png");
}
.product6{
  background-image: url("https://www.sony.com.sg/HP/images/mysony/mysonystatic/images/images/headphone.png");
}
.product7{
  background-image: url("https://www.sony.com.sg/HP/images/mysony/mysonystatic/images/images/xperia.png");
}
.product:hover .product1{
  background-image: url("https://www.sony.com.sg/HP/images/mysony/mysonystatic/images/images/bravia-black.png");
}
.product:hover .product2{
  background-image: url("https://www.sony.com.sg/HP/images/mysony/mysonystatic/images/images/home-theatre-black.png");
}
.product:hover .product3{
  background-image: url("https://www.sony.com.sg/HP/images/mysony/mysonystatic/images/images/interchangable-black.png");
}
.product:hover .product4{
  background-image: url("https://www.sony.com.sg/HP/images/mysony/mysonystatic/images/images/compact-camera-black.png");
}
.product:hover .product5{
  background-image: url("https://www.sony.com.sg/HP/images/mysony/mysonystatic/images/images/camera-lenses-black.png");
}
.product:hover .product6{
  background-image: url("https://www.sony.com.sg/HP/images/mysony/mysonystatic/images/images/headphone-black.png");
}
.product:hover .product7{
  background-image: url("https://www.sony.com.sg/HP/images/mysony/mysonystatic/images/images/xperia-black.png");
}
.text-bold{
  font-weight: 700;
}
.mw-50{
  max-width: 50%;
}
.popupbtn{
  outline: none;
  background: none;
  border: none;
}
.popupbtn:hover , .popupbtn:focus{
  outline: none;
  background: none;
  border: none;
}
/* responsive */
@media (max-width: 1024px){
  .products-con{
    justify-content:center;
  }
.product{
  min-width: 30%;
}
  .slider-head{
    font-size: 2.2rem;
  }
  .product-image {
    max-width: 100px;
}
.hidden-product{
  display: block;
  visibility: hidden;
}
.modal-content{
  max-width: 80%;
}
.slider-head {
  max-width: 700px;
}
.slider .max-width-sony .d-flex{
   flex-direction: column-reverse;
   display:flex;
   margin-left:100px;
   width:130%;
  }
  .img-fluid{
	  width:80%;
  }
  .slider{
	  min-width:125%;
	  overflow:hidden;
  }
  .d-flex{
	  margin-left:-45px;
  }
  
  .placeholder-image{
	max-width:80%;
    margin-bottom: 2.5rem;
	display:flex;
	margin-left:-330px;
	margin-top:250px;
  }
  .modal-content{
    min-width: 80%;
	margin-top:-30px;
  }
  .modal-content-image{
    max-width: 100%;
  }
  .product1, .product2, .product3, .product4, .product5, .product6, .product7{
    min-height: 80px;
  }
  br.line-break-620{
    display: block;
  }
  .slider-para-con{
    max-width: 100%;
  }
}
br.line-break-620{
  display: none;
}
@media (max-width: 820px){
.placeholder-image{
	max-width:80%;
    margin-bottom: 2.5rem;
	display:flex;
	margin-left:-500px;
	margin-top:300px;
  }
}
@media (max-width: 768px){
  .slider-para-con{
    max-width: 400px;
  }
  .slider-para-con p br{
    display: none;
  }
  .modal-content{
    /* min-height: auto; */
    max-width: 95%;
  }
  .modal-content-text p , .modal-content-image{
    max-width: 90%;
  }
  .mw-50 {
    max-width: 80%;
}
.slider .max-width-sony .d-flex{
   flex-direction: column-reverse;
   display:flex;
   margin-left:100px;
   width:130%;
  }
  .img-fluid{
	  width:80%;
  }
  .slider{
	  min-width:125%;
	  overflow:hidden;
  }
  .d-flex{
	  margin-left:-170px;
  }
  
  .placeholder-image{
	max-width:80%;
    margin-bottom: 2.5rem;
	display:flex;
	margin-left:-450px;
	margin-top:250px;
  }
  .modal-content{
    min-width: 80%;
	margin-top:-30px;
  }
  .modal-content-image{
    max-width: 100%;
  }
  .product1, .product2, .product3, .product4, .product5, .product6, .product7{
    min-height: 80px;
  }
  br.line-break-620{
    display: block;
  }
  .slider-para-con{
    max-width: 100%;
  }
}

@media (max-width: 620px){
  .slider .max-width-sony .d-flex{
   flex-direction: column-reverse;
   display:flex;
   margin-left:100px;
   width:130%;
  }
  
  .img-fluid{
	  width:80%;
  }
  .slider{
	  min-width:125%;
	  overflow:hidden;
  }
  .d-flex{
	  margin-left:-170px;
  }
  
  .placeholder-image{
    margin-bottom: 2.5rem;
	display:flex;
	margin-left:-630px;
	margin-top:250px;
  }
  
  .hidden-product:last-of-type{
    visibility: hidden;
    display: none;
  }
  .modal-content{
    min-width: 80%;
	margin-top:-30px;
  }
  .modal-content-image{
    max-width: 100%;
  }
  #s-main-content {
   padding: 35px 0;
  }
  .select-prodct-head {
    margin-bottom: 16px;
	margin-left:30px;
  }
  .placeholder-image{
    max-width: 80%;
  }
  .product1, .product2, .product3, .product4, .product5, .product6, .product7{
    min-height: 80px;
  }
  br.line-break-620{
    display: block;
  }
  .slider-para-con{
    max-width: 100%;
  }
}

@media (max-width: 540px){
.placeholder-image{
    margin-bottom: 2.5rem;
	display:flex;
	margin-left:-630px;
	margin-top:250px;
  }
}
@media (max-width: 527px){
  .product{
    min-width: 200px;
    padding: 1rem;
  }
  .modal-content-text p {
    max-width: 100%;
  }
  .product1, .product2, .product3, .product4, .product5, .product6, .product7{
    min-height: 80px;
    min-width: 80px;
  }
  .slider-para-con {
    max-width: 90%;
}
.slider-head{
  font-size: 2rem;
}
}

@media (max-width: 426px){
  .product{
    min-width: 160px;
    padding: 0rem;
    min-height: 150px;
  }
  .products-con{
    justify-content: space-evenly;
  }
  .product p{
    font-size: .8rem !important;
  }
.product1, .product2, .product3, .product4, .product5, .product6, .product7{
  min-height: 60px;
}
.slider-head .line-break-620{
  display: none;
  width:
}
.d-flex{
	  margin-left:-220px;
  }
  
}

@media (max-width: 390px){
  .product {
    min-width: 145px;
  }
  .product-image {
    max-width: 50px;
}
.product p {
  font-size: .7rem !important;
}
.slider-head .line-break-620{
  display: block;
  }
}

@media (max-width: 326px){
  .product{
    min-width: 120px;
  }
  .product p {
    font-size: .6rem !important;
}
.slider-head .line-break-620{
  display: none;
}
}