/******************************************************
 * master.css pre www.BARBAtest.com
 *
 * Copyright (c) 2018 Martin Fajnor All rights reserved.
 * Generator URI: http://www.amfajnor.sk
 *
 * Author: Fajnor
 *****************************/

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=latin-ext');

:root {
	cursor: url(../img/cursor-default.cur) 3 3, default; 	
	--max-page-width: 990px;
}
body, html {
    background-color: #8fa5bd; /* #99A7B7; */
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
	font-family: 'Roboto', sans-serif;
	text-align: left;
	overflow: hidden;
}
b,strong {
 font-weight:bolder
}
small {
 font-size:80%
}
sub,sup {
 position:relative;
 vertical-align:baseline;
 font-size:75%;
 line-height:0
}
sub {
 bottom:-.25em
}
sup {
 top:-.5em
}
hr {
 display:block;
 margin:1em 0;
 padding:0;
 height:1px;
 border:0;
 border-top:1px solid #ccc
}
a {
 text-decoration:none
}
a {
 background-color:transparent;
 -webkit-text-decoration-skip:objects
}
a:active,a:hover {
 outline-width:0
}
a {
	color: #FFF;
	font-family: 'Roboto', sans-serif;
    position:relative;
	margin-left: 15px;
    color:transparent;
    -webkit-transition:color;
    transition:color;
    -webkit-transition-duration:0s;
    transition-duration:0s;
    -webkit-transition-timing-function:linear;
    transition-timing-function:linear
}
a::after, a::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    background-color: #20232e;
    -webkit-transform: scale3d(0,1,1);
    transform: scale3d(0,1,1);
}
a::before {
    bottom: -2px;
    height: 1px;
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transition: -webkit-transform;
    transition: -webkit-transform;
    transition: transform;
    transition: transform,-webkit-transform;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transition-timing-function: cubic-bezier(.77,0,.175,1);
    transition-timing-function: cubic-bezier(.77,0,.175,1);
}
body.home .barba-container a::after, body.about .barba-container a::after, body.kontakt .barba-container a::after {
    top: 0;
    height: 100%;
	
	-webkit-animation-name: blockDiscover;
	animation-name: blockDiscover;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay: .4s;
	animation-delay: .4s;
	-webkit-animation-timing-function: cubic-bezier(.645,.045,.355,1);
	animation-timing-function: cubic-bezier(.645,.045,.355,1);
}
body.home .barba-container a, body.about .barba-container a, body.kontakt .barba-container a {
 color:#20232e;
 -webkit-transition-delay:.8s;
 transition-delay:.8s
}
@media (min-width:1000px) {
 a:hover::before {
  -webkit-transform:scale3d(1,1,1);
  transform:scale3d(1,1,1);
  -webkit-transform-origin:left center;
  -ms-transform-origin:left center;
  transform-origin:left center;
  -webkit-transition-delay:0s;
  transition-delay:0s
 }
}
@-webkit-keyframes blockDiscover {
 0% {
  -webkit-transform:scale3d(0,1,1);
  transform:scale3d(0,1,1);
  -webkit-transform-origin:left center;
  transform-origin:left center
 }
 40% {
  -webkit-transform:scale3d(1,1,1);
  transform:scale3d(1,1,1);
  -webkit-transform-origin:left center;
  transform-origin:left center
 }
 60% {
  -webkit-transform:scale3d(1,1,1);
  transform:scale3d(1,1,1);
  -webkit-transform-origin:right center;
  transform-origin:right center
 }
 100% {
  -webkit-transform:scale3d(0,1,1);
  transform:scale3d(0,1,1);
  -webkit-transform-origin:right center;
  transform-origin:right center
 }
}
@keyframes blockDiscover {
 0% {
  -webkit-transform:scale3d(0,1,1);
  transform:scale3d(0,1,1);
  -webkit-transform-origin:left center;
  transform-origin:left center
 }
 40% {
  -webkit-transform:scale3d(1,1,1);
  transform:scale3d(1,1,1);
  -webkit-transform-origin:left center;
  transform-origin:left center
 }
 60% {
  -webkit-transform:scale3d(1,1,1);
  transform:scale3d(1,1,1);
  -webkit-transform-origin:right center;
  transform-origin:right center
 }
 100% {
  -webkit-transform:scale3d(0,1,1);
  transform:scale3d(0,1,1);
  -webkit-transform-origin:right center;
  transform-origin:right center
 }
}
a:hover { 
	color: #FF5E00; 
	cursor: progress; 
	cursor: url(../img/cursor-pointer.cur) 20 20, pointer; 	
}
h1 {
	font-family: 'Roboto', sans-serif;
	color: #fff;
	font-weight: 900;
	font-size: 11vw;
}
.elAlert {
	position: fixed;
	padding: 35px 75px 40px;
	margin: 20% auto;
	background-color: #97DB69;
	color: green;
	font-size: 25px;
	z-index: 10000;
	top: 0;
	left: 50%;
	-webkit-box-shadow: 0 0 20px 0 #666666;
	box-shadow: 0 0 20px 0 #666666;
	-moz-transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: 2px solid #85A570;
}

/*
 *
 *  ~~~~~~  MAIN page ~~~~~~~~  */

 /* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
	padding: 8px 8px 8px 32px;
    position: absolute;
    top: 0;
    left: 1px;
    font-size: 36px;
}
.openNavTlacitko {
	padding: 5px 8px 8px 27px;
    position: absolute;
    top: 0;
    left: 1px;
    font-size: 36px;
	cursor: url(../img/cursor-pointer.cur) 20 20, pointer; 	
}
.openNavTlacitko em {
	font-size: 16px;
	color: #fff;
}


/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#barba-wrapper {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}