body {
  background-color: #f3f3f3; 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
}
body::-webkit-scrollbar {
  width: 12px;                  /* width of the entire scrollbar */
  display:none;
}
body::-webkit-scrollbar-track {
  background:#242a33;         /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
  height: 100px;
  background-color: #00e1ff;  /* color of the scroll thumb */
  border-radius: 20px;          /* roundness of the scroll thumb */
  border: 3px solid #242a33;  /* creates padding around scroll thumb */
}

.section-header {
  width: 100%;
  position: fixed;
  z-index: 100000;
}
.header-main {
  position: relative;
  padding-top: 7px;
  padding-bottom: 7px;
  background-color: #242a33;
}

#ad-mobile {
  position:fixed;
  right: -100%;
  top: 11%;
  display:none;
  transition: all 2.2s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.my-logo{
  font-family:Roboto-Bold, Roboto, Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight:700;
  line-height: 1;
  margin-left:4px;
  margin-bottom: -2px;
}
.sam{
  color:#fff;
}
.robert{
  color:#2282ff;
}

.brand-wrap {
  text-decoration: none !important;
}

.nav-icons {
  margin-right: -12px; 
}
.icon-sm {
  width: 48px;
  height: 48px;
  line-height: 48px !important;
  font-size: 20px;
}

#online-store-img { 
  width: 100%;
}

.widget-header {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.widget-header .notify {
  position: absolute;
  top: -3px;
  right: -10px;
}
.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}
.search-form {
  border: 1px solid #ffffff !important;
}
.search-button {
  color: #242a33;
  background-color: #ffffff;
  border-color: #ffffff;
}
.btn-secondary {
  background-color: #1877f2;
  border-color: #1877f2;
}
.navbar-main {
  background-color: #fff;
  padding: 3px 20px;
}
.navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1) !important;
}
.navbar-toggler {
  padding: 4px;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.37rem;
}
#dropdown-sam {
  outline: none;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.5rem 7px 0px;
  font-size: 1rem;
  color:rgb(105, 105, 105);
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}
.dropdown-order {
  border: none !important;
  border-radius: 0;
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.45rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: rgb(105, 105, 105);;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.dropdown-item:hover {
  cursor: pointer;
}
.dropdown-flex-container{
  display:flex;
  align-items: flex-start;
}
#tips-btn{
  right: 10px;
  margin-top: 20px;
  position:absolute;
  padding: 10px 20px;
  color:#00e1ff;
  background-color:#2b2f33;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  font-size: 1.1em;
}
.navbar-toggler-icon {
  background-image: url(https://img.icons8.com/ios/50/000000/menu.png);
  width: 20px;
  height: 18px;
  margin-bottom: 1px;
  border: none;
}
.nav-link {
  text-transform: uppercase;
  font-weight: 400;
  color: rgb(105, 105, 105);;
}
.nav-link:hover {
  color: blue;
  cursor: pointer;
}
.fas {
  color: #00e1ff;
}
.login {
  color: #00e1ff;
}
#a2hs-btn {
  position: absolute;
  margin: 10px;
  padding: 10px 20px;
  color:#00e1ff;
  background-color:#2b2f33;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  transition: 1.8s ease-out;
  font-size: 1.1em;
  z-index:0;
}
#main-container {
  font-size: 0.9em;
  line-height: 23px;
  color: #2b2f33;
  padding-top: 150px;
  text-align: left;
  margin-left: -1000px;
  padding-left: 4px;
  padding-bottom: 25px;
  transition: 1.5s ease-out;
}

.songs:hover {
  cursor: pointer;
}

/*SECTION SELECTED SONGS*/

.one-song-container {
  transition: 0.1s ease-out;
}
.focus-selection {
  font-size: .8em;
  color:#00e1ff;
  background-color: #242a33;     
  padding: 5px 0px 10px 20px;
  margin: 4px 0px 4px -10px;
  box-shadow: rgba(0,0,0,0.6) 0 0 5px;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}
.focus-selection-add {
  font-size: 1.4em;
  color: #fff;
  background-color: #1877f2;     
  padding: 8px 0px 8px 20px;
  margin: 4px 0px;
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
}
.focus-selection-add:hover {
  cursor: pointer;
}
#icone-ajouter {
  margin-right: 10px;
}
#selected-songs-container {
  background-color:#242a33;
  width: 92%;
  height: 232px;
  margin-left: 4%;
  bottom:-170px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
 /* box-shadow */
  -webkit-box-shadow: rgba(0,0,0,0.6) 0px 0 5px;
  -moz-box-shadow: rgba(0,0,0,0.6) 0 0 5px;
  box-shadow: rgba(0,0,0,0.6) 0 0 5px;
  position: fixed;
  transition: 0.2s ease-out; 
}
#mes-choix-affiche {
  color: #fff;
  background-color:#1877f2;
  margin: 14px 0px 8px 14px;
  padding: 8px 27px;
  border: none;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  font-size: .9em;
  outline: none;
}
#mes-choix-quit {
  font-size: 1em;
  margin: 18px 20px;
  background-color: inherit;
  color: #7a838d;
  border: none;
  float: right;
}
.mes-choix-btn {
  transition: 0.3s ease-out;
} 
.mes-choix-btn:active{
  color: #00e1ff;
}
.mes-choix-btn:hover{
  color: #00e1ff;
}

#selected-songs-sub-container {
  color: #00e1ff;
  margin-left: 18px;    
  line-height: 22px;
  overflow: hidden;
}
.selected-song {
  max-height: 1.5em;
  max-width:95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease-out;
}
.icone-retirer {
  margin-left: 1px;
}
.selected-song-title {
  margin-left: 10px;
  font-size: 0.9em;
  font-weight: 400;
}
.selected-song-artist {
  color: #7a838d;
  margin-left: 8px; 
  font-size: .55em;
}
#mes-choix-bottom-nav {
  position: absolute;
  top: 18px;
  right: 8%;
  transition: 0.18s ease-out;
}
.mes-choix-bottom-nav-item {
  color:#7a838d;
  font-size: 19px;
  display: inline;
  margin-left: 31px;
}

/*SECTION RECHERCHE*/

#icone-back {
  margin: 5px;
}

/*SECTION VIDEOS*/

.videos-container {
  margin-left: -13px; 
  max-width: 100%;  
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.my-videos {
  z-index: 0;
  width:auto;
  margin: auto;
  margin-bottom: 15px;
}

/*SECTION FORFAITS ET SERVICES*/

#details-container {
  margin-left:8px;
  display:flex;
  flex-direction: row;
  align-items:center;
  width: 96%;
}
#details-description {
  line-height: 16px;
  font-size: .88em;
}
#img-pedalboard {
  width: 215px;
  height: 109.5px;
}
#forfaits-container {
  margin-left: -9px;
  max-width: 98%;
}
.rounded-lg {
  border-radius: 1rem !important;
}
.text-small {
  font-size: 0.9rem !important;
}
.custom-separator {
  width: 5rem;
  height: 6px;
  border-radius: 1rem;
}
.text-uppercase {
  letter-spacing: 0.2em;
}
.nota {
  width:100%;
  text-justify: center;
  font-size: .72em;
}

/*SECTION CONTACT*/

#contact-container {
    margin-left: -13px;
    padding: -10px;
}
.single.contact-info {
  background: none;
  border: none;
}
.info-single {
  padding-bottom: 200px;
}
.single.contact-info li {
  margin-top: 30px;
}
.single.contact-info li .icon {
  display: block;
  float: left;
  margin-left: -12px;
  margin-right: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #a3bbff;
  color: #1877f2;
  text-align: center;
  line-height: 50px;
}

/* MODAL */

#exampleModal {
  margin-top:10px;
  width: 96%;
  margin-left: 2%;
  z-index:100000;
}
.modal-content {
  color: #34393d;
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  border-radius: 0px !important;
}
.modal-body {
  display: flex;
  flex-direction: row;
}
#modal-icon {
  font-size: 74px;
  color:#1877f2;
  margin-left: 8px;
  align-items: flex-start;
}
#modal-text {
  font-size: .8em;
  margin-left: 25px;
  align-items: flex-end;
}

/*SIZE CONSTRAINTS*/

@media (min-width: 350px) {
  .nav-icons {
    margin-right: 0; 
  }
}

@media (min-width: 768px) {
  .navbar-main {
    padding: 10px 25px;
  }
  #main-container {
    margin-left: -1000px;
  }
  #selected-songs-sub-container {
    margin-left: 40px;
  }
  .mes-choix-bottom-nav-item {
    margin-left: 60px;
  }
}

@media (min-width: 1200px) {
  body::-webkit-scrollbar {
    display: block;
  } 
  .header-main {
    padding:16px;
  }
  .my-logo {
    margin-left:20px;
    font-size: 32px;
  }
  #ad-mobile {
    display:block;
    width: 400px;
    top: 18%;
  }
  .one-song-container{
    max-width: 40%;
  }
  #selected-songs-container {
    width: 60%;
    margin-left: 20%;
  }
  #details-container {
    margin-left:20px;
  }
  #details-description {
    line-height: 20px;
    font-size: 1em;
  }
  #img-pedalboard {
    width: 300px;
    height: 152.75px;
  }
  #forfaits-container {
    display: flex;
    flex-direction: column;
  }
  .videos-container {
    margin-left: -280px;
  }
}

@media (min-width: 1680px) {
  #ad-mobile {
    width: 520px;
    top: 13%;
  }
  .one-song-container{
    max-width: 55%;
  }
  #forfaits-container {
    max-width: 55%;
  }
}

@media (min-width: 1900px) {
  #ad-mobile {
    width: 600px;
    top: 12%;
  }
}