@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --color-darkblue: #183559;
    --color-red: #EC5055;
    --color-green: #BED34B;
    --color-blue: #3064A5;
    --color-brown: #721719;
    --color-black: #0B132A;
    --color-white: #FFFFFF;
    --color-grey: #CCD7DB;

    --color-text: #263238;
    --color-text-white: #ffffff;
    --color-text-grey: rgba(11, 19, 42, 0.53);

    --color-background: #F1F1F1;
}

.text-darkblue {
    color: var(--color-darkblue)
}

.text-red {
    color: var(--color-red)
}

.text-green {
    color: var(--color-green)
}

.text-blue {
    color: var(--color-blue)
}

.text-brown {
    color: var(--color-brown)
}

.text-black {
    color: var(--color-black)
}

.text-grey {
    color: var(--color-text-grey)
}

.text-white {
    color: var(--color-white)
}

.darkblue {
    background-color: var(--color-darkblue) !important
}

.red {
    background-color: var(--color-red) !important
}

.green {
    background-color: var(--color-green) !important
}

.blue {
    background-color: var(--color-blue) !important
}

.brown {
    background-color: var(--color-brown) !important
}

.black {
    background-color: var(--color-black) !important
}

.grey {
    background-color: var(--color-text-grey) !important
}

.white {
    background-color: var(--color-white) !important
}

body {
    font-size: 18px;
    color: var(--color-text);
    background-color: var(--color-white);
}

select {
    font-size: .8rem;
}

.hidden {display:none}

.uppercase {
    text-transform: uppercase;
}

.container {
    width: 90%;
    max-width: 1700px;
}

.my-btn {
    color: var(--color-black);
    text-transform: uppercase;
    padding: 20px 40px;
    border-radius: 43px;
    background: var(--color-green);
    font-family: 'Roboto', sans-serif;
    position: relative;
    z-index: 1;
    left: 0;
    top: 0;
    transition: all .3s;
}

a.link-btn {
    padding-bottom: 5px;
    color:white;
    margin-left:20px;
    border-bottom: dashed var(--color-black) 2px; 
}

a.link-btn:hover {
    color: var(--color-green);
}

.my-btn:before {
    content: "";
    position: absolute;
    left: 15px;
    top: 15px;
    width: 100%;
    height: 100%;
    border-radius: 43px;
    border: dashed var(--color-black) 2px;
    z-index: -1;
    transition: all .3s;
}

.my-btn:hover {
    left: 8px;
    top: 8px;
}

.my-btn:hover:before {
    left: 7px;
    top: 7px;
}

.clear {clear:both;}

.mb0 {margin-bottom:0}

.relative {position:relative}

a {
    color: var(--color-blue);
    border-bottom: solid #c7c7c7 2px;
    font-weight:500;
}
a:hover {
    color: var(--color-text);
    border-bottom: solid var(--color-text) 2px;
}

.btn-flat {
    border-left: none !important;
    padding: 0 !important;
    color: var(--color-text);
    font-weight: 700 !important;
    height: 1.9rem !important;
    border-bottom: solid var(--color-green) 2px;
    margin-right: 20px;
}

.btn-flat:hover {
    color: var(--color-red);
}

.vh100 {
    height: 100vh
}

.mb15 {
    margin-bottom: 1.5rem
}

.event-btn:after, .certificate-btn:after {
    font: normal normal normal 14px/1 "Font Awesome 5 Free";
    content: "\f2f6";
    font-weight: bold;
    color: inherit;
    font-size: 1.2rem;
    line-height: 44px !important;
}

.certificate-btn:after {
    content: "\f091";
}

.trash-btn:after {
    content: "\f274";
}

.plus-btn:after {
    content: "\f067";
}

.queue-btn:after {
    content: "\f252";
}
.blank-btn:after {
}

.archive-btn:after {
    content: "\f1c6";
}

#particles-js {
    width: 100% !important;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -100;
}

#particles-js canvas {
    height: 100vh !important;
}

h3 {
    margin: 8rem 0 2rem;
    font-size: 2rem;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
}

.hr:after {
    content: "";
    display: block;
    position: relative;
    width: 219px;
    height: 7px;
    top: 15px;
    background: var(--color-green);
    border-radius: 10px;
}

.gallery .gallery-cover {
    border: none;
    border-radius: 10px 10px 0 0;
}

.gallery .gallery-header {
    font-weight: bold;
    text-align: center;
    padding: 40px 20px;
    border-bottom-style: solid;
    border-bottom-width: 10px;
    border-top: dashed 2px #ccd7db;
}

.gallery .gallery-header span {
    display: block;
    height: 80px;
    overflow: hidden;
}

.gallery .event-type-1 .gallery-header {
    border-bottom-color: var(--color-green);
}

.gallery .event-type-2 .gallery-header {
    border-bottom-color: var(--color-blue);
}

.gallery .event-type-3 .gallery-header {
    border-bottom-color: var(--color-red);
}

.gallery-header, .gallery-curve-wrapper {
    border-radius: 0 0 10px 10px !important;
}

.gallery .gallery-header .event-btn, .gallery .gallery-header .certificate-btn {
    position:absolute;
    right: 15px;
    top:-22px;
    z-index:2;
    background: var(--color-green);
    line-height: 44px !important;
}

.gallery .gallery-header .event-btn {
    border-bottom: none;
    background-color: var(--color-black);
    box-shadow: none;
    height: 44px;
    width: 44px;
}

.gallery .gallery-header .event-btn:hover {
    color: white;
}

.gallery .gallery-header .event-btn.trash-btn{
    background-color: var(--color-green);
}
.gallery .gallery-header .event-btn.queue-btn{
    background-color: var(--color-grey);
}
.gallery .gallery-header .event-btn.plus-btn{
    background-color: var(--color-red);
}
.gallery .gallery-header .certificate-btn {
    background: var(--color-red);
}
.gallery .gallery-header .blank-btn {
    background: var(--color-darkblue);
}

.gallery .event-type-1 .gallery-header .event-date {
    position: absolute;
    left: 15px;
    top: -32px;
    z-index: 2;
    width: 64px;
    height: 64px;
    text-align: center;
    background-color: #ffffff;
    border: 2px dashed #ccd7db;
    border-radius: 50%;
    font-size: 1rem;
    padding-top: 25px;
    font-weight: 700;
    color: var(--color-text);
}

.gallery .event-type-1 .gallery-header .event-date:after {
    content: "старт";
    position: absolute;
    top: 9px;
    left: 14px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--color-text);
}

.gallery .event-type-2 .gallery-header .event-date, .gallery .event-type-3 .gallery-header .event-date {
    position: absolute;
    left: 20px;
    top: -32px;
    z-index: 2;
    width: 64px;
    height: 64px;
    text-align: center;
    background-color: #ffffff;
    border: 2px dashed #ccd7db;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 60px;
}

.gallery-header .plus-btn {opacity:0}

.gallery .gallery-expand .gallery-curve-wrapper {
    box-shadow: 5px 10px 20px #CCD7DB
}

.gallery-nav {
    box-shadow: none
}

.gallery-nav ul {
    border-bottom: solid var(--color-grey) 1px;
}

.gallery-nav ul a {
    color: var(--color-text);
    border-bottom: none;
}

.gallery .gallery-body .title-wrapper {
    margin-bottom: 70px !important;
}

#placeholder-navbar .back-btn i {
    line-height: 22px !important
}

.gallery .gallery-body .description {
    font-size: 18px;
    color: var(--color-text);
    font-weight: 400;
}

.gallery .gallery-body .description strong {
    font-weight: 700;
}

.gallery-body hr {
    border: .5px solid #c7c7c7;
}

.gallery-body .event-teacher {
    position: relative;
    margin-left: 3rem;
    font-weight: 700;
    font-size: 2rem;
}

.gallery-body .event-teacher:before {
    color: var(--color-green);
    font: normal normal normal 14px/1 "Font Awesome 5 Free";
    font-weight: bold;
    font-size: 1.5rem;
    content: "\f51c";
    position: absolute;
    left: -3rem;
    top: 1rem;
}

.gallery-body .event-position {
    margin-bottom: 20px;
    padding-left: 3rem;
}

.gallery-body .event-address {
    position: relative;
    margin-left: 2.4rem;
    font-weight: 700;
    color: red;
    font-size: 1.4rem;
}

.gallery-body .event-address:before {
    color: var(--color-green);
    font: normal normal normal 14px/1 "Font Awesome 5 Free";
    font-weight: bold;
    font-size: 1.5rem;
    content: "\f3c5";
    position: absolute;
    left: -2.4rem;
    top: 0;
}

.gallery-action-after-description {
    margin-top: 40px;
}

.gallery-action-after-description .gallery-action-message-container {
    float: left;
    font-weight: 700;
}

.gallery-action-after-description .event-btn-action {
    float: left;
    margin-right: 20px;
    background-color: var(--color-green);
    border-radius: 6px;
    font-weight: 500;
    box-shadow: none;
    height: 50px;
    line-height: 46px;
    padding: 0 28px;
    color: var(--color-black);
}

.gallery-action-after-description .event-btn-action:hover {
    background-color: var(--color-black);
    box-shadow: none;
    color: var(--color-white);
    border-bottom: none;
}

.gallery-action-after-description .event-btn-action.trash-btn{
    background-color: var(--color-red);
    color: white;
}
.gallery-action-after-description .event-btn-action.queue-btn{
    background-color: var(--color-grey);
}
.gallery-action-after-description .event-btn-action.plus-btn{
    background-color: var(--color-green);
}

nav ul:not(.indicators) li.active::before {
    background-color: var(--color-green);
}

.btn-xs {
    width: 50px
}

.btn.right {
    margin-left: 10px
}

.my-card {
    padding: 2.5rem;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 5px 10px 20px #CCD7DB;
    border-radius: 10px;
    min-height: 500px;
    position: relative;
    padding-bottom: 140px;
}

.btn {
    background-color: var(--color-green);
    border-radius: 6px;
    font-weight: 500;
    box-shadow: none;
    height: 50px;
    line-height: 46px;
    padding: 0 28px;
    color: var(--color-black);
}

.btn:hover {
    background-color: var(--color-black);
    box-shadow: none;
    color: var(--color-white);
    border-bottom: none;
}

.btn:focus {
    background-color: #DFDFDF;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #9F9F9F;
}

.btn-zoom {
    background-color: var(--color-blue);
    color: white;
    margin-bottom:2rem;
}
.btn-icon {
    position:relative;
    top:2px;
    margin-left: 10px;
}






input[type=text]:not(.browser-default):focus:not([readonly]) {
    border-bottom: 1px solid var(--color-green);
    -webkit-box-shadow: 0 1px 0 0 var(--color-green);
    box-shadow: 0 1px 0 0 var(--color-green);
}

.dropdown-content li>a, .dropdown-content li>span {
    font-size: 16px;
    color: var(--color-black);
}

[type="checkbox"]:checked+span:not(.lever):before {
    border-right: 2px solid var(--color-green);
    border-bottom: 2px solid var(--color-green);
}


@media only screen and (max-width : 992px) {
    h1 {font-size:2rem !important}
    h3 {font-size:1.8rem}

    .gallery .gallery-body .title-wrapper h3 {
        font-size:1.8rem;
    }
    .gallery .gallery-body .title-wrapper {
        margin-top:40px !important;
        margin-bottom:20px;
    }

    .gallery-body .event-teacher, .gallery-body .event-position, .gallery-body .event-address {
        margin-left:0;
        padding-left:0;
        line-height:1.2;
    }
    .gallery-body .event-teacher:before, .gallery-body .event-address:before {display:none}
}










.help-block-error {color:var(--color-red)}