body {
    height:100%;
    
  }

.navbar{
    background-color:#f5f8ff;
    box-shadow:0px -5px 19px -5px #000000b8!important;
}
a{
    color:#52585b;
}

a:hover{
    color:#52585b;
}

.nav-link{
    position: relative;
    margin-left: 0.5em;
}

.custom-control-label::before {
    position: absolute;
    top: .25em;
    left: -1.3em;
    width: 1em;
    height: 1em;
}
.custom-control-inline {
    margin-right: 1em;
}


.logo{
    height: 2.5em;
}
.foot .logo{
    height: 4em;
}

/* left margins */

.ml-6{
    margin-left: 3em!important;
}

.ml-7{
    margin-left: 3.5em!important;
}

.ml-8{
    margin-left: 4em!important;
}

.ml-10{
    margin-left: 5em!important;
}

.mb-10{
    margin-bottom: 10em;
}


h1, h2, h3, h4, h5, h6, p, div, form, button, .modal, .table{
    font-family:Montserrat;
    color:#52585b;
}

h6{
    font-size:1em;
}
h5{
    font-size: 1.25em;
}
h4{
    font-size: 1.5em;
}

.headingL{
    font-size: 3.5em; 
    color: #49b7e9;
    font-weight: bold;
}

.headingS{
    font-size: 1.5em;; 
    color: #49b7e9;
    font-weight: bold;
}
.headingT{
    font-size: 1.5em;; 
    color: #49b7e9;
    text-transform: uppercase;
}
.subHeading{
    font-size: 1.5em;
    color:#52585b ;
}

.Tjustify{
    text-align: justify;
}

.Tcenter{
    text-align: center;
}
.Tbold{
    font-weight: bold;
}
.center{
    margin:auto;
}

.p-7{
    padding: 7em;
}

#searchForm{
    border:1px solid #49b7e9 ;
    //background-color: #faf4ee;
    width: 325px;
    height: 45px;
    margin-right: 1em !important;
    //font-size: 1.4em;
}
.subHeadingL{
    font-size: 1.67em;
}

#searchForm::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-size: 1em;
  }
   
  #searchbtn,#button{
      font-size:0.7em;
      background-color: #faa83c;
      color:white;
      height:100%
  }

#searchbtn{
    margin-right: 0!important;
}

.arrow img{
    height: 4em;
    margin:7em 0em;
}
.arrow i{
    font-size: 2.5em;
    color: #49b7e9;
    margin-top: 3em;
    text-shadow: 3px 3px 4px #52585b77;
}

.nav-item a:hover, .CScontent .btn{
    background-color: #faa83c;
    color: white;
    height: 2.4em;
    border-radius: 0.3em;
    font-size: 1em;
    transition: all 0.3s ease;
}

.navbar .active-btn{
    background-color: #faa83c;
      color:white;
      height:2.4em;
      border-radius: 3.125em;
      font-size:1em;
}
.CScontent .btn{
      height:3em;
      border-radius: 1em;
}
#button{
    border-radius: 3.125em !important;
}
.mid{
    padding: 20%;
}

  #header{
      background-repeat: no-repeat;
      background-position: right; 
      background-position-y:top; 
      background-size: contain;
  }

  #homePage #header{
      background-image: url("../../img/version2/headerBg.png")
  }

  #AboutUsPage #header{
    background-image: url("../../img/version2/AboutUs/Artboard\ 1\ copy.png")
}

  .fright{
      float:right;
  }

  .fcextra{
      width: 40%;
      margin-top:8em!important;
  }
  .headImg{
    height:100%;
    width:87%;
  }


  .partial-border{
      width:4%;
      border: 3px solid rgba(251, 89, 89);
      border-radius: 30%;
  }
  .partial-border.pbsmall{
      width:1.5%;
  }

  .styleBlue{
    background-image: url("../../img/version2/whyOdwenBg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .styleBlue img{
      width:38%;
      margin:10% 31% 5% 31%;
  }
.emphasize{
    transition: 0.5s;
}

  .emphasize:hover{
      transform: scale(1.2);
  }
  .emphasize img{
      transition: 0.4s;
  }
  .emphasize:hover img{
    transform: rotate(10deg);
  }

  .spacerUp{
      margin-top:3em!important;
  }

  .spacerDown{
      margin-bottom: 3em!important;
  }

  .spacerUp2{
    margin-top:6em!important;
}

.spacerDown2{
    margin-bottom: 6em!important;
}

.howcard{
   padding: 1.5em;
   min-height: 22em;
   border: none;
   position: relative;
   background-image: url("../../img/version2/pattern.png");
   box-shadow:0px 3px 14px -10px black;
   transition: all 0.7s ease;
   font-size: 0.8em;
}


.howcard:hover{
    box-shadow: none;
    background-image: linear-gradient(to right bottom, #49b7e9, #575fab);
    /* transition: all 0.7s ease; */
}

.howcardTitle{
    text-align: center;
    font-weight: bold;
    transition: all 0.5s ease;
    color: #49b7e9;
    text-transform: uppercase;
}

.howcard:hover .howcardTitle{
    text-align: left;
    color:white;
    text-transform: capitalize;
}

.howcardDetail{
    font-size: 0em;
    opacity: 0;
    color:transparent;
    transition: color 0.5s ease;
}

.howcard:hover .howcardDetail {
    font-size: 1em;
    display: block;
    opacity: 1;
    color:white;
    /* transition: all 0.6s ease; */
 }
.card:hover .card-Detail {
    font-size: 1em;
    opacity: 1;
    color:white;
    position: absolute;
    top: 30%;
    left: 40%;
    transform: translate(-50%, -50%);
 }
.imgBlue{
    margin-bottom: 1em;
    width:50%;
    margin:15% 25% 10% 25%;
    transition: all 0.7s ease;
}

.howcard:hover .imgBlue {
    width:35%;
    opacity: 0;
    display: none;
    transition: all 0.7s ease;
}

.imgW{
    width:35%;
    display: none;
    margin-bottom: 10%;
    transition: all 0.5s ease;
}

.howcard:hover .imgW {
    opacity: 1;
    display: block;
    transition: all 0.5s ease 0.3s;
}

.shape{
    width:100%;
    height:5em; 
    margin-left: -1.9em;
    background-color: #ffffff42;
    background-size: cover;
    clip-path: circle(2% at 100% 0);
    z-index: 10;
    transition: all 0.5s ease-out;
}

.shapetrigger:hover .shape{
    clip-path: circle(25% at 100% 0);
    transition: all 0.5s ease-out;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(to right bottom, #49b7e9, #575fab);
    color:white;
    overflow: hidden;
    width: 100%;
    height: 0;
    margin: auto;
    transition: .6s ease;
    justify-content: center;
  }

  .card:hover{
    box-shadow: none;
  }
  .card:hover .overlay {
    height: 100%;
    transition: all 0.6s ease;
  }
.cardText{
    position: absolute;
    margin:auto;
}

.card{
    margin:auto;
    width:85%!important;
    box-shadow:0px 3px 14px -10px black;
    height: 100%;
}

.p-5 {
    padding: 3em!important;
}

.close p:hover{
    color:#faa83c;
    transition: 0.2s ease;
}
.foot{
    background-image: linear-gradient(to right bottom, #49b7e9, #575fab);
    color:#fff;
    padding-top: 2em;
    padding-bottom: 2em;
    color: #fff;
}

.fcon p{
    color: #fff;
}

footer div{
    color: #fff;
}


#contact{
    position: absolute;
    width:90%;
    margin:-11% 5% 0% 5%;
    margin:-10.5em 5% 0% 5%;
    background-image: url("../../img/version2/trapezium.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding:3em;
}

.foot a{
    color:#fff;
}

/* .navbar-toggler {
    color: rgba(0,0,0,.5);
    border-color: rgba(0,0,0,.1);
} */

.navbar-toggler span{
    margin:auto;
    margin-top: 30%;
}
/* Modals */
.modal .row{
   margin: 0;
}
::placeholder:after {
    content:"*";
  }
.modal-side{
    background-image: url("../../img/version2/background-01-01.jpg");
    background-repeat: no-repeat;
    background-size:100%;
}
.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}

.form-control{
    font-size: 1em;
}
.fa-eye{
    color: #49b7e9;
    padding-right: 0.5em
}
#ModalTitle{
    font-size: 1.75em;
    letter-spacing: 2px;
    font-weight: 900;
    color: #49b7e9;
}
.modal-header, .modal-footer{
    border:none;
}
/*#stepForm input, #contactForm input{
    border: none;
    border-radius: 0%;
    border-bottom: 1px solid #49b7e9;
}*/

#stepForm input, #contactForm input{
   border: 1px solid #49b7e9; 
}
.modal input,.modal textarea{
    border-radius: 0.5em;
    border: 1px solid #49b7e9;
}
.modal .custom-select{
    border-radius: 0.5em;
    border: 1px solid #49b7e9;
}
.close{
   text-shadow: none;
   opacity: 0.8!important;
}
.close p{
    color: #FFF;
}
.btn-modal{
    background-color: #faa83c;
    color:#fff;
    letter-spacing: 0.15em;
    padding: 0.7em;
    margin:0.5em;
    font-size: 1em;
}
.modal-body{
    padding-left:1em; 
}
.modal-side img{
    width: 90%;
    margin-top: 30%;
}
.btn:hover{
    color:#fff;
}
.modal .btn-modal{
    min-width: 40%;
}

body.modal-open .superWrapper{
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.modal-content{
    box-shadow: 0px 0px 20px -5px;
    border: none;
    border-radius: 0%;
    padding:0;
}
.modal-link a{
    color:#49b7e9;
}
.modal-link {
    font-size: 0.8em;
}
.modal-foot img{
    height: 2em;
    margin-right:0.5em;
    margin-left: 0.5em;
}
.modal-foot{
    padding-top:1em;
}

#loginModal .custom-control, #ForgotPasswordModal .custom-control{
    padding-left:0;
}
.modal #ModalTitle{
    font-size: 1.5em;
}
.modal .custom-checkbox .custom-control-label::before{
    border-radius: 0%;
    border:1px solid #49b7e9;
    width:1em;
    height:1em;
}
.custom-control-input:checked~.custom-control-label::before {
    border-color: #49b7e9;
    background-color: #49b7e9;
}

.form-check{
    padding-left:1.5em;
}
/* .modal .custom-control-label::after{
    top: .1em;
    left: -1.6em;
}
.modal .custom-checkbox .custom-control-label{
    font-size: 0.7em;
} */
.custom-control-label::after {
    left: -1.3rem;
}

.UCase{
    text-transform: uppercase;
}


.pr-0{
    padding-right:0px;
}

textarea:focus, input:focus, .custom-select:focus{
    outline: none;
}

*:focus {
    outline: none;
}
.form-control:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  button:focus {outline:0;}

.foot h6{
    color:#fff;
    font-size:1.2em;
}

.foot li{
    font-size: 0.7em;
    margin-bottom: 0.7em;
    list-style:none;
}

.CSimg{
    width: 100%;
}

.CScontent{
    padding: 0 4em 0 4em;
}

.CSTitle{
    font-size: 4em;
    font-weight: bolder;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
  }

  .upload-btn-wrapper input[type=file] {
    font-size: 6.25em;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }

  .btn-upload{
    width: 8em;
    background-color: #49b7e9;
    color: #fff;
    border-radius: 3.125em;
  }

.bgVector-bottom{
    margin-top:10%;
    background-repeat: no-repeat;
    background-position: left 0px bottom 20%;
  }

.bgVector{
    margin-top:7%;
    background-repeat: no-repeat;
    background-position-y:top; 
    background-size: 40%;
  }

.bg-left{
    background-position-x: left; 
}

#listYourSpace{
    background-image: url("../../img/version2/listYourSpace/bg.png");
    background-size: 40%;
}

#MyWarehouses{
    background-image: url("../../img/version2/listYourSpace/bg.png");
    background-size: 30%;
}

.bg-right{
    background-position-x: right; 
}

#ContactUsPage{
    background-image: url("../../img/version2/ContactUs/contact_us.png");
    background-size: 38%;
}
#CSPage{
    background-image: url("../../img/version2/caseStudy/caseStudy.png");
    background-size: 43%;
    background-position: left 0px top 5em;
}


#FAQPage{
    background-image: url("../../img/version2/FAQ/faq.png");
    background-size: 30%;
}
#TNCPage{
    background-image: url("../../img/version2/TNC/Terms_condtion.png");
    background-size: 50%;
}
.pg-text{
    text-align: justify;
}

#contact .col-md-8{
    padding: 3em;
}

.panel-group .panel {
    border-radius: 1em;
    box-shadow: 8px 7px 13px -10px #52585b;
    border-radius: 1em;
}
.panel-heading .fas{
    color: #fff;
}
.panel-default > .panel-heading {
    padding: 0;
    border-radius: 1em;
    color: #FFF;
    background-color: #49b7e9;    
}

.panel-title {
    font-size: 1em;
}


.panel-title > a {
    display: block;
    padding: 1em;
    text-decoration: none;
    color: #FFF;
    border-radius: 1em;
}

.more-less {
    float: right;
    color: #52585b;
}
.panel.panel-default{
    border: 1px solid #49b7e9;
    border-radius: 1em;
    margin-top: 0.7em;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body { 
    padding: 1em;
    border-radius: 1em;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -1em;
    padding-top: 1.5em;
}
.toast{
    position: absolute; 
    bottom: 12%; 
    right: 1%; 
    z-index: 100;
    padding: 0.7em;
    color: #fff;
    background-color: rgba(44, 230, 44, 0.781);
    box-shadow:8px 9px 20px -10px #52585b;
}
.toast-body{
    color:#fff; 
    font-size: 1.2em;
}

@media only screen and (max-width: 750px) {
    .headingL{
        font-size: 2.5em; 
    }
    .headingS, .headingT{
        font-size: 1.5em;
    }
    #searchbtn{
        height: 3em;
    }
    .subHeading, .subHeadingL{
        font-size: 1.2em;
    }
    .partial-border.pbsmall {
        width: 5%;
    }
    .p-7{
        padding: 2.5em;
    }

    #searchForm {
        width: 13em;
        font-size: 1em;
        margin-right: 0.8em!important;
        
    }
    .fcextra{
        width: 0%
    }
    .styleBlue{

        background-size:cover;
        padding-bottom:7em;
    }
    .styleBlue img {
        width: 50%;
        margin: 5% 25% 5% 25%;
    }
    #curatedWarehouses.styleBlue {
        background-color: #f3f6ff;
        padding-bottom:0.5em;
    }
    .howcard{
        margin-bottom:1.5em;
        min-height: 25em;
        font-size: 1em;
    }
    .csrow{
        margin:1em;
        padding:0.5em;
    }
    
    #header .headingL, .subHeading, .subHeadingL, .form-inline{
        margin:auto;
    }
    .mP{
        margin-top:-10%;
    }
    .mP .row{
        margin:0px;
    }

    .pg-text{
        text-align: left;
        font-size:0.9em;
    }

    #contact{
        background: linear-gradient(to bottom, rgb(255, 255, 255) 0%,rgb(255, 255, 255) 50%, rgba(246, 246, 246, 0.74) 85%, rgba(237, 237, 237, 0) 100%);
        box-shadow: 0px -9px 20px -10px;
        margin-left: 1.2%;
        margin-top:-120px;
        padding:0.5em;
        text-align:center;
    }
    .foot{
        padding-top:4em;
    }

    #contact .col-md-8{
        padding: 1.5em;
    }
    .superWrapper{
        padding-top: 15%;
    }
    #AboutUsPage .superWrapper, #homePage .superWrapper{
        padding-top: 0%;
    }
    
    .bgVector,.bgVector-bottom{
        background-position-y:top; 
        margin-top:20%;
      }
    
    #listYourSpace, #MyWarehouses{
        background-size: 80%;
    }
    
    #ContactUsPage, #CSPage{
        background-size: 80%;
    }
    #FAQPage{
        background-size: 70%;
    }
    #TNCPage{
        background-size: 80%;
    }
    .Tjustify{
        text-align: left;
    }
    .modal-side img{
        margin: 0;
        margin-left: 25%;
        margin-bottom: 5%;
        width: 50%;
    }
    .modal-side .modal-body{
        padding-top: 0em;
    }
    .modal-side .modal-header{
        padding-bottom: 0em;
    }
    .CScontent{
        padding: 0 2em 0 2em;
    }
}
@media only screen and (min-width: 750px){
    .howcard{
        height:100%;
    }
    .csRow{
        margin: 1.5em 4em;
        padding: 1.5em;
    }
    .navbar-brand{
        margin-left:5em;
    }
    .mlB-auto{
        margin-left:auto!important;
    }
    .mrB-auto{
        margin-right:auto!important;
    }
    .flink{
        margin-top: 3em;
    }
    #footer{
        margin-top:7em!important;
    }
    .form-group{
        margin-bottom: 1em!important;
    }
   
}
@media (max-width: 32em) {
    .arrow img{
        height:4em;
        transform: rotate(90deg);
        margin: 0em;
        margin-bottom: 0.8em;
    }
    .arrow{
        width: 100%;
    }
    .arrow i{
        transform: rotate(90deg);
        margin: 0 0 1em 0;
        text-shadow: 3px 3px 4px #52585b77;
    }
    .homeSearch{
        margin-top: 1em;
    }
  }
 
@media (min-width: 64em) {
    body {
      font-size: 1em;
      line-height: 1.44;
    }
    .modal-dialog{
        max-width: 620px;
    }
    /* .modal-content{
        height: 600px;
    } */
    .headImg{
        height:100%;
        width:82%;
      }

      #About{
        margin-top: -3em;
    }
    .homeSearch{
        margin-top: 1.2em;
    }
  }
  @media (min-width: 85.375em) {
    body {
      font-size: 1em;
    }
    #ModalTitle{
        padding-left:0.4em;
    }
    #contact{
        width: 80%;
        margin: -9.5em 10% 0% 10%;
    }
    .homeSearch{
        margin-top: 1.2em;
    }
  }
  @media (min-width: 120em) {
    body {
      font-size: 1.25em;
    }
    #contact{
        width: 80%;
        margin: -9.5em 10% 0% 10%;
    }
    #searchForm{
        width: 26em;
        height:2.5em;
    }
    .homeSearch{
        margin-top: 2em;
    }
    #searchbtn{
        font-size: 0.9em;
    }
  }
  @media (min-width: 160em) {
    body {
      font-size: 1.6em;
    }
    #searchForm{
        width: 28em;
        height:2.6em;
    }
    .shape{
        margin-left: -1.2em;
    }
    .modal-dialog {
        max-width: 850px;
    }
    #ModalTitle{
        padding-left:0.2em;
    }
    .modal #ModalTitle{
        font-size: 1.2em;
    }
    #contact{
        width: 70%;
        margin: -9.5em 15% 0% 15%;
    }
    .modal-body{
        padding-left:0.7em;
    }
    .modal-foot{
        padding-left:0.5em;
    }
    .modal .btn-modal {
        min-width: 46%;
        margin: 0 0.2em 0 0.2em;
    }
    /* .modal-content{
        height: 800px;
    } */
    .modal .col-md-7{
        padding: 1em;
    }
    .homeSearch{
        margin-top: 3em;
    }
    
  }

  svg.svg-inline--fa.fa-arrow-right.fa-w-14 {
    font-size: 2.5em;
    color: #49b7e9;
    margin-top: 3em;
    text-shadow: 3px 3px 4px #52585b77;
}

@media(min-width:677px){
    #searchForm{
        width:321px !important;
    }
}