/* CCS UTF-8 - file from Kingdom of Canada's site - */

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

* {
	box-sizing:border-box;
}

hr {
	display:none;
	/* HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users */
}

@media (max-width:480px) {
	/* Fix for pre "viewport <meta>" mobile browsers */
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

html, body {
	height:100%;
}

body, button, input, table, textarea, select {
	font:normal 1em/1.5 times new roman,helvetica,sans-serif;
}

body {
	font: 16px/1.85em 'Open Sans', times new roman, Helvetice Neue, sans-serif;
	background:#51447c;
}

.styleConstraint {
	display:flex;
	flex-direction:column;
	min-height:100%;
	max-width:100em;
	margin:0 auto;
	background:#FFF;
}

.styleConstraint > header,
.styleConstraint > footer {
	flex:0 0 auto;
}

.styleConstraint > footer {
	padding:1em 0em 1em;
	text-align:center;
	background:#97559b;
	color:#FED;
}

footer {
  width:100%;
	padding:1em 0em 1em;
	text-align:center;
	background:#51447C;
	border-top: 5px solid #A4891E;
	color:#FFF;
}

h1 {
  display:none;
	position:relative;
	width:100%;
	height:0;
	font-size:2em;
	font-family:cursive;
	padding-bottom:15.85%;
}

h1 a {
	position:absolute;
	width:100%;
	height:100%;
	text-decoration:none;
	color:#000;
}

h1 a:after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#menu-logo {
  top:0.5em;
  margin-bottom:-8.5em;
  position:relative;
  padding-left:1em;
  width:100%;
  max-width:7.5%;
}

#mainMenu ul { /* Top main menu color band */
  padding:1.5em;
	list-style:none;
	text-align:right;
	background:#97559b; 
}

#mainMenu li {
	display:inline;
}

#mainMenu ul a {
	display:inline-block;
	padding:3.75em 1em 0.75em; /* Makes the space below the logo bigger */
	text-decoration:none;
	color:#FFF;
	font-size:1em;
}

#mainMenu ul a:focus,
#mainMenu ul a:hover {
	background:#FFF;
	color:#86101b;
	padding-bottom:2.3em;
	margin-bottom:-2.3em;
	transition:background 0.3s, color 0.3s;
}

main {
	flex:1 0 auto;
	/*padding:2em 0em 1em;/* Affected the bottom of the section/extras area */
}

main p {
	padding:1em 5em 0.5em;
}

main h2 {
  text-align: center;
  color: #292929;
  padding-top:1em;
}
#phone {
  width:100%;
  background:#E2CEFC; /* F2ADF6 */
  font-size:1.2em;
  text-decoration: none;
  color: black;
  text-align: center;
  padding:0.5em 0em;
}
#phone:before {
  content:"\01F4DE";  
}
#page-header {
  background:#36224F;
  width:100%;
  height:3em;
  text-align:center;
  font:normal 2.5em times new roman,cursive,sans serif;
  color: #FED;
  padding-top:1em;
}

#partners{
  color: #222222;
  line-height: 2em;
}
 div > h2 {
   padding-top:1.8em;
   text-align:center; 
	 line-height: 2.3em; 
	 color: #F2E2D5; 
	 font:normal 1.8em times new roman,cursive,sans serif; 
	 font-weight: 400;
}

/* Container code */
#container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#container div {
    width: 50%;
}
#container div:nth-of-type(2),
#container div:nth-of-type(3),
#container div:nth-of-type(6),
#container div:nth-of-type(7){
    box-sizing: border-box;
    padding: 1em;
    background-color: #3e285e;
    color: #fff;
}
#container img {
    display: block;
    width: 100%;
    height: auto;
}
#container h2, h1 {
    text-align: center;
    padding: 1em 0 0;
}
#container p {
    width: 90%;
    padding: 1em 0 0;
    margin: 0 auto;
}
/* END Container code */

.leadingPlate,
.trailingPlate {
  width: 100%;
	max-width:40%;
}

.leadingPlate {
	float:left;
	margin:1.5em 1.5em 1.5em 2em;
}

.trailingPlate {
	float:right;
	margin:0 0 1.5em 1.5em;
}

.plate {
  width:100%;
  max-width:50%;
  display:block;
  margin:auto;
}

video {
  display: block;
  margin:auto;
  width: 100%;
  height:100%;
  border: 0;
}

.contact {
  padding-top:20%;
  vertical-align:middle;
  font-size: 2em;
  text-align:center;
}

.modal,
.modal > .modalClose,
.modalFix {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}

.modal {
	padding:1em;
	left:-100vw;
	background:rgba(255,240,224,0.9);
	box-shadow:inset 0 0 128px 128px #FED;
	opacity:0;
	transition:opacity 0.5s, left 0s 0.5s;
}

.modal:target {
	left:0;
	opacity:1;
	transition:opacity 0.5s, left 0s;
}

.modal .modalClose {
	display:block;
	text-decoration:none;
}

.modal > .modalClose {
	position:absolute;
}

.modal > div {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100%;
}

.modal > div > section {
	position:relative; /* depth sort over .modalClose */
	overflow:hidden;
	width:100%;
	top:-50vh;
	max-width:32em;
	background:#FFFEF0;
	border-radius:0.5em;
	border:1px solid rgba(128,64,0,0.4);
	box-shadow:
		0 0 3em rgba(0,0,0,0.2),
		0 0 1em rgba(0,0,0,0.2);
	transition:top 0.5s;
	color:blaCK; /* Text for the box titles */
	height:100%; /* Without this the bottom of the contact pop up menu gets cut off */
}

.modal:target > div > section {
	top:0;
}

.modal section .modalClose {
	position:absolute;
	top:0.125em;
	right:0.125em;
	font-size:2em;
	line-height:1em;
	color:#CC0C00; 
}

.modal section .modalClose:after {
	content:"\00D7";
}

.modal h2 {
	font-size:1.25em;
	padding:0.4em 0.8em;
	background:rgba(128,64,0,0.2);
	border-bottom:1px solid rgba(128,64,0,0.4);
	color:#1D1D1D;
}

.modal h2 ~ * {
	padding:1.5em 1.5em 0;
}

.modal .submitsAndHiddens {
	padding:1em 1.5em 1.5em;
	color:blaCK;
}

.modal input[type=email],
.modal input[type=text],
.modal textarea {
	display:block;
	width:100%;
	margin:0.25em 0 -0.75em;
}

/* noselects */
.modal,
#mainMenu {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

@media (max-width:64em) {
  main p {
	  padding: 1em 2em 0em;
  }
  #mainMenu ul a {
	  padding:4.5em 0.5em 0; /* Makes the space below the logo bigger */
  }
  #container div h2 {
    font-size:1.1em;
    padding-top: 0em;
  }
  #container p {
    width: 100%;
    font-size:0.965em;
    padding: 0.1em 0 0;
    margin: 0 auto;
  }
}

@media (max-width:61.25em) { 
   #top {
    height:9.5em;
   } 
   #menu-logo {
   max-width:10%;
   }
	#page-header {
    height:2.5em;
    padding-top:0.5em;
	}   
  .plate {
    width:100%;
    height:auto;
  } 
	h1 {
		width:auto;
		height:auto;
		padding:0;
		margin-right:2.5em;
		font-family:cursive;
	}
	h1 a {
		position:static;
		display:block;
		padding:0.4em;
		color:#FED;
	}
	h1 a:after {
		display:none;
	}
	.styleConstraint > header {
		background:#97559b;
	}
	.styleConstraint > header .modalOpen { /* Hamburger menu */
		display:block; /* override "hidden" attribute */
		position:absolute;
		top:1em;
		right:1.5em;
		padding:0.3em;
		border:0.3em solid #FED;
		border-radius:0.5em;
	}
	.styleConstraint > header .modalOpen:after,
	.styleConstraint > header .modalOpen:before {
		content:"";
		display:block;
		width:2em;
		height:0.4em;
		border:solid #FED;
		border-width:0.3em 0;
	}
	.styleConstraint > header .modalOpen:after {
		border-top:none;
	}
	.modalClose {
		display:block;
		text-decoration:none;
	}
	header {
    height:8em;
	}
	#mainMenu,
	#mainMenu > .modalClose {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		overflow:auto;
	}
	#mainMenu {
		padding:1em;
		left:-100vw;
		background:rgba(255,240,224,0.9);
		box-shadow:inset 0 0 128px 128px #FED;
		opacity:0;
		transition:opacity 0.5s, left 0s 0.5s;
	}
	#mainMenu:target {
		left:0;
		opacity:1;
		transition:opacity 0.5s, left 0s;
	}
	#mainMenu .modalClose {
		display:block; /* override "hidden" attribute */
	}
	#mainMenu > div {
		display:flex;
		align-items:center;
		justify-content:center;
		min-height:100%;
	}
	#mainMenu nav {
		position:relative; /* depth sort over .modalClose */
		overflow:hidden;
		width:100%;
		top:-50vh;
		min-width:20em;
		max-width:32em;
		background:#FFFEF0;
		border-radius:0.5em;
		border:1px solid rgba(128,64,0,0.4);
		box-shadow:
			0 0 3em rgba(0,0,0,0.2),
			0 0 1em rgba(0,0,0,0.2);
		transition:top 0.5s;
	}
	#mainMenu:target nav{
		top:0;
	}
	#mainMenu nav .modalClose {
		position:absolute;
		top:0.125em;
		right:0.125em;
		font-size:2em;
		line-height:1em;
		color:#CC0C00;
	}
	#mainMenu nav .modalClose:after {
		content:"\00D7";
	}
	#mainMenu nav:before {
		content:"Menu";
		display:block;
		padding:0.4em 0.8em;
		font-size:1.25em;
		background:rgba(128,64,0,0.2);
		border-bottom:1px solid rgba(128,64,0,0.4);
	}
	#mainMenu ul a { /* sets the boxes inside the menu to have no gap between the menu tems and the edge of the container */
    margin:0em;
	}
	#mainMenu ul {
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		background:transparent;
		padding:0.5em 0.5em 0 0;
	}

	#mainMenu li {
		display:block;
		width:50%; /* was 50% */
		padding:0 0 0.5em 0.5em;
		text-align: center;/* Text for menu items */
		flex:1 0 auto;
	}
	#mainMenu li a {
		display:block;
		color:black;
		background:rgba(128,64,0,0.2);
	}
	#mainMenu li a:focus,
	#mainMenu li a:hover {
		background:rgba(128,64,0,0.1);
	}
	#page-header {
   height:3em;
   text-align:center;
   font:normal 1.8em times new roman,cursive,sans serif;
   padding-top:0.8em;
  }
  main {
   padding-bottom: 1em;
  }
  main p {
   font-size: 1.3em;
  }
  #container div {
   width: 100%;
   display: flex;
   flex-direction: column;
   }
   #container div:nth-child(1) { order: 1; }
   #container div:nth-child(2) { order: 2; }
   #container div:nth-child(3) { order: 4; }
   #container div:nth-child(4) { order: 3; }
   #container div:nth-child(5) { order: 5; }
   #container div:nth-child(6) { order: 6; }
   #container div:nth-child(7) { order: 8; }
   #container div:nth-child(8) { order: 7; }

   #container div p {
   width: 90%;
   font-size:1.3em;
   padding: 0.5em 0em 1em;
   }
   #container div h2 {
   font-size:1.6em;
   padding: 0.75em 0;
   }
}

@media (max-width:34.4em) {/* (max-width:24em) */
    #menu-logo {
    max-width:18%;
    }
    #top {
    height:10em;
    }
    #container h2 {
    font-size:1.2em;
    }
    h2 {
    font-size:1.2em;
    }
    #container p {
    font-size: 0.875em;
    }
    P {
    font-size: 0.875em;
    }
    #partners {
    font-size:1.2em;
    line-height: 1.5em;
    color: #222222;
    }
}