* { 
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}
div {border: 0px red solid;
   
}

.col-1 { width: calc(100% / 12);}
.col-2 { width: calc(100% / 6);}
.col-3 { width: calc(100% / 4);}
.col-4 { width: calc(100% / 3);}
.col-5 { width: calc(100% / 12 * 5);}
.col-6 { width: calc(100% / 2);}
.col-12 { width: 100% ;}

.bold {font-weight: 900; margin: 10px 0px}
.ligth {font-weight: 300; margin: 10px 0px;}
.section-content {
    width: 1140px; 
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 80px;
}
.section-programmist {
    background: url(img/fon.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center; 
}
.section-programmist .social {text-align: end}

.section-programmist .social a  {color: red; text-decoration: none} /* Для меню навигация по сайту */
.section-programmist .social a:link,
.section-programmist .social a:active,
.section-programmist .social a:visited,
.section-programmist .social a:hover {
    color: black;
}

.section-programmist h1 {
      padding-top: 80px;
      font-weight: 900;
}
.section-programmist .box {
    border-left: 5px yellow solid;
    padding-left: 30px;
    margin-left: 60px;
          font-weight: 300;
    margin-bottom: 30px;
    margin-top: 30px;
    
}

.section-programmist ul {
    list-style: none;
    font-weight: 700;
}
.section-programmist ul li {
    background: url(img/LI.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    padding-left: 30px;
    line-height: 30px;
background-position-y: center; 
    
}
.section-programmist input {
    height: 40px; border-radius: 50px;
    display: block;
}
.section-programmist input[type='text'] {
    background: #e7e7e7 ;
    font-weight: 200;
    padding: 10px 20px;
    color: black;
    box-shadow: 4px 4px 0 #e5e5e5;
        
}
.section-programmist input[type='text']::placeholder {
     color: red;
}
.section-programmist input[type='submit'] {
    background: yellow ;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 20px;
    border: 0px;
    box-shadow: 4px 4px 0 #f9ba48
}

.section-programmist .logo {width: 100%; margin: 10px 0px}
.section-work {
    background: url(img/LP-TradingBook_08_00.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center; 
    text-align: center;
}

.section-work .col-3 {margin-bottom: 40px}
.section-work  img {
    
    height: 120px;
    margin: 30px ;
    border-radius: 50%;
    border: 3px black solid;

}
.section-work h2 {
    font-weight: 900;
    padding: 80px 0px;
}



@media only screen and (max-width: 960px)
{
    div { border: 0px red solid;}
    .section-content {width: 100%;}
    .col-3 {width: 33%}
    .null { display: none; }
    .social {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
     .social div {
        width: 25%;
        padding: 20px;
        text-align: center;
        font-size: 30px;
    }
    .col-6 {
        width: 100%;
    }
    .col-2    {
    width: calc(100% / 5);
}
}

@media only screen and (max-width: 768px)
{ 
    .col-1  {width: 30%; padding: 10px 35px}
    .col-2.bold {width: 70%; font-size: 30px;}
    .col-3.ligth {width: 50%; text-align: center}
    .col-2.ligth {width: 50%; text-align: center}
    
     .social {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
     .social div {
        width: 25%;
        padding: 20px;
        text-align: center;
        font-size: 30px;
    }
    .col-3 {width: 50%}
}
@media only screen and (max-width: 480px)
{ 
    .col-1  {width: 20%; }
    .col-2.bold {width: 80%; font-size: 30px;}
    .col-3.ligth {width: 100%; text-align: center}
    .col-2.ligth {width: 100%; text-align: center}
    
     .social {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
     .social div {
        width: 100%;
        padding: 20px;
        text-align: center;
        font-size: 30px;
    }
    .col-3 {width: 100%} 
}