.oc {
padding:0;
margin-top:-90px;
float:left;
width:33.3333%;
min-width:300px;
height:300px;
background-size:100%;
text-indent:-9999px;
background-position:center;
background-repeat:no-repeat;
background-image:url(images/home/our-course_r.jpg);
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}
.oc a {
padding:0;
display: block;
height:300px;
background-size: 100%;
background-repeat:no-repeat;
background-position:center !important;
transition: opacity .6s ease-in-out;
-o-transition:opacity .6s ease-in-out;
-moz-transition:opacity .6s ease-in-out;
-webkit-transition:opacity .6s ease-in-out;
background-image:url(images/home/our-course.jpg);
background-size:			cover;
-moz-background-size:		cover;
-webkit-background-size:  	cover;
}
.oc a:hover,
.oc a:focus {
opacity:0;
}
.bn {
padding:0;
margin-top:-90px;
float:left;
width:33.3333%;
min-width:300px;
height:300px;
background-size:100%;
text-indent:-9999px;
background-position:center;
background-repeat:no-repeat;
background-image:url(images/home/book-now_r.jpg);
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}
.bn a {
padding:0;
display: block;
height:300px;
background-size: 100%;
background-repeat:no-repeat;
background-position:center !important;
transition: opacity .6s ease-in-out;
-o-transition:opacity .6s ease-in-out;
-moz-transition:opacity .6s ease-in-out;
-webkit-transition:opacity .6s ease-in-out;
background-image:url(images/home/book-now.jpg);
background-size:			cover;
-moz-background-size:		cover;
-webkit-background-size:  	cover;
}
.bn a:hover,
.bn a:focus {
opacity:0;
}
.tg {
padding:0;
margin-top:-90px;
float:left;
width:33.3333%;
min-width:300px;
height:300px;
background-size:100%;
text-indent:-9999px;
background-position:center;
background-repeat:no-repeat;
background-image:url(images/home/the-gallery_r.jpg);
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}
.tg a {
padding:0;
display: block;
height:300px;
background-size: 100%;
background-repeat:no-repeat;
background-position:center !important;
transition: opacity .6s ease-in-out;
-o-transition:opacity .6s ease-in-out;
-moz-transition:opacity .6s ease-in-out;
-webkit-transition:opacity .6s ease-in-out;
background-image:url(images/home/the-gallery.jpg);
background-size:			cover;
-moz-background-size:		cover;
-webkit-background-size:  	cover;
}
.tg a:hover,
.tg a:focus {
opacity:0;
}
/* #Lower Panels
================================================== */
.cr {
padding:0;
margin:0;
float:left;
width:25%;
height:250px;
background-size:100%;
text-indent:-9999px;
background-position:center;
background-repeat:no-repeat;
background-image:url(images/home/our-course_r.jpg);
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}
.cr a {
padding:0;
display: block;
height:250px;
background-size: 100%;
background-repeat:no-repeat;
background-position:center !important;
transition: opacity .6s ease-in-out;
-o-transition:opacity .6s ease-in-out;
-moz-transition:opacity .6s ease-in-out;
-webkit-transition:opacity .6s ease-in-out;
background-image:url(images/home/our-course.jpg);
background-size:			cover;
-moz-background-size:		cover;
-webkit-background-size:  	cover;
}
.cr a:hover,
.cr a:focus {
opacity:0;
}
.cs {
padding:0;
margin:0;
float:left;
width:25%;
height:250px;
background-size:100%;
text-indent:-9999px;
background-position:center;
background-repeat:no-repeat;
background-image:url(images/home/course-specials_r.jpg);
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}
.cs a {
padding:0;
display: block;
height:250px;
background-size: 100%;
background-repeat:no-repeat;
background-position:center !important;
transition: opacity .6s ease-in-out;
-o-transition:opacity .6s ease-in-out;
-moz-transition:opacity .6s ease-in-out;
-webkit-transition:opacity .6s ease-in-out;
background-image:url(images/home/course-specials.jpg);
background-size:			cover;
-moz-background-size:		cover;
-webkit-background-size:  	cover;
}
.cs a:hover,
.cs a:focus {
opacity:0;
}
.th {
padding:0;
margin:0;
float:left;
width:25%;
height:250px;
background-size:100%;
text-indent:-9999px;
background-position:center;
background-repeat:no-repeat;
background-image:url(images/home/the-history_r.jpg);
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}
.th a {
padding:0;
display: block;
height:250px;
background-size: 100%;
background-repeat:no-repeat;
background-position:center !important;
transition: opacity .6s ease-in-out;
-o-transition:opacity .6s ease-in-out;
-moz-transition:opacity .6s ease-in-out;
-webkit-transition:opacity .6s ease-in-out;
background-image:url(images/home/the-history.jpg);
background-size:			cover;
-moz-background-size:		cover;
-webkit-background-size:  	cover;
}
.th a:hover,
.th a:focus {
opacity:0;
}
.ol {
padding:0;
margin:0;
float:left;
width:25%;
height:250px;
background-size:100%;
text-indent:-9999px;
background-position:center;
background-repeat:no-repeat;
background-image:url(images/home/our-location_r.jpg);
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
}
.ol a {
padding:0;
display: block;
height:250px;
background-size: 100%;
background-repeat:no-repeat;
background-position:center !important;
transition: opacity .6s ease-in-out;
-o-transition:opacity .6s ease-in-out;
-moz-transition:opacity .6s ease-in-out;
-webkit-transition:opacity .6s ease-in-out;
background-image:url(images/home/our-location.jpg);
background-size:			cover;
-moz-background-size:		cover;
-webkit-background-size:  	cover;
}
.ol a:hover,
.ol a:focus {
opacity:0;
}


/* #Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width: 768px; }

.oc {
padding:0;
margin:0px;
width:100%;
height:300px;
}
.bn {
padding:0;
margin:0px;
width:100%;
height:300px;
}
.tg {
padding:0;
margin:0px;
width:100%;
height:300px;
}
/* #Lower Panels
================================================== */
.cr {
padding:0;
margin:0px;
width:50%;
height:250px;
}
.cs {
padding:0;
margin:0px;
width:50%;
height:250px;
}
.th {
padding:0;
margin:0px;
width:50%;
height:250px;
}
.ol {
padding:0;
margin:0px;
width:50%;
height:250px;
}

}
/* #Mobile (Landscape)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
.oc  {
padding:0;
margin:0px;
width:100%;
height:200px;
}
.bn  {
padding:0;
margin:0px;
width:100%;
height:200px;
}
.tg  {
padding:0;
margin:0px;
width:100%;
height:200px;
}

/* #Lower Panels
================================================== */
.cr {
padding:0;
margin:0px;
width:50%;
height:250px;
}
.cs {
padding:0;
margin:0px;
width:50%;
height:250px;
}
.th {
padding:0;
margin:0px;
width:50%;
height:250px;
}
.ol {
padding:0;
margin:0px;
width:50%;
height:250px;
}
}
/*  #Mobile (Portrait)
================================================== th   co   cs   gs*/
@media only screen and (max-width: 767px) {
.container { width: 300px; }
.oc  {
padding:0;
margin:0px;
width:100%;
height:300px;
}
.bn  {
padding:0;
margin:0px;
width:100%;
height:300px;
}
.tg  {
padding:0;
margin:0px;
width:100%;
height:300px;
}
/* #Lower Panels
================================================== */
.cr {
padding:0;
margin:0px;
width:100%;
height:250px;
}
.cs {
padding:0;
margin:0px;
width:100%;
height:250px;
}
.th {
padding:0;
margin:0px;
width:100%;
height:250px;
}
.ol {
padding:0;
margin:0px;
width:100%;
height:250px;
}
}
}