/* 
    Document   : responsive
    Created on : 26-Oct-2016, 11:18:32
    Author     : joe.towner
    Description:
        Stylesheet for responsive
*/

@media only screen and (max-width: 1180px) {
    #top ul li {
        max-width: 120px;
    }
    #logo, #top ul {
        display: block;
        width: 100%;
    }
    #top ul {
        margin-top: 0px;
        text-align: center;
        margin: -20px 0 0 0;
    }
    #logo a {
        width: 229px;
    }
    #links {
        text-align: center;
    }
    .link {
        width: 100%;
        max-width: 265px;
        height: 300px;
        background-size: cover;
        background-position: center center;
    }
    .link .b {
        background-image: url("../img/link_triangles_large.png");
        background-position: center bottom;
    }
    .link:last-child {
        /*height: 400px;*/
        max-width: 795px;
        width: 100%;
    }
    #link_courses.link .b {
        background-size: cover;
        background-position: center center;
    }
    #ticker li a span {
        display: inline;
    }
    #ticker li a span:first-child:after {
        content: " - ";
    }
    #road_cut_parralax {
        min-height: 500px;
    }
    #road_cut_parralax .wrapper {
        padding-top: 200px;
    }
    #road_parralax, #city_parralax, #road_cut_parralax {
        background-attachment: scroll;
    }
    #footer .social {
        position: static;
        right: auto;
        top: auto;
    }
}

@media only screen and (max-width: 1024px) {
    .link:hover > .s {
        background: rgba(0,0,0,0.2);
    }
    .link:hover > .s .b {
        height: 120px;
    }
    #road_cut_parralax {
        min-height: 300px;
    }
    #road_cut_parralax .wrapper {
        padding-top: 100px;
    }
}

@media only screen and (max-width: 900px) {
    body {
        background: none;
    }
    h1 {
        padding: 20px 0 10px;
    }
    h5 {
        margin: 20px 0;
    }
    #top ul li {
        max-width: 110px;
    }
    #top ul, #road_parralax, #city_parralax, #map, #road_cut_parralax {
        display: none;
    }
    #bar {
        height: 50px;
    }
    #bar a {
        display: none;
        line-height: 50px;
    }
    #bar a#phone {
        display: block;
        float: none;
        text-align: center;
        background: url(../img/phone.png) no-repeat right 10px center;
    }
    .wrapper {
        padding: 0 20px;
    }
    #top .wrapper {
        text-align: center;
    }
    #cert_wrapper {
        width: 50%;
    }
    #cert_wrapper img {
        width: 100%;
        margin: 10px 0;
    }
    
    /*MOBILE BAR*/
    #mobile_bar {
        display: block;
    }
    #burger {
        display: inline-block;
    }
    
    #bar .wrapper, #main_links .wrapper {
        padding: 0;
    }
    #main_links .wrapper {
        padding: 0 10px;
    }
    #links {
        margin: 0;
    }
    .link {
        width: 100%;
        height: 250px;
        max-width: 100%;
    }
    .link .b {
        height: 100px;
        background-size: cover;
    }
    #link_courses {
        /*height: 100vh;*/
        text-align: left;
    }
    
    .grey_content {
        background: #f1f1f1;
    }
    .dark_content .wrapper {
        padding: 40px 20px;
    }
    #contact {
        top: auto;
        position: relative;
    }
    #contact_form, #contact_details {
        display: block;
        width: 100%;
        padding: 0;
    }
    .formStyle input[type="text"], .formStyle textarea {
        margin: 8.5px 0;
    }
    .formStyle {
        margin-bottom: 33px;
    }
    /*CONTENT IMAGES*/
    .imageRight, .imageLeft {
        float: none;
        margin: 10px 0;
        border-radius: 30px;
        width: 100%;
        box-sizing: border-box;
        max-width: 1000%;
    }
    /*COURSES*/
    #course_wrapper {
        width: 100%;
    }
    #course_wrapper a .l span {
        font-size: 16px;
    }
    #course_dates_wrapper ul li {
        margin: 20px;
    }
    #course_dates_wrapper ul li div {
        display: block;
        width: 100%;
        margin: 10px;
    }
    #course_wrapper .course {
        width: 100%;
        margin: 5px 0;
    }
    #course_dates_wrapper ul li div:first-child, #course_dates_wrapper ul li div:last-child {
        text-align: center;
    }
    
    .styledform .formElement label, .styledform .formElement input[type=text], .styledform .formElement textarea {
        width: 100%;
        text-align: left;
        margin: 0;
    }
    .styledform .formElement label {
        margin: 10px 0 0;
    }
    /*COURSES*/
    #course_wrapper .row3 .col:first-child,
    #course_wrapper .row3 .col {
        width: 100%;
        padding: 4px 25px;
    }
    #course_wrapper .row3 .col:nth-child(2), 
    #course_wrapper .row3 .col:nth-child(3) {
        display: none;
    }
    /*VACANCIES*/
    #register_wrapper {
        width :100%;
    }
    #vacancy_wrapper {
        margin: 25px 0;
    }
    #vacancy_wrapper .button {
        width: 100px;
    }
    #vacancies_wrapper .button {
        float: none;
        margin-top: 10px;
    }
}