/* Suggested order:
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
 *
 */ /* Homepage
-------------------------------*/
#header h1 {
	margin: 0 0 0.5em 0;
	padding: 3px;
	border: 1px outset #5987d6;
	background: #000099 url(../img/background.png) repeat-x;
	color: white;
	font-size: 130%;
	text-align: center;
}

#container {
        float: left;
        width: 97%;
        margin: 0 1.5%;
}

#addcontainer {
	float: right;
	width: 0%;
	margin: 1em 0 0 0;
	padding: 0;
}

body.homepage #subcontainer-T {
        margin: 0;
        padding: 0;
        text-align: center;
}

body.homepage .hero {
        position: relative;
        height: 50vh;
        overflow: hidden;
}

body.homepage .hero__slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        animation: heroFade 24s infinite;
}

body.homepage .hero__slide:nth-child(1) { animation-delay: 0s; }
body.homepage .hero__slide:nth-child(2) { animation-delay: 6s; }
body.homepage .hero__slide:nth-child(3) { animation-delay: 12s; }
body.homepage .hero__slide:nth-child(4) { animation-delay: 18s; }

@keyframes heroFade {
        0% { opacity: 0; }
        8% { opacity: 1; }
        25% { opacity: 1; }
        33% { opacity: 0; }
        100% { opacity: 0; }
}

@media (max-width: 767px) {
        body.homepage .hero {
                display: none;
        }
}

#features {
	clear: both;
	margin: 0.5em 0em 0.5em 0em;
	padding: 5px 10px;
	background: #F0F0FF;
	color: #000099;
}

#features p {
	margin: 0.5em;
	font-size: 100%;
}

#features p a:link,#features p a:visited {
	background: #F0F0FF;
	color: #000099;
	text-decoration: none;
}

#features p a:hover {
	background: #F0F0FF;
	color: red;
	text-decoration: none;
}

#features p span.separator {
	color: #C0C0C0;
}

#tour {
        margin: 0.5em 0;
        padding: 0;
        color: #000099;
        display: grid;
        gap: 1.5em;
        grid-template-columns: 1fr;
}

@media (min-width: 768px) {
        #tour {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (min-width: 1200px) {
        #tour {
                grid-template-columns: repeat(4, 1fr);
        }
}

#tour div.img-L,#tour div.img-R {
        float: none;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#tour div.img-L img,#tour div.img-R img {
        width: 100%;
        border: 0;
        margin: 0;
        padding: 0;
        display: block;
        transition: transform 0.3s ease;
}

#tour div.img-L:hover img,#tour div.img-R:hover img {
        transform: scale(1.05);
}

#tour div.img-L a,#tour div.img-R a {
        border: 0;
        margin: 0;
        padding: 0;
}

#tour div.desc {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0.5em;
        background: rgba(0,0,0,0.6);
        font-size: 80%;
        font-weight: bold;
        text-align: center;
        color: #fff;
}

#tour div.desc a:link,#tour div.desc a:visited {
        color: #fff;
        text-decoration: none;
        background: transparent;
}

#tour div.desc a:hover {
        color: #ff0;
        text-decoration: none;
}

#news {
	margin: 0.5em 0em 0.5em 0em;
	padding: 0.2em 1em 0.2em 1em;
	background: #F0FFFF;
	color: black;
	text-align: left;
}

#news h2 {
	font-size: 80%;
}

#news p {
	font-size: 80%;
}

#news p.date {
	font-size: 50%;
	text-align: right;
}

#news p span.offer {
	background-color: yellow;
}

#getting-started {
	margin: 1.5em 1em 1em 1em;
	padding: 0;
	background: white;
	color: #000099;
}

#getting-started p {
	margin: 0;
	padding: 0;
	background: white;
	color: #000099;
	font-size: 120%;
	text-align: left;
}

#getting-started ol {
	list-style: none;
	margin: 0;
	padding: 0;
	background: white;
	color: #000099;
	font-size: 120%;
	text-align: left;
}

#getting-started ol li {
	margin: 0.5em 0;
	padding: 6px 0 6px 42px;
}

#getting-started li.nr1 {
	background: white url("../img/nr1.jpg") no-repeat scroll left center;
	color: #000099;
}

#getting-started li.nr2 {
	background: white url("../img/nr2.jpg") no-repeat scroll left center;
	color: #000099;
}

#getting-started li.nr3 {
	background: white url("../img/nr3.jpg") no-repeat scroll left center;
	color: #000099;
}

.emp {
	background: white;
	color: #FFA07A; /* lightsalmon */
	font-weight: bold;
}