@CHARSET "UTF-8";

/*bootstrap redef */
	.jumbotron{
		color:inherit;
		background-color:inherit;

/*		padding-top:10px;
		padding-bottom:10px;
		margin-bottom:10px;*/
	}
	.jumbotron .h1,.jumbotron h1{color:inherit}
	.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}
/*	.col-sm-4{border:1px solid black;}*/
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.jumbotron{
		padding-top:10px;
		padding-bottom:10px;
		margin-bottom:10px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.jumbotron{
		padding-top:00px;
		padding-bottom:10px;
		margin-bottom:10px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.jumbotron{
		padding-top:00px;
		padding-bottom:5px;
		margin-bottom:5px;
	}
}
/*---------------------*/
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.col-sm-4{
		font-size: 16px;
		line-height: 20px;
	}
}
@media (max-width:992px) {
	.col-sm-4{
		font-size: 15px;
		line-height: 22px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.col-sm-4{
		font-size: 18px;
		line-height: 25px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.col-sm-4{
		font-size: 18px;
		line-height: 25px;
	}
}
/*---------------------*/
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.col-sm-12{
		font-size: 16px;
		line-height: 20px;
	}
}
@media (max-width:992px) {
	.col-sm-12{
		font-size: 15px;
		line-height: 22px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.col-sm-12{
		font-size: 18px;
		line-height: 25px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.col-sm-12{
		font-size: 18px;
		line-height: 25px;
	}
}
/*---------------------*/
a{background-color:transparent;font-family:"Lato", sans-serif;font-size:initial;}
a:active,a:hover{outline:0}
a{color:#337ab7;text-decoration:none}
a:focus,a:hover{color:#23527c;text-decoration:underline}
a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
/*---------------------*/

/*#mainlogin*/
.login-win{
	text-decoration: none;
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.login-win{
		display: table;
		position: absolute;
		top: 5px;
		left: 5px;
		bottom: 10px;
		width: 99%;
		text-align: center;
/*		border: solid #1f628d 5px;
		border-radius: 60px 60px 60px 60px; */
/*		
		margin-left: 5px;
		margin-right: 10px;
		margin-top: 10px;
		margin-bottom: 5px;*/
		}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.login-win{
		display: table;
		position: absolute;
		top: 1px;
		left: 1px;
		bottom: 20px;
		margin-bottom: 10px;
		width: 98%;
		text-align: center;
/*		border: solid #1f628d 5px;
		border-radius: 60px 60px 60px 60px;*/
/*		margin-left: 1px;
		margin-right: 30px;
		margin-top: 10px;
		margin-bottom: 10px;*/
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.login-win{
		display: table;
		position: absolute;
		top: 0px;
		left: 0px;
		bottom: 50px;
		width: 97%;
		text-align: center center;
/*		border: solid #1f628d 5px;
		border-radius: 20px 20px 20px 20px;*/
/*		margin-left: 1px;
		margin-right: 30px;
		margin-top: 10px;
		margin-bottom: 10px;*/
	}
}
/*---------------------*/
.middle {
    display: table-cell;
    vertical-align: middle;
}

@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.middle {
/*		margin-top: 100px;*/
		padding-top: 120px;
	}
}

@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.middle {
/*		margin-top: 100px;*/
		padding-top: 80px;
	}
}

@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.middle {
		padding-top: 80px;
	}
}

/*---------------------*/
.div-image{
    display: table-caption;
    position: absolute;
    width: 98%;
}
/*---------------------*/
.img-header{
	opacity: 0.9; 
	border-radius: 40px 40px 40px 40px;
	margin-top: 0px;
	margin-left: 0px;
    margin-right: 0px;
/*    display: block;*/
 	background-image: -webkit-linear-gradient(top, #1f628d, #eff3f6);
  	background-image: -molinear-gradient(top, #1f628d, #eff3f6);
  	background-image: -ms-linear-gradient(top, #1f628d, #eff3f6);
  	background-image: -o-linear-gradient(top, #1f628d, #eff3f6);
  	background-image: linear-gradient(to bottom, #1f628d, #eff3f6);
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.img-header{
		border-radius: 100px 100px 100px 100px;
		width:370px;
		height:80px;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.img-header{
		width:250px;
		height:54px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.img-header{
		width:250px;
		height:54px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}
/*---------------------*/
.login-div
{
	margin-top: 80px;
	margin-left: auto;
	margin-right: auto; 
	display:inline-block;
	border: solid #1f628d 5px;
	background: #ffffff;
	opacity: 0.9;
	text-align: center;
	horizontal-align:center;
	vertical-align:middle;   
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.login-div{
		margin-top: 120px;
		border-radius: 10px 10px 10px 10px;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.login-div
	{
		margin-top: 120px;
		border-radius: 10px 10px 10px 10px;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.login-div
	{
		border-radius: 10px 10px 10px 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}
/*---------------------*/
.loginheader {
    font-family : sans-serif;
	font-weight: bold;
/*	line-height: 17px;
	font-size: 18px;*/
	text-align: center;
	horizontal-align:center;
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.loginheader {
		line-height: 17px;
		font-size: 25px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.loginheader {
		font-family : sans-serif;
		line-height: 17px;
		font-size: 30px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.loginheader {
		font-family : sans-serif;
		line-height: 17px;
		font-size: 17px;
	}
}
/*---------------------*/
.error-div
{
	margin-left: auto;
	margin-right: auto; 
	display:inline-block;
	border: solid #1f628d 5px;
	background: #ffffff;
	opacity: 0.7;
	text-align: center;
	horizontal-align:center;
	vertical-align:middle;   
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.error-div{
		border-radius: 300px 300px 300px 300px;
		padding-left: 30px;
		padding-right: 30px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.error-div
	{
		border-radius: 180px 180px 180px 180px;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 15px;
		padding-bottom: 15px;
	}
}
/*---------------------*/
.errorheader1 {
   	font-family : sans-serif;
	color: #000000;
	font-weight: bold;
/*	line-height: 17px;
	font-size: 25px;*/
	text-align: center;
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.errorheader1 {
		line-height: 40px;
		font-size: 35px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.errorheader1 {
		line-height: 40px;
		font-size: 30px;
	}
}
/*---------------------*/
.errorheader2 {
   	font-family : sans-serif;
	color: #000000;
	font-weight: bold;
/*	line-height: 17px;
	font-size: 20px;*/
	text-align: center;
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.errorheader2 {
		line-height: 25px;
		font-size: 16px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.errorheader2 {
		line-height: 25px;
		font-size: 18px;
	}
}
/*---------------------*/
.inputbox{
	font-family : courier;
    border: solid #8e8d8b 1px;
	border-radius: 1px;	
  	text-decoration: none;
	text-shadow: none;
	background-color: #FFFFFF;
	opacity: 1;
	color: #000000;
/*	width: 240px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;  /*top right bottom left    */
}

@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.inputbox{
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;  /*top right bottom left*/
		opacity: 1;
		width: 240px;
		line-height: 17px;
		font-size: 16px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.inputbox{
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;  /*top right bottom left*/
		opacity: 1;
		width: 230px;
		line-height: 14px;
		font-size: 20px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.inputbox{
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;  /*top right bottom left*/
		opacity: 1;
		width: 190px;
		font-family : courier;
		line-height: 17px;
		font-size: 15px;
	}
}
/*---------------------*/
.green{
    font-family : sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	background-color: #7ab42c;
    background-image : none;
    background-position : center center;
	text-shadow: none;    
	border-radius: 1px 1px 1px 1px;
  	background: #79b42c;
  	background-image: -webkit-linear-gradient(top, #79b42c, #629126);
  	background-image: -molinear-gradient(top, #79b42c, #629126);
  	background-image: -ms-linear-gradient(top, #79b42c, #629126);
  	background-image: -o-linear-gradient(top, #79b42c, #629126);
  	background-image: linear-gradient(to bottom, #79b42c, #629126);
  	-webkit-border-radius: 1;
  	-moborder-radius: 1;
  	text-decoration: none;
/*  	
	width: 250px;
	line-height: 17px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;*/
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.green{
		width: 250px;
		font-size: 16px;
		line-height: 17px;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.green{
		width: 240px;
		font-family : sans-serif;
		font-size: 17px;
		font-weight: bold;
		line-height: 17px;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.green{
		width: 200px;
		font-family : sans-serif;
		font-size: 15px;
		font-weight: bold;
		line-height: 17px;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
}
/*---------------------*/
.green:hover {
  	background: #629126;
  	background-image: -webkit-linear-gradient(top, #629126, #36540f);
  	background-image: -molinear-gradient(top, #629126, #36540f);
  	background-image: -ms-linear-gradient(top, #629126, #36540f);
  	background-image: -o-linear-gradient(top, #629126, #36540f);
  	background-image: linear-gradient(to bottom, #629126, #36540f);
  	text-decoration: none;
}
/*---------------------*/
.green:disabled {
	background: #cccccc;
}
/*---------------------*/

.table-style{
    padding-top:5px;
}

#div_yellow_rotated
{
   transform:rotate(30deg);
   -ms-transform:rotate(30deg); /* IE 9 */
   -moz-transform:rotate(30deg); /* Firefox */
   -webkit-transform:rotate(30deg); /* Safari and Chrome */
   -o-transform:rotate(30deg); /* Opera */
   background-color:yellow;
}

div.bg {
    /* The image used */
    background-image: url("../IMG/IMG_3806.JPG");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/*---------------------*/
img.bg {
  /* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;
	
  /* Set up proportionate scaling */
	width: 100%;
	height: auto;
	
  /* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0.5;
/*	background-image: url(../IMG/IMG_3806.JPG);*/
    background-position: center center;
    background-size: cover;
/*    background-size: 100%;*/
    background-repeat: no-repeat;
}

@media only screen and (max-width: 768px) { /* Specific to this particular image */
	img.bg {
		left: 50%;
		margin-left: -512px;   /* 50% */
	}
}
/*---------------------*/

.or {
    font-family : sans-serif;
    color: #8e8d8b;
	font-size: 14px;
	font-style: italic;
    color: #8e8d8b;
	line-height: 20px;
}

.vline {
  	background: #555555;
  	background-image: -webkit-linear-gradient(left, #555555, #c6c7c6);
  	background-image: -molinear-gradient(left, #555555, #c6c7c6);
  	background-image: -ms-linear-gradient(left, #555555, #c6c7c6);
  	background-image: -o-linear-gradient(left, #555555, #c6c7c6);
  	background-image: linear-gradient(to right, #555555, #c6c7c6);
}


body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.background {
    /* The image used */
    background-image: url("../IMG/IMG_4099.JPG");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/*---------------------*/
#copy { 
    font-family : sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	position: absolute; 
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	#copy { 
		right: 50px; 
		bottom: 15px; 
		line-height: 17px;
		font-size: 12px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	#copy { 
		line-height: 17px;
		font-size: 12px;
		right: 40px; 
		bottom: 20px; 
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	#copy { 
		line-height: 17px;
		font-size: 10px;
		right: 12px; 
		bottom: 12px; 
	}
}
/*--------------------------------*/
/*body {
  margin: 40px;
}*/

.wrapper {
		justify-items: center;
		display: grid;
		grid-template-columns: 100%;
		grid-template-areas:
			"header"
			"content"
			"footer";

		grid-gap: 10px;
		grid-template-rows: auto;
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.wrapper {
			grid-gap: 10px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.wrapper {
			grid-gap: 8px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.wrapper {
			grid-gap: 8px;
	}
}
/*---------------------*/
.box {
	color: #fff;
  	border-radius: 50px;
  	padding: 50px;
  	font-size: 150%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	padding: 25px;
	background: inherit; 
	opacity: 0.9;
}

.box > div {
	/*flex-grow: 1;*/
	background-color: #ffffff;
	margin: 5px;
	padding: 10px;
	text-align: center;
	font-size: 18px;
	width: 250px;
	/*border: 1px solid black;*/
	border-color: rgba(31,98,141,1);
	border-radius: 60px 60px 60px 60px;*/
	opacity: 1;
	border: solid #1f628d 2px;
}

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

.topright {
  position: absolute;
  top: 0;
  right: 0;
}

.bottomleft {
  position: absolute;
  bottom: 0;
  left: 0;
}

.bottomright {
  position: absolute;
  bottom: 0;
}
/*---------------------*/
.box-main{
	text-decoration: none;
/*	border: solid #1f628d 25px;*/
/*	border: solid 5px;
	border-color: rgba(31,98,141,1);
	border-radius: 60px 60px 60px 60px;*/
	opacity: 1;
	position: absolute;
	text-align: center;
	horizontal-align: center;
	
/*	top: 5px;
	left: 5px;
	bottom: 20px;
	width: 99%; */
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.box-main{
		top: 5px;
		left: 5px;
		bottom: 20px;
		width: 99%;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.box-main{
		top: 1px;
		left: 1px;
		bottom: 20px;
		width: 99%;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.box-main{
		top: 1px;
		left: 1px;
		bottom: 20px;
		width: 99%;
	}
}
/*---------------------*/
.sidebar {
  grid-area: sidebar;
}
/*---------------------*/
.gridheader {
	grid-area: header;
/*	position: absolute;*/
	horizontal-align:center;
	vertical-align:middle;   
	text-align:center;

/*	border-radius: 100px 100px 100px 100px;*/
/*
	background-color: green;
	border: solid #ff0000 5px;
	width:370px;
	height:100px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 10px;
	padding-bottom: 0px;*/
}
@media only screen and (min-width: 900px) { /* Specific to this particular image */
	.gridheader {
/*		border-radius: 100px 100px 100px 100px;*/
/*		width:370px;
		height:100px; */
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 10px;
		padding-bottom: 20px;
	}
}
@media only screen and (max-width: 900px) { /* Specific to this particular image */
	.gridheader {
/*		border-radius: 100px 100px 100px 100px;*/
/*		width:370px;
		height:100px; */
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 10px;
		padding-bottom: 0px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.gridheader {
/*		border-radius: 100px 100px 100px 100px;*/
/*		width:370px;
		height:100px;*/
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 10px;
		padding-bottom: 0px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.gridheader {
/*		border-radius: 100px 100px 100px 100px;*/
/*		width:370px;
		height:100px;*/
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 10px;
		padding-bottom: 0px;
	}
}

/*---------------------*/
.gridheader #divmenu{
/*	grid-area: header;*/
	border: solid #ff0000 0px;
	position: absolute;
	horizontal-align:left;
	vertical-align:middle;   
	text-align:center;
	z-index:1000;

/*	border-radius: 100px 100px 100px 100px;*/
/*	width:370px;
	height:100px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 10px;
	padding-bottom: 0px;*/
}
.gridheader .menu_sidenav{
	horizontal-align:left;
	text-align:left;
}

/*---------------------*/
.header-image{
	opacity: 0.9; 
	border-radius: 40px 40px 40px 40px;
	margin-top: 0px;
	margin-left: 0px;
    margin-right: 0px;
/*    display: block;*/
	background-image: -webkit-linear-gradient(top, #1f628d, #eff3f6);
	background-image: -molinear-gradient(top, #1f628d, #eff3f6);
	background-image: -ms-linear-gradient(top, #1f628d, #eff3f6);
	background-image: -o-linear-gradient(top, #1f628d, #eff3f6);
	background-image: linear-gradient(to bottom, #1f628d, #eff3f6);
	
/*	border-radius: 100px 100px 100px 100px;
	width:380px;
	height:80px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;*/

}

@media only screen and (min-width: 900px) { /* Specific to this particular image */
	.header-image{
		border-radius: 100px 100px 100px 100px;
		width:380px;
		height:100px;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
	}
}
@media only screen and (max-width: 900px) { /* Specific to this particular image */
	.header-image{
		border-radius: 100px 100px 100px 100px;
		width:300px;
		height:70px;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
	}
}

@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.header-image{
		border-radius: 100px 100px 100px 100px;
		width:250px;
		height:54px;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.header-image{
		border-radius: 100px 100px 100px 100px;
		width:250px;
		height:54px;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
	}
}
/*---------------------*/
.container {
	width: 90%;
	margin: 0 auto;
}
/*---------------------*/
.gridcontent {
	grid-area: content;
/*    display: table-cell;*/
/*	border: solid #ff0000 1px;*/
/*	position: relative;*/
	display: table-cell;
	vertical-align: top;
	text-align: center;
	horizontal-align:center;
	background-color: none;
	width: 90%;
	margin: 0 auto;
/*	border: 1px solid #aaffaa;*/
/*	background-color: blue;*/
}
/*	width: 100%;*/

/*
@media only screen and (min-width: 900px) {
	.gridcontent {
		margin-top:40px;
	}
}
@media only screen and (max-width: 900px) {
	.gridcontent {
		margin-top:40px;
	}
}

@media only screen and (max-width: 768px) {
	.gridcontent {
		margin-top:64px;
	}
}
@media only screen and (max-width: 360px) {
	.gridcontent {
		margin-top:64px;
	}
}
*/
/*---------------------*/


/*---------------------*/
.content-list{
	width: 90%;
	display:inline-block;
	border: none;
/*	border: solid #1f628d 5px;*/
	background-color: inherit;
/*	background: #ffffff; */
	opacity: 0.8;
	text-align: center;
	horizontal-align:center;
	vertical-align:middle;   
	
/*	margin-top: 20px;
	margin-left: auto;
	margin-right: auto; 
	border-radius: 30px 30px 30px 30px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0px;
	padding-bottom: 20px;*/
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.content-list{
/*		border: solid #ff0000 1px; */
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto; 
		border-radius: 30px 30px 30px 30px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 0px;
		padding-bottom: 20px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.content-list{
/*		border: solid #ff0000 1px;*/
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto; 
		border-radius: 30px 30px 30px 30px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 0px;
		padding-bottom: 20px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.content-list{
/*		border: solid #ff0000 1px; */
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto; 
		border-radius: 30px 30px 30px 30px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 0px;
		padding-bottom: 20px;
	}
}
/*---------------------*/
.content-list-header{
/*	border: solid #ff0000 1px; */
	font-family : sans-serif;
	font-weight: bold;
/*	line-height: 17px;
	font-size: 18px;*/
	text-align: center;
	horizontal-align:center;

	background-color: #ffffff;
	margin: 5px;
	padding: 10px;
	border-color: rgba(31,98,141,1);
	border-radius: 60px 60px 60px 60px;
	opacity: 0.9;
	border: solid #1f628d 2px;
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.content-list-header{
		line-height: 25px;
		font-size: 22px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.content-list-header{
		line-height: 20px;
		font-size: 20px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.content-list-header{
		line-height: 20px;
		font-size: 22px;
	}
}
/*---------------------*/
.gridfooter {
	grid-area: footer;
	background-color: rgba(31,98,141,0.2);
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	font-family : sans-serif;
	color: #FFFFFF;
	font-weight: bold;
/*	font-size: 12px;*/
	z-index: 1000;
}
@media only screen and (min-width: 768px) { /* Specific to this particular image */
	.gridfooter {
		font-size: 12px;
	}
}
@media only screen and (max-width: 768px) { /* Specific to this particular image */
	.gridfooter {
		font-size: 10px;
	}
}
@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.gridfooter {
		font-size: 8px;
	}
}

/*--------------------------------*/
/*	
	background-color:rgba(230, 230, 255,.1);
	border-color: rgba(230, 230, 255,0.5);
	border-radius: 0px 0px 0px 0px;
	border-style: solid;
	border-width: 1px; 
*/
.details-work{
	box-sizing: border-box;
	opacity: 1;
}

/*
	background-color:rgba(255, 230, 255,.1);
	background:#fdfdff;
	border: 0px solid #aa00aa;
*/
.work_button_area{
	margin:0px;
	padding:5px;
	width:100%;
	box-sizing: border-box;
}

div.roundborder_red {padding-top:10px;margin-left: 25px;margin-right: 25px;margin-top: 10px;margin-bottom: 10px;border: solid #dc143c 2px;border-radius: 10px;background-color: #f8f8ff;}
hcolor {color:DarkBlue;}
redcolor {color:FireBrick ;}
strongredcolour {color: Red;}
greencolour {color: #008000;}

/*--------------------------------*/

.debug_notes{
	box-sizing: border-box;
	padding: 10px;
	text-align:left;
	background-color:rgba(255, 224, 102,.5);
	border-color: rgba(255, 100, 100,1);
	border-radius: 0px 0px 0px 0px;
	border-width: 1px; 
	border-style: solid;
	opacity: 1;
}
/*--------------------------------*/
/* Create two equal columns that floats next to each other */
.multicol_column {
  	padding-left: 30px;
  	column-count: 2;
  	margin-bottom: 20px;
}

@media only screen and (min-width: 1024px) { /* Specific to this particular image */
  .multicol_column {
  	column-count: 3;
  }
}
@media screen and (max-width: 768px) {
  .multicol_column {
  	column-count: 1;
  }
}
/*--------------------------------*/
/*--------------------------------*/
/*--------------------------------*/


/*---------------------------------------------------------------------------------*/
/*
.window.login-window{
	height:100%; 
	width:100%;
	border: solid #1f628d 2px;
	border-radius: 40px 40px 40px 40px;
  	background: #1f628d;
  	background-image: -webkit-linear-gradient(top, #1f628d, #6fbbeb);
  	background-image: -molinear-gradient(top, #1f628d, #6fbbeb);
  	background-image: -ms-linear-gradient(top, #1f628d, #6fbbeb);
  	background-image: -o-linear-gradient(top, #1f628d, #6fbbeb);
  	background-image: linear-gradient(to bottom, #1f628d, #6fbbeb);
  	text-decoration: none;
}
<!-- 
  padding: 10px 20px 10px 20px;
  border: solid #1f628d 2px;
  -webkit-border-radius: 40;
  -moborder-radius: 40;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;


	background: #656162
  	background-image: -webkit-linear-gradient(top, #79b42c, #629126);
  	background-image: -molinear-gradient(top, #79b42c, #629126);
  	background-image: -ms-linear-gradient(top, #79b42c, #629126);
  	background-image: -o-linear-gradient(top, #79b42c, #629126);
  	background-image: linear-gradient(to bottom, #79b42c, #629126);
  	text-decoration: none;
 -->
.window.logo-window{
	height:100%; 
	width:100%;
	border: solid #1f628d 2px;
	border-radius: 10px 10px 10px 10px;
	background: #1f628d;
  	background-image: -webkit-linear-gradient(top, #79b42c, #629126);
  	background-image: -molinear-gradient(top, #79b42c, #629126);
  	background-image: -ms-linear-gradient(top, #79b42c, #629126);
  	background-image: -o-linear-gradient(top, #79b42c, #629126);
  	background-image: linear-gradient(to bottom, #79b42c, #629126);
  	text-decoration: none;
}
.window-caption.window-caption .caption.window-caption .caption-image.window-caption{
	height:100%; 
	width:10%;
	border-radius: 40px 40px 40px 40px;
	border: solid #ff0000 2px;
  	background: #1f628d;
  	background-image: -webkit-linear-gradient(top, #1f628d, #6fbbeb);
  	background-image: -molinear-gradient(top, #1f628d, #6fbbeb);
  	background-image: -ms-linear-gradient(top, #1f628d, #6fbbeb);
  	background-image: -o-linear-gradient(top, #1f628d, #6fbbeb);
  	background-image: linear-gradient(to bottom, #1f628d, #6fbbeb);
  	text-decoration: none;
	
}

.logo-div{
	display:inline-block;
	horizontal-align:center;
	border-radius: 10px 10px 10px 10px;
	border: solid #1f628d 5px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	align: center;
	text-align: center;
	vertical-align:middle;
}
.div.login-div{
	display:inline-block;
	vertical-align:middle;
	horizontal-align:center;
	border-radius: 10px 10px 10px 10px;
	border: solid #1f628d 5px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 40px;
	padding-bottom: 20px;
	align: left;
	text-align: left;
}
.div.separator{
	align: center;
	vertical-align:middle;
	text-align: center;
}
.div.separator-kid {
  	position: absolute;
  	top: 50%;
  transform: translateY(-50%);
}
.label.loginheader {
    font-family : sans-serif;
	font-weight: bold;
	line-height: 17px;
	font-size: 18px;
	text-align: left;
}
.label.log {
    font-family : sans-serif;
	font-size: 10px;
}
.label.or {
    font-family : sans-serif;
    color: #8e8d8b;
	font-size: 14px;
	font-style: italic;
    color: #8e8d8b;
	line-height: 20px;
}
.green{
	width: 250px;
    font-family : sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 17px;
	background-color: #7ab42c;
    background-image : none;
    background-position : center center;
	text-shadow: none;    
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 1px;
  	background: #79b42c;
  	background-image: -webkit-linear-gradient(top, #79b42c, #629126);
  	background-image: -molinear-gradient(top, #79b42c, #629126);
  	background-image: -ms-linear-gradient(top, #79b42c, #629126);
  	background-image: -o-linear-gradient(top, #79b42c, #629126);
  	background-image: linear-gradient(to bottom, #79b42c, #629126);
  	-webkit-border-radius: 1;
  	-moborder-radius: 1;
  	text-decoration: none;
}
.green:hover {
  	background: #629126;
  	background-image: -webkit-linear-gradient(top, #629126, #36540f);
  	background-image: -molinear-gradient(top, #629126, #36540f);
  	background-image: -ms-linear-gradient(top, #629126, #36540f);
  	background-image: -o-linear-gradient(top, #629126, #36540f);
  	background-image: linear-gradient(to bottom, #629126, #36540f);
  	text-decoration: none;
}
.toolbarbutton.forgot{
  	background: transparent;
  	border: none #1f628d 0px;
  	text-decoration: none;
  	text-color: #FF0000;
  	font-color: #cfcfcf;
  	color: #FF0000;
  	text-shadow: none; 
}
.toolbarbutton.forgot:hover{
    font-family : verdana;
  	background: transparent;
  	border: none #1f628d 0px;
  	text-decoration: none;
  	text-color: #FF0000;
    color: #8e8d8b;
}
.textbox.login-info{
    font-family : courier;
	border-radius: 1px;	
}
.checkbox.check-remember{
    font-family : verdana;
    display:inline-block;
    width:150px;
    height:19px;
    vertical-align:middle;
    cursor:pointer;
    color: #8e8d8b;
    font-size: 12px;
}
.checkbox.check-remember:checked{
}
.checkbox-text.check-remember{
	font-family: verdana;
	color: #cfcfcf;
    font-size: 6px;
    font-color: #cfcfcf;
}
.checkbox-over.check-remember {
	background-color: green;
}
.checkbox-down.check-remember {
	background-color: red;
}
.checkbox-checked.check-remember  {
	background-color: black;
}
.blue1{
	background-color: #3cb0fd;
}
.blue2{
	background-color: #3498db;
}
<!--
greys: 
cac7c2
c4bfb9
8e8d8b
656162
 -->




*/