/* CSS Document */

nav.int .dropdown-item{
	padding: 0;
	font-weight: 700;
	margin-bottom: .75rem;
	padding-bottom: .75rem;
	white-space: normal !important;
	border-bottom: 1px solid var(--extra-light-gray-color);
}
nav.int .dropdown-item:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
nav.int .dropdown-item:hover,
nav.int .dropdown-item:focus{
	background-color: transparent;
}

.dynamicModal h4{
	font-size: 30px;
	color: var(--primary-color);
}

.card.int picture{
    height: 125px;
    overflow: hidden;
    position: relative;
}
.card.int picture > div{
    background: url(../images/2022/placeholder.jpg) no-repeat center center;
    transition: all .25s cubic-bezier(.335,.015,.25,.995);
}
.card.int:hover picture > div{
    transform: scale(1.1);
}

#toggle-all span{
	display: inline-block;
}
#toggle-all > span{
	transition: all .3s ease;
	cursor: pointer;
}
#toggle-all > span:hover{
	color: var(--secondary-color);
}
#toggle-all > span > span:nth-child(2),
#toggle-all > span > span:nth-child(4),
#toggle-all > span.click > span:first-child,
#toggle-all > span.click > span:nth-child(3){
	display: none;
}
#toggle-all > span.click > span:nth-child(2),
#toggle-all > span.click > span:nth-child(4){
	display: inline-block;
}
#toggle-all > span.click > span:nth-child(3){
	transform: rotate(-180deg);
}
#accordion .accordion-item{
    border: none;
    background-color: transparent;
}
#accordion .accordion-item .heading.collapsed{
	color: var(--black-color);
}
#accordion .accordion-item .heading,
#accordion .accordion-item:hover .heading,
#accordion .accordion-item:focus .heading{
	color: var(--secondary-color);
}
#accordion .accordion-item .heading > div,
#accordion .accordion-item .heading > div:last-child > span{
	transition: all .2s linear;
}
#accordion .accordion-item .heading > div:last-child > span{
	transform: rotate(-180deg);
}
#accordion .accordion-item .heading.collapsed > div:last-child > span{
	transform: rotate(0);
}
#page-categories > a > div:first-child > div:nth-child(2),
#page-categories > a.active > div:first-child > div:first-child{
	display: none;
}
#page-categories > a.active > div:first-child > div:nth-child(2){
	display: block;
}

.at-share-btn-elements{
    display: block;
    white-space: nowrap;
}

#story-timeline .story-image{
    height: 235px;
}

#story-timeline .story-image .number{
    position: absolute;
    top: 10px;
    left: 10px;
    height: 60px;
    width: 60px;
    border-radius: 60px;
    z-index: 1;
}
#story-timeline .story-image picture:after{
    position: absolute;
	content: '';
	top: 50%;
    left: -1rem;
    height: 1px;
    width: 1rem;
    background-color: var(--secondary-color);
}

.custom-tabs nav a{
    position: relative;
}
.custom-tabs nav a.active{
    color: var(--primary-color) !important;
}
.custom-tabs nav a.active:after{
    position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	height: 1px;
	width: 100%;
    background-color: var(--secondary-color);
}

/********************************************************** MEDIA QUERRIES ******************************************************************/

/* Phone (landscape) */
@media (min-width: 576px){

    .card.int picture{
        height: 160px;
    }
    
    #rotator.int,
    #rotator.int .slider,
    #rotator.int .slider .slide,
    #rotator.int .slider .slide .image{
        height: 300px !important;
    }
    
    #story-timeline .story-image{
        height: 175px;
    }

}

/* Tablet (portrait) */
@media(min-width:768px){

    .card.int picture{
        height: 185px;
    }
    
    #rotator.int,
    #rotator.int .slider,
    #rotator.int .slider .slide,
    #rotator.int .slider .slide .image{
        height: 350px !important;
    }
    
    #story-timeline .story-image{
        height: 200px;
    }
	
}

/* Tablet (landscape) */
@media(min-width:992px){
    
	.dynamicModal h4{
		font-size: 34px;
	}
    
    #rotator.int,
    #rotator.int .slider,
    #rotator.int .slider .slide,
    #rotator.int .slider .slide .image{
        height: 375px !important;
    }
    
    #story-timeline .story-image{
        width: 350px;
        height: 280px;
        z-index: 1;
    }
    #story-timeline .row .with-image:after,
    #story-timeline .story-image:before,
    #story-timeline .story-image:after{
        position: absolute;
        content: '';
    }
    #story-timeline .row .with-image:after{
        top: 50%;
        height: 1px;
        width: 40px;
        background-color: var(--secondary-color);
    }
    #story-timeline .row .with-image.right:after{
        right: 0;
    }
    #story-timeline .row .with-image.left:after{
        left: 0;
    }
    #story-timeline .story-image:before,
    #story-timeline .story-image:after{
        height: 100%;
        top: 0;
    }
    #story-timeline .story-image:before{
        width: 10px;
        background-color: var(--primary-color);
    }
    #story-timeline .story-image.right:before{
        right: -20px;
    }
    #story-timeline .story-image.left:before{
        left: -20px;
    }
    #story-timeline .story-image:after{
        width: 13px;
    }
    #story-timeline .story-image.right:after{
        right: -33px;
        background: url("../images/2022/bg-story-triangle-right.png") no-repeat center;
        background-size: contain;
    }
    #story-timeline .story-image.left:after{
        background: url("../images/2022/bg-story-triangle-left.png") no-repeat center;
        background-size: contain;
        left: -33px;
    }
    #story-timeline .story-image picture:after{
        display: none;
    }
	
}

/* Desktop */
@media(min-width:1200px){
    
    [data-canvas=container]{
        padding-top: 120px;
    }
    
    header:after{
        opacity: 1;
    }
    
	.dynamicModal h4{
		font-size: 40px;
	}
    
	.card.int picture{
		height: 195px;
	}
    
    #rotator.int,
    #rotator.int .slider,
    #rotator.int .slider .slide,
    #rotator.int .slider .slide .image{
        height: 400px !important;
    }
    
    #story-timeline .story-image{
        width: 380px;
        height: 300px;
    }
    #story-timeline .row .with-image:after{
        width: 70px;
    }
	
}

@media(min-width:1400px){
    
    #rotator.int,
    #rotator.int .slider,
    #rotator.int .slider .slide,
    #rotator.int .slider .slide .image{
        height: 475px !important;
    }
    
    #story-timeline .story-image{
        width: 440px;
        height: 350px;
    }
    #story-timeline .row .with-image:after{
        width: 83px;
    }

}

@media(min-width:1600px){
    
    #rotator.int,
    #rotator.int .slider,
    #rotator.int .slider .slide,
    #rotator.int .slider .slide .image{
        height: 535px !important;
    }
    
    #story-timeline .story-image{
        width: 500px;
        height: 400px;
    }
    #story-timeline .row .with-image:after{
        width: 95px;
    }
	
}

@media(min-width:1800px){
    
    #rotator.int,
    #rotator.int .slider,
    #rotator.int .slider .slide,
    #rotator.int .slider .slide .image{
        height: 600px !important;
    }
    
}