@charset "UTF-8";
/* CSS Document */

body{
	background-color:#eeeeee;
	margin: auto;
	max-width: 1200px;
}

@font-face {
  font-family: "Knockout30";
  src: url("font/Knockout30.otf");
  }

@font-face {
  font-family: "NudistaMedium";
  src: url("font/NudistaMedium.otf");
}

@font-face {
  font-family: "KulturistaMedium";
  src: url("font/KulturistaMedium.otf");
}

@font-face {
  font-family: "KulturistaMediumItalic";
  src: url("font/KulturistaMediumItalic.otf");
}

*{outline:0}@-moz-keyframes fade-it{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fade-it{0%{opacity:0}100%{opacity:1}}@keyframes fade-it{0%{opacity:0}100%{opacity:1}}

	.js-fade-in-verb{
		animation-name:fade-it;
		animation-duration:0.5s;
		animation-fill-mode:forwards;-webkit-animation-name:fade-it;-webkit-animation-duration:0.5s;-webkit-animation-fill-mode:forwards}

	.verb.js-block{
		display:inline-block
	}

	.verb.js-hide{
		display:none;opacity:0
	}

	.verb{
		display:inline-block;visibility:visible
	}


h1 {
  font-family: NudistaMedium;
  line-height: 13px;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: #5b6771;
}

h2 {
  font-family: NudistaMedium;
  line-height: 13px;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: #5b6771;
}

h3 {
  font-family: KulturistaMedium;
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1.3em;
  color: #5b6771;
}

h4 {
  font-family: KulturistaMediumItalic;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.3em;
  color: #5b6771;
  margin-top: 0px;
}

h6 {
  font-family: NudistaMedium;
  font-size: 24px;
  letter-spacing: 0.05em;
  line-height: .3em;
  margin-bottom: 0px;
}

h5 {
  font-family: NudistaMedium;
  line-height: 13px;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: #ff8200;
}

a {
    text-decoration: none;
    color: #ff8200;
}

h5 a {
    text-decoration: none;
    color: #ff8200;
}

h5 a:hover {
    text-decoration: none;
    color: #f368a0;
}

h2 a {
    text-decoration: none;
    color: #5b6771;
}

h2 a:hover {
    text-decoration: none;
    color: #ff8200;
}


a:hover {
    text-decoration: none;
    color: #f368a0;
}

::selection {
    color: #f368a0; 
    background: #ffffff;
}

ul {
  overflow: hidden;
}

ul li {
  float: left;
}


hr {
    display: block;
    margin-left: 5px;
    margin-right: 5px;
    border-width: 1px;
    color: #5b6771;
    overflow: hidden;
}

.image-head {
  background-image:url(images/logo_blue.png);
  background-repeat: no-repeat;
  background-position: top center;
  width: auto;
  height: 83px;
  margin: auto;
  margin-top: 60px;
  padding: 0;
  transition: .15s ease, width 2s;
  backface-visibility: hidden;
}


#nav_text {
	position: relative;
	padding: 0px;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 5px;
	overflow: hidden;
}

#line_vert {
	position: relative;
	float: left;
	width: 1px;
	height: 128px;
	background-image: url(images/line_vert.png);
	padding: 0px;
	margin-top: 0px;
	margin-left: 90px;
	margin-bottom: 0px;
	overflow: hidden;
	display: block;
}

#bio_pic {
	position: relative;
	float: left;
	width: 151px;
	height: 137px;
	background-image: url(images/profile_image.jpg);
	padding: 0px;
	margin-top: 15px;
	margin-left: 10px;
	margin-bottom: 0px;
	overflow: hidden;
}

#content_pic {
	position: relative;
	clear: left;
	max-width: 100%;
	height: auto;
	padding: 0px;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 0px;
	overflow: hidden;
	opacity: 1;
}

#content_pic img {
	max-width: 100%;
	height: auto;
	outline-offset: -1px;
	outline: 1px solid #5b6771;
}

#content_video {
	position: relative;
	padding: 0px;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	overflow: hidden;
	opacity: 1;
	clear: left;
	height: 467px;
	width: 830px;
}

#content_video iframe {
	width: 100%;
	height: 467px;

}


#work_pic {
	position: relative;
	float: left;
	max-width: 100%;
	height: auto;
	padding: 0px;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 0px;
	overflow: hidden;
	opacity: 1;
}

#work_pic img {
	max-width: 100%;
	height: auto;
	outline-offset: -1px;
	outline: 1px solid #5b6771;
}

#bio {
	position: relative;
	float: left;
	padding: 0px;
	margin: auto;
	margin-top: 60px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	overflow: hidden;
}

#bio_text {
	position: relative;
	padding: 0px;
	padding-left: 10px;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	overflow: hidden;
}

#about_text {
	position: relative;
	padding: 0px;
	padding-left: 10px;
	padding-right: 200px;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	overflow: hidden;
}

#contact {
	position: relative;
	float: left;
	padding: 0px;
	margin: auto;
	margin-top: 160px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	overflow: hidden;
}

#contact_text {
	position: relative;
	padding: 0px;
	padding-left: 10px;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	overflow: hidden;
}

#social_images {
	position: relative;
	float: left;
	width: 27px;
	height: 27px;
	padding: 0px;
	margin-top: -10px;
	margin-left: 10px;
	margin-bottom: 0px;
	overflow: hidden;
	opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
}

#social_images:hover {
	opacity: 0.6;
}

#sample_work {
	position: relative;
	float: left;
	padding: 0px;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 0px;
	margin-left: -60px;
	margin-right: 0px;
	overflow: hidden;
}

#sample_work_text {
	position: relative;
	float: left;
	padding: 0px;
	padding-left: 10px;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	overflow: hidden;
}

#sample_work_images {
	position: relative;
	float: left;
	width: auto;
	height: auto;
	padding: 0px;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 0px;
	overflow: hidden;
	opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
}

#sample_work_images:hover {
	opacity: 0.6;
	filter: contrast(130%) brightness(110%);
}

#clients {
	position: relative;
	float: left;
	padding: 0px;
	margin: auto;
	margin-top: 60px;
	margin-bottom: 0px;
	margin-left: 10px;
	margin-right: 0px;
	overflow: hidden;
}

#clients_text {
	position: relative;
	float: left;
	padding: 0px;
	padding-left: 10px;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	overflow: hidden;
}

#clients_images {
	position: relative;
	float: left;
	width: auto;
	height: auto;
	padding: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	overflow: hidden;
	opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
}

#clients_images:hover {
	opacity: 0.6;
}

#awards {
	position: relative;
	float: left;
	padding: 0px;
	margin: auto;
	margin-top: 120px;
	margin-bottom: 0px;
	margin-left: 100px;
	margin-right: 0px;
	overflow: hidden;
}

#awards_text {
	position: relative;
	float: left;
	padding: 0px;
	padding-left: 10px;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	overflow: hidden;
}

#charity {
	position: relative;
	float: left;
	padding: 0px;
	margin: auto;
	margin-top: -160px;
	margin-bottom: 120px;
	margin-left: 160px;
	margin-right: 0px;
	overflow: hidden;
}

#charity_text {
	position: relative;
	float: left;
	padding: 0px;
	padding-left: 10px;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	overflow: hidden;
}

#charity_images {
	position: relative;
	float: left;
	width: auto;
	height: auto;
	padding: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	overflow: hidden;
	opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
}

#charity_images:hover {
	opacity: 0.6;
}

#footer_text {
	position: relative;
	clear: left;
	padding: 0px;
	margin: auto;
	margin-top: 60px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 5px;
	overflow: hidden;
}

#footer_nav {
	position: relative;
	clear: left;
	float: right;
	padding: 0px;
	margin: auto;
	margin-top: -890px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;
	overflow: hidden;
	display: block;
}


#footer_lines {
	position: relative;
	float: right;
	width: 91px;
	height: 890px;
	background-image: url(images/lines_nav.png);
	padding: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	overflow: hidden;
}

#footer_image_home {
	position: absolute;
	width: auto;
	height: auto;
	padding: 0px;
	margin-top: 709px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	overflow: hidden;
	opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
    top: 5px;
}

#footer_image_home:hover {
	filter: grayscale(70%);
	top: 0px;
}

#footer_image_about {
	position: absolute;
	width: auto;
	height: auto;
	padding: 0px;
	margin-top: 781px;
	margin-left: 46px;
	margin-right: 0px;
	margin-bottom: 0px;
	overflow: hidden;
	opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
    top: 5px;
}

#footer_image_about:hover {
	filter: grayscale(70%);
	top: 0px;
}

#footer_image_work {
	position: absolute;
	width: auto;
	height: auto;
	padding: 0px;
	margin-top: 648px;
	margin-left: 23px;
	margin-right: 0px;
	margin-bottom: 0px;
	overflow: hidden;
	opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
    top: 5px;
}

#footer_image_work:hover {
	filter: invert(30%);
	top: 0px;
}

#footer_image_contact {
	position: absolute;
	width: auto;
	height: auto;
	padding: 0px;
	margin-top: 663px;
	margin-left: 69px;
	margin-right: 0px;
	margin-bottom: 0px;
	overflow: hidden;
	opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
    top: 5px;
}

#footer_image_contact:hover {
	filter: brightness(150%);
	top: 0px;
}

#work_pic2 {
	display: none;
}

/* Media Queries */
@media screen and (max-width: 980px) {

#line_vert {
	display: none;
}

#about_text {
	position: relative;
	padding: 0px;
	padding-left: 10px;
	padding-right: 10px;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	overflow: hidden;
}

#bio {
	margin-left: 10px;
	margin-top: 10px;
}	

#contact {
	margin-left: 10px;
	margin-top: 10px;
}	

#sample_work {
	margin-left: 10px;
	margin-top: 20px;
}	

#clients {
	margin-left: 10px;
	margin-top: 20px;
}	

#awards {
	margin-left: 10px;
	margin-top: 20px;
}	

#charity {
	margin-left: 10px;
	margin-top: 20px;
}	

#footer_text {
	margin-left: 10px;
	margin-top: 40px;
}	

#footer_nav {
	display: none;
}

#work_pic {
	display: none;
}	

#work_pic2 {
	position: relative;
	float: left;
	max-width: 100%;
	height: auto;
	padding: 0px;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 0px;
	overflow: hidden;
	opacity: 1;
	display: inline;
}

#work_pic2 img {
	max-width: 100%;
	height: auto;
}

#content_video iframe {
	height: 100%;
	width: 100%;
}	

#content_video {
	height: 467px;
	width: 100%;
}	


}