/* 
Theme Name: DPSS MAIN PAGE
Theme URL: https://www.instagram.com/oleksii_holubka/
Description: theme for DPSS Ukraine 
Author: Holubka Oleksii 
Author URL: https://www.instagram.com/oleksii_holubka/ 
Version: beta 3.0
*/
        
        @font-face {
            font-family: Proba Pro;
            src: url(/fonts/ProbaPro-Light.ttf);
        }
        
        body {
            margin: auto;
            font-family: Proba Pro;
            background-color: #DEE4E7;
        }
        
        .modal {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100vh;
            z-index: 99998;
            background-color: rgba(0, 0, 0, 0.3);
            visibility: hidden;
            opacity: 0;
            transition: opacity .4s, visibility .4s;
        }
        
        .modal li {
            padding: 20px 0 15px 0px;
        }
        
        .modal a {
            color: #FFF;
            text-decoration: none;
        }
        
        .modal a:hover {
            color: #ffe358;
        }
        
        .modal.open {
            visibility: visible;
            opacity: 1;
        }
        
        .modal__box {
            font-family: Proba Pro;
            color: #FFF;
            position: relative;
            margin: 30px;
            max-width: 400px;
            height: -webkit-fill-available;
            padding: 15px;
            z-index: 1;
            background-color: #1d2b4e;
            display: grid;
            align-items: center;
            justify-content: center;
            overflow-y: auto;
            box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.59);
            transform: scale(0);
            transition: transform .8s;
        }
        
        .modal_close_btn {
            cursor: pointer;
            position: absolute;
            border: none;
            background-color: transparent;
            padding: 10px;
            top: 8px;
            right: 8px
        }
        
        .modal.open .modal__box {
            transform: scale(1);
        }
        
        header {
            background: url(/details/header-photo.png);
            background-repeat: no-repeat;
            background-size: 1920px 294.4px;
            width: 100%;
            height: auto;
            box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.59);  
        }
        
        .header {
            font-family: Proba Pro;
            background-color: transparent;
            position: flex;
            margin: 0 auto;
            width: 100%;
            z-index: 0;
            height: auto;
        }
        
        .background-picture {
            width: 1920px;
            height: 294.4px;
        }
        
        .background-picture img {
            width: 1920px;
            height: 294.4px;
        }
        
        header .item {
            padding: 10px 0 0 0px;
           /* display: inline;*/
        }
        
        header .websites {
            padding-left: 230px;
        }
        
        header .websites h2:hover {
            cursor: pointer;
            color: #ffe358;
        }
        
        .text1 {
            margin-top: 0px;
        }
        
        header .item h2 {
            color: #FFF;
            font-family: Proba Pro;
            font-size: 22.5px;
            font-style: bold;
            font-weight: 700;
            line-height: 10px;
        }
        
        header .item h3 {
            color: #FFF;
            font-family: Proba Pro;
            font-size: 15px;
            font-style: normal;
            font-weight: 700;
            line-height: 10px;
        }
        
        header .item z {
            color: #AAB3C6;
            font-family: Proba Pro;
            font-size: 15.3px;
            font-style: normal;
            font-weight: 700;
            line-height: 15px;
        }
        
        header .eyes img {
            margin-top: 10px;
            width: 20px;
            height: 20px;
        }
        
        header .eyes {
            display: inline-flex
        }
        
        header .eyes h3:hover {
            cursor: pointer;
            color: #ffe358;
        }
        
        header h1 {
            margin: 0 auto;
            display: flex;
            justify-content: center;
            color: #fff;
            text-align: center;
            font-family: Proba Pro;
            font-size: 35px;
            font-style: normal;
            font-weight: 400;
            cursor: pointer;
        }
        
        header h1:hover {
            color: #ffe358;
        }
        
        header p {
            display: relative;
            text-align: center;
            color: #fff;
            font-family: Proba Pro;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
            letter-spacing: 0.2px;
        }
        
        header .flag img {
            margin: 0 auto;
            display: flex;
            justify-content: center;
            width: 60px;
            height: 60px;
            flex-shrink: 0;
        }
        
        header .menu-container {
            color: #FFF;
            background-color: #ffffff;
            font-family: Proba Pro;
            font-size: 17px;
            font-style: normal;
            font-weight: 700;
            line-height: 18px;
            padding: 5px 0px;
        }

        header .menu-container-new div{
            background-color: #ffffff;
            color:#04080c;
            margin: 5px;
            border-radius: 10px;
            border-left: 10px solid #ffffff; 
            box-shadow: 2px -2px 5px 0 rgba(0,0,0,.1),
                        -2px -2px 5px 0 rgba(0,0,0,.1),
                        2px 2px 5px 0 rgba(0,0,0,.1),
                        -2px 2px 5px 0 rgba(0,0,0,.1);
            letter-spacing: 1px;
            transition: 0.3s all linear;
        }
        .menu-container-new div:nth-child(2){border-color: #ffffff;}
        .menu-container-new div:nth-child(3){border-color: #ffffff;}
        .menu-container-new div:nth-child(4){border-color: #ffffff;}
        .menu-container-new div:nth-child(5){border-color: #ffffff;}
        .menu-container-new div:nth-child(6){border-color: #ffffff;}
        .menu-container-new div:nth-child(7){border-color: #ffffff;}
        .menu-container-new div:hover {border-left: 10px solid transparent;}
        .menu-container-new div:nth-child(1):hover {border-right: 10px solid #004BC1;}
        .menu-container-new div:nth-child(2):hover {border-right: 10px solid #004BC1;}
        .menu-container-new div:nth-child(3):hover {border-right: 10px solid #004BC1;}
        .menu-container-new div:nth-child(4):hover {border-right: 10px solid #004BC1;}
        .menu-container-new div:nth-child(5):hover {border-right: 10px solid #004BC1;}
        .menu-container-new div:nth-child(6):hover {border-right: 10px solid #004BC1;}
        .menu-container-new div:nth-child(7):hover {border-right: 10px solid #004BC1;}

        header .menu-container-new{
            margin: 5px;
        }
        
        header #tabs .tab {
            text-align: center;
            align-items: center;
            display: inline-block;
            width: 250px;
            padding: 5px;
            cursor: pointer;
            position: relative;
            z-index: 5;
        }
        
        header #tabs .tab:hover {
            color: #ffe358;
        }
        
        #tabs .whiteborder {
            background-color: #1d2b4e;
        }
        
        #tabs .tabContent {
            width: 150px;
            padding: 40px 45px;
            z-index: 1;
            margin: 0 auto;
            height: auto;
            background-color: #1d2b4e;
            box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.59);
            display: table;
        }
        
        #tabs .hide {
            display: none;
        }
        
        #tabs .show {
            display: block;
        }
        
        #tabs .tabContent .positions {
            display: inline-block;
            padding: 40px;
            cursor: pointer;
        }
        
        #tabs .tabContent .positions:hover {
            color: #ffe358;
        }
        
        section {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.59);
            margin: auto;
            width: 100%;
            height: 100%;
        }
        
        sidebar {
            position: relative;
            width: auto;
            float: left;
            margin: 15px 20px;
        }
        
        .container_11 {
            display: flex;
            align-items: center;
            padding-bottom: 10px;
            font-family: Proba Pro;
            width: auto;
            height: 44.4px;
        }
        
        .container_11 .searchbar {
            text-align: center;
            font-size: 19px;
            width: 330px;
            height: 44.44px;
            border: none;
            outline: none;
            padding: 0px;
        }
        
        .side_nav {
            background-color: #fff;
            padding: 0px;
            width: 330px;
            height: 420px;
            display: grid;
            box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.59);
        }
        
        .side-tabs {
            display: flex;
            margin: 0;
            font-size: 19px;
            font-weight: 700;
            text-align: center;
            padding-top: 8px;
            border: 1px solid #DEE4E7;
            display: block;
            width: auto;
            height: 60x;
        }
        
        .side-tabs:hover {
            color: #ffe358;
            cursor: pointer;
            background: radial-gradient(70.71% 70.71% at 50% 50%, #104D82 0%, #234161 100%);
        }
        
        .side-tabs svg {
            position: relative;
            width: 25px;
            height: 25px;
            float: left;
            padding-left: 10px;
        }
        
        footer {
            border-top: 4px solid #1d2b4e;
            background-color: white;
            margin: 0 auto;
            display: flex;
            width: 100%;
            height: auto;
            box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.59);
        }
        
        .footer {
            margin: 0 auto;
            position: relative;
        }
        
        .footer .item {
            padding: 0 65px 0 65px;
            display: inline-block;
        }
        
        .footer .item h1 {
            text-align: center;
            color: #2A2F33;
            font-family: Proba Pro;
            font-size: 19.25px;
            font-style: normal;
            font-weight: 700;
            line-height: 20.25px;
        }
        
        .footer .item p {
            color: #6D727C;
            font-family: Proba Pro;
            font-size: 16.02px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            cursor: pointer;
        }
        
        .footer .item p:hover {
            color: #ffe358;
        }
        
        .copyright h1 {
            margin: 0 auto;
            display: flex;
            justify-content: center;
            text-align: center;
            color: #2A2F33;
            font-family: Proba Pro;
            font-size: 15px;
            font-style: normal;
            font-weight: 700;
            line-height: 20.25px;
            bottom: 0;
        }
        
        .btn-up {
            position: fixed;
            background-color: #1d2b4e;
            right: 80px;
            bottom: 80px;
            border-radius: 25px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.15s ease-in-out, transform 0.3s ease-in-out;
            color: #fff;
            width: 40px;
            height: 40px;
            opacity: 1;
            transform: translateY(0);
        }
        
        .btn-up_hide {
            display: none;
        }
        
        .btn-up_hiding {
            opacity: 0;
            transform: translateY(100px);
        }
        
        .btn-up-icon {
            width: 40px;
            height: 40px;
            fill: currentcolor;
        }
        
        @media (hover: hover) and (pointer: fine) {
            .btn-up:hover {
                background-color: #3a4d7a;
            }
        }
        
        .slider {
            cursor: pointer;
            float: right;
            width: 800px;
            height: 455px;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .slides {
            width: 500%;
            height: 455px;
            display: flex;
            
        }
        
        .slides input {
            display: none;
        }
        
        .slide {
            position: relative;
            width: 20%;
            transition: 2s;
        }
        
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .slide h1 {
            text-align: center;
        }
        
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        
        .overlay img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
        }
        
        .slide .overlay h1 {
            border-bottom: 4px solid #1d2b4e;
            padding: 20px;
            margin: 0;
            font-size: 30px;
            z-index: 1;
        }
        
        .slide .overlay p {
            font-size: 20px;
            padding: 30px;
            margin: 0;
            max-width: 500px;
            z-index: 1;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
            -webkit-text-stroke: 1px black;
        }
        
        .navigation-manual {
            z-index: 1;
            position: absolute;
            width: 100%;
            max-width: 800px;
            margin-top: -40px;
            display: flex;
            justify-content: center;
        }
        
        .manual-btn {
            z-index: 1;
            border: 2px solid #1d2b4e;
            padding: 5px;
            border-radius: 10px;
            cursor: pointer;
            transition: 1s;
        }
        
        .manual-btn:not(:last-child) {
            margin-right: 40px;
        }
        
        .manual-btn:hover {
            background: #1d2b4e;
        }
        
        #radio1:checked~.first {
            margin-left: 0;
            z-index: 1;
        }
        
        #radio2:checked~.first {
            margin-left: -20%;
            z-index: 1;
        }
        
        #radio3:checked~.first {
            margin-left: -40%;
            z-index: 1;
        }
        
        #radio4:checked~.first {
            margin-left: -60%;
            z-index: 1;
        }
        
        .navigation-auto {
            z-index: 1;
            position: absolute;
            display: flex;
            width: 100%;
            max-width: 800px;
            justify-content: center;
            margin-top: 415px;
        }
        
        .navigation-auto div {
            z-index: 1;
            border: 2px solid #1d2b4e;
            padding: 5px;
            border-radius: 10px;
            transition: 1s;
        }
        
        .navigation-auto div:not(:last-child) {
            margin-right: 40px;
        }
        
        #radio1:checked~.navigation-auto .auto-btn1 {
            background: #1d2b4e;
            z-index: 1;
        }
        
        #radio2:checked~.navigation-auto .auto-btn2 {
            background: #1d2b4e;
            z-index: 1;
        }
        
        #radio3:checked~.navigation-auto .auto-btn3 {
            background: #1d2b4e;
            z-index: 1;
        }
        
        #radio4:checked~.navigation-auto .auto-btn4 {
            background: #1d2b4e;
            z-index: 1;
        }

        header #tabs{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

        .size-footer{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

        .pulse-image{
            background-image: url("../images/pulse.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            width: 100%;
            height: 90px;
        }

        .pulse-image a{
            display: inline-block;
            width: 100%;
            height: 100%;
        }

        @media only screen and (max-width: 1200px) {
            header h1{
                font-size: 32px;
            } 
        }
        
        @media only screen and (max-width: 1150px) {
            header h1{
                font-size: 29px;
            }

            sidebar {
                width: 100%;
            }

            .container_11 form{
                width: 100%;
            }

            .container_11 .searchbar {
                width: 100%;
            }

            .side_nav {
                width: 100%;
            }
        }
        
        @media only screen and (max-width: 736px) {
            header h1{
                font-size: 26px;
            }
        }

        @media only screen and (max-width: 642px) {
            header h1{
                font-size: 21px;
            }
        }
        
        @media only screen and (max-width: 576px) {
            header h1{
                font-size: 19px;
            }
        }

        @media only screen and (max-width: 522px) {
            header p{
                font-size: 17px;
            }
        }

        @media only screen and (max-height: 768px) {
            
        }