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

@import url(http://fonts.googleapis.com/css?family=Abel);
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@import url(http://fonts.googleapis.com/css?family=Dosis:300,400,500,600);

/*Warning for Internet Explorer users (get a proper browser!!)*/
.internetexplorer {
	display: none;
	float: left;
	width: 100%;
	height: 40px;
	background-color: #000;
	top: 0px;
	position: fixed;
	z-index: 3000;	
}
.internetexplorer img{
	width: 420px;
	height: 40px;
}

html, body {
  height: 100%;
  left: 310px;
}
body {
	padding: 0 0 0 0;
  	-webkit-text-size-adjust:none;
}
p {
    font-size: 11px;
    text-align: left;
    font-family: 'Roboto', sans-serif;
  	font-weight: 300;
	padding-top: 5px;
	color: #292929;
}
blockquote {
    font-size: 13px;
	font-style: italic;
    font-family: 'Roboto', sans-serif;
  	font-weight: 300;
	border-left: 5px solid #dc5646;
}
blockquote span {
	font-style: normal;
	font-weight: 400;
}
.quote-wrapper {
	width: 100%;
	overflow: hidden;
	padding-top: 50px;
	
}
.quote {
	width: 100%;
	display: block;
	overflow: hidden;
}
h1, h2 {
	color: #292929;
	margin-top: 0;
	text-align: left;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 55px;
}
h2 {
	font-size: 18px;
	font-weight: 300;
	line-height: 25px;
}
a { /*bootstrap Line 316*/
  color: #dc5646;
  text-decoration: none;
}

a:hover,
a:focus { /*bootstrap Line 321*/
  color: #dc5646;
  text-decoration: underline;
}

a:focus { /*bootstrap Line 327*/
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.lead {
	font-size: 17px;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	padding-left: 100px;
	padding-right: 100px;	
}
.lead b{
	font-weight: 400;
}

/*Down arrows*/
#continue, #continue_top {
	display:block;
	width: 60px;
	height: 70px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -70px;
	padding-top: 20px;
	border-top-left-radius: 10px;
  	border-top-right-radius: 10px;
	background-color: #dfdfdf;
	background-image: url(../images/noise.png);
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}
/*Down arrows*/
#continue:after, #continue_top:after {
	content:"";
	display: block;
	width: 44px;
	height: 27px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../images/continue.png);
	background-repeat: no-repeat;	
	background-size: 100%;
	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
	-o-animation-delay: 4s;
	animation-delay: 4s;
	
	-webkit-animation-iteration-count: 3;
	-moz-animation-iteration-count: 3;
	-o-animation-iteration-count: 3;
	animation-iteration-count: 3;
	
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;

	-webkit-animation-name: bounce;
	-moz-animation-name: bounce;
	-o-animation-name: bounce;
	animation-name: bounce;
}
/*Down arrows*/
#continue_top:after {
	background-image: url(../images/continue_top.png);
}
/*Down arrows*/
#continue:hover, #continue_top:hover {
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
	height: 60px;
	margin-top: -60px;
}
#contact-form {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
}
#footer {
	border-top: 1px solid #ccc;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 12px;
	color: #b8b8b8;
	text-align: left;
	margin-left: 310px;
	position: fixed;
	width: 100%;
	max-width: 1210px;
	height: 40px;
	padding-top: 3px;
	padding-bottom: 20px;
	bottom: 0px;
	background: #fff;
}
.container { /*bootstrap Line 775*/
	overflow: hidden;
	height: auto;
	width: 100%;
	max-width: 1580px;
  	padding-left: 0px;
	padding-top: 80px;
	margin-left: 0;
	padding-right: 60px;
	padding-left: 310px;
	padding-bottom: 40px;
}
.work {
	width: 230px;
	height: 230px;
	margin-right: 30px;
	margin-bottom: 50px;
	float: left
}
.work img, .work-full img {
	width: 100%;
	height: auto;
}
.work-full {
	width: 100%;
	/*max-width:1010px;*/
	height: auto;
	margin-bottom: 50px;
}
.about-right {
	width: 40%;
	float: left;

}
.about-right p {
	font-size: 13px;
}
.about-left {
	float: left;
	margin-top: 0px;
	padding-right: 20px;
	
	
}
.about-left img {
	width: 200px;
	height: auto;
}
#anchor {
	position:absolute;
	width: 100px;
	height: 100px;
	display: block;
	/*background-color: #0CC;*/	
}

.page-header {
	border: 0;
	padding: 0;
}

iframe {
	width: 500px;
	margin-left: auto;
	margin-right: auto;
}

#homeimage {
	display: block;
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 40%;
	height:30%;
	background-image: url(../images/home.png);
	background-size: 100%;
	background-repeat: no-repeat;
	
}
.navmenu-nav .hide-home {
	display: none;
}

/*Social*/
.linkedin, .codepen {
  display: block;
  position: fixed;
  top: 100px;
  right: -15px;
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  background-image: url(http://www.mattdrew.co.uk/experiments/images/ex-social/social-linkedin-blank.png);
  background-size: 100%;
  z-index: 100;
}
.codepen {
  top: 130px;
  background-image: url(http://www.mattdrew.co.uk/experiments/images/ex-social/social-codepen-blank.png);
  background-size: 100%;
}
.codepen:hover, .linkedin:hover {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  right: 0px;
  border-radius: 5px 0px 0px 5px;
  transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
  cursor: pointer;
  background-image: url(http://www.mattdrew.co.uk/experiments/images/ex-social/social-codepen.png);
  background-size: 100%;
}
.linkedin:hover  {
  background-image: url(http://www.mattdrew.co.uk/experiments/images/ex-social/social-linkedin.png);
  background-size: 100%;
}
label {
	font-size: 11px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
  cursor: pointer;
  display: inline-block;
}
label:before {
  position: relative;
  display: inline-block;
  line-height: 20px;
  padding: 0px 5px 0px 25px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
}
.custom-linkedin label:before {
	font-size: 12px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
  content: 'Share';
  background: #0e76a8 url("../images/linkedin.png") no-repeat 6px 3px;
  -webkit-background-size: 14px;
  -moz-background-size: 14px;
  background-size: 14px;
}
.getshare-counter {
  background: #fff;
  border: 1px solid #eee;
  padding: 0px 9px;
  margin-left: 8px;
  color: #383d4b;
  line-height: 19px;
  display: inline-block;
  -webkit-border-radius:3px;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}
.getshare-counter:after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  width: 7px;
  height: 7px;
  background: #fff;
  border-left: 1px #eee solid;
  border-bottom: 1px #eee solid;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  left: -5px;
  top: 6px;
}
/*custom share button*/

/****************************************************/
/*ANIMATED LOGO*/


#logowrapper, #logowrapper-nav {
	margin-left: auto;
  	margin-right: auto;
	width: 300px;
 	height: 300px;
 	fill: rgba(220, 86, 70, 0);
 	stroke: rgba(220, 86, 70, 1);
	stroke-width: 1px;
	stroke-linecap: round;
	stroke-dasharray: 1865.753px 1865.753px;
	stroke-dashoffset:  1865.753px;
	/**/
	animation-name: logo;
	-webkit-animation-name: logo;
	-moz-animation-name: logo;
	-o-animation-name: logo;
	/**/
	animation-duration: 10s;
	-webkit-animation-duration: 10s;
	-moz-animation-duration: 10s;
	-o-animation-duration: 10s;
	/**/
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-o-animation-iteration-count: 1;
	/**/
	animation-timing-function: ease-in;
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	-o-animation-timing-function: ease-in-out;
	/**/
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-o-animation-delay: 1s;
	/**/
	animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
   -o-animation-fill-mode: forwards;
 
}
#logowrapper-nav {
	width: 160px;
	height: 160px;
	margin-left: -5px;
	margin-bottom: 20px;
	
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-o-animation-delay: 0s;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {/*for IE10-11 - do not support SVG animation*/  
   #logowrapper, #logowrapper-nav {
	fill: rgba(220, 86, 70, 1);
	stroke-dasharray: 0px;
	stroke-dashoffset:  0px;  
}
}



/*LOGO ANIMATION*/
@-webkit-keyframes logo {
   0% { margin-top: 0px; fill: rgba(220, 86, 70, 0); }
  20% { margin-top: 0px; fill:rgba(220, 86, 70, 0); stroke-dashoffset: 0; }
  30% { margin-top: 0px; fill: rgba(220, 86, 70, 1); stroke-dashoffset: 0; }
  60% { stroke-dashoffset: 0; }
  100% { fill: rgba(220, 86, 70, 1); stroke: rgba(220, 86, 70, 1); stroke-dashoffset: 0; }
}
@-moz-keyframes logo {
   0% { margin-top: 0px; fill: rgba(220, 86, 70, 0); }
  20% { margin-top: 0px; fill:rgba(220, 86, 70, 1); stroke-dashoffset: 0; }
  30% { stroke-dashoffset: 0; }
  100% { fill: rgba(220, 86, 70, 1); stroke: rgba(220, 86, 70, 1); stroke-dashoffset: 0; }
}
@-ms-keyframes logo {
   
}
@-o-keyframes logo {
   0% { margin-top: 0px; fill: rgba(220, 86, 70, 0); }
  20% { margin-top: 0px; fill:rgba(220, 86, 70, 0); stroke-dashoffset: 0; }
  30% { margin-top: 0px; fill: rgba(220, 86, 70, 1); stroke-dashoffset: 0; }
  60% { stroke-dashoffset: 0; }
  100% { fill: rgba(220, 86, 70, 1); stroke: rgba(220, 86, 70, 1); stroke-dashoffset: 0; }
}

/****************************************************/

@media (max-width: 992px){
  #anchor {
	 /* background-color: green;*/
	  margin-top: -50px;
}
.container {
	margin-left: 0px;
	width: 100%;
	padding-left: 60px;
}
.work {
	width: 190px;
	margin-right: 20px;
	margin-bottom: 20px;
}
#footer {
	margin-left: 0;
	padding-left: 60px;
}
iframe {
	width: 100%;
}
#homeimage {
	display: none;	
}
.internetexplorer {
	margin-top: 50px;
}

}
@media (max-height: 900px){
 #homeimage {
	display: none;
	position: absolute;
	bottom: 0px;
	left: 150px;
	width: 70%;
	height:40%;
	background-image: url(../images/home.png);
	background-size: 100%;
	background-repeat: no-repeat;
	
}
}
@media (max-width: 650px){
	.about-left img {
		width: 100%;
	}
	.about-right {
		width: 100%;
	}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#anchor {
	margin-top: 0px;
}
.lead {
	padding-left: 15px;
	padding-right: 15px;
}
iframe {
	width: 100%;
}
h1 {
	margin-bottom: 0px;
}
#logowrapper {
  margin-bottom: 320px;
  padding-top: 40px;
}
 #homeimage {/*HIDING STUFF!*/
	display: none;
}
.linkedin, .codepen {
  display: none;
}
.navmenu-nav .hide-home {
	display: block;
}
.container {
	margin-left: 0;
	padding-top: 10px;
	padding-right: 10px;
	
}
.work {
	width: 100%;
	margin-bottom: 20px;
	height: auto;
}
#footer {
	border-top: 1px solid #ccc;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 12px;
	color: #b8b8b8;
	text-align: left;
	margin-left: 0px;
	position: fixed;
	width: 100%;
	max-width: 100%;
	height: 30px;
	padding-top: 3px;
	padding-bottom: 10px;
	bottom: 0px;
	background: #fff;
}
@-webkit-keyframes logo {
   0% { margin-top: 0px; fill: rgba(220, 86, 70, 0); }
  20% { margin-top: 0px; fill:rgba(220, 86, 70, 0); stroke-dashoffset: 0; }
  30% { margin-top: 0px; fill: rgba(220, 86, 70, 1); stroke-dashoffset: 0; }
  60% { margin-top: -455px; stroke-dashoffset: 0; }
  100% {  margin-top: -455px; fill: rgba(220, 86, 70, 1); stroke: rgba(220, 86, 70, 1); stroke-dashoffset: 0; }
}
}

/* Smartphones (portrait) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
/* Styles */	
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
/* Styles */
 .footer, .custom-share {
	 display: none;
 }	
 .work {
 	width: 40%;
 	margin-bottom: 20px;
 	height: auto;
 }
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
#anchor {
	padding-top: -50px;
}
.lead {
	padding-left: 15px;
	padding-right: 15px;
}
iframe {
	width: 100%;
}
#logowrapper {
  margin-bottom: 100px;
}
#homeimage {
	display: none;
	width: 600px;
	height: 500px;
	bottom: -100px;	
	right: 0px;	
}


}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}



/*ANIMATIONS*/

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