/*! * Start Bootstrap - Creative v1.1.0 (http://startbootstrap.com/template-overviews/creative) * Copyright 2013-2016 Start Bootstrap * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE) */ .navbar-toggle { float:left; margin-left:15px; } :root { --ink: #1f2a44; --muted: #5e6678; --accent: #1f5fbf; --paper: #f7f6f2; --border: #e3e1d9; --header-fade: #eef1f6; } .text-strong { font-size:14px; color:#777; font-weight:bold; /* text-transform: uppercase; */ text-decoration: underline; } .text-italic { font-size:14px; color:#777; font-weight:200; font-style: italic; } ul{ margin: 0; padding-left: 20px; } .navbar-default .nav > li:hover .dropdown-content { display: block; } .dropdown-content a { color: black; padding: 12px 16px; /* border-bottom: 1px solid #ccc; */ text-decoration: none; display: block; font-size: 14px; } @media (min-width: 768px) { .navbar-nav { float: none; margin: 0 auto; display: inline-block; } .navbar .navbar-collapse { text-align: center; } .navbar-nav>li { padding: 0 20px; } .dropdown-content { display:none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } hr.full { display:none; } } @media (max-width: 767px) { .dropdown-content { display:none; position: static; float: none; margin-top: 0; background-color: #f9f9f9; width:auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } } /*************************************************************************************/ html, body { height: 100%; width: 100%; } body { font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; background-color: var(--paper); color: var(--ink); -webkit-tap-highlight-color: #222222; } hr { border-color: var(--accent); border-width: 3px; max-width: 50px; } hr.light { border-color: white; } hr.full { border-color: #e8e8e8; border-width: 1px; max-width: 100%; margin:10px 0; } a { -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; color: var(--accent); } a:hover, a:focus { color: #154b93; } h1, h2, h3, h4, h5, h6 { font-family: 'Source Serif 4', 'Times New Roman', serif; letter-spacing: 0.02em; } p { font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.6; margin-bottom: 10px; color: var(--muted); } span { font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.6; margin-bottom: 0px; } .bg-primary { background-color: var(--accent); } .bg-light { background-color: var(--paper); } .bg-dark { background-color: #222222; color: white; } .text-faded { color: rgba(255, 255, 255, 0.7); } .text-grey { color: #afafaf; } .text-rounded { color: #fff; padding:10px; border: 1px solid #ddd; background-color: rgba(255,255,255,0.1); border-radius: 3px; } .text-highlight { color: var(--accent); padding: 8px 10px; background-color: transparent; border: 1px solid var(--border); border-radius: 4px; } .profile-photo { max-width: 300px; margin-bottom: 20px; width: 100%; height: auto; } .experience-timeline { position: relative; margin-top: 10px; } .experience-timeline:before { content: ""; position: absolute; left: 192px; top: 0; bottom: 0; width: 1px; background: var(--border); } .experience-entry { position: relative; display: flex; gap: 24px; padding: 18px 0; } .experience-entry:before { content: ""; position: absolute; left: 186px; top: 28px; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; } .experience-meta { width: 180px; flex: 0 0 180px; text-align: right; padding-right: 12px; } .experience-meta .text-grey { margin-bottom: 6px; } .experience-org { color: var(--ink); font-weight: 600; margin: 0; } .experience-org-detail { color: var(--muted); font-size: 13px; margin: 4px 0 0; } .experience-card { flex: 1; background: #fbfbf8; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 6px; padding: 16px 18px; } .experience-role { margin: 0 0 10px; font-size: 18px; } .experience-bullets { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; } .experience-bullets li { margin-bottom: 8px; font-size: inherit; } .experience-bullets li:last-child { margin-bottom: 0; } .experience-card a { color: var(--accent); } .experience-card strong { color: var(--ink); } @media (max-width: 767px) { .experience-timeline:before, .experience-entry:before { display: none; } .experience-entry { flex-direction: column; gap: 10px; } .experience-meta { width: auto; flex: none; text-align: left; padding-right: 0; } } .publication-list .text-muted { margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 6px; background-color: #fbfbf8; } .publication-list .text-muted strong { color: var(--ink); font-weight: 600; } .publication-list .text-muted a { color: var(--accent); } .publication-list .text-muted br { content: ""; display: block; margin: 6px 0; } section { padding: 50px 0; } aside { padding: 50px 0; } .no-padding { padding: 0; } .navbar-default { background-color: #fbfbf8; border-color: var(--border); font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .navbar-default .navbar-header .navbar-brand { color: var(--accent); font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; font-weight: 700; text-transform: none; } .navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { color: #154b93; } .navbar-default .navbar-header .navbar-toggle { font-weight: 700; font-size: 16px; color: #222222; text-transform: none; } .navbar-default .nav > li > a, .navbar-default .nav > li > a:focus { text-transform: none; font-weight: 600; font-size: 15px; color: var(--ink); } .navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { color: var(--accent); } .navbar-default .nav > li.active > a, .navbar-default .nav > li.active > a:focus { color: var(--accent) !important; background-color: transparent; } .navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active > a:focus:hover { background-color: transparent; } @media (min-width: 768px) { .navbar-default { background-color: #fbfbf8; border-color: var(--border); } .navbar-default .navbar-header .navbar-brand { color: var(--accent); } .navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { color: #154b93; } .navbar-default .nav > li > a, .navbar-default .nav > li > a:focus { color: var(--ink); } .navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { color: var(--accent); } .navbar-default.affix { background-color: #fbfbf8; border-color: var(--border); } .navbar-default.affix .navbar-header .navbar-brand { color: var(--accent); font-size: 14px; } .navbar-default.affix .navbar-header .navbar-brand:hover, .navbar-default.affix .navbar-header .navbar-brand:focus { color: #154b93; } .navbar-default.affix .nav > li > a, .navbar-default.affix .nav > li > a:focus { color: var(--ink); } .navbar-default.affix .nav > li > a:hover, .navbar-default.affix .nav > li > a:focus:hover { color: var(--accent); } } header { position: relative; width: 100%; min-height: auto; background-position: center; background-color: var(--paper); background-image: linear-gradient(180deg, var(--header-fade), var(--paper)); text-align: center; color: var(--ink); } header .header-content { position: relative; text-align: center; padding: 90px 15px 20px; width: 100%; } header .header-content .header-content-inner h1 { font-weight: 700; text-transform: none; margin-top: 0; margin-bottom: 0; font-size: 36px; } header .header-content .header-content-inner hr { margin: 30px auto; } header .header-content .header-content-inner p { font-weight: 300; color: var(--muted); font-size: 16px; margin-bottom: 24px; } @media (min-width: 768px) { header { min-height: 360px; } header .header-content { position: absolute; top: 60%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 0 50px; } header .header-content .header-content-inner { max-width: 1000px; margin-left: auto; margin-right: auto; } header .header-content .header-content-inner h1 { font-size: 60px; } header .header-content .header-content-inner p { font-size: 18px; max-width: 80%; margin-left: auto; margin-right: auto; } } .section-heading { margin-top: 0; } .service-box { max-width: 400px; margin: 50px auto 0; } @media (min-width: 992px) { .service-box { margin: 20px auto 0; } } .service-box p { margin-bottom: 0; } .portfolio-box { position: relative; display: block; max-width: 650px; margin: 0 auto; } .portfolio-box .portfolio-box-caption { color: white; opacity: 0; display: block; background: rgba(240, 95, 64, 0.9); position: absolute; bottom: 0; text-align: center; width: 100%; height: 100%; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .portfolio-box .portfolio-box-caption .portfolio-box-caption-content { width: 100%; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); } .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category, .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; padding: 0 15px; } .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { text-transform: uppercase; font-weight: 600; font-size: 14px; } .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { font-size: 18px; } .portfolio-box:hover .portfolio-box-caption { opacity: 1; } .portfolio-box:focus { outline: none; } @media (min-width: 768px) { .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { font-size: 16px; } .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { font-size: 22px; } } .call-to-action h2 { margin: 0 auto 20px; } .text-primary { color: var(--accent); } .no-gutter > [class*='col-'] { padding-right: 0; padding-left: 0; } .btn-default { color: #222222; background-color: white; border-color: white; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: #222222; background-color: #f2f2f2; border-color: #ededed; } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-image: none; } .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { background-color: white; border-color: white; } .btn-default .badge { color: white; background-color: #222222; } .btn-primary { color: white; background-color: var(--accent); /* background-color: transparent; */ -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: white; background-color: #154b93; border-color: #154b93; } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-image: none; } .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { background-color: var(--accent); border-color: var(--accent); } .btn-primary .badge { color: var(--accent); background-color: white; } .btn { font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; border: none; border-radius: 6px; font-weight: 600; text-transform: none; margin-bottom:40px; } .btn-xl { padding: 15px 30px; } ::-moz-selection { color: white; text-shadow: none; background: #222222; } ::selection { color: white; text-shadow: none; background: #222222; } img::selection { color: white; background: transparent; } img::-moz-selection { color: white; background: transparent; }