/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {
  --tan-color:                  #f1e7dd;
  --tan-light-color:            #F8F3ED;
  --primary-color:              #367281;
  --primary-color2:             #57a4b8;
  --primary-color3:             #74b3c4;
  --primary-colorDk:            #002b4e;
  --primary-medium:             #b7d8e1;
  --primary-light:              #d2e7ec;
  --gray-color:                 #a7b5c2;
  --gray-colorlt:               #f5f5f5;
  --secondary-color:            #e99072;
}



/*	Default Layout
	92px columns, 24 px gutters, 72 px margins, 1234px total (extra space for scrollbars)
	-------------------------------------------------------------------------------
cols    1    2     3     4     5     6     7     8     9     10     11     12     13
px      68   160   252   344   436   528   620   712   804   896	988    1050   1142 */





.asian-grid-6 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 15px;
}
.asian-grid-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 15px;
}

.asian-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 15px;
}

.asian-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
}

.asian-grid-3-2 {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: 15px;  
}

.asian-grid-3-1 {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 15px;  
}



.asian-grid-2 {
		display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
	}

.asian-grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 15px;  
}

.asian-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 15px;
}


.asian-shade {
    background-color: var(--tan-light-color);
    
}
.asian-pattern {
    background-image: url("/asianamerican/images/background-lite.jpg");
    background-size: cover;
    background-color: var(--tan-light-color);
    
}

.asian h2 {
    font-size: 26px;
    color: #666;
    line-height: 1.5em;
    font-family: 'TeXGyreAdventorRegular';
    border-bottom: none;
}

.peach {
    color: #e99072;
}

.tan {
    color: #f1e7dd;
}

.blue {
	/*color: #008ebd;*/
	color: #57a4b8;
	/*background-color: rgba(81,118,148 1.0);*/
}

.medium-blue {
    color: #74b3c4;
}

.light-blue {
	color: #d2e7ec;
}

.dark-blue {
	color: #002b4e;
}

.grey {
	color: #a7b5c2;
	/*background-color: rgba(136,129,111 1.0);*/
}

.imgborder {
    background: #FFF;
    border: 1px solid #fff;
    border: thin solid #ddd;
	 border-radius: 5px 5px 5px 5px;
}

.intro {
	line-height: 26px;
}

.intro img {
	width: 45%;
}

.caption {
    font-size: 12px;
    font-style: italic;
}

#main-highlight {
	position: relative;	
	width: 100%;
	/*height: 300px;*/
	float: left;
	margin-bottom: 20px;
	overflow: hidden;
	border-radius: 5px 5px 5px 5px;
}
#main-highlight img {
	width: 100%;
	border-radius: 5px 5px 5px 5px;
}



.main-highlight-text {
	position: absolute;
	left: 15px;
	bottom: 0;
}


.asian a {
	color: var(--primary-color);
}

.asian a:visited {
	color: var(--primary-color);
	}

.asian a:hover {
	color: var(--secondary-color);
}

.asian a:hover img {
	opacity: .5;
    transition: opacity 1s;
}


.asian h3 {
    font-size: 22px;
    color: var(--primary-colorDk);
    line-height: 1.5em;
    font-family: 'TeXGyreAdventorRegular';
	border: none;
}

.classroom h4 {
    font-size: 20px;
    font-weight: 200;
    color: var(--primary-color);
    line-height: 1.5em;
    font-family: 'TeXGyreAdventorBold';
	border-bottom: solid thick var(--secondary-color);
    margin-bottom: 20px;
    
		}
	


.headerimg {
	border-radius: 5px;
	width: 100%;
}

.box-title {
    font-size: 18px;
    background-color: #fff;
    padding: 5px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    border: thin solid #ddd;
	 border-radius: 5px 5px 5px 5px;
    
}

.news_header {
	font-size: 20px;
	padding-bottom: 5px;
}

.now-description {
	margin-top: 10px;
	display: flex;
	
}

.note {
	font-style: italic;
	font-size: 13px;
	align-self: flex-end;
	margin-top: 5px;
	 
}


/* ---------- Sub Navigation ---------------- */

.tabrow {
  text-align: center;
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 25px;
  height: 47px;
  position: relative;
}

.tabrow li {
  border: 1px solid #D2D2D2;
  /*background: #f6f6f6;*/
  background: var(--tan-light-color);
  /*background: linear-gradient(top, #fff 0%, #dadada 100%);*/
  display: inline-block;
  position:relative;
  z-index: 0;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-left: 1px solid #D2D2D2;
  border-right: 1px solid #D2D2D2;
  border-bottom: 1px solid #D2D2D2;
  margin: 0 2px;
  padding: 3px 15px;
}

.tabrow a {
  color: var(--primary-color);
  text-decoration: none;
font-size: 16px;
}


.tabrow li.selected {
  background: #FFF;
  color: #333;
  z-index: 2;
  border-top-color: #FFF;
}

.tabrow:before {
  position: absolute;
  content: "";
  width: 100%;
  top: 0;
  left: 0;
  border-top: 1px solid #D2D2D2;
  z-index: 1;
}

.tabrow li:before,
.tabrow li:after {
  border: 1px solid #D2D2D2;
  position: absolute;
  top: -1px;
  width: 6px;
  height: 6px;
  content: "";
}

.tabrow li:before {
  left: -7px;
  border-top-right-radius: 3px;
  border-width: 1px 1px 0px 0px;
  /*box-shadow: 2px 0px 0 #ECECEC;*/
}

.tabrow li:after {
  right: -7px;
  border-top-left-radius: 3px;
  border-width: 1px 0px 0px 1px;
  /*box-shadow: -2px 0px 0 #ECECEC;*/
}

.tabrow li.selected:before {
  box-shadow: 2px 0px 0 #FFF;
}

.tabrow li.selected:after {
  box-shadow: -2px 0px 0 #FFF;
}

.tabrow li:hover {
	background-color: var(--tan-color);

}


.tabrow li.selected:hover {
    background: #fff;
}

.navbutton {
    background-color: var(--tan-light-color);
    border-radius: 3px;
    padding: 5px;
    text-align: center;
  
}

.navbutton a{
    color: var(--primary-color);
    text-decoration: none;
     padding: 5px;
    width: 100%
    
}
.navbutton:hover {
    background-color: var(--tan-color);
    color: var(--secondary-color);
    text-decoration: none;
}

.navbutton a:visited {
    color: var(--primary-color);
    text-decoration: none;
}

.navbutton a:active {
    background-color: var(--tan-color);
    color: var(--secondary-color);
    text-decoration: none;
}



/* ---------- Highlight ---------------- */

.asian-highlight {

    }

.asian-highlights-box {
	/*overflow:hidden;*/
	background-image: url("/asianamerican/images/background-lite.jpg");
    background-size: cover;
	border: thin solid #ddd;
    border-radius: 5px 5px 5px 5px;
    position: relative;	 
	width: 100%;
	/*padding: 0 !important;*/
    z-index: 0;
	/*background: #f5f5f5;*/
    
	}

	.asian-highlights-loading {
	width: 100%;
	height: 36px;
	background-image: url(/images/highlight/ajax-loader.gif);
	background-repeat: no-repeat;
	background-position: center;
		}
	
	.asian-highlights-box h4 {
	color: var(--primary-color);
	font-size: 20px;
	letter-spacing: -1px;
	font-weight: bold;
	/*position: absolute;*/
	/*left: 15px;*/
        padding-left: 15px;
	margin-top: 280px;
        
	z-index: 10;
		}
		
	.asian-highlights-line {
	height: 5px;
	background-color: var(--secondary-color);
	position: absolute;
	width: 95%;
	top: 305px;
	left: 10px;
	}
	
	.asian-highlights-box img {
	width: 95%;
		position: absolute;
	top: 10px;
	left: 10px;
	}
		
	.asian-highlight-text {
	font-size: 16px;
	line-height: 23px;
	color: #333;
    border-radius: 5px 5px 5px 5px;
        padding: 1px 10px;
        background: #fff;
        margin: 0 auto 25px auto;
        width: 88%;
	/*height: 100%;*/
	
	/*margin-left: 25px;
	margin-right: 25px;*/
	/*top: 310px;*/
		}
		
		/*.asian-highlight-text p {
	margin: 20;
	padding: 25;
	line-height: 22px;
			}*/
		
	.asian-highlights-timer {
		width: 182px;
		height: 4px;
		padding: 1px;
		background-color: #ccc;
		border: 1px solid #fff;
		opacity: 0.3;
		position: absolute;
		top: 44px;
		left: 10px;
		display: none;
		}
		
		.asian-highlights-timer div {
			background-color: #000;
			width: 0%;
			height: 4px;
			opacity: 0.8;
			}
	
	.asian-highlights-menu {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 15px;
	top: 260px;
		}
		
		ul.asian-highlights-menu li {
			float: left;
			list-style: none outside;
			list-style-image: none;
			margin: 0 2px !important;
			padding:0 !important;
			background-image:none !important;
			}
			
		.asian-highlights-menu a {
	display: block;
	width: 16px;
	height: 16px;
	text-indent: -99999em !important;
	margin: 0 1px;
			}
			
		.asian-highlights-menu a span {
			display: none;
		}
			
		.asian-highlight-play a {
			/*background: url(/images/highlight/btn-pause.png) no-repeat;*/
			}
			
		.asian-highlight-prev a {
			background: url(/images/highlight/btn-prev.png) no-repeat;
			}
			
		.asian-highlight-next a {
			background: url(/images/highlight/btn-next.png) no-repeat;
			}
			
		.asian-highlight-indicator a {
	height: 11px;
	width: 9px;
	border: 1px solid var(--primary-color);
	background-color: #fff;
	margin: 2px 0;
	overflow: hidden;
			}
			
		.asian-highlight-indicator a:hover {
	/*border: 1px solid #333;*/
			color: ##5fc3d5;
			}
			
		.asian-highlight-indicator a.active {
	background-color: #007EA8;
			
			}

.now-showing-box {
	/*overflow:hidden;*/
	background-image: url("/asianamerican/images/background-lite.jpg");
    background-size: cover;
	border: thin solid #ddd;
    border-radius: 5px 5px 5px 5px;
    position: relative;	 
	width: 100%;
	margin-top: 20px;
	/*padding: 0 !important;*/
    z-index: 0;
	/*background: #f5f5f5;*/
    
	}

.now-showing-box img {
	width: 90%;
	margin-left: 15px;
	margin-top: 10px;
		/*position: absolute;
	top: 10px;
	left: 10px;*/
	}

.now-showing-box  h4 {
	color: var(--primary-color);
	font-size: 20px;
	letter-spacing: -1px;
	font-weight: bold;
    padding-left: 15px;
	margin-top: 15px;
	z-index: 10;
		}

.now-showing-line {
	height: 5px;
	background-color: var(--secondary-color);
	width: 95%;
	margin-left: 10px;
	}

.now-showing-text {
	font-size: 16px;
	line-height: 23px;
	color: #333;
    border-radius: 5px 5px 5px 5px;
    padding: 10px;
    background: #fff;
    margin: 10px auto 15px auto;
    width: 88%;
		}

.partner-grid {
	 display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
}

.land-acknowlegement {
	padding: 20px;
	border-radius: 5px 5px 5px 5px;
	background: #f5f5f5;
	border: thin solid #ddd;
}

.land-acknowlegement h4 {
	color: #007EA8;
	font-size: 20px;
	letter-spacing: -1px;
	font-weight: bold;
		}

.land-acknowlegement-line {
	height: 5px;
	background-color: #8fc45d;
	width: 95%;
	}

sup a {
	font-weight: normal;
	font-size: 13px;
}


/* ---------------- Partners --------------*/

.partner img {
    width: 150px;
    padding: 10px 20px;
}

/* ---------- Slide Open ---------------- */

  .popup-container {
            position: absolute;
            top: auto;
        }
        
button {
    background-color: var(--primary-color);
    border: none;
    color: #fff;  
        }
        
button.hover {
        background-color: var(--secondary-color);
        }
        
.open-btn {
	font-size: 1rem;
	text-transform: uppercase;
    writing-mode: vertical-lr;
	letter-spacing: 2px;
	padding: 10px;
	cursor: pointer;
    position: fixed;
    top: 310px;
    right: 0;
  
}

.popup {
  position: fixed;
  top: 310px;
	width: 100%;
	height: 40vh;
	display: none;
	overflow: scroll;
     z-index: 100;
}

.main-popup {
	position: fixed;
	right: 0;
    top: 310px;
	height: 40vh;
	width:60%;
	z-index: 1;
	background: var(--tan-light-color);
    border-radius: 5px;
	padding: 20px 50px 20px 20px;
	line-height: 1rem;
	display: flex;
	/*justify-content: center;*/
	/*align-items: center;*/
	transform: translateX(-100);
    z-index: 100;
}
.close-btn {
	font-size: 1rem;
	text-transform: uppercase;
    writing-mode: vertical-lr;
	letter-spacing: 2px;
	padding: 10px;
	cursor: pointer;
    position: fixed;
        top: 0;
        right: 0;
}
        
        

.open-btn2 {
	font-size: 1rem;
	text-transform: uppercase;
    writing-mode: vertical-lr;
	letter-spacing: 2px;
	padding: 10px;
	cursor: pointer;
    position: fixed;
    top: 450px;
    right: 0;
    
    
}
.popup2 {
  position: fixed;
  top: 150px;
	width: 100%;
	height: 60vh;
	display: none;
	overflow: scroll;
     z-index: 100;
}

.main-popup2 {
	position: fixed;
	right: 0;
    top: 150px;
	height: 60vh;
	width:70%;
	z-index: 1;
	background: var(--tan-light-color);
    border-radius: 5px;
	padding: 30px 50px 30px 30px;
	line-height: 1rem;
	display: flex;
	/*justify-content: center;*/
	/*align-items: center;*/
	transform: translateX(-100);
    z-index: 100;
}
.close-btn2 {
	font-size: 1rem;
	text-transform: uppercase;
    writing-mode: vertical-lr;
	letter-spacing: 2px;
	padding: 10px;
	cursor: pointer;
    position: fixed;
        top: 300px;
        right: 0;
}

.popup-content p {
	
}
@keyframes slide-in {
  
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes slide-out {
    0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(100%);
	}
  
}




/*		10 Column Layout: 992px. 
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

@media only screen and (min-width: 992px) and (max-width: 1221px) {

#main-highlight {margin-bottom: 5px;}
.main-highlight-text {left: 10px;}
	

/* ---------- Highlight ---------------- */

.asian-highlights-menu {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 15px;
	top: 205px;
		}

	.asian-highlights-box h4 {
	font-size: 18px;
	left: 15px;
	margin-top: 220px;
		}
		
	.asian-highlights-line {
	top: 235px;
	left: 10px;
	}

.asian-highlight-text {
	font-size: 14px;
	/*margin-left: 25px;
	margin-right: 25px;
	top: 250px;*/
		}
    
/* ---------------- Partners --------------*/

    .partner img {
    width: 150px;
    }

	
}



/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	.asian-grid-3-2 {
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;  
}
    
.asian h2 {
        font-size: 18px;
    }
    
/* ---------------- Partners --------------*/

    .partner img {
    width: 130px;
    padding: 5px 10px;
    }
    
  
/*-------- Slide Open -------*/

.main-popup2 {

	padding: 15px 50px 30px 30px;
	line-height: 1rem;
	
}


	

/* ---------- Highlight ---------------- */
	
	.asian-highlights-box {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
	}
	
	
	.asian-highlights-menu {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 15px;
	top: 205px;
		}

.asian-highlights-box h4 {
	font-size: 18px;
	left: 15px;
	margin-top: 220px;
		}
		
	.asian-highlights-line {
	top: 245px;
	left: 10px;
	}

.asian-highlight-text {
	font-size: 14px;
	/*margin-left: 20px;
	margin-right: 20px;
	top: 205px;*/
		}
	
}

/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436   */

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

	#main-highlight {display: none;}
	
	.asian-grid-6 {
			 grid-template-columns: 1fr 1fr 1fr;
    }
    
	.asian-grid-3 {
    grid-gap: 5px;
}
	.asian-grid-3-2 {
    grid-template-columns: 1fr;
    grid-gap: 10px;  
}
	.asian-grid-2 {
grid-template-columns: 1fr;
	}
    
    .asian h2 {
        font-size: 18px;
    }
	
    .tabrow {
  margin: 0 0 2px 0;
 padding: 0 0 20px 0;
  line-height: 25px;
  height: auto;
  position: relative;
}
    .tabrow li {
  margin: 0 2px;
  padding: 3px 10px;
}

    
    .tabrow a {
font-size: 14px;
}
    
.box-title {
    font-size: 14px;
    background-color: #fff;
    padding: 3px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border: thin solid #ddd;
	 border-radius: 5px 5px 5px 5px;
    
}
	
/* ---------- Highlight ---------------- */
	
	.asian-highlights-box {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
	}
	
	.asian-highlights-box img {
	width: 95%;
		position: absolute;
	top: 10px;
	left: 10px;
	}
	
	.asian-highlights-menu {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 15px;
	top: 255px;
		}

.asian-highlights-box h4 {
	font-size: 16px;
	left: 15px;
	margin-top: 270px;
		}
		
	.asian-highlights-line {
	top: 295px;
	left: 10px;
	}

.asian-highlight-text {
	font-size: 14px;
	/*margin-left: 20px;
	margin-right: 20px;
	top: 295px;*/
		}
    
   
/* ---------------- Partners --------------*/

    .partner img {
    width: 110px;
    padding: 0px 10px;
    }    

/*----- Slide Open -----*/
    
    .open-btn {
    top: 270px;
    right: 0;
  
}
    
    .popup {
  top: 150px;
	width: 100%;
	height: 65vh;
}

.main-popup {
    top: 150px;
	height:65vh;
	width: 80%;
    padding: 15px 50px 30px 30px;

}
    
.close-btn {
        top: 120px;
        right: 0;
}
    
 .open-btn2 {
    top: 400px;
    right: 0;
    
}
    
.popup2 {
  top: 150px;
	width: 100%;
	height: 70vh;
}

.main-popup2 {
    top: 150px;
	height: 70vh;
	width:80%;
	padding: 15px 50px 30px 30px;
}
    
.close-btn2 {
        top: 250px;
        right: 0;
}

}

/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 479px) {
	
    	.asian-grid-6 {
            grid-template-columns: 1fr 1fr;
            grid-gap: 5px;
        }
    
		.asian-grid-3 {
            grid-template-columns: 1fr;
            grid-gap: 10px;
        }
    
	    .asian-grid-3-2 {
            grid-template-columns: 1fr;
            grid-gap: 10px;  
        }
    
	    .asian-grid-2 {
	        grid-template-columns: 1fr;
	    }
    
    .asian h2 {
        font-size: 18px;
    }
	
        #main-highlight {
            display: none;}
	
      .tabrow {
          margin: 0 0 2px 0;
          padding: 0 0 20px 0;
          line-height: 25px;
          height: auto;
          position: relative;
        }
    
    .tabrow li {
        margin: 0 0px;
        padding: 3px 5px;
    }

    
    .tabrow a {
        font-size: 13px;
    }
	
	/* ---------- Highlight ---------------- */
	
	.asian-highlights-box {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
	}
	
	.asian-highlights-box img {
	width: 95%;
		position: absolute;
	top: 10px;
	left: 10px;
	}
	
	.asian-highlights-menu {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 15px;
	top: 175px;
		}

.asian-highlights-box h4 {
	font-size: 16px;
	left: 15px;
	margin-top: 195px;
		}
		
	.asian-highlights-line {
	top: 215px;
	left: 10px;
	}

.asian-highlight-text {
	font-size: 12px;
		}
    
/* ---------------- Partners --------------*/

    .partner img {
    width: 110px;
    padding: 0px 10px;
    } 

/*----- Slide Open -----*/
    
    .open-btn {
    top: 270px;
    right: 0;
  
}
    
    .popup {
  top: 150px;
	width: 100%;
	height: 65vh;
}

.main-popup {
    top: 150px;
	height:65vh;
	width: 80%;
    padding: 15px 50px 30px 30px;

}
    
.close-btn {
        top: 120px;
        right: 0;
}
    
 .open-btn2 {
    top: 400px;
    right: 0;
    
}
    
.popup2 {
  top: 90px;
	width: 100%;
	height: 80vh;
}

.main-popup2 {
    top: 90px;
	height: 80vh;
	width:80%;
	padding: 15px 50px 30px 30px;
}
    
.close-btn2 {
        top: 290px;
        right: 0;
}


}