body, html {font-family: 'Roboto Condensed', sans-serif;font-size:1vw;}
body, html { 
  background: url('../images/bg.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.desktop {display:block;}
.mobile {display:none;}

.logo {text-align:center;margin-top:5rem;}
.logo img {height:10rem;}

.scroll {overflow-x:scroll;padding:0 1rem;}

table.tree {border-spacing:0;border-collapse:collapse;width:calc(24 * 60px);margin:5rem auto;}
table.tree tr td {text-align:center;width:60px;padding-top:5px;padding-bottom:5px;position:relative;overflow:hidden;font-size:12px;}
table.tree tr.line td {padding:0;height:20px;}
table.tree tr td img {width:50px;margin-bottom:5px;}
table.tree tr td img.line {z-index:1;position:absolute;top:0;left:0;width:100%;}
table.tree tr td img.photo {border:1px solid #fff;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
table.tree tr td.data:hover {cursor:pointer;}
table.tree tr td.data:hover img.photo {;
-webkit-box-shadow: 0 0 7px 0 rgba(24,59,152,1);
-moz-box-shadow: 0 0 7px 0 rgba(24,59,152,1);
box-shadow: 0 0 7px 0 rgba(24,59,152,1);}

img.thumb {height:15rem;margin-bottom:2rem;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
table.modaldata {margin-bottom:1rem;}
table.modaldata tr td {padding:.3rem .5rem;vertical-align:top;}
table.modaldata tr td:nth-of-type(1) {padding-right:1rem;}
table.modaldata tr td:nth-of-type(2) {padding:.3rem 1rem;}
table.modaldata tr td:nth-of-type(3) {padding-left:1rem;}

@media only screen and (max-width: 768px) {
	.desktop {display:none;}
	.mobile {display:block;}
	html, body {font-size:3.5vw !important;}
	.logo {margin-top:3rem;}
	.logo img {height:8rem;}
	table.tree {margin:3rem auto;}

}
@media only screen and (max-width: 768px) and (orientation:landscape) {
	html, body {font-size:3.5vw !important;}
	.desktop {display:none;}
	.mobile {display:block;}
}