/*
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:'Helvetica', sans-serif}

input:focus { outline: none; }

h1 { color:#687586; line-height:1.2em; font-family: "Patua One", serif; font-weight: 400; font-style: normal; letter-spacing:1px; font-size:26px; }

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

em { color:#687586; }

.uk-button { margin:5px 0; background:#378ECC; color:#fff; font-weight:300; letter-spacing:1px; text-transform:initial; height:44px; line-height:42px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.uk-button:hover { background:#F1573F; color:#fff; }

.uk-lightbox-toolbar { background:none; }
.uk-lightbox-toolbar-icon { background:rgba(0,0,0,.5); }

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


/* STYLES */

#header { position:relative; width:100%; padding:10px 0; background-color:#000; }
#header .overlay { position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; background:#000; opacity:.7; }
#header .padding { position:relative; z-index:3; }
#header a { color:#fff; }
#header a:hover { color:#f20; }
#header .logo h2 { margin:0 0 10px 0; padding:0; color:#fff; font-family: "Patua One", serif; font-weight: 400; font-style: normal; letter-spacing:1px; font-size:20px; text-align:center; }
#header .nav { font-size:14px; text-align:center; }
#header .nav a { padding:0 10px; text-transform:uppercase; letter-spacing:1px; }

#hero { width:100%; background:#000; }
#hero img { width:100%; opacity:.5; }
#hero h1 { color:#fff; font-size:20px; }

#breadcrumbs { margin:-5px 0 -20px 0; padding:0; list-style:none; font-size:14px; color:#ccc; text-align:center; }
#breadcrumbs li { display:inline; }
#breadcrumbs li:after { content:'/'; }
#breadcrumbs li.last:after { content:''; }
#breadcrumbs li a { padding:0 10px 0 5px; }
#breadcrumbs .uk-icon { position:relative; top:-2px; color:#939393; }

.padding { padding:0 30px; }

#content { width:100%; max-width:1400px; margin:0 auto; padding:30px 0; }
#content p { text-align:justify; }

#gallery { margin-top:50px; margin-bottom:50px; text-align:center; font-size:15px; line-height:1.2em; }
#gallery .photo img { width:100%; padding:4px; background:#fff; margin-bottom:10px; }

#footer { background:#000; text-align:center; padding:40px 3% 100px 3%; color:#687586; font-size:14px; }
#footer p { margin:0; }
#footer p span { padding:0 20px; }
#footer p a { color:#687586; border-bottom:1px dotted #ccc; margin:0 10px; }
#footer p a:hover { color:#f20; border-color:#f20; }

.page1 #header { padding:0; }
.page1 #content { max-width:1000px; }
.page1 #gallery { margin-top:40px; font-size:18px; }
.page1 #gallery .photo img { margin-bottom:10px; }


/* MEDIA QUERIES */

@media only screen and (min-width: 480px) {   
 
  #hero h1 { font-size:26px; }
  
}

@media only screen and (min-width: 640px) {   
  
  h1 { font-size:30px; }
  
  #header .logo h2 { text-align:left; }
  #header .nav { text-align:right; }
  
  #hero h1 { font-size:36px; }
  
}

@media only screen and (min-width: 960px) { 
  
  h1 { font-size:38px; }
  
  #header .logo h2 { font-size:26px; }
  #header .nav { font-size:17px; }
  #header .nav a { padding:0 15px; }

  #hero h1 { font-size:46px; }

}

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

@media only screen and (min-width: 1200px) {  
  
  #header .logo h2 { font-size:30px; }

  #hero h1 { font-size:60px; }
  
}

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

  #hero h1 { font-size:70px; }

}

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

  #hero h1 { font-size:80px; }

}