Update to new site design
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..77e417a
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,265 @@
+
+@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%; }
+
+img {
+ width: 100%; }
+
+body {
+ height: 100%;
+ font-family: "Comfortaa", Helvetica, Arial, sans-serif;
+ background-color: #0080ff;
+ /* Margin bottom by footer height */
+ margin-bottom: 60px; }
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+ font-family: "Comfortaa", Helvetica, Arial, sans-serif;
+ color: #07374a; }
+
+p {
+ font-family: "Comfortaa", sans-serif;
+ color: #ffffff; }
+
+body > .container-fluid {
+ padding: 60px 15px 0; }
+
+.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 1s ease 0s;
+ transition: background-color 1s 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: 10px 5px 5px 5px;
+ border-radius: 5px; }
+.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > li > a:focus {
+ color: #ffffff;
+ border: 1px solid #ffffff; }
+.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, .navbar-default .navbar-nav > .active > a:focus {
+ background-color: transparent;
+ color: #ffffff; }
+.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 {
+ background-color: #07374a; }
+
+/* Solid class attached on scroll past first section */
+.navbar.solid {
+ background-color: #07374a;
+ -webkit-transition: background-color 1s ease 0s;
+ transition: background-color 1s 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 1s ease 0s;
+ transition: color 1s ease 0s; }
+ .navbar.solid .navbar-nav > li > a {
+ color: #ffffff;
+ -webkit-transition: color 1s ease 0s;
+ transition: color 1s ease 0s; }
+
+.cover {
+ padding: 10% 0 10% 0; }
+ .cover.top {
+ padding: 5% 0 10% 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; }
+ @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% 10% 1% 10%;
+ 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%; } }
+@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--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 {
+ color: #ffffff; }
+ .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; }