/* RESET */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
	 blue: 02314C
	 font: Trebuchet MS
	 
	 whatstare back #777777
	 textwave #314825
	 home title is malgun gothic font
	 
*/
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table, table.tabler {
	float:left;
 	display:inline-block;
/*	border-collapse: collapse;*/
/*	border-spacing: 0;*/
	width: 49%;
	margin:1.5em 0 2em 0;
	padding:3em 0.5em 0.5em 0.5em;
	border:1px solid #ccc;
}
table.tabler {
	float:right;
}
td{
 	font-size:1.1em;
 	color:#02314C;
 	font-weight:bold; 
	vertical-align:middle;
	padding:1em 0 0 1em;
}
td.col1{
	width:40%;
 	vertical-align:middle;
}
td.wte{
	color:#ffffff;
}
td.last{
	padding:0.5em 0 1em 1em;
}

/*default cursor to pointer on anchors*/
a { cursor: pointer; }

body{
 	font:80% Museo Sans,Arial,sans-serif;
 	color:#888;
 	background:#fff;
	margin:0 0.2rem 0 0.2rem;
	margin:0 0 0 0;	

 
}
h1{
/*	done*/	
/*float:left;*/
/* 	width:30%; */
/* 	display:inline;*/
	float:right;
	font-size:2.5rem;
	font-size:1.7rem;	
/* 	font-weight:400;*/
	margin:0 0 0 0;
 	padding: 1rem 0 1rem 0;
/*	color:#c66d00;*/
	color:#0e2a23;
	color:#013220;
} 
h2, h3{
	width:100%;
	text-align: right;
/*	display:inline-block;*/
	font-size:1.0em;
 	font-weight:bold; 
  color:#888;
 	margin:0;
  padding:0.5em 0 0.5em 0;
} 
h2{
	text-align: left;
 	color:#0e2a23;
	color:#111; 	
	font-size:2.5rem;	
 	font-weight:normal; 	
  	padding:4rem 0 0.4rem 1rem;
 	padding:3.8rem 0 0.5rem 0.5rem;  	
} 
img.bann{
 	float:left;	
 	text-align:center;
 	width:15%; 
	margin:0.3em 0 0.3em 0;
	padding:0;
}
img.info{
/*	  	float:right;
 	width:5%;  */
	padding:0 0 0 0; 
/*	margin:2em 2em 0 0;*/
}

img.whatstare{
 	float:right;
 	width:100%; 
	padding:10em 2em 0 0; 
	margin:0 0 0 0;
/*	border:1px solid #fff;*/
/* 	display:inline-block;*/
}

img.home, img.aboutsml, img.homeX{
 	float:left;
 	width:10%; 
	padding:0; 
	margin:0.5rem 0 0 1rem;
	border:1px solid #ccc;
/*	border:1px solid #ddd;*/
/*	 display:inline-block;*/
}
img.aboutsml{
 	width:20%;
	border:none; 
}
img.homeX{
 	float:left;
}

img.homeZ{
	float:right;
	border:2px solid #0e2a23;
	margin:1.5rem 0 0 0;
	padding:0 0 0 0;
	height:60px;	
	width:60px;
}
img.homeZ:active, img.homeZ:hover { 
	border:1px solid #c66d00;
	border:2px solid #b03f3f;
}




img.home:active, img.home:hover { 
	border:1px solid #c66d00;
	border:1px solid #b03f3f;
}
/*img.back,img.logo{*/
img.back{
 	float:left;
 	width:100%; 
	padding:2.5em 0 0.4em 0; 
	margin:0.8em 0 0 0; 
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;

/*	margin-bottom:0.5em;*/
/* 	display:inline-block;*/
}
/*img.logo{
 	width:33%;
	border:1px solid #ddd; 
}*/
 ul.circs{
	float:right;
 	display:inline-block;
 	width:45%; 
 	padding:1.2em 0 0 0;
 	margin:0;
}
ul.circs li{ 
	float:right; 
 	margin: 0.5em;
}
.circs a { 
	display: block;
	font-weight:bold; 
 	line-height: 2em;
 	-webkit-border-radius: 50%;
 	-moz-border-radius: 50%;
 	border-radius: 50%;
	height: 25px;
	width: 25px;
	border:2px solid #888;
}
.circs a:hover { 
	border:2px solid #c66d00;
	border:2px solid #b03f3f;
}
a, a.cat, a.catm, a.catr, a.ab{
	text-decoration: none;
 	display:block;
	outline:none;
/* 	font-size:1em;*/
	color:#02314C;
	color:#044E7A;
		color:#111;
	margin:0 0 0 0;		
}
a:hover, a.cat:hover, a.catm:hover, a.catr:hover, a.ab:hover{
 	color:#c66d00; 
 	color:#b03f3f;
}
a.cat, a.catm, a.catr, p.scat, a.ab{
 	font-size:1.3rem;
 	font-weight:normal; 
	padding:0 0 0 0;
}
a.catm{
	padding-left:4em;
}
a.catr{
	padding-left:4em;
}
a.ab{
 	font-size:1.2rem;
	padding:2.7rem 0 0 0;
	color:#333;	
	
}

p,p.abt{
	clear:both;
 	line-height:150%;
 	font-size:1rem;
 	padding:1em 1em 0 0;
 	margin:0 2em 0 2em;
	text-align:left;
	color:#02314C;
	color:#111;
}
p.sml{
/* position: absolute;  
  	top: 750px;
	width:80em;*/
/*	float:left;
 	display:inline-block;*/
 	padding:1rem 0 0 1rem ;
 	margin:0 0 0 0;
 	padding:0.3rem 0 0 0; 	
/*	text-align:left;*/
 	font-size:1rem;
	color:#111;
/*	border:1px solid #777;*/
/*	border-bottom-right-radius:30px;
	border-bottom-left-radius: 30px;*/
/*	background:#ddd;*/
}
p.smlhead{
/* position: absolute;  
  	top: 750px;
	width:80em;*/
/*	float:left;
 	display:inline-block;*/
 	padding:1rem 0 1rem 0 ;
 	margin:0.2rem 0 0.2rem 0;
	text-align:center;
 	font-size:1.9rem;
	color:#111;
	border-top:1px solid #0e2a23;	
	border-bottom:1px solid #111;
	border:1px solid #111;
/*	border-top-right-radius:30px;
	border-top-left-radius: 30px;*/
/* IE10+ */ 
background-image: -ms-linear-gradient(left, #FFFFFF 0%, #FFFFFF 25%, #DDDDDD 50%, #FFFFFF 75%, #ffffff 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(left, #FFFFFF 0%, #FFFFFF 25%, #DDDDDD 50%, #FFFFFF 75%, #ffffff 100%);

/* Opera */ 
background-image: -o-linear-gradient(left, #FFFFFF 0%, #FFFFFF 25%, #DDDDDD 50%, #FFFFFF 75%, #ffffff 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FFFFFF), color-stop(25, #FFFFFF), color-stop(50, #DDDDDD), color-stop(75, #FFFFFF), color-stop(100, #ffffff));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(left, #FFFFFF 0%, #FFFFFF 25%, #DDDDDD 50%, #FFFFFF 75%, #ffffff 100%);

/* W3C Markup */ 
background-image: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 25%, #DDDDDD 50%, #FFFFFF 75%, #ffffff 100%);	
	background:#fff;	
	
	
}
/*#abpg p.sml{
  position: static; 
 	margin:1em 0 2em 0;
}*/

p.abt{
/*	float:left;*/
 	display:inline-block;
 	font-size:1.3rem;
/* 	padding:0 0 1rem 0;*/
}
div.wrap{
/*	width:70em;*/
	width:80em;
	margin:0.2em auto;
 	background:#fff;
	padding:1em 0 0 0;
/*	 	padding:0.3em 1em 0.3em 3em;
	border-top:5px solid #eee;
	border-right:5px solid #eee;
	border-bottom:5px solid #eee;*/
}

div.wrap2{
/*	width:70em;*/
/*		float:left;*/
	width:80em;
	margin:0.2em auto;
 	background:#fff;
	padding:0 0.2em 0 0;
/*	 	padding:0.3em 1em 0.3em 3em;
	border-top:5px solid #eee;
	border-right:5px solid #eee;
	border-bottom:5px solid #eee;*/
}

div.wrap3{
/*	width:70em;*/
		float:left;
	width:20em;
 	background:#aaaaaa;
/*	 	padding:0.3em 1em 0.3em 3em;
	border-top:5px solid #eee;
	border-right:5px solid #eee;
	border-bottom:5px solid #eee;*/
}

div.head, div.headh{
display: inline-block;	
	width:100%;
	padding:0 0 0 0;
	margin:0 0 0 0;
/*	overflow:auto;*/
	border:1px solid red;
/*	border-bottom:1px solid #ccc;*/
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(left, #FFFFFF 0%, #B0B0B0 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(left, #FFFFFF 0%, #B0B0B0 100%);

/* Opera */ 
background-image: -o-linear-gradient(left, #FFFFFF 0%, #B0B0B0 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FFFFFF), color-stop(1, #B0B0B0));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(left, #FFFFFF 0%, #B0B0B0 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to right, #FFFFFF 0%, #B0B0B0 100%);

/*border:1px solid red; */
 	background:#fff;
}
div.headh{
	padding:0.5em 0 0.5em 0;
	margin:0 0 0 0;
/* IE10+ */ 
background-image: -ms-linear-gradient(left, #FFFFFF 0%, #FFFFFF 25%, #DDDDDD 50%, #FFFFFF 75%, #ffffff 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(left, #FFFFFF 0%, #FFFFFF 25%, #DDDDDD 50%, #FFFFFF 75%, #ffffff 100%);

/* Opera */ 
background-image: -o-linear-gradient(left, #FFFFFF 0%, #FFFFFF 25%, #DDDDDD 50%, #FFFFFF 75%, #ffffff 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FFFFFF), color-stop(25, #FFFFFF), color-stop(50, #DDDDDD), color-stop(75, #FFFFFF), color-stop(100, #ffffff));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(left, #FFFFFF 0%, #FFFFFF 25%, #DDDDDD 50%, #FFFFFF 75%, #ffffff 100%);

/* W3C Markup */ 
background-image: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 25%, #DDDDDD 50%, #FFFFFF 75%, #ffffff 100%);

border-top:1px solid #ddd; 
border-bottom:1px solid #ddd; 
}


div.headl{
	 	display:inline-block;
	 		width:100%;
	 			overflow:auto;
 		padding:1.5em 0 0.5em 0;
 		border-top:10px solid red; 
border-bottom:1px solid red; 
 	background: rgb(14,42,35);
background: linear-gradient(264deg, rgba(14,42,35,1) 0%, rgba(255,255,255,1) 50%);	
/* 	display:inline-block;*/
/*	overflow:auto;*/
}
div.headr{
	float:right;	
 	display:inline-block;				
	width:20%;
	padding:11.2em 0 0.5em 0;
	margin:1.5em 0 0.5em 0;
	overflow:auto;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(left, #FFFFFF 0%, #B0B0B0 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(left, #FFFFFF 0%, #B0B0B0 100%);
/* Opera */ 
background-image: -o-linear-gradient(left, #FFFFFF 0%, #B0B0B0 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FFFFFF), color-stop(1, #B0B0B0));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(left, #FFFFFF 0%, #B0B0B0 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to right, #FFFFFF 0%, #B0B0B0 100%);
	 	border:1px solid blue; 
}
div.ftr{
/*  position: absolute;  
  top: 650px;*/
	width:100%;
border:1px solid #0e2a23;
	padding:0.5rem 0.5rem 2rem 0.5rem;
	margin:0.2rem 0 1rem 0;
/*overflow:auto;*/
 	background:#fff;
	border-bottom-right-radius:30px;
	border-bottom-left-radius: 30px;
}
div.homebody{
	overflow:auto;
	width:100%;
	margin:0em 0 5em 0;
	padding:2em 0 0 0;
/*	border-top:1px solid #ccc; */
}
div.homebodyL{
	float:left;
	width:32%;
/*	padding:0 0 9em 0;*/
	margin:3em 0 9em 0;
/*  border:1px solid red; */
}
div.homebodyM{
	float:left;
	width:32%;
	padding:0 0 0 0;
	margin:3em 0 9em 0;
/*  border:1px solid red; */
}

div.homebodyR{
 	display:inline-block;
/*	float:right;	*/
	width:32%;
	margin:3em 0 9em 0;	
/*  border:1px solid blue; */
}

div.homebodyRL{
	float:right;	
	width:27%;
	padding:0;
/*  border:1px solid blue;*/
}

div.hdrdiv{
	margin:0 0 0 0;
/*  	border-bottom:1px solid #0e2a23;	*/
/*	border-bottom-right-radius:30px;
	border-bottom-left-radius: 30px;*/
  	border-bottom:1px solid #0e2a23;	
	background: #fff;	
}
div.hdrdiv2{
	margin:0 0 0 0;
	padding:0 0 0 0;
	margin:0;
  	border-bottom:1px solid #0e2a23;
  	border-bottom:1px solid #fff;  	
	background: #fff;
         display: flex;
         justify-content: center;
         align-items: center;

}


div.info{
/*	float:right;*/	
/*	width:60%;*/
	margin:1rem 0 1rem 0;
	padding:0;
	display: block;
	text-align: center;	
	font-weight:normal; 
 	line-height: 0.6rem;
/* 	-webkit-border-radius: 50%;
 	-moz-border-radius: 50%;
 	border-radius: 50%;*/
	height: 100px;
	width: 100px;
	border:1px solid #0e2a23;
/*  -moz-box-shadow:    inset 0 0 40px #fff;
  -webkit-box-shadow: inset 0 0 40px #fff;
  	box-shadow:         inset 0 0 40px #fff;*/
	background:#0e2a23;
	background:#d6e0b2; 	  
  border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
/*
background: rgba(255,255,255,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 37%, rgba(17,17,17,1) 66%, rgba(17,17,17,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(37%, rgba(246,246,246,1)), color-stop(66%, rgba(17,17,17,1)), color-stop(100%, rgba(17,17,17,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 37%, rgba(17,17,17,1) 66%, rgba(17,17,17,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 37%, rgba(17,17,17,1) 66%, rgba(17,17,17,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 37%, rgba(17,17,17,1) 66%, rgba(17,17,17,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 37%, rgba(17,17,17,1) 66%, rgba(17,17,17,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#111111', GradientType=1 );
*/
}

#gallery{
	clear:both;
	margin:0.3em 0 0 0;
	padding:0;
	background:#fff;
 	border-top:1px solid #ccc; 
}
#bigpic, img.about{
	width:70%;
 	display:block;
 	margin:0 auto 0 auto; 
	padding:0.8em;
	border:1px solid #777777; 	
}
img.about{
	width:100%;
 	margin:2rem auto 1rem auto; 
}

#bigpictext{
	float:left;
	width:100%;
	font-size:1.0em;
 	font-weight:bold; 
 	color:#888;
	padding:0;
	margin:0;
}

/* NEW FOR BOOTSTRAP	*/
div.mimgdiv, div.mimgdiv1, div.mimgdiv2, div.mimgdiv3,div.mimgdiv4{
 	margin:0.3rem auto 0.3rem auto; 
 	padding:0.3rem 0.3rem 0.3rem 0.3rem; 
 	border:1px solid #fff;
/*	border:2px solid #777777;*/ 	
}
div.mimgdiv1{
 	padding:2rem 0.3rem 0 0.3rem; 
}
div.mimgdiv2{
 	padding:1rem 0.3rem 0 0.3rem; 
}
div.mimgdiv3{
 	padding:3rem 0.3rem 0 0.3rem; 
}
div.mimgdiv4{
 	padding:4rem 0.3rem 0 0.3rem;
}

/*div.mimgdiv:hover,div.mimgdiv1:hover, div.mimgdiv2:hover, div.mimgdiv3:hover,div.mimgdiv4:hover {
	border:2px solid #b03f3f;
}*/ 



img.mimg{
	width:100%;
  	border:1px solid blue;
}
img.limg{
  display: block;
  margin-left: auto;
  margin-right: auto;
/*	width:50%;*/
text-align: center;
padding: 0 0 0 0;
/*border:1px solid red;*/
}
img.bannerZ{
  display: block;
width:80%;
text-align: right;
padding: 3rem 0 0 0;
margin: 0 0 0 2rem;
/*border:1px solid red;*/
}

/*Lightbox*/
.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
/*.modal {
  display: none;
  position: fixed; 
  z-index: 1;
  padding-top: 5rem;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: white;
}*/

div.linkdiv{
	width:100%;
	margin:0.5rem 0.5rem 0.5rem 0;
	margin:0;	
	padding:0.5rem 0.5rem 0.5rem 0.5rem;

/*	border:1px solid #777777;*/
	border:1px solid #fff;
   background: linear-gradient(to top, #444444 0%, #ffffff 100%);
	background:#fff;
}
div.linkdiv:hover {
	border:1px solid #b03f3f;
}
img.linkimg {
 	width:100%;
	padding:0 0 0 0;
	margin:0 0 0 0;	
	border:1px solid #777777;
}

p.linkimgtext {
	color: #444444;
	font-size:1rem;
	text-align: center;	
	padding:0 0 0 0;
	margin:0 0 0 0;	
}
p.linkimgtext:hover {
	color: #b03f3f;
}
div.picdiv{
	width:100%;
	margin:0 0 0 0;
/*	padding:1rem 1.1rem 0.5rem 1.1rem;*/	
	padding:1rem 0.1rem 0.5rem 0.1rem;
/*  	border-top:1px solid #777;
  	border-bottom:1px solid #777;*/
	background:#fff;
/*	border-top-right-radius:30px;
	border-top-left-radius: 30px;*/
/*	border:1px solid #0e2a23;*/
	border-top:1px solid #0e2a23;
  	border-bottom:1px solid #0e2a23;	
		
}

div.container{
	border:1px solid #fff;
background: #999999;
background: -webkit-linear-gradient(bottom, #ccc, #FFFFFF);
background: -moz-linear-gradient(bottom, #ccc, #FFFFFF);
background: linear-gradient(to top, #ccc, #FFFFFF);
	background:#fff;
}


div.container-fluid{
	border:1px solid #fff;
background: #999999;
background: -webkit-linear-gradient(bottom, #999, #FFFFFF);
background: -moz-linear-gradient(bottom, #999, #FFFFFF);
background: linear-gradient(to top, #999, #FFFFFF);
	margin:0 0 0 0;
	padding:0 0 0 0;	
}

p.cap{
	font-size:0.9rem;
	text-align: center;
	color: #111;		
	margin:0 0 0 0.8rem;
	padding:0 0 0 0;	
}
div.themediv,div.datediv{
	font-size:0.9rem;
	text-align: center;	
	color: #111;
	background: #fff;			
	margin:0 0 0 0;
	padding:0.2rem 0 0.2rem 0;
	border:1px solid #aaa;	
		
}
div.datediv{
	font-size:1.3rem;
	padding:0 0 1rem 0;
	border:none;	
		
}

/*ADJUSTMENTS TO BOOTSTRAP CSS*/
div.row, div.col-sm-1, div.col-sm-2, div.col-sm-3, div.col-sm-4, div.col-sm-5, div.col-sm-6, div.col-sm-7, div.col-sm-8, div.col-sm-9,
div.col-sm-10,div.col-sm-11,div.col-sm-12{
	margin:0 0 0 0;
	padding:0 0 0 0;			
}
/*div.row, div.col-sm-3, div.col-sm-4{
	border:1px solid red;		
}*/





/********************MODAL STUFF start ************************************************
/* Style the Image Used to Trigger the Modal */
img.SFimage {
  width:100%;	
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
	border:2px solid #aaa;
	padding:0.3rem;			  
}

img.SFimage:hover {
/*	opacity: 0.7;*/
	border:2px solid #b03f3f;		
}
/*#myImg:hover {opacity: 0.7;}*/

/* The Modal (background) *****/
.modal {
  display: none; /* Hidden by default */
  position: fixed; 
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
/*  padding-top: 5rem;*/  
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

}

/* Modal Content (Image) */
.modal-content, .modal-content-300, .modal-content-450, .modal-content-600, .modal-content-800, .modal-content-1500 {
  margin: auto;
margin: 1rem auto 1rem auto;

  padding: 0.3rem 0.3rem 0.3rem 0.3rem;    
  display: block;
  width: 80%;
  max-width: 1000px;
  background-color: #fefefe;  
  /*border:1px solid #777777;*/
}
.modal-content-300 {
  width: 80%;
  max-width: 300px;
}
.modal-content-450 {
  width: 80%;
  max-width: 450px;
}
.modal-content-600 {
  width: 80%;
  max-width: 600px;
}
.modal-content-800 {
  width: 80%;
  max-width: 800px;
}
.modal-content-1500 {
  width: 80%;
  max-width: 1500px;
}


/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
  
  font-size:1.1rem; 
 
}

/* Add Animation - Zoom in the Modal */
/*.modal-content, .modal-content-450, .modal-content-1500, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}*/

/* Add Animation - Fade in the Modal */
.modal-content, .modal-content-450, .modal-content-600, .modal-content-800, .modal-content-1500, #caption {
  animation-name: SFfade;
  animation-duration: 1s;
}
@keyframes SFfade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* This animation zooms in the modal
@keyframes SFfade {
  from {transform:scale(0)}
  to {transform:scale(1)}
}*/


/* Next & previous buttons */
.prev,
.next {
/*  cursor: pointer;
  position: absolute;
  top: 15px;
  width: auto;*/
/*  padding: 16px;*/
/*  margin-top: -50px; */
/*  color: #f1f1f1;
  font-weight: bold;
  font-size: 40px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;*/
  position: absolute;
  top: 15px;
  color: #ffffff;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;  
}

/* Position the next/prev buttons to the right and left */
.next {
  right: 165px;
}
.prev {
  left: 165px;
/*  border-radius: 3px 0 0 3px;*/
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  color: #ffffff;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.prev:hover,
.prev:focus,
.next:hover,
.next:focus,
.close:hover,
.close:focus {
  color: #b03f3f;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 650px){
  .modal-content, .modal-content-450, .modal-content-600, .modal-content-800, .modal-content-1500 {
    width: 96%;
  }
}
/********************MODAL STUFF end ************************************************