@media (min-width: 768px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}
@media only screen and (min-width:1003px) and (max-width:1024px){

    #myNavbar{margin:60px 0;}
    .navbar-brand img{width:180px;max-width:100%;}
    .navbar-nav > li > a{padding:5px 12px;}
    /*	.social-icon{margin:60px -20px;}*/
    .fb-icon, .twitter-icon, .youtube-icon, .instagram-icon{margin-right: 5px;}

    #banner{margin-top:80px;}
    .banner-frame-bottom{bottom:380px !important;}
    .banner-content{margin-top:-355px;}
    .banner-content h1{font-size:90px;}
    .banner-frame-top{top:0;}
    .banner-buttons{top:94px;}
    .btn-date{margin-bottom:10px;}

    .run{bottom:196px;}
    #nav #history img.img-leaf{width:40px;max-width:100%;}
    #trail .leaf{bottom:-14%;}
    #trail .trail,#trail .highlight{font-size:40px;line-height:10px;}
    #trail .trail{left:17%;top:18%;}
    #trail .highlight{top:27%;}
    #trail p{top:42%;font-size:18px;width:350px;}

    #content #register ul#progressbar li{padding:30px 8px 10px;min-height:80px;min-width:80px;margin-right:10px;}
    #content #register #progressbar{padding-left:65px;}
    #content #register .step-active,#content #register .step-inactive{top:-80px;left:17px;}
    #content #register .step-inactive1{top:-62px;left:17px;}
    #content #register .step{height:60px;width:60px;padding:10px;}
    #content #register .step span{font-size:16px;}
    #content #register .step-inactive2{left:26px;}
    #content #register h2{font-size:40px;}
    #content #register h3{font-size:16px;}
    .category h5{font-size:16px;}

    table{margin-bottom:10px;}
    .add-new img.add{margin-left:20px;margin-right:10px;}
    .race-checkbox{margin-top:40px;}
    .form-group .browse input{font-size:10px;}
    .reg-content h4.select{font-size:24px;}
    select.form-control{font-size:12px;padding:0;}
    .race-type h5, .race-type span{font-size:18px; }
    .race-type {height: 90px;}
    .race-type img{max-height: 45px;}
    #footer{margin-top:100px;}  


}

@media only screen and (min-width:768px) and (max-width:1002px) {
    #wrapper .navbar{position:relative;}
    #wrapper{ width:100%; position:relative; box-shadow:0 0 10px 10px rgba(0,0,0,.2); z-index:10; background:#fff;  }

    #mobile-menu-icon{ display:block; position:absolute; right:10px; top:30px; width:30px; height:30px; background:url(../images/nav-icon.png) no-repeat 0 0;}
    #mobile-menu{ width:250px; position:absolute; right:0; top:0; height:100%; bottom:0; display:block;}
    #mobile-menu #myNavbar{ margin:0; padding:0; display:block !important;width:100%;}

    #myNavbar{ display:none;margin-left:20px;}
    #myNavbar li{ float:none; padding:0; margin:0;}
    #myNavbar li a{ -moz-border-radius:0; -webkit-border-radius:0;font-size:100%; color:#827c77;font-weight:500;background:#bcd3bc;}
    #myNavbar li.active ul li a{ color: #f0f0f0;}
    #myNavbar li > ul{ padding:0; border:none;}
    .navbar-header{ width:100%;}	
    .navbar-brand img{width:200px;max-width:100%;}
    #myNavbar li.active > a, #myNavbar li.menu a:hover, #myNavbar li.menu a:focus{background:#9fbd47;color:#fff;}
    #myNavbar li ul li ul{ border:none;}
    #myNavbar li a .submenu{ display:block; background:url(../images/down-arrow.png) no-repeat center center; width:40px; height:40px; position:absolute; 			    right:0; top:0; position:absolute; cursor:pointer;  transition: transform 0.3s ease-in-out 0s;}	
    #myNavbar 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; }
    #myNavbar li.submenu-one ul.dropdown-menu,#myNavbar li:hover>ul,#myNavbar li ul li ul,#myNavbar li ul li:hover>ul{ width:auto; display:none; opacity:1; position:relative; left:0; top:0; visibility:visible; transition:none; box-shadow:none;}
    #myNavbar li.changebg > a > .submenu {  transform: rotate(180deg);-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); }
    #myNavbar li.submenu-one:hover > ul{ top:0;}
    #myNavbar li.last-list a{ padding:12px 20px;}
    .navbar-nav > li > .dropdown-menu{margin-top:0;float:none;z-index:0;}
    .social-icon{margin:30px -22px; position: absolute; right: 70px; top: 0;}

    .top-arrow{display:none;}
    .sub-nav-icon{ display:block; background:url(../images/down-arrow.png) no-repeat center center; width:30px; height:30px; position:absolute; right:0; top:0; position:absolute; cursor:pointer;}	
    #content{margin-top:0;}

    #banner{margin-bottom:200px;margin-top:100px;}
    .banner-content{margin-top:-440px;}
    .banner-content p{font-size:12px;}
    .banner-content h1{font-size:75px;}
    .banner-frame-top{top:-130px;}
    .banner-buttons{top:-45px;left:50px;}
    .banner-frame-bottom{bottom:380px !important;}
    .btn-register,.btn-date{padding:0;}
    .btn-date{margin-bottom:10px;background: rgba(0, 0, 0, 0) url(../images/btn-date-ipad.png) no-repeat scroll 0 0;width:162px;height:40px;}
    .btn-register{background: rgba(0, 0, 0, 0) url(../images/btn-register-ipad.png) no-repeat scroll 0 0;width:162px;}
    .btn-date span.title,.btn-register span.register,.btn-register span.soon{line-height:35px;font-size:14px;font-weight:500;}


    .content{margin-top:-210px;}
    #content #history img.img-leaf{width:40px;max-width:100%;bottom:22px;right:60px;}
    #content #goanscape img.img-leaf, #content #race2 img.img-leaf, #content #race1 img.img-leaf,#content #tourism img.img-leaf,#trail .leaf{width:40px;max-width:100%;bottom:-38px;right:60px;}
    #trail .leaf{width:40px;max-width:100%;bottom:-11%;right:60px;}
    #nav #history img.img-leaf{width:30px;max-width:100%;}
    #content #history h2, #content #goanscape h2, #content #tourism h2, #content #overview h2, #content #race1 h2, #content #race2 h2, #content #gallery h2,#content #rules h2,#content #register h2{font-size:40px;}

    #nav{margin-top:60px;}
    #nav .nav-top-img{top:-88px;}
    #nav .nav-left{font-size:15px;}
    #trail .trail,#trail .highlight{font-size:35px;}
    #trail .trail{left:20%;top:24%;}
    #trail .highlight{top:34%;}
    #trail p{top:50%;font-size:14px;width:300px;}

    .run-detail{left:145px;}
    .run{bottom:134px;}
    #run .gap{margin-bottom:80px;}
    #run img.gap,#run img.trail-img{margin:0 auto;}
    #run img.gap{margin-bottom:140px;}
    #run .register{top:48%;}

    ul#progressbar{margin-left:-20px;}
    #content #register ul#progressbar li{padding:20px 8px;margin-right:5px;min-height:80px;min-width:50px;}
    #content #register .step-active,#content #register .step-inactive1,#content #register .step-inactive,#content #register .step-inactive2{height:26px;width:26px;padding-top:3px;}
    #content #register .step-active{top:-67px;left:8px;}
    #content #register .step-inactive1{left:10px;top:-50px;}
    #content #register .step-inactive{top:-67px;left:20px;}
    #content #register .step-inactive2{top:-67px;left:26px;}
    #content #register h3{font-size:16px;}
    #content #register .step{width:60px;height:60px;padding:12px;}
    #content #register .step span{font-size:14px;}
    .reg-content h4.select{font-size:18px;}
    .reg-content{padding:20px 20px 45px;}
    .race-type{padding:10px;}
    p.race-title{font-size:10px;}
    .category h5{font-size:14px;}
    .race-type h5, .race-type span{font-size:18px;}
    .race-type {height: 90px;}
    .race-type img{max-height: 45px;}
    .radio label{font-size:10px;}
    .form-control{font-size:12px;}
    .select-style1{background:#fff url("../images/down-arrow-green-small.png") no-repeat scroll right 5px center;}
    .select-style1 .form-control{font-size:10px;}
    .add-new img.add{margin-left:30px;margin-right:10px;}
    .form-group .browse input{font-size:9px;}
    table.datatable th span{min-height:70px;}

    #footer{margin-top:30px;}
    .fees li .item {margin-right: 0;}

}

@media only screen and (max-width:767px) {

    #wrapper .navbar{ position:relative;}
    #wrapper{ width:100%; position:relative; box-shadow:0 0 10px 10px rgba(0,0,0,.2); z-index:10; background:#fff;  }

    #mobile-menu-icon{ display:block; position:absolute; right:10px; top:35px; width:30px; height:30px; background:url(../images/nav-icon.png) no-repeat 0 0;}
    #mobile-menu{ width:250px; position:absolute; right:0; top:0; height:100%; bottom:0; display:block;}
    #mobile-menu #myNavbar{ margin:0; padding:0; display:block !important;width:100%;}
    #mobile-menu #myNavbar .navbar-nav{ display:block; margin:0; padding:0; width:100%;}
    #mobile-menu #myNavbar .navbar-right{ float:none;} 
    #mobile-menu #myNavbar .navbar-nav > li{ float:none;}

    .navbar-toggle{ display:none;}
    #myNavbar{ display:none;margin-left:20px;}
    #myNavbar li{ float:none; padding:0; margin:0;}
    #myNavbar li a{ -moz-border-radius:0; -webkit-border-radius:0;font-size:100%; color:#827c77;font-weight:500;background:#bcd3bc;}
    #myNavbar li.active ul li a{ color: #f0f0f0;}
    #myNavbar li > ul{ padding:0; border:none;}
    .navbar-header{ width:100%;}	
    .navbar-brand img{width:150px;max-width:100%;}
    #myNavbar li.active > a, #myNavbar li.menu a:hover, #myNavbar li.menu a:focus{background:#9fbd47;color:#fff;}
    #myNavbar li ul li ul{ border:none;}
    #myNavbar li a .submenu{ display:block; background:url(../images/down-arrow.png) no-repeat center center; width:40px; height:40px; position:absolute; 			    right:0; top:0; position:absolute; cursor:pointer;  transition: transform 0.3s ease-in-out 0s;}	
    #myNavbar 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; }
    #myNavbar li.submenu-one ul.dropdown-menu,#myNavbar li:hover>ul,#myNavbar li ul li ul,#myNavbar li ul li:hover>ul{ width:auto; display:none; opacity:1; position:relative; left:0; top:0; visibility:visible; transition:none; box-shadow:none;}
    #myNavbar li.changebg > a > .submenu {  transform: rotate(180deg);-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); }
    #myNavbar li.submenu-one:hover > ul{ top:0;}
    #myNavbar li.last-list a{ padding:12px 20px;}
    .navbar-nav > li > .dropdown-menu{margin-top:0;float:none;z-index:0;}
    .social-icon{margin:35px -12px; position: absolute; right: 55px; top: -2px;}
    .top-arrow{display:none;}
    .sub-nav-icon{ display:block; background:url(../images/down-arrow.png) no-repeat center center; width:30px; height:30px; position:absolute; right:0; top:0; position:absolute; cursor:pointer;}	
    #content{margin-top:0;margin-bottom:0;}

    #banner{margin-top:80px;}
    .banner-frame-top{top:-127px;}
    .banner-frame-bottom{bottom:384px !important;}
    .banner-buttons{top:-40px;left:300px;}
    .banner-content p{font-size:12px;}
    .banner-content h1{font-size:50px;}
    .btn-date{margin-bottom:10px;background: rgba(0, 0, 0, 0) url(../images/btn-date-ipad.png) no-repeat scroll 0 0;width:162px;height:40px;}
    .btn-register{background: rgba(0, 0, 0, 0) url(../images/btn-register-ipad.png) no-repeat scroll 0 0;width:162px;}
    .btn-date span.title,.btn-register span.register,.btn-register span.soon{line-height:12px;font-size:12px;font-weight:500;}

    ul.nav-left li{font-size:14px;}
    #nav{margin-top:60px;}
    #nav .nav-top-img{top:-80px;}
    #nav #history img.img-leaf{width:30px;max-width:100%;}

    #trail .leaf{bottom:-12%;width:40px;max-width:100%;}
    #trail p{font-size:14px;top:56%;width:320px;}
    #trail .trail{left:26%;top:24%;}
    #trail .highlight{top:35%;}

    .run-detail{left:95px;}
    #trail .trail, #trail .highlight{font-size:30px;}
    #run .register{left:40%;top:48%;}
    #run img.gap,#run img.trail-img{margin:0 auto;}
    .run{bottom:120px;}
    #run img.gap{margin-bottom:140px;}
    .run-detail-25k{top:-18px;}
    .run-detail-101k{top:-38px;}
    .run-detail h2{font-size:36px;}
    .run-detail-25k img,.run-detail-101k img{width:80px;max-width:100%;}
    .race{margin-bottom:20px;text-align:center;}

    #content #history h2, #content #goanscape h2, #content #tourism h2, #content #overview h2, #content #race1 h2, #content #race2 h2, #content #gallery h2,#content #rules h2,#content #register h2{font-size:36px;}
    #content #goanscape img.img-leaf, #content #race2 img.img-leaf, #content #race1 img.img-leaf,#content #tourism img.img-leaf{width:30px;max-width:100%;bottom:-28px;right:40px;}
    #content #history img.img-leaf{right:50px;bottom:32px;width:30px;max-width:100%;}
    #content #rules h3{font-size:20px;}
    #content #rules h4{font-size:16px;}
    #content #rules p, #content #rules ul{font-size:12px;}

    ul#progressbar{display:none;}
    #content #register h3{margin-bottom:30px;}
    #content #register .step{width:60px;height:60px;padding:12px;}
    #content #register .step span{font-size:14px;}
    .reg-content{padding:20px;}
    .reg-content h4.select{font-size:20px;}
    .race-25k{margin-bottom:30px;}
    #content #register h3{font-size:18px;}
    .race-checkbox .radio-inline{margin-top:18px;}
    .category h5{font-size:16px;}
    .form-control{padding:2px;font-size:12px;}
    .agree{margin-top:0;}
    .complete p{font-size:12px;}

    .thumb img.img-responsive{width:100%;}
    .zoom{top:14px;right:26px;}
    img.uphillemg{width:100px;max-width:100%;margin-bottom:30px;}
    .reach-address{margin-bottom:30px;}
    .content{margin-top:-210px;}

    #footer ul li{margin-right:30px;}
    #footer{margin-top:30px;}
    
    .banner .run-detail-container {display: none;}
    .fees {display: block;}
    .fees li .item {margin-right: 0;}
    #myScrollspy{display:none;}
}



@media only screen and (min-width:320px) and (max-width:480px) and (orientation : portrait) {


    #banner{margin-bottom:0;}
    .banner-content{margin-top:-200px;top:0;}	
    .banner-buttons{left:20px;}
    .btn-date{margin-bottom:10px; height: 36px; padding:0;}
    .btn-register{height:35px;  padding:0;}
    .btn-date span.title, .btn-register span.register, .btn-register span.soon{font-size:10px;line-height:35px;}

    #run{margin-top:70px;}
    .run-detail-25k,.run-detail-101k{top:-42px;left:40px;}
    .btn-lg, .btn-group-lg > .btn{padding:5px;font-size:14px;}
    #run .register{left:34%;top:47%;}
    #trail{margin-top:40px;}
    #trail .logo{left:14px;top:-18px;}
    #trail .logo img,#trail .birds{width:50px;max-width:100%;}
    #trail .birds{top:-29px;}
    #trail .trail, #trail .highlight{font-size:20px;}
    #trail .trail{left:19%;top:15%;}
    #trail .highlight{top:26%;}
    #trail p{font-size:10px;width:320px;top:48%;width:290px;}
    #trail .leaf{bottom:-23%;}

    #content #history h2, #content #goanscape h2, #content #tourism h2, #content #overview h2, #content #race1 h2, #content #race2 h2, #content #gallery h2, #content #rules h2, #content #register h2{font-size:30px;}
    #content .nav-title{padding-left:0;}
    #content #rules h3{font-size:18px;}
    #content #register h3{font-size:16px;}
    .reg-content h4.select{font-size:15px;}

    .nav-title{margin-bottom:30px}
    .col-xs-8{width:100%;}

    .form-group .browse input{font-size:12px;}

    #footer{margin-top:60px;}

}
@media screen and (max-width:480px) and (orientation : landscape) {
    .banner-buttons{left:20px;top:-65px;}
    .banner-content{top:-125px;margin-bottom:-40px;}
    .run-detail-25k{top:-7px;left:50px;}
    .run-detail-101k{top:-38px;left:50px;}
    #run .register{top:48%;left:32%;}

    #trail .trail{left:36%;top:24%;}
    #trail .logo{left:16px;top:-26px;}
    #trail .logo img{width:60px;max-width:100%;}
    #trail .trail{left:16%;top:10%;}
    #trail .highlight{left:4%;top:22%;}
    #trail p{font-size:12px;top:45%;}
    #trail .leaf{bottom:-18%;}

    .nav-title{margin-bottom:30px}
    #myScrollspy{display:none;}
    .col-xs-8{width:100%;}
    #content .nav-title{padding-left:0;}
}


@media screen and (max-width:320px) and (orientation : portrait) {
    .navbar-brand img{width:100px;}
    .fb-icon, .twitter-icon, .youtube-icon, .instagram-icon{margin-right:5px;}
    .social-icon{margin:35px -2px;}
    .banner-buttons{left:20px;}
    .banner-content{margin-top:-50px;}

    #trail .leaf{width:25px;bottom:-16%;}
    #trail .trail, #trail .highlight{font-size:16px;}
    #trail p{width:250px;font-size:10px;}
    #content .nav-title{font-size:14px;}
    #content #rules h3{font-size:15px;}

    .race-type h5,.race-type span{font-size:26px;}
    .form-group .browse input{font-size:9px;}
    .add-new img.add{margin:10px;}

    #footer ul li{margin-right:10px;}
    #footer .text{font-size:12px;}
}