html,body { height:100%; background-image: url("images/background.gif"); background-color: #f9f9f9; margin: 0; padding 0; font-family: 'Work Sans', sans-serif; letter-spacing: 0.5; -webkit-text-size-adjust: 100%; }
a { color: #ff523d; text-decoration: none;}
a:hover {text-decoration: underline; cursor: pointer;}
p { margin: 0; font-size: 14; line-height: 1.4em; }
div { vertical-align: top; font-size: 0em; line-height: 0em;}
h1 { font-size: 48px; line-height: 1em; color: #ff523d; font-weight: 400; margin:0 0 20px -5px; ; padding:0;}



#headersection { display: block; position: fixed; z-index: 100; height: 220px; width: 100%; background-image: url("images/background.gif"); overflow: hidden; opacity: 0.95 }
#logo { width: 230px; margin: 0 auto; padding-top: 60px; }
#intro { width: 80%; margin: 0 auto; text-align: center; padding-top: 25px; font-size: 16px; line-height: 1.4em; color: #323232;}

#forhire { display: block; position: fixed; top: 0; left:0; z-index: 120!important; height: 30px; width: 100%; background-color: #323232; text-align: center; transition: all 0.3s; vertical-align: middle; animation: dropdown ease 3s;}
#forhire p {color: #fcfcfc; font-size: 15px; position: absolute; bottom: 4px; left: 50%; width: 100%; margin-left: -50%; }
#forhire:hover {cursor: pointer; height: 40px; opacity: 1; transition: all 0.2s;}

#cv { position: fixed; width: 100%; height: 0%; z-index: 130!important; background-color: #323232; text-align: center; vertical-align: middle; margin-top: 220px; overflow: hidden; transition: all 1s; }

#cvscroll { display: inline-block; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; max-width: 1400px; padding: 60px 40px 0 40px; }

#about { display: inline-block; text-align: left; color: #fcfcfc; margin: 0 30px 0 30px; width: 36%; }
#about p { font-size: 16px; padding-bottom: 20px; }

#closecv { display: inline-block; width: 100%; text-align: center; padding-bottom: 300px; margin-top: 40px; z-index: 10; animation: fadeIn ease 3s;}
#closecv:hover  {cursor: pointer; }

#testimonials { display: inline-block; text-align: left; color: #fcfcfc; margin: 0 30px 0 30px; width: 36%; }

#quote { display: inline-block; position: relative; width: 100%; text-align: left; border-radius: 2px; background-color: #f9f9f9; margin-top:10px; }
#quote p { color: #323232; font-style: italic; font-size: 15px; padding: 15px;}
#quoted { display: flex; height: 40px; align-items: center; margin-left: 20px; margin-bottom: 30px;}
#quoted p {margin-left: 10px; padding-top: 2px;}


#myphoto {display: inline-block; position: relative; width: 100%; height: 180px; overflow: hidden; vertical-align: middle; margin-bottom: 50px; border-radius: 2px; color: #ff523d;}
.background { z-index:7; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 101%; transition: all 2.2s; color: #ff523d;}
#myphoto:hover .background {width: 110%; transition: all 2.2s; }
.filter { z-index:8; position: absolute; top: 64%; left: 50%; transform: translate(-50%, -50%); width: 150%; transition: all 2.2s;}
#myphoto:hover .filter {width: 120%; transition: all 2.2s; bottom: 0%; color: #ff523d; opacity: 0; }

.noscrollbar { -ms-overflow-style: none;  /* Internet Explorer 10+ */ scrollbar-width: none;  /* Firefox */ }
.noscrollbar::-webkit-scrollbar { display: none;  /* Safari and Chrome */ }

#worksection { vertical-align: top;  max-width: 1200px; z-index: 2; margin: 0 auto; text-align: center; padding: 206px 8% 50px 8%; overflow: hidden;}
#workitem { display: inline-block; z-index: 2; background-color: white; padding: 15px; margin: 15px;  }
#workimage { display:inline-block; z-index: 2; width: 330px; height: 303px; overflow: hidden; vertical-align: middle; text-align: center;  }
#workdescription {text-align: left;  letter-spacing: 0.3; font-weight: 400; width: 330px; height: 57px; }
#workdescription p { padding: 15px 15px 0 15px; }
		
		

.orangeleft img { z-index: 140; position: fixed;  width: 300px; right: 90%; }
.orangeright img { z-index: 140; position: fixed;  width: 300px; left: 90%; }
			
.zoomout img { display: block; transition: all 0.3s; transform: scale(1.5); }
.zoomout:hover img { transform: scale(1.0); }
			
.zoomin img { display: block; transition: all 0.3s; }
.zoomin:hover img { transform: scale(1.5);  z-index: 6!important;}
						
.zoomfade img { display: block; transition: all 0.3s; }
.zoomfade:hover img { transform: scale(1.1); opacity: 0; }
			
.blur span img { display: block; transition: all 0.3s; filter: brightness(100%); filter: blur(0px); }
.blur:hover span img { filter: brightness(50%); filter: blur(5px); transform: scale(1.1);}
			
.popout img { transition: all 0.3s; z-index: 13!important; transform: scale(0.5); min-width: 200%; min-height: 200%; position: relative; left:-50%; top:-50%;}
.popout { overflow:visible!important; z-index: 12!important; width: 330px; height: 303px; }
.popout:hover img {  transform: scale(0.9); position: relative; z-index: 14!important;  }

						
.moveleft img { display: block; transition: all 0.3s; width: 660px; }
.moveleft:hover img { transform: translate(-330px, 0px); }
			
.movedown img { display: block; transition: all 0.3s; height: 606px;}
.movedown:hover img { transform: translate(0px, -303px); }
			
.led { position: relative; text-align: center; }
.led video { position: absolute; top: 50%; left: 50%; z-index: 3;  transform:translateX(-50%) translateY(-50%); max-width: 330px; max-height: 303px;}
			
.play { position: absolute; right: -1; bottom: -8; cursor: pointer; z-index: 4; transform: scale(1)!important; opacity: 1; transition: all 0.3s;}
.led:hover .play {  animation-name: bounce; animation-duration: 0.4s; animation-timing-function: ease-in-out;}

@keyframes fade {
 0% { opacity: 1; }
 50% { opacity: 0.5; }	
 100% { opacity: 1; }
}
			
@keyframes bounce {
  50%  { position: absolute; bottom: 0;  }
  100% { position: absolute; bottom: -8; }
}

@keyframes dropdown {
  0%  { position: absolute; top: -30;  }
  75%  { position: absolute; top: -30;  }
  100% { position: absolute; top: 0; }
}

@media screen and (max-width: 900px) {
	#about { width: 75%;}
	#testimonials { width: 75%;}
	
}
@media screen and (min-width: 1151px) {}

@keyframes fadeIn {
	0% {
    opacity:0;
  }
  70% {
    opacity:0;
  }
   100% {
    opacity:1;
  }
}