@media only screen and (max-width: 450px) {

    .width-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }

    .section {
        padding-top: 40px;
    }

    h2 {
        font-size: 30px;
        line-height: 38px;
    }

    .site-header img {
        width: 180px;
    }

    .site-header .menu-btn {
        display: block;
    }
    
    .site-header nav {
        display: none;
    }

    .site-header.shade nav a {
        text-shadow: none;
    }

    .hero > .width-wrapper {
        flex-direction: column;
        
    }

    .hero__left {
        max-width: 100%;
    }

    .hero_text__top {
        font-size: 25px;
    }

    .hero_text__middle {
        font-size: 38px;
        line-height: 45px;
    }

    .hero_text__bottom {
        font-size: 30px;
    }

    .hero__right {
        max-width: 100%;
        margin-top: 40px;
    }
    
    .hero_cta__date {
        width: 100%;
        font-size: 25px;
        text-align: left;
    }

    .hero_cta__actions {
        flex-direction: column;
        width: 100%;
    }

    .hero_cta__actions > .button{
        margin-left: 0;
        margin-bottom: 20px;
        width: 100%;
    }

    .overview__top {
        flex-direction: column;
        width: 100%;
    }

    .overview__top__left {
        width: 100%;
    }

    .overview__top__right {
        margin-left: 0;
        margin-top: 20px;
    }

    .overview__top__right__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .course_number {
        margin-top: 20px;
    }

    .overview_boxes {
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-around;

    }

    .box {
        width: 100%;
        /* flex-grow: 1; */
        flex-basis: 48%;
        margin-bottom: 20px;
    }

    .overview__middle {
        flex-direction: column;
        margin-top: 20px;
    }

    .overview__middle__left {
        width: 100%;
    }

    .overview__middle__right {
        width: 100%;
        margin-left: 0;
        margin-top: 40px;
    }

    .overview_footer {
        flex-direction: column;
    }

    .overview_footer img {
        margin-left: 0;
        margin-bottom: 20px;
    }

    .overview_footer img:last-of-type {
        margin-right: 0;
    }

    .why_content {
        flex-direction: column;
        margin-top: 0;
    }

    .why_left {
        width: 100%;
    }

    .why_right {
        width: 100%;
        padding: 30px;
    }

    .cta1 {
        flex-direction: column;
    }

    .cta1 .links {
        flex-direction: column;
        width: 100%;
        margin-top: 40px;
    }

    .cta1 .links a {
        width: 100%;
    }

    .cta1 .links span {
        margin: 10px 0;
    }

    .overview_classes {
        flex-direction: column;
    }
    
    .overview_classes li {
        width: 100%;
        flex-basis: 100%;
        margin-bottom: 20px;
    }

    .cta2 {
        flex-direction: column;
    }

    .cta2 .button {
        margin: 10px 0;
    }

    .related .width-wrapper {
        /* position: relative; */
        padding-bottom: 20px;
    }

    .courses {
        padding: 0;
    }

    .course-block {
        width: 100%;
        margin-right: 10px;
        height: auto;
        box-shadow: none;
    }

    .course-block img {
        width: 30px;
        margin-right: 10px;
    }

    .course-block .course_content .actions {
        margin-top: 20px;
    }

    .slider-controlls {
        display: none;
    }

    .instructor .instructor-info {
        flex-direction: column;
    }

    .instructor .instructor-info img {
        margin: 0 auto 40px auto;
    }

    .instructor .refferences {
        flex-direction: column;
        margin-bottom: 20px;
    }

    .instructor .refferences li {
        width: 100%;
        margin-bottom: 20px;
        height: auto;
    }

    .lecturers {
        margin-bottom: 0;
        padding-top: 40px;
        flex-direction: column;
    }

    .lecturers li img {
        margin: 0 auto 20px auto;
    }

    .lecturers li span.title {
        margin-bottom: 40px;
    }

    .news li {
        padding: 20px;
    }

    .news li a {
        flex-direction: column;
    }

    .news li img {
        width: 100%;
        margin-bottom: 20px;
    }

    .contact_boxes {
        flex-direction: column;
    }

    .contact_boxes .cbox {
        width: 100%;
        margin-bottom: 20px;;
    }

    .footer_bottom {
        flex-direction: column;
    }

    .footer_bottom nav {
        margin: 20px 0;
    }

    .footer_bottom nav a {
        display: block;
        margin: 10px 0;
    }
}

@media only screen and (min-width: 451px)and (max-width: 1000px) {

    .width-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }

    .section {
        padding-top: 40px;
    }

    h2 {
        font-size: 30px;
        line-height: 38px;
    }

    .site-header img {
        width: 180px;
    }

    .site-header .menu-btn {
        display: block;
    }
    
    .site-header nav {
        display: none;
    }

    .site-header.shade nav a {
        text-shadow: none;
    }

    .hero > .width-wrapper {
        flex-direction: column;
        
    }

    .hero__left {
        max-width: 100%;
    }

    .hero_text__top {
        font-size: 25px;
    }

    .hero_text__middle {
        font-size: 38px;
        line-height: 45px;
    }

    .hero_text__bottom {
        font-size: 30px;
    }

    .hero__right {
        max-width: 100%;
        margin-top: 40px;
    }
    
    .hero_cta__date {
        width: 100%;
        font-size: 25px;
        text-align: left;
    }

    .hero_cta__actions {
        flex-direction: column;
        width: 100%;
    }

    .hero_cta__actions > .button{
        margin-left: 0;
        margin-bottom: 20px;
        width: 100%;
    }

    .overview__top {
        flex-direction: column;
        width: 100%;
    }

    .overview__top__left {
        width: 100%;
    }

    .overview__top__right {
        margin-left: 0;
        margin-top: 20px;
    }

    .overview__top__right__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .course_number {
        margin-top: 20px;
    }

    .overview_boxes {
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-around;

    }

    .box {
        width: 100%;
        /* flex-grow: 1; */
        flex-basis: 48%;
        margin-bottom: 20px;
    }

    .overview__middle {
        flex-direction: column;
        margin-top: 20px;
    }

    .overview__middle__left {
        width: 100%;
    }

    .overview__middle__right {
        width: 100%;
        margin-left: 0;
        margin-top: 40px;
    }

    .overview_footer {
        flex-direction: column;
    }

    .overview_footer img {
        margin-left: 0;
        margin-bottom: 20px;
    }

    .overview_footer img:last-of-type {
        margin-right: 0;
    }

    .why_content {
        flex-direction: column;
        margin-top: 0;
    }

    .why_left {
        width: 100%;
    }

    .why_right {
        width: 100%;
        padding: 30px;
    }

    .cta1 {
        flex-direction: column;
    }

    .cta1 .links {
        flex-direction: column;
        width: 100%;
        margin-top: 40px;
    }

    .cta1 .links a {
        width: 100%;
    }

    .cta1 .links span {
        margin: 10px 0;
    }

    .overview_classes {
        flex-direction: column;
    }
    
    .overview_classes li {
        width: 100%;
        flex-basis: 100%;
        margin-bottom: 20px;
    }

    .cta2 {
        flex-direction: column;
    }

    .cta2 .button {
        margin: 10px 0;
    }

    .related .width-wrapper {
        /* position: relative; */
        padding-bottom: 20px;
    }

    .courses {
        padding: 0;
    }

    .course-block {
        width: 100%;
        margin-right: 10px;
        height: auto;
        box-shadow: none;
    }

    .course-block img {
        width: 30px;
        margin-right: 10px;
    }

    .course-block .course_content .actions {
        margin-top: 20px;
    }

    .slider-controlls {
        display: none;
    }

    .instructor .instructor-info {
        flex-direction: column;
    }

    .instructor .instructor-info img {
        margin: 0 auto 40px auto;
    }

    .instructor .refferences {
        flex-direction: column;
        margin-bottom: 20px;
    }

    .instructor .refferences li {
        width: 100%;
        margin-bottom: 20px;
        height: auto;
    }

    .lecturers {
        margin-bottom: 0;
        padding-top: 40px;
        flex-direction: column;
    }

    .lecturers li img {
        margin: 0 auto 20px auto;
    }

    .lecturers li span.title {
        margin-bottom: 40px;
    }

    .news li {
        padding: 20px;
    }

    .news li a {
        flex-direction: column;
    }

    .news li img {
        width: 100%;
        margin-bottom: 20px;
    }

    .contact_boxes {
        flex-direction: column;
    }

    .contact_boxes .cbox {
        width: 100%;
        margin-bottom: 20px;;
    }

    .footer_bottom {
        flex-direction: column;
    }

    .footer_bottom nav {
        margin: 20px 0;
    }

    .footer_bottom nav a {
        display: block;
        margin: 10px 0;
    }
}