| |
| @import url("https://fonts.googleapis.com/css?family=Comfortaa:400,700,300|Quattrocento"); |
| .about-tools ul li, .contact-social-icons ul a li { |
| text-align: center; } |
| |
| .centered { |
| float: none; |
| margin-left: auto; |
| margin-right: auto; } |
| |
| .break { |
| clear: both; |
| margin-top: 10px; } |
| |
| @media (min-width: 768px) { |
| .pull-right-sm { |
| float: right !important; } |
| |
| .pull-left-sm { |
| float: left !important; } } |
| @media (min-width: 992px) { |
| .pull-right-md { |
| float: right !important; } |
| |
| .pull-left-md { |
| float: left !important; } } |
| @media (min-width: 1200px) { |
| .pull-right-lg { |
| float: right !important; } |
| |
| .pull-left-lg { |
| float: left !important; } } |
| * { |
| box-sizing: border-box; } |
| |
| html { |
| position: relative; |
| height: 100%; |
| width: 100%; } |
| |
| img { |
| width: 100%; } |
| |
| body { |
| height: 100%; |
| font-family: "Comfortaa", Helvetica, Arial, sans-serif; |
| line-height: 1.4; |
| background-color: #0080ff; |
| /* Margin bottom by footer height */ |
| margin-bottom: 60px; } |
| |
| h1, .h1, |
| h2, .h2, |
| h3, .h3, |
| h4, .h4, |
| h5, .h5, |
| h6, .h6 { |
| font-family: "Comfortaa", Helvetica, Arial, sans-serif; |
| line-height: 1.4; |
| color: #07374a; } |
| |
| p { |
| font-family: "Comfortaa", sans-serif; |
| color: #ffffff; } |
| |
| a, .btn { |
| -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s; |
| transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s; |
| } |
| |
| a:hover, a:focus, a:active {text-decoration: none;} |
| |
| body > .container-fluid { |
| padding: 60px 0; } |
| |
| #portfolio > .container { |
| padding-left: 0; |
| padding-right: 0 } |
| |
| .row, |
| .container-fluid>.navbar-collapse, |
| .container-fluid>.navbar-header, |
| .container>.navbar-collapse, |
| .container>.navbar-header { |
| margin:auto; |
| } |
| |
| .container-fluid .text-muted { |
| margin: 20px 0; } |
| |
| .btn:focus, a:focus { |
| outline: none !important; } |
| |
| .navbar { |
| height: 70px; |
| background-color: transparent; |
| background: transparent; |
| border: none; |
| color: #ffffff; |
| z-index: 100; |
| margin-bottom: 0; |
| border-radius: 0; |
| -webkit-transition: background-color .2s ease 0s; |
| transition: background-color .2s ease 0s; } |
| |
| .navbar-brand { |
| display: none; |
| margin-top: 10px; |
| color: #ffffff; |
| font-weight: 400; } |
| |
| .navbar-default .navbar-nav > li > a { |
| color: #ffffff; |
| font-weight: 500; |
| font-size: 1em; |
| text-transform: lowercase; |
| margin: 9px 5px 5px 5px; |
| border: 1px solid transparent; |
| border-radius: 5px; |
| -webkit-transition: color .2s ease 0s, border-color .2s ease 0s; |
| transition: color .2s ease 0s, border-color .2s ease 0s; } |
| .navbar-default .navbar-nav > li:last-child > a {margin-right: 0} |
| .navbar-default .navbar-nav > li > a:hover { |
| color: #ffffff; |
| border: 1px solid #ffffff; } |
| .navbar-default .navbar-nav > li > a:active, |
| .navbar-default .navbar-nav > li > a:focus, |
| .navbar.solid .navbar-nav > li > a:active, .navbar.solid .navbar-nav > li > a:focus { |
| color: rgba(255,255,255,0.8); |
| border: 1px solid rgba(255,255,255,0.8); } |
| .navbar-default .navbar-nav > li > a:visited { |
| color: #ffffff; |
| text-decoration: none; } |
| .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover { |
| background-color: transparent; |
| color: #ffffff; } |
| .navbar-default .navbar-nav > .active > a:focus, |
| .navbar.solid .navbar-nav > li > a:active, |
| .navbar.solid .navbar-nav > li > a:focus { |
| background-color: transparent; |
| color: rgba(255,255,255,0.8); } |
| .navbar-toggle {margin-right:0;} |
| .navbar-default .navbar-toggle { |
| border-color: #ffffff; } |
| .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { |
| background-color: #07374a; |
| } |
| .navbar-default .navbar-toggle .icon-bar { |
| color: #ffffff; |
| background-color: #ffffff; } |
| .navbar-default .navbar-collapse.collapse.in ul, .navbar-collapse { |
| background-color: #07374a; |
| } |
| .navbar-collapse.collapse.collapsing { |
| background-color: #07374a; |
| } |
| .navbar-default .navbar-toggle .icon-bar { |
| color: #ffffff; |
| background-color: #ffffff; } |
| .navbar-default .navbar-collapse.collapse.in ul { |
| background-color: #07374a; |
| } |
| .navbar-collapse.collapse.collapsing { |
| background-color: #07374a; |
| } |
| |
| .navbar-collapse.collapse.show { |
| background-color: #07374a; |
| -webkit-transition: background-color .2s ease 0s; |
| transition: background-color .2s ease 0s; |
| } |
| |
| /* Solid class attached on scroll past first section */ |
| .navbar.solid { |
| background-color: #07374a; |
| -webkit-transition: background-color .2s ease 0s; |
| transition: background-color .2s ease 0s; |
| box-shadow: 0 0 4px rgba(7, 55, 74, 0.2); } |
| .navbar.solid .navbar-brand { |
| display: inline-block; |
| color: #ffffff; |
| -webkit-transition: color .2s ease 0s, border-color .2s ease 0s; |
| transition: color .2s ease 0s, border-color .2s ease 0s; } |
| .navbar.solid .navbar-nav > li > a { |
| color: #ffffff; |
| -webkit-transition: color .2s ease 0s, border-color .2s ease 0s; |
| transition: color .2s ease 0s, border-color .2s ease 0s; } |
| |
| .cover { |
| padding: 10% 0 10% 0; } |
| .cover.top { |
| padding: 10vh 0 15vh 0; |
| height: 100vh; |
| display: -webkit-box; |
| display: -ms-flexbox; |
| display: flex; |
| background-color: #0080ff; } |
| .cover.bottom { |
| padding: 10% 0 10% 0; } |
| |
| .headline { |
| padding-top: 6.25em; } |
| body > div.container-fluid > div.row.cover.top > div > .row > .headline > img { |
| max-width: 100%; |
| width: auto; |
| margin: 0 auto; |
| display: block; } |
| @media screen and (min-width: 768px) { |
| .headline { |
| padding-top: 3.75em; } } |
| @media screen and (min-width: 992px) { |
| .headline { |
| padding-top: 1.5625em; } } |
| @media screen and (min-width: 1200px) { |
| .headline { |
| padding-top: 0px; } } |
| |
| #about { |
| background-color: #07374a; } |
| #about h2 { |
| color: #0080ff; } |
| |
| .profile-img { |
| margin-bottom: 15px; |
| width: 120px; } |
| |
| .about, .about-info, .about-tools, .about-last { |
| padding: 4% 6% 1% 6%; |
| font-size: 1.25em; } |
| .about-tools { |
| padding-top: 4.375em; |
| font-weight: 700; |
| font-size: 1.25em; } |
| @media screen and (min-width: 992px) { |
| .about-tools { |
| padding-top: 5.625em; } } |
| .about-tools ul:first-child { |
| padding-left: 0px; } |
| .about-tools ul { |
| color: #0080ff; |
| list-style: none; } |
| .about-tools ul li { |
| padding-top: 0.75em; } |
| .about-last { |
| padding-top: 3.125em; |
| padding-bottom: 0; |
| font-size: 1.125em; } |
| @media screen and (min-width: 992px) { |
| .about-last { |
| padding-top: 0; } } |
| .about-last p { |
| color: #0080ff; } |
| |
| #portfolio { |
| background-color: #0080ff; } |
| #portfolio h2 { |
| padding-bottom: 1.25em; } |
| |
| @media screen and (min-width: 768px) { |
| .portfolio-projects { |
| margin-top: 0.625em; } } |
| .portfolio-projects--title { |
| margin-top: 0.9375em; } |
| @media screen and (min-width: 768px) { |
| .portfolio-projects--title { |
| margin-top: 20%; } } |
| @media screen and (min-width: 1200px) { |
| .portfolio-projects--title { |
| margin-top: 5%; } |
| .portfolio-projects .col-lg-6 + .col-lg-6 + .col-lg-6 {margin-top:40px} } |
| @media screen and (min-width: 768px) { |
| .portfolio-projects--desc { |
| margin-top: 10%; |
| margin-bottom: 10%; } } |
| .portfolio-projects--btn { |
| background: transparent; |
| color: #07374a; |
| border: 1px solid #07374a; |
| border-radius: 5px; |
| margin-bottom: 1.25em; } |
| .portfolio-projects--btn:hover { |
| background: #07374a; |
| color: #ffffff; } |
| .portfolio-projects--btn:focus, |
| .portfolio-projects--btn:active { |
| background: #052a38; |
| color: #ffffff; } |
| .portfolio-projects--image { |
| margin-bottom: 1.875em; |
| padding-top: 5%; } |
| |
| #contact { |
| background-color: #07374a; } |
| #contact h2 { |
| color: #0080ff; } |
| |
| .contact-social-icons p { |
| color: #0080ff; } |
| .contact-social-icons ul a { |
| color: #0080ff; |
| list-style: none; } |
| .contact-social-icons ul a:hover, |
| .team-links-list a:hover { |
| color: #ffffff; } |
| .contact-social-icons ul a:focus, |
| .contact-social-icons ul a:active, |
| .team-links-list a:focus, |
| .team-links-list a:active { |
| color: rgba(255,255,255,0.8); } |
| .contact-social-icons ul a li { |
| display: inline-block; |
| padding: 2%; } |
| |
| .footer { |
| bottom: 0; |
| width: 100%; |
| /* Set the fixed height of the footer here */ |
| height: 30px; |
| background-color: #07374a; |
| color: #ffffff; } |
| |
| #scrollIcon, #scrollTopIcon { |
| margin-top: 200px; |
| padding: 10px; |
| font-size: 1.5em; |
| color: #07374a; |
| border: solid 2px #07374a; |
| border-radius: 50%; } |
| |
| #scrollTopIcon { |
| margin-top: 10px; |
| font-size: 1em; |
| color: #ffffff; |
| border-color: #ffffff; } |
| |
| .back-to-top { |
| display: none; } |
| .back-to-top.visible { |
| display: block; } |
| |
| /* our team section */ |
| #team { |
| background-color: #0080ff; |
| font-weight: 700; |
| font-size: 1.5em; |
| } |
| .hr.invisible_hr { |
| height: 0; |
| padding: 0; |
| } |
| .hr.big_size_hr { |
| margin: 30px 0; |
| } |
| .hr { |
| clear: both; |
| display: block; |
| font-size: 0; |
| height: 24px; |
| margin: 20px 0; |
| overflow: hidden; |
| padding: 2px 0; |
| position: relative; |
| text-align: center; |
| width: 100%; |
| } |
| .highlight_secondary { |
| color: #FFFFFF; |
| } |
| .team-role, .team-name, .team-links-list a { |
| color: #07374a; |
| } |
| .team-links { |
| padding-top: .75em; |
| } |
| .team-image img { |
| max-width:150px; |
| max-height: 150px; |
| margin:0 auto; |
| } |
| |
| @media (max-height: 880px) { |
| #scrollIcon, #scrollTopIcon {margin-top: 15vh} |
| } |
| @media (max-height: 800px) { |
| #scrollIcon, #scrollTopIcon {margin-top: 10vh} |
| .cover.top {padding: 7.5vh 0 12.5vh 0;} |
| } |
| @media (max-height: 750px) { |
| #scrollIcon, #scrollTopIcon {margin-top: 8vh} |
| } |
| @media (max-height: 720px) { |
| #scrollIcon, #scrollTopIcon {margin-top: 5vh} |
| .cover.top {padding: 5vh 0 10vh 0;} |
| } |
| @media (max-height: 650px) { |
| #scrollIcon, #scrollTopIcon {margin-top: 5vh} |
| .cover.top {padding: 2.5vh 0 5vh 0;} |
| body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 42vh;} |
| } |
| @media (max-height: 550px) { |
| #scrollIcon, #scrollTopIcon {margin-top: 5vh} |
| .cover.top {padding: 1.5vh 0 3vh 0;} |
| .headline {padding-top:3vh;} |
| body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;} |
| } |
| @media (max-height: 480px) { |
| #scrollIcon, #scrollTopIcon {margin-top: 0} |
| .cover.top {padding: 0vh 0 3vh 0;} |
| .headline {padding-top:1.5vh;} |
| body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;} |
| } |
| @media (max-width: 768px) { |
| .container-fluid {padding:30px 0 !important;} |
| .h1, .h2, .h3, h1, h2, h3 { |
| margin-top: 10px; |
| margin-bottom: 10px; |
| } |
| .lead, .about, .about-info, .about-tools, .about-last {font-size: 16px} |
| .about-info {padding: 0% 6% 0% 6%;} |
| .row.cover.top .lead { |
| max-width: 350px; |
| margin-left:auto; |
| margin-right: auto |
| } |
| .h4, h4 {font-size: 20px} |
| #portfolio h2 {padding-bottom: 0} |
| .portfolio-projects--btn {margin-top:1.25em;} |
| #scrollIcon, #scrollTopIcon {font-size: 1em} |
| } |
| @media (max-width: 360px) { |
| .h1, h1 {font-size: 32px;} |
| } |