@font-face {
    font-family:'Tofino-Pro';
    src:url('../../fonts/TofinoProPersonalNarrow-Regular.otf');
}

@font-face {
    font-family:'Tofino-Pro-medium';
    src:url('../../fonts/TofinoProPersonalNarrow-Medium.otf');
}

@font-face {
    font-family:'Tofino-Pro-semibold';
    src:url('../../fonts/TofinoProPersonalNarrow-Semibold.otf');
}

@font-face {
    font-family:'Tofino-Pro-bold';
    src:url('../../fonts/TofinoProPersonalNarrow-Bold.otf');
}

@font-face {
    font-family:'Tofino-Pro-book';
    src:url('../../fonts/TofinoProPersonalNarrow-Book.otf');
}


body {
    margin:0;
    padding:0;
    overflow-x:hidden;
    font-family:'Tofino-Pro';
    font-size:14px;
    /*! letter-spacing: 0.8px; */
}

h1, h2, h3, h4, h5, h6 {
    font-family:'Tofino-Pro';
}

p {
    color: #fff;
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 18px;
    /* margin-left: 228px; */
}
.heddar{width: 100%;float: left;background: #2a362c;padding: 10px;}
.images{width: 35%;float: left;}
.images img{
    max-width: 30%;
    cursor: pointer;
    margin-left: -24px;
    }
.heddar-bottum{width: 100%;float: left;background: #2a362c;padding: 0px 1px 0px 3px;}
.images-text{color: #fffdfd;font-size: 13px;/*! font-weight: 500; */margin-top: 9px;margin-left: 2px;text-align: left;/*! font-weight: 600; */}
.images-text p{color: #dbd7d7;font-size: 10px;/*! font-weight: 200; */width: 100%;margin-left: 1px;text-align: left;margin-top: 8px;}
.borde{width: 100%;/* float: left; */}
.borde img{max-width: 80%;/* background: #fff; */margin-left: 17%;}
.multi{width: 100%;background: #2a362c;padding: 12px 10px 22px 10px;float: left;}
.multi-form{width: 100%;float: left;}
.multi-form img{max-width: 100%;}
.radius{width: 100%;float: left;border-radius: 16px;background: #fff;padding: 16px;margin-top: 30px;min-height: 380px;}
.radius img{max-width: 50%;margin-left: 23%;margin-top: 20px;margin-bottom: 20px;}
.radi-text{color: #000;font-size: 11px;text-align: center;font-weight: 600;margin-bottom: 13px;}
.better{width: 100%;text-align: center;margin-bottom: 48px;font-size: 11px;}
.radius-2{width: 100%;/* float: left; */border-radius: 16px;background: #1f2721;padding: 10px;margin-top: 30px;margin-left: 3%;display: flow-root;min-height: 380px;}
.hear{width: 100%;float: left;color: #000;font-size: 20px;font-weight: 600;}
.better-1{width: 100%;text-align: center;margin-bottom: 10px;color: #fff;}
.radi-text-1{color: #fff;font-size: 20px;text-align: center;font-weight: 600;margin-bottom: 40px;}
.footer{width: 100%;background: #1f2721;padding: 10px;float: left;}
.footer-contact{width: 100%;float: left;}
.footer-contact ul{list-style: none;margin: 0px;margin-left: 0;padding: 0;text-align: center;}
.footer-contact ul li{color: #dbd7d7;font-size: 12px;display: inline-block;padding: 4px 10px;/*! width:32% */}
.footer-contact ul li a {color: #dbd7d7;}
.sprout{width: 100%;text-align: center;margin-bottom: 5px;margin-top: 6px;}
.Hear-text{color: #fff;font-size: 20px;font-weight: 600;width: 100%;/*! float: left; */text-transform: uppercase;font-family: 'Tofino-Pro-semibold';}
.sileenc{width: 100%;/* float: left; */font-size: 11px;color: #dbd7d7;/*! font-weight: 200; */margin-bottom: 0px;}
.normallya{width: 100%;float: left;margin: 10px 0 0;}
.normallya ul{list-style: none;margin: auto;/* float: left; */padding-left: 0;}
.normallya ul li{display: inline-block;/* background: #fff; *//* padding: 10px 37px; */}
.normallya ul li a{color: #000;font-size: 8px;text-decoration: none;background: #fff;padding: 5px 10px;/* float: left; */margin: 20px 5px;margin-bottom: 13px;border-radius: 4px;}
.college{width: 50%;/* float: left; */}
.complete{width: 49%;/* float: left; */}

.images-logo{width: 32%;}
.sprout img{max-width: 35%;}
.foot{width: 100%;float: right;}.foot img{max-width: 50%;float: right;}

.quizFtr {
    text-align: center;
    position: relative;
    margin-bottom: 5px;
    padding-top: 7px;
}

.quizFtr span {
    width:10px;
    height:1px;
    background:#8e918e;
    display: inline-block;
}

.quizFtr span.active {
    background:#fff;
}

.quizFtr ul {
    padding: 0;
    margin: 0;
    position:absolute;
    top: 12px;
    right: 0;
}

.quizFtr ul li {display:inline-block;vertical-align: top;}

.quizFtr ul li a, .quizFtr ul li button {
    background: #fff;
    color:#000;
    width:15px;
    height: 15px;
    display: block;
    font-size: 10px;
    border-radius: 50%;
    text-align: center;
    padding: 0;
    border: none;
    line-height: 15px;
    outline: none;
}

.customRadio {
  display: block;
  position: relative;
  padding-right: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #333;
  font-size: 13px;
}

.customRadio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

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

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

.customRadio input:checked ~ .checkmark {
  background-color: #2196F3;
}

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

.customRadio input:checked ~ .checkmark:after {
  display: block;
}

.customRadio .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

.customRadio .checkmark {display: none;}

.customRadio .radioBtn {background: #fff;min-width: 120px;display: inline-block;text-align: center;padding: 6px 6px;border-radius: 4px;line-height: initial;} 

.customRadio input:checked ~ .radioBtn {background: #01b3ff;color:#fff;}

.customRadio .radioBtn:hover {background: #84dc00;}


/*------------*/
@media (min-width:768px) {

    .images-logo {
        width:180px;
    }

    .heddar {
        text-align:center;
        padding-bottom: 35px;
        padding-top: 35px;
    }

    .menuIcon {
    display: none;
    }

    .images-text {
        font-size:30px;
    }
    .images-text h2 {font-size: 32px;margin-bottom: 12px;font-family: 'Tofino-Pro-medium';}
    
    .images-text h4 {font-size: 22px;color: #e1dfdf;font-weight: normal;/*! font-family: 'Roboto', sans-serif; */margin-bottom: 15px;}

    .images-text p {
        font-size:15px;
        font-family: 'Tofino-Pro-book';
    }

    .heddar, .heddar-bottum, .multi, .footer {
    padding-left: 20%;
    padding-right: 20%;
    }

    .multi {
        padding-bottom:55px;
    }

    .Hear-text {
        font-size:32px;
        padding-bottom: 15px;
    }

    .sileenc, .better {
        font-size:15px;
    }
    
    .sileenc h3, .better h3 {font-size:32px;font-weight: 600;font-family: 'Tofino-Pro-semibold';text-transform: uppercase;}

    .normallya {
        padding-bottom:14px;
    }

    .radius-2 {
        padding:40px 50px;
        min-height: 525px;
    }

    .radi-text {
        font-size:16px;
    }

    .quizFtr span {
        width:20px;
        height: 2px;
    }

    .quizFtr ul li a, .quizFtr ul li button {
        width:35px;
        height:35px;
        font-size:18px;
        line-height: 38px;
    }
    
    .quizFtr ul li a[disabled='disabled'], .quizFtr ul li button[disabled='disabled'] {opacity: 0.65;}

    .radius {
        text-align:center;
        padding: 55px 15px 20px;
        min-height: 525px;
    }
    
    .radius .better {width: 75%;margin: auto;font-family: 'Tofino-Pro-book';}

    .radius img {
        width:165px;
        margin: 0 auto 15px;
    }

    .footer {
        padding-top:35px;
        padding-bottom:35px;
    }

    .sprout img {
        width:145px;
        max-width: initial;
    }

    .footer-contact ul li {
        text-align:left;
        font-size:14px;
        width: 32%;
    }

}

@media (max-width:767px) {
    .images-text h2 {font-size: 20px;font-weight: bold;}
    .images-text h4 {font-size: 14px;color: #e1dfdf;font-weight: normal;}
    .customRadio {font-size: 11px;}
    .images-text p {font-size: 11px;}
    .customRadio .radioBtn {min-width: 45px;}
    .sileenc h3, .better h3 {font-size:20px;font-weight: 600;}
    .heddar-bottum .college {width: 53%;}
.heddar-bottum .complete {width: 46%;}
    .Hear-text {margin-bottom:15px;}
}