/* The r-container */
.r-container {
    display: inline-flex;
    flex-direction: row;
    position: relative;
    padding: 0 0 0 2.5vw;
    margin: 0 0 0 0.3vw;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    font: normal 1.3vw/2.6vw verdana;
    color: #222e40;
}

/* Hide the browser's default radio button */
.r-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 2vw;
    width: 2vw;
    background-color: #222e40;
    border-radius: 15%;
}

/* On mouse-over, add a grey background color */
.r-container:hover input ~ .checkmark {
    background-color: #D52630;
}

/* When the radio button is checked, add a blue background */
.r-container input:checked ~ .checkmark {
    background-color: #222e40;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.r-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.r-container .checkmark:after {
 	top: 20%;
	left: 20%;
	width: 60%;
	height: 60%;
	border-radius: 1%;
	background: #d9dbe0;
}

/* -------------------------------------------------------- */
/* -----------MEDIA QUERY FOR RESPONSIVE SCREEN------------ */
/* -------------------------------------------------------- */

@media only screen and (max-width: 799px) {
            .checkmark {
                height: 4vw;
                width: 4vw;
            }
            .r-container {
                padding: 0 0 0 4.8vw;
                margin: 0 0 0 1.5vw;
                font: normal 2.8vw/5vw verdana;
                color: #222e40;
            }
}