/*
 Theme Name: threestones
 Author: Joost Markerink (designed by threestones)
 Author URI:http://joostmarkerink.nl
 */

    body{
        background-color:#eee;
        margin:0;
        font-family:Helvetica, Arial, sans-serif;
        color:#666;
		font-size:12px;
    }
	body.mobile{
		font-size:14px;
        background-color:#fff;
	}
	/*html,body{
		height:100%;
	}*/
    img{
        border:0;
    }
    #main{
        width:1024px;
        background-color:#fff;
        position:relative;
        margin-left:auto;
        margin-right:auto;
        height:1050px;
     /*   -webkit-transition:height 0.1s ease-in-out;*/
    }
	.single #main{
     /*   height:670px;*/
	}
    .page #main{
        height:700px;
    }
    #nav{
        position:absolute;
        top:70px;
        left:150px;
    }
    #nav ul{
        margin:0;
        padding:0;
        list-style:none;
    }
    #nav ul li{
        display:inline;
        text-transform:uppercase;
        margin-right:10px;
    }
    #nav ul li a{
        text-decoration:none;
        color:#787f84;
		font-size:100%;
    }
    #nav ul li.current-menu-item a,
    #nav ul li a:active,
    #nav ul li a:hover{
        color:#373d42
      /*  text-decoration:underline;*/
    }
    #logo{
        position:absolute;
        width:75px;
        height:75px;
        left:44px;
        top:44px;
        /*background-color:#999;*/
        /*background-image:url(logo.png);*/
    }
    #logo img{
        width:75px;
        height:75px;
    }
    #description{
        position:absolute;
        left:778px;
        top:70px;
        font-size:90%;
        width:201px;
        color:#818285;
        line-height:135%;
    }
	.mobile #description{
        font-size:85%;
	}
    #post-list{
        position:absolute;
        top:170px;
        left:150px;
    }
    .preview{
        position:absolute;
        width:200px;
        height:220px;
        /*background:#eee;*/
    }

    .hit{
        width:100%;
        height:100%;
        cursor:pointer;
        position:absolute;
    }
    .image{
        position:absolute;
        width:100%;
        height:136px;
        background:#ccc;
        background-repeat:no-repeat;
        background-position:center;
        background-size:200px 136px;
    }
    #photos{
        cursor:pointer;

    }
	div.title{
		position:absolute;
        width:250px;
        height:24px;
        top:150px;
        color:#58595b;
        font-size:97%;
	}

	#text h1,
    .title{
        color:#58595b;
        font-weight:normal;
        /*text-transform:uppercase;*/
        font-size:106%;
        margin-bottom:2px;
	line-height:145%;
    }
    #text p{
        margin-top:0px;
        margin-bottom:16px;
    }
    div.subtitle{
        position:absolute;
        width:100%;
        height:24px;
        top:153px;
        font-size:97%;
    }
#page-content h1{
    font-size:120%;
}
    #page-content,
	#text,
    .subtitle{
       /* font-size:10pt;*/
        color:#818285;
        line-height:140%;
    }
#page-content a,
    #text a{
        text-decoration:none;
        color:#58595b;
    }

#page-content img{
    max-width:830px;
}
    .page-nav{
        position:absolute;
        top:960px;
        left:150px;
        color:#aaa;
    }
    .page-nav a{
        color:#aaa;
        text-decoration:none;
    }
    .page-nav a:hover{
        text-decoration:none;
    }
	.single .page-nav{
		top:90px;
	}
	.single #page-nav-next{
		left:200px;
	}
	.single .page-nav{
		left:150px;
	}
	
    .r0{ top:0px; }
    .r1{ top:260px; }
    .r2{ top:520px; }
    .r3{ top:780px; }
    .r4{ top:1060px; }
    
    .c0{ left:0px; }
    .c1{ left:210px; }
    .c2{ left:420px; }
    .c3{ left:630px; }
	
	#dots,
	#content{
		position:absolute;
		left:776px;
		width:201px;
	}
	#content{
		top:220px;
		font-size:95%;
	}
	.mobile #content{
	}
	#dots{
		top:170px;
	}
    #dots img{
        width:12px;
        height:12px;
    }

	#content a.project-url{
		color:#373d42;
        font-weight:bold;
        font-size:100%;
		text-decoration:none;
		position:relative;
		top:25px;
	}
	#content a.project-url:hover{
		text-decoration:none;
	}
	#image{
		position:absolute;
		width:580px;
		height:360px;
		top:170px;
		left:150px;
        overflow:hidden;
        
        -webkit-transform-style:preserve-3d;
        -moz-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
        -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
        
       /* -webkit-transition:opacity 0.2s ease-in-out;
        opacity:0;*/
	}
#page-content{
    position:absolute;
    width:580px;
    top:170px;
    left:150px;
    
}
#page-content a{
    color:#787f84;
    text-decoration:none;
}
#page-content a:hover{
    color:#373d42
}
#dots img.current-dot{
    opacity:0.35;
    filter: alpha(opacity = 35);
}
#dots img{
    opacity:0.1;
    filter: alpha(opacity = 10);
}
#content img{
    position:absolute;
    width:580px;
    display:none;
}
.slideshow-image{
    
    position:absolute;
}

#photos .slideshow-image img{
    width:580px;
}

#photos{
    left:0px;
    position:absolute;
   
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d;
    
    -webkit-transform:translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
}
#photos.auto-motion{
    -webkit-transition:-webkit-transform 0.6s ease-in-out;
    -moz-transition:-moz-transform 0.6s ease-in-out;
    -ms-transition:-ms-transform 0.6s ease-in-out;
    -o-transition:-o-transform 0.6s ease-in-out;
    transition:transform 0.6s ease-in-out;
    
}

#photos.correct-motion{
    -webkit-transition:-webkit-transform 0.3s ease-out;
    -moz-transition:-moz-transform 0.3s ease-out;
    -ms-transition:-ms-transform 0.3s ease-out;
    -o-transition:-o-transform 0.3s ease-out;
    transition:transform 0.3s ease-out;
    
    
}