/* Базовые стили демо-страницы */
        
        *,
        *:before,
        *:after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html,
        body {
            height: 100%;
        }
        
        body {
            /*font: 14px/1 "Open Sans", sans-serif;*/
            background-image: url(../images/services_bg.png);
            background-size: auto;
            background-repeat: no-repeat;
            
        }
        
        /* Базовый контейнер табов */
        
        .tabs {
            min-width: 320px;
            max-width: 1240px;
            padding: 0px;
            margin: 0 auto;
            padding-top: 15px;
            margin-bottom: 50px;
            

        }
        /* Стили секций с содержанием */
        
        .tabs > section {
            display: none;
            padding: 15px;
            background: #fff;
            
        }
        
        .tabs > section > p {
            margin: 0 0 5px;
            line-height: 1.5;
            color: #383838;
            /* прикрутим анимацию */
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
        }
        /* Описываем анимацию свойства opacity */
        
        @-webkit-keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        /* Прячем чекбоксы */
        
        .tabs > input {
            display: none;
            position: absolute;
        }
        /* Стили переключателей вкладок (табов) */
        
        .tabs > label {
            display: inline-block;
            margin: 0 0 -6px;
            padding: 15px 15px;
            font-weight: 600;
            text-align: center;
            color: #aaa;
            /*border: 0px solid #ddd;
            border-width: 1px 1px 1px 1px;
            background: #f1f1f1;
            border-radius: 3px 3px 0 0;*/
        }
        /* Шрифт-иконки от Font Awesome в формате Unicode */
        
        .tabs > label:before {
            
            font-weight: normal;
            margin-right: 10px;
        }
        
        .tabs > label[for*="1"]:before {
            margin:0 auto;
            content: url('../images/grid-world.png');
        }
        
        .tabs > label[for*="2"]:before {
            margin:0 auto;
            content: url('../images/comp.png');
        }
        
        .tabs > label[for*="3"]:before {
            margin:0 auto;
            content: url('../images/icon2.png');
        }
        
        .tabs > label[for*="4"]:before {
            margin:0 auto;
            content: url('../images/accounting.png');
        }

        .tabs > label[for*="5"]:before {
            margin:0 auto;
            content: url('../images/group.png');
        }

        .tabs > label[for*="6"]:before {
            margin:0 auto;
            content: url('../images/controls.png');
        }
        /* Изменения стиля переключателей вкладок при наведении */
        
        .tabs > label:hover {
            color: #888;
            cursor: pointer;
        }
        /* Стили для активной вкладки */
        
        .tabs > input:checked + label {
            color: #555;
            border-top: 1px solid #0c81f7;
            border-bottom: 1px solid #fff;
            background: #fff;
        }
        /* Активация секций с помощью псевдокласса :checked */
        
        #tab1:checked ~ #content-tab1,
        #tab2:checked ~ #content-tab2,
        #tab3:checked ~ #content-tab3,
        #tab4:checked ~ #content-tab4,
        #tab5:checked ~ #content-tab5,
        #tab6:checked ~ #content-tab6 {
            display: block;
        }

        .tabs p{
            font-size:16px;
            padding-top: 10px;
        }
        /* Убираем текст с переключателей 
* и оставляем иконки на малых экранах
*/
        
        @media screen and (max-width: 680px) {
            .tabs > label {
                font-size: 0;
            }
            .tabs > label:before {
                margin: 0;
                font-size: 18px;
            }
        }
        /* Изменяем внутренние отступы 
*  переключателей для малых экранов
*/
        
        @media screen and (max-width: 400px) {
            .tabs > label {
                padding: 15px;
            }
        }