/* ! Reset 
---------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
   --font-raleway:'Raleway', Arial, Helvetica, sans-serif;
}




body,
html {
   font-family:var(--font-raleway);
   font-size: 16px;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   color: var(--color-text);
}

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

h1,h2,h3,h4,h5,h6, p, ol, ul{margin:0; padding: 0;}

ol,ul{list-style-type: none;}

img{height: auto;}

a{text-decoration:none}


.button { 
  font-size: 1rem; text-transform: uppercase; background: #333; color:#fff;
  text-decoration: none;padding: 14px 25px; display: inline-block;
  border-radius: 4px; font-weight: 700;
}
.button:hover{ background: #444; }



/* ! Title System
-----------------------------------------------------*/
h1{font-size: 4rem;}
h2{font-size: 3rem;}
h3{font-size: 2rem;}
h4{font-size: 1rem;}
h5{font-size: 0.8rem;}
h6{font-size: 0.6rem;}


/* ! Helpers
---------------------------------------------------------*/

/* Images */
.img-res{width:100%; height: auto;}

/* Typography */
.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.text-justify{text-align: justify;}
.text-uppercase{text-transform: uppercase;}
.text-bold{font-weight: 700;}
.text-light{font-weight: 300;}
.textsize-0 {font-size: 5rem;margin-bottom:0.3rem}
.textsize-1 {font-size: 3.5rem;margin-bottom:0.5rem}
.textsize-2 {font-size: 2.4rem;margin-bottom:1rem}
.textsize-3 {font-size: 1.8rem;margin-bottom:1rem}
.textsize-4 {font-size: 1rem;margin-bottom:1rem; line-height: 1.5;}
.textsmall-0{font-size: 0.9rem;line-height: 1.1rem;}
.textsmall-1{font-size: 0.8rem;line-height: 1.2rem;}
.textsmall-2{font-size: 0.7rem;line-height: 1rem;}
.textsmall-3{font-size: 0.6rem;line-height: 0.8rem;}
.textsmall-3{font-size: 0.5rem;line-height: 0.7rem;}


@media (max-width: 768px) {
   .text-right{text-align: center;}
   .text-left{text-align: center;}

}

/* Display */
.hide{display: none;}
.show{display:block}
.align-y-center{display:flex;justify-content:center;align-items: center}
.flex{width: 100%;display: flex;flex-wrap: wrap;}
.shadow{box-shadow: 2px 5px 10px #DDD;}
.visible-desktop{display: block;}
@media(max-width: 1024px){.visible-desktop{display: none;}}
.visible-mobile{display: none;}
@media(max-width: 1024px){.visible-desktop{display: block;}}

/* Animation*/
.animate {-webkit-transition: all 0.3s; -moz-transition: all 0.3; transition: all 0.3s;}

/* Border Radius */

.radius-5{border-radius: 5px;}
.radius-10{border-radius: 10px;}
.radius-15{border-radius: 15px;}
.radius-20{border-radius: 20px;}
.radius-25{border-radius: 25px;}
.radius-30{border-radius: 30px;}
.radius-40{border-radius: 40px;}
.radius-50{border-radius: 50px;}

/* Various Elements */
.text-gradient{
   background: #FFF;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   -webkit-box-decoration-break:clone;
   box-decoration-break: clone;
   background-image: linear-gradient(129deg,#dc79ff,#256bfa);
   }

.z-index-top{z-index: 9999; position: relative;}

.video-res{width: 100%; height: 100%; overflow: hidden;}
.video-res video{width: 100%; height: 100%; object-fit: cover;}

.spacer{height: 20vh;}
.border{border:1px solid red;}
.divider{width:100%;border-bottom:1px solid #DDD;margin:30px 0;}

/* Padding */
.p-0{padding:0px!important}
.p-5{padding: 5px;}
.p-10{padding: 10px;}
.p-15{padding: 15px;}
.p-20{padding: 20px;}
.p-30{padding: 30px;}
.p-40{padding: 40px;}
.p-50{padding: 50px;}
.p-60{padding: 60px;}
.p-80{padding: 80px;}
.p-100{padding: 100px;}

.pb-10{padding-bottom: 10px;}
.pb-20{padding-bottom: 20px;}
.pb-30{padding-bottom: 30px;}
.pb-40{padding-bottom: 40px;}
.pb-60{padding-bottom: 60px;}
.pb-80{padding-bottom: 80px;}
.pb-100{padding-bottom: 100px;}

.pt-10{padding-top: 10px;}
.pt-20{padding-top: 20px;}
.pt-30{padding-top: 30px;}
.pt-40{padding-top: 40px;}
.pt-60{padding-top: 60px;}
.pt-80{padding-top: 80px;}
.pt-100{padding-top: 100px;}

.pl-10{padding-left: 10px;}
.pl-20{padding-left: 20px;}
.pl-30{padding-left: 30px;}
.pl-40{padding-left: 40px;}
.pl-60{padding-left: 60px;}
.pl-80{padding-left: 80px;}
.pl-100{padding-left: 100px;}

.pr-10{padding-right: 10px;}
.pr-20{padding-right: 20px;}
.pr-30{padding-right: 30px;}
.pr-40{padding-right: 40px;}
.pr-60{padding-right: 60px;}
.pr-80{padding-right: 80px;}
.pr-100{padding-right: 100px;}

.py-10{padding:10px 0}
.py-20{padding:20px 0}
.py-30{padding:30px 0}
.py-40{padding:40px 0}
.py-60{padding:60px 0}
.py-80{padding:80px 0}
.py-100{padding:100px 0}

.px-10{padding:0 10px}
.px-20{padding:0 20px}
.px-30{padding:0 30px}
.px-40{padding:0 40px}
.px-60{padding:0 60px}
.px-80{padding:0 80px}
.px-100{padding:0 100px}

/* Margin */
.m-0{margin:0px!important}
.mb-10{margin-bottom: 10px;}
.mb-20{margin-bottom: 20px;}
.mb-30{margin-bottom: 30px;}
.mb-40{margin-bottom: 40px;}
.mb-60{margin-bottom: 60px;}
.mb-80{margin-bottom: 80px;}
.mb-100{margin-bottom: 100px;}

.mt-10{margin-top: 10px;}
.mt-20{margin-top: 20px;}
.mt-30{margin-top: 30px;}
.mt-40{margin-top: 40px;}
.mt-60{margin-top: 60px;}
.mt-80{margin-top: 80px;}
.mt-100{margin-top: 100px;}

.ml-10{margin-left: 10px;}
.ml-20{margin-left: 20px;}
.ml-30{margin-left: 30px;}
.ml-40{margin-left: 40px;}
.ml-60{margin-left: 60px;}
.ml-80{margin-left: 80px;}
.ml-100{margin-left: 100px;}

.mr-10{margin-right: 10px;}
.mr-20{margin-right: 20px;}
.mr-30{margin-right: 30px;}
.mr-40{margin-right: 40px;}
.mr-60{margin-right: 60px;}
.mr-80{margin-right: 80px;}
.mr-100{margin-right: 100px;}

.my-10{margin:10px 0}
.my-20{margin:20px 0}
.my-30{margin:30px 0}
.my-40{margin:40px 0}
.my-60{margin:60px 0}
.my-80{margin:80px 0}
.my-100{margin:100px 0}

.mx-10{margin:0 10px}
.mx-20{margin:0 20px}
.mx-30{margin:0 30px}
.mx-40{margin:0 40px}
.mx-60{margin:0 60px}
.mx-80{margin:0 80px}
.mx-100{margin:0 100px}