html{
	background-image: url("../images/paperback.jpg");
	background-repeat: repeat;
}
video{ 
	position:relative;
	padding-top:0em;
	height:15em;
	width:20em;
}

body{
	
	background-image: url("../images/paperfront3.jpg");
	background-repeat: repeat;
	
	
	max-width:1440px;
	width: 95%;
	margin: 0 auto;
	padding: 0;
	background-color: white;
	border:  solid black 4px;
	box-shadow: 10px 10px 50px black;
	margin: 0 auto;
	font-size: 110%;
	}
/* Make the header overlay on top of the carousel */
#headerOverlay {
    position: absolute;
    top: 20px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    color: white; /* Or any color that contrasts with your images */
    width: 100%;
	padding-right: 25em;
	max-width:1880px;
}

#section2{ text-align:center;  background-color: rgba(0, 0, 0, 0.2); }

img#logoImg{
	float: right;
	padding-right: 1.875em;
	
	width: 10.6%;
	min-width: 60px;
	max-width: 105px;
}
header h2{	
	width:80%;
	font-size:225%;
	margin:0 ;
	padding-top:15px;
	color:black;
	text-shadow: -1px -1px 0 Red,  
                  1px -1px 0 red,
                 -1px 1px 0 red,
                  1px 1px 0 red;
				  
}
header h3{
	width:70%;
	font-size:120%;
	margin:0;
	color:black;
	text-shadow: -1px -1px 0 #9d9ea1,  
                  1px -1px 0 #9d9ea1,
                 -1px 1px 0 #9d9ea1,
                  1px 1px 0 #9d9ea1;	
}

/*Top navigation menue*/
#nav_menu {
	clear: left;
	background-color:black;
}
#nav_menu ul {
	margin:0;
	padding: 0;
	list-style-type: none;
	position: relative;
}
#nav_menu ul li {
	float: left;
	width:20%;
	height:44.18px;
	/* background-color:rgb(50,0,0); */
	/* text-align:center; */
	
	
}
#nav_menu ul ul{
	display:none; 
	position:absolute;
	top:100%;
	
}
#nav_menu ul ul li{ float:none;}
#nav_menu ul li:hover > ul { 
display:block; 
z-index: 1; 
transition-duration: 2s; 
/* max-width:270.37px; */
}

#nav_menu > ul::after{ 
	content:" ";
	display:block;
	clear:both;
	
	border-radius:0px;
}
#nav_menu ul li:hover ul {width: 100%}
#nav_menu ul li a{
	font-size: 90%;
	display: block;
	padding: .8em;
	text-align:center;
	text-decoration:none;
	color:rgb(160,160,160);
	background-color:rgb(50,0,0);
	/* border: 1px solid Red;  */
	/* border-radius:0px 0px 8px 8px; */
}
#nav_menu ul li a.current{
	color:rgb(200,0,0);
}
#nav_menu ul li a:hover{
	background-color:Red;
	color:black;
}



/*Image scrolling*/
.carousel {
    position: relative;
    /* max-width: 100%; */
	width:auto;
	max-height: 600px;
    overflow: hidden;
	align-items:center;
	justify-content:center;
	background: radial-gradient(circle, rgba(0, 0, 0, 1) 2%, rgba(200, 0, 0, 1) 1%, rgba(0, 0, 0, 1) 80%);
	/* background-color:black; */
	z-index: 1;
	
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
	
}

.carousel-item {
    min-width: 100%;
	align-items:center;
	justify-content:center;
	
    
}

#Cimg {
    width: 100%;
    height: auto;
    object-fit: contain; 
	max-height: 500px;
	align-items:center;
	justify-content:center;
	mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 40%);
   
	clip-path: circle(60% at center);

}

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    cursor: pointer;
	color:red;
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}



main{	
	    /* display: flex; */
        align-items: center;
        justify-content: center; 
        text-align: center;
		
		/* padding-left:8em; */
		
}
main h1{
	font-size:200%;
	text-shadow: 2px 2px Red;

}
main h2{
	font-size:150%;
}
main h3{
	font-size:120%;
}
main img{
	
}
main pre{font-weight:bold;}



.column {
  /* justify-content:center; */
  float: left;
  width: 33.33%;
  text-align: center;
  

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
img#Simg {
    width: 60%;
    height: auto;
    object-fit: contain; 
	max-height: 300px;
	align-items:center;
	justify-content:center;
	
	
	
	
}




a:visited{color:black;}
a:link{color: black; font-weight:bold;}
a:hover, a:focus{color:rgb(180,0,0);}

li{line-height:1.5;}

/* gallery styles */

.gallery{
	display:grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-gap:20px;
	
	max-width:1000px;
	margin:0 auto;
}

.gallery img {
	width: 20%;
	height: 15%;
	object-fit:cover;
	
	padding:10px;
	border: 1px solid rgb(0,0,0);
	background: rgb(0,0,0);
	
}

.gallery img:hover{
	z-index:9;
	transform:scale(1.3);
	transition: transform ease 0.5s;
}

.gallery img.full{
	position: fixed; top:0; left:0; z-index:999; width:100vw; height:100%;
	oboject-fit: contain;
	background:rgb(0,0,0);
}

.gallery img.full:hover{
	z-index:999;
	transform:none;
}





#sidebarA {
	width: 20%;
	height:100%;
	height: 1700px;
	position:relative;
	
	float:left;
	padding-bottom:0em;
	background-color:rgba(0,0,0,.5);
}
/*Side navigation menue*/
#nav_side ul {
	width: 50%;
	list-style-type: none;
	margin-left: 0em;
	margin-top: 1em;

}
#nav_side ul li {
	
   margin-bottom:1em;
	width:100%;
	height:44.18px;
	/* background-color:rgb(50,0,0); */
	/* text-align:center; */
}
#nav_side ul li a{
	font-size: 90%;
	display: block;
	padding: .8em;
	text-align:center;
	text-decoration:none;
	color:rgb(160,160,160);
	background-color:rgb(50,0,0);
}
#nav_side ul li a:hover{
	background-color:Red;
	color:black;
	
}


#nav_side ul li a.current{
	color:rgb(200,0,0);
}


footer { 
		font-size: 75%;
		clear: both;
		text-align: left;
		color:grey;
		background: radial-gradient(circle, rgba(0,0,0,1) 13%, rgba(255,0,0,1) 18%, rgba(0,0,0,1) 41%);
		border: solid black 1px;
		padding: .1em ;
		padding-top: .1em ;
		
	}
	span{
	text-align: left;
}



#mobile_menu{
	display: none;
}
@media only screen and (max-width: 1265px){
	
html{
	
	font-size: 90%;
}

body{
	box-shadow: none;
}
section {
	float: none;
}
 video{height:120%; width:140%; padding-top:4em;} 
figcaption{font-size:100%;}
}
@media only screen and (max-width: 975px){

/* video{height:40%; width:60%;} */
}

@media only screen and (max-width: 800px){
	
html{
	
	font-size: 90%;
}

body{
	box-shadow: none;
}

#sidebarC img{ display:none;}
#sidebarB img{ display:none;}
#sidebarA{padding-left:4em;}
video{padding-top:4em; padding-right:4em;}
figcaption{font-size:40%;}
}


#nav_side ul {
	width: 50%;

}

@media only screen and (max-width: 667px){
	
#mobile_menu{
	display: block;
}

#nav_menu{
	display: none;
}
html{background-image: none;}

header h2{
	font-size: 200%;
}
main{padding-top:0;}

aside{
	width: 90%;
	float: none;
	padding: 0 5% 1em 5%;
}
#sidebarA{
	padding-left:0em; 
	width: 95%;
	height: 100%;
}

#nav_side ul {
	width: 50%;
	padding-left: 10em;

	text-align: center;
}

#nav_list ul li a{
	padding-left: 0%;
}

#headerOverlay {   
	padding-right: 0em;
}
.carousel{padding-top: 9em;}

img#Cimg {
    
	mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 80%);
	clip-path: circle(60% at center);

}

#headerOverlay {
    
    
	padding-right: 0em;
}

	
}	



@media only screen and (max-width: 479px){
img#logoImg{
	float: right;
	padding-right: .3em;
	width: 10.6%;
	min-width: 60px;
	max-width: 105px;
	
header h2{
	font-size: 90%;
}	
	
header h3{
	font-size: 90%;
}	
	
h1{
	font-size: 90%;
}

#sidebarC img{ Display:none;}
video{display:none;}
figcaption{display:none;}

}