/**
* Template Name: Siimple
* Template URL: https://bootstrapmade.com/free-bootstrap-landing-page/
* Updated: Mar 17 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

html,body
{
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

#cart-button{
  background-color: #73c8f2;
}

.email-container{
  width: 50%;
  margin-left: 25%;
  padding: 2%;
}

.email-container a{
  color: blue;
}

.email-container-parent{
  width: 50%;
  margin-left: 25%;
  padding: 2%;
  background-color: #bfe6ff;
  margin-top: 10%;
}

.faq-parent-container{
  background-color: #fdf1c8;
  border-style: dotted;
}

.faq-container{
  background-color: #fdf1c8;
  height: 5em;
  width: 50%;
  margin-left: 25%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.faq-container a{
  color: black;
}

body {
  font-family: "Open Sans", sans-serif;
  color: #444444;

  background-image: url(../img/background3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  background-attachment: fixed;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  color: white;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-primary {
  font-family: "Raleway", sans-serif;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  height: 80px;
  padding: 20px 0;
  z-index: 10;
  position: relative;
}

#header .logo h1 {
  font-size: 36px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 3px;
}

#header .logo h1 a,
#header .logo h1 a:hover {
  color: #fff;
  text-decoration: none;
}

#header .logo img {
  padding: 0;
  margin: 0;
  max-height: 40px;
}

@media (max-width: 768px) {
  #header .logo h1 {
    font-size: 28px;
    padding: 8px 0;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/

#navbarCollapse {
  display: none;
}

/* Style navigation menu links */
#navbarCollapse a {
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

#navbarDropdown{
  color: white;
}

/* Style the hamburger menu */
.navbar a.icon {
  background: red;
  display: block;
  right: 0;
  top: 0;
}

.navbar-toggler{
  background-color: #73c8f2;
}

.nav-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 9999;
  overflow-y: auto;
  right: -260px;
  width: 260px;
  padding-top: 18px;
  background: rgba(34, 34, 34, 0.8);
  transition: 0.4s;
}

.nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu a,
.nav-menu a:focus {
  display: block;
  position: relative;
  color: #fff;
  padding: 10px 20px;
  font-weight: 500;
  transition: 0.3s;
}

.nav-menu a:hover,
.nav-menu .active>a,
.nav-menu li:hover>a {
  color: #bfe6ff;
  text-decoration: none;
}

.nav-menu .drop-down>a:after {
  content: "\ea27";
  font-family: "boxicons";
  padding-left: 10px;
  position: absolute;
  right: 15px;
}

.nav-menu .active.drop-down>a:after {
  content: "\ea27";
}

.nav-menu .drop-down>a {
  padding-right: 35px;
}

.nav-menu .drop-down ul {
  display: none;
  overflow: hidden;
}

.nav-menu ul.drop-down-active {
  display: block;
}

.nav-menu .drop-down li {
  padding-left: 20px;
}

.nav-menu-active {
  right: 0;
}

.nav-toggle {
  position: fixed;
  right: 15px;
  top: 15px;
  z-index: 9998;
  border: 0;
  background: rgba(34, 34, 34, 0.5);
  transition: all 0.4s;
  outline: none !important;
  line-height: 1;
  cursor: pointer;
  text-align: right;
  padding: 10px 12px;
  border-radius: 2px;
}

.nav-toggle i {
  color: #fff;
  font-size: 18px;
}

.nav-toggle-active {
  right: 275px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/


.navbar-brand {
    position: relative;
    background: url(../img/logo.png);
    width: 170px;
    left: 15px;
    background-size: contain;
}

.img-responsive {
    height: auto;
    width: auto;
    max-height: 72px;
    max-width: 250px;
}

.navbar {
  padding: 0;
  background-color: #011724
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-family: "Raleway", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
  color: #bfe6ff;
}

.navbar .getstarted,
.navbar .getstarted:focus {
  background: #bfe6ff;
  padding: 8px 20px;
  margin-left: 30px;
  border-radius: 4px;
  color: #fff;
}

.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
  color: #fff;
  background: #fd7827;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 15px;
  text-transform: none;
  font-weight: 600;
  color: black;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
  color: #bfe6ff;
}

.navbar .dropdown:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

/**
* Mobile Navigation
*/
.mobile-nav-toggle {
  color: #743e1d;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: #fff;
}

@media (max-width: 407px) {
  .navbar a{
    font-size: 14px;
  }
}

@media only screen and (min-width: 408px) and (max-width: 470px) {
  .navbar a{
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .navbar .dropdown ul{
    visibility: visible;
  }
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul{
    align-items: flex-start;
  }

  .navbar .dropdown ul{
    position: relative;
    opacity: 100;
    width: 100vw;
    right: 14px;
    left: -14px;
  }

}





.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(75, 40, 19, 0.9);
  transition: 0.3s;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  border-radius: 10px;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:hover {
  padding: 10px 20px;
  font-size: 15px;
  color: #bfe6ff;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
  color: #bfe6ff;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
  color: #bfe6ff;
}

.navbar-mobile .dropdown>.dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 80vh;
  background: url("../img/hero-bg.jpg") center center;
  background-size: cover;
  position: relative;
  margin-top: -80px;
  z-index: 9;
}

#hero .hero-container {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0 15px;
}


.center-align {

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 15px;
}

/*
#hero-sub {
  width: 100%;
  height: 50vh;
  background-color: #bfe6ff;
  position: relative;
  margin-top: -80px;
  z-index: 9;
}

#hero-sub .hero-container-sub {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0 15px;
}


#hero-sub h1 {
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 400;
  line-height: 56px;
  line-height: 56px;
  color: #222;
}

#hero-sub h2 {
  color: #333;
  margin-bottom: 30px;
  font-size: 24px;
}

*/

#hero h1 {
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 400;
  line-height: 56px;
  line-height: 56px;
  color: #222;
}

#hero h2 {
  color: #333;
  margin-bottom: 30px;
  font-size: 24px;
}


#hero-create-header, #hero-sub {
  width: 100%;
  height: 20vh;
  position: relative;
  margin-top: -1.5em;
  z-index: 9;
}

 #hero-sub{
   background-color: #bfe6ff;
 }

#hero-create-header{
  background-color: rgb(255, 247, 227);
}

#hero-create .hero-container-create, #hero-sub .hero-container-sub {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0 15px;
}

.container-create{
  margin-left:0;
  margin-right:0;
}

#hero-create-header h1, #hero-sub h1 {
  margin: 0 0 0 0;
  font-size: 48px;
  font-weight: 400;
  line-height: 56px;
  line-height: 56px;
  color: #222;
}

#hero-create-header h2,  #hero-sub h2{
  color: #333;
  margin-bottom: 30px;
  font-size: 24px;

}

.hero-create {
  margin-top: -2.5em;
}

#hero-create {
  width: 100%;
  height: 30vh;
  /*background-color: rgba(243, 233, 205, 0.8);*/
  position: relative;
  margin-top: -1.5em;
  z-index: 9;
}
.hero-create {
  margin-top: -2.5em;
}

#characterimage {
  height: 30vh;

}


#hero .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

#hero .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

#hero .php-email-form .loading {
  display: none;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 15px;
  border-radius: 50px;
}

#hero .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  animation: animate-loading-notify 1s linear infinite;
}

@keyframes animate-loading-notify {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#hero .php-email-form input {
  border-radius: 50px;
  box-shadow: none;
  font-size: 14px;
  border: 0;
  padding: 0px 15px 2px 20px;
  width: 250px;
  height: 40px;
  margin: 0 8px;
}

#hero .php-email-form button[type=submit] {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 30px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: none;
  color: #fff;
  background: #bfe6ff;
}

#hero .php-email-form button[type=submit]:hover {
  background: #bfe6ff;
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  #hero h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  #hero .php-email-form input {
    margin: 0 auto;
  }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 80px 0;
}

.section-bg {
  background-color: #bfe6ff;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 300;
  margin-bottom: 20px;
  padding-bottom: 15px;
  position: relative;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 80px;
  height: 1px;
  background: #bfe6ff;
  bottom: 0;
  left: calc(50% - 40px);
}

.section-title p {
  margin-bottom: 0;
  font-style: italic;
  color: #666666;
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about h3 {
  font-weight: bold;
  font-size: 26px;
}

.about ul {
  list-style: none;
  padding: 0;
}

.about ul li {
  padding-bottom: 10px;
}

.about ul i {
  font-size: 20px;
  padding-right: 4px;
  color: #bfe6ff;
}

.about p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Why Us
--------------------------------------------------------------*/
.why-us {
  padding-bottom: 30px;
}

.why-us .card {
  border-radius: 3px;
  border: 0;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.why-us .card-icon {
  text-align: center;
  margin-top: -32px;
}

.why-us .card-icon i {
  font-size: 32px;
  color: #fff;
  width: 64px;
  height: 64px;
  padding-top: 10px;
  text-align: center;
  background-color: #bfe6ff;
  border-radius: 50%;
  text-align: center;
  border: 4px solid #fff;
  transition: 0.3s;
  display: inline-block;
}

.why-us .card-body {
  padding-top: 12px;
}

.why-us .card-title {
  font-weight: 700;
  text-align: center;
}

.why-us .card-title a {
  color: #011724;
}

.why-us .card-title a:hover {
  color: #bfe6ff;
}

.why-us .card-text {
  color: #011724;
}

.why-us .card:hover .card-icon i {
  background: #fff;
  color: #bfe6ff;
}

@media (max-width: 1024px) {
  .why-us {
    background-attachment: scroll;
  }
}


/*--------------------------------------------------------------
# Why Us
--------------------------------------------------------------*/
.team {
  padding-bottom: 30px;
}

.team .card {
  border-radius: 3px;
  border: 0;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  transition: transform 0.3s ease;
}

.team .card-img-top {
  width: 100%;
  height: auto;             /* allow natural scaling */
  max-height: 25em;         /* keeps large screens under control */
  object-fit: contain;      /* shows the full image, no cropping */
  object-position: center;
  background-color: #fdf1c8; /* optional soft background for letterboxing */
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  padding: 0.5rem;          /* adds a little breathing room inside the card */
}

.team .card-icon {
  text-align: center;
  margin-top: -32px;
}

.team .card-icon i {
  font-size: 32px;
  color: #fff;
  width: 64px;
  height: 64px;
  padding-top: 10px;
  text-align: center;
  background-color: #bfe6ff;
  border-radius: 50%;
  text-align: center;
  border: 4px solid #fff;
  transition: 0.3s;
  display: inline-block;
}

.team .card-body {
  padding-top: 2.7em;
}

.team .card-title {
  font-weight: 700;
  text-align: center;
}

.team .card-title a {
  color: #011724;
}

.team .card-title a:hover {
  color: #bfe6ff;
}

.team .card-text {
  color: #011724;
}

.team .card:hover .card-icon i {
  background: #fff;
  color: #bfe6ff;
}

.team h2, .ourstory h3 {
  text-align: center;
}

@media (max-width: 1024px) {
  .team {
    background-attachment: scroll;
  }
}



@media (max-width: 768px) {
  .team .card-img-top {
    height: 18em;
  }
}

/*--------------------------------------------------------------
# Frequenty Asked Questions
--------------------------------------------------------------*/
.faq {
  padding-bottom: 60px;
}

.faq .faq-list {
  padding: 0;
  list-style: none;
}

.faq .faq-list li {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.faq .faq-list a {
  display: block;
  position: relative;
  font-family: 'Raleway';
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  padding-right: 25px;
  cursor: pointer;
}

.faq .faq-list i {
  font-size: 24px;
  position: absolute;
  right: 0;
  top: 0;
}

.faq .faq-list p {
  margin-bottom: 0;
  padding: 10px 0 0 0;
}

.faq .faq-list .icon-show {
  display: none;
}

.faq .faq-list a.collapsed {
  color: #343a40;
}

.faq .faq-list a.collapsed:hover {
  color: #343a40;
}

.faq .faq-list a.collapsed .icon-show {
  display: inline-block;
}

.faq .faq-list a.collapsed .icon-close {
  display: none;
}

/*--------------------------------------------------------------
# Pages
--------------------------------------------------------------*/
.pages-container{
  width: 50%;
  margin-left: 25%;
  background-color: white;
  padding: 2%;
}

.pages-container-help{
  width: 50%;
  margin-left: 25%;
  background-color: white;
  padding: 2% 7% 2% 7%;
}

.pages-container h2{
  align-content: center;
}

.help{
  display: flex;
  justify-content: space-between;
}

.help-row-gap{
  display: flex;
  gap: 0 12.5em;
}

.help-pages a{
  color:black;
  text-decoration: underline;
}

#help-pages{
  color:black;
  text-decoration: underline;
}

.help-pages a:hover{
  color: blue;
}

.help-pages ul li{
  list-style-type: none;
}

.help-pages ul{
  padding-left: 0;
}

/*--------------------------------------------------------------
# Contact Us
--------------------------------------------------------------*/
.contact .info {
  color: #444444;
}

.contact .info i {
  font-size: 32px;
  color: #011724;
  float: left;
}

.contact .info p {
  padding: 0 0 10px 50px;
  margin-bottom: 20px;
  line-height: 22px;
  font-size: 14px;
}

.contact .info .email p {
  padding-top: 5px;
}

.contact .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #5a2c10;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

.contact .social-links a:hover {
  background: #bfe6ff;
  color: #fff;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .error-message br+br {
  margin-top: 25px;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: #bfe6ff;
}

.contact .php-email-form button[type=submit] {
  background: #011724;
  border: 0;
  padding: 10px 24px;
  color: #fff;
  transition: 0.4s;
}


.bp button[type=submit] {
  border: 0;
  padding: 10px 24px;
  color: #fff;
  transition: 0.4s;
}

button.personalize-buttons.bp {
    padding: 10px;
    color: #fff;
}

.about button[type=submit] {
  border: 0;
  padding:30px 24px;
  color: #fff;
  transition: 0.4s;
}


.cover{
  top:0;
}


.container-create button[type=submit]:hover {
  background: #011724;
}

.container-create button[type=submit] {
  background: #bfe6ff;
  border: 0;
  padding: 10px 24px;
  color: #fff;
  transition: 0.4s;
}

.imgselect, .imgselect2{
  outline-width: .35em !important;
  outline-color: green !important;
}
/*
#hair1container input[type="radio"]{
  position: absolute;
  transform: scale(6);
/*  margin: 3em 3em 3em 2.5em;
  opacity: 0; */
/*  cursor: pointer;
}*/

/*
#hairinput10{
  position: relative;
  left: 6.45em;
}

#hair1form{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}


#hair1form input{
  position: absolute;
  transform: scale(6);
  margin: 3em 3em 3em 2.5em;
  cursor: pointer;
}
*/
.form label, .form2 label{
  background-color: #bfe6ff;
  text-align: center;
  display: inline-block;
  color: white;
}{
  background-color: #bfe6ff;
  text-align: center;
  display: inline-block;
  color: white;
}

/*  position: relative;
  color: #fff;
  display: block;
  font-size: 26px;
  line-height: 150px;
  cursor: pointer;
  border: 3px solid transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; */
}

.form .create1 label {
  width: 48%;
  display: inline-flex;
  cursor: pointer;
  position: relative;
  padding: 1em;
}

.form .create1 label:hover {
  background-color: black;
}

section .create1{
  padding: 0;
  width: 20em;
}
#gender-control{
  width: 20em;
}

.form input:checked + label, .form2 input:checked + label, .form input:checked + img {
  border: 5px solid green;

}



/*.form input, .form input, .form input{
  display: none;
  top: -50px;
  width: 0px;
  position: absolute;

  left: -9999px;

}*/

.form input[type="radio"], .form2 input[type="radio"]{
  position: absolute;
  transform: scale(6);
  margin: 3em 3em 3em 2.5em;
  opacity: 0;
  cursor: pointer;

}

#boy, #girl, #man, #woman{
  margin: 3em 0em 0em 4.5em;
}

#boyButton, #girlButton {
  margin: 20px 2px 20px 2px;

  width: 48%;
  display: inline-flex;
  cursor: pointer;
/*  position: relative; */
  padding: 1em;
  text-align: center;
}

#manButton, #womanButton {
  margin: 20px 2px 20px 2px;
  width: 48%;
  display: inline-flex;
  cursor: pointer;
/*  position: relative; */
  padding: 1em;
}

#adultDataSubmit,
#childDataSubmit,
#childnamein,
#adultname {
  width: 20em;
}



/*input[type='radio']:after{
  height: 5em;
  width: 5em;
  margin: 1em .5em 1em .5em;
  outline-color: gray;
  outline-style: solid;
  outline-width: medium;
  visibility: hidden;
} */

#button-control {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.box-control {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}


.box-control #box1:hover, .box-control #hairbox1:hover, .box-control #box2:hover, .box-control #hairbox2:hover,
.box-control #box3:hover, .box-control #hairbox3:hover, .box-control #box4:hover, .box-control #hairbox4:hover,
.box-control #box5:hover, .box-control #hairbox5:hover, .box-control #box6:hover, .box-control #hairbox6:hover,
.box-control #box7:hover, .box-control #hairbox7:hover, .box-control #box8:hover, .box-control #hairbox8:hover,
.box-control #box9:hover, .box-control #hairbox9:hover, .box-control #box10:hover, .box-control #hairbox10:hover,
.box-control #hairstyle1:hover. .box-control #hairstyle2:hover, .box-control #hairstyle3:hover, .box-control #hairstyle4:hover,
.box-control #hairstyle5:hover, .box-control #hairstyle6:hover. .box-control #hairstyle7:hover, .box-control #hairstyle8:hover,
.box-control #hairstyle9:hover,.box-control #hairstyle10:hover, .box-control #hairstyle11:hover. .box-control #hairstyle12:hover,
.box-control #hairstyle13:hover, .box-control #hairstyle14:hover,.box-control #hairstyle15:hover,
.box-control #eyebox1:hover, .box-control #eyebox2:hover, .box-control #eyebox3:hover, .box-control #eyebox4:hover,
.box-control #eyebox5:hover, .box-control #eyebox6:hover,
.box-control #eye1:hover, .box-control #eye2:hover, .box-control #glasses:hover, .box-control #glasses2:hover,
.box-control #box1a:hover, .box-control #hairbox1a:hover, .box-control #box2a:hover, .box-control #hairbox2a:hover,
.box-control #box3a:hover, .box-control #hairbox3a:hover, .box-control #box4a:hover, .box-control #hairbox4a:hover,
.box-control #box5a:hover, .box-control #hairbox5a:hover, .box-control #box6a:hover, .box-control #hairbox6a:hover,
.box-control #box7a:hover, .box-control #hairbox7a:hover, .box-control #box8a:hover, .box-control #hairbox8a:hover,
.box-control #box9a:hover, .box-control #hairbox9a:hover, .box-control #box10a:hover, .box-control #hairbox10a:hover,
.box-control #hairstyle1a:hover, .box-control #hairstyle2a:hover, .box-control #hairstyle3a:hover,
.box-control #hairstyle4a:hover, .box-control #hairstyle5a:hover, .box-control #hairstyle6a:hover,
.box-control #hairstyle7a:hover, .box-control #hairstyle8a:hover, .box-control #hairstyle9a:hover,
.box-control #hairstyle10a:hover,.box-control #eyebox1a:hover, .box-control #eyebox2a:hover, .box-control #eyebox3a:hover, .box-control #eyebox4a:hover,
.box-control #eyebox5a:hover, .box-control #eyebox6a:hover,
.box-control #eye1a:hover, .box-control #eye2a:hover, .box-control #glassesa:hover, .box-control #glasses2a:hover,
#glasses3a:hover{
  outline-width: .35em;
}


.box-control #box1:focus, .box-control #hairbox1:focus, .box-control #box2:focus, .box-control #hairbox2:focus,
.box-control #box3:focus, .box-control #hairbox3:focus, .box-control #box4:focus, .box-control #hairbox4:focus,
.box-control #box5:focus, .box-control #hairbox5:focus, .box-control #box6:focus, .box-control #hairbox6:focus,
.box-control #box7:focus, .box-control #hairbox7:focus, .box-control #box8:focus, .box-control #hairbox8:focus,
.box-control #box9:focus, .box-control #hairbox9:focus, .box-control #box10:focus, .box-control #hairbox10:focus,
.box-control #hairstyle1:focus, .box-control #hairstyle2:focus, .box-control #hairstyle3:focus,
.box-control #hairstyle4:focus, .box-control #hairstyle5:focus, .box-control #hairstyle6:focus,
.box-control #hairstyle7:focus, .box-control #hairstyle8:focus, .box-control #hairstyle9:focus,
.box-control #hairstyle10:focus, .box-control #hairstyle11:focus, .box-control #hairstyle12:focus,
.box-control #hairstyle13:focus, .box-control #hairstyle14:focus, .box-control #hairstyle15:focus,
.box-control #eyebox1:focus, .box-control #eyebox2:focus, .box-control #eyebox3:focus, .box-control #eyebox4:focus,
.box-control #eyebox5:focus, .box-control #eyebox6:focus,
.box-control #eye1:focus, .box-control #eye2:focus, .box-control #glasses:focus, .box-control #glasses2:focus,
#glasses3:focus,
.box-control #box1a:focus, .box-control #hairbox1a:focus, .box-control #box2a:focus, .box-control #hairbox2a:focus,
.box-control #box3a:focus, .box-control #hairbox3a:focus, .box-control #box4a:focus, .box-control #hairbox4a:focus,
.box-control #box5a:focus, .box-control #hairbox5a:focus, .box-control #box6a:focus, .box-control #hairbox6a:focus,
.box-control #box7a:focus, .box-control #hairbox7a:focus, .box-control #box8a:focus, .box-control #hairbox8a:focus,
.box-control #box9a:focus, .box-control #hairbox9a:focus, .box-control #box10a:focus, .box-control #hairbox10a:focus,
.box-control #hairstyle1a:focus, .box-control #hairstyle2a:focus, .box-control #hairstyle3a:focus,
.box-control #hairstyle4a:focus, .box-control #hairstyle5a:focus, .box-control #hairstyle6a:focus,
.box-control #hairstyle7a:focus, .box-control #hairstyle8a:focus, .box-control #hairstyle9a:focus,
.box-control #hairstyle10a:focus,.box-control #eyebox1a:focus, .box-control #eyebox2a:focus, .box-control #eyebox3a:focus, .box-control #eyebox4a:focus,
.box-control #eyebox5a:focus, .box-control #eyebox6a:focus,
.box-control #eye1a:focus, .box-control #eye2a:focus, .box-control #glassesa:focus, .box-control #glasses2a:focus,
#glasses3a:focus{

  outline-width: .35em;
  outline-color: green;
}

#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8,#box9,
#hairstyle1,#hairstyle2, #hairstyle3, #hairstyle4, #hairstyle5,
#hairstyle6,#hairstyle7, #hairstyle8, #hairstyle9, #hairstyle10,
#hairstyle11,#hairstyle12, #hairstyle13, #hairstyle14, #hairstyle15,
#eyebox1, #eyebox2, #eyebox3, #eyebox4, #eyebox5, #eyebox6,
#glasses,#glasses2, #glasses3, #eye1, #eye2,
#hairbox1, #hairbox2, #hairbox3, #hairbox4, #hairbox5, #hairbox6, #hairbox7, #hairbox8, #hairbox9,
#box1a, #box2a, #box3a, #box4a, #box5a, #box6a, #box7a, #box8a,#box9a,
#hairstyle1a,#hairstyle2a, #hairstyle3a, #hairstyle4a, #hairstyle5a,
#hairstyle6a,#hairstyle7a, #hairstyle8a, #hairstyle9a, #hairstyle10a,
#eyebox1a, #eyebox2a, #eyebox3a, #eyebox4a, #eyebox5a, #eyebox6a,
#glassesa, #glasses2a, #glasses3a, #eye1a, #eye2a,
#hairbox1a, #hairbox2a, #hairbox3a, #hairbox4a, #hairbox5a, #hairbox6a, #hairbox7a, #hairbox8a, #hairbox9a {
  height: 5em;
  width: 5em;
  margin: 1em .5em 1em .5em;
  outline-color: gray;
  outline-style: solid;
  outline-width: medium;

}


#box1, #box1a {
  background-color: #F0CCB5;
}

#box2, #box2a{
  background-color: #DDB391;
}

#box3, #box3a {
  background-color: #E3AF80;
}

#box4, #box4a {
  background-color: #D2A478;
}

#box5, #box5a {
  background-color: #C68056;
}

#box6, #box6a {
  background-color: #AA7A2F;
}

#box7, #box7a {
  background-color: #915736;
}

#box8, #box8a {
  background-color: #805E25;
}

#box9, #box9a {
  background-color: #614716;
}

#hairbox1, #hairbox1a {
  background-color: #C56D29;
}

#hairbox2, #hairbox2a {
  background-color: #8A261B;
}

#hairbox3, #hairbox3a {
  background-color: #ECEA6F;
}

#hairbox4, #hairbox4a {
  background-color: #D4B74B;
}

#hairbox5, #hairbox5a {
  background-color: #B9932E;
}

#hairbox6, #hairbox6a {
  background-color: #603A17;
}

#hairbox7, #hairbox7a {
  background-color: #3B2416;
}

#hairbox8, #hairbox8a {
  background-color: #231F20;
}

#hairbox9, #hairbox9a {
  background-color: #BBBDBF;
}

#eyebox1, #eyebox1a {
  background-color: #29ABE2;
}

#eyebox2, #eyebox2a {
  background-color: #018864;
}

#eyebox3, #eyebox3a {
  background-color: #6A692C;
}

#eyebox4,#eyebox4a {
  background-color: #754D29;
}

#eyebox5, #eyebox5a {
  background-color: #3B2416;
}

#eyebox6, #eyebox6a {
  background-color: #3B2416;
}

.pdf{
  width: 800px;
  height: 600px;
}

.contact .php-email-form button[type=submit]:hover {
  background: #bfe6ff;
}

@media (max-width: 768px) {
  .contact .social-links {
    text-align: center;
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.row-gap{
  display: flex;
  gap: 0 5em;
}

#home-personalize-button{
  position: relative;
  bottom: -48%;
}

.personalize-buttons{
  width: 100%;
  background: #011724;
}

.personalize-buttons:hover{
  background: #bfe6ff;
}

.continue{
  margin-top: 2em;
}

.continue-buttons {
  width: 25%;
  background: #011724;
  color: white;
  height: 3em;
}

.continue-buttons:hover{
  background: #bfe6ff;
}

.cover-buttons {
  width: 100%;
  background: #011724;
  color: white;
  height: 3em;
}

.cover-buttons:hover{
  background: white;
  color: black;
}

.checkout-button{
  background: #011724;
  color: white;
  height: 3em;
  width: 50%;
  margin-left: 25%;
}

.checkout-button:hover{
  background: white;
  color: black;
}

.card:focus, .cover-buttons:focus, .softcover-card:focus, .hardcover-card:focus{
  outline-color: white;
  outline-style: solid;
  outline-width: thick;
}

.bookcover-preview-image{

  display:block;
  position: relative;
  vertical-align: middle;
  margin-bottom: 2.5em;
}

.bookcover-preview-image::before {
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
  display:inline-block;
  background: linear-gradient( 90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) min(3px, .64%), transparent min(6px, 1.04%), transparent min(17px, 3.7%), rgba(0, 0, 0, .2) min(22px, 4.77%), rgba(0, 0, 0, .2) min(24px, 4.99%), transparent min(31px, 6.21%));
}


#bookcover-preview-image{
  width: 30em;
  height: 30em;
  box-shadow: 0 15px 27px 10px rgba(129, 92, 24, .12), 0 10px 40px 0px rgba(0, 0, 0, .3), 0px -6px 16px -6px rgba(0, 0, 0, .03);
  box-sizing: border-box;
  z-index: -1;
}

.cover-container{
  background-color: rgb(255, 247, 227);
  width: 50%;
  height: 40em;
  display: inline-block;
  text-align: center;
  position: relative;

}

.cover-container::before{
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  align-items: center;
}

.book-cover{
  width:100%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  display:block;
  position: absolute;
  vertical-align: middle;
}

#book-cover{
  object-fit: cover;
  width: 60%;
  height: 60%;
  vertical-align: middle;
  box-shadow: 0 15px 27px 10px rgba(129, 92, 24, .12), 0 10px 40px 0px rgba(0, 0, 0, .3), 0px -6px 16px -6px rgba(0, 0, 0, .03);
  box-sizing: border-box;
  z-index: -1;
}


.book-cover::before {
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
  display:inline-block;
  background: linear-gradient( 90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) min(3px, .64%), transparent min(6px, 1.04%), transparent min(17px, 3.7%), rgba(0, 0, 0, .2) min(22px, 4.77%), rgba(0, 0, 0, .2) min(24px, 4.99%), transparent min(31px, 6.21%));
}


.display-photo{
  height: 30em;
  width: 30em;
  background-color: #DBF7F8

}

.display-cover{
  bottom: 0;
  top: 0;
  left: 0;
  right:0;
  position: absolute;
  background-size: contain;
  z-index: -1;
}

.display-cover-image{
  bottom: 0;
  top: 0;
  left: 0;
  right:0;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../img/cover/testcover.png");
}

.pages{
  margin-top: 0;
  margin-left: 10em;
  margin-right: 10em;
  display: flex;
  flex-direction: column;
  gap: 28px 0;
}

.book-pages{
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  inset: 0;
  content: "";
  gap: 5em 0;

}

.page-container{
  position: relative;
}

.page-image{
  width: 100%;
  height: 100%;
  box-shadow: 0 13px 27px -5px rgba(129, 92, 24, .12), 0 8px 16px -8px rgba(0, 0, 0, .3), 0 -6px 16px -6px rgba(0, 0, 0, .03);
  box-sizing: border-box;
  z-index: -1;
}

.page-right{
  position: relative;
}

.page-left{
  position: relative;
}

.page-right::before{
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .1), hsla(0, 0%, 100%, .1) min(20px, 3.5%), rgba(0, 0, 0, .04) min(42px, 7.5%), transparent min(146px, 26%));

}
.page-left::before{
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
  background: linear-gradient(270deg, rgba(0, 0, 0, .1), hsla(0, 0%, 100%, .1) min(20px, 3.5%), rgba(0, 0, 0, .04) min(42px, 7.5%), transparent min(146px, 26%));
}


#dedication-input{
  font-size: 18px;
  font-family: inherit;
  padding: 3em;
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
}

textarea#dedication-input {
    border: 5px solid;
    width: 40%;
    height: 15em;
}

.contact-wrap {
  background: white;
}
.no-gutters {
  margin-right: 0;
  margin-left: 0; }
  .no-gutters > .col,
  .no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.dbox {
width: 100%;
margin-bottom: 25px; }
@media (max-width: 767.98px) {
.dbox {
  margin-bottom: 25px !important;
  padding: 0 20px; } }
.dbox p {
margin-bottom: 0; }
.dbox p span {
  font-weight: 500;
  color: #000; }
.dbox p a {
  color: #46b5d1; }
.dbox .icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: #bfe6ff;
margin: 0 auto;
margin-bottom: 20px; }
.dbox .icon span {
  font-size: 20px;
  color: #fff; }
.dbox .text {
width: 100%; }

.contactForm .label {
  color: #000;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600; }

.contactForm .form-control {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0; }

#contactForm .error {
  color: red;
  font-size: 12px; }

#contactForm .form-control {
  font-size: 16px; }

  .form-group {
  margin-bottom: 1rem; }
  .align-items-stretch {
  -webkit-box-align: stretch !important;
  -ms-flex-align: stretch !important;
  align-items: stretch !important; }

.ftco-section{
  background-color: #fafafa;
}

.btn-primary {
  color: #fff;
  background-color: #bfe6ff;
  border-color: #bfe6ff; }
.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc; }
.btn-primary:focus, .btn-primary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); }
.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff; }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf; }
  .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
  .show > .btn-primary.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); }

  img {
  vertical-align: middle;
  border-style: none; }

.img{
  background-image: url(.../img/team.jpeg);
  background-size: cover;
background-repeat: no-repeat;
background-position: center center; }

  @media (max-width: 767.98px) {
  .info-wrap {
    height: 400px; } }


@media (max-width: 1200px) {
    .container-create{
      margin-left:0;
      margin-right:0;
    }

    .box-control{
      margin-left:7%;
      margin-right:7%;
      text-align: center;
    }

    .form label{
      text-align: center;
    }
}

@media (max-width: 730px) {

  .bookcover-preview-image::before {
    height:90%;
    width:90%;
    margin-left:10%;
  }

  #bookcover-preview-image{
    height:90%;
    width:90%;
    margin-left:10%;
  }
}

@media (max-width: 850px) {
  #hero{
    height: 100vh;
  }
}

@media (max-width: 999px) {



  .pages{
    margin-left:0;
    margin-right:2em;
  }

  .book-pages{
    display:block;
  }

  .page-left{
    margin-bottom: 2em;
  }

  .page-right{
    margin-bottom: 2em;
  }
}

@media only screen and (min-width: 1000px) and (max-width: 1500px) {

  .pages{
    margin-left:0;
    margin-right:2em;
  }

}


@media only screen and (min-width: 0px) and (max-width: 469px) {

  #hero-create-header, #hero-sub{
    margin-top: 0;
  }

  #hero-create .hero-container-create, #hero-sub .hero-container-sub{
    top: 2em;
  }

  #hero-sub h1{
    font-size: 36px;
  }

  #hero-sub h2{
    font-size: 20px;
  }
}

@media (max-width: 477px) {
  #skintoneinput4, #skintoneinput7, #skintoneinput4a, #skintoneinput7a,
  #haircolorinput4, #haircolorinput4a, #haircolorinput7, #haircolorinput7a{
    margin: 10.5em 0 0 -15.5em;
  }

  #hairinput4a{
    margin: 10em 0 0 -15.5em;
  }

  #hairinput7a{
    margin: 10em 0 0 -9.5em;
  }


  #hairinput4, #hairinput7, #hairinput10, #hairinput13{
    margin: 10.1em 0 0 -15.5em;
  }

  #eyecolorinput4, #eyecolorinput4a{
    margin: 10.1em 0 0 -12.5em;
  }
}
/*
@media (max-width: 800px) {
  .container-create{
    height: 50vh;
    overflow:auto;
    position: relative;
    top: -5em;

  }

  #characterimage{
    height:20vh;
  }
}
*/
@media only screen and (min-width: 478px) and (max-width: 587px) {

  #skintoneinput5, #skintoneinput5a, #haircolorinput5, #haircolorinput5a{
    margin: 10.5em 0 0 -21.5em;
  }

  #skintoneinput9, #skintoneinput9a, #haircolorinput9, #haircolorinput9a{
    margin: 10.5em 0 0 -12.4em;
  }

  #hairinput5{
    margin: 10.1em 0 0 -21.5em;
  }

  #hairinput9{
    margin: 10.1em 0 0 -21.4em;
  }

  #hairinput13{
    margin: 10.1em 0 0 -18.4em;
  }

  #eyecolorinput5, #eyecolorinput5a{
    margin: 10.1em 0 0 -12.5em;
  }

  #hairinput5a{
    margin: 10em 0 0 -18.5em;
  }

}

@media only screen and (min-width: 589px) and (max-width: 699px) {

  #skintoneinput6, #skintoneinput6a, #haircolorinput6, #haircolorinput6a{
    margin: 10.5em 0 0 -24.5em;
  }

  #skintoneinput9, #skintoneinput9a, #haircolorinput9, #haircolorinput9a{
    margin: 3em 0 0 2.5em;
  }

  #hairinput6, #hairinput11{
    margin: 10.1em 0 0 -27.5em;
  }

  #hairinput6a{
    margin: 10em 0 0 -18.5em;
  }

}

@media only screen and (min-width: 700px) and (max-width: 811px) {

  #skintoneinput7, #skintoneinput7a, #haircolorinput7, #haircolorinput7a{
    margin: 10.5em 0 0 -24.5em;
  }

  #skintoneinput9, #skintoneinput9a, #haircolorinput9, #haircolorinput9a{
    margin: 3em 0 0 2.5em;
  }

  #hairinput7{
    margin: 10.1em 0 0 -33.5em;
  }

  #hairinput13{
    margin: 10.1em 0 0 -24.5em;
  }

  #hairinput7a{
    margin: 10em 0 0 -18.5em;
  }

}

@media only screen and (min-width: 812px) and (max-width: 923px) {

  #skintoneinput8, #skintoneinput8a, #haircolorinput8, #haircolorinput8a{
    margin: 10.5em 0 0 -24.5em;
  }

  #skintoneinput9, #skintoneinput9a, #haircolorinput9, #haircolorinput9a{
    margin: 3em 0 0 2.5em;
  }

  #hairinput8{
    margin: 10.1em 0 0 -39.5em;
  }

  #hairinput15{
    margin: 10.1em 0 0 -21.5em;
  }
}

@media only screen and (min-width: 924px) and (max-width: 1033px) {


  #skintoneinput9, #skintoneinput9a, #haircolorinput9, #haircolorinput9a{
    margin: 10.5em 0 0 -24.5em;
  }

  #hairinput9{
    margin: 10.1em 0 0 -42.5em;
  }

}


@media (min-width: 1035px){

  #hairinput10{
    margin: 10.1em 0 0 -42.5em;
  }

}


@media only screen and (min-width: 1140px) and (max-width: 1260px){

  #hairboxstyles{
    text-align: center;
    margin-left: 11%;
    margin-right: 11%;
  }

}

@media only screen and (min-width: 1262px) and (max-width: 1326px){

  #hairboxstyles{
    text-align: center;
    margin-left: 13%;
    margin-right: 13%;
  }

}

@media only screen and (min-width: 1327px) and (max-width: 1441px){

  #hairboxstyles{
    text-align: center;
    margin-left: 16%;
    margin-right: 16%;
  }

}

@media only screen and (min-width: 1442px) and (max-width: 1578px){

  #hairboxstyles{
    text-align: center;
    margin-left: 19%;
    margin-right: 19%;
  }

}

@media only screen and (min-width: 1579px) and (max-width: 1644px){

  #hairboxstyles{
    text-align: center;
    margin-left: 21em;
    margin-right: 20em;
  }

}

@media only screen and (min-width: 1645px) and (max-width: 1732px){

  #hairboxstyles{
    text-align: center;
    margin-left: 23.5em;
    margin-right: 23em;
  }

}

@media only screen and (min-width: 1733px) and (max-width: 1818px){

  #hairboxstyles{
    text-align: center;
    margin-left: 26em;
    margin-right: 26em;
  }

}

@media only screen and (min-width: 1819px) and (max-width: 1898px){

  #hairboxstyles{
    text-align: center;
    margin-left: 28em;
    margin-right: 29em;
  }

}

@media only screen and (min-width: 1900px){

  #hairboxstyles{
    text-align: center;
    margin-left: 30em;
    margin-right: 30em;
  }

}

@media only screen and (min-width: 470px) and (max-width: 800px) {
  #hero-create-header, #hero-sub{
    margin-top: -1.5em;
  }

  #hero-create .hero-container-create, #hero-sub .hero-container-sub{
    top: 2em;
  }

  #hero-sub h1{
    font-size: 36px;
  }

  #hero-sub h2{
    font-size: 20px;
  }
}
@media only screen and (min-width: 0px) and (max-width: 766px){
    .cover-container{
      width: 100%;
      height: 20em;
    }

    #home-personalize-button {
      position: relative;
      bottom: 0%;
    }
}

@media only screen and (min-width: 767px) and (max-width: 1000px) {
    .cover-container{
      width: 100%;
      height: 30em;
    }

    #home-personalize-button {
      position: relative;
      bottom: 0%;
    }
}

@media only screen and (min-width: 1001px) and (max-width: 1200px){

    #home-personalize-button {
      position: relative;
      bottom: -40%;
    }
}

@media only screen and (min-width: 1201px) and (max-width: 1400px) {

    #home-personalize-button {
      position: relative;
      bottom: -45%;
    }
}



/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #011724;
  padding: 30px 0;
  color: #fff;
  font-size: 14px;
}

#footer .copyright {
  text-align: center;
}

#footer .credits {
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #fff;
}


#checkout{
  width:80%;
  padding: 5% 0 5% 20%;

}

#error-page-container{
  text-align: center;
  margin-top: 10%;
}


@media only screen and (min-width: 0px) and (max-width: 460px) {

    #loading-gif{
      width: 20%;
      margin-top: 50% !important;
    }
    #loading-text{
      width: 70%;
    }
}

@media only screen and (min-width: 461px) and (max-width: 750px) {

    #loading-gif{
      width: 20%;
      margin-top: 30% !important;
    }
    #loading-text{
      width: 70%;
    }
}

@media only screen and (min-width: 751px) and (max-width: 1050px) {

    #loading-gif{
      width: 40%;
      margin-top: 10%;
    }
}

@media (max-width: 890px) {

  textarea#dedication-input {
      width: 80%;
  }

}


#orders {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#orders td, #orders th {
  border: 1px solid #ddd;
  padding: 8px;
}

#orders tr:nth-child(even){background-color: #f2f2f2;}

#orders tr:hover {background-color: #ddd;}

#orders th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #73c8f2;
  color: white;
}