.mainframe {
	background-image:url('http://clumsyox.com/snimki/download/heliocentric.jpg');
	background-size:940px;
    background-repeat:no-repeat;
}

.menu {
  font-family: code;
  font-size: 30px;
  color: #F1F8FA;
  text-align: center;
  letter-spacing:3px;
  text-decoration: none;
  padding-top: 33px;
  transition:all .5s;
  -webkit-transition: all .5s;
  -moz-transition:all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;

}

.menu:hover {
 padding-top: 28px;
   text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}


.menu1{
background-image:url('../images/navbar/navbar_01.png') ;
   
}

.menu2{
background-image:url('../images/navbar/navbar_02.png') ;

}

.menu3{
background-image:url('../images/navbar/navbar_03.png') ;
}

.menu4{
background-image:url('../images/navbar/navbar_04.png') ;

}

.menu5{
background-image:url('../images/navbar/navbar_05.png') ;

}

.pulse{
  /*position: relative;
  top: 10%;
  left: 10%;
  width: 100px;
  height: 100px; */
  box-shadow: 0 0 0 0px rgba(90, 153,212, .5);
  text-align: center;
-webkit-animation: pulse 2s ;
-moz-animation: pulse 2s ;
-ms-animation: pulse 2s ;
-o-animation: pulse 2s ;
animation: pulse 2s ;

animation-iteration-count:3;
-webkit-animation-iteration-count:3;
-moz-animation-iteration-count:3;
-ms-animation-iteration-count:3;
-o-animation-iteration-count:3;

}

@-webkit-keyframes pulse {
  0% {}70% {box-shadow: 0 0 0 50px rgba(90, 153,212, 0);}100% {box-shadow: 0 0 0 0 rgba(90, 153,212, 0);}
}
@keyframes pulse {
  0% {}70% {box-shadow: 0 0 0 50px rgba(90, 153,212, 0);}100% {box-shadow: 0 0 0 0 rgba(90, 153,212, 0);}
}
@-moz-keyframes pulse {
  0% {}70% {box-shadow: 0 0 0 50px rgba(90, 153,212, 0);}100% {box-shadow: 0 0 0 0 rgba(90, 153,212, 0);}
}
@-ms-keyframes pulse {
  0% {}70% {box-shadow: 0 0 0 50px rgba(90, 153,212, 0);}100% {box-shadow: 0 0 0 0 rgba(90, 153,212, 0);}
}
@-o-keyframes pulse {
  0% {}70% {box-shadow: 0 0 0 50px rgba(90, 153,212, 0);}100% {box-shadow: 0 0 0 0 rgba(90, 153,212, 0);}
}



 
.pulse:hover {
  @-webkit-animation: none;
  @-moz-animation: none;
  @-ms-animation: none;
  @-o-animation: none;
  animation: none;
}






.title {
	font-family: code;
	font-size: 38px;
	/*color: #F1F8FA; */
	text-align: center;
	letter-spacing:3px;
  line-height:95%;
  text-decoration: none;


}





.loader{
  width: 30px;
  height: 30px;
  border: 2px solid red;
  position: relative ;
  animation: first 2s infinite normal;
  border-radius: 3px;
  left: 50%;
  margin-top: 15px;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;   
} 

.loader2{
  width: 100px;
  height: 30px;
  border: 2px solid blue;
  position: relative ;
  animation: second 2s infinite normal;
  border-radius: 3px;
  left: 50%;
  margin-top: -17px;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}


@font-face
  {
  font-family: code;
  src: url('../css/CODE Bold.otf');
  }

  @font-face
  {
  font-family: code light;
  src: url('../css/CODE Light.otf');
  }

@keyframes first {
    0%{}
    50%{}
    90%{}
    100%{ left: 500px;}
}

@keyframes second{
  0%{}
  50%{}
  90%{}
  100%{left: 400px;}
}
    
@-webkit-keyframes first {
    0%{}
    50%{}
    90%{}
    100%{ -webkit-left: 500px;}
}

@-webkit-keyframes second {
    0%{}
    50%{}
    90%{}
    100%{-webkit-left: 400px;}
}

.be{background-image: url('../images/openingempty.png');   
}

.be:hover {
    -webkit-animation: playe 2s steps(49) normal forwards;
       -moz-animation: playe 2s steps(49) normal forwards;
        -ms-animation: playe 2s steps(49) normal forwards;
         -o-animation: playe 2s steps(49) normal forwards;
            animation: playe 2s steps(49) normal forwards;
   
}

@-webkit-keyframes playe { from { background-position:    0px; } to { background-position: -14000px; }}
   @-moz-keyframes playe { from { background-position:    0px; } to { background-position: -14000px; }}
    @-ms-keyframes playe { from { background-position:    0px; } to { background-position: -14000px; }}
     @-o-keyframes playe { from { background-position:    0px; } to { background-position: -14000px; }}
        @keyframes playe { from { background-position:    0px; } to { background-position: -14000px; }}





.b1{background-image: url('../images/opening1.png');   
}

.b1 div:hover {
  -webkit-animation: loading 1.5s  ease-in-out 3s normal forwards;
       -moz-animation: loading 1.5s  ease-in-out 3s normal forwards;
        -ms-animation: loading 1.5s  ease-in-out 3s normal forwards;
         -o-animation: loading 1.5s  ease-in-out 3s normal forwards;
            animation: loading 1.5s  ease-in-out 3s normal forwards;
   
}

.b2{background-image: url('../images/opening2.png'); 

}

.b2 div:hover {
  -webkit-animation: loading 1.5s  ease-in-out 3s normal forwards;
       -moz-animation: loading 1.5s  ease-in-out 3s normal forwards;
        -ms-animation: loading 1.5s  ease-in-out 3s normal forwards;
         -o-animation: loading 1.5s  ease-in-out 3s normal forwards;
            animation: loading 1.5s  ease-in-out 3s normal forwards;  
}



.b3{background-image: url('../images/opening3.png');  
  background-position: 0px 1px;
  background-repeat: no-repeat;  
}

.b3 div:hover {
  -webkit-animation: loading 1.5s  ease-in-out 3s normal forwards;
       -moz-animation: loading 1.5s  ease-in-out 3s normal forwards;
        -ms-animation: loading 1.5s  ease-in-out 3s normal forwards;
         -o-animation: loading 1.5s  ease-in-out 3s normal forwards;
            animation: loading 1.5s  ease-in-out 3s normal forwards;
   
}

.b4{background-image: url('../images/opening4.png');
  background-position: 0px 1px;
  background-repeat: no-repeat;    
}

.b4 div:hover {
  -webkit-animation: loading 1.5s  ease-in-out 3s normal forwards;
       -moz-animation: loading 1.5s  ease-in-out 3s normal forwards;
        -ms-animation: loading 1.5s  ease-in-out 3s normal forwards;
         -o-animation: loading 1.5s  ease-in-out 3s normal forwards;
            animation: loading 1.5s  ease-in-out 3s normal forwards;
   
}

.b5{background-image: url('../images/opening5.png');
     
}

.b5 div:hover {
  -webkit-animation: loading 1.5s  ease-in-out 3s normal forwards;
       -moz-animation: loading 1.5s  ease-in-out 3s normal forwards;
        -ms-animation: loading 1.5s  ease-in-out 3s normal forwards;
         -o-animation: loading 1.5s  ease-in-out 3s normal forwards;
            animation: loading 1.5s  ease-in-out 3s normal forwards;
   
}


.open:hover {
    
    
    -webkit-animation: play 3s steps(75) normal forwards;
       -moz-animation: play 3s steps(75) normal forwards;
        -ms-animation: play 3s steps(75) normal forwards;
         -o-animation: play 3s steps(75) normal forwards;
            animation: play 3s steps(75) normal forwards;
}

.open.forw {
    
    -webkit-animation: playshort 1s steps(25) alternate ;
       -moz-animation: playshort 1s steps(25) alternate ;
        -ms-animation: playshort 1s steps(25) alternate ;
         -o-animation: playshort 1s steps(25) alternate ;
            animation: playshort 1s steps(25) alternate ;
animation-iteration-count:2;
-webkit-animation-iteration-count:2;
-moz-animation-iteration-count:2;
-ms-animation-iteration-count:2;
-o-animation-iteration-count:2;
}

/*Box animation Play Normal*/
@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -21000px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -21000px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -21000px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -21000px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -21000px; }
}

/*Box animation Play Short*/ 
@-webkit-keyframes playshort {
   from { background-position:    0px; }
     to { background-position: -7000px; }
}

@-moz-keyframes playshort {
   from { background-position:    0px; }
     to { background-position: -7000px; }
}

@-ms-keyframes playshort {
   from { background-position:    0px; }
     to { background-position: -7000px; }
}

@-o-keyframes playshort {
   from { background-position:    0px; }
     to { background-position: -7000px; }
}

@keyframes playshort {
   from { background-position:    0px; }
     to { background-position: -7000px; }
}

/*Box animation Play Empty*/
@-webkit-keyframes playe { from { background-position:    0px; }  to { background-position: -13720px; }}
@-moz-keyframes playe { from { background-position:    0px; } to { background-position: -13720px; }}
@-ms-keyframes playe {from { background-position:    0px; }to { background-position: -13720px; }}
@-o-keyframes playe {from { background-position:    0px; }to { background-position: -13720px; }}
@keyframes playe {from { background-position:    0px; }to { background-position: -13720px; }}




@-ms-keyframes loading {
	to {text-shadow:
    0 0 2px rgba(214, 173, 137, 0.9),
    0 15px 7px rgba(0, 0, 0, 0.3),
    0 -2px 3px rgba(0, 0, 0, 0.1),   
    0 5px 5px rgba(0, 0, 0, 0.3),
    0 3px 4px rgba(22, 22, 22, 0.2),
    0 0 7px rgba(22, 22, 22, 0.45);
  }

}

@-moz-keyframes loading {
	to {text-shadow:
    0 0 2px rgba(214, 173, 137, 0.9),
    0 15px 7px rgba(0, 0, 0, 0.3),
    0 -2px 3px rgba(0, 0, 0, 0.1),   
    0 5px 5px rgba(0, 0, 0, 0.3),
    0 3px 4px rgba(22, 22, 22, 0.2),
    0 0 7px rgba(22, 22, 22, 0.45);}
}

@-webkit-keyframes loading {
	to {text-shadow:
    0 0 2px rgba(214, 173, 137, 0.9),
    0 15px 7px rgba(0, 0, 0, 0.3),
    0 -2px 3px rgba(0, 0, 0, 0.1),  
    0 5px 5px rgba(0, 0, 0, 0.3),
    0 3px 4px rgba(22, 22, 22, 0.2),
    0 0 7px rgba(22, 22, 22, 0.45);}
}

@keyframes loading {
	to {text-shadow:
    0 0 2px rgba(214, 173, 137, 0.9),
    0 15px 7px rgba(0, 0, 0, 0.3),
    0 -2px 3px rgba(0, 0, 0, 0.1),    
    0 5px 5px rgba(0, 0, 0, 0.3),
    0 3px 4px rgba(22, 22, 22, 0.2),
    0 0 7px rgba(22, 22, 22, 0.45);}
}


#progres {
  height: 100%;
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(41,42,45,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  rgba(41,42,45,1) 0%,rgba(0,0,0,1) 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  rgba(41,42,45,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
  background: radial-gradient(ellipse at center,  rgba(41,42,45,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
  color: #757575;
  font-family: Verdana,"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  text-align: center;
}

.wrapper {
  width: 350px;
  margin: 15% auto;
}

.wrapper .load-bar {
  width: 100%;
  height: 25px;
  border-radius: 30px;
  background: #dcdbd7;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8),
    inset 0 2px 3px rgba(0,0,0,0.2);
}


.wrapper .load-bar-inner {
  height: 99%;
  width: 0%;
  border-radius: inherit;
  position: relative;
  background: #D7B394;
  background: linear-gradient(#D7B394, #A78C74);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 5px rgba(0,0,0,0.3),
    0 4px 5px rgba(0,0,0,0.3);
  animation: loader 10s linear infinite;
}

.wrapper #counter {
  position: absolute;
  background: #eeeff3;
  background: linear-gradient(#eeeff3, #cbcbd3);
  padding: 5px 10px;
  border-radius: 0.4em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 4px 1px rgba(0,0,0,0.2),
    0 1px 3px 1px rgba(0,0,0,0.1);
  left: -25px;
  top: -50px;
  font-size: 12px;
  font-weight: bold;
  width: 44px;
  animation: counter 10s linear infinite;
}

.wrapper #counter:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #cbcbd3;
  transform: rotate(45deg);
  left: 50%;
  margin-left: -4px;
  bottom: -4px; 
  box-shadow: 
    3px 3px 4px rgba(0,0,0,0.2),
    1px 1px 1px 1px rgba(0,0,0,0.1);
  border-radius: 0 0 3px 0;
}

.wrapper h1 {
  font-size: 28px;
  padding: 20px 0 8px 0;
}

.wrapper p {
  font-size: 13px;
}

@keyframes loader {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes counter {
  from { left: -25px; }
  to { left: 323px; }
}




/* 0 0 2px rgba(204, 208, 212,0.9),


0 0 2px rgba(22, 22, 22,0.9),
      0 15px 25px rgba(0, 0, 0, 0.3),
      0 -2px 3px rgba(0, 0, 0, 0.1),
      0 -5px 10px rgba(22, 22, 22, 0.5),
      0 5px 10px rgba(0, 0, 0, 0.3),
      0 3px 4px rgba(22, 22, 22, 0.2),
      0 0 20px rgba(22, 22, 22, 0.45);


0 0 0px rgba(204, 208, 212,1),
    0 15px 7px rgba(0, 0, 0, 0.3),
    0 -2px 3px rgba(0, 0, 0, 0.1),
    0 -5px 5px rgba(255, 255, 255, 0.5),
    0 5px 5px rgba(0, 0, 0, 0.3),
    0 3px 4px rgba(255, 255, 255, 0.2);


 */

 .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
.white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }

/*CONTACT FORM*/
.contact{
  text-decoration: none;
  font-family: code;
  font-weight:bold;
  letter-spacing:4px;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
/* === Remove input autofocus webkit === */
*:focus {outline: none;}

 #con{
  overflow: hidden;
border: 1px solid black ;
border-radius: 2px;
   width: 30%;
   height: 0%;
   -moz-transition:all 1s ease;
-webkit-transition:all 1s ease;
        transition:all 1s ease;
     -o-transition:all 1s ease; 
    -ms-transition:all 1s ease;

}

#con:target{
   width:100%;
   height: 42%;
}

/* === List Styles === */
.contact_form ul {
    list-style-type:none;
  list-style-position:outside;
  margin:0px;
  padding:0px;

}
.contact_form li{
  padding-top:5px; 
  padding-left:5px;
  position:relative;
} 

/* === Form Elements === */
.contact_form label {
  width:150px;
  margin-top: 1px;
  display:inline-block;
  float:left;
  padding:3px;
  font-family: code;
  letter-spacing: 2px;
  
}
.contact_form input {font-family: code; letter-spacing: 2px;
  height:20px; 
  width:300px; 
  padding:5px 8px;
}
.contact_form textarea {padding:4px; width:400px;font-family: code;letter-spacing: 2px;}
.contact_form button {margin-left:156px;font-family: code;letter-spacing: 5px;}

  /* form element visual styles */
  .contact_form input, .contact_form textarea { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    padding-right:30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
  }
  .contact_form input:focus, .contact_form textarea:focus {
    background: #cccccc; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:70px;
  }


/* === Form hints === */
.form_hint {
  background: #d45252;
  border-radius: 3px 3px 3px 3px;
  color: white;
  margin-left:8px;
  padding: 1px 6px;
  z-index: 999; /* hints stay above all other elements */
  position: absolute; /* allows proper formatting if hint is two lines */
  display: none;
}
.form_hint::before {
  content: "\25C0";
  color:#d45252;
  position: absolute;
  top:1px;
  left:-6px;
}
.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}
  
/* === Button Style === */
button.submit {
  position:relative;
  left:420px;
  top:-54px;
  background-color: #68b12f;
  background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
  background: -webkit-linear-gradient(top, #68b12f, #50911e);
  background: -moz-linear-gradient(top, #68b12f, #50911e);
  background: -ms-linear-gradient(top, #68b12f, #50911e);
  background: -o-linear-gradient(top, #68b12f, #50911e);
  background: linear-gradient(top, #68b12f, #50911e);
  border: 1px solid #509111;
  border-bottom: 1px solid #5b992b;
  box-shadow: inset 0 1px 0 0 #9fd574;
  -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
  -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
  -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
  -o-box-shadow: 0 1px 0 0 #9fd574 inset;
  color: white;
  padding: 6px 20px;
  text-align: center;
  text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
  opacity:.85;
  cursor: pointer; 
}
button.submit:active {
  border: 1px solid #20911e;
  box-shadow: 0 0 10px 5px #356b0b inset; 
  -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
  -moz-box-shadow: 0 0 10px 5px #356b0b inset;
  -ms-box-shadow: 0 0 10px 5px #356b0b inset;
  -o-box-shadow: 0 0 10px 5px #356b0b inset;
  
}