@import url(reset.css);

body {
    background-color: #dedbd6;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    color: #969696;
    line-height: 1.3;
}

h1, h2, h3, h4, h5, h6 {
    color: #2e2c2d;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.wrapper {
    max-width: 1200px; 
    min-width: 200px;
    margin: 0 auto;    
}

/*Начало блока header*/

header {
    padding: 30px 30px 80px 0;
    overflow: hidden;
}

.logo {
    float: left;
    margin: 37px 50px 0 0;
}

header h1 {
    float: left;
    color: #939393;
    font-size: 15px;
    margin: 46px 0 0 0;
}

header p {
    float: right;
    overflow: hidden;
}

header p img {
    float: left;
    margin-left: 10px;
}

/*Кнопка возврата на главную*/

.returnBut {
    position: fixed;
    width: 25px;
    height: 200px;
    left: 0;
    top: 150px;
    z-index: 10;
}

/*Начало блока с контентом*/

.content-wrapper {
    background-color: #fff;
}

/*Начало блока навигации*/

nav {
    background-color: #e9e9e5; margin-bottom: 30px;
}

nav ul {
    overflow: hidden;
    padding: 30px;
}

nav ul li {
    float: left;
    font: bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
    margin-right: 10px;
    
}

nav ul li a {
    text-decoration: none;
    color: #413f40;
    padding: 5px 20px;/*Хотя у нас ссылка является строчным элементом, но для нее работают и padding сверху(снизу) и рамка.
                        И padding назначается ссылке, чтобы на мобильных устройсвах было легче на нее попадать пальцем!!!*/
    display: block; border: 1px solid #e9e9e5;/*Цвет рамки ссылки совпадает с фоновым блока, поэтому рамки как вроде и нет*/   
}

nav ul li a:hover {
    text-decoration: underline;
}

nav ul li.active a {
    background-color: #f45300;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #c84502;
}

nav a#pull {
    display: none;
}

/*Начало блока с основным контентом*/

.content-main {
    padding: 0 30px;
}

.slogan-main {
    margin-bottom: 30px;
    overflow: hidden;
}

.slogan {
    float: left;
    width: 33%;/*Здесь мы padding задать не можем, т.к. при их задании ширина будет более 100% и последний .slogan свалится на следующ строку*/    
}

.slogan div {/*Дополнительные div позволяют задать для резиновых блоков внутр отступы!!!*/
    padding-right: 30px;
        
}

.slogan div h2 {
    overflow: hidden;
    margin: 0 0 20px  0;
}

.slogan div h2 img {
    float: left;
    margin: 0 20px 0 0;
}

/*Основное изображение*/

.features {
    margin-bottom: 30px;
}

.features img {
    width: 100%;/*Если здесь задать max-width: 100%; то картинка доходит только до своей 100% ширины и не больше!!!*/
}

/*Начало блока service*/

.service-main {
    overflow: hidden;
    margin-bottom: 30px;
}

.service {
    float: left;
    width: 25%;
}

.service div {
    padding-right: 30px;
    
}

.service div h2 {
    font-size: 13px; color: #000; line-height: 20px; margin-bottom: 20px;    
}

.service div p {
    margin-bottom: 20px; font-size: 12px; font-family: Arial, sans-serif; line-height: 20px;    
}

/*Начало рекламного блока*/

.work_with_us {
    background: #f6f4ed; padding: 30px 20px; margin-bottom: 30px; overflow: hidden;
}

.work_with_us h2 {
    width: 62%; float: left; font-size: 18px; color: #706d6a; line-height: 1.6;    
}

.work_with_us a{
    width: 38%; float: right; display: block;     
}

.work_with_us a img {
    display: block; margin: 0 auto;/*Другой способ поставить картинку по-середине контейнера - это сделать ее блоком и задать ей margin: 0 auto;*/    
}

.bottom_content_block {
    overflow: hidden; margin-bottom: 30px;
}

.bottom_content_block h2 {
    font-size: 14px; font-weight: bold; color: #343233;
    margin-bottom: 20px;
}

.bottom_content_left {
    float: left;
    width: 66%;
    overflow: hidden;    
}

.review {
    float: left;
    width: 43%; margin-right: 7%;/*Здесь мы правые отступы сделали 7% и плюс 43% ширина блока итого 50%. Таким образом нам не нужно
                                 оборачивать контент в блоках .review в дополнительные div*/
}

.review_head {
    overflow: hidden; margin-bottom: 20px;
}

.review_head img {
    float: left; margin-right: 20px; border-radius: 7px;
}

.review_head h3 {
    font-size: 13px;
    margin-bottom: 7px;
}

.review_head p {
    font-size: 10px;
    font-family: Arial, sans-serif;
    color: #f55909;
}

.review > p {
    font: 12px;
    font-family: Arial, sans-serif;
    color: #dadada;
    line-height: 1.6;/*Чтобы перевести из px в множитель надо разделить line-height в px на размер шрифта в px*/
}

.bottom_content_right {
    float: right;
    width: 34%;
}

.news_block {
    overflow: hidden; margin-bottom: 20px;
}

.news_block a img {
    float: left; margin-right: 15px;
}

.news_block h3 {
    font-size: 13px; font-weight: bold; margin-bottom: 2px; 
}

.news_block h3 a {
    color: #343233;
    text-decoration: none;    
}

.news_block h3 a:hover {
    text-decoration: underline;
}

.news_block p {
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: #adadad;
    line-height: 1.7;/*Чтобы между двумя строками параграфа сделать интервал побольше  Важно!!!*/
}

.news_block p span {
    font-size: 10px;
    font-family: Arial, sans-serif;
    color: #f55909;
}

.topLineF {
    background: #615f5d;
    height: 9px;
}

/*Начало футора*/

.footer_main {
    background: #4a4744;
    overflow: hidden;
    padding: 40px 30px 30px 30px;
    color: #848484;
    line-height: 1.5;
    font-size: 12px;
}

.footer_main a {
    color: #f7f5ee; text-decoration: none;
}

.footer_main a:hover {
    text-decoration: underline;
}

.footer_main h3 {
    color: #f7f5ee; font-size: 13px; font-weight: bold; margin-bottom: 15px; 
}

.footer_block_left {
    float: left;
    width: 60%;
    margin-right: 6%;
}

.footer_block_right {
    float: right;
    width: 34%;
}

.footer_block_right ul li {
    margin-bottom: 5px;
}

footer {
    background: #3b3836; padding: 20px 30px; overflow: hidden;
}

footer img {
    float: left;
}

footer p {
    float: right; font-family: Arial, sans-serif; font-size: 12px; color: #848484;
}

footer p a {
    color: #f7f5ee;
    text-decoration: none;
}

footer p a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 800px) {
.service {
    width: 50%;
}

.work_with_us h2 {
    float: none; width: 100%; text-align: center; margin-bottom: 20px;
}

.work_with_us a {
    float: none;
    width: 100%;
}    
}
@media screen and (max-width: 768px) {
.logo {
    float: none;
    display: block;
    margin: 37px auto 0;
}

header {
    position: relative;
    padding: 10px 30px 30px 0;
}

header h1 {
    float: none;
    text-align: center;
    margin: 20px 0 0 0;
}

header p {
    float: none;
    position: absolute; top: 12%; right: 5%; 
}

header p img {
    float: none;
}

.bottom_content_left {
    float: none;
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px;    
}

.bottom_content_right {
    float: none;
    width: 100%;
    overflow: hidden;
}

.news_block {
    overflow: hidden; margin-bottom: 20px; float: left; width: 48%; margin-right: 2%;
}

nav ul {
    display: none;
}

nav a#pull {
    display: block; font-size: 14px; font-weight: bold; color: #ccc; text-decoration: none; padding: 10px 3%; width: 94%; position: relative;    
}

nav a#pull:after {
    content: "";
    background: url(../images/imgappix/icon-menu.png) no-repeat;
    width: 13px;
    height: 12px;
    display: inline-block;
    position: absolute;
    top: 12px;
    right: 3%;    
}    
}
@media screen and (max-width: 600px) {
.slogan {
    float: none;
    width: 100%;/*Здесь мы padding задать не можем, т.к. при их задании ширина будет более 100% и последний .slogan свалится на следующ строку*/
    margin-bottom: 20px;    
}

.slogan div {/*Дополнительные div позволяют задать для резиновых блоков внутр отступы!!!*/
    padding-right: 0;
        
}    
}
@media screen and (max-width: 480px) {
header {
    position: relative;
    padding: 10px 0 15px 0;
}

.logo {
    float: none; display: block; margin: 0 auto; width: 100px;/*Здесь мы с помощью width уменьшаем размер логотипа*/
}

header h1 {
    display: none;
}

header p {
    display: none; 
}

.service {
    width: 100%;
}

.service div {
    padding-right: 0;    
}

.work_with_us a img {
    display: block; margin: 0 auto; max-width: 100%;/*Другой способ поставить картинку по-середине контейнера - это сделать ее блоком и задать ей margin: 0 auto;*/    
}

.review {
    float: none; margin-bottom: 20px;
    width: 100%; margin-right: 0;/*Здесь мы правые отступы сделали 7% и плюс 43% ширина блока итого 50%. Таким образом нам не нужно
                                 оборачивать контент в блоках .review в дополнительные div*/
}

.news_block {
    overflow: hidden; margin-bottom: 20px; float: none; width: 100%; margin-right: 0;
}

.footer_block_left {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
}

.footer_block_right {
    float: none;
    width: 100%;
}

footer img {
    float: none; display: block; margin: 0 auto 10px auto;
}

footer p {
    float: none; font-size: 12px; color: #848484; text-align: center;
}

nav ul li {
    width: 100%;
}   
}
@media screen and (max-width: 240px) {
.content-main {
    padding: 0 10px;
}

.work_with_us h2 {
    width: 62%; float: left; font-size: 15px; color: #706d6a; line-height: 1.5;    
}

.footer_main {
    background: #4a4744; overflow: hidden; padding: 30px 10px; color: #848484; line-height: 1.5; font-size: 12px;
}

footer {
    background: #3b3836; padding: 20px 10px; overflow: hidden;
}    
}