@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap');

@font-face {
    font-family: 'Rubik';
    src: url(./assets/fonts/static/Rubik-Regular.ttf); 
}
@font-face {
    font-family: 'RubikLight';
    src: url(./assets/fonts/static/Rubik-Light.ttf); 
}
body, html {
    font-family: 'Rubik' !important;
}
.rubik-light {
    font-family: 'RubikLight' !important;
}
#hero-section {
    height: 592px;
    background: #1E2223 url('./assets/images/BeeldHome1.png') no-repeat center top;
    background-size: cover;
}
/* #Cases #hero-section {
    background: #1E2223 url('./assets/images/cases.png');
    box-shadow:inset 0 0 0 2000px rgba(28, 27, 27, 0.5);
} */
#Cases #hero-section {
    background: white url('./assets/images/cases.png') no-repeat center top;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, 0.6);
    background-size: cover;
}
#Ref #hero-section {
    background: white url('./assets/images/ref.png') no-repeat center top;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, 0.6);
    background-size: cover;
}
:root {
    --IbBlue : #009DE0;
    --IbRed : #C20016;
    --IbYellow : #E7BA00;
    --IbDarkBlue : #156486;
}
.text-blue {
    color: var(--IbBlue);
}
.text-red {
    color: var(--IbRed);
}
.text-yellow {
    color: var(--IbYellow);
}
.text-darkBlue {
    color: var(--IbDarkBlue);
}
.text-gray {
    color: #646464;
}
.bg-blue {
    background-color: var(--IbBlue);
}
.border-blue {
    border-color: var(--IbBlue);
}
.bg-red {
    background-color: var(--IbRed);
}
.bg-yellow {
    background-color: var(--IbYellow);
}
.bg-darkBlue {
    background-color: var(--IbDarkBlue);
}
.triangle {
    width: 0px;
    height: 0px;
    border-top: 5.5rem solid #fff;
    border-bottom: 5rem solid transparent;
    border-left: 5rem solid transparent;
    border-right: 5rem solid transparent;
}
.circle1 {
    width: 0px;
    height: 0px;
    border-radius: 50%;
    border-top: 5rem solid transparent;
    border-bottom: 5rem solid var(--IbBlue);
    border-left: 5rem solid var(--IbBlue);
    border-right: 5rem solid var(--IbBlue);
}
.child {
    visibility: hidden;
}
.c1 {
    bottom: -22rem;
}
.c2 {
    bottom: -16.75rem;
}
.c3 {
    bottom: -8.8rem;
}
.c4 {
    bottom: -19.4rem;
}
.dropChild {
    visibility: hidden;
}
.parent:hover .child,.parent:hover .dropChild {
    visibility: visible;
}
/* Menu as a whole animated */
.dropdown_menu--animated.block {
    display: block;
}
.dropdown_menu--animated {
    display: none;
}
.dropdown_menu--animated li{
    display: list-item;
    opacity: 1;
}    
.dropdown_menu-6 {
    animation: growDown 350ms ease-in-out forwards;
    transform-origin: top center;
}
@keyframes growDown {
    0% {
        transform: scaleY(0)
    }
    80% {
        transform: scaleY(1.1)
    }
    100% {
        transform: scaleY(1)
    }
}
.dropRect {
    width: 0px;
    height: 0px;
    border-top: 1.5rem solid var(--IbBlue);
    border-bottom:  1.5rem solid var(--IbBlue);
    border-left:  1.5rem solid var(--IbBlue);
    border-right:  1.5rem solid var(--IbBlue);
}
.dropTriangle {
    width: 0px;
    height: 0px;
    border-top: 1.8rem solid var(--IbBlue);
    border-bottom:  1.3rem solid transparent;
    border-left:  1.3rem solid transparent;
    border-right:  1.3rem solid transparent;
}
.dropTriangleWhite {
    width: 0px;
    height: 0px;
    top: -1.7rem;
    left: -.79rem;
    border-top: 1.1rem solid #fff;
    border-bottom:  0.8rem solid transparent;
    border-left:  0.8rem solid transparent;
    border-right:  0.8rem solid transparent;
}
.border-t-blue {
    border-top-color: var(--IbBlue);
}
.border-t-red {
    border-top-color: var(--IbRed);
}
.border-t-yellow {
    border-top-color: var(--IbYellow);
}
.border-t-darkBlue {
    border-top-color: var(--IbDarkBlue);
}
.animation-out{
    width: 100%;
    animation: slide-out .7s ease-in-out forwards;
}
.slick-next:before, .slick-prev:before {
    font-size: 30px !important;
    color: var(--IbBlue) !important;
}
.slick-prev {
    left: -50px !important;
}
.slick-next {
    right: -45px !important;
}
.slick-dots li.slick-active button:before {
    opacity: .75;
    color: var(--IbBlue) !important;
}

#slider1 .slick-dots {
    bottom: -20px;
    padding: 6px;
    width: auto;
    margin-left: 30px;
    z-index: 30;
}
#slider1 .slick-dots li button:before {
    font-family: slick;
    font-size: 20px;
    width: 20px;
    height: 20px;
    content: '•';
    opacity: 1; 
    color: #fff;
  }
#slider1 .slick-dots li.slick-active button:before {
    opacity: 1; 
    color: #009AA8;
}
#slider1 img {
    height: 500px;
}
.trianglePlus {
    width: 0px;
    height: 0px;
    border-top:3rem solid var(--IbBlue);
    border-bottom: 3rem solid transparent;
    border-left: 3rem solid transparent;
    border-right: 3rem solid var(--IbBlue);
}
@keyframes slide-out {
  from {width: 100%;}
  to {width: 0;}
}
.sidebar-animation {
    width: 0px;
    animation: slide .5s ease-in-out forwards;
}
@keyframes slide {
  from {width: 0;}
  to {width: 100%;}
}
.circleFooter {
    width: 0px;
    height: 0px;
    border-radius: 50%;
    border-top: 5rem solid transparent;
    border-bottom: 5rem solid #fff;
    border-left: 5rem solid #fff;
    border-right: 5rem solid #fff;
}
#tabs-id li.active{
    background: #7BA02D !important;
}
.plus {
    transform: rotate(0deg);
    animation: rotate-45 0.2s ease-in-out forwards;
}
li.text-blue .plus {
    animation: rotate45 0.2s ease-in-out forwards;
}
@keyframes rotate45 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(45deg);
    }
}
.togglePlus {
    transform: rotate(45deg);
    animation: rotate-45 0.2s ease-in-out forwards;
}
@keyframes rotate-45 {
    from {
        transform: rotate(45deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@media screen and (min-width:640px) and (max-width:1024px){
    #hero-section {
        height: 392px;
        background-size: cover;
    }
}
@media screen and (max-width:640px) {
    #hero-section {
        height: 292px;
        background-size: cover;
    }
    .trianglePlus {
        width: 0px;
        height: 0px;
        border-top:2rem solid var(--IbBlue);
        border-bottom: 2rem solid transparent;
        border-left: 2rem solid transparent;
        border-right: 2rem solid var(--IbBlue);
    }
}
@media screen and (max-width:400px) {
    #hero-section {
        height: 250px;
        background-size: cover;
    }
}