@import "normalize.css"; /* нормализуем все и вся */


/* --- ШРИФТЫ --------------------------------------------------------------------------------------------------------*/
/** Generated by FG **/
@font-face {
    font-family: 'DoloresCyr-Regular';
    src: url('../fonts/DoloresCyr-Regular.eot');
    src: local('☺'), url('../fonts/DoloresCyr-Regular.woff') format('woff'),
    url('../fonts/DoloresCyr-Regular.ttf') format('truetype'),
    url('../fonts/DoloresCyr-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/** Generated by FG **/
@font-face {
    font-family: 'DoloresCyr-Bold';
    src: url('../fonts/DoloresCyr-ExtraBold.eot');
    src: local('☺'), url('../fonts/DoloresCyr-ExtraBold.woff') format('woff'),
    url('../fonts/DoloresCyr-ExtraBold.ttf') format('truetype'),
    url('../fonts/DoloresCyr-ExtraBold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/** Generated by FG **/
@font-face {
    font-family: 'DoloresCyr-Light';
    src: url('../fonts/DoloresCyr-Light.eot');
    src: local('☺'), url('../fonts/DoloresCyr-Light.woff') format('woff'),
    url('../fonts/DoloresCyr-Light.ttf') format('truetype'),
    url('../fonts/DoloresCyr-Light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/** Generated by FG **/
@font-face {
    font-family: 'TrixieCyr-Plain';
    src: url('../fonts/TrixieCyr-Plain.eot');
    src: local('☺'), url('../fonts/TrixieCyr-Plain.woff') format('woff'),
    url('../fonts/TrixieCyr-Plain.ttf') format('truetype'),
    url('../fonts/TrixieCyr-Plain.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/** Generated by FG - жирный заглавный шрифт с тонкой прожилкой внутри **/
@font-face {
    font-family: 'Intro-Inline';
    src: url('../fonts/Intro-Inline.eot');
    src: local('☺'), url('../fonts/Intro-Inline.woff') format('woff'),
    url('../fonts/Intro-Inline.ttf') format('truetype'),
    url('../fonts/Intro-Inline.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/** Generated by FG - тонкий заглавный шрифт **/
@font-face {
    font-family: 'Intro-Cond-Light';
    src: url('../fonts/Intro-Cond-Light.eot');
    src: local('☺'), url('../fonts/Intro-Cond-Light.woff') format('woff'),
    url('../fonts/Intro-Cond-Light.ttf') format('truetype'),
    url('../fonts/Intro-Cond-Light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/** Generated by FG - тонкий заглавный шрифт **/
@font-face {
    font-family: 'LatoLight';
    src: url('../fonts/LatoLight.eot');
    src: local('☺'), url('../fonts/LatoLight.woff') format('woff'),
    url('../fonts/LatoLight.ttf') format('truetype'),
    url('../fonts/LatoLight.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
/** Generated by FG **/
@font-face {
    font-family: 'LatoRegular';
    src: url('../fonts/LatoRegular.eot');
    src: local('☺'), url('../fonts/LatoRegular.woff') format('woff'),
    url('../fonts/LatoRegular.ttf') format('truetype'),
    url('../fonts/LatoRegular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
/** Generated by FG **/
@font-face {
    font-family: 'LatoBold';
    src: url('../fonts/LatoBold.eot');
    src: local('☺'), url('../fonts/LatoBold.woff') format('woff'),
    url('../fonts/LatoBold.ttf') format('truetype'),
    url('../fonts/LatoBold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* --- ГЛАВНЫЕ КОНТЕЙНЕРЫ --------------------------------------------------------------------------------------------*/
html, body {
    width: 100%;
    /*height: 1px; *//* Required to make the child 100% of the min-height */
    /*min-height: 100%; *//* зададим размер тела не менее экрана (до низа экрана) */
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 18px; /* Определяем начальный шрифт в пикселях (исходная точка относительных размеров) */
}

/* --- ГЛАВНЫЕ КОНТЕЙНЕРЫ --------------------------------------------------------------------------------------------*/
@media screen and (max-width:479px) {
    html, body {
        font-size: 10px; /* Определяем начальный шрифт в пикселях */
    }
    .container .header > .title > h1 a img {
        margin: 0.1em 1rem;
        vertical-align: baseline;
    }

}

@media screen and (min-width:480px) and (max-width:959px) {
    html, body {
        font-size: 14px; /* Определяем начальный шрифт в пикселях */
    }

    .container .header > .title > h1 a img {
        margin: 0.1em 1rem;
        vertical-align: baseline;
    }

}

@media screen and (min-width:960px) and (max-width:1279px) {
    html, body {
        font-size: 14px; /* Определяем начальный шрифт в пикселях */
    }

    .title > h1 {
        display: inline-block; /* если экран бука и более - выводить название в одну строку (не переносить) */
    }

    .container .header > .title > h1 a img {
        margin: 0.1em 0.5rem;
        vertical-align: baseline;
    }

}

@media screen and (min-width:1280px) {
    .title > h1 {
        display: inline-block; /* если экран бука и более - выводить название в одну строку (не переносить) */
    }

    .container .header > .title > h1 a img {
        margin: 0.3em 0.7rem;
        vertical-align: top;
    }
}


body {
    font-family: "Verdana", "Tahoma", "Arial", Sans-Serif;
    color: black;
    background: white url("../images/bg-clouds-2.jpg") 50% no-repeat;
    background-size: cover;
}

.container {
    position: relative;
    width: 100%;
    min-height: 100%;
    margin: 0;
    box-sizing: border-box;
    padding: 1em 0 0 0;
    font-size: 1em;
    color: #000000;
    text-align: center;
    background: url("../images/bg-clouds4.png") repeat-x;
    background-size: contain;
    background-clip: padding-box;

}

.header {
    margin: 0 auto;
    padding: 0;
}

.container .header > img {
    width: 25%;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

.footer {
    /* подвал снизу листа */
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
    background-color: transparent;
}

.footer p {
    text-align: center;
    font-size: 1em;
}

.title {
    width: 100%;
    margin: 0 auto 1em;
    padding: 0;
    text-align: center;
    font-size: 1em;
    vertical-align: middle;
    background: none;
}

.title > h1 {
    position: relative;
    /*display: block;*/
    margin: 0;
    padding: 0;
    font: 5em 'DoloresCyr-Regular', 'Comic Sans MS', Sans-Serif;
    /* название с картинкой в центре не разнывать на части */
    white-space: nowrap;
    /* белая обводка названия сайта */
    text-shadow: #fff 1px 0 0px, #fff 0 1px 0px, #fff -1px 0 0px, #fff 0 -1px 0px;
}


.title .like-it {
    /* после слова "соционика" в шапке показать сердечко */
    display: inline-block;
    position: absolute;
    left: 97%;
    top: 10%;
    width: 0.3em;
    height: 0.3em;
    background: url("../images/heart.png");
    background-size: cover;
}

.title .like-it:hover {
    width: 0.4em;
    height: 0.4em;
}

.title > h1:nth-child(2) {
    margin: 0 1rem;
}

.container .header > .title > h1 a img {
    display: inline-block;
    position: relative;
    z-index: 10;
    width: 0.4em;
    height: 0.4em;
    /* margin: зависит от размера экрана */
    padding: 0;
    box-shadow: none;
    /* vertical-align: зависит от размера экрана */
    opacity: 0.1;
    border: none;
}

.title > h2 {
    margin: 0;
    padding: 0;
    font: 1.25em 'DoloresCyr-Regular', 'Comic Sans MS', Sans-Serif;
    /*color: rgba(255, 255, 255, 1.0);*/
    /*text-shadow: rgba(0, 0, 0, 0.7) 1px 0 0px, rgba(0, 0, 0, 0.7) 0 1px 0px, rgba(0, 0, 0, 0.7) -1px 0 0px, rgba(0, 0, 0, 0.7) 0 -1px 0px;*/
    /*text-shadow: rgba(255, 255, 255, 0.7) 1px 0 0px, rgba(255, 255, 255, 0.7) 0 1px 0px, rgba(255, 255, 255, 0.7) -1px 0 0px, rgba(255, 255, 255, 0.7) 0 -1px 0px;*/
}

.title > h3 {
    margin: 0;
    padding: 0;
    font: 1em 'DoloresCyr-Regular', 'Comic Sans MS', Sans-Serif;
    /*text-shadow: rgba(255, 255, 255, 0.5) 1px 0 0px, rgba(255, 255, 255, 0.5) 0 1px 0px, rgba(255, 255, 255, 0.5) -1px 0 0px, rgba(255, 255, 255, 0.5) 0 -1px 0px;*/
}

.container .header > .title > h1 img:hover {
    /* подсвечиваем аспект в меню */
    opacity: 0.6;
    /* обводим знак аспекта в меню красной рамкой */
    /*border-radius: 5%;*/
    /*border: solid 1px #ff0000;*/
}

.title > h1 > a.brain {
    /* рисунок мозга в названии сайта; он же и блочная ссылка с появляющейся надписью */
    display: inline-block;
    width: 4rem;
    height: 4rem;
    background: url("../images/brain-le-low-outline.png") no-repeat;
    background-size: cover;
    font: normal 1rem/4rem "DoloresCyr-Light", sans-serif;
    text-decoration: none;
    vertical-align: baseline;
    text-align: center;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.0); /* надпись "Теория" вначале не видна */
    text-shadow: none;
}

.title > h1 > a.brain:hover {
    /* при наведении курсора меняется и рисунок и появляется надпись "Теория" */
    background: url("../images/brain-low-outline.png") no-repeat;
    background-size: cover;
    color: rgba(0, 0, 0, 1.0);
    text-shadow: none;
}

a {
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
}

p, ul, ol {
    font: 1em/1.2em 'DoloresCyr-Regular', 'Comic Sans MS', Sans-Serif;
}

h1, h2, h3 {
    font-family: 'DoloresCyr-Regular', 'Comic Sans MS', Sans-Serif;
    margin: 0 auto;
}

h1 { font-size: 3em; }
h2 { font-size: 2em; }
h3 { font-size: 1em; }

.classic {
    font-family: "Verdana", "Tahoma", "Arial", Sans-Serif;
    color: #000000;
    text-align: left;
}

.classic p,
.classic ul,
.classic ol {
    font: 0.78em/1.2em "Verdana", "Tahoma", "Arial", Sans-Serif;
    color: #000000;
    text-align: left;
}

.classic h1,
.classic h2,
.classic h3 {
    font-family: "Verdana", "Tahoma", "Arial", Sans-Serif;
    color: #000000;
}




.center-box {
    /* центральный контейнер для контента*/
    position: relative;
    width: 80%;
    margin: 0.625em auto;
    padding: 0;
    text-align: center;
    clear: both;
}

.left-box {
    /* левый контейнер для контента */
    display: inline-block;
    width: 40%;
    margin: 10px 3.5% 10px 6%;
    padding: 0;
    float: left;
    text-align: center;
}

.right-box {
    /* правый контейнер для контента */
    display: inline-block;
    width: 40%;
    margin: 10px 6% 10px 3.5%;
    padding: 0;
    float: right;
    text-align: center;
}

.center100-box {
    display: inline-block;
    width: 100%;
    margin: 10px auto;
    padding: 0;
    overflow: hidden;
    text-align: center;
    clear: both;
}

.center75-box {
    /* центральный контейнер для контента*/
    display: inline-block;
    width: 75%;
    margin: 10px 12.5%;
    padding: 0;
    overflow: hidden;
    text-align: center;
    clear: both;
}

.center50-box {
    /* центральный контейнер для контента*/
    display: inline-block;
    width: 50%;
    margin: 10px 25%;
    padding: 0;
    overflow: hidden;
    text-align: center;
    clear: both;
}

.center30-box {
    /* центральный контейнер для контента*/
    display: inline-block;
    width: 30%;
    margin: 10px 1.25% 10px 1.25%;
    padding: 0;
    overflow: hidden;
    text-align: center;
    clear: both;
}

.left30-box {
    /* левый контейнер для контента */
    display: inline-block;
    width: 30%;
    margin: 10px 1.25% 10px 2.5%;
    padding: 0;
    float: left;
    overflow: hidden;
    text-align: center;
}

.right30-box {
    /* правый контейнер для контента */
    display: inline-block;
    width: 30%;
    margin: 10px 2.5% 10px 1.25%;
    padding: 0;
    float: right;
    overflow: hidden;
    text-align: center;
}

/* --- Привязка к краям родителя и отвязка ---------------------------------------------------------------------------*/
.left {
    float: left;
}

.right {
    float: right;
}

.float-clear {
    clear: both;
}