html, body {
	margin: 0;
	padding: 0;
}

div {
    box-sizing: border-box;
}

img {
	max-width: 100%;
}

.print {
	display: none;
}

#map {
	display: none;
}

#map img {
	max-width:none;
}

.container {
padding: 2% 0;
}

.container .row {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

#site_container {
	position: relative;
	width: 100%;
	overflow: hidden;
}

#main_container {
	position: relative;
	width: 100%;
}

#main_slider {
	position: absolute;
	width: 100%;
	top: 0;
}

#site {
	position: relative;
	top: 0;
	left: 0;
}


#banner_container {
	background-color: #ccc;
}

#banner_container .banner {
	width: 100%;
	padding-top: 60%;
	margin: 0 auto;
}

#banner_container .banner_01 {
	background-image: url(../content/img/banner_01_sm.jpg);
}

#banner_container .banner_02 {
	background-image: url(../content/img/banner_02_sm.jpg);
}

#banner_container .banner_03 {
	background-image: url(../content/img/banner_03_sm.jpg);
}

#banner_container .banner_04 {
	background-image: url(../content/img/banner_04_sm.jpg);
}

#banner_container .banner_05 {
	background-image: url(../content/img/banner_05_sm.jpg);
}

#top {
	padding: 5% 0 2% 0;
}

#top .motbf_logo {
	background-image: url(../content/img/logo.png);
	width: 250px;
	padding-top: 88px;
	margin: 10px auto 20px auto;
}

#feature {
	background-color: #f5f5f5;
}

#feature .box {
	padding-top: 20px;
	padding-bottom: 20px;
	border: 1px solid #ccc;
	background-color: #fff;
}

#footer {
	background-color: #03618c;
	height: 50px;
}

/* process */

#process {
	position: relative;
	padding-top: 5px;
}

#process h3, #process p, #process li {
	color: #000;
}

#process .step_1,
#process .step_2,
#process .step_3,
#process .step_4 {
	padding: 10px 30px;
	background-image: url(../content/img/process_dn.gif);
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: 1000px 75px;
	padding-bottom: 100px;
}

#process .step_1 {
	background-color: #ffd3d1;
}


#process .step_2 {
	background-color: #fdf998;
}

#process .step_3 {
	background-color: #bbea9c;
}

#process .step_4 {
	background-color: #c7e8f7;
}

#process .step_5 {
	padding: 10px 30px;
	background-image: none;
	background-color: #e8c5f2;
}

/* end process */

/* sessions */

#sessions .step {
	padding: 20px;
	background-color: #e8c5f2;
	background-repeat: no-repeat;
	background-image: url(../content/img/process_dn.gif);
	background-position: 50% 100%;
	background-size: 1000px 75px;
	padding-bottom: 100px;
  	text-align: center;
}

#sessions .step.focus {
	background-color: #fff;
	border: 1px solid #782b90;
	padding: 20px;
	
}

#sessions h4 {
	margin-top: 0;
}

#sessions h4,
#sessions p {
	color: #000;
}

#sessions h3 {
	color: #000;
	margin: 0 auto;
	text-align:center;
}

/* end sessions */

/* contact */

.contact_form label {
	display: block;
	font-size: 22px;  
	color: #782b90;
  	font-weight: 300;
	padding: 12px 0 6px 0;
}

.contact_form input[type="text"],
.contact_form textarea {
	box-sizing:border-box;
	display: block;
	width: 100%;
	padding: 8px 12px;
	font-size: 16px;
	border: 1px solid #ccc;
}

input[type="submit"].btn {
	font-size: 18px;
	width: 100%;
}

/* end contact */

/* responsive layout */

.show_xs,
.show_sm,
.show_md,
.show_lg,
.show_xl,
.show_xxl{
	display: none;
}

.container > .row,
.col {
	padding: 0 10px;
}

.col .col {
	padding-left: 0;
}

.col {
	float: left;
	width: 100%;
	position: relative;
}

.col.xs_1 { width: 8.3333333333% }
.col.xs_2 { width: 16.6666666667% }
.col.xs_3 { width: 25% }
.col.xs_4 {	width: 33.3333333333% }
.col.xs_5 { width: 41.6666666667% }
.col.xs_6 { 	width: 50% }
.col.xs_7 { 	width: 58.3333333333% }
.col.xs_8 { 	width: 66.6666666667% }
.col.xs_9 { 	width: 75% }
.col.xs_10 { width: 83.3333333333% }
.col.xs_11 { width: 91.6666666667% }
.col.xs_12 { width: 100% }


/* end responsive layout */

/* x-small (xs) */ 
@media only screen and (min-width : 480px) {

/* responsive layout */

.show_xs {
	display: block;
}

.hide_xs {
	display: none;
}

/* end responsive layout */

} /* end x-small */

/* small (sm) */ 
@media only screen and (min-width : 768px) {

#top .motbf_logo {
	width: 300px;
	padding-top: 105px;
	margin: 0;
}

#banner_container .banner {
	padding-top: 19%;
}

#banner_container .banner.banner_01 {
	background-image: url(../content/img/banner_01.jpg);
	padding-top: 29%;
}

#banner_container .banner_02 {
	background-image: url(../content/img/banner_02.jpg);
}

#banner_container .banner_03 {
	background-image: url(../content/img/banner_03.jpg);
}

#banner_container .banner_04 {
	background-image: url(../content/img/banner_04.jpg);
}

#banner_container .banner_05 {
	background-image: url(../content/img/banner_05.jpg);
}

#home_feature {
	margin-top: 90px;
}

#mobile_map {
	display: none;
}

#map {
	display: block;
	height: 350px;
}

/* process */

#process {
	max-width: 710px;
	margin: 0 auto;
	padding-top: 10px;
}

#process .step_1,
#process .step_5  {
	width: 48%;
}
#process .step_2,
#process .step_4 {
	width: 40%;
}

#process .step_1 {
	padding: 20px 30px 125px 30px;
	background-position: 54% 100%;
}

#process .step_2 {
	background-image: none;
	padding: 20px 30px 55px 30px;
}

#process .step_3 {
	position: absolute;
	bottom: 80px;
	width:20%;
	left: 40%;
	background-image: url(../content/img/process_right.gif);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 100% 50%;
	padding: 40px 50px 40px 20px;;
}

#process .step_4 {
	position: absolute;
	right: 0;
	bottom: 0;
	background-image: url(../content/img/process_up.gif);
	background-position: 50% 0;
	padding-top: 90px;
	padding-bottom: 20px;
}

#process .step_5 {
	position: absolute;
	right: 0;
	top: 10px;
	padding: 20px 30px;
}
/* end process */

/* sessions */

#sessions {
	height: 500px;
	position: relative;
}

#sessions .step.focus {
	display: block;
	border: none;
	height: 180px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	left: 33%;
	top: 160px;
	width: 34%;
}

#sessions .content {
	padding-top:40px;
}

#sessions .focus h3 {
	font-size: 28px;
	max-width: 225px;
}

#sessions h4 {
	font-size: 20px;
}

#sessions .step {
	box-sizing:border-box;
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	background-repeat: no-repeat;
}

#sessions .step_1 {
	top : 0;
	left : 0;
	height: 200px;
	width: 60%;
	padding-right: 20%;
	background-image: url(../content/img/process_right_2.gif);
	background-position: 100% 53%;
	background-size: 100px 900px;
}

#sessions .step_2 {
	top : 0;
	right : 0;
	height: 300px;
	padding-bottom: 100px;
	width: 40%;
	background-image: url(../content/img/process_dn.gif);
	background-position: 50% 100%;
	background-size: 1000px 100px;
}

#sessions .step_3 {
	bottom : 0;
	right : 0;
	height: 200px;
	width: 60%;
	padding-left: 20%;
	background-image: url(../content/img/process_left.gif);
	background-position: 0% 47%;
	background-size: 100px 900px;
}

#sessions .step_4 {
	bottom : 0;
	left : 0;
	height: 300px;
	padding-top: 130px;
	width: 40%;
	background-image: url(../content/img/process_up.gif);
	background-position: 50% 0%;
	background-size: 1000px 100px;
}

/* end sessions */


/* responsive layout */

.show_sm {
	display: block;
}

.hide_sm {
	display: none;
}

.container .row,
.col {
	padding: 0 15px;
}

.col.sm_1 { width: 8.3333333333% }
.col.sm_2 { width: 16.6666666667% }
.col.sm_3 { width: 25% }
.col.sm_4 {	width: 33.3333333333% }
.col.sm_5 { width: 41.6666666667% }
.col.sm_6 { 	width: 50% }
.col.sm_7 { 	width: 58.3333333333% }
.col.sm_8 { 	width: 66.6666666667% }
.col.sm_9 { 	width: 75% }
.col.sm_10 { width: 83.3333333333% }
.col.sm_11 { width: 91.6666666667% }
.col.sm_12 { width: 100% }


} /* end small */

/* medium (md) */
@media only screen and (min-width : 992px) {

/* process */
#process {
	max-width: none;
}

#process .step_1 {
	padding: 20px 30px 137px 30px;
	background-position: 56% 100%;
}

#process .step_3 {
	bottom: 70px;
	padding: 50px 60px 50px 25px;;
}

/* end Process */

/* responsive layout */

.show_md {
	display: block;
}

.hide_md {
	display: none;
}

.container .row,
.col {
	padding: 0 20px;
}

.container .row {
	width: 960px;
}

.col.md_1 { width: 8.3333333333% }
.col.md_2 { width: 16.6666666667% }
.col.md_3 { width: 25% }
.col.md_4 {	width: 33.3333333333% }
.col.md_5 { width: 41.6666666667% }
.col.md_6 { 	width: 50% }
.col.md_7 { 	width: 58.3333333333% }
.col.md_8 { 	width: 66.6666666667% }
.col.md_9 { 	width: 75% }
.col.md_10 { width: 83.3333333333% }
.col.md_11 { width: 91.6666666667% }
.col.md_12 { width: 100% }

} /* end medium */

/* large (lg) */
@media only screen and (min-width : 1200px) {

#home_feature {
	margin-top: 110px;
}

#top .motbf_logo {
	width: 350px;
	padding-top: 122px;
}

#map {
	height: 500px;
}

/* process */

#process .step_2 {
  padding: 30px 30px 60px 30px;
}

#process .step_3 {
  bottom: 80px;
}

/* end Process */

/* responsive layout */

.show_lg {
	display: block;
}

.hide_lg {
	display: none;
}

.container .row,
.col {
	padding: 0 25px;
}

.container .row {
	width: 1080px;
}

.col.lg_1 { width: 8.3333333333% }
.col.lg_2 { width: 16.6666666667% }
.col.lg_3 { width: 25% }
.col.lg_4 {	width: 33.3333333333% }
.col.lg_5 { width: 41.6666666667% }
.col.lg_6 { 	width: 50% }
.col.lg_7 { 	width: 58.3333333333% }
.col.lg_8 { 	width: 66.6666666667% }
.col.lg_9 { 	width: 75% }
.col.lg_10 { width: 83.3333333333% }
.col.lg_11 { width: 91.6666666667% }
.col.lg_12 { width: 100% }

} /* end large */

/* x_large (xl) */
@media only screen and (min-width : 1600px) {

#map {
	height: 550px;
}

/* responsive layout */

.show_xl {
	display: block;
}

.hide_xl {
	display: none;
}

.col.xl_1 { width: 8.3333333333% }
.col.xl_2 { width: 16.6666666667% }
.col.xl_3 { width: 25% }
.col.xl_4 {	width: 33.3333333333% }
.col.xl_5 { width: 41.6666666667% }
.col.xl_6 { 	width: 50% }
.col.xl_7 { 	width: 58.3333333333% }
.col.xl_8 { 	width: 66.6666666667% }
.col.xl_9 { 	width: 75% }
.col.xl_10 { width: 83.3333333333% }
.col.xl_11 { width: 91.6666666667% }
.col.xl_12 { width: 100% }


}

/* xx_large (xxl) */
@media only screen and (min-width : 2000px) {

#banner_container .banner {
	padding-top: 550px;
	width: 2000px;
}

/* responsive layout */

.show_xxl {
	display: block;
}

.hide_xxl {
	display: none;
}

.col.xxl_1 { width: 8.3333333333% }
.col.xxl_2 { width: 16.6666666667% }
.col.xxl_3 { width: 25% }
.col.xxl_4 {	width: 33.3333333333% }
.col.xxl_5 { width: 41.6666666667% }
.col.xxl_6 { width: 50% }
.col.xxl_7 { width: 58.3333333333% }
.col.xxl_8 { width: 66.6666666667% }
.col.xxl_9 { width: 75% }
.col.xxl_10 { width: 83.3333333333% }
.col.xxl_11 { width: 91.6666666667% }
.col.xxl_12 { width: 100% }

}