/*Boilerplate CSS*/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100vw;
  position: relative;
  overflow-x: hidden;
}


img,
embed,
object,
video {
  max-width: 100%;
}

button {
  min-width: 48px;
  min-height: 48px;
}

main {
  max-width: 960px;
  margin: auto;
}


/*Text styles*/

h4,
h5,
h6 {
  font-family: 'Dancing Script', cursive;
}

h1 {
  font-family: 'Amatic SC', cursive;
}

h2 {
  font-family: 'Dancing Script', cursive;
  font-size: 2em;
  color: #555;
}

h3 {
  font-family: 'Amatic SC', cursive;
  font-size: 1.7em;
}

h3 a {
  font-family: 'Amatic SC', cursive;
  color: #555;
  text-decoration: none;
}

h3 a:hover {
  font-family: 'Amatic SC', cursive;
  color: rgb(0, 135, 206);
  text-decoration: none;
}

.uppercase {
  text-transform: uppercase;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-blue {
  color: rgb(0, 135, 206);
}

.text-orange {
  color: orange;
}

.list-unstyled {
  list-style: none;
  padding: 0;
}

.list-inline {
  display: flex;
  flex-wrap: wrap;
}

.list-inline li {
  display: block;
}


/*Grid framework*/

.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.col-1 {
  width: 8.33%;
}

.col-2 {
  width: 16.66%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33%;
}

.col-5 {
  width: 41.66%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33%;
}

.col-8 {
  width: 66.66%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33%;
}

.col-11 {
  width: 91.66%;
}

.col-12 {
  width: 100%;
}


  /*Header and slide out menu*/

.shadow {
  -o-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
  -ms-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}

.text-shadow {
  text-shadow: 2px 2px 2px #888;
}

header {
  color: #fff;
  min-height: 48px;
  padding: 0 15px;
  background: rgb(0, 135, 206);
  align-items: center;
}

.menu-btn {
  font-size: 2em;
}

.fa-paper-plane-o {
  margin-right: 12px;
}


/* Menu */

.menu {
  width: 300px;
  height: 100vh;
  z-index: 10;
  background-color: rgba(0, 135, 206, 0.9);
  position: absolute;
  -o-transform: translate(100vw, 0);
  -ms-transform: translate(100vw, 0);
  -moz-transform: translate(100vw, 0);
  -webkit-transform: translate(100vw, 0);
  transform: translate(100vw, 0);
  transition: transform 0.3s ease;
  -o-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
  -ms-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}

.menu-list {
  padding: 0;
  margin: 0;
}

.menu-item {
  width: 100%;
  text-align: center;
  line-height: 24px;
  padding: 24px;
  text-transform: uppercase;
}

.menu a {
  font-family: 'Amatic SC', cursive;
  font-size: 1.7em;
  text-decoration: none;
  color: #fff;
  padding: 1.5em;
}

.menu a:hover {
  color: #fce6ac;
}

.menu.open {
  -o-transform: translate(calc(100vw - 300px),0);
  -ms-transform: translate(calc(100vw - 300px),0);
  -moz-transform: translate(calc(100vw - 300px),0);
  -webkit-transform: translate(calc(100vw - 300px),0);
  transform: translate(calc(100vw - 300px),0);
}


/* Above the fold splash area */

.home-img {
  display: block;
  position: absolute;
  background: url('../images/laptop.jpg') center;
  background-size: cover;
  min-height: 70vh;
  z-index: -10;
}

.home-bg {
  background: rgba(0, 135, 206, 0.8);
  width: 100%;
  height: 100%;
  position: absolute;
}

.splash {
  color: #fff;
  height: 70vh;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: stretch;
}

.splash div {
  height: 70%;
  margin: 0;
  padding-top: 20px;
  font-size: 33vh;
}

.splash p {
  height: 30%;
  margin: 0;
  padding: 12px;
}


/* Portfolio */

section {
  padding: 20px 0;
  font-weight: 300;
}

.portfolio {
  background-color: #eee;
  padding: 0 12px;
}

article {
  margin-bottom: 20px;
}

.icon {
  font-size: 30vw;
  margin: 10px 0;
}

.content {
  text-align: center;
  padding: 12px;
}


/* Contact */

.social {
  justify-content: space-around;
  margin: 0 40px;
  font-size: 2em;
}

.social-btn {
  margin: 0.67em 0;
  -o-transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: transform 0.2s ease;
}

.social-btn:hover {
  color: #004c70;
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}


/* Footer */

footer {
  height: 60px;
  color: #fff;
  font-weight: 300;
  background-color:silver;
  background-image:
  radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
  radial-gradient(circle at 0    150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
  radial-gradient(circle at 50%  100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent),
  radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent),
  radial-gradient(circle at 0    50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent);
  background-size:100px 50px;
}

footer div {
  background: rgba(0, 135, 206, 0.9);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}


@media all and (min-width: 600px) {

  /* Grid */

  .col-md-1 {
    width: 8.33%;
  }

  .col-md-2 {
    width: 16.66%;
  }

  .col-md-3 {
    width: 25%;
  }

  .col-md-4 {
    width: 33.33%;
  }

  .col-md-5 {
    width: 41.66%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-7 {
    width: 58.33%;
  }

  .col-md-8 {
    width: 66.66%;
  }

  .col-md-9 {
    width: 75%;
  }

  .col-md-10 {
    width: 83.33%;
  }

  .col-md-11 {
    width: 91.66%;
  }

  .col-md-12 {
    width: 100%;
  }

  .icon {
    font-size: 12em;
  }

  .splash {
    font-size: 18px;
  }


  /* About section */

  .about {
    display: flex;
    align-items: center;
  }

  .about p {
    text-align: justify;
  }


  /* Menu */

  .menu-btn {
    display: none;
  }

  .menu {
    height: inherit;
    z-index: 0;
    background-color: inherit;
    position: relative;
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -o-box-shadow: none;
    -ms-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .menu-list {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
  }

  .menu-item {
    text-align: center;
    line-height: inherit;
    padding: inherit;
    text-transform: uppercase;
  }

  .menu a {
    padding: inherit;
  }

}


@media all and (min-width: 800px) {

  /* Grid */

  .col-lg-1 {
    width: 8.33%;
  }

  .col-lg-2 {
    width: 16.66%;
  }

  .col-lg-3 {
    width: 25%;
  }

  .col-lg-4 {
    width: 33.33%;
  }

  .col-lg-5 {
    width: 41.66%;
  }

  .col-lg-6 {
    width: 50%;
  }

  .col-lg-7 {
    width: 58.33%;
  }

  .col-lg-8 {
    width: 66.66%;
  }

  .col-lg-9 {
    width: 75%;
  }

  .col-lg-10 {
    width: 83.33%;
  }

  .col-lg-11 {
    width: 91.66%;
  }

  .col-lg-12 {
    width: 100%;
  }

  .home-img {
    background-image: url('../images/laptop_large.jpg');
  }
}