diff --git a/css/default.css b/css/default.css index c79cda1..3d014d9 100644 --- a/css/default.css +++ b/css/default.css @@ -1,807 +1,807 @@ -/* -===================================================================== -* Ceevee v1.0 Default Stylesheet -* url: styleshout.com -* 03-17-2014 -===================================================================== - -TOC: -a. Webfonts and Icon fonts -b. Reset -c. Default Styles - 1. Basic - 2. Typography - 3. Links - 4. Images - 5. Buttons - 6. Forms -d. Grid -e. Others - 1. Clearing - 2. Misc - -===================================================================== */ - -/* ------------------------------------------------------------------ */ -/* a. Webfonts and Icon fonts - ------------------------------------------------------------------ */ - -@import url("fonts.css"); -@import url("fontello/css/fontello.css"); -@import url("font-awesome/css/font-awesome.min.css"); - -/* ------------------------------------------------------------------ -/* b. Reset - Adapted from: - Normalize.css - https://github.com/necolas/normalize.css/ - HTML5 Doctor Reset - html5doctor.com/html-5-reset-stylesheet/ -/* ------------------------------------------------------------------ */ - -html, body, div, span, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -abbr, address, cite, code, -del, dfn, em, img, ins, kbd, q, samp, -small, strong, sub, sup, var, -b, i, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, figcaption, figure, -footer, header, hgroup, menu, nav, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-size: 100%; - vertical-align: baseline; - background: transparent; -} - -article,aside,details,figcaption,figure, -footer,header,hgroup,menu,nav,section { - display: block; -} - -audio, -canvas, -video { - display: inline-block; -} - -audio:not([controls]) { - display: none; - height: 0; -} - -[hidden] { display: none; } - -code, kbd, pre, samp { - font-family: monospace, serif; - font-size: 1em; -} - -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} - -blockquote, q { quotes: “ “ } - -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} - -ins { - background-color: #ff9; - color: #000; - text-decoration: none; -} - -mark { - background-color: #A7F4F6; - color: #555; -} - -del { text-decoration: line-through; } - -abbr[title], dfn[title] { - border-bottom: 1px dotted; - cursor: help; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - - -/* ------------------------------------------------------------------ */ -/* c. Default and Basic Styles - Adapted from: - Skeleton CSS Framework - http://www.getskeleton.com/ - Typeplate Typographic Starter Kit - http://typeplate.com/ -/* ------------------------------------------------------------------ */ - -/* 1. Basic ------------------------------------------------------- */ - -*, -*:before, -*:after { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -html { - font-size: 62.5%; - -webkit-font-smoothing: antialiased; -} - -body { - background: #fff; - font-family: 'opensans-regular', sans-serif; - font-weight: normal; - font-size: 15px; - line-height: 30px; - color: #838C95; - - -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ - -webkit-text-size-adjust: 100%; -} - -/* 2. Typography - Vertical rhythm with leading derived from 6 ---------------------------------------------------------------------- */ - -h1, h2, h3, h4, h5, h6 { - color: #313131; - font-family: 'opensans-bold', sans-serif; - font-weight: normal; -} -h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } -h1 { font-size: 38px; line-height: 42px; margin-bottom: 12px; letter-spacing: -1px; } -h2 { font-size: 28px; line-height: 36px; margin-bottom: 6px; } -h3 { font-size: 22px; line-height: 30px; margin-bottom: 12px; } -h4 { font-size: 20px; line-height: 30px; margin-bottom: 6px; } -h5 { font-size: 18px; line-height: 30px; } -h6 { font-size: 14px; line-height: 30px; } -.subheader { } - -p { margin: 0 0 30px 0; } -p img { margin: 0; } -p.lead { - font: 19px/36px 'opensans-light', sans-serif; - margin-bottom: 18px; -} - -/* for 'em' and 'strong' tags, font-size and line-height should be same with -the body tag due to rendering problems in some browsers */ -em { font: 15px/30px 'opensans-italic', sans-serif; } -strong, b { font: 15px/30px 'opensans-bold', sans-serif; } -small { font-size: 11px; line-height: inherit; } - -/* Blockquotes */ -blockquote { - margin: 30px 0px; - padding-left: 40px; - position: relative; -} -blockquote:before { - content: "\201C"; - opacity: 0.45; - font-size: 80px; - line-height: 0px; - margin: 0; - font-family: arial, sans-serif; - - position: absolute; - top: 30px; - left: 0; -} -blockquote p { - font-family: 'librebaskerville-italic', serif; - padding: 0; - font-size: 18px; - line-height: 36px; -} -blockquote cite { - display: block; - font-size: 12px; - font-style: normal; - line-height: 18px; -} -blockquote cite:before { content: "\2014 \0020"; } -blockquote cite a, -blockquote cite a:visited { color: #8B9798; border: none } - -/* --------------------------------------------------------------------- -/* Pull Quotes Markup -/* - -/* -/* --------------------------------------------------------------------- */ -.pull-quote { - position: relative; - padding: 18px 30px 18px 0px; -} -.pull-quote:before, -.pull-quote:after { - height: 1em; - opacity: 0.45; - position: absolute; - font-size: 80px; - font-family: Arial, Sans-Serif; -} -.pull-quote:before { - content: "\201C"; - top: 33px; - left: 0; -} -.pull-quote:after { - content: '\201D'; - bottom: -33px; - right: 0; -} -.pull-quote blockquote { - margin: 0; -} -.pull-quote blockquote:before { - content: none; -} - -/* Abbreviations */ -abbr { - font-family: 'opensans-bold', sans-serif; - font-variant: small-caps; - text-transform: lowercase; - letter-spacing: .5px; - color: gray; -} -abbr:hover { cursor: help; } - -/* drop cap */ -.drop-cap:first-letter { - float: left; - margin: 0; - padding: 14px 6px 0 0; - font-size: 84px; - font-family: /* Copperplate */ 'opensans-bold', sans-serif; - line-height: 60px; - text-indent: 0; - background: transparent; - color: inherit; -} - -hr { border: solid #E3E3E3; border-width: 1px 0 0; clear: both; margin: 11px 0 30px; height: 0; } - - -/* 3. Links ------------------------------------------------------- */ - -a, a:visited { - text-decoration: none; - outline: 0; - color: #11ABB0; - - -webkit-transition: color .3s ease-in-out; - -moz-transition: color .3s ease-in-out; - -o-transition: color .3s ease-in-out; - transition: color .3s ease-in-out; -} -a:hover, a:focus { color: #313131; } -p a, p a:visited { line-height: inherit; } - - -/* 4. List --------------------------------------------------------- */ - -ul, ol { margin-bottom: 24px; margin-top: 12px; } -ul { list-style: none outside; } -ol { list-style: decimal; } -ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } -ul.square { list-style: square outside; } -ul.circle { list-style: circle outside; } -ul.disc { list-style: disc outside; } -ul ul, ul ol, -ol ol, ol ul { margin: 6px 0 6px 30px; } -ul ul li, ul ol li, -ol ol li, ol ul li { margin-bottom: 6px; } -li { line-height: 18px; margin-bottom: 12px; } -ul.large li { } -li p { } - -/* --------------------------------------------------------------------- -/* Stats Tab Markup - - - - Extend this object into your markup. -/* -/* --------------------------------------------------------------------- */ -.stats-tabs { - padding: 0; - margin: 24px 0; -} -.stats-tabs li { - display: inline-block; - margin: 0 10px 18px 0; - padding: 0 10px 0 0; - border-right: 1px solid #ccc; -} -.stats-tabs li:last-child { - margin: 0; - padding: 0; - border: none; -} -.stats-tabs li a { - display: inline-block; - font-size: 22px; - font-family: 'opensans-bold', sans-serif; - border: none; - color: #313131; -} -.stats-tabs li a:hover { - color:#11ABB0; -} -.stats-tabs li a b { - display: block; - margin: 6px 0 0 0; - font-size: 13px; - font-family: 'opensans-regular', sans-serif; - color: #8B9798; -} - -/* definition list */ -dl { margin: 12px 0; } -dt { margin: 0; color:#11ABB0; } -dd { margin: 0 0 0 20px; } - -/* Lining Definition Style Markup */ -.lining dt, -.lining dd { - display: inline; - margin: 0; -} -.lining dt + dt:before, -.lining dd + dt:before { - content: "\A"; - white-space: pre; -} -.lining dd + dd:before { - content: ", "; -} -.lining dd:before { - content: ": "; - margin-left: -0.2em; -} - -/* Dictionary Definition Style Markup */ -.dictionary-style dt { - display: inline; - counter-reset: definitions; -} -.dictionary-style dt + dt:before { - content: ", "; - margin-left: -0.2em; -} -.dictionary-style dd { - display: block; - counter-increment: definitions; -} -.dictionary-style dd:before { - content: counter(definitions, decimal) ". "; -} - -/* Pagination */ -.pagination { - margin: 36px auto; - text-align: center; -} -.pagination ul li { - display: inline-block; - margin: 0; - padding: 0; -} -.pagination .page-numbers { - font: 15px/18px 'opensans-bold', sans-serif; - display: inline-block; - padding: 6px 10px; - margin-right: 3px; - margin-bottom: 6px; - color: #6E757C; - background-color: #E6E8EB; - - -webkit-transition: all 200ms ease-in-out; - -moz-transition: all 200ms ease-in-out; - -o-transition: all 200ms ease-in-out; - -ms-transition: all 200ms ease-in-out; - transition: all 200ms ease-in-out; - - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; -} -.pagination .page-numbers:hover { - background: #838A91; - color: #fff; -} -.pagination .current, -.pagination .current:hover { - background-color: #11ABB0; - color: #fff; -} -.pagination .inactive, -.pagination .inactive:hover { - background-color: #E6E8EB; - color: #A9ADB2; -} -.pagination .prev, .pagination .next {} - -/* 5. Images --------------------------------------------------------- */ - -img { - max-width: 100%; - height: auto; -} -img.pull-right { margin: 12px 0px 0px 18px; } -img.pull-left { margin: 12px 18px 0px 0px; } - -/* 6. Buttons --------------------------------------------------------- */ - -.button, -.button:visited, -button, -input[type="submit"], -input[type="reset"], -input[type="button"] { - font: 16px/30px 'opensans-bold', sans-serif; - background: #11ABB0; - display: inline-block; - text-decoration: none; - letter-spacing: 0; - color: #fff; - padding: 12px 20px; - margin-bottom: 18px; - border: none; - cursor: pointer; - height: auto; - - -webkit-transition: all .2s ease-in-out; - -moz-transition: all .2s ease-in-out; - -o-transition: all .2s ease-in-out; - -ms-transition: all .2s ease-in-out; - transition: all .2s ease-in-out; - - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; -} - -.button:hover, -button:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, -input[type="button"]:hover { - background: #3d4145; - color: #fff; -} - -.button:active, -button:active, -input[type="submit"]:active, -input[type="reset"]:active, -input[type="button"]:active { - background: #3d4145; - color: #fff; -} - -.button.full-width, -button.full-width, -input[type="submit"].full-width, -input[type="reset"].full-width, -input[type="button"].full-width { - width: 100%; - padding-left: 0 !important; - padding-right: 0 !important; - text-align: center; -} - -/* Fix for odd Mozilla border & padding issues */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - - -/* 7. Forms --------------------------------------------------------- */ - -form { margin-bottom: 24px; } -fieldset { margin-bottom: 24px; } - -input[type="text"], -input[type="password"], -input[type="email"], -textarea, -select { - display: block; - padding: 18px 15px; - margin: 0 0 24px 0; - border: 0; - outline: none; - vertical-align: middle; - min-width: 225px; - max-width: 100%; - font-size: 15px; - line-height: 24px; - color: #647373; - background: #D3D9D9; - -} - -/* select { padding: 0; - width: 220px; - } */ - -input[type="text"]:focus, -input[type="password"]:focus, -input[type="email"]:focus, -textarea:focus { - color: #B3B7BC; - background-color: #3d4145; -} - -textarea { min-height: 220px; } - -label, -legend { - font: 16px/24px 'opensans-bold', sans-serif; - margin: 12px 0; - color: #3d4145; - display: block; -} -label span, -legend span { - color: #8B9798; - font: 14px/24px 'opensans-regular', sans-serif; -} - -input[type="checkbox"], -input[type="radio"] { - font-size: 15px; - color: #737373; -} - -input[type="checkbox"] { display: inline; } - -/* ------------------------------------------------------------------ */ -/* d. Grid ---------------------------------------------------------------------- - gutter = 40px. -/* ------------------------------------------------------------------ */ - -/* default ---------------------------------------------------------------- */ -.row { - width: 96%; - max-width: 1020px; - margin: 0 auto; -} -/* fixed width for IE8 */ -.ie .row { width: 1000px ; } - -.narrow .row { max-width: 980px; } - -.row .row { width: auto; max-width: none; margin: 0 -20px; } - -/* row clearing */ -.row:before, -.row:after { - content: " "; - display: table; -} -.row:after { - clear: both; -} - -.column, .columns { - position: relative; - padding: 0 20px; - min-height: 1px; - float: left; -} -.column.centered, .columns.centered { - float: none; - margin: 0 auto; -} - -/* removed gutters */ -.row.collapsed > .column, -.row.collapsed > .columns, -.column.collapsed, .columns.collapsed { padding: 0; } - -[class*="column"] + [class*="column"]:last-child { float: right; } -[class*="column"] + [class*="column"].end { float: right; } - -/* column widths */ -.row .one { width: 8.33333%; } -.row .two { width: 16.66667%; } -.row .three { width: 25%; } -.row .four { width: 33.33333%; } -.row .five { width: 41.66667%; } -.row .six { width: 50%; } -.row .seven { width: 58.33333%; } -.row .eight { width: 66.66667%; } -.row .nine { width: 75%; } -.row .ten { width: 83.33333%; } -.row .eleven { width: 91.66667%; } -.row .twelve { width: 100%; } - -/* Offsets */ -.row .offset-1 { margin-left: 8.33333%; } -.row .offset-2 { margin-left: 16.66667%; } -.row .offset-3 { margin-left: 25%; } -.row .offset-4 { margin-left: 33.33333%; } -.row .offset-5 { margin-left: 41.66667%; } -.row .offset-6 { margin-left: 50%; } -.row .offset-7 { margin-left: 58.33333%; } -.row .offset-8 { margin-left: 66.66667%; } -.row .offset-9 { margin-left: 75%; } -.row .offset-10 { margin-left: 83.33333%; } -.row .offset-11 { margin-left: 91.66667%; } - -/* Push/Pull */ -.row .push-1 { left: 8.33333%; } -.row .pull-1 { right: 8.33333%; } -.row .push-2 { left: 16.66667%; } -.row .pull-2 { right: 16.66667%; } -.row .push-3 { left: 25%; } -.row .pull-3 { right: 25%; } -.row .push-4 { left: 33.33333%; } -.row .pull-4 { right: 33.33333%; } -.row .push-5 { left: 41.66667%; } -.row .pull-5 { right: 41.66667%; } -.row .push-6 { left: 50%; } -.row .pull-6 { right: 50%; } -.row .push-7 { left: 58.33333%; } -.row .pull-7 { right: 58.33333%; } -.row .push-8 { left: 66.66667%; } -.row .pull-8 { right: 66.66667%; } -.row .push-9 { left: 75%; } -.row .pull-9 { right: 75%; } -.row .push-10 { left: 83.33333%; } -.row .pull-10 { right: 83.33333%; } -.row .push-11 { left: 91.66667%; } -.row .pull-11 { right: 91.66667%; } - -/* block grids ---------------------------------------------------------------------- */ -.bgrid-sixths [class*="column"] { width: 16.66667%; } -.bgrid-quarters [class*="column"] { width: 25%; } -.bgrid-thirds [class*="column"] { width: 33.33333%; } -.bgrid-halves [class*="column"] { width: 50%; } - -[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: left; } - -/* Left clearing for block grid columns - columns that changes width in -different screen sizes. Allows columns with different heights to align -properly. ---------------------------------------------------------------------- */ -.first { clear: left; } /* first column in default screen */ -.s-first { clear: none; } /* first column in smaller screens */ - -/* smaller screens ---------------------------------------------------------------- */ -@media only screen and (max-width: 900px) { - - /* block grids on small screens */ - .s-bgrid-sixths [class*="column"] { width: 16.66667%; } - .s-bgrid-quarters [class*="column"] { width: 25%; } - .s-bgrid-thirds [class*="column"] { width: 33.33333%; } - .s-bgrid-halves [class*="column"] { width: 50%; } - - /* block grids left clearing */ - .first { clear: none; } - .s-first { clear: left; } - -} - -/* mobile wide/smaller tablets ---------------------------------------------------------------- */ -@media only screen and (max-width: 767px) { - - .row { - width: 460px; - margin: 0 auto; - padding: 0; - } - .column, .columns { - width: auto !important; - float: none; - margin-left: 0; - margin-right: 0; - padding: 0 30px; - } - .row .row { width: auto; max-width: none; margin: 0 -30px; } - - [class*="column"] + [class*="column"]:last-child { float: none; } - [class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: none; } - - /* Offsets */ - .row .offset-1 { margin-left: 0%; } - .row .offset-2 { margin-left: 0%; } - .row .offset-3 { margin-left: 0%; } - .row .offset-4 { margin-left: 0%; } - .row .offset-5 { margin-left: 0%; } - .row .offset-6 { margin-left: 0%; } - .row .offset-7 { margin-left: 0%; } - .row .offset-8 { margin-left: 0%; } - .row .offset-9 { margin-left: 0%; } - .row .offset-10 { margin-left: 0%; } - .row .offset-11 { margin-left: 0%; } -} - -/* mobile narrow ---------------------------------------------------------------- */ -@media only screen and (max-width: 460px) { - - .row { width: auto; } - -} - -/* larger screens ---------------------------------------------------------------- */ -@media screen and (min-width: 1200px) { - - .wide .row { max-width: 1180px; } - -} - -/* ------------------------------------------------------------------ */ -/* e. Others -/* ------------------------------------------------------------------ */ - -/* 1. Clearing - (http://nicolasgallagher.com/micro-clearfix-hack/ ---------------------------------------------------------------------- */ - -.cf:before, -.cf:after { - content: " "; - display: table; -} -.cf:after { - clear: both; -} - -/* 2. Misc -------------------------------------------------------- */ - -.remove-bottom { margin-bottom: 0 !important; } -.half-bottom { margin-bottom: 12px !important; } -.add-bottom { margin-bottom: 24px !important; } -.no-border { border: none; } - -.text-center { text-align: center !important; } -.text-left { text-align: left !important; } -.text-right { text-align: right !important; } -.pull-left { float: left !important; } -.pull-right { float: right !important; } -.align-center { - margin-left: auto !important; - margin-right: auto !important; - text-align: center !important; -} - - - - +/* +===================================================================== +* Ceevee v1.0 Default Stylesheet +* url: styleshout.com +* 03-17-2014 +===================================================================== + +TOC: +a. Webfonts and Icon fonts +b. Reset +c. Default Styles + 1. Basic + 2. Typography + 3. Links + 4. Images + 5. Buttons + 6. Forms +d. Grid +e. Others + 1. Clearing + 2. Misc + +===================================================================== */ + +/* ------------------------------------------------------------------ */ +/* a. Webfonts and Icon fonts + ------------------------------------------------------------------ */ + +@import url("fonts.css"); +@import url("fontello/css/fontello.css"); +@import url("font-awesome/css/font-awesome.min.css"); + +/* ------------------------------------------------------------------ +/* b. Reset + Adapted from: + Normalize.css - https://github.com/necolas/normalize.css/ + HTML5 Doctor Reset - html5doctor.com/html-5-reset-stylesheet/ +/* ------------------------------------------------------------------ */ + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, +del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, +b, i, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +article,aside,details,figcaption,figure, +footer,header,hgroup,menu,nav,section { + display: block; +} + +audio, +canvas, +video { + display: inline-block; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +[hidden] { display: none; } + +code, kbd, pre, samp { + font-family: monospace, serif; + font-size: 1em; +} + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +blockquote, q { quotes: “ “ } + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +ins { + background-color: #ff9; + color: #000; + text-decoration: none; +} + +mark { + background-color: #A7F4F6; + color: #555; +} + +del { text-decoration: line-through; } + +abbr[title], dfn[title] { + border-bottom: 1px dotted; + cursor: help; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + + +/* ------------------------------------------------------------------ */ +/* c. Default and Basic Styles + Adapted from: + Skeleton CSS Framework - http://www.getskeleton.com/ + Typeplate Typographic Starter Kit - http://typeplate.com/ +/* ------------------------------------------------------------------ */ + +/* 1. Basic ------------------------------------------------------- */ + +*, +*:before, +*:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html { + font-size: 62.5%; + -webkit-font-smoothing: antialiased; +} + +body { + background: #fff; + font-family: 'opensans-regular', sans-serif; + font-weight: normal; + font-size: 15px; + line-height: 30px; + color: #838C95; + + -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ + -webkit-text-size-adjust: 100%; +} + +/* 2. Typography + Vertical rhythm with leading derived from 6 +--------------------------------------------------------------------- */ + +h1, h2, h3, h4, h5, h6 { + color: #313131; + font-family: 'opensans-bold', sans-serif; + font-weight: normal; +} +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } +h1 { font-size: 38px; line-height: 42px; margin-bottom: 12px; letter-spacing: -1px; } +h2 { font-size: 28px; line-height: 36px; margin-bottom: 6px; } +h3 { font-size: 22px; line-height: 30px; margin-bottom: 12px; } +h4 { font-size: 20px; line-height: 30px; margin-bottom: 6px; } +h5 { font-size: 18px; line-height: 30px; } +h6 { font-size: 14px; line-height: 30px; } +.subheader { } + +p { margin: 0 0 30px 0; } +p img { margin: 0; } +p.lead { + font: 19px/36px 'opensans-light', sans-serif; + margin-bottom: 18px; +} + +/* for 'em' and 'strong' tags, font-size and line-height should be same with +the body tag due to rendering problems in some browsers */ +em { font: 15px/30px 'opensans-italic', sans-serif; } +strong, b { font: 15px/30px 'opensans-bold', sans-serif; } +small { font-size: 11px; line-height: inherit; } + +/* Blockquotes */ +blockquote { + margin: 30px 0px; + padding-left: 40px; + position: relative; +} +blockquote:before { + content: "\201C"; + opacity: 0.45; + font-size: 80px; + line-height: 0px; + margin: 0; + font-family: arial, sans-serif; + + position: absolute; + top: 30px; + left: 0; +} +blockquote p { + font-family: 'librebaskerville-italic', serif; + padding: 0; + font-size: 18px; + line-height: 36px; +} +blockquote cite { + display: block; + font-size: 12px; + font-style: normal; + line-height: 18px; +} +blockquote cite:before { content: "\2014 \0020"; } +blockquote cite a, +blockquote cite a:visited { color: #8B9798; border: none } + +/* --------------------------------------------------------------------- +/* Pull Quotes Markup +/* + +/* +/* --------------------------------------------------------------------- */ +.pull-quote { + position: relative; + padding: 18px 30px 18px 0px; +} +.pull-quote:before, +.pull-quote:after { + height: 1em; + opacity: 0.45; + position: absolute; + font-size: 80px; + font-family: Arial, Sans-Serif; +} +.pull-quote:before { + content: "\201C"; + top: 33px; + left: 0; +} +.pull-quote:after { + content: '\201D'; + bottom: -33px; + right: 0; +} +.pull-quote blockquote { + margin: 0; +} +.pull-quote blockquote:before { + content: none; +} + +/* Abbreviations */ +abbr { + font-family: 'opensans-bold', sans-serif; + font-variant: small-caps; + text-transform: lowercase; + letter-spacing: .5px; + color: gray; +} +abbr:hover { cursor: help; } + +/* drop cap */ +.drop-cap:first-letter { + float: left; + margin: 0; + padding: 14px 6px 0 0; + font-size: 84px; + font-family: /* Copperplate */ 'opensans-bold', sans-serif; + line-height: 60px; + text-indent: 0; + background: transparent; + color: inherit; +} + +hr { border: solid #E3E3E3; border-width: 1px 0 0; clear: both; margin: 11px 0 30px; height: 0; } + + +/* 3. Links ------------------------------------------------------- */ + +a, a:visited { + text-decoration: none; + outline: 0; + color: #11ABB0; + + -webkit-transition: color .3s ease-in-out; + -moz-transition: color .3s ease-in-out; + -o-transition: color .3s ease-in-out; + transition: color .3s ease-in-out; +} +a:hover, a:focus { color: #313131; } +p a, p a:visited { line-height: inherit; } + + +/* 4. List --------------------------------------------------------- */ + +ul, ol { margin-bottom: 24px; margin-top: 12px; } +ul { list-style: none outside; } +ol { list-style: decimal; } +ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } +ul.square { list-style: square outside; } +ul.circle { list-style: circle outside; } +ul.disc { list-style: disc outside; } +ul ul, ul ol, +ol ol, ol ul { margin: 6px 0 6px 30px; } +ul ul li, ul ol li, +ol ol li, ol ul li { margin-bottom: 6px; } +li { line-height: 18px; margin-bottom: 12px; } +ul.large li { } +li p { } + +/* --------------------------------------------------------------------- +/* Stats Tab Markup + + + + Extend this object into your markup. +/* +/* --------------------------------------------------------------------- */ +.stats-tabs { + padding: 0; + margin: 24px 0; +} +.stats-tabs li { + display: inline-block; + margin: 0 10px 18px 0; + padding: 0 10px 0 0; + border-right: 1px solid #ccc; +} +.stats-tabs li:last-child { + margin: 0; + padding: 0; + border: none; +} +.stats-tabs li a { + display: inline-block; + font-size: 22px; + font-family: 'opensans-bold', sans-serif; + border: none; + color: #313131; +} +.stats-tabs li a:hover { + color:#11ABB0; +} +.stats-tabs li a b { + display: block; + margin: 6px 0 0 0; + font-size: 13px; + font-family: 'opensans-regular', sans-serif; + color: #8B9798; +} + +/* definition list */ +dl { margin: 12px 0; } +dt { margin: 0; color:#11ABB0; } +dd { margin: 0 0 0 20px; } + +/* Lining Definition Style Markup */ +.lining dt, +.lining dd { + display: inline; + margin: 0; +} +.lining dt + dt:before, +.lining dd + dt:before { + content: "\A"; + white-space: pre; +} +.lining dd + dd:before { + content: ", "; +} +.lining dd:before { + content: ": "; + margin-left: -0.2em; +} + +/* Dictionary Definition Style Markup */ +.dictionary-style dt { + display: inline; + counter-reset: definitions; +} +.dictionary-style dt + dt:before { + content: ", "; + margin-left: -0.2em; +} +.dictionary-style dd { + display: block; + counter-increment: definitions; +} +.dictionary-style dd:before { + content: counter(definitions, decimal) ". "; +} + +/* Pagination */ +.pagination { + margin: 36px auto; + text-align: center; +} +.pagination ul li { + display: inline-block; + margin: 0; + padding: 0; +} +.pagination .page-numbers { + font: 15px/18px 'opensans-bold', sans-serif; + display: inline-block; + padding: 6px 10px; + margin-right: 3px; + margin-bottom: 6px; + color: #6E757C; + background-color: #E6E8EB; + + -webkit-transition: all 200ms ease-in-out; + -moz-transition: all 200ms ease-in-out; + -o-transition: all 200ms ease-in-out; + -ms-transition: all 200ms ease-in-out; + transition: all 200ms ease-in-out; + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; +} +.pagination .page-numbers:hover { + background: #838A91; + color: #fff; +} +.pagination .current, +.pagination .current:hover { + background-color: #11ABB0; + color: #fff; +} +.pagination .inactive, +.pagination .inactive:hover { + background-color: #E6E8EB; + color: #A9ADB2; +} +.pagination .prev, .pagination .next {} + +/* 5. Images --------------------------------------------------------- */ + +img { + max-width: 100%; + height: auto; +} +img.pull-right { margin: 12px 0px 0px 18px; } +img.pull-left { margin: 12px 18px 0px 0px; } + +/* 6. Buttons --------------------------------------------------------- */ + +.button, +.button:visited, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + font: 16px/30px 'opensans-bold', sans-serif; + background: #11ABB0; + display: inline-block; + text-decoration: none; + letter-spacing: 0; + color: #fff; + padding: 12px 20px; + margin-bottom: 18px; + border: none; + cursor: pointer; + height: auto; + + -webkit-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; + -ms-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; +} + +.button:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover { + background: #3d4145; + color: #fff; +} + +.button:active, +button:active, +input[type="submit"]:active, +input[type="reset"]:active, +input[type="button"]:active { + background: #3d4145; + color: #fff; +} + +.button.full-width, +button.full-width, +input[type="submit"].full-width, +input[type="reset"].full-width, +input[type="button"].full-width { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + text-align: center; +} + +/* Fix for odd Mozilla border & padding issues */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + + +/* 7. Forms --------------------------------------------------------- */ + +form { margin-bottom: 24px; } +fieldset { margin-bottom: 24px; } + +input[type="text"], +input[type="password"], +input[type="email"], +textarea, +select { + display: block; + padding: 18px 15px; + margin: 0 0 24px 0; + border: 0; + outline: none; + vertical-align: middle; + min-width: 225px; + max-width: 100%; + font-size: 15px; + line-height: 24px; + color: #647373; + background: #D3D9D9; + +} + +/* select { padding: 0; + width: 220px; + } */ + +input[type="text"]:focus, +input[type="password"]:focus, +input[type="email"]:focus, +textarea:focus { + color: #B3B7BC; + background-color: #3d4145; +} + +textarea { min-height: 220px; } + +label, +legend { + font: 16px/24px 'opensans-bold', sans-serif; + margin: 12px 0; + color: #3d4145; + display: block; +} +label span, +legend span { + color: #8B9798; + font: 14px/24px 'opensans-regular', sans-serif; +} + +input[type="checkbox"], +input[type="radio"] { + font-size: 15px; + color: #737373; +} + +input[type="checkbox"] { display: inline; } + +/* ------------------------------------------------------------------ */ +/* d. Grid +--------------------------------------------------------------------- + gutter = 40px. +/* ------------------------------------------------------------------ */ + +/* default +--------------------------------------------------------------- */ +.row { + width: 96%; + max-width: 1020px; + margin: 0 auto; +} +/* fixed width for IE8 */ +.ie .row { width: 1000px ; } + +.narrow .row { max-width: 980px; } + +.row .row { width: auto; max-width: none; margin: 0 -20px; } + +/* row clearing */ +.row:before, +.row:after { + content: " "; + display: table; +} +.row:after { + clear: both; +} + +.column, .columns { + position: relative; + padding: 0 20px; + min-height: 1px; + float: left; +} +.column.centered, .columns.centered { + float: none; + margin: 0 auto; +} + +/* removed gutters */ +.row.collapsed > .column, +.row.collapsed > .columns, +.column.collapsed, .columns.collapsed { padding: 0; } + +[class*="column"] + [class*="column"]:last-child { float: right; } +[class*="column"] + [class*="column"].end { float: right; } + +/* column widths */ +.row .one { width: 8.33333%; } +.row .two { width: 16.66667%; } +.row .three { width: 25%; } +.row .four { width: 33.33333%; } +.row .five { width: 41.66667%; } +.row .six { width: 50%; } +.row .seven { width: 58.33333%; } +.row .eight { width: 66.66667%; } +.row .nine { width: 75%; } +.row .ten { width: 83.33333%; } +.row .eleven { width: 91.66667%; } +.row .twelve { width: 100%; } + +/* Offsets */ +.row .offset-1 { margin-left: 8.33333%; } +.row .offset-2 { margin-left: 16.66667%; } +.row .offset-3 { margin-left: 25%; } +.row .offset-4 { margin-left: 33.33333%; } +.row .offset-5 { margin-left: 41.66667%; } +.row .offset-6 { margin-left: 50%; } +.row .offset-7 { margin-left: 58.33333%; } +.row .offset-8 { margin-left: 66.66667%; } +.row .offset-9 { margin-left: 75%; } +.row .offset-10 { margin-left: 83.33333%; } +.row .offset-11 { margin-left: 91.66667%; } + +/* Push/Pull */ +.row .push-1 { left: 8.33333%; } +.row .pull-1 { right: 8.33333%; } +.row .push-2 { left: 16.66667%; } +.row .pull-2 { right: 16.66667%; } +.row .push-3 { left: 25%; } +.row .pull-3 { right: 25%; } +.row .push-4 { left: 33.33333%; } +.row .pull-4 { right: 33.33333%; } +.row .push-5 { left: 41.66667%; } +.row .pull-5 { right: 41.66667%; } +.row .push-6 { left: 50%; } +.row .pull-6 { right: 50%; } +.row .push-7 { left: 58.33333%; } +.row .pull-7 { right: 58.33333%; } +.row .push-8 { left: 66.66667%; } +.row .pull-8 { right: 66.66667%; } +.row .push-9 { left: 75%; } +.row .pull-9 { right: 75%; } +.row .push-10 { left: 83.33333%; } +.row .pull-10 { right: 83.33333%; } +.row .push-11 { left: 91.66667%; } +.row .pull-11 { right: 91.66667%; } + +/* block grids +--------------------------------------------------------------------- */ +.bgrid-sixths [class*="column"] { width: 16.66667%; } +.bgrid-quarters [class*="column"] { width: 25%; } +.bgrid-thirds [class*="column"] { width: 33.33333%; } +.bgrid-halves [class*="column"] { width: 50%; } + +[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: left; } + +/* Left clearing for block grid columns - columns that changes width in +different screen sizes. Allows columns with different heights to align +properly. +--------------------------------------------------------------------- */ +.first { clear: left; } /* first column in default screen */ +.s-first { clear: none; } /* first column in smaller screens */ + +/* smaller screens +--------------------------------------------------------------- */ +@media only screen and (max-width: 900px) { + + /* block grids on small screens */ + .s-bgrid-sixths [class*="column"] { width: 16.66667%; } + .s-bgrid-quarters [class*="column"] { width: 25%; } + .s-bgrid-thirds [class*="column"] { width: 33.33333%; } + .s-bgrid-halves [class*="column"] { width: 50%; } + + /* block grids left clearing */ + .first { clear: none; } + .s-first { clear: left; } + +} + +/* mobile wide/smaller tablets +--------------------------------------------------------------- */ +@media only screen and (max-width: 767px) { + + .row { + width: 460px; + margin: 0 auto; + padding: 0; + } + .column, .columns { + width: auto !important; + float: none; + margin-left: 0; + margin-right: 0; + padding: 0 30px; + } + .row .row { width: auto; max-width: none; margin: 0 -30px; } + + [class*="column"] + [class*="column"]:last-child { float: none; } + [class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: none; } + + /* Offsets */ + .row .offset-1 { margin-left: 0%; } + .row .offset-2 { margin-left: 0%; } + .row .offset-3 { margin-left: 0%; } + .row .offset-4 { margin-left: 0%; } + .row .offset-5 { margin-left: 0%; } + .row .offset-6 { margin-left: 0%; } + .row .offset-7 { margin-left: 0%; } + .row .offset-8 { margin-left: 0%; } + .row .offset-9 { margin-left: 0%; } + .row .offset-10 { margin-left: 0%; } + .row .offset-11 { margin-left: 0%; } +} + +/* mobile narrow +--------------------------------------------------------------- */ +@media only screen and (max-width: 460px) { + + .row { width: auto; } + +} + +/* larger screens +--------------------------------------------------------------- */ +@media screen and (min-width: 1200px) { + + .wide .row { max-width: 1180px; } + +} + +/* ------------------------------------------------------------------ */ +/* e. Others +/* ------------------------------------------------------------------ */ + +/* 1. Clearing + (http://nicolasgallagher.com/micro-clearfix-hack/ +--------------------------------------------------------------------- */ + +.cf:before, +.cf:after { + content: " "; + display: table; +} +.cf:after { + clear: both; +} + +/* 2. Misc -------------------------------------------------------- */ + +.remove-bottom { margin-bottom: 0 !important; } +.half-bottom { margin-bottom: 12px !important; } +.add-bottom { margin-bottom: 24px !important; } +.no-border { border: none; } + +.text-center { text-align: center !important; } +.text-left { text-align: left !important; } +.text-right { text-align: right !important; } +.pull-left { float: left !important; } +.pull-right { float: right !important; } +.align-center { + margin-left: auto !important; + margin-right: auto !important; + text-align: center !important; +} + + + + diff --git a/css/fonts.css b/css/fonts.css index 874c4f0..e917d84 100644 --- a/css/fonts.css +++ b/css/fonts.css @@ -1,157 +1,157 @@ -/* Generated by Font Squirrel (http://www.fontsquirrel.com) */ - -/* - * Open Sans -================================================================================ */ -@font-face { - font-family: 'opensans-regular'; - src: url('fonts/opensans/OpenSans-Regular-webfont.eot'); - src: url('fonts/opensans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-Regular-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-Regular-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-italic'; - src: url('fonts/opensans/OpenSans-Italic-webfont.eot'); - src: url('fonts/opensans/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-Italic-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-Italic-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-light'; - src: url('fonts/opensans/OpenSans-Light-webfont.eot'); - src: url('fonts/opensans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-Light-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-Light-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-Light-webfont.svg#open_sanslight') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-light-italic'; - src: url('fonts/opensans/OpenSans-LightItalic-webfont.eot'); - src: url('fonts/opensans/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-LightItalic-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-LightItalic-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-LightItalic-webfont.svg#open_sanslight_italic') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-semibold'; - src: url('fonts/opensans/OpenSans-Semibold-webfont.eot'); - src: url('fonts/opensans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-Semibold-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-Semibold-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-semibold-italic'; - src: url('fonts/opensans/OpenSans-SemiboldItalic-webfont.eot'); - src: url('fonts/opensans/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-SemiboldItalic-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-bold'; - src: url('fonts/opensans/OpenSans-Bold-webfont.eot'); - src: url('fonts/opensans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-Bold-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-Bold-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-bold-italic'; - src: url('fonts/opensans/OpenSans-BoldItalic-webfont.eot'); - src: url('fonts/opensans/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-BoldItalic-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-BoldItalic-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-extrabold'; - src: url('fonts/opensans/OpenSans-ExtraBold-webfont.eot'); - src: url('fonts/opensans/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-ExtraBold-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-ExtraBold-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-extrabold-italic'; - src: url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot'); - src: url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic') format('svg'); - font-weight: normal; - font-style: normal; -} - -/* - * Libre Baskerville -================================================================================ */ -@font-face { - font-family: 'librebaskerville-bold'; - src: url('fonts/librebaskerville/librebaskerville-bold-webfont.eot'); - src: url('fonts/librebaskerville/librebaskerville-bold-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/librebaskerville/librebaskerville-bold-webfont.woff') format('woff'), - url('fonts/librebaskerville/librebaskerville-bold-webfont.ttf') format('truetype'), - url('fonts/librebaskerville/librebaskerville-bold-webfont.svg#libre_baskervillebold') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'librebaskerville-italic'; - src: url('fonts/librebaskerville/librebaskerville-italic-webfont.eot'); - src: url('fonts/librebaskerville/librebaskerville-italic-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/librebaskerville/librebaskerville-italic-webfont.woff') format('woff'), - url('fonts/librebaskerville/librebaskerville-italic-webfont.ttf') format('truetype'), - url('fonts/librebaskerville/librebaskerville-italic-webfont.svg#libre_baskervilleitalic') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'librebaskerville-regular'; - src: url('fonts/librebaskerville/librebaskerville-regular-webfont.eot'); - src: url('fonts/librebaskerville/librebaskerville-regular-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/librebaskerville/librebaskerville-regular-webfont.woff') format('woff'), - url('fonts/librebaskerville/librebaskerville-regular-webfont.ttf') format('truetype'), - url('fonts/librebaskerville/librebaskerville-regular-webfont.svg#libre_baskervilleregular') format('svg'); - font-weight: normal; - font-style: normal; -} - - -/* - * FIXED for Font-Face Chrome Rendering -================================================================================ */ -@media screen and (-webkit-min-device-pixel-ratio:0) { - - @font-face { - font-family: 'opensans-semibold'; - src: url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg'); - } - - @font-face { - font-family: 'opensans-bold'; - src: url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); - } - +/* Generated by Font Squirrel (http://www.fontsquirrel.com) */ + +/* + * Open Sans +================================================================================ */ +@font-face { + font-family: 'opensans-regular'; + src: url('fonts/opensans/OpenSans-Regular-webfont.eot'); + src: url('fonts/opensans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-Regular-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-Regular-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-italic'; + src: url('fonts/opensans/OpenSans-Italic-webfont.eot'); + src: url('fonts/opensans/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-Italic-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-Italic-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-light'; + src: url('fonts/opensans/OpenSans-Light-webfont.eot'); + src: url('fonts/opensans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-Light-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-Light-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-Light-webfont.svg#open_sanslight') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-light-italic'; + src: url('fonts/opensans/OpenSans-LightItalic-webfont.eot'); + src: url('fonts/opensans/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-LightItalic-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-LightItalic-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-LightItalic-webfont.svg#open_sanslight_italic') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-semibold'; + src: url('fonts/opensans/OpenSans-Semibold-webfont.eot'); + src: url('fonts/opensans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-Semibold-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-Semibold-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-semibold-italic'; + src: url('fonts/opensans/OpenSans-SemiboldItalic-webfont.eot'); + src: url('fonts/opensans/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-SemiboldItalic-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-bold'; + src: url('fonts/opensans/OpenSans-Bold-webfont.eot'); + src: url('fonts/opensans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-Bold-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-Bold-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-bold-italic'; + src: url('fonts/opensans/OpenSans-BoldItalic-webfont.eot'); + src: url('fonts/opensans/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-BoldItalic-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-BoldItalic-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-extrabold'; + src: url('fonts/opensans/OpenSans-ExtraBold-webfont.eot'); + src: url('fonts/opensans/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-ExtraBold-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-ExtraBold-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-extrabold-italic'; + src: url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot'); + src: url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic') format('svg'); + font-weight: normal; + font-style: normal; +} + +/* + * Libre Baskerville +================================================================================ */ +@font-face { + font-family: 'librebaskerville-bold'; + src: url('fonts/librebaskerville/librebaskerville-bold-webfont.eot'); + src: url('fonts/librebaskerville/librebaskerville-bold-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/librebaskerville/librebaskerville-bold-webfont.woff') format('woff'), + url('fonts/librebaskerville/librebaskerville-bold-webfont.ttf') format('truetype'), + url('fonts/librebaskerville/librebaskerville-bold-webfont.svg#libre_baskervillebold') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'librebaskerville-italic'; + src: url('fonts/librebaskerville/librebaskerville-italic-webfont.eot'); + src: url('fonts/librebaskerville/librebaskerville-italic-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/librebaskerville/librebaskerville-italic-webfont.woff') format('woff'), + url('fonts/librebaskerville/librebaskerville-italic-webfont.ttf') format('truetype'), + url('fonts/librebaskerville/librebaskerville-italic-webfont.svg#libre_baskervilleitalic') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'librebaskerville-regular'; + src: url('fonts/librebaskerville/librebaskerville-regular-webfont.eot'); + src: url('fonts/librebaskerville/librebaskerville-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/librebaskerville/librebaskerville-regular-webfont.woff') format('woff'), + url('fonts/librebaskerville/librebaskerville-regular-webfont.ttf') format('truetype'), + url('fonts/librebaskerville/librebaskerville-regular-webfont.svg#libre_baskervilleregular') format('svg'); + font-weight: normal; + font-style: normal; +} + + +/* + * FIXED for Font-Face Chrome Rendering +================================================================================ */ +@media screen and (-webkit-min-device-pixel-ratio:0) { + + @font-face { + font-family: 'opensans-semibold'; + src: url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg'); + } + + @font-face { + font-family: 'opensans-bold'; + src: url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); + } + } \ No newline at end of file diff --git a/css/layout.css b/css/layout.css index c6f5308..e51546a 100644 --- a/css/layout.css +++ b/css/layout.css @@ -1,1021 +1,1021 @@ -/* -===================================================================== -* Ceevee v1.0 Layout Stylesheet -* url: styleshout.com -* 03-18-2014 -===================================================================== - - TOC: - a. General Styles - b. Header Styles - c. About Section - d. Resume Section - e. Portfolio Section - f. Call To Action Section - g. Testimonials Section - h. Contact Section - i. Footer - -===================================================================== */ - -/* ------------------------------------------------------------------ */ -/* a. General Styles -/* ------------------------------------------------------------------ */ - -body { background: #0f0f0f; } - -/* ------------------------------------------------------------------ */ -/* b. Header Styles -/* ------------------------------------------------------------------ */ - -header { - position: relative; - height: 800px; - min-height: 500px; - width: 100%; - background: #161415 url(../images/header-background.jpg) no-repeat top center; - background-size: cover !important; - -webkit-background-size: cover !important; - text-align: center; - overflow: hidden; -} - -/* vertically center banner section */ -header:before { - content: ''; - display: inline-block; - vertical-align: middle; - height: 100%; -} -header .banner { - display: inline-block; - vertical-align: middle; - margin: 0 auto; - width: 85%; - padding-bottom: 30px;s - text-align: center; -} - -header .banner-text { width: 100%; } -header .banner-text h1 { - font: 90px/1.1em 'opensans-bold', sans-serif; - color: #fff; - letter-spacing: -2px; - margin: 0 auto 18px auto; - text-shadow: 0px 1px 3px rgba(0, 0, 0, .8); -} -header .banner-text h3 { - font: 18px/1.9em 'librebaskerville-regular', serif; - color: #111111; - margin: 0 auto; - width: 70%; - text-shadow: 0px 1px 2px rgba(0, 0, 0, .5); -} -header .banner-text h3 span, -header .banner-text h3 a { - color: #fff; -} -header .banner-text hr { - width: 60%; - margin: 18px auto 24px auto; - border-color: #2F2D2E; - border-color: rgba(150, 150, 150, .1); -} - -/* header social links */ -header .social { - margin: 24px 0; - padding: 0; - font-size: 30px; - text-shadow: 0px 1px 2px rgba(0, 0, 0, .8); -} -header .social li { - display: inline-block; - margin: 0 15px; - padding: 0; -} -header .social li a { color: #fff; } -header .social li a:hover { color: #11ABB0; } - -/* scrolldown link */ -header .scrolldown a { - position: absolute; - bottom: 30px; - left: 50%; - margin-left: -29px; - color: #fff; - display: block; - height: 42px; - width: 42px; - font-size: 42px; - line-height: 42px; - color: #fff; - border-radius: 100%; - - -webkit-transition: all .3s ease-in-out; - -moz-transition: all .3s ease-in-out; - -o-transition: all .3s ease-in-out; - transition: all .3s ease-in-out; -} -header .scrolldown a:hover { color: #11ABB0; } - -/* primary navigation ---------------------------------------------------------------------- */ -#nav-wrap ul, #nav-wrap li, #nav-wrap a { - margin: 0; - padding: 0; - border: none; - outline: none; -} - -/* nav-wrap */ -#nav-wrap { - font: 12px 'opensans-bold', sans-serif; - width: 100%; - text-transform: uppercase; - letter-spacing: 2.5px; - margin: 0 auto; - z-index: 100; - position: fixed; - left: 0; - top: 0; -} -.opaque { background-color: #333; } - -/* hide toggle button */ -#nav-wrap > a.mobile-btn { display: none; } - -ul#nav { - min-height: 48px; - width: auto; - - /* center align the menu */ - text-align: center; -} -ul#nav li { - position: relative; - list-style: none; - height: 48px; - display: inline-block; -} - -/* Links */ -ul#nav li a { - -/* 8px padding top + 8px padding bottom + 32px line-height = 48px */ - - display: inline-block; - padding: 8px 13px; - line-height: 32px; - text-decoration: none; - text-align: left; - color: #fff; - - -webkit-transition: color .2s ease-in-out; - -moz-transition: color .2s ease-in-out; - -o-transition: color .2s ease-in-out; - -ms-transition: color .2s ease-in-out; - transition: color .2s ease-in-out; -} - -ul#nav li a:active { background-color: transparent !important; } -ul#nav li.current a { color: #F06000; } - - -/* ------------------------------------------------------------------ */ -/* c. About Section -/* ------------------------------------------------------------------ */ - -#about { - background: #2B2B2B; - padding-top: 96px; - padding-bottom: 66px; - overflow: hidden; -} - -#about a, #about a:visited { color: #fff; } -#about a:hover, #about a:focus { color: #11ABB0; } - -#about h2 { - font: 22px/30px 'opensans-bold', sans-serif; - color: #fff; - margin-bottom: 12px; -} -#about p { - line-height: 30px; - color: #7A7A7A; -} -#about .profile-pic { - position: relative; - width: 120px; - height: 120px; - border-radius: 100%; -} -#about .contact-details { width: 41.66667%; } -#about .download { - width: 58.33333%; - padding-top: 6px; -} -#about .main-col { padding-right: 5%; } -#about .download .button { - margin-top: 6px; - background: #444; -} -#about .download .button:hover { - background: #fff; - color: #2B2B2B; -} -#about .download .button i { - margin-right: 15px; - font-size: 20px; -} - - -/* ------------------------------------------------------------------ */ -/* d. Resume Section -/* ------------------------------------------------------------------ */ - -#resume { - background: #fff; - padding-top: 90px; - padding-bottom: 72px; - overflow: hidden; -} - -#resume a, #resume a:visited { color: #11ABB0; } -#resume a:hover, #resume a:focus { color: #313131; } - -#resume h1 { - font: 18px/24px 'opensans-bold', sans-serif; - text-transform: uppercase; - letter-spacing: 1px; -} -#resume h1 span { - border-bottom: 3px solid #11ABB0; - padding-bottom: 6px; -} -#resume h3 { - font: 25px/30px 'opensans-bold', sans-serif; -} - -#resume .header-col { padding-top: 9px; } -#resume .main-col { padding-right: 10%; } - -.education, .work { - margin-bottom: 48px; - padding-bottom: 24px; - border-bottom: 1px solid #E8E8E8; -} -#resume .info { - font: 16px/24px 'librebaskerville-italic', serif; - color: #6E7881; - margin-bottom: 18px; - margin-top: 9px; -} -#resume .info span { - margin-right: 5px; - margin-left: 5px; -} -#resume .date { - font: 15px/24px 'opensans-regular', sans-serif; - margin-top: 6px; -} - -/*----------------------------------------------*/ -/* Skill Bars -/*----------------------------------------------*/ - -.bars { - width: 95%; - float: left; - padding: 0; - text-align: left; -} -.bars .skills { - margin-top: 36px; - list-style: none; -} -.bars li { - position: relative; - margin-bottom: 60px; - background: #ccc; - height: 42px; - border-radius: 3px; -} -.bars li em { - font: 15px 'opensans-bold', sans-serif; - color: #313131; - text-transform: uppercase; - letter-spacing: 2px; - font-weight: normal; - position: relative; - top: -36px; -} -.bar-expand { - position: absolute; - left: 0; - top: 0; - - margin: 0; - padding-right: 24px; - background: #313131; - display: inline-block; - height: 42px; - line-height: 42px; - border-radius: 3px 0 0 3px; -} - -.php { - width: 90%; - -moz-animation: photoshop 2s ease; - -webkit-animation: photoshop 2s ease; -} -.sql { - width: 70%; - -moz-animation: illustrator 2s ease; - -webkit-animation: illustrator 2s ease; -} -.python { - width: 60%; - -moz-animation: wordpress 2s ease; - -webkit-animation: wordpress 2s ease; -} -.cpp { - width: 80%; - -moz-animation: css 2s ease; - -webkit-animation: css 2s ease; -} -.jquery { - width: 75%; - -moz-animation: jquery 2s ease; - -webkit-animation: jquery 2s ease; -} -.unix-admin { - width: 80%; - -moz-animation: html5 2s ease; - -webkit-animation: html5 2s ease; -} -.git { - width: 85%; - -moz-animation: html5 2s ease; - -webkit-animation: html5 2s ease; -} -.unit-testing { - width: 50%; - -moz-animation: html5 2s ease; - -webkit-animation: html5 2s ease; -} -.bootstrap { - width: 55%; - -moz-animation: html5 2s ease; - -webkit-animation: html5 2s ease; -} - -@-moz-keyframes photoshop { - 0% { width: 0px; } - 100% { width: 60%; } -} -@-moz-keyframes illustrator { - 0% { width: 0px; } - 100% { width: 55%; } -} -@-moz-keyframes wordpress { - 0% { width: 0px; } - 100% { width: 50%; } -} -@-moz-keyframes css { - 0% { width: 0px; } - 100% { width: 90%; } -} -@-moz-keyframes html5 { - 0% { width: 0px; } - 100% { width: 80%; } -} -@-moz-keyframes jquery { - 0% { width: 0px; } - 100% { width: 50%; } -} - -@-webkit-keyframes photoshop { - 0% { width: 0px; } - 100% { width: 60%; } -} -@-webkit-keyframes illustrator { - 0% { width: 0px; } - 100% { width: 55%; } -} -@-webkit-keyframes wordpress { - 0% { width: 0px; } - 100% { width: 50%; } -} -@-webkit-keyframes css { - 0% { width: 0px; } - 100% { width: 90%; } -} -@-webkit-keyframes html5 { - 0% { width: 0px; } - 100% { width: 80%; } -} -@-webkit-keyframes jquery { - 0% { width: 0px; } - 100% { width: 50%; } -} - -/* ------------------------------------------------------------------ */ -/* e. Portfolio Section -/* ------------------------------------------------------------------ */ - -#portfolio { - background: #ebeeee; - padding-top: 90px; - padding-bottom: 60px; -} -#portfolio h1 { - font: 15px/24px 'opensans-semibold', sans-serif; - text-transform: uppercase; - letter-spacing: 1px; - text-align: center; - margin-bottom: 48px; - color: #95A3A3; -} - -/* Portfolio Content */ -#portfolio-wrapper .columns { margin-bottom: 36px; } -.portfolio-item .item-wrap { - background: #fff; - overflow: hidden; - position: relative; - - -webkit-transition: all 0.3s ease-in-out; - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; -} -.portfolio-item .item-wrap a { - display: block; - cursor: pointer; -} - -/* overlay */ -.portfolio-item .item-wrap .overlay { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - - opacity: 0; - -moz-opacity: 0; - filter:alpha(opacity=0); - - -webkit-transition: opacity 0.3s ease-in-out; - -moz-transition: opacity 0.3s ease-in-out; - -o-transition: opacity 0.3s ease-in-out; - transition: opacity 0.3s ease-in-out; - - background: url(../images/overlay-bg.png) repeat; -} -.portfolio-item .item-wrap .link-icon { - display: block; - color: #fff; - height: 30px; - width: 30px; - font-size: 18px; - line-height: 30px; - text-align: center; - - opacity: 0; - -moz-opacity: 0; - filter:alpha(opacity=0); - - -webkit-transition: opacity 0.3s ease-in-out; - -moz-transition: opacity 0.3s ease-in-out; - -o-transition: opacity 0.3s ease-in-out; - transition: opacity 0.3s ease-in-out; - - position: absolute; - top: 50%; - left: 50%; - margin-left: -15px; - margin-top: -15px; -} -.portfolio-item .item-wrap img { - vertical-align: bottom; -} -.portfolio-item .portfolio-item-meta { padding: 18px } -.portfolio-item .portfolio-item-meta h5 { - font: 14px/21px 'opensans-bold', sans-serif; - color: #fff; -} -.portfolio-item .portfolio-item-meta p { - font: 12px/18px 'opensans-light', sans-serif; - color: #c6c7c7; - margin-bottom: 0; -} - -/* on hover */ -.portfolio-item:hover .overlay { - opacity: 1; - -moz-opacity: 1; - filter:alpha(opacity=100); -} -.portfolio-item:hover .link-icon { - opacity: 1; - -moz-opacity: 1; - filter:alpha(opacity=100); -} - -/* popup modal */ -.popup-modal { - max-width: 550px; - background: #fff; - position: relative; - margin: 0 auto; -} -.popup-modal .description-box { padding: 12px 36px 18px 36px; } -.popup-modal .description-box h4 { - font: 15px/24px 'opensans-bold', sans-serif; - margin-bottom: 12px; - color: #111; -} -.popup-modal .description-box p { - font: 14px/24px 'opensans-regular', sans-serif; - color: #A1A1A1; - margin-bottom: 12px; -} -.popup-modal .description-box .categories { - font: 11px/21px 'opensans-light', sans-serif; - color: #A1A1A1; - text-transform: uppercase; - letter-spacing: 2px; - display: block; - text-align: left; -} -.popup-modal .description-box .categories i { - margin-right: 8px; -} -.popup-modal .link-box { - padding: 18px 36px; - background: #111; - text-align: left; -} -.popup-modal .link-box a { - color: #fff; - font: 11px/21px 'opensans-bold', sans-serif; - text-transform: uppercase; - letter-spacing: 3px; - cursor: pointer; -} -.popup-modal a:hover { color: #00CCCC; } -.popup-modal a.popup-modal-dismiss { margin-left: 24px; } - - -/* fadein/fadeout effect for modal popup -/* ------------------------------------------------------------------ */ - -/* content at start */ -.mfp-fade.mfp-wrap .mfp-content .popup-modal { - opacity: 0; - -webkit-transition: all 200ms ease-in-out; - -moz-transition: all 200ms ease-in-out; - -o-transition: all 200ms ease-in-out; - -ms-transition: all 200ms ease-in-out; - transition: all 200ms ease-in-out; -} -/* content fadein */ -.mfp-fade.mfp-wrap.mfp-ready .mfp-content .popup-modal { - opacity: 1; -} -/* content fadeout */ -.mfp-fade.mfp-wrap.mfp-removing .mfp-content .popup-modal { - opacity: 0; -} - -/* ------------------------------------------------------------------ */ -/* f. Call To Action Section -/* ------------------------------------------------------------------ */ - -#call-to-action { - background: #212121; - padding-top: 66px; - padding-bottom: 48px; -} -#call-to-action h1 { - font: 18px/24px 'opensans-bold', sans-serif; - text-transform: uppercase; - letter-spacing: 3px; - color: #fff; -} -#call-to-action h1 span { display: none; } -#call-to-action .header-col h1:before { - font-family: 'FontAwesome'; - content: "\f0ac"; - padding-right: 10px; - font-size: 72px; - line-height: 72px; - text-align: left; - float: left; - color: #fff; -} -#call-to-action .action { - margin-top: 12px; -} -#call-to-action h2 { - font: 28px/36px 'opensans-bold', sans-serif; - color: #EBEEEE; - margin-bottom: 6px; -} -#call-to-action h2 a { - color: inherit; -} -#call-to-action p { - color: #636363; - font-size: 17px; -} -/*# -call-to-action .button { - color:#fff; - background: #0D0D0D; -} -*/ -#call-to-action .button:hover, -#call-to-action .button:active { - background: #FFFFFF; - color: #0D0D0D; -} -#call-to-action p span { - font-family: 'opensans-semibold', sans-serif; - color: #D8D8D8; -} - -/* ------------------------------------------------------------------ -/* g. Testimonials -/* ------------------------------------------------------------------ */ - -#testimonials { - background: #1F1F1F url(../images/testimonials-bg.jpg) no-repeat center center; - background-size: cover !important; - -webkit-background-size: cover !important; - background-attachment: fixed; - - position: relative; - min-height: 200px; - width: 100%; - overflow: hidden; -} -#testimonials .text-container { - padding-top: 96px; - padding-bottom: 66px; -} -#testimonials h1 { - font: 18px/24px 'opensans-bold', sans-serif; - text-transform: uppercase; - letter-spacing: 3px; - color: #fff; -} -#testimonials h1 span { display: none; } -#testimonials .header-col { padding-top: 9px; } -#testimonials .header-col h1:before { - font-family: 'FontAwesome'; - content: "\f10d"; - padding-right: 10px; - font-size: 72px; - line-height: 72px; - text-align: left; - float: left; - color: #fff; -} - -/* Blockquotes */ -#testimonials blockquote { - margin: 0 0px 30px 0px; - padding-left: 0; - position: relative; - text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); -} -#testimonials blockquote:before { content: none; } -#testimonials blockquote p { - font-family: 'librebaskerville-italic', serif; - padding: 0; - font-size: 24px; - line-height: 48px; - color: #fff -} -#testimonials blockquote cite { - display: block; - font-size: 12px; - font-style: normal; - line-height: 18px; - color: #fff; -} -#testimonials blockquote cite:before { content: "\2014 \0020"; } -#testimonials blockquote cite a, -#testimonials blockquote cite a:visited { color: #8B9798; border: none } - -/* Flex Slider -/* ------------------------------------------------------------------ */ - -/* Reset */ -.flexslider a:active, -.flexslider a:focus { outline: none; } -.slides, -.flex-control-nav, -.flex-direction-nav { margin: 0; padding: 0; list-style: none; } -.slides li { margin: 0; padding: 0;} - -/* Necessary Styles */ -.flexslider { - position: relative; - zoom: 1; - margin: 0; - padding: 0; -} -.flexslider .slides { zoom: 1; } -.flexslider .slides > li { position: relative; } - -/* Hide the slides before the JS is loaded. Avoids image jumping */ -.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } -/* Suggested container for slide animation setups. Can replace this with your own */ -.flex-container { zoom: 1; position: relative; } - -/* Clearfix for .slides */ -.slides:before, -.slides:after { - content: " "; - display: table; -} -.slides:after { - clear: both; -} - -/* No JavaScript Fallback */ -/* If you are not using another script, such as Modernizr, make sure you - * include js that eliminates this class on page load */ -.no-js .slides > li:first-child { display: block; } - -/* Slider Styles */ -.slides { zoom: 1; } -.slides > li { - /*margin-right: 5px; */ - overflow: hidden; -} - -/* Control Nav */ -.flex-control-nav { - width: 100%; - position: absolute; - bottom: -20px; - text-align: left; -} -.flex-control-nav li { - margin: 0 6px; - display: inline-block; - zoom: 1; - *display: inline; -} -.flex-control-paging li a { - width: 12px; - height: 12px; - display: block; - background: #ddd; - background: rgba(255, 255, 255, .3); - cursor: pointer; - text-indent: -9999px; - -webkit-border-radius: 20px; - -moz-border-radius: 20px; - -o-border-radius: 20px; - border-radius: 20px; - box-shadow: inset 0 0 3px rgba(255, 255, 255, .3); -} -.flex-control-paging li a:hover { - background: #CCC; - background: rgba(255, 255, 255, .7); -} -.flex-control-paging li a.flex-active { - background: #fff; - background: rgba(255, 255, 255, .9); - cursor: default; -} - -/* ------------------------------------------------------------------ */ -/* h. Contact Section -/* ------------------------------------------------------------------ */ - -#contact { - background: #191919; - padding-top: 96px; - padding-bottom: 102px; - color: #636363; -} -#contact .section-head { margin-bottom: 42px; } - -#contact a, #contact a:visited { color: #11ABB0; } -#contact a:hover, #contact a:focus { color: #fff; } - -#contact h1 { - font: 18px/24px 'opensans-bold', sans-serif; - text-transform: uppercase; - letter-spacing: 3px; - color: #EBEEEE; - margin-bottom: 6px; -} -#contact h1 span { display: none; } -#contact h1:before { - font-family: 'FontAwesome'; - content: "\f0e0"; - padding-right: 10px; - font-size: 72px; - line-height: 72px; - text-align: left; - float: left; - color: #ebeeee; -} - -#contact h4 { - font: 16px/24px 'opensans-bold', sans-serif; - color: #EBEEEE; - margin-bottom: 6px; -} -#contact p.lead { - font: 18px/36px 'opensans-light', sans-serif; - padding-right: 3%; -} -#contact .header-col { padding-top: 6px; } - - -/* contact form */ -#contact form { margin-bottom: 30px; } -#contact label { - font: 15px/24px 'opensans-bold', sans-serif; - margin: 12px 0; - color: #EBEEEE; - display: inline-block; - float: left; - width: 26%; -} -#contact input, -#contact textarea, -#contact select { - padding: 18px 20px; - color: #eee; - background: #373233; - margin-bottom: 42px; - border: 0; - outline: none; - font-size: 15px; - line-height: 24px; - width: 65%; -} -#contact input:focus, -#contact textarea:focus, -#contact select:focus { - color: #fff; - background-color: #11ABB0; -} -#contact button.submit { - text-transform: uppercase; - letter-spacing: 3px; - color:#fff; - background: #0D0D0D; - border: none; - cursor: pointer; - height: auto; - display: inline-block; - border-radius: 3px; - margin-left: 26%; -} -#contact button.submit:hover { - color: #0D0D0D; - background: #fff; -} -#contact span.required { - color: #11ABB0; - font-size: 13px; -} -#message-warning, #message-success { - display: none; - background: #0F0F0F; - padding: 24px 24px; - margin-bottom: 36px; - width: 65%; - margin-left: 26%; -} -#message-warning { color: #D72828; } -#message-success { color: #11ABB0; } - -#message-warning i, -#message-success i { - margin-right: 10px; -} -#image-loader { - display: none; - position: relative; - left: 18px; - top: 17px; -} - - -/* Twitter Feed */ -#twitter { - margin-top: 12px; - padding: 0; -} -#twitter li { - margin: 6px 0px 12px 0; - line-height: 30px; -} -#twitter li span { - display: block; -} -#twitter li b a { - font: 13px/36px 'opensans-regular', Sans-serif; - color: #474747 !important; - border: none; -} - - -/* ------------------------------------------------------------------ */ -/* i. Footer -/* ------------------------------------------------------------------ */ - -footer { - padding-top: 48px; - margin-bottom: 48px; - color: #303030; - font-size: 14px; - text-align: center; - position: relative; -} - -footer a, footer a:visited { color: #525252; } -footer a:hover, footer a:focus { color: #fff; } - -/* copyright */ -footer .copyright { - margin: 0; - padding: 0; - } -footer .copyright li { - display: inline-block; - margin: 0; - padding: 0; - line-height: 24px; -} -.ie footer .copyright li { - display: inline; -} -footer .copyright li:before { - content: "\2022"; - padding-left: 10px; - padding-right: 10px; - color: #095153; -} -footer .copyright li:first-child:before { - display: none; -} - -/* social links */ -footer .social-links { - margin: 18px 0 30px 0; - padding: 0; - font-size: 30px; -} -footer .social-links li { - display: inline-block; - margin: 0; - padding: 0; - margin-left: 42px; - color: #F06000; -} - -footer .social-links li:first-child { margin-left: 0; } - -/* Go To Top Button */ -#go-top { - position: absolute; - top: -24px; - left: 50%; - margin-left: -30px; -} -#go-top a { - text-decoration: none; - border: 0 none; - display: block; - width: 60px; - height: 60px; - background-color: #525252; - - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - -ms-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - - color: #fff; - font-size: 21px; - line-height: 60px; - border-radius: 100%; -} -#go-top a:hover { background-color: #0F9095; } - +/* +===================================================================== +* Ceevee v1.0 Layout Stylesheet +* url: styleshout.com +* 03-18-2014 +===================================================================== + + TOC: + a. General Styles + b. Header Styles + c. About Section + d. Resume Section + e. Portfolio Section + f. Call To Action Section + g. Testimonials Section + h. Contact Section + i. Footer + +===================================================================== */ + +/* ------------------------------------------------------------------ */ +/* a. General Styles +/* ------------------------------------------------------------------ */ + +body { background: #0f0f0f; } + +/* ------------------------------------------------------------------ */ +/* b. Header Styles +/* ------------------------------------------------------------------ */ + +header { + position: relative; + height: 800px; + min-height: 500px; + width: 100%; + background: #161415 url(../images/header-background.jpg) no-repeat top center; + background-size: cover !important; + -webkit-background-size: cover !important; + text-align: center; + overflow: hidden; +} + +/* vertically center banner section */ +header:before { + content: ''; + display: inline-block; + vertical-align: middle; + height: 100%; +} +header .banner { + display: inline-block; + vertical-align: middle; + margin: 0 auto; + width: 85%; + padding-bottom: 30px;s + text-align: center; +} + +header .banner-text { width: 100%; } +header .banner-text h1 { + font: 90px/1.1em 'opensans-bold', sans-serif; + color: #fff; + letter-spacing: -2px; + margin: 0 auto 18px auto; + text-shadow: 0px 1px 3px rgba(0, 0, 0, .8); +} +header .banner-text h3 { + font: 18px/1.9em 'librebaskerville-regular', serif; + color: #111111; + margin: 0 auto; + width: 70%; + text-shadow: 0px 1px 2px rgba(0, 0, 0, .5); +} +header .banner-text h3 span, +header .banner-text h3 a { + color: #fff; +} +header .banner-text hr { + width: 60%; + margin: 18px auto 24px auto; + border-color: #2F2D2E; + border-color: rgba(150, 150, 150, .1); +} + +/* header social links */ +header .social { + margin: 24px 0; + padding: 0; + font-size: 30px; + text-shadow: 0px 1px 2px rgba(0, 0, 0, .8); +} +header .social li { + display: inline-block; + margin: 0 15px; + padding: 0; +} +header .social li a { color: #fff; } +header .social li a:hover { color: #11ABB0; } + +/* scrolldown link */ +header .scrolldown a { + position: absolute; + bottom: 30px; + left: 50%; + margin-left: -29px; + color: #fff; + display: block; + height: 42px; + width: 42px; + font-size: 42px; + line-height: 42px; + color: #fff; + border-radius: 100%; + + -webkit-transition: all .3s ease-in-out; + -moz-transition: all .3s ease-in-out; + -o-transition: all .3s ease-in-out; + transition: all .3s ease-in-out; +} +header .scrolldown a:hover { color: #11ABB0; } + +/* primary navigation +--------------------------------------------------------------------- */ +#nav-wrap ul, #nav-wrap li, #nav-wrap a { + margin: 0; + padding: 0; + border: none; + outline: none; +} + +/* nav-wrap */ +#nav-wrap { + font: 12px 'opensans-bold', sans-serif; + width: 100%; + text-transform: uppercase; + letter-spacing: 2.5px; + margin: 0 auto; + z-index: 100; + position: fixed; + left: 0; + top: 0; +} +.opaque { background-color: #333; } + +/* hide toggle button */ +#nav-wrap > a.mobile-btn { display: none; } + +ul#nav { + min-height: 48px; + width: auto; + + /* center align the menu */ + text-align: center; +} +ul#nav li { + position: relative; + list-style: none; + height: 48px; + display: inline-block; +} + +/* Links */ +ul#nav li a { + +/* 8px padding top + 8px padding bottom + 32px line-height = 48px */ + + display: inline-block; + padding: 8px 13px; + line-height: 32px; + text-decoration: none; + text-align: left; + color: #fff; + + -webkit-transition: color .2s ease-in-out; + -moz-transition: color .2s ease-in-out; + -o-transition: color .2s ease-in-out; + -ms-transition: color .2s ease-in-out; + transition: color .2s ease-in-out; +} + +ul#nav li a:active { background-color: transparent !important; } +ul#nav li.current a { color: #F06000; } + + +/* ------------------------------------------------------------------ */ +/* c. About Section +/* ------------------------------------------------------------------ */ + +#about { + background: #2B2B2B; + padding-top: 96px; + padding-bottom: 66px; + overflow: hidden; +} + +#about a, #about a:visited { color: #fff; } +#about a:hover, #about a:focus { color: #11ABB0; } + +#about h2 { + font: 22px/30px 'opensans-bold', sans-serif; + color: #fff; + margin-bottom: 12px; +} +#about p { + line-height: 30px; + color: #7A7A7A; +} +#about .profile-pic { + position: relative; + width: 120px; + height: 120px; + border-radius: 100%; +} +#about .contact-details { width: 41.66667%; } +#about .download { + width: 58.33333%; + padding-top: 6px; +} +#about .main-col { padding-right: 5%; } +#about .download .button { + margin-top: 6px; + background: #444; +} +#about .download .button:hover { + background: #fff; + color: #2B2B2B; +} +#about .download .button i { + margin-right: 15px; + font-size: 20px; +} + + +/* ------------------------------------------------------------------ */ +/* d. Resume Section +/* ------------------------------------------------------------------ */ + +#resume { + background: #fff; + padding-top: 90px; + padding-bottom: 72px; + overflow: hidden; +} + +#resume a, #resume a:visited { color: #11ABB0; } +#resume a:hover, #resume a:focus { color: #313131; } + +#resume h1 { + font: 18px/24px 'opensans-bold', sans-serif; + text-transform: uppercase; + letter-spacing: 1px; +} +#resume h1 span { + border-bottom: 3px solid #11ABB0; + padding-bottom: 6px; +} +#resume h3 { + font: 25px/30px 'opensans-bold', sans-serif; +} + +#resume .header-col { padding-top: 9px; } +#resume .main-col { padding-right: 10%; } + +.education, .work { + margin-bottom: 48px; + padding-bottom: 24px; + border-bottom: 1px solid #E8E8E8; +} +#resume .info { + font: 16px/24px 'librebaskerville-italic', serif; + color: #6E7881; + margin-bottom: 18px; + margin-top: 9px; +} +#resume .info span { + margin-right: 5px; + margin-left: 5px; +} +#resume .date { + font: 15px/24px 'opensans-regular', sans-serif; + margin-top: 6px; +} + +/*----------------------------------------------*/ +/* Skill Bars +/*----------------------------------------------*/ + +.bars { + width: 95%; + float: left; + padding: 0; + text-align: left; +} +.bars .skills { + margin-top: 36px; + list-style: none; +} +.bars li { + position: relative; + margin-bottom: 60px; + background: #ccc; + height: 42px; + border-radius: 3px; +} +.bars li em { + font: 15px 'opensans-bold', sans-serif; + color: #313131; + text-transform: uppercase; + letter-spacing: 2px; + font-weight: normal; + position: relative; + top: -36px; +} +.bar-expand { + position: absolute; + left: 0; + top: 0; + + margin: 0; + padding-right: 24px; + background: #313131; + display: inline-block; + height: 42px; + line-height: 42px; + border-radius: 3px 0 0 3px; +} + +.php { + width: 90%; + -moz-animation: photoshop 2s ease; + -webkit-animation: photoshop 2s ease; +} +.sql { + width: 70%; + -moz-animation: illustrator 2s ease; + -webkit-animation: illustrator 2s ease; +} +.python { + width: 60%; + -moz-animation: wordpress 2s ease; + -webkit-animation: wordpress 2s ease; +} +.cpp { + width: 80%; + -moz-animation: css 2s ease; + -webkit-animation: css 2s ease; +} +.jquery { + width: 75%; + -moz-animation: jquery 2s ease; + -webkit-animation: jquery 2s ease; +} +.unix-admin { + width: 80%; + -moz-animation: html5 2s ease; + -webkit-animation: html5 2s ease; +} +.git { + width: 85%; + -moz-animation: html5 2s ease; + -webkit-animation: html5 2s ease; +} +.unit-testing { + width: 50%; + -moz-animation: html5 2s ease; + -webkit-animation: html5 2s ease; +} +.bootstrap { + width: 55%; + -moz-animation: html5 2s ease; + -webkit-animation: html5 2s ease; +} + +@-moz-keyframes photoshop { + 0% { width: 0px; } + 100% { width: 60%; } +} +@-moz-keyframes illustrator { + 0% { width: 0px; } + 100% { width: 55%; } +} +@-moz-keyframes wordpress { + 0% { width: 0px; } + 100% { width: 50%; } +} +@-moz-keyframes css { + 0% { width: 0px; } + 100% { width: 90%; } +} +@-moz-keyframes html5 { + 0% { width: 0px; } + 100% { width: 80%; } +} +@-moz-keyframes jquery { + 0% { width: 0px; } + 100% { width: 50%; } +} + +@-webkit-keyframes photoshop { + 0% { width: 0px; } + 100% { width: 60%; } +} +@-webkit-keyframes illustrator { + 0% { width: 0px; } + 100% { width: 55%; } +} +@-webkit-keyframes wordpress { + 0% { width: 0px; } + 100% { width: 50%; } +} +@-webkit-keyframes css { + 0% { width: 0px; } + 100% { width: 90%; } +} +@-webkit-keyframes html5 { + 0% { width: 0px; } + 100% { width: 80%; } +} +@-webkit-keyframes jquery { + 0% { width: 0px; } + 100% { width: 50%; } +} + +/* ------------------------------------------------------------------ */ +/* e. Portfolio Section +/* ------------------------------------------------------------------ */ + +#portfolio { + background: #ebeeee; + padding-top: 90px; + padding-bottom: 60px; +} +#portfolio h1 { + font: 15px/24px 'opensans-semibold', sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + text-align: center; + margin-bottom: 48px; + color: #95A3A3; +} + +/* Portfolio Content */ +#portfolio-wrapper .columns { margin-bottom: 36px; } +.portfolio-item .item-wrap { + background: #fff; + overflow: hidden; + position: relative; + + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +.portfolio-item .item-wrap a { + display: block; + cursor: pointer; +} + +/* overlay */ +.portfolio-item .item-wrap .overlay { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + + opacity: 0; + -moz-opacity: 0; + filter:alpha(opacity=0); + + -webkit-transition: opacity 0.3s ease-in-out; + -moz-transition: opacity 0.3s ease-in-out; + -o-transition: opacity 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out; + + background: url(../images/overlay-bg.png) repeat; +} +.portfolio-item .item-wrap .link-icon { + display: block; + color: #fff; + height: 30px; + width: 30px; + font-size: 18px; + line-height: 30px; + text-align: center; + + opacity: 0; + -moz-opacity: 0; + filter:alpha(opacity=0); + + -webkit-transition: opacity 0.3s ease-in-out; + -moz-transition: opacity 0.3s ease-in-out; + -o-transition: opacity 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out; + + position: absolute; + top: 50%; + left: 50%; + margin-left: -15px; + margin-top: -15px; +} +.portfolio-item .item-wrap img { + vertical-align: bottom; +} +.portfolio-item .portfolio-item-meta { padding: 18px } +.portfolio-item .portfolio-item-meta h5 { + font: 14px/21px 'opensans-bold', sans-serif; + color: #fff; +} +.portfolio-item .portfolio-item-meta p { + font: 12px/18px 'opensans-light', sans-serif; + color: #c6c7c7; + margin-bottom: 0; +} + +/* on hover */ +.portfolio-item:hover .overlay { + opacity: 1; + -moz-opacity: 1; + filter:alpha(opacity=100); +} +.portfolio-item:hover .link-icon { + opacity: 1; + -moz-opacity: 1; + filter:alpha(opacity=100); +} + +/* popup modal */ +.popup-modal { + max-width: 550px; + background: #fff; + position: relative; + margin: 0 auto; +} +.popup-modal .description-box { padding: 12px 36px 18px 36px; } +.popup-modal .description-box h4 { + font: 15px/24px 'opensans-bold', sans-serif; + margin-bottom: 12px; + color: #111; +} +.popup-modal .description-box p { + font: 14px/24px 'opensans-regular', sans-serif; + color: #A1A1A1; + margin-bottom: 12px; +} +.popup-modal .description-box .categories { + font: 11px/21px 'opensans-light', sans-serif; + color: #A1A1A1; + text-transform: uppercase; + letter-spacing: 2px; + display: block; + text-align: left; +} +.popup-modal .description-box .categories i { + margin-right: 8px; +} +.popup-modal .link-box { + padding: 18px 36px; + background: #111; + text-align: left; +} +.popup-modal .link-box a { + color: #fff; + font: 11px/21px 'opensans-bold', sans-serif; + text-transform: uppercase; + letter-spacing: 3px; + cursor: pointer; +} +.popup-modal a:hover { color: #00CCCC; } +.popup-modal a.popup-modal-dismiss { margin-left: 24px; } + + +/* fadein/fadeout effect for modal popup +/* ------------------------------------------------------------------ */ + +/* content at start */ +.mfp-fade.mfp-wrap .mfp-content .popup-modal { + opacity: 0; + -webkit-transition: all 200ms ease-in-out; + -moz-transition: all 200ms ease-in-out; + -o-transition: all 200ms ease-in-out; + -ms-transition: all 200ms ease-in-out; + transition: all 200ms ease-in-out; +} +/* content fadein */ +.mfp-fade.mfp-wrap.mfp-ready .mfp-content .popup-modal { + opacity: 1; +} +/* content fadeout */ +.mfp-fade.mfp-wrap.mfp-removing .mfp-content .popup-modal { + opacity: 0; +} + +/* ------------------------------------------------------------------ */ +/* f. Call To Action Section +/* ------------------------------------------------------------------ */ + +#call-to-action { + background: #212121; + padding-top: 66px; + padding-bottom: 48px; +} +#call-to-action h1 { + font: 18px/24px 'opensans-bold', sans-serif; + text-transform: uppercase; + letter-spacing: 3px; + color: #fff; +} +#call-to-action h1 span { display: none; } +#call-to-action .header-col h1:before { + font-family: 'FontAwesome'; + content: "\f0ac"; + padding-right: 10px; + font-size: 72px; + line-height: 72px; + text-align: left; + float: left; + color: #fff; +} +#call-to-action .action { + margin-top: 12px; +} +#call-to-action h2 { + font: 28px/36px 'opensans-bold', sans-serif; + color: #EBEEEE; + margin-bottom: 6px; +} +#call-to-action h2 a { + color: inherit; +} +#call-to-action p { + color: #636363; + font-size: 17px; +} +/*# +call-to-action .button { + color:#fff; + background: #0D0D0D; +} +*/ +#call-to-action .button:hover, +#call-to-action .button:active { + background: #FFFFFF; + color: #0D0D0D; +} +#call-to-action p span { + font-family: 'opensans-semibold', sans-serif; + color: #D8D8D8; +} + +/* ------------------------------------------------------------------ +/* g. Testimonials +/* ------------------------------------------------------------------ */ + +#testimonials { + background: #1F1F1F url(../images/testimonials-bg.jpg) no-repeat center center; + background-size: cover !important; + -webkit-background-size: cover !important; + background-attachment: fixed; + + position: relative; + min-height: 200px; + width: 100%; + overflow: hidden; +} +#testimonials .text-container { + padding-top: 96px; + padding-bottom: 66px; +} +#testimonials h1 { + font: 18px/24px 'opensans-bold', sans-serif; + text-transform: uppercase; + letter-spacing: 3px; + color: #fff; +} +#testimonials h1 span { display: none; } +#testimonials .header-col { padding-top: 9px; } +#testimonials .header-col h1:before { + font-family: 'FontAwesome'; + content: "\f10d"; + padding-right: 10px; + font-size: 72px; + line-height: 72px; + text-align: left; + float: left; + color: #fff; +} + +/* Blockquotes */ +#testimonials blockquote { + margin: 0 0px 30px 0px; + padding-left: 0; + position: relative; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); +} +#testimonials blockquote:before { content: none; } +#testimonials blockquote p { + font-family: 'librebaskerville-italic', serif; + padding: 0; + font-size: 24px; + line-height: 48px; + color: #fff +} +#testimonials blockquote cite { + display: block; + font-size: 12px; + font-style: normal; + line-height: 18px; + color: #fff; +} +#testimonials blockquote cite:before { content: "\2014 \0020"; } +#testimonials blockquote cite a, +#testimonials blockquote cite a:visited { color: #8B9798; border: none } + +/* Flex Slider +/* ------------------------------------------------------------------ */ + +/* Reset */ +.flexslider a:active, +.flexslider a:focus { outline: none; } +.slides, +.flex-control-nav, +.flex-direction-nav { margin: 0; padding: 0; list-style: none; } +.slides li { margin: 0; padding: 0;} + +/* Necessary Styles */ +.flexslider { + position: relative; + zoom: 1; + margin: 0; + padding: 0; +} +.flexslider .slides { zoom: 1; } +.flexslider .slides > li { position: relative; } + +/* Hide the slides before the JS is loaded. Avoids image jumping */ +.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } +/* Suggested container for slide animation setups. Can replace this with your own */ +.flex-container { zoom: 1; position: relative; } + +/* Clearfix for .slides */ +.slides:before, +.slides:after { + content: " "; + display: table; +} +.slides:after { + clear: both; +} + +/* No JavaScript Fallback */ +/* If you are not using another script, such as Modernizr, make sure you + * include js that eliminates this class on page load */ +.no-js .slides > li:first-child { display: block; } + +/* Slider Styles */ +.slides { zoom: 1; } +.slides > li { + /*margin-right: 5px; */ + overflow: hidden; +} + +/* Control Nav */ +.flex-control-nav { + width: 100%; + position: absolute; + bottom: -20px; + text-align: left; +} +.flex-control-nav li { + margin: 0 6px; + display: inline-block; + zoom: 1; + *display: inline; +} +.flex-control-paging li a { + width: 12px; + height: 12px; + display: block; + background: #ddd; + background: rgba(255, 255, 255, .3); + cursor: pointer; + text-indent: -9999px; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + -o-border-radius: 20px; + border-radius: 20px; + box-shadow: inset 0 0 3px rgba(255, 255, 255, .3); +} +.flex-control-paging li a:hover { + background: #CCC; + background: rgba(255, 255, 255, .7); +} +.flex-control-paging li a.flex-active { + background: #fff; + background: rgba(255, 255, 255, .9); + cursor: default; +} + +/* ------------------------------------------------------------------ */ +/* h. Contact Section +/* ------------------------------------------------------------------ */ + +#contact { + background: #191919; + padding-top: 96px; + padding-bottom: 102px; + color: #636363; +} +#contact .section-head { margin-bottom: 42px; } + +#contact a, #contact a:visited { color: #11ABB0; } +#contact a:hover, #contact a:focus { color: #fff; } + +#contact h1 { + font: 18px/24px 'opensans-bold', sans-serif; + text-transform: uppercase; + letter-spacing: 3px; + color: #EBEEEE; + margin-bottom: 6px; +} +#contact h1 span { display: none; } +#contact h1:before { + font-family: 'FontAwesome'; + content: "\f0e0"; + padding-right: 10px; + font-size: 72px; + line-height: 72px; + text-align: left; + float: left; + color: #ebeeee; +} + +#contact h4 { + font: 16px/24px 'opensans-bold', sans-serif; + color: #EBEEEE; + margin-bottom: 6px; +} +#contact p.lead { + font: 18px/36px 'opensans-light', sans-serif; + padding-right: 3%; +} +#contact .header-col { padding-top: 6px; } + + +/* contact form */ +#contact form { margin-bottom: 30px; } +#contact label { + font: 15px/24px 'opensans-bold', sans-serif; + margin: 12px 0; + color: #EBEEEE; + display: inline-block; + float: left; + width: 26%; +} +#contact input, +#contact textarea, +#contact select { + padding: 18px 20px; + color: #eee; + background: #373233; + margin-bottom: 42px; + border: 0; + outline: none; + font-size: 15px; + line-height: 24px; + width: 65%; +} +#contact input:focus, +#contact textarea:focus, +#contact select:focus { + color: #fff; + background-color: #11ABB0; +} +#contact button.submit { + text-transform: uppercase; + letter-spacing: 3px; + color:#fff; + background: #0D0D0D; + border: none; + cursor: pointer; + height: auto; + display: inline-block; + border-radius: 3px; + margin-left: 26%; +} +#contact button.submit:hover { + color: #0D0D0D; + background: #fff; +} +#contact span.required { + color: #11ABB0; + font-size: 13px; +} +#message-warning, #message-success { + display: none; + background: #0F0F0F; + padding: 24px 24px; + margin-bottom: 36px; + width: 65%; + margin-left: 26%; +} +#message-warning { color: #D72828; } +#message-success { color: #11ABB0; } + +#message-warning i, +#message-success i { + margin-right: 10px; +} +#image-loader { + display: none; + position: relative; + left: 18px; + top: 17px; +} + + +/* Twitter Feed */ +#twitter { + margin-top: 12px; + padding: 0; +} +#twitter li { + margin: 6px 0px 12px 0; + line-height: 30px; +} +#twitter li span { + display: block; +} +#twitter li b a { + font: 13px/36px 'opensans-regular', Sans-serif; + color: #474747 !important; + border: none; +} + + +/* ------------------------------------------------------------------ */ +/* i. Footer +/* ------------------------------------------------------------------ */ + +footer { + padding-top: 48px; + margin-bottom: 48px; + color: #303030; + font-size: 14px; + text-align: center; + position: relative; +} + +footer a, footer a:visited { color: #525252; } +footer a:hover, footer a:focus { color: #fff; } + +/* copyright */ +footer .copyright { + margin: 0; + padding: 0; + } +footer .copyright li { + display: inline-block; + margin: 0; + padding: 0; + line-height: 24px; +} +.ie footer .copyright li { + display: inline; +} +footer .copyright li:before { + content: "\2022"; + padding-left: 10px; + padding-right: 10px; + color: #095153; +} +footer .copyright li:first-child:before { + display: none; +} + +/* social links */ +footer .social-links { + margin: 18px 0 30px 0; + padding: 0; + font-size: 30px; +} +footer .social-links li { + display: inline-block; + margin: 0; + padding: 0; + margin-left: 42px; + color: #F06000; +} + +footer .social-links li:first-child { margin-left: 0; } + +/* Go To Top Button */ +#go-top { + position: absolute; + top: -24px; + left: 50%; + margin-left: -30px; +} +#go-top a { + text-decoration: none; + border: 0 none; + display: block; + width: 60px; + height: 60px; + background-color: #525252; + + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + + color: #fff; + font-size: 21px; + line-height: 60px; + border-radius: 100%; +} +#go-top a:hover { background-color: #0F9095; } + diff --git a/css/magnific-popup.css b/css/magnific-popup.css index bd962d8..7365072 100644 --- a/css/magnific-popup.css +++ b/css/magnific-popup.css @@ -1,372 +1,372 @@ -/* Magnific Popup CSS */ -.mfp-bg { - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1042; - overflow: hidden; - position: fixed; - background: #000; - opacity: 0.8; - filter: alpha(opacity=80); } - -.mfp-wrap { - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1043; - position: fixed; - outline: none !important; - -webkit-backface-visibility: hidden; } - -.mfp-container { - text-align: center; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - padding: 0 8px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; } - -.mfp-container:before { - content: ''; - display: inline-block; - height: 100%; - vertical-align: middle; } - -.mfp-align-top .mfp-container:before { - display: none; } - -.mfp-content { - position: relative; - display: inline-block; - vertical-align: middle; - margin: 0 auto; - text-align: left; - z-index: 1045; } - -.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { - width: 100%; - cursor: auto; } - -.mfp-ajax-cur { - cursor: progress; } - -.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { - cursor: -moz-zoom-out; - cursor: -webkit-zoom-out; - cursor: zoom-out; } - -.mfp-zoom { - cursor: pointer; - cursor: -webkit-zoom-in; - cursor: -moz-zoom-in; - cursor: zoom-in; } - -.mfp-auto-cursor .mfp-content { - cursor: auto; } - -.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; } - -.mfp-loading.mfp-figure { - display: none; } - -.mfp-hide { - display: none !important; } - -.mfp-preloader { - color: #cccccc; - position: absolute; - top: 50%; - width: auto; - text-align: center; - margin-top: -0.8em; - left: 8px; - right: 8px; - z-index: 1044; } - .mfp-preloader a { - color: #cccccc; } - .mfp-preloader a:hover { - color: white; } - -.mfp-s-ready .mfp-preloader { - display: none; } - -.mfp-s-error .mfp-content { - display: none; } - -button.mfp-close, button.mfp-arrow { - overflow: visible; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; - display: block; - outline: none; - padding: 0; - z-index: 1046; - -webkit-box-shadow: none; - box-shadow: none; } -button::-moz-focus-inner { - padding: 0; - border: 0; } - -.mfp-close { - width: 44px; - height: 44px; - line-height: 44px; - position: absolute; - right: 0; - top: 0; - text-decoration: none; - text-align: center; - opacity: 0.65; - filter: alpha(opacity=65); - padding: 0 0 18px 10px; - color: white; - font-style: normal; - font-size: 28px; - font-family: Arial, Baskerville, monospace; } - .mfp-close:hover, .mfp-close:focus { - opacity: 1; - filter: alpha(opacity=100); } - .mfp-close:active { - top: 1px; } - -.mfp-close-btn-in .mfp-close { - color: #333333; } - -.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { - color: white; - right: -6px; - text-align: right; - padding-right: 6px; - width: 100%; } - -.mfp-counter { - position: absolute; - top: 0; - right: 0; - color: #cccccc; - font-size: 12px; - line-height: 18px; } - -.mfp-arrow { - position: absolute; - opacity: 0.65; - filter: alpha(opacity=65); - margin: 0; - top: 50%; - margin-top: -55px; - padding: 0; - width: 90px; - height: 110px; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } - .mfp-arrow:active { - margin-top: -54px; } - .mfp-arrow:hover, .mfp-arrow:focus { - opacity: 1; - filter: alpha(opacity=100); } - .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { - content: ''; - display: block; - width: 0; - height: 0; - position: absolute; - left: 0; - top: 0; - margin-top: 35px; - margin-left: 35px; - border: medium inset transparent; } - .mfp-arrow:after, .mfp-arrow .mfp-a { - border-top-width: 13px; - border-bottom-width: 13px; - top: 8px; } - .mfp-arrow:before, .mfp-arrow .mfp-b { - border-top-width: 21px; - border-bottom-width: 21px; - opacity: 0.7; } - -.mfp-arrow-left { - left: 0; } - .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { - border-right: 17px solid white; - margin-left: 31px; } - .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { - margin-left: 25px; - border-right: 27px solid #3f3f3f; } - -.mfp-arrow-right { - right: 0; } - .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { - border-left: 17px solid white; - margin-left: 39px; } - .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { - border-left: 27px solid #3f3f3f; } - -.mfp-iframe-holder { - padding-top: 40px; - padding-bottom: 40px; } - .mfp-iframe-holder .mfp-content { - line-height: 0; - width: 100%; - max-width: 900px; } - .mfp-iframe-holder .mfp-close { - top: -40px; } - -.mfp-iframe-scaler { - width: 100%; - height: 0; - overflow: hidden; - padding-top: 56.25%; } - .mfp-iframe-scaler iframe { - position: absolute; - display: block; - top: 0; - left: 0; - width: 100%; - height: 100%; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); - background: black; } - -/* Main image in popup */ -img.mfp-img { - width: auto; - max-width: 100%; - height: auto; - display: block; - line-height: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 40px 0 40px; - margin: 0 auto; } - -/* The shadow behind the image */ -.mfp-figure { - line-height: 0; } - .mfp-figure:after { - content: ''; - position: absolute; - left: 0; - top: 40px; - bottom: 40px; - display: block; - right: 0; - width: auto; - height: auto; - z-index: -1; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); - background: #444444; } - .mfp-figure small { - color: #bdbdbd; - display: block; - font-size: 12px; - line-height: 14px; } - .mfp-figure figure { - margin: 0; } - -.mfp-bottom-bar { - margin-top: -36px; - position: absolute; - top: 100%; - left: 0; - width: 100%; - cursor: auto; } - -.mfp-title { - text-align: left; - line-height: 18px; - color: #f3f3f3; - word-wrap: break-word; - padding-right: 36px; } - -.mfp-image-holder .mfp-content { - max-width: 100%; } - -.mfp-gallery .mfp-image-holder .mfp-figure { - cursor: pointer; } - -@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { - /** - * Remove all paddings around the image on small screen - */ - .mfp-img-mobile .mfp-image-holder { - padding-left: 0; - padding-right: 0; } - .mfp-img-mobile img.mfp-img { - padding: 0; } - .mfp-img-mobile .mfp-figure:after { - top: 0; - bottom: 0; } - .mfp-img-mobile .mfp-figure small { - display: inline; - margin-left: 5px; } - .mfp-img-mobile .mfp-bottom-bar { - background: rgba(0, 0, 0, 0.6); - bottom: 0; - margin: 0; - top: auto; - padding: 3px 5px; - position: fixed; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; } - .mfp-img-mobile .mfp-bottom-bar:empty { - padding: 0; } - .mfp-img-mobile .mfp-counter { - right: 5px; - top: 3px; } - .mfp-img-mobile .mfp-close { - top: 0; - right: 0; - width: 35px; - height: 35px; - line-height: 35px; - background: rgba(0, 0, 0, 0.6); - position: fixed; - text-align: center; - padding: 0; } } - -@media all and (max-width: 900px) { - .mfp-arrow { - -webkit-transform: scale(0.75); - transform: scale(0.75); } - .mfp-arrow-left { - -webkit-transform-origin: 0; - transform-origin: 0; } - .mfp-arrow-right { - -webkit-transform-origin: 100%; - transform-origin: 100%; } - .mfp-container { - padding-left: 6px; - padding-right: 6px; } } - -.mfp-ie7 .mfp-img { - padding: 0; } -.mfp-ie7 .mfp-bottom-bar { - width: 600px; - left: 50%; - margin-left: -300px; - margin-top: 5px; - padding-bottom: 5px; } -.mfp-ie7 .mfp-container { - padding: 0; } -.mfp-ie7 .mfp-content { - padding-top: 44px; } -.mfp-ie7 .mfp-close { - top: 0; - right: 0; - padding-top: 0; } - - - - +/* Magnific Popup CSS */ +.mfp-bg { + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1042; + overflow: hidden; + position: fixed; + background: #000; + opacity: 0.8; + filter: alpha(opacity=80); } + +.mfp-wrap { + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1043; + position: fixed; + outline: none !important; + -webkit-backface-visibility: hidden; } + +.mfp-container { + text-align: center; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + padding: 0 8px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } + +.mfp-container:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; } + +.mfp-align-top .mfp-container:before { + display: none; } + +.mfp-content { + position: relative; + display: inline-block; + vertical-align: middle; + margin: 0 auto; + text-align: left; + z-index: 1045; } + +.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { + width: 100%; + cursor: auto; } + +.mfp-ajax-cur { + cursor: progress; } + +.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { + cursor: -moz-zoom-out; + cursor: -webkit-zoom-out; + cursor: zoom-out; } + +.mfp-zoom { + cursor: pointer; + cursor: -webkit-zoom-in; + cursor: -moz-zoom-in; + cursor: zoom-in; } + +.mfp-auto-cursor .mfp-content { + cursor: auto; } + +.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } + +.mfp-loading.mfp-figure { + display: none; } + +.mfp-hide { + display: none !important; } + +.mfp-preloader { + color: #cccccc; + position: absolute; + top: 50%; + width: auto; + text-align: center; + margin-top: -0.8em; + left: 8px; + right: 8px; + z-index: 1044; } + .mfp-preloader a { + color: #cccccc; } + .mfp-preloader a:hover { + color: white; } + +.mfp-s-ready .mfp-preloader { + display: none; } + +.mfp-s-error .mfp-content { + display: none; } + +button.mfp-close, button.mfp-arrow { + overflow: visible; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + display: block; + outline: none; + padding: 0; + z-index: 1046; + -webkit-box-shadow: none; + box-shadow: none; } +button::-moz-focus-inner { + padding: 0; + border: 0; } + +.mfp-close { + width: 44px; + height: 44px; + line-height: 44px; + position: absolute; + right: 0; + top: 0; + text-decoration: none; + text-align: center; + opacity: 0.65; + filter: alpha(opacity=65); + padding: 0 0 18px 10px; + color: white; + font-style: normal; + font-size: 28px; + font-family: Arial, Baskerville, monospace; } + .mfp-close:hover, .mfp-close:focus { + opacity: 1; + filter: alpha(opacity=100); } + .mfp-close:active { + top: 1px; } + +.mfp-close-btn-in .mfp-close { + color: #333333; } + +.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { + color: white; + right: -6px; + text-align: right; + padding-right: 6px; + width: 100%; } + +.mfp-counter { + position: absolute; + top: 0; + right: 0; + color: #cccccc; + font-size: 12px; + line-height: 18px; } + +.mfp-arrow { + position: absolute; + opacity: 0.65; + filter: alpha(opacity=65); + margin: 0; + top: 50%; + margin-top: -55px; + padding: 0; + width: 90px; + height: 110px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } + .mfp-arrow:active { + margin-top: -54px; } + .mfp-arrow:hover, .mfp-arrow:focus { + opacity: 1; + filter: alpha(opacity=100); } + .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { + content: ''; + display: block; + width: 0; + height: 0; + position: absolute; + left: 0; + top: 0; + margin-top: 35px; + margin-left: 35px; + border: medium inset transparent; } + .mfp-arrow:after, .mfp-arrow .mfp-a { + border-top-width: 13px; + border-bottom-width: 13px; + top: 8px; } + .mfp-arrow:before, .mfp-arrow .mfp-b { + border-top-width: 21px; + border-bottom-width: 21px; + opacity: 0.7; } + +.mfp-arrow-left { + left: 0; } + .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { + border-right: 17px solid white; + margin-left: 31px; } + .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { + margin-left: 25px; + border-right: 27px solid #3f3f3f; } + +.mfp-arrow-right { + right: 0; } + .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { + border-left: 17px solid white; + margin-left: 39px; } + .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { + border-left: 27px solid #3f3f3f; } + +.mfp-iframe-holder { + padding-top: 40px; + padding-bottom: 40px; } + .mfp-iframe-holder .mfp-content { + line-height: 0; + width: 100%; + max-width: 900px; } + .mfp-iframe-holder .mfp-close { + top: -40px; } + +.mfp-iframe-scaler { + width: 100%; + height: 0; + overflow: hidden; + padding-top: 56.25%; } + .mfp-iframe-scaler iframe { + position: absolute; + display: block; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); + background: black; } + +/* Main image in popup */ +img.mfp-img { + width: auto; + max-width: 100%; + height: auto; + display: block; + line-height: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 40px 0 40px; + margin: 0 auto; } + +/* The shadow behind the image */ +.mfp-figure { + line-height: 0; } + .mfp-figure:after { + content: ''; + position: absolute; + left: 0; + top: 40px; + bottom: 40px; + display: block; + right: 0; + width: auto; + height: auto; + z-index: -1; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); + background: #444444; } + .mfp-figure small { + color: #bdbdbd; + display: block; + font-size: 12px; + line-height: 14px; } + .mfp-figure figure { + margin: 0; } + +.mfp-bottom-bar { + margin-top: -36px; + position: absolute; + top: 100%; + left: 0; + width: 100%; + cursor: auto; } + +.mfp-title { + text-align: left; + line-height: 18px; + color: #f3f3f3; + word-wrap: break-word; + padding-right: 36px; } + +.mfp-image-holder .mfp-content { + max-width: 100%; } + +.mfp-gallery .mfp-image-holder .mfp-figure { + cursor: pointer; } + +@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { + /** + * Remove all paddings around the image on small screen + */ + .mfp-img-mobile .mfp-image-holder { + padding-left: 0; + padding-right: 0; } + .mfp-img-mobile img.mfp-img { + padding: 0; } + .mfp-img-mobile .mfp-figure:after { + top: 0; + bottom: 0; } + .mfp-img-mobile .mfp-figure small { + display: inline; + margin-left: 5px; } + .mfp-img-mobile .mfp-bottom-bar { + background: rgba(0, 0, 0, 0.6); + bottom: 0; + margin: 0; + top: auto; + padding: 3px 5px; + position: fixed; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } + .mfp-img-mobile .mfp-bottom-bar:empty { + padding: 0; } + .mfp-img-mobile .mfp-counter { + right: 5px; + top: 3px; } + .mfp-img-mobile .mfp-close { + top: 0; + right: 0; + width: 35px; + height: 35px; + line-height: 35px; + background: rgba(0, 0, 0, 0.6); + position: fixed; + text-align: center; + padding: 0; } } + +@media all and (max-width: 900px) { + .mfp-arrow { + -webkit-transform: scale(0.75); + transform: scale(0.75); } + .mfp-arrow-left { + -webkit-transform-origin: 0; + transform-origin: 0; } + .mfp-arrow-right { + -webkit-transform-origin: 100%; + transform-origin: 100%; } + .mfp-container { + padding-left: 6px; + padding-right: 6px; } } + +.mfp-ie7 .mfp-img { + padding: 0; } +.mfp-ie7 .mfp-bottom-bar { + width: 600px; + left: 50%; + margin-left: -300px; + margin-top: 5px; + padding-bottom: 5px; } +.mfp-ie7 .mfp-container { + padding: 0; } +.mfp-ie7 .mfp-content { + padding-top: 44px; } +.mfp-ie7 .mfp-close { + top: 0; + right: 0; + padding-top: 0; } + + + + diff --git a/css/media-queries.css b/css/media-queries.css index 01a689e..3d4a553 100644 --- a/css/media-queries.css +++ b/css/media-queries.css @@ -1,382 +1,382 @@ -/* ================================================================== - -* Ceevee Media Queries -* url: styleshout.com -* 03-18-2014 - -/* ================================================================== */ - - -/* screenwidth less than 1024px ---------------------------------------------------------------------- */ -@media only screen and (max-width: 1024px) { - - /* header styles - ------------------------------------------------------------------ */ - header .banner-text h1 { - font: 80px/1.1em 'opensans-bold', sans-serif; - letter-spacing: -1px; - margin: 0 auto 12px auto; - } - -} - -/* screenwidth less than 900px ---------------------------------------------------------------------- */ -@media only screen and (max-width: 900px) { - - /* header styles - ------------------------------------------------------------------ */ - header .banner { padding-bottom: 12px; } - header .banner-text h1 { - font: 78px/1.1em 'opensans-bold', sans-serif; - letter-spacing: -1px; - } - header .banner-text h3 { - font: 17px/1.9em 'librebaskerville-regular', serif; - width: 80%; - } - header .banner-text hr { - width: 65%; - margin: 12px auto; - } - /* nav-wrap */ - #nav-wrap { - font: 11px 'opensans-bold', sans-serif; - letter-spacing: 1.5px; - } - - - /* About Section - ------------------------------------------------------------------- */ - #about .profile-pic { - width: 114px; - height: 114px; - margin-left: 12px; - } - #about .contact-details { width: 50%; } - #about .download { width: 50%; } - - /* Resume Section - ------------------------------------------------------------------- */ - #resume h1 { font: 16px/24px 'opensans-bold', sans-serif; } - #resume .main-col { padding-right: 5%; } - - /* Testimonials Section - ------------------------------------------------------------------- */ - #testimonials .header-col h1:before { - font-size: 66px; - line-height: 66px; - } - #testimonials blockquote p { - font-size: 22px; - line-height: 46px; - } - - /* Call to Action Section - ------------------------------------------------------------------- */ - #call-to-action .header-col h1:before { - font-size: 66px; - line-height: 66px; - } - - /* Contact Section - ------------------------------------------------------------------- */ - #contact .section-head { margin-bottom: 30px; } - #contact .header-col h1:before { - font-size: 66px; - line-height: 66px; - } - #contact .section-head p.lead { font: 17px/33px opensans-light, sans-serif; } - - -} - -/* mobile wide/smaller tablets ----------------------------------------------------------------------- */ - -@media only screen and (max-width: 767px) { - - /* mobile navigation - -------------------------------------------------------------------- */ - #nav-wrap { - font: 12px 'opensans-bold', sans-serif; - background: transparent !important; - letter-spacing: 1.5px; - width: auto; - position: fixed; - top: 0; - right: 0; - } - #nav-wrap > a { - width: 48px; - height: 48px; - text-align: left; - background-color: #CC5200; - position: relative; - border: none; - float: right; - - font: 0/0 a; - text-shadow: none; - color: transparent; - - position: relative; - top: 0px; - right: 30px; - } - - #nav-wrap > a:before, - #nav-wrap > a:after { - position: absolute; - border: 2px solid #fff; - top: 35%; - left: 25%; - right: 25%; - content: ''; - } - #nav-wrap > a:after { top: 60%; } - - /* toggle buttons */ - #nav-wrap:not( :target ) > a:first-of-type, - #nav-wrap:target > a:last-of-type { - display: block; - } - - /* hide menu panel */ - #nav-wrap ul#nav { - height: auto; - display: none; - clear: both; - width: auto; - float: right; - - position: relative; - top: 12px; - right: 0; - } - - /* display menu panels */ - #nav-wrap:target > ul#nav { - display: block; - padding: 30px 20px 48px 20px; - background: #1f2024; - margin: 0 30px; - clear: both; - } - - ul#nav li { - display: block; - height: auto; - margin: 0 auto; - padding: 0 4%; - text-align: left; - border-bottom: 1px solid #2D2E34; - border-bottom-style: dotted; - } - - ul#nav li a { - display: block; - margin: 0; - padding: 0; - margin: 12px 0; - line-height: 16px; /* reset line-height from 48px */ - border: none; - } - - - /* Header Styles - -------------------------------------------------------------------- */ - header .banner { - padding-bottom: 12px; - padding-top: 6px; - } - header .banner-text h1 { font: 68px/1.1em 'opensans-bold', sans-serif; } - header .banner-text h3 { - font: 16px/1.9em 'librebaskerville-regular', serif; - width: 85%; - } - header .banner-text hr { - width: 80%; - margin: 18px auto; - } - - /* header social links */ - header .social { - margin: 18px 0 24px 0; - font-size: 24px; - line-height: 36px; - } - header .social li { margin: 0 10px; } - - /* scrolldown link */ - header .scrolldown { display: none; } - - - /* About Section - -------------------------------------------------------------------- */ - #about .profile-pic { display: none; } - #about .download .button { - width: 100%; - text-align: center; - padding: 15px 20px; - } - #about .main-col { padding-right: 30px; } - - - /* Resume Section - --------------------------------------------------------------------- */ - #resume .header-col { - padding-top: 0; - margin-bottom: 48px; - text-align: center; - } - #resume h1 { letter-spacing: 3px; } - #resume .main-col { padding-right: 30px; } - #resume h3, #resume .info { text-align: center; } - - .bars { width: 100%; } - - - /* Call To Action Section - /* ----------------------------------------------------------------- */ - #call-to-action { text-align: center; } - #call-to-action h1 { - font: 16px/24px 'opensans-bold', sans-serif; - text-align: center; - margin-bottom: 30px; - text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); - } - #call-to-action h1 span { display: block; } - #call-to-action .header-col h1:before { content: none; } - #call-to-action p { font-size: 15px; } - - - /* Portfolio Section - /* ----------------------------------------------------------------- */ - #portfolio-wrapper .columns { margin-bottom: 40px; } - .popup-modal { max-width: 85%; } - - - /* Testimonials Section - ----------------------------------------------------------------------- */ - #testimonials .text-container { text-align: center; } - #testimonials h1 { - font: 16px/24px 'opensans-bold', sans-serif; - text-align: center; - margin-bottom: 30px; - text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); - } - #testimonials h1 span { display: block; } - #testimonials .header-col h1:before { content: none; } - #testimonials blockquote { padding-bottom: 24px; } - #testimonials blockquote p { - font-size: 20px; - line-height: 42px; - } - - /* Control Nav */ - .flex-control-nav { - text-align: center; - margin-left: -30px; - } - - - /* contact Section - ----------------------------------------------------------------------- */ - #contact { padding-bottom: 66px; } - #contact .section-head { margin-bottom: 12px; } - #contact .section-head h1 { - font: 16px/24px 'opensans-bold', sans-serif; - text-align: center; - margin-bottom: 30px; - text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); - } - #contact h1 span { display: block; } - #contact .header-col { padding-top: 0; } - #contact .header-col h1:before { content: none; } - #contact .section-head p.lead { text-align: center;} - - /* form */ - #contact label { - float: none; - width: 100%; - } - #contact input, - #contact textarea, - #contact select { - margin-bottom: 6px; - width: 100%; - } - #contact button.submit { margin: 30px 0 24px 0; } - #message-warning, #message-success { - width: 100%; - margin-left: 0; - } - - - /* footer - ------------------------------------------------------------------------ */ - - /* copyright */ - footer .copyright li:before { content: none; } - footer .copyright li { margin-right: 12px; } - - /* social links */ - footer .social-links { font-size: 22px; } - footer .social-links li { margin-left: 18px; } - - /* Go To Top Button */ - #go-top { margin-left: -22px; } - #go-top a { - width: 54px; - height: 54px; - font-size: 18px; - line-height: 54px; - } - - -} - -/* mobile narrow - -------------------------------------------------------------------------- */ - -@media only screen and (max-width: 480px) { - - /* mobile navigation - -------------------------------------------------------------------- */ - #nav-wrap ul#nav { width: auto; float: none; } - - /* header styles - -------------------------------------------------------------------- */ - header .banner { padding-top: 24px; } - header .banner-text h1 { - font: 40px/1.1em 'opensans-bold', sans-serif; - margin: 0 auto 24px auto; - } - header .banner-text h3 { - font: 14px/1.9em 'librebaskerville-regular', sans-serif; - width: 90%; - } - - /* header social links */ - header .social { font-size: 20px;} - header .social li { margin: 0 6px; } - - /* footer - ------------------------------------------------------------------------ */ - - /* social links */ - footer .social-links { font-size: 20px; } - footer .social-links li { margin-left: 14px; } - -} - - - - - - - - - +/* ================================================================== + +* Ceevee Media Queries +* url: styleshout.com +* 03-18-2014 + +/* ================================================================== */ + + +/* screenwidth less than 1024px +--------------------------------------------------------------------- */ +@media only screen and (max-width: 1024px) { + + /* header styles + ------------------------------------------------------------------ */ + header .banner-text h1 { + font: 80px/1.1em 'opensans-bold', sans-serif; + letter-spacing: -1px; + margin: 0 auto 12px auto; + } + +} + +/* screenwidth less than 900px +--------------------------------------------------------------------- */ +@media only screen and (max-width: 900px) { + + /* header styles + ------------------------------------------------------------------ */ + header .banner { padding-bottom: 12px; } + header .banner-text h1 { + font: 78px/1.1em 'opensans-bold', sans-serif; + letter-spacing: -1px; + } + header .banner-text h3 { + font: 17px/1.9em 'librebaskerville-regular', serif; + width: 80%; + } + header .banner-text hr { + width: 65%; + margin: 12px auto; + } + /* nav-wrap */ + #nav-wrap { + font: 11px 'opensans-bold', sans-serif; + letter-spacing: 1.5px; + } + + + /* About Section + ------------------------------------------------------------------- */ + #about .profile-pic { + width: 114px; + height: 114px; + margin-left: 12px; + } + #about .contact-details { width: 50%; } + #about .download { width: 50%; } + + /* Resume Section + ------------------------------------------------------------------- */ + #resume h1 { font: 16px/24px 'opensans-bold', sans-serif; } + #resume .main-col { padding-right: 5%; } + + /* Testimonials Section + ------------------------------------------------------------------- */ + #testimonials .header-col h1:before { + font-size: 66px; + line-height: 66px; + } + #testimonials blockquote p { + font-size: 22px; + line-height: 46px; + } + + /* Call to Action Section + ------------------------------------------------------------------- */ + #call-to-action .header-col h1:before { + font-size: 66px; + line-height: 66px; + } + + /* Contact Section + ------------------------------------------------------------------- */ + #contact .section-head { margin-bottom: 30px; } + #contact .header-col h1:before { + font-size: 66px; + line-height: 66px; + } + #contact .section-head p.lead { font: 17px/33px opensans-light, sans-serif; } + + +} + +/* mobile wide/smaller tablets +---------------------------------------------------------------------- */ + +@media only screen and (max-width: 767px) { + + /* mobile navigation + -------------------------------------------------------------------- */ + #nav-wrap { + font: 12px 'opensans-bold', sans-serif; + background: transparent !important; + letter-spacing: 1.5px; + width: auto; + position: fixed; + top: 0; + right: 0; + } + #nav-wrap > a { + width: 48px; + height: 48px; + text-align: left; + background-color: #CC5200; + position: relative; + border: none; + float: right; + + font: 0/0 a; + text-shadow: none; + color: transparent; + + position: relative; + top: 0px; + right: 30px; + } + + #nav-wrap > a:before, + #nav-wrap > a:after { + position: absolute; + border: 2px solid #fff; + top: 35%; + left: 25%; + right: 25%; + content: ''; + } + #nav-wrap > a:after { top: 60%; } + + /* toggle buttons */ + #nav-wrap:not( :target ) > a:first-of-type, + #nav-wrap:target > a:last-of-type { + display: block; + } + + /* hide menu panel */ + #nav-wrap ul#nav { + height: auto; + display: none; + clear: both; + width: auto; + float: right; + + position: relative; + top: 12px; + right: 0; + } + + /* display menu panels */ + #nav-wrap:target > ul#nav { + display: block; + padding: 30px 20px 48px 20px; + background: #1f2024; + margin: 0 30px; + clear: both; + } + + ul#nav li { + display: block; + height: auto; + margin: 0 auto; + padding: 0 4%; + text-align: left; + border-bottom: 1px solid #2D2E34; + border-bottom-style: dotted; + } + + ul#nav li a { + display: block; + margin: 0; + padding: 0; + margin: 12px 0; + line-height: 16px; /* reset line-height from 48px */ + border: none; + } + + + /* Header Styles + -------------------------------------------------------------------- */ + header .banner { + padding-bottom: 12px; + padding-top: 6px; + } + header .banner-text h1 { font: 68px/1.1em 'opensans-bold', sans-serif; } + header .banner-text h3 { + font: 16px/1.9em 'librebaskerville-regular', serif; + width: 85%; + } + header .banner-text hr { + width: 80%; + margin: 18px auto; + } + + /* header social links */ + header .social { + margin: 18px 0 24px 0; + font-size: 24px; + line-height: 36px; + } + header .social li { margin: 0 10px; } + + /* scrolldown link */ + header .scrolldown { display: none; } + + + /* About Section + -------------------------------------------------------------------- */ + #about .profile-pic { display: none; } + #about .download .button { + width: 100%; + text-align: center; + padding: 15px 20px; + } + #about .main-col { padding-right: 30px; } + + + /* Resume Section + --------------------------------------------------------------------- */ + #resume .header-col { + padding-top: 0; + margin-bottom: 48px; + text-align: center; + } + #resume h1 { letter-spacing: 3px; } + #resume .main-col { padding-right: 30px; } + #resume h3, #resume .info { text-align: center; } + + .bars { width: 100%; } + + + /* Call To Action Section + /* ----------------------------------------------------------------- */ + #call-to-action { text-align: center; } + #call-to-action h1 { + font: 16px/24px 'opensans-bold', sans-serif; + text-align: center; + margin-bottom: 30px; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); + } + #call-to-action h1 span { display: block; } + #call-to-action .header-col h1:before { content: none; } + #call-to-action p { font-size: 15px; } + + + /* Portfolio Section + /* ----------------------------------------------------------------- */ + #portfolio-wrapper .columns { margin-bottom: 40px; } + .popup-modal { max-width: 85%; } + + + /* Testimonials Section + ----------------------------------------------------------------------- */ + #testimonials .text-container { text-align: center; } + #testimonials h1 { + font: 16px/24px 'opensans-bold', sans-serif; + text-align: center; + margin-bottom: 30px; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); + } + #testimonials h1 span { display: block; } + #testimonials .header-col h1:before { content: none; } + #testimonials blockquote { padding-bottom: 24px; } + #testimonials blockquote p { + font-size: 20px; + line-height: 42px; + } + + /* Control Nav */ + .flex-control-nav { + text-align: center; + margin-left: -30px; + } + + + /* contact Section + ----------------------------------------------------------------------- */ + #contact { padding-bottom: 66px; } + #contact .section-head { margin-bottom: 12px; } + #contact .section-head h1 { + font: 16px/24px 'opensans-bold', sans-serif; + text-align: center; + margin-bottom: 30px; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); + } + #contact h1 span { display: block; } + #contact .header-col { padding-top: 0; } + #contact .header-col h1:before { content: none; } + #contact .section-head p.lead { text-align: center;} + + /* form */ + #contact label { + float: none; + width: 100%; + } + #contact input, + #contact textarea, + #contact select { + margin-bottom: 6px; + width: 100%; + } + #contact button.submit { margin: 30px 0 24px 0; } + #message-warning, #message-success { + width: 100%; + margin-left: 0; + } + + + /* footer + ------------------------------------------------------------------------ */ + + /* copyright */ + footer .copyright li:before { content: none; } + footer .copyright li { margin-right: 12px; } + + /* social links */ + footer .social-links { font-size: 22px; } + footer .social-links li { margin-left: 18px; } + + /* Go To Top Button */ + #go-top { margin-left: -22px; } + #go-top a { + width: 54px; + height: 54px; + font-size: 18px; + line-height: 54px; + } + + +} + +/* mobile narrow + -------------------------------------------------------------------------- */ + +@media only screen and (max-width: 480px) { + + /* mobile navigation + -------------------------------------------------------------------- */ + #nav-wrap ul#nav { width: auto; float: none; } + + /* header styles + -------------------------------------------------------------------- */ + header .banner { padding-top: 24px; } + header .banner-text h1 { + font: 40px/1.1em 'opensans-bold', sans-serif; + margin: 0 auto 24px auto; + } + header .banner-text h3 { + font: 14px/1.9em 'librebaskerville-regular', sans-serif; + width: 90%; + } + + /* header social links */ + header .social { font-size: 20px;} + header .social li { margin: 0 6px; } + + /* footer + ------------------------------------------------------------------------ */ + + /* social links */ + footer .social-links { font-size: 20px; } + footer .social-links li { margin-left: 14px; } + +} + + + + + + + + + diff --git a/footer.php b/footer.php index f887d58..7ab36c1 100644 --- a/footer.php +++ b/footer.php @@ -1,42 +1,42 @@ - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + diff --git a/inc/sendEmail.php b/inc/sendEmail.php index 52c4b85..187fdc3 100644 --- a/inc/sendEmail.php +++ b/inc/sendEmail.php @@ -1,73 +1,74 @@ -"; - $message .= "Email address: " . $email . "
"; - $message .= "Message: 
";
-   $message .= $contact_message;
-   $message .= "

-----
This email was sent from your site's contact form.
"; - - // Set From: header - $from = $name . " <" . $email . ">"; - - // Email Headers - $headers = "From: admin\r\n"; - $headers .= "Reply-To: ". $email . "\r\n"; - $headers .= "MIME-Version: 1.0\r\n"; - $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; - - - if (!$error) { - - ini_set("sendmail_from", $siteOwnersEmail); // for windows server - $mail = mail($siteOwnersEmail, $subject, $message, $headers); - - if ($mail) { - echo "OK"; - } else { - echo "Something went wrong. Please try again."; - } - - } else { - - $response = (isset($error['name'])) ? $error['name'] . "
\n" : null; - $response .= (isset($error['email'])) ? $error['email'] . "
\n" : null; - $response .= (isset($error['message'])) ? $error['message'] . "
" : null; - - echo $response; - - } # end if - there was a validation error - -} - +"; + $message .= "Email address: " . $email . "
"; + $message .= "Message: 
";
+   $message .= $contact_message;
+   $message .= "

-----
This email was sent from your site's contact form.
"; + + // Set From: header + $from = $name . " <" . $email . ">"; + + // Email Headers + $headers = "From: admin\r\n"; + $headers .= "Reply-To: ". $email . "\r\n"; + $headers .= "MIME-Version: 1.0\r\n"; + $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; + + + if (count($error) == 0) { + + ini_set("sendmail_from", $siteOwnersEmail); // for windows server + $mail = mail($siteOwnersEmail, $subject, $message, $headers); + + if ($mail) { + echo "OK"; + } else { + echo "Something went wrong. Please try again."; + } + + } else { + + $response = (isset($error['name'])) ? $error['name'] . "
\n" : null; + $response .= (isset($error['email'])) ? $error['email'] . "
\n" : null; + $response .= (isset($error['message'])) ? $error['message'] . "
" : null; + + echo $response; + + } # end if - there was a validation error + +} + diff --git a/index.php b/index.php index 8065e6f..ba2888b 100644 --- a/index.php +++ b/index.php @@ -1,426 +1,426 @@ - - -
- - - - - - -

- - - -

- -
- - - - -
- -
- -
- - - -
- -
- -

About Me

- -

I studied computer science at Northern Michigan University. I'm into full-stack web development. I love to - travel and have lived in Ecuador and Switzerland. -

- -

Check out what I'm up to - now.

- -
- -
-

- - Download/View Resume -

-
- -
- - -
- - -
- -
- - - - -
- - -
- -
-

- Education -

-
- -
- -
- -
- -

Northern Michigan University

-

Bachelor of Arts - Computer Science/Economics double major, Mathematics minor - • - August 2013 - May 2017 -

- -

- Standard Computer Science curriculum with an emphasis on Test-Driven development, agile development, and sturdy, maintainable - code. -

- -
- -
- - -
- -
- -

Zurich University of Applied Sciences (ZHAW)

-

Study Abroad Exchange Semester - • - February - July 2015 -

- -

- Continued Computer Science coursework in German. -

- -
- -
- - -
- - -
- - - - -
- -
-

- Work -

-
- -
- -
- -
- -

Hagerty Insurance Agency

-

Developer - • - December 2017 - Present -

- -

- Work on the Automation release train to improve business processes across the board. -

- -
- -
- - -
- -
- -

Hagerty Insurance Agency

-

Test Engineer - • - June - December 2017 -

- -

- Work on the Apps Development team to improve processes, verify code changes, and collaborate with business stakeholders to - ensure software results and performance. -

- -
- -
- - -
- -
- -

Northern Michigan University

-

Student Programmer, Business Intelligence/Information Systems - • - May 2014 - May 2017 -

- -

- Worked under Enterprise Software Director to build web applications meant for internal student and staff use. Gained skills - and experience in self-direction and full-stack web development, including PHP, Oracle SQL, jQuery, - and Bootstrap. -

- -
- -
- - -
- -
- -

Iron Fish Distillery

-

App Developer/Webmaster - • - June 2016 - Present -

- -

- Build and maintain several web applications for internal use. Also in charge of maintenance of the current Wordpress site. -

- -
- -
- - -
- - -
- - - - -
- -
-

- Skills -

-
- -
- -

There are some of my most notable skills: -

- -
- -
    -
  • - - PHP -
    • -
  • - - SQL -
    • -
  • - - python -
    • -
  • - - C++ -
    • -
  • - - jQuery -
    • -
  • - - Unix Administration -
    • -
  • - - Git -
    • -
  • - - Unit Testing -
    • -
  • - - Bootstrap -
    • -
- -
- - -
- - -
- - -
- - - - - -
- -
- -
- -

- Get In Touch. -

- -
- -
- -

Let me know if you have any cool ideas or want to work together on something! Feel free to send me a message - on - Telegram or send me an email with this form here.

- -
- -
- -
- -
- - -
-
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - - - -
- -
-
- - - -
Error boy
- -
- Your message was sent, thank you! -
-
- -
- - - - -
- -
- - - - + +
+ + + + + + +

+ + + +

+ +
+ + + + +
+ +
+ +
+ + + +
+ +
+ +

About Me

+ +

I studied computer science at Northern Michigan University. I'm into full-stack web development. I love to + travel and have lived in Ecuador and Switzerland. +

+ +

Check out what I'm up to + now.

+ +
+ +
+

+ + Download/View Resume +

+
+ +
+ + +
+ + +
+ +
+ + + + +
+ + +
+ +
+

+ Education +

+
+ +
+ +
+ +
+ +

Northern Michigan University

+

Bachelor of Arts - Computer Science/Economics double major, Mathematics minor + • + August 2013 - May 2017 +

+ +

+ Standard Computer Science curriculum with an emphasis on Test-Driven development, agile development, and sturdy, maintainable + code. +

+ +
+ +
+ + +
+ +
+ +

Zurich University of Applied Sciences (ZHAW)

+

Study Abroad Exchange Semester + • + February - July 2015 +

+ +

+ Continued Computer Science coursework in German. +

+ +
+ +
+ + +
+ + +
+ + + + +
+ +
+

+ Work +

+
+ +
+ +
+ +
+ +

Hagerty Insurance Agency

+

Developer + • + December 2017 - Present +

+ +

+ Work on the Automation release train to improve business processes across the board. +

+ +
+ +
+ + +
+ +
+ +

Hagerty Insurance Agency

+

Test Engineer + • + June - December 2017 +

+ +

+ Work on the Apps Development team to improve processes, verify code changes, and collaborate with business stakeholders to + ensure software results and performance. +

+ +
+ +
+ + +
+ +
+ +

Northern Michigan University

+

Student Programmer, Business Intelligence/Information Systems + • + May 2014 - May 2017 +

+ +

+ Worked under Enterprise Software Director to build web applications meant for internal student and staff use. Gained skills + and experience in self-direction and full-stack web development, including PHP, Oracle SQL, jQuery, + and Bootstrap. +

+ +
+ +
+ + +
+ +
+ +

Iron Fish Distillery

+

App Developer/Webmaster + • + June 2016 - Present +

+ +

+ Build and maintain several web applications for internal use. Also in charge of maintenance of the current Wordpress site. +

+ +
+ +
+ + +
+ + +
+ + + + +
+ +
+

+ Skills +

+
+ +
+ +

There are some of my most notable skills: +

+ +
+ +
    +
  • + + PHP +
    • +
  • + + SQL +
    • +
  • + + python +
    • +
  • + + C++ +
    • +
  • + + jQuery +
    • +
  • + + Unix Administration +
    • +
  • + + Git +
    • +
  • + + Unit Testing +
    • +
  • + + Bootstrap +
    • +
+ +
+ + +
+ + +
+ + +
+ + + + + +
+ +
+ +
+ +

+ Get In Touch. +

+ +
+ +
+ +

Let me know if you have any cool ideas or want to work together on something! Feel free to send me a message + on + Telegram or send me an email with this form here.

+ +
+ +
+ +
+ +
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + + + +
+ +
+
+ + + +
Error boy
+ +
+ Your message was sent, thank you! +
+
+ +
+ + + + +
+ +
+ + + + h*.20) && (y < h) && ($(window).outerWidth() > 768 ) ) { - nav.fadeOut('fast'); - } - else { - if (y < h*.20) { - nav.removeClass('opaque').fadeIn('fast'); - } - else { - nav.addClass('opaque').fadeIn('fast'); - } - } - - }); - - -/*----------------------------------------------------*/ -/* Modal Popup -------------------------------------------------------*/ - - $('.item-wrap a').magnificPopup({ - - type:'inline', - fixedContentPos: false, - removalDelay: 200, - showCloseBtn: false, - mainClass: 'mfp-fade' - - }); - - $(document).on('click', '.popup-modal-dismiss', function (e) { - e.preventDefault(); - $.magnificPopup.close(); - }); - - -/*----------------------------------------------------*/ -/* Flexslider -/*----------------------------------------------------*/ - $('.flexslider').flexslider({ - namespace: "flex-", - controlsContainer: ".flex-container", - animation: 'slide', - controlNav: true, - directionNav: false, - smoothHeight: true, - slideshowSpeed: 7000, - animationSpeed: 600, - randomize: false, - }); - -/*----------------------------------------------------*/ -/* contact form -------------------------------------------------------*/ - - $('form#contactForm button.submit').click(function() { - - $('#image-loader').fadeIn(); - - var contactName = $('#contactForm #contactName').val(); - var contactEmail = $('#contactForm #contactEmail').val(); - var contactSubject = $('#contactForm #contactSubject').val(); - var contactMessage = $('#contactForm #contactMessage').val(); - - var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail + - '&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage; - console.log(data); - $.ajax({ - - type: "POST", - url: "inc/sendEmail.php", - data: data, - success: function(msg) { - console.log(msg); - // Message was sent - if (msg == 'OK') { - $('#image-loader').fadeOut(); - $('#message-warning').hide(); - $('#contactForm').fadeOut(); - $('#message-success').fadeIn(); - } - // There was an error - else { - $('#image-loader').fadeOut(); - $('#message-warning').html(msg); - $('#message-warning').fadeIn(); - } - - } - - }); - return false; - }); - - -}); - - - - - - - - +/*----------------------------------------------------------------------------------- +/* +/* Init JS +/* +-----------------------------------------------------------------------------------*/ + + jQuery(document).ready(function($) { + +/*----------------------------------------------------*/ +/* FitText Settings +------------------------------------------------------ */ + + setTimeout(function() { + $('h1.responsive-headline').fitText(1, { minFontSize: '40px', maxFontSize: '90px' }); + }, 100); + + +/*----------------------------------------------------*/ +/* Smooth Scrolling +------------------------------------------------------ */ + + $('.smoothscroll').on('click',function (e) { + e.preventDefault(); + + var target = this.hash, + $target = $(target); + + $('html, body').stop().animate({ + 'scrollTop': $target.offset().top + }, 800, 'swing', function () { + window.location.hash = target; + }); + }); + + +/*----------------------------------------------------*/ +/* Highlight the current section in the navigation bar +------------------------------------------------------*/ + + var sections = $("section"); + var navigation_links = $("#nav-wrap a"); + + sections.waypoint({ + + handler: function(event, direction) { + + var active_section; + + active_section = $(this); + if (direction === "up") active_section = active_section.prev(); + + var active_link = $('#nav-wrap a[href="#' + active_section.attr("id") + '"]'); + + navigation_links.parent().removeClass("current"); + active_link.parent().addClass("current"); + + }, + offset: '35%' + + }); + + +/*----------------------------------------------------*/ +/* Make sure that #header-background-image height is +/* equal to the browser height. +------------------------------------------------------ */ + + $('header').css({ 'height': $(window).height() }); + $(window).on('resize', function() { + + $('header').css({ 'height': $(window).height() }); + $('body').css({ 'width': $(window).width() }) + }); + + +/*----------------------------------------------------*/ +/* Fade In/Out Primary Navigation +------------------------------------------------------*/ + + $(window).on('scroll', function() { + + var h = $('header').height(); + var y = $(window).scrollTop(); + var nav = $('#nav-wrap'); + + if ( (y > h*.20) && (y < h) && ($(window).outerWidth() > 768 ) ) { + nav.fadeOut('fast'); + } + else { + if (y < h*.20) { + nav.removeClass('opaque').fadeIn('fast'); + } + else { + nav.addClass('opaque').fadeIn('fast'); + } + } + + }); + + +/*----------------------------------------------------*/ +/* Modal Popup +------------------------------------------------------*/ + + $('.item-wrap a').magnificPopup({ + + type:'inline', + fixedContentPos: false, + removalDelay: 200, + showCloseBtn: false, + mainClass: 'mfp-fade' + + }); + + $(document).on('click', '.popup-modal-dismiss', function (e) { + e.preventDefault(); + $.magnificPopup.close(); + }); + + +/*----------------------------------------------------*/ +/* Flexslider +/*----------------------------------------------------*/ + $('.flexslider').flexslider({ + namespace: "flex-", + controlsContainer: ".flex-container", + animation: 'slide', + controlNav: true, + directionNav: false, + smoothHeight: true, + slideshowSpeed: 7000, + animationSpeed: 600, + randomize: false, + }); + +/*----------------------------------------------------*/ +/* contact form +------------------------------------------------------*/ + + $('form#contactForm button.submit').click(function() { + + $('#image-loader').fadeIn(); + + var contactName = $('#contactForm #contactName').val(); + var contactEmail = $('#contactForm #contactEmail').val(); + var contactSubject = $('#contactForm #contactSubject').val(); + var contactMessage = $('#contactForm #contactMessage').val(); + + var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail + + '&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage; + console.log(data); + $.ajax({ + + type: "POST", + url: "inc/sendEmail.php", + data: data, + success: function(msg) { + console.log(msg); + // Message was sent + if (msg == 'OK') { + $('#image-loader').fadeOut(); + $('#message-warning').hide(); + $('#contactForm').fadeOut(); + $('#message-success').fadeIn(); + } + // There was an error + else { + $('#image-loader').fadeOut(); + $('#message-warning').html(msg); + $('#message-warning').fadeIn(); + } + + } + + }); + return false; + }); + + +}); + + + + + + + + diff --git a/js/magnific-popup.js b/js/magnific-popup.js index e6ee0ce..ca4184c 100644 --- a/js/magnific-popup.js +++ b/js/magnific-popup.js @@ -1,3 +1,3 @@ -// Magnific Popup v0.9.9 by Dmitry Semenov -// http://bit.ly/magnific-popup#build=inline+image+retina+imagezoom+fastclick +// Magnific Popup v0.9.9 by Dmitry Semenov +// http://bit.ly/magnific-popup#build=inline+image+retina+imagezoom+fastclick (function(a){var b="Close",c="BeforeClose",d="AfterClose",e="BeforeAppend",f="MarkupParse",g="Open",h="Change",i="mfp",j="."+i,k="mfp-ready",l="mfp-removing",m="mfp-prevent-close",n,o=function(){},p=!!window.jQuery,q,r=a(window),s,t,u,v,w,x=function(a,b){n.ev.on(i+a+j,b)},y=function(b,c,d,e){var f=document.createElement("div");return f.className="mfp-"+b,d&&(f.innerHTML=d),e?c&&c.appendChild(f):(f=a(f),c&&f.appendTo(c)),f},z=function(b,c){n.ev.triggerHandler(i+b,c),n.st.callbacks&&(b=b.charAt(0).toLowerCase()+b.slice(1),n.st.callbacks[b]&&n.st.callbacks[b].apply(n,a.isArray(c)?c:[c]))},A=function(b){if(b!==w||!n.currTemplate.closeBtn)n.currTemplate.closeBtn=a(n.st.closeMarkup.replace("%title%",n.st.tClose)),w=b;return n.currTemplate.closeBtn},B=function(){a.magnificPopup.instance||(n=new o,n.init(),a.magnificPopup.instance=n)},C=function(){var a=document.createElement("p").style,b=["ms","O","Moz","Webkit"];if(a.transition!==undefined)return!0;while(b.length)if(b.pop()+"Transition"in a)return!0;return!1};o.prototype={constructor:o,init:function(){var b=navigator.appVersion;n.isIE7=b.indexOf("MSIE 7.")!==-1,n.isIE8=b.indexOf("MSIE 8.")!==-1,n.isLowIE=n.isIE7||n.isIE8,n.isAndroid=/android/gi.test(b),n.isIOS=/iphone|ipad|ipod/gi.test(b),n.supportsTransition=C(),n.probablyMobile=n.isAndroid||n.isIOS||/(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent),t=a(document),n.popupsCache={}},open:function(b){s||(s=a(document.body));var c;if(b.isObj===!1){n.items=b.items.toArray(),n.index=0;var d=b.items,e;for(c=0;c(a||r.height())},_setFocus:function(){(n.st.focus?n.content.find(n.st.focus).eq(0):n.wrap).focus()},_onFocusIn:function(b){if(b.target!==n.wrap[0]&&!a.contains(n.wrap[0],b.target))return n._setFocus(),!1},_parseMarkup:function(b,c,d){var e;d.data&&(c=a.extend(d.data,c)),z(f,[b,c,d]),a.each(c,function(a,c){if(c===undefined||c===!1)return!0;e=a.split("_");if(e.length>1){var d=b.find(j+"-"+e[0]);if(d.length>0){var f=e[1];f==="replaceWith"?d[0]!==c[0]&&d.replaceWith(c):f==="img"?d.is("img")?d.attr("src",c):d.replaceWith(''):d.attr(e[1],c)}}else b.find(j+"-"+a).html(c)})},_getScrollbarSize:function(){if(n.scrollbarSize===undefined){var a=document.createElement("div");a.id="mfp-sbm",a.style.cssText="width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(a),n.scrollbarSize=a.offsetWidth-a.clientWidth,document.body.removeChild(a)}return n.scrollbarSize}},a.magnificPopup={instance:null,proto:o.prototype,modules:[],open:function(b,c){return B(),b?b=a.extend(!0,{},b):b={},b.isObj=!0,b.index=c||0,this.instance.open(b)},close:function(){return a.magnificPopup.instance&&a.magnificPopup.instance.close()},registerModule:function(b,c){c.options&&(a.magnificPopup.defaults[b]=c.options),a.extend(this.proto,c.proto),this.modules.push(b)},defaults:{disableOn:0,key:null,midClick:!1,mainClass:"",preloader:!0,focus:"",closeOnContentClick:!1,closeOnBgClick:!0,closeBtnInside:!0,showCloseBtn:!0,enableEscapeKey:!0,modal:!1,alignTop:!1,removalDelay:0,prependTo:null,fixedContentPos:"auto",fixedBgPos:"auto",overflowY:"auto",closeMarkup:'',tClose:"Close (Esc)",tLoading:"Loading..."}},a.fn.magnificPopup=function(b){B();var c=a(this);if(typeof b=="string")if(b==="open"){var d,e=p?c.data("magnificPopup"):c[0].magnificPopup,f=parseInt(arguments[1],10)||0;e.items?d=e.items[f]:(d=c,e.delegate&&(d=d.find(e.delegate)),d=d.eq(f)),n._openClick({mfpEl:d},c,e)}else n.isOpen&&n[b].apply(n,Array.prototype.slice.call(arguments,1));else b=a.extend(!0,{},b),p?c.data("magnificPopup",b):c[0].magnificPopup=b,n.addGroup(c,b);return c};var D="inline",E,F,G,H=function(){G&&(F.after(G.addClass(E)).detach(),G=null)};a.magnificPopup.registerModule(D,{options:{hiddenClass:"hide",markup:"",tNotFound:"Content not found"},proto:{initInline:function(){n.types.push(D),x(b+"."+D,function(){H()})},getInline:function(b,c){H();if(b.src){var d=n.st.inline,e=a(b.src);if(e.length){var f=e[0].parentNode;f&&f.tagName&&(F||(E=d.hiddenClass,F=y(E),E="mfp-"+E),G=e.after(F).detach().removeClass(E)),n.updateStatus("ready")}else n.updateStatus("error",d.tNotFound),e=a("
");return b.inlineElement=e,e}return n.updateStatus("ready"),n._parseMarkup(c,{},b),c}}});var I,J=function(b){if(b.data&&b.data.title!==undefined)return b.data.title;var c=n.st.image.titleSrc;if(c){if(a.isFunction(c))return c.call(n,b);if(b.el)return b.el.attr(c)||""}return""};a.magnificPopup.registerModule("image",{options:{markup:'
',cursor:"mfp-zoom-out-cur",titleSrc:"title",verticalFit:!0,tError:'The image could not be loaded.'},proto:{initImage:function(){var a=n.st.image,c=".image";n.types.push("image"),x(g+c,function(){n.currItem.type==="image"&&a.cursor&&s.addClass(a.cursor)}),x(b+c,function(){a.cursor&&s.removeClass(a.cursor),r.off("resize"+j)}),x("Resize"+c,n.resizeImage),n.isLowIE&&x("AfterChange",n.resizeImage)},resizeImage:function(){var a=n.currItem;if(!a||!a.img)return;if(n.st.image.verticalFit){var b=0;n.isLowIE&&(b=parseInt(a.img.css("padding-top"),10)+parseInt(a.img.css("padding-bottom"),10)),a.img.css("max-height",n.wH-b)}},_onImageHasSize:function(a){a.img&&(a.hasSize=!0,I&&clearInterval(I),a.isCheckingImgSize=!1,z("ImageHasSize",a),a.imgHidden&&(n.content&&n.content.removeClass("mfp-loading"),a.imgHidden=!1))},findImageSize:function(a){var b=0,c=a.img[0],d=function(e){I&&clearInterval(I),I=setInterval(function(){if(c.naturalWidth>0){n._onImageHasSize(a);return}b>200&&clearInterval(I),b++,b===3?d(10):b===40?d(50):b===100&&d(500)},e)};d(1)},getImage:function(b,c){var d=0,e=function(){b&&(b.img[0].complete?(b.img.off(".mfploader"),b===n.currItem&&(n._onImageHasSize(b),n.updateStatus("ready")),b.hasSize=!0,b.loaded=!0,z("ImageLoadComplete")):(d++,d<200?setTimeout(e,100):f()))},f=function(){b&&(b.img.off(".mfploader"),b===n.currItem&&(n._onImageHasSize(b),n.updateStatus("error",g.tError.replace("%url%",b.src))),b.hasSize=!0,b.loaded=!0,b.loadError=!0)},g=n.st.image,h=c.find(".mfp-img");if(h.length){var i=document.createElement("img");i.className="mfp-img",b.img=a(i).on("load.mfploader",e).on("error.mfploader",f),i.src=b.src,h.is("img")&&(b.img=b.img.clone()),i=b.img[0],i.naturalWidth>0?b.hasSize=!0:i.width||(b.hasSize=!1)}return n._parseMarkup(c,{title:J(b),img_replaceWith:b.img},b),n.resizeImage(),b.hasSize?(I&&clearInterval(I),b.loadError?(c.addClass("mfp-loading"),n.updateStatus("error",g.tError.replace("%url%",b.src))):(c.removeClass("mfp-loading"),n.updateStatus("ready")),c):(n.updateStatus("loading"),b.loading=!0,b.hasSize||(b.imgHidden=!0,c.addClass("mfp-loading"),n.findImageSize(b)),c)}}});var K,L=function(){return K===undefined&&(K=document.createElement("p").style.MozTransform!==undefined),K};a.magnificPopup.registerModule("zoom",{options:{enabled:!1,easing:"ease-in-out",duration:300,opener:function(a){return a.is("img")?a:a.find("img")}},proto:{initZoom:function(){var a=n.st.zoom,d=".zoom",e;if(!a.enabled||!n.supportsTransition)return;var f=a.duration,g=function(b){var c=b.clone().removeAttr("style").removeAttr("class").addClass("mfp-animated-image"),d="all "+a.duration/1e3+"s "+a.easing,e={position:"fixed",zIndex:9999,left:0,top:0,"-webkit-backface-visibility":"hidden"},f="transition";return e["-webkit-"+f]=e["-moz-"+f]=e["-o-"+f]=e[f]=d,c.css(e),c},h=function(){n.content.css("visibility","visible")},i,j;x("BuildControls"+d,function(){if(n._allowZoom()){clearTimeout(i),n.content.css("visibility","hidden"),e=n._getItemToZoom();if(!e){h();return}j=g(e),j.css(n._getOffset()),n.wrap.append(j),i=setTimeout(function(){j.css(n._getOffset(!0)),i=setTimeout(function(){h(),setTimeout(function(){j.remove(),e=j=null,z("ZoomAnimationEnded")},16)},f)},16)}}),x(c+d,function(){if(n._allowZoom()){clearTimeout(i),n.st.removalDelay=f;if(!e){e=n._getItemToZoom();if(!e)return;j=g(e)}j.css(n._getOffset(!0)),n.wrap.append(j),n.content.css("visibility","hidden"),setTimeout(function(){j.css(n._getOffset())},16)}}),x(b+d,function(){n._allowZoom()&&(h(),j&&j.remove(),e=null)})},_allowZoom:function(){return n.currItem.type==="image"},_getItemToZoom:function(){return n.currItem.hasSize?n.currItem.img:!1},_getOffset:function(b){var c;b?c=n.currItem.img:c=n.st.zoom.opener(n.currItem.el||n.currItem);var d=c.offset(),e=parseInt(c.css("padding-top"),10),f=parseInt(c.css("padding-bottom"),10);d.top-=a(window).scrollTop()-e;var g={width:c.width(),height:(p?c.innerHeight():c[0].offsetHeight)-f-e};return L()?g["-moz-transform"]=g.transform="translate("+d.left+"px,"+d.top+"px)":(g.left=d.left,g.top=d.top),g}}});var M="retina";a.magnificPopup.registerModule(M,{options:{replaceSrc:function(a){return a.src.replace(/\.\w+$/,function(a){return"@2x"+a})},ratio:1},proto:{initRetina:function(){if(window.devicePixelRatio>1){var a=n.st.retina,b=a.ratio;b=isNaN(b)?b():b,b>1&&(x("ImageHasSize."+M,function(a,c){c.img.css({"max-width":c.img[0].naturalWidth/b,width:"100%"})}),x("ElementParse."+M,function(c,d){d.src=a.replaceSrc(d,b)}))}}}}),function(){var b=1e3,c="ontouchstart"in window,d=function(){r.off("touchmove"+f+" touchend"+f)},e="mfpFastClick",f="."+e;a.fn.mfpFastClick=function(e){return a(this).each(function(){var g=a(this),h;if(c){var i,j,k,l,m,n;g.on("touchstart"+f,function(a){l=!1,n=1,m=a.originalEvent?a.originalEvent.touches[0]:a.touches[0],j=m.clientX,k=m.clientY,r.on("touchmove"+f,function(a){m=a.originalEvent?a.originalEvent.touches:a.touches,n=m.length,m=m[0];if(Math.abs(m.clientX-j)>10||Math.abs(m.clientY-k)>10)l=!0,d()}).on("touchend"+f,function(a){d();if(l||n>1)return;h=!0,a.preventDefault(),clearTimeout(i),i=setTimeout(function(){h=!1},b),e()})})}g.on("click"+f,function(){h||e()})})},a.fn.destroyMfpFastClick=function(){a(this).off("touchstart"+f+" click"+f),c&&r.off("touchmove"+f+" touchend"+f)}}(),B()})(window.jQuery||window.Zepto) \ No newline at end of file diff --git a/js/now.js b/js/now.js index fd6a01b..5c40015 100644 --- a/js/now.js +++ b/js/now.js @@ -1,60 +1,60 @@ -/*----------------------------------------------------------------------------------- -/* -/* Now JS -/* ------------------------------------------------------------------------------------*/ - - jQuery(document).ready(function($) { - -/*----------------------------------------------------*/ -/* FitText Settings ------------------------------------------------------- */ - - setTimeout(function() { - $('h1.responsive-headline').fitText(1, { minFontSize: '40px', maxFontSize: '90px' }); - }, 100); - - -/*----------------------------------------------------*/ -/* Make sure that #header-background-image height is -/* equal to the browser height. ------------------------------------------------------- */ - - $(window).on('resize', function() { - $('body').css({ 'width': $(window).width() }) - }); - - -/*----------------------------------------------------*/ -/* Fade In/Out Primary Navigation -------------------------------------------------------*/ - - $(window).on('scroll', function() { - - var h = $('header').height(); - var y = $(window).scrollTop(); - var nav = $('#nav-wrap'); - - if ( (y > h*.20) && (y < h) && ($(window).outerWidth() > 768 ) ) { - nav.fadeOut('fast'); - } - else { - if (y < h*.20) { - nav.removeClass('opaque').fadeIn('fast'); - } - else { - nav.addClass('opaque').fadeIn('fast'); - } - } - - }); - - -}); - - - - - - - +/*----------------------------------------------------------------------------------- +/* +/* Now JS +/* +-----------------------------------------------------------------------------------*/ + + jQuery(document).ready(function($) { + +/*----------------------------------------------------*/ +/* FitText Settings +------------------------------------------------------ */ + + setTimeout(function() { + $('h1.responsive-headline').fitText(1, { minFontSize: '40px', maxFontSize: '90px' }); + }, 100); + + +/*----------------------------------------------------*/ +/* Make sure that #header-background-image height is +/* equal to the browser height. +------------------------------------------------------ */ + + $(window).on('resize', function() { + $('body').css({ 'width': $(window).width() }) + }); + + +/*----------------------------------------------------*/ +/* Fade In/Out Primary Navigation +------------------------------------------------------*/ + + $(window).on('scroll', function() { + + var h = $('header').height(); + var y = $(window).scrollTop(); + var nav = $('#nav-wrap'); + + if ( (y > h*.20) && (y < h) && ($(window).outerWidth() > 768 ) ) { + nav.fadeOut('fast'); + } + else { + if (y < h*.20) { + nav.removeClass('opaque').fadeIn('fast'); + } + else { + nav.addClass('opaque').fadeIn('fast'); + } + } + + }); + + +}); + + + + + + + diff --git a/social.html b/social.html index 36a86ae..611deda 100644 --- a/social.html +++ b/social.html @@ -1,37 +1,37 @@ - +