$LightGrey:#ddd;
$Blue:#0f7bdc;


#travel_worldwide {font-size:10px; color:#cc0066;}

input[type="radio"] + label span #travel_worldwide {
font-size:9px; 
color:#cc0066;
}

#radio_container {
	line-height:80px;
}


/*#Annual {
width: 50px;
height: 50px;
}*/

#annual {
background: url(../img/red.png) 0 0;
width: 100px;
height: 80px;
}

#Single {
background: url(../img/sprite.png) 50px 0;
width: 120px;
height: 120px;
}


/*div {
  margin:0 0 0.75em 0;
}
*/
input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    color: $Blue;
    font-family:Arial, sans-serif;
    font-size:14px;
	text-align: center;
 }
input[type="radio"] + label span {
    display:inline-block;
    
	min-width:100%;
	/*width:100%;*/
    height:auto;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  10px;
    border-radius:  10px;
  border: #eee 2px solid;
}

input[type="radio"] + label span #comp {
    display:inline-block;
   	width:100%;
	/*width:100%;*/
    height:auto;
	margin-top: 0px;
    /*margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  10px;
    border-radius:  10px;*/
  /*border: #eee 2px solid;*/
}

input[type="radio"] + label span img{
width: 100%;
height: auto;
display: block;
margin: 10px auto 0 auto;
max-width: 100px;
/*max-width:110px;
max-height:70px;*/
}

input[type="radio"] + label span {
 background: rgba(15,123,220,1);
background: -moz-linear-gradient(top, rgba(15,123,220,1) 0%, rgba(16,103,179,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(15,123,220,1)), color-stop(100%, rgba(16,103,179,1)));
background: -webkit-linear-gradient(top, rgba(15,123,220,1) 0%, rgba(16,103,179,1) 100%);
background: -o-linear-gradient(top, rgba(15,123,220,1) 0%, rgba(16,103,179,1) 100%);
background: -ms-linear-gradient(top, rgba(15,123,220,1) 0%, rgba(16,103,179,1) 100%);
background: linear-gradient(to bottom, rgba(15,123,220,1) 0%, rgba(16,103,179,1) 100%);
background: linear-gradient(to bottom, rgb(50, 94, 171) 0%, rgb(50, 94, 171) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f7bdc', endColorstr='#1067b3', GradientType=0 );
color: white;
text-align:center;
	/*font-size: 16px;*/
	font-size: inherit;
	font-weight: 500;
	font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
	line-height: 19px;
	
}

/*input[type="radio"] + label span radiotitle{
color: #cc0066;
font-size:18px;
text-align:center
}*/

.radiotitle {
width: 50px;
height: 50px;
line-height: 50px;
padding-bottom: 5px;
}


input[type="radio"]:checked + label span{
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );   
/*width: 140px;
height: 110px;*/
color: #0f7bdc;
border: #f28130 2px solid;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,.3); 
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
  width: 100%;
}



/* IDs */
input[type="radio"] + label span img #img_annual{ background-image:url(../img/img_annual.png); }
input[type="radio"] + label span img #img_annual:hover{ background-image:url(../img/img_annual_hover.png); }
input[type="radio"]:checked + label span img #img_annual{ background-image:url(../img/img_annual_hover.png); }

/*@media only screen and (min-width: 40.063em) {
	input[type="radio"] + label span {
      font-size: 14px;
}
	}*/

@media only screen and (min-width: 64.063em) {
	input[type="radio"] + label span {font-weight:normal;font-size: 11px;font-weight: 200;}
	input[type="radio"] + label span comp {
    display:inline-block;
   	/*min-width:100%;
	width:100%;
    height:110px;*/
	width:100%;
height:auto;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  10px;
    border-radius:  10px;
  border: #eee 2px solid;
}
	
	}


@media only screen and (max-width: 1000px) { 
input[type="radio"] + label span {
    display:inline-block;
   /* min-width:120px;
	width:60px;
    height:110px;*/
	width:100%;
height:auto;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  10px;
    border-radius:  10px;
  border: #eee 2px solid;
}


input[type="radio"]:checked + label span{
/*width: 150px;
height: 110px;*/
width:100%;
height:auto;
}
}	

@media only screen and (max-width: 900px) { 
input[type="radio"] + label span {
    display:inline-block;
/*    min-width:110px;
	width:60px;
    height:110px;
*/   
width:100%;
height:auto;
margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  10px;
    border-radius:  10px;
  border: #eee 2px solid;
  font-size: 12px;
}


input[type="radio"]:checked + label span{
/*width: 150px;
height: 110px;*/
width:100%;
height:auto;
}
}	

@media only screen and (max-width: 768px) { 


input[type="radio"] + label span {
    display:inline-block;
 /*   min-width:90px;
	width:60px;
    height:110px;*/
	width:100%;
height:auto;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  10px;
    border-radius:  10px;
  border: #eee 2px solid;
}


input[type="radio"]:checked + label span{
/*width: 150px;
height: 110px;*/
width:100%;
height:auto;
}
}	

@media only screen and (max-width: 640px) { 
input[type="radio"] + label span {
/*width:180px;
height:110px;*/
width:100%;
height:auto;
margin-top: 15px;
/*font-size: 16px;*/
font-size: inherit;
}

input[type="radio"]:checked + label span{
/*width: 150px;*/
height: 110px;
}

#bluebutton input[type="radio"] + label span {
/*width:180px;
height:110px;*/
width:100%;
height:auto;
margin-top: 15px;
font-size: 12px;
}

#bluebutton input[type="radio"]:checked + label span{
/*width: 150px;*/
height: 110px;
}
}	

@media only screen and (max-width: 520px) { 
input[type="radio"] + label span {
/*width:180px;
height:110px;*/
width:100%;
height:auto;
margin-top: 15px;
}

input[type="radio"]:checked + label span{
/*width: 150px;*/
/*height: 110px;*/
width:100%;
height:auto;
}
}	


@media only screen and (max-width: 420px) { 
input[type="radio"] + label span {
width:100%;
height:auto;
margin-top: 0px;
}

input[type="radio"]:checked + label span{
/*width: 150px;*/
height: auto;
}
}	

@media only screen and (max-width: 340px) { 
input[type="radio"] + label span {
/*width:130px;
height:110px;*/
width:100%;
height:auto;
margin-top: 0px;
font-size: 0.8em;	
}

input[type="radio"]:checked + label span{
/*width: 130px;*/
/*height: 110px;*/
}
}