/*
	main.css - Main stylesheet
*/

@font-face {
	font-family: Dark;
	src: url(fonts/Dark.otf);
  }

*{
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body{

	color: #000;
}
a{
	color: red;
	text-decoration: none;
}

#wrapper{
	width: 1200px;
	margin: auto;
}

#top_header{
	padding: 30px;
}

	#top_header #logo{
		text-align: center;
	}
	#top_header a{
		color: black;
	}
	
	#top_header #nav{
		display: block;
		float: right;
		margin-top: 10px;
	}
#nav2 {
		display: block;
		float: left;
		margin-top: 10px;
	}
	#third {
		/*setting alpha = 0.6*/
		background: rgba(98, 128, 173, 0.6);
	}
	
		#top_header #nav  a{
			padding: 0px 5px;
			color: red;
		}
		#top_header #nav  a:hover{}
		#top_header #nav  a:last-child{border: 0px;}


#main{

}

	/* FORMAT FOR THE NAVIGATION AREA */
	#main #navigation{
		background-color: #ccc;
		border-bottom: 1px solid #000;
	}
		#main #navigation ul{
			display: block;
		}
			#main #navigation ul li{
				list-style: none;
			}
			#main #navigation ul li a{
				display: block;
				padding: 8px 10px;
				float: left;
				color: black;
			}
			#main #navigation ul li a:hover{
				background-color: #eee;
			}

	/* FORMAT FOR THE MAIN CONTENT AREA */
	#main #content{
		background-color: rgb(197, 196, 196);
		padding: 50px;
		color: #000;

		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px; /* future proofing */
		-khtml-border-radius: 10px; /* for old Konqueror browsers */
	}
	

		#main #content h2{
			margin-bottom: 15px;
		}

	/* FORMAT THE FOOTER  */
	#footer{
		margin: 20px 15px;
	}

	.search{
		padding: 10px;
	}
		.search td{
			padding: 3px;
		}

/* STYLE F\THE FORM ITEMS */
	input[type=text], input[type=password]{
		padding: 8px 8px;
		min-width: 300px;
	}
	input[type=submit], input[type=button]{
		padding: 5px 8px;
		background-color: #eee;
		border: 1px solid #ccc;
		color: #333;
		cursor: pointer;
		font-size: 20px;
	}
		input[type=submit]:hover, input[type=button]:hover{
			background-color: #aaa;
		}
	textarea{
		padding: 8px 8px;
		min-width: 300px;
	}

/* SETUP SOME GENERIC STYLES */
	h3{
		font-size: 20px;
		margin: 0px;
	}
	hr{
		border: 1px solid #000;
		margin: 8px 0px;
	}
	.required{
		border: 1px solid red;
	}

	table td{
		padding: 5px;
	}


	.right {float: right; }
	.left	{float: left; }
	.clear	{clear: both; }
	.center {margin: auto auto;}
	.red{color:red;}
	p{margin-bottom: 8px;}

	.error{
		background-color: #eee;
		color: #000;
		border: 1px solid red;
		padding: 8px;
	}

	.success{
		background-color: #eee;
		color: #000;
		border: 1px solid green;
		padding: 8px;
	}


	
.alert>.start-icon {
    margin-right: 0;
    min-width: 20px;
    text-align: center;
}

.alert>.start-icon {
    margin-right: 5px;
}

.greencross
{
  font-size:18px;
      color: #25ff0b;
    text-shadow: none;
}

.alert-simple.alert-success
{
  border: 1px solid rgba(36, 241, 6, 0.46);
    background-color: rgba(7, 149, 66, 0.12156862745098039);
    box-shadow: 0px 0px 2px #259c08;
    color: #0ad406;
  text-shadow: 2px 1px #00040a;
  transition:0.5s;
  cursor:pointer;
}
.alert-success:hover{
  background-color: rgba(7, 149, 66, 0.35);
  transition:0.5s;
}
.alert-simple.alert-info
{
  border: 1px solid rgba(6, 44, 241, 0.46);
    background-color: rgba(7, 73, 149, 0.12156862745098039);
    box-shadow: 0px 0px 2px #0396ff;
    color: #0396ff;
  text-shadow: 2px 1px #00040a;
  transition:0.5s;
  cursor:pointer;
}

.alert-info:hover
{
  background-color: rgba(7, 73, 149, 0.35);
  transition:0.5s;
}

.blue-cross
{
  font-size: 18px;
    color: #0bd2ff;
    text-shadow: none;
}

.alert-simple.alert-warning
{
      border: 1px solid rgba(241, 142, 6, 0.81);
    background-color: rgba(220, 128, 1, 0.16);
    box-shadow: 0px 0px 2px #ffb103;
    color: #ffb103;
    text-shadow: 2px 1px #00040a;
  transition:0.5s;
  cursor:pointer;
}

.alert-warning:hover{
  background-color: rgba(220, 128, 1, 0.33);
  transition:0.5s;
}

.warning
{
      font-size: 18px;
    color: #ffb40b;
    text-shadow: none;
}

.alert-simple.alert-danger
{
  border: 1px solid rgba(241, 6, 6, 0.81);
    background-color: rgba(220, 17, 1, 0.16);
    box-shadow: 0px 0px 2px #ff0303;
    color: #ff0303;
    text-shadow: 2px 1px #00040a;
  transition:0.5s;
  cursor:pointer;
}

.alert-danger:hover
{
     background-color: rgba(220, 17, 1, 0.33);
  transition:0.5s;
}

.danger
{
      font-size: 18px;
    color: #ff0303;
    text-shadow: none;
}

.alert-simple.alert-primary
{
  border: 1px solid rgba(6, 241, 226, 0.81);
    background-color: rgba(1, 204, 220, 0.16);
    box-shadow: 0px 0px 2px #03fff5;
    color: #03d0ff;
    text-shadow: 2px 1px #00040a;
  transition:0.5s;
  cursor:pointer;
}

.alert-primary:hover{
  background-color: rgba(1, 204, 220, 0.33);
   transition:0.5s;
}

.alertprimary
{
      font-size: 18px;
    color: #03d0ff;
    text-shadow: none;
}

.square_box {
    position: absolute;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top-left-radius: 45px;
    opacity: 0.302;
}

.square_box.box_three {
    background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    opacity: 0.059;
    left: -80px;
    top: -60px;
    width: 500px;
    height: 500px;
    border-radius: 45px;
}

.square_box.box_four {
    background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    opacity: 0.059;
    left: 150px;
    top: -25px;
    width: 550px;
    height: 550px;
    border-radius: 45px;
}

.alert:before {
    content: '';
    position: absolute;
    width: 0;
    height: calc(100% - 44px);
    border-left: 1px solid;
    border-right: 2px solid;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
      height: 20px;
}

.fa-times
{
-webkit-animation: blink-1 2s infinite both;
	        animation: blink-1 2s infinite both;
}


/**
 * ----------------------------------------
 * animation blink-1
 * ----------------------------------------
 */
@-webkit-keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

.responsive-banner {
    width: 100%;
    height: auto;
    max-height: 165px; /* Ensuring the banner doesn't exceed its designed height */
}

@media (max-width: 768px) {
    .responsive-banner {
        max-height: 100px; /* Adjust for smaller screens */
    }
}

@media (max-width: 480px) {
    .responsive-banner {
        max-height: 80px; /* Further adjust for even smaller screens */
    }
}