@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Ubuntu:500,700&subset=cyrillic');

:root {
    --font-size-normal: 17px;
    --font-size-medium: 16px;

    --text-color:       #555;
    --dark-grey:        #333;
    --main-red:         #e63b48;
    --grad-to-top:      linear-gradient(to top, rgba(0,0,0,0.2) 0, transparent 9px);
    --grad-to-bottom:   linear-gradient(to bottom, rgba(0,0,0,0.2) 0, transparent 9px)
}

* {font-family: 'PT Sans', sans-serif; margin: 0; padding: 0}

html, body {height: 100%}

#main {margin: 0 0 -200px 0; min-width: 320px; min-height: 100%}
#top {}
#content {}
#content_clear {clear: both; overflow: hidden; height: 200px}
#bottom {min-width: 320px; min-height: 200px}

img {border: none; vertical-align: bottom}

h1 {margin: 40px 0 15px 0; text-transform: uppercase; font-weight: normal; font-size: 30px; color: var(--main-red)}
h2 {margin: 20px 0 15px 0; font-weight: normal; font-size: 30px; color: var(--main-red)}
h2 a:hover, h2 a:active {text-decoration: none}
h3 {margin: 15px 0 10px 0; color: var(--text-color)}

p, ul, ol, table {font-size: var(--font-size-normal); margin-bottom: 10px; color: var(--text-color)}
p.big, ul.big, ol.big, table.big {font-size: 22px}
li {margin-left: 60px}

hr {height: 1px; margin: 20px 0; border: none; background-color: #ddd}

a:link, a:visited {text-decoration: none; color: var(--main-red)}
a:hover, a:active {text-decoration: underline; color: var(--main-red)}
a:hover, a:active, a:focus {outline: none}

div.center {width: 1200px; margin: 0 auto}
h1.center, h2.center, h3.center, p.center {text-align: center}

.left * {text-align: left}

.aw {color: var(--main-red)}
.ok {font-weight: bold; font-size: 18px}
.error {color: var(--main-red)}

.nobr {white-space: nowrap}

a.link, span.link {border-style: solid; border-width: 0 0 1px 0; border-color: rgba(0, 0, 0, 0.1); text-decoration: none; color: var(--main-red); cursor: pointer}
a.link:hover, span.link:hover {color: var(--dark-grey)}

a.nolink {text-decoration: none; color: var(--text-color)}


/* KHTML */
input, textarea {outline: none}

/*** Slider ***/
div.slider {position: relative; width: 100%; height: 100%}
div.slider div.slider_frame {position: relative; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden}

div.slider ul.slider_container {position: absolute; top: 0; left: 0; width: 100%; height: 100%}
div.slider li.slider_slide {position: relative; display: block; width: 100%; height: 100%; margin: 0}
div.slider div.slider_image {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover}
div.slider div.slider_text {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background-image: linear-gradient(to right, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.2) 100%)}

/* Navigation */
div.slider div.slider_prev {position: absolute; z-index: 50; left: 0; top: 0; width: 80px; height: 100%; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAA4CAYAAACVFFp4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA8ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcFJpZ2h0czpNYXJrZWQ9IkZhbHNlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InV1aWQ6OTM0MkE5NDEyN0Y5RTYxMUJCMzA5QkU2REU3RjZBRDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzMxRTBENDUzRTk0MTFFODkxRjNFRjk0NDBFNThGQzEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzMxRTBENDQzRTk0MTFFODkxRjNFRjk0NDBFNThGQzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTMyBXaW5kb3dzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDdhNWZmMzAtZTQ1NC1iMzQ3LTgxZmEtZjNiOWIyYjRmYTU0IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6NGM1MTc2MGYtM2U5NC0xMWU4LTg1N2YtZTY2NTZhNjBhOWI3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+t+ZOXwAAAh5JREFUeNrM2cFOAjEQAFBakBA0akQ+wpMX1IN/4Af7Bx5ELp78BQ9gIlFCEKlTnU3qpAvtdqalyWSybozP7m47bZUxpqWUagk3RbJthuTf1mnJN4vQGG28tohviA2GyQWqMAcQXYw2YlYYXy5Kp/5F+8h9QTB9iFOIc7j3ajNe9/G+rh6nFumWv5fSxZxADAHzgv+EzUP8+T+UzoSxPTMhPWuvBxDHEL3q/dKZMOOax/3kgDqsoFiMg3p2XnYeUFOMr+nSGPj1S/z87VBgNOM40wRzBWkOsYRYp4JSMdeQZg4oqYc4MFOId4iFO1rrfcI0ealFMbEgcUwMSARjcBaOBWXDhICyYnaBsmO2gYpg6kDFMD5QUQwFFce4oL3AUFAbS0lbUg4iMDdcGArqVCCsdUMwt5DeuDC+HupijRuCuYP0ibHkwIityzhA1Vp7hTVuyIr1HtIhRq9a7KnEnQsXtMaun2OtG4J6gHRGV6ApKNpDS6xxZ/gph6Aeca3OgnJBG3wxF/jVTCNQYy6UJhtIxVH0KyuO8n32RVF141Ax1LaBsQhq10idHRUydWRFhc5l2VAxk6sIimymR8/24qgm5Ycoqmk9JIZKKdA4UOz71Kko/n1qrKFTUPz71KkokSK/KYp7nzoJxb1PHYsaEczIt0+tUs9c69aFniOHI5vtWRncukDsB90AVcKHwNFHnCrDqXTUIbDat2PyHwEGAMedN+S8qTdIAAAAAElFTkSuQmCC) no-repeat 50% 50%; cursor: pointer}
div.slider div.slider_next {position: absolute; z-index: 50; right: 0; top: 0; width: 80px; height: 100%; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAA4CAYAAACVFFp4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA8ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcFJpZ2h0czpNYXJrZWQ9IkZhbHNlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InV1aWQ6OTM0MkE5NDEyN0Y5RTYxMUJCMzA5QkU2REU3RjZBRDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUQ5Q0VEMjUzRTk0MTFFODk4NzBEODA3OUE1Q0UwQjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUQ5Q0VEMjQzRTk0MTFFODk4NzBEODA3OUE1Q0UwQjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTMyBXaW5kb3dzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDdhNWZmMzAtZTQ1NC1iMzQ3LTgxZmEtZjNiOWIyYjRmYTU0IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6NGM1MTc2MGYtM2U5NC0xMWU4LTg1N2YtZTY2NTZhNjBhOWI3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+mW2LjwAAAiBJREFUeNrM2c1OAjEQAGBa0BA0akQewpMX0INv4AP7Bh4ELpx8BQ9golFCUKkzOJs0ky79WaalyWSzkGU/utu/qTLGtJRSLVYUO2Ix7ChSOo7PEKEp2nSOiF+IDYXJBaowRxDHFG3CrCm+JVG6BtODuIC4gkf6ikc679H3mj3OoIKvB486EMecQwzgghf6ITwO6PNGqNAaUvRouhBnEH1ATNm/m1JNiaJsUKcCwc0nNVU+lkbxGjqGm84874EoSqdcJInSVme3bdrQSd6URNmgH4gVxAegRqVQvIa2IIgFoG5LoGzQhnrhJcQ7xLwESrPBsziKt7LiKFezL4qq64dEUMox8YrpGIugfD11dlTI0JEVFTqWZUPFDK5ZWl/saC+OSpl+iKKS5kOSqFTQLtRdBKpPc/hutQZsAqpDvQHqPhA1sUCdfYA4CudTXxiAeghEzawF6V5AYivX1GIvMrHqTzDgnz8GXfw/h1/TjNXoPWKqFe8lYJ4CMSOaMq9oTt8I5MJgLuA5EINdxMICNaqhOsw4AjOnVrm0Myr6kDApL7UoJhYkjokBiWCMI2OlDwkTAsqK8YGyY3aBimDqQFlaUyioKMaXp86O8eWps2N8eersmOg8tTQmKU8tiUmewkphkvLUkpjoPLU0xpenHjLMUBqzvY+158r7olM84l4ZfH9NiM8mGNdQxlNEim0CF9/iVI5d6aKbwOrQtsn/BBgAHRwQ5PTMdg4AAAAASUVORK5CYII=) no-repeat 50% 50%; cursor: pointer}
div.slider div.slider_prev, div.slider div.slider_next {transition: background-color 1s}
div.slider div.slider_prev:hover, div.slider div.slider_next:hover {background-color: rgba(0,0,0,0.4)}

div.slider div.slider_bullets {position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 55}
div.slider div.slider_bullets div {float: left; cursor: pointer}
div.slider div.slider_bullets div:before {content: ''; display: block; width: 14px; height: 14px; margin: 8px; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.5)}
div.slider div.slider_bullets div.active:before, div.slider div.slider_bullets div:hover:before {background-color: var(--main-red)}
/* */

/* Slider text */
div.slider div.slider_text a {display: block; width: 100%; height: 100%; text-decoration: none}
div.slider div.slider_text div {}
div.slider div.slider_text h2 {margin: 0; padding-top: 100px; text-transform: uppercase; font-size: 40px; color: #fff}
div.slider div.slider_text h3 {margin-top: 20px; text-transform: none; font-weight: normal; font-size: 28px; color: #fff}
div.slider div.slider_text span.details {display: inline-block; margin-top: 30px; padding: 5px 40px; border: 1px solid #fff; border-radius: 20px; font-size: 20px; color: #fff; transition: 0.2s}
div.slider div.slider_text span.details:hover {color: var(--main-red); background-color: #fff; transition: 0.2s}
/* */
/*** /Slider ***/

/*** Cookie notifier ***/
div#cookie_notifier {position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background-color: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.5)}
div#cookie_notifier div {padding: 20px 10px; position: relative; max-width: 100%}
div#cookie_notifier i {position: absolute; right: 10px; top: 5px; font-style: normal; color: #777; cursor: pointer}
div#cookie_notifier i::before {content: '\2716'}
div#cookie_notifier p {margin: 0; padding: 0; text-align: center; color: #000}
div#cookie_notifier p span {display: inline-block; margin-left: 10px; padding: 6px 10px; color: #fff; background-color: #777; cursor: pointer}
div#cookie_notifier p span:hover {background-color: #555}
/*** /Cookie notifier ***/


/* Info */
div#overlay {position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6)}
div#info_window {position: fixed; z-index: 1010; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; max-width: 100%; margin: 0 auto; padding: 30px; border-radius: 15px; font-size: var(--font-size-normal); background-color: #fff; box-shadow: 0 0 5px 3px rgba(0,0,0,0.4)}
div#info_window div {margin-top: 20px; text-align: center}


/* Design */
.red_button {display: inline-block; padding: 4px 20px; border: 1px solid var(--main-red) !important; border-radius: 18px; text-decoration: none !important; font-size: 17px; color: #fff !important; background-color: var(--main-red); cursor: pointer; transition: 0.2s}
.red_button:hover {color: var(--main-red) !important; background-color: #fff; transition: 0.2s}
.red_button.big {padding: 8px 30px; border-radius: 20px}

a.conversion_phone {border: none !important; text-decoration: none}

div#top_red {height: 20px; background: var(--grad-to-top), url('/images/bg_red.png') repeat 0 0; background-color: #ee5e66}

a#logo {display: block; float: left; width: 250px; height: 130px; text-decoration: none}
a#logo img {width: 241px; height: 72px; margin-top: 23px}
a#logo span {display: block; color: #777; font-size: 17px; letter-spacing: 2px}

div#menu {float: left; max-width: 300px; height: 120px; margin: 10px 0 0 100px}
div#menu ul {display: flex; justify-content: space-between; flex-wrap: wrap}
div#menu ul li {display: block; width: 140px; height: 40px; margin: 10px 0 0 0}
div#menu a {display: block; width: 128px; height: 40px; padding-left: 12px; color: #fff; line-height: 38px; font-style: italic; font-size: 18px; text-decoration: none; background: url('/images/menu_bg.png') no-repeat 100% 0; opacity: 0.8; transition: opacity 0.4s}
div#menu a:hover, div#menu a.current {opacity: 1}
div#menu a span {border-style: solid; border-width: 0 0 1px 0; border-color: rgba(255, 255, 255, 0.2)}

ul.offers {float: left; margin: 10px 0}
ul.offers li {display: block; color: var(--main-red)}

div.top_contacts {float: right; width: 200px; height: 70px; margin-top: 20px; padding: 10px; background-color: #e6e6e6}
div.top_contacts ul {display: block; width: 200px; height: 70px; background-color: #f2f2f2}
div.top_contacts ul li {display: block; margin: 0; padding: 10px 16px 0 0; font-size: 20px; text-align: right}
div.top_contacts ul li a {color: var(--text-color)}
div.top_contacts ul li:nth-child(2) {padding-top: 0px; margin-top: -2px}
div.top_contacts ul li b {color: var(--main-red)}
div.top_contacts ul li a.order {border-style: solid; border-width: 0 0 1px 0; border-color: rgba(0, 0, 0, 0.1); text-decoration: none; font-style: italic; font-size: 18px; color: var(--main-red)}
div.top_contacts ul li a.order:hover {border-color: var(--main-red)}

#slider {height: 400px}

div.top_image {height: 120px; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover}
div.top_image > div {content: ''; display: block; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3)), var(--grad-to-top), var(--grad-to-bottom)/*; transition: 0.4s*/}
div.top_image div.center {line-height: 105px}
div.top_image h1 {display: inline-block; vertical-align: middle; margin: 0; text-transform: none; line-height: 40px; font-size: 40px; color: #fff; text-shadow: 0 0 5px #000, 0 0 20px #000}

h2.big {font-size: 32px}
h1.super_big, h2.super_big {margin-top: 0; text-transform: uppercase}

div.content_left {float: left; width: 850px; margin-bottom: 100px}
div.content_right {float: right; width: 300px; margin-bottom: 100px}

p.breadcrumbs {min-height: 40px; margin: 40px 0 20px 0; width: 700px}

div.block_induce {display: inline-block; width: 300px; margin-bottom: 20px; border: 1px solid #ddd; font-size: 20px}
div.block_induce a {display: block; padding: 15px 0 18px 90px; text-decoration: none; color: var(--text-color)}
div.block_induce a span {font-size: 24px; color: var(--main-red)}
div.block_order {background: url('images/icon_induce_order_small.png') no-repeat 15px 20px}
div.block_brief {background: url('images/icon_induce_brief_small.png') no-repeat 15px 20px}
div.block_tel {background: url('images/icon_induce_tel_small.png') no-repeat 18px 20px}

div.partners {margin-bottom: 40px}
div.partners::after {content: ''; display: block; clear: right}
div.partners p {margin-bottom: 20px; text-align: right; font-weight: bold; font-size: 18px}
div.partners a {display: block; float: right; width: 220px; height: 60px; margin: 0 0 20px 0}
div.partners a.block_reg_ru {background: url('images/lb_regru.jpg') no-repeat 0 0}
div.partners a.block_beget_ru {background: url('images/lb_beget.jpg') no-repeat 0 0}

div.block_sites {margin-bottom: 40px}
div.block_sites::after {content: ''; display: block; clear: right}
div.block_sites p {text-align: right; font-weight: bold; font-size: 18px}
div.block_sites ul {float: right}
div.block_sites li {display: block; width: 160px; margin: 0; padding: 10px 10px 10px 80px; border: 1px solid #ddd; border-width: 1px 0 0 0; background-repeat: no-repeat; background-position: 15px 50%}
div.block_sites li a {text-decoration: none; font-size: 20px; color: #525252}
div.block_sites li.business {background-image: url('/images/icon_business.jpg')}
div.block_sites li.landing {background-image: url('/images/icon_landing.jpg')}
div.block_sites li.exclusive {background-image: url('/images/icon_exclusive.jpg')}
div.block_sites li.online_shop {background-image: url('/images/icon_online_shop.jpg')}
div.block_sites li span {display: block; font-size: 18px; color: var(--main-red)}

a.how_much {display: block; height: 60px; margin-bottom: 40px; padding-left: 90px; background: url('images/icon_how_much.png') no-repeat 0 0}
a.how_much span {display: block; font-size: 24px}

div#bottom {background: var(--grad-to-bottom), url('/images/bg_red.png') repeat 0 0; background-color: #ee5e66}
div#bottom * {color: #fff; font-size: 17px; text-shadow: 0 -1px 0 #b33}
div#bottom a {text-decoration: none; border-style: solid; border-width: 0 0 1px 0; border-color: rgba(255, 255, 255, 0.4)}
div#bottom a:hover {border: none}
div#bottom_contact {float: left; margin-top: 40px}
div#bottom_menu {float: left; margin-top: 40px}
div#bottom_menu ul {float: left; display: block; margin-left: 80px}
div#bottom_menu ul li {display: block; margin: 0}
div#bottom_social {float: right; width: 220px; margin-top: 40px}
div#bottom_social p {margin: 0; height: 24px; text-align: right}
div#bottom_social a {display: inline-block; width: 30px; height: 31px; margin-left: 10px; border: none; background-repeat: no-repeat; background-position: 0 0}
div#bottom a.icon_facebook {background-image: url('/images/icon_facebook.png')}
div#bottom a.icon_twitter {background-image: url('/images/icon_twitter.png')}
div#bottom a.icon_vk {background-image: url('/images/icon_vk.png')}

/*** Carousel ***/
div.carousel {position: relative; width: 100%; height: 460px}
div.carousel > div > ul {position: absolute; display: block; left: 0; top: 0; margin: 0; padding: 0}
div.carousel > div > ul > li {position: relative; display: block; float: left; margin: 0; padding: 0}

/* Navigation */
div.carousel div.carousel_prev {position: absolute; z-index: 10; bottom: 0px; left: 0; width: 40px; height: 40px; cursor: pointer}
div.carousel div.carousel_prev::before {content: '\2190'; font-size: 30px; color: var(--main-red)}
div.carousel div.carousel_next {position: absolute; z-index: 10; bottom: 0px; right: 0; width: 40px; height: 40px; text-align: right; cursor: pointer}
div.carousel div.carousel_next::before {content: '\2192'; font-size: 30px; color: var(--main-red)}
/* */

/* Carousel element */
div.carousel > div > ul > li {margin-right: 39px}
/* */

/*** /Carousel ***/

/*** Pages ***/
/* Front */
div.front_sites {margin: 60px auto 0 auto}
/*div.front_sites ul.websites {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 40px}
div.front_sites ul.websites li {flex-basis: 0; flex-grow: 2; display: block; min-width: 250px; margin: 0 15px 60px 15px; text-align: center}*/

div.front_sites ul.websites {margin: 40px -9px 0 -9px; text-align: center}
div.front_sites ul.websites li {display: inline-block; margin: 0 9px 60px 9px; text-align: center; vertical-align: top}

div.front_sites ul.websites li div {border-radius: 2px; background-repeat: no-repeat; background-position: left 50% bottom 60px; box-shadow: 0 0 10px rgba(0,0,0,0.15)}
div.front_sites ul.websites li div:hover {box-shadow: 0 0 10px rgba(0,0,0,0.4)}
div.front_sites ul.websites li div a {display: block; width: 280px; height: 400px; padding: 30px 0; border: none; text-decoration: none}
div.front_sites ul.websites li.business div {background-image: url('/images/site_business.jpg')}
div.front_sites ul.websites li.landing div {background-image: url('/images/site_landing.jpg')}
div.front_sites ul.websites li.exclusive div {background-image: url('/images/site_exclusive.jpg'); background-position: 50% 100%}
div.front_sites ul.websites li.online_shop div {background-image: url('/images/site_online_shop.jpg')}
div.front_sites ul.websites li h4 {margin: 10px 0; text-align: center; font-size: 26px; font-weight: normal; color: var(--main-red)}
div.front_sites ul.websites li h5 {text-align: center; font-size: 32px; font-weight: normal; color: #525252}
div.front_sites ul.websites li div span.details {margin-top: 280px}
div.front_sites ul.websites li div:hover span.details {color: var(--main-red) !important; background-color: #fff}
div.front_sites ul.websites li a.order {display: inline-block; margin-top: 20px; text-decoration: none; font-size: 18px; cursor: pointer}
div.front_sites ul.websites li a.order:hover {color: var(--dark-grey)}
div.front_sites ul.websites li a.order span {border-style: solid; border-width: 0 0 1px 0; border-color: rgba(0, 0, 0, 0.1)}

div.front_about {background: url('images/front_about_bg.jpg') no-repeat 50% 50%; background-size: cover; background-attachment: fixed}
div.front_about > div {height: 100%; padding: 60px 0 60px 0; background: rgba(0,0,0,0.6) url('images/twill.png') repeat 0 0}
div.front_about h2 {color: #fff; text-shadow: 0 0 5px #000}
div.front_about p {font-size: 17px; color: #fff; text-shadow: 0 0 5px #000, 0 0 10px #000}

div.front_portfolio {padding: 60px 0 40px 0; background: linear-gradient(to top, rgba(255,255,255,0.4) 0, #fff 150px), url('images/paper.jpg') repeat 0 0}
div.front_portfolio p.all {margin: -20px 0 20px 0; text-align: right}

div.front_advantages {padding: 60px 0 80px 0}
ul.block_icons {text-align: center}
ul.block_icons li {display: inline-block; width: 580px; margin: 40px 0 0 0; text-align: left; vertical-align: top}
ul.block_icons li i {float: left; width: 120px; height: 100px; background-repeat: no-repeat; background-position: 0 0}
ul.block_icons li i.design {background-image: url('images/landing/icon_design.png')}
ul.block_icons li i.adaptive {background-image: url('images/landing/icon_adaptive.png')}
ul.block_icons li i.quality {background-image: url('images/landing/icon_quality.png')}
ul.block_icons li i.pages {background-image: url('images/landing/icon_pages.png')}
ul.block_icons li i.wordpress {background-image: url('images/landing/icon_wordpress.png')}
ul.block_icons li i.hosting {background-image: url('images/landing/icon_hosting.png')}
ul.block_icons li i.slider {background-image: url('images/landing/icon_slider.png')}
ul.block_icons li i.form {background-image: url('images/landing/icon_form.png')}
ul.block_icons li i.map {background-image: url('images/landing/icon_map.png')}
ul.block_icons li i.news {background-image: url('images/landing/icon_news.png')}
ul.block_icons li i.gallery {background-image: url('images/landing/icon_gallery.png')}
ul.block_icons li i.complex {background-image: url('images/landing/icon_complex.png')}
ul.block_icons li i.safety {background-image: url('images/landing/icon_safety.png')}
ul.block_icons li i.i1c {background-image: url('images/landing/icon_1c.png')}
ul.block_icons li i.calculator {background-image: url('images/landing/icon_calculator.png')}
ul.block_icons li i.plugin {background-image: url('images/landing/icon_plugin.png')}
ul.block_icons li i.audit {background-image: url('images/landing/icon_audit.png')}
ul.block_icons li div {float: left; width: 400px}
ul.block_icons li div h3 {margin: 10px 0; line-height: 1em; font-weight: normal; font-size: 28px; color: var(--main-red)}
ul.block_icons li div p {font-size: 18px}

div.front_order {background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0, #fff 150px), url('images/paper.jpg') repeat 0 0}
div.front_order div.center {padding-top: 60px}
div.front_order p {max-width: 950px}
div.front_order i#like {display: block; float: right; width: 214px; height: 250px; margin-left: 20px; background: url('images/like.png') no-repeat 0 0}

ul.induce {display: flex; justify-content: space-between; margin-top: 40px; margin-bottom: 60px}
ul.induce li {flex-basis: 315px; display: block; margin: 0; font-size: 20px}
ul.induce li:hover {box-shadow: 0 0 10px rgba(0,0,0,0.2)}
ul.induce li a {display: block; padding: 20px 25px 20px 100px; text-decoration: none; color: var(--text-color)}
ul.induce li a span {font-size: 24px; color: var(--main-red)}
ul.induce li.order {background: url('images/icon_induce_order.png') no-repeat 15px 16px}
ul.induce li.brief {background: url('images/icon_induce_brief.png') no-repeat 20px 20px}
ul.induce li.tel {background: url('images/icon_induce_tel.png') no-repeat 17px 16px}

div.front_creation * {color: #fff}
div.front_creation div.text {padding: 40px 0; background-color: var(--main-red)}
div.creation_title {background: url('images/front_creation_bg.jpg') no-repeat 50% 50%; background-size: cover; background-attachment: fixed}
div.creation_title > div {height: 100%; padding: 60px 0; background: rgba(0,0,0,0.4) url('images/twill.png') repeat 0 0}
div.creation_title h2 {margin-bottom: 20px; font-size: 40px; text-shadow: 0 0 5px #000, 0 0 10px #000}
div.creation_title h3 {font-size: 28px; font-weight: normal; text-shadow: 0 0 5px #000, 0 0 10px #000}

div.front_services {background: linear-gradient(to top, rgba(240,240,240,0.5) 0, rgba(255,255,255,0.5) 12px, #fff 60%), url('images/paper.jpg')}
div.front_services div.center {padding-top: 40px; padding-bottom: 40px; background: url('images/front_services_bg.png') no-repeat 100% 100%}
div.front_services li {font-size: 18px}
div.front_services a.red_button {margin-top: 20px}

div.front_stages {padding-top: 60px}
div.front_stages ul {margin: 0 0 20px 0}
div.front_stages ul li {display: block; margin: 0}
div.front_stages ul li p {margin-left: 190px}
div.front_stages ul li h3 {margin: 0 0 5px 190px}
div.front_stages ul li i {display: block; float: left; width: 170px; text-align: right; line-height: 60px; font-style: normal; font-family: 'Ubuntu', sans-serif; font-weight: 500; font-size: 70px; color: var(--main-red); text-shadow: 2px 2px 0 rgba(0,0,0,0.4)}
div.front_stages ul li.planning {padding: 20px 0}
div.front_stages ul li.planning div.center div {display: table-cell; height: 150px; background: url('images/stages_planning.png') no-repeat 0 50%; vertical-align: middle}
div.front_stages ul li.design {background: url('images/front_design_bg.jpg') no-repeat 100% 50%; background-attachment: fixed; background-size: cover}
div.front_stages ul li.design > div {padding: 40px 0; background: rgba(0,0,0,0.3) url('images/twill.png') repeat 0 0}
div.front_stages ul li.design div div.center div {margin-left: 170px; padding: 20px; background-color: rgba(0,0,0,0.2)}
div.front_stages ul li.design h3, div.front_stages ul li.design p {margin: 0 0 5px 0; color: #fff; text-shadow: 0 0 5px #000, 0 0 10px #000}
div.front_stages ul li.design i {color: #fff}
div.front_stages ul li.programming {padding: 20px 0; background: linear-gradient(to top, #eee 0, #fff 60%)}
div.front_stages ul li.programming div.center div {display: table-cell; height: 150px; background: url('images/stages_programming.png') no-repeat 0 50%; vertical-align: middle}
div.front_stages ul li.service {padding: 20px 0}

/* /Front */

/* Portfolio */
/*ul.portfolio {display: flex; justify-content: space-between; flex-wrap: wrap; margin: 40px 0 0 0}
ul.portfolio li {display: block; width: 270px; margin: 0 0 60px 0; text-align: center}*/

ul.portfolio {margin: 40px -20px 0 -20px; text-align: center}
ul.portfolio li {display: inline-block; width: 270px; margin: 0 20px 60px 20px; text-align: center; vertical-align: top}

ul.portfolio li span.image {display: block; width: 270px; height: 360px; margin: 0 0 15px 0; background-repeat: no-repeat; background-position: 50% 0; background-size: cover; border: 1px solid #ccc; border-radius: 3px}
ul.portfolio li:hover span.image {box-shadow: 0 0 10px rgba(0,0,0,0.4)}
ul.portfolio li a {display: block; text-decoration: none}

div.portfolio ol.portfolio {margin-top: 25px}
div.portfolio ol.portfolio li {margin: 0 0 60px 60px; padding-left: 10px}
div.portfolio ol.portfolio li p {margin-bottom: 20px}
div.portfolio ol.portfolio li img {border-radius: 2px; vertical-align: top; box-shadow: 0 0 10px rgba(0,0,0,0.4)}

p.top_nav {float: right; margin: -60px 0 0 0}
p.top_nav a {text-decoration: none}
p.top_nav a:hover {color: var(--dark-grey)}
p.bottom_nav {display: block; margin-bottom: 20px; text-align: center}
p.bottom_nav a {text-decoration: none}
p.bottom_nav a:hover {color: var(--dark-grey)}
p.bottom_nav a.nav_larr {float: left}
p.bottom_nav a.nav_uarr {text-align: center; width: 100px; margin: 0 auto}
p.bottom_nav a.nav_rarr {float: right}

/* Order */
div.content_left #form_order_block {max-width: 720px}
div.content_left div.form_body {margin: 0}
div.content_left #form_order {max-width: 720px}

/* Order bottom */
div.form_order_text {margin-bottom: 20px}
div.form_body {display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 700px; margin: auto}
div.form_body * {box-sizing: border-box}
div.form_body label.f_block50 {flex-basis: 48%; margin-bottom: 20px}
div.form_body label.f_block100 {flex-basis: 100%; margin-bottom: 20px}
div.form_body label span.f_title {display: block; padding-left: 5px; margin-bottom: 3px; font-weight: bold; font-size: 17px; color: var(--dark-grey)}
div.form_body label span.f_field {display: block}
div.form_body label span.f_field input, div.form_body label span.f_field textarea {width: 100%; padding: 10px; border: 2px solid #ccc; border-radius: 10px; font-size: var(--font-size-normal); transition: all 0.2s}
div.form_body label span.f_field input:hover, div.form_body label span.f_field textarea:hover {border-color: #aaa}
div.form_body label span.f_field.error input, div.form_body label span.f_field.error textarea {border-color: var(--main-red)}
div.form_body label span.f_field span {display: block; padding-left: 5px; font-size: var(--font-size-normal); color: var(--main-red)}
div.form_body p.conditions {font-size: var(--font-size-medium)}


div#map_canvas {width: 850px; height: 350px; margin-bottom: 20px; background-color: #f2f2f2}

ol.numbered_list, ol.numbered_list ol {counter-reset: num_list_counter; margin: 10px 0 20px 0; padding-left: 0}
ol.numbered_list li {display: block; margin: 0 0 10px 0}
ol.numbered_list li:before {content: counters(num_list_counter, '.') ' '; counter-increment: num_list_counter}

ol.numbered_list li {text-transform: uppercase; font-weight: bold}
ol.numbered_list li li {text-transform: none; font-weight: normal}

a#order {display: none; position: fixed; top: 20px; right: calc((100% - 1400px) / 2); width: 133px; height: 58px; padding-left: 25px; font-style: italic; font-size: 18px; line-height: 56px; color: #fff; background: url('images/order_bg.png') no-repeat 0 0; opacity: 0}
a#order:hover {opacity: 1 !important}

div#to_top {display: none; position: fixed; bottom: 20px; right: calc((100% - 1400px) / 2); width: 59px; height: 59px; background: url('images/to_top.png') no-repeat 0 0; opacity: 0; cursor: pointer}
div#to_top:hover {opacity: 1 !important}


/* Effect */
div.top_image_big div.bg {animation-name: slow_show; animation-duration: 1.5s; animation-timing-function: ease-out; animation-iteration-count: 1}

@keyframes slow_show {
    from {opacity: 0}
    to {opacity: 1}
}

div.top_image_big div.content div > * {animation-name: to_down; animation-duration: 1s; animation-timing-function: ease-out; animation-iteration-count: 1}
div.top_image_big div.content div > *:last-child {animation-name: to_up}
div.slider_text a div > * {animation-name: to_down; animation-duration: 1s; animation-timing-function: ease-out; animation-iteration-count: 1}
div.slider_text a div > *:last-child {animation-name: to_up}

/*.on_view_to_down {opacity: 0}
.on_view_to_right {opacity: 0}
.on_view_to_left {opacity: 0}
.on_view_fade {opacity: 0}*/
.to_down {opacity: 1 !important; animation-name: to_down; animation-duration: 1s; animation-timing-function: ease-out; animation-iteration-count: 1}
.to_right {opacity: 1 !important; animation-name: to_right; animation-duration: 1s; animation-timing-function: ease-out; animation-iteration-count: 1}
.to_left {opacity: 1 !important; animation-name: to_left; animation-duration: 1s; animation-timing-function: ease-out; animation-iteration-count: 1}
.fade {opacity: 1 !important; animation-name: fade; animation-duration: 1s; animation-timing-function: ease-out; animation-iteration-count: 1}

@keyframes to_down {
    from {transform: translate(0, -1em); opacity: 0}
    to {transform: translate(0, 0); opacity: 1}
}
@keyframes to_up {
    from {transform: translate(0, 1em); opacity: 0}
    to {transform: translate(0, 0); opacity: 1}
}
@keyframes to_right {
    from {transform: translate(-20px, 0); opacity: 0}
    to {transform: translate(0, 0); opacity: 1}
}
@keyframes to_left {
    from {transform: translate(20px, 0); opacity: 0}
    to {transform: translate(0, 0); opacity: 1}
}
@keyframes fade {
    from {opacity: 0}
    to {opacity: 1}
}

/*** Adaptive ***/
@media screen and (max-device-width: 1400px)
{
    a#order {top: 0; right: 0}
    div#to_top {right: 0}
}

@media screen and (max-device-width: 1220px)
{
    div.center {width: auto; padding-left: 20px !important; padding-right: 20px !important}

    div#menu {margin: 10px 0 0 3%}

    ul.block_icons li > * {opacity: 1}
}

@media screen and (max-device-width: 1120px)
{
    #top div.center {max-width: 600px}
    #bottom {height: auto}

    div#menu {clear: left; margin: 10px 0 0 0}

    div.top_image {height: auto}
    div.top_image h1 {margin: 20px 0}

    p.breadcrumbs {width: auto}

    ul.induce {display: block}
    ul.induce li {width: 340px}

    p.top_nav {float: none; margin: 20px 0; text-align: right}

    div.portfolio ol.portfolio li {margin: 0 0 60px 5px}
    div.portfolio ol.portfolio li img {max-width: 100%}

    #bottom::after {content: ''; display: block; clear: both; height: 40px}
}

@media screen and (max-device-width: 1024px)
{
    div.content_left {float: none; width: auto}
    div.content_right {float: none; width: auto}

    div.block_induce {margin: 10px}
    div.block_sites {display: none}

    div#map_canvas {width: 100%}

    /* iOS */
    div.front_about {background-attachment: scroll}
    div.creation_title {background-attachment: scroll}
    div.front_stages ul li.design {background-attachment: scroll}

    /* Effect */
    .on_view_to_down {opacity: 1 !important}
    .on_view_to_right {opacity: 1 !important}
    .on_view_to_left {opacity: 1 !important}
    .on_view_fade {opacity: 1 !important}
}

@media screen and (max-device-width: 600px)
{
    div#info_window {left: 5%; transform: translate(-2.5%, -50%)}

    ul.block_icons li i {width: 100px}
    ul.block_icons li {width: 100%}
    ul.block_icons li div {width: calc(100% - 100px)}
    ul.block_icons li div h3 {font-size: 24px}

    ul.offers li {display: inline-block; margin: 10px}

    div.front_services div.center {background-position: right -300px top 100%}

    div.form_input {width: 100%}
}

@media screen and (max-device-width: 550px)
{
    h2 {font-size: 28px}

    div#top_red {height: 10px}

    a#logo {width: 110px; height: 35px}
    a#logo img {width: 110px; height: 35px; margin-top: 20px}
    a#logo span {display: none}

    div#menu ul li {width: 130px}

    ul.offers {display: none}

    div.top_image {margin-bottom: 30px}
    div.top_image div.center {line-height: normal}
    div.top_image h1 {font-size: 28px}

    div.top_contacts {width: auto; height: auto; margin-top: 20px; padding: 0; background: none}
    div.top_contacts ul {width: auto; height: auto; background: none}
    div.top_contacts ul li {padding: 0; font-size: 18px}

    ul.offers li {display: inline-block; margin: 10px}

    #slider {height: 280px}

    div.slider div.slider_prev {background-position: 5px 50%; background-size: 30%}
    div.slider div.slider_next {background-position: right 5px top 50%; background-size: 30%}
    div.slider div.slider_text h2 {padding-top: 30px; font-size: 26px}
    div.slider div.slider_text h3 {margin-top: 10px; padding: 0 20px; font-size: 20px}
    div.slider div.slider_text span.details {margin-top: 20px}

    div.front_sites p.center {display: none}

    div.front_order i#like {display: none}

    div.front_stages ul li div.center div {background: none !important}
    div.front_stages ul li p {margin-left: 30px !important}
    div.front_stages ul li h3 {margin-left: 30px !important}
    div.front_stages ul li i {width: auto; line-height: 30px; font-size: 30px}
    div.front_stages ul li.design div div.center div {margin-left: 0; padding: 0}

    ul.induce li {width: 280px; font-size: var(--font-size-medium)}
    ul.induce li a span {font-size: 20px}

    p.breadcrumbs {display: none}

    div.block_induce {width: 280px; margin: 10px 0}

    div.front_sites {margin-top: 20px}
    div.front_sites ul.websites {margin-top: 20px}
    div.front_sites ul.websites li div a {height: 360px; padding: 20px 0}
    div.front_sites ul.websites li h4 {margin: 0}
    div.front_sites ul.websites li div span.details {margin-top: 250px}

    ul.block_icons li i {width: 50px; margin-right: 10px; background-size: contain}
    ul.block_icons li div {width: calc(100% - 60px)}

    p.top_nav {display: none}
    p.bottom_nav a {display: block; float: none !important; margin-bottom: 30px}

    div.form_body label.f_block50 {flex-basis: 100%}
}