*{box-sizing: border-box}

body{overflow: hidden;}

header{
    padding: 20px;
    width: 100%;height: 20vh;
}
.logo{width: 92px;}
a{display: block}

.wrap{width: 50%;position: relative;height: 100vh;overflow: auto;margin-left: 0}

.nav{margin:10px;display: flex;width: 100%;}
.nav li a{margin: 10px;padding: 10px;cursor: pointer;}
.nav li a.on{background: #000;color: #fff}

.left{float: left;}
.menu{height: 80vh}
.menu li{margin: 10px;float: left;}

.open{float: left;width: 50%;position: relative;perspective: 900px}
iframe{width: 200%;height: 100vh;margin-left: 10px}

.btn{position: absolute;left: 10px;top: 10px;cursor: pointer;z-index: 100;transform: rotateY(0deg);transition: all .5s ease;transform-origin: center center}
.btn.on{transform: rotateY(-180deg)}

.da-thumbs {
	list-style: none;
	width: 100%;
	position: relative;
	margin: 0;
	padding: 0;
}

.da-thumbs li {
	float: left;
	margin: 5px;
	background: #fff;
	padding: 0;
	position: relative;
    box-shadow: none;
    text-align: center
}
.da-thumbs li:nth-child(odd) a div{
    background: rgba(80, 75, 105, 0.7);
}
.da-thumbs li:nth-child(even) a div{
    background: rgba(105, 75, 75, 0.7);
}

.da-thumbs li a div b {
	display: block;
    padding: 2% 0;
    font-weight: normal;
	text-transform: uppercase;
	color: rgba(255,255,255,0.9);
	font-size: .8vw;
}

.da-thumbs li a div b.bold {
font-weight: bold
}
.da-thumbs li a div img{
    margin: 10px auto;
    width: auto;
}

.grid .grid-sizer,
.grid .grid-item {width: 30%;overflow: hidden;float: left;position: relative;}

.grid .grid-item img{display: block;max-width: 100%;}


@media only screen and (max-width: 1200px) {
	.da-thumbs li a div span{
		padding: 2% 0;
		margin: 20px 10px 10px 10px
	}
}
@media only screen and (max-width: 580px) {
	.da-thumbs li a div span{
		padding: 2% 0;
		margin: 20px 10px 10px 10px
	}
	.grid .grid-sizer,
	.grid .grid-item {width: 90%}

}