/* body */
    * {
        box-sizing: border-box;
        margin: 0 auto;
        padding: 0px;

    }
    body {
    font-weight: 100;
    background-color: #f8f8f8;
    font-family: 'Raleway', sans-serif; 
    }
    body, html{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
    }
    h1, h2, h3, h4, h5, h6{
    font-weight: 200;
}
/* header */
    .topnav {

        height: 70px;
        background-color: #fff;
        box-shadow: 0 1px 0 0 #e0e0e0;

    }
    .topnav a {
        vertical-align: middle;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold!important;
        margin-bottom: 20px;


    }
    .topnav .icon {
        display: none;
        color: black;
    }
    .icon:hover {
        color: gray;
    }

    .headerLink:hover {
        color: black;
    }
    .headerLink {
        margin-left: 40px;
        height:55px;
        width: auto;
        display:inline-block;
        padding-top: 20px;
        color: #4c4c4c;
    }
    @media screen and (max-width: 600px) {
        .topnav a:not(:first-child) {display: none;}
        .topnav a.icon {
            float: right;
            display: block;
            padding-top: 15px;
            padding-right: 10%;
        }
        .topnav {
            height: auto;
            width: 100%;
        }
        .headerLink {
            margin: 0;
            padding-left: 47%;
        }
        .imgHeader {
            left: 38%;
        }
    }
    @media screen and (max-width: 600px) {
        .topnav.responsive {position: relative;}
        .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
        }
        .topnav.responsive .headerLink {
            float: none;
            display: block;
            text-align: left;
        }
}
/* footer */
    #footer {
        background-color: #f8f8f8;
        height: auto;
        width: 100%;
    
    }
    .scienceWhere {
        fill: #6e6e6e;
        height: 100px;
        width: 100px;
        background-image: url("../img/scienceofwherelogogrey.png");
        background-size: cover;
        display: inline-block;
        margin-left: 20px;
        margin-top: 20px;
        transition: .5s;
    }
    .scienceWhere:hover {
        background-image: url("../img/scienceofwherelogo.png");
    }
    .copyright a {
        width: 100%;
        height: auto;
        text-decoration: none;
        margin-left: 46%;
    }
    .copyright a:hover {
        color: black;
        font-weight: bold;
}      
/* Service page */



    #backgroundSectionServices{
        width: 100%;
        height: 75%;
        background-image: url(../img/background-services.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        float: left;
        background-color: white;
    }
    #descriptionSectionServices{
        width: 100%;
        padding: 25px;
        display: inline-block;
        background-color: whitesmoke;
    }
    #serviceSection{
        width: 100%;
        height: 75%;
    }
    .column{
        float: left;
        height: 50%;
        display: block;
        position: relative;
    }
    .colLeft{
        width: 33.33%;
    }
    .colCenter{
        width: 33.33%;
    }
    .colRight{
        width: 33.33%;
    }
    .colOverlayTop{
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        background-color: whitesmoke;
        overflow: hidden;
        width: 100%;
        height: 0;
        opacity: 0;
        transition: .75s ease;
    }
    .column:hover .colOverlayTop{
        bottom: 0;
        opacity: 1;
        height: 100%;
    }
    .overlayTextTop{
        color: #323232;
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .colOverlayBottom{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #323232;
        overflow: hidden;
        width: 100%;
        height: 0%;
        opacity: 0;
        transition: .75s ease;
    }
    .column:hover .colOverlayBottom{
        height: 100%;
        opacity: 1;
    }
    .overlayTextBottom{
        color: whitesmoke;
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    #greyBox{
        position: relative;
        width: 100%;
        height: 40%;
        background-color: #323232;
        display: inline-block;
    }
    .boxColumn{
        position: relative;
        display: block;
        float: left;
        height: 50%;
        border-radius: 4px;
    }
    .hover:hover{
        background-color: #262626;
    }
    .boxLeft{
        width: 22.5%;
        padding: 10px;
        display: inline-block;
    }
    .boxRight{
        width: 22.5%;
        padding: 10px;
        display: inline-block;
    }
    .breakline{
        width: 100%;
        height: 0.5%;
        background: linear-gradient(270deg, #3bc0ff, #51ffd4, #b300ff, #51ffd4);
        background-size: 800% 800%;
        -webkit-animation: breakline 21s ease infinite;
        -moz-animation: breakline 21s ease infinite;
        animation: breakline 21s ease infinite;
            }
        @-webkit-keyframes breakline {
            0%{background-position:0% 50%}
            50%{background-position:100% 50%}
            100%{background-position:0% 50%}
        }
        @-moz-keyframes breakline {
            0%{background-position:0% 50%}
            50%{background-position:100% 50%}
            100%{background-position:0% 50%}
        }
        @keyframes breakline {
            0%{background-position:0% 50%}
            50%{background-position:100% 50%}
            100%{background-position:0% 50%}
        }
    @media only screen and (max-width: 1024px){
        .overlayTextTop h4, .overlayTextBottom h4{
        font-size: 17px;
        }
        }
    @media only screen and (max-width: 600px){
        .colLeft, .colCenter, .colRight{
            width: 50%;
        }
        .overlayTextTop h4, .overlayTextBottom h4{
            font-size: 15px;
        }
        #serviceSection{
            margin-bottom: 37%;
        }
        }
   
    @media only screen and (max-width: 380px){
        .colLeft, .colCenter, .colRight{
            width: 100%;
        }
        .colOverlayTopBlack{
            position: absolute;
            bottom: 100%;
            left: 0;
            right: 0;
            background-color: #323232;
            overflow: hidden;
            width: 100%;
            height: 0;
            transition: .5s ease;
        }
        .column:hover .colOverlayTopBlack{
            bottom: 0;
            height: 100%;
        }
        .overlayTextTopBlack{
            color: whitesmoke;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
} 
/* About page */

    .backgroundSectionAbout{
        width: 100%;
        height: 90%;
        padding: 30px;
        display: inline-block;  
        background-image: url("../img/backgroundAbout.png");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
    #descriptionSectionAbout{
        width: 100%;
        height: 100%;
        display: block;
    }

    .titleSection{
        width: 50%;
        height: 100%;
        display: block;
        background-image: url("../img/titleImage.png");
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        float: left;
    }
    #imageHolder{
        width: 50%;
        height: 50%;
        display: block;
        float: left;
    }
    .wSection{
        width: 25%;
        height: 50%;
        display: block;
        position: relative;
        float: left;
    }
    #companySection, #opportunitySection{
        width: 100%;
        height: 100%;
        display: block;
    }
    .imageSection, .textSection{
        width: 50%;
        height: 100%;
        position: relative;
        float: left;
    }
    .overlayBottom{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #f8f8f8;
        overflow: hidden;
        width: 100%;
        height: 0%;
        opacity: 0;
        transition: .75s ease;
    }
    .wSection:hover .overlayBottom{
        height: 100%;
        opacity: 1;
    }
    .icon{
        display: none;
    }
    .boxCenter h2, .boxCenter h3{
        position: relative;
        top: 20%!important;
    }
    @media only screen and (max-width: 768px){
    #imageHolder{
        display: none;
    }
    .textSection, .imageSection, .titleSection{
        width: 100%;
        height: 60%;
    }
    .wSection{
        width: 50%;
    }
    h3{
        font-size: 105%!important;
    }
    #companySection .imageSection{
        top: 60%;
    }
    #companySection .textSection{
        top: -60%;
    }
    .titleSection{
        padding-bottom: 100%;
    }
    }
    @media only screen and (max-width: 426px){
    .imageSection{
        display: none!important;
        height: 0%;
    }
    .textSection{
        top: 0%!important;
    }
    h3{
        font-size: 120%!important;
    }
    .boxCenter{
        width: 50%!important;
    }
    .boxCenter{
        left: 0%!important;
        right: 0%!important;
        
    }
    
    }
    @media only screen and (max-width: 380px){
    h3{
        font-size: 110%!important;
    }
}
/* Jobs page */
    #backgroundJobs{
        width: 100%;
        height: 100%;
        display: block;
        background-color: purple;
        background-image: url('../img/background-jobs.png');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .expectationSectionJobs{
        width: 100%;
        height: 50%;
        display: block;
        background-color: red;
    }
    .skillDescriptionSectionJobs{
        width: 100%;
        height: 100%;
        display: block;
        background-image: url('../img/jobImage.png');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
    #textBoxJobs{
        background-color: whitesmoke;
        width: 90%;
        height: 60%;
        display: block;
        position: relative;
        top: 20%;
    }
    #textBoxJobs h2{
        font-size: 250%;
    }
    #textBoxJobs h3{
        font-size: 125%;
    }
    #greyTextBoxJobs{
        width: 75%;
        height: 100%;
        position: relative;
        padding: 20px;
        padding-top: 5%!important;
    }
    #callBox{
        width: 50%;
        height: 60%;
        padding: 10px;
        top: 5%;
        border: 1px solid rgb(255, 255, 255, 0.5);
        position: relative;
    }
    .imageSectionJobs, .textSectionJobs{
        width: 50%;
        height: 100%;
        float: left;
        display: block;
    }
    .buttonJobs{
        width: auto;
        padding-left: 5%;
        padding-right: 5%;
        height: 12.5%;
        background-color: transparent;
        border: 2px solid #3bc0ff;
        display: block;
        color: #3bc0ff;
        font-weight: 700;
        border-radius: 2px;
    }
    .buttonJobs span{
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: .5s;
    }
    .buttonJobs span:after{
        content: '\00bb';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: .5s;
    }
    .buttonJobs:hover span{
        padding-right: 25px;
    }
    .buttonJobs:hover span:after{
        opacity: 1;
        right: 0;
    }
    @media only screen and (max-width: 768px){
        .expectationSectionJobs{
            height: 50%;
        }
        .imageSectionJobs, i{
            display: none!important;
        }
        .textSectionJobs{
            width: 100%;
            float: left;
        }
    }
    @media only screen and (max-width: 600px){
        #callBox{
            width: 75%;
        }
    }
    @media only screen and (max-width: 426px){
        .expectationSectionJobs{
            height: 75%;
        }
}