@import "style_common.css";

/*  theme colour: Red*/
/*  full colour: #FF0000        */
/*  light variant: #ef5c5c      */

#nav .active a, #nav a:hover, #nav-toggle:hover { color: #ef5c5c; }

#main {
padding: 1.5em 0 1.5em;
background-color: floralwhite;
background-image: url(https://btyone.sarl/img/legal-overlay.png), url(https://btyone.sarl/svg/web_ribbon.svg), url(https://btyone.sarl/img/dentblanche-min.jpg);
background-repeat: repeat, no-repeat, no-repeat;
background-attachment: fixed, fixed, fixed;
background-size: auto, contain, cover;
background-position: left top, center 85%, center bottom;
animation: fadeInAnimation ease 2s; 
animation-iteration-count: 1; 
animation-fill-mode: forwards;
} 

#header {background-image: linear-gradient(to right, rgba(34,34,34,1) 60%, rgba(255,255,255,0.15)) 100%;}

#footer {
background-color: #FF0000;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23FF0000'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%231c3964'/%3E%3Cstop offset='1' stop-color='%23FF0000'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(1020 0)'%3E%3Cg %3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform=''%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.62' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
animation: fadeInAnimation ease 0.5s; 
animation-iteration-count: 1; 
animation-fill-mode: forwards;
}

#main a, p.langsel a {
color: #cc0000 !important;
font-weight: 700 !important;
}

#main a:hover { text-decoration: underline !important; }
#main txtlnk { color: #FF0000 !important; }

table { 
border-spacing: 2 !important; 
border: 1px solid #cc0000 !important;
border-top-left-radius: 0.3em !important;
border-top-right-radius: 0.3em !important;
border-bottom-left-radius: 0.3em !important;
border-bottom-right-radius: 0.3em !important;
}

td, th { border: 0px !important; }

td { background: rgba(245, 245, 245, 0.33) !important; }

section { all: unset; }

/*** LAYOUT: HOMEPAGE GRID ***/

.grid-container {
margin: 0;
display: grid;
grid-template-columns: auto 25%;
grid-template-rows: auto;
gap: 1.5em 6em;
grid-template-areas:
"titleimg  . "
"featured tours"
"featured  . "
"docs docs";
animation: fadeInAnimation ease 2s; 
animation-iteration-count: 1; 
animation-fill-mode: forwards; 
}

.grid-container ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}

.docs ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 4;
-webkit-columns: 4;
-moz-columns: 4;
}

.tours ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.grid-container li:not(:last-child) {margin-bottom: 0.4em;}
.grid-container h3 {margin-bottom: 0.5em;}
.docs li:not(:last-child) {margin-bottom: 0.4em;}
.docs h3 {margin-bottom: 0.5em;}

mark { 
background-color: #ef5c5c;
color: white;
}

.featured {grid-area: featured;}
.titleimg {grid-area: titleimg;}

.tours { 
grid-area: tours;
border-left: 0.20em dotted rgba(204, 0, 0, 0.5);
padding: 0 0.5em;
}

.depot { 
grid-area: depot;
border-left: 0.20em dotted rgba(204, 0, 0, 0.33);
padding: 0 0.5em;
/* font-size: 1.2rem; */
}

.depot h3 {color: #cc0000 !important;}

.depot.call h3 {margin-bottom: 0 !important;}

.links { 
grid-area: links;
border-left: 0.20em dotted rgba(204, 0, 0, 0.5);
padding: 0 0.5em;
}

.docs {
grid-area: docs;
border-left: 0.20em dotted rgba(204, 0, 0, 0.5);
padding: 0 0.5em;
}

img[alt=Lageplan] { width: 50%; margin-left: 1em; float: right; }

.featured img {transition: transform 0.3s;}
.featured img:hover {transform: scale(1.5);}

@media (max-width: 767px) {
#main {
padding: 1em 0.5em 0.5em;
background-size: auto, 0 0, cover;
background-position: left top, left top, 50% bottom;
}
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 1.5em 1.5em;
grid-template-areas:
"titleimg"
"featured"
"tours"
"docs";
}
.grid-container ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}
.docs ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}
img[alt=Lageplan] { width: 80%; float: none; margin-left: 1em; }
.featured img:hover {transform: scale(1);}
}