/* This CSS for small Mobile*/
@media only screen and (max-width: 767px) {
#tshirt {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        display: block;
        height: 310px;
        left: 50%;
        margin-left: -150px;
        position: absolute;
        top: 120px;
        width: 300px;
}
#heart img
 {
    width: 270px;
        height: 390px;
        position: absolute;
        left: 0;
        margin: 0 auto;
        right: 0;
        top: 88px;
}
    #add-to-cart #add-to-cart-button
 {
        background-repeat: no-repeat;
        top: 375px;
        width: 150px;
        background-size: contain;
        background-position: center;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
#tshirt.type-one #card-face-second,
#tshirt.type-two #card-face-second,
#tshirt.type-three #card-face-second,
#tshirt.type-four #card-face-second
{
        height: 77px;
        left: 56px;
        position: absolute;
        top: 63px;
        width: 171px;
}

#tshirt.type-one #card-face-first,
#tshirt.type-two #card-face-first,
#tshirt.type-three #card-face-first,
#tshirt.type-four #card-face-first
{
        height: 77px;
        left: 56px;
        position: absolute;
        top: 65px;
        width: 171px;
}

.hamburger-btn {
    position: absolute;
    top: 27px;
    right: -5px;
}

main.container {
  overflow-x: hidden;
}

.heading-text-top h2 {
  font-size: 14px;
  margin: 30px 0 20px;
}

.heading-text-top h2 strong {
  font-size: 30px;
  position: relative;
  top: 6px;
}

#cart-button {
  height: 33px;
  right: -5px;
  top: -13px;
  width: 40px;
}

main {
    height: 80vh; /* 80% of viewport height */
    width: 100%;  /* full width */
    background-image: url("/wp-content/themes/ekwoster/assets/css/img/border-1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    min-height:unset;
    overflow:unset;
    background-size: 100% 100%; /* stretches width & height exactly */
}

#left-red-arrow h2, #right-red-arrow h2 {
  font-size: 11px;
}

#left-red-arrow {
        left: 30px;
        position: absolute;
        top: 64px;
        z-index: 28;
        margin: 0 auto;
        width: unset;
        text-align: center;
}

#right-red-arrow {
        right: 0px;
        position: absolute;
        top: 64px;
        z-index: 28;
        margin: 0 auto;
        width: 130px;
        text-align: center;
}

body {
  background-position: center bottom;
  background-size: 100% 100vh;
  height: 100dvh;
}

#add-to-cart #add-to-cart-button {
  left: 50%;
  margin-left: -100px;
  width: 200px;
}

#add-to-cart #add-to-cart-button {
          background-repeat: no-repeat;
        background-size: 100% auto;
        left: 50%;
        margin-left: -100px;
        top: 427px;
        width: 130px;
        background-position: center;
        left: 0;
        right: 0;
        margin: 0 auto;
}

#left-arrow {
  box-shadow: 1px 1px 2px #000;
  height: 34px;
  left: 0;
  top: 300px;
}

#right-arrow {
  box-shadow: 1px 1px 2px #000;
  height: 34px;
  left: 255px;
  top: 300px;
}

main.container {
  width: 320px;
}

#tshirt.type-one #hand, #tshirt.type-two #hand, #tshirt.type-three #hand, #tshirt.type-four #hand {
  display: none;
}

#wear-your-shirt > h2 {
  font-size: 17px;
}

#wear-your-shirt {
  top: 500px;
}

.popup, .popup_product {
  top: 10px !important;
  width: 280px;
  left: 50% !important;
  margin-left:-140px;
  height: 450px;
}

.popup-content-tshirt > img {
  margin: 40px auto 20px !important;
  width: 70% !important;
}

.tshirt-small {
  height: 50px;
  width: 50px;
}

.sizes {
  margin: 90px 0 40px;
  padding-top: 40px;
}

#customer_details, #order_review {
  width: 100%;
}

#order_review {
  margin-top: 20px;
}

.wp-social-login-widget {
  margin-top: -15px;
  text-align: center;
}
}

/* This CSS for Tablet */
@media only screen and (min-width: 768px) and (max-width: 991px) {
#tshirt {
  background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        display: block;
        height: 607px;
        left: 50%;
        margin-left: -300px;
        position: absolute;
        top: 184px;
        width: 600px;
}

#tshirt.type-one #card-face-first,
#tshirt.type-two #card-face-first,
#tshirt.type-three #card-face-first,
#tshirt.type-four #card-face-first 

{
          left: 117px;
        top: 127px;
        width: 315px;
}

#tshirt.type-one #card-face-second, 
#tshirt.type-two #card-face-second, 
#tshirt.type-three #card-face-second, 
#tshirt.type-four #card-face-second {
  left: 95px;
  top: 188px;
  width: 223px;
}

#add-to-cart #add-to-cart-button {
  left: 50%;
  margin-left: -165px;
  width: 330px;
}

.maps img {
  margin-top: 75px;
  width: 100%;
}

.heading-text-top h2 {
  font-size: 35px;
  margin: 60px 0 20px;
}

#cart-button {
  right: 15px;
}

#left-red-arrow {
  /*background-position: 206px 47px; */
  /*background-size:30% auto;*/
  left: 150px;
  top: 149px;
  /*width: 415px;*/
}

#right-red-arrow {
  /*background-position: 56px 59px;*/
  /*background-size: 65% auto;*/
  font-size: 18px;
  right: 150px;
  position: absolute;
  top: 149px;
  /*width: 428px;*/
}

#left-arrow {
  left: 175px;
  top: 490px;
}

#right-arrow {
  left: 510px;
  top: 490px;
}

#tshirt.type-one #hand {
  background-size: 87% auto;
  left: 196px;
  top: 339px;
  width: 208px;
}

#tshirt.type-two #hand, #tshirt.type-three #hand {
  background-size: 83% auto;
  left: 195px;
  top: 334px;
  width: 208px;
}

main {
  min-height: 1085px;
}

#add-to-cart #add-to-cart-button {
        height: 70px;
        background-size: contain;
        background-repeat: no-repeat;
        top: 710px;
        background-position: center;
}

#wear-your-shirt > h2 {
  font-size: 26px;
}

#wear-your-shirt {
  top: 875px;
}

.heading-text-top h2 strong {
  font-size: 66px;
  top: 10px;
}

body {
  background-position: center bottom;
}

.popup, .popup_product {
  top: 10px !important;
  width: 600px;
  left: 50% !important;
  margin-left:-300px;
}

#right-red-arrow {
  height: 201px;
}

#tshirt.type-one #card-face-second, #tshirt.type-two #card-face-second, #tshirt.type-three #card-face-second, #tshirt.type-four #card-face-second {
  height: 153px;
        width: 340px;
        left: 109px;
        top: 123px;
}


#heart img{
        width: 700px;
        height: 700px;
        top: 145px;
}
}

/* This CSS for Medium Devices */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #heart img{
              top: 156px;
        width: 800px;
        height: 800px;
    }
    
    #tshirt.type-one #card-face-second, 
    #tshirt.type-two #card-face-second, 
    #tshirt.type-three #card-face-second, 
    #tshirt.type-four #card-face-second 
    
    {
        width: 331px;
        height: 148px;
        position: absolute;
        left: 115px;
        top: 125px;
    }
    
    #tshirt.type-one #card-face-first,
    #tshirt.type-two #card-face-first,
    #tshirt.type-three #card-face-first,
    #tshirt.type-four #card-face-first
    
    
    {
        width: 321px;
        height: 160px;
        position: absolute;
        left: 116px;
        top: 126px;
    }
#tshirt {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    
    position: absolute;
    width: 600px;
    height: 607px;
    top: 237px;
    left: 50%;
    transform: translateX(-50%);
}

#add-to-cart #add-to-cart-button {
  left: 50%;
  margin-left: -165px;
  top: 860px;
  width: 330px;
}

#left-red-arrow {
 left: 230px;
        top: 190px;
}

#right-red-arrow {
  left: 230px;
        top: 190px;
  /*width: 488px;*/
}

#cart-button {
  right: 35px;
}

#right-arrow {
  left: 680px;
  top: 635px;
}

#left-arrow {
  left: 216px;
  top: 635px;
}
#left-red-arrow h2, #right-red-arrow h2{
    font-size: 20px;
}
#wear-your-shirt > h2 {
  font-size: 30px;
}
.hamburger-btn{
    right: 90px;
}
#wear-your-shirt {
  top: 1130px;
}

.popup, .popup_product {
  top: 10px !important;
  width: 800px;
}
}

/* This CSS for Large Devices */
@media only screen and (min-width: 1200px) {

}