/* Font */
body, .section-home, .section-landing, .section-interior,
	#tabs-jax-content p, #accordion-jax p{ font-family: 'Fahkwang', sans-serif; }			
			
/* Home page Hero Section */ 
.section-home.section-heroandapply{ 
    grid-template-rows: 30px 20px 1fr 24px 24px 80px auto;
}			
.section-heroandapply .hero-intro{ 
	background: transparent;	 	 
	grid-area: 2 / 2 / 4 / 4;	 
	border: solid 1px rgb(25,170,149);	
}		 
.section-heroandapply .hero-intro{
	padding: 6em; 
}
.section-heroandapply .apply-video-module .tri-button{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
	@media (max-width: 1366px) {
		 .section-heroandapply .hero-intro{
		    padding: 3em !important;	    
		}
	}
	@media (max-width: 1180px) {
		 .section-heroandapply .hero-intro{
			padding: 3em !important;		 		 	
		 }
	}
	@media (max-width: 1100px) {
		.hero-featured-spotlight div.grid{
			grid-template-rows: 100% auto;	
		}	
		.section-home.section-heroandapply{
	        grid-template-rows: 30px auto 450px 10px auto auto;    
		}	
		.section-home.section-heroandapply .bg-water{
		    grid-area: 1 / 1 / 3 / 4;	
		}	
		.section-heroandapply .hero-featured-spotlight{
			grid-area: 3 / 2 / 4 / 2;	
		}
	}
	@media (max-width: 1024px) {
		 .section-heroandapply .hero-intro{		    
		 	margin-top: 0px;
		   	padding: 6em 10em !important;
		 	grid-area: 2 / 2 / 3 / 3;	 	
		}
		.hero-spotlight-arrows{
			display: grid;
    		grid-template-columns: 1fr 1fr 1fr;
			max-width: 50%;
			display:none;
		}	
	}    
	@media (max-width: 900px) {		 		 	 
		.section-home.section-heroandapply {
			grid-template-columns: 15px auto 15px;		
			grid-template-rows: 0px auto 500px 0px auto auto;
		}	
		.section-heroandapply .hero-featured-spotlight{
			margin-top: 0px;
		}	
		.section-home .hero-intro h1, .section-home .hero-intro h2{
		 	font-size: 2em;
		}		
	}	
	@media (max-width: 768px) {
		.section-home.section-heroandapply {
			grid-template-rows: 0px auto 700px 0px auto auto;
		}
    	.section-heroandapply .hero-intro{
		    padding: 3em !important;
		    margin-top: 30px;
			margin-bottom: 30px;
		 	grid-area: 2 / 2 / 3 / 3;	 	
		}
		.section-heroandapply .hero-featured-spotlight{
			margin-top: -60px;
		}	
		.hero-featured-spotlight div.grid{
			grid-template-rows: 90% auto;	
		}
		.section-heroandapply .apply-video-module .tri-button{
			grid-template-columns: 1fr;
			grid-template-rows: 60px 60px;
		}
    }
	@media (max-width: 650px) {		
		.section-home.section-heroandapply {
			grid-template-rows: 0px auto 700px 0px auto auto;
		}	
		.section-heroandapply .hero-featured-spotlight{
			margin-top: -60px;
		}	
		.section-heroandapply .hero-intro{			    
		    grid-area: 2 / 2 / 3 / 3;
		    padding: 1em 2em;
		}
	 		
	}
.section-heroandapply .btn-highlight{
	background: rgb(28,170,149) !important;
	color: #fff !important;
}
.section-heroandapply .btn-highlight:hover{
	background: #fff !important;
	color: rgb(28,170,149) !important;
}			
.section-heroandapply .btn-highlight .icon-btn-right{
	color: #fff !important;
}
/* adjust hero image on mobile to stacked */			
.hero-featured-spotlight div.grid{
	grid-template-rows: 80% auto;		
	border: none;
}		
@media (max-width: 650px) {				
	.hero-featured-spotlight div.grid { 
		grid-template-rows: 450px 1fr;
	}
	.hero-featured-spotlight .hero-spotlight-image{
	 	grid-area: 1 / 1 / 1 / 3;
	}
	.hero-featured-spotlight .hero-spotlight-caption{
		grid-area: 2 / 1 / 2 / 3;	
	}		
	.section-heroandapply .apply-video-module{
	    grid-area: 5 / 2 / 9 / 3;		
	}
			
}			
			
/* hero section background */
.section-home.section-heroandapply .bg-water {
	background: url('https://www.ju.edu/_resources/img/apply-bg-application.jpg');
	background-color: #ffffff;
	background-size: cover;
}
    @media (max-width: 900px) {
        .section-home.section-heroandapply .bg-water {
            background: url('https://www.ju.edu/_resources/img/apply-bg-application-mobile.jpg'); 
        }		
    }			
.section-home .hero-intro h1, 
.section-home .hero-intro h2{
	font-size: 3em;		 
}	
.section-home .hero-intro .with-tophead small{
	font-size: 0.3em;
	color: #897630;
}		 
.section-home .hero-intro h1{
	color: rgb(13,79,69);
}
.section-home .hero-intro p{
	color: #231f20;			
}
.section-home .hero-intro a.btn-cta, .section-home .hero-intro a.btn-cta:link,
  .section-home .hero-intro a.btn-cta:visited{
    border: solid 1px rgb(28,170,149); 
	color: rgb(13,79,69); 
}		 
.section-home .hero-intro a.btn-cta:link .icon-btn-right,
  .section-home .hero-intro a.btn-cta:visited .icon-btn-right{
	color: rgb(25,170,149);
	border-color: #00ab8e;
}	 	 
.section-home .hero-intro a.btn-cta:hover,
  .section-home .hero-intro a.btn-cta:hover .icon-btn-right{
	background: #00ab8e; 
	color: #ffffff;
	border-color: #00ab8e;
}
.hero-featured-spotlight .hero-spotlight-caption{
	/*background: #b1e4e3;*/
	padding-left: 32px;
}
@media (min-width: 1101px) {			
	.hero-spotlight-caption h3{
		color: #fff;		
	}
	.hero-spotlight-detail{
		color: #fff;
	}
	.hero-spotlight-caption a, .hero-spotlight-caption a:link, .hero-spotlight-caption a:visited{
		color: #fff;
	}
}			
.section-heroandapply .hero-bg-video-control{
    border-top: none;
}
.section-heroandapply .apply-video-module{
   padding-top: 8em;
   padding-bottom: 0em;
   padding-left: 2em;
   padding-right: 2em;  
   grid-template-columns: 50% auto;
}		
	@media (max-width: 1024px) {
		.section-heroandapply .apply-video-module{
			padding-top: 4em;
		}
	}			
	@media (max-width: 900px) {
		.section-heroandapply .apply-video-module{
			grid-template-columns: auto;
		}
	}
.thin-outer-border{
    border: 1px solid #98fd63;
    width: 100%;
    height: 100%;
    padding: 2em;
}
.with-tophead small{
    font-size: 0.3em;
    line-height: 1.3em;
}

/* Badges */		 
.section-heroandapply .home-badges{
    grid-area: 8 / 1 / 6 / 8;
    padding: 9em 2em 6em 2em;
}   
	@media (max-width: 1024px) {
		.section-heroandapply .home-badges{
			grid-area: 4 / 2 / 6 / 8;
   		 	padding: 3em 2em;
		}
	}
	@media (max-width: 768px) {
        .section-heroandapply .home-badges {
            padding: 2em 2em;
        }	
    }
    @media (max-width: 650px) {
        .section-heroandapply .home-badges{
            padding: 3em 0em;
			grid-area: 4 / 2 / 4 / 2;
			grid-template-columns: 10px 1fr 1fr 1fr 0px;
        }	
		.section-heroandapply .home-badges img{
			width: 90%;	
		}	
    }

/* Academics */
.section-home.section-academics{
    /*background: url('https://www.ju.edu/_resources/img/texture-homepage-1.jpg');*/
    background-repeat: no-repeat;    
    background-position: center;
    background-size: cover;
	background-color: #fff;
    border-bottom: none;
    margin-bottom: 1em;
	padding-bottom: 1em;
	grid-template-rows: 10px auto 1fr 10px;
	margin-top: 0em;
}			
.section-home.section-academics.section-darkbg h2{
	color: rgb(13,79,69);
}	
    @media (max-width: 1024px) {
        .section-home.section-academics {
            background: url('https://www.ju.edu/_resources/img/homepage-undergrad-grad-section-mobile.jpg');
            background-size: cover;
			margin-top: 4em;			
        }
    }
    @media (max-width: 900px) {
        .section-home.section-academics{
            grid-template-columns: 1fr;
            background: #fff;
            border-bottom: none;
            margin-bottom: 0em;
		    margin-top: 0px;
		    padding-bottom: 0px;
			grid-template-rows: 40px auto auto auto 0px;
        }
		.section-home.section-academics .academics-head{
		     padding: 2em 1em;
		 } 
		.section-home.section-academics.section-darkbg h2{
			color: rgb(152,253,99);	
		}
		.section-heroandapply .apply-video-module{
			padding-left: 1em;
			padding-right: 1em;
			padding-bottom: 4em;
		}		
    }
    
.section-home.section-academics .academics-head{
    padding-bottom: 30px;
}
.academics-option-content h3{
    font-size: 1em;
	margin-bottom: 30px;	
	color: rgb(13,79,69);
}
.academics-option-content h4{
    margin-top: 1em;
	color: rgb(13,79,69);
}    
.academics-option-content p{
	color: rgb(35,31,32);
}
.section-home.section-academics #academics-option-undergrad,
    .section-home.section-academics #academics-option-grad
{
    padding: 2em 2.5em;
    background-color: #dff7f7; /* #f0f9f9;  */
    border: none;
}
	@media (max-width: 900px) {		
		.section-home.section-academics #academics-option-grad{
			padding: 0em 2.5em 4em 2.5em;	
		} 	
		.section-home.section-academics #academics-option-grad .btn-cta{
			margin-bottom: 0px;
		}
	}
.section-home.section-academics .btn-cta {
    max-width: 100%;
    width: 100%;
    text-align: center;
    border: solid 1px #00ab8e !important;
	color: rgb(13,79,69) !important;	
}
.section-home.section-academics .btn-cta:hover{
	background: #00AB8E;
	color: #fff !important;
	border: solid 1px #00AB8E !important;
}
.section-academics a.btn-cta .icon-btn-right, 
.section-academics a.btn-cta:visited .icon-btn-right{
    color: #00ab8e !important;
}
.section-academics a.btn-cta:hover .icon-btn-right{
	color: #fff !important;			
}
			
.section-jax-bg{
	margin-bottom: 6em;		
	background: url('https://www.ju.edu/_resources/img/texture-3-green-bg.jpg');				
}		
	@media (max-width: 600px) {  
		.section-jax-bg{
			margin-top: 4em;
			margin-bottom: 4em;	
		}
	}
			
.jax-cta p{
	color: #4edcca;			
}			
/* financial aid */			
.section-home.section-financialaid{
    margin-bottom: 6em;
    margin-top: 6em;	
}
.financialaid-bgimg{
    background-image: url('https://www.ju.edu/_resources/img/homepage-financial-resources-4.jpg') !important; /* /_resources/img/homepage-financial-resources.jpg */
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.financialaid-content{
    padding: 1em;
    background: #00AB8E;
}
.section-financialaid a.btn-cta:hover, .section-jax a.btn-cta:hover{
	border: solid 1px rgb(152,253,99);	 
}	 
		 
	 @media (max-width: 450px) { /* iphone */
		 .section-home.section-financialaid{
		    margin-top: 0px;
		 	margin-bottom: 0px; 
		 }
        .financialaid-content{
            margin-top: 20em;
        }
        .financialaid-bgimg{
            background-image: url(/_resources/img/homepage-financial-resources-mobile.jpg) !important;
            background-position: top;
            background-size: contain;
        }
		.financialaid-content p, 
		.financialaid-content h2.with-tophead{
		   padding: 0px;
		}
		.financialaid-content a{ margin-left: 0px; } 
    }    
    @media (min-width: 490px) and (max-width: 768px) { /* ipad mini */
		 .section-home.section-financialaid{
		    margin-top: 0px;
		 	margin-bottom: 0px;
		    margin-bottom: 40px;
		 }
        .financialaid-content{            
            margin-top: 40em;            
        }
        .financialaid-bgimg{
            background-image: url(/_resources/img/homepage-financial-resources-mobile.jpg) !important;
            background-position: top;
            background-size: contain;
        }
		.financialaid-content p, 
		.financialaid-content h2.with-tophead{
		   padding: 0px;
		}
		.financialaid-content a{ margin-left: 0px; } 
    }
    @media (mix-width: 769px) and (max-width: 900px) {  /* ipad pro */
		 .section-home.section-financialaid{
		    margin-top: 0px;
		 	margin-bottom: 0px;
		    margin-bottom: 40px;
		 }
        .financialaid-content{
            margin-top: 20em;
        }
        .financialaid-bgimg{
            background-image: url(/_resources/img/homepage-financial-resources-mobile.jpg) !important;
            background-position: top;
            background-size: contain;
        }
    }
    @media (mix-width: 769px) and (max-width: 1024px) {  /* small laptop */
		 .section-home.section-financialaid{
		    margin-top: 0px;
		 	margin-bottom: 0px;
		    margin-bottom: 40px;
		 }
        .financialaid-bgimg{
            background-size: cover;
            grid-area: 1 / 1 / 4 / 5;
        }
    }
    @media (min-width: 1600px) {  /* desktop */
        .financialaid-bgimg{ /* parallax scroll */
            min-height: 500px;
            background-attachment: fixed;
            background-size: cover;
        }
    } 		 
/* Give Section */		 
.section-home.section-give{
	display: block;
}						
	@media (min-width: 1280px) {
		 .section-home.section-give .grid{
		    display: grid;
			max-width: 1200px; 
			grid-template-columns: 300px 16px 300px auto 16px;
			grid-template-rows: 16px 85px auto 12px 16px;
		}	 
		.section-home.section-give .give-copy{
		   grid-area: 2 / 1 / 4 / 4;
		 }
	}
	@media (max-width: 1250px) {
		 .section-home.section-give .grid {
		     display: grid;
			 grid-template-columns: 100px auto 100px;
			 grid-template-rows: 3fr 40px 25px auto;
			 max-width: 800px;
			 width: 100%;
		 }
		.section-home.section-give .give-copy{
		 	padding: 2em;
		 }
	}
	@media (max-width: 800px) {							 
		 .section-home.section-give .grid {
		 	display: grid;
		 	grid-template-columns: 20px auto 20px;
		 	grid-template-rows: 3fr 60px 25px auto;
		 }
	}	 
.section-home.section-give .btn-cta{
    width: 100%;
    min-width: 100%;
}
.section-home.section-give blockquote{ 
	padding: 2px 10px;
	margin: 0 0 20px;
	font-size: 16px;
	font-family: 'Fahkwang', sans-serif;
	font-style: italic;
	border: none;
}
		 
.section-news{
    margin: 4em auto 4em;
}
.news-card-caption h3{ 
	font-size: 20px; 
}
.section-home.section-social{
    background-position: bottom;			
}			
.section-social .grid{
    max-width: 900px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
    @media (min-width: 800px) {

        .section-social .social-copy{
            grid-area: 1 / 1 / 2 / 3; 
        }
        .section-social .grid{
            display: grid;
            grid-template-columns: 1fr;
            grid-column-gap: 0px;
            grid-template-rows: 1fr;
            align-items: center;
        }    
    }			
			
/* Social Media Photos */ 
.section-social-feed{
	width: 100%;
}
	.section-social-feed .grid{
		display:grid;
		grid-template-columns: repeat(6, 1fr); 
		grid-template-rows: repeat(2, 1fr); 
		gap: 3px;
		width: 100%;
	}
	.section-social-feed .grid .grid-card{
		position: relative;
		width: 100%; 
		aspect-ratio: 1 / 1; 
		overflow: hidden;
	}
	.section-social-feed .grid .grid-card img{
		width: 100%;
		height: 100%; 
		object-fit: cover;
		display: block;
	}
	/* Mobile layout */
	@media (max-width: 768px) {
		.section-social-feed .grid {
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(3, 200px);
			overflow: hidden;
			max-height: calc(200px * 3 + 5px);
		}
	}
			
/* Hero Spotlight Changes for arrows and dynamic display */		
.hero-featured-spotlight .hero-spotlight-image{
	background: linear-gradient(rgba(237, 237, 237, 0) 0%, rgba(31, 31, 31, 0.2) 70%, rgba(31, 31, 31, 0.8) 100%) center top / cover no-repeat, url("https://www.ju.edu/_resources/img/heroes-diana-donovan.jpg");			
}
@media (min-width: 1100px) {
	.hero-featured-spotlight .hero-spotlight-image{
		grid-area: 1 / 1 / 4 / 2;
	}
	.hero-featured-spotlight .hero-spotlight-caption{
		grid-area:3 / 1 / 3 / 2;
	}
	.hero-spotlight-arrows{                    
		grid-area: 2 / 1 / 2 / 1;
		width: 96%;
		display:grid;
		grid-template-columns: 40px 1fr 40px;
		grid-template-rows: 1fr;
		margin-left: 1em;     
		color: white;
		justify-items: center;
	}
	
	.hero-spotlight-arrow-next, .hero-spotlight-arrow-prev{
		border: 1px solid #00ab8e;
		padding: 6px;
		border-radius: 6px; 
		height: 40px;
	}
	.hero-spotlight-arrow-next:hover, .hero-spotlight-arrow-prev:hover{
		border: 1px solid #a7d500;
	}
}			
			
/* Modal base */
.hvm {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 9999;
}

.hvm.is-open {
	display: block;
}

.hvm__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
}

/* Dialog sizing: 95vw on small screens, max 600px */
.hvm__dialog {
	position: relative;
	width: min(95vw, 800px);
	margin: 20% auto 0;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}
	@media (min-width: 1100px) {
		.hvm__dialog {
			margin: 100px auto 0;
		}
	}

/* Keep video responsive with aspect ratio */
.hvm__frameWrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height:600px;
	overflow: auto;
	background: #333;
	border:1px solid #333;
}
.hvm__frameWrap iframe {
	position: relative;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	top: 10px; 
}
.hvm_inner{
	width: 90%;
	height: 90%;
	margin: 0 auto;
	border: 1px solid #333;
}
.htmv_transcript{
	margin-top: 10px;                    
}
a.hvm__transcript:link,a.hvm__transcript:focus,a.hvm__transcript:visited{
	color: #00AB8E !important;
}
a.hvm__transcript:hover{
	color: #fff !important;
}
/* Close button */
.hvm__close {
	position: absolute;
	top: 8px;
	right: 4px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 20px;
	line-height: 32px;
	cursor: pointer;
	z-index: 1000;			
}

.hvm__close:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
}