@import url('https://fonts.googleapis.com/css2?family=Bellefair&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&display=swap');

img.horse { border: 3px solid rgba(255, 255, 255, 0.8); width: calc(100% - 6px); float: left; margin-bottom: 5px; }
img.galleria { border: 1px solid #cccccc; background: transparent; padding: 4px; }

hr { border-top: 0px; border-image: linear-gradient(to right, transparent, #C99F86, transparent) 1; margin: 2px 0px -16px 0px; }

::-moz-selection { color: #ffffff; background: #C99F86; }
::selection { color: #ffffff; background: #C99F86; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #C99F86; }
::-webkit-scrollbar-thumb { background: #7F6151; }

html { height: 100%; width: 100%; }
body { margin: 0; height: 100%; width: 100%; background: url(k/sierra-bg.jpg) fixed; background-repeat: no-repeat; background-position: center left; background-size: cover; }
div.side { display: inline-block; position: relative; background-color: transparent; width: 16%; margin: 0; padding: 2%; overflow: hidden; float: left; }
div.white { display: inline-block; position: relative; background-color: rgba(255, 255, 255, 0.9); width: 80%; margin: 0; padding: 0; overflow: hidden;
float: left; min-height: 100%; }
div.header { display: inline-block; position: relative; background-image: url(k/sierra-up.png); background-size: auto; background-position: center center;
background-repeat: no-repeat; width: 100%; margin: 0 0 3% 0; padding: 4% 0; float: left; text-align: center; }
div.container { display: inline-block; position: relative; background-color: transparent; width: 90%; margin: 0; padding: 2% 5%; overflow: hidden; float: left; }
div.footer { display: inline-block; margin: 0; padding: 0 5%; width: 90%; background: transparent; float: left; }
div.copy { display: inline-block; margin: 0; padding: 1% 2%; width: 46%; background: transparent; float: left; flex-wrap: wrap; }

div.left { display: inline-block; float: left; width: 57%; margin: 0px; padding: 0px; flex-wrap: wrap; }
div.right { display: inline-block; float: left; width: 43%; margin: 0px; padding: 0px; flex-wrap: wrap; }
div.one { display: inline-block; margin: 1px 1px 15px 1px; padding: 0% 1% 1% 1%; width: calc(98% - 4px); background-color: #F5EDE8; border: 1px solid #C99F86;
text-align: center; float: left; flex-wrap: wrap; } div.one:hover { background-color: rgba(255, 255, 255, 0.1); }
div.two { display: inline-block; margin: 1px 1px 15px 1px; padding: 0% 1% 1% 1%; width: calc(48% - 4px); background-color: #F5EDE8; border: 1px solid #C99F86;
text-align: center; float: left; flex-wrap: wrap; } div.two:hover { background-color: rgba(255, 255, 255, 0.1); }
div.three { display: inline-block; margin: 1px 1px 15px 1px; padding: 0% 1% 1% 1%; width: calc(31.33% - 4px); background-color: #F5EDE8; border: 1px solid #C99F86;
text-align: center; float: left; } div.three:hover { background-color: rgba(255, 255, 255, 0.1); }
div.awards { display: block; margin: 15px 0px; padding: 0; background-color: transparent; text-align: center; float: left; width: 100%; }
div.award { display: inline-block; margin: 0px auto; padding: 1%; width: 12%; background-color: #F5EDE8; float: center; font-family: open sans; font-size: 13px;
text-align: center; }
div.half { display: inline-block; margin: 0; padding: 0; width: 50%; background-color: transparent; float: left; flex-wrap: wrap; }
div.varsa { display: inline-block; margin: 10px 0px; padding: 0; width: 25%; background-color: transparent; float: left; flex-wrap: wrap; }
div.rotu { display: inline-block; background-color: transparent; width: 100%; margin: 0; padding: 0; }
button.rotu { display: block; background-color: transparent; border: none; font-family: bellefair; font-size: 22px; color: #977059; text-decoration: none;
text-transform: uppercase; margin: 0; padding: 15px 0px; }

.tab { overflow: hidden; background-color: transparent; border: none; float: center; margin: 5px auto; text-align: center; clear: both; }
.tab button { float: left; color: #977059; background-color: transparent; font-family: open sans; font-size: 15px; padding: 5px 25px 5px 0px; }
.tablinks { float: center; background-color: none; border: none; font-family: lora; font-size: 20px; }
.tabcontent { display: none; background-color: transparent; padding: 0px; }

.nav { display: block; position: relative; margin: 0; padding: 0; width: 100%; background-color: transparent; float: left;
list-style: none; text-align: center; text-decoration: none; font-family: bellefair; font-weight: normal; font-size: 24px; }
.nav li { display: inline; }
.nav a { display: inline-block; margin: 0; padding: 0px 15px; text-decoration: none; font-family: bellefair; font-weight: normal;
color: #C99F86; background-color: transparent; transition-duration: 0.5s; }
.nav a:hover { color: #7F6151; letter-spacing: 3px; transition-duration: 0.5s; }

.progress-bar { height: 10px; width: calc(100% - 6px); background-color: #E0BFAB; overflow: hidden; position: relative; border-left: 3px solid #C99F86;
border-right: 3px solid #C99F86; } + .progress-bar { margin-top: 2rem; }
.bar { width: 0; height: 100%; background-color: #C99F86; background-image: linear-gradient(-45deg, rgba(233, 190, 165, .5) 25%, transparent 25%, transparent 50%,
rgba(233, 190, 165, .5) 50%, rgba(233, 190, 165, .5) 75%, transparent 75%, transparent); background-size: 30px 30px; animation: move 2s linear infinite;
box-shadow: 2px 0 10px inset rgba(0,0,0,0.2); transition: width 2s ease-out; }

tr.color { background-color: transparent; } tr.color:hover { background-color: rgba(194, 144, 92, 0.2); }
td.suku1 { background-color: rgba(201, 159, 134, 0.1); padding: 10px 15px; width: 33%; border: 1px solid #C99F86; }
td.suku1:hover { background-color: rgba(255, 255, 255, 0.1); }
td.suku2 { background-color: rgba(201, 159, 134, 0.1); padding: 10px 15px; width: 33%; border-bottom: 1px solid #C99F86; border-top: 1px solid #C99F86; }
td.suku2:hover { background-color: rgba(255, 255, 255, 0.1); }
td.suku3 { background-color: rgba(201, 159, 134, 0.1); padding: 10px 15px; width: 33%; border-left: 1px solid #C99F86; border-bottom: 1px solid #C99F86;
border-right: 1px solid #C99F86; } td.suku3:hover { background-color: rgba(255, 255, 255, 0.1); }
td.suku4 { background-color: rgba(201, 159, 134, 0.1); padding: 10px 15px; width: 33%; border-bottom: 1px solid #C99F86; }
td.suku4:hover { background-color: rgba(255, 255, 255, 0.1); }
td.suku5 { background-color: rgba(201, 159, 134, 0.1); padding: 10px 15px; width: 33%; border-left: 1px solid #C99F86; border-right: 1px solid #C99F86; }
td.suku5:hover { background-color: rgba(255, 255, 255, 0.1); }
td.suku6 { background-color: rgba(201, 159, 134, 0.1); padding: 10px 15px; width: 33%; }
td.suku6:hover { background-color: rgba(255, 255, 255, 0.1); }
td.aika { display: inline-block; width: 10%; font-family: bellefair; font-size: 18px; color: #7F6151; text-align: center; padding: 5px 0px; }
td.nimi { display: inline-block; width: 86%; font-family: open sans; font-size: 15px; padding: 0% 2%; }

b, strong { font-weight: normal; color: #977059; text-shadow: 0px 0px 1px #977059; }
m, merits { font-size: 10px; color: #C2905C; }
t, tiny { display: inline-block; padding: 0px 5px; font-size: 10px; color: #C2905C; }

a:link, a:visited { color: #C2905C; text-decoration: none; } a:hover { color: #816252; text-decoration: none; }
a.sivu:link, a.sivu:visited { color: #000000; text-decoration: underline; } a.sivu:hover {  color: #000000; text-decoration: none; }
a.suku:link, a.suku:visited { font-size: 13px; padding: 0px 5px; text-align: center; text-decoration: none; } a.suku:hover { text-decoration: none; }
a.header:link, a.header:visited { font-size: 58px; font-family: petit formal script; font-weight: normal; padding: 0; color: #C99F86; text-decoration: none;
line-height: 1; } a.header:hover { text-decoration: none; }

h1 { font-size: 36px; font-family: petit formal script; font-weight: normal; padding: 25px 0px; margin: 0px; color: #977059; text-align: left; }
h2 { font-size: 28px; font-family: bellefair; font-weight: normal; color: #977059; margin: 0; padding: 0; text-align: center; text-transform: uppercase; }
h3 { font-size: 24px; font-family: bellefair; font-weight: normal; color: #C2905C; margin: 0; padding: 25px 15px; text-align: left; text-transform: uppercase; clear: both; }
h4 { display: block; font-size: 13px; font-family: open sans; font-weight: normal; color: #000000; margin: 0; padding: 5px; text-align: left;
border-bottom: 1px solid #C99F86; width: 100%; clear: both; }
h5 { font-size: 18px; font-family: bellefair; font-weight: normal; color: #423228; margin: 0; padding: 0px 0px 15px 0px; text-align: left; text-transform: uppercase; }
p { color: #000000; font-family: open sans; font-size: 13px; line-height: 2; text-align: justify; }
p.copy { color: #C99F86; font-family: open sans; font-size: 13px; line-height: 2; text-align: justify; }
p.left { color: #000000; font-family: open sans; font-size: 13px; line-height: 2; text-align: left; }
p.porr { display: block; font-family: open sans; font-size: 14px; text-align: center; padding: 0px 0px 3px 0px; line-height: 1; }

/* Mobiili */

@media all and (max-width: 1600px) { div.header { background-size: contain; } div.left { width: 100%; } div.right { width: 100%; }  div.award { width: 20%; } }
@media all and (max-width: 1200px) { div.half { width: 100%; } div.varsa { width: 50%; } div.award { width: 50%; } }
@media all and (max-width: 1000px) { div.copy { width: 96%; } .nav { width: 100%; } .nav a { width: 100%; } div.award { width: 100%; } }