body {
/*   background-image: url('/images/wcrystal-honlap-elokeszites.jpg');*/
   background-color: #eeeeee;
   background-position: top center;
   background-repeat: no-repeat;
}


#mainbox {
  margin: auto;
  max-width: 1056px;
  min-width: 600px;
  height: auto;
  position: relative;
  top: -8px;
  left: -8px;
}

#fejlec {
  width: 102%;
  height: 50px;
  background-color: #091E5E;
}

#fejlecbal {
  width: 1000px;
  height: 50px;
  background: -moz-linear-gradient(left,  rgba(9,30,94,1) 80%, rgba(9,30,94,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(9,30,94,1) 80%,rgba(9,30,94,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(9,30,94,1) 80%,rgba(9,30,94,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#091e5e', endColorstr='#00091e5e',GradientType=1 ); /* IE6-9 */
  position: absolute;
  margin-left: 1056px;
}

#fejlecjobb {
  width: 1000px;
  height: 50px;
  background: -moz-linear-gradient(left,  rgba(9,30,94,0) 0%, rgba(9,30,94,1) 20%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(9,30,94,0) 0%,rgba(9,30,94,1) 20%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(9,30,94,0) 0%,rgba(9,30,94,1) 20%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00091e5e', endColorstr='#091e5e',GradientType=1 ); /* IE6-9 */
  position: absolute;
  margin-left: -1000px;
}

#logo {
  max-width: 21%;
  top: 14px;
  position: absolute;
  left: 8px;
  min-width: 169px;
    }

.szoveg {
  font-family: sans-serif;
  font-size: 18px;
  font-style: normal;
  line-height: 26.4px;
  font-weight: 600;
}

ul#felsorolas {
  text-align: initial;
  text-transform: lowercase;
  font-size: large;
  display: inline-block;
}

.fejlec_vonal {
  font-size: 18px;
  float: right;
  position: relative;
  right: 139px;
  top: 11px;
  color: #00ccff;
  z-index: 1;
}

.fejlec_belepes {
  font-size: 18px;
  float: right;
  position: relative;
  right: 218px;
  top: 11px;
  color: white;
  z-index: 1;
}


.fejlec_belepes:hover {
  color: #00ccff;
  transition: color 0.1s ease-in;
 }

.fejlec_regisztracio {
  font-size: 18px;
  float: right;
  position: relative;
  right: 26px;
  top: 11px;
  color: white;
  z-index: 1;
}

.fejlec_regisztracio:hover {
  color: #00ccff;
  transition: color 0.1s ease-in;
 }

.fejlecalatticsik {
  width: auto;
  height: 23px;
/*  background-color: #fdfdfd;*/
}

.bal {
  width: 1000px;
  margin-left: -1000px;
  position: absolute;
  top: 50px;
}

.jobb {
  width: 1000px;
  margin-left: 1056px;
  position: absolute;
  top: 50px;
}

#fejlecalatt {
  width: 7%;
  position: relative;
  z-index: 3;
  top: 4px;
  left: 1.8%;
   }

#welcomebox {
  width: 102%;
  height: 176px;
  background-color: #091E5E;
}

.welcome1 {
  font-size: 49px;
  position: absolute;
  top: 109px;
  color: white;
  text-shadow: 1px 1px #091E5E;
}

.welcome2 {
  font-size: 29px;
  position: absolute;
  top: 155px;
  color: white;
  text-shadow: 1px 1px #091E5E;
    }

.welcome3 {
  font-size: 21px;
  position: absolute;
  top: 184px;
  color: white;
  text-shadow: 1px 1px #091E5E;
    }
    
#logonagy {
  top: 73px;
  position: absolute;
  left: 665px;
  max-height: 176px;
  opacity: 0.5;
        }

#textbox {
  width: auto;
  min-height: 581px;
  padding-left: 18%;
  padding-right: 18%;
  padding-top: 45px;
  padding-bottom: 30px;
 /* background-color: aquamarine;*/
    }
.kozepen {
 font-size: 20px;
 color: #253463;
 text-align: justify;
 font-weight: inherit;
}

.valasz {
  text-align: -webkit-center;
}

#bannerbox {
  width: 11.5%;
/*  background-color: #FFEB3B;*/
  height: auto;
  position: absolute;
  top: 255px;  
  float: right;
  right: 0px;
}

.bannerimg {
  width: 100%;
  height: auto;
}

#bannertext {
  position: absolute;
  left: 0;
  width: 38%;
  align-items: center;
  height: 33%;
  top: 0;
  margin-left: 32%;
}

.bannerimg:hover {
  width: 101%;
  height: auto;
  filter: saturate(1.2);
}


#logokicsi {
  max-height: 50px;
  top: 0px;
  position: absolute;
  left: 233px;
}

.minta {
  position: absolute;
  height: 176px;
  z-index: 0;
  left: 61px;
    }

.welcomeboxback {
  background-image: url(/images/welcomebox.png);
  height: 176px;
  width: 1057px;
  background-position: 59px;
                }

.stationery {
  background-image: url(/images/welcomebox_iroszer.png);
                }

.costumes {
  background-image: url(/images/welcomebox_jelmez.png);
                }

.contact {
  background-image: url(/images/welcomebox_kapcsolat.png);
                }
.kid {
  background-image: url(/images/welcomebox_jatek.png);
                }


.kifutobal {
  height: 176px;
  position: absolute;
  background-color: red;
  width: 1000px;
  left: -1000px;
  background: -moz-linear-gradient(left,  rgba(9,30,94,0) 0%, rgba(9,30,94,1) 20%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(9,30,94,0) 0%,rgba(9,30,94,1) 20%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(9,30,94,0) 0%,rgba(9,30,94,1) 20%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00091e5e', endColorstr='#091e5e',GradientType=1 ); /* IE6-9 */
}

.kifutojobb {
  width: 1000px;
  position: absolute;
  height: 176px;
  left: 1056px;
  z-index: -1;
  background: -moz-linear-gradient(left,  rgba(9,30,94,1) 80%, rgba(9,30,94,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(9,30,94,1) 80%,rgba(9,30,94,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(9,30,94,1) 80%,rgba(9,30,94,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#091e5e', endColorstr='#00091e5e',GradientType=1 ); /* IE6-9 */
}

#lablecbox {
  width: 102%;
  background-color: #091E5E;
  height: 200px;
}

.lablecminta {
  height: 200px;
  left: -422px;
}
.lablecen {
  height: 200px;
}

#lablecszoveg {
  position: relative;
  z-index: 1;
  width: 22%;
/*  background-color: red;*/
  height: auto;
  margin: auto;
  top: 58px;
}

#lableclogo {
  width: 100%;
}

.lablectxt {
  font-size: 106%;
  color: white;
}

#menubox {
/*  background-color: red;*/
  width: 340px;
  height: 36px;
  position: relative;
  z-index: 2;
  float: right;
  right: 67px;
  top: -17px;
    }
.menutext a {
  color: white;
  font-weight: 600;
}

ul#menuid {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
                
li {
    float: left;
   }
                        
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 4px 16px;
    text-decoration: none;
    background-color: #ff6666;
    border: 1px solid white;
    border-left-width: 1px;
    border-color: white;
    border-right-width: 1px;
    border-bottom-width: 1px;
    }
                                
li a:hover {
    background-color: #ffffcc;
    color: #ff6666;
    transition: background-color 0.1s ease-in;
    }

td, th {
  color: #253463;
}

td#check {
  width: 232px;
  font-size: 13px;
}

input#checklittlebox {
  width: 10%;
}

textarea {
  width: 100%;
}

input#submitbutton {
  height: 46px;
  width: 135px;
    }

input {
  height: 30px;
  width: 100%;
      }
  
#boritek {
  width: 453px;
  height: 46px;
  position: absolute;
  top: 85px;
  right: -388px;
  z-index: 2;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+84,ffffff+100&1+0,1+84,0+100 */
  background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 84%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 84%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 84%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}


#boriteksh {
  width: 449px;
  height: 2px;
  position: relative;
  z-index: 1;
  float: right;
  right: 2px;
  top: 16px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#099de4+0,099de4+60&1+0,1+60,0+100 */
  background: -moz-linear-gradient(left,  rgba(9,157,228,1) 0%, rgba(9,157,228,1) 60%, rgba(9,157,228,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(9,157,228,1) 0%,rgba(9,157,228,1) 60%,rgba(9,157,228,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(9,157,228,1) 0%,rgba(9,157,228,1) 60%,rgba(9,157,228,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#099de4', endColorstr='#00099de4',GradientType=1 ); /* IE6-9 */
}

#boritek:hover {
  height: 48px;
  top: 83px;
  padding-left: 2px;
  }

#boritek:hover > #boriteksh {
    display:none;
    }

    
#pozicio {
  width: 453px;
  height: 46px;
  position: absolute;
  top: 139px;
  right: -388px;
  z-index: 2;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+84,ffffff+100&1+0,1+84,0+100 */
  background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 84%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 84%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 84%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}


#poziciosh {
  width: 449px;
  height: 2px;
  position: relative;
  z-index: 1;
  float: right;
  right: 2px;
  top: 16px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#099de4+0,099de4+60&1+0,1+60,0+100 */
  background: -moz-linear-gradient(left,  rgba(9,157,228,1) 0%, rgba(9,157,228,1) 60%, rgba(9,157,228,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(9,157,228,1) 0%,rgba(9,157,228,1) 60%,rgba(9,157,228,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(9,157,228,1) 0%,rgba(9,157,228,1) 60%,rgba(9,157,228,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#099de4', endColorstr='#00099de4',GradientType=1 ); /* IE6-9 */
}


#pozicio:hover {
  height: 49px;
  top: 139px;
  padding-left: 2px;
}

#pozicio:hover > #poziciosh {
    display:none;
    }


.kisikonok {
  height: 30px;
  top: 8px;
  position: relative;
  left: 10px;
        }
        
#logobox {
  width: 12%;
  background-color: white;
  min-height: 677px;
  position: absolute;
  z-index: 2;
  top: 50px;
  padding-top: 38px;
  left: 0px;
  }

.logobox {
  width: 12%;
  background-color: #3BD7FD;
  min-height: 677px;
  position: absolute;
  z-index: 2;
  top: 50px;
  padding-top: 38px;
  left: 0px;
  }

.logoboxend {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: -100px;
}

.blueboxend {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#88cdec+0,88cdec+100&1+0,0+100 */
  background: -moz-linear-gradient(top,  rgba(136,205,236,1) 0%, rgba(136,205,236,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(136,205,236,1) 0%,rgba(136,205,236,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(136,205,236,1) 0%,rgba(136,205,236,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88cdec', endColorstr='#0088cdec',GradientType=0 ); /* IE6-9 */
  }

.bluebox {
  width: 28px;
  background-color: #88CDEC;
  left: 32px;
}

#logoboxend {
  width: 100%;
  height: 100px;
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
  position: absolute;
  bottom: -100px;
}

.kislogo {
  width: 47%;
  margin-bottom: 0px;
  padding-right: 5px;
  padding-left: 5px;
  transition: width 0.2s ease-out;
  }

.kislogo:hover {
  width: 70%;
  transition: width 0.2s ease-in;
  }

.szoveglogo {
  width: 20%;
  padding-right: 4%;
}
.manuflogos {
  width: 117px;
  margin-bottom: 0px;
  padding-right: 5px;
  padding-left: 5px;
  border-color: #eeeeee;
  border-width: 2px;
  border-style: solid;
  border-radius: 15px;
  transition: border-color 0.3s ease-out;
  }

.manuflogos:hover {
  border-color: #bbbbbb;
  border-width: 2px;
  border-style: solid;
  filter: saturate(1.2);
  transition: border-color 0.3s ease-in;
}

div.nologo a {
  font-weight: 900;
  color: black;
  margin-top: 20px;
  margin-bottom: 20px;
  text-decoration: none;
}

div#logominibox {
  padding-top: 20px;
  padding-bottom: 20px;
}

#headdesign1 {
  position: absolute;
  z-index: -1;
  width: 1105px;
  top: 0px;
  left: -476px;
            }


#headdesign2 {
  width: 620px;
  height: 26px;
  position: absolute;
  z-index: -2;
  top: 49px;
  left: 82px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1bd2ff+0,1bd2ff+100,1bd2ff+100&0+0,1+50,0+100 */
  background: -moz-linear-gradient(left,  rgba(27,210,255,0) 0%, rgba(27,210,255,1) 50%, rgba(27,210,255,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(27,210,255,0) 0%,rgba(27,210,255,1) 50%,rgba(27,210,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(27,210,255,0) 0%,rgba(27,210,255,1) 50%,rgba(27,210,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001bd2ff', endColorstr='#001bd2ff',GradientType=1 ); /* IE6-9 */
        }

#headdesign3 {
  width: 620px;
  height: 26px;
  position: absolute;
  z-index: -2;
  top: 245px;
  left: 127px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1bd2ff+0,1bd2ff+100,1bd2ff+100&0+0,1+50,0+100 */
  background: -moz-linear-gradient(left,  rgba(27,210,255,0) 0%, rgba(27,210,255,1) 50%, rgba(27,210,255,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(27,210,255,0) 0%,rgba(27,210,255,1) 50%,rgba(27,210,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(27,210,255,0) 0%,rgba(27,210,255,1) 50%,rgba(27,210,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001bd2ff', endColorstr='#001bd2ff',GradientType=1 ); /* IE6-9 */
        }

#headdesign4 {
  position: absolute;
  height: 50px;
  left: 200px;
  top: 0px;
    }

button#visszagomb {
  width: 120px;
  height: 40px;
}

@media only screen and (max-width: 940px) {

.welcome1 {
  font-size: 40px;
          }

.welcome2 {
  font-size: 24px;
          }                

.welcome3 {
  font-size: 17px;
          }                    

.lablecen {
    display: none;
    width: 0px;
    }

#fejlecbal {
    display: none;
    width: 0px;
}
#fejlecjobb {
    display: none;
    width: 0px;
}
.kifutobal {
  display: none;
  width: 0px;
}
.kifutojobb {
  display: none;
  width: 0px;
}

#boritek {
  width: 90px;
  right: -20px;
  background-color: white;
}

#boriteksh {
  width: 90px;
  right: -3px;
            }
#pozicio {
  width: 90px;
  right: -20px;
  background-color: white;
}
#poziciosh {
  width: 90px;
  right: -3px;
}                                            

.welcomeboxback {
    width: 100%;
                }
}

@media only screen and (max-width: 840px) {
body {
/*   background-color: #FF0000;*/
     }
#logokicsi {
  left: 170px;
}
.welcome1 {
  font-size: 32px;
}
.welcome2 {
  font-size: 21px;
}                              
.welcome3 {
  font-size: 14px;
          }
#logo {
  top: 17px;
  }
#lablecszoveg {
  top: 32px;
  }
                            
}

@media only screen and (max-width: 760px) {
body {
/*   background-color: #FF0000;*/
     }

#logokicsi {
  left: 170px;
}

.welcome1 {
  font-size: 30px;
}
.welcome2 {
  font-size: 20px;
  font-size: 23px;
  right: 104px;
}                              
.welcome3 {
  font-size: 14px;
          }
#logo {
  top: 17px;
  }
#lablecszoveg {
  top: 32px;
  }
.fejlecalatt {
  font-size: 13px;
  left: 1px;                    
}

}