@media (max-width: 575px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden; } 

    Header {
/*        padding-top: 60px;*/
    }
    .container {
        max-width: 760px;
    }
    
}

@media (min-width: 576px) {
    Header {
/*        padding-top: 70px;*/
    }
}

header {
    position: relative;
}
/*
div {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none; }
*/

body {
  margin: 0;
  padding: 0;
  color: #34579C !important;
  font-family: "Artifika", serif;
  font-size: medium;
  font-style: normal;
  line-height: normal;
  background-color: #eee !important; }

.form-control, select, option {
    color: #34579C !important;
    font-size: 100%!important;
    
}

h1, h2, h3, .business-name {
  font-family: 'Bad Script', cursive; }

h4 {
  text-align: center;
  font-size: 120%;
  padding-bottom: 1em;
  font-weight: 600; }

p {
  letter-spacing: 1px; }


@media (max-width: 575px) {
 
}

@media (min-width: 576px) {
  p {
    text-align: justify; } }

p {
  margin-bottom: 2em;
  line-height: 2em;
  padding-left: 1em;
  padding-right: 1em; }


/*  NAVBAR */

.navbar {
  border-bottom-color: #34579C;
  border-top-color: #34579C;
  border-bottom-style: solid;
  border-top-style: solid;
  border-top-width: 2px;
  border-bottom-width: 2px; }
  .navbar .nav-link, .navbar .navbar-brand, .narbar .dropdown-item{
    transition: background-color 0.3s !important;
    color: #34579C !important; 
    list-style: none;
}
  .navbar .nav-link:hover, .navbar .nav-link:active, .navbar .dropdown-item:hover, .navbar .dropdown-item:active, option:active, option:hover {
    background-color: #001B51 !important;
    color: #fff !important;
    transition: 0.3s; }

.dropdown-item, option {
    color: #34579C!important;
    background-color: white;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-top: 0;
    margin-bottom: 0;
}

.bg-dark-customized {
  background-color: #001B51 !important;
  color: white; }

.container, container-fluid {
  background-color: #fff; }

.img-quote, .img-border {
  border: 3px solid #34579C; }

.rounded-img {
    border: 3px solid rgb(115,214,238);
/*    border-radius: 20px;*/
    border-radius: 100px;
    
}

.btn-home {
  color: #34579C!important; }

.btn-home:hover, .btn-home:active {
  color: #001b51!important; }



.btn-outline-dark {
  color: #34579c;
  background-color: transparent;
  background-image: none;
  border-color: #001b51 }

.btn-outline-dark:hover, .btn-outline-dark:active{
    color: #fff!important;
    background-color: #001b51;
    border-color: #001b51; }
  
}

#the-emotion-code .img-quote {
  box-shadow: 1px 1px 1px #02f4e8; }

#common-problems, #heart-wall-effects, .bg-blue {
  padding-top: 4em;
  background: url("../img/background1.jpeg");
  //background: url("../img/branded-background-3096x3096-gradiant1.png");
    //color: #FFFFFF !important;
    background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover; }

.bg-gradiant a {
    color: #FFFFFF;     
}

#AO-FAQ {
   // background: url("../img/branded-background-3096x3096-gradiant1.png");
    
}

#AO-FAQ h1, h2, h3, h4, h5, h6{
 //   color: #FFFFFF !important;  
}

#IV-FAQ h1, h2, h3, h4, h5, h6{
    color: #34579C !important;  
}


#common-problems ul, #heart-wall-effects ul {
  margin-bottom: 0px; }
  @media (max-width: 575px) {
    #common-problems ul, #heart-wall-effects ul {
      padding-left: 0; } }

#common-problems ul li, #heart-wall-effects ul li {
  list-style: none;
  line-height: 2.25em; }
  @media (max-width: 575px) {
    #common-problems ul li, #heart-wall-effects ul li {
      text-align: center;
      padding-left: 0;
      padding-right: 0; } }
  #common-problems ul li .fa, #heart-wall-effects ul li .fa {
    color: #fff; }

#heart-wall ul li {
  list-style: none;
  line-height: 2.25em; }

.card-border {
    border: 1px solid #34579C;
}

.card-header h6{
    font-weight: 700;
}

#about .img-josee {
 // border-radius: 50%; }

#contact .input-group-addon {
  background-color: #001B51 !important;
  color: #fff !important; }

#contact .btn, .btn-dark {
  color: #fff;
  background-color: #001B51;
  transition: 0.3s; }


#contact .btn:hover, #contact .btn:active, .btn-dark:hover, .btn-dark:active {
  border-color: #001B51;
  background-color: #eee;
  color: #34579C;
  transition: 0.3s; }

#contact img {
  border-radius: 50%; }

#contact a {
  color: #34579C; }

#faq .question {
/*  font-weight: 700;*/
  cursor: default;
  font-size: 100%; }

#faq ul li {
    letter-spacing: 1px;
    line-height: 2em;
    list-style: square;
}

#faq .card-header {
/*
    background-color: #001B51 !important;
    color: white;
*/
}

@media (max-width: 575px) {
  #faq p {
    padding-left: 0.25em;
    padding-right: 0.25em; } }

//  BOOK A SESSION

#book-session a {
  color: #34579C;
  transition: 0.3s; }

#book-session a:hover, #book-session a:active {
  color: #001B51;
  transition: 0.3s; }

#book-session .card-footer {
  font-size: 90%; }


#abundance-breakthrough ul li {
    letter-spacing: 1px;
    line-height: 2em;
    list-style: none;
}


// END BOOK A SESSION


#testimonials .fa-star {
  color: #fff; }

#the-body-code ul li, #how-it-works ul li {
    letter-spacing: 1px;
    line-height: 2em; 
}

footer {
  margin: 0;
  padding: 0;
  background-color: #001B51 !important;
  color: white; }
  footer .fa:hover {
    color: #3b5998; }
  footer a {
    color: #fff; }
  footer hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: ridge;
    border-width: 1px;
    border-color: #ccc; }
  footer p {
    letter-spacing: 0px; }
  footer .disclaimer {
    font-size: 70%; }

// Resonating Relationships (does not work)
.fa-heart {
    color: #B33651 ! important; 
}

// AO-SCAN

/* For some reason, the  style that comes right after //Ao-SCAN does not work, so I put this .carousel for no reason other than to circumvant this issue I can't figure out*/
.carousel {
    
}

#AO-QUOTES .carousel-indicators li {
    //background-color: #34579C;
    background-color: #54BFD1;
     
}

#AO-QUOTES .carousel-indicators li.active {
    background-color: #34579C;
}

.carousel-control-next {
    color: #34579C !important;
}

.carousel-control-prev {
    color: #34579C !important;
}

// Inner-Voice
#IV-testimonials .carousel-indicators li {
    //background-color: #34579C;
    background-color: #54BFD1 ! important;
}

#IV-testimonials .carousel-indicators li.active {
    background-color: #34579C;
}

.carousel-control-next {
    color: #34579C !important;
}

.carousel-control-prev {
    color: #34579C !important;
}


// This code does not work. I don't know why
@media (min-width: 575px) {
#AO-QUOTES .p {
        text-align: left; 
        font-size: 150%; } 
    }

// AO-FAQ
@media (max-width: 575px) { 
#AO-FAQ {
    
     } 
}