@charset "UTF-8";
/* CREDITS 

 * Chances Housing Co-operative
 * http://chancescoop.ca
	 
 * CSS by Dmitri Bekasov
 * Copyright (c) 2013 Dmitri Bekasov
 * http://dabproject.com
 
 */

/* GLOBAL */

body { background-color: #303540 ; color: #fff ; font-family: 'Open Sans', helvetica, arial, sans-serif ; font-weight: 400 ; line-height: 1.5 ; font-size: 87.5% ; min-width: 1180px }
a { color: #fff ; text-decoration: none }
.wrap { margin: 0 auto ; width: 1100px }
.c1, .c2, .c3 { float: left ; position: relative }
.c1 { width: 340px }
.c2 { width: 530px }
.c3 { width: 720px }
section { padding-top: 3em ; padding-bottom: 3em }
section h1 { font-family: 'Open Sans', helvetica, arial, sans-serif ; font-weight: 300 ; line-height: 1 ; letter-spacing: -2pt ; text-align: center ; margin-bottom: .6em ; font-size: 72px ; font-size: 4.5rem }
section h3 { font-family: 'Open Sans', hevletica, arial, sans-serif ; font-weight: 700 ; line-height: 1.3125 ; margin-bottom: 1em ; padding: 0 10px ; font-size: 16px ; font-size: 1rem }
section h4 { font-family: 'Open Sans', hevletica, arial, sans-serif ; font-weight: 700 ; line-height: 1.3125 ; margin-bottom: .5em ; padding: 0 10px }
section p { margin-bottom: 1em ; padding: 0 10px }
p.ct { text-align: center }

/* HOME */

#home { position: relative ; min-height: 800px }
#home .slider span { display: block ; background-position: center center ; background-size: cover ; background-repeat: no-repeat ; -ms-behavior: url(/js/backgroundsize.min.htc) ; min-height: 800px }
#home .slider span:first-child { background-image: url(/images/chances-co-op-home-slide-01.jpg) }
#home .slider span:first-child + span { background-image: url(/images/chances-co-op-home-slide-02.jpg) }
#home .slider span:first-child + span + span { background-image: url(/images/chances-co-op-home-slide-03.jpg) }
#home .slider span:first-child + span + span + span { background-image: url(/images/chances-co-op-home-slide-04.jpg) }
#home .slider span:first-child + span + span + span + span { background-image: url(/images/chances-co-op-home-slide-05.jpg) }
#home .slider span:first-child + span + span + span + span + span { background-image: url(/images/chances-co-op-home-slide-06.jpg) }
#home header { position: absolute ; overflow: hidden ; top: 0 ; z-index: 98 ; background: transparent url(/images/chances-co-op-home-slide-pattern.png) ; width: 100% ; height: 800px }
#home header .hgroup h1 { background-color: 303540 ; width: 360px ; width: 22.5rem ; margin: 48px auto 0 }
#home header .hgroup h1 span:first-child { display: block; font-family: 'oswaldbold', helvetica, arial, sans-serif; text-transform: uppercase; text-align: center; line-height: 1 ; letter-spacing: -2pt ; text-indent: -3pt; text-shadow: 0 0 4px rgba(0,0,0,.5) ; font-size: 88px ; font-size: 5.5rem }
#home header .hgroup h1 span:first-child + span { display: block ; letter-spacing: .4rem ; line-height: 1 ; text-transform: uppercase ; text-align: center ; color: #63c4f5; text-shadow: 0 0 4px rgba(0,0,0,.75) ; font-size: 17px ; font-size: 1.0625rem }
#home header h2 { display: table ; width: 100% ; font-family: 'Open Sans', helvetica, arial, sans-serif ; font-weight: 400 ; line-height: 1 ; letter-spacing: -2pt ; text-align: center ; text-shadow: 0 0 .1em rgba(0,0,0,.75) ; font-size: 88px ; font-size: 5.5rem }
#home header h2 span { display: table-cell ; vertical-align: middle ; height: 520px ; max-height: 520px }
#home .action { position: absolute ; bottom: 48px ; left: 0 ; width: 100% ; z-index: 99 } 
#home a { background-color: #ff8000 ; color: #ffe5cc ; cursor: pointer ; padding: .75em 0 ; margin: 0 auto ; display: block ; text-align: center ; width: 340px ; position: relative ; font-size: 20px ; font-size: 1.25rem }
#home a:hover { background-color: #e57300 }
#home a:active { background-color: #cc6600 }
#home a span { display: block ; width: 32px ; height: 32px ; background-image: url(/images/chances-co-op-global-icons-sprite.png) ; background-repeat: no-repeat ; background-position: 0 -640px ; position: absolute ; right: 10px ; top: .75em}

/* INTRO */

#intro { background-color: #2d5570 ; min-height: 485px }
#intro ul { margin-bottom: 1em ; padding: 0 10px ; list-style-position: inside ; list-style-type: square }
#intro li { margin-bottom: .5em }
#intro .next { padding-top: 1em }
#intro span { width: 390px ; position: absolute ; width: 390px ; left: 354px ; top: 32px }
#intro img { width: 100% ; height: auto }
#intro .c1, #intro .c1 + .c1 + .c1 { margin-right: 420px }
#intro .c1 + .c1, #intro .c1 + .c1 + .c1 + .c1 { margin-right: 0 }

/* COOP */

#coop { background-color: #fff2d9 ; color: #363636 }
#coop div:first-child { margin-bottom: 3em }
#coop .c1 { margin-right: 420px ; min-height: 153px }
#coop .c1 + .c1 { margin-right: 0 }
#coop .c1 span { display: block ; position: absolute ; width: 250px ; left: 425px ; top: -36px }
#coop img { width: 100% ; height: auto }
#coop li { float: left ; width: 188px ; margin-left: 40px }
#coop li:first-child { margin-left: 0 }
#coop li:first-child span { background-position: 0 0 }
#coop li:first-child + li span { background-position: 0 -128px }
#coop li:first-child + li + li span { background-position: 0 -256px }
#coop li:first-child + li + li + li span { background-position: 0 -384px }
#coop li:first-child + li + li + li + li span { background-position: 0 -512px }
#coop li span { display: block ; background-image: url(/images/chances-co-op-global-icons-sprite.png) ; background-repeat: no-repeat ; width: 128px ; height: 128px ; margin: .6em auto 1.4em }
#coop li p { font-size: 12px ; font-size: .75rem }
#coop a { color: #804000 }
#coop a:hover { color: #e57300 }

/* GALLERY */

#gallery { background-color: #000 ; color: #dbdbdb ; position: relative }
#gallery .bx-wrapper {	position: relative ;	margin: 0 auto ; padding: 0 0 1em ;	*zoom: 1 }
#gallery .bx-wrapper img {	max-width: 100% ;	display: block }
#gallery .bx-controls-direction a { position: absolute ; display: block ; width: 32px ; height: 32px ; background-image: url(/images/chances-co-op-global-icons-sprite.png) ; background-repeat: no-repeat }
#gallery .bx-controls-direction a * { display: none }
#gallery .bx-prev, #gallery .bx-next { top: 359px }
#gallery .bx-prev { background-position: -64px -672px ; left: -40px }
#gallery .bx-next { background-position: -96px -672px ; right: -40px }
#gallery .bx-prev:hover { background-position: -64px -640px }
#gallery .bx-next:hover { background-position: -96px -640px }
#gallery .loader { position: absolute ; left: 0 ; top: 11em ; width: 100% }
#gallery .loader span { display: block ; text-align: center ; width: 100% ; color: #555 ; font-size: 11px ; font-size: .6875rem }

/* UNITS */

#units { background-color: #f0f3f5 ; color: #303540 ; padding-bottom: 3.6em }
#units table { background-color: #fff ; width: 100% }
#units table thead, #units table tr:first-child + tr,  #units table tr:first-child + tr + tr + tr { background-color: #ebebeb }
#units table thead td { font-family: 'Open Sans', hevletica, arial, sans-serif ; font-weight: 700 ; color: #777 }
#units table td { padding: .7em 10px ; text-align: right }
#units table td:first-child { text-align: left }
#units span { display: block ; width: 530px }
#units span img { width: 100% ; height: auto }
#units .c1, #units .c2 { margin-right: 40px }
#units .c2 + .c2 { margin-top: 36px ; margin-right: 0 }

/* LOCATION */

#location { background-color: #576652 ; color: #e9f2e6 ; padding-bottom: 1em }
#location ol { margin-bottom: 1em }
#location a { color: #ffd400 }
#location a:hover { color: #fff }
#location ol { padding: 0 10px ; column-count: 2 ; -moz-column-count: 2 ; -webkit-column-count: 2 ; column-gap: 60px ; -moz-column-gap: 60px ; -webkit-column-gap: 60px }
#location li { display: block ; counter-increment: step ; position: relative ; padding: 0 40px .5em }
#location li::before { content: counter(step) ; background-color: #ffd400 ; color: #000 ; border: 1px solid #000 ; position: absolute ; top: 0em ; left: 0 ; width: 1.5em ; height: 1.5em ; text-align: center ; border-radius: .75em ; -moz-border-radius: .75em ; -webkit-border-radius: .75em ; font-size: 14px ; font-size: .875rem }
#location .c1 { margin-right: 40px }
#map { height: 400px }

/* APPLY */

#apply { background-color: #ff7f00 }
#apply .c1:first-child, #apply .c1:first-child + .c1 { margin-right: 40px }
#apply h1 { margin-bottom: .2em }
#apply li { counter-increment: step ; position: relative }
#apply li::before { content: counter(step) ; display: block ; width: 100% ; margin: 0 0 .2em 0 ; font-family: 'Open Sans', hevletica, arial, sans-serif ; font-weight: 700 ; line-height: 1 ; text-align: center ; font-size: 72px ; font-size: 4.5rem }
#apply a { display: block ; width: 100% ; background-color: #fff ; color: #ff7f00 ; position: relative ; padding: .8em 0 ; text-align: center ; font-size: 20px ; font-size: 1.25rem }
#apply a:hover { background-color: #fff2e5 }
#apply a:active { background-color: #ffe5cc }
#apply a span { display: block ; width: 32px ; height: 32px ; background-image: url(/images/chances-co-op-global-icons-sprite.png) ; background-repeat: no-repeat ; background-position: -32px -640px ; position: absolute ; right: 10px ; top: .75em }
#apply .address { display: block ; padding-top: 1em ; font-size: 20px ; font-size: 1.25rem }
 
/* FOOTER */

footer { padding-top: 3em ; padding-bottom: 3em }
footer p { font-size: 11px ; font-size: .6875rem ; color: #939496 ; padding: 0 10px }
footer .logo, footer .contact { margin-right: 40px }
footer .logo span:first-child { display: block; font-family: 'oswaldbold', helvetica, arial, sans-serif; font-size: 44px; font-size: 2.75rem; text-transform: uppercase; line-height: 1 ; letter-spacing: -1pt ; color: #adaeb1 ; padding-left: 10px }
footer .logo span:first-child + span { display: block ; font-size: 8px ; font-size: .5rem ; letter-spacing: .2rem ; line-height: 1 ; text-transform: uppercase ; color: #63c4f5 ; padding-left: 11px }
footer .contact a { color: #a0a1a3 }
footer .contact p:first-child + p { margin-bottom: .6em }
footer .dab a * { display: none }
footer .dab a { display: block ; height: 15px ; width: 165px ; background-image: url(/images/dab-project-badge-sprite.png) ; background-repeat: no-repeat ; background-position: 0 -15px ; margin-top: 8px }
footer .dab a:hover { background-position: 0 0 }