*{
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: GothamBold;
    src: url("../../font/GothamHTF-Bold.otf");
}
@font-face {
    font-family: GothamLight;
    src: url("../../font/GothamRnd-Light.otf");
}
@font-face {
    font-family: GothamRegular;
    src: url("../../font/GothamRnd-Book.otf");
}
@font-face {
    font-family: GothamCondensedBold;
    src: url("../../font/GothamCondensed-Bold.otf");
}
@font-face {
    font-family: GothamCondensedMedium;
    src: url("../../font/GothamCondensed-Medium.otf");
}
@font-face {
    font-family: GothamCondensedLightRegular;
    src: url("../../font/GothamCondensed-Light-Regular.otf");
}
@font-face {
    font-family: GothamCondensedLight;
    src: url("../../font/GothamCondensed-Light.otf");
}
img{ width: 100%;}

a{ color: #000;}

a:hover{
  color: #000;
  text-decoration: none;
  font-weight: bold;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}
.contact-us-container{
  position: relative;
  width: 100%;
  overflow-x: hidden;
}
.contact-back{
  position: absolute;
  top: 70px;
  left: 50px;
  width: 60px;
  z-index: 1;
}
.contact-us-header{
  position: absolute;
  width: 100%;
  padding-left: 15%;
  font-size: 75px;
  top: 80px;
  z-index: 1;
  line-height: normal;
  font-family: "GothamBold";
}
.contact-us-large-deco{
  position: absolute;
  width: 100%;
  padding-left: 30%;
}
.contact-us-deco-1{
  position: absolute;
  left: calc(100vw - 270px);
  top: 60%;
  width: 260px;
}
.contact-us-deco-2{
  position: absolute;
  left: 20%;
  top: 390px;
  width: 18%;
}
.contact-us-deco-3{
  position: absolute;
  left: 50%;
  top: 370px;
  width: 66px;
}
.contact-us-deco-4{
  position: absolute;
  left: 43%;
  top: 230px;
  width: 87px;
}
.contact-us-deco-5{
  position: absolute;
  width: 40%;
  left: -20%;
  top: 200px;
}
.contact-us-deco-6{
  position: absolute;
  width: 220px;
  left: -25px;
  top: 34%;
}
.contact-us-deco-7{
  position: absolute;
  width: 350px;
  left: -55px;
  top: 64%;
}
.contact-us-inner-deco-1{
  position: absolute;
  width: 48%;
  z-index: 1;
  top: 78%;
  left: -80px;
}
.contact-us-inner-deco-2{
  position: absolute;
  width: 70px;
  left: 95%;
  top: 50%;
}
.contact-form-design-container{
  position: relative;
  width: 70%;
  padding: 0 8%;
  margin: auto;
  margin-top: 600px;
  background: url("../../img/contact-us/kors website -78.png");
  height: 1200px;
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 1000px;
}
.contact-form-text-container{
  position: absolute;
  font-size: 70px;
  width: 100%;
  line-height: normal;
  font-family: "GothamBold";
}
.contact-form-text1{
  position: relative;
}
.contact-form-text2{
  position: relative;
  left: 40%;
}
.contact-form-text3{
  position: relative;
  left: 50%;
}
.contact-form-container{
  position: relative;
  padding: 120px 50px;
  line-height: normal;
}
input, textarea{
  padding: 5px 15px;
  font-size: 12px;
  border: 0px solid #ca353c;
  margin: 6px;
  background: #ca353c;
  width: 54%;
  border-radius: 10px / 5px;
  color: #fff;
  font-family: "GothamLight";
}
input{text-transform: uppercase;}
textarea{border-radius: 8px / 20px; height: 100px;}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
input[type="submit"] {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    font-size: 30px;
    font-family: "GothamBold";
}

.footer{
  position: relative;
  padding: 20px 0;
}
.footer-link-line-seperator{
  position: relative;
  width: 100%;
  padding: 10px 20%;
  display: none;
}
.footer-line-seperator{
  position: relative;
  width: 100%;
  padding: 5px 40%;
  display: none;
}
.footer-top-line{
  width: 100%;
  height: 1px;
  background: #000;
}
.footer-link-container{
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
}
.footer-section{
  display: flex;
  width: 33.33%;
  flex-direction: column;
}
.footer-links{
  text-align: center;
  font-family: "GothamCondensedLight";
  font-weight: bolder;
  font-size: 24px;
  padding: 5px;
}
.footer-container{
  position: relative;
  display: flex;
}
.footer-text{
  width: 33%;
  padding: 10px 20px;
  text-align: center;
  display: flex;
  align-items: center;
  vertical-align: middle;
  flex-direction: column;
  font-size: 18px;
  font-family: "GothamCondensedLight";
  /* font-weight: bolder; */
  align-content: center;
}

@media screen and (min-width: 320px) and (max-width: 420px){
    .contact-back{      width: 18px;      top: 22px;      left: 8%;    }
    .contact-us-header{ font-size: 27px; top: 20px;}
    .contact-us-deco-5{ top: 70px; }
    .contact-us-deco-2{ top: 110px; left: 30%;}
    .contact-us-deco-3{ top: 90px; left: 60%; width: 18px;}
    .contact-us-deco-4{ top: 60px; left: 50%; width: 25px;}
    .contact-us-deco-1{ width: 80px; left: calc(100vw - 80px); top: 52%;}
    .contact-us-deco-7{ width: 160px;  top: 55%;}
    .contact-us-deco-6{ width: 80px; top: 30%;}
    .contact-form-design-container{width: 100%; margin-top: 220px;    height: 480px;    padding: 0;  }
    .contact-form-text-container{ font-size: 20px; padding: 15%; top: -48px;}
    .contact-form-text2{left: 50%;}
    .contact-form-text3{left: 60%;}
    .contact-form-container{padding: 40px 14%;}
    input, textarea{padding: 1px 4px; font-size: 10px; border-radius: 5px / 2px; margin: 0 4px;}
    textarea{border-radius: 5px / 8px; margin-top: 6px; height: 40px;}
    input[type="submit"] {font-size: 14px;}
    .contact-us-inner-deco-1{top: 82%; width: 60%;}
    .contact-us-inner-deco-2{width: 30px; left: 84%}
    .footer{padding: 0}
    .footer-link-line-seperator{display: block;}
    .footer-link-container{display: block;}
    .footer-section{width: 100%;}
    .footer-links{font-size: 16px; padding: 2px;}
    .footer-container{display: block;}
    .footer-line-seperator{display: block;}
    .footer-text{width: 100%; font-size: 12px;}
}

@media screen and (min-width: 421px) and (max-width: 650px){
      .contact-back{      width: 30px;      top: 35px;      left: 8%;    }
      .contact-us-header{ font-size: 40px; top: 25px;}
      .contact-us-deco-5{ top: 70px; }
      .contact-us-deco-2{ top: 110px; left: 30%;}
      .contact-us-deco-3{ top: 140px; left: 65%; width: 27px;}
      .contact-us-deco-4{ top: 80px; left: 55%; width: 36px;}
      .contact-us-deco-1{ width: 80px; left: calc(100vw - 80px); top: 52%;}
      .contact-us-deco-7{ width: 160px;  top: 55%;}
      .contact-us-deco-6{ width: 80px; top: 30%;}
      .contact-form-design-container{width: 100%; margin-top: 220px;    height: 700px;    padding: 0;  }
      .contact-form-text-container{ font-size: 30px; padding: 15%; top: -70px;}
      .contact-form-text2{left: 55%;}
      .contact-form-text3{left: 70%;}
      .contact-form-container{padding: 70px 18%;}
      input, textarea{padding: 2px 7px; font-size: 11px; border-radius: 5px / 2px; margin: 4px;}
      textarea{border-radius: 5px / 18px; margin-top: 6px; height: 60px;}
      input[type="submit"] {font-size: 17px;}
      .contact-us-inner-deco-1{top: 82%; width: 60%;}
      .contact-us-inner-deco-2{width: 40px; left: 85%}
      .footer{padding: 0}
      .footer-link-line-seperator{display: block;}
      .footer-link-container{display: block;}
      .footer-section{width: 100%;}
      .footer-links{font-size: 16px; padding: 2px;}
      .footer-container{display: block;}
      .footer-line-seperator{display: block;}
      .footer-text{width: 100%; font-size: 12px;}
}

@media screen and (min-width: 651px) and (max-width: 920px){
      .contact-back{      width: 45px;      top: 45px;      left: 5%;    }
      .contact-us-header{ font-size: 55px; top: 60px;}
      .contact-us-deco-5{ top: 150px; }
      .contact-us-deco-2{ top: 180px; left: 25%;}
      .contact-us-deco-3{ top: 220px; left: 56%; width: 47px;}
      .contact-us-deco-4{ top: 140px; left: 48%; width: 60px;}
      .contact-us-deco-1{ width: 160px; left: calc(100vw - 160px); top: 55%}
      .contact-us-deco-7{ width: 260px;  top: 58%;}
      .contact-us-deco-6{ width: 160px; top: 25%;}
      .contact-form-design-container{width: 90%; margin-top: 320px;    height: 920px;    padding: 0;  }
      .contact-form-text-container{ font-size: 45px; padding: 15%; top: -95px;}
      .contact-form-text2{left: 55%;}
      .contact-form-text3{left: 70%;}
      .contact-form-container{padding: 100px 15%;}
      input, textarea{padding: 4px 10px; font-size: 12px; border-radius: 8px / 4px; margin: 7px;}
      textarea{border-radius: 5px / 18px; margin-top: 7px; height: 80px;}
      input[type="submit"] {font-size: 24px;}
      .contact-us-inner-deco-2{width: 60px; left: 83%}
      .footer{padding: 20px;}
      .footer-link-line-seperator{display: block;}
      .footer-link-container{display: block;}
      .footer-section{width: 100%;}
      .footer-links{font-size: 20px; padding: 6px;}
      .footer-container{display: block;}
      .footer-line-seperator{display: block;}
      .footer-text{width: 100%; font-size: 15px;}
}

@media screen and (min-width: 1351px) and (max-width: 1800px){
      .contact-form-design-container{width: 60%; margin-top: 720px;    height: 1200px;    padding: 0;  }
      .contact-form-text-container{ font-size: 70px; padding: 15%; top: -140px;}
      .contact-form-text2{left: 54%;}
      .contact-form-text3{left: 66%;}
      .contact-form-container{padding: 140px 15%;}
      input, textarea{padding: 8px 15px; font-size: 13px; border-radius: 14px / 7px; margin: 6px;}
      textarea{border-radius: 10px / 25px; margin-top: 6px; height: 120px;}
      input[type="submit"] {font-size: 40px;}
}