/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/
input[type=submit] {
    display:none; 
	background: #f4f4f4;
    border-radius: 10px;
    padding: 20px;
	width: 350px;
    text-align: center;
    min-height: 80px;
    margin-bottom: 20px;
	transition-duration: 500ms;
    transition-property: width, background;
    transition-timing-function: ease;
    -webkit-transition-duration: 500ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
}

input[type=submit]:active{
    background: #59B3C1;
    border-radius: 10px;
    padding: 20px;
	width: 350px;
    text-align: center;
    min-height: 80px;
    margin-bottom: 20px;
    transition-duration: 500ms;
    transition-property: width, background;
    transition-timing-function: ease;
    -webkit-transition-duration: 500ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
 }
/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
  
  display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
  
  
*/

input[type=submit] + label{
	background: #f4f4f4;
    border-radius: 10px;
    padding: 20px;
	width: 350px;
    text-align: center;
    min-height: 80px;
	margin-bottom: 20px;
	text-transform: uppercase;
	font-family: 'Fjalla One', sans-serif;
	font-size: 30px;
    line-height: normal;
    margin-top: 40px;
    display: inline-block;
    color: #777;
    transition-duration: 500ms;
    transition-property: width, background;
    transition-timing-function: ease;
    -webkit-transition-duration: 500ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
    cursor: pointer;
}

input[type=submit]+label:hover {
    background: #59B3C1;
    border-radius: 10px;
    padding: 20px;
	width: 350px;
    text-align: center;
    min-height: 80px;
    margin-bottom: 20px;
	text-transform: uppercase;
	font-family: 'Fjalla One', sans-serif;
	font-size: 30px;
    line-height: normal;
    margin-top: 40px;
    display: inline-block;
    color: #fff;
    transition-duration: 500ms;
    transition-property: width, background;
    transition-timing-function: ease;
    -webkit-transition-duration: 500ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=submit]:checked + label { 
   background-image: none;
   text-transform: uppercase;
   font-family: 'Fjalla One', sans-serif;
   font-size: 30px;
    line-height: normal;
    margin-top: 40px;
    display: inline-block;
    color: #fff;
    background-color:#59B3C1;
	
}