/* muotoilutiedosto - Italodisco */


/* @font-face {font-family: 'Ubuntu'; src: url('/../css/Ubuntu.ttf'); } */

@font-face {font-family: 'Ubuntu'; src: url('/../css/Ubuntu.ttf'); }


:root {
  --color1: #f0f0f0;
}

body	        { background: #505050; background-image: url('../kuvat/tausta-3b.png'); background-size: cover; background-attachment: fixed;
                 background-position: center; font-family: "Ubuntu", sans-serif; margin: 0px; }

body.tumma      { background: #202020; font-family: "Ubuntu", sans-serif; margin: 0px; }

body:hover      { }

h1, h2, h3, h4  {font-family: "Ubuntu", "Futura", sans-serif; color: #f0f0f0; margin: 0px; }


h1 	            {font-size: 45px; color: #fff; margin: 2em 0em 0.5em 0px; text-shadow: 0px 0px 5px #111; }
h2 	            {font-size: 29px; font-weight: bold; color: #fff; line-height: 24px; margin: 0px;}
h3 	            {font-size: 18px; font-weight: bold; color: #fff; }
h4 	            {font-size: 15px;}

p 	            {font-family: "Ubuntu", sans-serif; font-size: 15px; line-height: 20px; color: #b7b7b7; margin: 0px; }

a:link          {font-family: "Ubuntu", sans-serif; font-size: 20px; line-height: 24px; font-weight: bold; color: #f0f0f0; text-decoration: none;
                 padding: 0px 3px 0px 3px; margin-left: -3px; }

a:visited        { color: #f0f0f0; }
a:hover          { color: #c80c0c; }



td.yla-v a:hover { background-image: url('../kuvat/hover-6.png'); background-size: 100% 22px; color: #ffffff; padding: 0px 3px 0px 3px; border-radius: 0px;
                    transition: background-size 0.2s, color 0.2s; background-position: center; background-repeat: no-repeat; }

table           { width: 100%; border-collapse: separate; border-spacing: 0; }

td              { background: #1c1c1c; padding-left: 15px; padding-right: 7px; }
td.yla-v        { padding-top: 10px; border-top: 3px solid #c80c0c; }
td.yla-v a      { color: #f0f0f0; letter-spacing: 0px;  background-image: url('../kuvat/hover-6.png'); background-size: 0% 22px;
                  transition: background-size 0.5s, color 0.5s; background-position: center; background-repeat: no-repeat; }
td.yla-o        { width: 12%; text-align: right; vertical-align: middle; border-radius: 0px 0px 0px 0px; background: #c80c0c; line-height: 16px;
                  padding: 5px 10px 5px 10px; }
td.yla-o-2      { width: 12%; text-align: right; vertical-align: middle; border-radius: 0px 0px 0px 0px; background: #f2607b; line-height: 16px;
                  padding: 7px 10px 7px 10px; }
td.keski        { padding-bottom: 9px; padding-right: 105px; border-bottom: 1px solid #060606; }
td.ala-v        { border-top: 1px solid rgb(30,30,30,0.06); padding-bottom: 4px; padding-bottom: 5px; border-top: 1px solid #2d2d2d;
                  background: #101010f0; }
td.ala-v p      { font-size: 14px; font-weight: bold; position: relative; top: 2px; }
td.ala-v a      { font-size: 14px; font-weight: bold; position: relative; top: 2px; transition: color 0.3s; }
td.ala-o        { border-top: 1px solid rgb(30,30,30,0.06); background: #101010f0; display: table-cell; border-top: 1px solid #2d2d2d; }

td.vali         { background: rgba(255,255,255,0); border: none; }
td.kuva         { width: 112px; padding: 0px; background: #1c1c1c; border-radius: 0px 0px 0px 0px; vertical-align: top;
                  border-right: 0px solid #d0d0d0; border-top: 3px solid #c80c0c; }

@media          (max-width:600px) { td.kuva { display: none; }}

tr              { height: 1em; }

th              { height: 120px; }

img             { display: block; height: 112px; width: 112px; padding: 0px; margin: 0px; border-radius: 0px 0px 0px 0px;
                  background: #1c1c1c;  transition: width 0.6s; margin-left: auto; margin-right: auto; }

td.kuva:hover img  { width: 40%; transition: width 0.6s ease-in-out; transition-delay: 0.2s; margin-left: auto; margin-right: auto; }


.hover-container { position: relative; display: inline-block; width: 112px; transition: width 0.4s ease-out, opacity 0.4s ease-out;
                   padding-bottom: 0px; margin-bottom: 0px; }

.hover-container h2   { background: #c80c0c; font-size: 29px; line-height: 100px; padding-left: 22px; padding-bottom: 0px; margin-bottom: -23px;
                        margin-top: -7px;}

.vuositausta     { display: inline; padding-bottom: 0px; margin-bottom: 0px;  }

.vuositausta h3  { opacity: 0; color: #ffffff; font-size: 29px; line-height: 24px;
                   transition: opacity 0.2s ease-out;
                   position: absolute; top: 56px; left: 32%; width: 1px; white-space: nowrap;
                   margin-bottom: 0px; padding-bottom: 0px; }

.hover-container:hover { width: 300px; transition: width 0.2s ease-out;  }

.hover-container:hover .vuositausta h3 { opacity: 1; transition: opacity 0.6s ease-out;   }


.rajaus         { max-width: 860px; margin-right: auto; margin-left: auto; padding: 0px 10px 0px 5px; }

.biisit         { margin-top: 1em;  width: 100%;  }

.tyyli-1        { color: #ffffff; font-size: 14px; font-weight: bold; padding-right: 0px; } /* punainen   */

.kielet a       { color: #ffffff; font-size: 13px; padding: 10px; margin: 5px; border: 1px solid #686868; background: #202020; }

.perusteksti p  { color: #fff; font-weight: bold; font-size: 20px; line-height: 27px; padding: 12px 16px 12px 16px; margin-bottom: 0em;
                  background: #1c1c1ce0; border-top: 0px solid; border-bottom: 0px solid; border-color: #ffffff;}


.perusteksti-2 p  { color: #fff; font-weight: normal; font-size: 16px; line-height: 24px; padding: 10px 20px 0px 20px; margin-bottom: 0em; }

.perusteksti-2 a  { color: #c80c0c; font-weight: normal; font-size: 16px; line-height: 24px; margin-bottom: 0em; }

.back a           { color: #ffffff; border: 2px solid #ffffff; padding: 10px 16px 10px 16px; margin: 20px 5px 0px 5px; border-radius: 20px; display: inline-block;
                    transition: color 1s, border-color 2s; }

.back a:hover     { color: #c80c0c; border-color: #c80c0c; transition: color 0.6s, border-color 0.3s; }

footer           { background: #000000; margin: 0px; padding: 6px 12px 6px 12px; }

footer a:link, footer a:visited  { font-size: 14px; color: #a0a0a0; font-weight: normal; margin: 0px; padding: 0px; letter-spacing: 0px; }