/*
Website Design/Build:
Kevin Snell
Formulate Communicative Design
www.formulate.ca
*/


/* GLOBAL */

html,body { margin:0; padding:0; color:#687586; font-size:16px; font-family: "Inter", sans-serif; font-optical-sizing: auto; font-style: normal; }

input:focus { outline: none; }

h1, h2, h3, h4 { color:#687586; line-height:1.2em; font-weight:300; }

h1 { font-size:40px; border-left:4px solid #4BB4FA; padding:0 0 5px 20px; line-height:1.2em; }

a { color:#378ECC; }
a:hover { text-decoration:none; color:#F1573F; }

em { color:#687586; }

.uk-button { margin:5px 0; padding:0 30px; background:#0F79BF; color:#fff; font-weight:400; letter-spacing:1px; text-transform:uppercase; font-size:14px; height:42px; line-height:42px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.uk-button:hover { background:#F1573F; color:#fff; }
.uk-button-small { font-size:10px; padding:0 7px; height:23px; line-height:23px; background:#a6a6a6; }

.uk-icon { position:relative; top:-1px; }

img.align_left { float:left; margin-right:20px; }

div.title { border-left:4px solid #4BB4FA; padding:0 0 5px 20px; line-height:1.2em; }
div.title h1 { margin:0; font-size:44px; font-weight:300; letter-spacing:1px; border:none; padding:0; }
div.title p { margin:0; font-size:16px; letter-spacing:1px; }

.FormBuilderViewport { width:100%; max-width:600px; margin-top:30px; }

#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; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
#editpage a:hover { background: #ffffcc; color: #000; text-decoration:none; }

.ram_blue { color:#4BB4FA; }


/* TEMPLATE STYLES */

.padded { padding:0 20px; }

#header { padding:20px 0; background:#202631; }
#header div.logo img { width:100%; max-width:360px; }

#header div.menu div.hamburger { width:100%; text-align:right; }
#header div.menu div.hamburger a { font-size:17px; font-weight:300; color:#fff; letter-spacing:1px; }
#header div.menu ul { width:100%; text-align:right; list-style:none; margin:0; padding:0; }
#header div.menu ul li { display:inline; padding:0 12px; }
#header div.menu ul li a { color:#fff; font-size:16px; font-weight:300; }
#header div.menu ul li a:hover { color:#4BB4FA; }

.uk-offcanvas { text-align:center; }
.uk-offcanvas .uk-offcanvas-bar { padding-top:30px; }
.uk-offcanvas .uk-offcanvas-close { top:-15px; float:right; }
.uk-offcanvas ul { list-style:none; margin:0; padding:0; }
.uk-offcanvas ul li { padding-top:25px; }
.uk-offcanvas ul li a { font-size:20px; line-height:1.2em; }

#hero { background:#000; }
#hero img { width:100%; }

#content { width:100%; max-width:1200px; min-height:300px; margin:0 auto; padding:40px 0 60px 0; }

#footer { padding:30px 0; background:#202631; color:#fff; text-align:center; }
#footer div.logo img { width:100%; max-width:360px; }
#footer div.info { padding-top:5px; line-height:2em;  }
#footer div.info ul { margin:0; padding:0; list-style:none; }
#footer div.info ul li { padding:0 15px; }
#footer div.info a { color:#fff; }
#footer div.info a:hover { color:#4BB4FA; }
#footer div.info .uk-icon { margin-right:3px; }
#footer p.copyright { margin:40px 0 0 0; text-align:center; font-size:14px; color:#616875; }


/* HOME STYLES */

.page1 #content .main { font-size:16px; }
.page1 #content .main p { text-align:justify; line-height:1.8em; }
.page1 #content .main img { float:none; display:block; width:100%; max-width:300px; margin:15px auto 0 auto; }
.page1 #content .main ul { margin:20px 0 0 0; padding:0 0 0 20px; overflow:hidden; line-height:1.2em; color:#626262; }
.page1 #content .main ul li { padding-bottom:15px; }
.page1 #content .main ul li strong { line-height:1.8em; }
.page1 #content .main ul.buttons { margin:30px auto 0 auto; width:fit-content; padding:0; list-style:none; text-align:center; }
.page1 #content .main ul.buttons li { display:inline; padding:0 8px; }
.page1 #content .main ul.buttons li a.uk-button { font-size:12px; padding:0; width:170px; height:40px; line-height:40px; }

.page1 #content .sidebar { text-align:center; }
.page1 #content .sidebar img { margin:10px 0; width:100%; max-width:400px; }


/* PAGE STYLES */

#content.story { padding:20px 0 60px 0; }
#content.story hr { margin:30px 0; }

.story div.name { margin-bottom:30px; width:100%; }
.story div.name img { float:left; margin:5px 20px 0 0; width:60px; height:60px; border-radius:50%; }
.story div.name h1 { margin:0; line-height:1.2em; overflow:hidden; font-size:28px; border:none; padding:0; }
.story div.name h3 { margin:0; font-size:18px; }
.story div.name div.button { text-align:center; padding-top:10px; }
.story div.name a.uk-button { width:220px; }

.story div#video_container { width:100%; scroll-margin-top:110px; }
.story div#video_container #video { width:100%; background:#000; }
.story div#video iframe { width:100%; }

.story div.videos { margin-top:15px; }
.story div.videos div.video { text-align:center; line-height:1.2em; overflow:visible; }
.story div.videos div.video form input { display:none; }
.story div.videos div.video form button { background:none; border:none; padding:0; }
.story div.videos div.video img { margin-bottom:5px; }
.story div.videos div.video.overlay img { opacity:.5; }
.story div.videos div.video div.uk-overlay { background:rgba(0,0,0,.8); color:#fff; text-transform:uppercase; letter-spacing:1px; font-size:15px; }

.story div.main { font-size:18px; line-height:1.8em; }
.story div.main p { text-align:justify; }

.story ul.links { margin:-10px 0 0 0; padding:0; list-style:none; text-align:left; line-height:1.3em; }
.story ul.links li { padding:10px 0; font-size:16px; }
.story ul.links li strong { font-size:16px; }

.story div.faqs ul.uk-accordion li { margin-top:15px; }
.story div.faqs ul.uk-accordion a.uk-accordion-title { padding:8px 15px; background:#E1EAF0; font-size:15px; color:#285879; font-weight:500; }
.story div.faqs ul.uk-accordion a.uk-accordion-title:hover { background:#4BB4FA; color:#fff; }
.story div.faqs ul.uk-accordion div.uk-accordion-content { margin:12px 0 20px 0; font-size:15px; line-height:1.4em; color:#7698AE; }

ul.contact { margin:0; padding:0; list-style:none; font-size:20px; }
ul.contact li { padding:5px 0; }


/* MEDIA QUERIES */

@media only screen and (min-width: 640px) {   
  
  .padded { padding:0 30px; }

  .page1 #content .main img { float:left; max-width:200px; margin-right:25px; }
  .page1 #content .main ul { margin:30px 0 0 0; }
  
  .story div.name div.button { text-align:right; }
  
  #footer div.info ul li { display:inline; }

}

@media only screen and (min-width: 960px) { 
  
  .padded { padding:0 40px; }

  .story div.name h1 { font-size:32px; }
  .page1 #content .sidebar { padding:15px 0 0 80px; }
  
  #footer div.logo { text-align:left; }
  #footer div.info ul { text-align:right; }
  
}

@media only screen and (min-width: 1200px) {    
  
  .padded { padding:0 50px; }
  
  #header div.menu ul li { padding:0 15px; }
  #header div.menu ul li a { font-size:17px; }
  
  .page1 #content .main ul.buttons li a.uk-button { font-size:13px; padding:0; width:200px; height:40px; line-height:40px; }

  .story div.name h1 { font-size:36px; }
  
  #footer div.info { padding-top:8px; }
  
}

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

@media only screen and (min-width: 1600px) { 
}