/*
Theme Name:         Koirakerho Heiluhännät
Theme URI:          http://foundationpress.olefredrik.com
Github Theme URI:   https://github.com/olefredrik/FoundationPress
Description:        FoundationPress is a WordPress starter theme based on Foundation 5 by Zurb
Version:            5.4.3
Author:             Ole Fredrik Lie
Author URI:         http://olefredrik.com/

License:            MIT License
License URI:        http://www.opensource.org/licenses/mit-license.php
*/
body {
background: url('http://www.koirakerhoheiluhannat.fi/_themes/piechart/piebkgnd.jpg') #eee;
}

.top-bar-container, .tab-bar {
margin-bottom: 0em;
}

iframe {
border: 0px;
}

.byline {
font-size: 0.8em;
}

.top-bar-container {
max-width: 62.5rem;
margin: 0 auto;
box-shadow: 0px 0px 10px #ccc;
}

.top-bar-section ul li, .top-bar, .top-bar-section li:not(.has-form) a:not(.button), .top-bar-section>ul>.divider {
height: 40px;
line-height: 40px;
background: #247bb5
}

.top-bar-section .dropdown li:not(.has-form):not(.active)>a:not(.button) {
background: #2c98e0
}


 .top-bar-section li:not(.has-form) a:not(.button), .top-bar-section li.active:not(.has-form) a:not(.button) {
 height: 40px;
line-height: 40px;
 }


.top-bar-section .dropdown li:not(.has-form):not(.active):hover>a:not(.button), .top-bar-section .dropdown li:not(.has-form):not(.active):hover>a:not(.button), .top-bar-section ul li:hover:not(.has-form)>a, .top-bar-section li:not(.has-form) a:not(.button):hover {
background: #27769e;
}

.top-bar-section>ul>.divider {
border-color: #2679af;
}

.header {
position: relative;
max-width: 62.5rem;
height: 200px;
background: url('assets/tausta001.jpg');
background-position: right;
margin: 0 auto;
box-shadow: 0px 0px 10px #ccc;
text-align:right;
overflow: hidden;
}

.header h1 {
position: absolute;
bottom: -12px; 
right: 10px;
color: white;
display: none !important;
}

.header .logo {
position: absolute;
top: 0px;
left: 0px;
max-height: 200px;
}

.maindata > .row, footer.row {
background: #fff;
box-shadow: 0px 0px 10px #ccc;
padding-top: 1em;
}

footer.row {
margin-top: 0px;
}

footer.row p {
font-size: 0.8em;
}

.widget ul {
list-style-type: none;
}

.panel-white {
background: #fefefe;
}
/* header animation */

.header figure {
   margin: 0;
   left: 267px;
   position: absolute;
   opacity:0; 
}

.header figure img{
height: auto;
min-width: 733px;
}

img.alignright {
margin-top: 0;
margin-bottom: 1.5em;
}

.header figure:nth-child(1) {
   animation: xfade 66s 60s infinite;
   -webkit-animation: xfade 66s 60s infinite;
}
.header figure:nth-child(2) {
   animation: xfade 66s 54s infinite;
   -webkit-animation: xfade 66s 54s infinite;
}
.header figure:nth-child(3) {
   animation: xfade 66s 48s infinite;
   -webkit-animation: xfade 66s 48s infinite;
}
.header figure:nth-child(4) {
   animation: xfade 66s 42s infinite;
   -webkit-animation: xfade 66s 42s infinite;
}
.header figure:nth-child(5) {
   animation: xfade 66s 36s infinite;
   -webkit-animation: xfade 66s 36s infinite;
}
.header figure:nth-child(6) {
   animation: xfade 66s 30s infinite;
   -webkit-animation: xfade 66s 30s infinite;
}
.header figure:nth-child(7) {
   animation: xfade 66s 24s infinite;
   -webkit-animation: xfade 66s 24s infinite;
}
.header figure:nth-child(8) {
   animation: xfade 66s 18s infinite;
   -webkit-animation: xfade 66s 18s infinite;
}
.header figure:nth-child(9) {
   animation: xfade 66s 12s infinite;
   -webkit-animation: xfade 66s 12s infinite;
}
.header figure:nth-child(10) {
   animation: xfade 66s 6s infinite;
   -webkit-animation: xfade 66s 6s infinite;
}
.header figure:nth-child(11) {
   animation: xfade 66s 0s infinite;
   -webkit-animation: xfade 66s 0s infinite;
}

@keyframes xfade{
   0%{
      opacity: 0;
   }
   3%{
      opacity: 1;
   }
   12% {
      opacity:1;
   }
   15%{
      opacity: 0;
   }
   98% {
      opacity:0;
   }
   100% {
      opacity:0;
   }
}

@-webkit-keyframes xfade{
   0%{
      opacity: 0;
   }
   3%{
      opacity: 1;
   }
   12% {
      opacity:1;
   }
   15%{
      opacity: 0;
   }
   98% {
      opacity:0;
   }
   100% {
      opacity:0;
   }
}

figure {
margin: 0;
padding: 0;
}

img.alignright {
 float: right;
}

img.alignleft {
 float: left;
}