/* CSS Document */

html{overflow-x: hidden;}
html,body{font-family: 'Rubik', sans-serif; font-weight: 400; font-style: italic; color:#000;     }

:root{
	
	--bs-primary: #D9E021;
	--bs-primary-rgb: 217,224,33;
	--bs-secondary:#1F1F1F;
	--bs-secondary-rgb:31,31,31;
	--ubsi:#D9E021;
	--ubsi-hover:#9DA216;
	--gradient: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(218,26,53,1) 70%);
	--bs-primary-bg-subtle:#F3F5BB;
	--bs-primary-border-subtle:#D9E021;
	--bs-primary-text-emphasis:#3A3C08;
}


::-webkit-scrollbar {
  width: 8px; border-radius: 4px; height: 8px;
}
 
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px #ffff; border-radius: 4px;
}
 
::-webkit-scrollbar-thumb {
  background-color: var(--bs-primary); border-radius: 4px;
}

.sidebar-links::-webkit-scrollbar {
  width: 8px;  border-radius: 4px;
}

.sidebar-links::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px #ffff; border-radius: 4px;
}

.sidebar-links::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.03);    border-bottom: 1px solid rgba(0,0,0,.125); border-radius: 4px;
}

::selection {
  color: #000;
  background-color: var(--ubsi);
}


.bg-title{background:  url("../img/bg-title.jpg"); background-size: cover;}

.bg-gradient-mothers{background: var(--gradient)}
.bg-secondary-skew{position: relative}
.bg-secondary-skew:before{z-index: -1; position: absolute; content: ''; height: 100%; width: 100%; left: 0; top: 0; transform: skewY(-3deg); background:var(--bs-secondary)}

.bg-footer{z-index: -1; position: absolute; content: ''; height: 10px; width: 100%; left: 0; bottom: -5px; transform: skewY(-3deg); background:var(--ubsi)}

.bg-ubsi-skew{position: relative}
.bg-ubsi-skew:before{z-index: -1; position: absolute; content: ''; height: 100%; width: 100%; left: 0; top: 0; transform: skewY(-3deg); background:var(--ubsi)}

.bg-ubsi{position: relative;  background:var(--ubsi)}
.bg-secondary{position: relative;background:var(--bs-secondary)}

.btn-primary{
	position: relative;
    --bs-btn-color: #000;
    --bs-btn-bg: #D9E021;
    --bs-btn-border-color: #D9E021;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #9DA216;
    --bs-btn-hover-border-color: #9DA216;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #9DA216;
    --bs-btn-active-border-color: #9DA216;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;

}



.btn-ubsi{
	z-index: 0;
	position: relative;
    --bs-btn-color: #000;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--ubsi);
    --bs-btn-disabled-border-color: var(--ubsi);
}
/*
.btn-ubsi:before{
	content:'';
	position: absolute;
	z-index: -1;
	top:0;
	left: -5%;
	width: 110%;
	height: 100%;
	transform: skewX(-20deg);
	background:var(--ubsi);
	
}
.btn-ubsi:hover:before, .btn-ubsi:active:before{
	background:var(--ubsi-hover);
}

.btn-dark{
	position: relative;
	--bs-btn-hover-color: var(--bs-dark);
}
.btn-dark:before{
	content:'';
	position: absolute;
	z-index: -1;
	top:0;
	left: -5%;
	width: 110%;
	height: 100%;
	transform: skewX(-20deg);
	background:#212529;
	
}
.btn-dark:hover:before{
	background:#424649;
}
.btn-ubsi:active:before{
	background:#4d5154;
}
*/

.alert-primary {
    --bs-alert-color: var(--bs-primary-text-emphasis);
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
    --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
	
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/></svg>');
}

.form-check-input:focus {
    border-color: #9DA216;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(217,224,33, .25);
}


.text-ubsi{color: var(--ubsi)}

.float-title{transform: translateY(-200px); padding-top:30px;}

@media only screen and (max-width: 1024px) {
	.float-title{transform: translateY(-150px); padding-top:100px;}
}

.logo-ubsi{ transform: translateY(-80%);}
.logo-ag{ transform: translateY(-78%);}

@media only screen and (max-width: 1024px) {
	.logo-ubsi{ transform: translateY(-75%);}
}

@media only screen and (min-width: 1024px) {
	.w-sm-100{ width: 100%;}
	
}

@media only screen and (max-width: 1024px) {
	#navbarToggler{position: fixed; top: 0; left: 0; padding: 1rem; background-color:var(--bs-secondary); color:var(--bs-primary); width: 100%; height: 100%; z-index:1030;}
}


.waving {
  font-weight: 400;
  padding-bottom: 20px;
  margin-bottom:20px;
  background: url("../img/wave.svg");
  background-repeat: repeat;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto auto;
  background-repeat: repeat-x;
  background-size: 15px 30px; 
  background-position: 2px 19px;
  animation: move 15s linear infinite;
  -webkit-animation: move 15s linear infinite;
  animation-play-state: running;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}



@-webkit-keyframes move {
from {
    background-position: 2px 19px;
  }
  to {
    background-position: 500px 19px;
  }
}

@keyframe move {
from {
    background-position: 2px 19px;
  }
  to {
    background-position: 500px 19px;
  }
}