/*global settings*/
body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #FFFFFF;
    color: #000000;
    position: relative;
}

h1, h2, h3, h4 {
    margin: 0;
    padding: 0;
}

h2, h3, h4 {
    text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.1);
}

header, footer {
    width: 100%;
    height: auto;
    opacity: 0.90;
    z-index: 2;
    border-image: linear-gradient(135deg, #000000 0%, #005A9C 100%) 1;
    background: #FFFFFF;
}

header {
    position: fixed;
    padding: 1.25em 0;
    border-bottom: solid 0.1em;
}

footer {
    position: relative;
    padding: 1.75em 0;
    border-top: solid 0.1em;
}

/*background*/
.code-line {
    position: fixed;
    white-space: nowrap;
    opacity: 0.3;
    font-size: 1.0em;
    pointer-events: none;
}

.code-line.gray {
    color: #CCCCCC;
}

.code-line.red {
    color: #a0001b;
}

.code-line.blue {
    color: #005A9C;
}

@keyframes moveCodeLine {
    from {
        transform: translate3d(120%, 0, 0);
    }
    to {
        transform: translate3d(-120%, 0, 0);
    }
}

@keyframes moveCodeLineLeft {
    from {
        left: 100%;
    }
    to {
        left: -100%;
    }
}

@keyframes moveCodeLineRight {
    from {
        right: 100%;
    }
    to {
        right: -100%;
    }
}

/*unchanged parts*/
.wrapper {
    display: table;
    width: 100%;
    height: 100%;
}

.content {
    display: table-row;
    height: 100%;
}

/*header, footer, navigation*/
.headerTitle,
.footerTitle {
    width: 100%;
    text-align: center;
}

.headerButtonTopRow,
.headerTitle,
.headerButtonBottomRow {
    display: flex;
}

.headerButtonTopRow {
    justify-content: flex-end;
    margin: 1em 0.75em 0.5em 0;
}

.headerTitle,
.headerButtonBottomRow {
    justify-content: center;
}

.headerText-link,
.footerText-link {
    font-weight: bold;
    text-decoration: none;
}

.headerButtonBottomRow {
    margin: 0.5em 0 1em 0;
}

.headerText-linkBorderLeft,
.headerText-linkBorderRight {
    width: 50%;
}

.headerText-linkBorderLeft {
    border-right: 0.15em solid #000000;
    padding-right: 0.5em;
    text-align: end;
}

.headerText-linkBorderRight {
    padding-left: 0.5em;
    text-align: start;
}

.navButton {
    width: auto;
    min-width: 2.25em;
    height: 2em;
    background-color: #FFFFFF;
    border-radius: 0.5em;
    cursor: pointer;
    font-size: 1.0em;
    margin: 0 0.25em;
    padding: 0.25em 0.5em;
    border: solid 0.1em #000000;
}

#languageSelectorDe,
#languageSelectorEn,
#languageSelectorUa {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 4em 100%;
    filter: grayscale(100%);
}

#languageSelectorDe {
    background-image: url("../img/De.png");
}

#languageSelectorEn {
    background-image: url("../img/En.png");
}

#languageSelectorUa {
    background-image: url("../img/Uk.png");
}


.textColorRed {
    color: #a0001b;
}

#loginLogoutMenu {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 90, 156, 0.5);
    display: none;
}

#loginInput {
    margin: auto;
    top: calc(50% - 10em);
}

#loginLogoutMenuHidden {
    margin: -1em -0.75em -0.5em 0;
}

#username, #password {
    margin-top: 0.5em;
    width: calc(100% - 1em);
    height: 2.1em;
    background-color: #FFFFFF;
    border-radius: 0.5em;
    border: solid 0.1em #000000;
    outline: none;
}

#username:hover,
#username:focus,
#password:hover,
#password:focus {
    border-color: #E49E4A;
}

input[type=text],
input[type=password] {
    padding: 0 0 0 1em;
    font-size: 1.0em;
}

#logIn,
#forgotData,
#createAccount {
    margin: 0.5em 0 0 0;
    width: 100%;
}

#logIn {
    width: auto;
}

#logIn,
#forgotData {
    text-align: start;
}

#createAccount {
    margin: 3em 0 0 0;
}

/*content*/
.container {
    margin: 0 auto;
    padding: 0 1.25em;
    font-weight: normal;
}

.viewerPDF {
    display: block;
    border: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}

/*icons, windows, background*/
.round-window,
.parallelogram-window {
    display: flex;
    align-items: center;
}

.round-window,
.parallelogram-window,
.parallelogram-window-input {
    justify-content: center;
    padding: 1.25em;
    margin: 1em;
    box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 1.1);
    position: relative;
    overflow: hidden;
    transition-duration: 1.25s;
    transition-delay: 0.25s;
}

.round-window {
    width: 18.75em;
    height: 18.75em;
    border-radius: 50%;
    text-align: center;
}

.parallelogram-window,
.parallelogram-window-input {
    width: 18.11em;
    height: 18.11em;
    transform: skew(-15deg);
    border-radius: 15%;
}

.parallelogram-window-medium {
    padding: 0.625em;
    margin: 0.5em;
    width: 9.055em;
    height: 9.055em;
}

.round-window:hover {
    transform: scale(1.05);
}

.parallelogram-window:hover,
.parallelogram-window-input:hover {
    transform: skew(-15deg) scale(1.05);
}


#round-window-education-0, #round-window-education-1, #round-window-education-2, #round-window-education-3,
.round-window-about {
    margin: auto;
}

#avatarBloodDonationRight {
    display: none;
}

#avatarMain,
#avatarBloodDonationTop,
#avatarBloodDonationBottom,
#avatarMovement {
    transform: skew(15deg);
    width: auto;
    height: auto;
}

#round-window-education-0, #round-window-education-2 {
    background-image: url("../img/ChPI.jpg");
}

#round-window-education-1 {
    background-image: url("../img/ChNU.jpg");
}

#round-window-education-3 {
    background-image: url("../img/logosItAcademy.jpg");
}

.round-window::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.round-window-text, .parallelogram-window-text {
    position: relative;
    font-size: 1.0em;
    padding: 0 0.5em;
}

.introductoryChapter, .conclusionChapter {
    padding: 0.5em 0;
}

.introductoryChapter, .chapter, .chapter-border-top-bottom {
    width: 100%;
}

.chapter {
    line-height: 1.5em;
    text-align: center;
    padding: 0.5em 0;
}

.text-indent {
    padding: 0.25em 0;
    text-indent: 2em;
}

.round-window-title-text,
.parallelogram-window-title-text {
    font-size: 1.25em;
    font-weight: bold;
}

.parallelogram-window-title-text {
    text-align: left;
}

.round-windows-container,
.parallelogram-windows-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.aboutTextLink, .skillsTextLink, .h3TextLink, .specialty, .alert_404_link {
    text-decoration: underline solid #000000 0.01em;
}

.bottomSeparatorLine,
.chapterBorder {
    max-width: 59.33em;
    border-bottom: 0.15em solid #8aa2ce;
    padding: 0;
    margin: 0 auto -0.4em auto;
}

.chapterBorder {
    border-top: 0.15em solid #8aa2ce;
}

.recognitionText,
.parallelogram-window-title-text {
    margin-bottom: 0.5em;
}


#educationText_0_0_0, #educationText_1_0_0, #educationText_2_0_0, #educationText_3_0_0,
#educationText_0_2_0, #educationText_1_2_0, #educationText_2_2_0, #educationText_3_2_0,
#educationText_0_3_0, #educationText_1_3_0, #educationText_2_3_0, #educationText_3_3_0,
#educationText_0_4_0, #educationText_1_4_0, #educationText_2_4_0, #educationText_3_4_0 {
    box-sizing: border-box;
}

#educationText_0_2_0, #educationText_1_2_0, #educationText_2_2_0, #educationText_3_2_0 {
    padding-top: 1em;
}

.educationTextLinkBlack,
.recognitionTextLink {
    text-decoration: none;
}

.fullTimePartTime, .typeOfWork, .topicOfWork {
    font-weight: normal;
}

.fullTimePartTime, .topicOfWork, .curriculumText {
    list-style-type: square;
}

.typeOfWork, #learnProgress {
    text-indent: 1em;
}

#learnProgress {
    width: 18em;
}

.contactTextRow {
    padding-top: 1em;
}

.contactTextLink {
    text-decoration: none;
    font-size: 1.0em;
    font-style: italic;
}

.alert_404_box {
    margin-top: 16em;
}

.recognitionTitle {
    align-items: flex-start;
}

.aboutText,
.introductoryChapter,
.conclusionChapter,
.fullTimePartTime,
.topicOfWork,
.curriculumText,
.recognitionText {
    text-align: justify;
}

#contactText_0_0_1, #contactText_0_1_1, #contactText_0_2_1,
.third-of-the-container-education,
.recognitionTextCenter,
.alert_404 {
    text-align: center;
}

#username,
#password,
#educationText_0_2_0, #educationText_1_2_0, #educationText_2_2_0, #educationText_3_2_0,
#aboutText_0_0_0, #aboutText_1_0_0, #aboutText_1_0_1, #aboutText_2_0_0,
.navButton,
.round-window-text,
.parallelogram-window-title-text,
.aboutTextLink,
.skillsTextLink,
.h3TextLink,
.specialty,
.subject,
.contactTextLink,
.introductoryChapter,
.conclusionChapter,
.alert_404,
.alert_404_link {
    color: #005A9C;
}

#activePage,
.headerText-link,
.footerText-link,
.educationTextLinkBlack,
.recognitionTextLink {
    color: #000000;
}

/*hover effect*/
.headerText-link,
.footerText-link,
.navButton,
.aboutTextLink,
.specialty,
.h3TextLink,
.educationTextLinkBlack,
.contactTextLink,
.recognitionTextLink,
.alert_404_link {
    transition-property: color;
    transition-duration: 0.75s;
    transition-delay: 0.25s;
}

#languageSelectorDe:hover,
#languageSelectorEn:hover,
#languageSelectorUa:hover {
    filter: grayscale(0);
}

#languageSelectorDe:hover,
#languageSelectorEn:hover,
#languageSelectorUa:hover {
    color: #000000;;
}

.headerText-link:hover,
.footerText-link:hover,
.educationTextLinkBlack:hover {
    color: #005A9C;
}

.navButton:hover,
.aboutTextLink:hover,
.h3TextLink:hover,
.specialty:hover,
.contactTextLink:hover,
.recognitionTextLink:hover,
.alert_404_link:hover {
    color: #E49E4A;
}

.round-windows-container {
    box-sizing: border-box;
}

@media only screen and (min-width: 62.5em) {
    .container {
        min-width: 32.5em;
    }

    .third-of-the-container-about {
        min-width: 30em;
        max-width: 30em;
    }

    .two-thirds-of-the-container-about {
        min-width: 30em;
        width: calc(100% - 30em);
    }

    .third-of-the-container-education {
        min-width: 30em;
        width: 50%;
    }

    #avatarBloodDonationLeft {
        display: none;
    }

    #avatarBloodDonationRight {
        display: block;
    }
}

@media only screen and (min-width: 92.5em) {
    .third-of-the-container-education {
        min-width: 30em;
        width: calc(100% / 3);
    }
}

@media only screen and (min-width: 120em) {
    .container {
        max-width: 120em;
    }
}