@charset "utf-8";
/* CSS Document */


body{
	margin:0px;
	background: #f0f0f0;
	overflow-x:hidden;}
#shift{
	position:relative;
	top:70px;}
	
.pin1 {
	/*background:yellow;*/
	position:relative;
	top:600px;
	display:inline-block;
	left:60px;
}
.pin1:before{
	font-family:FontAwesome;
	content:'\f276';
	font-size:1em;
	}
	
.pin1:hover{
	animation: bounce 3s;
	transition: all 5s;}
.pin2 {
	/*background:yellow;*/
	position:relative;
	top:610px;
	left:60px;
}
.pin2:before{
	font-family:FontAwesome;
	content:'\f276';
	font-size:1em;
	}	
	
.pin2:hover{
	animation:bounce 3s;
	transition: all 5s;}

@keyframes bounce {
	0%, 100%{transform:translateX(10px);
	}
	
	20%, 60%{transform:translateX(0px);}
	
	40%,80%{transform:translateX(10px);}

}	
/*IMAGE EFFECT  +++ TEXT EFFECT +++ ENTIRE PAGE EFFECT */	
.home{
	position:relative;
	display:inline-block;/*background:green;*/
}

h2{
	color:white;}

.home:before{
	font-family:FontAwesome;
	content:'\f015';
	font-size:2em;
	top:50px;
	color:black;}	
.top_strip{
	background:#99CED4;
	position:relative;
	width:100%;
	bottom:1px;
	height:30px;
}

.midd_strip{
	position:relative;
	width:100%;
	height:60px;
	bottom:10px;
	background-color:#99CED4;}
	
	
.big_im{
	width:70%;
	height:500px;
	/*background:white;*/
	position:relative;
	left:200px;
	top:10px;
}

img{
	max-height:100%;
	max-width:100%;
}
.left_but{
	width:7%;
	height:150px;
	/*background:#3CC;*/
	position:relative;
	display:inline-block;
	bottom:170px;
	left:30px;
}
	
.left_but:before{
	font-family:FontAwesome;
	content:'\f060';
	font-size:2em;}	

.right_but{
	width:7%;
	height:150px;
	/*background:#3CC;*/
	position:relative;
	display:inline-block;
	left:300px;
	bottom:163px;}
	
	
.right_but:before{
	font-family:FontAwesome;
	content:'\f061';
	font-size:2em;}
		
.image{
	width:50%;
	height:400px;
	/*background:black;*/
	position:relative;
	display:inline-block;
	left:160px;
	top:40px;
}

.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

h2{
	text-align:center;
	text-spacing:10px;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	position:relative;
	padding:10px;
}

#stars{
	width:40%;
	height:100px;
	position:relative;
	/*background:white;*/
	left:37%;
	bottom:50px;}

.text{
	width:70%;
	height:290px;
	/*background:black;*/
	font-family:Tahoma, Geneva, sans-serif;
	position:relative;
	top:-20px;
	left:180px;
	text-align:justify;
	text-justify:inter-word;
	letter-spacing:1.5px;
	border:5px solid #99CED4;
	padding: 15px 15px 15px 15px;
}



/* STAR RATING */

/*@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);*/

fieldset, label { margin: 0; padding: 0; }
/*body{ margin: 20px; }*/
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget ****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 15px;
  font-size: 3em;
  font-family: FontAwesome;
  display: inline-block;
  content:"\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 

@charset "utf-8";
/* CSS Document */

