/* ==========================================================================
   Author's custom styles
   ========================================================================== */
  html{
  	background: #bad5d2 url(../img/html_bg.jpg) repeat 0 0;
  }
 body{
 	background: transparent url(../img/body_bg.jpg) no-repeat center top;
 	 font-family: Helvetica, serif;
 }
 .brand  {
 	 text-align: center;
 }
 
 .logo{
 	margin:10px auto 30px;
 	 
 }
.logo a {
	display: block; 	 
	margin: 5px auto 0 auto;	
}
 
 
 
 /* main-contain */
.main-contain{
	margin-top: 25px;
}
.egg-box [class*="icon"] {
	color: #e5e5e5;	 
	text-align: center;
	display: block; 	 
	margin: 0 auto 2px; 
	-webkit-border-radius: 126px;
	-moz-border-radius: 126px;
	border-radius: 126px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
.egg-box [class*="icon"]:after {
	display: block;
	margin: 5px auto 0;
	width: 88px;
	height: 8px;
	position: relative;
	top: -25px;
	background-color: #e5e5e5;
	content: '';
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

.ie8 .egg-box [class*="icon"]:after {
	display: none;
}
 


/* Animation */
.animated {
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 0.5s;
	-moz-animation-duration: 0.5s;
	-ms-animation-duration: 0.5s;
	-o-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-delay: .1s;
	-moz-animation-delay: .1s;
	-ms-animation-delay: .1s;
	-o-animation-delay:.1s;
	animation-delay:.1s;
	
	 
}
.animated.hinge {
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	 
}

@-webkit-keyframes shake {
0%, 100% {-webkit-transform: translateX(0) translateY(-20px);}	
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-5px) translateY(-20px) rotate(-2deg);}
20%, 40%, 60%, 80% {-webkit-transform: translateX(5px) translateY(-20px) rotate(2deg);;}
}

@-moz-keyframes shake {
0%, 100% {-moz-transform: translateX(0) translateY(-20px);}
10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-5px) translateY(-20px) rotate(-2deg);}
20%, 40%, 60%, 80% {-moz-transform: translateX(5px) translateY(-20px) rotate(2deg);}
}

@-o-keyframes shake {
0%, 100% {-o-transform: translateX(0) translateY(-20px);}
10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-5px) translateY(-20px) rotate(-2deg);}
20%, 40%, 60%, 80% {-o-transform: translateX(5px) translateY(-20px) rotate(2deg); }
}

@keyframes shake {
0%, 100% {transform: translateX(0) translateY(-20px);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-5px) translateY(-20px) rotate(-2deg);}
20%, 40%, 60%, 80% {transform: translateX(5px) translateY(-20px) rotate(2deg);}
}

.shake {
	-webkit-animation-name: shake;
	-moz-animation-name: shake;
	-o-animation-name: shake;
	animation-name: shake;
 	 
	}
/* End Animation*/
 
h1{
	font-family: "Lobster";
	 font-size:28px;
	text-align: center;
	color: #659694;
}
.sub_text p{
	text-align: center;
	color: #659191;
}

 
#subscribe-form input{	 	 
	padding: 8px 14px 8px 14px;	 
	font: 17px/17px  Helvetica, serif;
	color: #444444;
	letter-spacing: .1em;
	background-color: #fff;	 
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px; 
	margin-top: 0;
	display: block;	
	width: 80%;
	border:1px solid #a9c6c8;
	margin: 0 auto 15px;
	position:relative;
	box-shadow: inset 2px 2px 4px #D0E2E4;
}
#subscribe-form button{	 
	display: block;	
	margin: 0 auto;
	position:relative;
}
#subscribe-form {
	margin-bottom: 20px;
	margin-top: 5px;
}
#subscribe-form  .custom-button{
	cursor: pointer;	
	padding: 14px 14px 11px;
	font: normal 19px/20px  Helvetica, serif;
	color: #FFF;
	letter-spacing: .2em;
	text-transform: uppercase;
	background-color: #7ab9be;
	border-top: 0;
	border-right: 0;
	border-left: 0;
	border-bottom: 0;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;	 
	-moz-box-shadow: 0 5px 0 #448787,3px 6px 5px #7da0a0;
	-webkit-box-shadow: 0 5px 0 #448787,3px 6px 5px #7da0a0;
	box-shadow: 0 5px 0 #448787,3px 6px 5px #7da0a0;	
	display: inline-block; 
	margin-bottom: 15px;
}
#subscribe-form  .custom-button:active
{
	-moz-box-shadow: 0 3px 0 #448787,2px 4px 4px #7da0a0;
	-webkit-box-shadow: 0 3px 0 #448787,2px 4px 4px #7da0a0;
	box-shadow: 0 3px 0 #448787,2px 4px 4px #7da0a0;
	margin:0 auto 15px auto !important;
	top:3px;
		
}
 
/* Bootom Box */
#footer-box{
	margin-top: 40px;
	margin-bottom: 30px;
}

 
 
/* footer */

.copyright{
	line-height: 35px;
}
footer {
	margin-top: 15px;
	padding: 10px 0 0;
	background: transparent;
	color: #757575;
}
ul.fa-icons{
	position: relative;
	margin: 0 auto 5px;
	text-align: center; 
	
}
/* social icons */
ul.fa-icons li {display:inline;}
.iconify a:link{
	background-image:url(../img/social-icons.png);
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
	width: 28px;
	height: 28px;
	-moz-border-radius: 30px;
	-webkit-border-radius:  30px;
	border-radius: 30px;
	text-decoration: none;
	opacity: 0.5;
	display: inline-block;
}
.iconify a:hover { text-decoration: none; opacity: 1;}
.icon-facebook { 
	 background-position: 0 0px;
}
.icon-facebook:hover { 
	 background-position: 0 -38px;
}

.icon-google-plus { 
	 background-position: -32px 0;
}
.icon-google-plus:hover { 
	 background-position: -32px -38px;
}
.icon-linkedin { 
	 background-position: -64px 0;
}
.icon-linkedin:hover { 
	 background-position: -64px -38px;
}
.icon-twitter { 
	 background-position: -96px 0;
}
.icon-twitter:hover { 
	 background-position: -96px -38px;
}
.icon-rss { 
	 background-position: -128px 0;
}
.icon-rss:hover { 
	 background-position: -128px -38px;
}


.lt-ie9 .custom-button{
		width: 150px;
		
}
.lt-ie9 .fa-icons{
	width: 160px;
	margin-left: -10px
}

@media (max-width: 766px) {
	.egg-box [class*="icon"]:hover {
		color: #ffffff;
		 
		-webkit-transform: translate(0,-20px);
		-moz-transform: translate(0,-20px);
		-ms-transform: translate(0,-20px);
		-o-transform: translate(0,-20px);
		transform: translate(0,-20px);
	}
	.egg-box [class*="icon"]:hover:after {
		width: 53px;
		 
		-webkit-transform: translate(0,22px);
		-moz-transform: translate(0,22px);
		-ms-transform: translate(0,22px);
		-o-transform: translate(0,22px);
		transform: translate(0,22px);
	}
}
@media (min-width: 767px) {
	.egg-box:hover [class*="icon"] {
		color: #ffffff;
		 
		-webkit-transform: translate(0,-20px);
		-moz-transform: translate(0,-20px);
		-ms-transform: translate(0,-20px);
		-o-transform: translate(0,-20px);
		transform: translate(0,-20px);
	}
	.egg-box:hover [class*="icon"]:after {
		width: 53px;
		 
		-webkit-transform: translate(0,22px);
		-moz-transform: translate(0,22px);
		-ms-transform: translate(0,22px);
		-o-transform: translate(0,22px);
		transform: translate(0,22px);
	}
}


/* Higher than 1200 (desktop devices)
====================================================================== */
@media only screen and (min-width: 1200px) {
	 .egg-box .icon img{
	margin-left: -30px;
	}
}

/* Higher than 960 (desktop devices)
====================================================================== */

@media only screen and (min-width: 960px) and (max-width: 1199px) {
	 .egg-box .icon img{
		margin-left: -50px;
	}
	 

}

/* Tablet Portrait (devices and browsers)
====================================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	 
	.logo-container {
		position: relative;
	}	
	.logo {	 
		width: 100%;
	}
	 
	
}

/* All Mobile Sizes (devices and browser)
====================================================================== */
@media only screen and (max-width: 767px) {
	body {
		padding-right: 0px;
		padding-left: 0px;
	}
	 
	.logo {	 
		width: 100%;
	}
	 
	
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers)
====================================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	 .icon.animated{
		text-align: center;
	}
	
}