/* Here is a root css stylesheet to use for quickly made front
   type: all in one style sheet
   creation date: 16-11-2020
   last_update: 16-11-2020  
   version: 1.0.0 

   Section we have:

*/

/*                                      *\
  **************************************                             
   ********* GLOBAL SETTINGS ********* 
  **************************************                                  
\*                                      */    

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a{
  text-decoration: none;
}

img{
  width: 100%;
  height: 100%;
}



/*                                      *\
  **************************************                             
   ********* PADDING SETTINGS ********* 
  **************************************                                  
\*                                      */    

.main-padding{
  padding: 0% 5%;
}

.padding-1{
  padding: 1%;
}

.padding-2{
  padding: 2%;
}

.padding-3{
  padding: 3%;
}


.padding-5{
  padding: 5%;
}

.padding-6{
  padding: 6%;
}

.padding-10{
  padding: 10%;
}

.padding-1-2{
  padding: 1% 2%;
}

.padding-2-5{
  padding: 2% 5%;
}

.padding-top-1{
  padding-top: 1%;
}


/*                                      *\
  **************************************                             
   ********* MARIGN SETTINGS ********* 
  **************************************                                  
\*                                      */    

.margin-1{
  margin: 1%;
}

.margin-2{
  margin: 2%;
}

.margin-3{
  margin: 3%;
}

.margin-4{
  margin: 4%;
}

.margin-bt-1{
  margin-bottom: 1%;
}

.margin-bt-2{
  margin-bottom: 2%;
}

.margin-bt-3{
  margin-bottom: 3%;
}

.margin-bt-4{
  margin-bottom: 4%;
}

.margin-bt-5{
  margin-bottom: 5%;
}

.margin-bt-6{
  margin-bottom: 6%;
}

.margin-bt-7{
  margin-bottom: 7%;
}

.margin-bt-8{
  margin-bottom: 8%;
}

.margin-bt-9{
  margin-bottom: 9%;
}

.margin-bt-10{
  margin-bottom: 10%;
}

.margin-bt-30{
  margin-bottom: 30%;
}

.margin-bt-40{
  margin-bottom: 40%;
}

.margin-bt-50{
  margin-bottom: 50%;
}

/* Margin-left */
.margin-lf-1{
  margin-left: 1%;
}

.margin-lf-2{
  margin-left: 2%;
}

.margin-lf-3{
  margin-left: 3%;
}

.margin-lf-4{
  margin-left: 4%;
}

.margin-lf-5{
  margin-left: 5%;
}

.margin-lf-6{
  margin-left: 6%;
}

.margin-lf-7{
  margin-left: 7%;
}

.margin-lf-8{
  margin-left: 8%;
}

.margin-lf-9{
  margin-left: 9%;
}

.margin-lf-10{
  margin-left: 10%;
}

/* MARGIN RIGTH */

.margin-rg-1{
  margin-bottom: 1%;
}

.margin-rg-2{
  margin-right: 2%;
}

.margin-rg-3{
  margin-right: 3%;
}

.margin-rg-4{
  margin-right: 4%;
}

.margin-rg-5{
  margin-right: 5%;
}

.margin-rg-6{
  margin-right: 6%;
}

.margin-rg-7{
  margin-right: 7%;
}

.margin-rg-8{
  margin-right: 8%;
}

.margin-rg-9{
  margin-right: 9%;
}

.margin-rg-10{
  margin-right: 10%;
}


/* MARGIN TOP */

.margin-tp-1{
  margin-top: 1%;
}

.margin-tp-2{
  margin-top: 2%;
}

.margin-tp-3{
  margin-top: 3%;
}

.margin-tp-4{
  margin-top: 4%;
}

.margin-tp-5{
  margin-top: 5%;
}

.margin-tp-6{
  margin-top: 6%;
}

.margin-tp-7{
  margin-top: 7%;
}

.margin-tp-8{
  margin-top: 8%;
}

.margin-tp-9{
  margin-top: 9%;
}

.margin-tp-10{
  margin-top: 10%;
}

.margin-tp-12{
  margin-top: 12%;
}

.margin-tp-14{
  margin-top: 14%;
}

.margin-tp-15{
  margin-top: 15%;
}

/*                                      *\
  **************************************                             
   ********* width SETTINGS ********* 
  **************************************                                  
\*                                      */    

  .width-20{
    width: 20%;
  }

  .width-25{
    width: 25%;
  }

  .width-30{
    width: 30%;
  }

  .width-33{
    width: 33%;
  }

  .width-35{
    width: 35%;
  }

  .width-40{
    width: 40%;
  }

  .width-45{
    width: 45%;
  }

  .width-50{
    width: 50%;
  }

  .width-55{
    width: 55%;
  }

  .width-60{
    width: 60%;
  }

  .width-65{
    width: 65%;
  }

  .width-70{
    width: 70%;
  }

  .width-75{
    width: 75%;
  }

  .width-80{
    width: 80%;
  }

  .width-85{
    width: 85%;
  }
  
  .width-90{
    width: 90%;
  }

  .width-95{
    width: 95%;
  }

  .width-100{
    width: 100%;
  }









/*                                      *\
  **************************************                             
   ********* BOX-SHADOW SETTINGS ****** 
  **************************************                                  
\*                                      */    

/* linear box-shadow */
.box-shadow{
  box-shadow: 0px 1px 10px #56565629;
}










/*                                      *\
  **************************************                             
   ********* BORDER SETTINGS ****** 
  **************************************                                  
\*                                      */  

/* Border-radius setting */

.bd-rd-5{
  border-radius: 5px;
}

.bd-rd-20{
  border-radius: 20px;
}

.bd-rd-25{
  border-radius: 25px;
}

.bd-rd-50{
  border-radius: 50%;
}



/* Border left settings */

.bd-lf-5{
  border-left: 0.260vw solid black ;
  padding-left: 2%;
}




/*                                      *\
  **************************************                             
   ********* COLORS SETTINGS ********* 
  **************************************                                  
\*                                      */    


/*  ********* POLICE COLORS SETTINGS ********* */


.dark-blue{
  color: #0C3181; /*rgba(3, 7, 30, 0)*/  
}

.yellow{
  color: #E9C00B;  /*rgba(233, 192, 11, 1);*/
}

.blue{
  color :#007cc3 /*(0, 124, 195, 0)*/
}

.dark-brown{
  color:  #370617; /*rgba(55, 6, 23, 0)*/
}

.brown{
  color: #6A040F; /*rgba(106, 4, 15, 0)*/
}

.orange{
  color: #F99746; /*rgba(232, 93, 4, 0)*/ 
}

.pale-orange{
  color: #fde0c7; /* rgba(253, 224, 199, 1)*/
}

.black{
  color: #000; /* rgba(0, 0, 0, 0)*/
}

.white{
  color: #fff; /* rgba(255, 255, 255, 0)*/
}

.gray{
  color:  #333; /*rgba(51, 51, 51, 0) */;
}

.gray-5{
  color: #555; /* rgba(85, 85, 85, 1)*/
}

.gray-8{
  color: #888;  /* rgb(136, 136, 136, 1)*/
}

.gray-e{
  color: #eee; /* rgb(238, 238, 238, 1)*/
}

.green{
  color: #29CB97;  /* rgba(41, 203, 151,1) */
}

.red{
  color: #cb2929; /* rgba(203, 41, 41, 1) */
}

/*  ********* BACKGROUND COLORS SETTINGS ********* */

.bg-dark-blue{
  background-color: #03071E; /*rgba(3, 7, 30, 0)*/
}

.bg-yellow{
  background-color: #E9C00B;  /*rgba(233, 192, 11, 1);*/
}

.bg-blue{
  background-color: #007cc3; /*rgba(0, 124, 195, 0)*/
}
.bg-dark-brown{
  background-color: #370617; /*rgba(55, 6, 23, 0)*/
}

.bg-brown{
  background-color: #6A040F; /*rgba(106, 4, 15, 0)*/
}

.bg-orange{
  background-color: #F99746; /*rgba(232, 93, 4, 0)*/
}

.bg-pale-orange{
  background-color: #fde0c7; /* rgba(253, 224, 199, 1)*/;
}
.bg-black{
  background-color: #0000; /*rgba(0, 0, 0, 0)*/
}

.bg-white{
  background-color: #FFF; /*rgba(255, 255, 255, 0)*/
}

.bg-gray-3{
  background-color: #333; /*rgba(51, 51, 51, 0) */
}

.bg-gray-5{
  background-color:  #555; /* rgba(85, 85, 85, 1)*/;
}

.bg-gray-8{
  background-color: #888;  /* rgb(136, 136, 136, 1)*/;
}

.bg-gray-e{
  background-color: #eee; /* rgba(238, 238, 238, 1)*/
}

.bg-green{
  background-color: #29CB97;  /* rgba(41, 203, 151,1) */
}

.bg-red{
  background-color: #cb2929; /* rgba(203, 41, 41, 1) */
}

/*  ********* BORDER COLORS SETTINGS ********* */



.bd-dark-blue, .bd-blue, .bd-dark-brown, .bd-brown,
.bd-orange, .bd-black, .bd-white, .bd-pale-orange, 
.bd-gray-3 ,.bd-gray-5, .bd-gray-8, .bd-gray-e, .bd-green,.bd-red, .bd-yellow
{
  border-style: solid;
  border-radius: 5px;
}

.bd-dark-blue{
  border-color: #03071E; /*rgba(3, 7, 30, 0)*/ 
}

.bd-blue{
  border-color:  #007cc3; /*rgba(0, 124, 195, 0)*/
}

.bd-yellow{
  border-color: #E9C00B;  /*rgba(233, 192, 11, 1);*/
}


.bd-dark-brown{
  border-color: #370617; /*rgba(55, 6, 23, 0)*/
}

.bd-brown{
  border-color: #6A040F; /*rgba(106, 4, 15, 0)*/
}

.bd-orange{
  border-color: #F99746; /*rgba(232, 93, 4, 0)*/
 
}

.bd-black{
  border-color: #0000; /*rgba(0, 0, 0, 0)*/ 
}

.bd-pale-orange{
  border-color: #fde0c7; /* rgba(253, 224, 199, 1)*/
}

.bd-white{
  border-color: #FFF; /*rgba(255, 255, 255, 0)*/ 
}

.bd-gray-3{
border-color:  #333; /*rgba(51, 51, 51, 0) */;
}

.bd-gray-5{
  border-color:  #555; /* rgba(85, 85, 85, 1)*/
}

.bd-gray-8{
  border-color: #888;  /* rgba(136, 136, 136, 1)*/
}

.bd-gray-e{
  border-color: #eee; /* rgba(238, 238, 238, 1)*/
}

.bd-green{
  border-color: #29CB97;  /* rgba(41, 203, 151,1) */
}

.bd-red{
  border-color: #cb2929; /* rgba(203, 41, 41, 1) */
}







/*                                      *\
  **************************************                             
   ********* FONTS SETTINGS ********* 
  **************************************                                  
\*                                      */    

/* gotham */
@font-face{
  font-family: gotham;
  src: url(../fonts/Gotham-Font/GothamBook.ttf);
}

@font-face{
  font-family: gotham-lt;
  src: url(../fonts/Gotham-Font/Gotham-Light.otf);
}

@font-face{
  font-family: gotham-md;
  src: url(../fonts/Gotham-Font/GothamMedium.ttf);
}

@font-face{
  font-family: gotham-bd;
  src: url(../fonts/Gotham-Font/Gotham-Bold.otf);
}

/* Segeo */
@font-face{
  font-family: segoe;
  src: url(../fonts/segoe/segoeprb.ttf);
}

/* Raleway */
@font-face{
  font-family: raleway;
  src: url(../fonts/Raleway/Raleway-Regular.ttf);
}

@font-face{
  font-family: raleway-lt;
  src: url(../fonts/Raleway/Raleway-Light.ttf);
}

@font-face{
  font-family: raleway-md;
  src: url(../fonts/Raleway/Raleway-Medium.ttf);
}

@font-face{
  font-family: raleway-sb;
  src: url(../fonts/Raleway/Raleway-SemiBold.ttf);
}

@font-face{
  font-family: raleway-bd;
  src: url(../fonts/Raleway/Raleway-Bold.ttf);
}


/* class Raleway*/

.ft-fm-raleway{
  font-family: raleway;
}

.ft-fm-raleway-lt{
  font-family: raleway-lt;
}

.ft-fm-raleway-md{
  font-family: raleway-md;
}

.ft-fm-raleway-sb{
  font-family: raleway-sb;
}

.ft-fm-raleway-bd{
  font-family: raleway-bd;
}

/* class Segeo*/

.ft-fm-segoe{
  font-family: segoe;
}

/* class gotham*/

.gotham{
  font-family: gotham;
}

.gotham-lt{
  font-family: gotham-lt;
}

.gotham-md{
  font-family: gotham-md;
}

.gotham-bd{
  font-family: gotham-bd;
}





/* Font size setting */

.ft-sz-20{
  font-size: 1.042vw;
}

.ft-sz-23{
  font-size:1.198vw;
}

.ft-sz-25{
  font-size: 1.302vw;
}

.ft-sz-30{
  font-size: 1.563vw;
}

.ft-sz-35{
  font-size: 1.823vw;
}

.ft-sz-40{
  font-size: 2.083vw;
}

.ft-sz-50{
  font-size: 2.604vw;
}

.ft-sz-51{
  font-size: 2.656vw;
}

.ft-sz-60{
  font-size:  3.125vw;
}

.ft-sz-65{
  font-size: 3.385vw;
}

.ft-sz-70{
  font-size: 3.646vw;
}

/* Font weight setting */

.font-weight-500{
  font-weight: 500;
}


/* TEXT ALIGN PORPERTY */

.txt-align-lf{
  text-align: left;
}

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

.txt-align-jt{
  text-align: justify;
}

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


/* Line height styling */


.line-hg-1_2{
  line-height: 1.2;
}

.line-hg-1_3{
  line-height: 1.3;
}

.line-hg-1_4{
  line-height: 1.4;
}

.line-hg-1_5{
  line-height: 1.5;
}


.line-hg-2{
  line-height: 2;
}


.line-hg-3_1{
  line-height: 3.1;
} 


/* What follows is pixel value convert into vw*/
.line-hg-29{
  line-height: 1.510vw;
}

.line-hg-30{
  line-height: 1.563vw;
}

.line-hg-35{
  line-height: 1.823vw;
}

.line-hg-51{
  line-height: 2.656vw;
}





/*                                      *\
  **************************************                             
   ********* FLEX SETTINGS ********* 
  **************************************                                  
\*                                      */   

/* Flex diplay setting */
.flex-container-row{
  display: flex;
}

.flex-container-row-rev{
  display: flex;
  flex-direction: row-reverse;
}

.flex-container-column{
  display: flex;
  flex-direction: column;
}

.flex-container-col-rev{
  display: flex;
  flex-direction: column-reverse;
}


/* Flex-Porperty seeting for row display*/

/* 
    Talking about main axis and cross axis as we are in row templating
    main-axis is horizontal so:
      justify-content -» align things horizontally
      align-items -» align things vertically
      align-content -» specifie the line-height inside the container  
*/

/* JUSTIFY CONTENT PROPERTY */

.jt-content-flex-st{
  justify-content: flex-start;
}

.jt-content-flex-end{
  justify-content: flex-end;
}

.jt-content-ct{
  justify-content: center;
}

.jt-content-sp-bt{
  justify-content: space-between;
}

.jt-content-sp-around{
  justify-content: space-around;
}


/* ALIGN ITEMS PROPERTY */

.align-it-sart{
  align-items: flex-start;
}

.align-it-end{
  align-items: flex-end;
}

.align-it-ct{
  align-items: center;
}

.align-it-baseline{
  align-items: baseline;
}

.align-it-stretch{
  align-items: stretch;
}








/*                                      *\
  **************************************                             
   ********* SIZING-BOX SETTINGS ****** 
  **************************************                                  
\*                                      */   

.square-box{
  width: 13.021vw;
  height: 13.021vh;  
}

.rectangle-box{
  width: 13.021vw;
  height: 10vh;
}



/*                                      *\
  **************************************                             
   ********* CURSOR SETTINGS ****** 
  **************************************                                  
\*                                      */   

.pointer{
  cursor: pointer;
}

.select-none{
  user-select: none;
}


/*                                      *\
  **************************************                             
   ********* UNDERLINE SETTINGS ****** 
  **************************************                                  
\*                                      */   


.underline{
  text-decoration: underline;
}