/* CCS UTF-8 - file from Kim Nall's site - screen-services.css - */

@font-face {
  font-family: 'Oswald-Bold';
  src: url(fonts/Oswald-Bold.eot);
  src: url(fonts/Oswald-Bold.eot?#iefix) format('embedded-opentype'),
  url(fonts/Oswald-Bold.otf) format('otf'),
  url(fonts/Oswald-Bold.svg#Oswald-Bold) format('svg'),
  url(fonts/Oswald-Bold.woff) format('woff'),
  url(fonts/Oswald-Bold.woff2) format('woff2');
}

/* null margins and padding to give good cross-browser baseline - kims site*/
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;
}

.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;
}

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;
  padding-top:0em;
  padding-bottom: 0em;
  width:100%;
  max-width:7.5%;
}
#mainMenu ul {
  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;
	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;
}

main p {
	padding:1em 5em 0.5em;
}
#phone {
  width:100%;
  background:#E2CEFC;
  font-size:1.2em;
  text-decoration: none;
  color: black;
  text-align: center;
  padding:0.5em 0em;
}
#phone:before {
  content:"Text or Tel: "; /* \01F4DE phone handest icon doesn't work on older browsers */ 
}
#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;
}

section {
    width:100%; 
    height:auto;
    color: #000000;    
    line-height:2em;
    padding:0em 3em 1em 7em; 
    border-radius: 100%/ 200px 50px 50px 200px;
}

.services-colored-row-1 {  
    background: #DCA4DD;
}

section ul li {
    list-style-type: none;
}

#ul-left, 
#ul-right {
    width: 50%;
    padding-bottom: 0em;
}
#ul-left {
    display: block;
    margin:auto;
    float:left;
}
#ul-right {
    display: block;
    margin:auto;
    float:right;
}


.services {
    font-weight: 700;
}


.services-colored-row-1 > h3 {
   padding-top:1em;
   text-align:center; 
	 line-height: 2.3em; 
	 color: #36224F; 
	 font:normal 1.65em times new roman,cursive,sans serif; 
	 font-weight: 600;
}

.services-colored-row-2 > h3 {
   padding-top:1em;
   text-align:center; 
	 line-height: 2.3em; 
	 color: #36224F; 
	 font:normal 1.65em times new roman,cursive,sans serif; 
	 font-weight: 600;
}

section > h4 {
   padding: 0em 0em 0em 6em;
}

section > h5 {
   text-align: center;
   padding: 0em 0em 0em 6em;
}

.plain-services-section {
   background:none;
   padding:2em 4em 5em;
   color:#000000;
}
.plain-services-section ul {
   padding:0.5em 0em 0em 8em;  
}
.plain-services-section h3 {
   color:#000000;
   text-align:center;
}
.services-colored-row-1 ul {
   padding: 2em;
}

.spot {
   vertical-align: middle;
   margin: 0em 1em;
}

 .service-images-doubleup {
   width:35%;
   float:right;
   padding: 1.5em 3em 4em;
}

.leadingPlate,
.trailingPlate {
	max-width:40%;
  padding:0em 2em; 
}

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

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

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

.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) {
  #mainMenu ul a {
	padding:4.5em 0.5em 0em; /* Makes the space below the logo bigger */
	}	
  main p {
	  padding:1em 2em 0em;
  }  
  section > h2 {
    padding:0.25em;
  }
  section > p {
    padding: 0.25em 1em;
  }
  .trailingPlate {
    width: 50%;
  }
}

@media (max-width:61.25em) {
   #top {
    height:9.5em;
   } 
   #menu-logo {
    max-width:10%;
  }
	#page-header {
    height:2.5em;
    padding-top:0.5em;
	}
	 .box {
    display: flex;
    flex-direction: column;
  }
   .box :nth-child(1) { order: 1; }
   .box :nth-child(2) { order: 2; }
   .box :nth-child(3) { order: 4; }
   .box :nth-child(4) { order: 3; }
   .box :nth-child(5) { order: 5; }
   .box :nth-child(6) { order: 6; }
   
   section {
    padding:0em 1.5em 4em 2em;
    width:100%; 
    margin:auto;
    height:auto;     
  }  
   .service-images-doubleup {
    float:right;
    width:40%;
    padding: 1em 1em 3em;
  }
   .services-colored-row-1 ul{
    padding:0.5em 0em 0em 3em;  
  }
   .services-colored-row-2 ul{
    padding:0.5em 0em 0em 3em;  
  }
   .plain-services-section ul{
    padding:0.5em 0em 0em 3em;  
  }
  .trailingPlate {
    width:50%;
    max-width:50%;
    padding-left:0em;
    padding-right:0em;
  }
  .leadingPlate {
    width:50%;
    max-width:50%;
    padding-left:0em;
    padding-right:0em;
  } 
	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 { /* white area around menu items */
		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; /* text inside the menu items*/
		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;
  }
}

@media (max-width:34.4em) {
  #menu-logo { 
    max-width:18%;
    }
  main {
    width:100%;
    padding:0em;
    margin:0em;
  }
  section {
    padding:2em 0em 3em 0em;
    margin:0em;
  }
  section h3, h4, h5, p {
    padding:0.5em 0.25em;
    margin: 0em;    
  }
   .services-colored-row-1 {
    padding:1em 0.5em 1em 0.5em; 
    margin:0em; 
  }
  .services-colored-row-1, .services-colored-row-2 ul {
    padding:0.5em 0.5em 0em 0.5em; 
    margin:0em; 
  }
   .services-colored-row-2 {
    padding:1em 0.5em 3em 0.5em; 
    margin:0em; 
  }
   .services-colored-row-2 h4, h5 {
    padding:0.5em 0em 0em 0.5em; 
    margin:0em; 
  }
   .plain-services-section {
    padding:0.5em 0.5em 0em 0.5em;
    margin:0em;  
  }
   .plain-services-section ul {
    padding:0.5em 0em 0em 0.5em;
    margin:0em;  
  }
  .plain-services-section h4, h5 {
    padding:0.5em 0em 0em 0.5em;
    margin:0em;  
  }
  .trailingPlate {
    width:100%;
    max-width:100%;
    display:block;
    margin: auto;    
    padding:1em 0em;
  }
  .leadingPlate {
    width:100%;
    max-width:100%;
    display:block;
    margin: auto;
    padding:1em 0em;
  }
}