@CHARSET "UTF-8";
body {
    background-color: #fff; 
}

#kkgridcontainertop {
  position: absolute;
  top: 0;
  left: 0;
  /* background-color: #262626; */
  width: 100%;
  height: auto;
  padding: 20px 0 0 0;
  text-align: center;
  font-family: 'Prosto One', cursive;  
  color: #f7e1a9;
  font-size: 30px;
  line-height: 30px;
  z-index: 1000;
}
#kkgridcontainertop span {
  font-family: 'Prosto One', cursive;  
  color: #f7e1a9;
  font-size: 22px;
  line-height: 38px;
}
/* --------------------------------------------- elemek altalanos ---------------------------------------- */
.kkitemcss {
  overflow: hidden;
  border: 1px solid #907847;

  -webkit-box-shadow: 7px 7px 5px 0px rgba(125,125,125,0.75);
  -moz-box-shadow: 7px 7px 5px 0px rgba(125,125,125,0.75);
  box-shadow: 7px 7px 5px 0px rgba(125,125,125,0.75);
}
.kkitemcssszoveg {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #262626;
  width: 250px;
  height: 20px;             /* a fenti ket height kulonbsege 240 - 180 = 60 */
  overflow: hidden;
  font-family: 'Prosto One', cursive;  
  color: #d9c39d;
  font-size: 16px;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 1000;
}
.submit  {
	background-color: #262626;
	border: none;
	font-family: 'Prosto One', cursive;
    font-size: 16px;
    cursor: pointer;
}
.kkitemcssszoveg2 {
  position: absolute;
  bottom: 35px;
  right: 0;
  background-color: #262626;
  width: 250px;
  height: 20px;             /* a fenti ket height kulonbsege 240 - 180 = 60 */
  overflow: hidden;
  font-family: 'Prosto One', cursive;  
  color: #d9c39d;
  font-size: 16px;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 1000;
}
.kkitemcssszoveg1 {
  position: absolute;
  bottom: 70px;
  right: 0;
  background-color: #262626;
  width: 250px;
  height: 20px;             /* a fenti ket height kulonbsege 240 - 180 = 60 */
  overflow: hidden;
  font-family: 'Prosto One', cursive;  
  color: #d9c39d;
  font-size: 16px;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 1000;
}
.kkitemcssszovegbelso, .kkitemcssszovegbelso input  {
  display: inline-block;
  width: 250px;
  text-align: left;
}       
.pirostxt  {
	color: #f00;
}
.feherback  {
	background-color: #fff;
}
/* --------------------------------------------- elemek egyedi id ---------------------------------------- */
.item0 {
  position: fixed;
  top: 0;
  left: 0;
  width: 48%;                  
  height: 95%;                
  margin: 15px 22px 15px 20px;    /* a margin-left - itt 40px ami a kepek kozti tavolsag */
  overflow: hidden;
}
.item1 {
  position: fixed;
  top: 0;
  left: 50%;
  background: url("../image/hatter-minta.gif") top center; 
  width: 48%;                  
  height: 47%;                
  margin: 15px 0px 0 3px;    /* a margin-left - itt 40px ami a kepek kozti tavolsag */
  overflow: hidden;
}
.item2 {
  position: fixed;
  top: 50%;
  left: 50%;
  background: url("../image/terkepback.jpg") top center;    /* ezt az ablakszerkezetiro.php-ben felulirjuk az item2-nel az epitesz sajat terkep-kepe */
  background-size: cover;
  width: 48%;                  
  height: 45%;                
  margin: 15px 0px 15px 3px;    /* a margin-left - itt 40px ami a kepek kozti tavolsag */
  overflow: hidden;
}
#item1belso {
  padding: 0 1vw;
}

#item0bottombluritem0 {          /* ennek a 60px magas boxnak a szerepe, hogy elmossa a szoveg veget */
  position: absolute;
  bottom: 0;            /* a bottom vonal alatt, hogy a felso arnyek OK legyen */
  right: 0;
  width: 100%;
  height: 0px;             /* a fenti ket height kulonbsege 240 - 180 = 60 */
  
  /*  box-shadow generator https://www.cssmatic.com/box-shadow                          */
  -webkit-box-shadow: 0px      0px     60px        40px        rgba(255,250,238,0.78);
  -moz-box-shadow:    0px      0px     60px        40px        rgba(255,250,238,0.78);
  box-shadow:         0px      0px     60px        40px        rgba(255,250,238,0.78);
  /*                  horiz.l vert.l blur-radius spread-radius shadow-color opacity      */
}
#item0bottombluritem1 {          /* ennek a 60px magas boxnak a szerepe, hogy elmossa a szoveg veget */
  position: absolute;
  bottom: -80px;            /* a bottom vonal alatt, hogy a felso arnyek OK legyen */
  right: 0;
  width: 100%;
  height: 60px;             /* a fenti ket height kulonbsege 240 - 180 = 60 */
  
  /*  box-shadow generator https://www.cssmatic.com/box-shadow                          */
  -webkit-box-shadow: -21px    -40px   30px        20px        rgba(6,6,6,0.78);
  -moz-box-shadow:    -21px    -40px   30px        20px        rgba(6,6,6,0.78);
  box-shadow:         -21px    -40px   30px        20px        rgba(6,6,6,0.78);
  /*                  horiz.l vert.l blur-radius spread-radius shadow-color opacity      */
}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1300px) {
.item0 {
  position: fixed;
  top: 0;
  left: 0;
  width: 47%;                  
  height: 96%;                
  margin: 15px 20px 15px 20px;    /* a margin-left - itt 40px ami a kepek kozti tavolsag */
  overflow: hidden;
}
.kkitemcssszoveg {
  width: 250px;
  height: 20px;
}
}
/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1000px) {
.item0 {
  position: relative;
  top: 0;
  left: 0;
  width: 96%;                  
  height: 500px;                
  margin: 5px 10px 15px 5px;   
  overflow: hidden;
}
.item1 {
  position: relative;
  top: 0;
  left: 0;
  background: url("../image/hatter-minta.gif") top center; 
  width: 96%;                  
  height: 500px;                        
  margin: 5px 0px 0 5px;   
  overflow: hidden;
}
.item2 {
  position: relative;
  top: 0;
  left: 0;
  background: url("../image/terkepback.jpg") top center; 
  background-size: cover;
  width: 96%;                  
  height: 400px;                              
  margin: 5px 0px 15px 10px;    
  overflow: hidden;
}
#kkgridcontainertop {
  font-size: 20px;
  line-height: 20px;
}
.kkitemcssszoveg {
  width: 250px;
  height: 20px;
}
.kkitemcssszovegbelso, .kkitemcssszovegbelso input {
  display: inline-block;
  width: 90% !important;
  text-align: left;
  font-size: 12px;
}       
}