@import 'https://fonts.googleapis.com/css?family=Montserrat:300, 400, 700&display=swap';

:root{
--highlight:rgba(240,0,0,1);
--mmblue:#003876;
}
div{
	//border:1px solid red;
}
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
a{
	text-decoration:none;
	color:inherit;
}
.border{
	border:1px solid red;
}

html {
	font-size: 10px;
	font-family: 'Montserrat', sans-serif;
	scroll-behavior: smooth;
}
.container {

	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	
}
img {
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	
}
p {
	color: black;
	font-size: 1.4rem;
	line-height: 2.5rem;
	font-weight: 300;
	letter-spacing: .05rem;
}
.login_form p{
	width:90%;
	font-weight: bold;
	line-height:auto;
	margin:0px auto;	
	text-align:left;
	margin-top:15px;

}
.section-title {
	font-size: 4rem;
	font-weight: 300;
	color: black;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: .2rem;
	text-align: center;
}
.section-title span  {
	color:var(--highlight);
}
.highlight{
	color:var(--highlight);
}
.cta, .submit {
	display: inline-block;
	padding: 10px 30px;
	color: white;
	background-color: transparent;
	border: 2px solid var(--highlight);
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: .1rem;
	margin-top: 30px;
	transition: .3s ease;
	transition-property: background-color, color;
}
.submit{
	color: white;
	background-color: var(--highlight);
	border-radius:6px 6px 0px 0px;
}
.submit:hover {
	color: var(--highlight);
	background-color: #D0D0CC!important;
}
.cta:hover {
	color: white;
	background-color: var(--highlight)!important;
}
.brand h1{
	font-size: 3rem;
	text-transform: uppercase;
	color: white;
}
.login h2 {
	font-size: 2.5rem;
	text-transform: uppercase;
	color:#525050;
}
.login h3 {
	font-size: 1rem;
	text-transform: uppercase;
	color:#525050;
}
h1 span {
	color:var(--highlight);;
	font-weight:bold;
}
.login h1{
	color:white;
}

.login_inner{
	background-color:rgba(255,255,255,.8);
	color:#303030;
	padding:20px;
}


.login{
	text-align:center;
	background-color:rgba(0,0,0,.5);
	color:white;
	z-index:10;
	display:none;	
	padding:20px;
}
.show{
	display:block;	
}
.hide{
display:none;	
}
/* Header section */
#header {
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
}
#header .header {
	min-height: 6vh;
	transition: .3s ease background-color;
}

#hero {
	background-image: url(../img/img2.jpg);
	background-size:cover;
	background-position:80% 20%;
	position: relative;
	z-index: 1;

}
.spacer{
	height:50px;
}
#hero::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: black;
	opacity: .6;
	z-index: -1;
}
#hero .hero {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 50px;
	justify-content: flex-start;
}
#hero h1 {
	display: block;
	width: fit-content;
	font-size: 4rem;
	position: relative;
	color: transparent;
	animation: text_reveal .5s ease forwards;
	animation-delay: 1s;
}
#hero h1:nth-child(1) {
	animation-delay: 1s;
}
#hero h1:nth-child(2) {
	animation-delay: 2s;
}
#hero h1:nth-child(3) {
	font-weight:bold;
	animation: text_reveal_name .5s ease forwards;
	animation-delay: 3s;
}
#hero h1 span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background-color: var(--highlight);
	animation: text_reveal_box 1s ease;
	animation-delay: .5s;
}
#hero h1:nth-child(1) span {
	animation-delay: .5s;
}
#hero h1:nth-child(2) span {
	animation-delay: 1.5s;
}
#hero h1:nth-child(3) span {
	animation-delay: 2.5s;
}
#login img{
	height:75px;
	width:75px;
	border-radius:50%;
}
.login_form{
	
	min-height:100px;
}
.login_form{
	font-size:2.2rem;
}
.remember{
	position:relative;
	padding:7px 0px;
}
.log_error{
	position:absolute;right:-.8em;top:1.2em;color:red;
	font-size:.9rem;
}
.remember p{
	font-size:1rem;
}
input[type=text], input[type=password],select{
width:90%;
padding:5px 0px;
border:none;
outline:none;
font-size:2rem;

  }
  .login_submit{
	 display:flex;
	 justify-content: space-between; 
	 align-items: center;
  }
i{
	margin-top:20px;
	color:var(--highlight);
	font-size:4rem;
}
.forgot:hover{
	cursor:pointer;
	color:green;
}
.pflex{
	width:100%;
	position:relative;
	display:flex;
}
.cflex{
	flex:1;
}
.tright{
	text-align:right;
}
.tcenter{
	text-align:center;
}
.tleft{
	text-align:left;
}
.bold{
	font-weight:bold;
}



















































































@keyframes hamburger_puls {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.4);
	}
}
@keyframes text_reveal_box {
	50% {
		width: 100%;
		left: 0;
	
	}
	100% {
		width: 0;
		left: 103%;
	
	}
}
@keyframes text_reveal {
	100% {
		color: white;
	}
}
@keyframes text_reveal_name {
	100% {
		color: rgba(240,0,0,1);;
		font-weight: 500;
	}
}

@media only screen and (min-width: 768px) {
	.cta {
		font-size: 2.5rem;
		padding: 20px 60px;
	}
	h1.section-title {
		font-size: 6rem;
	}
	#hero h1 {
		font-size: 7rem;
	}
	#login h2 {
		font-size: 6rem;
	}
	#login h3 {
		font-size: 2rem;
	}
	.log_error{
		position:absolute;right:5em;top:1.5em;color:red;
		font-size:1.5rem;
	}
	.header{
		height:7vh;
		width:100%;
		display:flex;
		color:white;
		padding:0px 25px;
		}
.fa-user-cog{
	font-size:2.8rem;
	--highlight: rgba(255,255,255,1);
margin-top:15px;

}

.fas-out{
	position:absolute;
	bottom:-22px;
	right:15px;
	height:40px;
	color:white;
	transition: .5s ease all;
	font-size:1.7rem;

}
.fas-out:hover{	
	color:red;

}

.wrapper{
	width:100%;
	position:relative;
	height:100%;
}
.main_wrap{
	width:100%;
	position:relative;
	background-image: url(../img/wp4047742.jpg);
	background-size:cover;
	position: relative;
}
.gap{
	gap:3%;
}
.left{
	background: rgba(22, 22, 22, 1.0);
	background: -webkit-linear-gradient(top, rgba(22, 22, 22, 1.0), rgba(48, 50, 48, .9));
	background: -moz-linear-gradient(top, rgba(22, 22, 22, 1.0), rgba(48, 50, 48, .9));
	background: linear-gradient(to bottom, rgba(22, 22, 22, 1.0), rgba(48, 50, 48, .9));
	padding:0px 40px 20px 0px;
	color:white;
	height:100%;
	z-index:10;
	
}
.right{
height:100%;
	flex:6;
	background-color:rgba(234,234,234,.8);
	padding:10px 30px;
}
.center{
	display:flex;
	justify-content: center;
	align-items: center;
	
}
.content_box{
	width:48%;
	margin-top:20px;
	overflow-y: scroll;

}
.content{
	flex-wrap: wrap;
	width:100%;
	
}
.content_header{
font-size:12pt;

text-transform: capitalize;
padding: 9px 15px;
font-weight:bold;
background-color:#728EAD;
color:white;letter-spacing:.2em;


}
.content_box{
	position:relative;
	min-height:345px;
	border:1px solid #292929;
	background-color: white;
}
.links{

	padding:15px;
	margin:60px auto;
	font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1600 - 300)));
transition: .4s ease background-color;
}
.links:hover{
	background-color:#003876;	
	cursor:pointer;
	color:white;
}
.active{
	background-color:#003876;	
}
.logo{
	display:flex;
	align-items: center;
	padding-left:30px;
}
.spacer{
color:#003876;	
	font-size:3rem;
	
}
.innercontent{
margin-top:46px;
font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
line-height:2rem;
}
.widgetitem{
padding:10px;	
}
.widgetitem:nth-child(odd){
background-color:rgba(0,0,0,.1);	
	}
.icon{
	padding-right:30px;
	position:relative;
}

.ordertitle{
	font-size: calc(18px + (30 - 18) * ((100vw - 300px) / (1600 - 768)));
	font-weight:bold;
	color:#303030;
	padding-right:30px;
}
.order_btn{
	padding-left:15px;
	display:flex;
align-items:center;
	justify-content: flex-start;
}
.order_btn button{
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 768)));
	padding:10px 20px;
	border-radius:7px;
	border:1px solid var(--highlight);
	color: white;
	background-color:var(--highlight);
	transition: .4s ease all;
}

.order_btn button:hover{
	cursor:pointer;
	color:var(--highlight);
	background-color: white;
}
.order_search{
border-radius:7px;
padding-right:20px;
font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 768)));

}
.search_type{
	width:auto;
}
.filters{
	padding:50px 0px 15px 0px;
}
.order{
	position:relative;
	width:100%;
	font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 768)));
color:#003876;

}
.order_area{
	background-color:white;
	border:1px solid rgba(0,0,0,.3);
	width:100%;
	height:60vh;
	position:relative;
	overflow-x:hidden;
	overflow-y:scroll;
	margin-top:20px;
}
.order_area_head{
	padding:10px 0px;
	font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 768)));
	border-bottom: 1px solid #003876;

}
.order_item{
padding:20px 0px;
letter-spacing:1px ;
}

.order_left{
	position:relative;
	min-height:600px;
	display:flex;
	align-items:center;
	justify-content: center;
	color:#8a8a8a;
	border:1px solid grey;
	font-size: calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 768)));
}
.fileAjax{
	opacity:1;
	transition: .4s ease all;
}
.pdfArea{
	position:relative;
	width:100%;
	height:80vh;
	border:1px solid lightgrey;
	font-size: calc(24px + (40 - 24) * ((100vw - 300px) / (1600 - 768)));
}
.pdftext{

	width:100%;
	height:100%;
	display:flex;
	align-items: center;
	justify-content: center;
	color:#2C2D2C;
	
}
#submit {
	padding:5px 15px;
	border-radius:7px;
	font-size: calc(8px + (12 - 8) * ((100vw - 300px) / (1600 - 768)));
}

.orderArea{
	position:relative;
	width:100%;
	height:90vh;

	font-size: calc(24px + (30 - 24) * ((100vw - 300px) / (1600 - 768)));	
}
.w80{
	width:80%;
}

.addorderlistitem{
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
font: inherit;
text-transform: none;
font-family: inherit;
line-height: 1.428571429;
font-size: 16px;
}
.details_wrapper{
font-family: museo-sans,sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #626365;
font-weight: 300;
box-sizing: border-box;
background-color: #ebebeb;
padding: 23px;
margin: 20px auto 0 auto;
max-width: 100%;
width: 90%;
}
.addorderlist > select,.addorderlist > input{
margin:10px 0px;
}
.orderitems{
	padding:5px 0px;
	border-bottom:rgba(0,56,118,1);
}
.orderitems:hover{
background-color: rgba(0,66,118,.3);
}
.orderitems:nth-child(even){
background-color: rgba(0,0,0,.1);
}
.orderitems:nth-child(odd){
	background-color: rgba(255,255,255,1);
	}

	.orderitems:nth-child(even):hover{
		background-color: rgba(0,66,118,.3);
		border-top:1px solid rgba(0,66,118,1);
		border-bottom:1px solid rgba(0,66,118,1);
		}
		.orderitems:nth-child(odd):hover{
			background-color: rgba(0,66,118,.3);
			border-top:1px solid rgba(0,66,118,1);
			border-bottom:1px solid rgba(0,66,118,1);
			}
			   
.details_wrapper .pflex{
	margin:20px 0px;
}
.orderitems img{
	width:90%;margin:0px auto;
	transition: 1s ease all;

}
.orderitems img:hover{
	transform: scale(1.5);
	z-index:40;
	background-color:white;
	overflow:hidden;

}
input:required:invalid,select:required:invalid {border: 1px solid rgba(255,0,0,.3);}
input:required:valid, select:required:valid { border: 2px solid rgba(0,128,0,.3); }
input:focus:required:invalid,select:focus:required:invalid {border: 2px solid rgba(255,0,0,.5);}

.currentusers{
	font-size:2.2rem;
	text-align: center;
	font-style: italic;
min-height:80vh;
}
.user:first-child{
	margin-top:15px;
}
.user{
	padding:10px;
}
.user > span:hover{
	cursor:pointer;
}
.blue{
	color:var(--mmblue);
}
table{
	border-collapse: collapse;
	width:100%;
   min-height:250px;
}	

th,td{
	text-align: left;
//
}
td{
padding:3px 0px;	
}
th{
   padding:5px 0px;
  
}
tbody > tr:hover {
background-color:#728EAD;
 color:white;
 cursor:pointer;
 


}
thead{
   background:#ffffff;
   display:table;
   width:100%;
   font-size:10pt;
}
tbody {
   overflow:auto;
   overflow-x:hidden;
   display:block;
   width:100%;
	overflow-y: scroll;
	font-size:10pt;
}
tbody tr {
   display:table;
   width:100%;
   table-layout:fixed;
}
.th:hover{background-color:#ffffff;}

.user_info{
	border-radius:15px;
}






}

@media only screen and (min-width: 1200px) {

	
}