/*-- Blue page --*/

/*-- For large screens --*/
@media (min-width:997px){
	/*-- #main #trips h2.bannerText{position:absolute; width: 60%; text-align:right; top:12%; right:6%; font-size:3.2rem; color:white; text-shadow: 1px 1px 6px black;}--*/
	#main #trips h2.bannerText1{position:absolute; width: 80%; text-align:left; bottom:42%; left:6%; font-size:5.2rem; color:white; text-shadow: 1px 1px 6px black; }
	#main #trips h2.bannerText2{position:absolute; width: 60%; text-align:left; top:58%; left:6%; font-size:2.4rem; color:white; text-shadow: 1px 1px 6px black; }
	#main #courses h2.bannerText{position:absolute; width: 60%; text-align:left; bottom:8%; left:6%; font-size:3.2rem; color:white; text-shadow: 1px 1px 6px black; }
	.trip, .courses{ width: 40%; margin: 30px auto 20px; padding: 26px; font-size: 2.2rem; }
	.layout2{ width: 66%; }
	.tripList2, .courseList2{ display: inline-block; width: 47%; margin: 1% 1.3% 1.5%; }
	.tripList3, .courseList3{ display: inline-block; width: 31%; margin: 0 1%; }
	.tripTitle, .courseTitle{ margin: 40% 0 15px; padding: 0 15px; font-size: 1.2em; line-height: 30px; }
}

/*-- For medium screens --*/
@media (max-width:996px){
	/*-- #main #trips h2.bannerText{position:absolute; width: 70%; text-align:right; top:12%; right:6%; font-size:2.6rem; color:white; text-shadow: 1px 1px 6px black;} --*/
	#main #trips h2.bannerText1{position:absolute; width: 80%; text-align:left; top:42%; left:6%; font-size:3.6rem; color:white; text-shadow: 1px 1px 6px black;}
	#main #trips h2.bannerText2{position:absolute; width: 70%; text-align:left; top:58%; left:6%; font-size:2rem; color:white; text-shadow: 1px 1px 6px black;}
	#main #courses h2.bannerText{position:absolute; width: 70%; text-align:left; bottom:8%; left:6%; font-size:2.6rem; color:white; text-shadow: 1px 1px 6px black;}
	.trip, .courses{ width: 60%; margin: 30px auto 20px; padding: 26px; font-size: 2rem; }
	.layout2{ width: 100%; }
	.tripList2, .courseList2, .tripList3, .courseList3{ display: block; width: 80%; margin: 0 auto 2%; padding:2% 0;}
	.tripTitle, .courseTitle{ margin: 40% 0 5%; padding: 0 15px; font-size: 1.2em; line-height: 36px; }
}

/*-- For small screens --*/
@media (max-width:568px){
	/*-- #main #trips h2.bannerText{position:absolute; width: 70%; text-align:right; top:12%; right:6%; font-size:2rem; color:white; text-shadow: 1px 1px 6px black;} --*/
	#main #trips h2.bannerText1{position:absolute; width: 70%; text-align:left; top:36%; left:6%; font-size:2rem; color:white; text-shadow: 1px 1px 6px black;}
	#main #trips h2.bannerText2{position:absolute; width: 70%; text-align:left; top:52%; left:6%; font-size:1.4rem; color:white; text-shadow: 1px 1px 6px black;}
	#main #courses h2.bannerText{position:absolute; width: 80%; text-align:left; bottom:8%; left:6%; font-size:2rem; color:white; text-shadow: 1px 1px 6px black;}
	.trip, .courses{ width: 80%; margin: 30px auto 20px; padding: 26px; font-size: 1.8rem; }
	.layout2{ width: 100%; }
	.tripList2, .courseList2, .tripList3, .courseList3{ display: block; width: 100%; margin: 0 auto 5%; padding:1% 0;}
	.tripTitle, .courseTitle{ margin: 40% 0 15px; padding: 0 15px; font-size: 1.1em; line-height: 36px; }
}


/*== Page deisgn for course.php ==*/
#main #trips{
    width:100%;
}

#main #courses{
    width:100%;
    margin-top: 40px;
}

#main #trips .tripBanner, .courseBanner{
    display:block;
    position:relative;
}

#main #trips img{
    width:100%;
}

#main #courses img{
    width:100%;
}

.trip, .courses{
	display: block;
    clear: both;
	color: #fff;
	text-align: center;
	border-radius: 8px;
}

.trip{
	background: url(../jpg/index_dive_trip.jpg) no-repeat;
    background-size: 100%;
}

.courses{
	background: url(../jpg/index_dive_courses.jpg) no-repeat;
    background-size: 100%;
}

#main #trips #tripInformation{
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.layout3, .layout2{
	display: block;
	margin: 2% auto 0;
	padding: 0;
}

.tripTitle, .courseTitle{
	color: #fff;
	text-shadow: 1px 1px 1px grey;
	background:  #072888;
}

.tripIntro, .courseIntro{
	margin: 0 auto;
	padding: 10px 15px;
	font-size: 1.1rem;
	line-height: 20px;
	text-align: center;
	color: #fff;
	background: #337ab7;
}

#owTitle{
	background: url(../jpg/course_ow.jpg) no-repeat;
	background-size: 100%;
}

#aowTitle{
	background: url(../jpg/course_aow.jpg) no-repeat;
	background-size: 100%;
}

#instTitle{
	background: url(../jpg/course_inst.jpg) no-repeat;
	background-size: 100%;
} 

img{
    width:100%;
}

.trip, .courses{
	display: block;
    clear: both;
	color: #fff;
	text-align: center;
	border-radius: 8px;
}

.trip{
	background: url(../jpg/index_dive_trip.jpg) no-repeat;
    background-size: 100%;
}

.courses{
	background: url(../jpg/index_dive_courses.jpg) no-repeat;
    background-size: 100%;
}

#main #trips #tripInformation{
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.layout3{
	display: block;
	width: 100%; 
	margin: 2% auto 0;
	padding: 0;
}

.tripTitle, .courseTitle{
	color: #fff;
	text-shadow: 1px 1px 1px grey;
	background:  #072888;
}

.tripIntro, .courseIntro{
	margin: 0 auto;
	padding: 10px 15px;
	font-size: 1.1rem;
	line-height: 20px;
	text-align: center;
	color: #fff;
	background: #337ab7;
}

#owTitle{
	background: url(../jpg/course_ow.jpg) no-repeat;
	background-size: 100%;
}

#aowTitle{
	background: url(../jpg/course_aow.jpg) no-repeat;
	background-size: 100%;
}

#instTitle{
	background: url(../jpg/course_inst.jpg) no-repeat;
	background-size: 100%;
}