@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
:root{
    --primary-color: rgba(20, 177, 177, 0.5);
    --overlay-color: rgba(24,39,51,0.85);
    --menu-speed: 0.75s;
}

@keyframes fade {
	from {opacity: .4} 
	to {opacity: 1}
}

/******************************************************************************************
*******************************************************************************************
MOBILE FIRST CSS - PHONE
*******************************************************************************************
******************************************************************************************/

@media only screen and (max-width: 678px) { 
	
/******************************************************************************************
GENERAL
******************************************************************************************/
@font-face {
    font-family: Adobe;
    src: url("../fonts/Adobe Devangari.ttf") format('truetype');
}
@font-face {
    font-family: California;
    src: url("../fonts/Californian FB Regular.ttf") format('truetype');
}
@font-face {
    font-family: DengXian;
    src: url("../fonts/DengXian Light.ttf") format('truetype');
}
html {
    font-size           : 18.5px;
    font-family         : Adobe;
	overflow-x          : hidden;
}
h1{
	font-family         : California;
}
sup {
    line-height: 0;
}
#meta_wrapper {
    margin              : 0px;
    width               : 100%;
}
#wrapper {
    margin              : auto;
    width               : 100%;
}
img.Heading1 {
	margin              : 60px 0px 0px 0px;
	height              : 30%;
	width               : 100%;
}
img.Heading2 {
	height              : 25%;
	width               : 100%;
	margin              : 0px 0px 15px 0px;
}
body {
	background-image    : url("../img/Georgetown 2.jpg");
	background-size     : 100%;
	background-repeat   : repeat;
	background-position : fixed;
	min-height          : 100vh;
    display             : flex;
    flex-direction      : column;
}
#headerbanner {
	background-size     : 670.484375px 678.046875px;
	background-repeat   : no-repeat;
	background-position : 50% 25%;
	background-color    : rgba(134, 38, 51);
	background-image    : url("../img/Vitruvian Man 3.jpg");
	margin              : -10px -8px 5px -8px;
	padding             : 25px 10px 25px 10px;
	width               : 100%;
}
#navigationmenu {
	display             : none;
	font-family         : DengXian;
}
.thispage {
	color               : black;
	cursor              : pointer;
	margin              : 0px;
	padding             : 0px;
}
.italic{
	font-style          : italic;
}
footer {
	background-size     : 670.484375px 678.046875px;
	background-repeat   : no-repeat;
	background-position : 50% 60%;
	background-image    : url("../img/Vitruvian Man 3.jpg");
	text-align          : center;
	color               : white;
	background-color    : rgba(134, 38, 51);
	margin              : 5px -8px -10px -8px;
	padding             : 40px 10px 40px 10px;
}
	
/******************************************************************************************
HOME PAGE
******************************************************************************************/

#disappearbox {
	display             : block;
	width               : 80%;
	margin              : 20px auto 20px;
   	color               : black;
    padding             : 30px;
    background-color    : rgba(248, 224, 142); 
	align-content       : center;
	background-size     : 670.484375px 678.046875px;
	background-repeat   : no-repeat;
	background-position : -8% 20%;
}
#homeboxcontainer {
	display             : block;
	vertical-align      : top;
	width               : 80%;
	margin              : auto;
	background-color    : white;
	padding             : 30px;
	box-shadow          : 5px 5px 5px 5px #888888;
	border              : 1px solid black;
}
h1.padding {
	padding-top         : 60px;
}
#homeboxcontainer a{
	color               : white;
}
#homeboxcontainer a:link {
	padding             : 10px 20px;
	text-align          : center;
	text-decoration     : none;
	background-color    : rgba(134, 38, 51);
	border-radius       : 6px;
	outline             : none;
}
#homeboxcontainer a:hover {
	color               : black;
	transition          : background-color .3s;
    background-color    : rgba(248, 224, 142); 
}
#timerbox {
	display             : block;
	vertical-align      : top;
	width               : 80%;
	margin              : 20px auto 20px auto;
    color               : black;
    padding             : 30px;
    background-color    : rgba(248, 224, 142); 
	align-content       : center;
	background-size     : 670.484375px 678.046875px;
	background-repeat   : no-repeat;
	background-position : -8% 20%;
}
#center {
   margin               : auto;
}
.box1 {
	padding-bottom      : 20px;
	border-bottom       : 1px solid black;
}
.box2 {
	margin-top          : 20px;   
	vertical-align      : top;
	display             : inline-block;
	padding-left        : 20px;
	}
p.quote {
	font-style          : italic;
	margin              : 0px;
	padding             : 0px;
}
p.right{
	margin              : 0px;
	padding             : 0px;
 	text-align          : right;
}
p.time {
	margin              : 0px;
	padding             : 0px;
}
#countup{
	font-size           : 30px;
	font-weight         : bold;
 	text-align          : center;
	margin              : 0px;
	padding             : 0px;
}

/******************************************************************************************
******************************************************************************************/
	
#pdf {
	display             : none;
}	
iframe {
	width               : 100%;	
	min-height          : 75vh;
}
#homeboxcontainer2 {
	display             : block;
	vertical-align      : top;
	width               : 80%;
	margin              : 0px auto 20px;
	background-color    : white;
	padding             : 30px;
	box-shadow          : 5px 5px 5px 5px #888888;
	border              : 1px solid black;
}

h1.padding {
	padding-top         : 60px;
}
#homeboxcontainer2 a{
	color               : white;
}
#homeboxcontainer2 a:link {
	padding             : 10px 20px;
	text-align          : center;
	text-decoration     : none;
	background-color    : rgba(134, 38, 51);
	border-radius       : 6px;
	outline             : none;
}
#homeboxcontainer2 a:hover {
	transition          : background-color .3s;
	color               : black;
	background-color    : rgba(248, 224, 142); 
}
	

/******************************************************************************************
HOMESLIDESHOW CSS - NOT MINE
******************************************************************************************/
img.banner {
	border              : 1px solid black;
}

/* Slideshow container */
.slideshow-container {
	width               : 100%;
	position            : relative;
	margin              : 2% 0px 4% 0px;
  	display             : none;
}

/* Next & previous buttons */
.prev, .next {
  cursor                : pointer;
  position              : absolute;
  top                   : 50%;
  width                 : auto;
  padding               : 30px;
  margin-top            : -22px;
  color                 : white;
  font-weight           : bold;
  font-size             : 18px;
  transition            : 0.6s ease;
  border-radius         : 0 3px 3px 0;
  user-select           : none;
}

/* Position the "next button" to the right */
.next {
  right                 : 0;
  border-radius         : 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  color                 : #6495ed;
  background-color      : rgba(0,0,0,0.8);
}

/* The dots/bullets/indicators */
.dot {
  cursor                : pointer;
  height                : 3px;
  width                 : 30px;
  margin                : 0 2px;
  background-color      : #808080;
  border-radius         : 0%;
  display               : inline-block;
  transition            : background-color 0.6s ease;
}
.active, .dot:hover {
background-color        : rgba(4, 30, 66);
}

/* Fading animation */
.fade {
  animation-name        : fade;
  animation-duration    : 2s;
}

/******************************************************************************************
ABOUT US
******************************************************************************************/
#mission {
	margin              : auto;
	padding             : 15px 50px 15px;
	background-color    : white;
	border              : 1px solid black;
	box-shadow          : 5px 5px 5px 5px #888888;
	width               : 70%;
}
.bold {
    font-weight         : bold;
	margin              : 0px;
}
.staff {
	border              : 1px solid black;
	width               : 70%;	
	vertical-align      : top;
	margin              : 0px;
	padding             : 0px;
}	
.staff_text{
	width               : 80%;	
	vertical-align      : top;
	margin              : 40px 0px 0px 0px;
	padding             : 0px 0px 0px 0px;
}

.staff_text p{
	text-align          : left;
	margin              : 0%;
	padding             : 0%;
}	
	
/******************************************************************************************
FAQ
******************************************************************************************/

.collapsible {
  font-size           : 18.5px;
  font-family         : Adobe;
  background-color    : white;
  padding-left        : 0px;
  cursor              : pointer;
  border              : none;
  text-align          : left;
  outline             : none;
  font-weight         : bold;
  width               : 100%;
}
	
.collapsible:after {
  float               : right;
  font-size           : 18.5px;
  font-family         : Adobe;
  background-color    : white;
  padding-left        : 0px;
  cursor              : pointer;
  border              : none;
  text-align          : left;
  outline             : none;
  font-weight         : bold;
}

.content {
  padding             : 0;
  max-height          : 0;
  overflow            : hidden;
  transition          : max-height 0.2s ease-out;
}
	
/******************************************************************************************
RESOURCES
******************************************************************************************/
.book {
    vertical-align      : top;
}
.bookimage {
    border              : 1px solid black;
	height              : 50%; 
	width               : 50%;
}
	
/******************************************************************************************
HOYA SAXA
******************************************************************************************/
img.contain{
	width               : 100%;
}
.contain2{
	display             : inline-block;
	width               : 100%;	
	vertical-align      : top;
	margin              : 0px;
	padding             : 0px;
}	
.contain2 p{
	margin              : 0px 10px 20px 0px;
	padding             : 0px 10px 0px 0px;
	}
img.contain2{
	display             : none;
}
#blue {
	display             : block;
	vertical-align      : top;
	width               : 80%;
	margin              : 20px auto 20px auto;
    color               : white;
    padding             : 30px;
	background-color    : rgba(134, 38, 51);
	align-content       : center;
	background-size     : 670.484375px 678.046875px;
	background-repeat   : no-repeat;
	background-position : -8% 20%;
	background-image    : url("../img/Vitruvian Man 3.jpg");
}	
	
#mission {
	margin              : auto;
	padding             : 15px 50px 15px;
	background-color    : white;
	border              : 1px solid black;
	box-shadow          : 5px 5px 5px 5px #888888;
	width               : 70%;
}
#center2 {
   margin               : auto;
   width                : 90%;
}
a.button{
	color               : white;
}
a.button:link {
	padding             : 10px 20px;
	text-align          : center;
	text-decoration     : none;
	background-color    : rgba(134, 38, 51);
	border-radius       : 6px;
	outline             : none;
}
a.button:hover {
	transition          : background-color .3s;
	color               : black;
	background-color    : rgba(248, 224, 142); 
}
a.disappear_button {       
	color               : white;
}
a.disappear_button:link {       
	padding             : 10px 20px;
	text-align          : center;
	text-decoration     : none;
	background-color    : rgba(134, 38, 51);
	border-radius       : 6px;
	outline             : none;
}
a.disappear_button:hover {
	transition          : background-color .3s;
	color               : black;
	background-color    : rgba(248, 224, 142); 
}
a.white {
	color               : white;
}
.long_quote {
	margin              : auto;
	width               : 70%;
	font-style          : italic;
}
.image_box {
	display             : none;
	}
iframe {
	width               : 100%;	
	min-height          : 50vh;
}
.pedophile{
	width               : 50%;	
	vertical-align      : top;
	margin              : 23px 25px 10px 0px;
	padding             : 0px;
}	
img.pedophile{
	float               : left;
}
/******************************************************************************************
GET INVOLVED
******************************************************************************************/
table {
    border              : 1px solid black;
    border-collapse     : collapse;
	table-layout        : fixed;
	width               : 100%;
}
th {
    padding             : 15px;
    border              : 1px solid black;
    border-collapse     : collapse;
	background-color    : rgba(134, 38, 51);
    color               : white;
	text-align          : center;
}

td {
    padding             : 15px;
    border              : 1px solid black;
    border-collapse     : collapse;
    overflow            : hidden; 
    text-overflow       : ellipsis; 
    word-wrap           : break-word;
}
.underline{	
	text-decoration     : underline;
}
.disclaimer{
	border-top          : 1px solid black;
	margin-top          : 50px;
    font-size           : 15px;	
}

/******************************************************************************************
COLLAPSED NAV BAR
******************************************************************************************/

#menuToggle {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: flex;
  width: 40px;
  height: 32px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#menuToggle span
{
  display: flex;
  width: 29px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #ffffff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px);
  background: #ffffff;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: fixed;
  width: 100%;
  height: 100vh;
  box-shadow: 0 0 10px #85888C;
  margin: -50px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
    background-color    : rgba(248, 224, 142); 
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

}
ul#menu{
	list-style-type: none;
}

#menu li {
	color               : rgba(134, 38, 51);
	font-size           : 23px;
	font-family         : DengXian;
	padding             : 30px 0px;
	margin-left         : -30px;
	text-transform      : none;
	font-weight         : 900;
}
#menu a {
	text-decoration     : none;
	color               : black;
}
#menu a:visited {
	color               : black;
}
#menuToggle input:checked ~ ul{
  transform: none;
}
}

/******************************************************************************************
*******************************************************************************************
MEDIA BREAKPOINT - TABLET
*******************************************************************************************
******************************************************************************************/

@media only screen and (min-width: 678px) {
	
/******************************************************************************************
GENERAL
******************************************************************************************/
@font-face {
    font-family: Adobe;
    src: url("../fonts/Adobe Devangari.ttf") format('truetype');
}
@font-face {
    font-family: California;
    src: url("../fonts/Californian FB Regular.ttf") format('truetype');
}
@font-face {
    font-family: DengXian;
    src: url("../fonts/DengXian Light.ttf") format('truetype');
}
html {
    font-size           : 18.5px;
    font-family         : Adobe;
	overflow-x          : hidden;
}
h1{
	font-family         : California;
}
sup {
    line-height: 0;
}
#meta_wrapper {
    margin              : 0px;
    width               : 100%;
}
#wrapper {
    margin              : auto;
    width               : 100%;
}
img.Heading1 {
	margin              : 60px 0px 0px 0px;
	height              : 30%;
	width               : 90%;
}
img.Heading2 {
	height              : 25%;
	width               : 90%;
	margin              : 0px 0px 15px 0px;
}
body {
	background-image    : url("../img/Georgetown 2.jpg");
	background-size     : 100%;
	background-repeat   : repeat;
	background-position : fixed;
	min-height          : 100vh;
    display             : flex;
    flex-direction      : column;
}
#headerbanner {
	background-size     : 1340.96875px 1356.09375px;
	background-repeat   : no-repeat;
	background-position : 50% 25%;
	background-color    : rgba(134, 38, 51);
	background-image    : url("../img/Vitruvian Man 3.jpg");
	margin              : -10px -8px 5px -8px;
	padding             : 150px 30px 20px 30px;
}
#navigationmenu {
	font-size           : 17px;
	font-family         : DengXian;
	text-align          : center;
	padding-bottom      : 10px;
}
#navigationmenu li {
	display             : inline;
	padding-top         : 20px;
	padding-right       : 20px;
	padding-bottom      : 20px;
	padding-left        : 20px;
	font-weight         : bold;
}
#navigationmenu a:link {
	color               : white;
    text-decoration     : none;
}
#navigationmenu a:visited {
	color               : white;
}
#navigationmenu a:hover {
	color               : black;
}
.thispage {
	color               : black;
	cursor              : text;
	margin              : 0px;
	padding             : 0px;
}
.italic{
	font-style          : italic;
}
footer {
	background-size     : 1340.96875px 1356.09375px;
	background-repeat   : no-repeat;
	background-position : 50% 60%;
	background-image    : url("../img/Vitruvian Man 3.jpg");
	text-align          : center;
	color               : white;
	background-color    : rgba(134, 38, 51);
	margin              : 5px -8px -10px -8px;
	padding             : 40px 10px 40px 10px;
}
/******************************************************************************************
HOME PAGE
******************************************************************************************/
#disappearbox {
	display             : none;
}	

#homeboxcontainer {
	margin              : 2% auto 4% auto;
	width               : 70%;
	background-color    : white;
	padding             : 15px 50px 15px;
	box-shadow          : 5px 5px 5px 5px #888888;
	border              : 1px solid black;
}
#homeboxcontainer a{
	color               : white;
}
#homeboxcontainer a:link {
	padding             : 10px 20px;
	text-align          : center;
	text-decoration     : none;
	background-color    : rgba(134, 38, 51);
	border-radius       : 6px;
	outline             : none;
}
#homeboxcontainer a:hover {
	color               : black;
	transition          : background-color .3s;
	background-color    : rgba(248, 224, 142); 
}
#timerbox {
	position            : center;
    color               : black;
    padding             : 30px;
    background-color    : rgba(248, 224, 142); 
	margin              : auto -10px;
	width               : 100%;
	align-content       : center;
	background-size     : 670.484375px 678.046875px;
	background-repeat   : no-repeat;
	background-position : -8% 20%;
}
#center {
   margin               : auto;
   width                : 90%;
}
.box1 {
	width               : 35%;
	display             : inline-block;
	padding-right       : 20px;
	border-right        : 1px solid black;
}
.box2 {
	width               : 55%;
	vertical-align      : top;
	display             : inline-block;
	padding-left        : 20px;
	}
p.quote {
	font-style          : italic;
	margin              : 0px;
	padding             : 0px;
}
p.right{
	margin              : 0px;
	padding             : 0px;
 	text-align          : right;
}
p.time {
	margin              : 0px;
	padding             : 0px;
}
#countup{
	font-size           : 30px;
	font-weight         : bold;
 	text-align          : center;
	margin              : 0px;
	padding             : 0px;
}
	
/******************************************************************************************
******************************************************************************************/
	
#pdf {
	display             : none;
}	
iframe {
	width               : 100%;	
	min-height          : 75vh;
	}
#homeboxcontainer2 {
	margin              : 2% auto 4% auto;
	width               : 70%;
	background-color    : white;
	padding             : 15px 50px 15px;
	box-shadow          : 5px 5px 5px 5px #888888;
	border              : 1px solid black;
}
#homeboxcontainer2 a{
	color               : white;
}
#homeboxcontainer2 a:link {
	padding             : 10px 20px;
	text-align          : center;
	text-decoration     : none;
	background-color    : rgba(134, 38, 51);
	border-radius       : 6px;
	outline             : none;
}
#homeboxcontainer2 a:hover {
	color               : black;
	transition          : background-color .3s;
	background-color    : rgba(248, 224, 142); 
}

/******************************************************************************************
HOMESLIDESHOW CSS - NOT MINE
******************************************************************************************/

img.banner {            
	border              : 1px solid black;
}

/* Slideshow container */
.slideshow-container {
	width               : 80%;
	position            : relative;
	margin              : 2% auto 4% auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor                : pointer;
  position              : absolute;
  top                   : 50%;
  width                 : auto;
  padding               : 30px;
  margin-top            : -22px;
  color                 : white;
  font-weight           : bold;
  font-size             : 18px;
  transition            : 0.6s ease;
  border-radius         : 0 3px 3px 0;
  user-select           : none;
}

/* Position the "next button" to the right */
.next {
  right                 : 0;
  border-radius         : 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  color                 : #6495ed;
  background-color      : rgba(0,0,0,0.8);
}

/* The dots/bullets/indicators */
.dot {
  cursor                : pointer;
  height                : 3px;
  width                 : 30px;
  margin                : 0 2px;
  background-color      : #808080;
  border-radius         : 0%;
  display               : inline-block;
  transition            : background-color 0.6s ease;
}
.active, .dot:hover {
background-color        : rgba(4, 30, 66);
}

/* Fading animation */
.fade {
  animation-name        : fade;
  animation-duration    : 2s;
}

/******************************************************************************************
ABOUT US
******************************************************************************************/

#mission {
    margin              : 2% auto;
	padding             : 15px 50px 15px;
	background-color    : white;
	border              : 1px solid black;
	box-shadow          : 5px 5px 5px 5px #888888;
	width               : 65%;
}
.bold {
    font-weight         : bold;
	margin              : 0px;
}
.staff {
	border              : 1px solid black;
	display             : inline-block;
	width               : 40%;	
	vertical-align      : top;
	margin              : 0px;
	padding             : 0px;
}	
.staff_text{
	display             : inline-block;
	width               : 45%;	
	vertical-align      : top;
	margin              : 0px 0px 0px 60px;
	padding             : 0px 0px 0px 0px;
}

.staff_text p{
	text-align          : left;
	margin              : 0%;
	padding             : 0%;
}	
/******************************************************************************************
FAQ
******************************************************************************************/

.collapsible {
  font-size           : 18.5px;
  font-family         : Adobe;
  background-color    : white;
  padding-left        : 0px;
  cursor              : pointer;
  border              : none;
  text-align          : left;
  outline             : none;
  font-weight         : bold;
  width               : 100%;
}
	
.collapsible:after {
  content             :'\002B';
  float               : right;
  font-size           : 18.5px;
  font-family         : Adobe;
  background-color    : white;
  padding-left        : 0px;
  cursor              : pointer;
  border              : none;
  text-align          : left;
  outline             : none;
  font-weight         : bold;
}

.displayed:after {
  content             : "\2212";
}

.content {
  padding             : 0;
  max-height          : 0;
  overflow            : hidden;
  transition          : max-height 0.2s ease-out;
}

/******************************************************************************************
RECOMMENDED LITERATURE
******************************************************************************************/
.book {
    display             : inline-block;
    width               : 30%;
    vertical-align      : top;
}
.bookimage {
    border              : 1px solid black;
	height              : 80%; 
	width               : 80%;
}
/******************************************************************************************
HOYA SAXA
******************************************************************************************/
img.contain{
	width               : 100%;
}
.contain2{
	display             : inline-block;
	width               : 50%;	
	vertical-align      : top;
	margin              : 0px;
	padding             : 0px;
}	
	
.contain2 p {
	margin              : 0px 10px 0px 0px;
	padding             : 0px 10px 0px 0px;
}
	
img.contain2{
	float               : right;
}
	
#center2 {
   margin               : auto;
   width                : 90%;
}
#blue {
	position            : center;
    color               : white;
    padding             : 30px;
	background-color    : rgba(134, 38, 51);
	margin              : auto -10px;
	width               : 100%;
	align-content       : center;
	background-size     : 670.484375px 678.046875px;
	background-repeat   : no-repeat;
	background-position : -8% 20%;
	background-image    : url("../img/Vitruvian Man 3.jpg");
}
a.button {
	color               : white;
}
a.button:link {
	padding             : 10px 20px;
	text-align          : center;
	text-decoration     : none;
	background-color    : rgba(134, 38, 51);
	border-radius       : 6px;
	outline             : none;
}
a.button:hover {
	color               : black;
	transition          : background-color .3s;
	background-color    : rgba(248, 224, 142); 
}
a.disappear_button:link {
	display             : none;
}
a.disappear_button:hover {
	display             : none;
}
a.disappear_button:visited {
	display             : none;
}
a.white {
	color               : white;
}
.long_quote {
	margin              : 0px 100px;
	font-style          : italic;
}
.image_box {
	margin              : auto;
	width               : 75%;
	}
iframe {
	width               : 100%;	
	min-height          : 50vh;
}
.disappear_break{
	display             : none;
}
.pedophile{
	display             : inline-block;
	width               : 50%;	
	vertical-align      : top;
	margin              : 23px 25px 10px 0px;
	padding             : 0px;
}	
img.pedophile{
	float               : left;
}
/******************************************************************************************
GET INVOLVED
******************************************************************************************/

table {
    border              : 1px solid black;
    border-collapse     : collapse;
	table-layout        : fixed;
}
th {
    padding             : 15px;
    border              : 1px solid black;
    border-collapse     : collapse;
	background-color    : rgba(134, 38, 51);
    color               : white;
	text-align          : center;
}
td {
    padding             : 15px;
    border              : 1px solid black;
    border-collapse     : collapse;
    overflow            : hidden; 
    text-overflow       : ellipsis; 
    word-wrap           : break-word;
}
.underline{	
	text-decoration     : underline;
}

.disclaimer{
	border-top          : 1px solid black;
	margin-top          : 50px;
    font-size           : 15px;	
}

/******************************************************************************************
COLLAPSED NAV BAR
******************************************************************************************/
	
nav{
	display             : none;
}
}

/******************************************************************************************
*******************************************************************************************
MEDIA BREAKPOINT - LAPTOP
*******************************************************************************************
******************************************************************************************/

@media only screen and (min-width: 1100px) {
	
/******************************************************************************************
GENERAL
******************************************************************************************/
@font-face {
    font-family: Adobe;
    src: url("../fonts/Adobe Devangari.ttf") format('truetype');
}
@font-face {
    font-family: California;
    src: url("../fonts/Californian FB Regular.ttf") format('truetype');
}
@font-face {
    font-family: DengXian;
    src: url("../fonts/DengXian Light.ttf") format('truetype');
}
html {
    font-size           : 18.5px;
    font-family         : Adobe;
	overflow-x          : hidden;
}
h1{
	font-family         : California;
}
sup {
    line-height: 0;
}
#meta_wrapper {
    margin              : 0px;
    width               : 100%;
}
#wrapper {
    margin              : auto;
    width               : 100%;
}
img.Heading1 {
	height              : 75px;
	width               : 750px;
}
img.Heading2 {
	height              : 50px;
	width               : 750px;
}
body {
	background-image    : url("../img/Georgetown 2.jpg");
	background-size     : 100%;
	background-repeat   : repeat;
	background-position : fixed;
	min-height          : 100vh;
    display             : flex;
    flex-direction      : column;
}
#headerbanner {
	background-size     : 1340.96875px 1356.09375px;
	background-repeat   : no-repeat;
	background-position : 50% 25%;
	background-color    : rgba(134, 38, 51);
	background-image    : url("../img/Vitruvian Man 3.jpg");
	margin              : -10px -8px 5px -8px;
	padding             : 150px 30px 20px 30px;
}
#navigationmenu {
	font-size           : 17px;
	font-family         : DengXian;
	text-align          : center;
	padding-bottom      : 10px;
}
#navigationmenu li {
	display             : inline;
	padding-top         : 20px;
	padding-right       : 20px;
	padding-bottom      : 20px;
	padding-left        : 20px;
	font-weight         : bold;
}
#navigationmenu a:link {
	color               : white;
    text-decoration     : none;
}
#navigationmenu a:hover {
	color               : black;
}
.thispage {
	color               : black;
	cursor              : text;
	margin              : 0px;
	padding             : 0px;
}
.italic{
	font-style          : italic;
}
footer {
	background-size     : 1340.96875px 1356.09375px;
	background-repeat   : no-repeat;
	background-position : 50% 60%;
	background-image    : url("../img/Vitruvian Man 3.jpg");
	text-align          : center;
	color               : white;
	background-color    : rgba(134, 38, 51);
	margin              : 5px -8px -10px -8px;
	padding             : 40px 10px 40px 10px;
}
/******************************************************************************************
HOME PAGE
******************************************************************************************/
#disappearbox {
	display             : none;
}	
#homeboxcontainer {
	display             : inline-block;
	vertical-align      : top;
	width               : 32%;
	margin              : 2% 0px 4% 10px;
	background-color    : white;
	padding             : 15px 50px 15px;
	box-shadow          : 5px 5px 5px 5px #888888;
	border              : 1px solid black;
}
#homeboxcontainer a {
	color               : white;
}
#homeboxcontainer a:link {
	padding             : 10px 20px;
	text-align          : center;
	text-decoration     : none;
	background-color    : rgba(134, 38, 51);
	border-radius       : 6px;
	outline             : none;
}
#homeboxcontainer a:hover {
	color               : black;
	transition          : background-color .3s;
	background-color    : rgba(248, 224, 142); 
}
#timerbox {
	position            : center;
    color               : black;
    padding             : 30px;
    background-color    : rgba(248, 224, 142); 
	margin              : -1% -10px 3% -10px;
	align-content       : center;
	background-size     : 670.484375px 678.046875px;
	background-repeat   : no-repeat;
	background-position : -8% 20%;
}
#center {
   margin               : auto;
   width                : 90%;
}
.box1 {
	width               : 35%;
	display             : inline-block;
	padding-right       : 20px;
	border-right        : 1px solid black;
}
.box2 {
	width               : 55%;
	vertical-align      : top;
	display             : inline-block;
	padding-left        : 20px;
	}
p.quote {
	font-style          : italic;
	margin              : 0px;
	padding             : 0px;
}
p.right{
	margin              : 0px;
	padding             : 0px;
 	text-align          : right;
}
p.time {
	margin              : 0px;
	padding             : 0px;
}
#countup{
	font-size           : 30px;
	font-weight         : bold;
 	text-align          : center;
	margin              : 0px;
	padding             : 0px;
}
	
/******************************************************************************************
******************************************************************************************/
	
#pdf {
	width               : 50%;
	display             : inline-block;
	margin              : 2% 10px 4% 5%;
}
iframe {
	width               : 100%;	
	min-height          : 75vh;
	}
#homeboxcontainer2 {
	display             : inline-block;
	vertical-align      : top;
	width               : 32%;
	margin              : 2% 0px 4% 10px;
	background-color    : white;
	padding             : 15px 50px 15px;
	box-shadow          : 5px 5px 5px 5px #888888;
	border              : 1px solid black;
}
#homeboxcontainer2 a {
	color               : white;
}
#homeboxcontainer2 a:link {
	padding             : 10px 20px;
	text-align          : center;
	text-decoration     : none;
	background-color    : rgba(134, 38, 51);
	border-radius       : 6px;
	outline             : none;
}
#homeboxcontainer2 a:hover {
	color               : black;
	transition          : background-color .3s;
	background-color    : rgba(248, 224, 142); 
}

	
/******************************************************************************************
HOMESLIDESHOW CSS - NOT MINE
******************************************************************************************/

img.banner {            
	border              : 1px solid black;
}

/* Slideshow container */
.slideshow-container {
	width               : 50%;
	position            : relative;
	margin              : 2% 10px 4% 5%;
	display             : inline-block;
}

/* Next & previous buttons */
.prev, .next {
  cursor                : pointer;
  position              : absolute;
  top                   : 50%;
  width                 : auto;
  padding               : 30px;
  margin-top            : -22px;
  color                 : white;
  font-weight           : bold;
  font-size             : 18px;
  transition            : 0.6s ease;
  border-radius         : 0 3px 3px 0;
  user-select           : none;
}

/* Position the "next button" to the right */
.next {
  right                 : 0;
  border-radius         : 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  color                 : #6495ed;
  background-color      : rgba(0,0,0,0.8);
}

/* The dots/bullets/indicators */
.dot {
  cursor                : pointer;
  height                : 3px;
  width                 : 30px;
  margin                : 0 2px;
  background-color      : #808080;
  border-radius         : 0%;
  display               : inline-block;
  transition            : background-color 0.6s ease;
}
.active, .dot:hover {
background-color        : rgba(4, 30, 66);
}

/* Fading animation */
.fade {
  animation-name        : fade;
  animation-duration    : 2s;
}

/******************************************************************************************
ABOUT US
******************************************************************************************/

#mission {
    margin              : 2% auto;
	padding             : 15px 50px 15px;
	background-color    : white;
	border              : 1px solid black;
	box-shadow          : 5px 5px 5px 5px #888888;
	width               : 65%;
}
.bold {
    font-weight         : bold;
	margin              : 0px;
}
.staff {
	border              : 1px solid black;
	display             : inline-block;
	width               : 45%;	
	vertical-align      : top;
	margin              : 0px;
	padding             : 0px;
}	
.staff {
	border              : 1px solid black;
	display             : inline-block;
	width               : 40%;	
	vertical-align      : top;
	margin              : 0px;
	padding             : 0px;
}	
.staff_text{
	display             : inline-block;
	width               : 45%;	
	vertical-align      : top;
	margin              : 0px 0px 0px 60px;
	padding             : 0px 0px 0px 0px;
}

.staff_text p{
	text-align          : left;
	margin              : 0%;
	padding             : 0%;
}	
	
/******************************************************************************************
FAQ
******************************************************************************************/

.collapsible {
  font-size           : 18.5px;
  font-family         : Adobe;
  background-color    : white;
  padding-left        : 0px;
  cursor              : pointer;
  border              : none;
  text-align          : left;
  outline             : none;
  font-weight         : bold;
  width               : 100%;
}
	
.collapsible:after {
  content             :'\002B';
  float               : right;
  font-size           : 18.5px;
  font-family         : Adobe;
  background-color    : white;
  padding-left        : 0px;
  cursor              : pointer;
  border              : none;
  text-align          : left;
  outline             : none;
  font-weight         : bold;
}

.displayed:after {
  content             : "\2212";
}

.content {
  padding             : 0;
  max-height          : 0;
  overflow            : hidden;
  transition          : max-height 0.2s ease-out;
}

/******************************************************************************************
RECOMMENDED LITERATURE
******************************************************************************************/
.book {
    display             : inline-block;
    width               : 30%;
    vertical-align      : top;
}
.bookimage {
    border              : 1px solid black;
	height              : 80%; 
	width               : 80%;
}
/******************************************************************************************
HOYA SAXA
******************************************************************************************/
img.contain{
	width               : 100%;
}
.contain2{
	display             : inline-block;
	width               : 50%;	
	vertical-align      : top;
	margin              : 0px;
	padding             : 0px;
}	
.contain2 p{
	margin              : 0px 10px 0px 0px;
	padding             : 0px 10px 0px 0px;
	}
img.contain2{
	float               : right;
}
#center2{
	width               : 40%;
	margin              :auto;
}
#blue {
	position            : center;
    color               : white;
    padding             : 30px;
	background-color    : rgba(134, 38, 51);
	margin              : -1% -10px 1% -10px;
	align-content       : center;
	background-size     : 670.484375px 678.046875px;
	background-repeat   : no-repeat;
	background-position : -8% 20%;
	background-image    : url("../img/Vitruvian Man 3.jpg");
}
a.button {
	color               : white;
}
a.button:link {
	padding             : 10px 20px;
	text-align          : center;
	text-decoration     : none;
	background-color    : rgba(134, 38, 51);
	border-radius       : 6px;
	outline             : none;
}
a.button:hover {
	color               : black;
	transition          : background-color .3s;
	background-color    : rgba(248, 224, 142); 
}
a.disappear_button:link {
	display             : none;
}
a.disappear_button:hover {
	display             : none;
}
a.disappear_button:visited {
	display             : none;
}
a.white {
	color               : white;
}
.long_quote {
	margin              : 0px 100px;
	font-style          : italic;
}
.image_box {
	margin              : auto;
	width               : 75%;
	}
iframe {
	width               : 100%;	
	min-height          : 50vh;
}
.disappear_break{
	display             : none;
}
.pedophile{
	display             : inline-block;
	width               : 50%;	
	vertical-align      : top;
	margin              : 23px 25px 10px 0px;
	padding             : 0px;
}	
img.pedophile{
	float               : left;
}
/******************************************************************************************
GET INVOLVED
******************************************************************************************/

table {
    border              : 1px solid black;
    border-collapse     : collapse;
	table-layout        : fixed;
}
th {
    padding             : 15px;
    border              : 1px solid black;
    border-collapse     : collapse;
	background-color    : rgba(134, 38, 51);
    color               : white;
	text-align          : center;
}
td {
    padding             : 15px;
    border              : 1px solid black;
    border-collapse     : collapse;
    overflow            : hidden; 
    text-overflow       : ellipsis; 
    word-wrap           : break-word;
}
.underline{	
	text-decoration     : underline;
}

.disclaimer{
	border-top          : 1px solid black;
	margin-top          : 50px;
    font-size           : 15px;	
}

/******************************************************************************************
COLLAPSED NAV BAR
******************************************************************************************/
nav{
	display             : none;
}

}

/******************************************************************************************
*******************************************************************************************
MEDIA BREAKPOINT - DESKTOP
*******************************************************************************************
******************************************************************************************/

@media only screen and (min-width: 1550px) {
	
/******************************************************************************************
GENERAL
******************************************************************************************/
@font-face {
    font-family: Adobe;
    src: url("../fonts/Adobe Devangari.ttf") format('truetype');
}
@font-face {
    font-family: California;
    src: url("../fonts/Californian FB Regular.ttf") format('truetype');
}
@font-face {
    font-family: DengXian;
    src: url("../fonts/DengXian Light.ttf") format('truetype');
}
html {
    font-size           : 18.5px;
    font-family         : Adobe;
	overflow-x          : hidden;
}
h1{
	font-family         : California;
}
sup {
    line-height: 0;
}
#meta_wrapper {
    margin              : 0px;
    width               : 100%;
}
#wrapper {
    margin              : auto;
    width               : 100%;
}
img.Heading1 {
	height              : 75px;
	width               : 750px;
}
img.Heading2 {
	height              : 50px;
	width               : 750px;
}
body {
	background-image    : url("../img/Georgetown 2.jpg");
	background-size     : 100%;
	background-repeat   : repeat;
	background-position : fixed;
	min-height          : 100vh;
    display             : flex;
    flex-direction      : column;
}
#headerbanner {
	background-size     : 1340.96875px 1356.09375px;
	background-repeat   : no-repeat;
	background-position : 50% 25%;
	background-color    : rgba(134, 38, 51);
	background-image    : url("../img/Vitruvian Man 3.jpg");
	margin              : -10px -8px 5px -8px;
	padding             : 150px 30px 20px 30px;
}
#navigationmenu {
	font-size           : 17px;
	font-family         : DengXian;
	text-align          : center;
	padding-bottom      : 10px;
}
#navigationmenu li {
	display             : inline;
	padding-top         : 20px;
	padding-right       : 20px;
	padding-bottom      : 20px;
	padding-left        : 20px;
	font-weight         : bold;
}
#navigationmenu a:link {
	color               : white;
    text-decoration     : none;
}
#navigationmenu a:hover {
	color               : black;
}
.thispage {
	color               : black;
	cursor              : text;
	margin              : 0px;
	padding             : 0px;
}
.italic{
	font-style          : italic;
}
footer {
	background-size     : 1340.96875px 1356.09375px;
	background-repeat   : no-repeat;
	background-position : 50% 60%;
	background-image    : url("../img/Vitruvian Man 3.jpg");
	text-align          : center;
	color               : white;
	background-color    : rgba(134, 38, 51);
	margin              : 5px -8px -10px -8px;
	padding             : 40px 10px 40px 10px;
}
/******************************************************************************************
HOME PAGE
******************************************************************************************/
#disappearbox {
	display             : none;
}	

#homeboxcontainer {
	display             : inline-block;
	vertical-align      : top;
	width               : 32%;
	margin              : 2% 0px 4% 10px;
	background-color    : white;
	padding             : 15px 50px 15px;
	box-shadow          : 5px 5px 5px 5px #888888;
	border              : 1px solid black;
}
#homeboxcontainer a:link {
	padding             : 10px 20px;
	text-align          : center;
	text-decoration     : none;
	color               : white;
	background-color    : rgba(134, 38, 51);
	border-radius       : 6px;
	outline             : none;
}
#homeboxcontainer a:hover {
	color               : black;
	transition          : background-color .3s;
	background-color    : rgba(248, 224, 142); 
}

#timerbox {
	position            : center;
    color               : black;
    padding             : 30px;
    background-color    : rgba(248, 224, 142); 
	margin              : -1% -10px 1% -10px;
	align-content       : center;
	background-size     : 670.484375px 678.046875px;
	background-repeat   : no-repeat;
	background-position : -8% 20%;
	background-image    : url("../img/Vitruvian Man 4.jpg");
}
#center {
   margin               : auto;
   width                : 1500px;
}
.box1 {
	width               : 700px;
	display             : inline-block;
	padding-right       : 20px;
	border-right        : 1px solid black;
}
.box2 {
	width               : 700px;
	vertical-align      : top;
	display             : inline-block;
	padding-left        : 20px;
	}
p.quote {
	font-style          : italic;
	margin              : 0px;
	padding             : 0px;
}
p.right{
	margin              : 0px;
	padding             : 0px;
 	text-align          : right;
}
p.time {
	margin              : 0px;
	padding             : 0px;
}
#countup{
	font-size           : 30px;
	font-weight         : bold;
 	text-align          : center;
	margin              : 0px;
	padding             : 0px;
}
	
/******************************************************************************************
******************************************************************************************/
	
#pdf {
	width               : 50%;
	display             : inline-block;
	margin              : 1% 10px 4% 5%;
}
iframe {
	width               : 100%;	
	min-height          : 75vh;
	}
#homeboxcontainer2 {
	display             : inline-block;
	vertical-align      : top;
	width               : 32%;
	margin              : 1% 0px 4% 10px;
	background-color    : white;
	padding             : 15px 50px 15px;
	box-shadow          : 5px 5px 5px 5px #888888;
	border              : 1px solid black;
}
#homeboxcontainer2 a:link {
	padding             : 10px 20px;
	text-align          : center;
	text-decoration     : none;
	color               : white;
	background-color    : rgba(134, 38, 51);
	border-radius       : 6px;
	outline             : none;
}
#homeboxcontainer2 a:hover {
	color               : black;
	transition          : background-color .3s;
	background-color    : rgba(248, 224, 142); 
}
	
/******************************************************************************************
HOMESLIDESHOW CSS - NOT MINE
******************************************************************************************/

img.banner {
	border              : 1px solid black;
}

/* Slideshow container */
.slideshow-container {
	width               : 50%;
	position            : relative;
	margin              : 2% 10px 4% 5%;
  	display             : inline-block;
}

/* Next & previous buttons */
.prev, .next {
  cursor                : pointer;
  position              : absolute;
  top                   : 50%;
  width                 : auto;
  padding               : 30px;
  margin-top            : -22px;
  color                 : white;
  font-weight           : bold;
  font-size             : 18px;
  transition            : 0.6s ease;
  border-radius         : 0 3px 3px 0;
  user-select           : none;
}

/* Position the "next button" to the right */
.next {
  right                 : 0;
  border-radius         : 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  color                 : #6495ed;
  background-color      : rgba(0,0,0,0.8);
}

/* The dots/bullets/indicators */
.dot {
  cursor                : pointer;
  height                : 3px;
  width                 : 30px;
  margin                : 0 2px;
  background-color      : #808080;
  border-radius         : 0%;
  display               : inline-block;
  transition            : background-color 0.6s ease;
}
.active, .dot:hover {
background-color        : rgba(134, 38, 51);
}

/* Fading animation */
.fade {
  animation-name        : fade;
  animation-duration    : 2s;
}

/******************************************************************************************
ABOUT US
******************************************************************************************/

#mission {
    margin              : 2% auto;
	padding             : 15px 50px 15px;
	background-color    : white;
	border              : 1px solid black;
	box-shadow          : 5px 5px 5px 5px #888888;
	width               : 40%;
}
#mission h1 {
	color               : black;
}
.bold {
    font-weight         : bold;
	margin              : 0px;
}
.staff {
	border              : 1px solid black;
	display             : inline-block;
	width               : 40%;	
	vertical-align      : top;
	margin              : 0px;
	padding             : 0px;
}	
.staff_text{
	display             : inline-block;
	width               : 45%;	
	vertical-align      : top;
	margin              : 0px 0px 0px 60px;
	padding             : 0px 0px 0px 0px;
}

.staff_text p{
	text-align          : left;
	margin              : 0%;
	padding             : 0%;
}	
img.contain2{
	display             : inline-block;
}
	
/******************************************************************************************
FAQ
******************************************************************************************/

.collapsible {
  font-size           : 18.5px;
  font-family         : Adobe;
  background-color    : white;
  padding-left        : 0px;
  cursor              : pointer;
  border              : none;
  text-align          : left;
  outline             : none;
  font-weight         : bold;
  width               : 100%;
}
	
.collapsible:after {
  content             :'\002B';
  float               : right;
  font-size           : 18.5px;
  font-family         : Adobe;
  background-color    : white;
  padding-left        : 0px;
  cursor              : pointer;
  border              : none;
  text-align          : left;
  outline             : none;
  font-weight         : bold;
}

.displayed:after {
  content             : "\2212";
}

.content {
  padding             : 0;
  max-height          : 0;
  overflow            : hidden;
  transition          : max-height 0.2s ease-out;
}
	
/******************************************************************************************
RECOMMENDED LITERATURE
******************************************************************************************/
	
.book {
    display             : inline-block;
    width               : 30%;
    vertical-align      : top;
}
.bookimage {
    border              : 1px solid black;
	height              : 80%; 
	width               : 80%;
}
/******************************************************************************************
HOYA SAXA
******************************************************************************************/
img.contain{
	width               : 100%;
}
.contain2{
	display             : inline-block;
	width               : 50%;	
	vertical-align      : top;
	margin              : 0px;
	padding             : 0px;
}	
.contain2 p{
	margin              : 0px 10px 0px 0px;
	padding             : 0px 10px 0px 0px;
	}
img.contain2{
	float               : right;
}
#center2{
	width               : 40%;
	margin              :auto;
}
#blue {
	position            : center;
    color               : white;
    padding             : 30px;
	background-color    : rgba(134, 38, 51);
	margin              : -1% -10px 1% -10px;
	align-content       : center;
	background-size     : 670.484375px 678.046875px;
	background-repeat   : no-repeat;
	background-position : -8% 20%;
	background-image    : url("../img/Vitruvian Man 3.jpg");
}
a.button{
	color               : white;
}	
a.button:link {
	padding             : 10px 20px;
	text-align          : center;
	text-decoration     : none;
	background-color    : rgba(134, 38, 51);
	border-radius       : 6px;
	outline             : none;
}
a.button:hover {
	color               : black;
	transition          : background-color .3s;
	background-color    : rgba(248, 224, 142);
}
a.disappear_button:link {
	display             : none;
}
a.disappear_button:hover {
	display             : none;
}
a.disappear_button:visited {
	display             : none;
}
a.white {
	color               : white;
}
.long_quote {
	margin              : 0px 100px;
	font-style          : italic;
}
.image_box {
	margin              : auto;
	width               : 75%;
}
iframe {
	width               : 100%;	
	min-height          : 50vh;
}
.disappear_break{
	display             : none;
}
	
.pedophile{
	display             : inline-block;
	width               : 50%;	
	vertical-align      : top;
	margin              : 23px 25px 10px 0px;
	padding             : 0px;
}	
img.pedophile{
	float               : left;
}
/******************************************************************************************
GET INVOLVED
******************************************************************************************/

table {
    border              : 1px solid black;
    border-collapse     : collapse;
	table-layout        : fixed;
}
th {
    padding             : 15px;
    border              : 1px solid black;
    border-collapse     : collapse;
	background-color    : rgba(134, 38, 51);
    color               : white;
	text-align          : center;
}
td {
    padding             : 15px;
    border              : 1px solid black;
    border-collapse     : collapse;
    overflow            : hidden; 
    text-overflow       : ellipsis; 
    word-wrap           : break-word;
}
.underline{	
	text-decoration     : underline;
}
.subscript {
    font-size           : 10px;
}
.disclaimer{
	border-top          : 1px solid black;
	margin-top          : 50px;
    font-size           : 15px;	
	}
/******************************************************************************************
COLLAPSED NAV BAR
******************************************************************************************/
}