/*===color-theme
===================*/
:root{

  --primary-color:#ff1300; 
  --primary_tr: 255, 19, 0;

  --secondary-color:#31aee3; 
  --secondary_tr: 49, 174, 227;

  --black: #363d46;
  --black_tr: 54,61,70;

  --white: #F0F0F0;
  --white_tr: 240,240,240;

  --whiteFull: #fff;
  --whiteFull_tr: 255,255,255;

  --blackFull: #111;
  --blackFull_tr: 17,17,17;

  --brown:#c5996c; 
  --brown_tr: 204, 153, 102;

  --darkbrown: #7e6458;
  --darkbrown_tr: 126,100,88;

  --green: #44b954;
  --green_tr: 68, 185, 84;

  --darkgreen: #006837;
  --darkgreen_tr: 0, 104, 55;

  --yeloow: #FADE85;
  --yeloow_tr: 250, 222, 133;

  --orange: #f89b22;
  --orange_tr: 248, 155, 34;

  --blue: #639eb0;
  --blue_tr: 99, 158, 176;

  --darkblue: #0a7ea3;
  --darkblue_tr: 10, 126, 163;

}


/*===background-theme
=========================*/
.bg_primary,
.bg_secondary,
.bg_three,
.bgorange,
.bggreen,
.bgyeloow,
.bgblue,
.bgred,
.bgwhite,
.bgwhiteFull,
.bgblack,
.bgblackFull {
  box-sizing: border-box;
  position: relative;
}

.bg_primary{
  background: rgba(var(--primary_tr), 1); 
  color: rgba(var(--whiteFull_tr), 1);
}
.bg_secondary{
  background: rgba(var(--secondary_tr), 1); 
  color: rgba(var(--whiteFull_tr), 1);
}
.bg_three{
  background: rgba(var(--three_tr), 1); 
  color: rgba(var(--whiteFull_tr), 1);
}
.bgwhite {
  background: rgba(var(--white_tr), 1); 
  color: rgba(var(--black_tr), 1);
}
.bgwhiteFull {
  background: rgba(var(--whiteFull_tr), 1); 
  color: rgba(var(--black_tr), 1);
}
.bgblack {
  background: rgba(var(--black_tr), 1); 
  color: rgba(var(--white_tr), 1);
}
.bgblackFull {
  background: rgba(var(--blackFull_tr), 1); 
  color: rgba(var(--white_tr), 1);
}

.bgorange{
  background: rgba(var(--orange_tr), 1); 
  color: rgba(var(--whiteFull_tr), 1);
}
.bggreen{
  background: rgba(var(--green_tr), 1); 
  color: rgba(var(--whiteFull_tr), 1);
}
.bgyeloow{
  background: rgba(var(--yeloow_tr), 1); 
  color: rgba(var(--whiteFull_tr), 1);
}
.bgred{
  background: rgba(var(--red_tr), 1); 
  color: rgba(var(--whiteFull_tr), 1);
}
.bgblue{
  background: rgba(var(--blue_tr), 1); 
  color: rgba(var(--whiteFull_tr), 1);
}

.bg_primary b, 
.bg_primary strong, 
.bg_primary h1, 
.bg_primary h2, 
.bg_primary cite,
.bg_primary p,
.bg_primary a {
  color: rgba(var(--whiteFull_tr), 1);
}
.bg_secondary b, 
.bg_secondary strong, 
.bg_secondary h1, 
.bg_secondary h2, 
.bg_secondary cite,
.bg_secondary p,
.bg_secondary a {
  color: rgba(var(--whiteFull_tr), 1);
}
.bg_three,
.bg_three b, 
.bg_three strong, 
.bg_three h1, 
.bg_three h2, 
.bg_three cite {
  color: rgba(var(--whiteFull_tr), 1);
}
.bgblackFull a,
.bgblackFull b, 
.bgblackFull strong, 
.bgblackFull h1, 
.bgblackFull h2, 
.bgblackFull cite,
.bgblackFull p,
.bgblackFull a {
  color: rgba(var(--white_tr), 1);
}
.bgblack a,
.bgblack b, 
.bgblack strong, 
.bgblack h1, 
.bgblack h2, 
.bgblack cite, 
.bgblack p, 
.bgblack a,
.bgblack header{
  color: rgba(var(--white_tr), 1);
}
.bgblack .title sup {
  color: rgba(var(--white_tr), .3);
}
.bgblack .title sup::before{
  background: rgba(var(--whiteFull_tr), .3);
}

.bglinear{
  background: linear-gradient(90deg, 
  rgba(var(--primary_tr),1) 25%,
  rgba(var(--secondary_tr),1) 25%,
  rgba(var(--secondary_tr),1) 50%,  
  rgba(var(--primary_tr),1) 50%,
  rgba(var(--primary_tr),1) 75%,
  rgba(var(--secondary_tr),1) 75%);
}
.bglinearBef::before,
.bglinearAft::after{
  content: "";
  height: 10px;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 9;
  background: linear-gradient(90deg, 
  rgba(var(--primary_tr),1) 25%,
  rgba(var(--secondary_tr),1) 25%,
  rgba(var(--secondary_tr),1) 50%,  
  rgba(var(--primary_tr),1) 50%,
  rgba(var(--primary_tr),1) 75%,
  rgba(var(--secondary_tr),1) 75%);
}
.bglinearAft::after{
  top: auto;
  bottom: 0;
}