html,
body,
.container {
    height: 100%;
}


/* Reset */

html,
body,
h1,
p,
a,
div,
section {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font: inherit;
}


/* Layout */

.container {
    display: table;
    width: 100%;
}

.content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}


/* Special */

.box {
   text-align: center;
    height: 100%;
    width: 100%;
    font-size: 60px;
    font-family: Calluna;
    vertical-align: middle
align-self: center;
top: 50%;
  
position:relative;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.fade-in {
    opacity: 0;
    /* make things invisible upon start */
    -webkit-animation: fadeIn ease-in 1;
    /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards;
    /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

.fade-in.one {
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

.fade-in.two {
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    animation-delay: 1.2s;
}


.box2{
width:100%;
  position: relative;
  top: 50%;
 
  transform: translate(0%, -50%);
display: inline-block;  

}
.kolor1 {
    padding-right: 40px;
    align-self: center;
    padding-left: 15px;
    border-bottom: solid 6px #455BA9;
    border-top: solid 6px #455BA9;
    transition: all 1s ease-in, all 0.5s ease-out;
  display:inline-block;


}

.kolor1 a {
    text-decoration: none;
    color: #455BA9;
    transition: all 1s ease-in, all 0.5s ease-out;
}

.kolor2 {
    padding-left: 40px;
    padding-right: 15px;
    align-self: center;
   display:inline-block;
    border-bottom: solid 6px black;
    border-top: solid 6px black;
     transition: all 1s ease-in, all 0.5s ease-out;


 

}

.kolor2 a {
    text-decoration: none;
    color: black;
    transition: all 1s ease-in, all 0.5s ease-out;
}

.kolor1:hover {
    border-bottom: solid 6px black;
    border-top: solid 6px black;
}

.kolor1:hover a {
    text-decoration: none;
    color: black;
}

.kolor2:hover {
    border-bottom: solid 6px #455BA9;
    border-top: solid 6px #455BA9;
}

.kolor2:hover a {
    text-decoration: none;
    color: #455BA9;
    /*     transition:color 1s ease-out, background 1s ease-in;*/
}

#fade {
    height: 100%;
    width: 100%;
    position: absolute;
    background: #262626;
    opacity: 1;
    /* make things invisible upon start */
    -webkit-animation: fadeOut ease-in 1s;
    /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeOut ease-in 1s;
    animation: fadeOut ease-in 1s;
    -webkit-animation-fill-mode: forwards;
    /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

#linia {
    border-top: 2px solid #00435e;
    /*    margin-top: 8%;*/
    /*    width: 10%;*/
    margin-top: 8px;
}

#logo {
    height: 80px;
}

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

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

@-moz-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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


/* Media Queries */

@media only screen and (max-width: 340px) {
    .container {
        position: relative;
        display: block;
        float: left;
        vertical-align: baseline;
        margin: 0 auto;
        padding: 80px 0 0 0;
    }
    #more-content {
        float: left;
        margin-right: 10px;
    }
    body h1 {
        font-size: 18px;
        line-height: 23px;
    }
    .content,
    blockquote {
        display: inline;
        margin: 0 auto;
        padding-top: 80px;
        vertical-align: baseline;
    }
    html,
    body,
    .container {
        height: auto;
    }
}

@font-face {
    font-family: Calluna;
    src: url('../font/exljbris - CallunaSans-Bold.otf');
}