/* Responsive (Mobile) Design
**********************************************************/
@media (max-width:1500px){

}

@media (min-width: 992px) and (max-width:1024px){
/* Homepage */
#header .navbar-nav > li > a{ padding:10px 6px; font-size:12px; font-weight:600}
#header .navbar-brand{ padding:15px 5px}
#myCarousel .carousel-caption{ left:22%; richness:22%}
#myCarousel h1{ font-size:30px}
.main-banner .bottomLinks{ position:relative; background:#333}
.welcome-txt h2{ margin-top:0}
figure.effect-duke p{ padding:10px; line-height:20px}
.footer-link-section .footerLink li a span{ margin-left:0}
.footer-link-section .footerLink li a{ font-size:15px}
.homerooms-section .roomInfo p{ font-size:12px}
.homerooms-section .roomInfo p span{ font-size:14px}
.main-footer aside.footer-quick-nav li {padding:0 5px}
.main-footer aside {font-size:11px}
}

@media (min-width:768px) and (max-width:991px){
/* Homepage */
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{ padding:0}
#header .navbar-nav > li > a{ padding:5px; font-size:11px; font-weight:600; line-height:68px}
#header .navbar-nav .dropdown-menu li a { padding:5px; font-size:11px; font-weight:600;}
#header .navbar-brand{ padding:15px 5px}
#header .nav.navbar-nav.navbar-right li{ height:auto}
#header .nav.navbar-nav.navbar-right{ height:70px}
#header .navbar-brand{width:100%}
#header .navbar{ min-height:70px}
.navbar-header{ width:13%}
#myCarousel .carousel-caption{top:35%; left:15%; right:15%}
#myCarousel h1{ font-size:25px}
#myCarousel .carousel-caption img{ height:75px}
#myCarousel .left.carousel-control i{ padding:12px 15px; top:52%}
#myCarousel .right.carousel-control i{ padding:12px 15px; top:52%}
.main-banner .bottomLinks{ position:relative; background:#333}
.welcome-txt h2{ margin-top:0; font-size:25px}
figure.effect-duke p{ padding:10px; line-height:20px}
.footer-link-section .footerLink li a span{ margin-left:0}
.footer-link-section .footerLink li a{ font-size:15px}
.homerooms-section .roomInfo p{ font-size:12px}
.homerooms-section .roomInfo p span{ font-size:14px}
.moments-section .moTxt a{ padding:10px; font-size:16px}
figure.effect-duke p{ display:none}
.homerooms-section .roomInfo .btn{ float:none; text-align:center; margin:10px 0 0}
.moments-section .moImg a img{ border:4px solid #fff}
.moments-section .moImg a img:hover{ border:2px solid #fff}
.footer-link-section .footerLink{ padding:20px 0; margin:0}
.footer-link-section .footerLink li{ width:100%; margin:0 0 6px}
.main-footer aside {text-align:center; padding:10px 0}
.main-footer aside.footer-media {float:none; text-align:center}
.contact-section iframe{ margin-bottom:20px}
}

@media (max-width:767px){
#header{ position:inherit; height:100%; background:#0c242e}
#header .navbar-brand{width:30%; margin-left:15px; margin-right:15px}
.navbar-toggle{ top:25px}
#header .nav.navbar-nav.navbar-right, #header .nav.navbar-nav.navbar-right li{ height:auto; text-align:left}
#header .nav.navbar-nav.navbar-right li{ padding:0 15px}
#header .navbar-nav > li > a{ line-height:25px; display:block; padding:10px 25px}
#header .navbar-nav > li.active a::after{ border:inherit}
#header nav li.active a, #header nav li a:hover{ display:block}
#myCarousel .carousel-caption{top:10%; left:15%; right:15%}
#myCarousel h1{ font-size:25px}
#myCarousel .carousel-caption img{ height:75px}
#myCarousel .left.carousel-control i{ padding:12px 15px; top:42%}
#myCarousel .right.carousel-control i{ padding:12px 15px; top:42%}
.main-banner .bottomLinks{ position:relative; background:#333}
.homerooms-section .roomInfo p{ margin-top:0}
.homerooms-section .roomInfo .btn{ float:none; text-align:center; margin:10px 0 0}
.top-bar ul{ margin:0 auto; text-align:center; float:none !important}
.top-bar .border-top-mob{ border-top:1px solid #fff;}
.momentOne{ margin-bottom:20px}
.moments-section .moImg a img{ width:100%}
.footer-link-section{ background-repeat:repeat; height:auto}
.footer-link-section .sharefacebook{ height:100%; margin-bottom:15px}
.sharefacebookInner img{ margin:0 auto; text-align:center; display:block}
.footer-link-section .footerLink{ padding:20px 0; margin:0}
.footer-link-section .footerLink li{ width:100%; margin:0 0 6px}
.main-footer aside.footer-quick-nav li{ padding:0 10px}
.main-footer aside {text-align:center; padding:10px 0}
.main-footer aside.footer-media {float:none; text-align:center}
#header .navbar{ min-height:inherit}

.adventures-section ul li img{ margin:10px 0}
#header .navbar-nav .dropdown-menu li a  {
	line-height: 25px;
	display: block;
	padding: 10px 25px;
}
#header .nav.navbar-nav.navbar-right li .dropdown-menu li {
	padding: 0;
}
.contact-section iframe{ margin-bottom:20px}
}

@media (max-width:480px){
.navbar-toggle{ top:20px}
#header .navbar-brand{margin-top:15px}
#myCarousel .carousel-caption img{ display:none}
#myCarousel h1{ font-size:18px}
#myCarousel .carousel-caption .banner-button .btn-primary{ font-size:16px}
#myCarousel .carousel-caption{ top:15%}
.main-footer aside.footer-quick-nav li {padding:0 5px}
.main-footer aside {font-size:11px}
figure.effect-duke p{ display:none}

/* other pages */
.room-suit-section .roomsFacilities h3{ font-size:22px}
}

@media (max-width:375px){
.welcome-txt h2, .moments-section h2{ font-size:20px}
.navbar-toggle{ top:15px}
#myCarousel h1{ font-size:15px}
#myCarousel .carousel-caption .banner-button .btn-primary{ font-size:13px}
#myCarousel .carousel-caption{ top:3%; left:10%; right:10%}
#myCarousel .carousel-control{ display:none}
#header .navbar-brand{margin-top:15px}
.top-bar .contactdetail li{ border:0px}
.main-footer aside.footer-media ul li.copy{margin-left:0; font-size:9px}
}