/*!----------------------------------------------------------------------------
 * smartSlider - tiny slideshow.
 * v0.0.1 - built 2024-02-15
 * Licensed GPL.
 * http://smartoweb.com/smartSlider
 * ----------------------------------------------------------------------------
 * Relies on Web Animations API
 * (https://developer.mozilla.org/en-US/docs/Web/API/Animation)
 * ----------------------------------------------------------------------------
 * Copyright (C) 2024 Christophe Savary
 * http://smartoweb.com
 * ----------------------------------------------------------------------------
 * file smartSlider.css - version 0.0.1
 * --------------------------------------------------------------------------*/
 
html, body {
    height:100vh;
}
.smartslider {
	position:relative;
	padding: 0;
	margin:0;
	width:100%;
	overflow:hidden;
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	justify-content:center;
	
}

.smartslider .carousel{

    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content:center;
    padding-top: 8px;
    padding-bottom: 32px;
    background-color: rgba(255,255,255,1);
    width:auto;
}

.smartslider .carousel .slide {
    position:relative;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    background-size: cover;
    box-sizing: content-box;
    flex-shrink:0;
    max-width:100vw;
}

.smartslider .carousel .slide img {
    max-width:100%;
    height:auto;
}

.smartslider .navigation {
    position:absolute;
	display:flex;
	align-items:center;
	justify-content:center;
}

.smartslider .navigation.panelleft {
    left:0;
	top:0;
	height:100%;
	width:32px;
	flex-flow:column nowrap;
	background-color: rgba(255,255,255,1);
        background-color: transparent;
}

.smartslider .navigation.panelright {
    right:0;
	top:0;
	height:100%;
	width:32px;
	flex-flow:column nowrap;
	background-color: rgba(255,255,255,1);
        background-color: transparent;
}



.smartslider .navigation.panelleft>span, .smartslider .navigation.panelright>span {
	display:block;
	width:28px;
	height:28px;
	border-radius:50%;
	text-align:center;
	cursor:pointer;
	background-color:#ccc;
	transform:scale(1,1);
	transition:transform .2s;
	font-size:20px;
	user-select: none;
}

.smartslider .navigation.panelleft>span:hover, .smartslider .navigation.panelright>span:hover {
	transform:scale(1.15,1.15);
}

.smartslider .navigation.panelbottom {
    left:0;
	bottom:0;
	width:100%;
	height:32px;
	flex-flow:row nowrap;
}

.smartslider .navigation.panelbottom>span {
	display:block;
	width:28px;
	height:28px;
	text-align:center;
	cursor:pointer;
	transform:scale(1,1);
	transition:transform .2s;
	font-size:20px;
	user-select: none;
}

.smartslider .navigation.panelbottom>span:hover {
	transform:scale(1.15,1.15);
}