<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="cc-selector">
<input id="immediately" type="radio" name="training">
<label class="training" for="immediately">
<svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
<g>
<g>
<path d="M100.069,90.515c30.286-20.191,30.301-67.761,0-87.96c-6.958-4.585-16.216-2.739-20.801,4.16 c-4.6,6.899-2.725,16.216,4.16,20.801c12.521,8.337,12.521,28.702,0,37.039c-30.286,20.189-30.3,65.761,0,85.961 c7.009,4.645,16.276,2.637,20.801-4.16c4.6-6.899,2.739-16.201-4.16-20.801C87.548,117.217,87.548,98.852,100.069,90.515z"></path> </g>
</g>
<g>
<g>
<path d="M175.069,90.515c30.286-20.191,30.301-67.761,0-87.96c-6.914-4.585-16.216-2.739-20.801,4.16 c-4.6,6.899-2.725,16.216,4.16,20.801c12.521,8.337,12.521,28.702,0,37.039c-30.286,20.189-30.3,65.761,0,85.961 c7.009,4.645,16.276,2.637,20.801-4.16c4.6-6.899,2.739-16.201-4.16-20.801C162.548,117.217,162.548,98.852,175.069,90.515z"></path> </g>
</g>
<g>
<g>
<path d="M250.069,90.515c30.286-20.191,30.3-67.761,0-87.96c-6.914-4.585-16.216-2.739-20.801,4.16 c-4.6,6.899-2.725,16.216,4.16,20.801c12.521,8.337,12.521,28.702,0,37.039c-30.286,20.189-30.301,65.761,0,85.961 c7.009,4.645,16.276,2.637,20.801-4.16c4.6-6.899,2.739-16.201-4.16-20.801C237.548,117.217,237.548,98.852,250.069,90.515z"></path> </g>
</g>
<g>
<g>
<path d="M15.003,181.964c-4.263,0-8.335,1.816-11.177,4.995c-2.842,3.179-4.204,7.427-3.735,11.66l4.815,43.345h232.463 l3.633-3.633v-56.367H15.003z"></path> </g>
</g>
<g>
<g>
<path d="M421,211.964h-1.571l1.483-13.345c0.469-4.233-0.894-8.481-3.735-11.66c-2.841-3.179-6.914-4.995-11.177-4.995h-75v56.367 l3.633,3.633h68.027h13.436H421c33.091,0,61,26.909,61,60s-27.909,60-61,60h-27.576c7.855-18.069,13.473-37.233,15.71-57.334 l3.629-32.666H358.27c1.692,4.772,2.73,9.792,2.73,15v60c0,24.814-20.186,45-45,45h-60c-24.814,0-45-20.186-45-45v-60 c0-5.208,1.04-10.228,2.732-15H8.239l3.629,32.666c4.984,44.784,25.727,85.82,56.598,117.333h285.071 c8.989-9.175,16.714-19.352,23.725-30h43.738c49.629,0,90.999-40.371,90.999-89.999S470.629,211.964,421,211.964z"></path> </g>
</g>
<g>
<g>
<path d="M406,451.963H15.003c-8.284,0-15,6.714-15,15c0,24.853,20.147,45,45,45h330.998c24.853,0,45-20.147,45-45 C421,458.677,414.284,451.963,406,451.963z"></path> </g>
</g>
<g>
<g>
<path d="M301.001,250.753v-83.789c0-8.276,6.724-15,15-15h42.237c-6.213-17.422-22.707-30-42.237-30c-24.814,0-45,20.186-45,45 v83.789l-25.605,25.605c-2.813,2.813-4.395,6.621-4.395,10.605v60c0,8.291,6.709,15,15,15h60c8.291,0,15-6.709,15-15v-60 c0-3.984-1.582-7.793-4.395-10.605L301.001,250.753z"></path> </g>
</g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
</svg>
</label>
<input id="month" type="radio" name="training">
<label class="training" for="month">
<svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 491.737 491.737" style="enable-background:new 0 0 491.737 491.737;" xml:space="preserve">
<g>
<path d="M321.097,112.359c20.973,12.338,47.985,5.315,60.293-15.652c12.34-20.973,5.35-47.974-15.623-60.304 c-21.009-12.332-47.99-5.317-60.314,15.65C293.129,73.036,300.103,100.027,321.097,112.359z"></path>
<path d="M393.081,264.102c-2.414,0-4.8,0.194-7.169,0.362l-14.431-71.605l4.702-1.757c10.666-3.987,16.093-15.868,12.098-26.54 c-3.994-10.681-15.946-16.084-26.531-12.09l-51.823,19.38l-2.321-18.864c6.3-13.193,5.541-29.78-4.767-41.482 c-21.224-24.092-47.12-12.508-55.191-5.976l-106.884,86.555l0.016,0.024c-3.319,2.893-6.089,6.485-7.86,10.842 c-2.191,5.396-2.596,11.067-1.564,16.384c-8.503,0.669-15.255,7.571-15.255,16.246c0,9.085,7.346,16.44,16.432,16.48l-6.797,15.906 c-8.62-2.465-17.674-3.866-27.066-3.866C44.27,264.102,0,308.354,0,362.754c0,54.403,44.27,98.663,98.668,98.663 c54.403,0,98.652-44.26,98.652-98.663c0-36.228-19.683-67.867-48.858-85.024l10.957-25.652h17.767l60.281,24.462l-32.201,52.773 c-8.297,13.612-3.994,31.382,9.615,39.685c4.691,2.86,9.878,4.229,15,4.229c9.729,0,19.234-4.929,24.677-13.838l29.339-48.095 l19.072,11.511c-5.447,12.227-8.54,25.726-8.54,39.95c0,54.403,44.254,98.663,98.652,98.663c54.402,0,98.656-44.26,98.656-98.663 C491.737,308.354,447.483,264.102,393.081,264.102z M98.668,436.671c-40.756,0-73.923-33.161-73.923-73.917 c0-40.756,33.167-73.909,73.923-73.909c5.944,0,11.649,0.896,17.188,2.224l-20.476,47.893 c-11.758,1.619-20.843,11.598-20.843,23.792c0,13.323,10.808,24.132,24.13,24.132c8.767,0,16.367-4.745,20.589-11.76h52.065 C165.395,409.988,135.188,436.671,98.668,436.671z M171.322,350.383h-52.065c-0.355-0.588-0.708-1.176-1.112-1.732l20.476-47.901 C155.679,311.776,167.793,329.595,171.322,350.383z M296.781,290.175l7.666-12.564c4.416-7.233,5.431-16.038,2.774-24.084 c-2.661-8.046-8.718-14.515-16.562-17.704l-52.725-21.395l32.443-26.281l1.804,14.691c0.756,6.267,4.366,11.841,9.761,15.12 c3.271,1.981,6.979,2.988,10.698,2.988c2.435,0,4.88-0.435,7.218-1.306l48.15-18.001l13.627,67.691 c-18.268,6.162-34.117,17.51-45.848,32.314L296.781,290.175z M375.396,337.633l-38.003-22.94 c7.877-9.118,17.787-16.319,29.205-20.734L375.396,337.633z M393.081,436.671c-40.757,0-73.907-33.161-73.907-73.917 c0-9.544,1.965-18.597,5.268-26.983l44.541,26.888c0,0.032-0.016,0.064-0.016,0.095c0,13.323,10.808,24.132,24.114,24.132 c13.322,0,24.118-10.81,24.118-24.132c0-10.478-6.721-19.307-16.06-22.64l-10.277-51.043c0.756-0.024,1.463-0.226,2.22-0.226 c40.757,0,73.911,33.153,73.911,73.909C466.992,403.51,433.838,436.671,393.081,436.671z"></path> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
</svg>
</label>
<input id="values" type="radio" name="training">
<label class="training" for="values">
<svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 171.525 171.525" style="enable-background:new 0 0 171.525 171.525;" xml:space="preserve">
<g>
<g>
<path d="M103.565,100.882l-39.46,5.953L53.301,51.303c-1.182-6.074-7.048-10.074-13.137-8.859 c-6.077,1.182-10.045,7.067-8.859,13.141l11.206,57.599c0.75,3.852,3.401,6.836,6.786,8.213H30.524 c-3.101,0-5.603,2.5-5.603,5.604c0,3.097,2.502,5.604,5.603,5.604h53.793c3.096,0,5.603-2.507,5.603-5.604 c0-3.104-2.507-5.604-5.603-5.604H61.499l37.44-5.641l9.139,50.026c0.619,3.38,3.562,5.743,6.89,5.743l1.266-0.121 c3.801-0.692,6.323-4.344,5.631-8.147l-10.366-56.706C110.825,102.829,107.372,100.367,103.565,100.882z"></path>
<path d="M48.708,0c11.176,0,20.238,9.062,20.238,20.238c0,11.18-9.062,20.241-20.238,20.241c-11.18,0-20.241-9.061-20.241-20.241 C28.467,9.062,37.528,0,48.708,0z"></path>
<path d="M102.819,90.622c26.053-16.506-17.848-27.932,0-47.232C75.313,61.451,116.817,75.965,102.819,90.622z"></path>
<path d="M127.197,52.548c-27.497,18.065,13.997,32.575,0,47.229C153.25,83.271,109.342,71.839,127.197,52.548z"></path>
<path d="M138.108,25.762c-27.506,18.06,14.003,32.567,0,47.232C164.172,56.474,120.264,45.062,138.108,25.762z"></path> </g>
</g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
<g> </g>
</svg>
</label>
</div>
.cc-selector input {
margin: 0;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.cc-selector input:active +.training {
}
.cc-selector input:checked +.training {
background-color: #000;
}
.cc-selector input:checked +.training svg{
fill: #fff;
}
.training {
cursor: pointer;
display: inline-block!important;
border-bottom: none !important;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
background-color: #ebebeb;
padding: 20px 25px;
border-radius: 5px;
margin-left: 4px;
text-align: center!important;
}
.training svg{
width: 50px;
}
.training:hover{
background-color: #000;
color: #fff;
}
.training:hover svg{
fill: #fff;
}
.training h4{
font-size: 17px;
text-align: center;
font-weight: 400;
color: #000;
}
.training p{
font-size: 11px;
text-align: center;
font-weight: 400;
margin-top: 10px;
}
.training:hover h4, .training:hover p{
color: #fff;
}
.training_class_content{
font-size: 14px;
font-weight: 400;
}
.cc-selector input:checked +.training h4, .cc-selector input:checked +.training p, .cc-selector input:checked +.training .training_class_content{
color: #fff;
}
.mode_width, .class_width{
width: 47%;
vertical-align: top;
padding: 20px;
}
