/* Reset styles
  –––––––––––––––––––––––––––––––––––––––––––––––––– */


pre, blockquote, dl, figure, table, p, ul, ol, form {
    margin-bottom: 0px;
}
ul>li {
    margin-bottom:0px;
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0px;
    letter-spacing: normal;
}
button {
    height:auto;
    padding: 0;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    border: none;
    border-radius: 0;
    margin-bottom:0;
}
/* Footer to stick to the bottom of the screen */
#wrapper {
  min-height:100%;
  position:relative;
}
#content {
  padding-bottom:100px;   /* Height of the footer element */
}
#footer {
  width:100%;
  height:100px;
  position:absolute;
  bottom:0;
  left:0;
}
/* Main styles
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.header {
  background-color: #333333;
}

.header-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 20px;
}

.header-container img {
  display: block;
  padding: 20px 0px;
}

.banner {
  background-image: url(https://www.uploadlibrary.com/Tiso/preference-centre/img/background-banner.png);
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 380px;
  margin-bottom: 40px;
  background-position: center;
}

.banner-container {
  display: flex;
  align-items: center;
  min-height: 380px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 35px;
  font-weight: 600;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 40px;
  padding: 0px 20px;
}

.title {
  font-family: 'Roboto Slab', sans-serif;
  font-weight: 400;
  font-size: 23px;
  color: #333333;
  line-height: 29px;
}

.note {
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
}

.pad-bot-40 {
  padding-bottom: 40px;
}

.imgOptionContainer {
  display: flex;
  align-items: center;
  min-height: 180px;
  margin-left: -50px;
}

.imgOption {
  display: block;
  margin: 0px auto;
  padding-bottom: 30px;
}

/* Checkbox Styling
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .control, .control2 {
	font-size: 16px;
	position: relative;
	display: block;
	margin-bottom: 15px;
	padding-left: 50px;
	cursor: pointer;
  padding-top: 5px;
}

.control input, .control2 input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.control__indicator {
	position: absolute;
	top: 2px;
	left: 0;
	width: 30px;
	height: 30px;
	background: #ffffff;
  border: 1px solid #333333;
}

.control__indicator2 {
	position: absolute;
	top: 183px;
	left: 0;
	width: 30px;
	height: 30px;
	background: #ffffff;
  border: 1px solid #333333;
}

.control--radio .control__indicator,
.control--radio .control__indicator2 {
	border-radius: 50%;
}

/* Hover and focus states */
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator,
.control2:hover input ~ .control__indicator2,
.control2 input:focus ~ .control__indicator2 {
	background: #ffffff;
}

/* Checked state */
.control input:checked ~ .control__indicator,
.control2 input:checked ~ .control__indicator2 {
	background: #64b84a;
  border: 1px solid #64b84a;
}

/* Hover state whilst checked */
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator,
.control2:hover input:not([disabled]):checked ~ .control__indicator2,
.control2 input:checked:focus ~ .control__indicator2 {
	background: #64b84a;
}

/* Disabled state */
.control input:disabled ~ .control__indicator,
.control input:disabled ~ .control__indicator2 {
	pointer-events: none;
	opacity: .6;
	background: #e6e6e6;
}

/* Check mark */
.control__indicator:after,
.control__indicator2:after {
	position: absolute;
	display: none;
	content: '';
}

/* Show check mark */
.control input:checked ~ .control__indicator:after,
.control2 input:checked ~ .control__indicator2:after {
	display: block;
}

/* Checkbox tick */
.control--checkbox .control__indicator:after,
.control--checkbox .control__indicator2:after {
	top: 4px;
	left: 10px;
	width: 7px;
	height: 15px;
	transform: rotate(45deg);
	border: solid #fff;
	border-width: 0 2px 2px 0;
}


/* Disabled tick colour */
.control--checkbox input:disabled ~ .control__indicator:after {
	border-color: #7b7b7b;
}

/* Radio button inner circle */
.control--radio .control__indicator:after {
	top: 7px;
	left: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
}

/* Disabled circle colour */
.control--radio input:disabled ~ .control__indicator:after {
	background: #7b7b7b;
}


.footer {
  background-color: #333333;
  width: 100%;
  min-height: 80px;
}


@media (min-width: 550px) {
  .banner-container, .header-container {
    width: 80%;
    padding: 0px;
  }

  .banner-container {
    font-size: 70px;
    line-height: 80px;
    min-height: 480px;
  }

  .banner {
    min-height: 480px;
  }

}

@media (max-width: 550px) {
  .control2 {
    font-size: 14px;
  }

  .control__indicator2 {
    top: 110px;
  }

  .imgOptionContainer {
    min-height: 110px;
  }

  .imgOption {
    width: auto;
    max-height: 80px;
  }

  .button-primary {
    width: 100%;
    padding: 0px 0px !important;
    font-size: 15px !important;
  }

}