/* www.kraeker.com */	

html{ 
border:8px solid #231f20;
}
body{
text-align:center;
color:#231f20;
}
.logo{
position:absolute;
left:49px;
top:40px;
border-radius:50%;
-webkit-transition:-webkit-transform .4s ease-in-out;
transition:transform .4s ease-in-out;
}
.logo:hover {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
.menu{
font-size:27px;
font-family:'Ubuntu', sans-serif;
position:absolute;
right:18px;
top:35px;
}
.menu ul{
margin:0;
padding:0;
}
.menu li{
background:url('images/dot.gif') no-repeat 100% 83%;
display:inline-block;
margin-left:15px;
padding-right:23px;
text-decoration:none;
}
#menuno{background:none;}
.menu a:link {color:#231f20; text-decoration:none;}
.menu a:visited {color:#231f20; text-decoration:none;}
.menu a:hover {color:#000; text-decoration:none; border-bottom:4px solid #000;}
.menu a:active {color:#231f20; text-decoration:none;}

.backg{
position:absolute;
top:220px;
left:2%;
display:inline;
color:#eff9f9;
font-family:'Arvo', serif;
font-size:350px;
letter-spacing:-10px;
z-index:-100;
}
@media all and (max-width: 1001px) {
.backg{
font-size:250px;
}	
}
h1{
font-family:'Ubuntu', sans-serif;
font-size:47px;
text-align:left;
font-weight:normal;
padding:230px 0 0 37px;
margin-bottom:10px;
}
.phonetics{
display:block;
font-family:'Ubuntu', sans-serif;
font-size:50px;
text-align:left;
padding-left:37px;
}
.phon{
margin-left:8px;
filter:alpha(opacity=80); 
-moz-opacity:0.8; 
-khtml-opacity:0.8; 
opacity:0.8;
}
.phon:hover{
margin-left:8px;
filter:alpha(opacity=100); 
-moz-opacity:1.0; 
-khtml-opacity:1.0; 
opacity:1.0;
}
h2{
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:35px;
font-weight:normal;
padding:0 10% 0 37px;
padding-top:5px;
line-height:60px;
}



.btn-ds {color: #6e7280;}
.btn-ds:before, .btn-ds:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-bottom: 80px solid #323540;
}
.btn-ds:before {
right: -50px;
border-right: 50px solid transparent;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.btn-ds:after {
left: -50px;
border-left: 50px solid transparent;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.btn-ds:hover { color:#d4d6da;}
.btn-ds:hover:before {
-webkit-transform: translateX(-40%);
transform: translateX(-40%);
}
.btn-ds:hover:after {
-webkit-transform: translateX(40%);
transform: translateX(40%);
}



.about{
text-align:left;
background:#eff0f1;
font-family:'Ubuntu', sans-serif;
font-size:40px;
font-weight:bold;
margin-top:200px;
padding-top:50px;
}
.quote{
display:block;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:33px;
font-weight:normal;
line-height:50px;
padding-left:37px;
}
.about p{
font-size:22px;
font-family:'Lora', serif;
font-weight:normal;
line-height:38px;
text-indent:60px;
padding-left:37px;
}
.ableft{
display:inline-block;
width:60%;
padding-top:30px;
}
.abright{
text-align:center;
display:inline-block;
width:36%;
vertical-align:top;
}
.donovan{
display:inline-block;
padding-top:60px;
}
.links{
font-family:'Lora', serif;
font-size:35px;
font-weight:normal;
padding:28px 0 0 37px;
}
.pbutton2{
clear:both;
display:inline;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
float:left;
margin:0 22px 20px 0;
padding:15px 30px;
border:2px solid #231f20;
vertical-align:middle;
text-align:center;
cursor:pointer;
-moz-border-radius:10px;
-webkit-border-radius:14px;
border-radius:14px; 
-khtml-border-radius:14px;
transition:background 0.1s ease-in-out;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
-ms-transition:background 0.3s ease-in-out;
-o-transition:background 0.3s ease-in-out;
}
.pb2{
position:absolute;
right:37px;
}
.pbutton2, .pbutton2:hover, .pbutton2:active {
outline:0 none;
text-decoration:none;
color:#231f20;
}
.pbutton-2{
}
.pbutton-2:hover{
border-color:#0000ff;
color:#0000ff;
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0; 
-khtml-border-radius:0;
-webkit-transition:0.3s ease-in-out;
-moz-transition:0.3s ease-in-out;
-ms-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
}
.pbutton-2:active{
box-shadow:0px 0px 0px 0px #3293ba;
}
.email{
margin-left:25%;
}
.dot{
margin-left:4px;
}
.gradient{
width:100%;
height:210px;
margin-top:-85px;
background:linear-gradient(180deg, #eff0f1, #d2d4d5);
}
.top{
min-height:100%;
}
.tooltip {
display:none;
position:absolute;
padding:6px 20px;
background:#000;
color:#fff;
text-wrap:normal;
text-indent:0px;
line-height:30px;
}
:hover + .tooltip {
display:inline-block;
float:center;
margin-top:30px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
box-shadow: 0px 0px 15px #CCC;
z-index:100;
}
.about sup{
color:#00F;
}







.work{
text-align:center;
font-family:'Ubuntu', sans-serif;
font-size:40px;
font-weight:bold;
padding:50px 0 90px 0;
}
h3{
font-size:47px;
text-align:left;
font-family:'Ubuntu', sans-serif;
padding-left:37px;
}
.workpic{
max-width:90%;
position:relative;
margin-bottom:40px;
-moz-box-shadow:0 0 12px #d7d7d7;
-webkit-box-shadow:0 0 12px #d7d7d7;
box-shadow:0 0 12px #d7d7d7;
}
.workpic:hover{
width:1000px;
}




.projectpage{
width:94%;
font-family:'Ubuntu', sans-serif;
min-height:1000px;
}
.projectpage h1{
font-weight:bold;
font-size:40px;
text-align:center;
font-family:'Ubuntu', sans-serif;
padding:180px 0 80px 0;
margin:0;

}
.projectlist ul{
list-style:none;
margin:0;
padding:0 0 60px 0;
font-size:22px;
text-align:left;
backgound:eee;
border-top:solid 3px #383737;
}
.projectlist ul li{
width:100%;
padding:18px 7px 11px 7px;
border-bottom:solid 1px #ccc;
}
.projectlist ul li:hover{
background:#eff0f1;
}
.projectlist a{
color:#222;
text-decoration:none;
}



.pltop{
width:100%;
color:#000;
height:30px;
font-size:25px;
margin-bottom:15px;
margin-left:-15px;
font-weight:bold;
}
.pltopleft{
float:left;
padding-left:85px;
}
.pltopright{
float:right;
padding-right:25px;
}
.folder{
padding-left:18px;
padding-right:26px;
}
.plleft{
display:inline-block;
height:30px;
}
.plright{
display:inline-block;
float:right;
height:30px;
padding-right:40px;
}
@media all and (max-width: 550px) {
.plright{
display:none;
}
.pltopright{
display:none;
}
}	






@media all and (min-width: 1351px) {
.donovan{
margin-top:-20px;
}
.ableft p{
line-height:46px;
}
.workpic{
width:70%;
height:auto;
margin-bottom:40px;
-moz-box-shadow:0 0 12px #d7d7d7;
-webkit-box-shadow:0 0 12px #d7d7d7;
box-shadow:0 0 12px #d7d7d7;
}
.workpic:hover{
width:75%; 
}
.pb2{
position:inherit;
right:auto;
}
}








.contact{
background:#eff0f1;
text-align:center;
font-family:'Ubuntu', sans-serif;
font-size:40px;
font-weight:bold;
padding-top:50px;
}
.note{
display:block;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:27px;
font-weight:normal;
padding-left:37px;
line-height:50px;
color:#555;
}
.note a{
color:#000;
text-decoration:none;
}
.form{
width:94%;
margin-top:60px;
}
.etext{
display:block;
text-align:left;
font-size:25px;
margin:30px 0 10px 0;
padding-left:2px;
}
.e1{
width:98%;
border:1px solid #ddd;
background:#fff;
font-size:25px;
padding:10px 1% 10px 1%;
letter-spacing:1px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.e2{
width:98%;
border:1px solid #ddd;
background:#fff;
font-size:25px;
padding:10px 1% 10px 1%;
letter-spacing:1px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
height:120px;
}
.e3{
float:left;
background:url(images/send_message.jpg);
background-repeat:no-repeat;
width:272px;
height:58px;
border:0;
margin-top:32px;
opacity:0.9;
filter:alpha(opacity=90); 
}
.e3:hover{
opacity:1.0;
filter:alpha(opacity=100); 	
}
.line{
background:url(images/line.gif);
background-repeat:no-repeat;
height:3px;
width:871px;
margin:-58px 0 40px 0;
}







.screenshot{
width:85%;
max-width:1263px;
-moz-box-shadow:2px 2px 15px #ccc;
-webkit-box-shadow:2px 2px 15px #ccc;
box-shadow:2px 2px 15px #ccc;
margin-bottom:60px;
}
.portfolio h1{
font-size:33px;
text-align:center;
font-family:'Oswald', sans-serif;
margin:-10px 0px 30px 0px;
padding:230px 0 0 0;
line-height:58px;
}
.portfolio h2{
font-size:42px;
text-align:center;
font-family:'Ubuntu', sans-serif;
font-weight:bold;
margin:60px 0 15px 0;
padding:0;
}
.portfolio p{
width:80%;
font-family:'Lora', serif;
font-size:21px;
text-align:left;
line-height:40px;
}
.portfolio{
padding:0 0 70px 0;
}
.exlink{
margin:0 0 13px 0;
}
.arrow{
display:block;
padding-bottom:32px;
}
.mobile{
margin-bottom:40px;
}







.footer{
text-align:left;
background-image:url(images/footfade.gif);
background-repeat:repeat-x;
background-position:top;
background-color:#ffffff;
padding-left:37px;
}
.made{
font-family:"Arial Black", Gadget, sans-serif;
font-size:30px;
color:#cccccc;
padding-top:35px;
text-align:center;
}
.maple{
clear:both;
margin-top:10px;
}
.copy{
width:100%;
font-family:"Arial Black", Gadget, sans-serif;
font-size:18px;
color:#bbbbbb;
text-align:left;
margin-top:-10px;
padding-bottom:30px;
display:inline-block;
}



.adown{
padding-top:130px;
}
.floating{
animation-name:floating;
-webkit-animation-name:floating;
animation-duration:2.0s;	
-webkit-animation-duration:2.0s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
@keyframes floating {
0% {
transform:translateY(0%);	
}
50% {
transform:translateY(15%);	
}	
100% {
transform:translateY(0%);
}			
}
@-webkit-keyframes floating {
0% {
-webkit-transform:translateY(0%);	
}
50% {
-webkit-transform:translateY(15%);	
}	
100% {
-webkit-transform:translateY(0%);
}			
}



.thetop{
position:absolute;
top:0;
margin-top:-30px;
height:1px;
width:1px;
padding-top:0;
}
#message a
{
display:block;
display:none;
z-index:999; 
opacity:.8;
position:fixed;
top:100%;
margin-top:-90px;
left:90%;
margin-left:10px;
-webkit-border-radius:60px;
-moz-border-radius:60px;
border-radius:60px;
width:60px;
height:60px;
line-height:60px;
background-color:#000;
font-size:20px;
text-align:center;
color:#fff;
text-decoration:none;
}