/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

 a {
  text-decoration: none;
 }
 
 /* Slider v galerii bez mezery pod Header */
 .entry-content .n2-ss-slider {
   margin-top: -100px;
   margin-bottom: -100px;
 }
 
 /* Zmena barev mobilni navigace */
 .ct-panel-actions {
   background-color: #3a97df !important;
 }
 
 .ct-panel-content {
   background-color: #3a97df !important;
 }
 
 .ct-panel-content a {
   color: #000000 !important;
 }

 .ct-panel-content a:hover {
  color: #ffffff !important;
}
 
 /* Zakulacené rohy všech obrázků */ .ct-image-container {	  
   border-radius: 10px !important;
 }
 
 /* Uprava obrázků v page/blog textu */
 .wp-block-image img {
   border-radius: 10px;
 /*	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.329); */
 }
 
 .wp-block-latest-posts__featured-image img {
   border-radius: 10px;
   margin: auto;
   margin-bottom:15px;
   height: 180px;
 }
 
 /* Nezobrazování názvu obrázku */
 .ct-featured-image figcaption {
   display: none;
 }
 
 /* Nadpis v akordeónu */
 .kt-blocks-accordion-title {
   font-family: 'Roboto', sans-serif;
   font-size: 21px;
   font-weight:700;
   font-style: italic;
 }

 /* CSS style pro Web sluzby Page */
.panelMK {
  width: 100%;
  padding-top: 3em;
  padding-bottom: 3em;
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;
  background: white;
}

.nadpisOnStage {
  color:#ff2137 !important;
}

.nadpisWebDev, .nadpisWebSluzby  {
  font-size: 2em;
}

.panelMK p {
  font-size: 1.1em;
}

.panelMK1 h2 {
  font-size: 2em;
}

.panelMK1 p {
  font-size: 1.1em;
}

.btnWebDev {
  opacity: 1;
  font-size: 1em;
}

#panelWebSluzby {
	min-height: 100vh;
	position: relative;
}

.circle1, .circle2 {
            /* bile pozadi s linearnim gradientem opacity*/
            background: linear-gradient(to right bottom, rgba(255,255,255,1.0), rgba(255,255,255,0.2));       
            position: absolute;
			z-index: -1;
        }

.circle1 {
	height: 40vh;
    width: 40vh;
	bottom: 100px;
	left: -8%;
	border-radius: 50%;
	background-color: #ff2137;
	overflow-x: hidden;
}

.circle2 {
	height: 28vh;
   	width: 28vh;
	top: 5%;
	right: 1%;
	border-radius: 50%;
	background-color: #0058ca;
	overflow-x: hidden;
}

/* CSS style pro tlacitka */
[type="submit"] {
  background: linear-gradient(135deg, #3c97df 0%, #0058ca 100%);
  border-radius: 10px;
}
[type="submit"]:hover {
  background: #0058ca;
}

.ct-button {
  background: linear-gradient(135deg, #3c97df 0%, #0058ca 100%);
  border-radius: 10px;
}
.ct-button:hover {
  background: #0058ca;
}

/* Web sluzby / Red lines */

#redLine1, #redLine2 {
  background:#ff2137;
  display: block;
  height: 7px;
  width: 100%;
}

#redLine1 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

#redLine2 {
  margin-top: 55px !important;
  margin-bottom: 20px !important;
}

/* 1st rowHero on Home page */
#rowHero {
  margin: 0;
  height: 95vh;
  font-weight: 100;
  background: radial-gradient(#0058ca,#1f1013);
  -webkit-overflow-Y: hidden;
  -moz-overflow-Y: hidden;
  -o-overflow-Y: hidden;
  overflow-y: hidden;
  -webkit-animation: fadeIn 1 1s ease-out;
  -moz-animation: fadeIn 1 1s ease-out;
  -o-animation: fadeIn 1 1s ease-out;
  animation: fadeIn 1 1s ease-out;
}

#btnHero {
  position: absolute;
  border: 2px solid white;
  background: transparent;
  font-family: 'Roboto', sans-serif;
  color: white;
  width: 280px;
  height: 50px;
  font-size: 1.4em;
  border-radius: 10px;
  opacity: .5;
  top: 45vh;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  transition: .3s;
  padding: 0px 10px;
  text-align: center;
}

#btnHero:hover {
  border: 2px solid #0058ca;
  background-color: #fdfdfd;
  cursor: pointer;
  color: #0058ca;
  font-weight: bold;
  opacity: .8;
  transition: .3s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

#btnHero:focus{
  outline: none;
}

.light {
  position: absolute;
  width: 0px;
  opacity: .75;
  background-color: white;
  box-shadow: #e9f1f1 0px 0px 20px 2px;
  opacity: 0;
  top: 100vh;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  -webkit-overflow-Y: hidden;
  -moz-overflow-Y: hidden;
  -o-overflow-Y: hidden;
  overflow-y: hidden;
}

.x1{
-webkit-animation: floatUp 4s infinite linear;
-moz-animation: floatUp 4s infinite linear;
-o-animation: floatUp 4s infinite linear;
animation: floatUp 4s infinite linear;
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-o-transform: scale(1.0);
transform: scale(1.0);
}

.x2{
-webkit-animation: floatUp 7s infinite linear;
-moz-animation: floatUp 7s infinite linear;
-o-animation: floatUp 7s infinite linear;
animation: floatUp 7s infinite linear;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
left: 15%;
}

.x3{
-webkit-animation: floatUp 2.5s infinite linear;
-moz-animation: floatUp 2.5s infinite linear;
-o-animation: floatUp 2.5s infinite linear;
animation: floatUp 2.5s infinite linear;
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5);
left: -15%;
}

.x4{
-webkit-animation: floatUp 4.5s infinite linear;
-moz-animation: floatUp 4.5s infinite linear;
-o-animation: floatUp 4.5s infinite linear;
animation: floatUp 4.5s infinite linear;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
left: -34%;
}

.x5{ 
-webkit-animation: floatUp 8s infinite linear;
-moz-animation: floatUp 8s infinite linear;
-o-animation: floatUp 8s infinite linear;
animation: floatUp 8s infinite linear;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
left: -57%;
}

.x6{
-webkit-animation: floatUp 3s infinite linear;
-moz-animation: floatUp 3s infinite linear;
-o-animation: floatUp 3s infinite linear;
animation: floatUp 3s infinite linear;
-webkit-transform: scale(.8);
-moz-transform: scale(.8);
-o-transform: scale(.8);
transform: scale(.8);
left: -81%;
}

.x7{
-webkit-animation: floatUp 4.3s infinite linear;
-moz-animation: floatUp 4.3s infinite linear;
-o-animation: floatUp 4.3s infinite linear;
animation: floatUp 4.3s infinite linear;
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-o-transform: scale(1.0);
transform: scale(1.0);
left: 37%;
}

.x8{
-webkit-animation: floatUp 4.7s infinite linear;
-moz-animation: floatUp 4.7s infinite linear;
-o-animation: floatUp 4.7s infinite linear;
animation: floatUp 4.7s infinite linear;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
left: 62%;
}

.x9{
-webkit-animation: floatUp 4.1s infinite linear;
-moz-animation: floatUp 4.1s infinite linear;
-o-animation: floatUp 4.1s infinite linear;
animation: floatUp 4.1s infinite linear;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
left: 85%;
}

@-webkit-keyframes floatUp{
0%{top: 100vh; opacity: 0;}
25%{opacity: 1;}
50%{top: 0vh; opacity: .8;}
75%{opacity: 1;}
100%{top: -100vh; opacity: 0;}
}
@-moz-keyframes floatUp{
0%{top: 100vh; opacity: 0;}
25%{opacity: 1;}
50%{top: 0vh; opacity: .8;}
75%{opacity: 1;}
100%{top: -100vh; opacity: 0;}
}
@-o-keyframes floatUp{
0%{top: 100vh; opacity: 0;}
25%{opacity: 1;}
50%{top: 0vh; opacity: .8;}
75%{opacity: 1;}
100%{top: -100vh; opacity: 0;}
}
@keyframes floatUp{
0%{top: 100vh; opacity: 0;}
25%{opacity: 1;}
50%{top: 0vh; opacity: .8;}
75%{opacity: 1;}
100%{top: -100vh; opacity: 0;}
}

.titulek{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Roboto', sans-serif;
font-weight: 200;
color: white;
font-size: 3.5em;
text-align: center;
}

#head1, #head2,#head3, #head4, #head5{
opacity: 0;
}

#head1{  
-webkit-animation: fadeOut 1 4s ease-in;
-moz-animation: fadeOut 1 4s ease-in;
-o-animation: fadeOut 1 4s ease-in;
animation: fadeOut 1 4s ease-in;
}

#head2{
-webkit-animation: fadeOut 1 4s ease-in;
-moz-animation: fadeOut 1 4s ease-in;
-o-animation: fadeOut 1 4s ease-in;
animation: fadeOut 1 4s ease-in;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-o-animation-delay: 5s;
animation-delay: 5s;
}

#head3{
-webkit-animation: fadeOut 1 4s ease-in;
-moz-animation: fadeOut 1 4s ease-in;
-o-animation: fadeOut 1 4s ease-in;
animation: fadeOut 1 4s ease-in;
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-o-animation-delay: 10s;
animation-delay: 10s;
}

#head4{
-webkit-animation: fadeOut 1 4s ease-in;
-moz-animation: fadeOut 1 4s ease-in;
-o-animation: fadeOut 1 4s ease-in;
animation: fadeOut 1 4s ease-in;
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-o-animation-delay: 15s;
animation-delay: 15s;
}

#head5{
-webkit-animation: finalFade 1 5s ease-in;
-moz-animation: finalFade 1 5s ease-in;
-o-animation: finalFade 1 5s ease-in;
animation: finalFade 1 5s ease-in;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-o-animation-delay: 20s;
animation-delay: 20s;
}

@-webkit-keyframes fadeOut{
0%{opacity: 0;}
30%{opacity: 1;}
80%{opacity: .9;}
100%{opacity: 0;}
}

@-moz-keyframes fadeOut{
0%{opacity: 0;}
30%{opacity: 1;}
80%{opacity: .9;}
100%{opacity: 0;}
}

@-o-keyframes fadeOut{
0%{opacity: 0;}
30%{opacity: 1;}
80%{opacity: .9;}
100%{opacity: 0;}
}

@keyframes fadeOut{
0%{opacity: 0;}
30%{opacity: 1;}
80%{opacity: .9;}
100%{opacity: 0;}
}

@-webkit-keyframes finalFade{
0%{opacity: 0;}
30%{opacity: 1;}
80%{opacity: .9;}
100%{opacity: 1;}
}

@-moz-keyframes finalFade{
0%{opacity: 0;}
30%{opacity: 1;}
80%{opacity: .9;}
100%{opacity: 1;}
}

@-o-keyframes finalFade{
0%{opacity: 0;}
30%{opacity: 1;}
80%{opacity: .9;}
100%{opacity: 1;}
}

@keyframes finalFade{
0%{opacity: 0;}
30%{opacity: 1;}
80%{opacity: .9;}
100%{opacity: 1;}
}

#rowHero {
	overflow: hidden;
}

#containerHero {
	overflow: hidden;
}


/* Flying Image on page Fotoobrazy 
.contFlyImg {
	position: relative;
	max-width:1200px;
	height: 70vh;
	top: 0px;
	left: 0px;
	z-index: 50;
}

.imageFly {			
            -webkit-perspective: 3000px;
			-moz-perspective: 3000px;
			-ms-perspective: 3000px;
			-o-perspective: 3000px;
			perspective: 3000px; 
            width: 50%;
            position: absolute;		
			top: 50%;
			left: 50%; 
			-webkit-transform: translate3d(-50%, -50%, 0px);
			-moz-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
            transform: translate3d(-50%, -50%, 0px);
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
            transform-style: preserve-3d;
			z-index: 51;
        } 

.imageFly img {
			position: relative;	
			top: 0px;
			left: 0px;
			height: 100%;
            width: 100%;
		    -webkit-transform: rotate3d(1, 0, 0, 70deg) rotate3d(0, 0, 1, -60deg) translate3d(0px, 0px, 70px);
			-moz-transform: rotateX(70deg) rotateZ(-60deg) translate3d(0px, 0px, 70px);
			-ms-transform: rotateX(70deg) rotateZ(-60deg) translate3d(0px, 0px, 70px);
			-o-transform: rotateX(70deg) rotateZ(-60deg) translate3d(0px, 0px, 70px); 
            transform: rotate3d(1, 0, 0, 70deg) rotate3d(0, 0, 1, -60deg) translate3d(0px, 0px, 70px); 
			transform: rotateX(70deg) rotateZ(-60deg) translate3d(0px, 0px, 70px); 
			-webkit-box-shadow: -80px 60px 15px 5px rgba(0, 0, 0, 0.3);
			-moz-box-shadow: -80px 60px 15px 5px rgba(0, 0, 0, 0.3);
			-ms-box-shadow: -80px 60px 15px 5px rgba(0, 0, 0, 0.3);
			-o-box-shadow: -80px 60px 15px 5px rgba(0, 0, 0, 0.3); 
            box-shadow: -80px 60px 15px 5px rgba(0, 0, 0, 0.3);
			-webkit-transition: all 0.4s;
			-moz-transition: all 0.4s;
			-ms-transition: all 0.4s;
			-o-transition: all 0.4s;
            transition: all 0.4s;
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			-o-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

.imageFly:hover img {
			position: relative;		
			top: 0px;
			left: 0px; 
			height: 100%;
            width: 100%;
			-webkit-transform: rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
			-moz-transform: rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
			-ms-transform: rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
			-o-transform: rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
            transform: rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
			-webkit-box-shadow: 15px 15px 15px 5px rgba(0, 0, 0, 0.4);
			-moz-box-shadow: 15px 15px 15px 5px rgba(0, 0, 0, 0.4);
			-ms-box-shadow: 15px 15px 15px 5px rgba(0, 0, 0, 0.4);
			-o-box-shadow: 15px 15px 15px 5px rgba(0, 0, 0, 0.4);
            box-shadow: 15px 15px 15px 5px rgba(0, 0, 0, 0.4);
        }
*/

/* Web sluzby - CSS for page Responsivity */
@media only screen and (max-width: 1100px) {
  .nadpisWebDev, .panelMK1 h2, .nadpisWebSluzby {
    font-size: 1.8em;
  }
  .panelMK p, .panelMK1 p {
    font-size: 0.9em;
  }
  .btnWebDev {
    font-size: 0.6em;
  }
}

@media only screen and (max-width: 800px) {
  .nadpisWebDev, .panelMK1 h2, .nadpisWebSluzby {
    font-size: 1.3em;
  }
  .panelMK p, .panelMK1 p {
    font-size: 0.9em;
  }
  .btnWebDev {
    font-size: 0.7em;
  }
}

@media only screen and (max-width: 600px) {
  #btnHero {
    top: 40vh;
  }
  .panelMK p, .panelMK1 p {
    font-size: 0.9em;
  }
}

@media only screen and (max-width: 400px) {
  .nadpisWebDev, .panelMK1 h2, .nadpisWebSluzby {
    font-size: 1.1em;
  }
  .panelMK p, .panelMK1 p {
    font-size: 0.9em;
  }
  .btnWebDev {
    font-size: 0.7em;
  }  
}