body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.7em;
    font-weight: 400;
    color: #687284;

}




h4{

	font-weight: 600;
	 color: #43437a;
}

span{
	text-transform: capitalize;
}



.red{
	
	
	margin-top: 10px;
	border: 1px solid;
	box-shadow: 2px 1px 3px 4px #ccc;
	height: 100%;

}


.bar{
	margin-top: -70px;
	font-weight: 600;
}



.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;
}

.col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}





.map{
	/*width: 50%;*/
	height: 200px;
	background-image: url(../img/map.jpg);
	background-size: cover;
	/*background-attachment: fixed;*/
	background-repeat: no-repeat;

}




	.rmap{
		margin-top: 70px;
		margin-left: 50px;
    position: absolute;
    color: white;
   
    width: 200px;

}




.go h4{
	color: black !important;
}


.go{
	/*width: 100px;
	height: 100px;*/
/*	background-color: orange;*/

	position: relative;
	animation-name: notify;
	animation-duration: 20s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	 
}



@keyframes notify{
	0%{color:red !important; left: 0px; top: 0px;}
	25%{color: blue !important; left: 100px; top: 0px;}
	50%{color: gray !important; left: 100px; top: 350px;}
	75%{color: pink !important; left: 100px; top: 700px;}
	100%{color: aquamarine !important; left: 0px; top: 0px;}
}










.kit{
	
	position: relative;
	animation-name: exam;
	animation-duration: 5000s;
	/*animation-direction: alternate;*/
	animation-iteration-count: infinite;
	
}




.image img{
	float: right;
}









@keyframes exam{
	0%{ left: 0px; top: 0px;}
	25%{left: 200px; top: 0px;}
	50%{ left: 200px; top: 100px;}
	75%{ left: 0px; top: 100px;}
	100%{ left: 0px; top: 0px;}
}





@media only screen and (min-width: 200px) and (max-width: 416px){  /*phone only*/


.rmap{

margin-top: 50px;

}

.image{
	text-align: center;
}

.image img{
	float: none;
	
}



.bar{
	margin-top: -50px;
	

} 










}

@media only screen and (min-width: 750px) and (max-width: 802px){  /* ipad*/



.rmap{

margin-top: 50px;
}

.bar{
	margin-top: -50px;


}


}