/*
@font-face {
    font-family: 'Brutal Type';
    src: url('../fonts/brutal/BrutalType-ExtraLight.eot');
    src: local('Brutal Type Extra Light'), local('BrutalType-ExtraLight'),
        url('../fonts/brutal/BrutalType-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brutal/BrutalType-ExtraLight.woff2') format('woff2'),
        url('../fonts/brutal/BrutalType-ExtraLight.woff') format('woff'),
        url('../fonts/brutal/BrutalType-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Brutal Type';
    src: url('../fonts/brutal/BrutalType-Medium.eot');
    src: local('Brutal Type Medium'), local('BrutalType-Medium'),
        url('../fonts/brutal/BrutalType-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brutal/BrutalType-Medium.woff2') format('woff2'),
        url('../fonts/brutal/BrutalType-Medium.woff') format('woff'),
        url('../fonts/brutal/BrutalType-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Brutal Type';
    src: url('../fonts/brutal/BrutalType-Bold.eot');
    src: local('Brutal Type Bold'), local('BrutalType-Bold'),
        url('../fonts/brutal/BrutalType-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brutal/BrutalType-Bold.woff2') format('woff2'),
        url('../fonts/brutal/BrutalType-Bold.woff') format('woff'),
        url('../fonts/brutal/BrutalType-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Brutal Type';
    src: url('BrutalType-Thin.eot');
    src: local('Brutal Type Thin'), local('BrutalType-Thin'),
        url('../fonts/brutal/BrutalType-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brutal/BrutalType-Thin.woff2') format('woff2'),
        url('../fonts/brutal/BrutalType-Thin.woff') format('woff'),
        url('../fonts/brutal/BrutalType-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Brutal Type';
    src: url('../fonts/brutal/BrutalType-ExtraBold.eot');
    src: local('Brutal Type Extra Bold'), local('BrutalType-ExtraBold'),
        url('../fonts/brutal/BrutalType-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brutal/BrutalType-ExtraBold.woff2') format('woff2'),
        url('../fonts/brutal/BrutalType-ExtraBold.woff') format('woff'),
        url('../fonts/brutal/BrutalType-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Brutal Type';
    src: url('../fonts/brutal/BrutalType-Black.eot');
    src: local('Brutal Type Black'), local('BrutalType-Black'),
        url('../fonts/brutal/BrutalType-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brutal/BrutalType-Black.woff2') format('woff2'),
        url('../fonts/brutal/BrutalType-Black.woff') format('woff'),
        url('../fonts/brutal/BrutalType-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Brutal Type';
    src: url('../fonts/brutal/BrutalType-Light.eot');
    src: local('Brutal Type Light'), local('BrutalType-Light'),
        url('../fonts/brutal/BrutalType-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brutal/BrutalType-Light.woff2') format('woff2'),
        url('../fonts/brutal/BrutalType-Light.woff') format('woff'),
        url('../fonts/brutal/BrutalType-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Brutal Type';
    src: url('../fonts/brutal/BrutalType.eot');
    src: local('Brutal Type'), local('BrutalType'),
        url('../fonts/brutal/BrutalType.eot?#iefix') format('embedded-opentype'),
        url('../fonts/brutal/BrutalType.woff2') format('woff2'),
        url('../fonts/brutal/BrutalType.woff') format('woff'),
        url('../fonts/brutal/BrutalType.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



body{	
	font-family: 'Brutal Type';
	font-weight: normal;
    font-style: normal;	
}
*/

.falling-item-container {
    position: relative;
}

.matrix-container {
    overflow: hidden;
    position: relative;
    display: flex;
}

.matrix-item-wrapper {
    width: 97%;
    margin: 5px;	
	position:relative;
	background-size:cover;
	background-position: top center;	
	border-radius:10px;
	overflow:hidden;	
}

.matrix-item-wrapper a{
	height:100%; 
	display:block;
}

.matrix-item-wrapper .name{
	position:absolute;
	bottom:0;
	background-color:rgba(0, 0, 0, 0.5);
	color:#fff;	
	padding:5px 10px !important;	
	display:block;
    font-size: 0.8rem;
    line-height: 1.1rem;
}

.matrix-column {
    position: relative;
    overflow: hidden;
}

.matrix-column-content {
    transition: 0.3s ease-in-out;
}

.matrix-item-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

#matrixContainer {
    display: grid;
    gap: 10px;
    border: 1px solid red;
}

.matrix-container div {
    padding: 0 !important;
    height: auto;
    overflow: hidden;
}

.animation {            
    transition: 0.5s ease-out;
}

/* pannel */
.pannel {
	
	position: fixed;
    bottom: 0px;
    left: 50%;
    margin-left: -10px;   
    transform: translateY(-50%);
    padding: 0px;
    display: block;
    flex-direction: column;
    border-radius: 8px;    
    z-index: 3;
    background: rgba(255, 255, 255, 0.8);

}

.matrix-column.pair.offset{
	margin-top:-30px;
}

.pannel .animation-control {
    background: none;
    display: iline-block;
    justify-content: center;
    font-size: 24px;
    border: none;
    margin: 0px 0;
    cursor: pointer;
	
}

#pause-btn {
    color: rgb(240, 38, 38);
}

#play-btn {
    color: rgb(20, 196, 20);
}

.animation-control[disabled] {
    opacity: 0.4;
    pointer-events: none;
}