@import url("iconic/css/iconmonstr-iconic-font.min.css");/* =================================================================== * fonts.scss * * ------------------------------------------------------------------- *//* * libre baskerville================================================================================ */@font-face { font-family: "librebaskerville-regular"; src: url("../fonts/librebaskerville/librebaskerville-regular-webfont.html") format("woff2"), url("../fonts/librebaskerville/librebaskerville-regular-webfont.woff") format("woff"); font-style: normal; font-weight: normal;}@font-face { font-family: "librebaskerville-italic"; src: url("../fonts/librebaskerville/librebaskerville-italic-webfont.html") format("woff2"), url("../fonts/librebaskerville/librebaskerville-italic-webfont.woff") format("woff"); font-style: normal; font-weight: normal;}@font-face { font-family: "librebaskerville-bold"; src: url("../fonts/librebaskerville/librebaskerville-bold-webfont.html") format("woff2"), url("../fonts/librebaskerville/librebaskerville-bold-webfont.woff") format("woff"); font-style: normal; font-weight: normal;}/* * montserrat================================================================================ */@font-face { font-family: "montserrat-black"; src: url("../fonts/montserrat/montserrat-black-webfont.html") format("woff2"), url("../fonts/montserrat/montserrat-black-webfont.woff") format("woff"); font-style: normal; font-weight: normal;}@font-face { font-family: "montserrat-extrabold"; src: url("../fonts/montserrat/montserrat-extrabold-webfont.html") format("woff2"), url("../fonts/montserrat/montserrat-extrabold-webfont.woff") format("woff"); font-style: normal; font-weight: normal;}@font-face { font-family: "montserrat-bold"; src: url("../fonts/montserrat/montserrat-bold-webfont.html") format("woff2"), url("../fonts/montserrat/montserrat-bold-webfont.woff") format("woff"); font-style: normal; font-weight: normal;}@font-face { font-family: "montserrat-semibold"; src: url("../fonts/montserrat/montserrat-semibold-webfont.html") format("woff2"), url("../fonts/montserrat/montserrat-semibold-webfont.woff") format("woff"); font-style: normal; font-weight: normal;}@font-face { font-family: "montserrat-medium"; src: url("../fonts/montserrat/montserrat-medium-webfont.html") format("woff2"), url("../fonts/montserrat/montserrat-medium-webfont.woff") format("woff"); font-style: normal; font-weight: normal;}@font-face { font-family: "montserrat-regular"; src: url("../fonts/montserrat/montserrat-regular-webfont.html") format("woff2"), url("../fonts/montserrat/montserrat-regular-webfont.woff") format("woff"); font-style: normal; font-weight: normal;}@font-face { font-family: "montserrat-light"; src: url("../fonts/montserrat/montserrat-light-webfont.html") format("woff2"), url("../fonts/montserrat/montserrat-light-webfont.woff") format("woff"); font-style: normal; font-weight: normal;}@font-face { font-family: "montserrat-extralight"; src: url("../fonts/montserrat/montserrat-extralight-webfont.html") format("woff2"), url("../fonts/montserrat/montserrat-extralight-webfont.woff") format("woff"); font-style: normal; font-weight: normal;}@font-face { font-family: "montserrat-thin"; src: url("../fonts/montserrat/montserrat-thin-webfont.html") format("woff2"), url("../fonts/montserrat/montserrat-thin-webfont.woff") format("woff"); font-style: normal; font-weight: normal;}/* =================================================================== * * Hola v1.0 Base Stylesheet * 10-02-2017 * ------------------------------------------------------------------ * * TOC: * # Normalize * # Basic/base setup styles * ## Media * ## Typography resets * ## links * ## inputs * # grid * ## medium size devices * ## tablets * ## mobile devices * ## small mobile devices * # block grids * ## medium size devices * ## tablets * ## mobile devices * ## small mobile devices * # MISC * * =================================================================== *//* =================================================================== * # normalize * normalize.css v5.0.0 | MIT License | * github.com/necolas/normalize.css * * ------------------------------------------------------------------- */html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}body { margin: 0;}article, aside, footer, header, nav, section { display: block;}h1 { font-size: 2em; margin: 0.67em 0;}figcaption, figure, main { display: block;}figure { margin: 1em 40px;}hr { box-sizing: content-box; height: 0; overflow: visible;}pre { font-family: monospace, monospace; font-size: 1em;}a { background-color: transparent; -webkit-text-decoration-skip: objects;}a:active, a:hover { outline-width: 0;}abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted;}b, strong { font-weight: inherit;}b, strong { font-weight: bolder;}code, kbd, samp { font-family: monospace, monospace; font-size: 1em;}dfn { font-style: italic;}mark { background-color: #ff0; color: #000;}small { font-size: 80%;}sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sub { bottom: -0.25em;}sup { top: -0.5em;}audio, video { display: inline-block;}audio:not([controls]) { display: none; height: 0;}img { border-style: none;}svg:not(:root) { overflow: hidden;}button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0;}button, input { overflow: visible;}button, select { text-transform: none;}button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button;}button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText;}fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal;}progress { display: inline-block; vertical-align: baseline;}textarea { overflow: auto;}[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0;}[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto;}[type="search"] { -webkit-appearance: textfield; outline-offset: -2px;}[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none;}::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}details, menu { display: block;}summary { display: list-item;}canvas { display: inline-block;}template { display: none;}[hidden] { display: none;}/* =================================================================== * # basic/base setup styles - (_basic.scss) * * ------------------------------------------------------------------- */html { font-size: 62.5%; box-sizing: border-box;}*, *::before, *::after { box-sizing: inherit;}body { font-weight: normal; line-height: 1; word-wrap: break-word; text-rendering: optimizeLegibility; -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: none;}body, input, button { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;}/* ------------------------------------------------------------------- * ## Media - (_basic.scss) * ------------------------------------------------------------------- */img, video { max-width: 100%; height: auto;}/* ------------------------------------------------------------------- * ## Typography resets - (_basic.scss) * ------------------------------------------------------------------- */div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0;}h1, h2, h3, h4, h5, h6 { -webkit-font-smoothing: auto; -webkit-font-smoothing: antialiased; -webkit-font-variant-ligatures: common-ligatures; -moz-font-variant-ligatures: common-ligatures; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility;}em, i { font-style: italic; line-height: inherit;}strong, b { font-weight: bold; line-height: inherit;}small { font-size: 60%; line-height: inherit;}ol, ul { list-style: none;}li { display: block;}/* ------------------------------------------------------------------- * ## links - (_basic.scss) * ------------------------------------------------------------------- */a { text-decoration: none; line-height: inherit;}a img { border: none;}/* ------------------------------------------------------------------- * ## inputs - (_basic.scss) * ------------------------------------------------------------------- */fieldset { margin: 0; padding: 0;}input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none;}/* =================================================================== * # grid - (_grid.scss) * * ------------------------------------------------------------------- */.row { width: 94%; max-width: 1200px; margin: 0 auto;}.row:after { content: ""; display: table; clear: both;}.row .row { width: auto; max-width: none; margin-left: -20px; margin-right: -20px;}/* column blocks * -------------------------------------- */[class*="col-"] { float: left;}[class*="col-"] + [class*="col-"].end { float: right;}[class*="col-"] { padding: 0 20px;}/* column width classes * -------------------------------------- */.col-one { width: 8.33333%;}.col-two, .col-1-6 { width: 16.66667%;}.col-three, .col-1-4 { width: 25%;}.col-four, .col-1-3 { width: 33.33333%;}.col-five { width: 41.66667%;}.col-six, .col-1-2 { width: 50%;}.col-seven { width: 58.33333%;}.col-eight, .col-2-3 { width: 66.66667%;}.col-nine, .col-3-4 { width: 75%;}.col-ten, .col-5-6 { width: 83.33333%;}.col-eleven { width: 91.66667%;}.col-twelve, .col-full { width: 100%;}/* ------------------------------------------------------------------- * ## medium size devices - (_grid.scss) * ------------------------------------------------------------------- */@media only screen and (max-width: 1200px) { .row .row { margin-left: -15px; margin-right: -15px; } [class*="col-"] { padding: 0 15px; } .md-two, .md-1-6 { width: 16.66667%; } .md-one { width: 8.33333%; } .md-three, .md-1-4 { width: 25%; } .md-four, .md-1-3 { width: 33.33333%; } .md-five { width: 41.66667%; } .md-six, .md-1-2 { width: 50%; } .md-seven { width: 58.33333%; } .md-eight, .md-2-3 { width: 66.66667%; } .md-nine, .md-3-4 { width: 75%; } .md-ten, .md-5-6 { width: 83.33333%; } .md-eleven { width: 91.66667%; } .md-twelve, .md-full { width: 100%; }}/* ------------------------------------------------------------------- * ## tablets - (_grid.scss) * ------------------------------------------------------------------- */@media only screen and (max-width: 800px) { .row { width: 90%; } .tab-1-4 { width: 25%; } .tab-1-3 { width: 33.33333%; } .tab-1-2 { width: 50%; } .tab-2-3 { width: 66.66667%; } .tab-3-4 { width: 75%; } .tab-full { width: 100%; }}/* ------------------------------------------------------------------- * ## mobile devices - (_grid.scss) * ------------------------------------------------------------------- */@media only screen and (max-width: 600px) { .row { width: auto; padding-left: 25px; padding-right: 25px; } .row .row { margin-left: -10px; margin-right: -10px; } [class*="col-"] { padding: 0 10px; } .mob-1-4 { width: 25%; } .mob-1-3 { width: 33.33333%; } .mob-1-2 { width: 50%; } .mob-2-3 { width: 66.66667%; } .mob-3-4 { width: 75%; } .mob-full { width: 100%; }}/* ------------------------------------------------------------------- * ## small mobile devices - (_grid.scss) * ------------------------------------------------------------------- *//* stack columns on small mobile devices * ------------------------------------------------------------------- */@media only screen and (max-width: 400px) { .row .row { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } [class*="col-"] { width: 100% !important; float: none !important; clear: both !important; margin-left: 0; margin-right: 0; padding: 0; } [class*="col-"] + [class*="col-"].end { float: none; }}/* =================================================================== * # block grids - (_grid.scss) * ------------------------------------------------------------------- *//* Equally-sized columns define at row level * ------------------------------------------------------------------- */[class*="block-"]:after { content: ""; display: table; clear: both;}.block-1-6 .col-block { width: 16.66667%;}.block-1-5 .col-block { width: 20%;}.block-1-4 .col-block { width: 25%;}.block-1-3 .col-block { width: 33.33333%;}.block-1-2 .col-block { width: 50%;}/** * Clearing for block grid columns. Allow columns with * different heights to align properly. */.block-1-6 .col-block:nth-child(6n+1), .block-1-5 .col-block:nth-child(5n+1), .block-1-4 .col-block:nth-child(4n+1), .block-1-3 .col-block:nth-child(3n+1), .block-1-2 .col-block:nth-child(2n+1) { clear: both;}/* ------------------------------------------------------------------- * ## medium size devices - (_grid.scss) * ------------------------------------------------------------------- */@media only screen and (max-width: 1200px) { .block-m-1-6 .col-block { width: 16.66667%; } .block-m-1-5 .col-block { width: 20%; } .block-m-1-4 .col-block { width: 25%; } .block-m-1-3 .col-block { width: 33.33333%; } .block-m-1-2 .col-block { width: 50%; } .block-m-full .col-block { width: 100%; clear: both; } [class*="block-m-"] .bgrid:nth-child(n) { clear: none; } .block-m-1-6 .col-block:nth-child(6n+1), .block-m-1-5 .col-block:nth-child(5n+1), .block-m-1-4 .col-block:nth-child(4n+1), .block-m-1-3 .col-block:nth-child(3n+1), .block-m-1-2 .col-block:nth-child(2n+1) { clear: both; }}/* ------------------------------------------------------------------- * ## tablets - (_grid.scss) * ------------------------------------------------------------------- */@media only screen and (max-width: 800px) { .block-tab-1-6 .col-block { width: 16.66667%; } .block-tab-1-5 .col-block { width: 20%; } .block-tab-1-4 .col-block { width: 25%; } .block-tab-1-3 .col-block { width: 33.33333%; } .block-tab-1-2 .col-block { width: 50%; } .block-tab-full .col-block { width: 100%; clear: both; } [class*="block-tab-"] .bgrid:nth-child(n) { clear: none; } .block-tab-1-6 .col-block:nth-child(6n+1), .block-tab-1-6 .col-block:nth-child(5n+1), .block-tab-1-4 .col-block:nth-child(4n+1), .block-tab-1-3 .col-block:nth-child(3n+1), .block-tab-1-2 .col-block:nth-child(2n+1) { clear: both; }}/* ------------------------------------------------------------------- * ## mobile devices - (_grid.scss) * ------------------------------------------------------------------- */@media only screen and (max-width: 600px) { .block-mob-1-6 .col-block { width: 16.66667%; } .block-mob-1-5 .col-block { width: 20%; } .block-mob-1-4 .col-block { width: 25%; } .block-mob-1-3 .col-block { width: 33.33333%; } .block-mob-1-2 .col-block { width: 50%; } .block-mob-full .col-block { width: 100%; clear: both; } [class*="block-mob-"] .bgrid:nth-child(n) { clear: none; } .block-mob-1-6 .col-block:nth-child(6n+1), .block-mob-1-5 .col-block:nth-child(5n+1), .block-mob-1-4 .col-block:nth-child(4n+1), .block-mob-1-3 .col-block:nth-child(3n+1), .block-mob-1-2 .col-block:nth-child(2n+1) { clear: both; }}/* ------------------------------------------------------------------- * ## small mobile devices - (_grid.scss) * ------------------------------------------------------------------- *//* stack columns on small mobile devices * ------------------------------------------------------------------- */@media only screen and (max-width: 400px) { .stack .col-block { width: 100% !important; float: none !important; clear: both !important; margin-left: 0; margin-right: 0; }}/* =================================================================== * # MISC - (_grid.scss) * * ------------------------------------------------------------------- */.group:after { content: ""; display: table; clear: both;}/* Misc Helper Styles * -------------------------------------- */.is-hidden { display: none;}.is-invisible { visibility: hidden;}.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.overflow-hidden { overflow: hidden;}.remove-bottom { margin-bottom: 0;}.half-bottom { margin-bottom: 1.5rem !important;}.add-bottom { margin-bottom: 3rem !important;}.no-border { border: none;}.full-width { width: 100%;}.text-center { text-align: center;}.text-left { text-align: left;}.text-right { text-align: right;}.pull-left { float: left;}.pull-right { float: right;}.align-center { margin-left: auto; margin-right: auto; text-align: center;}/* =================================================================== * * Hola v1.0 Vendor/Third Party CSS * 10-02-2017 * ------------------------------------------------------------------ * * TOC: * # Slick slider * # PhotoSwipe Skin * # Prettyprint GitHub Theme * * =================================================================== *//* =================================================================== * # slick slider * * ------------------------------------------------------------------- */.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0;}.slick-list:focus { outline: none;}.slick-list.dragging { cursor: pointer; cursor: hand;}.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}.slick-track { position: relative; left: 0; top: 0; display: block;}.slick-track:before, .slick-track:after { content: ""; display: table;}.slick-track:after { clear: both;}.slick-loading .slick-track { visibility: hidden;}.slick-slide { float: left; height: 100%; min-height: 1px; display: none;}[dir="rtl"] .slick-slide { float: right;}.slick-slide img { display: block;}.slick-slide.slick-loading img { display: none;}.slick-slide.dragging img { pointer-events: none;}.slick-initialized .slick-slide { display: block;}.slick-loading .slick-slide { visibility: hidden;}.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent;}.slick-arrow.slick-hidden { display: none;}/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license *//*	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)*//* pswp = photoswipe */.pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ -webkit-backface-visibility: hidden; outline: none;}.pswp * { -webkit-box-sizing: border-box; box-sizing: border-box;}.pswp img { max-width: none;}/* style is added when JS option showHideOpacity is set to true */.pswp--animate_opacity { /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ opacity: 0.001; will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);}.pswp--open { display: block;}.pswp--zoom-allowed .pswp__img { /* autoprefixer: off */ cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in;}.pswp--zoomed-in .pswp__img { /* autoprefixer: off */ cursor: -webkit-grab; cursor: -moz-grab; cursor: grab;}.pswp--dragging .pswp__img { /* autoprefixer: off */ cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing;}/*	Background is added as a separate element.	As animating opacity is much faster than animating rgba() background-color.*/.pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity;}.pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;}.pswp__container, .pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0;}/* Prevent selection and tap highlights */.pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;}.pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; /* for open/close transition */ -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);}.pswp__bg { will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);}.pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; transition: none;}.pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden;}.pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden;}.pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0;}/*	stretched thumbnail or div placeholder element (see below)	style is added to avoid flickering in webkit/blink when layers overlap*/.pswp__img--placeholder { -webkit-backface-visibility: hidden;}/*	div element that matches size of large image	large image loads on top of it*/.pswp__img--placeholder--blank { background: #222;}.pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0;}/*	Error message appears when image is not loaded	(JS option errorMsg controls markup)*/.pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #CCC;}.pswp__error-msg a { color: #CCC; text-decoration: underline;}/* =================================================================== * # PhotoSwipe Skin * * ------------------------------------------------------------------- *//* Contents: 1. Buttons 2. Share modal and links 3. Index indicator ("1 of X" counter) 4. Caption 5. Loading indicator 6. Additional styles (root element, top bar, idle state, hidden state, etc.)*//* ------------------------------------------------------------------- * ## 1. buttons * ------------------------------------------------------------------- *//* <button> css reset */.pswp__button { width: 44px; height: 44px; line-height: 1; position: relative; background: none; cursor: pointer; overflow: visible; -webkit-appearance: none; display: block; border: 0; padding: 0; margin: 0; float: right; opacity: 0.6; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; -webkit-box-shadow: none; box-shadow: none;}.pswp__button:focus, .pswp__button:hover { opacity: 1; background-color: transparent;}.pswp__button:active { outline: none; opacity: 0.9;}.pswp__button::-moz-focus-inner { padding: 0; border: 0;}/* pswp__ui--over-close class it added when mouse is over element that should close gallery */.pswp__ui--over-close .pswp__button--close { opacity: 1;}.pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { background: url(../images/photoswipe/default-skin.png) 0 0 no-repeat; background-size: 264px 88px; width: 44px; height: 44px;}@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */ .pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before { background-image: url(images/photoswipe/default-skin.html); } .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right { background: none; }}.pswp__button--close { background-position: 0 -44px;}.pswp__button--share { background-position: -44px -44px;}.pswp__button--fs { display: none;}.pswp--supports-fs .pswp__button--fs { display: block;}.pswp--fs .pswp__button--fs { background-position: -44px 0;}.pswp__button--zoom { display: none; background-position: -88px 0;}.pswp--zoom-allowed .pswp__button--zoom { display: block;}.pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0;}/* no arrows on touch screens */.pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { visibility: hidden;}/*Arrow buttons hit area(icon is added to :before pseudo-element)*/.pswp__button--arrow--left, .pswp__button--arrow--right { background: none; top: 50%; margin-top: -22px; width: 30px; height: 32px; position: absolute;}.pswp__button--arrow--left { left: 12px;}.pswp__button--arrow--right { right: 12px;}.pswp__button--arrow--left:before, .pswp__button--arrow--right:before { content: ''; top: 0; background-color: rgba(0, 0, 0, 0.3); height: 30px; width: 32px; position: absolute; border-radius: 3px;}.pswp__button--arrow--left:before { left: 6px; background-position: -138px -44px;}.pswp__button--arrow--right:before { right: 6px; background-position: -94px -44px;}/* ------------------------------------------------------------------- * ## 2. Share modal/popup and links * ------------------------------------------------------------------- */.pswp__counter, .pswp__share-modal { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.pswp__share-modal { display: block; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; top: 0; left: 0; padding: 10px; position: absolute; z-index: 1600; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; -webkit-backface-visibility: hidden; will-change: opacity;}.pswp__share-modal--hidden { display: none;}.pswp__share-tooltip { z-index: 1620; position: absolute; background: #FFF; top: 56px; border-radius: 3px; display: block; width: auto; right: 44px; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); -webkit-transition: -webkit-transform 0.25s; transition: transform 0.25s; -webkit-backface-visibility: hidden; will-change: transform;}.pswp__share-tooltip a { display: block; padding: 9px 15px; color: #000; text-decoration: none; font-size: 13px; line-height: 18px;}.pswp__share-tooltip a:hover { text-decoration: none; color: #000;}.pswp__share-tooltip a:first-child { /* round corners on the first/last list item */ border-radius: 3px 3px 0 0;}.pswp__share-tooltip a:last-child { border-radius: 0 0 3px 3px;}.pswp__share-modal--fade-in { opacity: 1;}.pswp__share-modal--fade-in .pswp__share-tooltip { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}/* increase size of share links on touch devices */.pswp--touch .pswp__share-tooltip a { padding: 16px 12px;}a.pswp__share--facebook:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -12px; right: 15px; border: 6px solid transparent; border-bottom-color: #FFF; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none;}a.pswp__share--facebook:hover { background: #3E5C9A; color: #FFF;}a.pswp__share--facebook:hover:before { border-bottom-color: #3E5C9A;}a.pswp__share--twitter:hover { background: #55ACEE; color: #FFF;}a.pswp__share--pinterest:hover { background: #CCC; color: #CE272D;}a.pswp__share--download:hover { background: #DDD;}/* ------------------------------------------------------------------- * ## 3. Index indicator ("1 of X" counter) * ------------------------------------------------------------------- */.pswp__counter { position: absolute; left: 6px; top: 0; height: 44px; font-size: 13px; line-height: 44px; color: #FFF; opacity: 0.75; padding: 0 10px;}/* ------------------------------------------------------------------- * ## 4. Caption * ------------------------------------------------------------------- */.pswp__caption { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 45px;}.pswp__caption h4 { font-size: 1.8rem; line-height: 1.333; margin: 0 0 .6rem; color: #FFFFFF;}.pswp__caption small { font-size: 11px; color: rgba(255, 255, 255, 0.5);}.pswp__caption__center { text-align: center; max-width: 900px; margin: 0 auto; font-size: 13px; padding: 10px; line-height: 20px; color: rgba(255, 255, 255, 0.5);}.pswp__caption--empty { display: none;}/* Fake caption element, used to calculate height of next/prev image */.pswp__caption--fake { visibility: hidden;}/* ------------------------------------------------------------------- * ## 5. Loading indicator (preloader) * You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR * ------------------------------------------------------------------- */.pswp__preloader { width: 44px; height: 44px; position: absolute; top: 0; left: 50%; margin-left: -22px; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; will-change: opacity; direction: ltr;}.pswp__preloader__icn { width: 20px; height: 20px; margin: 12px;}.pswp__preloader--active { opacity: 1;}.pswp__preloader--active .pswp__preloader__icn { /* We use .gif in browsers that don't support CSS animation */ background: url(..images/photoswipe/preloader.html) 0 0 no-repeat;}.pswp--css_animation .pswp__preloader--active { opacity: 1;}.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { -webkit-animation: clockwise 500ms linear infinite; animation: clockwise 500ms linear infinite;}.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;}.pswp--css_animation .pswp__preloader__icn { background: none; opacity: 0.75; width: 14px; height: 14px; position: absolute; left: 15px; top: 15px; margin: 0;}.pswp--css_animation .pswp__preloader__cut { /* 			The idea of animating inner circle is based on Polymer ("material") loading indicator 			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html		*/ position: relative; width: 7px; height: 14px; overflow: hidden;}.pswp--css_animation .pswp__preloader__donut { -webkit-box-sizing: border-box; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #FFF; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; position: absolute; top: 0; left: 0; background: none; margin: 0;}@media screen and (max-width: 1024px) { .pswp__preloader { position: relative; left: auto; top: auto; margin: 0; float: right; }}@-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }}@keyframes clockwise { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }}@-webkit-keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); }}@keyframes donut-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); }}/* ------------------------------------------------------------------- * ## 6. additional styles * ------------------------------------------------------------------- *//* root element of UI */.pswp { font-family: "montserrat-regular", sans-serif;}.pswp__ui { -webkit-font-smoothing: auto; visibility: visible; opacity: 1; z-index: 1550;}/* top black bar with buttons and "1 of X" indicator */.pswp__top-bar { position: absolute; left: 0; top: 0; height: 44px; width: 100%; padding: 0 6px;}.pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { -webkit-backface-visibility: hidden; will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);}/* pswp--has_mouse class is added only when two subsequent mousemove events occur */.pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { visibility: visible;}.pswp__top-bar, .pswp__caption { background-color: rgba(0, 0, 0, 0.5);}/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background-color: rgba(0, 0, 0, 0.3);}/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */.pswp__ui--idle .pswp__top-bar { opacity: 0;}.pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right { opacity: 0;}/*	pswp__ui--hidden class is added when controls are hidden	e.g. when user taps to toggle visibility of controls*/.pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right { /* Force paint & create composition layer for controls. */ opacity: 0.001;}/* pswp__ui--one-slide class is added when there is just one item in gallery */.pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter { display: none;}.pswp__element--disabled { display: none !important;}.pswp--minimal--dark .pswp__top-bar { background: none;}/* =================================================================== * # Prettyprint GitHub Theme * * ------------------------------------------------------------------- */.prettyprint { background: #F1F1F1; font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace; font-size: 12px; line-height: 1.5; border-radius: 3px; border: none;}.pln { color: #333333;}@media screen { .str { color: #dd1144; } .kwd { color: #333333; } .com { color: #999988; } .typ { color: #445588; } .lit { color: #445588; } .pun { color: #333333; } .opn { color: #333333; } .clo { color: #333333; } .tag { color: navy; } .atn { color: teal; } .atv { color: #dd1144; } .dec { color: #333333; } .var { color: teal; } .fun { color: #990000; }}@media print, projection { .str { color: #006600; } .kwd { color: #006; font-weight: bold; } .com { color: #600; font-style: italic; } .typ { color: #404; font-weight: bold; } .lit { color: #004444; } .pun, .opn, .clo { color: #444400; } .tag { color: #006; font-weight: bold; } .atn { color: #440044; } .atv { color: #006600; }}/* Specify class=linenums on a pre to get line numbering */ol.linenums { margin-top: 0; margin-bottom: 0;}/* IE indents via margin-left */li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 { /* */}/* Alternate shading for lines */li.L1, li.L3, li.L5, li.L7, li.L9 { /* */}/* =================================================================== * * Hola v1.0 Main Stylesheet * 10-02-2017 * ------------------------------------------------------------------ * * TOC: * # webfonts and iconfonts * # base style overrides * ## links * # typography & general theme styles * ## lists * ## responsive video container * ## floated image * ## tables * ## spacing * ## pace.js styles - minimal * # forms * ## style placeholder text * ## Change Autocomplete styles in Chrome * # buttons * # additional components * ## alert box * ## additional typo styles * ## skillbars * # common and reusable theme styles * ## section intro * ## blog-list * # header styles * ## header logo * ## mobile menu toggle * ## navigation * # home * ## home content * ## home social * ## home animations * # about * ## timeline * # works * ## bricks/masonry * # testimonials * # blog * # cta * # stats * # contact * # footer * ## go to top * # blog styles * ## blog page header * ## blog content * ## comments * * =================================================================== *//* =================================================================== * # webfonts and iconfonts - (_document-setup.scss) * * ------------------------------------------------------------------- *//* =================================================================== * # base style overrides - (_document-setup.scss) * * ------------------------------------------------------------------- */html { font-size: 10px;}@media only screen and (max-width: 400px) { html { font-size: 9.375px; }}html, body { height: 100%;}body { background: #0a0809; font-family: "librebaskerville-regular", serif; font-size: 1.6rem; line-height: 1.875; color: #5f5f5f; margin: 0; padding: 0;}/* ------------------------------------------------------------------- * ## links - (_document-setup.scss) * ------------------------------------------------------------------- */a { color: #eb7e25; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}a:hover, a:focus, a:active { color: #c96a1d;}a:focus { outline: none;}/* =================================================================== * # typography & general theme styles - (_document-setup.scss) * * ------------------------------------------------------------------- */h1, h2, h3, h4, h5, h6, .h01, .h02, .h03, .h04, .h05, .h06 { font-family: "montserrat-medium", sans-serif; color: #0D0A0B; font-style: normal; font-weight: normal; text-rendering: optimizeLegibility;}h1, .h01, h2, .h02, h3, .h03, h4, .h04 { margin-top: 6rem; margin-bottom: 1.8rem;}@media only screen and (max-width: 600px) { h1, .h01, h2, .h02, h3, .h03, h4, .h04 { margin-top: 5.1rem; }}h5, .h05, h6, .h06 { margin-top: 4.2rem; margin-bottom: 1.5rem;}@media only screen and (max-width: 600px) { h5, .h05, h6, .h06 { margin-top: 3.6rem; margin-bottom: 0.9rem; }}h1, .h01 { font-family: "montserrat-bold", sans-serif; font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem;}@media only screen and (max-width: 600px) { h1, .h01 { font-size: 3.3rem; letter-spacing: -.07rem; }}h2, .h02 { font-size: 3rem; line-height: 1.3;}h3, .h03 { font-size: 2.4rem; line-height: 1.25;}h4, .h04 { font-size: 2.1rem; line-height: 1.286;}h5, .h05 { font-size: 1.6rem; line-height: 1.3125;}h6, .h06 { font-family: "montserrat-bold", sans-serif; font-size: 1.4rem; line-height: 1.5; text-transform: uppercase; letter-spacing: .16rem;}p img { margin: 0;}p.lead { font-family: "montserrat-regular", sans-serif; font-size: 2rem; line-height: 1.8; margin-bottom: 3.6rem; color: #0D0A0B;}@media only screen and (max-width: 800px) { p.lead { font-size: 1.8rem; }}em, i, strong, b { font-size: inherit; line-height: inherit; font-style: normal; font-weight: normal;}em, i { font-family: "librebaskerville-italic", serif;}strong, b { font-family: "librebaskerville-bold", serif;}small { font-size: 1.2rem; line-height: inherit;}blockquote { margin: 3.9rem 0; padding-left: 4.5rem; position: relative;}blockquote:before { content: "\201C"; font-size: 10rem; line-height: 0px; margin: 0; color: rgba(0, 0, 0, 0.15); font-family: arial, sans-serif; position: absolute; top: 3.6rem; left: 0;}blockquote p { font-family: "montserrat-regular", sans-serif; padding: 0; font-size: 2.1rem; line-height: 1.857; color: #0D0A0B;}blockquote cite { display: block; font-family: "montserrat-regular", sans-serif; font-size: 1.4rem; font-style: normal; line-height: 1.5;}blockquote cite:before { content: "\2014 \0020";}blockquote cite a, blockquote cite a:visited { color: #6c6c6c; border: none;}abbr { font-family: "librebaskerville-bold", serif; font-variant: small-caps; text-transform: lowercase; letter-spacing: .05rem; color: #6c6c6c;}var, kbd, samp, code, pre { font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace;}pre { padding: 2.4rem 3rem 3rem; background: #F1F1F1; overflow-x: auto;}code { font-size: 1.4rem; margin: 0 .2rem; padding: .3rem .6rem; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 3px;}pre > code { display: block; white-space: pre; line-height: 2; padding: 0; margin: 0;}pre.prettyprint > code { border: none;}del { text-decoration: line-through;}abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; text-decoration: none;}mark { background: #ffd900; color: #000000;}hr { border: solid rgba(0, 0, 0, 0.1); border-width: 1px 0 0; clear: both; margin: 2.4rem 0 1.5rem; height: 0;}/* ------------------------------------------------------------------- * ## Lists - (_document-setup.scss) * ------------------------------------------------------------------- */ol { list-style: decimal;}ul { list-style: disc;}li { display: list-item;}ol, ul { margin-left: 1.7rem;}ul li { padding-left: .4rem;}ul ul, ul ol, ol ol, ol ul { margin: .6rem 0 .6rem 1.7rem;}ul.disc li { display: list-item; list-style: none; padding: 0 0 0 .8rem; position: relative;}ul.disc li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #862121; position: absolute; left: -17px; top: 11px; vertical-align: middle;}dt { margin: 0; color: #862121;}dd { margin: 0 0 0 2rem;}/* ------------------------------------------------------------------- * ## responsive video container - (_document-setup) * ------------------------------------------------------------------- */.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}/* ------------------------------------------------------------------- * ## floated image - (_document-setup) * ------------------------------------------------------------------- */img.pull-right { margin: 1.5rem 0 0 3rem;}img.pull-left { margin: 1.5rem 3rem 0 0;}/* ------------------------------------------------------------------- * ## tables - (_document-setup.scss) * ------------------------------------------------------------------- */table { border-width: 0; width: 100%; max-width: 100%; font-family: "librebaskerville-regular", serif;}th, td { padding: 1.5rem 3rem; text-align: left; border-bottom: 1px solid #E8E8E8;}th { color: #0D0A0B; font-family: "montserrat-bold", sans-serif;}td { line-height: 1.5;}th:first-child, td:first-child { padding-left: 0;}th:last-child, td:last-child { padding-right: 0;}.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch;}/* ------------------------------------------------------------------- * ## Spacing - (_document-setup.scss) * ------------------------------------------------------------------- */button, .btn { margin-bottom: 1.2rem;}fieldset { margin-bottom: 1.5rem;}input, textarea, select, pre, blockquote, figure, table, p, ul, ol, dl, form, .video-container, .ss-custom-select { margin-bottom: 3rem;}/* ------------------------------------------------------------------- * ## pace.js styles - minimal - (_document-setup.scss) * ------------------------------------------------------------------- */.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none;}.pace-inactive { display: none;}.pace .pace-progress { background: #da5214; position: fixed; z-index: 900; top: 0; right: 100%; width: 100%; height: 4px;}.oldie .pace { display: none;}/* =================================================================== * preloader - (_preloader-2.scss) * * ------------------------------------------------------------------- */#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #0F1215; z-index: 800; height: 100%; width: 100%;}.no-js #preloader, .oldie #preloader { display: none;}#loader { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; padding: 0; background-color: #da5214; border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out;}@-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0); } 100% { -webkit-transform: scale(1); opacity: 0; }}@keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; }}/* =================================================================== * # forms - (_forms.scss) * * ------------------------------------------------------------------- */fieldset { border: none;}input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { display: block; height: 6rem; padding: 1.5rem 0; border: 0; outline: none; color: #333333; font-family: "montserrat-regular", sans-serif; font-size: 1.5rem; line-height: 3rem; max-width: 100%; background: transparent; border-bottom: 2px solid rgba(0, 0, 0, 0.15); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}.ss-custom-select { position: relative; padding: 0;}.ss-custom-select select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; text-indent: 0.01px; text-overflow: ''; margin: 0; line-height: 3rem; vertical-align: middle;}.ss-custom-select select option { padding-left: 2rem; padding-right: 2rem;}.ss-custom-select select::-ms-expand { display: none;}.ss-custom-select::after { border-bottom: 2px solid rgba(0, 0, 0, 0.5); border-right: 2px solid rgba(0, 0, 0, 0.5); content: ''; display: block; height: 8px; width: 8px; margin-top: -7px; pointer-events: none; position: absolute; right: 2.4rem; top: 50%; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;}/* IE9 and below */.oldie .ss-custom-select::after { display: none;}textarea { min-height: 25rem;}input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { color: #000000; border-bottom: 2px solid black;}label, legend { font-family: "montserrat-bold", sans-serif; font-size: 1.4rem; margin-bottom: .9rem; line-height: 1.714; color: #0D0A0B; display: block;}input[type="checkbox"], input[type="radio"] { display: inline;}label > .label-text { display: inline-block; margin-left: 1rem; font-family: "montserrat-regular", sans-serif; line-height: inherit;}label > input[type="checkbox"], label > input[type="radio"] { margin: 0; position: relative; top: .15rem;}/* ------------------------------------------------------------------- * ## style placeholder text - (_forms.scss) * ------------------------------------------------------------------- */::-webkit-input-placeholder { color: #6c6c6c;}:-moz-placeholder { color: #6c6c6c; /* Firefox 18- */}::-moz-placeholder { color: #6c6c6c; /* Firefox 19+ */}:-ms-input-placeholder { color: #6c6c6c;}.placeholder { color: #6c6c6c !important;}/* ------------------------------------------------------------------- * ## Change Autocomplete styles in Chrome - (_forms.scss) * ------------------------------------------------------------------- */input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-text-fill-color: #cf3e3e; transition: background-color 5000s ease-in-out 0s;}#education { padding: 60px 0; background-color: #f5f5f5; /* Adjust as needed */ } #education h2 { text-align: center; margin-bottom: 30px; } #education article { text-align: center; margin-bottom: 20px; } /* =================================================================== * # buttons - (_buttons.scss) * * ------------------------------------------------------------------- */.btn, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; font-family: "montserrat-semibold", sans-serif; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .3rem; height: 5.4rem; line-height: calc(5.4rem - .6rem); padding: 0 3rem; margin: 0 .3rem 1.2rem 0; color: #151515; text-decoration: none; cursor: pointer; text-align: center; white-space: nowrap; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #c5c5c5; border: .3rem solid #c5c5c5;}.btn:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .btn:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { background-color: #b8b8b8; border-color: #b8b8b8; color: #000000; outline: 0;}/* button primary * ------------------------------------------------- */.btn.btn--primary, button.btn--primary, input[type="submit"].btn--primary, input[type="reset"].btn--primary, input[type="button"].btn--primary { background: #0D0A0B; border-color: #0D0A0B; color: #FFFFFF;}.btn.btn--primary:hover, button.btn--primary:hover, input[type="submit"].btn--primary:hover, input[type="reset"].btn--primary:hover, input[type="button"].btn--primary:hover, .btn.btn--primary:focus, button.btn--primary:focus, input[type="submit"].btn--primary:focus, input[type="reset"].btn--primary:focus, input[type="button"].btn--primary:focus { background: #bb440d;}/* button modifiers * ------------------------------------------------- */.btn.full-width, button.full-width { width: 100%; margin-right: 0;}.btn--medium, button.btn--medium { height: 5.7rem !important; line-height: calc(5.7rem - .6rem) !important;}.btn--large, button.btn--large { height: 6rem !important; line-height: calc(6rem - .6rem) !important;}.btn--stroke, button.btn--stroke { background: transparent !important; border: 0.3rem solid #000000; color: #000000;}.btn--stroke:hover, button.btn--stroke:hover { border: 0.3rem solid #862121; color: #862121;}.btn--pill, button.btn--pill { padding-left: 3rem !important; padding-right: 3rem !important; border-radius: 1000px !important;}button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0;}/* =================================================================== * # additional components - (_others.scss) * * ------------------------------------------------------------------- *//* ------------------------------------------------------------------- * ## alert box - (_alert-box.scss) * ------------------------------------------------------------------- */.alert-box { padding: 2.1rem 4rem 2.1rem 3rem; position: relative; margin-bottom: 3rem; border-radius: 3px; font-family: "montserrat-regular", sans-serif; font-size: 1.5rem; line-height: 1.6;}.alert-box__close { position: absolute; right: 1.8rem; top: 1.8rem; cursor: pointer;}.alert-box__close.im { font-size: 12px;}.alert-box--error { background-color: #ffd1d2; color: #e65153;}.alert-box--success { background-color: #c8e675; color: #758c36;}.alert-box--info { background-color: #d7ecfb; color: #4a95cc;}.alert-box--notice { background-color: #fff099; color: #bba31b;}/* ------------------------------------------------------------------- * ## additional typo styles - (_additional-typo.scss) * ------------------------------------------------------------------- *//* drop cap * ----------------------------------------------- */.drop-cap:first-letter { float: left; margin: 0; padding: 1.5rem .6rem 0 0; font-size: 8.4rem; font-family: "montserrat-bold", sans-serif; line-height: 6rem; text-indent: 0; background: transparent; color: #000000;}/* line definition style * ----------------------------------------------- */.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 + dd:before { content: ", ";}.lining dd:before { content: ": "; margin-left: -0.2em;}/* dictionary definition style * ----------------------------------------------- */.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) ". ";}/** * Pull Quotes * ----------- * markup: * * <aside class="pull-quote"> *		<blockquote> *			<p></p> *		</blockquote> *	</aside> * * --------------------------------------------------------------------- */.pull-quote { position: relative; padding: 2.1rem 3rem 2.1rem 0px;}.pull-quote:before, .pull-quote:after { height: 1em; position: absolute; font-size: 10rem; font-family: Arial, Sans-Serif; color: rgba(0, 0, 0, 0.15);}.pull-quote:before { content: "\201C"; top: -3.6rem; left: 0;}.pull-quote:after { content: '\201D'; bottom: 3.6rem; right: 0;}.pull-quote blockquote { margin: 0;}.pull-quote blockquote:before { content: none;}/** * Stats Tab * --------- * markup: * * <ul class="stats-tabs"> *		<li><a href="#">[value]<em>[name]</em></a></li> *	</ul> * * Extend this object into your markup. * * --------------------------------------------------------------------- */.stats-tabs { padding: 0; margin: 3rem 0;}.stats-tabs li { display: inline-block; margin: 0 1.5rem 3rem 0; padding: 0 1.5rem 0 0; border-right: 1px solid rgba(13, 10, 11, 0.15);}.stats-tabs li:last-child { margin: 0; padding: 0; border: none;}.stats-tabs li a { display: inline-block; font-size: 2.5rem; font-family: "montserrat-semibold", sans-serif; border: none; color: #151515;}.stats-tabs li a:hover { color: #862121;}.stats-tabs li a em { display: block; margin: .6rem 0 0 0; font-size: 1.4rem; font-family: "montserrat-regular", sans-serif; color: #6c6c6c;}/* ------------------------------------------------------------------- * ## skillbars - (_skillbars.scss) * ------------------------------------------------------------------- */.skill-bars { list-style: none; margin: 3rem 0 2rem;}.skill-bars li { height: .6rem; background: #c9c9c9; width: 100%; margin-bottom: 4rem; padding: 0; position: relative; clear: both;}.skill-bars li strong { position: absolute; left: 0; top: -2.5rem; font-family: "montserrat-extrabold", sans-serif; color: #0D0A0B; text-transform: uppercase; letter-spacing: .2rem; font-size: 1.3rem; line-height: 2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 85%;}.skill-bars li .progress { background: #000000; background-image: linear-gradient(to right, #191A3F, #2d462c); position: relative; height: 100%;}.skill-bars li .progress span { position: absolute; right: 0; top: -2.8rem; display: block; font-family: "montserrat-regular", sans-serif; color: #FFFFFF; font-size: 1rem; line-height: 1; background: #000000; padding: .5rem .5rem; border-radius: 3px; z-index: 10;}.skill-bars li .progress span::after { position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid #000000; content: "";}.skill-bars li .percent5 { width: 5%;}.skill-bars li .percent10 { width: 10%;}.skill-bars li .percent15 { width: 15%;}.skill-bars li .percent20 { width: 20%;}.skill-bars li .percent25 { width: 25%;}.skill-bars li .percent30 { width: 30%;}.skill-bars li .percent35 { width: 35%;}.skill-bars li .percent40 { width: 40%;}.skill-bars li .percent45 { width: 45%;}.skill-bars li .percent50 { width: 50%;}.skill-bars li .percent55 { width: 55%;}.skill-bars li .percent60 { width: 60%;}.skill-bars li .percent65 { width: 65%;}.skill-bars li .percent70 { width: 70%;}.skill-bars li .percent75 { width: 75%;}.skill-bars li .percent80 { width: 80%;}.skill-bars li .percent85 { width: 85%;}.skill-bars li .percent90 { width: 90%;}.skill-bars li .percent95 { width: 95%;}.skill-bars li .percent100 { width: 100%;}/* =================================================================== * # common and reusable theme styles - (_common-styles.scss) * * ------------------------------------------------------------------- */.wide { max-width: 1400px;}.narrow { max-width: 800px;}/* ------------------------------------------------------------------- * ## section intro - (_common-styles.scss) * ------------------------------------------------------------------- */.section-intro { text-align: center; position: relative;}.section-intro h1 { font-family: "librebaskerville-bold", serif; font-size: 4.8rem; line-height: 1.375; margin-top: 0;}.section-intro h3 { font-family: "montserrat-semibold", sans-serif; font-size: 2rem; color: #d82f11; text-transform: uppercase; letter-spacing: .15rem; margin-top: 0; margin-bottom: 0;}.section-intro.has-bottom-sep { padding-bottom: 1.5rem; position: relative;}.section-intro.has-bottom-sep::after { display: inline-block; height: 1px; width: 240px; background-color: rgba(0, 0, 0, 0.1); text-align: center;}/* ------------------------------------------------------------------- * responsive: * section-intro * ------------------------------------------------------------------- */@media only screen and (max-width: 800px) { .section-intro h1 { font-size: 4.2rem; } .section-intro h3 { font-size: 1.8rem; }}@media only screen and (max-width: 600px) { .section-intro h1 { font-size: 3.6rem; } .section-intro h3 { font-size: 1.7rem; }}@media only screen and (max-width: 400px) { .section-intro h1 { font-size: 3.3rem; } .section-intro h3 { font-size: 1.6rem; }}/* =================================================================== * # projects - (_site-layout.scss) * * ------------------------------------------------------------------- */ .projects { /* Remove fixed height if it exists */ /* height: 500px; */ /* Add automatic height to accommodate all content */ height: auto; /* Add some space between sections */ margin-bottom: 50px; }/* =================================================================== * # header styles - (_site-layout.scss) * * ------------------------------------------------------------------- */.s-header { width: 100%; height: 72px; background-color: transparent; position: absolute; top: 0; z-index: 500;}.s-header.offset { -webkit-transform: translate3d(0, -100%, 0); -ms-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}.s-header.scrolling { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}.s-header.sticky { position: fixed; top: 0; background-color: #000000 !important; opacity: 0; visibility: hidden; z-index: 600;}.s-header.sticky .header-logo a { margin: 0;}.s-header.sticky .header-nav-wrap { top: 0;}.s-header.sticky.scrolling { opacity: 1; visibility: visible;}/* ------------------------------------------------------------------- * ## header logo - (_site-layout.css) * ------------------------------------------------------------------- */.header-logo { display: inline-block; position: absolute; margin: 0; padding: 10px; left: 220px; top: 65px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 501;}.header-logo a { display: block; margin: 0; padding: 0; outline: 0; border: none; width: 80px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}/* ------------------------------------------------------------------- * ## mobile menu toggle - (_site-layout.css) * ------------------------------------------------------------------- */.header-menu-toggle { display: none; position: absolute; right: 29px; top: 18px; height: 42px; width: 42px; line-height: 42px; font-family: "montserrat-regular", sans-serif; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .2rem; color: rgba(255, 255, 255, 0.5); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}.header-menu-toggle:hover, .header-menu-toggle:focus { color: #FFFFFF;}.header-menu-toggle span { display: block; width: 24px; height: 2px; margin-top: -1px; position: absolute; left: 9px; top: 50%; right: auto; bottom: auto; background-color: white; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; font: 0/0 a; text-shadow: none; color: transparent;}.header-menu-toggle span::before, .header-menu-toggle span::after { content: ''; width: 100%; height: 100%; background-color: inherit; position: absolute; left: 0; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}.header-menu-toggle span::before { top: -9px;}.header-menu-toggle span::after { bottom: -9px;}.s-header.sticky .header-menu-toggle { top: 12px;}.header-menu-toggle.is-clicked span { background-color: rgba(255, 255, 255, 0); -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;}.header-menu-toggle.is-clicked span::before, .header-menu-toggle.is-clicked span::after { background-color: white;}.header-menu-toggle.is-clicked span::before { top: 0; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg);}.header-menu-toggle.is-clicked span::after { bottom: 0; -webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg);}/* ------------------------------------------------------------------- * ## navigation - (_site-layout.scss) * ------------------------------------------------------------------- */.header-nav-wrap { font-family: "montserrat-bold", sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .25rem; position: absolute; top: 9px; right: 50px;}.header-nav { display: inline-block; list-style: none; margin: 0; height: 72px;}.header-nav li { display: inline-block; padding-left: 0; margin-right: 2rem;}.header-nav li a { display: block; line-height: 72px; color: #FFFFFF;}.header-nav li.current a { font-family: "montserrat-extrabold", sans-serif; color: #da3b0b;}/* ------------------------------------------------------------------- * responsive: * header * ------------------------------------------------------------------- */@media only screen and (max-width: 800px) { .header-logo { left: 40px; } .header-nav-wrap { display: none; height: auto; width: 100%; right: auto; top: 0; left: 0; background-color: #000000; padding: 120px 40px 21px; } .header-nav-wrap .header-nav { display: block; height: auto; margin: 0 0 4.2rem 0; border-top: 1px solid rgba(255, 255, 255, 0.07); } .header-nav-wrap .header-nav li { display: block; margin: 0; padding: 0; border-bottom: 1px dotted rgba(255, 255, 255, 0.07); } .header-nav-wrap .header-nav li a { padding: 18px 0; line-height: 18px; } .header-menu-toggle { display: block; }}/* ------------------------------------------------------------------- * make sure the menu is visible on larger screens * ------------------------------------------------------------------- */@media only screen and (min-width: 801px) { .header-nav-wrap { display: block !important; }}/* =================================================================== * # home - (_site-layout.scss) * * ------------------------------------------------------------------- */.s-home { width: 100%; height: 100%; min-height: 786px; background-color: transparent; position: relative; display: table;}.scroll-icon { display: block; width: 30px; height: 50px; border: 2px solid #fff; border-radius: 50px; padding: 10px; cursor: pointer; position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); } .scroll-icon::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: #fff; border-radius: 50%; animation: scroll-down 2s infinite; } @keyframes scroll-down { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(15px); } }.s-home .shadow-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .8; background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%); background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%); background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000', GradientType=0);}.s-home .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .5; background-color: #111111;}.no-js .s-home { background: #0D0A0B;}/* ------------------------------------------------------------------- * ## home content - (_site-layout.scss) * ------------------------------------------------------------------- */.home-content { display: table-cell; width: 100%; height: 100%; vertical-align: bottom; padding-bottom: 19.2rem; position: relative;}.home-content h2 { font-family: "montserrat-bold", sans-serif; font-size: 1.8rem; color: #da5214; text-transform: uppercase; letter-spacing: .5rem;}.home-content h1 { font-family: "librebaskerville-bold", serif; color: #FFFFFF; font-size: 6rem; line-height: 1.35; margin-top: 0;}.home-content__main { padding-right: 300px; position: relative;}.home-content__buttons { position: absolute; text-align: center;}.work-content__buttons { margin-top: 5rem; text-align: center;}.home-content__buttons .btn { display: block; width: 210px; border-color: #FFFFFF; color: #FFFFFF; margin: 1.5rem 0 0 0; letter-spacing: .25rem; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}.home-content__buttons .btn:hover, .home-content__buttons .btn:focus { background: #FFFFFF !important; color: #000000;}.home-content__scroll { position: absolute; left: .6rem; bottom: -13.2rem;}.home-content__scroll a { font-family: "montserrat-semibold", sans-serif; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .3rem; color: #FFFFFF; position: relative; display: inline-block; line-height: 3rem; padding-right: 2rem;}.home-content__scroll a::after { border-bottom: 2px solid #922424; border-right: 2px solid #922424; content: ''; display: block; height: 8px; width: 8px; margin-top: -7px; pointer-events: none; position: absolute; right: 0; top: 50%; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;}/* ------------------------------------------------------------------- * ## home social - (_site-layout.scss) * ------------------------------------------------------------------- */.home-social { font-family: "montserrat-bold", sans-serif; list-style: none; margin: 0; padding-bottom: 18rem; position: absolute; bottom: 0; right: 40px;}.home-social::after { display: block; content: ""; height: 17.4rem; width: 1px; background-color: rgba(255, 255, 255, 0.08); position: absolute; bottom: 0; right: .75rem;}.home-social a { color: white; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}.home-social li { position: relative; height: 3.6rem;}.home-social i, .home-social span { position: absolute; top: 0; line-height: 3.6rem; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}.home-social i { font-size: 1.8rem; right: 0; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7);}.home-social span { color: rgb(216, 185, 44); right: 3.6rem; font-size: 1.3rem; opacity: 0; visibility: hidden; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%;}.home-social li:hover span { opacity: 1; visibility: visible; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}.home-social li:hover i { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}/* animate .home-content__main * ------------------------------------------------------------------- */html.ss-preload .home-content__main { opacity: 0;}html.ss-loaded .home-content__main { animation-duration: 2s; -webkit-animation-name: fadeIn; animation-name: fadeIn;}html.no-csstransitions .home-content__main { opacity: 1;}/* ------------------------------------------------------------------- * ## home animations - (_site-layout.scss) * ------------------------------------------------------------------- *//* bounce */@-webkit-keyframes bounce { 0%, 100% { -webkit-transform: translate3d(0, -30px, 0); -ms-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 50% { -webkit-transform: translate3d(0, -4px, 0); -ms-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); }}@keyframes bounce { 0%, 100% { -webkit-transform: translate3d(0, -30px, 0); -ms-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 50% { -webkit-transform: translate3d(0, -4px, 0); -ms-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); }}/* fade in */@-webkit-keyframes fadeIn { from { opacity: 0; -webkit-transform: translate3d(0, -150%, 0); -ms-transform: translate3d(0, -150%, 0); transform: translate3d(0, -150%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }}@keyframes fadeIn { from { opacity: 0; -webkit-transform: translate3d(0, -150%, 0); -ms-transform: translate3d(0, -150%, 0); transform: translate3d(0, -150%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }}/* fade out */@-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -150%, 0); -ms-transform: translate3d(0, -150%, 0); transform: translate3d(0, -150%, 0); }}@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -150%, 0); -ms-transform: translate3d(0, -150%, 0); transform: translate3d(0, -150%, 0); }}/* ------------------------------------------------------------------- * responsive: * home * ------------------------------------------------------------------- */@media only screen and (max-width: 1500px) { .home-content h1 { font-size: 5.2rem; }}@media only screen and (max-width: 1200px) { .home-content h1 { font-size: 5rem; } .home-content br { display: none; } .home-content__main { max-width: 800px; } .home-content__buttons { right: 30px; }}@media only screen and (max-width: 1000px) { .home-content h1 { font-size: 4.8rem; } .home-content__main { padding-right: 40px; max-width: 680px; } .home-content__buttons { position: static; text-align: left; } .home-content__buttons .btn { display: inline-block; margin-right: .9rem; }}@media only screen and (max-width: 800px) { .home-content h3 { font-size: 1.6rem; padding-left: 50px; margin-left: -10px; } .home-content h3::before { width: 40px; } .home-content h1 { font-size: 4.4rem; } .home-content__main { max-width: 500px; }}@media only screen and (max-width: 600px) { .home-content { padding-bottom: 15rem; } .home-content h1 { font-size: 4.2rem; } .home-content__main { max-width: 380px; padding: 0; } .home-content__scroll { bottom: -9rem; } .home-social { padding-bottom: 10.8rem; } .home-social::after { height: 10.2rem; }}@media only screen and (max-width: 500px) { .s-home { min-height: 654px; } .home-content h3 { font-size: 1.5rem; } .home-content h1 { font-size: 3.8rem; } .home-content__main { max-width: none; width: 85%; margin-top: 150px; }}@media only screen and (max-width: 400px) { .home-content { vertical-align: middle; } .home-content h1 { font-size: 3.5rem; } .home-content__main { width: auto; margin-left: 25px; margin-right: 25px; } .home-content__buttons .btn { width: 100%; } .home-social { display: none; }}/* =================================================================== * # about - (_site-layout.scss) * * ------------------------------------------------------------------- */.s-about { padding-top: 15rem; padding-bottom: 9rem; background-color: #FFFFFF; position: relative;}.about-content { margin-bottom: 3rem;}.about-content .left { padding-right: 40px;}.about-content .right { padding-left: 40px;}/* ------------------------------------------------------------------- * ## timeline - (_site-layout.scss) * ------------------------------------------------------------------- */.timeline { position: relative; text-align: left; margin-top: 3.6rem;}.timeline::before { content: ""; display: block; width: 1px; height: 100%; background-color: rgba(0, 0, 0, 0.1); position: absolute; left: 2rem; top: 0;}.timeline__block { position: relative; padding-left: 8rem;}.timeline__bullet { background: #0D0A0B; height: 1.5rem; width: 1.5rem; border-radius: 50%; margin-left: -0.75rem; box-shadow: 0 0 0 9px #E9E9E9; position: absolute; left: 2rem; top: .3rem;}.timeline__header .timeline__timeframe { font-size: 1.4rem; line-height: 1.5; text-transform: uppercase; letter-spacing: .15rem; color: rgba(0, 0, 0, 0.5); margin-bottom: .9rem; font-family: "montserrat-bold", sans-serif;}.timeline__header h3 { line-height: 1.25; margin: 0 0 .3rem 0;}.timeline__header h5 { margin-top: 0;}.timeline__desc p { margin: 0; padding-bottom: 3rem;}/* ------------------------------------------------------------------- * responsive: * about * ------------------------------------------------------------------- */@media only screen and (max-width: 1000px) { .about-content .left { padding-right: 30px; } .about-content .right { padding-left: 30px; }}@media only screen and (max-width: 900px) { .about-content .left { padding-right: 20px; } .about-content .right { padding-left: 20px; }}@media only screen and (max-width: 800px) { .about-content { max-width: 600px; } .about-content .left { padding-right: 15px; } .about-content .right { padding-left: 15px; } .about-content .right .timeline { margin-top: 0; } .about-content .left > h3, .about-content .right > h3 { text-align: center; }}@media only screen and (max-width: 600px) { .about-content .left { padding-right: 10px; } .about-content .right { padding-left: 10px; } .timeline__block { padding-left: 6rem; }}@media only screen and (max-width: 400px) { .about-content .left { padding-right: 0; } .about-content .right { padding-left: 0; } .timeline__block { padding-left: 5.5rem; }}/* =================================================================== * # works - (_site-layout.scss) * * ------------------------------------------------------------------- */.s-works { padding-top: 15rem; padding-bottom: 1.6rem; background-color: #f1f1f1; position: relative;}/* projects */.s-projects { padding-top: 15rem; padding-bottom: 1.6rem; background-color: #f1f1f1; position: relative;}/* ------------------------------------------------------------------- * ## bricks/masonry - (_site-layout.scss) * ------------------------------------------------------------------- */.masonry-wrap { margin-top: 4.8rem; max-width: none; width: 1600px;}.masonry:after { content: ""; display: table; clear: both;}.masonry .grid-sizer, .masonry__brick { width: 400px;}.masonry__brick { float: left; padding: 0;}.item-folio { position: relative; overflow: hidden;}.item-folio__thumb img { vertical-align: top; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}.item-folio__thumb .shadow-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .8; background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%); background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%); background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000', GradientType=0);}.item-folio__thumb a { display: block;}.item-folio__thumb a::before { display: block; background-color: rgba(0, 0, 0, 0.8); content: ""; opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; z-index: 1;}.item-folio__thumb a::after { content: "..."; font-family: georgia, serif; font-size: 3rem; display: block; height: 30px; width: 30px; line-height: 30px; margin-left: -15px; margin-top: -15px; position: absolute; left: 50%; top: 50%; text-align: center; color: #FFFFFF; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); z-index: 1;}.item-folio__text { position: absolute; left: 0; bottom: 3rem; padding: 0 3rem; z-index: 2;}.item-folio__title { color: #FFFFFF; font-family: "montserrat-semibold", sans-serif; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .2rem; margin: 0;}.item-folio__cat { color: rgba(255, 255, 255, 0.5); font-family: "montserrat-regular", sans-serif; font-size: 1.5rem; margin-bottom: 0;}.item-folio__caption { display: none;}.item-folio__project-link { display: block; color: #FFFFFF; box-shadow: 0 0 0 1px #FFFFFF; border-radius: 50%; height: 4.2rem; width: 4.2rem; text-align: center; z-index: 500; position: absolute; top: 3rem; left: 3rem; opacity: 0; visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}.item-folio__project-link i { font-size: 1.8rem; line-height: 4.2rem;}.item-folio__project-link::before { display: block; content: ""; height: 1px; width: 3rem; background-color: rgba(255, 255, 255, 0.1); position: absolute; top: 50%; left: -3rem;}.item-folio__project-link:hover, .item-folio__project-link:focus, .item-folio__project-link:active { background-color: #FFFFFF; color: #000000;}/* on hover */.item-folio:hover .item-folio__thumb a::before { opacity: 1; visibility: visible;}.item-folio:hover .item-folio__thumb a::after { opacity: 1; visibility: visible; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}.item-folio:hover .item-folio__thumb img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}.item-folio:hover .item-folio__project-link { opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}/* ------------------------------------------------------------------- * responsive: * works * ------------------------------------------------------------------- */@media only screen and (max-width: 1700px) { .masonry-wrap { width: 1400px; } .masonry .grid-sizer, .masonry__brick { width: 350px; }}@media only screen and (max-width: 1500px) { .masonry-wrap { width: 1200px; } .masonry .grid-sizer, .masonry__brick { width: 400px; }}@media only screen and (max-width: 1300px) { .masonry-wrap { width: 999px; } .masonry .grid-sizer, .masonry__brick { width: 333px; }}@media only screen and (max-width: 1099px) { .masonry-wrap { width: 90%; max-width: 800px; } .masonry .grid-sizer, .masonry__brick { width: 50%; }}@media only screen and (max-width: 600px) { .masonry .grid-sizer, .masonry__brick { width: 100%; }}@media only screen and (max-width: 400px) { .masonry-wrap { width: auto; }}/* =================================================================== * # cta - (_site-layout.scss) * * ------------------------------------------------------------------- */.s-cta { margin-top: -9rem; padding-top: 0; padding-bottom: 9rem; background-color: #FFFFFF; position: relative; z-index: 1;}.cta__content { border-top: 1px solid rgba(0, 0, 0, 0.1); text-align: center;}.cta__content h2 a { color: #0D0A0B;}.cta__content span { color: #191A3F;}/* =================================================================== * # stats - (_site-layout.scss) * * ------------------------------------------------------------------- */.s-stats { background-color: #f1f1f1; text-align: center;}.stats__col { padding: 7.8rem 2rem 6.6rem; position: relative; overflow: hidden; white-space: nowrap;}.stats__upsign { position: absolute; top: 3rem; left: 3rem; text-align: left;}.stats__upsign i { font-size: 2.1rem; line-height: 1; color: #cf3e3e; color: #008C2C;}.stats__count { font-family: "librebaskerville-bold", serif; font-size: 7.2rem; line-height: 1; color: #0D0A0B; padding-bottom: 1.5rem; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.stats__count::after { content: ""; display: block; height: 1px; width: 100px; background-color: rgba(0, 0, 0, 0.1); position: absolute; bottom: 0; left: 50%; margin-left: -50px;}.stats h4 { font-family: "montserrat-semibold", sans-serif; margin-top: 1.8rem; color: rgba(0, 0, 0, 0.4); font-size: 1.8rem; position: relative;}.stats__col--highlight { background: #111111 url("../images/count-bg.jpg"); background-size: 175px 175px; position: relative;}.stats__col--highlight::before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .6; background-image: linear-gradient(to bottom, rgba(13, 10, 11, 0) 0%, #0D0A0B 100%);}.stats__col--highlight .stats__count { color: #FFFFFF;}.stats__col--highlight .stats__count::after { background-color: #862121;}.stats__col--highlight h4 { color: rgba(255, 255, 255, 0.4);}/* ------------------------------------------------------------------- * responsive: * stats * ------------------------------------------------------------------- */@media only screen and (max-width: 1200px) { .stats__count { font-size: 5.8rem; } .stats h4 { font-size: 1.6rem; }}@media only screen and (max-width: 1000px) { .stats__count { font-size: 5rem; } .stats h4 { font-size: 1.4rem; }}@media only screen and (max-width: 800px) { .stats__count { font-size: 7.2rem; } .stats h4 { font-size: 1.8rem; }}@media only screen and (max-width: 600px) { .s-stats { padding-top: 6rem; padding-bottom: 6rem; } .stats__col { padding: 4.8rem 2rem 4.2rem; }}/* =================================================================== * # contact - (_site-layout.scss) * * ------------------------------------------------------------------- */.s-contact { background-color: #151515; background-repeat: no-repeat; background-position: center, center; padding-top: 13.2rem; color: rgba(255, 255, 255, 0.5); position: relative;}.s-contact .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .75; background-color: #070606;}.s-contact .section-intro h1 { color: #FFFFFF;}.s-contact .section-intro p { color: rgba(255, 255, 255, 0.5);}.s-contact .section-intro.has-bottom-sep::after { background-color: rgba(255, 255, 255, 0.1);}.s-contact .form-field { position: relative;}.s-contact .form-field:after { content: ""; display: table; clear: both;}.s-contact .form-field label { font-family: "montserrat-semibold", sans-serif; font-size: 1.1rem; line-height: 2.4rem; position: absolute; bottom: -0.3rem; right: .6rem; text-transform: uppercase; letter-spacing: .1rem; padding: 0 2rem; margin: 0; color: #FFFFFF; background: #e95511;}.s-contact .form-field label::after { content: ""; position: absolute; left: -5px; top: 50%; margin-top: -6px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #e95511;}.contact__main { max-width: 900px; position: relative;}.contact__main h4 { color: #FFFFFF;}.contact__infos { font-size: 1.5rem;}.contact__form { padding-right: 40px;}.contact__form input[type="email"], .contact__form input[type="number"], .contact__form input[type="text"], .contact__form input[type="tel"], .contact__form input[type="url"], .contact__form textarea { background-color: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: .9rem; color: rgba(255, 255, 255, 0.75);}.contact__form input[type="email"]:focus, .contact__form input[type="number"]:focus, .contact__form input[type="text"]:focus, .contact__form input[type="tel"]:focus, .contact__form input[type="url"]:focus, .contact__form textarea:focus { color: white; border-bottom: 1px solid white;}.contact__form button { margin-top: 4.2rem; background-color: #db5314;}.message-warning, .message-success { display: none; background: #0D0A0B; font-size: 1.5rem; line-height: 2; padding: 3rem; margin-bottom: 3.6rem; width: 100%;}.message-warning { color: #ff6163;}.message-success { color: #008C2C;}.message-warning i, .message-success i { margin-right: 10px; font-size: 1.2rem;}/* form loader */.submit-loader { display: none; position: relative; left: 0; top: 1.8rem; width: 100%; text-align: center; margin-bottom: 4.2rem;}.submit-loader .text-loader { display: none; font-family: "montserrat-bold", sans-serif; font-size: 1.4rem; color: #FFFFFF; letter-spacing: .2rem; text-transform: uppercase;}.oldie .submit-loader .s-loader { display: none;}.oldie .submit-loader .text-loader { display: block;}/* --------------------------------------------------------------- * loader animation - (_site-layout.scss) * --------------------------------------------------------------- */.s-loader { margin: 1.2rem auto 3rem; width: 70px; text-align: center; -webkit-transform: translateX(0.45rem); -ms-transform: translateX(0.45rem); transform: translateX(0.45rem);}.s-loader > div { width: 9px; height: 9px; background-color: #FFFFFF; border-radius: 100%; display: inline-block; margin-right: .9rem; -webkit-animation: bouncedelay 1.4s infinite ease-in-out both; animation: bouncedelay 1.4s infinite ease-in-out both;}.s-loader .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s;}.s-loader .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s;}@-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }}@keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }}.profile-pic { position: relative; width: 150px; height: 150px; border-radius: 100%;}/* ------------------------------------------------------------------- * responsive: * contact * ------------------------------------------------------------------- */@media only screen and (max-width: 800px) { .contact__form { padding-right: 15px; } .contact__infos { padding-top: 3rem; }}@media only screen and (max-width: 600px) { .contact__form { padding-right: 10px; }}@media only screen and (max-width: 400px) { .contact__form { padding-right: 0; }}/* =================================================================== * # footer - (_site-layout.scss) * * ------------------------------------------------------------------- */footer { font-family: "montserrat-regular", sans-serif; font-size: 14px; padding: 6.6rem 0 4.2rem; text-align: center; color: rgba(255, 255, 255, 0.2);}footer a, footer a:visited { color: #862121;}footer a:hover, footer a:focus { color: #FFFFFF;}.footer-logo { display: inline-block;}.footer-site-logo { display: block; width: 130px;}.footer-social { list-style: none; margin-top: 1rem; margin-left: 0; font-family: "montserrat-regular", sans-serif; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .3rem;}.footer-social:after { content: ""; display: table; clear: both;}.footer-social li { display: inline-block; padding-left: 0; margin-right: .9rem; line-height: 3.9rem; vertical-align: middle;}.footer-social li::after { content: "|"; color: rgba(255, 255, 255, 0.15); padding-left: .9rem;}.footer-social li i { font-size: 1.7rem; line-height: 2rem; vertical-align: middle;}.footer-social li span { margin-left: .6rem;}.footer-social li a { color: #FFFFFF;}.footer-social li:last-child { margin-right: 0;}.footer-social li:last-child::after { display: none;}.footer-bottom { margin-top: 2rem; text-align: center;}.footer-bottom .copyright span { display: inline-block;}.footer-bottom .copyright span::after { content: "|"; display: inline-block; padding: 0 1rem 0 1.2rem; color: rgba(255, 255, 255, 0.1);}.footer-bottom .copyright span:last-child::after { display: none;}/* ------------------------------------------------------------------- * ## go to top * ------------------------------------------------------------------- */.go-top { position: fixed; bottom: 0; right: 0; z-index: 600; display: none;}.go-top a, .go-top a:visited { text-decoration: none; border: 0 none; display: block; height: 60px; width: 60px; line-height: 60px; text-align: center; background: black; color: rgba(255, 255, 255, 0.6); text-align: center; text-transform: uppercase; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}.go-top a i, .go-top a:visited i { font-size: 12px; line-height: inherit;}.go-top a:hover, .go-top a:focus { color: #FFFFFF;}/* ------------------------------------------------------------------- * responsive: * footer * ------------------------------------------------------------------- */@media only screen and (max-width: 600px) { .footer-social li { margin-right: 1.8rem; } .footer-social li span, .footer-social li::after { display: none; } .footer-social li i { font-size: 2.4rem; } .footer-bottom { padding-bottom: .6rem; } .footer-bottom .copyright span { display: block; } .footer-bottom .copyright span::after { display: none; }}@media only screen and (max-width: 400px) { .footer-site-logo { width: 100px; } .footer-social li { margin-right: 1.2rem; } .footer-social li i { font-size: 2.2rem; }}/* ------------------------------------------------------------------ *//* 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; }/* =================================================================== * # custom spacing adjustments * =================================================================== *//* Reduce section gaps and padding */.s-about { padding-top: 4rem !important; padding-bottom: 3rem !important;}.s-stats { padding-top: 3rem !important; padding-bottom: 3rem !important;}.s-works { padding-top: 3rem !important; padding-bottom: 3rem !important;}.s-projects { padding-top: 3rem !important; padding-bottom: 3rem !important;}.s-contact { padding-top: 3rem !important;}/* Remove default section margins */section { margin-bottom: 0 !important;}/* Reduce padding for section intros */.section-intro { padding-bottom: 2rem !important;}/* Reduce timeline spacing */.timeline__block { margin-bottom: 2rem !important;}/* Reduce row margins */.row { margin-bottom: 1rem !important;}/* Reduce about content spacing */.about-content { padding-top: 2rem !important;}/* Reduce contact form spacing */.contact__main { padding-top: 2rem !important;}/* Reduce footer spacing */footer { padding-top: 3rem !important;}/* Reduce home section height for better flow */.s-home { min-height: 80vh !important;}/* Tighten up skill bars and fix overlapping */.skill-bars { list-style: none; margin: 3rem 0 2rem !important;}.skill-bars li { height: .6rem; background: #c9c9c9; width: 100%; margin-bottom: 4rem !important; padding: 0; position: relative; clear: both;}.skill-bars li strong { position: absolute; left: 0; top: -2.5rem; font-family: "montserrat-extrabold", sans-serif; color: #0D0A0B; text-transform: uppercase; letter-spacing: .2rem; font-size: 1.3rem; line-height: 2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 85%;}/* Reduce education section spacing */.s-stats h2 { margin-bottom: 1rem !important;}.s-stats article { margin-bottom: 1rem !important;}/* Reduce project section spacing */.s-projects .section-intro { padding-bottom: 1rem !important;}/* Reduce gap between profile image and bio/skills sections */.s-about .section-intro { padding-bottom: 1rem !important; margin-bottom: 0 !important;}.s-about .about-content { margin-top: 0 !important; padding-top: 1rem !important;}