.mask{background: linear-gradient(177.86deg, rgba(0, 0, 0, 0) -47.26%, rgba(3, 22, 44, 0.23) 80.08%);}
.shadow{box-shadow: -18px 14px 36px 4px rgba(0, 0, 0, 0.14);}
.text-shadow{text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.74);}
.transparent{opacity: 0.82}
.transparent-alt{opacity: 0.72}
.transparent-alt-2{opacity: 0.05}
.lpadding{padding-left: 21.3541667vw;}

#header{width: 21.3541667vw; min-width: 21.3541667vw;}
#menu a.active{color: var(--success-color)}
.menu > a i{top: 50%; transform: translateY(-50%); background: #fff}
.menu > a.active i{background: var(--success-color)}
#photo figure{height: 45.5208vw}
#name{transform: translateX(10.866667vw)}
#slider{height: 29vw}

@media(max-width:768px){
    .lpadding{padding-left: 0px;}
    #header{width: 100%; height: var(--header-height)}
    #menu{
        max-height: 0px;
        overflow: hidden;
        z-index: -1;
    }
    #menu.opened{overflow: auto; max-height: 100%}
    .menu > a.active i{background: #fff}
    #photo figure{height: 75vw}
    #name{transform: translateX(0)}
    #slider{height: 80vw}
    textarea{min-height: 120px}
}

textarea{min-height: 12vw}

.yt-preview{width: 56.5625vw; height: 31.6145vw}
.flickr-frame, .youtube-frame, .slide-box{height: 38vw;}
@media(max-width:768px){
	.yt-preview{width: 80vw; height: 40vw}
	.flickr-frame, .youtube-frame, .slide-box{height: 220px;}
}