/*color vars*/ @color_brightest: #ffffff; @color_gray: #cecece; @color_darkest: #000000; @color_main: #8e464e; @color_main_darker: #74313d; @color_main_intensive: #981b29; @color_font: #363636; /*grid system*/ .container { margin: 0px auto; position: relative; padding: 0px; width: 1280px; .grid_1, .grid_2, .grid_3, .grid_4 { float: left; position: relative; margin: 10px; } .grid_1 { width: 299px; } .grid_2 { width: 619px; } .grid_3 { width: 939px; } .grid_4 { width: 1258px; } } .clear { clear: both; display: block; height: 0; overflow: hidden; visibility: hidden; width: 0; } .round_image { border: 1px solid @color_gray; border-radius: 150px; height: 309px; overflow: hidden; width: 100%; &:hover { img { opacity: 0.7; transition: opacity .25s ease-in-out; } } img { border-radius: 150px; height: 95%; padding: 8px 5px 5px 8px; width: 95%; } } /* tablet viewport */ @media only screen and (min-width: 768px) and (max-width: 1279px) { .container { width: 768px !important; &.main_content { width: 766px !important; } .grid_1, .grid_2, .grid_3, .grid_4 { width: 362px; } .slider { .slide_content, .flex-direction-nav, .flex-viewport { width: 768px !important; } .offer { font-size: 44px!important; } } .container { &.main_content { .grid_1 { margin-bottom: 70px; } } &.offers { .offer_info { padding: 5px!important; } .content_block { display: table; } h1 { margin-top: 0px; } .image { width: 100%; img { width: 96%!important; } } } .content_block { float: left; margin-right: 10px; width: 230px; } .round_image { height: 120px; width: 120px; float: right; img { padding: 3px 4px 5px 3px; } } } } #navi .nav li { a { padding: 18px 10px 0; width: 70px; text-align: center; } .about { width: 126px !important; } &.language a { padding: 18px 0 0; text-align: center; width: 48px !important; } } #page .main_content { padding-bottom: 20px; } #footer { background-position: right 70px; ul { margin: 5px 0 0; li { padding: 1px 0 3px; } } } } /* mobile viewport */ @media only screen and (max-width: 768px) { #offer1, #offer2, #offer3, #offer4, #offer5, #offer6 { margin-bottom: 0px; } .container { width: 480px !important; display: block; &.main_content { top: 230px !important; width: 478px !important; padding-top: 0 !important; padding-bottom: 30px !important; &.offers { .image { width: 456px!important; img { width: 440px !important; } } .content_block { border-bottom: 1px solid @color_gray !important; height: 100% !important; padding-bottom: 20px !important; } } } &:after { clear: both; } .grid_1, .grid_2, .grid_3, .grid_4 { width: 460px; } .button a { line-height: 1.8em; } .round_image { float: left; height: 170px; margin: 10px 0px 0px 0; width: 37%; img { padding: 4px 4px 5px 5px; } } .nav { display: none !important; } .nav.mobile { display: block !important; .language a { width: 32px !important; &:last-child { width: 30px !important; } } } .slider { .flex-viewport { width: 480px; margin-top: 7px; } .flex-direction-nav { top: 95px; } &.touren { h2 { margin: 75px 0 15px !important; } } .slides { .slide_content { width: 480px; .logo { display: none; } .offer { margin: 20px 0 15px; font-size: 26px; } .content_inner { width: 350px; margin-left: 85px; .price_box { margin-left: 15px; .price h2{ font-size: 23px; } } .info_box { width: 185px; p { padding: 7px 7px 0; } } } } img { width: 480px; height: auto; } } } .main_content.offers { padding-top: 20px !important; } .content_block { width: 277px; float: left; margin-right: 10px; } #footer { background-position: right 243px; top: 230px; .endline p { font-size: 12px; } } } }