@import url("https://fonts.googleapis.com/css2?family=Great+Vibes");
/* FONTS, Font COLORS, LINKS  ========================================*/

#contact-menu-link{
  border-bottom: 3px solid #d5b1f2;
}
/* Links ----------------------------------------------------*/

#social-links {
  display: block;
  text-align: center;
  margin-bottom: 0.3em;
}

#top-btn {
  display: none;
}

/* FORM styles =================================================*/
#noscript{
  font-size: 1.2em;
  color: #ea78bb;
}
#book-form{transition: all 0.3s;}
/* Style inputs with type="text", select elements and textareas */
#form-title-div {
  /*position: relative;*/
}
#form-title-div h3 {
  float:left;
  text-align: left;
  margin-left: 0.5em;
  margin-top: 0.2em;
  animation: book 1s linear ;
  animation-delay: 1.5s;
  animation-iteration-count: 2;
}
#clef-img{float:right; margin-right: 10px;}
#form-title-div:after{
  content:"";
  height:0;
  display:block;
  clear:both;
}
/* Animation -------------------- */
@keyframes book {
  0% {z-index: 1;}
  40% {z-index: 1;}
  60% {z-index: -1;}
  80% {z-index: 1;}
  100% {z-index: 1;}
}
#clef-img{
  height: 35px;
}
/*
#smile {
  position: absolute; top:0px; right: 3px;
  !*overflow: hidden;*!
  font-size: 1.2em;
  animation: smile 5s linear;
  animation-delay: 0s;
  !*margin-left: 0.5em;*!
}
*/

/*
@keyframes smile {
  0% {
    z-index: -1;
    font-size: 1em;
  }
  50% {
    z-index: -1;
    font-size: 1em;
  }
  55% {
    z-index: 1;
    font-size: 1em;
  }
  85% {
    z-index: 1;
    font-size: 1.6em;
  }
  100% {
    z-index: 1;
    font-size: 1.2em;
  }
}
*/
.form span {
  font-size: 0.7em;
  color: #ea78bb;
  margin-left: 0.5em;
}

input, textarea {
  width: 100%;
  /* Full width */
  padding: 12px;
  /* Some padding */
  border: 1px solid #ccc;
  /* 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: 16px;
  /* Bottom margin */
  resize: vertical;
}

input:focus, textarea:focus {
  border: 1px solid #a58ddb;
  box-shadow: 0px 0px 2px 0 #a58ddb;
}

.border2 {
  border-width: 1px;
  border-color: #ea78bb;
  box-shadow: 0px 0px 2px 0 #ea78bb;
}
/* Style the submit button with a specific background color etc */
/*#notrobot {
  position: relative;
  bottom: 2.5em;
  left: 3em;
}*/
/* Checkbox -------------- */
#chkbx-submit-contnr{
  margin-top: 3px;
  width: 97%;
  display:flex;
  justify-content: space-between ;
}
.label {
  display:inline-flex;
  align-items: center;
  cursor:pointer;
  width: 50%;
  position:relative;
  margin-right: 7px;
  padding:8px;
  /*border: 2px solid #38a813;*/
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#checkbox{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  width: 2.2em;
  height: 2.2em;
  border: 3px solid #751e9b;
  border-radius: 2px;
  display:flex;
  justify-content: center ;
  align-items: center;
  flex-shrink: 0;
  margin-right: 3px;
  transition: background 0.3s, border-color 0.3s ;
}
.checkmark::after{
  /*display:none;*/
  content: "\2713";
  font-size: 1.6em;
  color: #ffffff ;
  font-weight: bold;
}
#checkbox:checked+.checkmark{
  background: green;
  border-color: green;
}

#norobot-text{
  font-size: 0.9em;
  color: #362f34;
  margin-right: 12px;
  transition: all 0.5s;
}
#robotimg{
  position: relative;
  width:32px; height: 32px;
  transition: all 0.3s;
  /*animation: robotimg 1s linear forwards ;*/
}

@keyframes robotimg {
  0%{transform: rotate(0deg); height:35px; width:35px;}
  50% {transform: rotate(90deg); height:18px; width:18px;}
  100%{transform: rotate(180deg); height:0; width:0;}
}
#smile2{
  font-size: 0;
  margin:0;
  transition: all 0.3s;
}
/* #checkbox:checked ~ #norobot-text{
  color:green;
} */
/* #checkbox:checked ~ #robotimg{
  display: none;
} */

/* SUBMIT button -------- */
#btn-div{
  position: relative;
  /*border: 1px solid blue;*/
}
#sbmBtnOverlay{
  position: absolute; top:0; left:0;
  width:100%; height: 100%;
  /*border: 1px solid red;*/
  cursor:pointer;
  z-index: 5;
}
.submit {
  color: #fff;
  font-size: 0.9em;
  padding: 0.8em 1em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 1px;
  /*margin-top: 0.7em;*/
}
#spinner{
  display:none;
  width: 5em;
}
.grey{  background-color: #bfb6c2;}
.purple{  background-color:#751e9b;}

/* When moving the mouse over the submit button, add a darker green color */
/*
.submit:hover, .submit:active {
  background-color: #9f2cd1;
}
*/
/* Submit Hover Acrive through JS ---*/
.hover:hover{background-color: #9f2cd1;}
.active:active{background-color: #9f2cd1;}

#home-link {
  float: right;
  margin-top: 1em;
}

/* Add a background color and some padding around the form */
.form-container {
  max-width: 700px;
  margin: 0.5em auto;
  border-radius: 5px;
  padding: 10px;
  background-color: #f5f9fc;
  box-shadow: 0 0 3px 0 rgba(237, 169, 33, 0.4);
}

/* ---------------------------------
IPAD PORTRAIT, 768px and Up
---------------------------------*/
@media screen and (min-width: 768px) and (orientation: portrait) {
  h1 {
    font-size: 2.5em;
    margin: 0.2em 0;
  }

  h2 {
    font-size: 1.4em;
    /*margin-top: 0.3em;*/
    /*margin-bottom: 0.6em;*/
  }

  h3 {
    font-size: 1.2em;
  }

  p {
    font-size: 1.1em;
  }

  .list {
    font-size: 1.1em;
  }

  form {
    font-size: 1.2em;
  }

  .form span {
    font-size: 0.8em;
    color: #ea78bb;
    margin-left: 1em;
  }

  input, input::placeholder, textarea::placeholder {
    font-size: 17px;
    line-height: 1;
  }

  #social-links a {
    font-size: 1.5em;
  }

  .form-container {
    width: 95%;
    margin-top: 1.5em;
  }

  #social-links {
    margin-bottom: 1em;
  }
  .label {width: 40%;}

}
/*  --------------------------------------
IPAD LANDSCAPE, 768px
------------------------------------------*/
@media screen and (min-width: 768px) and (orientation: landscape) {
  h1 {
    font-size: 2.5em;
    margin: 0.2em 0;
  }

  h2 {
    font-size: 1.4em;
    /*margin-top: 0.3em;*/
    /*margin-bottom: 0.6em;*/
  }

  h3 {
    font-size: 1.2em;
  }

  p {
    font-size: 1.1em;
  }

  .list {
    font-size: 1.1em;
  }

  form {
    font-size: 1.2em;
  }

  .form span {
    font-size: 0.8em;
    color: #ea78bb;
    margin-left: 1em;
  }

  #social-links a {
    font-size: 1.4em;
  }

  .form-container {
    margin-top: 0.5em;
  }

  #home-link {
    margin: 5px 5px 5px 0;
  }
  .label {width: 40%;}
}
/*  --------------------------------------
IPAD PRO 13inch, 1024px
------------------------------------------*/
@media screen and (min-width: 1024px) and (min-height: 1024px) {
  h1 {
    font-size: 3.5em;
    margin: 0.3em 0;
  }

  h2 {
    font-size: 1.7em;
    /*margin: 0.5em 0;*/
  }

  h3 {
    font-size: 1.4em;
    margin: 0.7em 0;
  }

  p {
    font-size: 1.2em;
  }

  .myMenu > li > a {
    font-size: 1.2em;
  }

  .list {
    font-size: 1.3em;
    line-height: 1.5em;
  }

  #social-links a {
    font-size: 1.5em;
  }
  .label {width: 40%;}
}
/*  --------------------------------------
 DESKTOPS 1370px and Up
------------------------------------------*/
@media screen and (min-width: 1370px) {
  h1 {
    font-size: 3.5em;
    margin: 0.3em 0;
  }

  h2 {
    font-size: 1.7em;
    /*margin: 0.5em 0;*/
  }

  h3 {
    font-size: 1.4em;
    margin: 0.7em 0;
  }

  p {
    font-size: 1.2em;
  }

  .myMenu > li > a {
    font-size: 1.2em;
  }

  .list {
    font-size: 1.3em;
    line-height: 1.5em;
  }

  h1 {
    font-size: 3em;
  }

  h2 {
    font-size: 1.2em;
  }

  #social-links a {
    font-size: 1.2em;
  }

  form {
    font-size: 1em;
  }

  .form-container {
    margin-top: 1.7em;
  }
  .label {width: 40%;}
}

/*# sourceMappingURL=contact.css.map */