/* styles.css*/

/*main css*/

@font-face {
  font-family: 'PublicoHeadline'; /* Name your font family */
  src: url('../Fonts/PublicoHeadline-Black-05.otf'); /* Locate the .ttf file within your directory*/
}


* {
   box-sizing: border-box;
}

img {
   width: 100%;
   display: block;
}

body {

}

h1 {
   font-family: PublicoHeadline;
}

h2 {
   font-family: proxima-nova, sans-serif;
}

h4 {
   font-family: PublicoHeadline;
   margin-top: 60px;
}

p {
   font-family: proxima-nova, sans-serif;
}

button {
   font-family: proxima-nova-bold, sans-serif;
   font-weight: 700;
   font-style: normal;
   text-transform: uppercase;
   cursor: pointer;
   background-color: #8faedf;
   color: white;
   padding: 5px;
   border: none;

}

button:hover {
   transform: scale(1.1);
}

.startoverclass {
   width: 150px;
   margin: auto;
}

.startoverbutton {
   width: 150px;
   margin: auto;
   margin-top: 20px;
}

.bold { font-family: proxima-nova-bold, sans-serif; font-weight: bold; }

.container {
   max-width: 738px;
   margin: auto;
   padding: 20px;
}

.description {
   font-family: proxima-nova, sans-serif;
   margin-bottom: 30px;
}

/*.questions {
   display: none;
}*/

.backbutton {
   display: none;
}

.finishbutton {
   display: none;
}

.question {
   font-family: proxima-nova-bold, sans-serif;
   font-weight: 900;
   margin-left: 20px;
   font-size: 22px;
}

.answers {
   padding: 20px;
   font-family: proxima-nova, sans-serif;
   margin-left: 40px;
   font-size: 20px;
}



/*----------------------DROPDOWN STYLING-----------------------*/

/* Dropdown Button */
.dropbtn {
  background-color: #40B062;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
/*  background-color: #3e8e41;*/
}

#myDropdown {
   font-family: proxima-nova, sans-serif;
   height: 250px;
   overflow: scroll;
}

/* The search field */
#myInput {
  box-sizing: border-box;
/*  background-image: url('searchicon.png');*/
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
  width: 100%;
}

/* The search field when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  width: 300px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  width: 100%;
  border: 1px solid #ddd;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/*----------------------END DROPDOWN STYLING-----------------------*/


/*----------------------answers styling-----------------------*/

.howdidyouanswer {
   display: none;
   width: 100%;
}

.answerchart {
   margin: 0px;
   width: 100%;
   background-color: grey;
   height: 95px;
   display: flex;
   font-family: proxima-nova, sans-serif;
   color: white;
}

.howdidyouanswer h4 {
   font-size: 22px;
}

.howdidyouanswer p {
   font-size: 18px;
}

.answer2, .answer3, .answer4, .answer5, .answer6 {text-transform: lowercase; font-family: proxima-nova-bold, sans-serif;}
.answer2number, .answer3number, .answer4number, .answer5number, .answer6number {font-weight: bold; font-family: proxima-nova-bold, sans-serif;}

.chart_1, .chart_2 {
   height: 100%;
   position: relative;
}

.chart_1 {
   background-color: #40B062;
   width: 45%;
   text-align: left;

}

.chart_words {
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
   padding: 5px;
   line-height: 15px;
}

.chart_1_val, .chart_2_val {
   font-family: proxima-nova-bold, sans-serif;
   font-weight: 700;
   font-size: 1.2em;
}

.chart_0 {
   background-color: #ABABAB;
   width: 10%;
   text-align: left;

}

.chart_2 {
   background-color: #5786D0;
   width: 45%;   
   text-align: right;

}

/*____________US ANSWERS___________*/

.USanswer2chart .chart_0 {width: 0%}
.USanswer2chart .chart_1 {width: 64%}
.USanswer2chart .chart_2 {width: 36%}

.USanswer3chart .chart_0 {width: 10%}
.USanswer3chart .chart_1 {width: 70%}
.USanswer3chart .chart_2 {width: 20%}

.USanswer4chart .chart_0 {width: 0%}
.USanswer4chart .chart_1 {width: 79%}
.USanswer4chart .chart_2 {width: 21%}

.USanswer5chart .chart_0 {width: 0%}
.USanswer5chart .chart_1 {width: 74%}
.USanswer5chart .chart_2 {width: 26%}

.USanswer6chart .chart_0 {width: 15%}
.USanswer6chart .chart_1 {width: 62%}
.USanswer6chart .chart_2 {width: 23%}


/*----------------------end answers styling-----------------------*/



/*media query for responsive design */

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

      .question {
         margin-left: 0px;
      }

      .answers {
         margin-left: 0px;
      }

      .chart_words {
         font-size: 12px;
         line-height: 12px;
      }

}