div#textIntro {
	border-bottom: 1px solid #eee;
	padding-bottom: 50px;
}

button[data-go="part1"] {
	font-size: 20px;
}

div.prop {
	padding-top: 30px;
	text-align: center;
	display: block;
	border-bottom: 1px solid #eee;
	font-size:18px;
	padding-bottom: 30px;
}

div.question {
	margin-top:12px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 13px;
	text-align: center;
}

body {
	font-size: 13px;
}

div.radioContainer {
	text-align: center;
	margin-top: 15px;
}

.bold {
	font-weight: bold;
}

span.left {
	line-height: 15px;
	padding-left:5px;
	font-weight: bold;
}

span.right {
	padding-right: 5px;
	font-weight: bold;
}

div.prop input[type="radio"] {
	margin: 2px;
	margin-top: 5px;
	margin-bottom: 5px;
	transform: scale(1.2);
}

div.logo img {
	top: -24px;
    position: absolute;
    height: 40px;
}

div.part {
	padding-top: 10px;
}

div#partConfirm {
	text-align: center;
}

div#partConfirm p {
	padding-left: 25px;
	padding-right: 25px;
	font-size: 14px;
	font-style: italic;
}

button.right {
	float: right;
	margin-right: 15px;
}

a.right {
	float: right;
	margin-right: 15px;
}

button.left {
	float: left;
	margin-left: 15px;
}

p.description {
	font-size: 12px;
	text-align: center;
	font-style: italic;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: -40px;
}

div.butDiv {
	margin-bottom: 15px;
	text-align: center;
	margin-top: 19px;
}

div#partConfirm div.butDiv {
	margin-top:0px;
	margin-bottom: 35px;
}

div.butDiv button {
	font-weight: bold;
}

div.butDiv a {
	font-weight: bold;
}

nav.navbar-inverse {
	position: absolute;
}

div#introduction {
	position: relative;
	margin-bottom: 100px;
	padding-top: 32px;
	padding-left: 55px;
	padding-right: 55px;
}

div#introduction .lastRes {
	font-size: 14px;
	position: absolute;
    text-align: right;
    right: 0px;
    top: 8px;
	font-style: italic;
	color: #555;
	font-family: arial;
}

div#introduction h1 {
	margin-bottom: 40px;
	margin-top: 40px;
	font-size: 24px;
}

div#textIntro p {
	margin-bottom: 15px;
	text-align: center;
}

div#introduction button {
	margin-top: 10px;
    font-size: 24px;
    padding: 10px 12px;
    border: #06002d;
    background-color: #211093;
    color: #fff;
    font-weight: normal;
}

div#introduction button:hover {
	background-color: #4435a7;
}

div.pag {
	text-align: center;
	margin-top: 18px;
	padding-left: 20px;
	padding-right: 20px;
}

div.percent {
	font-size: 10px;
}

div#introduction div.comments {
	margin-top: 50px;
	text-align: center;
}

h2 {
	font-weight: bold;
	font-size: 18px;
	margin-top: 40px;
	margin-bottom:20px;
}

ul b { 
	margin-bottom: 10px;
    display: inline-block;
}

#introduction ul b {
	display: inline-block;
    margin-bottom: 10px;
    margin-top: 15px;
}

div#containing li {
	margin-top:10px;
}

div.mbti p {
	text-align: left;
}

.mbti h2#def {
	margin-top:50px;
}

.mbti h3 {
	margin-top:30px;
	text-align: left;
	font-weight: bold;
}

.mbti li a, .mbti li a:focus, .mbti li a:active, .mbti li a:visited, .mbti a.more {
	color: #0000c5;
	text-decoration: underline;
}

.mbti li a:hover, .mbti a.more:hover {
	color: #4848ff;
}

div.comments h2 {
	margin-bottom: 40px;
	font-style: italic;
	text-decoration: underline;
	font-size: 20px;
	color: #444;
}

span.errLock {
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 20px;
    display: inline-block;
    color: #F33;
}

div.comments .row {
	padding-bottom: 20px;
	padding-top: 20px;
}

div.comments .row:not(:last-child) {
	border-bottom: 1px solid #eee;
}

div.comments .mark {
	font-style: italic; 
}

div.comments .created {
	text-align: right;
}

div.pageNumbers {
	display: inline-block;
    padding-top: 10px;
    color: #eee;
    font-size: 18px;
}

div.pageNumbers a {
	padding: 3px 6px;
    border: 1px solid #cbcbcb;
    background-color: #dadada;
    border-radius: 5px;
}

div.pageNumbers .current {
	color: #666;
    padding: 3px 6px;
    border: 1px solid #cbcbcb;
    background-color: #dadada;
    border-radius: 5px;
}

span.next a, span.prev a {
	width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

span.next {
	float: right;
    height: 33px;
    text-align: center;
    width: 38px;
    display: block;
    position: relative;
    margin-bottom: 10px;
    font-size: 24px;
    margin-left: -50px;
    border: 1px solid #cbcbcb;
    background-color: #dadada;
}

span.prev {
	float: left;
    height: 33px;
    text-align: center;
    width: 38px;
    display: block;
    position: relative;
    margin-bottom: 10px;
    font-size: 24px;
    margin-right: -50px;
    border: 1px solid #cbcbcb;
    background-color: #dadada;
}

div.comBtn {
	border-bottom: 1px solid #eee;
	padding-bottom: 20px;
}

div.rate {
	margin-top: 40px;
	font-family: arial;
	margin-top: 25px;
	font-size: 16px;
}

div.rateDesc {
	font-style: italic;
	color: #555;
	font-size:16px;
}

div.rate .details {
	font-size:16px;
}

.prop.row.uncheckedProp {
	background-color: #ffbebe;
}

.stars-container {
  position: relative;
  display: inline-block;
  color: transparent;
}

.stars-container .before {
  position: absolute;
  top: 0;
  left: 0;
  color: lightgray;
}

.stars-container .after {
  position: absolute;
  top: 0;
  left: 0;
  color: gold;
  overflow: hidden;
}

div.checkbox input {
	width: 20px;
	height: 30px;
	border-radius: 10px;
	margin-top: 10px;
	position: absolute;
}
div.checkbox input {
	width: 20px;
	height: 30px;
	border-radius: 10px;
	margin-top: 10px;
	position: absolute;
}

div.checkbox label {
	text-align: left;
margin-left: 30px;
margin-top: 14px;
font-size: 15px !important;
}

.stars-0 .after { width: 0%; }
.stars-10 .after { width: 10%; }
.stars-20 .after { width: 20%; }
.stars-30 .after { width: 30%; }
.stars-40 .after { width: 40%; }
.stars-50 .after { width: 50%; }
.stars-60 .after { width: 60%; }
.stars-70 .after { width: 70%; }
.stars-80 .after { width: 80%; }
.stars-90 .after { width: 90%; }
.stars-100 .after { width: 100; }

div.radioContainer span.true {
	display: block;
    width: 100%;
    text-align: center;
    max-width: 100%;
    margin-top: 30px;
    color: #085f00;
    font-weight: bold;
}

div.radioContainer span.false {
	display: block;
    width: 100%;
    text-align: center;
    max-width: 100%;
    color: #6003d0;
    font-weight: bold;
}

div.radioContainer span {
	color: #777;
	font-family: Arial;
	font-size:16px;
}

/* Customize the label (the container) */
.labelContainer {
	display: inline-block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 20px;
	cursor: pointer;
	font-size: 24px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
  /* Hide the browser's default radio button */
  .labelContainer input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
  }
  
  /* Create a custom radio button */
  .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 35px;
	width: 35px;
	background-color: #e5e5e5;
	border-radius: 50%;
  }
  
  /* On mouse-over, add a grey background color */
  .labelContainer:hover input ~ .checkmark {
	background-color: #ccc;
  }
  
  /* When the radio button is checked, add a blue background */
  .labelContainer input:checked ~ .checkmark {
	background-color: #2196F3;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .labelContainer input:checked ~ .checkmark:after {
	display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .labelContainer .checkmark:after {
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
  }
  
  .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#e8e8e8!important}
  .w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
  span.prog {
	  font-size: x-small;
	  top: 2.5px;
	  position: relative;
  }
  .w3-blue {
	overflow:hidden;
	color: #000 !important;
  }

	div.radioContainer span {
		font-size: 12px;
	}

	@media (min-height: 620px) and (min-width: 320px){
		p.description {
			font-size: 14px;
		}
		div.question {
			margin-top: 12px;
			font-size: 15px;
		}
		body {
			font-size: 15px;
		}
		div.radioContainer span {
			font-size: 15px;
		}
	  }


  @media (min-height: 639px){
	p.description {
		font-size: 14px;
	}
	div.question {
		margin-top: 12px;
		font-size: 16px;
	}
	body {
		font-size: 16px;
	}
	div.radioContainer span {
		font-size: 16px;
	}
  }

  @media (min-height: 667px) or (min-width: 374px){
	p.description {
		font-size: 15px;
	}
	div.question {
		margin-top: 12px;
		font-size: 16px;
	}
	body {
		font-size: 16px;
	}
	div.radioContainer span {
		font-size: 16px;
	}
  }

  @media (min-height: 730px){
	p.description {
		font-size: 16px;
		margin-top: -30px;
	}
	div.question {
		font-size: 18px;
	}
	body {
		font-size: 18px;
	}
	div.radioContainer span {
		font-size: 18px;
	}
	div.percent {
		font-size: 14px;
		margin-top: 55px;
	}
  }

  @media (min-height: 799px){
	div.question {
		margin-top: 45px;
	}
  }

  @media (min-height: 700px) and (min-width: 750px){
	div.question {
		margin-top:80px;
		font-size: 18px;
	}
	div.percent {
		font-size: 14px;
		margin-top: 55px;
	}
	body {
		font-size: 18px;
	}
  }

  @media (min-width: 675px){
	.lastRes {
  		width: 470px;
	}
  }

  @media (max-width: 498px){
	div#introduction h1 {
		margin-top: 70px;
	}
	.lastRes {
		width: 180px;
	}
	div#introduction {
		padding-left: 10px;
		padding-right: 10px;
	}

	}

	@media (min-height: 756px) and (min-width: 1205px){
		div#introduction {
			text-align: center;
		}
		#introduction .logo, #introduction li, #introduction .rate {
			text-align: left;
		}

		p.description {
			max-width: 400px;
			display:inline-block;
		}
		div.pag {
			max-width: 400px;
			display:inline-block;
			width: 100%;
		}
		div.radioContainer span.false  {
			max-width: 400px;
			display:inline-block;
		}
		div.radioContainer span.true  {
			max-width: 400px;
			display:inline-block;
		}
		label.labelContainer {
			padding-left: 40px;
			margin-top: 20px;
		}
	  }

	  @media (min-height: 756px) and (min-width: 1280px){
		p.description {
			max-width: 545px;
		}
		div.radioContainer span.false  {
			max-width: 545px;
		}
		div.radioContainer span.true  {
			max-width: 545px;
		}
		div.pag {
			max-width: 545px;
		}
	  }