@charset "UTF-8";
/* CSS Document */
/* NAME: mediaquery.css */
/* LOCATION: http://luc.edu/media/home/stylesheets/ */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		header input[type="text"]{margin-left:20%;}
		
		.panel iframe {width:365px; height: 206px;}
		
		/* At A Glance panel */
		
		.panel.at-a-glance figure {font-size:5em;}
		.panel.at-a-glance p {font-size:1.1em; line-height:1.2;}
		.panel.at-a-glance .five.columns {width:220px;}
		.panel.at-a-glance .offset-by-two {padding-left:48px;}
		.panel.at-a-glance .offset-by-one {padding-left:30px;}
		
		}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		
		/* PANEL: two column */

		.panel.two .seven.columns {width:340px;}
		.panel.two div div {padding:0 0 0 10px;}
		.panel.two div div:first-child {padding:0 29px 0 0; border-right:1px solid #ccc;}
		.panel.two p {font:1.6em/1.6 "Myriad Pro", Arial, sans-serif;}
		.panel.two div.seven.columns {}
		.panel.two a.button {position:relative; bottom:0;}
		.panel.two div h4 + p {
			/* height:260px;  same height as the image w/description */
			margin-bottom:30px;}
			
		#feature.container h2 {font-size:2.4em;}
		
		footer ul#nav li ul li {display:none;}
		
		}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	
	/* Base Styles for Mobile -------------- */
	
	
	h2 {font-size:2em !important;}
	h2 + p {font:.9em/1.4 "myriad-pro-1", "Myriad Pro", Arial, sans-serif;}
	
	h4 {font-size:1.4em;}
	
	.v-center {position:relative; top:180px;}
	
	a.arrow {margin:0;}
	
		/* Positioning */
		
		.feature-head.leftbottom, .feature-head.rightbottom {margin-top:50% !important;}
		
	/* LUC BUTTONS --to make them full width on mobile-- */
	
	a.button {margin:10px 0; }
	a.button span.title {width:250px; }
	a.button span.icon {width:25px;}
	a.button span img {position:relative; vertical-align:middle; margin-left:10px;}
	
	
	/* Nav ----------------------------- */
		
	#nav > li {display:none;}
	li#nav-mobile, li#nav-mobile a {width:80px;}
	li#nav-mobile, li#nav-tab {display:block; border:none;}
	
	
	#header-links-container span.search-button {
	display:none; }
	
	/* HOMEPAGE ------------------------- */
	
	.on-campus {
		margin: 20px 0 0 0;
		width: 100%;
		height: auto;}
	
	.on-campus-info { float: left; width: 100%; background: none; margin: 0; height:auto; }
	
	.on-campus-image { width: 100%; height: auto; }
	
	.on-campus-image img { width: 100%; }
	
	.on-campus p { width: 95%; }
	
	
	/* this is to attempt to fix the lead image and crazy slider */
	#feature.steve {padding:140px 0 0 0;}
	.home-headline {font-size:2.4em;}
	.home-readout {font-size:1em; padding-bottom:0;}
	.headline-strip {padding-top:10px; margin-bottom: -15px;}
	
	
	
	
	/* PANELS -------------------------- */
	
	.panel.image p {font-size:1.5em;}
	.panel.multi p {font-size:1.4em;}
	.panel.two p {font-size:1.4em;}
	
	.panel .screen {min-height:auto;}
	
	.panel.image div.container {padding:60px 0;}
	.panel.two div.container  {padding:20px 0;}
	
	.panel h4 {margin-bottom:20px;}
		
	/* Panel at a Glance */
	
	.panel.at-a-glance div.two.column {width:100%;}
	.panel.at-a-glance div div {width:100%;}
	
	.panel.at-a-glance div.five.columns figure {float:none; padding-bottom:10px;}
	
	.panel.at-a-glance figure {
		float:left;
		padding:0 20px 10px 0;
		font:5em/1 "Museo Slab", "Myriad Pro", "Arial Black", Arial, sans-serif;
		font-weight:bold;}
		
	.panel.at-a-glance figure.small {
		font:5em/1 "Museo Slab", "Myriad Pro", "Arial Black", Arial, sans-serif;
		font-weight:bold;}
		
	.panel.at-a-glance p {
		font:18px/22px  "Myriad Pro", Helvetica, Arial, sans-serif;
		margin:5px 0 0 0;}
		
	.panel.at-a-glance h4 {margin-bottom:20px;}
	
	.panel.at-a-glance .offset-by-two {padding-left:0;}
	.panel.at-a-glance .offset-by-one {padding-left:0;}
	
	/* Panel Two */
	
	.panel.two div div {padding:0;}
	.panel.two div div:first-child {padding:0 0 20px 0; border-right:none; border-bottom:1px solid #ccc;}
	
	.panel.home { padding: 50px 0 0; }
	
	/* Misc */
	
	
		
	.panel div.columns {margin:20px 0;}
		
	.panel iframe {width:300px; height: 170px;}
		
	header a.logo {
		width:280px;
		padding:10px;	
		background:url(/media/home/images/luc-logo-1.png) center no-repeat;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size:contain;
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/media/home/images/luc-logo-1.png', sizingMethod='scale'); 
		-ms-filter: "http://www.luc.edu/media/home/images/luc-logo.png', sizingMethod='scale')";}
		
	header ul.links {display:none;}
	header input[placeholder="Search"] {display:none;}	
	
	
	
	
	/* ---- Feature Content area -------------------- */
	
	#feature.about-loyola {background-position:85% 0%;}
	#feature.academics {background-position:75% 0%;}
	#feature.admissions {background-position:25% 0%;}
	#feature.campus-life {background-position:90% 0%;}
	#feature.resources {background-position:80% 0%;}
	
	#damen-president {background-position:70% 0%;}
	
	/* STYLES FOR PAGESLIDE ON MOBILE */
	#pageslide {
	display: none;
	position: absolute;
	position: fixed;
	top: 0;
	height: 100%;
	z-index: 999999;
	width: 200px;
	padding: 20px;
 background:url(/media/home/images/bg-pageslide.jpg);
	color: #FFF;
	-webkit-box-shadow: inset -2px 0 4px rgba(0,0,0,0.6);
	-moz-shadow: inset -2px 0 4px rgba(0,0,0,0.6);
	box-shadow: inset -2px 0 4px rgba(0,0,0,0.6);
	overflow-y: auto;
	overflow-x: none;
	-webkit-overflow-scrolling: touch;}

		#header-links {display:none;}
		
		#pageslide ul#header-links,  #pageslide ul#header-links ul li,  #header-links li ul,  #header-links li.sfhover ul {
			display:block;
			background-color: none;}
		
		#pageslide #header-links a {display:none;}
		#pageslide .responsivenav {
			display:block}
		
		/*Friday is for closers*/
		
		#pageslide #nav li.close, #globallinks .close {
			float: left;
			background-color:#555;
			color:#fff;
			width:19px;
			text-align:center;
			padding:2.5px;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px; 
			-khtml-border-radius: 3px; }
		
		#pageslide #nav li.close {
			float:right;
			margin:-30px 0 30px 0;}
			
		#pageslide .close {
			display:block;
			width:19px;
			height:18px;}
			
		#pageslide ul:first-child {
			margin-top:40px;}
		
		#nav li.close img, #globallinks .close img {
			width:12px;
			height:12px;
			margin-bottom:2px;}
		
		#pageslide #globallinks {margin:0;}
		
		
		/*left side*/
		
		#pageslide #nav li, #pageslide #nav li ul {
			margin-bottom: 7px;
			display: block;
			position:relative;
			background:none;
			box-shadow:none;
			border:0;}
		
		#pageslide li#nav-mobile {
			display:none;}
			
		#pageslide #nav a {
			font-size:1.4em;
			text-align:left;
			background:transparent;}
		
		#pageslide #nav li ul a:hover {
			background:transparent;}
			
		#pageslide #nav li a {
			display: block;
			vertical-align: top;
			height: 15px;
			padding: 5px 23px 5px 7px;
			font-family: "Museo Sans", "museo-sans", sans-serif;
			font-size: 14px;
			color: white;
			text-decoration: none;
			background:#111;}
		
		#pageslide #nav li li a {
			font-size:11px;
			color:#ddd;
			background:none;}
		
		/* For right*/
		#pageslide #header-links ul.first-of-type a, #pageslide #header-links ul.second-of-type a{display:block;}
		#globallinks{width:100%;margin:0;padding:0;}
		#pageslide #header-links-container{margin-top:10px;}
		#pageslide #header-links-container input {
			margin-left: -10px;}
		
		#pageslide ul.links {
			margin-top: 40px;
			margin-left:-10px;
			padding: 0;
			font-size: .85em;
			color: #EEE; }
		
		#pageslide #header-links li:hover ul, #pageslide #header-links li.sfhover ul { /* lists nested under hovered list items */ 
			left:0; }
		#pageslide ul.links li a {display:block;}
		
		#pageslide #header-links li ul.first-of-type, #pageslide #header-links li ul.second-of-type  {
			position: absolute;
			width: 80%;
			border-top: 1px solid #999;
			background: none; }
		
		#pageslide #header-links li ul.first-of-type {
			top: 180px;
			padding-bottom:5px; }
			
		#pageslide #header-links li ul.second-of-type {top: 350px; }
	 }
	 
/* Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 800px) {

.calendar-links-box { display: none; }

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
		
	.panel iframe {width:420px; height: 238px;}
	
	.calendar-links-box { display: block; margin: 18px 0 0; }
	
	.slider-container-panel { position: relative; top: 0; }
	
	.on-campus { margin: 0; }

}
	

/* Mobile Portrait Size (devices and browsers) */
 @media only screen and (max-device-width : 320px) {

	.list_carousel.responsive { width:250px; margin: 0; }		
	
	.container .home-headline {
		margin-top: 10px;
		font-family: "myriad-pro", sans-serif;
		font-size: 2.2em; 
		font-weight: bold;
		line-height: 1;
		color: #FFF;
		text-shadow: 0 0 10px rgba(0,0,0,0.4);
	}
	
	.home-readout { margin: 10px 0 15px; padding: 0; font-size: 1em; color: #FFF; }
	
	.slider-container-panel { position: relative; top: 0; }
	
	.home-panel-sub { width: 100%; }
	
	.panel.home { background: none; background-image: none; padding-bottom: 40px;  }
	
	html.js body div#jmd div.container div.four div.where-we-are ul.home-department li { margin: 0 0 20px; position: relative; }
	
	}


/* #RESPONSIVE PHONE - iPHONE 4 - PORTRAIT
================================================== */

/* Mobile Portrait Size (devices and browsers) */
@media only screen and (max-device-width : 479px) {
	

/* #CAROUSEL
================================================== */

    header { max-height: 90px; }
    
    nav { top: -10px; }

	.slider-container-panel { padding: 0px; }

	#jmd .container { padding: 0; background:#ffffff url('/media/home/images/world-map.png') no-repeat 0px 50px; background-size: 100%; }

	#feature.steve { padding:250px 0 0 0; background-position: center -50px; }
	
	.home-headline { font-size:2.2em; }
	
	.panel.home h4 { font-size: 1.75em; }

	.tab {
		position: relative;
		float: left;
		padding: 3px 15px;
		margin: -4px 0 0 0;
		padding: 3px 0 1px 15px;
		width: 94%;
	}
	
	.list_carousel {
		width:70%;
		margin-left:9% !important;}

	.home-department-label { width: 100%; font-size: 1.3em; }
		
	p.home-department, ul.home-department { font-family: 'arial', sans-serif; font-size: .85em; line-height: 1.25; }

	ul.home-department { float: left; width: 100%; font-size: .9em; text-transform: uppercase; }
	
	ul.home-department li { display: inline; margin-left: 10px; }
	
	ul.home-department li a { color: #272727; text-decoration: none; }

	ul.home-department li:first-child { margin-left: 0; }
	
	ul.home-department li a:hover { color: #680013; }

	p.home-department-body, .home-where-body { font-size: 1.3em; line-height: 1.6; }

	.where-we-are { float: left; margin: 0 0 0 40px; width: 80%; }

	.where-we-are { margin: 0; width: 100%; }
	
	.where-we-are ul.home-department li { float: left; position: relative; margin: 10px 0 0 0; }
	
	.on-campus { margin: 0; }

	.calendar { float: left; margin: 0; width: 100%; }
	
	.home-event-headline { font-size: 1.2em; }
	
	section.footer-address p { margin: 0; padding: 5px 0 15px; width: 100%; font-size: .85em; line-height: 1.4; }
	
	.logo-tag { float: left; padding: 15px 0 5px; width: 300px; }
	
	a.logo-tag img { width: 100%; }
	

/* #FOOTER SOCIAL
================================================== */

	footer { padding: 10px 0 0 0; min-height: 200px; }
	
	footer ul#nav { margin: 0; width: 300px; }
	
	footer #nav-mobile { display:none; }

	footer div.container div.four { width: 100%; position: absolute; left: 0px; top: 0px; }
	
	footer ul.global { float: left; margin: 0; width: 300px; padding: 10px 0 0 0; text-align:left; }
	
	footer ul.global li { font-family: 'museo-sans', sans-serif; margin: 10px 0 0 0; color: #CCC; }
	
	footer ul.global li:first-child { margin: 10px 0 0 0; }
	
	footer ul.global li:last-child { display: none; }
	
	footer ul.social {
		position: relative;
		left: -5px;
		top: 15px;
		margin: 0;
		padding: 0;
		width: 100%; }
	
	footer ul.social li{ float: left; border-radius: 2px; }

	footer ul.social li:last-child{ margin-right: 0 !important; }
	
	footer ul.global li span.social-arrow img {
		float: right;
		padding: 4px;
		margin: 0 0 0 5px;
		background-color: #680013;
		border-radius: 2px; }


/* #MAKE A GIFT BUTTON
================================================== */
	
	footer .container .four a.button-maroon { float: left; margin-top: 35px; }
	

/* #FOOTER ADDRESS
================================================== */
	
	section.footer-address .vcard { width: 94%; font-size: 0.9em; }
	

	
}