/* defines */
:root{
	--dark: #444;
    --light: #efefef;
	--yellow: #f2a711;
	--yellow-light: #efcb8e;
	--yellow-dark: #af8c00;
}

/* animations */
@keyframes mdFade {
    0%   {opacity: 0;}
    100%  {opacity: 1;}
}

@keyframes mdSaturate {
    0%   {filter: grayscale(100%);}
    100%  {filter: grayscale(0%);}
}

@keyframes mdRollInLeft {
   0% { opacity: 0; transform: translateX(-100%); }
   100% { opacity: 1; transform: translateX(0px); }
}

@keyframes mdRollInTop {
   0% { opacity: 0; transform: translateY(-100%); }
   100% { opacity: 1; transform: translateY(0px); }
}

@keyframes mdButtonHover {
   0% { background-color: var(--yellow); }
   100% { background-color: var(--yellow-light); }
}

@keyframes mdButtonUnHover {
   0% { background-color: var(--yellow-light); }
   100% { background-color: var(--yellow); }
}

@keyframes imgSaturation {
   0% { filter: grayscale(20%); }
   100% { filter: grayscale(0%); }
}

body {
	font-family: 'Roboto', sans-serif;
	text-align: justify;
	font-size: 14pt;
	font-weight: 100;

	background-color: var(--dark);
	color: #fff;

	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

table {
	text-align: left;
}

/* make bold thinner */
b, strong {
	font-weight: 500;
}

a,
.highlight {
	color: var(--yellow);
}

a:hover {
	text-decoration: none;
}

a.highlight {
	font-style: italic;
	font-size: 16pt;
}

a:visited,
a:visited.highlight {
	color: var(--yellow);
}

a:hover,
a:hover.highlight,
a:active,
a:active.highlight {
	color: var(--yellow-light);
}

a.text-link {
	color: inherit;
}

a.text-link:hover {
	text-decoration: underline;
}

.right {
	text-align: right;
}

/* fixes wrong margin of bullets when floating images */
ul  {
	overflow: hidden;
}

/* menu */
#navbar-button {
	border: none;
	border-radius: 0;
	background-color: var(--light);
}

#navbar-button:hover {
	background-color: var(--dark);
}

#navbar-button span {
	background-color: var(--dark);
}

#navbar-button:hover span {
	background-color: var(--light);
}

.navbar {
	min-height: 0pt;
	margin: 0;
	border: none;
}

.navbar-das .navbar-nav > li > a {
    margin: 0pt 0 10pt 0;
	text-shadow: none;
    color: var(--dark);
}

/* change the active menu entry */
.navbar-das .navbar-nav > .active > a {
	background-color: #ddd;
}

.navbar-das .navbar-nav  > li > a:hover {
    color: var(--yellow);
	background-color: var(--dark);
}

.navbar-inverse, .navbar-nav{
	border: none;
}

.navbar-header {
	background-color: var(--light);
}

.navbar-toggle {
	margin: 0;
	margin-right: 10pt;
	height: 30pt;
}

.container-fluid {
	position: fixed;
	width: 100%;
	
	background: url("img/das-logo-bar.png") bottom left repeat-x;
	background-size: auto 46pt;
	background-color: var(--light);
	box-shadow: 0pt 2pt 5pt 0pt rgba(0,0,0,0.5);
	padding: 0;

	animation-name: mdRollInTop;
	animation-duration: 1s;

	z-index: 5;
}

.container-fluid > .navbar-collapse {
	width: 100%;
	margin: 0;
}

/*logo*/
#logo {
	position: absolute;
	right: 0px;
	bottom: 0px;
	height: 45pt;
}

/*remove any margins*/
body > .container {
	width: 100%;
}

/* copied from base */
.container {
	/*max-width: 940px;*/
	margin: 0 auto;
	padding: 0;
}

.sidebar {
	float: left;
	width: 20%;
}

.content p {
	width: 100%;
	margin: 0 auto;
	padding-bottom: 7pt;
}

.content h2 {
	font-weight: 100;
	font-style: italic;
}

/*titlepage*/
#titlepage {
	width: 100%;
	min-height: 500pt;

	background: url("img/panorama-s.jpg") no-repeat top left fixed;
	background-size: auto 1000px;
	overflow-y: hidden;
	
/* 	animation-name: mdSaturate;
	animation-duration: 5s;
 */
}

#titlepage h1 {
	width: 50%;
	position: relative;
	top: 300pt;
	float: left;

	font-weight: 100;
	text-transform: uppercase;
	text-align: right;
	padding: 10pt;

	background-color: rgba(0,0,0,0.6);

	animation-name: mdFade;
	animation-duration: 2s;

	z-index: 2;
	
}

#titlepage p {
	position: relative;
	height: 200pt;
	width: 200pt;

	top: 400pt;
	right: 100pt;
	margin-right: 0pt;

	font-size: 20pt;
	text-align: center;

	padding: 30pt 0pt;

	background-color: var(--dark);
	border-radius: 300pt;
}

/* attendees */
.registration-fees {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

.registration-fees th, 
.registration-fees td {
	padding: 0 10pt;
}

.registration-fees th {
	font-weight: 400;
	border-bottom: 1px solid #fff;
}

/* about */
#about img {
	float: right;
	margin-left: 10pt;
}	

/* authors */
#author-details {
		padding: 0;
}

#author-read-more {
	margin: 0;
	padding: 0;
}

#deadlines .highlight {
	margin-left: 10pt;
}

/* content */
.section {
	width: 100%;
	padding: 60pt 0 45pt 0;
	box-shadow: inset 0pt 4pt 1pt -3pt rgba(0,0,0,0.75);
}

#venue {
	padding-top: -70;
}

.light {
	background-color: var(--light);
	color: var(--dark);
}

.section .content {
	max-width: 940px;
	padding: 0 10pt 0 5%;
	margin: 0 auto;
}

.button,
.button:visited {
	font-weight: 500;
	padding: 10pt 40pt;
	
	color: var(--dark);
	background-color: var(--yellow);
	border-radius: 5pt;
	
	box-shadow: 1pt 2pt 1pt 0pt rgba(0,0,0,0.5);
	
	animation-name: mdButtonUnHover;
	animation-duration: 0.5s;
}

.button:hover,
.button:active {
	color: var(--dark);
	background-color: var(--yellow-light);
	text-decoration: none;
	
	box-shadow: 1pt 2pt 1pt 0pt rgba(0,0,0,0.3);
	
	animation-name: mdButtonHover;
	animation-duration: 0.5s;
}

/* remove decorations */
span.file img,
span.filesize {
	display: none;
}

.read-more {
	width: 100%;
	height: 60pt;
}

.read-more button {
	width: 33%;
	border: none;
	float: right;
}

.collapse {
	clear: both;
	width: 100%;
}

/* committee */
#deadlines td {
	padding-left: 10pt;
}

#deadlines .deadline-category {
	padding: 0pt;
	padding-top: 5pt;
	color: var(--yellow);
}

#submission {
	padding-left: 20pt;
}

#cfp {
	float: right;
	margin-top: 20pt;
}

#committee button {
	margin-top: 50pt;
}

/* venue header image */
.header-img {
	padding: 0;
	height: 200pt;
	width: 100%;
	box-shadow: inset 0pt 4pt 1pt -3pt rgba(0,0,0,0.5);
}

#venue {
	padding: 0 0 60pt 0;
}

#venue-img {
	z-index: -1;	
	background: url("img/karlskirche-web.jpg") no-repeat center center fixed;
	background-size: cover;
}

/* keynotes */
.image-left img {
	float: left;
	clear: both;
	margin: 5pt 15pt 0 0;
}

.image-right img {
	float: right;
	margin: 5pt 0 0 15pt;
}

.image-left img,
.image-right img {
	width: 33%;
}

.full-width {
	width: 200px;
}

a > img {
	filter: grayscale(20%);
}

a > img:hover {
	animation-name: imgSaturation;
	animation-duration: 0.2s;
	filter: grayscale(0%);
}

.time {
	font-size: 12pt;
	font-weight: 400;
}

/* program */
.authors {
	font-style: italic;
	color: #000;
}

.panel {
	margin: 0;
	padding: 0;
}

.paper {
	margin-top: 10pt;
}

.abstract {
	font-size: 11pt;
}

.paper a {
	color: var(--dark);
	cursor: pointer;
}

.paper a:hover {
	color: var(--yellow);
}

.image-thumb .highlight {
	color: var(--dark);
	font-size: 12pt;
}
 
.two-thumbs {
	width: 33%;
	float: left;
	clear: both;
}

.four-thumbs {
	width: 66%;
	float: left;
}

.image-thumb {
	width: 49%;
	float: left;
	margin-right: 1%;
	cursor: pointer;
}

.four-thumbs .image-thumb {
	width: 24.5%;
	margin-right: 0.5%
}

.image-thumb img {
	width: 100%;
	filter: grayscale(100%);
}

.image-thumb img:hover {
	animation-name: mdSaturate;
	animation-duration: 0.2s;
	filter: grayscale(0%);
}

.image-toggle,
#papers .panel {
	background: none;
	box-shadow: none;
}

.fold {
	display: block;
	background-color: #ddd;
	margin: 5pt 0pt;
	padding: 10pt;
	color: var(--dark);
	font-weight: 100;
	cursor: pointer;
}

.fold:after {
	font-style: bold;
	text-align: right;
	float: right;
	content: "\00bb"; /* \25b6 */
}

.fold[aria-expanded="true"]:after {
	-webkit-transform: rotate(90deg);
}

.fold:hover {
   color: var(--yellow);
	background-color: var(--dark);
	box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.25);
}


/* program table */
.table-program,
.table-program th,
.table-program td {
	border: 1px solid var(--dark);
	padding: 0pt 10pt;
}

.table-program {
	width: 100%;
	font-size: 12pt;
}

.table-program th {
	padding: 10pt;
	font-weight: 400;
	background-color: var(--dark);
	color: var(--yellow);
}

.td-time {
	text-align: right;
	font-size: 10pt;
}

.th-time {
	text-align: right;
}

.td-break {
	background-color: #ddd;
}

/* sponsors */
#sponsors img {
	float: center;
	margin: 10pt;
	max-width: 350px;
}

/* twitter timeline */
#twitter-timeline {
	position: absolute;
	right: 10pt;
	top: 520pt;
	width: 24%;
	max-width: 420pt;
	box-shadow: 4pt 4pt 3pt rgba(0,0,0,0.5);
	background-color: #fff;
	border-radius: 5px;
}

@media screen and (max-width: 1280px) {

#twitter-timeline {
	position: relative;
	top: 60pt;
	left: 0pt;
	width: 100%;
	max-width: 400pt;
	background-color: none;
	box-shadow: none;
}

}

@media screen and (min-width: 768px) and (max-width: 1920px) {

/* make space for twitter timeline */
.section .content {
	margin: 0;
}
}

/* mobile */
@media screen and (max-width: 1024px) {

#titlepage h1 {
	width: 80%;
	top: 400px;
}

#titlepage {
	min-height: 600px;
}

#titlepage p {
	position: absolute;
	top: -10pt;
	right: 10pt;
	/* top: -130pt; */

	margin-right: 10pt;
	padding-top: 100pt;
}

} /* @media-screen and (max-width: 1024px)*/


/* bootstrap extra small devices */
@media screen and (max-width: 768px) {

body {
	text-align: left;
}

#titlepage h1 {
	top: 70pt;
}

#titlepage {
	overflow: hidden;
}

#titlepage p {
	position: relative;
	width: 300pt;
	height: 300pt;
	
	top: 200pt;
	right: -100pt;
	margin-right: 0;
	padding: 30pt 120pt 0pt 0pt;

	text-align: right;
	float: right;
}

#submission {
	padding-left: 0pt;
}

.read-more button {
	width: 100%;
}

.image-left img {
	float: clear;
	width: 100%;
	margin: 0;
}

.image-toggle .image-left img {
	max-width: 300px;
	margin-right: 10px;
}

.two-thumbs,
.four-thumbs {
	width: 100%;
	clear: both;
}

/* fixes issues with naver labs in mobile chromes */
#sponsors img {
	max-width: 250px;
}

.table-program {
	width: 95%;
	font-size: 10pt;
}

} /*@media screen and (max-width: 600px) */

@media screen and (max-height: 600px) {

/* .navbar-das { */
	/* position: absolute; */
/* } */
}