@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=DM+Serif+Display:ital@0;1&family=Quattrocento:wght@400;700&display=swap');
@import url('https://use.typekit.net/xrp1vfq.css');
@import url('https://use.typekit.net/ijc8ize.css');
body{
	font-family: "neue-kabel", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.faqwrap{
   display: flex;
    flex-wrap: wrap;
    max-width: 75rem;
    justify-content: left;
    align-content: left;
    margin: auto;
    
}
.faqquestion{
    display: flex;
    flex-direction: row;
    width: 100%;
    background-color: gold;
    padding: 10px;
    font-weight: bold;
}

.faqanswer{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 30px;
    padding-left: 10px;
    border-bottom: 2px solid black;
    border-bottom-color: black;
    
}

.faqanswer #p{
    
    width: 100%;
}
.vidthumb img{
     max-width: 100%;   
}
.vidthumb{
    max-width: 100%;
}

.headerphoto{
    
    height: 600px;
    background-image: url('./images/haden.jpg');
    background-size: cover;
    background-position: center;
    border-bottom: 5px solid gold;
}

.headerindexphoto{
    
    height: 400px;
    background-image: url('./images/fish.jpg');
    background-size: cover;
    background-position: center;
    border-bottom: 5px solid gold;
}

.headersportphoto{
    
    height: 600px;
    background-image: url('./images/wpolo.jpg');
    background-size: cover;
    background-position: center;
    border-bottom: 5px solid gold;
}
.headertourphoto{
    
    height: 600px;
    background-image: url('./images/as.jpg');
    background-size: cover;
    background-position: center;
    border-bottom: 5px solid gold;
}

.headerphotofaq {
    
    height: 600px;
    background-image: url('./images/grow_tree.jpg');
    background-size: cover;
    background-position: center;
    border-bottom: 5px solid gold;
}

.headerphotocontact {
    
    height: 600px;
    background-image: url('./images/garden_blossom.jpg');
    background-size: cover;
    background-position: center;
    border-bottom: 5px solid gold;
}

.headermapphoto{
    
    height: 600px;
    background-image: url('./images/jrhsoutside.jpg');
    background-size: cover;
    background-position:center;
    border-bottom: 5px solid gold;
}
.title {
	
	font-family: 'zooja-pro', serif;
	width: 300px;
	position: absolute;
	padding: 10px;
	padding-bottom: 10px;
	}

.title h2 {
	font-family: "neue-kabel", sans-serif;
	font-weight: 800;
	font-style: normal;
}

.intro {
	font-family: "neue-kabel", sans-serif;
	font-weight: 400;
	font-style: normal;
	padding-top: 20px;
	padding-left: 10px;
	width: 80%;
}

.mobileintro {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}

.mobileintrotitle{
	display: flex;
	flex-basis: 50%;
	justify-content: center;
}

.mobileintrotext{
	display: flex;
	flex-basis: 100%;
	text-align: center;
	justify-content: center;
	}

.intromain{
	width: 100% !important;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.map{
	
	background-image: url(./map.svg);
	background-repeat: no-repeat;
	background-size: contain;
	padding-left: 10px;
	height: 400px;
	width: 864px;
    display: grid;
    grid-auto-columns: 20px;
    grid-auto-rows: 20px;
	}



.mobilemap{
	background-image: url("./JRHS_Mobile.svg");
	width: 100%;
	height: 300px;
	background-position: center;
	background-repeat: no-repeat;
}

.header {
	background-color: #000000;
	border: 0px;
	height: 125px;
	color: #ffffff;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.24), 0 10px 50px 0 rgba(0,0,0,0.19);
}
.logo {
	position: absolute;
	background-image: url("./images/jrhslogo.png");
	left: 70%;
	width: 80px;
	height: 80px;
    top: 30px;
	background-repeat: no-repeat;
	border-radius: 50%;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.24), 0 10px 50px 0 rgba(0,0,0,0.19);
}

@media only screen and (min-width: 500px) {
    .logo {
	position: absolute;
	background-image: url("./images/jrhslogo.png");
	left: 43%;
	width: 200px;
	height: 200px;
	background-repeat: no-repeat;
	border-radius: 50%;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.24), 0 10px 50px 0 rgba(0,0,0,0.19);
}
    
}

.buttons{
	display: flex;
	justify-content: center;
	align-items: center;
}

.helpbuttons{
	display: flex;
	justify-content: center;
	align-items: center;
    background-color: gold !important;
    border-radius: 5px;
    height: auto;
    
}




a.helpbuttons {
  	background-color: gold; 
  	color: black; 
  	border: 1px solid #555555;
  	padding: 12px 14px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 12px;
   	width: 200px;
	-webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
}

a.button {
  	background-color: white; 
  	color: black; 
  	border: 2px solid #555555;
  	padding: 16px 32px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
  	margin: 4px 2px;
  	transition-duration: 0.4s;
  	cursor: pointer;
	width: 200px;
	-webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
}

a.helpbutton1 {
  	background-color: gold; 
  	color: black; 
	align-items: center;
}

a.button1 {
  	background-color: white; 
  	color: black; 
  	border: 2px solid #555555;
	align-items: center;
}

a.button1:hover {
  	background-color: white;
  	color: black;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.marker {
	position:relative;
	background-image: url("./marker.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 25px;
	height: 25px;
	text-align: center;
	text-indent: 2px;
}

.tool-tip {
	background:hsla(0,0%,0%,0.60);
	height: 16px;
	font-family: "neue-kabel", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	padding: 8px 0;
	color: #ffffff;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding-top: 5px;
	font-weight: bold;
}

.mobilemapinfo{
	width: 500px;
	text-align: left;
	display: flex;
	justify-content: center;
}

.tourwrapper{
	display: flex;
	flex-wrap: wrap;
	height: auto;
	justify-content: center;
	align-content: center;
	flex-direction: row;
	max-width: 75rem;
    margin: auto;
	
}

.staffinfo {
	display: flex;
	flex-basis: 1em;
	min-height: 2em;
	flex-grow: 1;
	font-weight: bold;
	flex-direction: row;
	justify-content: center;
}

.tourpagewrapper{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sectionwrapper{
	display: flex;
	background-color: hsla(0,0%,50%,1.00);
	color: white;
	flex-wrap: wrap;
	flex-grow:1;
	justify-content: center;
	align-content: center;
	/*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/
}

.tourtitle{
	display: flex;
	color: black;
	background: gold;
	width: 100%;
	flex-wrap: wrap;
	flex-grow:1;
	padding-left: 20px;
}

.video{
	display: flex;
	flex: 1 1;
	flex-wrap: wrap;
	flex-grow: 1;
	padding: 20px;
	background-color: grey;
	border-right: 10px hsla(0,0%,75%,1.00);
	align-content: center;
	justify-content: center;
	}

.right{
    background-color: dimgrey;
	display: flex;
	flex: 1 2;
	flex-wrap: wrap;
	flex-grow:3;
	width: 50%;
    min-width: 200px;
}

.description{
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
}

a.description{
	display: inline;
	padding-right: 0px;
}

.staff{
	display: flex;
	align-content: center;
	align-items: center;
	text-align: center;
	width: 100%;
	flex-direction: row;
	justify-content: center;
	
}

.spacer{
	display: flex;
	flex-basis: 100%;
	height: 0px;
}

.boxSpacer{
	display: flex;
	flex-basis: 100%;
	height: 40px;
}

.photos{
	display: flex;
	flex: 1 2;
	flex-basis: 100%;
	flex-flow: row wrap;
	justify-content: center;
}

.footer{
    background-color: black;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    flex-grow: 1;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
    
}

.footerbox{

    color: white;
    padding: 10px;
    border: thin;
    border-color: white;
    display: flex;
    flex-direction: column;
    flex: 1 1 30%;
    justify-content: center;
    align-content: flex-start;
    text-align: center;
    font-size: 10px !important;
  
}

.footerbox p {
    font-size: 12px;
}

.footerbox a {
    font-size: 12px;
}

.footerspacer{
    display: flex;
    flex-basis: 100%;
    flex-wrap: nowrap;
    height: 0;
    
}

.location{
    max-width: 520px;
    display: grid;
    grid-auto-columns: 5%;
    grid-auto-rows: 5%;
}

.footerboxcopy{
    
    background-color: gold;
    padding: 10px;
    border: thin;
    border-color: white;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex: 1 0 90%;
    justify-content: center;
    align-content: center;
    text-align: center;
    font-size: 10px !important;
  
}
.footercopytext{
    color: black ;
    display: flex ;
    flex: 2 1;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center ;
    justify-content: center ;
    font-size: small ;
    padding-top: 10px;
    text-align: center;
}

p.footercopytext{
    font-size: small !important;
}

a.footercopytext{
    display: flex;
    flex: auto;
    
}


img.staffimg{
	object-fit: cover;
	width:50px;
	height: 50px;
	border:medium;
	border-style: solid;
	border-color: white;
	border-radius: 50%;
	margin: 10px;
	
}

img.staffimg:hover{
	border-color: gold;
	box-shadow: 0 5px 7px 0 rgba(0,0,0,0.24), 0 10px 50px 0 rgba(0,0,0,0.19);
}

#welcome {
	visibility: hidden;
	width: 100px;
}

#sport-etudes {
	visibility: hidden;
	width: 130px;
}

#cycle-1 {
	visibility: hidden;
	width: 150px;
    height: 30px;
}

#art {
	visibility: hidden;
	width: 80px;
}

#math {
	visibility: hidden;
	width: 80px;
}

#science {
	visibility: hidden;
	width: 80px;
}

#english {
	visibility: hidden;
	width: 80px;
}

#theatre {
	visibility: hidden;
	width: 150px;
    height: 30px;
}

#garden {
	visibility: hidden;
	width: 150px;
    height: 70px;
}

#library {
	visibility: hidden;
	width: 150px;
    height: 70px;
}

#Rm502 {
	visibility: hidden;
	width: 150px;
    height: 70px;
}

#french {
	visibility: hidden;
	width: 80px;
}

#pe {
	visibility: hidden;
	width: 80px;
    height: 40px;
}

#ss {
	visibility: hidden;
	width: 80px;
    height: 40px;
}

#resource {
	visibility: hidden;
	width: 80px;
    height: 20px;
}

#p {
	font-family: "neue-kabel", sans-serif;
	font-weight: 400;
	font-style: normal;
}

#one {
    grid-column-start: 14;
    grid-column-end: 15;
    grid-row-start:12; 
    grid-row-end: 12;
    justify-self: center;
}

#two {
	grid-column-start: 11;
    grid-column-end: 12;
    grid-row-start:9; 
    grid-row-end: 8;
    justify-self: center;
}

#three {
	grid-column-start: 9;
    grid-column-end: 10;
    grid-row-start: 11; 
    grid-row-end: 12;
    justify-self: center;
}

#four {
	grid-column-start: 12;
    grid-column-end: 13;
    grid-row-start:7; 
    grid row-end: 8;
    justify-self: center;
}

#five {
	grid-column-start: 17;
    grid-column-end: 18;
    grid-row-start:6; 
    grid row-end: 7;
    justify-self: center;
     z-index: 4;
}

#six {
	grid-column-start: 19;
    grid-column-end: 20;
    grid-row-start:7; 
    grid-row-end: 8;
    justify-self: center;
    z-index: 3;
}

#seven {
    grid-column-start: 22;
    grid-column-end: 23;
    grid-row-start:8; 
    grid-row-end: 9;
    justify-self: center;
    z-index: 2;    
}

#eight {
	grid-column-start: 23;
    grid-column-end: 24;
    grid-row-start:5; 
    grid-row-end: 6;
    justify-self: center;
}

#nine {
	grid-column-start: 16;
    grid-column-end: 17;
    grid-row-start:8; 
    grid-row-end: 9;
    justify-self: center;
    z-index: 4;
}

#ten {
	grid-column-start: 19;
    grid-column-end: 20;
    grid-row-start:10; 
    grid-row-end: 11;
    justify-self: center;
     z-index: 3;
}

#eleven {
	grid-column-start: 19;
    grid-column-end: 20;
    grid-row-start:12; 
    grid-row-end: 13;
    justify-self: center;
}

#twelve {
	grid-column-start: 26;
    grid-column-end: 27;
    grid-row-start:8; 
    grid-row-end: 9;
    justify-self: center;
    z-index: 3;
}

#thirteen {
	grid-column-start: 27;
    grid-column-end: 28;
    grid-row-start:11; 
    grid-row-end: 12;
    justify-self: center;
}

#fourteen {
	grid-column-start: 28;
    grid-column-end: 29;
    grid-row-start:9; 
    grid-row-end: 10;
    justify-self: center;
}

#fifteen {
	grid-column-start: 16;
    grid-column-end: 17;
    grid-row-start:10; 
    grid-row-end: 11;
    justify-self: center;
    z-index: 3;
}

#one:hover #welcome{
	visibility: visible; 
} 

#two:hover #sport-etudes{
	visibility: visible; 
} 

#three:hover #cycle-1{
	visibility: visible; 
} 

#four:hover #art{
	visibility: visible; 
} 

#five:hover #math{
	visibility: visible; 
} 

#six:hover #science{
	visibility: visible; 
} 

#seven:hover #english{
	visibility: visible; 
} 

#eight:hover #theatre{
	visibility: visible; 
} 

#nine:hover #garden{
	visibility: visible; 
} 

#ten:hover #library{
	visibility: visible; 
} 

#eleven:hover #Rm502{
	visibility: visible; 
} 

#twelve:hover #french{
	visibility: visible; 
} 

#thirteen:hover #pe{
	visibility: visible; 
} 

#fourteen:hover #ss{
	visibility: visible; 
} 

#fifteen:hover #resource{
	visibility: visible; 
} 

a {
	color: aliceblue;
    font-size: medium;
}

li {
	font-weight: bold;
}

h2 {
	font-family: 'DM Serif Display', serif;

}

h2.tourpage{
    text-align: center
}

p.headerpara {
	font-family: 'DM Serif Display', serif;

}

p{
    font-size: medium;
}

.flex-break{
	flex-basis: 100%; 
	height: 0;
	
}
p.text {
	flex:1  100%;
	justify-content: center;
}
.headerpara {
}
.welcome {
}
.leadership {
}
.a+ {
}

.contactwrapper{
    display: flex;
    flex-wrap: wrap;
    max-width: 75rem;
    justify-content: center;
    align-content: center;
    margin: auto;
}

.contactnarrow{
    display: flex;
    flex-direction: column;
    width: 35%;
    font-size-adjust: auto;
    text-align: center;
}

.contactspace{
    display: flex;
    flex-direction: column;
    width: 5%;
}

.contactwide {
    display: flex;
    flex-direction: column;
    width: 60%;
    font-size-adjust: auto;
    text-align: center;

}

.mobile-articles {
    display: none;
    text-align: center;
    background-color: indianred;
    border: thin dashed;
    font-weight: bold;
   padding-top: 10px;
    
}
@media screen and (max-width:780px) {
  .mobile-articles {
    display:block;
  }
}