@charset "utf-8";

body {font-family: 'Roboto', sans-serif, Ontoneo; font-size: 14px; line-height: 20px; color: #444; letter-spacing: -0.5px; font-weight: 300; margin: 0px; padding: 0px; background: #f1f1f1; text-align: left; overflow-x: hidden;}
@media (min-width: 500px) {body {font-size: 17px; line-height: 24px; text-align: justify;}}

a {color: #444; transition: 1s;}
a:hover {color: #82ab4b; transition: 0.1s;}

b {font-weight: 400; text-shadow: #ccc 0px 1px 2px; transition: 1s;}
b:hover {text-shadow: #bbb 1px 2px 3px; transition: 0.1s;}

c {color: #82ab4b; cursor: pointer; transition: 1s;}
c:hover {color: #00ff00; transition: 0.1s;}

k {font-weight: 400; font-size: 18px;}
l {margin-left: 3.8%; font-weight: 300; font-size: 16px;}
m {margin-left: 7%; font-weight: 300; font-size: 15px;}
n {margin-left: 10%; font-weight: 300; font-size: 15px;}
o {margin-left: 13%; font-weight: 300; font-size: 15px;}

p {text-align: justify; margin-bottom: 5%;}

img {width: 100%; border: 0px; border-radius: 2px;}
#ileft {width: 40%; max-width: 400px; border: 0px; margin-right: 4%; margin-bottom: 2%; box-shadow: #777 0px 5px 15px; float: left;}
#iright {width: 40%; max-width: 400px; border: 0px; margin-left: 4%; margin-bottom: 2%; box-shadow: #777 0px 5px 15px; float: right;}

#grnd {position: static; width: 100%;}

h1 {font-size: 24px; line-height: 24px; text-align: left; margin-top: 0px; color: #82ab4b; text-shadow: #99bbaa 0px 2px 3px; font-weight: 300;}
@media (min-width: 500px) {h1 {font-size: 34px; line-height: 34px;}}
@media (min-width: 980px) {h1 {font-size: 44px; line-height: 44px;}}

h2 {font-size: 18px; text-align: left; margin-top: 0px; color: #82ab4b; text-shadow: #99bbaa 0px 1px 2px; font-weight: 300;}
@media (min-width: 500px) {h2 {font-size: 28px; line-height: 28px;}}
@media (min-width: 980px) {h2 {font-size: 32px; line-height: 32px;}}

h3 {font-size: 15px; text-align: left; margin-top: 0px; color: #82ab4b; text-shadow: #99bbaa 0px 1px 2px; font-weight: 300;}
@media (min-width: 500px) {h3 {font-size: 20px; line-height: 20px;}}
@media (min-width: 980px) {h3 {font-size: 24px; line-height: 24px;}}

h4 {font-size: 15px; text-align: left; margin-top: -10px; color: #82ab4b; text-shadow: #99bbaa 0px 1px 2px; font-weight: 300;}
@media (min-width: 500px) {h4 {font-size: 20px; line-height: 20px; margin-top: -10px;}}
@media (min-width: 980px) {h4 {font-size: 24px; line-height: 24px; margin-top: -24px;}}

h5 {font-size: 20px; color: #82ab4b; text-shadow: #99bbaa 0px 1px 2px; font-weight: 100;}

h6 {font-size: 17px; text-align: left; margin-top: 0px; margin-bottom: 12px; color: #fff; text-shadow: #99bbaa 0px 1px 2px; font-weight: 300;}
@media (min-width: 500px) {h6 {font-size: 24px; line-height: 24px; margin-bottom: 20px;}}

hr {border-width: 0px 0px 1px 0px; border-color: #82ab4b;}

#headlead {width: 100%; height: 210px; font-size: 24px; line-height: 24px; color: #82ab4b; font-weight: 300; background: #fff; margin-bottom: 1%; box-shadow: #777777 0px 9px 10px; display: flex; align-items: center; justify-content: center;}

.r {color: #fff; cursor: auto; text-shadow: #fff 0px 0px 9px;}

.a {text-decoration: none; color: #fff; text-shadow: #555 0px 0px 0px;}
.a:hover {color: #fff; text-shadow: #fff 0px 0px 9px;}

.b {text-decoration: none; color: #008800; text-shadow: #888 0px 1px 1px; transition: 0.5s;}
.b:hover {color: #007700; text-shadow: #777 0px 1px 1px; transition: 0.5s;}

.c {color: #007700; font-weight: 400; text-decoration: none; transition: 0.5s;}
.c:hover {color: #009900; text-decoration: underline; transition: 0.1s;}

.d {margin-left: 20px; color: #007700; font-weight: 300; text-decoration: none; transition: 0.5s;}
.d:hover {color: #009900; text-decoration: underline; transition: 0.1s;}

.e {margin-left: 40px; color: #338833; font-weight: 300; text-decoration: none; transition: 0.5s;}
.e:hover {color: #449944; text-decoration: underline; transition: 0.1s;}

.tdn {text-decoration: none;}
.tdn:hover {text-decoration: none;}

strong {font-weight: 400; text-shadow: #ccc 0px 1px 2px; transition: 1s;}
strong:hover {text-shadow: #bbb 1px 2px 3px; transition: 0.1s;}

subtitle {position: relative; top: -7px; padding: 0.5%; padding-left: 2%; padding-right: 2%; color: #fff; text-shadow: #82ab4b 0px 0px 3px; background: #99cc77; border-radius: 30px; font-size: 18px; transition: 1s;}
@media (min-width: 980px) {subtitle {top: -13px; font-size: 22px;}}

table {width: 100%; font-size: 12px; transition: 1s;}
@media (min-width: 500px) {table {font-size: 17px;}}



/* === Настройки видео === */

#grvd {position: static; width: 100%; margin-bottom: 1%; display: none;}
@media (min-width: 380px) {#grvd {display: block;}}

#double {position: static; width: 100%; margin-bottom: 1%;}
@media (min-width: 380px) {#double {display: none;}}

#slog1 {position: absolute; top: 270px; max-width: 900px; color: #fff; font-size: 22px; line-height: 24px; padding: 4%; text-align: left; text-shadow: #333333 0px 3px 5px; opacity: 0; animation: slogan 30s infinite linear; -webkit-animation: slogan 30s infinite linear; transition: 1s;}
@-webkit-media (min-width: 380px) {#slog1 {font-size: 28px; line-height: 30px; top: 290px;}}
@media (min-width: 380px) {#slog1 {font-size: 28px; line-height: 30px; top: 290px;}}
@media (min-width: 570px) {#slog1 {font-size: 38px; line-height: 40px; top: 370px;}}
@media (min-width: 820px) {#slog1 {font-size: 48px; line-height: 50px; top: 455px; padding: 3%;}}

#slog2 {position: absolute; top: 250px; max-width: 900px; color: #fff; font-size: 22px; line-height: 24px; padding: 4%; text-align: left; text-shadow: #333333 0px 3px 5px; opacity: 0; animation: slogan 30s infinite linear; animation-delay: 6s; -webkit-animation: slogan 30s infinite linear; -webkit-animation-delay: 6s; transition: 1s;}
@-webkit-media (min-width: 380px) {#slog2 {font-size: 28px; line-height: 30px; top: 270px;}}
@media (min-width: 380px) {#slog2 {font-size: 28px; line-height: 30px; top: 270px;}}
@media (min-width: 570px) {#slog2 {font-size: 38px; line-height: 40px; top: 350px;}}
@media (min-width: 820px) {#slog2 {font-size: 48px; line-height: 50px; top: 440px; padding: 3%;}}

#slog3 {position: absolute; top: 270px; max-width: 900px; color: #fff; font-size: 22px; line-height: 24px; padding: 4%; text-align: left; text-shadow: #333333 0px 3px 5px; opacity: 0; animation: slogan 30s infinite linear; animation-delay: 12s; -webkit-animation: slogan 30s infinite linear; -webkit-animation-delay: 12s; transition: 1s;}
@-webkit-media (min-width: 380px) {#slog3 {font-size: 28px; line-height: 30px; top: 290px;}}
@media (min-width: 380px) {#slog3 {font-size: 28px; line-height: 30px; top: 290px;}}
@media (min-width: 570px) {#slog3 {font-size: 38px; line-height: 40px; top: 370px;}}
@media (min-width: 820px) {#slog3 {font-size: 48px; line-height: 50px; top: 455px; padding: 3%;}}

#slog4 {position: absolute; top: 270px; max-width: 900px; color: #fff; font-size: 22px; line-height: 24px; padding: 4%; text-align: left; text-shadow: #333333 0px 3px 5px; opacity: 0; animation: slogan 30s infinite linear; animation-delay: 18s; -webkit-animation: slogan 30s infinite linear; -webkit-animation-delay: 18s; transition: 1s;}
@-webkit-media (min-width: 380px) {#slog4 {font-size: 28px; line-height: 30px; top: 290px;}}
@media (min-width: 380px) {#slog4 {font-size: 28px; line-height: 30px; top: 290px;}}
@media (min-width: 570px) {#slog4 {font-size: 38px; line-height: 40px; top: 370px;}}
@media (min-width: 820px) {#slog4 {font-size: 48px; line-height: 50px; top: 455px; padding: 3%;}}

#slog5 {position: absolute; top: 270px; max-width: 900px; color: #fff; font-size: 22px; line-height: 24px; padding: 4%; text-align: left; text-shadow: #333333 0px 3px 5px; opacity: 0; animation: slogan 30s infinite linear; animation-delay: 24s; -webkit-animation: slogan 30s infinite linear; -webkit-animation-delay: 24s; transition: 1s;}
@-webkit-media (min-width: 380px) {#slog5 {font-size: 28px; line-height: 30px; top: 290px;}}
@media (min-width: 380px) {#slog5 {font-size: 28px; line-height: 30px; top: 290px;}}
@media (min-width: 570px) {#slog5 {font-size: 38px; line-height: 40px; top: 370px;}}
@media (min-width: 820px) {#slog5 {font-size: 48px; line-height: 50px; top: 455px; padding: 3%;}}

@-webkit-keyframes slogan {1% {opacity: 0;} 3% {opacity: 1;} 17% {opacity: 1;} 20% {opacity: 0;} 100% {opacity: 0;}}
@keyframes slogan {1% {opacity: 0;} 3% {opacity: 1;} 17% {opacity: 1;} 20% {opacity: 0;} 100% {opacity: 0;}}

#tube {width: 100%; max-width: 900px; height: 48.8vw;}
@media (min-width: 370px) {#tube {height: 49.4vw;}}
@media (min-width: 450px) {#tube {height: 50vw;}}
@media (min-width: 620px) {#tube {height: 50.5vw;}}
@media (min-width: 900px) {#tube {height: 50.8vw; max-height: 506px;}}


/* === Раздел видео === */

.vidme {width: 100%; height: 100%; background: #82ab4b; color: white; border: solid; border-width: 1px 1px 3px 1px; border-color: green; border-radius: 50px; display: flex; justify-content: center; align-items: center; transition: 0.5s;}
.vidme:hover {background: #94cd5d; transition: 0.5s;}

.vidmeact {width: 100%; height: 100%; color: green; background: white; border: solid 1px; border-color: green; border-radius: 50px; display: flex; justify-content: center; align-items: center;}

.prev {width: 94%; height: 44vw; margin: auto; margin-bottom: 3%; font-size: 1.2em; text-shadow: #000 0px 0px 5px; font-weight: 400; padding: 3%; display: flex; align-items: flex-end; text-align: left;}
@media (min-width: 540px) {.prev {width: 40%; height: 18vw; font-size: 0.9em; line-height: 1.4em; padding: 3%; margin: 2%; float: left;}}
@media (min-width: 850px) {.prev {width: 25%; height: 11vw; font-size: 0.8em; line-height: 1.3em; padding: 2%; margin: 1%;}}
@media (min-width: 980px) {.prev {width: 196px; height: 100px; font-size: 0.75em; line-height: 1.2em; padding: 10px; margin: 4px; margin-bottom: 2%;}}


/* === Контентная часть === */

#cont3d {position: static; max-width: 900px; min-width: 200px; -webkit-perspective: 150vw; perspective: 150vw; padding: 4%; text-align: left; background: #fff; border: solid 1px #82ab4b; margin-bottom: 1%; box-shadow: #777777 0px 9px 10px;}
@media (min-width: 400px) {#cont3d {text-align: justify;}}

#cont {position: static; max-width: 900px; min-width: 200px; padding: 4%; text-align: left; background: #fff; border: solid 1px #82ab4b; margin-bottom: 1%; box-shadow: #777777 0px 9px 10px;}
@media (min-width: 400px) {#cont {text-align: justify;}}

#conv {position: static; max-width: 900px; min-width: 200px; -webkit-perspective: 150vw; perspective: 150vw; padding: 4%; padding-bottom: 0px; text-align: left; background: #fff; border: solid #82ab4b; border-width: 1px 1px 0px 1px; box-shadow: #777777 0px 9px 10px;}
@media (min-width: 400px) {#conv {text-align: justify;}}

#akv {position: static; max-width: 900px; min-width: 200px; height: 330px; padding: 4%; padding-bottom: 0px; overflow: hidden; text-align: left; background: #fff; border: solid #82ab4b; border-width: 1px 1px 0px 1px; outline: none; cursor: pointer; box-shadow: #777777 0px 9px 10px; transition: 1s;}
@media (min-width: 380px) {#akv {height: 275px; transition: 1s;}}
@media (min-width: 500px) {#akv {height: 320px; text-align: justify; transition: 1s;}}
@media (min-width: 590px) {#akv {height: 290px; transition: 1s;}}
@media (min-width: 710px) {#akv {height: 250px; transition: 1s;}}
@media (min-width: 920px) {#akv {height: 200px; transition: 1s;}}
#akv:focus {height: auto; cursor: auto; transition: 1s;}
#akv:focus .more {display: none;}
#akv:focus .close {display: block;}

#aks {position: static; max-width: 900px; min-width: 200px; height: 200px; padding: 4%; padding-bottom: 0px; overflow: hidden; text-align: left; background: #fff; border: solid #82ab4b; border-width: 1px 1px 0px 1px; outline: none; cursor: pointer; box-shadow: #777777 0px 9px 10px; transition: 1s;}
@media (min-width: 400px) {#aks {text-align: justify;}}
#aks:focus {height: auto; cursor: auto; transition: 1s;}
#aks:focus .more {display: none;}
#aks:focus .close {display: block;}

#akn {position: static; max-width: 900px; min-width: 200px; -webkit-perspective: 150vw; perspective: 150vw; padding: 4%; padding-top: 0px; text-align: left; background: #fff; border: solid #82ab4b; border-width: 0px 1px 1px 1px; margin-bottom: 1%; box-shadow: #777777 0px 9px 10px;}
@media (min-width: 400px) {#akn {text-align: justify;}}

.more {position: relative; font-weight: 400; font-style: normal; color: #82ab4b; text-decoration: none; text-shadow: #99bbaa 0px 2px 3px;}
.more:hover {color: #93bc5c; text-shadow: #99bbaa 0px 3px 4px;}

.close {position: relative; font-weight: 400; font-style: normal; color: #82ab4b; text-decoration: none; text-shadow: #99bbaa 0px 2px 3px; display: none;}
.close:hover {color: #93bc5c; text-shadow: #99bbaa 0px 3px 4px;}

#map {position: static; width: 100%; min-width: 200px; height: 400px; margin-top: 5%;}

.block1 {width: 100%; max-width: 436px; min-width: 240px; margin-bottom: 3%; font-size: 20px; line-height: 0px; background: url(../dec/diagnost.jpg);  background-position: bottom right; transition: 1s;}
.block1:hover {box-shadow: #555555 0px 7px 10px; transition: 0.3s;}
@media (min-width: 1020px) {.block1 {float: left; margin-right: 3%;}}

.block2 {width: 100%; max-width: 436px; min-width: 240px; margin-bottom: 3%; font-size: 20px; line-height: 0px; background: url(../dec/terapy.jpg);  background-position: center center; transition: 1s;}
.block2:hover {box-shadow: #555555 0px 7px 10px; transition: 0.3s;}
@media (min-width: 1020px) {.block2 {float: right;}}

.block3 {width: 100%; max-width: 436px; min-width: 240px; margin-bottom: 3%; font-size: 20px; line-height: 0px; background: url(../dec/scientific.jpg);  background-position: bottom right; transition: 1s;}
.block3:hover {box-shadow: #555555 0px 7px 10px; transition: 0.3s;}
@media (min-width: 1020px) {.block3 {float: left; margin-right: 3%;}}

.block4 {width: 100%; max-width: 436px; min-width: 240px; margin-bottom: 3%; font-size: 20px; line-height: 0px; background: url(../dec/ramn.jpg); background-position: center center; transition: 1s;}
.block4:hover {box-shadow: #555555 0px 7px 10px; transition: 0.3s;}
@media (min-width: 1020px) {.block4 {float: right;}}

.name {position: relative; bottom: 20px; color: #fff; text-shadow: #000 0px 2px 10px;}
@-webkit-media (max-width: 370px) {.name {font-size: 14px;}}
@media (max-width: 370px) {.name {font-size: 14px;}}

#trigger {width: 100%;}
#trigger:hover #to-up {bottom: 3%; opacity: 0.9; transition: 2s;}

#to-up {position: fixed; bottom: -11%; left: 44%; border-radius: 3px; box-shadow: #558833 1px 3px 15px; background: #82ab4b; color: #fff; text-decoration: none; cursor: pointer; opacity: 0; z-index: 10; transition: 2s;}
@-webkit-media (min-width:700px) {#to-up {left: 87%; width: 70px;}}
@media (min-width:700px) {#to-up {left: 87%; width: 70px;}}
@media (min-width:1000px) {#to-up {width: 70px; height: 48px; padding-top: 22px; border-radius: 35px;}}
@media (min-width:1200px) {#to-up {left: 92.5%;}}
@media (min-width:1500px) {#to-up {left: 88%;}}
#to-up:hover {opacity: 1; box-shadow: #eeffcc 0px 0px 25px; transition: 0.5s;}

#pat {position: relative; width: 100%; max-width: 900px; height: 45vw; min-height: 150px; white-space: nowrap; transition: 1s;}
@media (min-width: 990px) {#pat {height: 410px;}}

#prevleft {position: absolute; width: 28%; max-width: 295px; top: 10%; left: 15%; cursor: pointer; background: #fff; box-shadow: #777777 0px 7px 15px; transition: 1s;}
@media (min-width: 990px) {#prevleft {top: 5%;}}
#prevleft:focus {width: 100%; max-width: 750px; top: -70%; left: 0%; z-index: 10; outline: none; transition: 1s;}

#prevcenter {position: absolute; width: 28%; max-width: 295px; top: 10%; left: 36%; cursor: pointer; background: #fff; box-shadow: #777777 0px 7px 15px; transition: 1s;}
@media (min-width: 990px) {#prevright {top: 5%; right: 15%;}}
#prevcenter:focus {width: 100%; max-width: 750px; top: -70%; left: 7vw; z-index: 10; outline: none; transition: 1s;}

#prevright {position: absolute; width: 28%; max-width: 295px; top: 10%; right: 15%; cursor: pointer; background: #fff; box-shadow: #777777 0px 7px 15px; transition: 1s;}
@media (min-width: 990px) {#prevright {top: 5%; right: 15%;}}
#prevright:focus {width: 100%; max-width: 750px; top: -70%; right: 0%; z-index: 10; outline: none; transition: 1s;}

#licens {position: relative; width: 100%; max-width: 900px; height: 180px; white-space: nowrap; transition: 1s;}
@media (min-width: 430px) {#licens {height: 230px;}}
@media (min-width: 510px) {#licens {height: 300px;}}
@media (min-width: 700px) {#licens {height: 400px;}}
@media (min-width: 990px) {#licens {height: 530px;}}

#lic1 {position: absolute; width: 28%; max-width: 295px; top: 18%; left: 0%; cursor: pointer; background: #fff; box-shadow: #777777 0px 7px 15px; transition: 1s;}
@media (min-width: 990px) {#lic1 {top: 17%;}}
#lic1:focus {width: 100%; max-width: 500px; top: -15%; left: 0%; z-index: 10; outline: none; transition: 1s;}

#lic2 {position: absolute; width: 28%; max-width: 295px; top: 18%; left: 0px; right: 0px; margin: auto; cursor: pointer; background: #fff; box-shadow: #777777 0px 7px 15px; transition: 1s;}
@media (min-width: 990px) {#lic2 {top: 17%; left: 0px; right: 0px; margin: auto;}}
#lic2:focus {width: 100%; max-width: 500px; top: -15%; left: 0px; right: 0px; margin: auto; z-index: 10; outline: none; transition: 1s;}

#lic3 {position: absolute; width: 28%; max-width: 295px; top: 18%; right: 0%; cursor: pointer; background: #fff; box-shadow: #777777 0px 7px 15px; transition: 1s;}
@media (min-width: 990px) {#lic3 {top: 17%; right: 0px;}}
#lic3:focus {width: 100%; max-width: 500px; top: -15%; right: 0%; z-index: 10; outline: none; transition: 1s;}

#anons {position: relative; padding: 3%; color: #fff; text-shadow: #444444 1px 1px 3px; background: #82ab4b; border: solid 1px #77aa55; transition: 1s;}
#anons:hover {box-shadow: #999 0px 5px 15px; text-shadow: #444444 -1px -1px 1px; transition: 1s;}

#visitka {width: 94%; max-width: 280px; padding: 3%; background: #f9f9f9; box-shadow: #777777 0px 15px 25px; -webkit-transform: rotateX(0deg) scale(0.8); transform: rotateX(85deg) scale(0.8); transition: 1s;}
#visitka:hover {-webkit-transform: rotateX(0deg) scale(1); transform: rotateX(0deg) scale(1); background: #fff; box-shadow: #777777 0px 10px 35px; transition: 1s;}

#visitka1 {width: 94%; max-width: 280px; padding: 3%; background: #f9f9f9; box-shadow: #777777 0px 15px 25px; -webkit-transform: rotateX(0deg) scale(0.8); transform: rotateX(70deg) scale(0.8); transition: 1s;}
#visitka1:hover {transform: rotateX(0deg) scale(1); -webkit-transform: rotateX(0deg) scale(1); background: #fff; box-shadow: #777777 0px 10px 35px; transition: 1s;}

#visitka2 {width: 94%; max-width: 280px; padding: 3%; background: #f9f9f9; box-shadow: #777777 0px 15px 25px; -webkit-transform: rotateX(0deg) scale(0.8); transform: rotateX(50deg) scale(0.8); transition: 1s;}
#visitka2:hover {transform: rotateX(0deg) scale(1); -webkit-transform: rotateX(0deg) scale(1); background: #fff; box-shadow: #777777 0px 10px 35px; transition: 1s;}

#person {width: 92%; padding: 4%; margin-bottom: 2%; display: inline-block; vertical-align: top; text-align: left; transition: 0.5s;}
@media (min-width: 400px) {#person {width: 45%; padding: 2%; transition: 0.5s;}}
@media (min-width: 800px) {#person {width: 28%; transition: 0.5s;}}
#person:hover {box-shadow: #999999 0px 10px 15px;}

#blockdzen {width: 100%; height: 328vw; border: 0px; outline: none; overflow-y: hidden; transition: 0.5s;}
@media (min-width: 660px) {#blockdzen {height: 85vw; transition: 0.5s;}}
@media (min-width: 990px) {#blockdzen {height: 846px; transition: 0.5s;}}


/* === Библиотека на главной === */

#library {max-width: 900px; max-height: 470px; margin-bottom: 5%; background: #f7f7f7; box-shadow: #ccc 0px 10px 15px inset; transition: 1s;}
#trans {position: relative; max-height: 470px; white-space: nowrap; overflow-x: hidden; overflow-y: hidden; transition: 1s;}

.book {position: relative; width: 27%; min-width: 58px; margin: 3%; display: inline-block; line-height: 0px; transform: scale(0.8); -webkit-transform: scale(0.8); box-shadow: #777 0px 15px 10px; opacity: 0.9; animation: books 50s infinite linear; -webkit-animation: books 50s infinite linear; transition: 2s;}
.book:hover {transform: scale(1); -webkit-transform: scale(1); box-shadow: #444 0px 10px 25px; opacity: 1; transition: 0.5s;}

@-webkit-keyframes books {0% {left: 0px;} 10% {left: 0px;} 12.5% {left: -34%;} 22.5% {left: -34%;} 25% {left: -67%;} 35% {left: -67%;} 37.5% {left: -100%;} 47.5% {left: -100%;} 50% {left: -134%;} 60% {left: -134%;} 62.5% {left: -167%;} 72.5% {left: -167%;} 75% {left: -134%;} 85% {left: -134%;} 87.5% {left: -67%;} 97.5% {left: -67%;} 100% {left: 0px;}}

@keyframes books {0% {left: 0px;} 10% {left: 0px;} 12.5% {left: -34%;} 22.5% {left: -34%;} 25% {left: -67%;} 35% {left: -67%;} 37.5% {left: -100%;} 47.5% {left: -100%;} 50% {left: -134%;} 60% {left: -134%;} 62.5% {left: -167%;} 72.5% {left: -167%;} 75% {left: -134%;} 85% {left: -134%;} 87.5% {left: -67%;} 97.5% {left: -67%;} 100% {left: 0px;}}

.banoff {position: absolute; top: 220px; left: -308px; width: 280px; height: 280px; padding: 18px; background: url(../dec/onbtn.png); background-repeat: no-repeat; background-position: right; border: solid 1px #82ab4b; border-radius: 4px; box-shadow: #777777 0px 10px 35px; outline: none; cursor: pointer; transition: 1s;}
@media (min-width: 500px) {.banoff {top: 225px; left: -300px; height: 300px; transition: 1s;}}
@media (min-width: 900px) {.banoff {top: 230px; height: 350px; transition: 1s;}}
@media (min-width: 1800px) {.banoff {top: 250px; left: -320px; width: 300px; height: 400px; transition: 1s;}}

.banon {position: absolute; top: 220px; left: 0px; right: 0px; margin: auto; width: 280px; height: 280px; padding: 18px; background: url(../dec/ofbtn.png); background-repeat: no-repeat; background-position: top right; border: solid 1px #82ab4b; border-radius: 4px; box-shadow: #777777 0px 10px 35px; outline: none; cursor: pointer; transition: 1s;}
@media (min-width: 500px) {.banon {top: 225px; height: 300px; transition: 1s;}}
@media (min-width: 900px) {.banon {top: 230px; height: 350px; transition: 1s;}}
@media (min-width: 1800px) {.banon {top: 250px; width: 300px; height: 400px; transition: 1s;}}

#bnr {width: 100%; height: 100%; border-radius: 3px; border: none; scrolling: no;}


/* === Шапка === */

#head {position: absolute; top: 0px; width: 100%; height: 145px; background: #fff; padding-top: 25px; text-align: left; font-size: 20px; line-height: 25px; color: #007700; transition: 1s;}
@media (min-width: 490px) {#head {font-size: 30px; line-height: 30px; transition: 1s;}}
@media (min-width: 770px) {#head {font-size: 40px; line-height: 40px; transition: 1s;}}
@media (min-width: 990px) {#head {font-size: 52px; line-height: 60px; transition: 1s;}}
@media (min-width: 1200px) {#head {font-size: 70px; transition: 1s;}}
@media (min-width: 1500px) {#head {font-size: 90px; transition: 1s;}}

#min {font-size: 12px; line-height: 0px; color: #82ab4b; transition: 1s;}
@media (min-width: 490px) {#min {font-size: 21px; line-height: 28px; transition: 1s;}}
@media (min-width: 770px) {#min {font-size: 28px; line-height: 20px; transition: 1s;}}
@media (min-width: 990px) {#min {font-size: 34px; line-height: 14px; transition: 1s;}}

#tel {position: absolute; top: 125px; right: 5%; font-size: 17px; line-height: 28px; font-weight: 400; color: #008800; text-decoration: none; transition: 1s;}
@media (min-width: 480px) {#tel {top: 118px; right: 5%; font-size: 30px; line-height: 30px; transition: 1s;}}
@media (min-width: 1400px) {#tel {top: 115px; right: 3%; font-size: 38px; line-height: 38px; transition: 1s;}}
@media (min-width: 1900px) {#tel {top: 105px; right: 2%; font-size: 44px; line-height: 44px; transition: 1s;}}
@media (min-width: 2300px) {#tel {top: 105px; right: 10%; font-size: 44px; line-height: 44px; transition: 1s;}}

#socialhost {position: absolute; top: 4px; left: 0px; width: 99%; text-align: center; padding-right: 1%; transition: 1s;}
@media (min-width: 480px) {#socialhost {text-align: right; transition: 1s;}}
@media (min-width: 770px) {#socialhost {top: 8px; transition: 1s;}}
@media (min-width: 990px) {#socialhost {top: 11px; transition: 1s;}}
@media (min-width: 12000px) {#socialhost {top: 7px; transition: 1s;}}

#line {position: absolute; top: 170px; width: 100%; height: 30px; padding-top: 10px; white-space: nowrap; background: #82ab4b; color: #fff;}
#header {position: absolute; top: 0px; left: 0px; width: 100%; height: 170px; scrolling: no; border: 0px;}



/* === Горизонтальное меню === */

#uplead {position: fixed; top: 0px; left: 0px; width: 100%; height: 32px; background: #82ab4b; color: #fff; padding-top: 10px; white-space: nowrap; translate3d(0px, 0px, 10px); box-shadow: #557733 0px 5px 15px; opacity: 0.9;}

#uplinem {position: absolute; left: 0px; width: 8%; outline: none; color: #fff; cursor: pointer;}
@media (min-width: 630px) {#uplinem {display: none;}}
#uplinem:focus #menu {display: block; opacity: 1;}

#menu {position: absolute; left: 2%; top: 27px; width: 100px; height: 90px; line-height: 30px; text-align: left; padding: 10px; background: #82ab4b; display: none; overflow: auto; color: #fff; box-shadow: #777777 0px 5px 15px; opacity: 0; transition: 1s;}
#menu:hover {display: block; opacity: 1;}
@-webkit-media (min-width: 390px) {#menu {width: 120px; height: 100px; padding: 15px; transition: 1s;}}
@media (min-width: 390px) {#menu {width: 120px; height: 100px; padding: 15px; transition: 1s;}}

.but1 {position: absolute; left: 8%; width: 37%; color: #fff; text-decoration: none;}
@media (min-width: 630px) {.but1 {position: relative; left: 0px; padding-left: 1%; padding-right: 1%;}}
@media (min-width: 860px) {.but1 {padding-left: 3%; padding-right: 3%;}}
.but1:hover {color: #fff; text-shadow: #fff 0px 0px 9px;}

.but1r {position: absolute; left: 8%; width: 37%; color: #fff; text-decoration: none; text-shadow: #fff 0px 0px 9px;}
@media (min-width: 630px) {.but1r {position: relative; left: 0px; padding-left: 1%; padding-right: 1%;}}
@media (min-width: 860px) {.but1r {padding-left: 3%; padding-right: 3%;}}

.but2 {position: absolute; left: 45%; width: 32%; outline: none; color: #fff; cursor: pointer; display: inline-block;}
@media (min-width: 630px) {.but2 {position: relative; left: 0px; width: 15%;}}
.but2:hover {color: #fff; text-shadow: #fff 0px 0px 9px;}
.but2:focus .diag {display: block;}

.diag {position: absolute; left: 2%; top: 27px; width: 157px; height: 90px; line-height: 30px; text-align: left; padding: 10px; background: #82ab4b; display: none; overflow: hidden; color: #fff; box-shadow: #777777 0px 5px 15px;}
.diag:hover {display: block;}
.diag:focus {display: block;}
@-webkit-media (min-width: 500px) {.diag {width: 200px; height: 100px; padding: 15px; transition: 1s;}}
@-webkit-media (min-width: 990px) {.diag {height: 120px; padding: 5%; line-height: 40px; transition: 1s;}}
@media (min-width: 500px) {.diag {width: 200px; height: 100px; padding: 15px; transition: 1s;}}
@media (min-width: 990px) {.diag {height: 120px; padding: 5%; line-height: 40px; transition: 1s;}}

.but3 {position: relative; color: #fff; text-decoration: none; display: none;}
@media (min-width: 630px) {.but3 {display: inline-block; padding-left: 1%; padding-right: 1%;}}
@media (min-width: 860px) {.but3 {padding-left: 3%; padding-right: 3%;}}
.but3:hover {color: #fff; text-shadow: #fff 0px 0px 9px;}

.but3r {position: relative; color: #fff; text-decoration: none; text-shadow: #fff 0px 0px 9px; display: none;}
@media (min-width: 630px) {.but3r {display: inline-block; padding-left: 1%; padding-right: 1%;}}
@media (min-width: 860px) {.but3r {padding-left: 3%; padding-right: 3%;}}

.but4 {position: absolute; left: 77%; width: 20%; color: #fff; text-decoration: none;}
@media (min-width: 630px) {.but4 {position: relative; left: 0px; padding-left: 1%; padding-right: 1%;}}
@media (min-width: 860px) {.but4 {padding-left: 3%; padding-right: 3%;}}
.but4:hover {color: #fff; text-shadow: #fff 0px 0px 9px;}

.but4r {position: absolute; left: 77%; width: 20%; color: #fff; text-decoration: none; text-shadow: #fff 0px 0px 9px;}
@media (min-width: 630px) {.but4r {position: relative; left: 0px; padding-left: 1%; padding-right: 1%;}}
@media (min-width: 860px) {.but4r {padding-left: 3%; padding-right: 3%;}}

#vidhref {position: relative; top: -4px; background: #e42; color: #fff; border-radius: 0px; text-decoration: none; animation: trads 5s  3 linear; -webkit-animation: hrevs 4s 3 linear; transition: 0.7s;}
#vidhref:hover {animation-play-state: paused, running, running; background: #f75; border-radius: 20px; box-shadow: #f53 0px 0px 10px; transition: 0.2s;}

#tirads {position: relative; top: -4px; background: #82ab4b; color: #fff; border-radius: 0px; text-decoration: none; animation: trads 5s  3 linear; -webkit-animation: trads 5s 3 linear; transition: 0.7s;}
#tirads:hover {animation-play-state: paused, running, running; background: gold; border-radius: 20px; box-shadow: gold 0px 0px 10px; transition: 0.2s;}

@-webkit-keyframes trads {0% {background: #82ab4b;} 20% {background: #82ab4b;} 25% {background: gold;} 30% {background: #82ab4b;} 35% {background: #82ab4b;} 40% {background: gold;} 45% {background: #82ab4b;} 100% {background: #82ab4b;}}
@keyframes trads {0% {background: #82ab4b;} 20% {background: #82ab4b;} 25% {background: gold;} 30% {background: #82ab4b;} 35% {background: #82ab4b;} 40% {background: gold;} 45% {background: #82ab4b;} 100% {background: #82ab4b;}}

@-webkit-keyframes hrevs {0% {background: #e42;} 20% {background: #e42;} 25% {background: gold;} 30% {background: #e42;} 35% {background: #e42;} 40% {background: gold;} 45% {background: #e42;} 100% {background: #e42;}}
@keyframes hrevs {0% {background: #e42;} 20% {background: #e42;} 25% {background: gold;} 30% {background: #e42;} 35% {background: #e42;} 40% {background: gold;} 45% {background: #e42;} 100% {background: #e42;}}


/* === Подвал === */

#bsmnt {width: 100%; bottom: 0px; padding-top: 2%; padding-bottom: 1%; color: #fff; font-size: 12px; text-shadow: #444444 1px 1px 3px; background: #82ab4b; transition: 1s;}
@media (min-width: 710px) {#bsmnt {padding-top: 3%; padding-bottom: 3%; font-size: 14px; transition: 1s;}}

#cellar {width: 100%; height: 650px; max-width: 901px; line-height: 30px; border: 0px; background: #82ab4b;}
@media (min-width: 700px) {#cellar {height: 200px; transition: 1s;}}

#cell {width: 100%; height: 790px; max-width: 900px; line-height: 30px; border: 0px; background: #82ab4b;}
@media (min-width: 510px) {#cell {height: 810px; transition: 1s;}}
@media (min-width: 717px) {#cell {height: 350px; transition: 1s;}}

#frm {position: relative; color: #fff; text-decoration: none; font-size: 17px; margin-top: 7px; padding: 30px; padding-top: 5px; padding-bottom: 7px; background: #cc3300; border-radius: 20px; box-shadow: #775533 0px 7px 15px; z-index: 1; transition: 1s;}
#frm:hover {background: #ff5500; border-radius: 20px; box-shadow: #ee7700 0px 0px 25px; transition: 0.3s;}

#bsl {color: #fff; text-shadow: #444444 1px 1px 3px; text-decoration: none; transition: 1s;}
@media (min-width: 700px) {#bsl {width: 35%; text-align: left; padding-left: 4%; float: left; transition: 1s;}}
@media (min-width: 900px) {#bsl {padding-left: 0px; transition: 1s;}}

#bsr {color: #fff; text-shadow: #444444 1px 1px 3px; text-decoration: none; transition: 1s;}
@media (min-width: 700px) {#bsr {width: 23%; text-align: left; padding-left: 4%; float: right; transition: 1s;}}

#bsc {position: relative; width: 110px; background: #82ab4b; border-radius: 1px;}
@media (min-width: 700px) {#bsc {top: 17%; width: 110px; transition: 1s;}}

#copy {width: 92%; max-width: 901px; background: #82ab4b; padding: 4%; color: #fff; font-size: 12px; text-shadow: #444444 1px 1px 3px; transition: 1s;}
@media (min-width: 500px) {#copy {font-size: 14px; padding-top: 3%; transition: 1s;}}
@media (min-width: 1900px) {#copy {font-size: 16px; transition: 1s;}}