@import url('https://fonts.googleapis.com/css?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arapey:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;800&display=swap');


/*RAKENNE*/

main {
    width:100%;
	margin: 0 auto;
	color:#505050;
	padding: 0;
	line-height:1.6;
	display:block;
}


body,html {height:100%;}
body {
	margin: 0;
	font-size:12pt;
	font-family:"montserrat",sans-serif;
	text-align:justify;
	background: radial-gradient(circle, rgba(254,253,251,1) 0%, rgba(240,239,235,1) 65%, rgba(191,196,198,1) 100%);
}

.col-sm-4 {
  width: 30%;
  height: 100%;
  position: fixed;
  overflow: auto;
  text-align:center;
  margin-top:-20px;
  margin-bottom:-20px;
      	background: -webkit-linear-gradient(#89739c, #a48db8, #89739c, #4e3e5c);
}

.viiva {
    position: fixed;
    overflow: auto;
    height:100%;
    width:3px;
    background-color:#CF8E14;
    margin-left:30.2%;
    margin-top:-20px;
}

.col-sm-8 {
    margin-right:5%;
    margin-left:34%;
}


/*TEKSTIMĂ„Ă„RITTELYT*/
header {
    font-family: arapey;
    color:#CF8E14;
    font-size:500%;
    padding-top:30px;
    margin-top:20px;
    margin-bottom:-80px;
    text-transform:uppercase;
    letter-spacing:2px;
	background: -webkit-linear-gradient(#ffe587, #ffb738, #ba6600, #803c00);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

h1 {
    font-family: arapey;
     color:#CF8E14;
    font-size:45px;
    margin-top:20px;
    margin-bottom:0;
    letter-spacing:2px;
    font-style:italic;
    font-weight:400;
    	background: -webkit-linear-gradient(#ffe587, #ffb738, #ba6600, #803c00);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

h2 {
    font-family: arapey;
    color:#CF8E14;
    font-size:30px;
    margin-top:10px;
    margin-bottom:0;
    letter-spacing:2px;
    font-weight:400;
    	background: -webkit-linear-gradient(#ffe587, #ffb738, #ba6600, #803c00);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

.korostus {
  	font-size:12pt;
	font-family:"montserrat",sans-serif;
	font-weight:500;
}

#copy {
    font-family: arapey;
    color:#FFF;
    position: fixed;
    bottom: 0;
    width: 30%;
}

.signeeraus {
    font-family:"great vibes";
    color:#CF8E14;
    font-size:40px;
    	background: -webkit-linear-gradient(#ffe587, #ffb738, #ba6600, #803c00);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

.atm {
    font-family: arapey;
    color:#FFF;
    font-size: 20px;
    width: 90%;
}

ol {
    width: 90%;
    text-indent:0;
    column-count: 3;
    column-gap: 5%;
    column-rule: 0;
    column-width: 35%;
}

/*LINKKITYYLYT*/
.sukulinkki {
    font-family:arapey;
    color:#ba6600;
    font-size:16pt;
    text-decoration:none;
    font-weight:500;
}

a.sukulinkki:hover {
    font-family:arapey;
    font-size:16pt;
    background: -webkit-linear-gradient(#ffe587, #ffb738, #ba6600, #803c00);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
}

a.valkoinen {
    color:#505050;
}

a.valkoinen:hover {
    color:#FFF !important;
}

a {
    color:#ba6600;
    text-decoration:none;
}

a:hover {
    background: -webkit-linear-gradient(#ffe587, #ffb738, #ba6600, #803c00);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
}

/*TAULUKOT*/

.perustiedot {
    width:100%;
    border-collapse:collapse;
    margin: 0 auto;
    margin-bottom:30px;
    margin-top:20px;
    display: block;
    overflow: auto;
    font-size: 12pt;
}

.perustiedot td {
    padding: 0 30px 0 30px;
    border-left: 5px solid #CF8E14;
    width:50%;
}

.suku {
    width:100%;
	border-collapse:collapse;
	margin: 0 auto;
    display: block;
    overflow: auto;
    font-size:12pt;
}

.suku td {
    padding-bottom:1px;
    background-color:transparent;
    border-bottom: 1px solid #CF8E14;
    background-size:100% 1px ;
    line-height:1;
    padding:10px;
    min-width:250px;
}

.no-border {
    background:none !important;
    border:0 !important;
}

/*TABIT*/
.tabcontent {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s; /* siirtymäefektin kesto 1 sekunti */
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

div.tab{
    overflow:hidden;
    border: 0;
    width:100%;
    margin-top:-30px;
    margin-left:-4.5%;
     padding-bottom:1px;
       background-color:transparent;
  background: /* gradient can be an image */
    linear-gradient(
      to left, 
      rgba(207, 142, 20,0) 2%,
      rgba(255, 213, 133,1) 20%,
      rgba(255, 197, 89,1) 47%,
      rgba(207, 142, 20,1) 100%
    )
    left 
    bottom
    transparent    
    no-repeat; 
  background-size:100% 1px ;
    font-family:arapey;
    font-size:20px;
    letter-spacing:1.5px;
}

div.tab button {
  list-style-type: none;
  float:left;
  margin: 0;
  overflow: hidden;
  width:25%;
  background:transparent;
  display:block;
  color: #505050;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  border:0;
  outline:none;
    font-family:arapey;
    font-size:20px;
    letter-spacing:1.5px  
}

div.tab button:hover {
   float:left;
   background-color: #a48db8;
   transition: background-color 1.5s ease;
   color:#FFF;
   border:0; 
   outline:none;
}
div.tab button:active {
    border:0;
    outline:none;
}

div.tab button:on-click {
    border:0;
}

.tabcontent {
    display: none;
	min-height:500px;
	overflow:auto;
	margin-top:20px; 
}


/*KUVAGALLERIA*/
.column {
  float: left;
  width: 16%;
  padding: 8px;
}

/* Style the images inside the grid */
.column img {
  opacity: 1;
  cursor: pointer;
  border: 3px solid #CF8E14;
  max-height:100px;
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
    font-family:arapey;
    font-size:17pt;
    color:#FFF; 
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  left: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}



@media screen and (max-width: 1800px) {
    ol {
        column-count: 2 !important;
        column-gap: 5% !important;
        column-width: 40% !important;
    }
}


@media screen and (max-width: 1240px) {
    ol {
        column-count: 1 !important;
    }
}


@media screen and (max-width: 980px) {
  div.tab button.right, 
  div.tab button {float: none;width:100%;}
  header {font-size:300%;}
  table {border-collapse: collapse;border-width: 0;margin: 0 auto;display: block;overflow: auto;}

html, body {position:relative;width: 100% !important;}
}