/*Overflow*/
.over-h{
  overflow: hidden;
}
.over-x{
  overflow-x: hidden;
}
.over-y{
  overflow-y: hidden;
}

/*text*/
.uppercase{
  text-transform: uppercase;
}

.unset{
  text-transform: unset;
}

.t-center{
  text-align: center;
}

.t-1em{
  font-size: 1em;
}

.t-3em{
  font-size: 3em;
}

.t-5em{
  font-size: 5em;
}

.center-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/*text color*/
.c-white{
 color: white;
}

.c-black{
  color: black;
}

.c-red{
    color: #EE1D23;
}

/*background color*/
.b-white {
    background-color: white;
}


/*FLEX BOX*/
.flex{
  display: flex;
}

.a-c{
  align-items: center; 
}

.j-c-c{
  justify-content: center;
}
.j-c-a{
justify-content: space-around;
}
.j-c-s-b{
justify-content: space-between;
}

.j-c-s-e{
  justify-content: space-evenly;
}

.j-c-f-s{
    justify-content: flex-start;
}

.j-c-f-e{
    justify-content: flex-end;
}

.f-d-c{
  flex-direction: column;
}

.f-d-c-r{
  flex-direction: column-reverse;
}

.f-w-w{
  flex-wrap: wrap;
}

/*MARGINS*/

.m-auto{
  margin:0 auto;
}

.mg-50{
    margin: 50px auto;
}

.mg-100{
    margin: 100px auto;
}


/*PADDING*/

.p-0{
  padding:0px !important;
}

.pd-20{
  padding: 20px;
}

.pd-100{
  margin: 100px 15px !important;
}

.pd-20-10 {
    padding: 20px 10px;
}

.pd-10{
  padding: 10px;
}
.pd-t-20{
  padding-top: 20px; 
}
.pd-b-20{
  padding-bottom: 20px; 
}
.pd-t-30{
  padding-top: 30px; 
}
.pd-b-30{
  padding-bottom: 30px; 
}
.pd-tb-20{
  padding: 20px 0px; 
}
.pd-tb-50{
  padding: 50px 0px; 
}

.pb-15{
    padding: 0px 0px 15px 0px;
}


/*TEXT ALIGN*/
.left-align {
  text-align: left;
}

.right-align {
  text-align: right;
}

.center-align {
  text-align: center;
}

.w-20{
  width: 20%;
  margin: 0 auto;
}

.w-30{
  width: 30%;
  margin: 0 auto;
}

.w-45{
  width: 45%;
  margin: 0 auto;
}

.w-50{
  width: 50%;
  margin: 0 auto;
}

.w-60{
  width: 100%;
  margin: 0 auto;
}

@media (max-width:600px){
  .w-60 {
    width: 100%;
    }
}

.w-70{
  width: 70%;
  margin: 0 auto;
}
.w-80{
  width: 80%;
  margin: 0 auto;
}

.w-85{
  width: 85%;
  margin: 0 auto;
}

.w-100{
  width: 100%;
  margin: 0 auto;
}

.w-90{
  width: 90%;
  margin: 0 auto;
}

.hide-desktop{
  display: none;
}

.show-desktop{
  display: block;
}

.h-200 {
    height: 200px;
    max-height: 200px;
}

.h-300 {
    height: 300px;
    max-height: 300px;
}

.h-400 {
    height: 400px;
    max-height: 400px;
}

.p-r{
    position: relative;
}

.p-a{
    position: absolute;
}

.shadow-1{
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

/* 12dp elevation modified*/
.shadow-2{
  -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
          box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}

/* 16dp elevation */
.shadow-3{
  -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
          box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
}

/* 24dp elevation */
.shadow-4{
  -webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
          box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
}