/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}


html {
    font-size: 14px;
}

body {
    background-color: #000;
    font-family: "Source Sans Pro";
}

.container { min-height: 100%; position: relative;}
.wrapper {max-width: 1200px; margin: 0px auto;}
.clear { clear: both; }

h1 { text-align: center; color: #ce2420;font-size: 5.7rem; margin: 10px;}
h2 { text-align: center; color: #fff; font-size: 4.5rem; margin: 10px;}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Rajdhani";
}

/*-----------------------------------------------------------------------------------*/
/*  Navigation
/*-----------------------------------------------------------------------------------*/
.outer-nav a {
    font-family: "Rajdhani";
    font-size: 3.929rem;
    font-weight: bold;
    display: block;
    text-transform: uppercase;
    letter-spacing: -1px;
}

/*-----------------------------------------------------------------------------------*/
/*  Coming soon
/*-----------------------------------------------------------------------------------*/
p.looking-for {
    font-family: "Rajdhani";
    font-size: 1.571rem;
    color: white;
    margin-top: 100px;
    font-weight: 300;
    line-height: 30px;
}
 
p.looking-for span {
    font-weight: bold;
    text-decoration: underline;
}

a.button {
    background: #ce2420;
    padding: 20px 30px;
    display: inline-block;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    border-radius: 5px;
 }

 p.footer-text {
    font-size: 21px;
    font-family: "Rajdhani";
    color: white;
    padding-bottom: 50px;
    font-weight: 300;   
 }

/*-----------------------------------------------------------------------------------*/
/*  Homepage
/*-----------------------------------------------------------------------------------*/
.main-intro h2 {
    color: #ce2420;
    text-align: center;
    font-size: 3.929rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: -1px;

    -webkit-font-smoothing: antialiased;
}

.main-intro h3 {
    color: #fff;
    letter-spacing: -1px;
    text-align: center;
    font-size: 3.5rem;
    font-weight: 500;
    text-transform: uppercase;

    -webkit-font-smoothing: antialiased;
}


.perspective {
    color:#ce2420;
    background: #000 url("images/background.jpg") no-repeat top center; 
    background-attachment: scroll;
    background-size: cover;
}

.perspective.modalview {
    background: #000 url("images/space-background-darker.jpg") no-repeat center center; 
    background-attachment: scroll;
    background-size: cover;    
}

.perspective.modalview .stairs-wrapper {
    display: none;
}


.text-align-left { text-align: left; }
.text-align-right { text-align: right; }
.text-align-center { text-align: center; }

.logo { padding: 30px; }
.menu-icon { padding: 30px; z-index: 500; }
#showMenu:hover { cursor: pointer; }


/*-----------------------------------------------------------------------------------*/
/*  Planets
/*-----------------------------------------------------------------------------------*/
.planets {
    display: block;
    /*background: transparent url("images/planets-horizontal.png") no-repeat center center; */
    background-attachment: scroll;
    background-size: contain;
    top: 0px;
}

.planets img { width: 100%; height: auto; display: block;}
img.square { display: none; }
img.rectangle { display: block; }

.planets .col-sm-4 {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: scroll;    
}

#planeta1 {
    background-image: url('images/planetky2a.png');
}

#planeta2 {
    background-image: url('images/planetky2b.png');
}

#planeta3 {
    background-image: url('images/planetky2c.png');
}

.figl { 
    position: relative; 
    height: 400px;
    /* background: transparent url("../images/rozhrani.png") repeat-x bottom; */
    background-size: 100% 100%;
    
 }

.hands {
    bottom: 0;
    position: fixed;
    width: 100%;
}


.right-hand { position: absolute; z-index: 260; overflow: hidden; min-height: 319px; min-width: 417px; bottom: 0px; right: 10%; z-index: 150;}
.right-hand img { position: absolute; bottom: -10px; right: 0px;}

.left-hand { min-height: 356px; position: absolute; bottom: 0px; left: 10%; z-index: 200;}
.left-hand img {}

.left-hand video {
     position: absolute; top: 30px; left: 300px;  z-index: 250;
    -ms-transform: rotate(-8deg); /* IE 9 */
    -webkit-transform: rotate(-8deg); /* Chrome, Safari, Opera */
    transform: rotate(-8deg);
}

/*-----------------------------------------------------------------------------------*/
/*  Services
/*-----------------------------------------------------------------------------------*/
.bg-image-outer {
    width: 100%;
    height: auto;
    min-height: 3200px;
    overflow-x: hidden;
    position: absolute;
}


.bg-container {
    position: absolute;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.7);
    background: url(images/background-sluzby.jpg) no-repeat top center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
    bottom 0;
    left: 0;
    margin: auto;
    width: 1940px;
    height: 3200px;
    margin-left: -350px;
    overflow: hidden;
}


a.services-button {
    margin-top: 10rem;
    font-size: 1.429rem;
    color: #060612;
    text-transform: uppercase;
    display: block;
}

a.services-arrow {
    display: block;
    margin-top: 20px;
    margin-bottom: 20rem;
    height: 33px;
}

.services .modalview.perspective {    
    background: none;
}

.services .perspective {
    background: none;
}

.services {
    background: #000 url("images/background-sluzby.jpg") no-repeat top center; 
    background-attachment: scroll;
    background-size: contain;  
    background-size: 100% auto;  
}

/**
 *   Services
 */

.services-intro h2 {
    color: #df131f;
    font-size: 3.929rem;
    text-transform: uppercase;
    font-weight: bold;
} 

.services-intro h2 span{
    color: #201e1e;
}

.services-intro h3 {
    color: #201e1e;
    font-size: 2.143rem;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 50px;
} 

.one-half {
    float: left;
    width: 49%;
    margin-right: 1%;
    margin-top: 1%;
    background: white;
    padding: 50px 10px 20px 10px;
}

.one-half.last {
    margin-right: 0;
}

.one-half .left-content {
    width: 35%;
    float: left;
    text-align: center;
}

.one-half .left-content h4 { 
    margin-top: 50px;
    font-size: 2.143rem;
    color: #df131f;
    line-height: 40px;
    font-weight: bold;
    text-transform: uppercase;
}

.one-half .right-content {
    width: 55%;
    float: right;
}

.one-half .right-content ul {
    margin-top: 10px;
}

.one-half .right-content ul li {
    color: #3c3c3c;
    font-size: 1.286rem;
    margin-bottom: 10px;
}

/**
 *   Button - pomozeme vam
 */
 a.button.help {
    background: #ce2420;
    padding: 20px 30px;
    display: inline-block;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
 }

 h2.services-outro {
    color: white;
    font-size: 3.929rem;
    text-transform: uppercase;
    font-weight: bold;    
 }

 h2.services-outro span {
    color: #df131f;
    font-size: 3.5rem;
 }

h3.services-outro {
    font-size: 2.143rem;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    margin-top: 30px;
}

h4.services-outro {
    font-size: 1.429rem;
    font-weight: 300;
    color: white;
    margin-top: 20px;
    margin-bottom: 400px;
}

/*
effects
*******************************************************************************/

.circle-motion { 
   -webkit-animation: myOrbit 6s linear infinite; /* Chrome, Safari 5 */
   -moz-animation: myOrbit 6s linear infinite; /* Firefox 5-15 */
   -o-animation: myOrbit 6s linear infinite; /* Opera 12+ */
   animation: myOrbit 6s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}

.spin:hover,
.spin:focus {
    -webkit-animation:spin-effect 1s linear infinite;
    -moz-animation:spin-effect 1s linear infinite;
    animation:spin-effect 1s linear infinite;
}
   
.shake {
    -webkit-animation-name: shake-effect;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}   

/* shake effect */
@-webkit-keyframes shake-effect {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

/* spin effect */
@-moz-keyframes spin-effect { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin-effect { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin-effect { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/* hand rotate eggect */
@-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(10px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(10px) rotate(-360deg); }
}

@-moz-keyframes myOrbit {
    from { -moz-transform: rotate(0deg) translateX(10px) rotate(0deg); }
    to   { -moz-transform: rotate(360deg) translateX(10px) rotate(-360deg); }
}

@-o-keyframes myOrbit {
    from { -o-transform: rotate(0deg) translateX(10px) rotate(0deg); }
    to   { -o-transform: rotate(360deg) translateX(10px) rotate(-360deg); }
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(10px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(10px) rotate(-360deg); }
}



/*
responsive
*******************************************************************************/
@media screen and (min-width: 1300px) {
    .coming-soon {
        margin-top: 20%;
    }
}

@media screen and (max-width: 1300px) {
    .coming-soon {
        margin-top: 5%;
    }
}


@media screen and (max-width: 1020px) {
    div.right-hand { display: none; }
}

@media screen and (max-width: 767px) {
    .planets {
        display: block;
        /*background: transparent url("images/planets-vertical.png") no-repeat center top; */
        background-attachment: scroll;
        background-size: contain;
    }

    .planets img { 
        width: 100%; 
        height: auto; 
        display: block; 
        margin: 0px auto; 
        max-height: 300px;
    }
    
    img.square { display: none; }
    img.rectangle { display: block; }
    
    h1 { font-size: 4rem; margin: 10px;}
    h2 { font-size: 3rem; margin: 10px;}

    .right-hand { display: none; }
    .spin:hover,
    .spin:focus {
        -webkit-animation:none;
        -moz-animation:none;
        animation:none;
    }
       
    .shake {
        -webkit-animation-name: none;
    }       
}

@media only screen and (max-width: 600px) {
    .left-hand img { display: none; }
    .left-hand { position: relative; width: 300px; text-align: center; margin: 0px auto;left: 0px;}
    .left-hand video {
         position: absolute;
         width: 300px;
         left: 0px;
         margin:0px auto;
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }

}

@media only screen and (max-width: 550px) {
    h1 { font-size: 3rem; margin: 7px;}
    h2 { font-size: 2rem; margin: 7px;}
}