div.top_image_big {position: relative; height: 400px; margin-bottom: 60px}
div.top_image_big div.bg {position: absolute; z-index: 0; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%}
div.top_image_big div.content {position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 100%)}
div.top_image_big div.content div {text-align: center}
div.top_image_big div.content div h1 {margin: 0 0 20px 0; text-transform: uppercase; font-size: 40px; color: #fff}
div.top_image_big div.content div h2 {text-transform: none; font-size: 28px; color: #fff}
div.top_image_big div.content div a.details {display: inline-block; margin-top: 30px; padding: 5px 40px; border: 1px solid #fff; border-radius: 20px; text-decoration: none; font-size: 20px; color: #fff; text-shadow: none; transition: 0.2s}
div.top_image_big div.content div a.details:hover {color: #e63b48; background-color: #fff; transition: 0.2s}

div.advantage {background: linear-gradient(to top, rgba(255,255,255,0.4) 0, rgba(255,255,255,1) 50%, #fff 100%), url('images/paper.jpg')}
div.advantage div.center {padding: 40px 0 60px 0}
div.advantage div.text {width: 700px}
div.advantage li, div.and_advantage p {font-size: 18px}

/* Low */
div.top_image_low {background-color: #043556}
div.top_image_low div.bg {background-image: url('/images/landing/image_low.jpg')}
div.top_image_low div.content {background: linear-gradient(to right, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.1) 100%)}
div.top_image_low * {text-shadow: 0 0 10px #235, 0 0 30px #235}

div.low_advantage div.center {background: url('images/landing/strawberry.png') no-repeat 100% 100%}

div.low_unlike {padding: 40px 0 60px 0}
div.low_unlike i#like {display: block; float: left; width: 214px; height: 250px; margin-right: 80px; background: url('images/like.png') no-repeat 0 0}
div.low_unlike li {margin: 0 0 10px 310px; font-size: 18px}

div.low_presents {padding: 80px 0 60px 0; background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0, transparent 9px), url('images/landing/stars_bg.jpg') repeat-x 0 -20px}
div.low_presents div.center {min-height: 300px; background: url('images/landing/presents.png') no-repeat 100% 50%}
div.low_presents ul {width: calc(100% - 350px)}
div.low_presents li {display: flex; align-items: center; min-height: 50px; margin: 0 0 20px 0; padding: 0 0 0 60px; background: url('images/landing/presents_bullet.png') no-repeat 0 50%}
div.low_presents li p {margin: 0; font-size: 22px}
div.low_presents li p span {color: #e63b48}

div.low_working {padding: 40px 0 40px 0; background: url('images/landing/rhombus.png') repeat-x 0 -10px, linear-gradient(to bottom, #fdf1eb 0, #fff 100%)}
div.low_working ul.scheme li {display: block; position: relative; min-height: 80px; margin: 0}
div.low_working ul.scheme div.scheme_left {width: 50px; height: 100%; position: absolute}
div.low_working ul.scheme div.scheme_circle {position: absolute; top: 0; left: 0; display: table-cell; width: 40px; height: 40px; border: 4px solid #e63b48; border-radius: 24px; text-align: center; vertical-align: middle; font-size: 28px; background-color: #fff}
div.low_working ul.scheme div.scheme_arrow {width: 6px; height: 100%; margin-left: 21px; background-image: linear-gradient(180deg, #fff 50px, #e63b48 50px, #fff 100%)}
div.low_working ul.scheme div.scheme_text {display: table-cell; height: 48px; padding-left: 80px; vertical-align: middle}

/* Site */
div.top_image_site {background-color: #e24472}
div.top_image_site div.bg {background-image: url('/images/landing/image_site.jpg')}
/*div.top_image_site div.content {background: linear-gradient(to right, rgba(0,0,0,0.3) 0, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.3) 100%)}*/
div.top_image_site * {text-shadow: 0 0 10px #012, 0 0 30px #012}

div.site_advantage div.center {background: url('images/landing/cherry.png') no-repeat right 0 bottom 10px}

div.site_portfolio {padding: 60px 0 40px 0}
div.site_portfolio h2 {margin-bottom: 40px}

div.site_unlike {padding: 60px 0 80px 0; background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0, #fff 150px), url('images/twill.png') repeat 0 0}
div.site_unlike i#like {display: block; float: left; width: 214px; height: 250px; margin-right: 80px; background: url('images/like.png') no-repeat 0 0}
div.site_unlike li {margin: 0 0 10px 310px; font-size: 18px}

/* Landing */
div.top_image_landing {background-color: #f4d28b}
div.top_image_landing div.bg {background-image: url('images/landing/image_landing.jpg')}
div.top_image_landing div.content {background: linear-gradient(to right, transparent 0, rgba(0,0,0,0.4) 50%, transparent 100%)}
div.top_image_landing * {text-shadow: 0 0 10px #210, 0 0 30px #210}

div.landing_advantage div.center {background: url('images/landing/honey.png') no-repeat 100% 100%}


/* Shopping */
div.top_image_shopping {background-color: #4086a0}
div.top_image_shopping div.bg {background-image: url('images/landing/image_shopping.jpg')}
div.top_image_shopping * {text-shadow: 0 0 10px #235, 0 0 30px #235}

div.shopping_advantage div.center {background: url('images/landing/gifts.png') no-repeat right 0 bottom 10px}


/* WordPress */
div.top_image_wordpress {background-color: #82011a}
div.top_image_wordpress div.bg {background-image: url('images/landing/image_wordpress.jpg')}

ul.block_icons_small {display: flex; justify-content: space-between; flex-wrap: wrap; margin: 40px 0 60px 0}
ul.block_icons_small li {display: flex; margin: 0 0 20px 0; flex-basis: 30%}
ul.block_icons_small li:before {content: ''; display: block; flex-shrink: 0; width: 80px; height: 80px; border-radius: 40px; background-image: url('images/landing/icons_small.png'); background-repeat: no-repeat; background-size: 300%; box-shadow: 0 0 20px rgba(0,0,0,0.1)}
ul.block_icons_small li.concept:before {background-position: 0 0}
ul.block_icons_small li.changes:before {background-position: -80px 0}
ul.block_icons_small li.font:before {background-position: -160px 0}
ul.block_icons_small li.adaptive:before {background-position: 0 -80px}
ul.block_icons_small li.form:before {background-position: -80px -80px}
ul.block_icons_small li.category:before {background-position: -160px -80px}
ul.block_icons_small li.text:before {background-position: 0 -160px}
ul.block_icons_small li.analitic:before {background-position: -80px -160px}
ul.block_icons_small li.eng:before {background-position: -160px -160px}
ul.block_icons_small li.search:before {background-position: 0 -240px}
ul.block_icons_small li.slider:before {background-position: -80px -240px}
ul.block_icons_small li.ssl:before {background-position: -160px -240px}
ul.block_icons_small li p {margin: 20px 0 0 20px}

div.happy_help {min-height: 100px; padding: 40px 10px 60px 10px; background: linear-gradient(to top, rgba(255,255,255,0.4) 0, rgba(255,255,255,1) 100px), url('images/paper.jpg')}

div.stars {display: flex; align-items: center}
div.stars::before, div.stars::after {content: ''; display: block; flex-basis: 50%; height: 1px; background-color: #ccc}
div.stars span {flex-shrink: 0; display: block; width: 180px; height: 22px; background: url('images/landing/5stars.png') no-repeat 50% 50%; background-size: 60%}


/* Adaptive */
@media screen and (max-device-width: 1200px)
{
    div.top_image_big div.bg {opacity: 1}
    
    div.advantage div.text {width: calc(100% - 350px)}
}

@media screen and (max-device-width: 1024px)
{
    ul.block_icons_small {justify-content: space-around}
    ul.block_icons_small li {flex-basis: 40%}
}

@media screen and (max-device-width: 800px)
{
    div.advantage div.center {padding-bottom: 240px}
    div.advantage div.text {width: auto}
}

@media screen and (max-device-width: 600px)
{
    div.top_image_big {height: auto}
    div.top_image_big div.content div {padding: 20px 10px}
    div.top_image_big div.content div h1 {font-size: 26px}
    div.top_image_big div.content div h2 {line-height: 1.1; font-size: 20px}
    
    div.low_unlike i#like {display: none}
    div.low_unlike li {margin: 0 0 10px 10px}
    
    div.site_unlike i#like {display: none}
    div.site_unlike li {margin: 0 0 10px 10px}    
    
    div.low_presents div.center {background: linear-gradient(to right, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.9) 100%), url('images/landing/presents.png') no-repeat 100% 50%}
    div.low_presents ul {width: 100%}
    
    ul.block_icons_small li {flex-basis: 100%}
}