html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

:root {
	--base: #8B1A1A;
	--alerterror: #721c24;
	--alerterrorbg: #f5c6cb;
	--alertsuccess: #155724;
	--alertsuccessbg: #d4edda;
	--alertinfo: #004085;
	--alertinfobg: #cce5ff;
}

body {
  color: #000;
  font-family: sans-serif;
  line-height: 1.15;
  padding-top: 60px;
}

.container {
	padding: 10px;
}

hr { /*dummy content*/
  height: 6px;
  border: none;
  background: rgba(0, 0, 0, 0.1);
} 

hr:last-child {  /*dummy content*/
  margin-right: 60%;
}

hr.image { /*dummy content*/
  padding-bottom: 50%;
} 

img {
	max-width:100%;
	height:auto;
}


.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0;
	background-color: var(--base);
	line-height: 32px;
	word-wrap:break-word !important;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}

#logo {
	display: block;
	padding: 0 30px;
	float: left;
	font-size:20px;
	line-height: 60px;
    color: #FFFFFF;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color: var(--base);
    z-index: 99999;
}

/* Styling the links */
nav a {
	display:block;
	padding:14px 20px;	
	color:#FFF;
	font-size:17px;
	text-decoration:none;
}


nav ul li ul li:hover { background: #000000; }
nav li.active { background: #FFF; }
nav li.active a { color: #000; }
nav li.active a:hover { color: #FFF; }

/* Background color change on Hover */
nav a:hover { 
	background-color: #000000; 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 60px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */


main {
    max-width: 1100px;
    margin: 25px auto;
}

h1.title {
	position: relative;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	margin-bottom: 25px;
	font-size: 125%;
	z-index: 0;
}

h1.title:before {
	position: absolute;
	content: '';
	background: #CCC;
	width: 55px;
	height: 1px;
	bottom: -1px;
	left: 0px;
}

.description, .description-list {
	position: relative;
	color: #666;
	padding-bottom: 10px;
	margin-top: -10px;
	margin-bottom: 25px;
	font-size: 14px;
	z-index: 0;
	line-height: 150%;
}

.description-list {
	margin-top: 10px;
}


.article h2, .subtitle {
	margin-top: 25px;
	margin-bottom: 25px;
	font-size: 105%;
	z-index: 0;
	border-bottom: 1px solid #eee;
	padding-bottom: 5px;
}

.article ol {
	margin: 15px;
}
.article p, .article li {
	line-height: 150%;
	margin: 15px 0px;
	text-align: justify;
}
.article p::first-letter {
	margin-left: 25px;
}
  

.article li {
	margin-left: 25px;
}

  
.info {
	margin: 15px 0px;
    font-size: 12px;
	color: var(--base);
    font-size: 11px;
}



.item {
	margin: 10px;
	padding: 1em;
	background: #fff;
	box-shadow:
	  0 5px 10px rgba(0, 0, 0, 0.1),
	  0 20px 20px rgba(0, 0, 0, 0.05);
}

.item a:link {
	text-decoration: none;
}

.form-group{
	margin: 15px 10px;
}

.form-group label, .form-group input, .form-group textarea, .form-group select {
	width: 100%;
}

.form-group label{
	margin: 10px 0px;
    font-weight: bold;
}

.form-group input, .form-group textarea, .form-group select {
    display: block;
    padding: 10px 5px;
    font-weight: 400;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	margin-bottom: 15px;
}

.form-group button {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    padding: 10px 15px;
    border-radius: .25rem;
}
.form-group button {
    background: var(--base);
    border: 1px solid var(--base);
    color: #fff
}

.form-group button:hover {
    background: #fff;
    border: 1px solid var(--base);
    color: var(--base);
	cursor: pointer;
}


.alert {
	position: relative;
	padding: 10px 15px;
	margin-bottom: 25px;;
	border: 1px solid transparent; 
}
.alert-error {
	color: var(--alerterror);
	background-color: var(--alerterrorbg);
	border-color: var(--alerterror);
}
.alert-success {
	color: var(--alertsuccess);
	background-color: var(--alertsuccessbg);
	border-color: var(--alertsuccess);
}
.alert-info {
	color: var(--alertinfo);
	background-color: var(--alertinfobg);
	border-color: var(--alertinfo);
}


.table {
	width: 100%;
	max-width: 100%;
}
.table tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

.table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border: 1px solid #dee2e6;
}
.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.mb15 {
	margin-bottom: 15px;;
}

.button {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    padding: 10px 15px;
    border-radius: .25rem;
}
.button {
    background: var(--base);
    border: 1px solid var(--base);
    color: #fff
}

.button.danger {
	color: var(--alerterror);
	background-color: var(--alerterrorbg);
	border-color: var(--alerterror);
}
.button.information {
	color: var(--alertinfo);
	background-color: var(--alertinfobg);
	border-color: var(--alertinfo);
}

.button:hover, .button.danger:hover, .button.information:hover {
    background: #fff;
    border: 1px solid var(--base);
    color: var(--base);
	cursor: pointer;
}

.text-center {
	text-align: center;
}

.button-small {
    padding: 5px 10px;
    border-radius: .2rem;
}

.button-tiny {
    padding: 3px 6px;
    border-radius: .2rem;
	font-size: 11px;
}


/* ==== GRID SYSTEM ==== */

/* Raster grid subsystem (rsms.me/raster) */
/* Raster grid subsystem (rsms.me/raster) */
.grid {
	display: grid;
	--grid-tc: repeat(4, 1fr);
	grid-template-columns: var(--grid-tc);
	--grid-cs: 1; /* column start */
	--grid-ce: -1 /* column end */
  }
  
  /* .cell -- cell or column */
  .grid > .cell { display: block; appearance: none; -webkit-appearance: none }
  
  .grid[columns="1"] { --grid-tc: repeat(1, 1fr) }
  .grid[columns="2"] { --grid-tc: repeat(2, 1fr) }
  .grid[columns="3"] { --grid-tc: repeat(3, 1fr) }
  .grid[columns="4"] { --grid-tc: repeat(4, 1fr) }
  .grid[columns="5"] { --grid-tc: repeat(5, 1fr) }
  .grid[columns="6"] { --grid-tc: repeat(6, 1fr) }
  .grid[columns="7"] { --grid-tc: repeat(7, 1fr) }
  .grid[columns="8"] { --grid-tc: repeat(8, 1fr) }
  .grid[columns="9"] { --grid-tc: repeat(9, 1fr) }
  .grid[columns="10"] { --grid-tc: repeat(10, 1fr) }
  .grid[columns="11"] { --grid-tc: repeat(11, 1fr) }
  .grid[columns="12"] { --grid-tc: repeat(12, 1fr) }
  
  /* span=start... */
  .grid > .cell[span^="1"] { --grid-cs: 1 }
  .grid > .cell[span^="2"] { --grid-cs: 2 }
  .grid > .cell[span^="3"] { --grid-cs: 3 }
  .grid > .cell[span^="4"] { --grid-cs: 4 }
  .grid > .cell[span^="5"] { --grid-cs: 5 }
  .grid > .cell[span^="6"] { --grid-cs: 6 }
  .grid > .cell[span^="7"] { --grid-cs: 7 }
  .grid > .cell[span^="8"] { --grid-cs: 8 }
  .grid > .cell[span^="9"] { --grid-cs: 9 }
  .grid > .cell[span^="10"] { --grid-cs: 10 }
  .grid > .cell[span^="11"] { --grid-cs: 11 }
  .grid > .cell[span^="12"] { --grid-cs: 12 }
  
  /* span=...+width, span=...-end */
  .grid > .cell[span$="+1"], .grid > .cell[span="1"] { --grid-ce: 1 }
  .grid > .cell[span$="+2"], .grid > .cell[span$="-1"], .grid > .cell[span="2"] { --grid-ce: 2 }
  .grid > .cell[span$="+3"], .grid > .cell[span$="-2"], .grid > .cell[span="3"] { --grid-ce: 3 }
  .grid > .cell[span$="+4"], .grid > .cell[span$="-3"], .grid > .cell[span="4"] { --grid-ce: 4 }
  .grid > .cell[span$="+5"], .grid > .cell[span$="-4"], .grid > .cell[span="5"] { --grid-ce: 5 }
  .grid > .cell[span$="+6"], .grid > .cell[span$="-5"], .grid > .cell[span="6"] { --grid-ce: 6 }
  .grid > .cell[span$="+7"], .grid > .cell[span$="-6"], .grid > .cell[span="7"] { --grid-ce: 7 }
  .grid > .cell[span$="+8"], .grid > .cell[span$="-7"], .grid > .cell[span="8"] { --grid-ce: 8 }
  .grid > .cell[span$="+9"], .grid > .cell[span$="-8"], .grid > .cell[span="9"] { --grid-ce: 9 }
  .grid > .cell[span$="+10"], .grid > .cell[span$="-9"], .grid > .cell[span="10"] { --grid-ce: 10 }
  .grid > .cell[span$="+11"], .grid > .cell[span$="-10"], .grid > .cell[span="11"] { --grid-ce: 11 }
  .grid > .cell[span$="+12"], .grid > .cell[span$="-11"], .grid > .cell[span="12"] { --grid-ce: 12 }
  .grid > .cell[span$="-12"] { --grid-ce: 13 }
  
  /* connect vars */
  .grid > .cell[span] { grid-column-end: span var(--grid-ce) }
  .grid > .cell[span*="+"], .grid > .cell[span*="-"], .grid > .cell[span*=".."] {
	grid-column-start: var(--grid-cs) }
  .grid > .cell[span*="-"], .grid > .cell[span*=".."] {
	grid-column-end: var(--grid-ce) }
  .grid > .cell[span="row"] { grid-column: 1 / -1 }
  
  /* for window width <= 600 */
  @media only screen and (max-width: 600px) {
	.grid[columns-s="1"] { --grid-tc: repeat(1, 1fr) }
	.grid[columns-s="2"] { --grid-tc: repeat(2, 1fr) }
	.grid[columns-s="3"] { --grid-tc: repeat(3, 1fr) }
	.grid[columns-s="4"] { --grid-tc: repeat(4, 1fr) }
	.grid[columns-s="5"] { --grid-tc: repeat(5, 1fr) }
	.grid[columns-s="6"] { --grid-tc: repeat(6, 1fr) }
	.grid[columns-s="7"] { --grid-tc: repeat(7, 1fr) }
	.grid[columns-s="8"] { --grid-tc: repeat(8, 1fr) }
	.grid[columns-s="9"] { --grid-tc: repeat(9, 1fr) }
	.grid[columns-s="10"] { --grid-tc: repeat(10, 1fr) }
	.grid[columns-s="11"] { --grid-tc: repeat(11, 1fr) }
	.grid[columns-s="12"] { --grid-tc: repeat(12, 1fr) }
	
	/* span-s=start... */
	.grid > .cell[span-s^="1"] { --grid-cs: 1 }
	.grid > .cell[span-s^="2"] { --grid-cs: 2 }
	.grid > .cell[span-s^="3"] { --grid-cs: 3 }
	.grid > .cell[span-s^="4"] { --grid-cs: 4 }
	.grid > .cell[span-s^="5"] { --grid-cs: 5 }
	.grid > .cell[span-s^="6"] { --grid-cs: 6 }
	.grid > .cell[span-s^="7"] { --grid-cs: 7 }
	.grid > .cell[span-s^="8"] { --grid-cs: 8 }
	.grid > .cell[span-s^="9"] { --grid-cs: 9 }
	.grid > .cell[span-s^="10"] { --grid-cs: 10 }
	.grid > .cell[span-s^="11"] { --grid-cs: 11 }
	.grid > .cell[span-s^="12"] { --grid-cs: 12 }
	
	/* span-s=...+width, span-s=...-end */
	.grid > .cell[span-s$="+1"], .grid > .cell[span-s="1"] { --grid-ce: 1 }
	.grid > .cell[span-s$="+2"], .grid > .cell[span-s$="-1"], .grid > .cell[span-s="2"] { --grid-ce: 2 }
	.grid > .cell[span-s$="+3"], .grid > .cell[span-s$="-2"], .grid > .cell[span-s="3"] { --grid-ce: 3 }
	.grid > .cell[span-s$="+4"], .grid > .cell[span-s$="-3"], .grid > .cell[span-s="4"] { --grid-ce: 4 }
	.grid > .cell[span-s$="+5"], .grid > .cell[span-s$="-4"], .grid > .cell[span-s="5"] { --grid-ce: 5 }
	.grid > .cell[span-s$="+6"], .grid > .cell[span-s$="-5"], .grid > .cell[span-s="6"] { --grid-ce: 6 }
	.grid > .cell[span-s$="+7"], .grid > .cell[span-s$="-6"], .grid > .cell[span-s="7"] { --grid-ce: 7 }
	.grid > .cell[span-s$="+8"], .grid > .cell[span-s$="-7"], .grid > .cell[span-s="8"] { --grid-ce: 8 }
	.grid > .cell[span-s$="+9"], .grid > .cell[span-s$="-8"], .grid > .cell[span-s="9"] { --grid-ce: 9 }
	.grid > .cell[span-s$="+10"], .grid > .cell[span-s$="-9"], .grid > .cell[span-s="10"] { --grid-ce: 10 }
	.grid > .cell[span-s$="+11"], .grid > .cell[span-s$="-10"], .grid > .cell[span-s="11"] { --grid-ce: 11 }
	.grid > .cell[span-s$="+12"], .grid > .cell[span-s$="-11"], .grid > .cell[span-s="12"] { --grid-ce: 12 }
	.grid > .cell[span-s$="-12"] { --grid-ce: 13 }
	
	/* connect vars */
	.grid > .cell[span-s] { grid-column-end: span var(--grid-ce) }
	.grid > .cell[span-s*="+"], .grid > .cell[span-s*="-"], .grid > .cell[span-s*=".."] {
	  grid-column-start: var(--grid-cs) }
	.grid > .cell[span-s*="-"], .grid > .cell[span-s*=".."] {
	  grid-column-end: var(--grid-ce) }
	.grid > .cell[span-s="row"] { grid-column: 1 / -1 }
  }
  
  /* for window width >= 1600 */
  @media only screen and (min-width: 1599px) {
	.grid[columns-l="1"] { --grid-tc: repeat(1, 1fr) }
	.grid[columns-l="2"] { --grid-tc: repeat(2, 1fr) }
	.grid[columns-l="3"] { --grid-tc: repeat(3, 1fr) }
	.grid[columns-l="4"] { --grid-tc: repeat(4, 1fr) }
	.grid[columns-l="5"] { --grid-tc: repeat(5, 1fr) }
	.grid[columns-l="6"] { --grid-tc: repeat(6, 1fr) }
	.grid[columns-l="7"] { --grid-tc: repeat(7, 1fr) }
	.grid[columns-l="8"] { --grid-tc: repeat(8, 1fr) }
	.grid[columns-l="9"] { --grid-tc: repeat(9, 1fr) }
	.grid[columns-l="10"] { --grid-tc: repeat(10, 1fr) }
	.grid[columns-l="11"] { --grid-tc: repeat(11, 1fr) }
	.grid[columns-l="12"] { --grid-tc: repeat(12, 1fr) }
	
	/* span-l=start... */
	.grid > .cell[span-l^="1"] { --grid-cs: 1 }
	.grid > .cell[span-l^="2"] { --grid-cs: 2 }
	.grid > .cell[span-l^="3"] { --grid-cs: 3 }
	.grid > .cell[span-l^="4"] { --grid-cs: 4 }
	.grid > .cell[span-l^="5"] { --grid-cs: 5 }
	.grid > .cell[span-l^="6"] { --grid-cs: 6 }
	.grid > .cell[span-l^="7"] { --grid-cs: 7 }
	.grid > .cell[span-l^="8"] { --grid-cs: 8 }
	.grid > .cell[span-l^="9"] { --grid-cs: 9 }
	.grid > .cell[span-l^="10"] { --grid-cs: 10 }
	.grid > .cell[span-l^="11"] { --grid-cs: 11 }
	.grid > .cell[span-l^="12"] { --grid-cs: 12 }
	
	/* span-l=...+width, span-l=...-end */
	.grid > .cell[span-l$="+1"], .grid > .cell[span-l="1"] { --grid-ce: 1 }
	.grid > .cell[span-l$="+2"], .grid > .cell[span-l$="-1"], .grid > .cell[span-l="2"] { --grid-ce: 2 }
	.grid > .cell[span-l$="+3"], .grid > .cell[span-l$="-2"], .grid > .cell[span-l="3"] { --grid-ce: 3 }
	.grid > .cell[span-l$="+4"], .grid > .cell[span-l$="-3"], .grid > .cell[span-l="4"] { --grid-ce: 4 }
	.grid > .cell[span-l$="+5"], .grid > .cell[span-l$="-4"], .grid > .cell[span-l="5"] { --grid-ce: 5 }
	.grid > .cell[span-l$="+6"], .grid > .cell[span-l$="-5"], .grid > .cell[span-l="6"] { --grid-ce: 6 }
	.grid > .cell[span-l$="+7"], .grid > .cell[span-l$="-6"], .grid > .cell[span-l="7"] { --grid-ce: 7 }
	.grid > .cell[span-l$="+8"], .grid > .cell[span-l$="-7"], .grid > .cell[span-l="8"] { --grid-ce: 8 }
	.grid > .cell[span-l$="+9"], .grid > .cell[span-l$="-8"], .grid > .cell[span-l="9"] { --grid-ce: 9 }
	.grid > .cell[span-l$="+10"], .grid > .cell[span-l$="-9"], .grid > .cell[span-l="10"] { --grid-ce: 10 }
	.grid > .cell[span-l$="+11"], .grid > .cell[span-l$="-10"], .grid > .cell[span-l="11"] { --grid-ce: 11 }
	.grid > .cell[span-l$="+12"], .grid > .cell[span-l$="-11"], .grid > .cell[span-l="12"] { --grid-ce: 12 }
	.grid > .cell[span-l$="-12"] { --grid-ce: 13 }
	
	/* connect vars */
	.grid > .cell[span-l] { grid-column-end: span var(--grid-ce) }
	.grid > .cell[span-l*="+"], .grid > .cell[span-l*="-"], .grid > .cell[span-l*=".."] {
	  grid-column-start: var(--grid-cs) }
	.grid > .cell[span-l*="-"], .grid > .cell[span-l*=".."] {
	  grid-column-end: var(--grid-ce) }
	.grid > .cell[span-l="row"] { grid-column: 1 / -1 }
  }
  


  
@media all and (max-width : 768px) {

	body {
		padding-top: 120px;
	}

	.container {
		padding: 10px 20px;
	}

	#logo {
		display: block;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
	}
	
	.description {
		margin-top: 10px;
	}

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: var(--base);
		padding:14px 20px;	
		color:#FFF;
		font-size:17px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #000000;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #000000;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #212121; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}