@media only screen and (min-width:1003px) and (max-width:1024px)
{
	.slider li .caption{ left:15px;} 
	#banner-outer .slider li{ height:auto !important;}
	.design-by{ margin-right:15px;}
	#page-rtr #banner-outer{ height:auto;} 
	#page-rtr #logo{ width:250px; height:250px;}
	#page-rtr #logo img{ max-width:100%;}
	#page-rtr #event-date{ width:250px; height:250px;}
	#page-rtr #event-date img{ max-width:100%;}
}
@media only screen and (min-width:768px) and (max-width:1002px)
{
	#wrapper{ width:100%; position:relative; box-shadow:0 0 10px 10px rgba(0,0,0,.2); z-index:10; background:#fff; overflow:hidden; }
	.width{ width:100%;}
	
	#header-top{ display:none;}
	header .logo{ margin:0;}
	#header-bottom{ height:auto; padding:12px 0 7px;} 
	#header-bottom .uphillemg-logo{ margin-right:15px;}
	#header-landing #header-bottom{ height:auto;}
	#header-landing #header-bottom .logo{ margin:3px 0 0 0;}
	#header-landing #social-menu{ margin-top:24px;}
	#header-landing #organizer{ margin-right:40px;}
	#social-menu {margin-right:40px; float:right; }
	
	#banner-outer .slider li{ height:auto !important;}
	.slider li .caption{ left:10px;}
	.slider .sub-title{ font-size:30px; line-height:35px;}
	
	#top-menu,#race-menu{ display:none;}
	#register-block p{ font-size:90%;}
	
	.NoVideo #TopImg .Inner{ display:none;}
	
	#top-menu,#race-menu{ display:none;}
	.JS #TopMovie{ display:none;}
	.JS #TopImg .Inner{ left:0 !important; height:350px !important; width:100% !important;}
	
	#bottom {margin-top:0;}
	.NoVideo #TopImg, .HTML5 #TopImg{ position:relative;}
	.NoVideo #TopImg img, .HTML5 #TopImg img{ height:auto !important; max-width:100%; width:auto;}

	
	#race-location{ height:364px;}
	#race-location.rtr-banner .width{ padding:0;}
	#race-location .left{ height:364px;}
	#race-location .right{ height:364px; background-position:center top; position:relative;}
	#race-location .trace-info{ padding:5% 5% 5.2%; width:100%; position:absolute; top:0; bottom:0;}
	
	#testimonial-block{ height:220px;}
	#testimonial-block .right{ height:180px; overflow-y:auto; padding:0 2.5% 0; margin:20px 0;}
	
	.partners-logo li{ width:22%;}
	
	.design-by{ margin-right:15px;}
	
	#main-menu{ display:none;} 
	#mobile-menu-icon{ display:block;}
	#mobile-menu{ display:block; width:250px; position:absolute; right:0; top:0; background:#373737;}
	#mobile-menu #main-menu{ display:block; float:none; }
	#main-menu ul{ margin:20px 0 0 0;} 
	#main-menu ul li{ float:none; padding:0; margin:0; border-bottom:1px solid #ddd;}
	#main-menu ul li:last-child{ border-bottom:none;}
	#main-menu ul li a{ font-family: 'Open Sans', sans-serif; font-size:15px; border-bottom:none; padding:10px 20px; display:block; color:#fff; text-transform:none; font-weight:400;}
	#main-menu ul li a:hover, #main-menu ul li a.active{ border-bottom:none; color:#fff;}
	#main-menu ul li a .submenu{ position:absolute; right:0; top:0; background:url(../images/down-arrow.png) no-repeat center center; width:40px; height:40px; display:block;  cursor:pointer; -moz-transition:transform 0.3s ease-in-out;  -webkit-transition:transform 0.3s ease-in-out;  transition:transform 0.3s ease-in-out; }
	#main-menu ul li.changebg>a>.submenu { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg);  }
	#main-menu ul li > ul{ padding:0; border:none; width:auto;}
	#main-menu ul li ul,#main-menu ul li:hover > ul{ display:none; opacity:1; position:relative; top:0; visibility:visible; transition:none;}
	#main-menu ul li ul li{ border-top:none;}
	#main-menu ul li ul li a .submenu{ background:url(../images/down-arrow1.png) no-repeat center center; }
	#main-menu ul li > ul > li > ul{ left:0; top:0;}
	#main-menu ul li ul li a{ padding:10px 20px;}
	#main-menu ul li:hover > a, #main-menu ul li a.active{ border:none; color:#fff;}
	
	#mobile-menu-icon a{ display:inline-block;  height:24px; width:24px; text-align:center; position:absolute; right:15px; top:18px; background:url(../images/nav-icon.png) no-repeat 0 0;}
	
	
	.width.races{ top:120px;}
	.width.races ul li{ width: 30%; margin:0 1%; height:294px; overflow:hidden; }
	.width.races ul li .race-pic{ width:100%; }
	.width.races ul li .race-pic img{ display:block; max-width:100%;}

	#content{ width:70%;}
	
	#sidebar{ width:28%;}
	
	#page-rtr #banner-outer{ height:auto;} 
	#page-rtr .banner-bottom-bg{ display:none;}
	#page-rtr #logo{ width:200px; height:200px; margin:10px 0 0 30px;}
	#page-rtr #logo img{ max-width:100%; }
	#page-rtr #event-date{ width:200px;  }
	#page-rtr #event-date img{ max-width:100%; }
	
	#page-rtr #logos{ background:#EBDCB5}
	#page-rtr #logos h3{ padding:30px 0;}
	#page-rtr #event-message{ text-align:center; padding:20px 0;}
	#page-rtr #event-message .tourisum-logo{ margin:10px 10px 0 0; width:15%;}
	#page-rtr #event-message .message{ width:60%;}
	#page-rtr #event-message .organiser{ width:20%;}
	#page-rtr #event-message .organiser img{ max-width:100%;}
	.left.msg-column, .right.msg-column {float:none; width:100%;}
}

@media only screen and (max-width:767px)
{
	#wrapper{ width:100%; position:relative; box-shadow:0 0 10px 10px rgba(0,0,0,.2); z-index:10; background:#fff;  }
	.width{ width:100%;}
	header .logo{ margin:0;}
	header{ height:auto;}
	header .logo img{ max-width:80%;}
	#header-bottom{ height:auto; padding:12px 0 7px;}
	#header-bottom .uphillemg-logo{ margin-right:10px; width:65px; margin-top:0;}
	#header-bottom .uphillemg-logo img{ display:inline-block; max-width:100%; height:auto;}
	#header-landing #header-bottom .logo{ margin:0;}
	#header-landing #header-bottom{ height:auto;}
	#header-landing #organizer{ display:none;}
	#header-landing #social-menu{display:none;}
	
	#register-block{ display:none;}
	.NoVideo #TopImg .Inner{ display:none;}
	#top-menu,#race-menu{ display:none;}
	.JS #TopMovie{ display:none;}
	#bottom {margin-top:31%;}
	#social-menu{ text-align:center; float:right; margin-right:30px; margin-top:15px;}
	#social-menu ul li{ float:none; margin:0 5px; display:inline-block; vertical-align:top;}
	

	#banner-outer .slider li{ position:relative;}
	#banner-outer .width{ padding:0;}
	#banner-outer .slider li{ height:auto !important;}
	.slider li .caption{ position:relative; display:block; bottom:0; left:0; right:0; width:auto;}
	.slider .sub-title{ font-size:18px;  line-height:22px; opacity:1;}
	.slider .sub-title span{ letter-spacing:0; padding:10px; display:inline-block; }

	
	#race-location{ height:auto;}
	#race-location.rtr-banner .width{ padding:0;}
	#race-location .left{ float:none; width:100%; height:222px;}
	#race-location .left img{ float:none;}
	#race-location .right{ float:none; width:100%; position:relative;  background-position:center top; height:auto; }
	#race-location .trace-info{ position:relative; padding:20px; width:100%; float:none; }
	#race-location .left .map-pin{ font-size:110%;}	
	
	#testimonial-block{ height:auto;}
	#testimonial-block .left{ display:none;}
	#testimonial-block .right{ padding:20px; width:100%; height:auto;}

	.design-by{ margin-right: 15px;}
	
	#register-block{ background:#fff;}
	#register-block p{ width:100%; float:none; font-size:100%; font-weight:400; color:#000;}
	#register-block a{ float:none; max-width:140px; margin:0 auto; display:block; margin-bottom:10px; line-height:normal; font-size:100%;}
	#register-block a span{ font-size:150%;}
	
	#main-menu{ display:none;} 
	#mobile-menu-icon{ display:block;}
	#mobile-menu{ display:block; width:250px; position:absolute; right:0; top:0; background:#373737;}
	#mobile-menu #main-menu{ display:block; float:none;}
	#main-menu ul{ margin:20px 0 0 0;} 
	#main-menu ul li{ float:none; padding:0; margin:0; border-bottom:1px solid #ddd; position:relative;}
	#main-menu ul li:last-child{ border-bottom:none;}
	#main-menu ul li a{  font-family: 'Open Sans', sans-serif; font-size:15px; border-bottom:none; padding:10px 20px; display:block; color:#fff; text-transform:none; font-weight:400;}
	#main-menu ul li a:hover, #main-menu ul li a.active{ border-bottom:none; color:#fff;}
	#main-menu ul li a .submenu{ position:absolute; right:0; top:0; background:url(../images/down-arrow.png) no-repeat center center; width:40px; height:40px; display:block;  cursor:pointer; -moz-transition:transform 0.3s ease-in-out;  -webkit-transition:transform 0.3s ease-in-out;  transition:transform 0.3s ease-in-out; }
	#main-menu ul li.changebg>a>.submenu { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg);  }
	#main-menu ul li ul,#main-menu ul li:hover > ul{ display:none; opacity:1; position:relative; top:0; visibility:visible; transition:none; width:auto;}
	#main-menu ul li > ul{ padding:0; border:none;}
	#main-menu ul li ul li{ border-top:none;}
	#main-menu ul li ul li a .submenu{ background:url(../images/down-arrow1.png) no-repeat center center; }
	#main-menu ul li > ul > li > ul{ left:0; top:0;}
	#main-menu ul li ul li a{ padding:10px 20px;}
	#main-menu ul li:hover > a, #main-menu ul li a.active{ border:none; color:#fff;}

	#mobile-menu-icon a{ display:inline-block;  height:24px; width:24px; text-align:center; position:absolute; right:15px; top:13px; background:url(../images/nav-icon.png) no-repeat 0 0;}
	#bottom { margin-top: 200px;}
	.width.races{ position:relative; margin:20px 0; bottom:0;}
	.width.races ul li{ margin:0 10px 20px 10px; width:280px; height:300px; overflow:hidden;}
	.width.races ul li .race-pic{ width:100%;}
	.width.races ul li .race-pic img{ max-width:100%;}
	
	#content{ width:100%; border:none; padding-right:0;}
	
	#sidebar{ display:none;}
	
	#page-rtr #header-top{ background:#fff;}
	#page-rtr #mobile-menu #top-menu{ display:block;}
	#page-rtr #mobile-menu-icon a{ top:8px;}
	
	#page-rtr #top-menu{ float:none;} 
	#page-rtr #top-menu ul{ margin:20px 0 0 0;} 
	#page-rtr #top-menu ul li{ float:none; padding:0; margin:0; border-bottom:1px solid #ddd; position:relative;}
	#page-rtr #top-menu ul li:last-child{ border-bottom:none;}
	#page-rtr #top-menu ul li a{  font-family: 'Open Sans', sans-serif; font-size:15px; border-bottom:none; padding:10px 20px; display:block; color:#fff; text-transform:none; font-weight:400;}
	#page-rtr #top-menu ul li a:hover, #page-rtr #top-menu ul li a.active{ border-bottom:none; color:#fff;}
	#page-rtr #top-menu ul li a .submenu{ position:absolute; right:0; top:0; background:url(../images/down-arrow.png) no-repeat center center; width:40px; height:40px; display:block;  cursor:pointer; -moz-transition:transform 0.3s ease-in-out;  -webkit-transition:transform 0.3s ease-in-out;  transition:transform 0.3s ease-in-out; }
	#page-rtr #top-menu ul li.changebg>a>.submenu { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg);  }
	#page-rtr #top-menu ul li ul,#page-rtr #top-menu ul li:hover > ul{ display:none; opacity:1; position:relative; top:0; visibility:visible; transition:none; z-index:1;}
	#page-rtr #top-menu ul li > ul{ padding:0; border:none; margin:0;}
	#page-rtr #top-menu ul li ul li{ border-top:none;}
	#page-rtr #top-menu ul li ul li a{ padding:10px 20px;color:#373737;}
	#page-rtr #top-menu ul li:hover > a, #page-rtr #top-menu ul li a.active{ border:none; color:#fff;}
	#page-rtr #top-menu ul li ul li a:hover{ background:#da251c;}

	
	#page-rtr #banner-outer{ height:auto;} 
	#page-rtr .banner-bottom-bg{ display:none;}
	#page-rtr #logo{ width:150px; height:150px; margin:10px 0 0 30px;}
	#page-rtr #logo img{ max-width:100%; }
	#page-rtr #event-date{ width:150px; margin-right:30px;}
	#page-rtr #event-date img{ max-width:100%; }
	
	#page-rtr #logos{ background:#EBDCB5}
	#page-rtr #logos h3{ padding:30px 0;}
	#page-rtr #event-message{ text-align:center; padding:20px 0;}
	#page-rtr #event-message .tourisum-logo{ margin:10px 10px 0 0; width:15%;}
	#page-rtr #event-message .message{ width:60%;}
	#page-rtr #event-message .organiser{ width:20%;}
	#page-rtr #event-message .organiser img{ max-width:100%;}	
}


@media only screen and (min-width:320px) and (max-width:480px)
{
	#menu {float:none; }
	#menu li{float:none; display:inline-block; vertical-align:top; }
	#header-bottom .uphillemg-logo{ margin-right:0px; width:65px; margin-top:0;}
	#header-bottom .uphillemg-logo img{ display:inline-block; max-width:80%; height:auto;}
	#logos .width { padding: 0; }
	#logos h3 { margin-bottom: 0; }
	.sponsors { margin-bottom: 25px; }
	.sponsors li, .partners-logo li{ float: none; display:inline-block; vertical-align:top; width: 140px; overflow: inherit; margin: 0 10px 10px; }
	.sponsors li span, .partners-logo li span { width: 140px; }
	
	#banner-outer .width{ padding:0;}
	.slider .sub-title{ font-size:14px; font-weight:400; line-height:18px;}
	.slider .sub-title span{ letter-spacing:0;}
	
	.JS #TopImg .Inner{ height:250px !important; left:0 !important; width:100% !important;}
	#bottom{ margin-top:24%;}
	
	.width.races ul li{ width:270px;}
	
	footer{ text-align:center;}
	
	.design-by{float:none; display:inline-block; vertical-align:top; margin:10px 0 0 0; }
	
	#page-rtr #logo{ width:100px; height:100px; margin:10px 0 0 10px;}
	#page-rtr #logo img{ max-width:100%; }
	#page-rtr #event-date{ width:150px; margin-right:10px;}
	#page-rtr #event-date img{ max-width:100%; }
	#page-rtr #logo .link{ display:none;}
	#page-rtr #event-message{ text-align:center; padding:20px 0;}
	#page-rtr #banner-outer{ height:auto;}
	#page-rtr .banner-bottom-bg{ display:none;}
	#page-rtr #event-message .tourisum-logo{ display:inline-block; float:none; margin:0;}
	#page-rtr #event-message .message{ width:100%;display:inline-block; float:none; }
	#page-rtr #event-message .organiser{display:inline-block; float:none; width:auto;  }
	#page-rtr #event-date .register-link{ display:none;}
	.org-content {margin-left: auto;}
	
	.left.msg-column, .right.msg-column {float:none; width:100%;}
	#message .msg-photo, #message .msg-content {float:none; margin:0;}
	#content .pic-right,#content .pic-left{ float: none; margin: 0 auto 30px; width: auto;}
	
	#race-location .trace-info.new, #race-location .adv {float:none; width:100%;}
	ul.tabs li{ float:none; display:inline-block; margin-left:8px; font-size:12px;}
	ul.tabs li a{ padding:5px;}
	.tab-container{ margin-top:-6px;}
	.tab-content .left,.tab-content .right{ float:none; width:100% !important; overflow-x:auto;}
}