/* ---- MOBILE >= SM VERSION ----*/

@media (min-width:355px) and (max-width: 767px) {
    .row {
        margin-right: 0px;
        margin-left: 0px;
    }
    h1,
    h2 {
        font-size: 1.5rem;
    }
    .container-fluid {
        padding-left: 0px;
        padding-right: 0px;
    }
    /* navbar*/
    .navbar-toggler-icon>.hamburger-icon {
        line-height: 1.5;
    }
    nav>span.short-navbar-text {
        color: rgba(255, 255, 255, 1);
        display: block;
    }
    .navbar {
        background-color: rgba(21, 21, 21, 0.9);
    }
    #collapsibleNavbar {
        margin-top: -25px;
        background-color: rgba(21, 21, 21, 0.9);
    }
    #collapsibleNavbar>ul>li {
        padding: 15px 8px;
        font-size: 20px;
    }
    /* home titel*/
    .office-background {
        margin-top: 60px;
        background-image: url("../img/design-pictures/code_achtergrond.png");
        background-size: cover;
        background-position: center center;
    }
    .upper-element-text {
        padding-top: 7px;
    }
    .upper-element-text .row h1 {
        font-size: 30px;
        text-align: center;
    }
    .upper-element-text .row p {
        text-align: center;
    }
    .upper-element-text .row p:last-child {
        text-align: center;
        font-family: 'Roboto', sans-serif;
        color: #39b54a;
    }
    .playButton {
        display: none;
    }
    .watchOurVideoTexts {
        display: none;
    }
    /* home intro  */
    #home-intro>.image {
        display: none;
    }
    #home-intro>h2 {
        font-size: 22px;
        color: #39b54a;
    }
    .p-text>h2 {
        font-size: 22px;
        color: #39b54a;
    }
    /*benefits of apps*/
    .benefits-apps {
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 15px;
        margin-top: 50px;
        background-color: white;
        color: black;
        margin-right: 0px;
    }
    .rowBen {
        display: none;
    }
    .screenshot-video>img {
        display: none;
    }
    .playTheVideo {
        display: none;
    }
    .playRoundIcon {
        display: none;
    }
    .watchworks {
        color: black;
    }
    /*Home about us*/
    .aboutUs {
        padding: 0px;
        margin: 0px;
        padding-top: 15px;
        padding-left: 15px;
    }
    .aboutUsTeam {
        padding: 0px;
        margin: 0px;
        color: #000000;
    }
    .hiring-section {
        color: #39b54a;
    }
    .hiring-section>.col-12>h2 {
        font-size: 1.5rem;
    }
    .hiring-section>div>p>a {
        color: #39b54a;
        font-family: 'Open Sans', sans-serif;
        font-weight: bold;
        font-style: italic;
        text-decoration: underline;
    }
    .companyInfo {
        font-family: sans-serif;
        text-decoration: none;
        font-weight: bold;
    }
    .p-text>h2 {
        font-size: 22px;
    }
    .divUnicorn {
        position: relative;
    }
    #unicorn {
        height: 100px;
        width: 100px;
        position: absolute;
        right: 29px;
        bottom: -35px;
    }
    .heart {
        display: none;
    }
    /*PROJECTS*/
    #home-projects {
        margin-top: 10px;
        color: black;
    }
    .projectsDiv {
        padding-top: 15px;
    }
    .project-img,
    .project-img img {
        width: 100%;
        height: auto;
    }
    .thumbnailPart1>div {
        font-family: 'Open Sans', sans-serif;
        font-weight: bold;
    }
    .searchField {
        display: none;
    }
    /*people and partners*/
    .mainFooter {
        background-color: #000;
    }
    .col-md>.link {
        font-family: 'Opens Sans', sans-serif;
        color: white;
        text-decoration: none;
    }
    address>a {
        color: #39b54a;
        font-weight: bold;
    }
    #home-people>h2 {
        padding-top: 30px;
        color: #39b54a;
    }
    #home-people {
        padding-bottom: 30px;
    }
    /*footer*/
    #footer-contact {
        padding-bottom: 50px;
        padding-top: 50px;
    }
    #footer-contact>hr {
        background-color: white;
    }
    #fote>hr {
        background-color: white;
        margin-top: 51px;
    }
    #footer-copyright {
        max-width: 1920px;
        font-family: 'Open Sans', Light;
    }
    .thumPeopple>p {
        color: #111;
        font-family: 'sans-serif', sans-serif;
    }
    .peopleLink {
        color: #0c9444;
        font-weight:600;
        text-decoration: underline;
    }
    .peopleLink:hover {
        text-decoration: none;
        color: #0c9444;
    }
    .svgstyle {
        display: none;
    }
    .gradientarea {
        background: #152330;
    }
    #svg-logo {
        height:60px;
        margin-top:50px;
        padding-left: 1rem;
    }
    
    #svg-icon {
        height:100px;
    }
}


/* ---- MOBILE >= SM VERSION ----*/

@media (min-width:355px) and (max-width: 767px) {
    /*Service*/
    .serviceArea {
        background-image: url("../img/design-pictures/code_achtergrond.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top right;
        height: 432px;
        max-height: 1000px;
    }
    .serviceIntro {
        width: 320px;
        padding-top: 100px;
        width: 320px;
        margin: 0px;
        padding-left: 2%;
        padding-right: 0px;
    }
    .serviceIntro>h1 {
        font-size: 2rem;
    }
    .hidesmall {
        display: none;
    }
    .serviceSoftware {
        padding-top: 50px;
        margin: 0px;
    }
    .serviceSoftware>.row>.serviceSoftwareText>h1 {
        font-size: 2rem;
        padding-left: 0%;
        width: 100%;
    }
    .serviceSoftware>.row>.serviceSoftwareText>p {
        font-family: 'Open Sans', Light;
        width: 324px;
        font-size: 16px;
    }
    /*Service website area*/
    .serviceWebsitetext {
        padding-top: 50px;
        padding-bottom: 50px;
        color: black;
        font-family: 'Open Sans', Light;
    }
    .serviceWebsitetext>h2 {
        font-family: inherit;
    }
    .serviceWebsite>.row>.serviceWebsiteImage {
        display: none;
    }
    /* service app*/
    .rowAppService>.appService {
        padding-left: 20px;
        padding-right: 10px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .rowAppService>.appService>h2 {
        font-family: inherit;
    }
    .rowAppService>.appService>p {
        font-family: 'Open Sans', Light;
    }
    #services-app>.rowAppService>.handphone>img {
        display: none;
    }
    /*Hosting Area*/
    .hostingArea {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .hostingArea>.services-hosting>.rowHosting>.col-10>p {
        font-family: 'Open Sans', Light;
        padding-top: 20px;
    }
    .hostingArea>.services-hosting>.rowHosting>.hostingH1>h1 {
        font-size: 2rem;
        padding-left: 15px;
    }
    .hostingArea>.services-hosting>.rowHosting>.hosting {
        display: none;
    }
    .hostingArea>.services-hosting>.rowHosting>.hosting>img {
        display: none;
    }
    /*Advice area*/
    .adviceArea>.serviceAdvice>.rowAdvice>.advice>img {
        display: none;
    }
    .adviceArea>.serviceAdvice>.rowAdvice>.col-10>p {
        font-family: 'Open Sans', Light;
    }
    .adviceArea {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}


/* ---- JOB PAGE ----*/

@media (min-width:355px) and (max-width: 767px) {
    /*Intro*/
    .jobIntroBan {
        background-image: url("../img/superman.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 80% 0%;
        max-height: 800px;
        height: 60vh;
        position: relative;
        margin-top: 57px;
    }
    .blur {
        background-color: rgba(21, 41, 21, 0.6);
        position: absolute;
        width: 100%;
        max-height: 800px;
        height: 60vh;
    }
    #home-intro h2{
        margin-top:20px;
    }
    .rowIntro {
        position: absolute;
        top: 5%;
        left: 5%;
        right: 15%;
        bottom: 15%;
    }
    .jobIntroBan>.blur>.rowIntro>.jobsIntro>h1 {
        font-size: 2rem;
    }
    .jobIntroBan>.blur>.rowIntro>.jobsIntro>h2 {
        font-size: 1rem;
    }
    .jobIntroBan>.blur>.rowIntro>.jobsIntro>p {
        font-family: 'Open sans', sans-serif;
        width: 100%;
    }
    /*unicorn vacature area*/
    .uniCornVac {
        color: black;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .uniCornVac>.unicornVacSection>.rowUnicornVac>.unicornVacText>p {
        font-family: 'Open sans', sans-serif;
    }
}