:root {
	--pinkL: #fef0eb;
	--pink: #F2CBBD;
	--red: #59030A;
	--red2: #59030A;
	--choco: #260104;
	--plum: #BF8578;
	--white: #F2F0F0;
	--blue:#2c3e4f; 
	
	--grey: #7f888f;
	
	--btnRed:#e1192c;
    --btnRedDark: #c11929;
}

.lang, .lang_menu {
    position: absolute;
    top: 0;
    font-size: 20px;
    cursor: pointer;

}

.lang_menu {
    top: 30px;
    left: 5px;
	background-color: #fff;
    width: 120px;
    padding: 5px 5px 10px;
    border: 1px solid #eee;
    line-height: 1.5;
	z-index: 100;
}
.lang_menu.hid {padding: 0; display:none}
.lang_menu a{display: block}

#icons .lang_menu  a:hover{color: var(--blue); text-decoration:underline}
.errored {
    background-color: var(--pink);
}
.container2 {width: 100%}
.middle { margin: 0 auto;}

.logoLink {width: 100px; display:block; margin: 0 auto}


#bt2 
{border: 2px solid var(--white); background-color:var(--red);
    background-size: 200%;
    transition: .5s ease-out;
}
#bt2.step2 {
    background-position: left;
}

#btSend,  #btDone{height:34px}
#btSend.hid, #btLoading.hid, #btDone.hid{height:0px}

.hid, .loading.hid  {height: 0; overflow: hidden; display: block}

.loading {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 20px;
}
.loading div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: var(--white);
  animation: loading 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.loading div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.loading div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.loading div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
@keyframes loading {
  0% {
    top: -6px;
    height: 64px;
	}
	50%, 100% {
		top: 4px;
		height: 15px;
	}
}

.checkmark {
    display:block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
	margin:0 auto;
	    top: 10px;
    position: relative;
}

.checkmark_stem {
    position: absolute;
    width:3px;
    height:19px;
    background-color:#fff;
    left:11px;
    top:-5px;
}

.checkmark_kick {
    position: absolute;
    width:13px;
    height:3px;
    background-color:#fff;
    left:1px;
    top:12px;
}



#err {
	color: var(--red);
	padding: 15px 35px;
	width: 90%;
	max-width: calc(400px - 70px);
	margin: 10px auto;
}
#err.hid {
	padding: 0;
	display: none;
}
	
.circle {
  width: 50px;
  height: 50px;
  border: 3px solid var(--red);
  border-radius: 50%;
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7
}

.circle.hid {opacity:0}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid var(--red);
  opacity: 0.7
}


#portfolioArrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
  transition: transform 0.3s ease;
  float: right;
      position: relative;
    top: 10px;
}

#portfolioArrow.active {
  transform: rotate(360deg);
  border-top-color: white;
  border-bottom: 6px solid white;
  border-top: none;
}

#portfolioMenu{height: 370px; transition: height 0.5s ease-out; overflow: hidden;}
#portfolioMenu.hid {height: 0; overflow: hidden; }


h1, h2, h3 {
    color: var(--red);
    text-align: center;
    width: 100%;
}

#icons a {color: var(--plum)}
#icons div:hover a{color: var(--red)}

#icons img {cursor:pointer}
#icons img{opacity: 0.5;}
#icons img:hover{opacity: 1}

#icons {display: flex;  
	flex-wrap: wrap;
	justify-content: space-between}



#pTxt1{    max-width: 280px; padding: 5px;
    margin: 50px auto 0px;}

.closeLink {margin: 10px auto;
width: fit-content; cursor:pointer}

#closeMenu1,  #closeMenu2 {color:var(--white); cursor:pointer}
#closeMenu1 {    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
	}
#closeMenu2{margin: 50px auto 10px auto;
    width: fit-content;}
	
.menu__item {
	cursor: pointer;
  display: block;
  padding: 25px 0 25px 10px;
  border-bottom:1px solid var(--white);
  color: var(--white);
  text-decoration: none;
  -webkit-transition-duration: .25s;
       -o-transition-duration: .25s;
          transition-duration: .25s;
	text-transform: capitalize;
	text-transform: uppercase;
}

.menu__item:hover {
  background-color: var(--white);
  color: var(--red);
}
.menu__item:active {
  background-color: var(--white);
  color: var(--red);
}
.menu__item:focus {
  background-color: var(--white);
  color: var(--red);
}
.menu__item.active{
  background-color: var(--white);
  color: var(--red);
  cursor: auto;
}




.red{color:var(--red)}

#logoTop {width: 100px;
    margin: 0 auto;
    top: -10px;
    position: relative;}
#logo2 {margin: 50px auto;
    width: 180px;}
#logoTop img, #logo2 img{disply:block; width:100%}

html, body {margin: 0 ; padding:0}
.courgette {
  font-family: "Courgette", cursive;
  font-weight: 400;
  font-style: normal;
  overflow:hidden
}

.icon2{    display: block;
    margin: 0px auto; position:relative; top: -20px}
#icons {  position: absolute; top: 25px}

#signature {display: block;
    float: right;
    font-size: 38px;}

.cal-sans {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.raleway {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.great-vibes  {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-style: normal;
}
.mochiy-pop-one {
  font-family: "Mochiy Pop One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.rocknroll {
  font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.parent {
  display: flex;
  justify-content: center; /* horizontally centers */
  align-items: center;     /* vertically centers */
  _height: 100vh;           /* full viewport height */
}
.flex {
	display: flex; /* or inline-flex */
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-between
}
.imgAbs { position: absolute; bottom: 70px}
body {background-color: #fff}

#menuBtn {    top: 35px;
    position: relative;
    left: 20px; cursor:pointer;
	color: var(--red);
	width: fit-content;
	}

#menu {  height: fit-content; background-color: var(--red2);position: absolute;
    top: 75px;
    width: 40%;
	transition: height 0.5s ease-in-out;
	z-index:100; overflow:hidden}
	
#menu.extended{  height: 1170px; transition: height 0.5s ease-in-out;}

#menu ul {list-style: none; padding: 0; margin: 50px auto;}
#menu ul ul{list-style: none; padding: 0; margin: 0px auto;}
#menu a {text-decoration:none; color:var(--white)}

#menu.hideMenu, #menu.extended.hideMenu {height: 0px; }

#topNav {
	color:var(--red);
	background-color:#fff; 
  font-size: 18px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  height: 75px;
  -webkit-transition: height 0.5s;
  -o-transition: height 0.5s;
  transition: height 0.5s;
  top: 0;
  overflow: visible;
  z-index: 100;
  width: 100%;
  max-width: 1700px;
  line-height:1;
  margin: 0 auto;
  
}


.flex-container{display: flex;
	 flex-wrap: wrap;
	 flex-direction: row-reverse}
	 
.flex2 {display: flex;
	 flex-wrap: wrap;}
.footer {background-color: var(--choco); color:#fff; min-height: 150px;     padding: 10px 0 50px 0;}
.footer a {
    color: var(--white);
    width: 50px;
    display: block;
}

.flex2 {display: flex; justify-content: space-around;}

#copy {margin: 10px auto; width: fit-content;
    display: block;}

#block1 {border-top: 2px solid var(--red);}
#block2 { margin: 40px auto 30px}
#block2 h2{color:var(--red); width: 100%; text-align:center; font-family: "Raleway", sans-serif;
    font-weight: 600;}
#block2 .col { padding: 0 0 85px; position: relative}
#block2 .col p { padding: 0 20px 0 30px}
#block1 img {width:80%;}
	
#block1 .col2 {background-color: #000; position:relative}

#block2 picture {box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; width:80%; display:block; ;  border: 3px solid var(--white);
	    margin: 20px auto 0; line-height: 0}
#block2 picture img{width:100%; }
#block2 img {
	
	display:block;
    margin: 0 auto;
    display: block;}
#block1 p {font-size: 34px;
    width: 80%;
    margin: auto;
    display: block;
    height: fit-content;
    position: relative;
    text-align: center;}
	


.btnW{color:var(--white); cursor:pointer; border: 1px solid var(--white); border-radius: 5px; margin : 40px auto 0; width: 180px; 
padding: 10px 20px; text-align:center;
	}


.btn { color:var(--red); cursor:pointer; border: 1px solid var(--red); border-radius: 5px; margin : 40px auto 0; width: 100px; 
padding: 10px 20px; text-align:center;
	bottom: 0;
    right: calc(50% - 71px);
    position: absolute;}

.btn:hover {background-color: var(--red); color:#fff}

#LangIconTxt {margin-right: 10px; width: fit-content; max-width: 65px; }
	
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
	
	#icons {width: 110px}
	#icons svg {height: 20px; width: 20px}
	#icons {top: 30px;}
	
	#menu {top: 75px; width: 100%;}
	#menu ul {width: 90%; }
	#menu #portfolioMenu ul {width: 95%; }
	#icons { right: 10px;}
	#icons img{height: 25px; margin: 0px 5px;}
	#signature {margin: 10px 0;}
	
	.middle{ width: 95%}
	.flex div {display: block; margin: 10px auto; width:90%}
	.footer .flex div { width:30%}
	#footer flex2 div{width: 80%}
	.footer .flex2 .col{width: 80%}
	#menuBook {display:block}
	
	#LangIconTxt {display:none}
}

@media screen and (min-width: 1200px) {
	
	#icons {width: 250px}
	#icons svg {height: 30px; width: 30px}
	#icons {top: 20px;}
	
	
	#menu {top: 75px; width: 40%;}
	#menu ul  {width: 80%; }
	#menu #portfolioMenu ul {width: 90%; }
	#icons { right: 50px;}
	#icons img{height: 30px; margin: 0px 15px}
	#signature {margin: 50px 0 0}
	.middle{ width: 80%}
	.flex div {display: block; margin: 10px auto; width:30%}
	
	#footer flex2 div{width: 30%}
	.footer .flex2 .col{width: 30%}
	#menuBook {display:inline}
	#LangIconTxt {display: inline-block;}
}




.sp-modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content , .modal-thankyou{
  position: relative;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 800px;
  background-color: #fefefe;
  top: 100px;
}

.modal-thankyou{    padding: 50px 0 100px;}

.modal-content.hid, .modal-thankyou.hid { margin: 0;
  padding: 0; height: 0; display:none
}
.modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.modal-title {
  width: 100%;
  text-align: center;
  color: var(--red);
  font-size: 24px;
  font-style: var(--p-font-style);
  font-family: var(--p-font-family);
  font-weight: bold;
  line-height: var(--p-line-height);
  text-transform: var(--p-text-transform);
}

.modal-close {
  font-size: 24px;
  cursor: pointer;
  color: var(--red);
}

.closeLink{color:var(--grey)}

.modal-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-y: auto;
  -ms-flex-line-pack: center;
      align-content: center;
  background: lightgray;
  margin-bottom: 40px;
}

.modal-footer {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px;
}

.form-button {
  margin-top: 20px;
  max-width: 300px;
}

.modal-close-button {
  background-color: var(--red);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px auto 30px;
}

.modal-close-button:hover {
  background-color:  var(--red);
}

.modal__form {
	    color: var(--red);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  justify-items: center;
  margin-top: 100px;
}

.modal__form input {
  outline: 0;
  width: 80%;
}

.modal__form textarea {
  width: 70%;
  outline: 0;
}

.form__holder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 20px;
  width: 70%;
}


.spark{

	position: absolute;
      width: 15px;
      height: 15px;
      background: white;
      border-radius: 50%;
      opacity: 0;
	  border: 1px solid var(--red);
	  
	 /* Diamond with inward-bent edges using clip-path */
	  clip-path: polygon(
		50% 0%,
		65% 20%,
		100% 50%,
		65% 80%,
		50% 100%,
		35% 80%,
		0% 50%,
		35% 20%
	  );}
	  
	  
    .sparkle101 {
      top: 10%;
      left: 55%;
      transform: scale(0);
      animation: sparkle 2s infinite ease-in-out;

    }
	
	.sparkle102 {

      top: 20%;
      left: 10%;
      transform: scale(0);
      animation: sparkle 3s infinite ease-in-out;
    }
	
	.sparkle103 {

      top: 40%;
      left: 40%;
      transform: scale(0);
      animation: sparkle 4s infinite ease-in-out;
    }
	
	.sparkle104 {

      top: 50%;
      left: 20%;
      transform: scale(0);
      animation: sparkle 5s infinite ease-in-out;
    }
	
	.sparkle105 {

      top: 60%;
      left: 80%;
      transform: scale(0);
      animation: sparkle 6s infinite ease-in-out;
    }
	
    @keyframes sparkle {
      0%, 80%, 100% {
        opacity: 0;
        transform: scale(0);
      }
      85% {
        opacity: 1;
        transform: scale(1.5);
      }
      87% {
        opacity: 0;
        transform: scale(0);
      }
    }
	
	 @keyframes sparkle2 {
      0%, 80%, 100% {
        opacity: 0;
        transform: scale(1);
      }
	  10% {
        opacity: 1;
        transform: scale(1);
      }
      85% {
        opacity: 1;
        transform: scale(1.5);
      }
      95% {
        opacity: 0;
        transform: scale(1);
      }
    }
	
	@keyframes sparkle3 {
      0%, 80%, 100% {
        opacity: 0;
        transform: scale(1);
      }
	  10% {
        opacity: 1;
        transform: scale(1);
      }
      85% {
        opacity: 1;
        transform: scale(1.2);
      }
      95% {
        opacity: 0;
        transform: scale(1);
      }
    }