body {
	background-color: #606666;
	color: #606666;
	font-family: 'Roboto', sans-serif;
	position: relative;

    
	
	
}
.btn-group {
	height: 200px;
	width: 200px;
	background-color: #606666;
	display: inline-block;
	font-family: Roboto;
	font-size: 16px;
}

.btn-logo {
	display: inline-block;
	font-family: Roboto;
	font-size: 16px;
	padding-top: 20px;
}

.btn-thumb {
	height: 155px;
	width: 170px;
	background-color: #606666;
	display: inline-block;
	font-family: Roboto;
	font-size: 16px;
}
.btn-title {
	text-align: center;
	position: relative;
	background-color: #606666;
	width: 175px;
	top: 15px;
	font-family: 'Roboto Condensed', sans-serif;
}

h1  {
	color: #CCC;
	font-family: Roboto;
}
h2  {
	color: #ccc;
}
.h2-serif {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}


h3, h4, h5, h6 {
	color: #CCC;
}

a {
	color: #CCCCCC;
}
.footer {
	font-family: Verdana, Geneva, sans-serif;
	color: #B4B4B4;
	font-size: 14px;
	font-style: normal;
	padding-top: 25px;
}
p {
	font-family: Roboto;
	color: #CCC;
	text-align: center;
	position: relative;
	line-height: 15px;
	font-size: 18px;
}
.p-explanation {
	font-family: Roboto;
	color: #CCC;
	text-align: justify;
	position: relative;
	line-height: 21px;
	font-size: 18px;
	width: 600px;
}
.image-icon {
	padding-right: 15px;
	padding-left: 15px;
}
.image-thumb {
	padding-right: 2px;
	padding-left: 2px;
	position: relative;
	width: 150px;
}
.image-large {
	padding: 15px;
	text-align: center;
	position: relative;
}



a.tooltip {
	outline: none;
	font-family: Roboto;
}

a.tooltip strong {
	line-height: normal;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	font-size: 14px;
	color: #EEE;
}
a.tooltiptext {
	font-family: "Roboto  Condensed";
	font-size: 10px;
	color: #555;
	font-weight: lighter;
}
a.tooltip:hover {text-decoration:none;} 


a.tooltip span {
	z-index: 10;
	display: none;
	padding: 14px 20px;
	margin-top: 145px;
	margin-left: -191px;
	width: 150px;
	line-height: 16px;
}
a.tooltip spanmain {
	z-index: 10;
	display: none;
	margin-top: 155px;
	margin-left: -175px;
	width: 128px;
	line-height: 16px;
	padding-top: 14px;
	padding-right: 20px;
	padding-bottom: 14px;
	padding-left: 20px;
}
a.tooltip spanport {
	z-index: 10;
	display: none;
	margin-top: 98px;
	margin-left: -150px;
	width: 108px;
	line-height: 16px;
	padding-top: 4px;
	padding-right: 15px;
	padding-bottom: 4px;
	padding-left: 15px;
}
a.tooltip spansmall {
	z-index: 10;
	display: none;
	padding: 8px 10px;
	margin-top: 57px;
	margin-left: -81px;
	width: 64px;
	line-height: 16px;
}
a.tooltip:hover span{
	display: inline; position:absolute;
	color: #CCC;
    border:2px solid #505555;
	background-color: #707777;
}
a.tooltip:hover spanmain{
    display: inline; position:absolute; 
	color:#CCC;
    border:2px solid #505555; 
	background:#707777;
}
a.tooltip:hover spanport{
    display:inline; position:absolute; 
	color:#CCC;
    border:2px solid #505555; 
	background:#707777;
}
a.tooltip:hover spansmall{
	display: inline; position:absolute;
	color: #CCC;
    border:2px solid #505555;
	background-color: #707777;
}
	
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
.center {
	background-position: center;
}
.tultip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
	color: #CCC;
}
.tultip .tultiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}
.tultip .tultiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
.tultip:hover .tultiptext {
    visibility: visible;
    opacity: 1;
}


    font-family: 'Roboto', sans-serif;

    font-family: 'Roboto Condensed', sans-serif;