html, body, img, h1, h6, p, div, a {margin:0; padding: 0; font-weight: normal; }
body {background: #fceeef; background-image: url(images/subtle/cream-pixels.png);}
a {text-decoration: none;}

#fabrics-list li {display:inline-grid; list-style: none; }
ul#fabrics-list {padding-left: 0;}
#fabrics-intro {font-family: 'Special Elite', cursive; font-size: 16px; line-height: 30px;}

#masodik-bekezdes, #harmadik-bekezdes, #negyedik-bekezdes, .bekezdes { position: relative; font-size: 18px; font-family: 'Special Elite', cursive; color:#0b1c7e; width: 70%; margin-left: 15%; background: white; padding: 10px;}

#little-footer {padding-top:30px; padding-bottom:30px; width: 100%; background: #2f8fad; font-family: 'Special Elite', cursive; display: block; overflow: hidden; border-top:3px solid #367c93;}
#upper-footer-links, #upper-footer-links a, #categories-links, #categories-links a, #deeno-link, #deeno-link a, #copyright, #copyright a, #footer-email, #footer-email a {color: #bfedfb; text-align: center; font-size: 16px; margin-top: 26px;}

#fb {position: absolute; right: 70px; top:30px; width: 30px; height: auto;}
#insta {position: absolute; right: 20px; top:30px; width: 30px; height: auto;}
#email-at-top {position: absolute; right: 130px; top: 38px; font-family: 'Special Elite', cursive; font-size: 16px;}
#email-at-top a {background: #fbe26a; padding: 5px;}

.nemuti {display: none;}
#mobile-section-2 {font-family: 'PT Sans', sans-serif;}
.page-title {text-align: center; background: #f8e181; margin-top: -22px; width: 30%; margin-left: 35%;}
.page-title-fabrics {text-align: center; background: #f8e181; margin-top: -52px; width: 46%; margin-left: 27%; margin-bottom: 70px; font-family: 'Special Elite', cursive;}
#docontact, #docontact2 {cursor: pointer; text-decoration: underline;}
em, i ,h1, h2, h3 {font-size:18px; font-style: normal; display: inline;}
#chatbox {cursor: pointer;z-index: 300;position: fixed; width: 70px; height: 120px; background: #4bb6d8; bottom: 10%; right: 0; border: 4px #fbe269 solid; border-right: 0px;
   border-radius: 10px 0px 0px 10px;
   -webkit-box-shadow: -2px 3px 5px 0px rgba(82,82,82,0.66);
-moz-box-shadow: -2px 3px 5px 0px rgba(82,82,82,0.66);
box-shadow: -2px 3px 5px 0px rgba(82,82,82,0.66);}
   
   
#chat-form-box {z-index: 300;position: fixed; width: 20%; height: 400px; background: #4bb6d8; bottom: 0%; right: -20%; border: 4px #fbe269 solid; border-right: 0px;
   border-radius: 10px 0px 0px 10px;
   -webkit-box-shadow: 2px -2px 5px 0px rgba(82,82,82,0.66);
-moz-box-shadow: 2px -2px 5px 0px rgba(82,82,82,0.66);
box-shadow: 2px -2px 5px 0px rgba(82,82,82,0.66);
}   
   
   
#message-icon {width: 80%; position: absolute; top: 30px; left:8%; }
#bluedot {display: none;}
#section1, #section1-shop {background-image: url(images/subtle/11.png); width: 100%; border-bottom: 4px solid #fce269; height:390px;}
#section1-shop {height:315px;}
#ribbon {width: 70%; height: auto; margin-left: 15%; margin-top: 30px; margin-bottom: 20px; position: relative; z-index: 100;}
#ribbon2 {width: 50%; height: auto; margin-left: 25%; margin-top: 0px; margin-bottom: 20px; position: relative; z-index: 100;}
#rose {width: 20%; height: auto; margin-left: 40%; margin-bottom: -40px; z-index: 100; position: relative;}
#rose-mob {width: 50%; height: auto; margin-left: 25%; margin-bottom: -20%; z-index: 100; position: relative;}
#desk-wrap {xbackground-image: url(images/subtle/11.png); width: 100%;}
#floral-upper {width: 100%; height: auto;}

#gomb1 {display: none;position: absolute; right: 20px; bottom:0px; width: 50px; height: auto;}
#gomb2 {position: absolute; right: 10%; top:0px; width: 50px; height: auto; z-index: 100; transform: rotate(20deg);}
#gomb3 {position: absolute; right: 30%; top:-30px; width: 50px; height: auto; z-index: 100; transform: rotate(20deg);}
#gomb4 {display: none;position: absolute; right: 80%; top:200px; width: 50px; height: auto; z-index: 100; transform: rotate(30deg);}
#gomb5 {display: none;position: absolute; right: 74%; top:70px; width: 50px; height: auto; z-index: 100; transform: rotate(40deg);}

#gomb22 {display: none;position: absolute; right: 90%; top:250px; width: 40px; height: auto; z-index: 100; transform: rotate(-30deg);}
#gomb33 {position: absolute; right: 44%; top:10px; width: 40px; height: auto; z-index: 100; transform: rotate(40deg);}
#gomb44 {xposition: absolute; margin-left: 60%; margin-top:-10px; width: 40px; height: auto; z-index: 100; transform: rotate(30deg);}
#gomb55 {xposition: absolute; margin-left: 80%; margin-top:-10px; width: 40px; height: auto; z-index: 100; transform: rotate(-10deg);}

#fele {width: 50%; height: 1500px; position: absolute; right: 0; top: -40px; background-image: url(images/subtle/11.png); border-left: 4px solid #fce269; border-top: 4px solid #fce269;}

body {}
#website-wrap {}
#desk-wrap, #girls-wrap, #section7, #paper-wrap {width: 100%; margin: 0 auto; position: relative;}






#section7 {background: #5cc5e7;}

#desk {width: 100%; height: auto; xborder-bottom: 4px solid #9d0202;}
#menu-wrap {z-index: 110; position: relative; ;  width: 100%; height: 30px; text-align: right; line-height: 33px;}
.menu-item { height: 100%; display: inline-block; margin: 0;font-family: 'Special Elite', cursive;  xfont-family: 'Dosis', sans-serif; font-weight: 500; text-align: right; xfont-size: 26px; font-size: 20px; color: white; margin-top: 0; padding-top: 0;}
.menu-item a, .menu-item a:hover {color: white;}
.menu-item:hover {border-bottom:4px solid #fce269;}

#menu1, #menu5, #menu5x, #menu1x {margin: 0; padding: 0 10px; }
#menu2 {margin: 0; padding: 0 10px;}
#menu3 {margin: 0; padding: 0 10px;}
#menu4 {margin-right:7%; padding: 0 10px;}
#menu1, #menu2, #menu3, #menu4, #menu5, #menu5x, #menu1x {padding-bottom: 10px; background: rgba(199, 49, 127, 0.9);}
#xxxtitle-wrap {display: none;position: absolute; top: 25%; left: 14%; width: 28%;  font-family: 'Caveat', cursive; font-size: 185%; text-align: center; color: #040ca7;}
#text-wrap {  position: absolute; top:14.5%; left: 26.5%; width: 40%; height: 38%;   position: absolute; left: 26.5%; width: 40%; height: 50%; font-family: 'Special Elite', cursive; font-size: 18px; color: #0b1c7e;  line-height: 39px;}
#text-cover-1, #text-cover-2, #text-cover-3, #text-cover-4 {background: #f3ebe0;  position: absolute; top: 0; left: 0; width: 100%; height: 100%;}





.text-wrap-hor { width: 86%; margin-left: 7%; }
.chart {font-family: 'Special Elite', cursive; font-size: 30px; color: #0b1c7e; text-align: center; display: block; line-height: 30px; padding: 7px 0 2px 0;}
.ref {font-family: 'Special Elite', cursive; padding-top: 5px; padding-bottom: 20px; }
.chart-fabric {font-family: 'Special Elite', cursive; font-size: 30px; color: #0b1c7e; text-align: center; display: block; line-height: 45px; padding: 7px 10px 2px 10px;}
.felso {vertical-align: super; font-size: 11px;}
.girl-photo {width: 80%; height: auto;
-webkit-box-shadow: 3px 6px 18px -3px rgba(71,71,71,0.74);
-moz-box-shadow: 3px 6px 18px -3px rgba(71,71,71,0.74);
box-shadow: 3px 6px 18px -3px rgba(71,71,71,0.74);

border: 10px white solid;
margin-top: 110px;
}
.girl-wrap {width: 33%; text-align: center; position: relative;}
.see-more-go-shop-wrap3, .see-more-go-shop-wrap2, .see-more-go-shop-wrap1 {position: absolute; left: 0px; bottom: 0px; width: 100%; height: 40px; opacity: 1; display: none; line-height: 40px;}
.see-more-go-shop3, .see-more-go-shop2, .see-more-go-shop1 {position: absolute; right: 0px; bottom: 0px; width: 70%; height: 100%; background: white; opacity: 0.9; line-height: 40px; font-family: 'Dosis', sans-serif;}

.xxxnametag {position: absolute; top: 15%; left: 30%; font-family: 'Dosis', sans-serif; font-size: 140%; color: #040ca7; opacity: 1;}
.postit {position: absolute; z-index: 200; }
#postit1 {top:-40px; left: 100px;   z-index: 33; width: 180px;}
#postit2 {width: 180px; left: 270px; top:-40px;  z-index: 33; transform: rotate(4deg);}
#xxxpostit3 {display: none;width: 30%; left: 90%; top:-28%; height: 14%; z-index: 3;}
.postit-label {font-size: 26px; z-index: 200; font-family: 'Caveat', cursive; color: black;}
.postit-label a {color: black;}
#postit-label1 {position: absolute; top:15px; left: 130px;}
#postit-label2 {position: absolute; top:15px; left: 300px;}
#xxxpostit-label3 {display: none;position: absolute; top:0%; left: 0%;}


#ollo {position: absolute; left: 10.5%; top: 400px; z-index: 200;

transform: rotate(15deg) ;
-webkit-transform: rotate(15deg) ;
-moz-transform: rotate(15deg) ;
-o-transform: rotate(15deg) ;
-ms-transform: rotate(15deg) ;

}



#xxxpaper-wrap {position: relative; background: white; margin-top: 30px; display: none;}
#paper {margin-top:110px; width: 60%; margin-left: 20%;
-swebkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-smoz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
sbox-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

position: relative;
}
#paper-text {position: absolute; height: 50%; width: 37%; left: 29%; top: 25%; font-family: 'Caveat', cursive; font-size: 150%; color: #040ca7; opacity: 0.88;
transform: rotate(2deg) scale(1) skew(1deg) translate(0px);
-webkit-transform: rotate(2deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(2deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(2deg) scale(1) skew(1deg) translate(0px);
-ms-transform: rotate(2deg) scale(1) skew(1deg) translate(0px);
}


.disappear {
  animation: pulse 2s 1;
  animation-fill-mode: forwards;
  
}

@keyframes pulse {
  0% {
    opacity: 1;
    
  }
  100% {
    opacity: 0;
  }
}


.appear {
  animation: kulse 2s 1;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}
@keyframes kulse {
  0% {
    opacity: 0;   
  }
  100% {
    opacity: 1;
  }
}


.ki {
  animation: kijon 2s 1;
  animation-fill-mode: forwards;
  xanimation-delay: 2s;
}
@keyframes kijon {
  0% {
    right: 0;   
  }
  100% {
    right: 20%;
  }
}



.ki-chat {
  animation: kijon-chat 2s 1;
  animation-fill-mode: forwards;
  xanimation-delay: 2s;
}
@keyframes kijon-chat {
  0% {
    right: -20%;   
  }
  100% {
    right: 0%;
  }
}



.be-chat {
  animation: bemegy-chat 2s 1;
  animation-fill-mode: forwards;
  
}
@keyframes bemegy-chat {
  0% {
    right: 0%;   
  }
  100% {
    right: -20%;
  }
}




.be {
  animation: bemegy 2s 1;
  animation-fill-mode: forwards;
  
}
@keyframes bemegy {
  0% {
    right: 20%;   
  }
  100% {
    right: 0%;
  }
}




/* FORM FORM */
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 2px solid white; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 4px; /* Bottom margin */
    resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
   background-color: #b4e7f7;
   color: #525252;
}

input[type=text]:focus {background-color: #dbf1f8;}
input[type=text]:hover {background-color: #dbf1f8;}

textarea[type=text]:focus {background-color: #dbf1f8;}
textarea[type=text]:hover {background-color: #dbf1f8;}



/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 30px 50px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */



/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: #7eb686;
    padding: 20px;
}


/* FORM FORM */



#ajax-messages {float: right; height: 50px; line-height: 50px; color: white; font-family: 'Dosis', sans-serif; font-size: 20px;}
#ajax-messages-chat { height: 20px; line-height: 20px; color: white; font-family: 'Dosis', sans-serif; font-size: 14px;}
#lastn {margin-left: 10%;}
.asap {font-family: 'Caveat', cursive; font-size: 40px; font-weight: 400;  color: white; padding-bottom: 0px; text-align: center; padding-top: 40px;}
#contactm {font-family: 'Dosis', sans-serif; font-size: 140%;  color: white; text-transform: uppercase;}
h2 {padding: 0; padding-bottom: 20px; margin: 0;}

#mymessage {clear: both; display: block;}
label {color: white; font-family: 'Dosis', sans-serif; font-size: 18px;}
#submit-button {float: left; padding: 10px 33px 10px 30px; font-size: 20px; font-family: 'Dosis', sans-serif; color: white; background: rgba(199, 49, 127, 0.9); border: 0px; margin-bottom: 20px;}

#submit-button-chat {float: left; padding: 10px 33px 10px 30px; font-size: 20px; font-family: 'Dosis', sans-serif; color: white; background: rgba(199, 49, 127, 0.9); border: 0px; margin-bottom: 10px; margin-top: 6px;}
#quick-message {font-family: 'Dosis', sans-serif; text-align: center; color: white; margin-top: 5px; font-size: 14px; margin-bottom: 2px;}

#contact-form {padding-top: 60px; width: 50%; margin-left: 25%;}
#ribi {position: absolute; width: 70%; height: auto; left: 15%; bottom: -52px; z-index: 10;
}

#section7 {background: #5cc5e7; padding-bottom: 80px;}

input[type=submit]:focus {background-color: #da4593; cursor: pointer;}
input[type=submit]:hover {background-color: white; cursor: pointer;}

#submit-button:focus {background-color: #da4593; cursor: pointer;}
#submit-button:hover {background-color: #da4593; cursor: pointer;}

#submit-button-chat:focus {background-color: #da4593; cursor: pointer;}
#submit-button-chat:hover {background-color: #da4593; cursor: pointer;}




/* contact CHAT  */
#contact-form-chat {padding-top: 0px; width: 90%; margin-left: 5%;}






@keyframes slidy {
0% { left: 0%; }
10% { left: 0%; }

20% { left: -100%; }
30% { left: -100%; }

40% { left: -200%; }
50% { left: -200%; }

60% { left: -300%; }
70% { left: -300%; }

80% { left: -400%; }
90% { left: -400%; }

100% { left: -500%; }



}
* {
  box-sizing: border-box;
}
figure { 
  margin: 0;
  
}
div#captioned-gallery { 
  width: 100%;  margin-top:0px;  overflow: hidden;
}
div#gallery-outwrap {width: 74%; overflow: hidden; margin-left:13%; margin-top: -250px; border: 4px solid #fce269; border-top: 0px; z-index: 5; position: relative;}
figure.slider { 
  position: relative; width: 2000%;
  font-size: 0; animation: 60s slidy infinite; 
}
figure.slider figure { 
  width: 5%; height: auto;
  display: inline-block;  position: inherit; 
}
figure.slider img { width: 100%; height: auto; }
figure.slider figure figcaption { 
  position: absolute; bottom: 0;
  /*background: rgba(0,0,0,0.4);*/
  color: #fff; width: 100%;
  font-size: 2rem; padding: .6rem; 
}











.animakio {
  -webkit-animation:lapfordulo 4s linear infinite;
    -moz-animation:lapfordulo 4s linear infinite;
    animation:lapfordulo 4s linear;
    animation-fill-mode: forwards;
    
}

.animakio-back {
  -webkit-animation:lapfordulo-back 4s linear infinite;
    -moz-animation:lapfordulo-back 4s linear infinite;
    animation:lapfordulo-back 4s linear;
    animation-fill-mode: forwards;
    
}



#table-cm, #table-cm2, #table-inch {width:100%; margin-bottom: 25px;}
#table-cm {margin-top:90px;}
#table-inch {margin-top:50px;}

.row-chart { height: 3.3em; font-family: 'PT Sans', sans-serif; font-size: 16px;}
.col1 {background: rgba(81, 182, 214, 0.6); padding-left:5px;}
.col2 {background: rgba(252, 226, 105, 0.8); padding-left:5px;}


#mobile-menu {height: 50px; width: 100%; background: #b63273;}
#mob-header-img {width: 100%; height: auto; margin-top: 0px; display: block;}
/*#mobile-section-2 {background-image: url(images/subtle/22.png);}*/

@media only screen and (min-device-width: 768px) {
.on-mobile {display:none;}	
	
}

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

#email-at-top {display: none;}
#rose-mob {display: none;}
#masodik-bekezdes, #harmadik-bekezdes, #negyedik-bekezdes, .bekezdes {margin-bottom: 20px;text-indent: 7px; font-family: 'PT Sans', sans-serif; background: none; width: 96%; padding: 0; margin-left: 2%; line-height: 34px;}  
#text-wrap {line-height: :34px; font-family: 'PT Sans', sans-serif; position: relative !important; height: auto !important; left: 0; top:0; width: 96%; margin-left: 2%;}
#about-text-1 {font-family: 'PT Sans', sans-serif; position: relative !important;}
#size-chart-title {width: 100%;  display: block; text-align: center; font-family: 'PT Sans', sans-serif; font-size: 160%; font-size: 26px; margin:40px 0 20px 0;}  
.cell-width-2 {width: 15.6%;}
.cell-width-1 {width: 22%;} 
#chat-form-box, #chatbox {display: none;}
  #section7 {margin-top: 45px; border-top: 2px #fae169 solid;}
body {background: #fceeef; background-image: url(images/subtle/22.png);}
.on-laptop {display: none;}
#ribbon-mob {width:100%; margin-left:0%; position: absolute; top: 10px;}
#section1 {border-bottom: 0px; height: auto;}
.col-md-6.col-md-offset-3 {border-top: 0px; margin-top:0px;}
#ribbon {margin-top: 0px;}
#mobile-menu {}
#mob-menu-left, #mob-menu-left-mob {float: left; background: #4bb6d8; width: 50%; height: 50px; cursor: pointer;}
#mob-menu-left2 {width: 20%; float: left; background: #4bb6d8;  height: 50px; cursor: pointer; border-bottom: 2px #fae169 solid;}
#mob-menu-right {float: right; width: 50%; height: 50px; cursor: pointer;}
#mob-menu-right2 {float: right; width: 80%; height: 50px; cursor: pointer;}
#shop-button-mob {text-align: center; line-height: 50px; color: white; font-family: 'PT Sans', sans-serif; font-size: 26px;}
.menu-indi {height: 3px; width: 15%; background: white; margin-left: 27px;}
.menu-indii {height: 3px; width: 25%; background: white; margin-left: 27px;}
#menu-indi-1 {margin-top:17px;}
#menu-indi-2 {margin-top:4px;}
#menu-indi-3 {margin-top:4px;}

.menu-indi-1a {margin-top:17px;}
.menu-indi-2a {margin-top:4px;}
.menu-indi-3a {margin-top:4px;}

#items-holder, #items-holder-mob {background: #4bb6d8; border-top: 3px white solid; display: none;}
.item {color: white; display: block; padding: 7px 0 7px 27px;}
.item a, #shop-button-mob a {color: white; display: block;}
.item:hover {background: #fae16a;}
#items-list-parent {margin-top: 0; padding-left:0px; font-family: 'Dosis', sans-serif; font-size: 20px;}
.welcome {text-align: center; font-size: 180%; color: #51191c; width: 90%; margin: 30px 5%; font-family: 'PT Sans', sans-serif; display: block;}
.main-text {font-family: 'PT Sans', sans-serif;  font-size: 120%; color: #51191c; width: 90%; margin-left: 5%; line-height: 155%; text-align: justify; margin-bottom: 8px;}
#contact-form {width: 90%; margin-left: 5%;}
#buying-advice-button, #buying-advice-button2, #buying-advice-button3 {border-bottom: 2px #fae169 solid; height: 50px;line-height: 50px; font-family: 'PT Sans', sans-serif;  width: 100%; color: white; font-size: 20px; background: #4bb6d8; margin-top: 2px; cursor: pointer;}
#table-cm {margin-bottom: 40px;}
#second-page, #third-page, #fourth-page {}
.row-chart {font-family: 'PT Sans', sans-serif; font-size: 17px;}
}


@media only screen and (min-device-width: 768px) and (max-device-width: 867px) {
  
#paper {width:80%; margin-left: 10%;}
#text-wrap {width: 60%; left: 19.5%;}
#about-text-1, #about-text-2, #about-text-3, #about-text-4 {font-size: 15px; line-height: 35px;}
#ollo {left:2.5%;}
h1, h2, h3, em, i, p {font-size: 15px; font-weight: 400;}
#gomb55, #gomb44, #gomb33 {width: 30px;}
#gomb2, #gomb3 {width: 40px;}
#gomb33 {right:21%; top: 60px;}
#rose {width: 26%; margin-left: 37%;}
#ribbon {margin-top: 15px; margin-bottom: 35px;}
.postit-label {font-size: 22px; text-align: center; line-height: 33px;}
#chat-form-box, #chatbox {display: none;}
div#gallery-outwrap {width: 84%; margin-left: 8%;}
#section1 {height: 290px;}
.page-title {width: 50%; margin-left: 25%;}
h1.chart {font-size: 25px;}
#table-cm, #table-inch {}
.text-wrap-hor {width: 98%; margin-left: 1%;}
.row-chart {font-size: 12px;}
.felso {font-size:9px;}
.eurs {font-size: 16px !important;}
#contact-form {width: 70%; margin-left: 15%;}
 
}

@media only screen and (min-device-width: 769px) and (max-device-width: 1025px) {
 
 #paper {width:70% !important; margin-left:15% !important; }
	#text-wrap {width:50% !important; left:22.5%; font-size: 17px;}
  h1, h2, h3, em, i {font-size: 17px; font-weight: 400;}
  #gomb55, #gomb44, #gomb33 {width: 35px;}
  #gomb2, #gomb3 {width: 45px;}
  
  }