/*
WALK OF ACHIEVEMENT
Developer: Formulate Communicative Design
info@formulate.ca  www.formulate.ca
*/


/* GLOBAL STYLES */

html, body { background:#006666 url(../images/bkg.gif) repeat; }

a { color:#006666; text-decoration:none; }
a:hover { text-decoration:none; color:#f2965f; }

em { color:#666; }

h1, h2, h3, h4 { line-height:1.1em; }

h1 { font-size:30px; color:#004545; font-family: 'Bitter', serif; }
h2 { font-size:26px; color:#004545; font-family: 'Bitter', serif; }
h3 { margin:0; font-size:20px; color:#000; line-height:1.2em; }
h4 { font-size:18px; color:#666; }

h1 small{ font-size:18px; padding-left:10px; }

img.align_right { width:100%; max-width:350px; float:right; margin:5px 0 25px 25px; padding:6px; background-color:#fff; border:1px solid #8ac5c5; 
box-shadow: 0px 12px 24px -12px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 12px 24px -12px rgba(0, 0, 0, 0.3); }

#editpage { position: fixed; top: 4px; left: 49%;  z-index:9999; }
#editpage a { float:left; padding: 3px 6px 5px 6px; background: #db1174; color: #FFB8DB; display: block; font-weight: normal; font-size:14px; z-index:9999; margin:0 1px; text-decoration:none; line-height:1em; stroke-width:2px; }
#editpage a:hover { background: #ffffcc; color: #000; text-decoration:none; }


/* STYLES */

.layout { margin:0 auto; padding:30px 0; width:100%; max-width:1000px; }
.padded { padding:0 20px; }

#header { padding:0 0 10px 0; width:100%; text-align:center; }
#header .layout { padding:0; }

.uk-navbar-container { background:rgba(0,45,45,.75) !important; }
.uk-navbar-container .toggle { color:#fff; padding:5px 0; }
.uk-navbar-container .toggle:hover { color:#f2965f; }
.uk-navbar-container .toggle i { position:relative; top:-1px; margin-right:3px; }

.uk-navbar-nav > li > a { min-height:46px; padding:0 10px; font-size:18px; text-transform:initial; color:#fff !important; font-family: 'Bitter', serif; }
.uk-navbar-nav > li > a:hover { color:#f2965f !important; }

.uk-dropbar { padding:12px 20px 10px 20px; border:none; border-bottom:2px solid #8ac5c5; text-align:center; 
  -webkit-box-shadow: 0px 10px 22px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 10px 22px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 10px 22px 0px rgba(0,0,0,0.5);
}

.uk-offcanvas-bar a { font-family: 'Bitter', serif; font-size:20px; }

.uk-thumbnav { margin:0 auto; font-size:13px; }
.uk-thumbnav li { padding:5px 10px; text-align:center; }
.uk-thumbnav img { width:100%; max-width:130px; padding:4px; background-color:#fff; border:1px solid #8ac5c5; }
.uk-thumbnav > * > ::after { background:none; }

.mobile .uk-thumbnav img { max-width:70px; padding:0; }
.mobile .uk-thumbnav a { color:#666; }

#slider { background:#fff; }
#slider .layout { margin:0 auto; padding:0; width:100%; }
#slider .padded { padding:0; }
#slider .uk-slideshow { position:relative; background-color:#fff; border-bottom:1px solid #8ac5c5; }
#slider .uk-overlay-default { padding:10px 30px; background:rgba(255,255,255,.8); }
#slider .uk-overlay-default h3 { margin:0; color:#006666; font-size:22px; font-family: 'Bitter', serif; }
#slider .uk-overlay-default p { margin:0; color:#000; line-height:1.2em; font-size:12px; }
#slider .uk-position-bottom-left { left:3px; bottom:3px; }
#slider .uk-position-bottom-right { right:3px; bottom:3px; }

#content { background:#fff; }
#content ul li { padding:2px 0; }
#content .media img { width:100%; padding:5px; background-color:#fff; border:1px solid #8ac5c5; }
#content .media p.description { margin:0; padding:0 7px; line-height:1.2em; font-style:italic; }
#content .hero { margin-bottom:15px; }
#content .sidebar { margin-top:15px; font-size:14px; }
#content .sidebar p { margin:10px 0 0 0; }
#content .uk-table { font-size:13px; color:#006666; }
#content .uk-table td { padding:5px; }

#honourees { margin-top:-30px; background:#fff; font-size:14px; font-weight:bold; line-height:1.1em; }
#honourees h3 { margin:0 0 25px 0; }
#honourees .uk-grid-margin { margin-top:20px; }
#honourees small { line-height:1em; color:#666; font-size:12px; font-weight:normal; }
#honourees img { margin-bottom:6px; width:100%; padding:4px; background-color:#fff; border:1px solid #8ac5c5; }

#acknowledgement { background:#fff; padding:5px 0 0 0; border-top:1px solid #ccc; text-align:center; }
#acknowledgement .layout { padding:15px 0; }
#acknowledgement p { margin:0 0 7px 0; font-size:12px; line-height:1.3em; font-style:italic; }
#acknowledgement img { width:100%; max-width:140px; margin:0 0 10px 0; }

#footer { width:100%; padding:20px 0; font-size:14px; text-align:center; color: #f6f1ee; line-height:1.3em; }
#footer .layout { padding:10px 0 0 0; }
#footer img.logo { width:100%; max-width:80px; }
#footer img.tagline { width:100%; }
#footer p { margin:10px 0; }

#copyright { padding:12px 30px 14px 30px; text-align:center; color:#ccc; font-size:14px; background:rgba(0,45,45,.75) !important; }
#copyright p { margin:0; }
#copyright p span { padding:0 20px; }
#copyright p a { color:#ccc; }
#copyright p a:hover { color:#fff; }

.uk-lightbox-toolbar { background: rgba(0,0,0,.7); }



/* MEDIA QUERIES */

/* min-width 640px, small screens */
@media only screen and (min-width: 640px) { 
   
  #slider .uk-overlay-default h3 { font-size:24px; }
  #slider .uk-overlay-default p { font-size:13px; }
  
  #acknowledgement { text-align:left; }
  #acknowledgement img { width:100%; max-width:260px; margin:8px 0 0 0; }
  #footer img.logo { width:100%; max-width:150px; }
  
}

/* min-width 960px, medium screens */
@media only screen and (min-width: 960px) { 

  .uk-navbar-nav > li > a { font-size:20px; }

  #slider .layout { margin-bottom:-25px; padding:30px 0; max-width:1000px; }
  #slider .padded { padding:0 20px; }
  #slider .uk-slideshow { padding:8px; border:1px solid #8ac5c5; }
  #slider .uk-overlay-default h3 { font-size:26px; }
  #slider .uk-overlay-default p { font-size:14px; }
  #slider .uk-position-bottom-left { left:10px; bottom:10px; }
  #slider .uk-position-bottom-right { right:10px; bottom:10px; }

  #acknowledgement img { padding-right:15px; }
  
}

/* min-width 1024px, ipad */
@media only screen and (min-width: 1024px) { 
  
  #content .media { padding:3px 10px; }
  
}

/* min-width 1200px, large screens */
@media only screen and (min-width: 1200px) { 
   
  #slider .uk-overlay-default h3 { font-size:28px; }
  #slider .uk-overlay-default p { font-size:15px; }
  
}

/* min-width 1400px */
@media only screen and (min-width: 1400px) { 
  
}

/* min-width 1600px, x-large screens */
@media only screen and (min-width: 1600px) { 

}

