@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700");
/* Global Styles */

body {
   font-size: 1rem;
   line-height: 1.5;
   font-family: "Roboto", sans-serif;
   color: #212529;
   background-color: #fff;
}
* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

img {
   width: 100%;
   height: auto;
}
/* Responsive Grid */

.container {
   width: 100% auto;
   max-width: 1145px;
   margin: 0 auto;
   box-sizing: border-box;
   padding: 0 20px;
   position: relative;
}
.row {
   clear: both;
}
/* Columns */

.col {
   float: left;
   margin: 0 4% 0 0;
   box-sizing: border-box;
}
.col:last-child {
   margin-right: 0;
}
.one.col {
   width: 4.66666666667%;
}
.two.col {
   width: 13.3333333333%;
}
.three.col {
   width: 22%;
}
.four.col {
   width: 30.6666666667%;
}
.five.col {
   width: 39.3333333333%;
}
.six.col {
   width: 48%;
}
.seven.col {
   width: 56.6666666667%;
}
.eight.col {
   width: 65.3333333333%;
}
.nine.col {
   width: 74%;
}
.ten.col {
   width: 82.6666666667%;
}
.eleven.col {
   width: 91.3333333333%;
}
.twelve.col {
   width: 100%;
   margin: 0;
}

/* For Relic Browsers */
.col.last {
   margin: 0;
}

/* Mobile Devices */

@media all and (max-width: 550px) {
   .one.col,
   .two.col,
   .three.col,
   .four.col,
   .five.col,
   .six.col,
   .seven.col,
   .eight.col,
   .nine.col,
   .ten.col,
   .eleven.col {
      float: none;
      width: 100%;
   }
   .hide-on-mobile {
      display: none !important;
      width: 0;
      height: 0;
   }
}
.container:after,
.row:after {
   content: "";
   display: table;
   clear: both;
}

/* Hr */

hr {
   border: 0;
   height: 1px;
   background: #eeeeee;
   clear: both;
}

/* Typography */

p {
   margin-top: 0;
   margin-bottom: 1rem;
   line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: inherit;
   font-weight: 700;
   line-height: 1.1;
   color: inherit;
   margin-top: 1.5rem;
   margin-bottom: 1rem;
   text-transform: uppercase;
}
h1 {
   font-size: 3.2rem;
}
h2 {
   font-size: 2.8rem;
   margin: 1.5rem 0;
}
h2:after {
   content: "";
   display: block;
   width: 50px;
   height: 7px;
   background: #ff4136;
   margin: 0 auto;
   margin-top: 20px;
}
h3 {
   font-size: 1.5rem;
}
h4 {
   font-size: 1.2rem;
}
h5 {
   font-size: 1.1rem;
}
h6 {
   font-size: 1rem;
}
p {
   font-family: "Roboto", sans-serif;
}

button {
   color: #25a197;
   height: 50px;
   line-height: 48px;
   font-size: 1em;
   padding: 0 40px;
   background: #ffffff;
   margin-top: 10px;
   cursor: pointer;
}
.bold {
   font-weight: 700;
}
button:hover {
   opacity: 0.7;
}
/* Header */
header {
   padding: 20px 0;
   position: fixed;
   width: 99%;
   z-index: 999;
   background: #001f3f;
   margin-top: -10px;
}
.scrolled {
   background: #000;
}
header .logo {
   font-weight: 700;
   text-transform: uppercase;
   color: #ffffff;
   margin-top: 0;
   position: absolute;
   top: -10px;
   font-size: 2rem;
}

.logo {
   width: 55px;
   height: 55px;
   box-shadow: 2px 2p 2px 2px white;
}
header .mainNav {
   top: 0px;
   max-height: 30px;
   z-index: 99;
   width: 100%;
   overflow: hidden;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
}
header .openNav {
   max-height: 300px !important;
}
header nav {
   width: 100%;
}
header nav ul {
   list-style: none;
   overflow: hidden;
   text-align: right;
   padding: 0;
   margin: 0;
}
header nav ul li {
   display: inline-block;
   margin-left: 50px;
}
header nav ul a {
   text-decoration: none;
   color: #ffffff;
   text-transform: uppercase;
   font-size: 0.9em;
   font-weight: 700;
}

header nav ul a:hover {
   color: #ff4136;
}
header .mobileToggle {
   display: none;
   cursor: pointer;
   font-size: 20px;
   position: absolute;
   right: 20px;
   top: 6px;
   width: 30px;
}
header .mobileToggle span {
   width: 25px;
   height: 2px;
   margin-bottom: 6px;
   background: #ffffff;
   display: block;
}

@media only screen and (max-width: 550px) {
   header nav {
      width: 100%;
   }
   header nav ul {
      padding-top: 0px;
      margin-bottom: 22px;
      text-align: center;
      width: 100%;
   }
   header nav ul li {
      width: 100%;
      padding: 7px 0;
      margin: 0;
   }
   header nav ul li:first-child {
      margin-top: 70px;
   }
   header .mobileToggle {
      display: block;
   }
}
/* Hero One */

#hero {
   background: #001f3f;
   padding: 200px 0 120px 0;
   text-align: center;
   margin: 0;
}

#hero h2 {
   text-align: center;
   font-size: 4.6em;
   text-transform: capitalize;
   margin-top: 0;
   line-height: 1;
   color: #ff4136;
   font-weight: 300;
}
#hero h2:after {
   display: none;
}

#hero p {
   color: rgb(255, 255, 255, 0.7);
   font-size: 1rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-weight: normal;
   line-height: 21px;
   text-align: center;
   width: 60%;
   display: block;
   margin: 0 auto;
   padding-bottom: 40px;
}
#hero .button {
   border: 0;
   color: #fff;
   height: 50px;
   line-height: 48px;
   font-size: 0.9rem;
   padding: 0 40px;
   background: #ff4136;
   display: inline-block;
   margin: 0 auto;
   font-family: "Roboto", sans-serif;
   text-transform: uppercase;
   font-weight: 700;
}
#hero .white {
   color: #fff;
   font-weight: 700;
}

@media all and (max-width: 550px) {
   #hero button {
      margin-bottom: 20px;
   }
   #hero h2 {
      font-size: 2.2em;
   }
   #hero p {
      font-size: 0.8em;
      line-height: 21px;
      width: 100%;
   }
}
/* About Section */

#about {
   background: #ffffff;
   padding: 120px 0;
}
#about .icon {
   font-size: 1em;
   padding-right: 10px;
}
/* Work Section */

#work {
   background: #f4f4f4;
   padding: 120px 0;
   cursor: pointer;
}
#work .work {
   position: relative;
}
#work .work p {
   text-align: center;
   font-size: 0.9em;
}

#work .work-overlay {
   color: #fff;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: auto;
   padding: 10%;
}

#work .work img {
   display: block;
}

button {
   background-color: #ffffff;
   color: #222222;
   border: none;
   width: 100px;
   height: 100px;
   padding: 10px 20px;
   font-size: 16px;
   font-weight: 600;
   border-radius: 15px;
   box-shadow: 0 4px 6px #999999, 0 6px 15px #888888;
   transition: all 0.3s ease-in-out;
}

button:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 10px #00000026, 0 10px 25px #00000026;
}

button:active {
   transform: translateY(0);
   box-shadow: 0 2px 4px #0000001a, 0 4px 10px #0000001a;
}

/*Contact Section */

#contact {
   background: #ffffff;
   padding: 120px 0;
   min-height: 400px;
}
#contact textarea {
   float: left;
   width: 100%;
   max-width: 100%;
   border: none;
   margin: 0.5rem 0;
   padding: 0.5rem;
   border-radius: 0.3rem;
   background: #f4f4f4;
   color: #525252;
   font-family: "Open Sans";
   font-size: 18px;
}
#contact input {
   float: left;
   width: 100%;
   max-width: 100%;
   border: none;
   margin: 0.5rem 0;
   padding: 0.5rem;
   background: #f4f4f4;
   color: #525252;
   font-family: "Open Sans";
   font-size: 18px;
}
#contact input[type="submit"],
textarea[type="submit"] {
   border: 0;
   color: #ffffff;
   height: 50px;
   line-height: 48px;
   font-size: 1em;
   padding: 0 40px;
   background: #ff4136;
   margin-top: 10px;
   width: auto;
}
#contact input::placeholder,
textarea::placeholder {
   color: #525252;
}
#contact input.error,
textarea.error {
   background: #ad4747;
   color: #fff;
}
#contact input.error::placeholder,
textarea.error::placeholder {
   color: black;
}
#contact textarea {
   height: 10rem;
}
/* Footer One */

footer {
   background: #2a2c2b;
   padding: 120px 0;
}
footer a {
   color: #ffffff;
   font-size: 0.9em;
   text-transform: uppercase;
   font-weight: 700;
}

footer a:hover {
   color: #ff4136;
}
footer a {
   text-decoration: none;
}
footer ul {
   list-style-type: none;
   padding: 0;
}
footer ul li {
   display: inline;
   padding-right: 25px;
   font-weight: 500;
}

footer p {
   color: #888888;
   font-size: 0.8em;
   margin: 0;
}
footer h2 {
   text-transform: uppercase;
   color: #ffffff;
   margin-top: 0;
   font-size: 2rem;
   font-weight: 700;
   width: 130px;
}
footer h2:after {
   display: none;
}
footer hr {
   border-top: 3px solid #ffffff;
   margin: 20px 0 20px 0;
}

@media all and (max-width: 550px) {
   footer ul li {
      display: block;
   }
}

/* Misc */

.center {
   text-align: center;
   margin-top: 100px;
}
.padDown {
   padding-bottom: 50px;
}

/* START TOOLTIP STYLES */
[tooltip] {
   position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
   text-transform: none; /* opinion 2 */
   font-size: 12px; /* opinion 3 */
   line-height: 1;
   user-select: none;
   pointer-events: none;
   position: absolute;
   display: none;
   opacity: 0;
}
[tooltip]::before {
   content: "";
   border: 5px solid transparent; /* opinion 4 */
   z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
   content: attr(tooltip); /* magic! */

   /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
   min-width: 10px;
   max-width: 100px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 1ch 1.5ch;
   border-radius: 0.3ch;
   box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
   background: #ff4136;
   color: #fff;
   z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
   display: block;
}

/* don't show empty tooltips */
[tooltip=""]::before,
[tooltip=""]::after {
   display: none !important;
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
   top: 100%;
   border-top-width: 0;
   border-bottom-color: #ff4136;
}
[tooltip][flow^="down"]::after {
   top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
   left: 50%;
   transform: translate(-50%, 0.5em);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
   to {
      opacity: 0.9;
      transform: translate(-50%, 0);
   }
}

@keyframes tooltips-horz {
   to {
      opacity: 0.9;
      transform: translate(0, -50%);
   }
}

/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
   animation: tooltips-vert 300ms ease-out forwards;
}

canvas {
   width: 55px;
   height: 55px;
   align-content: center;
   margin-top: -5px;
}

.svg-footer {
   fill: #ff4136;
   width: 150px;
   height: 100px;
   margin-top: -100px;
   stroke: #ffffff;
}

svg path,
svg ellipse,
svg rect {
   fill: #ff4136;
}


body::-webkit-scrollbar {
  display: none;
}

.svg-logo {
   color: #ff4136;

}