/******************************************************
 * master.css pre www.BARBA2test
 *
 * Copyright (c) 2019 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 {
    /* Toto je dolezite aby schovalo default cursor  */
    cursor: none;
	 	
	--max-page-width: 990px;
}
body, html {
    background-color: #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;
 cursor: none;
}
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; 
}
h1 {
	font-family: 'Roboto', sans-serif;
	color: #394b5780;
	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: 15; /* 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: fixed;
    top: 0;
    left: 1px;
    font-size: 36px;
	z-index: 10;
}
.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;}
} 













/*********************
 *  CURSOR settings
 */

.cursor-dot,
.cursor-dot-outline {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease-in-out,
                transform 0.3s ease-in-out;
	z-index: 10000;
}

.cursor-dot[data-type=default],
.cursor-dot[data-type=pure],
.cursor-dot[data-type=elastic] {
    --size-cursor-dot: 8px;
    width: var(--size-cursor-dot);
    height: var(--size-cursor-dot);
    background-color: #222;
}

.cursor-dot[data-type=pulse] {
    --size-cursor-from-PULSE: 1em;
    --size-cursor-to-PULSE: 3em;
    -webkit-animation: pulse 2s infinite; 
    animation: pulse 2s infinite;
    background-color: #222;
}
.cursor-dot[data-type=textate] {
  width: 3px !important;
    --size-cursor-from-PULSE: .5em;
    --size-cursor-to-PULSE: 2em;
    -webkit-animation: pulse 2s infinite; 
    animation: pulse 2s infinite;
    background-color: #222;
}

.cursor-dot-outline[data-type=default] {
    --size-cursor-dot-outline: 10px;
    width: var(--size-cursor-dot-outline);
    height: var(--size-cursor-dot-outline);
    background-color: #22222250;
}


.cursor-dot-outline[data-type=pulse] {
    --size-cursor-from-PULSE: 1em;
    --size-cursor-to-PULSE: 3em;
    -webkit-animation: pulse 2s infinite; 
    animation: pulse 2s infinite;
    background: #CBDAE050;
}

.cursor-dot-outline[data-type=elastic],
.cursor-dot-outline[data-type=textate] {
  position: absolute;
    -webkit-animation: elastic 0.5s cubic-bezier(.81,-0.42,.68,1.46); 
    animation: elastic 0.5s cubic-bezier(.81,-0.42,.68,1.46);
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards;

    background: #CBDAE050;
}

@keyframes pulse {
  0%{
      opacity: 0.2;
      height: var(--size-cursor-from-PULSE);
      width: var(--size-cursor-from-PULSE);

  }
  50%{
      opacity: 0.9;
      height: var(--size-cursor-to-PULSE);
      width: var(--size-cursor-to-PULSE);

  }
  100%{
      opacity: 0.2;
      height: var(--size-cursor-from-PULSE);
      width: var(--size-cursor-from-PULSE);
  }
}

@keyframes elastic {
  0%{
      opacity: 0.2;
      height: 1em;
      width: 1em;
  }
  60%{
      opacity: 0.7;
      height: 4em;
      width: 4em;
  }
  80%{
      opacity: 0.7;
      height: 3.6em;
      width: 3.6em;
  }
  100%{
      opacity: 0.9;
      height: 4em;
      width: 4em;
  }
}

/* END ***********
 * CURSOR settings  
 */








/*********************
 *  MOUSE scroll icon settings
 */
.mouse {
    width: 26px;
    height: 40px;
    border-radius: 15px;
    border: 2px solid #000;
    position: relative;
    overflow: hidden;
    margin-top: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.mouse .roll {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    margin-left: -2px;
    height: 4px;
    border-radius: 4px;
    background: #000;
    -webkit-animation: mouseScroll .8s cubic-bezier(.7,0,.3,1) infinite alternate;
    animation: mouseScroll .8s cubic-bezier(.7,0,.3,1) infinite alternate;
    z-index: 2;
}
.mouse .rollshadow {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    margin-left: -2px;
    height: 4px;
    background: #666;
    border-radius: 4px;
    -webkit-animation: mouseScroll .8s cubic-bezier(.7,0,.3,1) infinite alternate;
    animation: mouseScroll .8s cubic-bezier(.7,0,.3,1) infinite alternate;
        animation-delay: 0s;
    -webkit-animation-delay: 80ms;
    animation-delay: 80ms;
    z-index: 1;
}
@-webkit-keyframes mouseScroll {
 0% {
  -webkit-transform:translateY(0);
  transform:translateY(0)
 }
 100% {
  -webkit-transform:translateY(14px);
  transform:translateY(14px)
 }
}
@keyframes mouseScroll {
 0% {
  -webkit-transform:translateY(0);
  transform:translateY(0)
 }
 100% {
  -webkit-transform:translateY(14px);
  transform:translateY(14px)
 }
}