@charset "UTF-8";
/* CSS Document */

html {
  scroll-behavior: smooth;
}
[lang="en"] french{
    display: none;
}
[lang="fr"] english{
    display: none;
}
h1,h2,h3,h4,h5,h6{
    font-family: 'Montserrat', 'Open Sans', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-weight: 700;
}
h1{
    font-size: 55px;
}
h2{
    font-size: 40px;
}
nav{
    font-weight: 600;
    margin-bottom: 60px;
}
a[role="button"], a[role="button"]:hover{
    color: white;
}
header{
    text-align: center;
    background: linear-gradient(to right, #27283c 0%, #27283c 100%), url(https://whc.ca/wp-content/themes/whc/css-modules/images/image-mockups/career.jpg) center 0;
    background-blend-mode: multiply;
    background-size: cover !important;
    padding: 20px 0 100px 0;
    color: white;
}
header .logo{
    height: 70px;
}
header p{
    max-width: 725px;
    margin: 10px auto 30px;
    font-size: x-large;
}
header .nav{
    width: 100%;
}
header nav a{
    color: white;
}
header nav a:hover{
    color: #097ffa;
}
header.job h1{
    max-width: 700px;
    margin: 0 auto;
}
.section{
    padding: 100px 0;
}
.icons {
    height: 64px;
    margin: 60px 0 20px;
}
.fa-canadian-maple-leaf{
    font-size: 64px;
    margin: 60px 0 20px;
    color: #c52127;
}
#about{
    background: #ecebe7;
}
.large {
    font-size: large;
    margin: 10px 0;
}
.caliveshere {
    float: right;
    margin: 0 0 0 40px;
    height: 470px;
}
html[lang="fr"] .caliveshere {
    height: 500px;
}
#keep{
    background: #097ffa;
    color: white;
    font-size: 40px;
    font-weight: 500;
    padding: 80px 0;
    line-height: normal;
    font-family: 'Montserrat', 'Open Sans', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
#keep small {
    font-size: large;
    margin: 0;
    display: block;
}
#keep a{
    margin-top: 20px;
}
#footer{
    background:#27283c;
    color:white;
    padding:40px 0;
    font-size: small;
}
#footer ul{
    list-style:none;
    display:inline-flex;
    margin:0;
    padding-left: 20px;
}
#footer ul li:first-child{
    margin-right:10px;
    padding-right:10px;
    border-right:1px solid #666;
}
#footer ul li a{
    color:#ccc
}
#greenHostingBadge {
    width: 100%;
    max-width: 130px;
    margin-left: 20px;
}
#opportunities .large-icon{
	margin-bottom: 10px;
	color: #c52127;
}
#opportunities .list-group{
	box-shadow: 0 0 20px rgba(0,0,0,.1);
}
#opportunities .card-deck{
	width: 100%;
}
#opportunities .collapse .card{
	margin-top: 30px;
	padding: 40px;
}
#opportunities{
	background: #f5f5f5;
}
#opportunities h2{
	margin-bottom: 20px;
}
#opportunities h4{
	margin-top: 20px;
}
#opportunities h3{
	margin-bottom: 20px;
}
#opportunities .list-group-item {
    line-height: 38px;
}
#opportunities .list-group-item:hover{
	background: #f5f5f5;
}
#opportunities .btn{
	float: right;
}
#opportunities .btn-link:hover{
	text-decoration: none;
}
#opportunities .btn::after{
	content: '\f054';
	font-family: Font Awesome\ 5 Free;;
    font-style: normal;
    font-weight: 900;
	text-decoration: inherit;
	margin-left: 10px;
}
#opportunities .place{
	float: right;
	margin-right: 40px;
}
#opportunities .place::before{
	content: '\f3c5';
	font-family: Font Awesome\ 5 Free;;
    font-style: normal;
    font-weight: 900;
	text-decoration: inherit;
	margin-right: 10px;
	color: #999;
}
#opportunity{
    padding: 60px 15px;
}
#opportunity hr {
    margin: 2rem 0;
}
#opportunity h4, #opportunity h3 {
    margin-top: 40px;
    font-weight: 700;
    font-size: 1.5rem;
}
#opportunity .alert h4{
    margin-top: 0;
}
#opportunity .alert h4 i{
    margin-right: 10px;
}
#opportunity .alert{
    padding: 1.25rem;
    margin-bottom: 40px;
}
#opportunity .btn.text-secondary {
    width: 25px;
}
#opportunity .btn-primary{
    margin-left: 20px;
}
.btn i.fas{
    margin-right: 10px;
}
#apply small.text-muted{
    margin-bottom: 20px;
}
#apply label[for="email"], #apply label[for="phone"], #apply label[for="location"], #apply label[for="linkedin"], #apply label[for="resume"], #apply label[for="hear"]{
    margin-top: 20px;
}
#apply #presentation{
    margin-bottom: 10px;
    height: 200px;
}
#apply .btn i{
    display: none;
}
#apply .btn.spinner i{
    display: inline-block;
    margin: 0;
}
#errors{
    margin-bottom: 0;
    padding-left: 10px;
}
[lang="en"] #errors french{
    display: none;
}
.inputDnD .form-control-file {
     position: relative;
     width: 100%;
     height: 125px;
     outline: none;
     visibility: hidden;
     cursor: pointer;
     background-color: #c61c23;
}
.inputDnD .form-control-file:before {
    content: attr(data-title);
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 100%;
    height: 115px;
    color: #8a8ca2;
    padding-top: 1.5em;
    font-weight: normal;
    line-height: 85px;
    opacity: 1;
    visibility: visible;
    text-align: center;
    border: 2px dashed #ced4da;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: inset 0px 0px 25px rgba(0,0,0,.1);
    overflow: hidden;
}
 .inputDnD .form-control-file:hover:before {
    box-shadow: inset 0px 0px 25px rgba(0,0,0,.25);
}
.fa-file-import {
    position: absolute;
    font-size: x-large;
    color: #8a8ca2;
    margin-top: 35px;
    left: calc(50% - 13px);
}
.modal .text-danger{
    margin-left: 4px;
}
.custom-file:hover .custom-file-label {
    background: #e4edfa;
}
#perks .perk{
    padding: 50px 0;
}
@media only screen and (max-device-width : 428px) and (max-device-height : 926px) {
    .nav-item {
        display: block;
        width: 100%;
    }
    h1 {
        font-size: 48px;
    }
    header p {
        margin: 10px 10px 30px;
        font-size: large;
    }
    .row.justify-content-md-center.align-items-center{
        margin-bottom: 0 !important;
    }
    .row.justify-content-md-center.align-items-center img{
        height: 64px !important;
        margin-bottom: 20px;
    }
    #remote-work .row.justify-content-md-center.align-items-center img{
        height: auto !important;
        margin-bottom: 20px;
    }
    .row.justify-content-md-center.align-items-center div{
        text-align: center !important;
    }
    .caliveshere{
        display: none;
    }
    #opportunities .place {
        display: none;
    }
    #opportunities .btn {
        display: block;
        float: none !important;
    }
    #keep{
        font-size: x-large;
    }
    #keep a {
        display: block;
        margin: 15px 15px 0;
    }
    #opportunity a.btn-outline-secondary i{
        margin-right: 0;
    }
    #opportunity a.btn-outline-secondary span{
        display: none;
    }
}