@charset "UTF-8";
@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}


/*! HTML5 Boilerplate v5.0.0 | MIT License | https://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* https://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   
   only a bit of Eric's reset, to get rid of any lurking margins that thwart my settings:
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html,
button,
input,
select,
textarea {
    color:#441819;
}

html {
    font-size: 1em;
    line-height: 1.5;
    font-family: "Libre Baskerville", Georgia, serif;
}
 
body {
    position: relative;
    width: 100%;
    min-width: 20em;
    background: #FEF9F9;
    background-image:url(../img/linesbg.png);
    background-repeat: repeat;
}

.highlight {
  background: #00ffff;/*if use highlighter, will be VET turquoise, not the HTML5BP greyish yellow*/
}


/*Trent Walton styles*/
em {font-style: italic;}/*tw*/

a, a:link, #nav a {
    transition: color 0.2s ease-out 0s;
    text-decoration: none;}/*tw - nice fade in of link hovers*/
    
/*end Trent Walton styles*/


/*VET font styles based on Richard Rutter Elements of Typographic Web Style; trying to achieve vertical baseline with multiples of 12, lineheight is 24px or 1.5em at 16px*/

#main h2, h3, h5 {
	font-weight: 400;
}

h1 {
	font-size: 3.375em;/*54px/16px=3.375em*/
    line-height: 0.8888888888888;/*0.2x24=48; 48/54=0.888..*/
    margin-bottom: 0.75em;/*12/16=0.75em*/
    font-weight: 700;
}
    
h2 {
   font-size: 2.25em;/*36px/16px=2.25em*/
   line-height:1;/*3x12=36; 36/36=1*/
   margin-bottom: 0.75em;/*12/16=0.75em*/
    text-align: left; 

}

h3 {
    font-size: 1.5em; /*24/16px=1.5em*/
    line-height: 1.25;/*30/24=1.25*/
    margin-bottom: 0.3753em;/*6px/16px=0.3753em*/
	 text-align: left; 
}

h4  {
    font-weight: 700;
}

p, h4 {   
    line-height: 1.5;/*/24px/16px=1.5*/
    margin-bottom: 1.125em;/*18/16px=1.5em*/
}
h5 {
    font-size: 1em;
    line-height: 1.25;/*30/24=1.25*/
    margin-bottom: 0.3753em;/*6px/16px=0.3753em*/
}
small, .font_small {
    font-size: 0.44444444444444444em;/*7px/16px*/
    line-height: 1.714285714;/*lh 12px; 12/7=1.714285714*/
}
/*header styles*/
#top img{
    display: block;
    width: 23.489356881875%;
    height: auto;           
    max-width: 100%;
    min-width: 14.517220926875em;    
    margin-bottom: 1em;
    margin-right: auto;
    margin-left: auto; 
    float: none;
	-webkit-border-radius: 50px;
    -moz-border-radius: 50px;
	-o-border-radius:50px;
    border-radius: 50%;
	background:url(../img/vetlogobg.gif);
    background-repeat: repeat;
    }/*kVET styled from demosthenes and bruceontheloose; this seems to do it but I had trouble getting width to work correctly*/
    
#logofull {
    text-align: center;
    vertical-align:baseline;
    margin-bottom: 3em;
}
/*includes both sides of logo under photo*/
h1.logovet{      
    color: #ee4938;
    display: inline-block;
    margin-left:-1em /*-0.809016994375em*/;
    font-family: 'Cabin Condensed', sans-serif;
    margin-bottom: 0;
 }
 /*this is the [vet] part of the logo*/
h1.logotext{
    font-size: 0.75em;/*12/16; was 0.8125*/
    max-width: 5%;
    line-height: 1;
    display: inline-block;
    font-family: 'Cabin', sans-serif;   
    text-align: left;
    margin-bottom: 0;
   }
   /*this is the "VANCOUVER ENGLISH TEACHER" part of the logo*/
   
   
   
/* This horizontal rule is from: https://css-tricks.com/examples/hrs/*/ 
hr.style-two { 
    border: 0; 
    height: 1px; 
    color: #441819; 
    margin-bottom: 2em;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0)); 
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0)); 
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0)); 
}
 


/*kVET Lists */
/*from old site, esp for resources page.  Was #content ul.favilist etc ie. replace .main with #content for old tags - need to change html*/

#main ol, ul, li {
    padding-left: 0;
 }

.block.prose ul {
    margin-bottom: 0.75em;/*12/16px=0.75em*/
}/*I can't believe how long it took me to figure out this selector; trying to use #main kept targetting nav link li for some reason*/

#main ol {
    list-style-type: decimal;
    }
    
    
/*li > p {
	margin-top: 0.2360679774997942em;
} *//*TW: 0.2em; is for paragraphs that are children of list items */

#main ul.disc {
	list-style-type: disc;
}

#main ul.disc li{	
    list-style-type: disc;
    list-style-position:outside; 
    margin-left: 0.8125em; 
    /*margin-left: 0; is the way TW had it - bullets outside the main body of the text so as not to disrupt flow; couldn't get it to do this with styles on the ul alone*/
}

/*to use a glyph rather than big honking disc: https://jsfiddle.net/keyanzhang/3f2vb/  plus this is how to indent second lines: https://stackoverflow.com/questions/17556496/cross-browser-compatible-hanging-indent-for-lists */
#main ul.tilde {
    list-style-type: none;   
    margin-left: 0; 
    padding-left: 1em;
    text-indent: -2em;
}
#main ul.tilde > li:before {
    list-style-type: none;
    content: "~" "\00a0" "\00a0"; /* glyphs here */
    padding-left: 1em;
}

#main ul.checklist{
    list-style-type: none;   
    margin-left: 1em; 
    padding-left: 1em;
    text-indent: -3em;
}
#main ul.checklist > li:before {
    list-style-type: none;
    content: "["  "\00a0" "\00a0"  "]" "\00a0" "\00a0"; /* glyphs here */
    padding-left: 1em;
}
 

#favLinks ul.favilist, #main ul.charts{
	list-style-type: none;
    padding-left: 0;
}
                                                  



/*kVET links styles*/
a, a:link {
	color: #A1332A;
	text-decoration: none;
	outline: none;
}
a:visited {
	color: #A1332A;
    text-decoration: none;
    outline: none;
}
a:focus, a:hover {
	color: #EE4938;
    text-decoration:underline !important;
}
a:active {
	color: #EE4938;
	text-decoration: none;
}




/*cheat to let me float individual items where I want them:*/
.forceleft {
	float: left;
}
.forceright {
	float: right;
}

/*definitions*/
dl{
  margin-bottom: 1em;
  padding-left: 2.25em;
  background-color: transparent;
  background-image:url(../img/pipebg.png);
  background-repeat: repeat-y;
  background-attachment: scroll;
  background-position: 0% 0%;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
}/*  nice pipe thing like TW*/

dt{
    font-weight: 700;
}
dd{
    margin-left: 2em;
}

/*button style for email me*/
input {
    vertical-align: middle;
    background-image: url(../img/buttonbg.gif);
    background-repeat: repeat-x;
    background-position: 0 0;
    width: 16em;
    font-size: 88%;
    color: #A1332A;
    padding: .33em;
    border-top: 1px solid #DDD5D5;
    border-right: 2px solid #998182;
    border-bottom: 2px solid #998182;
    border-left:1px solid #DDD5D5;
}

input:hover,input:focus,input:active {
	color: #ee4938;
	text-decoration: none;
}


/*TABLE styles for services page*/

#main table {
	width: 95%;
    border-top: 1px solid #DDD5D5;
    border-right: 2px solid #998182;
    border-bottom: 2px solid #998182;
    border-left:1px solid #DDD5D5;
    margin: 0 auto 1.5em;
	background-color: #f9efed;
}

#main table.first {
	width: 45%;
	float: left;
}
#main table.second {
	width: 45%
}

#main th{
    font-family: Cabin, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-variant: small-caps;
    text-align: left;/* need to force headings to left*/
	padding: .3em 0 .3em .4em;
}
#main td{
	padding: .1em 0 .3em .5em;
    font-size: 0.8125em;
    line-height: 2;
}

/*kVET styling of DB Page Structure for OCM*/
#container{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1260px;
    *zoom: 1;
    background-color: transparent;
}
#outer-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}
#inner-wrap {
  position: relative;
  width: 100%;
}
.block {
  position: relative;
  margin: 0 auto;
}
/* padding: 1.61803398875em;*/ /*gives space around top navlinks - like TW*/
/*  padding: 1.5em 1.25em;*//*affects nav.block main.block etc - but not the same if Ido them individually; e.g. nav.block doesn't give same effect; oops that's b/c nav is id not class*/
/*max-width: 60em; removed by kk - was making links in header too narrow - but then article too wide - add max-widths in MQs for each size*/

#nav {
  padding: 1.5em;/* this adds space around the nav bar above the bottom border - adding just one value moves everything down and to the right */
  margin-bottom: 2.25em;
/*this gives extra space below top nav bar, below border (between bottom border and image),no effect on OCM*//*see above re: collapsing margins for top of image vs bottom of nav link; bigger one wins in large screens (this one) but in mobile screens with no nav links, have nice small distance from top for image*/
}

#main {
  background: transparent;
}

#main .block {
  margin: 0 1.5em;
}/*increases room around text horiz and vert in main (yellow in DB original)NEED THIS kVET, unless can figure out another way to get space around text in small screens using margins; ok apparently if use padding can screw up vertical alignment amoung other things so will go with margins*/
/*Margin is on the outside of block elements while padding is on the inside.
    - Use margin to separate the block from things outside it
    - Use padding to move the contents away from the edges of the block.
*/


footer[role="contentinfo"] {
    margin: 0 0.8125em;
    clear: both;
  /*  border-top: 1px solid rgba(58,58,58,0.1);*/
  /*https://stackoverflow.com/questions/11191746/should-role-contentinfo-be-always-added-on-footer-element*/
}




/*kVET: The following is the setup for DB's OCM nav links; do not change! style the top nav links in the media queries below the OCM magic*/
/*
 *
 *  A responsive off-canvas menu using CSS transforms and transitions, explained in a Smashing Magazine article.
 *  Copyright © David Bushell | BSD & MIT licenseCopyright (c) David Bushell | https://dbushell.com/
 *  Code adapted and modified by VET.
 */


#nav {
  z-index: 200;
position:relative;
  overflow: hidden;
  width: 100%;
}

#nav .close-btn {
  display: none;
}

#nav .block-title {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

#nav .block {
  z-index: 2;
  position: relative;  
  background: transparent;
/*  padding: 1.618em 0em;*/
/*  padding: 0.75em 1.25em;*//*changes space around links in top nav block, big screens only not OCM - if remove, defaults to .block padding I've set at 0*/
}

/*CLEARFIX*/
#nav ul {
  *zoom: 1;
  display: block;
}

#nav ul:before, #nav ul:after {
  content: "";
  display: table;
}
#nav ul:after {
  clear: both;
}
/*END CLEARFIX*/

#nav li {
  display: block;
  }
  
#nav li a {
  display: block;
  color: #441819;/* was grayl kVET changed*/
  font-size: 1em;/*16/16*/
/*  line-height: 0.0263112349928502;*//*important - navlink height and also affects shape of home logo oddly enough; don't know how I got it round with this lh...but Apr 5 2015 - lh = 0 does the trick! see line 1367*/
  line-height: 0;
  font-weight: 400;
  outline: none;
}

#nav li a:focus, #nav li a:hover {
  color: #ee4938;
  background: rgba(238,73,56,0.03);/*this was apparent in DB when BG was almost transparent; I only want this faint colour on the off canvas menu so I remove this in MQ for top nav links*/
  text-decoration:none !important;
}

#nav li.is-active a {
  color: #ee4938;
}

#top {
  z-index: 100;
  position: relative;
  background: transparent; /*kVET changed; was to #333333 in DB original*/;
}

#top .nav-btn {
  position: absolute;
  top: 1.5em;
  left: 1.875em;/*this moves the position of the green nav button in the mobile layout*/
}


/*Off Canvas Menu Button Styles by DB*/
.close-btn {
  display: block;
  width: 2.625em;
  height: 2.25em;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent/*#3A3A3A*//*colour for close button itself, not bg; was #333333*/ url("../img/close-btnred.svg") left center no-repeat;
  background-size: 1.875em 1.875em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;/*1*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-svg .close-btn {
  background-image: url("../img/close-btnred.png");
}

.close-btn:focus, .close-btn:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.nav-btn {
  display: block;
  width: 2.625em;
  height: 2.25em;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent /*kVET - DB was #333333*/ url("../img/nav-iconred.svg")/*kk can edit svg code*/ left center no-repeat;
  background-size: 1.875em 1.5em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100/*70*/);
  opacity: 1;/*0.7*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-svg .nav-btn {
  background-image: url("../img/nav-iconred.png");/*kk can edit in PS*/
}

.nav-btn:hover, .nav-btn:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70/*100*/);
  opacity: 0.7;/*1*/
}


@media screen and (max-width:44.9375em){/*mobile first: max width for off canvas menu 720px*/
  html{font-size: 62.5%
    }
    
  #nav {
    position: absolute;
    top: 0;
    padding-top: 5.25em;/*removing this pushes open/close button halfway off screen at top*/
  }
  
  #nav:not(:target) {
    z-index: 1;
    height: 0;
  }
  
  #nav:target .close-btn {
    display: block;
  }
  
  #nav .close-btn {
    position: absolute;
    top: -3.75em;
    left: 1.875em;
  }
  
  #nav .block {
    position: relative;
    padding: 0;
  }
  
  #nav li {
    position: relative;
    border-top: 1px solid rgba(58,58,58,0.1);/*1px solid rgba(255, 255, 255, 0.1)*/
  }
  
  #nav li:last-child {
    border-bottom: 1px solid rgba(58,58,58,0.1);
  }
  
  #nav li.is-active:after {
    z-index: 50;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -0.03125em;
    margin-top: -0.625em;
    border-top: 0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right: 0.625em white solid;
  }
  
  #nav li a {
/*    padding: 1.309016994375em 2.14286em;*/
    padding: 1.5em 2.25em;
  }/*this affects the off canvas menu links only, not the top nav bar*/
  
  .js-ready #nav {
    height: 100%;
    width: 70%;
    background: @#441819;/*kVET changed; was #333333 - background color of OCM*/
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
  }
  
  .js-ready #nav .block {
    background: transparent;
  }
  
  .js-ready #nav .close-btn {
    display: block;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
  }
  
  .js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  
  .js-ready #nav {
    left: -70%;
  }
  
  .js-ready #inner-wrap {
    left: 0;
  }
  
  .js-nav #inner-wrap {
    left: 70%;
  }
  
  .csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);

    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .csstransforms3d.csstransitions.js-ready #inner-wrap {
    left: 0 !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .csstransforms3d.csstransitions.js-nav #inner-wrap {
    -webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
  }
  
  .csstransforms3d.csstransitions.js-ready #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay: ease, 0s;
    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition: opacity 300ms 100ms ease, transform 500ms ease;
    -webkit-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -moz-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -ms-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -o-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }
  
  .csstransforms3d.csstransitions.js-nav #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  
  #top .block-title {
  display: none
  }/*kk - to hide banner and top nav links when off canvas menu in use, or else they run into each other*/
  
  .forceright {
   float:left;
  }/*kVet - I realize this is semantic blasphemy: this is to float the right footer item LEFT in small screens only*/

}

/* ==========================================================================
   Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   ========================================================================== */

@media screen and (min-width: 19.9375em) {
    html{font-size: 75%}
} /*319px*/

@media screen and (min-width: 20em) {
    html{font-size: 81.25%}
} /*320px*/

@media screen and (min-width: 22.5em) {
    html{font-size: 93.75%} 
} /*360px*/
  
@media screen and (min-width: 27.5em) {
    html{font-size: 100%}
    /*  #nav li a {padding: 2.14286em;}*/ 
} /*440px*/
  
@media screen and (min-width: 30em) {
    html{font-size: 106.25%} 
} /*480px*/

@media screen and (min-width: 32.5em) {
    html{font-size: 112.5%} 
} /*520px*/

@media screen and (min-width: 37.5em) {
    html{font-size: 118.75%} 
} /*600px*/

@media screen and (min-width: 45em) { /*45em 720 px*//*this affects tablet/portrait 768x1024 mode on resize firefox; tablet/portrait is where top nav links first appear*/
    html {font-size: 125%;}
  
/*tw from his MQ2 - styling #main here centers content nicely, revealing green outside the yellow in larger screens - small tab portrait and up - moved to size below this so centers on mobile landscape*/    
    #main{
		margin-left: auto;
		margin-right: auto;
		display: block;
		float: none;
        overflow:hidden; 
		width: 95%;
        max-width: 35rem;/*35 gives more margins, better width for easy read than 40*/
}
 
/*IMPORTANT !!!!! this is db off canvas menu magic - hides button and gets nav links to display up top- do not mess with it*/
    #top .nav-btn {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
}/*.nav-btn is icon-like nav button for off canvas menu*/

    #nav .close-btn {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
}

    #nav .block-title /*don't know where this class is in HTML but if remove "-title" , top nav links are completely invisible in large screens*/{
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
}
  
/*OK; below here, ok to change to style top nav links - combo of db and tw*/
    #nav{
/*        border-bottom: 1px solid rgba(58,58,58,0.1); */
 border-bottom: 1px solid rgba(68,24,25,0.2);
        /*this is the line below nav links*/
}
  
    #nav ul {
        display: block;
        text-align: center;
        white-space: nowrap;
/*        margin-left: 1%; thought I liked this but I don't*/
        width: 100%; /*after removing padding from .block, i might need to add in some spacing here? decrease width or add margins to nav or nav ul?*/
}
    
    #nav ul li { 
        float: left; 
        width: 15%; /*start at 15% for small screens, incr up to 18% for big monitor like mine in MQs bdlo; this is each indiv top navlink*/
        /*necessary!  float and width added from and modified from tw*/
        margin-right: 0;
        display: inline-block;
}
  
    #nav li:last-child {
        border-right: none;
}
    #nav li a {
      padding: 1em 0;/* remove this and logo button flattens out to long wide ellipse; Apr 5 2015 fixed see line 1004 */
        /*was 0.42857em 0.85714em originally; could change this with each MQ to make top nav fit nicely; also - TW styles each nav link based on number of letters to get them distributed nicely - I think mine is fine*/
}   
    #nav li a:focus, #nav li a:hover {
          color: #ee4938;
          background: rgba(255, 255, 255, 0.1);
          /*this was apparent in DB when BG was almost transparent; can change to a colour later if want, but tw has links just plain which I like; these look good on the off canvas menu though...*/
}

/*kVET styling home button as logo/different from other navlinks*/
    #nav li.logo {
        color: #ee4938 !important;
        font-weight: 700;
        background: #441819;
        padding: 0.5em;
        margin-top: -0.5em;/*moves button up to align with other navlinks*/
        margin-right: 2em;
        width:auto; 
        height:auto;
        border-radius: 50%;
}

    #nav li.logo a {
        color: #ee4938;
}

    #nav li.logo a:focus, #nav li.logo a:hover {
        color: #00ffff;
        background: #441819;
}
/*end my logo messing around*/

} /*don't delete this closing brace for the media query!*/

@media screen and (min-width: 50.000em) { /*50 em 800px*//*small tablet landscape in FF resize*/
/*   html {font-size: 131.5%;}
  #main{
		width: 90%;
		max-width: 40rem;  Mar2015 commented out after changing tablet portrait above
}*/

  /*#nav li a {
    padding: 0.42857em 1.618em;*//*0.42857em 0.85714em originally; change this with each MQ to make top nav fit nicely; also - TW styles each nav link based on number of letters to get them distributed nicely*/
}
  
  
@media screen and (min-width: 64.000em) { /*1024px*//*tablet landscape in FF resize*/
/*      #top h1, #top h2{
          font-size: 2.61803398875em;
          margin-top: 1em;
          
    }*/
    /*"logo" VET/Vancouver English Teacher but this doesn't seem to do anything extra having these styles here*/
}


@media screen and (min-width: 64.375em){ /*1030px*/
/*	html {font-size: 137.5%;}*/
    #main {
		width: 80%;
/*		max-width: 35rem;*/
	}

}


@media screen and (min-width: 75.000em) and (min-height:31.250em) { /*1200px X 500px*/
     html {
/*         font-size: 100%;*/
         }/*inserting this as test so I can get my vertical rhythm set - will it work? or does the cascade take all the other increases?  crap what was it before I inserted this?*/
     #nav ul li { 
        width: 18%;
}
}
	


@media screen and (min-height:43.750em)  {  /*700px*/
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 * https://juicystudio.com/article/screen-readers-display-none.php
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires. 
   ========================================================================== */
/*leaving these as added by HTML5BP even though I've made my MQs above*/
@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   https://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * https://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}