body{font-family:"Courier New",sans-serif;background:#f7fcfc;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word}.white{height:100vh}.white:before{z-index:1000;content:"";position:absolute;top:0;left:0;right:0;height:60vh;background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(rgba(255,255,255,0)));background-image:linear-gradient(-180deg,#ffffff 0%,rgba(255,255,255,0) 100%)}.white:after{z-index:1000;content:"";position:absolute;bottom:0;left:0;right:0;height:20vh;background-image:-webkit-gradient(linear,left bottom,left top,from(#ebebeb),to(rgba(235,235,235,0)));background-image:linear-gradient(0deg,#ebebeb 0%,rgba(235,235,235,0) 100%)}.squares{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;overflow:hidden}.square{-webkit-animation:squares 9.5s linear infinite;animation:squares 9.5s linear infinite;-ms-flex-item-align:end;align-self:flex-end;width:1em;height:1em;-webkit-transform:translateY(100%);transform:translateY(100%);background:#ebebeb}.square:nth-child(2){height:1.5em;width:3em;-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-duration:17s;animation-duration:17s;-webkit-filter:blur(5px)}.square:nth-child(3){height:2em;width:1em;-webkit-animation-delay:1.5s;animation-delay:1.5s;-webkit-animation-duration:8s;animation-duration:8s;-webkit-filter:blur()}.square:nth-child(4){height:1em;width:1.5em;-webkit-animation-delay:0.5s;animation-delay:0.5s;-webkit-filter:blur(3px);-webkit-animation-duration:13s;animation-duration:13s}.square:nth-child(5){height:1.25em;width:2em;-webkit-animation-delay:4s;animation-delay:4s;-webkit-filter:blur(2px);-webkit-animation-duration:11s;animation-duration:11s}.square:nth-child(6){height:2.5em;width:2em;-webkit-animation-delay:2s;animation-delay:2s;-webkit-filter:blur(1px);-webkit-animation-duration:9s;animation-duration:9s}.square:nth-child(7){height:5em;width:2em;-webkit-filter:blur(2.5px);-webkit-animation-duration:12s;animation-duration:12s}.square:nth-child(8){height:1em;width:3em;-webkit-animation-delay:5s;animation-delay:5s;-webkit-filter:blur(6px);-webkit-animation-duration:18s;animation-duration:18s}.square:nth-child(9){height:1.5em;width:2em;-webkit-filter:blur(0.5px);-webkit-animation-duration:9s;animation-duration:9s}.square:nth-child(9){height:3em;width:2.4em;-webkit-animation-delay:6s;animation-delay:6s;-webkit-filter:blur(0.5px);-webkit-animation-duration:12s;animation-duration:12s}@-webkit-keyframes squares{0%{-webkit-transform:translateY(100%) rotate(-50deg);transform:translateY(100%) rotate(-50deg)}to{-webkit-transform:translateY(calc(-100vh + -100%)) rotate(20deg);transform:translateY(calc(-100vh + -100%)) rotate(20deg)}}@keyframes squares{0%{-webkit-transform:translateY(100%) rotate(-50deg);transform:translateY(100%) rotate(-50deg)}to{-webkit-transform:translateY(calc(-100vh + -100%)) rotate(20deg);transform:translateY(calc(-100vh + -100%)) rotate(20deg)}}*{-webkit-box-sizing:border-box;box-sizing:border-box}@-ie-keyframes clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-ie-keyframes clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-ie-keyframes clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-ie-keyframes clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-ie-keyframes clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-ie-keyframes counter-clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@-ie-keyframes counter-clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@-ie-keyframes counter-clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@-ie-keyframes counter-clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@-ie-keyframes counter-clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}.gearbox{background:#1e1e1e;margin:50px auto;height:170px;width:220px;position:relative;border:none;overflow:hidden;border-radius:10px;border:1px solid rgba(255,255,255,0.2);border-bottom-color:rgba(255,255,255,0.3);-webkit-box-shadow:0px 2px 13px 0px rgba(255,255,255,0.1);box-shadow:0px 2px 13px 0px rgba(255,255,255,0.1)}.gearbox:after{border-radius:10px;content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:99;-webkit-box-shadow:inset 0px 0px 40px black;box-shadow:inset 0px 0px 40px black;-webkit-transition:background 0.2s;transition:background 0.2s}.gear{position:absolute;height:60px;width:60px;-webkit-box-shadow:0px -1px 0px 0px #888888,0px 1px 0px 0px black;box-shadow:0px -1px 0px 0px #888888,0px 1px 0px 0px black;border-radius:30px}.gear.large{height:120px;width:120px;border-radius:60px}.gear.large:after{height:96px;width:96px;border-radius:48px;margin-left:-48px;margin-top:-48px}.gear:first-child{top:10px;left:10px}.gear:nth-child(2){top:61px;left:60px}.gear:nth-child(3){top:112px;left:10px}.gear:nth-child(4){top:14px;left:129px}.gear:after{content:"";position:absolute;height:36px;width:36px;border-radius:36px;background:#1e1e1e;top:50%;left:50%;margin-left:-18px;margin-top:-18px;z-index:3;-webkit-box-shadow:0px 0px 10px rgba(255,255,255,0.1),inset 0px 0px 10px rgba(0,0,0,0.1),inset 0px 2px 0px 0px #080808,inset 0px -1px 0px 0px #888888;box-shadow:0px 0px 10px rgba(255,255,255,0.1),inset 0px 0px 10px rgba(0,0,0,0.1),inset 0px 2px 0px 0px #080808,inset 0px -1px 0px 0px #888888}.gear-inner{position:relative;height:100%;width:100%;background:#555555;border-radius:30px;border:1px solid rgba(255,255,255,0.1)}.large .gear-inner{border-radius:60px}.gear:first-child .gear-inner{-ie-animation:counter-clockwise 3s infinite linear;-webkit-animation:counter-clockwise 3s infinite linear;animation:counter-clockwise 3s infinite linear}.gear:nth-child(2) .gear-inner{-ie-animation:clockwise 3s infinite linear;-webkit-animation:clockwise 3s infinite linear;animation:clockwise 3s infinite linear}.gear:nth-child(3) .gear-inner{-ie-animation:counter-clockwise 3s infinite linear;-webkit-animation:counter-clockwise 3s infinite linear;animation:counter-clockwise 3s infinite linear}.gear:nth-child(4) .gear-inner{-ie-animation:counter-clockwise 6s infinite linear;-webkit-animation:counter-clockwise 6s infinite linear;animation:counter-clockwise 6s infinite linear}.gear-inner .bar{background:#555555;height:16px;width:78px;position:absolute;left:50%;margin-left:-39px;top:50%;margin-top:-8px;border-radius:2px;border-left:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(255,255,255,0.1)}.large .gear-inner .bar{margin-left:-69px;width:138px}.gear-inner .bar:nth-child(2){-webkit-transform:rotate(60deg);transform:rotate(60deg)}.gear-inner .bar:nth-child(3){-webkit-transform:rotate(120deg);transform:rotate(120deg)}.gear-inner .bar:nth-child(4){-webkit-transform:rotate(90deg);transform:rotate(90deg)}.gear-inner .bar:nth-child(5){-webkit-transform:rotate(30deg);transform:rotate(30deg)}.gear-inner .bar:nth-child(6){-webkit-transform:rotate(150deg);transform:rotate(150deg)}header{background:#fffdd1 no-repeat center top/cover;border:4px solid #f0b105;border-radius:10px;max-width:1060px;margin:0 auto;margin-top:20px;margin-bottom:20px;padding-bottom:100px;-webkit-box-shadow:0 0.1rem 1.5rem rgba(40,36,89,0.2),0 0.25rem 0.4rem rgba(40,36,89,0.15);box-shadow:0 0.1rem 1.5rem rgba(40,36,89,0.2),0 0.25rem 0.4rem rgba(40,36,89,0.15)}.menu_1{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}ul{padding:0}ul>a{-ms-flex-item-align:end;align-self:flex-end}.tab_1{border:5px solid#fc9628;border-radius:20px;margin:30px 30px 30px 30px;padding:20px;text-align:left;-webkit-text-decoration:none;text-decoration:none;color:#183418;font-style:normal;font-weight:bold;font-size:20px;line-height:1.8em;display:block;-webkit-box-shadow:0px 28px 29px -29px rgba(0,0,0,1);box-shadow:0px 28px 29px -29px rgba(0,0,0,1);background:#fff;backdrop-filter:blur(18.3px);-webkit-backdrop-filter:blur(18.3px)}.CategoriesButton_2{border:5px solid#fc9628;border-radius:20px;margin-top:30px;margin-bottom:30px;margin:0 30px;padding:20px;text-align:center;-webkit-text-decoration:none;text-decoration:none;color:#183418;font-style:normal;font-weight:bold;font-size:18px;line-height:1.8em;display:block;-webkit-box-shadow:0px 28px 29px -29px rgba(0,0,0,1);box-shadow:0px 28px 29px -29px rgba(0,0,0,1);background:rgba(255,235,187,1);backdrop-filter:blur(18.3px);-webkit-backdrop-filter:blur(18.3px)}.termin,.vartist{text-align:center;-webkit-text-decoration:none;text-decoration:none;color:#183418;font-style:normal;font-weight:bold;font-size:20px;line-height:1.8em}.price{background:#fff;border:3px solid #cf871d;border-radius:9px;width:170px;height:40px;margin-left:auto;margin-right:auto;margin-top:10px;margin-bottom:10px;text-align:center;-webkit-text-decoration:none;text-decoration:none;color:#183418;font-style:normal;font-weight:bold;font-size:20px;line-height:1.8em;display:block;-webkit-box-shadow:0px 28px 29px -19px rgba(0,0,0,1);box-shadow:0px 28px 29px -19px rgba(0,0,0,1);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f4f1ee));background-image:linear-gradient(top,#fff,#f4f1ee)}.price:hover{background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f4f1ee));background-image:linear-gradient(top,#fff,#f4f1ee)}.price1{background:#fff;border:3px solid #cf871d;border-radius:9px;width:150px;height:40px;margin-left:auto;margin-right:auto;margin-top:10px;margin-bottom:10px;text-align:center;-webkit-text-decoration:none;text-decoration:none;color:#183418;font-style:normal;font-weight:bold;font-size:20px;line-height:1.8em;display:block;-webkit-box-shadow:0px 28px 29px -19px rgba(0,0,0,1);box-shadow:0px 28px 29px -19px rgba(0,0,0,1);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f4f1ee));background-image:linear-gradient(top,#fff,#f4f1ee)}.price1:hover{background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f4f1ee));background-image:linear-gradient(top,#fff,#f4f1ee)}.button_1{background:#fff;border:4px solid #cf871d;border-radius:50px;width:240px;height:40px;margin-top:50px;margin-bottom:40px;margin-right:30px;text-align:center;-webkit-text-decoration:none;text-decoration:none;color:#183418;font-style:normal;font-weight:bold;font-size:20px;line-height:1.8em;display:block;-webkit-box-shadow:0px 28px 29px -19px rgba(0,0,0,1);box-shadow:0px 28px 29px -19px rgba(0,0,0,1);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f4f1ee));background-image:linear-gradient(top,#fff,#f4f1ee)}.button_1:hover{background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f4f1ee));background-image:linear-gradient(top,#fff,#f4f1ee)}.button_2{background:#fff;border:4px solid #cf871d;border-radius:50px;width:240px;height:40px;margin-top:50px;margin-bottom:40px;margin-right:30px;text-align:center;-webkit-text-decoration:none;text-decoration:none;color:#183418;font-style:normal;font-weight:bold;font-size:20px;line-height:1.7em;display:block;-webkit-box-shadow:0px 28px 29px -19px rgba(0,0,0,1);box-shadow:0px 28px 29px -19px rgba(0,0,0,1);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f4f1ee));background-image:linear-gradient(top,#fff,#f4f1ee)}.button_2:hover{background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f4f1ee));background-image:linear-gradient(top,#fff,#f4f1ee)}h1{-webkit-text-decoration:none;text-decoration:none;color:#000e1c;text-align:center;font-size:24px;line-height:1.7em;font-weight:bold;display:block;margin:15px;text-shadow:7px 7px 5px rgba(147,150,150,0.47)}h2{-webkit-text-decoration:none;text-decoration:none;color:#000e1c;text-align:center;font-size:26px;line-height:1.7em;font-weight:bold;display:block;margin-top:-20px;text-shadow:7px 7px 5px rgba(147,150,150,0.47)}p{color:#183418;font-style:normal;font-weight:bold;font-size:20px;line-height:1.8em;display:block}li{list-style-type:none}marquee{height:60px;margin-left:30px;margin-right:30px;margin-top:5px;font-weight:bold;-webkit-text-decoration:none;text-decoration:none;color:#005640;font-style:normal;font-size:30px;line-height:2.4em;text-shadow:7px 7px 5px rgba(147,150,150,0.47)}.qrcodetel-mecard{border:5px solid#fc9628;margin-left:50%;margin-top:200px;margin-bottom:-100px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:262px;height:263px;padding:2px 0px 0px 1px;border-radius:10px;-webkit-box-shadow:2px 12px 22px -8px rgba(25,65,27,0.51);box-shadow:2px 12px 22px -8px rgba(25,65,27,0.51)}@media screen and (max-width:768px){.conteiner{min-width:601px}marquee{margin-left:10px;margin-right:10px;font-size:18px}ul>a{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.CategoriesButton_2,.tab_1{margin-left:10px;margin-right:10px}.button_1,.button_2{margin-right:0;margin-left:0}}@media screen and (max-width:600px){.conteiner{min-width:461px}header{}h1{font-size:22px}h2{font-size:18px;line-height:2em}marquee{font-size:18px}.menu_1,.menu_2,.menu_3,.menu_4,.menu_5{}.button_1,.button_2,.button_3,.button_4,.button_5,.button_6,.button_7{}.button_11,.button_12,.button_8,.button_9{}.button_10{}.button_13{}.button_14{}.button_15{}}@media screen and (max-width:460px){.conteiner{min-width:431px}header{}h1{font-size:22px}h2{font-size:18px;line-height:2em}marquee{font-size:18px}.menu_1,.menu_2,.menu_3,.menu_4,.menu_5{}.button_1,.button_2,.button_3,.button_4,.button_5,.button_6,.button_7{}.button_11,.button_12,.button_8,.button_9{}.button_10{}.button_13{}.button_14{}.button_15{}}@media screen and (max-width:430px){.conteiner{min-width:427px}header{}h1{font-size:22px}h2{font-size:18px;line-height:2em}marquee{font-size:18px}.menu_1,.menu_2,.menu_3,.menu_4,.menu_5{}.button_1,.button_2,.button_3,.button_4,.button_5,.button_6,.button_7{}.button_11,.button_12,.button_8,.button_9{}.button_10{}.button_13{}.button_14{}.button_15{}}@media screen and (max-width:426px){.conteiner{min-width:415px}header{}h1{font-size:22px}h2{font-size:18px;line-height:2em}marquee{font-size:18px}.menu_1,.menu_2,.menu_3,.menu_4,.menu_5{}.button_1,.button_2,.button_3,.button_4,.button_5,.button_6,.button_7{}.button_11,.button_12,.button_8,.button_9{}.button_10{}.button_13{}.button_14{}.button_15{}}@media screen and (max-width:414px){.conteiner{min-width:391px}header{}h1{font-size:20px}h2{font-size:18px;line-height:2em}marquee{font-size:18px}.menu_1,.menu_2,.menu_3,.menu_4,.menu_5{}.button_1,.button_2,.button_3,.button_4,.button_5,.button_6,.button_7{}.button_11,.button_12,.button_8,.button_9{}.button_10{}.button_13{}.button_14{}.button_15{}}@media screen and (max-width:390px){.conteiner{min-width:386px}header{}h1{font-size:20px}h2{font-size:18px;line-height:2em}marquee{font-size:18px}.menu_1,.menu_2,.menu_3,.menu_4,.menu_5{}.button_1,.button_2,.button_3,.button_4,.button_5,.button_6,.button_7{}.button_11,.button_12,.button_8,.button_9{}.button_10{}.button_13{}.button_14{}.button_15{}}@media screen and (max-width:385px){.conteiner{min-width:377px}header{}h1{font-size:20px}h2{font-size:18px;line-height:2em}marquee{font-size:18px}.menu_1,.menu_2,.menu_3,.menu_4,.menu_5{}.button_1,.button_2,.button_3,.button_4,.button_5,.button_6,.button_7{}.button_11,.button_12,.button_8,.button_9{}.button_10{}.button_13{}.button_14{}.button_15{}}@media screen and (max-width:376px){.conteiner{min-width:361px}header{}h1{font-size:20px}h2{font-size:18px}.menu_1,.menu_2,.menu_3,.menu_4,.menu_5{}.button_1,.button_2,.button_3,.button_4,.button_5,.button_6,.button_7{}.button_11,.button_12,.button_8,.button_9{}.button_10{}.button_13{}.button_14{}.button_15{}marquee{font-size:18px}}@media screen and (max-width:360px){.conteiner{min-width:353px}header{}h1{font-size:20px}h2{font-size:18px}.menu_1,.menu_2,.menu_3,.menu_4,.menu_5{}.button_1,.button_2,.button_3,.button_4,.button_5,.button_6,.button_7{}.button_11,.button_12,.button_8,.button_9{}.button_10{}.button_13{}.button_14{}.button_15{}marquee{font-size:18px}}@media screen and (max-width:352px){.conteiner{min-width:320px}header{}h1{font-size:20px}.menu_1,.menu_2,.menu_3,.menu_4,.menu_5{}.button_1,.button_13,.button_2,.button_3,.button_4,.button_5,.button_6,.button_7{}.button_11,.button_12,.button_8,.button_9{}.button_10{}.button_14{}.button_15{}marquee{font-size:18px}} /*# sourceMappingURL=expert_opinion1-dist.css.map */ /*ФОН*/ .white { height: 100vh; &:before { z-index: 1000; content: ""; position: absolute; top: 0; left: 0; right: 0; height: 60vh; background-image: linear-gradient( -180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100% ); } &:after { z-index: 1000; content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 20vh; background-image: linear-gradient( 0deg, #ebebeb 0%, rgba(235, 235, 235, 0) 100% ); } } .squares { height: 100%; display: flex; justify-content: space-around; overflow: hidden; } .square { animation: squares 9.5s linear infinite; align-self: flex-end; width: 1em; height: 1em; transform: translateY(100%); background: #ebebeb; &:nth-child(2) { height: 1.5em; width: 3em; animation-delay: 1s; animation-duration: 17s; -webkit-filter: blur(5px); } &:nth-child(3) { height: 2em; width: 1em; animation-delay: 1.5s; animation-duration: 8s; -webkit-filter: blur(); } &:nth-child(4) { height: 1em; width: 1.5em; animation-delay: 0.5s; -webkit-filter: blur(3px); animation-duration: 13s; } &:nth-child(5) { height: 1.25em; width: 2em; animation-delay: 4s; -webkit-filter: blur(2px); animation-duration: 11s; } &:nth-child(6) { height: 2.5em; width: 2em; animation-delay: 2s; -webkit-filter: blur(1px); animation-duration: 9s; } &:nth-child(7) { height: 5em; width: 2em; -webkit-filter: blur(2.5px); animation-duration: 12s; } &:nth-child(8) { height: 1em; width: 3em; animation-delay: 5s; -webkit-filter: blur(6px); animation-duration: 18s; } &:nth-child(9) { height: 1.5em; width: 2em; -webkit-filter: blur(0.5px); animation-duration: 9s; } &:nth-child(9) { height: 3em; width: 2.4em; animation-delay: 6s; -webkit-filter: blur(0.5px); animation-duration: 12s; } } @keyframes squares { from { transform: translateY(100%) rotate(-50deg); } to { transform: translateY(calc(-100vh + -100%)) rotate(20deg); } } /*ФОН*/ /*Логотип*/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ie-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ie-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ie-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ie-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ie-keyframes clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-moz-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-o-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-ie-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-moz-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-o-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-ie-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-moz-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-o-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-ie-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-moz-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-o-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-ie-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-moz-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-o-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @-ie-keyframes counter-clockwise { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } .gearbox { background: #1e1e1e; margin: 50px auto; height: 170px; width: 220px; position: relative; border: none; overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); border-bottom-color: rgba(255, 255, 255, 0.3); -webkit-box-shadow: 0px 2px 13px 0px rgba(255, 255, 255, 0.1); -moz-box-shadow: 0px 2px 13px 0px rgba(255, 255, 255, 0.1); box-shadow: 0px 2px 13px 0px rgba(255, 255, 255, 0.1); } .gearbox:after { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; -webkit-box-shadow: inset 0px 0px 40px black; -moz-box-shadow: inset 0px 0px 40px black; box-shadow: inset 0px 0px 40px black; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; -o-transition: background 0.2s; transition: background 0.2s; } .gear { position: absolute; height: 60px; width: 60px; -webkit-box-shadow: 0px -1px 0px 0px #888888, 0px 1px 0px 0px black; -moz-box-shadow: 0px -1px 0px 0px #888888, 0px 1px 0px 0px black; box-shadow: 0px -1px 0px 0px #888888, 0px 1px 0px 0px black; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; } .gear.large { height: 120px; width: 120px; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; border-radius: 60px; } .gear.large:after { height: 96px; width: 96px; -webkit-border-radius: 48px; -moz-border-radius: 48px; -ms-border-radius: 48px; -o-border-radius: 48px; border-radius: 48px; margin-left: -48px; margin-top: -48px; } .gear:nth-child(1) { top: 10px; left: 10px; } .gear:nth-child(2) { top: 61px; left: 60px; } .gear:nth-child(3) { top: 112px; left: 10px; } .gear:nth-child(4) { top: 14px; left: 129px; } .gear:after { content: ""; position: absolute; height: 36px; width: 36px; -webkit-border-radius: 36px; -moz-border-radius: 36px; -ms-border-radius: 36px; -o-border-radius: 36px; border-radius: 36px; background: #1e1e1e; top: 50%; left: 50%; margin-left: -18px; margin-top: -18px; z-index: 3; -webkit-box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1), inset 0px 2px 0px 0px #080808, inset 0px -1px 0px 0px #888888; -moz-box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1), inset 0px 2px 0px 0px #080808, inset 0px -1px 0px 0px #888888; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1), inset 0px 2px 0px 0px #080808, inset 0px -1px 0px 0px #888888; } .gear-inner { position: relative; height: 100%; width: 100%; background: #555555; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.1); } .large .gear-inner { -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; border-radius: 60px; } .gear:nth-child(1) .gear-inner { -webkit-animation: counter-clockwise 3s infinite linear; -moz-animation: counter-clockwise 3s infinite linear; -o-animation: counter-clockwise 3s infinite linear; -ie-animation: counter-clockwise 3s infinite linear; animation: counter-clockwise 3s infinite linear; } .gear:nth-child(2) .gear-inner { -webkit-animation: clockwise 3s infinite linear; -moz-animation: clockwise 3s infinite linear; -o-animation: clockwise 3s infinite linear; -ie-animation: clockwise 3s infinite linear; animation: clockwise 3s infinite linear; } .gear:nth-child(3) .gear-inner { -webkit-animation: counter-clockwise 3s infinite linear; -moz-animation: counter-clockwise 3s infinite linear; -o-animation: counter-clockwise 3s infinite linear; -ie-animation: counter-clockwise 3s infinite linear; animation: counter-clockwise 3s infinite linear; } .gear:nth-child(4) .gear-inner { -webkit-animation: counter-clockwise 6s infinite linear; -moz-animation: counter-clockwise 6s infinite linear; -o-animation: counter-clockwise 6s infinite linear; -ie-animation: counter-clockwise 6s infinite linear; animation: counter-clockwise 6s infinite linear; } .gear-inner .bar { background: #555555; height: 16px; width: 78px; position: absolute; left: 50%; margin-left: -39px; top: 50%; margin-top: -8px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(255, 255, 255, 0.1); } .large .gear-inner .bar { margin-left: -69px; width: 138px; } .gear-inner .bar:nth-child(2) { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); } .gear-inner .bar:nth-child(3) { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); } .gear-inner .bar:nth-child(4) { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .gear-inner .bar:nth-child(5) { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } .gear-inner .bar:nth-child(6) { -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); transform: rotate(150deg); } /*Логотип*/