@font-face {
  font-family: "FontAwesome";
  font-weight: normal;
  font-style : normal;
      src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-solid-400.ttf");
}

@font-face {
  font-family: 'GothamLight';
  src: url('../fonts/GothamLight.ttf');
}
@font-face {
  font-family: 'GothamMedium';
  src: url('../fonts/GothamMedium.ttf');
}
@font-face {
  font-family: 'GothamBook';
  src: url('../fonts/GothamBook.ttf');
}
@font-face {
  font-family: 'GothamBold';
  src: url('../fonts/GothamBold.ttf');
}



.radiostars.form-checked{
  background:transparent;
}

body{
  font-family:'GothamBook', sans-serif;;
}

h1{
  font-family:'GothamMedium', sans-serif;;
}

h1.blue-primary-title {
  font-family: Gotham;
  font-style: normal;
  font-weight: bold;
  font-size: 45px;
  line-height: 43px;
  text-align: center;
  color: var(--main-color);
}

p{
  font-family:'GothamBook', sans-serif;;
}

.btn-primary, .btn-secondary{
  font-family: 'GothamMedium', sans-serif;;
}

.questionSection{
  font-family:'GothamMedium', sans-serif;
  font-size:24px;
}

.sortable-answer{
  background-image:url('../images/equal.svg');
  font-family:'GothamBook', sans-serif;
}

.number-step{
  font-family: 'GothamMedium', sans-serif;
}

.number-section{
  font-family: 'GothamBook', sans-serif;
}

.answer-question{
  font-family:'GothamMedium', sans-serif;
}

.answer-label{
  font-family:'GothamMedium', sans-serif;
}

.answer-paragraph{
  font-family: 'GothamLight', sans-serif;
}

.introduction{
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;
  -webkit-column-width:50px;
  -moz-column-width:50px;
  column-width:50px;
  width: 500px;
  height:550px;
  text-align: left;
  margin-top:40px;
  margin-left: 100px;
}
.conclusion{
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;
  -webkit-column-width:150px;
  -moz-column-width:150px;
  column-width:150px;
  width:50%;
  height:640px;
}

/* Page for notes*/
.notes-page{
  display:block;
  page-break-after:always;
  height:100%;
  padding-top:50px;
}
.notes-page-title{
  font-family: 'GothamBold', sans-serif;
  text-transform: uppercase;
  color: var(--main-color);
}
.notes-page-title > span{
  font-family: 'GothamLight', sans-serif;
  font-weight:normal;
}
hr{
  border-top: 1px solid cornflowerblue;
  margin-top: 2rem;
  margin-bottom: 3.125rem;
}

/*Progress bar*/

ul.progress-bar-divisions{
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
}

ul.progress-bar-divisions a{
  list-style-type: none;
  float: left;
  position: relative;
}
ul.progress-bar-divisions a.customtooltip::before{
  width: 12px;
  height: 12px;
  content: "";
  line-height: 12px;
  border: 2px solid var(--light-orange);
  display: block;
  text-align: center;
  margin: -3px auto auto -6px;
  border-radius: 50%;
  background-color: white;
  pointer-events: all;
}

.customtooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  /* background-color: black; */
  color: #fff;
  text-align: left;
  /* border-radius: 6px; */
  padding: 5px 0;
  font-size: 14px;

  /* Position the tooltip */
  position: absolute;
  top: -35px;
  z-index: 1;
}

.customtooltip:hover .tooltiptext {
  visibility: visible;
}

/*Sharing*/
.menu {
    z-index: 999;
    position: relative;
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  .menu .share i.fas {
    text-align: center;
    background-color: var(--light-orange);
  }

.submenu li{
    width:75px;
    height:75px;
}

.submenu a i{
  color:white;
}

.menu .share:hover.top .submenu li:hover{
opacity:1;
}

.menu .share:hover.top .submenu li:nth-child(1) {
  opacity: 0.7;
  top: -72px;
  transition-delay: 0.08s;
  transform: rotateY(0deg);
  color: white;
  background-color: var(--light-orange);
  cursor: pointer;
}
.menu .share:hover.top .submenu li:nth-child(2) {
  opacity: 0.7;
  top: -147px;
  transition-delay: 0.16s;
  transform: rotateY(0deg);
  color: white;
  background-color: var(--light-orange);
  cursor: pointer;
}
.menu .share:hover.top .submenu li:nth-child(3) {
  opacity: 0.7;
  top: -222px;
  transition-delay: 0.24s;
  transform: rotateY(0deg);
  color: white;
  background-color: var(--light-orange);
  cursor: pointer;
}
.menu .share:hover.top .submenu li:nth-child(4) {
  opacity: 0.7;
  top: -297px;
  transition-delay: 0.32s;
  transform: rotateY(0deg);
  color: white;
  background-color: var(--light-orange);
  cursor: pointer;
}
.menu .share:hover.top .submenu li:nth-child(5) {
  opacity: 0.7;
  top: -372px;
  transition-delay: 0.4s;
  transform: rotateY(0deg);
  color: white;
  background-color: var(--light-orange);
  cursor: pointer;
}
.menu .submenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.menu .submenu li {
  transition: all ease-in-out 0.5s;
  position: absolute;
  top: 0;
  left: -10px;
  z-index: -1;
  opacity: 0;
}
.menu .submenu li a {
  color: #212121;
}
.menu .submenu li a:hover i.fas {
  color: #fff;
}
.menu .submenu li a:hover.facebook i.fas {
  background-color: #3b5999;
}
.menu .submenu li a:hover.twitter i.fas {
  background-color: #55acee;
}
.menu .submenu li a:hover.googlePlus i.fas {
  background-color: #dd4b39;
}
.menu .submenu li a:hover.instagram i.fas {
  background-color: #e4405f;
}
.menu .submenu li:nth-child(1) {
  transform: rotateX(45deg);
}
.menu .submenu li:nth-child(2) {
  transform: rotateX(90deg);
}
.menu .submenu li:nth-child(3) {
  transform: rotateX(135deg);
}
.menu .submenu li:nth-child(4) {
  transform: rotateX(180deg);
}

#sharing-bar i{
  font-size:26px !important;
}

input#rememberme{
  position: unset;
}

@media screen and (max-width: 767px) {

  #sharing-bar i {
    font-size: 16px !important;
  }

  .submenu li img{
    height:20px;
  }

  .menu .share:hover.top .submenu li:nth-child(1) {
    opacity: 0.7;
    top: -51px;
    width:45px;
    height:45px;
  }
  .menu .share:hover.top .submenu li:nth-child(2) {
    opacity: 0.7;
    top: -96px;
    width:45px;
    height:45px;
  }
  .menu .share:hover.top .submenu li:nth-child(3) {
    opacity: 0.7;
    top: -141px;
    width:45px;
    height:45px;
  }
  .menu .share:hover.top .submenu li:nth-child(4) {
    opacity: 0.7;
    top: -186px;
    width:45px;
    height:45px;
  }
  .menu .share:hover.top .submenu li:nth-child(5) {
    opacity: 0.7;
    top: -231px;
    width:45px;
    height:45px;
  }

  .menu .share:hover.top .submenu li:nth-child(1):hover, .menu .share:hover.top .submenu li:nth-child(1):focus{
    opacity:1;
  }
  .menu .share:hover.top .submenu li:nth-child(2):hover, .menu .share:hover.top .submenu li:nth-child(2):focus{
    opacity:1;
  }
  .menu .share:hover.top .submenu li:nth-child(3):hover, .menu .share:hover.top .submenu li:nth-child(3):focus{
    opacity:1;
  }
  .menu .share:hover.top .submenu li:nth-child(4):hover, .menu .share:hover.top .submenu li:nth-child(4):focus{
    opacity:1;
  }
  .menu .share:hover.top .submenu li:nth-child(5):hover, .menu .share:hover.top .submenu li:nth-child(5):focus{
    opacity:1;
  }
}

button.saveAndQuit{
  background: transparent;
  color: white;
  border: none;
  outline: none;
}