*,
*::after,
*::before{
	box-sizing: border-box;
	}

::selection {
  background-color: black;
  color:white;
  }


  :root {
    --grey: hsl(0, 0%, 74%);
    --darkgrey: hsl(0, 0%, 30%);
    --blue:  hsl(195, 53%, 79%);
    --teal: hsl(180, 21%, 37%);
  }


button,
input,
textarea,
select {
font: inherit;
background:  white;
margin:  2%;
padding: 16px;
}

html,
body {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
   background: transparent url(graph-2-12X.png)repeat ;
}

body {
  font-family: 'Raleway', sans-serif;
  position: relative;
  font-weight: normal;
  -webkit-text-size-adjust: none;
  overflow-x: hidden;
  overflow-y: scroll;
}

body * { text-shadow: none;}

@media all and (min-width : 1600px)
{
  body { width: 100%; margin: 0;  }
}


/* width */
::-webkit-scrollbar {
  width: 14px;
}


/* Handle */
::-webkit-scrollbar-thumb {
  background: #454545;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: lightblue;
}


/*==================== Typography ============= */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
}

h1 {
  font-size: 1.8em;
  padding: 6% 4.5% 0px 5%;
  line-height: 1.2em;
  font-weight: 300;
  letter-spacing: -0.08rem;
}


h2 {
  font-size: 1.23em;
  color: var(--darkgrey);
  padding: 0px 5% 0 5%;
  font-weight: normal;
  line-height: 1.6em;
  letter-spacing: .023em;
  max-width: 60rem;
 }


h3 {
  font-size: 1.1em;
  line-height: 1.8em;
  padding: 0px 9% 0 5%;
  font-weight: 400;
  color: black;
  letter-spacing: .05rem;
  max-width: 65rem;
}

h4 {
  font-size: .9em;
  padding: 10px 4.5% 10px 5%;
  color: #555 !important;
  font-weight: 100;
}

h5 {
  font-size: .8em !important;
  padding: 0px 12% ;
  font-style: italic;
  color: var(--teal);
  letter-spacing: .1em;
   line-height: 1.6em !important;
  border-left: 23px solid teal;
    }

@media all and (max-width : 768px) {
  h5 {
    font-size: 1.8em;
    padding: 0px 4.2% 0px 4.2%;
    color: var(--teal);
    font-weight: 100;
    line-height: 1.8em;
  }
}

h6 {
  font-size: 0.8em;
  color: black;
  margin:0;
  padding: 0 6%;
  letter-spacing: .2em;
  font-weight: 600;
}

p {
  font-size: 1.08em;
  margin: 0;
  padding: 0 5%;
  font-weight: 100;
  color: var(--darkgrey);
  letter-spacing: 0.05rem;
  max-width: 80rem;
  line-height: 1.9em;
}



/* ====================== LINKS ========== */


a,
a:link,
a:active,
a:visited {
  color: var(--darkgrey);
  border-bottom: 1px dashed;
  text-decoration: none;
  padding:  4px !important;
  outline: none;
  }

a:hover {
 background: transparent;
 margin: 0px;
   transition: 1s;
 border-bottom: 3px solid #555 !important;

}

a:active {
  color: black !important;
  border-bottom: solid 6px black !important;}

ol li
{margin: 2.3% 5% 2% 5%;
 font-size: 1.08rem;
 border-left: #fff 23px solid;
}


ul li {
  list-style-type: none;
  margin: 0 80px;
  color: #444;
  padding: 0 23px;
}


/* ================= ELEMNTS ==================== */

	.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: .1rem;
  opacity: .23;
  color:white !important;
  text-shadow: 4px 4px 20px black !important;
}


.content {
  background: white;
  outline: none;
  width: 100%;
  height: auto;
  border:0 !important;
}


iframe {margin:0 2%;}



.grey {
  color: #888;
}

.sml {
  font-size: 0.23em;
  color: #c00;
}

.circle,
.circle3 {
/*  background: hsla(300,24.3%,79.8%, .32);*/
  color: white !important;
 margin: 0 8px 0 2px;
  padding: 0px 8px 28px;
 font-weight: 400;
 font-size: .7rem;
 border-radius: 4px;
 }

 .circle::before,
  .circle2::before
    {content: "other";
	background: #525252;
	padding: 8px;
	border-radius: 50px;
	margin: 0 6px 0 0;
	}


   .circle4 {
  padding: 6px 12px;
   color:#888 !important;
 font-weight: 900;
 background: white;
  border-radius: 50px;
  border: 2px dotted #aaa;
 }


   .circle6 {
  padding: 0px 8px 28px;
   color: white !important;
 font-weight: 400;
 font-size: .7rem;
  border-radius: 3px;
 }


    .circle6::before
	{content: "Wren";
	background: #525252;
	 padding: 8px;
	 margin: 0 6px 0 4px;
	 border-radius: 50px;
	}


/*
 @media all and (max-width : 1600px) {

  .circle, .circle2 {display: none;  }
   .circle6  {display:none;}
}
*/


/* XR pages  banner */
		.black {
		background: black;
		width: 100%;
		height: auto;
		margin: 0% 0 5% 0;
		padding: 10% 0 5% 0;
		text-align:center;}


.note {
 background: #bababa;
 padding: 12px; border: 1px dashed #eee;
 border-radius: 2px;
 box-shadow: 0px 0px 60px rgba(23, 23, 23, .1)
}

.right {
	text-align: right !important;
	margin: 12px 12px 0 0  !important;
}

.sml3 {
  font-size: .7em;
  color:black;
  letter-spacing: .23em;
  padding: 4px ;
  border-bottom: 12px solid lavender;

}

.sml3a {
  font-size: .7em;
  letter-spacing: .108em;
  padding: 3px 3px;
  border-top: 12px solid whitesmoke;
  border-bottom: 12px solid whitesmoke;
}

.sml4{
	font-size:1em;
	letter-spacing: .1em;
	padding: 4px 6px 5px 8px;
	color: white;
	background:orangered;
    border: 1px solid #eee;
	margin: 0 18px 12px 0;
	border-radius: 4px;
	}

.sml5 {
	font-size: .68em;
	}


.sml6 {
	font-size: .8em;
	font-variant: normal !important;
}



.nb{
	font-size:.8em;
	letter-spacing: .108em;
	padding: 8px 12px;
	color: #222;
	background:#eee;
    border: 2px dotted #aaa;
	margin: 0 18px 12px 0;
	border-radius: 6px;
	opacity: .5;
	}



.develop {
	background: black;
	color: yellow;
    padding: 23px 12px 16px 12px;

	}

.rest {
  background: transparent;
  width: 100%;
  height: auto;
  float: left;
  padding:2.3% 0;
  margin: 0; }

.quote {
  max-width: 60rem;
  padding: 15px 4% 15px 8% !important;
  line-height: 2rem;
  font-size: .6rem;
  font-weight: 100;
   border-bottom: 23px solid #f5f5f5;
   border-radius: 32px;
   margin: 0;
}

.quote2 {
 background: transparent url(quoteX.png) 5% 0% no-repeat;
  margin: 1% 5% 3% 5%;
  font-size: 1.08rem;
   max-width: 55rem;
  color: #6c6c6c !important;
  font-weight: 100;
  border-left: 23px solid #fff;
  letter-spacing: 0.23rem;

   }


.quote3 {

  padding: 15px 12% 15px 6% !important;
  line-height: 2rem;
  font-size: 1rem;
  font-weight: 100;
   border-left: 23px solid #f5f5f5;
   margin: 0;
   font-style:italic;
}


.lge {
  font-size: 4em;
}

   .lge2 {
   font-size: 1.6rem;
   font-variant: small-caps;
   font-weight: 900;
   color: black;
   padding: 4px 3px;
   }



   .lge3{
   letter-spacing: .1rem !important;
    }

.site {
  background: #555;
  padding: 2px 6px 4px 30px;
  color: white;
  font-variant: small-caps;
  margin: 0;
  font-size: .7em;
}

.ted {
  background: #e2e3e4;
  padding: 0px 12px 2px 12px;
  border: 2px solid #555;
  margin: 0;
  font-size: .7em;
  letter-spacing: .1em;
}

.back {
  padding: 2px 12px 6px 12px;
  color: #777;
  line-height: 1.6em;
}

.white {
  color: lightblue;
  letter-spacing: 0.01em;
   font-size: .8em;
}


@media all and (max-width : 768px) {
.white{ padding: 0 8%;}
}


.thumbs a {
  border: 0;
}

.logo {
  background: transparent;
  color: #e00;
  font-size: 1.2em;
  padding: 42px 0 0 0px;
  opacity: .8;
}

.logob {  color: black;}

.c { color: #e00;}




.sky {
color: #777;
letter-spacing: .108em;
font-size: .6em;
line-height:.6em; border-top: 10px dashed #d5d5d5;
padding: 6px 0 6px 0; }


.sky:hover {border-bottom: 10px solid #c5c5c5;}

.spacer, #spacer {
  padding: 23px;
  width: 100%;
  padding: 2px 0;
  float:left;
}


.spacer2 {
  clear: both;
  height: 32px;
  margin: 100px  0;
}


.topic img {
  width: 92% ;
margin: 5% 4% 0 4% !important;

}

/*
@media all and (max-width : 1200px) {
  .toppic img {
    width: 90%;
  margin: 8% 5% 0 5%;
  }
}

@media all and (min-width : 2000px) {
  .toppic img {
    width: 80% !important;
  margin: 4% 10% 0 10% !important;
  }
}

@media all and (max-width : 700px) {
  .toppic img {
    width: 96%;
  margin: 12% 0% 0 0%;
  }
}
*/
hr {
  height: 32px;
  background: #ddd;
  border-top: #d5d5d5 12px solid;
  border-bottom: #e5e5e5 60px solid;
}



button {
  padding: 8px;
  margin: 0;
  font-size: 1.2em;
  color: #888;
  border: 1px solid #aaa;
  background: transparent;
}

button:hover {
  color: white;
  background: black;
}

button:active {
  color: #f00;
  background: black;
}


/*================ BODY ====================== */

#parent {
	float: left;
	height:auto;
	width: 99%;
  padding: 0 0 0 1%;
  background: whitesmoke url(graph-2-12X.png) repeat
	}
.par {padding: 0 8%; font-size: 2rem; letter-spacing: .9rem;}

#parent h3 {padding:0 0.5%;}


/*header */
.headertop {
  background: black;
  font-weight: normal;
  color: white;
  width: 100%;
  top: 0;
  height: 54px;
  padding: 0;
  position: fixed;
  z-index: 10;
  margin: 0;
}

@media all and (min-width : 1600px) {
  .headertop {
    margin: 0 5% 0 0;
  }
}

.headertop a {
  border: 0;
  letter-spacing: .1rem;
  color:lightblue !important;
}


/*  PHOTOGRAPHY teddave.org bit */
.headertop h1 {
  padding: 17px 0 0 2.3%;
  font-weight: normal;
  margin: 0px;
  font-size: 1.2em;
 letter-spacing: .032em;
}



.heada {
  width: 47%;
  float: left;
  text-align: left !important;
  padding: 8px 0 0 2%;

}

.headb {
  width: 50%;
  float: left;
  padding: 0;
  text-align: right;
  height: 54px;
}

.headb a {border: 0;}

.headb a:hover {
  color: white !important;
  background: transparent;
  border: 0 !important;
}

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

 .headertop h1 {
  padding: 18px 5px 0 0%;
  font-weight: normal;
  margin: 0px;
}

  .heada {
    width: 22%;
	  padding: 18px 0 0 5%;

  }

  .headb {
    width: 78%;
    padding: 0;
    text-align: right;
  }
}



.red {
	color: white;
letter-spacing: 0.108em;
font-variant:normal !important;}


/*================= #INTRO ==================*/

#intro {
 background: whitesmoke url(graph-2-12X.png) repeat !important;
  height: auto;
  margin: 27px 0 0 0;
  width: 100%;
  padding: 0;
}

#intro h1 {
font-variant:normal;
color: var(--darkgrey);
  padding: 80px 5% 0 5%;
  font-size: 1.8rem;
  font-variant:small-caps;
   line-height: 1rem;}

#intro h2 {
  padding:0px 15px 0px 5%;
}

#intro h3 {
	color: #555;
  padding: 0px 5% 0 5%;
  line-height: 1rem;

	}

#intro h5 {
  padding: 0 4%;
  font-size: 1.08em;
}

#intro p {
  padding: 0 5% 1% 5%;  line-height: 1.8em;
}

#intro img {
  max-width: 100%;  height: auto;  margin: 0%;
}


@media all and (max-width : 768px)
{
#intro h1 {
 padding: 3% 5%;
 font-size: 1.7rem;
}

  #intro p {
    padding: 0 23px 2.3% 4.5%;
	}
}


/*--#first ------------------*/

#first {
  height: 40px;
  margin: 0px;
  width: 100%;
  border: 0px;
  float: left;
  margin: 0;
  background: #F5F5F5 !important;
}


#first a:hover {
  opacity: 1;
}

#first img {
  max-width: 100%;
  height: auto;
  border: 0;
  padding: 0;
}

	#first h2 {  padding: 12% 5% 0 5%; color: #aaa;}


/*#hide {display:none;}*/

.top {
  opacity: .8;
}

.news {
  width: 90%;
  height: auto;
  background: transparent;
  padding: 3.2% 4% 0 6%;
}

.news h1 {
  color: lightblue;
}

.news h2 {
  color: teal !important;
  font-weight: 100;
  padding: 0;
}


.news p {
  line-height: 2.3em !important;
  padding: 0 !important;
  color: #222 !important;
}

.news a:link {border-bottom: 1px dotted !important;}

.news a:hover {border-bottom: 12px solid !important;}

/*------------ #display -----------------*/

#galleries {
    width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  background: whitesmoke url(graph-2X-12.png) repeat !important;

}

/* removed 32px from a. on padding */
#galleries img {
  width: 100%;
  padding: 0;
  margin: 0;
  height: auto;
 background: whitesmoke url(graph-2-12X.png)repeat;
}


#galleries h1 {
  padding: 0 17%;
}


#galleries h2 {
  font-size: 1.4em;
}


#galleries h4 {
  color: #222;
  line-height: 1.5em;
  letter-spacing: .108em;
  padding: 1% 23% 0% 12%;
  font-size: 1.08em;
}

#galleries a{
	border-bottom: 2px dotted #aaa ;
		}

	#galleries a:hover{
	background: transparent !important;
	color: #616159 !important;

		}



#work {
  width: 60%;
  margin: 0 20% 2% 20%;
  background: whitesmoke url(graph-2-12X.png) repeat;
  height: auto;
  /*box-shadow: 0px 0px 60px rgba(23, 23, 23, .23);*/
}



#pic {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

#pic img {
  width: 100%;
  padding: 2% 0 0 0!important; margin: 0 !important;
}

#pic h2 {
  color: #555;
  padding: 23px 0 2.3% 23px;
}

#pic h3 {padding:1% 0 0 0 ;
  text-align: right;
}

#pic p {
  color: white;
}


#pic2 {
  background: #cecece !important;
}

#pic2 h2 {
  color: lightblue;
}

#pic2 p {
  color: white;
}


.sub {
  width: 100%;
  height: 60px;
  padding: 0%;
  margin: 0;
}

.sub h3,
.sub2 h3 {
  color: #6c6c6c;
  font-size: .85em;
  letter-spacing: 0.08em;
  line-height: 1.6em;
  margin: 0;
  padding: 8px 23px 0px 0px;
  }

.sub p {
  padding: 0px;
  font-size: .7em !important;
  color: #ccc;
  ;
}
/*
.sub a:hover {
  color:skyblue;
}
*/

.sub2 {
  width: 100%;
  height: auto;
  padding: 0;
  background: transparent;
  margin: 0;
}


@media all and (max-width : 1500px) {
  #work {
    width: 96%;
    margin: 0 2% 2% 2%;
    height: auto;
     padding: 0 0 2% 0;
  }

  .sub {
    height: 40px;
  }
}

@media all and (max-width : 768px) {
  #work {
    width: 95%;
    margin: 0 2.5% 2% 2.5%;
    height: auto;
  }
}

@media all and (max-width : 600px) {
  .sub {
    height: auto;
  }

  .sub h3 {
    padding: 0px 8px 14px 8px;
  }
}

@media all and (max-width : 480px) {
  #work {
    width: 96%;
    margin: 0 2% 5% 2%;
    height: auto;
  }
}



/*------------------ #second --------------*/

#second {
  background: #f5f5f5 url(graph-2-12X.png) repeat;
  height: auto;
  padding: 0;
  width: 100%;
  float: left;
  margin: 5% 0 0 0;
 }

#second img {
      width: 96% ;
	  height: auto;
      margin: 2% 2% 1% 2%;
      border: 0 !important;
    }


#second h2 {  padding: 12px 23px 12px 5%;
}

#second h3 {  color: white;
  margin: 8px 9% 6px 5%;
  padding: 10px 0 0 0px;
}

#second h4 {  font-size: .9em;
  padding: 6px 0px 0px 12px;
  color: #aaa;
  font-weight: 100;
}



/* holds gallery selection at foot of page on India and XR*/


#hold
{background: transparent;
  width: 100%; height: 780px;}




#held2 {
  width: 40%;
  height: auto;
  float: left;
  padding: 3% 1% 6% 3%;

}

#held3 {
  width:35%;
  height: auto;
  float: left;
  padding: 9% 0 0% 5%;
  margin: 0 0 0 0%;

}

#held p,
#held2 p,
#held3 p {
  line-height: 2.1em;
  padding: 0 !important;
}


#held2 h4 {
  line-height: 2.8em;
  color: black !important;
  letter-spacing: .2em;
}


#held2 h3 {
	color: #555;
	font-weight: 400;
	font-size: 1.08rem;
    padding: 0;}

#held a {
	padding: 14px 6px 8px 6px !important;
	}


@media all and (max-width: 1024px) {
  #held,
  #held2,
  #held3 {
    width: 100%;
    height: auto;
	  margin: 0%;
    float: left;
  }

  #held p,
  #held2 p,
  #held3 p {
  padding: 0%;
  }
}




video {
  margin: 0 0 0 10%;
  border: #888 1px solid;
  background: hsl(0, 0%, 13%, 0.9); }

@media all and (max-width: 600px) {
video {
	margin: 0;
	background: hsl(0, 0%, 13%, 0.9);
	border: 0;
	width: 95%;
}
}







/*------------ FOOT STUFF -----------------*/

.footer {
  background:#111 !important;
  float: left;
  width: 100%;
  margin: 0 ;
  height:auto;
  	padding:20px 0px;
  }

.footer.fixed {
  position: inherit;
  bottom: 0;
  left: 0;
}

.footer a {
  color: white;
  padding: 0 2px 2px 0;
  border: 0;
}

.footer a:hover {
	color: lightblue !important;
	background: black;
	border-bottom: 6px !important;
  border-radius: 4px !important;
}

.footer a:active {
  border-bottom: 6px dotted white  !important;
  transition: 0.23s !important;
}


.footer h4 {
  padding: 0 5%;
  color: #888;
  font-size: 1.2rem;
  text-align: right;
  font-variant:small-caps;
  }


.footer p {
  padding: 0 5% 1% 5%;
  text-align: right !important;
  font-size: .8rem;
    color: #bbb;
}



/*--- FILTER RESULTS FROM BUTTON ---*/


* {
  box-sizing: border-box;
}

.bg {background: transparent;
margin: 0% 0% 2% 0%;
padding: 12px 0 0 5%;}

.bg:hover {background: transparent }

.btn {
  background: #eee;
  color: #555;
  font-size: .95em;
  padding:12px 6px;
  margin: 10px 0px 10px 1%;
  border: 1px dotted #bbb;
  border-radius: 6px;
}

.btn:hover {
  background: lightblue;
  color: #111;
  border: 1px solid white;
  opacity: .6;
}

.btn:active {
  background: #222;
  color: white;
  border: white 1px solid;
  outline: none;
}

.active {
  text-decoration: none;
  background: #283438;
  color: white;
  border: 1px solid white;}






/* boxes */

.gal {
	width: 90%;
	margin: 0 5% 5% 5%;
	padding: 23px 32px;
	height: 740px;
	border:10px solid white;
		border-radius: 3px;
		background: whitesmoke;
		  box-shadow: 0px 0px 60px hsla(0, 0%, 9%, 0.15);
	}

.gal:hover {opacity: 1;
transition: 5s;
}

.gal h2 {padding: 12px 0 0 2% !important;}


.box,
.box2 {
  background: hsl(0, 0%, 96%, 0.7) !important;
  float: left;
  height: auto;
  padding: 0.4%;
  margin:0.68% 0.75%;
  width: 23.2%;
  border-radius: 6px;
  box-shadow: 0px 0px 60px rgba(23, 23, 23, .2);
}


.bax{
  background: var(--grey) !important;
  float: left;
  height: auto;
  padding: 0px;
  margin:  1.5%;
  width: 17%;
  	border-radius: 3px;
	border: 2px solid #ccc;
	  box-shadow: 0px 0px 60px hsla(0, 0%, 9%, 0.1);
}



@media only screen and (max-width: 2000px) {
  .box {
    padding: 0;
    width: 31.5%;
  }



}

@media only screen and (max-width: 1500px) {
  .box {
    padding: 0;
	    width: 48%;
  }


  .bax {
    padding: 0;
	    width: 30%;
  }
}

@media only screen and (max-width: 1224px) {
  .box {
    width: 98%;
  margin: 10% 0;
  }

	.gal {margin: 0 2.5%;
	width: 95%;
	}

    .bax {
    width: 48%;
	margin: 2% 1%;
  }
}

@media only screen and (max-width: 768px) {
  .box {
    width: 99.6%; }


  #one {width: 100% !important;}
}

.box:hover {
  opacity: 1;
}



.boxa {
  width: 14%;
  float: left;
  padding: 0 3%;}


@media only screen and (max-width: 3600px) {
  .boxa {
    width: 30%;
    padding: 0 1.6%;}

@media only screen and (max-width: 1200px) {
.boxa {
  width: 40%;
  padding: 0 5%;}
}


#one {
  width: 100%;
  height: 75px;
  padding: 5px 0 5px 0 ;
  margin: 0;
  background: white!important;
}

#one h2 {
  font-size: 1rem;
  padding: 2px 0 2px 8px !important;
  color: #555 !important;
  margin: 0;
  line-height: 1.4em;
  letter-spacing: .108rem;
  font-weight: 100 !important;
  font-variant: small-caps;
  max-width: 85rem !important;
  }

#one h4 {
  font-size: .8rem;
  padding: 0px 8px 0px 8px !important;
  line-height: 1.3em !important;
  margin: 0;
  color: #5c5c5c !important;
  font-weight:100;
  letter-spacing: .2em;

  }

#one:hover {
  opacity: 1;
}

#one a {
  border: 0 !important;
}


.con {background: transparent; }

.con img {
     box-shadow: 0 !important;
	 border: 2px !important;

	 /*	-webkit-filter: grayscale(98%); /* Safari 6.0 - 9.0
  filter: grayscale(98%);*/
}




.con a {
  border: 0 !important;
  padding: 0 !important;}

.con a:hover {
	background: transparent !important;
  margin: 0 !important;
	padding: 0 !important; }


#con2 {
	 padding: 0;
   background: transparent;
  }

#con2 img{
  max-width:98% !important;
  padding: 0;
  margin:6% 0.5% 0 0%!important;
  border:solid 2px white!important;}

  #con2 a, #con2 a:hover
   {border: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;}


#con h3 {
  font-size: 3.2em;
  opacity: .23;
}

/*-- transform, on home page */

.env {
  background: transparent;
  height: auto;
  width: 100%;
  border: 0;
  float: left;
  padding: 0;
  margin:0;
}

.env img {
  max-width: 100%;
  height: auto;
  border: 0;
  padding: 0;
}

@media only screen and (min-width: 1500px) {
  #work {
    width: 48%;
    margin: 0.5%;
    float: left;
  }
}

@media only screen and (min-width: 2000px) {
  #work {
    width: 32.8%;
    margin: 0.25%;
    float: left;
  }

    .sub {
    height: auto;
    float: left;

  }

  .sub p {
    padding: 1px;
  }
}


/*box for images and hover on i am become like light */

#sur {
	width: 100%;
	height:auto;
	background: red;
		}

#held {
	background:#eee;
	height: auto;
	width: 100%;
	float: left;
	margin: 0% 0% 67% 0%; }

#held img {
	max-width: 100%;
	height: auto;
	border: 2px solid white;
	padding: 0;}


.nocap
{font-variant: normal !important;
font-size: 1.2rem;
		}

/********************************************/

.title {font-size: 4rem;
font-weight: 900;
line-height: 1rem;
letter-spacing: 1.9rem;
}

@media all and (max-width : 900px) {
.title{letter-spacing: .9rem;}
}

@media all and (max-width: 600px) {
.title{letter-spacing: .1rem;
font-size: 3.3rem;}
}








/* overlay menu */
/*https://www.w3schools.com/howto/howto_js_curtain_menu.asp */
.everlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
 background: rgba(255,255,255, 0.9) url(chartres-23b.png) 50% 50% no-repeat;
  overflow-x: hidden;
  transition: 1.2s;
}

.everlay-content {
  position: relative;
  top: 12.5%;
  width: 100%;
  padding: 0 0 0 15%;
  margin-top: 20px;
}

.everlay a {
  padding:16px 32px 16px 32px !important;
  margin: 2% 15% 2% 0;
  border-radius: 6px;
  background: whitesmoke;
  font-size: 1.7rem;
  letter-spacing: .4rem;
  color: #222 !important;
  display: block;
  opacity: .8;
  transition: 1.3s;

  font-weight: 900;
  text-align: center;
}


.everlay a:hover,
.everlay a:focus
{
 color: whitesmoke !important;
  background:#222;
  opacity: 1;
  border-bottom: 0 !important;
}


.everlay a:active
{
  background:orangered;
  color: white !important;
  opacity: .9;
  border: 1px solid black;
}

.everlay
.closebtn {
  position: absolute;
  top: 20px;
  left: 35px;
  font-size: 40px;
}

@media screen and (max-height: 450px) {
  .everlay a {font-size: 20px}

  .everlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
*/


/* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main CollapsiblePanel container. For our
 * default style, the CollapsiblePanel is responsible for drawing the borders
 * around the widget.
 *
 * If you want to constrain the width of the CollapsiblePanel widget, set a width on
 * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
 * up available space.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.CollapsiblePanel {
	margin: 0px 5%;
	padding: 0px;
}

/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.CollapsiblePanelTab {
	background-color: transparent;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	margin:0;
	padding: 16px 8%;
}


 #galleries h1 {

	font-size:2rem;
	font-variant:small-caps;
	font-family: sans-serif;
 color: black;
  padding: 0;
  margin: 0px;
  font-weight: 900 !important;
   line-height: 2.3rem;
  letter-spacing: 0.13em;


		}


@media all and (max-width : 600px) {
.CollapsiblePanelTab {
	background-color: transparent;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	margin:0;
	padding: 0px 10%;
}

}


.CollapsiblePanelContent h2 {
	color: #888 !important;
	padding: 6px 0 0 0 !important;
	}


.CollapsiblePanelContent h3 {
  text-align:right;
  padding: 0 !important;
  margin: 0;
	}


/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
 * you should never put any padding on the content area element if you plan to
 * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
 * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
 *
 * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style a
 * CollapsiblePanel content container.
 */
.CollapsiblePanelContent {
	margin: 0px;
	padding: 0px 4%;
}

/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
 * keyboard focus ring appears *inside* the tab instead of around the tab.
 * This is an example of how to make the text within the anchor tag look
 * like non-anchor (normal) text.
 */



/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.CollapsiblePanelTabHover,
.CollapsiblePanelOpen .CollapsiblePanelTabHover {
 color: black;
}


/* =================  108 pictures from india ========= */

/* making an India book, that sits inside the galleries div */

#galleries {
	height: auto !important;
    padding: 0 0 40px 0 !important;}

#galleries a {border:0;}
#galleries a:active {
	border:0 !important;
    background: transparent;}


	#book-lt
	{width: 45.5%;
margin: 0 0.5% 0 4%;
	height: auto;
	float: left;
	}

	/*#book-centre is located on each page with three images along with new versions of lt and rt*/

	#book-rt
	{width: 45.5%;
margin: 0 4% 0 0.5%;
	height: auto;
	float: right !important;
	}


	#book-rt h5 {
  font-size: .8em !important;
  padding: 0px 12px 0 0;
  text-align: right;
  font-weight: 400;
  color: #999;
  letter-spacing: .1em;
   line-height: 1.6em !important;
   border-left : 0;


		}


@media all and (max-width : 800px) {
		#galleries, #book-lt, #book-rt, #book-centre
	{width: 99%;
	float:left !important;
    height: auto;
		margin:0 0 0 0.75% !important;
	}


		#book-lt img,
		#book-centre img,
		#book-rt img,
		#galleries img
		{ padding: 0 !important;
		width: 98%;
				}

}

	/* style the button frame*/

.india {
  font-size: 0.8em;
  color: #bbb !important;
  margin:2% 3% 0% 4%;
  padding:1% 2%;
  letter-spacing: .23em;
  line-height: 1.8rem !important;
  font-weight: 100;
  background: hsla(0, 0%, 94%, 0.6);
 /* border-radius: 8px;*/
  border-top: 2px solid #ddd;
    max-width: 145rem;
   box-shadow: 0px 0px 60px rgba(23, 23, 23, .05);
}


/* Style the buttons */

.btna {
  border: none !important;
  outline: none;
  padding: 0 4px 2px 4px;
  margin: 6px 2px;
/*  background-color: #f8f8f8;*/
  cursor: pointer;
  font-size: 1rem;
  border-radius: 6px;
}

.btna a {color: #bbb !important;
border-bottom: none !important;
}


.btna:hover {
	color: orangered !important;
    background: transparent !important;}

/* Style the active class, and buttons on mouse-over */
.active{
  background-color: white;
  border: 1px dashed #fff;
  color: white !important ;
}




/* =============================
   GALLERY GRID
============================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&family=Roboto:wght@400&display=swap');

/* --- Gallery Grid (floating tiles, responsive) --- */
/* --- Gallery Grid (floating tiles, responsive) --- */
.gallery {
  display: grid;
/*  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr)); */
/* increase min width for bigger tiles */
  gap: 6px;
  padding: 12px;
  justify-items: left;
  align-items: start;
}

/* --- Gallery Items (floating cards) --- */
.item {
  width: 100%;
 /* increased max width for larger thumbnails */
  position: relative;
  overflow: hidden;
  background: white;
  cursor: pointer;
  border: none;
  border-radius: 1px;
  opacity: 1;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  background: white;
}

.item:focus {
  outline: 2px solid rgba(99,102,241,0.3);
}


/* --- Mobile adjustments --- */
@media (max-width: 640px) {
  .gallery {
 /*   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
 /* slightly bigger on mobile */
    gap: 12px;
    padding: 4px;
  }

  .item {
    max-width: 100%;
  }
}



/* --- Thumbnails (normalized) --- */
.thumb {
  width: 100%;
  aspect-ratio: 3 / 2;   /* cinematic ratio */
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.item:hover .thumb {
  transform: scale(1.03);
}

/* --- Caption / Badge --- */
.caption {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 8px 6px;
  border-radius: 50px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 1.2;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  opacity: .666;
}

.caption:hover {opacity: 1;}


/* --- Lightbox / Modal --- */
.overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.9);
  z-index: 1200;
  padding: 12px;
}

.overlay.open {
  display: flex;
}

.lightbox {
  width: 90%;
/*  max-height: 80vh;*/
  background: #2c2c2c;
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: 18px;
  align-items: center;
}

@media (max-width: 840px) {
  .lightbox {
    grid-template-columns: 1fr;
    max-width: 800px;
  }
}


/* --- Viewer --- */
.viewer {
  background: transparent;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: none;
  min-height: 400px;
}

.viewer img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* --- Sidebar --- */
.side {
  color: #dbe9ff;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 12px 0 0 10%;
  overflow: auto;

}

/* --- Controls & Buttons --- */
.controls {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.btn {
  background: #444;
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: inherit;
  transition: background 0.2s ease;
}

.btn:hover {
  background: rgba(255,255,255,0.02);
}

.btn:focus {
  outline: 2px solid rgba(99,102,241,0.3);
}

/* --- Metadata --- */
.meta {
  color: #b7c9e6;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.4;
  padding: 6px 0 0 12%;
  margin: 0;
}

.muted {
  color: #98a9c8;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* --- Close Button --- */
.close {
  position: absolute;
  right: 16px;
  top: 12px;
  z-index: 10;
  background: #222;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.9;
}

.close:focus {
  outline: 2px solid rgba(239,68,68,0.3);
}

/* --- Mobile adjustments --- */
@media (max-width: 640px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); /* this line for width of thumb */
    gap: 12px;
    padding: 6px;
  }

  .item {
    max-width: 100%;
  }

  .thumb {
    aspect-ratio: 3 / 2;
  }