/* 	==========================================================================
==========================================================================
					   3. PAGE PACKAGE
==========================================================================
========================================================================== */

/* 	==========================================================================
						3.1. SECTION  HERRO-BANNER
========================================================================== */
.wrapper-package .section-title p:first-child{
	font-size: 18px;
	color: #01948E;
	margin: 0 0 5px;
	text-align: center;
	float: left;
	width: 100%;
	text-transform: uppercase
}
.wrapper-package .section-title h3{
	clear: both;
	font-size: 30px !important;
	color: rgb(0,105,180);
	margin: 0 !important;
	text-align: center;
	text-transform: uppercase
}
.wrapper-package .section-title p{
	text-align: center;
	margin: 25px 0 35px;
} 
.wrapper-package .section{
	float: left;
	width: 100%;
	padding: 60px 0
}
.wrapper-package .section-two{ padding-top: 0}
.wrapper-package .hero-banner { 
	position: relative; 
	width: 100%; 
	/*background-image: url('../images/home_hero_banner.jpg');*/
	float: left;
	height: 310px;
	background-repeat: no-repeat;
	background-position: center;
	/*background-size: calc(100%) auto;*/
	margin-top: 150px;
}
.wrapper-package .hero-banner .mask {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.4); 
	float: left;
	text-align: center;
}
.wrapper-package .nopadding{ padding: 0}
.wrapper-package .top30{ margin-top: 30px}






.wrapper-package .list-item{
	background: rgba(0,105,180,0.1);
	padding: 30px;
	height: 300px;
}
.wrapper-package .list-item span{
	top: 15% !important;
	font-size: 24px !important;
	color: rgb(0,105,180) !important;
	float: left;
	width: 100%;
	padding-bottom: 50px;
}
.wrapper-package .list-item ul{ clear: both}
.wrapper-package .list-item ul li{
	padding-bottom: 10px;
	font-size: 18px;
}






.hovereffect {
	 width:100%;
	 height:auto;
	 float:left;
	 overflow:hidden;
	 position:relative;
	 background:rgba(0,105,180,0.1)
}
.hovereffect span.title{ 
	top: 15% !important;
	font-size: 24px !important;
	color: rgb(0,105,180) !important;
}
.hovereffect .btn-subcribe{ top: 75% !important;}
.hovereffect p.description{
   	top: 43% !important;
	font-size: 18px;
	margin: 0;
	line-height: 30px;
	text-align: center;
}
.hovereffect .btn-subcribe,
.hovereffect span.title{
	float: left;
	width: 100%;
	text-align: center;
	display: block;
	text-transform: capitalize
}
.hovereffect .btn-subcribe:hover a{color: rgb(0,105,180) !important; }
.hovereffect .btn-subcribe a{
	padding: 8px 40px;
	border: 1px solid;
	color: black;
	font-size: 18px;
	text-transform: capitalize;
}
.hovereffect img{ opacity: 0.2}
.hovereffect span.title,
.hovereffect p.description,
.hovereffect .btn-subcribe {
	 top:50%;
	 color:black;
	 position:absolute;
	 opacity:1;
	 -webkit-transform:translateY(-50%);
	 -moz-transform:translateY(-50%);
	 -ms-transform:translateY(-50%);
	 -o-transform:translateY(-50%);
	 transform:translateY(-50%);
	padding: 0 30px !important;
}


/* Modal */

 /*.modal-header, h4, .close {*/
	 /*background-color: rgb(0,105,180);*/
	 /*color:white !important;*/
	 /*text-align: center;*/
	 /*font-size: 30px;*/
 /*}*/
 /*.modal .row select{*/
	 /*margin: 0 auto;*/
	 /*padding: 10px;*/
 /*}*/
/*.modal-footer {*/
	/*background-color: #f9f9f9;*/
/*}*/







/* 	==========================================================================
	==========================================================================
   							 		TABLATE
	==========================================================================
   	========================================================================== */
@media only screen 	and (min-width : 720px) and (max-width : 1280px){
	.wrapper-package .hero-banner{ margin-top: 100px}
}
@media only screen 	and (min-device-width : 768px) and (max-device-width : 992px){
	.hovereffect span.title, 
	.hovereffect p.description, 
	.hovereffect .btn-subcribe{
		padding: 0 15px !important;
	}
	.hovereffect span.title,
	.wrapper-package .list-item span{ 
		font-size: 18px !important;
	}
	.hovereffect p.description{font-size: 14px; line-height: 20px;}
	.hovereffect .btn-subcribe a{ font-size: 14px;padding: 5px 20px;}
	
	.wrapper-package .list-item{ padding: 15px}
	.wrapper-package .list-item span{ padding-bottom: 30px}
	.wrapper-package .list-item ul li{ font-size: 14px;}
}


@media only screen 	and (min-device-width : 992px) and (max-device-width : 1024px){
	
}