* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  font-size: 100%;
  height: 100%;
  background-color: White; /*FloralWhite*/
  overflow: auto;
  transition: background-color .5s;
}

/* Sliding side menu */

 #roundButton {
	background-color: #96D9FF;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 10px solid #0065A6;
	outline: none;
	transition: transform .3s cubic-bezier(0, .52, 0, 1);
}
 
#roundButton:hover {
	background-color: #96D9FF;
	cursor: pointer;
	border-color: #003557;
	transform: scale(1.2, 1.2);
}
 
#roundButton:active {
	border-color: #003557;
	background-color: #FFF;
}

#flyoutMenu {
	padding: 100px 50px 100px 50px;
    width: 100vw;
    height: 100vh;
    background-color: hsla(51, 100%, 50%, 0.8); /*#FFE600*/ /*hsla(240, 64%, 27%, 0.7)*/
    position: fixed;
    top: 0;
    left: 0;
    transform: translate3d(-100vw, 0, 0);
    transition: transform .3s cubic-bezier(0, .52, 0, 1);
	overflow: scroll;
	z-index: 1000;
}

#flyoutMenu a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: MidnightBlue;
  display: block;
  transition: 0.3s;
  border-radius: 4px;
}

#flyoutMenu a:hover {
  background-color: LightGrey;
}

#flyoutMenu a.submenu {
  color: MidnightBlue;
  background-color: Yellow;
  text-align: center;
  /*font-family: Tahoma, Verdana, sans-serif;
  font-weight: bold;*/
  padding: 12px;
  text-decoration: none;
  display: block;
  line-height: 25px;
  border-radius: 50px;
  border-style: solid;
  border-color: Yellow;
  margin: 5px 20px 5px 20px;
}

#flyoutMenu a.submenu:hover {
  background-color: White;
}

#flyoutMenu a.closebtn:hover {
  background-color: LightYellow;
  color:  DarkGrey;
}

#flyoutMenu a.active {
  background-color: MidnightBlue;
  color: White;
}

#flyoutMenu .closebtn {
  position: absolute;
  top: 50px;
  right: 50px;
  font-size: 36px;
  margin-left: 50px;
  padding: 0;
}

#flyoutMenu.show {
    transform: translate3d(0vw, 0, 0);
} 

.show {
    transform: translate3d(0vw, 0, 0);
}

/* Style the banner */
.banner {
  background-color: MidnightBlue;
  background-image: url(../images/banner-gradient.png);
  background-repeat: repeat-x;
  padding: 0;
  text-align: center;
  margin-top: 70px;
}

/* Flexible container */

.flex-container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  padding: 10px 0 10px 0;
}

/* Flexible elements */

/*3 columns of equal size, no margin, vertically-centered*/
.flex-3col-equal-vc {
  flex: 33.33%;
  align-self: center;	
}

/*3 columns of equal size, no margin*/
.flex-3col-equal {
  flex: 33.33%;	
}

/*3 columns of equal size with margin*/
.flex-3col-equal-with-margin {
	flex: 31.33%; 
	margin: 1%;
}

/*4 columns of equal size, no margin, vertically-centered*/
.flex-4col-equal-vc {
  flex: 25%;
  align-self: center;	
}

/*4 columns of equal size, no margin*/
.flex-4col-equal {
  flex: 25%;	
}

/*5 columns of equal size, no margin*/
.flex-5col-equal {	
  flex: 20%;
}

/*6 columns of equal size, no margin*/
.flex-6col-equal {	
  flex: 16.66%;
}

/*7 columns of equal size, no margin*/
.flex-7col-equal {	
  flex: 14.28%;
}

/*2 columns of equal size, no margin*/
.flex-2col-equal {
	flex: 50%;
}

/*2 columns of equal size, no margin, vertically-centered*/
.flex-2col-equal-vc {
  flex: 50%;  
  align-self: center;
}

/*2 columns of equal size with margin*/
.flex-2col-equal-with-margin {
	flex: 48%; 
	margin: 1%;
}

/*2 columns of 60% and 36% with small margin*/
.flex-2col-with-margin-col60 {
  flex: 60%;
  margin: 1%;
}

.flex-2col-with-margin-col36 {
  flex: 36%; 
  margin: 1%;
}

/*2 columns of 25% and 75%, no margin*/
.flex-2col-col25 {
  flex: 25%;	
}

.flex-2col-col75 {
  flex: 75%;
}

/*2 columns of 30% and 70%, no margin*/
.flex-2col-col30 {
  flex: 30%;  
}

.flex-2col-col70 {
  flex: 70%;
}

/*2 columns of 30% and 70%, no margin, vertically-centered*/
.flex-2col-col30-vc {
  flex: 30%;
  align-self: center;  
}

.flex-2col-col70-vc {
  flex: 70%;
  align-self: center;
}

/*2 columns of 40% and 60%, no margin, vertically-centered*/
.flex-2col-col40 {
	flex: 40%;  
	align-self: center;
}

.flex-2col-col60 {
	flex: 60%;
	align-self: center;
}

/* Style the top navigation bar */

#top {
  position: fixed;
  top: 0;
  width: 100%;
}

.flex-topnav {
  overflow: hidden;
  background-color: MidnightBlue;
}

.flex-topnav-homeanchor {
  text-align: right;
}

.flex-topnav-menu {
  text-align: left;
  padding-left: 10px;
}

/* Style the topnav links */
.flex-topnav a {
  display: block;
  color: White;
  text-align: right;
  padding: 5px 16px;
  text-decoration: none;
}

/* Change color on hover */
.flex-topnav a:hover {
  text-decoration: underline;
}

/* Style the header*/

.flex-headeritem {
  padding: 10px;
}

span.title {
  padding: 10px;
  font-size: 35px;
  font-weight: bold;
  font-family: Tahoma, Verdana, sans-serif;
  color: MidnightBlue;
}

/*Style the Index page*/

.flex-index-presentation-box {
  padding: 30px;
  border-radius: 40px;
  border-style: outset;
  border-color: OrangeRed;
  background-color: Snow;
  background-image: url(../images/classintroframe.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;	
}

.flex-index-awards-box {
  padding: 10px; 
  border-radius: 40px;
  border-style: outset;
  border-color: DarkOrange;
  background-color: Snow;	
}

.flex-index-picjulie-box {
  background-color: Crimson;
  padding: 10px;
}

.flex-index-meetjulie-box {
  background-color: Teal;
  padding: 10px;
}

.flex-index-tsandcs {
  padding: 10px;
}

.flex-index-contact {
  padding: 10px;
}

.flex-index-seed-picintro-box {
  background-color: White;
  padding: 10px;
  border-radius: 20px;
  border-style: outset;
  border-color: MidnightBlue;
}

.flex-index-seed-paraintro-box {
  background-color: White;
  border-radius: 20px;
  border-style: outset;
  border-color: Coral;
  padding: 10px;
}

/*Style the Classes page*/

.flex-classes-picintro-box {
  background-color: White;
  padding: 10px;
  border-radius: 20px;
  border-style: outset;
  border-color: MidnightBlue;
}

.flex-classes-paraintro-box {
  background-color: Yellow;
  border-radius: 20px;
  padding: 10px;
}

.flex-classes-centres-table-cell {
	background-color: White;
	padding: 10px;
	border-radius: 20px;
	border-style: outset;
	border-color: DodgerBlue;
}

.flex-classes-teachers-table-cell {
  padding: 10px;
}

.flex-classes-teacher1-pic-box {
  background-color: Crimson;
}

.flex-classes-teacher1-intro-box {
  background-color: Teal;
}

.flex-classes-teacher2-pic-box {
  background-color: DarkGreen;
}

.flex-classes-teacher2-intro-box {
  background-color: DarkOrange;
}

.flex-classes-parents-pic-box {
  padding: 10px;	
}

.flex-classes-parents-def-box {
  padding: 10px;
  text-align: left;	
}

.flex-classes-programme-lesav1 {
  background-color: #6495ED; /*Red*//*DarkRed*/
  padding: 10px;
	border-radius: 20px 20px 0 20px;
	text-align: center;
}

.flex-classes-programme-lesav2 {
  background-color: #DC143C; /*Blue*//*DarkBlue*/
  padding: 10px;
  border-radius: 20px 20px 0 20px;
	text-align: center;
}

.flex-classes-programme-salut {
  background-color: green;
  padding: 10px;
	border-radius: 20px 20px 0 20px;
	text-align: center;
}

.flex-classes-programme-bonjour {
  background-color: orange;
  padding: 10px;
	border-radius: 20px 20px 0 20px;
	text-align: center;
}

.flex-classes-programme-montour1 {
  background-color: violet;
  padding: 10px;
	border-radius: 20px 20px 0 20px;
	text-align: center;
}

.flex-classes-programme-montour2 {
  background-color: purple;
  padding: 10px;
	border-radius: 20px 20px 0 20px;
	text-align: center;
}

/*.flex-classes-programme-oldmontour {
  background-color: yellow;
  padding: 10px;
	border-radius: 20px 20px 0 20px;
	text-align: center;
}*/

.flex-classes-programme-onyva1 {
  background-color: yellow;
  padding: 10px;
	border-radius: 20px 20px 0 20px;
	text-align: center;
}

.flex-classes-programme-onyva2 {
  background-color: orange;
  padding: 10px;
	border-radius: 20px 20px 0 20px;
	text-align: center;
}

.flex-classes-calendar-month-box {
	background-color: white;
	padding: 10px;
	border-radius: 20px 20px 0 20px;
	text-align: left;
}

.flex-classes-homelink-table-cell {
  padding: 10px;
}

.flex-nurseries-table-cell {
  padding: 10px;
}

.flex-book-table-cell {
  padding: 10px;
}

.classes-centres-intro-box {
  background-color: FloralWhite;
  border-radius: 20px;
  border-color: Crimson;
  border-style: outset;
  border-width: 4px;
  padding: 10px;
  text-align: center;
  margin-bottom: 0.5%;
}

.classes-section-content, .nurseries-section-content, .books-section-content {
  padding:  0 10px 0 10px;
  text-align: center;
}

/*Style the About page*/

.flex-about-container {
	background-color: White;
}

.flex-about-twitter {
  padding: 10px;
}

/* Style the Contact page*/

.flex-contact-picjulie-box {
  background-color: Crimson;
  padding: 10px;
}

.flex-contact-contactjulie-box {
  background-color: Teal;
  padding: 10px;
}

/*Style the Registration page*/

.flex-registration-picintro-box {
  background-color: White;
  padding: 10px;
  border-radius: 20px;
  border-style: outset;
  border-color: MidnightBlue;
}

.flex-registration-paraintro-box {
  background-color: Yellow;
  border-radius: 20px;
  padding: 10px;
}

.flex-registration-form-item-border {
	border-top: 1px solid MidnightBlue;
}

.flex-registration-form-label {
	text-align: right;
	padding-right: 10px;
}

.flex-registration-form-field {
	text-align: left;	
	padding-left: 10px;
}

.registration-box {
  background-color: White;
  border-radius: 20px;
  border-color: MidnightBlue;
  border-style: outset;
  border-width: 4px;
  padding: 10px;
  margin-bottom: 5px;
}

/* Style the books section */

.books-section-content {
  padding:  0 10px 0 10px;
  text-align: center;
}

ul.books-list li {
  padding: 8px 16px;
  border: 2px groove MidnightBlue;
  border-radius: 20px;
  font-size: 20px;
}

/* Style forms */

form {
	text-align: center;
	font-size: 16px;
}

form input.textinput{
	border: none;
	border:solid 1px MidnightBlue;
	border-radius: 5px;
	width: 60%;
	height: 25px;
}

form textarea.longtext {
	border: none;
	border:solid 1px MidnightBlue;
	border-radius: 5px;
	width: 60%;
}

form select.choicelist {
	border: none;
	border:solid 1px MidnightBlue;
	border-radius: 5px;
	width: 60%;
	height: 25px;	
}

form input.submitbtn {
	
  color: Snow;
  background-color: DodgerBlue;
  text-align: center;
  font-family: Tahoma, Verdana, sans-serif;
  font-weight: bold;
  font-size: large;
  font-variant: small-caps;
  padding: 12px;
  text-decoration: none;
  border-radius: 50px;
  border-style: solid;
  border-color: DodgerBlue;
}

form input.submitbtn:hover {
  background-color: White;
  color: Black;
}

form label {
	font-weight: bold;
	color: MidnightBlue;
}

form label.withfield {
	font-weight: normal;
	color: black;
	font-size: 14px;
}


/* Style text (headings, paragraphs, lists) */

h1 {
  color: Snow;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 35px;
}

h1.darker {
	color: MidnightBlue;	
}

h2 {
  font-size: 24px;
}

h2.form {
	color: MidnightBlue;
}

h3 {
	font-size: 20px;
	font-style: italic;
	color: MidnightBlue;
}

.flex-container p, .classes-centres-intro-box p, .classes-section-content p, .nurseries-section-content p, .books-section-content p {
	font-size: 20px;
}

span.attention {
	color: Red;
}

span.monday {
	color: Green;
}

span.tuesday {
	color: Orange;
}

span.thursday {
	color: Purple;
}

.wide-heading {
	background-color: Gold;
	background-image: url(../images/heading-gradient.png);
	background-repeat: repeat-x;
	padding: 60px;
	text-align: center;
}
.wide-heading h1 {
	font-family: Tahoma, Verdana, sans-serif;
	color: MidnightBlue;
}

.wide-subheading {
	font-family: Tahoma, Verdana, sans-serif;
	color: White;
	background-color: MidnightBlue;
	background-image: url(../images/subheading-gradient.png);
	background-repeat: repeat-x;
	padding: 30px;
	text-align: center;
}
.wide-subheading h2 {
	font-family: Tahoma, Verdana, sans-serif;
	color: White;
}

p.disclaimer {
	font-size: smaller;
}

.calendar-year {
	font-size: smaller;
}

/* Style the menus */

.menulinks {
	float: right;
	padding-left: 20px;
	padding-right: 20px;
}

.menulinks a {
  float: left;
  color: Black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

.menulinks a:hover {
  background-color: LightGrey;
  color: Black;
}

.menulinks a.active {
  background-color: MidnightBlue;
  color: White;
}
/* New menulinks (to add 4th button for resources) Old menulinks above probaly not used anywhere anymore */

.newmenulinks {	
	float: none;
	display: block;
	text-align: left;
}

.newmenulinks a {	
	float: none;
	display: block;
	text-align: left;
	color: Black;
	padding: 12px;
	text-decoration: none;
	font-size: 18px; 
	line-height: 25px;
	border-radius: 4px;
}

.newmenulinks a:hover {
  background-color: LightGrey;
  color: Black;
}

.newmenulinks a.active {
  background-color: MidnightBlue;
  color: White;
}

/*Style links*/

a.classiclnk {
	color: DodgerBlue;
}

a.classiclnk:hover {
	font-weight:  bold;
}

a.topbuttonlnk {
  color: Black;
  background-color: Yellow;
  text-align: center;
  font-family: Tahoma, Verdana, sans-serif;
  font-weight: bold;
  padding: 12px;
  text-decoration: none;
  line-height: 50px; /*25px*/
  border-radius: 50px;
  border-style: solid;
  border-color: MidnightBlue;
}

a.topbuttonlnk:hover {
  background-color: White;
}

a.buttonlnk {
  color: Black;
  background-color: Yellow;
  text-align: center;
  font-family: Tahoma, Verdana, sans-serif;
  font-weight: bold;
  padding: 12px;
  text-decoration: none;
  line-height: 50px; /*25px*/
  border-radius: 50px;
  border-style: solid;
  border-color: Yellow;
}

a.buttonlnk:hover {
  background-color: White;
}

a.subbuttonlnk {
  color: White;
  background-color: Crimson;
  text-align: center;
  font-family: Tahoma, Verdana, sans-serif;
  font-weight: bold;
  padding: 6px;
  text-decoration: none;
  line-height: 42px; /*12px*/
  border-radius: 50px;
  border-style: solid;
  border-color: Crimson;
}

a.subbuttonlnk:hover {
	color: Black;
	background-color: White;
}

a.readmorelnk {
	font-family: Helvetica, sans-serif;
  color: MidnightBlue;
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
}

a.readmorelnk:hover {
	color: White;
}

a.extlnk {
  color: Snow;
  background-color: DodgerBlue;
  text-align: center;
  font-family: Tahoma, Verdana, sans-serif;
  font-weight: bold;
  padding: 12px;
  text-decoration: none;
  line-height: 25px;
  border-radius: 50px;
  border-style: solid;
  border-color: DodgerBlue;
}

a.extlnk:hover {
  background-color: White;
  color: Black;
}

a.teacherlnk {
	font-family: Helvetica, sans-serif;
  color: Black;
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
}

a.teacherlnk:hover {
	color: White;
}

a.resourcelnk {
	color: DodgerBlue;
}

a.resourcelnk:hover {
	color: MidnightBlue;
}

.anchorlnk a {
  position: absolute;
  left: 0px;
  top: -60px;
}

.anchorlnk {
  position: relative;
}

/* Style lists */

ul {
  list-style-type: none;
  padding: 0;
}

ul.parents-list li, ul.homelink-list li {
  padding: 8px 16px;
  border: 2px groove MidnightBlue;
  border-radius: 20px;
  font-size: 20px;
}

ul.parents-list li:nth-of-type(odd) {
  background-color: LavenderBlush;
  color: Black;
}

ul.parents-list li:nth-of-type(even) {
  background-color: White;
  color: Black;
}

/* Style the calendar */

.month {
  padding: 50px 25px;
  width: 100%;
  background: MidnightBlue;
  text-align: center;
}

.month ul {
  margin: 0;
  padding: 0;
}

.month ul li {
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.weekdays {
  margin: 0;
  padding: 5px 0;
  width: 100%;
  background-color: #ddd;
  text-align: center;
}

.weekdays ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.weekdays ul li {
  display: inline-block;
  width: 12%;
  color: #666;
  text-align: center;
}

.days {
  padding: 10px 0;
  width: 100%;
  background: #eee;
  margin: 0;
  text-align: center;
}

.days ul {
  margin: 0;
  padding: 0;
}

.days ul li {
  list-style-type: none;
  display: inline-block;
  width: 12%;
  text-align: center;
  margin-bottom: 5px;
  font-size:12px;
  color: #777;
}

.days ul li .active {
  font-weight: bold;
  color: red !important
}

.days ul li .monactive {
  font-weight: bold;
  color: green !important
}

.days ul li .tueactive {
  font-weight: bold;
  color: orange !important
}

.days ul li .thuactive {
  font-weight: bold;
  color: purple !important
}

/*Style the maps*/

.google-maps {
	position: relative;
	padding-bottom: 75%; /* This is the aspect ratio */
	height: 0;
	overflow: hidden;
}

.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

/* Style the citation */

.citation {
  background-color: Gold;
  border-radius: 20px;
  border-color: GoldenRod;
  border-style: outset;
  border-width: 4px;
  padding: 10px;
}

cite {
  font-style: italic;
  font-size: medium;
}

/* Style the footer */

.footer {
  text-align: center;
  padding: 10px;
}

.footer-contact {
  padding: 5px;
}

.footer-disclaimer {
  font-size: smaller;
  padding: 5px;
  text-align: justify;
}

/* RESPONSIVE LAYOUT */

/* Responsive layout - If the max-width property is set to 100%, the image will scale down if it has to, 
but never scale up to be larger than its original size. The trick is to use height: auto; to override 
any already present height attribute on the image*/
img {
	max-width: 100%;
	height: auto;
}

/* Responsive layout - remove banner background image when screen size is smaller than background image width*/
@media screen and (max-width: 960px) {
	.banner {
	  background-image: none;
	  background-repeat: no-repeat;
	}
}


/* Responsive layout - makes topnav links stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .responsive-topnav a {
    float: none;
    display: block;
    text-align: center;
  }  
}

/* Responsive layout - adapt side nav */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
}

/* Responsive layout - makes a one column-layout instead of a multi-column layout */
@media (max-width: 800px) {
	.flex-responsive-item {
		flex: 100%;
	}
}

/* Responsive layout - centre text in some columns */
@media (max-width: 800px) {
	.flex-classes-parents-def-box {
		text-align: center;
	}
	
	.flex-registration-form-label {
		text-align: center;
	}

	.flex-registration-form-field {
		text-align: center;
	}
}

/* Responsive layout - makes menus stack on top of each other instead of next to each other */ /*probably not required anymore since newmenulinks*/
@media screen and (max-width: 1200px) {
	.menulinks {
		float: none;
		display: block;
		text-align: left;
	}
	.responsive-menus a {
		float: none;
		display: block;
		text-align: left;
	}  
}

/* Responsive layout - reduce height of heading */
@media (max-width: 800px) {
	.wide-heading {
		padding: 30px;
	}
	.wide-subheading {
		padding: 15px;
	}
}

/* Responsive layout - reduce size of text */
@media (max-width: 800px) {
	.flex-container p, .classes-centres-intro-box p, .classes-section-content p, .nurseries-section-content p, .books-section-content p, ul li {
		font-size: 16px;
	}
	.sidenav a {font-size: 18px;}
	h1 {
		font-size: 28px;
	}
	h2 {
		font-size: 20px;
	}
	h3 {
		font-size: 18px;
	}
	span.title {
		font-size: 24px;
	}
}