/*
 * Research Center for Women's Participation and Advancement Home Page
 * 関西学院大学 女性活躍推進研究センター
 * Author: Deguchi Kikaku
 *
 * Contents:
 * 1) Text Style Defaults
	1.1) Text Styles
	1.2) Page Structure / Layout Selectors
 * 2) All Pages
	2.1) Navigation
	2.2) Footer
 * 3) Individual Pages Contents
	3.1) index.html (top)
	3.2) workshop.html
	3.3) newslist.html (news items)
 * 4) Media Queries
 *
 */

 
/* ==========================================================================
   1) Text Style Defaults
   ========================================================================== */
 
/* =============== Imported Google Fonts  ============== */
@import url('https://fonts.googleapis.com/css?family=Lora|Montserrat');
@import url('https://fonts.googleapis.com/css?family=Niconne|Alfa+Slab+One');


/************************ 
 1.1) Text Styles
 ************************/
 
body {
	font: 400 12px Meiryo, sans-serif;
	line-height: 1.5;
	color: #303030;
}

h2 {
	font-family: Meiryo, sans-serif;
    font-size: 35px;
    color: #303030;
    font-weight: 400;
    margin-bottom: 20px;
}

h3 {
	font-weight: bold;
	font-size: 22px;
}

h4 {
	font-family: Meiryo, sans-serif;
    font-size: 18px;
    color: #303030;
    font-weight: 400;
    margin-bottom: 30px;
}

h1,h2,h3,h4,p {
	transition: font-size 0.5s ease-out;
		-webkit-transition: font-size 0.5s ease-out; /* Chrome/Safari */
		-moz-transition: font-size 0.5s ease-out; /* Firefox */
		-ms-transition: font-size 0.5s ease-out; /* IE */
		-o-transition: font-size 0.5s ease-out; /* Opera */
}

/* Keep selectors in this order */
a:link {
	/* Eased Transition off Hover */
	/* Transition: property, duration, timing-function, delay */
	transition: 0.5s ease-out;
		-webkit-transition: 0.5s ease-out; /* Chrome/Safari */
		-moz-transition: 0.5s ease-out; /* Firefox */
		-ms-transition: 0.5s ease-out; /* IE */
		-o-transition: 0.5s ease-out; /* Opera */
		color:red;
}

a:visited {
   
}

a:hover {
    /* Eased Transition on Hover */
	transition: 0.5s ease-out;
		-webkit-transition: 0.5s ease-out; /* Chrome/Safari */
		-moz-transition: 0.5s ease-out; /* Firefox */
		-ms-transition: 0.5s ease-out; /* IE */
		-o-transition: 0.5s ease-out; /* Opera */
}

a:active {
   
}

.pinktxt {
	color: #d73772;
}

/* Arrow Links ^ after Headings for Back to Top of Page */
.up.glyphicon {
    font-size: 20px;
    margin-bottom: 35px;
    color: #303030;
}


/**************************************    
 1.2) Page Structure / Layout Selectors
 **************************************/
 
.bg-shade {
    background-color: #f4f2f0;
}

.container-fluid {
    padding: 60px 50px;
}

.

/* ==========================================================================
   2) All Pages 
   ========================================================================== */

/************************ 
 2.1) Navigation
 ************************/

.navbar {
	font-family: Montserrat, sans-serif;	
    margin-bottom: 0;
    background-color: #fff;
    z-index: 9999;
    border: 0;
    font-size: 11px;
    line-height: 1.42857143 !important;
    letter-spacing: 1px;
    border-radius: 0;
	text-transform: uppercase;
}
	/* Navbar Links Default Text Color */ 
	.navbar-default .navbar-nav > li > a,
	.navbar-default .navbar-nav > li > a:visited {
		color: #818181;
	}
	/* Navbar Links on Mouse Over */ 
	.navbar-default .navbar-nav > li > a:hover,
	.navbar-default .navbar-nav > li.active > a:hover  {
		color: #fff;
		background-color: #d73772;
	}
	/* Navbar Link after entering its section */ 
	.navbar-default .navbar-nav > li.active > a {
		color: #fff;
		background-color: #d73772;
	}
	
	.dropdown-menu>li>a {
		display: block;
		padding: 10px 20px;
		clear: both;
		font-weight: 400;
		line-height: 1.42857143;
		color: #818181;
		font-size: 11px;
		white-space: nowrap;
	}
	.dropdown-menu>li>a:hover {
		opacity: 0.3;
	}	
	.dropdown-menu>.active>a, 
	.dropdown-menu>.active>a:focus, 
	.dropdown-menu>.active>a:hover {
		color: #fff;
		text-decoration: none;
		background-color: #d73772;
		outline: 0;
	}

/* Left Side Logo */
.navbar-header .navbar-left #logo {
	float: left;
	max-height: 40px;
	max-width: 40px;
	overflow: hidden;
	margin-top: 5px;
	margin-bottom: 5px;
	-webkit-transition: 0.3s; /* Safari */
    transition: 0.3s;
}
	.navbar-header .navbar-left #logo:hover {
		box-shadow: 0px 20px 25px rgba(0,0,0, .2); /* h,v,blur,spread,color */
		-ms-transform: translate(0px, -4px); /* IE 9 */
		-webkit-transform: translate(0px, -4px); /* Safari */
		transform: translate(0px, -4px);
		-webkit-transition: 0.3s; /* Safari */
		transition: 0.3s;
	}
	/* Left Side Logo Text */
	.navbar-header .navbar-left .navtext {
		display: inline;
		vertical-align: middle;
		margin-left: 20px;
		line-height: 50px;
		color: #303030;	
		letter-spacing: 0px; 
	}	
	
/* Centered mini-banner text on navbar in small screens */
.navbar-header p {
	vertical-align: middle;
	color: #303030;
	font-size: 10px;
	letter-spacing: 1px;
	text-align: center;
	margin-top: 8px;
	margin-bottom: 3px;
}


/************************ 
 2.2) Footer
 ************************/
	
footer { 
	/* Pink Shading */
	background: 
	linear-gradient(-90deg, rgba(221, 136, 169,0.9),rgba(175, 51, 98,0.9)),
		no-repeat center/cover;
		background: 
		-moz-linear-gradient(90deg, rgba(221, 136, 169,0.9),rgba(175, 51, 98,0.9)), no-repeat center/cover;
		background: 
		-webkit-linear-gradient(90deg, rgba(221, 136, 169,0.9),rgba(175, 51, 98,0.9)), no-repeat center/cover;	
		background: 
		-ms-linear-gradient(90deg, rgba(221, 136, 169,0.9),rgba(236, 168, 193,0.9)),
		no-repeat center/cover;
		background: 
		-o-linear-gradient(90deg, rgba(221, 136, 169,0.9),rgba(236, 168, 193,0.9)),
		no-repeat center/cover;
	/* Backup Color if Shading Fails */
    background-color: #d73772;
	color: #fff;
}

/* -- Footer Text Styles -- */
footer h4 {
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	margin-top: 0;
}
footer .contactinfo p {
	margin-bottom: 12px;
}
footer a { 
	color: #fff;
	line-height: 28px;
	font-size: 14px;
}
	footer a:visited {
	   color: #fff;
	}
	footer a:hover {
		font-size: 15px;
		text-decoration: none;
		font-weight: bold;
		color: #fff;
	}

footer .up.glyphicon {		/* Back to Top Arrow Link */
	padding-top: 30px;
	padding-bottom: 10px;
	color: #fff;
}
footer .sm.glyphicon {		/* Site Links Arrow Icon */
	font-size: 14px;
}	

/* -- Footer Structure -- */
footer .container-fluid {
	padding-top: 0px;
}	
footer .footer-links-holder {
	position: relative;
	margin: 0;
}
footer .footer-links-holder .footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
	-webkit-transition: max-height .5s;
	transition: max-height .5s;
}

/* -- Copyright Area -- */
footer .lowfooter {
	padding-top: 40px;
	margin-bottom: -45px;
}
	footer .lowfooter a {
		line-height: 14px;
		font-size: 10px;
	}
	footer .lowfooter a:hover {
		font-size: 11px;
		font-weight: bold;
	}
	footer .lowfooter p {
		font-size: 12px;
	}
	footer .lowfooter .credit {
		font-size: 10px;
		text-align: right;
	}


	
/* ==========================================================================
   3) Individual Pages Contents
   ========================================================================== */
 
 /*************************** 
 3.1) index.html (top) page
 ***************************/ 

/* =============== Top Banner Image and Links (index.html) ============== */ 

.jumbotron { 
    background-image: url("../images/banner.jpg");
	background-size: cover;
	min-height: 500px;
	padding: 100px 25px;
	margin-bottom: 0px;
}
	/* Links */
	.jumbotron #topnav {
		width: 20%;
		padding-top: 0%;
		float: left;
		margin-top: 10px;
	}
	.jumbotron #topnav a {
		display: block;
		font-size: 18px;
		line-height: 27px;
		color: #fff;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: right;
		text-transform: uppercase;
	}
	.jumbotron #topnav a:hover {
		font-size: 20px;
		line-height: 27px;
		text-decoration: none;
		font-weight: bold;
	}
	/* Text in Banner Image */
	.jumbotron #btxt {
		font-size: 25px;
		letter-spacing: 2px;
		width: 45%;
		padding: 25px;
		margin-left: 10%;
		float: left;
		text-align: center;
		margin-top: 100px;
		background-color: rgba(255,255,255, .6);
		color: #000;
	}
	/*二重取り消し線*/
	.doubleline { 
	background-image:url("../images/doubleLine_orange.png");
	background-repeat:repeat-x;
	background-position: center;
	}
	
/* =============== News (#intro) Section (index.html) ============== */

/*	
News Box Panels - Replaced with News Table Items In Newslist Section Below

#intro .panel {
	background-color: #fff;
	margin: 8px;
	padding: 15px 15px 15px 15px; /* t, r, b, l 
	-webkit-transition: 0.3s; /* Safari 
    transition: 0.3s;
	height: 300px;
}
	#intro .panel:hover {
		box-shadow: 0px 20px 25px rgba(0,0,0, .2);
		-ms-transform: translate(0px, -10px); 
		-webkit-transform: translate(0px, -10px); 
		transform: translate(0px, -10px);
		-webkit-transition: 0.3s; 
		transition: 0.3s;
	}
	#intro .panel a {
		color: #303030;
		font-size: 15px;
		line-height: 28px;
	}
	#intro .panel a:hover {
		text-decoration: none;
		color: #d73772;
		font-weight: bold;
		/* font-size: 18.5px 
	}
*/

	
/* =============== About (#about) Section (index.html) ============== */
	
#about p {
	font-size: 17px;
}
#about .logosub {
	font-size: 15px;
	font-weight: bold;
	color: #303030;
}

#about a, #about img {
	display: inline;
}
#about img {
	max-height: 120px;
	width: auto;
	margin-top: 25px;
	margin-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
}
	#about img:hover, #about a:hover {
		box-shadow: 10px 15px 25px 10px rgba(0,0,0, .2); /* h,v,blur,spread,color */
		text-decoration: none;
		
		/* Eased Transition on Hover */
		transition: 0.5s ease-out;
			-webkit-transition: 0.5s ease-out; /* Chrome/Safari */
			-moz-transition: 0.5s ease-out; /* Firefox */
			-ms-transition: 0.5s ease-out; /* IE */
			-o-transition: 0.5s ease-out; /* Opera */
	}


/* =============== Our Mission (#research) Section (index.html) ============== */

#research {
	background-image: url("../images/sect-bg.jpg");
	background-size: cover;
	min-height: 500px;
}

	#research h2 {
		color: #fff;
	}

	#research ul {
	   list-style: none;
	   margin-left: 1;
	   padding-left: 1em;
	   text-indent: -1em;
	}
		#research li {
			font-size: 20px;
			color: #fff;
			margin-bottom: 15px;
			padding-left: 40px;
			text-indent: -40px;
		}
		#research ul li .tick.glyphicon {
			font-size: 25px;
			color: #fff;
			margin-right: 40px;
		}


/* =============== Organisation/組織 (#org) Section (index.html) ============== */

/* Organisation Chart Basic Setup */ 
#org #chart * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}
	/* Clears */
	#org .cf:before,
	#org .cf:after {
		content: " "; /* 1 */
		display: table; /* 2 */
	}
	#org .cf:after {
		clear: both;
	}
	
	#org #chart .org-chart {
		margin-bottom: 30px;
	}

/* Chart Basic Styling */ 
#org #chart .content{
	width: 100%;
	max-width: 1142px;
	margin: 0 auto;
	padding: 0 20px;
}
	#org #chart ul{
		padding: 0;
		margin: 0;
		list-style: none;		
	}
		#org #chart ul a{
			display: block;
			background: #fff;
			border: 4px solid #d73772;
			text-align: center;
			overflow: hidden;

			text-decoration: none;
			color: #333;
			height:95px;
			/* margin-bottom: -26px; */
			box-shadow: 4px 4px 9px -4px rgba(0,0,0,0.4);
			-webkit-transition: all linear .1s;
			-moz-transition: all linear .1s;
			transition: all linear .1s;
		}
		#org #chart li.section a {
			margin-top: 45px;
			padding: 7px;
			height: 95px;  /* Height of each member box */
			font-size: 13.5px;
		}
		#org #chart li.section.sm a {
			font-size: 11px;
		}
		

/* Director Cells */
#org .director > li > a, #org .subdirector > li > a {
	padding-top: 18px;
    width: 40%;
    margin: 0 auto 0px auto;
	font-weight: bold;
}
	#org #chart ul.director a, #org #chart ul.subdirector a {
		font-size: 16px;
	}	
	#org .director li a:hover, #org .subdirector li a:hover {
		box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.5) !important;
		width: 42%;

	}
	/* Connecting Vertical Lines After Director Cells */
	#org .director:after, #org .subdirector:after{
		content: "";
		display: block;
		width: 0;
		height: 40px;
		background: red;
		border-left: 4px solid #d73772;
		left: 49.7%;
		position: relative;
	}
	/* Connecting Horizontal Lines for 3 Columns / Groups */
	#org .members:after{
		content: "";
		display: block;
		position: absolute;
		width: 71.5%;
		height: 22px;	
		border-top: 4px solid #d73772;
		margin: 0 auto;
		top: 0px;
		left: 15.4%
	}
	#org .director li a, #org .subdirector li a  {
		padding-top: 15px !important;
	}

/* Three Column / Groups */
#org .grp-a {
	float: left;
}
#org .grp-b {
	margin-left: 8% !important;
	float: left;
}
#org .grp-c {
	float: right;
	margin-right: 5%;
}
	/* Extends the mid vert bar in each cell except last */
	#org .grp-a .midbar:before, 
	#org .grp-b .midbar:before,
	#org .grp-c .midbar:before {
		content: "";
		display: block;
		position: absolute !important;
		width: 0;
		height: 80px; /* adjust top also to change */
		border-left: 4px solid #d73772;
		z-index: 100;
		top: 15px;
		left: 54%;
		margin-left: -2px;
		margin-top: -58px;
	}

/* Connecting Lines Before Each Member Cell */
#org .section:before{
	content: "";
	display: block;
	position: absolute !important;
	width: 0;
	height: 45px;	/* adjust top also to change */
	border-left: 4px solid #d73772;
	z-index: 100;
	top: 5px;
	left: 55%;
	margin-left: -4px;
}

/* Cells of Members */
#org .group {
	width: 29%;
	margin-bottom: 70px;
}
	#org .group > a{
		margin: 0 0 -26px -4px;
		z-index: 101;
	}
	#org .group > ul{
		margin-top: 0px;
		margin-bottom: 0px;
	}
	#org .group li{	
		padding-left: 25px;
		height: 80px;	
	}
	#org .group li a{
		background: #fff;
		top: 35px;	
		position: absolute;
		z-index: 101;
		width: 90%;
		height: 80px;	/* adjust top & hover below when changing */
		vertical-align: middle;
		right: -1px;
		padding-top: 15px !important;
	}
	#org .group li a:hover{
		box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.5) !important;
		height: 65px;
		width: 95%;
		top: 38px;
	}
	
/* Chart Column Title Cells */
/* #org #chart li.section a.a-col, 
#org #chart li.section a.b-col,
#org #chart li.section a.c-col {
	width: 120%;
	margin-left: -20px;
}

	#org #chart ul a.title {
		background-color: #f7d4e1;
		font-weight: bold;
	}

	#org #chart ul li a.a-col {
		font-size: 22px;
		padding-top: 10px;
	}
	#org #chart ul li a.b-col {
		font-size: 15px;  
		padding-top: 5px;
	}		
	#org #chart ul li a.c-col {
		font-size: 16px;
		padding-top: 15px;
	} */
	
/* Form Confirm Modal - Avoids Navbar Covering */
#contactConfirm.modal {
   position: fixed;
   top: 50px;
}	
#contactConfirm.modal table th{
	width: 20%;
}
#contactConfirm .btn-success {
	background-color: #d73772;
	border: 1px solid #d73772;
}
	#contactConfirm .btn-success:hover {
		background-color: #fff;
		color: #d73772;
	}

	
/*************************** 
 3.2) workshop.html page
 ***************************/ 

/* =============== Banner (#ws-banner) Section (workshop.html) ============== */
 
#ws-banner {
	background: 
	linear-gradient(-90deg, rgba(255, 255, 255,0.0),rgba(255, 255, 255,0.0)),
	url(../images/h-bg-ws.jpg) no-repeat center/cover;
		/* background: 
		-moz-linear-gradient(90deg, rgba(221, 136, 169,0.9),rgba(175, 51, 98,0.9)),
		url(../images/h-bg2.jpg) no-repeat center/cover;
		background: 
		-webkit-linear-gradient(90deg, rgba(221, 136, 169,0.9),rgba(175, 51, 98,0.9)),
		url(../images/h-bg2.jpg) no-repeat center/cover;	
		background: 
		-ms-linear-gradient(90deg, rgba(221, 136, 169,0.9),rgba(236, 168, 193,0.9)),
		url(../images/h-bg2.jpg) no-repeat center/cover;
		background: 
		-o-linear-gradient(90deg, rgba(221, 136, 169,0.9),rgba(236, 168, 193,0.9)),
		url(../images/h-bg2.jpg) no-repeat center/cover; */

	/* Backup if Shading Fails */
	background-color: #3366cc;		
	margin-top: 40px;
	margin-bottom: 0px;
	color: #fff;
}

#ws-banner h2 {
	font-size: 2.3em;
	line-height: 1.8em;
	color: #fff;
	font-weight: bold;
	margin-bottom: 50px;
}

#ws-banner h4 {
	font-size: 1.8em;
	line-height: 1.6em;
	color: #303030;
	font-weight: bold;
	margin-top: 40px;
}

#ws-banner p {
	font-size: 1.2em;
}
	#ws-banner .quotes {
		color: #808080;
		font-weight: bold;
	}
	@media screen and (max-width: 767px) {
		#ws-banner .quotes {
			color: #fff;
		}
	}
	#ws-banner .description {
		color: #303030;
		font-weight: bold;
		line-height: 2.2em;
	}

/* =============== Workshop News (#wsnews) Section (workshop.html) ============== */

#wsnews #tonewslist a:link {
		/* Eased Transition off Hover */
		/* Transition: property, duration, timing-function, delay */
		transition: 0.5s ease-out;
			-webkit-transition: 0.5s ease-out; /* Chrome/Safari */
			-moz-transition: 0.5s ease-out; /* Firefox */
			-ms-transition: 0.5s ease-out; /* IE */
			-o-transition: 0.5s ease-out; /* Opera */
	}
	#wsnews #tonewslist a:hover {
		/* Eased Transition on Hover */
		text-decoration: none;
		opacity: 0.7;
		transition: 0.5s ease-out;
			-webkit-transition: 0.5s ease-out; /* Chrome/Safari */
			-moz-transition: 0.5s ease-out; /* Firefox */
			-ms-transition: 0.5s ease-out; /* IE */
			-o-transition: 0.5s ease-out; /* Opera */
	}
	
/* =============== Workshop Organizer (#organizer) Section (workshop.html) ============== */	

#parent {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	height: 500px;
  	flex-direction: column;
	}
	
#example {
 	display: block;
  	width: 300px;
  	background: #FFF;
  	padding:10px;
  	align-items: center;
  	margin-top:50px;
	}
	
 #organizer .logosub{
 	margin-top:30px;
 	font-size:18px;
  }
  #organizer p{
 	font-size:12px;
 	width:280px;
  }

 
/* =============== Overview/概要 (#wsinfo) Section (workshop.html) ============== */

#wsinfo .btn-info {
	background-color: #d73772;
	color: #fff;
	border: none;
	padding: 15px;
}

#wsinfo .btn-info:hover {
	color: #d73772;
	border: 2px solid #d73772 !important;
	background-color: #fff !important;
}

#wsinfo td {
	line-height: 1.8;
}

#wsinfo .hd-cell {
	text-align: left;
	letter-spacing: 5px;
}

#wsinfo .in-cell {
	text-align: left;
}
#wsinfo .in-cell img:hover {
	box-shadow: none !important;
}
#wsinfo .in-cell a:link {
	color: #0047b3;
}
#wsinfo .in-cell a:visited {
	color: #0047b3;
}
#wsinfo .in-cell a:hover {
	font-weight: bold;
}

/* Google Map */
#wsinfo iframe {
	width: 500px;
	height: 150px;
	border: 0;
}

#wsinfo img {
	max-height: 150px;
	width: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
}
	#wsinfo img:hover, #about a:hover {
		box-shadow: 10px 15px 25px 10px rgba(0,0,0, .2); /* h,v,blur,spread,color */
		text-decoration: none;
	}
	#wsinfo a > img {
		display: inline-block;
	}

	
/* =============== Request (#request) Section (workshop.html) ============== */

	
/* =============== Registration (#register) Section (workshop.html) ============== */	

#register input {
	margin-bottom: 15px;
}
#register select {
	margin-bottom: 15px;
}
#register textarea {
	margin-bottom: 15px;
}
#register .btn-success {
	background-color: #d73772;
	border: 1px solid #d73772;
}
	#register .btn-success:hover {
		background-color: #fff;
		color: #d73772;
	}	



/* Form Confirm Modal (WS Registration Version) */
#userConfirm.modal {
   position: fixed;
   top: 50px;
}	
#userConfirm.modal table th{
	width: 20%;
}
#userConfirm .btn-success {
	background-color: #d73772;
	border: 1px solid #d73772;
}
	#userConfirm .btn-success:hover {
		background-color: #fff;
		color: #d73772;
	}

/* Form Confirm Modal (WS Expression of Interest Version) */
#userInConfirm.modal {
   position: fixed;
   top: 50px;
}	
#userInConfirm.modal table th{
	width: 20%;
}
#userInConfirm .btn-success {
	background-color: #d73772;
	border: 1px solid #d73772;
}
	#userInConfirm .btn-success:hover {
		background-color: #fff;
		color: #d73772;
	}	
	
	

/* Form Result Pages - complete/error.html */
#landing a:hover {
	color: #d73772;
	border: 2px solid #d73772 !important;
	background-color: #fff !important;
}


/************************************** 
 3.3) Newslist  Page (../newslist.html)
 **************************************/ 

#newslist.container-fluid {
	padding-top: 20px;
}

#newslist-banner {
	background: 
	linear-gradient(-90deg, rgba(221, 136, 169,0.9),rgba(175, 51, 98,0.9)),
	url(../images/h-bg-news.jpg) no-repeat center/cover;
		background: 
		-moz-linear-gradient(90deg, rgba(221, 136, 169,0.9),rgba(175, 51, 98,0.9)),
		url(../images/h-bg-news.jpg) no-repeat center/cover;
		background: 
		-webkit-linear-gradient(90deg, rgba(221, 136, 169,0.9),rgba(175, 51, 98,0.9)),
		url(../images/h-bg-news.jpg) no-repeat center/cover;	
		background: 
		-ms-linear-gradient(90deg, rgba(221, 136, 169,0.9),rgba(236, 168, 193,0.9)),
		url(../images/h-bg-news.jpg) no-repeat center/cover;
		background: 
		-o-linear-gradient(90deg, rgba(221, 136, 169,0.9),rgba(236, 168, 193,0.9)),
		url(../images/h-bg-news.jpg) no-repeat center/cover;

	/* Backup if Shading Fails */
	background-color: #3366cc;		
	margin-top: 40px;
	margin-bottom: 0px;
	color: #fff;
}
#newslist {
	/* background: 
	linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
	url(../images/sectbg-1.jpg) fixed center/cover;
		background: 
		-moz-linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
		url(../images/sectbg-1.jpg) fixed center/cover;
		background: 
		-webkit-linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
		url(../images/sectbg-1.jpg) fixed center/cover;
		background: 
		-ms-linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
		url(../images/sectbg-1.jpg) fixed center/cover;
		background: 
		-o-linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
		url(../images/sectbg-1.jpg) fixed center/cover; */
}
#newslist.container-fluid {
	padding-top: 20px;
}
#newslist iframe {
	width: 100%;
	height: 625px;
	border: none; 
}
#newslist li {
	padding-top: 5px;
	padding-bottom: 5px;
}
#newslist .sidebar img {
	margin-left: 10px; 
	margin-right: 5px;
}
#newslist .sidebar .cat-links .dropdown-toggle {
	font-size: 14px;
	white-space: normal;
}
#newslist .sidebar li a, #newslist .sidebar a {
	color: #d73772;
	font-weight: bold;
	text-decoration: none;
}
#newslist .sidebar li a:hover {
	text-decoration: none;
	opacity: 0.6;
}


#newslist-main {
	
}
	#newslist-main h4, #newslist .sidebar h4 {
		font-weight: bold; 
		border-bottom: 1px solid #d73772; 
		padding-bottom: 20px; 
		font-size: 2rem; 
		margin-bottom: 15px;
		line-height: 2.5rem;
	}
	#newslist-main p {
		line-height: 22px;
		text-align:left;
	}
	#newslist-main.post a {
		font-weight: bold;
		color: #d73772; 		
	}
		#newslist-main.post a:hover {
			opacity: 0.6;
			text-decoration: none;
		}
	
	#newsitems a {
		font-weight: bold;
		color: #d73772; 		
	}
		#newsitems a:hover {
			opacity: 0.6;
			text-decoration: none;
		}

.newsitems.table > tbody > tr:first-child > td {
    border: none;
}
.newsitems td.ndate, .newsitems td.ncategory {
	width: 150px;
	padding: 15px 12px;
	font-size: 14px;
}
.newsitems td.ntitle {
	font-size: 13px;
	color: #303030;
}
	.newsitems td.ntitle a {
		font-size: 13px;
		color: #303030;
	}

.newsitems td.ncategory {
	text-align: center;
}
	.newsitems td.ncategory a.notice, .newsitems td.ncategory a.ws,
	.newsitems td.ncategory a.semi, .newsitems td.ncategory a.other,.newsitems td.ncategory a.seika	{
		text-align: center;
		width: 95px;
		color: #fff;
		padding: 5px;
	}
	
	.newsitems td.ncategory a.notice {
		background-color: #eeaac3;
	}
	.newsitems td.ncategory a.ws {
		background-color: #b3d9ff;
	}
	.newsitems td.ncategory a.semi {
		background-color: #79d279;
	}
	.newsitems td.ncategory a.seika {
		background-color: #9370db;
	}
	.newsitems td.ncategory a.other {
		background-color: #ffad33;
	}
	
	.newsitems td.ncategory a.notice:hover, .newsitems td.ncategory a.ws:hover,
	.newsitems td.ncategory a.semi:hover, .newsitems td.ncategory a.other:hover,
	.newsitems td.ntitle a:hover {
		opacity: 0.6;
		text-decoration: none;
		color: #ff0033;
	}
	.seika{
		letter-spacing:1em;
		text-indent:1em !important;}

/* Posts */
img.p20180712, img.p20180720 {
	float: right;
	padding: 5px;
	margin-top: 5px; 
	margin-bottom: 5px; 
	margin-left: 10px;
	width:350px;
}
img.p20181119 {
	padding: 5px;
	margin: 5px;
	width: 43%;
	height: auto;
}

.newsitems td.ntitle p.btn 
   a{
    display:block;
    background:#ff0000 !important;
    width:75px;
    padding:2px;
    text-align:center;
    border-radius:30px;
    margin-left:auto;
    margin-right:auto;
    color:#ffffff !important;
    animation: blink-btn 0.5s linear infinite normal;
		&:hover{
      	animation:none;
      	background:#ffcc00;
    	}
  	}

}
@keyframes blink-btn{
    0% {
    box-shadow:0px 0px 0px 0px rgba(255,0,0,1);
  }
    100% {
    box-shadow:0px 0px 0px 5px rgba(255,0,0,0.6);
  }
}


/* ==========================================================================
   4) Media Queries (Style Changes based on Screen Size for Responsive Design)
   ========================================================================== */
  
/* ===== Largest Devices - Desktop PCs ===== */
@media (min-width:1200px) {

	/* --- All Pages --- */	

	/* Centers and Groups Main Content */
	.container-fluid {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
	
	/* Display Navbar Left Logo & Text on Larger Screens */
	#logo {
		display: initial;
	}
	/* Block Centre Navbar Text on Larger Screens */
	.navbar-header p {
		display: none;
	}
	
}

/* ===== Large Devices - Desktop PCs ===== */
@media (max-width:1200px) {	

	/* --- All Pages --- */		

	.container-fluid {
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	
	/* Display Navbar Left Logo & Text on Larger Screens */
	#logo {
		display: initial;
	}
	/* Block Centre Navbar Text on Larger Screens */
	.navbar-header p {
		display: none;
	}
	
	
	/* --- index.html (Top Page) --- */
	
	#intro .container-fluid {
		max-width: 1200px !important;
	}
	
}


/* ===== Medium Devices - Tablets & PCs ===== */
@media (max-width:991px) {
	
	/* --- All Pages --- */	

	.navtext {
		display: none !important;
	}

	
	/* --- index.html (Top Page) --- */
	
	.jumbotron { 
		margin-top: -10px;
	}
	.jumbotron #btxt {
		width: 55%;
		padding-top: 25px;
		padding-bottom: 25px;
		margin-left: 15%;
	}
	
	#intro .panel h4 {
		font-size: 15px;
	}

}
  

@media screen and (max-width:910px) {
	#org #chart li.section a {
		font-size: 12.5px;
	}
	#org #chart li.section.sm a {
		font-size: 10px;
	}
} 

@media screen and (max-width: 890px) {
	
	#intro .panel a {
		font-size: 12px; 
	}

}


@media screen and (max-width:825px) {
		#org #chart li.section a {
			padding-top: 10px !important;
			height: 115px;  /* Height of each member box */
			font-size: 13.5px;
		}
} 

  
/* ===== Small Devices - Phones & Tablets ===== */   
@media screen and (max-width: 768px) {
	
	/* --- All Pages --- */	

	h2 {
		font-size: 35px;
	}
	
	/* Spacing at end of Footer */
	footer {
		padding-bottom: 50px;
	}
	footer .container-fluid {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	
	/* Spacing on Last line in Contact */
	footer .last {
		margin-bottom: 30px;
	}

	footer h4 {
		margin-top: 0px;
		font-weight: bold;
	}
	/* Adjusts the slightly off-centre alignment of li */
	footer li {
		margin-left: -20px;
	}
	footer.contactinfo  .glyphicon {
		margin-right: 10px;
	}
	
	/* Fold Up/Down Links Tabs */
	footer .footer-links-holder {
		width: 100%;
		text-align: center;
	}
		footer .contactinfo {
			width: 100%;
			text-align: center;
		}
		footer .footer-links-holder h4 {
			margin: 0;
			padding-top: 20px;
			padding-bottom: 20px;
			border-top: #fff 1px solid;
			cursor: pointer;
		}
		/* Creates Down Arrows */
		footer .footer-links-holder h4::after {
			float: right;
			margin-right: 10px;
			content: "";
			display: inline-block;
			vertical-align: middle;
			margin-top: 7px;
			width: 9px;
			height: 9px;
			border-top: 2px solid #fff;
			border-right: 2px solid #fff;
			-moz-transform: rotate(135deg);
			-ms-transform: rotate(135deg);
			-webkit-transform: rotate(135deg);
			transform: rotate(135deg);
			-webkit-transition: transform .5s;
			transition: transform .5s;
		}
		footer .footer-links-holder .footer-links {
			max-height: 0;
			overflow: hidden;
		}
		footer .footer-links-holder.active h4::after {
			-moz-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}
		footer .footer-links-holder.active .footer-links {
			max-height: 10000px;
			padding-left: 0px;
		}	
	
	
	/* --- index.html (Top Page) --- */
	
	.jumbotron { 
		background-image: url("../images/banner-sm.jpg");
		background-size: cover;
		min-height: 250px !important;
		margin-top: 50px;
	}
	.jumbotron #topnav {
		display: none;		
	}
	.jumbotron #btxt {
		text-align: center;
		margin-left: 5%;
		margin-right: 5%;
		margin-top: 0;
		float: none;
		width: 90%;
	}
	
	/* Chart Column Title Cells */
	/* #org #chart ul li a.b-col {
		font-size: 0.5em; 
		padding-top: 5px;	
	}		
	#org #chart ul li a.c-col {
		font-size: 1em;
		padding-top: 5px;	
	} */
	
	
	/* --- workshop.html --- */

	/* Avoids navbar modal obscure */
	.modal {
	   position: fixed;
	   top: 50px;
	}	
	
}

@media screen and (max-width: 767px) {
	
	/* --- All Pages --- */	
	
	/* Show Centre Navbar Text & Left Logo on Smaller Screens */
	#logo {
		display: initial;
	}
	.navbar-header .navtext {
		display: none;
	}
	.navbar-header p {
		display: inherit;
	}
	
	
		
	#intro .panel {
		height: 250px;
	}	
	#intro .panel h4, #intro .panel a {
		font-size: 15px;
	}
	
	
	/* --- newslist.html --- */
		
	.newslistpg .sidebar {
		display: initial;
	}
	.newslistpg .sidebar .dropdown-menu>li>a {
		white-space: normal;
		padding-left: 102px ;
		text-indent: -82px ;
	}
	.newslistpg .sidebar .cat-links .dropdown-menu>li>a {
		white-space: normal;
		padding-left: 140px ;
		text-indent: -120px ;
	}
	
}


/* Organisational Chart Responsive Adjusts */
@media screen and (max-width: 600px) {

/* Director Cells */
#org .director > li > a, #org .subdirector > li > a {
	padding-top: 12px;
    width: 40%;
    margin: 0 auto 0px auto;
}
	/* Connecting Lines After Director Cells */
	#org .director:after, #org .subdirector:after{
		width: 0;
		height: 40px;
		left: 49.7%;
	}
	/* Connecting Lines for 3 Columns / Groups */
	#org .members:after{
		position: absolute;
		width: 60%;
		height: 22px;	
		margin: 0 auto;
		top: 0px;
		left: 21.2%;
	}

/* Three Column / Groups */
#org .grp-a {
	float: left;
	margin-left: auto;
	margin-right: auto;
}
#org .grp-b {
	margin-left: auto;
	margin-right: auto;
	float: right;
}
#org .grp-c {
	float: left;
	margin-top: 20px !important;
	margin-left: 28% !important;
}
	/* Extends the  mid vert bar in each cell except last */
	#org .grp-a .midbar:before, 
	#org .grp-b .midbar:before {
		height: 85px; /* adjust top also to change */
		top: 5px;
		left: 54%;
		margin-left: -2px;
		margin-top: -50px;
	}
	#org .grp-c .midbar:before {
		height: 735px; /* adjust top also to change */
		top: -585px;
		left: 54.7%;
		margin-left: -1px;
		margin-top: -110px;
	}

/* Connecting Lines Before Each Member Cell */
#org .section:before{
	height: 45px;	/* adjust top also to change */
	top: 5px;
	left: 55%;
	margin-left: -4px;
}

/* Cells of Members */
#org .group {
	width: 40%;
	margin-bottom: 60px;
}
	#org .group > a{
		margin: 0 0 -26px -4px;
		z-index: 101;
	}
	#org .group > ul{
		margin-top: 0px;
		margin-bottom: 0px;
	}
	#org .group li{	
		padding-left: 25px;
		height: 80px;	
	}
	#org .group li a{
		top: 35px;	
		position: absolute;
		z-index: 101;
		width: 90%;
		height: 60px;	/* adjust top & hover below when changing */
		right: -1px;
	}
	#org .group li a:hover{
		height: 65px;
		width: 95%;
		top: 38px;
	}
	
	/* Workshop Overview Google Map */
	#wsinfo iframe {
		width: 350px;
	}
	
}

@media (min-width: 481px) and (max-width:577px) {
	#org #chart ul.director a, #org #chart ul.subdirector a {
		padding-top: 0px;
	}	
}	

/* ===== Extra Small Devices - Phones ===== */   
@media screen and (max-width: 480px) {
	
	/* --- All Pages --- */	
	
	body {
		font-size: 12px;
	}
	h2 {
		font-size: 22px;
	}
	h4 {
		font-size: 15px;
	}
	
	footer .footer-links-holder > h4 > a {
		font-size: 15px;
	}
	footer .contactinfo > h4 {
		margin-top: 0px;
	}
	footer .lowfooter p {
		font-size: 10px;
	}
	
	.container-fluid {
		padding: 30px 25px;
	}
	
	
	/* --- index.html (Top Page) --- */
	
	/* Small Image Banner Heading */
	.jumbotron { 
		background-image: url("../images/banner-sm.jpg");
		background-size: cover;
		min-height: 160px !important;
		margin-top: 50px;
		padding: 25px;
	}
	.jumbotron #btxt {
		display: none;		
	}

	#intro .panel h4, #intro .panel a {
		font-size: 13px;
	}
	
	#about p {
		font-size: 14px;
	}
	#about .logosub {
		font-size: 14px;
	}
	
	#research .tick.glyphicon {
		font-size: 20px;
		margin-right: 20px;
	}
	#research li {
		font-size: 16px;
		padding-left: 20px;
		text-indent: -20px;
	}

	#org #chart ul.director a, #org #chart ul.subdirector a {
		font-size: 1.2em;
	}
	#org .grp-c .midbar:before {
		height: 735px; /* adjust top also to change */
		top: -585px;
		left: 54.8%;
	}
	#org #chart {
		padding-bottom: 70px;
	}
	/* Chart Column Title Cells */	
	/* #org #chart ul li a.a-col {
		font-size: 1.2em;
	}
	#org #chart ul li a.b-col {
		font-size: 1.1em; 
		padding-top: 0px;	
	}		
	#org #chart ul li a.c-col {
		font-size: 1.2em;
		padding-top: 8px;	
	} */
	
	
	/* --- workshop.html --- */
	
	#ws-banner h3 {
		font-size: 22px;
		line-height: 27px;
	} 
	
	#register h3 {
		font-size: 15px;	
	}	
	
}

@media screen and (max-width: 465px) {
	#org #chart ul.director a, #org #chart ul.subdirector a {
		padding-top: 5px;
	}

	/* Workshop Overview Google Map */
	#wsinfo iframe {
		width: 200px;
	}
	#organizer .img-profile{
	border-radius: 50%;
	width: 125px;
 	height: 125px;
	}	
}

@media screen and (max-width: 415px) {
			
	#org #chart li.section a {
		height: 125px;  /* Height of each member box */
	}
	
}	

@media screen and (max-width: 380px) {
	
	#intro .panel {
		height: 240px;
	}	
	
	#org #chart ul.director a, #org #chart ul.subdirector a {
		font-size: 1em;
	}
	/* Chart Column Title Cells */	
	/* #org #chart ul li a.a-col {
		font-size: 1em;
	}
	#org #chart ul li a.b-col {
		font-size: 1em; 
		padding-top: 0px;	
	}		
	#org #chart ul li a.c-col {
		font-size: 1em;
		padding-top: 5px;	
	} */
	
} 

@media screen and (max-width: 320px) {
	
	#org #chart ul.director a, #org #chart ul.subdirector a {
		font-size: 1em;
		padding-top: 5px;
	}
	/* Chart Column Title Cells */	
	/* #org #chart ul li a.b-col {
		padding-top: 0px;	
	}	 */	
	
}