:root {
	
	--al-color: rgb(128, 0, 0); /*  maroon */
	--al-color05: rgba(128, 0, 0, 0.5);

	--al-colWrapp: 	  rgb(96, 44, 19);
	--al-colWrappTr: rgba(96, 44, 19, 0.5);
	--al-colTxt: rgb(96, 44, 19);
	--al-colBG: SandyBrown;

	/* var(--al-colTxt) */
	/* var(--al-colWrapp) */
	/* var(--al-colWrappTr) */
	/* var(--al-colBG) */


	--white: #ffffff;
  }
  
/* default elements */
* { margin: 0; 
	padding: 0;
    box-sizing: border-box;
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}
body {
	background: #7C6F5C url(img/bg.jpg);
	/* color: #222; */
	/* font: normal 62.5% serif; */
	font: normal 62.5% sans-serif;
	/* padding: 0; */
	padding: 1% 2%;
}

a 		{color: #642;}
a:hover {color: #963;}

big 	{font-size: 1.1em;}

/* Type */

html {	font-size: 16pt; }
	@media screen and (max-width: 1680px){	html { font-size: 12pt;	}	}
	@media screen and (max-width: 736px) {	html { font-size: 11pt;	}	}
	@media screen and (max-width: 360px) {	html { font-size: 10pt;	}	}

body, input, select, textarea {
	color: var(--al-colTxt);
	/* font-family: "Source Sans Pro", serif; */
	font-family: verdana, tahoma, sans-serif;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.65;
}

a {
	-moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	border-bottom: dotted 1px rgba(255, 255, 255, 0.5);
	/* text-decoration-line: underline; */
	/* text-decoration-style: dashed; */
	/* text-decoration-color: red; */
	color: inherit;
}

	a:hover {
		border-bottom-color: transparent;
	}

strong, b {
	color: var(--al-colTxt);
	font-weight: 600;
}

em, i {
	font-style: italic;
}

p {
	margin: 0 0 2rem 0;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--al-colTxt);
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 1rem 0;
	/* text-transform: uppercase; */
	letter-spacing: 0.2rem;
}

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		color: inherit;
	}

	h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
		border-bottom: solid 1px #ffffff;
		width: -moz-max-content;
		width: -webkit-max-content;
		width: -ms-max-content;
		width: max-content;
		padding-bottom: 0.5rem;
		margin: 0 0 2rem 0;
	}

h1 {
	font-size: 2.25rem;
	line-height: 1.3;
	letter-spacing: 0.5rem;
}
h2 {
	font-size: 1.5rem;
	line-height: 1.4;
	letter-spacing: 0.5rem;
}
h3 { font-size: 1rem; }
h4 { font-size: 0.8rem; }
h5 { font-size: 0.7rem; }
h6 { font-size: 0.6rem; }

@media screen and (max-width: 736px) {
	h1 {
		font-size: 1.75rem;
		line-height: 1.4;
	}
	h2 {
		font-size: 1.25em;
		line-height: 1.5;
	}
}

sub {
	font-size: 0.8rem;
	position: relative;
	top: 0.5rem;
}

sup {
	font-size: 0.8rem;
	position: relative;
	top: -0.5rem;
}

blockquote {
	border-left: solid 4px #ffffff;
	font-style: italic;
	margin: 0 0 2rem 0;
	padding: 0.5rem 0 0.5rem 2rem;
}

code {
	background: rgba(255, 255, 255, 0.075);
	border-radius: 4px;
	font-family: "Courier New", monospace;
	font-size: 0.9rem;
	margin: 0 0.25rem;
	padding: 0.25rem 0.65rem;
}

pre {
	-webkit-overflow-scrolling: touch;
	font-family: "Courier New", monospace;
	font-size: 0.9rem;
	margin: 0 0 2rem 0;
}

	pre code {
		display: block;
		line-height: 1.75;
		padding: 1rem 1.5rem;
		overflow-x: auto;
	}

/* hr {
	border: 0;
	border-bottom: solid 1px #ffffff;
	margin: 2.75rem 0;
} */
hr { 
	display: block;
	margin: 0.5em 20em;
	/* margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 20px; */
	/* height: 8px; */
	/* // background-color: red; */
	background-image: linear-gradient(90deg, transparent, maroon, transparent, maroon, transparent);

	border: 0;
	height: 2px;
}

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

form,table {margin-bottom: 1.2em;}
img {border: none;}
label {display: block;}
/* li {line-height: 1.5em;} */
p {padding: 2px 0 10px;}
small,.small {font: normal 0.7em sans-serif;line-height: 80%;}
/* ul {padding: 0 2em 1.2em;} */

/* structure */
#wrapper {
	background: var(--al-colWrappTr);
	margin: 0 auto;
	/* width: 762px; */
}

#container {
	background: var(--al-colBG);
	border-top: 6px solid var(--al-colWrappTr);
	font-size: 1.3em;
	line-height: 1.3em;
	margin: 0 auto;
	
	padding: 0 2rm;	
	/* width: 750px; */
	/* width: calc(100%-10px); */
}

/* header */
@font-face {
  font-family: myFirstFont;
  src: url("../ale_assets/font/foglihtenno07/FoglihtenNo07.otf");
}
/* 
div {
  font-family: myFirstFont;
} */


	
div .al-title a {
	text-decoration-line: none;
}
div .al-title a:hover {
	text-decoration-line: dotted;
	text-decoration-color: black;
}
div .al-title {
	background: var(--al-colBG);
	border-top: 3px solid #996;
	margin-left: 2%;
	
	padding: 4% 1% 3% 1%;
	
	font-size: 2em;
	font-family: myFirstFont;

}

/* bottom */
.bottom {
	/* background: var(--al-colBG); */
	border-top: 2px solid var(--al-colWrapp);
	border-bottom: 5px solid var(--al-colWrappTr);
	/* color: #444; */
	padding-top: 10px;
	padding-bottom: 10px;
	/* padding: 10px 20px; */
	/* height: 50px; */
}
.bottom .left,.bottom .right {width: 49%;}

/* footer */
.footer {
	background: var(--al-colWrappTr);
	/* color: rgb(80, 241, 55); */
	padding: 10px;
}
.footer .left {width: 66%;}
.footer .right {
	width: 33%;
	text-align: right;
}
.footer a {
	color: var(--al-colTxt);
	text-decoration: none;
}
.footer a:hover, .footer .right a:hover {
	color: var(--al-colTxt);
	text-decoration: underline;
}
.footer .right, .footer .right a {color: var(--al-colBG);}

/* gallery */
.gallery td {
	vertical-align: top;
	text-align: center;
}
.gallery em {display: block;}

/* misc */
.clear,.clearer {clear: both;}
.clearer {font-size: 0;}
.col2 .left {width: 64%;}
.col2 .right .content {background: #FFF;}
.col2 .right {width: 33%;}
.content {padding: 18px 20px;}
.left {float: left;}
.right {float: right;}
.right .content {padding: 18px 12px 12px;}

/* media */


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	body {
		background: #7C6F5C;
		/* color: #222; */
		font: normal 62.5% sans-serif;
		margin: 0;
		padding: 0;
	}
	#wrapper {		width: 100%;
					min-width: 300px;
					margin: 0;
					padding: 0;	}
	#container {	width: 100%;
					border-top: 0;
					margin: 0 ;	}
  }

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) {
	#wrapper {		width: 600px;	}
	#container {	width: 600px;	}
  }
  
  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {
	#wrapper {		width: 768px;	}
	#container {	width: 756px;	}
  } 
  
  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 992px) {
	#wrapper {		width: 992px;	}
	#container {	width: 980px;	}
  } 
  
  /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1200px) {
	#wrapper {		width: 1200px;	}
	#container {	width: 1186px; }
  }


/* TOPNAV = menu */
/* TOPNAV = menu *//* TOPNAV = menu *//* TOPNAV = menu */
/* body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
} */

.topnav {
  overflow: hidden;
  background-color: var(--al-colWrapp);
  padding: 0 1%;
	border-radius: 22px 6px;
}

.topnav a {
  float: left;
  display: block;
  /* background-color: #333; */
  color: #f2f2f2;
  text-align: center;
  margin: 1px;
  padding: 10px 16px;
	border-radius: 22px 6px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  /* background-color: pink; */
  background-color: var(--al-colBG);
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a {display: none;}
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    background-color: var(--al-colBG);
    display: block;    
    width: 55px;
    margin-right: 15px;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    /* margin-right:50; */
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/* END    TOPNAV = menu *//* TOPNAV = menu *//* TOPNAV = menu */