@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
:root {
      all: unset;
    --font-family: 'Raleway', sans-serif;
    --header-height: 28px;
	  --footer-height:70px;
    --normal-width:850px;
	  --narrow-width:950px;
   /* --main-bg-color: rgba(247, 254, 253, 0.89);*/
    --main-bg-color: background: #f5f6f6; /* Old browsers */
			background: -moz-linear-gradient(-45deg,  #f5f6f6 0%, #f5f6f6 11%, #dbdce2 21%, #dddfe3 64%, #b8bac6 79%, #f5f6f6 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(-45deg,  #f5f6f6 0%,#f5f6f6 11%,#dbdce2 21%,#dddfe3 64%,#b8bac6 79%,#f5f6f6 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(135deg,  #f5f6f6 0%,#f5f6f6 11%,#dbdce2 21%,#dddfe3 64%,#b8bac6 79%,#f5f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
			opacity: 0.85;
    --main-text-color: #0b0b0b;
    --alt-bg-color: background: #bebdc7;
      background: linear-gradient(45deg, rgba(190, 189, 199, 1) 52%, rgba(224, 221, 227, 1) 100%, rgba(211, 211, 230, 1) 100%, rgba(211, 211, 230, 1) 100%);
    --button-color: #436cca;
    --button-hover-color:#8cb4f9;
    --larger-font-size: 3.0em;
    --normal-font-size: 1.1em;
    --smaller-font-size: 0.91em;
    --h1-font-size:3.0em;
    --h2-font-size:2.0em;
    --h3-font-size:1.8em;
    --h4-font-size:1.2em;
    --border-style:inset;
    --border-radius:15px;
    --border-width:2px;
    --border-color: #e5c5f9;
    --z-fixed: 100;
   
}
a:link {
  color: rgb(13, 14, 14);
  /*background-color:transparent;*/
  text-decoration: none;
}

a:visited {
  color: rgb(48, 51, 51);
  /*background-color: transparent;*/
  text-decoration: none;
}

a:hover {
  color:#031111;
  /*background-color: transparent;*/
  text-decoration: underline;
}

a:active {
  color:#1d1c1c;
  /*background-color:transparent;*/
  text-decoration:none;
}
.a_color{

	color:#a47ef6;
}


.banner{
  max-width:380px;
  position:relative;
  top: 10px;
  left:20px;
  padding-bottom: 20px;
  margin-bottom:20px;
 
}

.banner_img{
max-height:200px;


}

#bg_image{
	background-image: url(../images/cityblurred.jpg);
	background-color: #333;
	background-size:cover;
	filter:hue-rotate(90deg);
	filter:saturate(5);
	filter:sepia(10%);
	filter:contrast(180%)brightness(90%);
	filter:contrast(120%);
	filter:opacity(90%);
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index:-1;

}

#bg_pattern
{
	background-image: url(../images/patterns/pattern.png);
	background-repeat:repeat;
	/*background-color: #a480d9;*/
	background-color: transparent;
	position: fixed;
	filter:hue-rotate(50deg);
	filter:saturate(5);
	filter:opacity(80%);
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index:-1;
}

.block{
margin:auto;
text-align:justify;
font-size: var(--smaller-font-size);
padding:15px;
max-width:800px;
border-style: var(--border-style);
border-color: var(--border-color);
border-radius:var(--border-radius);

}

.block:hover
{
	box-shadow:1px 1px 1px #4b1588;

}


.rt_block{
margin:auto;
text-align:justify;
font-size: var(--smaller-font-size);
padding:15px;
max-width:800px;
border-style: var(--border-style);
border-color: var(--border-color);
border-radius:var(--border-radius);

}

.rt_block:hover
{
	box-shadow:1px 1px 1px #4b1588;

}


body {margin:0;
  background-color: var(--alt-bg-color);
  color: var(--main-text-color);
  font-size: var(--normal-font-size);
  font-family:var(--font-family);

}

.bracket{
display:flex;
margin:auto;
flex-direction: column;
flex-wrap:wrap;
min-width:300px;
max-width:420px;

}

ul.breadcrumb {
	margin-top:-40px;
	padding: 10px 10px;
	list-style: none;
	background-color: #021920;
	color:#fff;
    text-shadow: 0px 1px 0px rgba(255,255,255,.5); /* 50% white from bottom */
	box-shadow:2px 2px 1px grey;
  }
  
  /* Display list items side by side */
  ul.breadcrumb li {
	display: inline;
	font-size: 16px;
  }
  
  /* Add a slash symbol (/) before/behind each list item */
  ul.breadcrumb li+li:before {
	padding: 6px;
	color: black;
	content: "/\00a0";
  }
  
  /* Add a color to all links inside the list */
  ul.breadcrumb li a {
	/*color: #0275d8;*/
	color:#fcc86f;
	text-shadow: 0px 1px 0px rgba(255,255,255,.5); /* 50% white from bottom */
	text-decoration: none;
  }
  
  /* Add a color on mouse-over */
  ul.breadcrumb li a:hover {
	/*color: #01447e;*/
color:#fff;
	text-decoration: underline;
  } 



.calcinput{
    margin:10px;
 		border-right: 3px inset rgb(131, 122, 122);
 		border-top: 3px inset rgb(222, 214, 214);
 		font-size: var(--normal-font-size);  
 		border-left: 1px inset rgb(42, 39, 39);
 		color: #000;
 		border-bottom: 4px inset rgb(238, 229, 229);
		background-color:#fcfeff;
		max-width:80px;
    min-height:20px;
 	}

	.calcinput:focus {
  background-color: rgb(137, 117, 146);
  color:#fff;
}

	.calcinput_wide{
    margin:10px;
 		border-right: 3px inset grey;
 		border-top: 3px inset rgb(222, 214, 214);
    border-radius:5px;
 		font-size: var(--normal-font-size);  
 		border-left: 1px inset grey;
 		color: var(--main-text-color);
    border-bottom: 1px inset grey;
		background-color:#abb0ee;
		max-width: 100px;
 		max-width:100%;
    min-height:20px;
 	}

	.calcinput_wide:focus {
  background-color: rgb(225, 222, 232);
  color:#1d1c1e;
  }


.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin:1%;
  animation: reveal 4.2s ease forwards;
}
.encasing{
	border-radius:15px;
	border-width: 3px;
	animation: colors 12s infinite;
}

@keyframes colors {
	0% {
		border-color:rgba(239, 235, 198, 0.9);
		border-style:inset;
	}
	20% {
		border-color:rgba(152, 152, 145, 0.6);
		border-style:outset;
	}
	40% {
		border-color:rgba(140, 156, 71, 0.84);
		border-style:inset;
	}
	60% {
		border-color:rgba(190, 127, 98, 0.87);
		border-style:outset;
	}
	80% {
		border-color:rgba(227, 226, 221, 0.71);
		border-style:inset;
	}
	100% {
		border-color:rgba(221, 197, 236, 0.9);
		border-style:outset;
	}
}

@keyframes reveal {
  from {
    filter: blur(8px);
  }
  to {
    filter: blur(0);
  }
}


.engraved {
  margin: 25px auto;
    /*margin:0 auto;*/
    max-width:400px;
    color: #333;
    background-color: #666;
    text-shadow: 0px 1px 0px rgba(255,255,255,.5); /* 50% white from bottom */
    
}

.hidden{
	display:none;
	visibility:hidden;
}

.item {
  width: 46%;
  text-align: justify;
  padding:5px;
  min-height:400px;
  margin-bottom: 2%;
  font-size:var(--normal-font-size);
  border-style:var(--border-style);
  border-width:var(--border-width);
  border-radius:var(--border-radius);
  border-color:var(--border-color);
  background: rgb(252, 255, 254);
}

.item:nth-child(3n-2) {
  width: 100%;
}

h1{
text-align: center;
vertical-align: middle;
line-height: 1,6;     
font-size:var(--h1-font-size);
}

h2{
text-align: center;
vertical-align: middle;
font-size:var(--h2-font-size);
line-height: 1.6; 

}


h3{
text-align: center;
vertical-align: middle;
font-size:var(--h3-font-size);
line-height: 1.6; 

}

h4{
text-align: center;
vertical-align: middle;
font-size:var(--h4-font-size);
line-height: 1.6; 

}

img{
display:flex;
margin:auto;
max-width:100%;
padding:5px;
}

.mask{
 --fade-start: 50%;
 mask-image: linear-gradient(to bottom, white var(--fade-start), transparent);
}



.ml2 {
  font-weight: 900;
  font-size: 3.5em;
}

.ml2 .letter {
  display: inline-block;
  line-height: 1em;
}

.ngrave {
  color: white;
	  text-shadow: 1px 1px 2px black, 0 0 15px blue, 0 0 3px darkblue;

}
.ngrave:link{
color:#fff!important;
text-decoration: none;
}

.pagination{
text-align: center;
/*background-color: #489ff7ed;*/
background-color: #3a4857ed;
padding:10px;
color:#000;
border-radius:5px;
}


p::first-letter {
			 color: #f9a20c;
			 text-shadow:1px 1px 1px #000;
			 font-size: 1.4em;
			 line-height: 1.1px;
	 }

/*The following classes are for Iframe video responsive sizing*/
.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}



.silver_gradient
{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f6f6+0,f5f6f6+11,dbdce2+21,dddfe3+64,b8bac6+79,f5f6f6+100 */
	background: #f5f6f6; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #f5f6f6 0%, #f5f6f6 11%, #dbdce2 21%, #dddfe3 64%, #b8bac6 79%, #f5f6f6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #f5f6f6 0%,#f5f6f6 11%,#dbdce2 21%,#dddfe3 64%,#b8bac6 79%,#f5f6f6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #f5f6f6 0%,#f5f6f6 11%,#dbdce2 21%,#dddfe3 64%,#b8bac6 79%,#f5f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color:#000;
max-width: 100%;
}

.black_gradient{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#959595+0,0d0d0d+46,010101+50,0a0a0a+53,4e4e4e+76,383838+87,1b1b1b+100;Black+Gloss+Pipe */
	background: #959595; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 color:#fff;
 max-width: 100%;
 margin-top:-2px;
 opacity:0.95;


}

.video_size{
max-width:600px;
border-style: var(--border-style);
border-color: var(--border-color);
border-radius:var(--border-radius);
}

.yellow{
color: #ef9e06;
 text-shadow: 2px 2px #041c1c;

}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
h1{
  font-size:2.0em;
}

 h2{
font-size:1.8em;

 }
h3{
font-size:1.4em;

}

  .ml2{
    font-size:2.0em;
  }

  .item{
 font-size: var(--smaller-font-size);
  
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  
}
@media all and(max-width:500px){
	ul.breadcrumb{
		display: block;
		list-style: none; 
    	overflow: hidden; 
		font-size: 8px;
	}
	ul.breadcrumb li a{
		display: block;
		 padding:10px 0 10px 10px;
	}
}


@media screen and (min-width: 320px)and (max-width: 600px) {

ul.breadcrumb {
    margin-top:-38px;
	}
}