* {
    box-sizing: border-box;
	padding: 0;
    margin: 0;
    outline: none;
    color:rgb(59, 59, 59);
    font-family: 'Arial';
    /* user-select: none; */
}

.table {
    width: 1000px;
    margin-bottom: 60px;
    padding-top: 40px;
}

.line {
    display: flex;
    padding: 20px 10px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(192, 192, 192);
    margin: 5px 0;
    border-radius: 5px;
}

.cell {
    width: 50%;
    font-size: 22px;
}

.kviz {
    width: 100%;
    min-height: 600px;
    background-color: white;
    border: 1px solid rgb(235, 235, 235);
    z-index: 20;
    border-radius: 5px;
    background-color: rgb(243, 231, 218);
    position: relative;
}

.blackFon {
    background-color: hsla(0, 0%, 0%, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 5;
}

.kvizH {
    text-align: center;
    margin-top: 30px;
}

.closed {
    position: absolute;
    top: 10px; 
    right: 10px;
    cursor: pointer;
    display: none;
}

.closed:hover { 
    color: red;
}

.closed:active {
    color: black;
}

.kviz_top {
    width: 1000px;
    margin: auto;
    padding: 20px 30px;
}

.kviz_bottom {
    width: 100%;
    padding: 20px 30px;
    display: flex;
}

.kviz_top_one, .kviz_top_two {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 10px;
    font-size: 15px;
    flex-wrap: wrap;
}

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

@keyframes opacity {
    from {opacity: 0;}
    to {opacity: 1;}
}

.nameTechKviz {
    padding: 10px 20px;
    margin: 10px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    text-align: center;;
    background-color: rgb(255, 255, 255);
    animation-name: opacity;
    animation-duration: 0.5s;
    user-select: none; 
}

.nameTechKviz:hover {
    cursor: pointer;
    background-color: rgb(245, 245, 245);
}

.kviz_img {
    width: 400px;
    height: 450px;
    padding: 10px 10px;
    border: 1px solid black;
}

.kviz_type {
    width: 600px;
    height: 450px;
    padding: 10px 10px;
    border: 1px solid black;
}

@media screen and (max-width: 800px) {
    .table {
        width: 100%;
        margin-bottom: 30px;
    }

    .cell {
        width: 50%;
        font-size: 14px;
    }
}

.sel {
    padding: 2px 10px;
    border-radius: 0px 0px;
    background-color: rgb(236, 236, 236);
}

.textMessage {
    width: 100%;
    height: 100px;
    resize: none;
    border: none;
    padding: 7px;
}

hr {
    border: none;
    color: rgb(206, 206, 206);
    background-color: rgb(206, 206, 206);
    height: 1px;
}

.formTop, .formTopTwo {
    width: 300px;
    height: auto;
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translate(-50%);
    background-color: rgb(255, 100, 22);
    text-align: center;
    padding: 40px 30px;
    border-radius: 10px 10px;
    box-shadow: 5px 5px 15px rgb(22, 22, 22);
    display: none;
    z-index: 5;
}

.whiteSheet, .whiteSheetTwo {
    width: 100%; 
    height: 100vh; 
    background-color: rgb(0, 0, 0); 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 1; 
    opacity: 0.4;
    display: none;
}

.closeWind, .closeWindTwo  {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 14px;
    color: rgb(220, 220, 220);
    cursor: pointer;
}

.closeWind:hover, .closeWindTwo:hover {
    color: white;
}

.formInput, .formInputTwo {
    width: 100%;
    font-size: 20px;
    margin-bottom: 5px;
    padding: 7px 7px;
    border: none;
}

.butSend {
    width: 100%;
    font-size: 20px;
    padding: 7px 7px;
    border: none;
    margin-top: 15px;
    cursor: pointer;
}

.butSend:active {
    transform: scale(0.99);
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

.pagination {
    font-size: 12px; 
    margin: -20px 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}

.pagination a {
    text-decoration: underline;
}

.pagination a:hover {
    text-decoration: none;
}

.colorBlockOne {
    min-height: 400px;
    background-color: rgb(255, 249, 246);
}

.colorBlockTwo {
    height: auto;
    background-color: rgb(243, 231, 218);
}

.headerBlock {
    height: 110px;
    background: linear-gradient(90deg, rgb(213, 96, 0) 0%, rgb(213, 96, 0) 0%, rgb(221, 72, 8) 20%, rgb(221, 72, 8) 20%);
}

.headerBlock div {
    width: 400px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.footerBlock {
    height: auto;
    padding: 40px 0;
    background-color: rgb(66, 52, 47);
}

.footerBlock div, .date {
    color: rgb(212, 212, 212);
    font-size: 20px;
    width: 400px;
}

.imgAbsLogo {
    max-width: 400px; 
    margin: auto; 
    position: relative;
}

.displayFlexCenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

.firstBlock {
    padding: 0px 0 20px 0;
}

.logo {
    max-width: 600px;
    height: auto;
    margin: auto;
    display: flex;
}

.logoTwo {
    max-width: 1200px;
    object-fit: cover;
    transform: rotate(5deg);
    opacity: 0.9;
}

.logoTop {
    font-size: 42px;
}

.logoBottom {
    font-size: 24px;
}

a {
    color: rgb(236, 255, 231);
    text-decoration: none;
}

a:hover {
    color: rgb(120, 255, 87);
}

a:active {
    color: rgb(85, 85, 85);
}

.buttonTop {
    max-width: 250px;
    padding: 12px 0px;
    margin: auto;
    font-size: 30px;
    border: 2px solid rgb(252, 198, 154);
    margin-bottom: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttonTopMass {
    max-width: 300px;
    padding: 12px 0px;
    font-size: 22px;
    border: 2px solid rgb(255, 190, 136);
    margin-bottom: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttonTop:hover, .buttonTopMass:hover {
    cursor: pointer;
    border: 2px solid rgb(68, 200, 32);
}

.buttonTop:active, .buttonTopMass:active {
    transform: scale(0.98);
}

.textMass {
    display: flex; 
    justify-content: center; 
    padding: 10px 20px;
    width: 100%;
}

.buttonTop2 {
    width: 90px;
    padding: 0px 10px;
    font-size: 30px;
    margin-bottom: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.textFirstBlock {
    font-size: 28px;
    padding-bottom: 40px;
    padding-top: 40px;
    text-align: center;
}

.padTop {
    padding-bottom: 40px;
}

.twoFirstBlock {
    font-size: 32px;
    margin-bottom: 10px;
    text-align: center;
    color: rgb(68, 68, 68);
}

.thirtFirstBlock {
    height: auto;
    font-size: 22px;
    text-align: center;
    color: rgb(102, 102, 102);
    padding-bottom: 0px;
}

.tech {
    width: 310px;
    height: 180px;
}

.techDownTwo {
    width: 260px;
    height: 220px;
    display: inline;
    margin: auto;
    border-radius: 5px;
}

.tech:hover, .techDownComp:hover, .techDownTwo:hover {
    opacity: 0.6;
    cursor: pointer;
}

.comm {
    width: 270px;
    height: 330px;
    border-radius: 5px;
    filter: grayscale(0%);
}

.commTop {
    width: 180px;
    height: 180px;
    border-radius: 5px;
    filter: grayscale(0%);
}

.place {
    width: 270px;
    height: 270px;
    border-radius: 5px;
    filter: grayscale(0%);
}

.techText {
    text-align: center;
    font-size: 18px;
    width: 360px;
    height: 100px;
    position: relative;
    margin: auto;
}

.techTextTech {
    text-align: center;
    font-size: 22px;
    width: 360px;
    height: 300px;
    margin: 0 30px;
    position: relative;
    margin: auto;
}

.techTextComp {
    text-align: center;
    font-size: 26px;
    width: 200px;
    height: 90px;
    margin: 0 10px;
    border: 1px solid rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 30px;
    border-radius: 5px;
    background-color: rgb(144, 157, 174);
    color: rgb(255, 255, 255);
}

.techTextComp:hover {
    background-color: rgb(124, 198, 59);
}

.techComm {
    width: 300px;
    height: 620px;
    margin: 0 28px;
    display: block;
    text-align: center;
    margin-bottom: -60px;
}

.techCommTop {
    width: 300px;
    margin: 0 28px;
    display: block;
    text-align: center;
    padding-bottom: 40px;
}

.techCommMas {
    width: 300px;
    margin: 0 28px;
    display: block;
    text-align: center;
    padding-bottom: 20px;
}

.techMap {
    width: 500px;
    margin: 0 28px;
    display: block;
    text-align: center;
    padding-bottom: 40px;
    padding-top: 40px;
}

.techTextCont {
    width: 400px;
    font-size: 18px;
    text-align: left;
}

.map {
    width: 550px;
    height: 550px;
}

.thirtBlock {
    padding: 60px 0;
}

.textHere {
    min-height: 400px;
    max-width: 1030px;
    margin: auto;
    font-size: 18px;
}

.margBot {
    margin-bottom: 80px;
}

.itemBlock {
    width: 1000px;
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.itemBlockMain {
    width: 1200px;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 380px;
    display: flex;
    align-items: center;
}

.itemBlockMainTwo {
    width: 1000px;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 380px;
    display: flex;
    align-items: center;
}

.itemBlockMain:last-child {
    margin-bottom: 80px;
}

.itemBlockFirst {
    padding-top: 20px;
    padding-bottom: 0px;
}

.itemBlockDown {
    padding-top: 0px;
    padding-bottom: 40px;
}

.itemBlockComp {
    padding-top: 20px;
    padding-bottom: 20px;
}

.icon {
    width: 50px;
    cursor: pointer;
}

.icon:hover {
    transform: scale(1.1);
}

.icon:active {
    transform: scale(1);
}

.centerBot {
    text-align: center;
}

.textButBot {
    font-size: 30px;
}

.techDownComp {
    border-radius: 5px; 
    width: 170px; 
    height: 110px;
}

.footerBlock .compText {
    display: flex; 
    width: 1200px; 
    align-items: center; 
    justify-content: center;
    padding-bottom: 10px;
}

.footerBlock .compTextTop {
    display: flex; 
    width: 100%; 
    align-items: center; 
    justify-content: center;
}

.footerBlock .foot {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%;
    padding-top: 20px;
}

.compText div {
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 18px;
}

.borderOne {
    border: 1px solid rgb(120 120, 120); 
    padding: 10px 0; 
    border-radius: 5px;
}

.borderTwo {
    border-radius: 5px; 
    padding: 10px 0; 
    border-bottom: 1px solid rgb(120 120, 120);
}

.borderThree {
    border-radius: 5px; 
    border-bottom: 1px solid rgb(120 120, 120); 
    border-top: 1px solid rgb(120 120, 120); 
    padding: 10px 0;
}

.fourBlock2 {
    padding-top: 0px;
}

.bottMarg {
    margin-bottom: -80px;
}

.linkOpen {
    text-decoration: underline;
    color: rgb(108, 108, 108);
    cursor: pointer;
}

.linkOpen:hover {
    text-decoration: none;
}

.linkOpen:active {
    color: rgb(219, 102, 0);
}

.dispNo {
    width: 200px; 
    display: flex; 
    justify-content: center;
    padding: 0 0 20px 0;
    margin: auto;
}

.logo {
    width: 280px;
    border-radius: 0 0 15px 15px;
    filter: grayscale(0%);
}

.topMarg {
    margin-top: -60px;
}

@media screen and (max-width: 800px) {

    .topMarg {
        margin-top: 0px;
    }

    .itemBlockMainTwo {
        width: 100%;
        padding-top: 20px;
        padding-bottom: 20px;
        height: 100%;
        display: block;
    }
    
    .itemBlockMain:last-child {
        margin-bottom: 80px;
    }

    .itemBlockMain {
        width: 100%;
        padding-top: 20px;
        padding-bottom: 20px;
        height: 100%;
        display: block;
    }

    .itemBlock {
        width: 100%;
    }

    .buttonTopMass {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .bottMarg {
        margin-bottom: 0px;
    }

    .fourBlock2 {
        padding-top: 40px;
    }

    .itemBlockFirst {
        padding-bottom: 40px;
    }

    .itemBlockFirst div {
        margin: auto;
    }

    .footerBlock div, .date {
        width: 100%;
    }

    .footerBlock .foot {
        color: rgb(212, 212, 212);
        display: block;
    }
    
    .footerBlock .compTextTop {
        display: none;
    }

    .techTextComp {
        text-align: center;
        font-size: 18px;
        width: 110px;
        margin: 0 0;
    }

    .techDownComp {
        border-radius: 5px; 
        width: 90px; 
        height: 50px;
        margin: auto;
        display: block;
        margin-bottom: 20px;
    }

    .techCommMas {
        width: 300px;
        margin: 0 auto;
        display: block;
        padding-bottom: 0px;
    }

    .textButBot {
        font-size: 30px;
    }

    .itemBlock {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .pagination {
        margin: 20px 0 20px 0;
        display: block;
        text-align: center;
    }

    .displayFlexCenter {
        display: block;
    }
    
    .dispComp {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .tech {
        width: 310px;
        height: 180px;
        margin-top: 70px;
    }

    .techDownTwo {
        width: 250px;
        height: 180px;
        margin-top: 70px;
        position: relative;
        left: 0;
        top: 0;
    }

    .techText:first-child {
        margin-top: 40px;
    }

    .logo {
        width: 100%;
    }

    .logoTwo {
        width: 100%;
    }

    .logoTop {
        font-size: 34px;
    }
    
    .logoBottom {
        font-size: 20px;
    }

    .displayFlexCenter .hideTop {
        display: none;
    }

    .headerBlock div {
        width: 100%;
    }

    .headerBlock {
        height: 260px;
    }

    .sel {
        margin-top: 30px;
    }

    .secondBlock {
        height: auto;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .textFirstBlock {
        padding-top: 40px;
    }

    .textHere {
        padding: 0 30px;
        font-size: 18px;
    }

    .margBot {
        margin-bottom: 0px;
    }

    .place {
        width: 100%;
    }
    
    .techComm {
        width: 100%;
        height: 530px;
        margin: 0 0;
        padding: 10px 50px 50px 50px;
    }

    .firstBlock {
        padding: 20px 20px 20px 20px;
    }

    .techTextCont {
        width: 100%;
        text-align: center;
        padding-top: 40px;
        font-size: 18px;
    }

    .techText {
        text-align: center;
        font-size: 22px;
        width: 100%;
        height: 100px;
        position: relative;
        margin: 10px auto;
    }
    
    .techTextTech {
        text-align: center;
        font-size: 22px;
        width: 100%;
        height: 300px;
        margin: 10px 30px;
        position: relative;
        margin: auto;
    }

    .techMap {
        width: 100%;
        margin: 0 0;
    }
    
    .map {
        width: 100%;
        height: 400px;
    }

    .disp {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .centerBot {
        margin-bottom: 40px;
        width: 100%;
        text-align: center;
    }

    .borderOne {
        border: 0px solid rgb(220 220, 220); 
        padding: 10px 0; 
        border-radius: 10px;
    }
    
    .borderTwo {
        border-radius: 10px; 
        padding: 10px 0; 
        border-bottom: 0px solid rgb(220 220, 220);
    }
    
    .borderThree {
        border-radius: 10px; 
        border-bottom: 0px solid rgb(220 220, 220); 
        border-top: 0px solid rgb(220 220, 220); 
        padding: 10px 0;
    }

    .dispNo {
        display: none;
    }
}