.leftbar {
    display: block;
    position: fixed;
    margin-left: 0px;
    margin-top: 0px;
    width: 290px;
    height: 100%;
    background-color: #ececec;
    z-index: 10;
}

body {
margin: 0px;
     font-family: 'Roboto', sans-serif;


}

.container {
    padding: 0px;
}


.leftMenuUL {
    display: flex;
    flex-direction: column;
}

.leftMenuLI {
    list-style-type: none;
    padding-left: 0px;
    padding-bottom: 10px;
    font-family: 'Roboto Light';
    font-size: 14pt;
}

a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}

h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 30pt;
    font-weight: bold;
}

.ml40px {
    margin-left: 40px;
    padding-top: 0px;
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-end: 0px;

}

p.left{
    font-family: 'Roboto', sans-serif;
    font-size: 13pt;
    display: block;
    margin-block-start: 0em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.maincontent {
    display: block;
    position: relative;
    width: 1060px;
    margin-left: 290px;
    background-color: white;
    box-shadow: 9px 7px 29px -21px #512800;

}

.headertxt {
    padding: 30px;
    background-color: white;
    border-style: solid;
    border-width: 10px;
    border-color: #ffc600;
}

.headertxt::before {
    content: "Практический курс";
    position: absolute;
    margin-top: -70px;
    margin-left: -10px;
    background-color: white;
    color: #ffc600;
    font-family: "Roboto", sans-serif;
    font-size: 30pt;
    font-weight: bold;
    padding: 10px;
}

.header{
    font-family: 'Roboto', sans-serif;
    font-size: 50pt;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
}

.headerFree{
    font-family: 'Roboto', sans-serif;
    font-size: 35pt;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;

}


.cover {
    padding: 30px;
}

.covernext {
    padding: 30px;
    padding-left: 50px;

    
}


.topline {
    width: 1060px;
    height:100px;
    background-color: #ffc600;

    
}

. {
    width: 294px;
    height: 294px;
}

.forwhom {
    width: 1060px;
    padding: 20px;
    display: flex; 
}

.imgleft 
{
 width: 294px;
 height: 294px;
 display: -webkit-inline-flex;
 display: inline-flex; 
}


p {
    font-family: 'Roboto', sans-serif;
    font-size: 12pt;
    display: block;
    color: #003350;
    margin-block-start: 0.5em;
}

.infor {
    width: 700px;
    padding-left: 40px;
}

.infor2 {
    width: 500px;
    padding-left: 40px;
    
}

.yellH2 {
    color: #ffc600;
    font-size: 30pt;
    font-family: 'Roboto', sans-serif;
    padding-bottom: 10px;
    margin-block-start: 0.1em;
    margin-block-end: 0.1em;
}

.yellH3 {
    color: #003350;
    font-size: 20pt;
    font-family: 'Roboto', sans-serif;
    padding-bottom: 10px;
    margin-block-start: 0.1em;
    margin-block-end: 0.1em;
}

h3 {
    color: #003350;
    font-size: 25pt;
    font-family: 'Roboto', sans-serif;
    padding-bottom: 10px;
    margin-block-start: 0.1em;
    margin-block-end: 0.1em;
}

.flexy {
        display: flex;
}


.btn {
    font-family: 'Roboto', sans-serif;
    background-color: #ffcc00;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    border: none;
    text-transform: uppercase;
    font-size: 30px;
    color: #000;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    padding: 12px 10px 8px;
    line-height: 1;
    width: 445px;
    max-width: 100%;
    font-weight: 900;
}

.footer {
    background-color: #ececec;
    width: 100%;
    height: 550px;
    margin-left: 270px;
}

.small {
    font-size: 11pt;
}

.red {
    color: red;

}

.freeH2 {
    font-family: 'Roboto', sans-serif;
    font-size: 18pt;
    font-weight: 300;
    
}

.headertxtFree 
{
    padding: 30px;
    background-color: white;
    border-style: solid;
    border-width: 10px;
    border-color: red;
}

.headertxtFree::before 
{
    content: "Всем участникам курса";
    position: absolute;
    margin-top: -70px;
    margin-left: -10px;
    background-color: white;
    color: red;
    font-family: "Roboto", sans-serif;
    font-size: 30pt;
    font-weight: bold;
    padding: 10px;
}

.lFooter {
    display: block;
    width: 35%;
    position: relative;
}

.rFooter {
       display: block;
    width: 50%;
    position: relative;
}

.flx {
    display: flex;
    
}

ol{
    list-style: none;
        padding-left: 0px;
    margin-block-start: 0.5em;
}
ol > li{
    padding-left: 20px;
    position: relative;
    margin: 10px;
}
ol > li:before{
    content: '✔';
    position: absolute; top: 0; left: 0;
    color: red;
}

h4 {
        margin-block-end: 0.33em;
}



@media (max-width: 650px) {
    
    .header {
    font-family: 'Roboto', sans-serif;
    font-size: 40pt;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-top: 47px;
}
    
    .leftbar {
        display: none;
    }
    
    .maincontent {
        width: 375px;
        margin-left: 0px;

    }
    
    .banner_img{
        
        width: 100%;
        height: auto;
        
    }
    
    .forwhom {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
    
.infor {
    width: 90%;
    padding-left: 0px;
}
    
    .flexy {
    display: flex;
    flex-direction: column;
}
    
    .infor2 {
    width: 90%;
        padding-left: 0;
}
    
.covernext {
    padding: 0;
    padding-left: 20px;
    width: 90%
        
        
}    
    .covernext  span {
        
        line-height: 2;
        
    }

.banner_click {
    width: 90%;
}

.footer {
    background-color: #ececec;
    width: 100%;
    height: auto;
    margin-left: 0;
    display: flex;
    flex-direction: column;
}

.flx {
    display: flex;
    flex-direction: column;
}

.lFooter {
    display: block;
    width: 100%;
    position: relative;
}
    
    p{
        font-size: 14pt;
    }



.ekat {
    width: 90%;
    height: auto;
}

ol > li {
    padding-left: 20px;
    position: relative;
    margin: 10px;
    font-size: 14pt;
}
    
.leftMenu._deactive {
        display: flex;
}
    
    .logoimg{
        width: 100%;
    }    
    
}