@charset "UTF-8";
/*
* Additional styles
* keelypowell.com
* 2016
*
* COLORS:
* Bright pink: #e52a6f
* Dark purple: #5f0f4e
* Light purple: #675682
* Light blue: #67aeca
* Dark grey: #222
* Light grey: #eee
*
*/

/* Shared styles */
h1::first-letter, h2::first-letter{ background: url(../images/border.jpg) repeat-x 0 85%; }
.wrapper { padding: 80px 0; background: rgb(238,238,238);
background: linear-gradient(0deg, rgba(238,238,238,0.5) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 100%);}
.center { text-align: center; }
a#scroll_top { display: none; position: fixed; width: 40px; height: 40px; bottom: 20px; right: 10px; z-index: 999; box-sizing: border-box; background: url(../images/bg_opacity.png) repeat; color: #fff; border: 1px solid #fff; font-size: 25px; text-align: center; -webkit-border-radius: 40px; border-radius: 40px; }
a#scroll_top:hover { color: #e52a6f; border: 1px solid #e52a6f; }
strong { font-weight: 600; color:#4E92CA; }
/* Nav */
.wrapper.nav { padding: 0; background: url(../images/bg_opacity.png) repeat; position: fixed; top: 0; color: #fff; width: 100%; height: 60px; z-index: 2; margin-top: -60px; }
.wrapper.nav h2 { float: left; padding: 5px 0 0 20px; }
.wrapper.nav h2 a { color: #fff; text-decoration: none; }
.wrapper.nav h2 a:hover { color: #e52a6f; text-decoration: none; }
.wrapper.nav h2::first-letter { background: url(../images/border-alt.jpg) repeat-x 0 85%; }
.wrapper.nav ul { text-align: right; margin: 0 20px 0 0; }
.wrapper.nav ul li { display: inline-block; margin: 0; }
.wrapper.nav ul li a { color: #fff; display: block; padding: 20px 10px; text-decoration: none; }
.wrapper.nav ul li a:hover { color: #e52a6f; }
.wrapper.nav.show-nav { margin-top: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.wrapper.nav.internal { margin-top: 0; position: relative; padding: 17px 0 0 0; height: 42px; }
.wrapper.nav.internal a { color: #fff; text-decoration: none; background: url(../images/arrowl.png) no-repeat 10px center; padding-left: 60px; margin-left: 20px; }
.wrapper.nav.internal a:hover { color: #e52a6f; background: url(../images/arrowl-alt.png) no-repeat 0px center; webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
@media (max-width: 400px) {
.wrapper.nav h2 { padding: 5px 0 0 10px; }
.wrapper.nav ul { margin: 0 10px 0 0; }
.wrapper.nav ul li a { padding: 20px 8px; }
}
/* Intro */
.wrapper.intro { background: url(../images/aboutbg_sm.jpg) no-repeat center center; background-size: cover; color: #fff; text-align: center;}
.wrapper.intro h1::first-letter { background: none; }
.wrapper.intro a.button { color: #fff; border-color: #fff; }
.wrapper.intro a.button:hover, .wrapper.intro a.button:focus { color: #e52a6f; border-color: #e52a6f; background: url(../images/bg-alt_opacity.png) repeat; }
h1.logo { font-size: 14rem; }
.wrapper.intro h1.logo::first-letter { background: url(../images/border-alt.jpg) repeat-x 0 80%; }
.arrow-d { width: 50px; height: 50px; display: block; margin: 80px auto 0 auto; position: relative; color: #fff; }
.arrow-d:hover { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
/* About */
#mission.wrapper.about{ background: rgb(113,92,173); background: linear-gradient(318deg, rgba(113,92,173,0.2) 0%, rgba(78,146,202,0.2) 67%, rgba(78,146,202,0.2) 100%); }
.wrapper.about h2::first-letter { background: url(../images/border.jpg) repeat-x 0 85%; }
.h-bridge { padding: 15px 0 15px 20px; }
.g-bridge { padding: 0 20px 0 0; }
/* Skills */
.wrapper.skills {}
.skills h2{margin-bottom:2rem;}
.skills h3{text-align: center;text-transform:uppercase;}
.skills h4 {;margin-top: 1rem;}
#services h4, #about h4  {color: #4E92CA;background: rgb(113,92,173);
background: linear-gradient(318deg, rgba(113,92,173,0.2) 0%, rgba(78,146,202,0.2) 67%, rgba(78,146,202,0.2) 100%); padding:10px 15px; border-radius: 4px; min-height:60px;font-size:1.5rem;}
#services.wider h4 {min-height: 100px;}
.skills h4 span {float: left; margin: -3px -25px;color: #7FADDF;}
.skills h5{color: #4E92CA; border-top: #E4E5E7 2px solid; padding: 15px 0; margin: 0;}
.skills h5:first-of-type{border-top:none;}
.details span{background: #4E92CA; color: #fff; padding: 0 5px; border-radius: 2px; text-transform: uppercase; letter-spacing: 1px; font-size: 1rem;}
.details {display:none;}
.showmore {text-transform: uppercase; letter-spacing: 1px; display: inline; margin: 0; float: right; }
.showmore span{font-size: 20px; font-weight: 800; float: right; padding: 15px 5px;}
.showmore .arrowup {display:none;}
.showmore.open .arrowup {display:inline;}
.showmore.open .arrowdown {display:none;}
/* Work */
.wrapper.work .column, .columns { width: 50%; }
.wrapper.work .container.full a { display: block; opacity: .7; line-height: 0.6em; }
.wrapper.work .container.full a:hover { opacity: 1; }
/* Contact */
#contact{text-align: center; background: #fff;}
@media (min-width: 550px) {
.wrapper.work .three.columns { width: 25%; }
.wrapper.work .column, .columns { margin-left: 0%; }
}
/*Examples*/
.featherlight .featherlight-inner { width: 100%; height: 100%; }
@media (min-width: 400px) {
.featherlight .featherlight-content { width: 80%; height: 80%; max-width: 350px; max-height: 250px !important; }
}
@media (min-width: 550px) {
.featherlight .featherlight-content { width: 80%; height: 80%; max-width: 450px; max-height: 350px !important; }
}
@media (min-width: 750px) {
.featherlight .featherlight-content { width: 80%; height: 80%; max-width: 550px; max-height: 450px !important; }
}
@media (min-width: 1000px) {
.featherlight .featherlight-content { width: 80%; height: 80%; max-width: 750px; max-height: 550px !important; }
}
.wrapper.examples .container { max-width: 980px; }
.wrapper.examples.alt .container { max-width: 450px; }
.wrapper.examples.alt .container.wide { max-width: 980px; }
.wrapper.examples .row { background: #eee; }
.wrapper.examples.alt .row { background: none; }
.wrapper.examples .row .column.image { overflow: hidden; background: #67aeca; }
.wrapper.examples.alt .row .column.image { overflow: hidden; background: #fff; }
.wrapper.examples .column, .columns { margin-left: 0%; }
.wrapper.examples .description { padding: 4%; }
.wrapper.examples.alt .description { padding: 4% 0; max-width: 650px; margin: auto; }
.wrapper.examples img { max-width: 700px; padding: 100px 20px; }
.wrapper.examples.alt img { padding: 0px; margin: auto; }
.wrapper.examples #work5 img { max-width: 450px; padding: 110px 50px; }
.wrapper.examples #work8 img { max-width: 350px; padding: 70px 60px 0 70px; }
.wrapper.examples #work6 img { max-width: 600px; padding: 150px 50px; }
@media (min-width: 320px) {
.wrapper.examples .row .column.image { height: 300px; }
}
@media (min-width: 550px) {
.wrapper.examples .row .column.image { height: 350px; }
}
@media (min-width: 750px) {
.wrapper.examples .row .column.image { height: 400px; }
}
@media (min-width: 1000px) {
.wrapper.examples .one-half.column { width: 50%; }
.wrapper.examples.alt .one-half.column { width: 100%; }
.wrapper.examples .row .column.image { height: 600px; }
.wrapper.examples.alt .row .column.image { height: 500px; }
.wrapper.examples.alt img { max-width: 750px; }
}
@media (max-width: 1000px) {
.wrapper.examples .column { width: 100%; margin: 0; }
.wrapper.examples img, .wrapper.examples #work5 img, .wrapper.examples #work8 img, .wrapper.examples #work6 img { max-width: 92%; padding: 50px 4%; margin: auto; }
}
@media (max-width: 1024px) {
#lightbox2, #lightbox1 { display: none; }
}
@media (max-width: 450px) {
.wrapper.examples img { max-width: 100%; padding: 50px 0; margin: auto; }
.wrapper.examples #work6 img { padding: 70px 4%; }
}
/* Contact */
.profile { display: block; margin: 0 auto -81px auto; z-index: 1; position: relative; }
#contactForm { background: #eee; padding: 100px 125px 50px; }
.contactForm { height: 550px; min-height: 50px; overflow: hidden; border: none; position: relative; }
@media (max-width: 750px) {
#contactForm { padding: 100px 50px 50px; }
}
/* Footer */
.wrapper.footer { padding: 40px 0 15px 0; background: #222; color: #fff; margin-top: 50px; }
.wrapper.footer h4::first-letter { background: url(../images/border-alt.jpg) repeat-x 0 80%; }
p.copyright { text-align: center; border-top: 1px solid #444; padding: 20px 0 0 0; margin-bottom: 0; }
a.social svg {fill: #fff; width:40px; height: 40px }
a.social:hover svg { fill:#e52a6f;}