:root
{
   /* CSS HEX */
   --blood-red: #670101ff;
   --cinereous: #9d8683ff;
   --black-chocolate: #181914ff;
   --silver-chalice: #b4adaaff;
   --black-chocolate-2: #1b1b17ff;
   --dark-sienna: #270000ff;
   --black-coffee: #3f312fff;
   
   /* CSS HSL */
   --blood-red: hsla(0, 98%, 20%, 1);
   --cinereous: hsla(7, 12%, 56%, 1);
   --black-chocolate: hsla(72, 11%, 9%, 1);
   --silver-chalice: hsla(18, 6%, 69%, 1);
   --black-chocolate-2: hsla(60, 8%, 10%, 1);
   --dark-sienna: hsla(0, 100%, 8%, 1);
   --black-coffee: hsla(8, 15%, 22%, 1);
}

@font-face {
   font-family: 'Bleeding Cowboys';
   src: url('/asset/font/BleedingCowboys.woff2') format('woff2'),
      url('/asset/font/BleedingCowboys.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}



html
{
   /* min-height: 100%; */
}

body
{
   background-color: #000000;
   background: radial-gradient( #da0000, #000000 );
   background-position: center;
   background-repeat: no-repeat;
   color: #ffffff;
   /* min-height: 100%; */
  height: fit-content;
}




.main__heading
{
   text-align: center;
   /* font-size: 2em; */
   font-family: Papyrus, 'Trade Winds', cursive;
   font-weight: bold;
   margin-bottom: 1em;
}

.main__section-dark
{
   background-color: rgba(0,0,0,0.6);
   padding: 1em;
   margin: 0.1em;
   border-radius: 0.5em;
   margin-bottom: 2em;
}

.main__section-light
{
   background-color: rgba( 255, 255, 255, 0.95);
   padding: 1em;
   border-radius: 0.5em;
   margin: 0.1em;
   margin-bottom: 2em;
   color: var( --black-chocolate );
}

.main__footer
{
   padding: 2em;
   border-radius: 0.5em;
   background-color: #000000;
}



.main__footer img
{
   width: 240px;
}

.main__footer-nav
{
   position: sticky;
   bottom: 0;
   left: 0;
   width: 100%;
   z-index: 999;
   background-color: #212529;
   /* height: 200px; */
}

.main__footer-nav-content
{
   padding: 0.5em;
}

.main__footer-nav-logo
{
   height: 60px;
}

.main__footer-nav .main__footer-nav-large a
{
   /* color: var( --cinereous ); */
   color: var( --silver-chalice );
}

.main__footer-nav .main__footer-nav-large a.active
{
   color: var( --silver-chalice );
   color: #ffffff;
}

.main__footer-nav .main__footer-nav-large a:hover
{
   color: #ffffff;
}


.main__footer-nav-large
{
   display: none;
}




.btn-primary
{
   border-color: var( --black-coffee );
   background-color: var( --silver-chalice );
   color: var( --black-chocolate ) !important;
}

.btn-primary:hover
{
   border-color: var( --black-coffee );
   background-color: var( --black-coffee );
   color: var( --silver-chalice ) !important;
}

.btn-facebook
{
   background-color: #4267B2;
   color: #ffffff;
}

.btn-facebook:hover
{
   background-color: #365899;
   color: #ffffff;
}

.btn-instagram
{
   background-color: #f09433;
   background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
   color: #ffffff;
}

.btn-instagram:hover
{
   background-color: #f09433;
   background: linear-gradient(45deg, #bc1888 0%, #cc2366 25%, #dc2743 50%, #dc2743 75%, #dc2743 100%); 
   color: #ffffff;
}

.btn-youtube
{
   background-color: #ffffff;
   color: #FF0000;
   border-color: #740000;
}

.btn-youtube:hover
{
   background-color: #740000;
   color: #ffffff;
   border-color: #740000;
}

.main__btn-social
{
   margin-right: 0.5em;
   margin-bottom: 0.5em;
}


.main__btn-social:last-child
{
   margin-right: 0;
}



.timeline
{
   position: relative;
}

.timeline::after {
   width: 1px;
   margin-left: -1px;
}

.timeline::after {
   background-color: var( --black-coffee );
}

.timeline::after {
   content: '';
   position: absolute;
   /* width: 6px; */
   top: 0;
   bottom: 0;
   left: 50%;
   /* margin-left: -3px; */
}

.timeline-items
{
   position: relative;
}

.timeline-item
{
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 1em;
}

.timeline-item-divider
{
   background-color: #ebebeb;
   height: inherit;
   width: 40px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}

.timeline-item-bullet
{
   top: 20px;
   width: 15px;
   height: 15px;
   left: calc(50% - 15px/2);
   border-style: solid;
   border-top-width: 4px;
   border-right-width: 4px;
   border-bottom-width: 4px;
   border-left-width: 4px;
   border-color: var( --blood-red );
   border-radius: 52px;
   -webkit-border-radius: 52px;
   -moz-border-radius: 52px;
   
   position: absolute;
   text-align: center;
   background-color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
   z-index: 1;
}

.timeline-item-content
{
   overflow: hidden;
   /* background-color: #cccccc; */
   width: 50%;
}

.timeline-item-left
{
   text-align: right;
}

.timeline-item-content-time
{
   font-weight: bold;
}

.timeline-item-content-title
{
   margin-bottom: 0.5em;
}

/* .main__footer-nav-small
{
   display: none;
} */


   .main__footer-nav-content-left
   {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      /* margin-bottom: 0.5em; */
   }

   /* .main__footer-nav-content-left > *
   {
      margin-right: 1em;
   } */

   .main__footer-nav-content-left > *:last-child
   {
      margin-right: 0;
   }

   /* .main__footer-nav-content
   {
      padding: 0.5em;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
   } */
/* Small only */
@media screen and (max-width: 515px)
{

   .main__footer-nav-content
   {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
   
   .main__footer-nav-large
   {
      display: none;
   }
}


@media screen and (min-width: 516px)
{
   .main__footer-nav-content-left
   {
      margin-bottom: 0.5em;
   }
   
   .main__footer-nav-content-left > *
   {
      margin-right: 1em;
   }

   .main__footer-nav-content-left > *:last-child
   {
      margin-right: 0;
   }
   
   .main__footer-nav-small
   {
      display: none;
   }
   .main__footer-nav-large
   {
      display: block;
   }
}

@media screen and (min-width: 869px)
{
   .main__footer-nav-content-left
   {
      /* display: flex;
      justify-content: flex-start;
      align-items: center; */
      margin-bottom: 0;
   }

   .main__footer-nav-content
   {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
}

/* @media screen and (min-width: 524px) and (max-width: 866px)
{
   .main__nav .justify-content-start
   {
      margin-bottom: 1em;
   }
} */

/* Medium and up */
@media screen and (min-width: 768px)
{
   .main__footer
   {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
   }
}

/* Medium only */
/*@media screen and (min-width: 768px) and (max-width: 991px) {}*/

/* Large and up */
/*@media screen and (min-width: 992px) {}*/

/* Large only */
/*@media screen and (min-width: 992px) and (max-width: 1199px) {}*/

/* X-Large and up */
/*@media screen and (min-width: 1200px) {}*/