@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
       @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 
       @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
        .college_main {
            width: 80%;
            min-height: 80vh;
            margin: auto;
            margin-bottom: -20px;
            overflow-x: hidden;
            padding-top: 160px;
            padding-bottom: 20px;
            font-family: "Montserrat";
            /*border: solid 1px black;*/
            overflow-y: auto;
            box-sizing: border-box;
            box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
            background-color: white;
        }
        .college_archive {
            width: 20%;
            min-width: 250px;
            height: 100%;
            min-height: 80%;
            font-family: "Montserrat", "Open+Sans";
            box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
            position: fixed;
            margin-bottom: 350px;
            overflow-x: hidden;
            cursor: pointer;
            font-family: "Montserrat";
            background-color: white;
        }
        /* Скрываем scrollbar для Chrome, Safari и Opera */
        .college_list::-webkit-scrollbar {
          display: none;
        }
         
        /* Скрываем scrollbar для IE, Edge и Firefox */
        .college_list {
          -ms-overflow-style: none;  /* IE и Edge */
          scrollbar-width: none;  /* Firefox */
        }  
        
        

        .college_archive_title {
            width: 250px;
            height: 40px;
            /*box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;*/
            background: white;
            margin-top: 0;
            position: fixed;
            z-index: 2005;
            padding-bottom: 10px;
        }
        .college_archive_title > h3 {
            padding-top: 10px;
            text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
        }
        .college_archive h3 {
            /*font-size: 18px;
            padding-left: 50px;*/
             width: 100%;
             height: 30px;
             padding-left: 0px;
             margin: 10px 0;
             text-align: center;
             font-size: 1.2em;
             line-height: 0.9em;
             color: #05163c;
        }
        .college_list {
            margin-top: 40px;
            color: #150555;
            overflow-y: scroll;
            padding: 0 10px;
            overflow-x: hidden;
        }
        .college_list ul {
        width: 100%;
        height: auto;
        list-style-type: none;
        text-align: left;
        padding: 10px 0 10px 0;
        margin-bottom: 350px;
        
         
        }
        .college_list li {
        width: 80%;
        height: auto;
        margin-top: 0;
        font-size: 15px;
        margin-left: 0;
        padding: 10px; 
        }
        .college_list ul li a {
            text-decoration: none;
            font-size: 1em;
            display: inline-block;
            position: relative;
            padding: 0;
            font-family: "Roboto", "Montserrat", 'Open Sans', sans-serif;
            font-weight: 300;
            color: #05163c;
            width: 100%;
            text-decoration: none;
            
            -webkit-transition: color .5s ease, padding .5s ease;
            -moz-transition: color .5s ease, padding .5s ease;
            transition: color .5s ease, padding .5s ease;
        }
        .college_list > ul > li > a:hover,
        .college_list > ul > li > a:focus {
        color: rgb(34, 22, 168);
        padding-left: 15px;
        }
        .college_list > ul > li > a:before {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 1px;
        width: 90%;
        -webkit-transition: width 0s ease;
        transition: width 0s ease;
        }
        .college_archive > .college_list > ul > li > a:after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 1px;
            width: 90%;
            background: #2c2171;
            -webkit-transition: width .5s ease;
            transition: width .5s ease;
        }
        .college_list > ul > li > a:hover:before {
            width: 0;
            background: #150555;
         -webkit-transition: width .5s ease;
         transition: width .5s ease;
        }
        
        .college_list > ul > li > a:hover:after {
         width: 0;
         background: transparent;
         -webkit-transition: width 0s ease;
         transition: width 0s ease;
        }



      



        .college_content {
            width: 75%;
            height: auto;
            justify-content: flex-end;
            
            left: 190px;
            margin: auto;
            max-width: 100%;
            overflow: hidden;
            background-color: white;
            position: relative;
            font-family: 'Roboto', 'Montserrat';
        }
        .college_content_smail {
            width: 98%;
            margin: auto;
            height: auto;
        }
        .college_content_each {
            width: 95%;
            margin: auto;
            margin-top: 20px;
            /*border-bottom: solid 3px rgb(72, 64, 64);
            border-top: solid 3px rgb(72, 64, 64);*/ 
            border-radius: 15px;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            border: solid 1px rgb(207, 207, 209);
        }

        .college_created_at {
            width: 100%;
            height: 2rem;
            text-align: right;
            padding-top: 20px;
            color: #625f5d;
            font-family: 'Montserrat';
        }
        .college_created_at p {
            padding-right: 40px;
            font-family: 'Roboto', 'Montserrat';
        }
        .contest_id {
        color: white;
        z-index: 0;
        opacity: 0;
        width: 20px;
        height: 10px;
    }
        .college_banner_contest {
            width: 100%;
            height: auto;
            margin: auto;
            min-height: 150px;
            max-height: 400px;
            display: flex;
            /*color: #05163c;*/
        }
        .college_banner_contest_info_block {
            padding-left: 5px;
        }
        .college_banner_contest_info {
        width: 45%;
        height: auto;
        padding-top: 0;
        margin: auto;
        margin-top: 0;
        }
        .college_banner_contest_info_data {
            display: flex;
            flex-wrap: wrap;
            color: #262370; 
        }
        .college_banner_contest_datetime_numbermonth {
            display: inline-flex; 
        }
        .college_banner_contest_datetime_time {
            display: inline-flex;
            padding-left: 15px;
        }
        .college_banner_contest_info_title, .college_banner_contest_info_data, .college_banner_contest_info_text {
            width: 95%;
            height: auto;
            margin: auto;
            font-family: "Roboto", "Montserrat";
            padding: 5px;
        }
        .college_banner_contest_img {
        width: 50%;
        min-width: 300px;
        height: auto;
        min-height: 150px;
        max-height: 400px;
        padding-top: 0;
        justify-content: center;
        overflow: hidden;
        position: relative;
        background-size: contain;
        object-fit: cover;
        }
        .college_banner_contest_html_main {
            width: 90%;
            height: auto;
            max-width: 100%;
            margin: auto;
            padding-top: 20px;
            padding-bottom: 20px;
            color: #05163c;
            overflow: hidden;
        }
        .college_banner_contest_img_content {
            height: 200px;
            width: 400px;
            justify-content: center;
            justify-content: center;
            text-align: center;
            max-width: 98%;
            max-height: 100%;
            object-fit: cover;
            background-repeat: no-repeat;
        }
        /*.banner_contest_html_main {
        width: 90%;
        height: auto;
        max-width: 100%;
        margin: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        color: #05063c;
        overflow: hidden;
        font-family: "Roboto", "Open Sans";
        /*border-top: solid 1px black;
    }*/
    @media screen and (max-width: 1650px) {
        .college_content {
            left: 170px;
        }
    }
    @media screen and (max-width: 1550px) {
        .college_content {
            left: 160px;
        }
    }
    @media screen and (max-width: 1470px) {
        .college_content {
            left: 150px;
        }
        .college_archive h3 {
            max-width: 250px;
        }
    }
    @media screen and (max-width: 1400px) {
        .college_content {
            width: 75%;
            left: 140px;
        }
    }
    @media screen and (max-width: 1300px) {
        .college_content {
            width: 75%;
            left: 135px;
        }
    }
    @media screen and (max-width: 1230px) {
        .college_content {
            width: 73%;
            left: 135px;
        }
    }
    
    
        @media screen and (max-width: 1200px) {
            .college_main {
                width: 98%;
            }
            .college_archive {
                width: 25%;
            }
            .college_content {
                left: 150px;
            }
            .college_archive_title {
                width: 270px;
            }
        }
        @media screen and (max-width: 1100px) {
           
            .college_content {
                width: 72%;
                /*right: 0;*/
                left: 135px;
            }
            .college_archive_title {
                width: 250px;
            }
            .college_content_smail{
                width: 98%;
                margin: auto; 
            }
            .college_banner_contest {
                width: 100%;
                margin: auto;
            }
        }
        @media screen and (max-width: 1000px) {
            .college_content {
              width: 72%;
              left: 140px;  
            }
            .college_banner_contest {
                width: 100%;
            }
        }
        @media screen and (max-width: 950px) {
            .college_content {
                left: 140px;
            }
        }
        @media screen and (max-width: 900px) {
            .college_content {
              width: 65%;
              left: 120px;  
        }
        .college_banner_contest {
            display: flex;
            flex-wrap: wrap;
        }
        .college_banner_contest_info {
            width: 100%;
            padding-top: 0px;
            
        }
        .college_banner_contest_img {
            width: 97%;
            margin: auto;
            text-align: center;
            padding-top: 10px;
        }
        }
    @media screen and (max-width: 792px) {
        .college_content {
          width: 65%;
          left: 130px;  
    }
}
    @media screen and (max-width: 770px) {
        .college_content {
          width: 65%;
          left: 130px;  
    }
}
        @media screen and (max-width: 701px) {
            .college_archive {
              overflow: hidden;
                
            }

        }
        @media screen and (max-width: 700px) {
        .college_main {
            width: 100%;
            max-width: 100%;
        }
        .college_content {
            width: 90%;
            margin: auto;
            left: 0;
           
        }
        
        .college_content_each {
            width: 95%;
        }
        .college_archive_title {
            width: 280px;
        }
        .college_banner_contest {
            height: auto;
            padding-bottom: 20px;
        }
        .archive_toggle {
            display: block;
            position: absolute;
            position: fixed;
            width: 18px;
            height: 18px;
            text-align: center;
            
            left: 10px;
            
            top: 8.85em;
            
            padding: 0.5em;
            background: whitesmoke;
            /*background: rgb(231, 231, 232);*/
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            /*color: #6b6969;*/
            color: black;
            cursor: pointer;
           
            font-size: 1.2em;
            line-height: 0.8;
            
            z-index: 5001;
            
            -webkit-transition: color .25s ease-in-out;
            -moz-transition: color .25s ease-in-out;
            transition: color .25s ease-in-out;
            -webkit-transition: left 0.3s;
            -moz-transition: left 0.3s;
            transition: left 0.3s;
             
            }
        .college_archive {
            width: 320px;
            min-width: 320px;
           
            height: auto;
            max-height: auto;
            position: fixed;
            top: 0px;
            bottom: 0px;
            border-radius: 20px;
            margin: 165px 0 100px 0;
            
            left: -380px;
           
            padding: 0px 20px;
            
            -webkit-transition: left 0.3s;
            -moz-transition: left 0.3s;
            transition: left 0.3s;
           
            background: white;
            
            
            z-index: 2000;
        
        }
        .college_list {
            overflow: auto;
        }
        .archive_toggle:after {
            content: '\2630';
            text-decoration: none;
        }
        .archive_toggle:hover {
            color: #1b0c48;
        }
        [id='archive_toggle'] {
            position: absolute;
            display: none;
        }
    
    
    
        [id='archive_toggle']:checked ~ .college_archive > .archive_toggle {
            left: 300px;
            padding-bottom: 4px;
            box-shadow: none;
            top: 8.85em;
            z-index: 5001;
            background: white;
            -webkit-transition: left 0.3s;
            -moz-transition: left 0.3s;
            transition: left 0.3s;
         
        }
        [id='archive_toggle']:checked ~ .college_archive > .archive_toggle:after {
            content: '\2715';
            transition: 3s;
        }
        [id='archive_toggle']:checked ~ .college_archive {
            left: 0px;
            box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
            -moz-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
            -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
            overflow-y: auto;
           
            
        }
        [id='archive_toggle']:checked ~ .college_content {
          
            overflow-x: hidden;
            
            opacity: 0.3;
        }
      
        }
        .college_archive::-webkit-scrollbar {
            width: 1px;
            height: 1px;
          }
          
          
          .college_archive::-webkit-scrollbar-thumb {
             background: linear-gradient(to bottom right, #43fa62 0%, #3545fb 50%);
            border-radius: 5px;
          }
          
          
          .college_archive::-webkit-scrollbar-track:horizontal {
            background-color: rgb(253, 103, 103);
            box-shadow: inset 0 0 2px 2px rgb(185, 185, 185);
          }
      
    @media screen and (max-width: 465px) {
        .archive_toggle {
            top: 8.3em;
            left: 10px;
        }
        .college_archive {
            margin-top: 155px;
            margin-bottom: 0;
        }
        .college_main {
            width: 100%;
            max-width: 100%;
        }
        .college_content {
            width: 100%;
            
        }
        .college_content_each {
            width: 98%;
            max-width: 100%
           
        }
        .college_banner_contest_html_main {
        width: 95%;   
       }
    
    }
    
       .eventcollege_block {
        width: 80%;
        height: auto;
        margin: auto;
        text-align: center;
        border-top: #a9a9ab solid 2px;
        margin-bottom: 20px;
        font-family: "Montserrat";
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        background-color: inherit;
           
       }
    .eventcollege_block h2 {
        font-size: 18px;
        text-align: center;
        color: #262370;
        background: inherit;
        padding: 10px 0 10px 0;
    }
    .form_eventcollege {
        width: 100%;
        height: auto;
        /*border: solid px rgb(163, 162, 162);*/
        position: relative;
        padding-bottom: 10px;
    }
    .eventcollege {
        position: relative;
        width: 50%;
    }
    .eventcollege_NamePhone {
        display: flex;
        width: 90%;
        margin: auto;
    }
    .eventcollege.name, .eventcollege.phone {
        width: 47%;
        margin: auto;
        margin-top: 10px;
    }
    .eventcollege_input.name, .eventcollege_input.phone {
        width: 100%;
        padding: 5px 0;
        border: none;
        border-bottom: 1px solid black;
        outline: none;
        font-size: 12px;
    }
    .eventcollege_input.title {
        width: 88%;
        margin-top: 5px;
        padding: 5px 0 5px 0;
        border: none;
        outline: none;
        font-size: 15px;
        color: #262370;
        border-bottom: #434443 solid 1px;
        font-family: "Montserrat";
    }
    .eventcollege label {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 15px;
        color: #262370;
        transition: .5s;
        pointer-events: none;
    }
    .eventcollege_input.name:focus ~ label {
        top: -15px;
        left: 0;
        font-size: 12px;
        color: #625f5d;
    }
    .eventcollege_input.phone:focus ~ label {
        top: -15px;
        left: 0;
        font-size: 12px;
        color: #625f5d;
    }
    .eventcollege_input.phone:valid ~ label {
        top: -15px;
        left: 0;
        color: #165829;
        font-size: 12px;
    }
    .eventcollege_input.name:valid ~ label {
        top: -15px;
        left: 0;
        color: #161658;
        font-size: 12px;
    }
  
    input:focus:required:valid {
        border-color: green;
        color: green;
        box-shadow: none;
    }





.btn-52 {
    margin-top: 10px;
    margin-bottom: 10px;
    background: none;
    z-index: 1;
}
.button_formcollege {
  font-size: 13px;
  font-weight: 200;
  letter-spacing: 1px;
  padding: 10px 20px 10px;
  outline: 0;
  border: 1px solid black;
  cursor: pointer;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  z-index: 1;
}

.button_formcollege:after {
  content: "";
  background-color: #90d5f8aa;
  width: 100%;
  z-index: -1;
  position: absolute;
  height: 100%;
  top: 7px;
  left: 7px;
  transition: 0.2s;
}

.button_formcollege:hover:after {
  top: 0;
  left: 0;
  z-index: -1;
}
    input:focus:required:valid {
        border-color: green;
        color: green;
        box-shadow: none;
    }
@media (min-width: 768px) {
  .button_formcollege {
    padding: 10px 30px 10px;
  }
}
@media (max-width: 700px) {
    .eventcollege_block {
        width: 90%;
    }
    .eventcollege_NamePhone {
        display: flex;
        flex-wrap: wrap;
    } 
   .eventcollege.name {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
   }
   .eventcollege.phone {
    width: 100%;
   height: auto;
   margin-top: 10px;
   }
}