background:#000000;}*{padding:0; margin:0; box-sizing:border-box;} :root{--font: 'Abel', sans-serif;} a{display:inline-block;text-align:center;text-decoration:none;}

ul{  text-align: center } ul{  float: left }  ul{  z-index:100 } ul{  padding-left: 10% } ul{  margin-top: 85px } ul li{  width: 111px }  ul li{  display: block }  ul li{  margin-bottom: 7px } ul li {  z-index:100 } ul li{  padding: 10px 2px } ul li{  font-size: 12px } ul li{  text-transform: uppercase } ul li{  letter-spacing: 2px } ul li{background: #000000;} ul li{  display: block } ul li{  width: 111px } ul li{  margin-bottom: 7px } ul li{  padding: 14px 2px } ul li{  font-size: 8px } ul li{  text-transform: uppercase } ul li{  letter-spacing: 2px } ul a{  color: #fff} ul a{  text-decoration: none }  div[name='nav'] {  position: fixed } div[name='nav'] {  width: 160px } div[name='nav'] {  height: 105% } div[name='nav'] {top: -60px;} div[name='nav'] {  left: 0px } div[name='nav'] {background-color: #060606;} ul li:hover, a:hover{  color: #000000} ul li:hover, a:hover{  transition: 0.8s } ul li:hover, a:hover{background-color: #f58220;} div[name='ima'] img{ filter: blur(5px)} div[name='ima'] img:hover {filter: saturate(100%);}     div[name='imas'] img{ filter: blur(5px)}

#main{width:100%;height:100vh;background: url(https://s25.postimg.org/8foxh04hr/noise.png)top left repeat ,radial-gradient(#ffffffb8, #f58220, #f58220 90%);font-family:var(--font);color:white;font-size:1em;overflow:hidden;position:relative;min-width:1080px;}

#home{width:100%; height:100vh; position:absolute; top:0; left:0;}

.container{width:480px; height:480px; position:relative; top:50%; left:50%; transform:translate(-50%, -50%); border:solid 5px white; border-radius:50%;}

.navbar{width:100%; height:100%; position:absolute;z-index:2}

.btn-navbar{width:67px;height:67px;line-height:67px;font-size:2em;color: #f58220;border-radius:50%;background:white;box-shadow:0 0 0 16px rgba(255,255,255,0), 0 0 0 33px rgba(255,255,255,0);position:relative;}

.btn-navbar:hover{animation:pulse .5s infinite ease-in-out;}

@keyframes pulse{0%{box-shadow:0 0 0 0 white, 0 0 0 0 white;} 100%{box-shadow:0 0 0 8px transparent, 0 0 0 16px transparent;}}  #position-1{} #position-2{} #position-3{} #position-4{} .center-jason{width:380px; height:380px; border-radius:50%; padding:10px; background:white; position:relative; top:50%; left:50%; transform:translate(-50% , -50%); overflow:hidden;}

.center{width:380px; height:380px; border-radius:50%; padding:10px; background:white; position:relative; top:50%; left:50%; transform:translate(-50% , -50%); overflow:hidden;}

.img-princ{width:360px; height:360px; border-radius:50%; position:absolute;}

.img-princ2{width:470px; height:470px; border-radius:50%; position:absolute;}

.title , .subtitle{transform: translateY(150px);color: #000000;position:relative;display:inline-block;background: rgba(255,255,255,.4);border-radius:4px;line-height:40px;text-align:center;width: 180px;margin-left:90px;} .subtitle{width:260px; margin-top:10px; margin-left:50px; font-size:1.2em;}
.menu-page{position:absolute;/* width:460px; */height:50px;right:30px;top:20px;} .btn-page{width:100px;height:40px;line-height:40px;margin:0 5px;background:white;box-shadow: 0 5px #f58220;border-radius:4px;text-transform:uppercase;transition:all .4s;margin-top:5px;} .btn-page:hover{box-shadow:0 5px rgba(234,99,40,.4), 0 0 30px 20px rgba(0,0,0,.2);  background:#ea638c; color:white;}
#footer{width:100%;position:absolute;display:inline-block;text-align:center;bottom:50px;font-size:.75em;color: black;}
#video, #friends, #galery{width:100%;height:100vh;background:rgba(0,0,0,.75);visibility:hidden;overflow:hidden;opacity:0;transition:all 0.3s;z-index:100;position:absolute;}  .menu-page{position:absolute;/* width:460px; */height:50px;right:30px;top:20px;} .btn-page{width:100px;height:40px;line-height:40px;margin:0 5px;background: #f58220;color: #000000;box-shadow: 0 5px #000000;border-radius:4px;text-transform:uppercase;transition:all .4s;margin-top:5px;} .btn-page:hover{box-shadow:0 5px rgba(234,99,40,.4), 0 0 30px 20px rgba(0,0,0,.2);background: #000000;color: #f58220;} .box-video{width:500px; height:283px; position:relative; top:50%; left:50%; transform:translate(-50%, -50%); box-shadow:0 10px #ea638c;}
#content-3:target #friends, #galery{visibility:hidden; opacity:0;}  #content-3:target #video{visibility:visible; opacity:1;}
#content-2:target #friends, #video{visibility:hidden; opacity:0;}  #content-2:target #galery{visibility:visible; opacity:1;}
#content-1:target #video, #galery{visibility:hidden; opacity:0;}  #content-1:target #friends{visibility:visible;opacity:1;}
.bloc-friends{width:350px;height:570px;margin-top:120px;margin-left:40%;border-left: solid 1px #f58220;padding-left:20px;} .box-friends{width:280px; height:100px; margin-bottom:17px; text-align:left; position:relative;} .img-friends{width:100px;height:100px;padding:5px;border-radius:50%;background: #f58220;position:relative;z-index:10;} .box-friends h2{position:absolute;width:90px;height:40px;top:30px;left:50px;background:white;border-radius:50px;line-height:40px;padding-left:0;font-size:.6em;color: #000000;transition:all .3s;} .simbol{width:40px; height:40px; display:inline-block; position:relative; right:-15px; text-align:center; font-size:2em; line-height:45px;} .box-friends:hover h2{width:200px; padding-left:60px; font-size:1em; line-height:40px;} .box-galery{width:530px;height:100vh;position:relative;overflow-y:scroll;padding:10px 10px;top:0;left:10%;background:black;border-right: 5px solid #651a1a;border-left: solid 5px #651a1a;transform: translate(20px, -90px);} .box-img-galery{width:474px;height:380px;overflow:hidden;margin:10px 10px;display:inline-block;} .img{width: 274px;height:100%;filter:grayscale(1);transition:all .4s;cursor:pointer;filter: blur(5px)} .box-img-galery:hover .img{transform:scale(1.4) rotate(8deg); filter:grayscale(0);filter: saturate(100%);}   ::-webkit-scrollbar{width:5px; background:white;}  ::-webkit-scrollbar-thumb{background: #000000;}