*, 
*:before, 
*:after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

body {
	background-color: #ebebeb;
    height: 100%:
}

h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 300%;
    text-transform: uppercase;
}

h3 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

.container {
  width: 90%;
  min-width: 740px;
  margin: 0 auto;
}

.nav ul {
	float: right;
    list-style-type: none;
}


.container li {
	display: inline;
	float: right;
    text-decoration: none;
    list-style-type: none;
}

img.logo {
	float: left;
}

nav {
	width: 100%;
	margin: 0 auto;
    float: right;
}

/* Sections */

.hero {
    padding-top: 220px;
    background-color: darkblue;
    height: 700px;
    background: linear-gradient(0deg,rgba(0,0,0,0.86),rgba(0,0,0,0.86)), url("https://scontent-lax3-2.xx.fbcdn.net/v/t1.0-9/18581544_1321323104589042_2345085296545719304_n.jpg?oh=591bd3ca1e327db830a6af5a10ed1a95&oe=59DCAA7B");
    background-position: top;
    background-size: cover;


}

.hero h1 {
    color: white;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    font-size: 500%;
    font-weight: bold;
}

#tagline {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-size: 132%;
    color: rgb(170, 61, 166)/*rgb(3, 162, 253)*/;
    font-weight: 900;
}

.button-container {
    width: 580px;
    text-align: center;
    margin: 0 auto;
    padding-top: 0px;
}

.ghost-work {
    display: inline-block;
    width: 200px;
    padding: 8px;
    color: white;
    border: 1px solid white;
    text-align: center;
    outline: none;
    text-decoration: none;
    margin-top: 30px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
}

.ghost-work:after {
    content: "\00bb";
    position: absolute;
    transition: 0.5s;
    right: -20px;
}

.ghost-work:hover {
    padding-right: 25px;
}

.ghost-work:hover:after {
    opacity: 1;
    right: 0;
}

.ghost-book {
    display: inline-block;
    width: 300px;
    padding: 8px;
    color: #000;/*fallback for older browsers*/
    color: rgba(0, 0, 0, 0.8);
    background: rgb(170, 61, 166)/*rgb(88, 201, 52)*/;
    border: 1px solid rgb(170, 61, 166)/*rgb(88, 201, 52)*/;
    text-align: center;
    outline: none;
    text-decoration: none;
    margin-top: 30px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight: 900;
}

.ghost-book:after {
    content: "\00bb";
    position: absolute;
    transition: 0.5s;
    right: -20px;
}

.ghost-book:hover {
    padding-right: 25px;
}

.ghost-book:hover:after {
    opacity: 1;
    right: 0;
}

/* Bouncing Arrow */

.arrow {
  text-align: center;
  margin: 8% 0;
}
.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

.arrow a {
    font-size: 50px;

}

.fa .fa-chevron-down {
    color: white;
    border-radius: 50%;
    border-color: white;
    width: 30px;
    height: 30px;
    position: relative;
    top: -80px;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

/* Services */
.services {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    padding-top: 40px;
    padding-bottom: 30px;
}

.services h3 {
    text-transform: none;
}

.services-container li {
    text-decoration: none;
    list-style-type: none;
}

.list1 li {
    display: block;
    text-align: center;
    list-style-type: none;
}

.list2 li {
    display: block;
    list-style-type: none;
}

.services-container {
    display: inline-block;
    margin-right: 6%;
    margin-left: 6%;
    padding-bottom: 60px;
}

/*.services-container > div {
    flex: 1;
    padding-top: 20px;
    padding-bottom: 30px;
    padding-right: 20px;
    padding-left: 20px;
}
*/
.services-container i {
    font-size: 310%;
    padding-top: 20px;
    padding-bottom: 5px;
    color: #6b6b6b;
}

.services-container p {
    padding-top: 9px;
}


.folio-button {
    display: inline-block;
    width: 250px;
    padding: 8px;
    color: #fff;
    background: rgb(88, 201, 52);
    border: 1px solid rgb(88, 201, 52);
    text-align: center;
    outline: none;
    text-decoration: none;
    margin-top: 30px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
}

.folio-button:hover {
    color: #fff;
    background: rgb(63, 143, 35);
}

.clients {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    padding-top: 40px;
    background-color: white /*rgb(3, 162, 253)*/;
}

.clients-container {
    display: flex;
    margin-right: 6%;
    margin-left: 6%;
    padding-bottom: 100px;
}

.clients-container > div {
    flex: 1;
    padding-top: 40px;
    padding-bottom: 10px;
    padding-right: 20px;
    padding-left: 20px;
}

.clients-container img {
    width: 80%;
}

.folio {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    padding-top: 40px;
    background-color: rgb(170, 61, 166);
}

.folio h2 {
    color: white;
}

.about {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    padding-top: 40px;
    background: linear-gradient(0deg,rgba(0,0,0,0.86),rgba(0,0,0,0.86));
}

.about-container {
    padding-top: 20px;
    padding-right: 40px;
    padding-left: 40px;
    padding-bottom: 40px;
}

.about h2 {
    color: white;
}

.about h3 {
    padding-top: 8px;
    color: white;
    font-family: 'Open Sans', sans-serif;
}

.about p {
    padding-top: 3px;
    color: white;
}

.shaun {
    height: 20%;
    width: 20%;
    border-radius: 50%;
}

.contact {
    font-family: 'Open Sans', sans-serif;
    padding-top: 40px;
    text-align: center;
}

label {
    float: left;
    margin-top: 0.5em;
}

.contact h2 {
    text-align: center;
}

.contact-container {
    padding-top: 20px;
    margin-left: 20%;
    margin-right: 20%;
    padding-bottom: 80px;
    text-align: center;
}

input[type=text], select {
    width: 50%;
    padding: 12px 20px;
    margin: 8px 0;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=number], select {
    width: 50%;
    padding: 12px 20px;
    margin: 8px 0;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=date], select {
    width: 30%;
    padding: 12px 20px;
    margin: 8px 0;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=time], select {
    width: 30%;
    padding: 12px 20px;
    margin: 8px 0;
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea {
    width: 80%;
}

input[type=submit] {
    width: 80%;
    background-color: /*rgb(3, 162, 253)*/rgb(170, 61, 166);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 900;
    font-family: 'Oswald', sans-serif;
    font-size: 170%;
}

input[type=submit]:hover {
    background-color: rgb(79, 198, 255);
}

/* Header */

.logo {
    height: 70px;
}


header {
	background-color: white/*#c7c7c7*/;
	border-bottom: 1px solid #aaa;
	float: left;
	width: 100%;
	position: fixed;
	z-index: 10;
    opacity: 0.9;
}

header a {
	color: #3d3d3d;
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	font-size: 1em;
}

header a.active, header a:hover {
	color: #969696;
}

header li {
	margin-right: 30px;
}

/* header large */
header.large {
	height: 100px;
}
header.large img {
    margin-top: 10px;
}
header.large li {
	margin-top: 32px;
}

/* header small */
header.small {
	height: 40px;
}
header.small img {
    height:35px;
    margin-top: 2px;
}
header.small li {
	margin-top: 7px;
}

/* Transitions */

header,
nav,
a,
img,
li {
	transition: .7s all;
	-moz-transition: .7s all;
	-webkit-transition: .7s all;
	-o-transition: .7s all;
}



/* Gallery */

.gallery-wrapper {
    text-align: center;
    
}
.gallery {
  width: 100%/*640px*/;
  margin: 0 auto;
  padding: 5px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  text-align: center;
  align-content: center;
  background-color: rgb(170, 61, 166);
}

.gallery > div {
  position: relative;
  float: left;
  padding: 5px;
    
}

.gallery > div > img {
  position: relative;
    float: left;
    width: 240px;
    height: 200px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
  /*display: block;
  width: 200px;
  transition: .1s transform;
  transform: translateZ(0); /* hack */
}

.gallery > div:hover {
  z-index: 1;
}

.gallery > div:hover > img {
  transform: scale(1.7,1.7);
  transition: .3s transform;
}

.cf:before, .cf:after {
  display: table;
  content: "";
  line-height: 0;
}

.cf:after {
  clear: both;
}

* {
    box-sizing: border-box;;
}


/* Footer */

footer {
    background-color: #333333;    
}
.social-media h2 {
    font-size: 120%;
    text-align: center;
    padding-top: 10px;
    color: white;
}


.social-media .icons {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;

    font-size: 30px;
    text-decoration: none;
    align-content: center;
}

.social-media i {
    color: rgb(170, 61, 166);
    padding-left: 3px;
    padding-right: 3px;
}

.social-media p {
    padding-top: 15px;
    font-family: 'Open Sans', sans-serif;
    font-size: 80%;
    text-align: center;
    color: white;
    padding-bottom: 10px;
}