@font-face {
    font-family: Calibri;
    src: url('/fonts/Calibri.ttf');
}

@font-face {
    font-family: Calibri Bold;
    src: url('/fonts/CALIBRIB.ttf');
}

@font-face {
    font-family: Calibri Italic;
    src: url('/fonts/CALIBRII.ttf');
}

html, body {
    background-color: #fff;
    background-image: linear-gradient(to right, #08305B , #2578C0);
    /*color: #636b6f;*/
    color: #333;
    font-family: 'Calibri', sans-serif;
    font-weight: 200;
/*    height: 100vh;*/
    margin: 0;
}

.bg-survey {
    background-image:
    linear-gradient(to bottom, rgba(37, 120, 192, 0.52), rgba(8, 48, 91, 0.6)),
    url('/images/bg1.jpg');
     
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

img.bg-survey {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px){
    img.bg-survey {
    left: 50%;
    margin-left: -512px; }
}

.full-height {
    height: 100vh;
}

.flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
}

.position-ref {
    position: relative;
}

.top-right {
    position: absolute;
    right: 10px;
    top: 18px;
}

.title {
    font-size: 84px;
}

.m-b-md {
    margin-bottom: 30px;
}

.name,
.company-name,
.email {
    font-weight: 600;
    font-size: 1.2rem;
}

.survey-border {
    border: 1px solid rgba(37,120,192, 1);
}

.survey-header {
    background-image: linear-gradient(170deg, white , #2578C0);
}

.survey-header-text h5 {
    color: #fff; 
    font-weight: 600; 
}

/* Question 1 */

.question_1 label {
        cursor: pointer;
        font-weight: 600;
}

.question_1 input:checked + label {
  border: 2px solid #2a91fd !important;
}

.question_1 input[type="radio"] {
    display: none;
}

.question_1_choices {
    background-size: cover; 
    border: 1px solid #808080; 
    width: 9em; 
    background-color: #e7e6e6; 
    padding: 30px 10px; 
    text-align: center; 
    word-break: break-word;
}

/* Question 2 */
.work-quality,
.service-quality {
  font-weight: 900;
}

.radio-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 500;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 3px;
  left: 3px;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
}

.radio-container:hover input ~ .checkmark {
  background-color: #ccc;
}

.radio-container input:checked ~ .checkmark {
  background-color: #08305B;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio-container input:checked ~ .checkmark:after {
  display: block;
}

.radio-container .checkmark:after {
    top: 7px;
    left: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

/* Question 3 */
.question_3 label {
    cursor: pointer;
}

.question_3 input:checked + label {
    border: 2px solid #2a91fd !important;
}

.question_3 input[type="radio"] {
    display: none;
}

.question_3_choices {
    background-size: cover; 
    border: 1px solid #808080; 
    width: 4em; 
    background-color: #e7e6e6; 
    padding: 20px 10px; 
    text-align: center; 
    word-break: break-word;
    font-weight: 600;
}

.very-likely {
    font-weight: 600; 
    border: 2px solid #808080; 
    padding: 0.3em 3.7em; 
    text-align:center;
}

.not-likely {
    margin-right: 15em;
    font-weight: 600; 
    border: 2px solid #808080; 
    padding: 0.3em 4em; 
    text-align:center;
}

@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) {
  html, body {
    margin: 0;
  }

  .survey-container {
    width: 52%;
  } 

  .survey-header {
    background-image: linear-gradient(30deg, white , #2578C0);
  }
}