/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
font-size: 62.5%;
}

#products {
	
width:100%;
min-height:100%;
overflow-x:hidden;
background-color: transparent;

}

.elevator { 
position:absolute;
font-size:30px;
color:#a20067;
margin-bottom:0px;
left:50%;
margin-left:-15px;
z-index:5;
width:30px;
height:30px;
text-align:center;
}


.cd-single-step img {
max-width: 100%;
}
#tourrefika img {
max-width: 66%;
}
#section1 {
background-image:url(../img/bg8.jpg);
background-repeat:no-repeat;
background-position:28% 50%;
background-size:cover;
z-index: 3;
height: 100vh;
width: 100vw;
margin:0 auto;
padding:0 auto;
}
#section2 {
background-image:url(../img/flower_bg.jpg);
background-repeat:no-repeat;
background-position:left bottom;
background-size:contain;
background-color:#000;
z-index: 4;
height: auto;
width: 100vw;
margin:0 auto;
padding-top:50px;
padding-bottom:150px;

}
#submenuproducts {
position:absolute;
top:15px;
left:25px;
}
#submenuproducts a{
font-family: 'GardenPro';
color: #f9eac0;
font-size: 28px;
text-decoration:none;

}
#submenuproducts a:hover{
font-family: 'GardenPro';
color: #f9eac0;
font-size: 28px;
text-decoration:none;

}
/* -------------------------------- 

xnugget info 

-------------------------------- */
.cd-nugget-info {

  width: 100%;
  max-width:300px;
  margin:0 auto;
  z-index: 1;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
}
#headline img{
width:95%;
height:auto;
margin-top:70px;
margin-left:-40px;
}
.cd-nugget-info .cd-btn {
 font-family: 'RistrettoProRegular';
 margin-top:220px;

  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: none;
  border-radius: 50em;
  background: #5e2062;
  padding: 1em 2em;
  color: #f9eac0;
  font-weight: bold;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.cd-nugget-info .cd-btn:active {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
.no-touch .cd-nugget-info .cd-btn:hover, .cd-nugget-info .cd-btn:focus {
  outline: none;
  background: #5e2062;
}


/* tablets */	
@media only screen 
and (min-device-width : 701px) 
and (max-device-width : 1100px)  {

}
/* tablets portrait */	
@media only screen 
and (min-width : 701px) 
and (max-width : 1100px) 
and (orientation : portrait) { 

}
/* tablets landscape */	
@media only screen 
and (min-width : 701px) 
and (max-width : 1100px) 
and (orientation : landscape) {

}

/* smartphones */
@media only screen 
and (min-width : 320px) 
and (max-width : 700px)  { 
#headline img{
width:60%;
height:auto;
margin-top:100px;

}
.cd-nugget-info .cd-btn {
 margin-top:150px;
 }
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 700px) 
and (orientation : portrait) { 
.cd-nugget-info .cd-btn {
 margin-top:150px;
 }
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 700px) 
and (orientation : landscape) { 

}
/* -------------------------------- 

Main Components 

-------------------------------- */

.cd-tour-wrapper {
  position:fixed;
  z-index: 2;
  height: 100%;
  width: 74%;
  left: 50%;
  top: 0%;
 
  
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.4s 0s, visibility 0s 0.4s;
  -moz-transition: opacity 0.4s 0s, visibility 0s 0.4s;
  transition: opacity 0.4s 0s, visibility 0s 0.4s;
}
.cd-tour-wrapper::before {
  /* never visible - this is used in jQuery to check the current MQ */
  display: none;
  content: 'mobile';
}
.cd-tour-wrapper.active {
  /* start tour */

  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.4s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.4s 0s, visibility 0s 0s;
  transition: opacity 0.4s 0s, visibility 0s 0s;
}
@media only screen and (min-width: 600px) {
  .cd-tour-wrapper {
    max-width: 400px;
    max-height: 400px;
  }
}
@media only screen and (min-width: 1100px) {
  .cd-tour-wrapper {
    /* reset style */
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    max-width: none;
    max-height: none;
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
	background-color:rgba(188,27,30,0.3)
  }
  .cd-tour-wrapper::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
  .cd-tour-wrapper.active {
    visibility: hidden;
  }
}

.cd-single-step {
  /* tour single step */
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  list-style-type:none;
  
  
  background-color: #f9eac0;
  border-top-left-radius:0px;
  border-top-right-radius:0px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0px);
  -moz-transform: translateZ(0px);
  -ms-transform: translateZ(0px);
  -o-transform: translateZ(0px);
  transform: translateZ(0px);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform 0.4s 0s, opacity 0s 0.4s;
  -moz-transition: -moz-transform 0.4s 0s, opacity 0s 0.4s;
  transition: transform 0.4s 0s, opacity 0s 0.4s;
}
.cd-single-step > span {
  /* dot indicator - visible on desktop version only */
  position: relative;
  z-index: 1;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: inherit;
  background: #f9eac0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
  /* replace text with background images */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  /* hide on mobile */
  display: none;
}
.cd-single-step::after {
  /* this is used to create the pulse animation */
  content: '';
   position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: inherit;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0%);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* hide on mobile */
  display: none;
}
.active .cd-single-step {
  /* tour started */
 
  -webkit-transform: scale(1) translateX(100%);
  -moz-transform: scale(1) translateX(100%);
  -ms-transform: scale(1) translateX(100%);
  -o-transform: scale(1) translateX(100%);
  transform: scale(1) translateX(100%);
  -webkit-transition: -webkit-transform 0.4s 0s, opacity 0.4s 0s;
  -moz-transition: -moz-transform 0.4s 0s, opacity 0.4s 0s;
  transition: transform 0.4s 0s, opacity 0.4s 0s;
}
.active .cd-single-step.move-left {
  -webkit-transform: scale(1) translateX(-100%);
  -moz-transform: scale(1) translateX(-100%);
  -ms-transform: scale(1) translateX(-100%);
  -o-transform: scale(1) translateX(-100%);
  transform: scale(1) translateX(-100%);
}
.active .cd-single-step.is-selected {
  /* visible step */
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.4s 0s;
  -moz-transition: -moz-transform 0.4s 0s;
  transition: transform 0.4s 0s;
}
@media only screen and (min-width: 1100px) {
  .cd-single-step {
    /* reset style */
	 background-color: #f9eac0;
    height: auto;
    width: auto;
    top: auto;
    left: auto;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    border-radius: 50%;
    visibility: hidden;
    opacity: 1;
    list-style-type:none;
    box-shadow: none;
    -webkit-transition: visibility 0s 0.4s;
    -moz-transition: visibility 0s 0.4s;
    transition: visibility 0s 0.4s;
  }
  .cd-single-step:nth-of-type(1) {
    /* set tour points positions */
    bottom: 250px;
    right: 410px;
  }
  .cd-single-step:nth-of-type(2) {
    bottom: 250px;
    right: 730px;
  }
  .cd-single-step:nth-of-type(3) {
    bottom: 200px;
    right: 1100px;
  }
  .cd-single-step > span, .cd-single-step::after {
	  
    display: block;
  }
  .active .cd-single-step, .active .cd-single-step.move-left {
    -webkit-transition: visibility 0s 0.4s;
    -moz-transition: visibility 0s 0.4s;
    transition: visibility 0s 0.4s;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  .cd-single-step.is-selected {
    visibility: visible;
    -webkit-transition: visibility 0s 0s;
    -moz-transition: visibility 0s 0s;
    transition: visibility 0s 0s;
  }
  .cd-single-step.is-selected > span {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  .cd-single-step.is-selected::after {
    -webkit-animation: cd-pulse 2s infinite;
    -moz-animation: cd-pulse 2s infinite;
    animation: cd-pulse 2s infinite;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
  }
  .cd-single-step.is-selected .cd-more-info {
    opacity: 1;
  }
}

@-webkit-keyframes cd-pulse {
  0% {
    box-shadow: 0 0 0 0 #f9eac0;
  }
  100% {
    box-shadow: 0 0 0 20px rgba(94, 32, 98, 0);
  }
}
@-moz-keyframes cd-pulse {
  0% {
    box-shadow: 0 0 0 0 #f9eac0;
  }
  100% {
    box-shadow: 0 0 0 20px rgba(94, 32, 98, 0);
  }
}
@keyframes cd-pulse {
  0% {
    box-shadow: 0 0 0 0 #f9eac0;
  }
  100% {
    box-shadow: 0 0 0 20px rgba(94, 32, 98, 0);
  }
}
.cd-single-step .cd-more-info {
  z-index: 1;
  padding:10px 15px 15px 15px;
  width: 100%;
}
.cd-single-step .cd-more-info::after {
  clear: both;
  content: "";
  display: table;
}
.cd-single-step .cd-more-info::before {
  /* triangle next to the step description - hidden on mobile */
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border: 6px solid transparent;
  display: none;
}
.cd-single-step .cd-more-info h2 {
	color: #a20067;
	 font-family: 'GardenPro';
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: .2em;
}
.cd-single-step .cd-more-info p {
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 0.6em;
  font-family: 'RistrettoProRegular';
  color: #5e2062;
}
.cd-single-step .cd-more-info img {
  margin-bottom: 0.6em;
}
.cd-single-step .cd-more-info .cd-close {
  /* 'X' icon to skip the tour */
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  /* replace text with background images */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
.cd-single-step .cd-more-info .cd-close::after, .cd-single-step .cd-more-info .cd-close:before {
  /* these are the 2 lines of the 'X' icon */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  width: 16px;
  border-radius: 4em;
  background-color: #a20067;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-single-step .cd-more-info .cd-close::after {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.cd-single-step .cd-more-info .cd-close::before {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.cd-single-step .cd-more-info span {
  /* step count e.g. 1 of 3*/
  float: left;
  padding-top: .1em;
  font-size: 1.4rem;
  font-family: 'RistrettoProRegular';
  color:#5e2062;
}
@media only screen and (min-width: 1100px) {
  .cd-single-step .cd-more-info {
    position: absolute;
    width: 340px;
    border-radius: 4px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    background-color: #f9eac0;
    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
    border-color: #f9eac0;
  }
  .cd-single-step .cd-more-info p {
    margin-bottom: 0.5em;
  }
  .cd-single-step .cd-more-info img {
	   /* image on desktop hidden */
    display: block;
  }
  .cd-single-step img {
max-width: 66%;
}
#tourrefika img {
max-width: 50%;
}
  .cd-single-step .cd-more-info::before {
    /* triangle next to the step description - hidden on mobile */
    display: block;
	color: #f9eac0;
  }
  .cd-single-step .cd-more-info.left {
    right: calc(100% + 15px);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .cd-single-step .cd-more-info.right {
    left: calc(100% + 15px);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .cd-single-step .cd-more-info.left, .cd-single-step .cd-more-info.right {
    top: 50%;
  }
  .cd-single-step .cd-more-info.top {
    bottom: calc(100% + 15px);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .cd-single-step .cd-more-info.bottom {
    top: calc(100% + 15px);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .cd-single-step .cd-more-info.top, .cd-single-step .cd-more-info.bottom {
    left: 50%;
  }
  .cd-single-step .cd-more-info.left::before, .cd-single-step .cd-more-info.right::before {
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .cd-single-step .cd-more-info.top::before, .cd-single-step .cd-more-info.bottom::before {
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .cd-single-step .cd-more-info.left::before {
    border-left-color: inherit;
    left: 100%;
  }
  .cd-single-step .cd-more-info.right::before {
    border-right-color: inherit;
    right: 100%;
  }
  .cd-single-step .cd-more-info.top::before {
    border-top-color: inherit;
    top: 100%;
  }
  .cd-single-step .cd-more-info.bottom::before {
    border-bottom-color: inherit;
    bottom: 100%;
  }
  .is-selected .cd-single-step .cd-more-info {
    opacity: 1;
  }
}

.cd-tour-nav {
	font-family: 'RistrettoProRegular';
	
  float: right;
}
.cd-tour-nav::after {
  clear: both;
  content: "";
  display: table;
}
.cd-tour-nav li {
  display: inline-block;
  float: left;
}
.cd-tour-nav li:first-of-type {
  margin-right: 1.5em;
}
.cd-tour-nav a {
	font-size:55px;
  font-size: 2rem;
  color: #5e2062;
  text-decoration:none;
  
}
.cd-tour-nav a:hover {
	font-size:55px;
  font-size: 2rem;
  color: #a20067;
  text-decoration:none;
  
}
.cd-tour-nav a.inactive {
  /* item not clickable */
  color: #f9eac0;
  cursor: not-allowed;
}


  /* Mouse scroll animation */

@-webkit-keyframes cd-fade-in {
  0%, 100% {
    opacity: 0;
  }
  14%, 40% {
    opacity: 1;
  }
}
@-moz-keyframes cd-fade-in {
  0%, 100% {
    opacity: 0;
  }
  14%, 40% {
    opacity: 1;
  }
}
@keyframes cd-fade-in {
  0%, 100% {
    opacity: 0;
  }
  14%, 40% {
    opacity: 1;
  }
}
@-webkit-keyframes scroll-ani {
   0% {
    opacity: 1;
    top: 20%;
  }
  15% {
    opacity: 1;
    top: 70%;
  }
  50% {
    opacity: 0;
    top: 70%;
  }
  100% {
    opacity: 0;
    top: 20%;
  }
}
@-moz-keyframes scroll-ani {
  0% {
    opacity: 1;
    top: 20%;
  }
  15% {
    opacity: 1;
    top: 70%;
  }
  50% {
    opacity: 0;
    top: 70%;
  }
  100% {
    opacity: 0;
    top: 20%;
  }
}
@keyframes scroll-ani {
  0% {
    opacity: 1;
    top: 20%;
  }
  15% {
    opacity: 1;
    top: 70%;
  }
  50% {
    opacity: 0;
    top: 70%;
  }
  100% {
    opacity: 0;
    top: 20%;
  }
}
#ms
{
  position:absolute;
  bottom:0px;
  left:50%;
  margin-left:-11px;
}
.mouse-scroll {
  display: inline-block;
  
  overflow: hidden;
}
.mouse-scroll .mouse {
  position: relative;
  display: block;
  width: 22px;
  height: 36px;
  margin: 0 auto 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #f9eac0;
  border-radius: 12px;
}
.mouse-scroll .mouse .mouse-movement {
  position: absolute;
  display: block;
  top: 20%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: #f9eac0;
  border-radius: 50%;
  -webkit-animation: scroll-ani 3s linear infinite;
  -moz-animation: scroll-ani 3s linear infinite;
  animation: scroll-ani 3s linear infinite;
}