/*! components.css v1.0 */
/* 
    Created on : August 2020
    Author     : Hassan Safieddine
    Licensed   : Jobs for Humanity
*/

@font-face {
  font-family: 'icomoon-jfh-public';
  src:  url('../fonts/icomoon-jfh-public.eot?lmv84f');
  src:  url('../fonts/icomoon-jfh-public.eot?lmv84f#iefix') format('embedded-opentype'),
    url('../fonts/icomoon-jfh-public.ttf?lmv84f') format('truetype'),
    url('../fonts/icomoon-jfh-public.woff?lmv84f') format('woff'),
    url('../fonts/icomoon-jfh-public.svg?lmv84f#icomoon-jfh-public') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="ico-jfh-"], [class*=" ico-jfh-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon-jfh-public' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ico-jfh-key:before {
  content: "\e91d";
}
.ico-jfh-personas:before {
  content: "\e91e";
}
.ico-jfh-location:before {
  content: "\e91b";
}
.ico-jfh-calendar:before {
  content: "\e91c";
}
.ico-jfh-attendees:before {
  content: "\e91a";
}
.ico-jfh-briefcase-2:before {
  content: "\e912";
}
.ico-jfh-checkmark:before {
  content: "\e913";
}
.ico-jfh-connect:before {
  content: "\e914";
}
.ico-jfh-hire:before {
  content: "\e915";
}
.ico-jfh-lightbulb:before {
  content: "\e916";
}
.ico-jfh-refresh:before {
  content: "\e917";
}
.ico-jfh-cog-check:before {
  content: "\e918";
}
.ico-jfh-star:before {
  content: "\e919";
}
.ico-jfh-connections:before {
  content: "\e906";
}
.ico-jfh-color-palette:before {
  content: "\e907";
}
.ico-jfh-clipboard-2:before {
  content: "\e908";
}
.ico-jfh-pen:before {
  content: "\e909";
}
.ico-jfh-charts:before {
  content: "\e90a";
}
.ico-jfh-search-2:before {
  content: "\e90b";
}
.ico-jfh-search:before {
  content: "\e900";
}
.ico-jfh-hand-heart:before {
  content: "\e901";
}
.ico-jfh-cloud:before {
  content: "\e902";
}
.ico-jfh-clipboard:before {
  content: "\e903";
}
.ico-jfh-briefcase:before {
  content: "\e904";
}
.ico-jfh-arrow-left:before {
  content: "\e911";
}
.ico-jfh-arrow-right:before {
  content: "\e90c";
}
.ico-jfh-cheveron-down:before {
  content: "\e90d";
}
.ico-jfh-cheveron-left:before {
  content: "\e90e";
}
.ico-jfh-cheveron-right:before {
  content: "\e90f";
}
.ico-jfh-cheveron-up:before {
  content: "\e910";
}
.ico-jfh-menu:before {
  content: "\e905";
}

/**
    Components
*/

/* used in volunteer form / deprecated? */
.textarea-count-container {
    text-align: right;
    padding: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #555;
}

/* Slick Slider defaults */

.slick-dots > li:only-child {
    display: none;
}

.hswp-slick-prev, .hswp-slick-next {
    width: 60px;
    height: 60px;
    display: inline-block;
    padding: 8px 0;
    font-size: 1.9rem;
    text-align: center;
    /*border: 1px dotted red;*/
    border-radius: 50%;
    background-color: rgba(155,155,155,0.33);
    color: white;
    transition: all 0.26s ease;
    opacity: 0.5;
}
.hswp-slick-prev:hover, .hswp-slick-next:hover {
    color: white;
    transition: all 0.26s ease;
    opacity: 1;
}

.slick-dotted.slick-slider {
    margin-bottom: 0px;
}

.slick-dots li {
    margin: 0 10px;
}

.slick-dots li button::before, 
.slick-dots li.slick-active button::before {
    font-size: 20px;
    line-height: 40px;
    height: 40px;
    width: 40px;
    padding: 0 10px;
}
.slick-dots li button::before {
    color: white;
}
.slick-dots li.slick-active button::before {
    color: white;
}

@media ( max-width: 1024px ){
    #jfh-home-hero-carousel-dots {
        bottom: 110px;
    }
    .slick-dots li {
        margin: 0 10px;
    }
    .slick-dots li button::before, 
    .slick-dots li.slick-active button::before {
        font-size: 16px;
        line-height: 20px;
        height: 20px;
        width: 20px;
        padding: 0 5px;
    }
}

@media ( max-width: 820px ){
    #jfh-home-hero-carousel-dots {
        bottom: 70px;
    }
    .slick-dots li {
        margin: 0 10px;
    }
    .slick-dots li button::before, 
    .slick-dots li.slick-active button::before {
        font-size: 16px;
        line-height: 20px;
        height: 20px;
        width: 20px;
        padding: 0 5px;
    }
}

@media ( max-width: 560px ){
    #jfh-home-hero-carousel-dots {
        bottom: 25px;
    }
    .slick-dots li {
        margin: 0 5px;
    }
    .slick-dots li button::before, 
    .slick-dots li.slick-active button::before {
        font-size: 12px;
        line-height: 20px;
        height: 20px;
        width: 20px;
        padding: 0 5px;
    }
}

/* ScrollReveal class */
html.sr .load-hidden {
    visibility: hidden;
}

/* Letter animation class - one line / no mobile support */
.animate-letter-typing {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: break-word;
    animation: letterAnimation 8s linear 0s 1 alternate;
}
@keyframes letterAnimation {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Letter animation class - multi lines / mobile supported */
.animate-letter-typing-2 {
    direction: ltr;
    word-break: normal;
    color: #0000;
    background:
        linear-gradient(-90deg, #fff 5px, #0000 0) 10px 0,
        linear-gradient(#000 0 0) 0 0;
    background-size: calc(var(--animation-letter-number-chars)*1ch) 200%;
    -webkit-background-clip: padding-box,text;
    background-clip: padding-box,text;
    background-repeat: no-repeat;
    animation: 
        /*letterAnimationB .7s infinite steps(1),*/   
        letterAnimationT calc(var(--animation-letter-number-chars)*.03125s) steps(var(--animation-letter-number-chars)) forwards;
}

@keyframes letterAnimationT {
    from {background-size:0 200%}
}
@keyframes letterAnimationB {
    50% {background-position:0 -100%,0 0}
}

.rtl .animate-letter-typing-2 {
    direction: rtl;
    word-break: normal;
    color: #0000;
    background:
        linear-gradient(to left bottom, #fff 5px, #0000 0) 10px 0,
        linear-gradient(#000 0 0) 100% 0;
    background-size: calc(var(--animation-letter-number-chars)*1ch) 200%;
    -webkit-background-clip: padding-box,text;
    background-clip: padding-box,text;
    background-repeat: no-repeat;
    animation: 
        letterAnimationT calc(var(--animation-letter-number-chars)*.03125s) steps(var(--animation-letter-number-chars)) forwards;
}

/* same as ".rtl .animate-letter-typing-2" but standalone */
/* 
.animate-letter-typing-2-rtl {
    direction: rtl;
    word-break: normal;
    color: #0000;
    background:
        linear-gradient(to left bottom, #fff 5px, #0000 0) 10px 0,
        linear-gradient(#000 0 0) 100% 0;
    background-size: calc(var(--animation-letter-number-chars)*1ch) 200%;
    -webkit-background-clip: padding-box,text;
    background-clip: padding-box,text;
    background-repeat: no-repeat;
    animation: 
        letterAnimationT calc(var(--animation-letter-number-chars)*.03125s) steps(var(--animation-letter-number-chars)) forwards;
}
*/

@keyframes letterAnimationT {
    from {background-size:0 200%}
}
@keyframes letterAnimationB {
    50% {background-position:0 -100%,0 0}
}


/** Autocomplete */

.jfh-autocomplete-suggestions-container {
    position: relative;
}

.jfh-autocomplete-list {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    z-index: 9999;
}

.jfh-autocomplete-list li {
    padding: 10px; 
    background: #FFF;
    border-bottom: #F0F0F0 1px solid;
}

.jfh-autocomplete-list li:hover {
    background:#F0F0F0;
    cursor: pointer;
    cursor: hand;
}

.jfh-autocomplete-list li.ui-jfh-autocomplete-li-active {
    background:#0062FF;
    color: white;
}


/** ReCaptcha v3 */

.grecaptcha-badge { 
    visibility: hidden !important;
    opacity: 0;
}