:root {
--blank:#222323;
--red:#e63c26;
--darkRed:#e53b26;
--insta: #e74145;
--gray: #3b3b3a;
--lightGray:#3b3b3aa1;
--white: #ffffff;
--dim:#f6f6f6;
--dimBack:#f5f5f5;
--darkBack:#3c3c3b; 
--blue: #004af7;
--seaWater: #2ab1e1;
--darkBlue: #1177b5;
}

.blueBg{
   background:var(--blue);
}

.darkblueBg{
   background:var(--darkBlue);
}

.seWaterBg{
   background:var(--seaWater);
}

.instaBg{
   background:var(--insta);
}

.white{
   color: var(--white);
}

.gray{
   color: var(--gray);
}

.lightGray{
   color: var(--lightGray);
}

.highLit{
   color:var(--darkRed);
}

.black{
   color:var(--blank);
}

.dim{
   color:var(--dim);
}

.redBg{   
   background: var(--red)
}

.whiteBg{   
   background: var(--white)
}

.dimBg{
   background:var(--dimBack);
}

.darkBg{
   background:var(--darkBack);
}

 * {
    outline: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }
 
 a{
    text-decoration: none;
    outline: none;
    /* color: #ffffff; */
 }
 
 a:hover {
    text-decoration: none;
 }
 
 .autoImg {
    width: 100%;
    height: auto;
    display: block;
 }

 img{
    width:100%;
    height:auto;
    display: block;
  }
  
 
 ul {
    padding: 0;
    margin: 0;
    list-style: none;
 }
 
 input {
    border: none;
    font-family: Helvetica;
    color: var(--formColor);
    background: var(--formBack);
 }
 input {
    border: none;
    font-family: Helvetica;
    color: var(--formColor);
    background: var(--formBack);
 }
 
 input::placeholder {
    color: var(--formColor);
    opacity: 0.4;
 }
 
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
 }
 
 /* Firefox */
 input[type=number] {
    -moz-appearance:textfield;
 }
 
 label {
    display: block;
    cursor: pointer;
 }
 
 .clear {
    clear: both;
    display: block;
 }

 .inlineBlk{
    display: inline-block;
   }


.verMid{
   vertical-align: baseline;
}

.floatLft{
    float: left;
}

.floatRgt{
    float:right;
}

.flex{
   display: flex;
}

.flexWrap{
   display: flex;
   flex-wrap:wrap;
}

.flexCenter{
   display: flex;
   align-items: center;
}

.flexDirectionRow {
    display: flex;
    flex-direction: row;
  }
  
  .flexDirectionCol {
    display: flex;
    flex-direction: column;
  }

  .flexWrapSpc{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
  
.spcBtwn {
    justify-content: space-between;
  }

section{
   width:100%;
   position: relative;
 }
 
 /*....... Font sizes ......*/

 .ltrSpc{
   letter-spacing:1px;
 }

.ltrSpc2{
   letter-spacing:2px;
 }
 

/*....... Font sizes ......*/
.vLargeTxt {
   font-size:92px !important;
}

.largeTxt {
   font-size:53px !important;
}

.largeTitle {
   font-size: 32px !important;
}

.subTitle {
   font-size: 30px !important;
}

.midTitle {
   font-size: 18px !important;
}

.mainNormal {
   font-size: 17px !important;
}

.smallTitle {
   font-size: 16px !important;
}

.subNormal {
   font-size: 22px !important;
}

.small {
   font-size: 20px !important;
}

.smallest {
   font-size: 13px !important;
}

.vSmall {
   font-size: 12px !important;
}

.extraSmall {
   font-size: 11px !important;
}
.superSmall {
   font-size: 9px !important;
}

.fntMedWgt{
   font-weight: 700;
}

.fntMedWgt6{
   font-weight:600;
}

.uppercase {
   text-transform: uppercase;
}

.leftAlign {
   text-align: left;
}

.centerAlign {
   text-align: center;
}

.rightAlign {
   text-align: right;
}

.lineHeight20{
   line-height: 20px;
}
/*....... positions  ......*/

.relative{
   position: relative;
}

.absolute{
   position: absolute;
}

.autoImg {
   width: 100%;
   height: auto;
   display: block;
}

ul {
   padding: 0;
   margin: 0;
   list-style: none;
}


/*....... Margin ......*/
.marginAuto {
   margin: 0px auto !important;
}

.marginTBLarge{
   margin-top:50px !important;
   margin-bottom:50px !important;
}

.marginLarge {
   margin-top:35px !important;
   margin-bottom:20px !important;
}

.marginTB {
   margin-top: 20px !important;
   margin-bottom: 20px !important;
}

.marginTBMid {
   margin-top: 15px !important;
   margin-bottom: 15px !important;
}

.marginTBSml {
   margin-top: 10px;
   margin-bottom: 10px;
}

.marginTop {
   margin-top:30px !important;
}

.marginTop {
   margin-top: 20px !important;
}

.marginTopMid {
   margin-top: 15px !important;
}

.marginTopSml {
   margin-top: 10px !important;
}

.marginTopSrt {
   margin-top: 5px !important;
}


.marginRgt60 {
   margin-right:60px;
}

.marginRgt {
   margin-right: 30px;
}

.marginRgtMid {
   margin-right: 20px !important;
}

.marginRgtSml {
   margin-right: 15px !important;
}

.marginRgtSrt {
   margin-right: 5px !important;
}

.marginTBSrt {
   margin-top: 5px !important;
   margin-bottom: 5px !important;
}


.marginBtm80 {
   margin-bottom:80px !important;
}

.marginBtm60 {
   margin-bottom:60px !important;
}

.marginBtm50 {
   margin-bottom:50px !important;
}

.marginBtm40 {
   margin-bottom: 40px !important;
}

.marginBtmSec {
   margin-bottom: 30px !important;
}

.marginBtm {
   margin-bottom: 20px !important;
}

.marginBtmMid {
   margin-bottom: 15px !important;
}

.marginBtmSml {
   margin-bottom: 10px !important;
}

.marginBtmSrt {
   margin-bottom: 32px !important;
}
.marginBtmVSrt {
   margin-bottom: 3px !important;
}

.marginLR {
   margin-left:20px !important;
   margin-right:20px !important;
}

/*....... Padding ......*/
.paddingFull {
   padding: 20px 30px !important;
}

.paddingFullMid {
   padding: 15px 30px !important;
}

.paddingFullSml {
   padding: 10px 30px !important;
}

.paddingFullSrt {
   padding:5px 10px !important;
}

.paddingTB100{
   padding-top:100px !important;
   padding-bottom:100px !important;
}

.paddingTBLarge{
   padding-top:50px !important;
   padding-bottom:50px !important;
}

.paddingTBMed{
   padding-top:30px !important;
   padding-bottom:30px !important;
}

.paddingTBSml {
   padding-left: 10px !important;
   padding-right: 10px !important;
}

.paddingTBSrt {
   padding-left: 5px !important;
   padding-right: 5px !important;
}


.paddingLR {
   padding-left:80px !important;
   padding-right:80px !important;
}

.paddingLRLarge{
   padding-left:50px !important;
   padding-right:50px !important;
}

.paddingLRMid {
   padding-left: 20px !important;
   padding-right: 20px !important;
}

.paddingLR15 {
   padding-left: 15px !important;
   padding-right: 15px !important;
}

.paddingLRSml {
   padding-left: 10px !important;
   padding-right: 10px !important;
}

.paddingLRSrt {
   padding-left: 5px !important;
   padding-right: 5px !important;
}

.paddingRgt {
   padding-right: 30px !important;
}

.paddingRgtMid {
   padding-right: 20px !important;
}

.paddingRgtSml {
   padding-right: 10px !important;
}

.paddingRgtSrt {
   padding-right: 10px !important;
}

.paddingLftBig {
   padding-left:80px !important;
}

.paddingLft {
   padding-left: 30px !important;
}

.paddingLftMid {
   padding-left: 20px !important;
}

.paddingLftSml {
   padding-left: 10px !important;
}

.paddingLftSrt {
   padding-left: 5px !important;
}

.paddingTop {
   padding-top: 20px !important;
}

.paddingTopMid {
   padding-top: 15px !important;
}

.paddingTopSml {
   padding-top: 10px !important;
}

.paddingTopSrt {
   padding-top: 5px !important;
}

.paddingBtm {
   padding-bottom: 20px !important;
}

.paddingBtmMid {
   padding-bottom: 15px !important;
}

.paddingBtmSml {
   padding-bottom: 10px !important;
}

.paddingBtmSrt {
   padding-bottom: 5px !important;
}

.paddingTB {
   padding-top: 20px !important;
   padding-bottom: 20px !important;
}

.paddingTBMid {
   padding-top: 15px !important;
   padding-bottom: 15px !important;
}

.paddingTBSml {
   padding-top: 10px !important;
   padding-bottom: 10px !important;
}

.paddingTBSrt {
   padding-top: 5px !important;
   padding-bottom: 5px !important;
}

.paddingBtmMore {
   padding-bottom: 60px !important;
}

.noPadding {
   padding: 0 !important;
}

/* ------ icon size ------- */

.icon120{
   width:120px !important;
}

.icon90{
   width:90px !important;
}

.icon80{
   width:80px !important;
}

.iconLarge{
   width:60px !important;
}

.icon50{
   width:50px !important;
}

.icon40{
   width:40px !important;
}

.icon30{
   width:30px !important;
}

.icon{
   width:40px !important;
}

.iconSmall{
   width:15px !important;
}

.icon img{
   width:100%;
   height: auto;
   display: block;
}

.smallCurv{
   border-radius:5px;
}

.list{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.button{
   width:150px;
   margin:0 auto;
   padding:10px 5px;
   text-align: center;
   border-radius:25px;
   color:var(--white);
   background:var(--darkRed);
   cursor: pointer;
 }