@font-face{
  font-family: "memorial_font";
  src: url("../fonts/samim.ttf") format("truetype");
}
@font-face{
  font-family: "memorial_desc_font";
  src: url("../fonts/dimalatifi.ttf") format("truetype");
}
@font-face{
  font-family: "memorial_footer_font";
  src: url("../fonts/calibri.ttf") format("truetype");
}
.main_mobile{display:none;}
	@media only screen and (max-width: 768px){
		.main_mobile{display:block;}
		.main_desktop{display:none;}
	
	}
body, html {
  height: 100%;
  margin: 0;
}

.container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
	max-width:100%;
	height:auto;
	overflow-x:hidden;
	display: inline-block;
	background-image:linear-gradient(to right, #9C8637, #B6A974);

}

.container .main_bk{
	
	background-image:linear-gradient(to right, #B6A974, #9C8637);
	
}

.left_div {
    position: absolute;
    top: 0;
    right: 50%;
    left: 0;
    bottom: 0;
    text-align:center;
	#background-image:linear-gradient(to right, #160000, #990000);
	#background-color:#990000;
}

.left_div_mobile {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    text-align:center;
	#background-color:#990000;
	#background-image:linear-gradient(to right, #160000, #990000);
	background-image: url('../img/bk.webp');
	background-position: right;
	background-repeat: no-repeat;
	background-size: cover;

}

.blur {
  background: rgba(31,36, 66, 0.9); //Make sure this color has an opacity of less than 1
  backdrop-filter: blur(50px);
  height: 100%;
  width: 100%;
  #border-radius: 10px;
}

.right_div {
    position: absolute;
	background-image: url('../img/bk.webp');
	background-position: right|bottom;
	background-repeat: no-repeat;
	background-size: cover;
    top: 0;
    right: 0;
    left: 50%;
    bottom: 0;
	#background-image:linear-gradient(to right, #160000, #990000);
    #background-color:#990000;
    text-align:center;
    color:#FFFFFF;
}

.right_div_mobile {
    position: absolute;
	background-image: url('../img/bk.webp');
	background-position: right;
	background-repeat: no-repeat;
	background-size: cover;
    top: 50%;
    right: 0;
    left: 0;
    bottom: 0;
    #background-color:#990000;
    #background-image:linear-gradient(to right, #160000, #990000);
    text-align:center;
    color:#FFFFFF;
}

.bgimg {
  background-image: url('../img/bk.webp');
  #background-color: #1F2442;
  #background-image: linear-gradient(to right, #1F2442 , #3F4987);
  height: 100%;
  top:0;
  right:0;
  background-position: center;
  #background-size: cover;
  #position: relative;
  background-repeat: no-repeat;
  color: white;
  font-family: "Courier New", Courier, monospace;
  font-size: 5vh;
}

.floatRight{float:right;margin-left:20px}

.floatRightClear{float:right;clear:right;margin-left:20px}

.bkheader{
	background-image: url('../img/logo.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 20vh;
	height: 20vh;
	margin: 0 auto;
}

.center{
	text-align: center;
	color:#dbebfb;
	font-size:3.5vh;
	padding-left: 4%;
	padding-right: 4%;
	margin: 0 auto;	
}

.center .title{
	background-image: url('../img/title.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	height:17vh;
	width:auto;
	color:#234234;
	margin: 0 auto;
}

.center .titles{
	font-size: 6vh;
	margin-top: -35px;
	font-family: memorial_font;
	color:#ffffff;
}

.center .desc{
	margin-bottom:5%;
	font-size: 7vh;
	font-family: memorial_desc_font;
	color:#ffffff;
}

.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}

.bottomleft {
  position: absolute;
  bottom: 0;
  font-size: 2vh;
  font-family: memorial_footer_font;
  left: 16px;
  color:#ffffff;
}

.footer{
	bottom : 2vh;  
	height : 3vh;  
	text-align: center;  
	vertical-align: middle; 
	position:fixed;
	width:100%;
	font-size: 1.8vh;
	font-family: memorial_footer_font;
	color:#ffffff;
	text-align: center;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color:#dbebfb;
}


.spacer{
  display:block;
  height:40px;
  width:100%;
  margin: 0 auto;
  content:"";
  
}

hr {
  margin: auto;
  width: 40%;
}

.glow-on-hover {
    width: 37vh;
    height: 8.5vh;
    border: none;
    outline: none;
    color:#ffffff;
	top: -2px;
    left:-2px;
	font-family: memorial_font;
	font-size:2.5vh;
    cursor: pointer;
    position: relative;
    z-index: 0;
	background-size: 400%;
	background: linear-gradient(45deg, #FFBE2E, #00ffd5, #FFBE2E, #0b5a53, #FFBE2E ,#636363, #FFBE2E);
	animation: glowing 20s linear infinite;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #FFBE2E, #00ffd5, #FFBE2E , #0b5a53, #FFBE2E ,#636363, #FFBE2E);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 5;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color:#dbebfb;
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}