.projects, .projects--intro p { @include constrain_wide; } @include breakpoint(gamma) { .projects--intro { margin-top: 3rem; -moz-column-count: 2; -moz-column-gap: 30px; -webkit-column-count: 2; -webkit-column-gap: 30px; column-count: 2; column-gap: 30px; } p { margin-top: 0; } } .projects--list { margin-top: 2em; li { @extend %clearfix; margin-bottom: 2em; } h1 { @include fontsize(32); a { color: $body_font; text-decoration: none; } } @include breakpoint(gamma) { h1 { @include fontsize(24); text-align: left; font-weight: bold; width: 40%; float: left; margin-top: -4px; } img { float: right; margin-left: 30px; } p { @include constrain_wide; @include fontsize(17); margin-right: 1em; clear: left; } } .projects--button { text-align: left; margin-left: 0} } //################# NATIONAL PARKS PROJECT ####################### .main--full { @include constrain_wide; margin-top: 3em; article { max-width: 100%; position: relative; margin-bottom: 3em;} img { max-width: 100%; padding: 0;} .buttons li { display: inline; @include fontsize(11); text-transform: uppercase; font-family: Helvetica Neue, Helvetica, sans-serif; font-weight: 500; margin: 5px; line-height: 2.6em; a { color: $body_font_light; } } @include breakpoint(beta) { h2 { text-align: left; @include fontsize(14); } .buttons { margin: 2px 10px .5em 0; line-height: 2.6em; float: right; li { a { text-decoration: none; padding: 0.75em 1.5em 0.65em; background: #463215; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; } } } @include breakpoint(gamma) { h2 { @include fontsize(20); } .buttons { margin: 0.5em 10px 0 0; li a { padding: 0.875em 1.75em 0.75em; } } } } .meta {height: 0;} } .park--title { @include fontsize(18); font-family: Helvetica Neue, Helvetica, sans-serif; color: white; @include breakpoint(beta) { @include transparent_class; @include fontsize(32); position: absolute; top: 0px; background: #201a11; z-index: 1000; margin: 0; width: 100%; text-align: left; line-height: 2em; font-size: 2em; padding-left: 0.25em; } } .park--subtitle { @include fontsize(16); @include breakpoint(beta) { @include fontsize(20); font-family: Helvetica Neue, Helvetica, sans-serif; font-weight: normal; line-height: 2.5; color: white; margin: 0 0 0 1em; float: left; padding: 0.3em 0; } } .park--legend { font-family: Helvetica Neue, Helvetica, sans-serif; line-height: .6; @include breakpoint(beta) { @include transparent_class; position: absolute; bottom: 0; width: 100%; margin: 0; background: #201a11; } } .map-container { width: 469px; height: 392px; position: absolute; right: 20px; bottom: 60px; z-index: 2000; margin: 0; padding: 0; background: url("/media/img/mapbg-dark.png") no-repeat top left; } .map-wrapper { width: 400px; height: 328px; margin: 37px 0 0 44px; } .more-container { width: 405px; height: 260px; position: absolute; right: -30px; bottom: 40px; z-index: 2000; background: url("/media/img/parkbg.png") no-repeat top left; font: normal 0.9em / 25px unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif; dl { margin-top: 45px; margin-left: 45px; text-align: left; dt,dd { margin: 4px 0; color: white; } dt { clear: left; float: left; width: 65px; //border-bottom: 1px solid #999 font-weight: bold; line-height: 25px; font-size: 0.7em; text-transform: uppercase; text-align: right; margin-right: 8px; } dd { float: left; width: 250px; overflow: hidden; //border-bottom: 1px solid #999 a:hover { color: $orange; } } } }