@import url('web.forms.css');


/* DEFAULT TEMPLATE STYLES */
body, html {
	background: #fff;
}


/* DEFAULT TABLE STYLES */
table, table td, table th {
	border-collapse: collapse;
	border: 0 solid #dddddd;
	vertical-align: top;
	text-align: left;
}


/* TEMPLATE ELEMENTS */
#tpl_body {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1200px;
	padding: 60px;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
@media screen and (max-width: 1200px) {
	#tpl_body {
		padding: 5vw;
	}
}
	#tpl_wrapper {
		position: relative;
		z-index: 1;
	}
		#tpl_menu {
			position: absolute;
			z-index: 20;
			top: -30px;
			right: 0;
			margin-top: -6px;
		}
		@media screen and (max-width: 1200px) {
			#tpl_menu {
				top: -2.5vw;
			}
		}
		@media screen and (max-width: 1000px) {
			#tpl_menu {
				top: 3.8vw;
				right: 0;
				margin-top: 10px;
				display: none;
				background: #fff;
				padding: 15px 25px;
				border: 1px solid #ddd;
				-webkit-box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.1);
				        box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.1);
			}
			#tpl_menu:before {
				content: '';
				width: 0;
				height: 0;
				display: block;
				border: 7px solid;
				border-color: transparent transparent #ddd transparent;
				position: absolute;
				top: -14px;
				right: 1.5vw;
				margin-right: -7px;
			}
			#tpl_menu_mobile.open + #tpl_menu {
				display: block;
			}
		}
			#tpl_menu * {
				display: block;
				float: left;
				margin: 0;
				padding: 0;
				list-style: none;
			}
			@media screen and (max-width: 1000px) {
				#tpl_menu * {
					float: none;
				}
			}
			#tpl_menu a {
				font-family: VIVN, sans-serif;
				font-weight: 300;
				line-height: 20px;
				color: inherit;
				margin-left: 30px;
			}
			@media screen and (max-width: 1200px) {
				#tpl_menu a {
					margin-left: 2.5vw;
				}
			}
			@media screen and (max-width: 1000px) {
				#tpl_menu a {
					margin-left: 0;
					line-height: 30px;
				}
				#tpl_menu li + li {
					border-top: 1px solid #ddd;
				}
			}
			#tpl_menu a:hover,
			#tpl_menu a.selected {
				color: #e64526;
			}
		#tpl_menu_mobile {
			position: absolute;
			z-index: 10;
			top: 0.8vw;
			right: 0;
			width: 3vw;
			height: 3vw;
			background: center no-repeat url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTggMTgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0wLDBoMTh2My42SDBWMHogTTAsMTAuOGgxOFY3LjJIMFYxMC44eiBNMCwxOGgxOHYtMy42SDBWMTh6Ii8+PC9zdmc+');
			background-size: 100% 100%;
			opacity: 0.15;
			display: none;
			cursor: pointer;
		}
		@media screen and (max-width: 1000px) {
			#tpl_menu_mobile {
				display: block;
			}
			#tpl_menu_mobile:hover,
			#tpl_menu_mobile.open {
				opacity: 1;
			}
		}
		#tpl_logo {
			display: block;
			height: 86px;
			background: left no-repeat url(../image/web/logo.svg);
			background-size: contain;
			margin-bottom: 60px;
		}
		@media screen and (max-width: 1200px) {
			#tpl_logo {
				margin-bottom: 5vw;
				height: 7.16666666vw;
			}
		}
		#tpl_content {
			
		}
			#tpl_content > * + * {
				margin-top: 30px;
			}
			#tpl_content > .webitem_3 + .webitem_3 {
				margin-top: 0;
			}


/* PACKERY */

/*   16px = 100%;    16 / 100 * 375 = 60px */
/* 1200px = 100vw; 1200 / 100 * 5   = 60px */

/*   16px = 100%;    16 / 100 * 240 = 38.4px */
/* 1200px = 100vw; 1200 / 100 * 3.2 = 38.4px */

.blog-items,
.tpl_speakers {
	position: relative;
	z-index: 1;
	margin-right: -1.5%;
	margin-bottom: -1.5%;
	background: #fff;
}
	.blog-item {
		position: relative;
		z-index: 1;
		float: left;
		font-family: 'VIVN', sans-serif;
		font-weight: bold;
		font-style: italic;
		font-size: 240%;
		line-height: 160%;
		margin: 0 1.5% 1.5% 0;
		height: 0;
		border: 0;
		border-color: rgba(0,0,0,0);
		/*overflow: hidden;*/
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.blog-item[style*="background-image"] {
		background-position: center;
		background-size: cover;
	}
	@media screen and (max-width: 1200px) {
		.blog-item {
			font-size: 3.2vw;
		}
	}
	.blog-item-article {
		color: #262959;
		background-color: #fff7cf;
	}
	.blog-item-video,
	.blog-item-speaker {
		color: #e64526;
		background-color: #ffd6c4;
	}
	.blog-item-1x1 {
		width: 23.5%;
		padding-top: 23.5%;
	}
	.blog-item-2x1 {
		width: 48.5%;
		padding-top: 23.5%;
	}
	.blog-item-2x05 {
		width: 48.5%;
		padding-top: 11%;
	}
	.blog-item-3x1 {
		width: 73.5%;
		padding-top: 23.5%;
	}
	.blog-item-4x1 {
		width: 98.5%;
		padding-top: 23.5%;
	}
	.blog-item-4x05 {
		width: 98.5%;
		padding-top: 11%;
	}
	.blog-item-3x2 {
		width: 73.5%;
		/*padding-top: 48.5%;*/
		padding-top: 48.45%;
	}
	@media screen and (max-width: 1200px) {
		
	}
	@media screen and (max-width: 800px) {
		.blog-item-1x1,
		.blog-item-2x1,
		.blog-item-3x1,
		.blog-item-4x1,
		.blog-item-4x05,
		.blog-item-3x2 {
			width: 48.5%;
			padding-top: 23.5%;
		}
	}
	@media screen and (max-width: 800px) {
		.blog-item-1x1,
		.blog-item-2x1,
		.blog-item-3x1,
		.blog-item-4x1,
		.blog-item-4x05,
		.blog-item-3x2 {
			width: 98.5%;
			padding-top: 23.5%;
		}
	}
		.blog-item-wrapper-table {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
		}
		.blog-item-wrapper {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			display: table;
			border-collapse: collapse;
			border-spacing: 0;
			border: 0;
			border-color: rgba(0,0,0,0);
			height: 100%;
			width: 100%;
		}
		.blog-item-name {
			text-align: center;
			display: table-cell;
			vertical-align: middle;
			border: 0;
			border-color: rgba(0,0,0,0);
			padding: 0 10%;
			font-size: 80%;
			line-height: 110%;
		}
		.blog-item-2x05 .blog-item-name,
		.blog-item-4x05 .blog-item-name,
		.blog-item-4x1 .blog-item-name {
			font-size: 110%;
			line-height: 110%;
		}
		.blog-item-3x2 .blog-item-name {
			font-size: 140%;
			line-height: 110%;
		}
		@media screen and (max-width: 800px) {
			.blog-item-name,
			.blog-item-2x05:not(.blog-item-keepsize) .blog-item-name,
			.blog-item-4x05:not(.blog-item-keepsize) .blog-item-name,
			.blog-item-4x1:not(.blog-item-keepsize) .blog-item-name,
			.blog-item-3x2:not(.blog-item-keepsize) .blog-item-name {
				font-size: 140%;
				line-height: 110%;
			}
		}
		.blog-item[style*="background-image"] .blog-item-name {
			position: absolute;
			top: 0;
			left: 0;
			font-size: 32%;
			line-height: 110%;
			padding: 9px 10px 9px 48px;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		@media screen and (max-width: 1200px) {
			.blog-item[style*="background-image"] .blog-item-name {
				padding: 9px 1.2vw 9px 4vw;
			}
		}
		@media screen and (max-width: 800px) {
			.blog-item[style*="background-image"] .blog-item-name {
				font-size: 64%;
			}
		}
		.blog-item-1x1[style*="background-image"] .blog-item-name {
			width: 100.3%;
		}
		.blog-item-2x1[style*="background-image"] .blog-item-name,
		.blog-item-2x05[style*="background-image"] .blog-item-name {
			width: 48.5%;
		}
		.blog-item-3x1[style*="background-image"] .blog-item-name,
		.blog-item-3x2[style*="background-image"] .blog-item-name {
			width: 32%;
		}
		@media screen and (max-width: 800px) {
			.blog-item-3x1[style*="background-image"] .blog-item-name,
			.blog-item-3x2[style*="background-image"] .blog-item-name {
				width: 48.5%;
			}
		}
		.blog-item-4x1[style*="background-image"] .blog-item-name,
		.blog-item-4x05[style*="background-image"] .blog-item-name {
			width: 24%;
		}
		@media screen and (max-width: 800px) {
			.blog-item-4x1[style*="background-image"] .blog-item-name,
			.blog-item-4x05[style*="background-image"] .blog-item-name {
				width: 48.5%;
			}
		}
		.blog-item-article[style*="background-image"] .blog-item-name {
			background-color: #fff7cf;
		}
		.blog-item-video[style*="background-image"] .blog-item-name,
		.blog-item-speaker[style*="background-image"] .blog-item-name {
			background-color: #ffd6c4;
		}
			.blog-item.clickable .blog-item-name a {
				color: inherit;
			}
			.blog-item.clickable[style*="background-image"] .blog-item-name a {
				display: inline-block;
				vertical-align: middle;
				width: 99.99%;
			}
			.blog-item.clickable[style*="background-image"] .blog-item-name:before {
				content: '';
				display: inline-block;
				vertical-align: middle;
				height: 33px;
				width: 0.01%;
			}
			@media screen and (max-width: 800px) {
				.blog-item.clickable[style*="background-image"] .blog-item-name:before {
					height: 40%;
				}
			}
			.blog-item.clickable:hover .blog-item-name a {
				color: inherit;
				text-decoration: underline;
			}
			.blog-item-name[data-icon]:before,
			.blog-item-name a[data-icon]:before {
				position: absolute;
				display: block;
				top: 9px;
				left: 9px;
				font-size: 24px;
				line-height: 100%;
			}
			@media screen and (max-width: 800px) {
				.blog-item-name[data-icon]:before,
				.blog-item-name a[data-icon]:before {
					font-size: 18px;
					font-size: 2.25vw;
				}
			}
			@media screen and (max-width: 600px) {
				.blog-item-name[data-icon]:before,
				.blog-item-name a[data-icon]:before {
					font-size: 12px;
					font-size: 2vw;
				}
			}
			.blog-item-name[data-icon="video"]:before,
			.blog-item-name a[data-icon="video"]:before {
				font-size: 26px;
			}
			@media screen and (max-width: 800px) {
				.blog-item-name[data-icon="video"]:before,
				.blog-item-name a[data-icon="video"]:before {
					font-size: 19px;
					font-size: 2.375vw;
				}
			}
			@media screen and (max-width: 600px) {
				.blog-item-name[data-icon="video"]:before,
				.blog-item-name a[data-icon="video"]:before {
					font-size: 13px;
					font-size: 2.16666666vw;
				}
			}
		.blog-item-user {
			position: absolute;
			z-index: 10;
			display: block;
			top: 9px;
			left: 40px;
			font-size: 11px;
			line-height: 24px;
		}
		.blog-item-article[style*="background-image"] .blog-item-user {
			display: none;
		}
		@media screen and (max-width: 800px) {
			.blog-item-user {
				left: 36px;
				line-height: 18px;
			}
		}
		@media screen and (max-width: 600px) {
			.blog-item-user {
				left: 28px;
				line-height: 12px;
			}
		}
		@media screen and (max-width: 500px) {
			.blog-item-user {
				display: none;
			}
		}
			.blog-item-user:before {
				font-size: 24px;
				display: inline-block;
				vertical-align: top;
				margin: 0 8px 0 0;
			}
			@media screen and (max-width: 800px) {
				.blog-item-user:before {
					font-size: 18px;
					font-size: 2.25vw;
				}
			}
			@media screen and (max-width: 600px) {
				.blog-item-user:before {
					font-size: 12px;
					font-size: 2vw;
				}
			}


/* SPEAKER */
.speaker-view {
	background: #eeebeb;
	padding: 0 0 3.5% 0;
}
	.speaker-view-picture {
		padding: 1.5% 6% 0 6%;
	}
	@media screen and (max-width: 800px) {
		.speaker-view-picture {
			padding-top: 3%;
		}
	}
		.speaker-view-picture > img {
			display: inline-block;
			vertical-align: top;
			width: 100%;
		}
		.speaker-view-picture > div {
			width: 100%;
			height: 0;
			padding: 57% 0 0 0;
			background-position: center;
			background-size: cover;
		}
			.speaker-view-picture > div > img {
				display: none;
			}
	.speaker-view-content {
		padding: 3% 12% 0 12%;
	}
	@media screen and (max-width: 800px) {
		.speaker-view-content {
			padding-top: 6%;
		}
	}
	@media screen and (max-width: 600px) {
		.speaker-view-content {
			padding: 6% 6% 0 6%;
		}
	}
	.speaker-view-socialmedia {
		padding: 1.5% 12% 0 12%;
	}
	@media screen and (max-width: 800px) {
		.speaker-view-socialmedia {
			padding-top: 3%;
		}
	}
	@media screen and (max-width: 600px) {
		.speaker-view-socialmedia {
			padding: 3% 6% 0 6%;
		}
	}
		.speaker-view-socialmedia ul,
		.speaker-view-socialmedia li {
			display: block;
			margin: 0;
			padding: 0;
			list-style: none;
			float: left;
		}
		.speaker-view-socialmedia ul {
			float: right;
		}
		.speaker-view-socialmedia a {
			display: block;
			line-height: 26px;
			width: 26px;
			height: 26px;
			overflow: hidden;
			text-align: center;
			color: #fff;
			background: #e64526;
			margin: 0 0 0 5px;
		}
		.speaker-view-socialmedia a:hover {
			background-color: #262959;
		}
	.speaker-view-articles-head {
		color: #e64526;
		font-size: 80%;
		font-family: 'VIVN', sans-serif;
		font-weight: bold;
		font-style: italic;
	}
	#tpl_content > .speaker-view-articles {
		margin-top: 10px;
	}


/* ARTICLE */
.article-view {
	background: #eeebeb;
	padding: 0 0 3.5% 0;
}
	.article-view-info {
		background: #fff;
		padding: 0 3% 1.5% 3%;
		font-size: 80%;
		font-family: 'VIVN', sans-serif;
		font-weight: bold;
		font-style: italic;
		color: #262959;
	}
	@media screen and (max-width: 800px) {
		.article-view-info {
			padding: 3%;
			font-size: 70%;
		}
	}
	@media screen and (max-width: 600px) {
		.article-view-info {
			font-size: 60%;
		}
	}
	.article-view-info.video-view-info {
		color: #e64526;
	}
		.article-view-info-speaker {
			float: left;
			display: block;
		}
		a.article-view-info-speaker {
			color: inherit;
		}
		.article-view-info a.article-view-info-speaker:hover {
			color: #e64526;
		}
		.article-view-info.video-view-info a.article-view-info-speaker:hover {
			color: #262959;
		}
		.article-view-info-speaker:before {
			font-size: 24px;
			line-height: inherit;
			display: inline-block;
			vertical-align: top;
			margin: 0 7px 0 0;
		}
		@media screen and (max-width: 800px) {
			.article-view-info-speaker:before {
				font-size: 20px;
				font-size: 2.5vw;
			}
		}
		@media screen and (max-width: 600px) {
			.article-view-info-speaker:before {
				font-size: 14px;
				font-size: 2.33333333vw;
			}
		}
		.article-view-info-date {
			float: right;
		}
	.article-view-picture {
		padding: 1.5% 6% 0 6%;
	}
	@media screen and (max-width: 800px) {
		.article-view-picture {
			padding-top: 3%;
		}
	}
		.article-view-picture > img {
			display: inline-block;
			vertical-align: top;
			width: 100%;
		}
		.article-view-picture > div {
			width: 100%;
			height: 0;
			padding: 57% 0 0 0;
			background-position: center;
			background-size: cover;
		}
			.article-view-picture > div > img {
				display: none;
			}
	.article-view-video {
		padding: 1.5% 6% 0 6%;
	}
		.article-view-video-iframe {
			position: relative;
			z-index: 1;
			width: 100%;
			height: 0;
			padding: 56.25% 0 0 0; /* 16:9 */
			padding: 52.50% 0 0 0; /* 21:9 */
		}
			.article-view-video-iframe iframe {
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				min-width: 100%;
				max-width: 100%;
				height: 100%;
				min-height: 100%;
				max-height: 100%;
			}
	.article-view-content {
		padding: 3% 12% 0 12%;
	}
	@media screen and (max-width: 800px) {
		.article-view-content {
			padding-top: 6%;
		}
	}
	@media screen and (max-width: 600px) {
		.article-view-content {
			padding: 6% 6% 0 6%;
		}
	}
	.article-view-socialmedia {
		padding: 1.5% 12% 0 12%;
	}
	@media screen and (max-width: 800px) {
		.article-view-socialmedia {
			padding-top: 3%;
		}
	}
	@media screen and (max-width: 600px) {
		.article-view-socialmedia {
			padding: 3% 6% 0 6%;
		}
	}
		.article-view-socialmedia ul,
		.article-view-socialmedia li {
			display: block;
			margin: 0;
			padding: 0;
			list-style: none;
			float: left;
		}
		.article-view-socialmedia ul {
			float: right;
		}
		html .article-view-socialmedia a,
		html .article-view-socialmedia a.addthis_button_twitter,
		html .article-view-socialmedia a.addthis_button_facebook,
		html .article-view-socialmedia a.addthis_button_linkedin {
			display: block;
			line-height: 26px;
			width: 26px;
			height: 26px;
			overflow: hidden;
			text-align: center;
			color: #fff;
			background: #262959;
			margin: 0 0 0 5px;
		}
		html .article-view-socialmedia.video-view-socialmedia a,
		html .article-view-socialmedia.video-view-socialmedia a.addthis_button_twitter,
		html .article-view-socialmedia.video-view-socialmedia a.addthis_button_facebook,
		html .article-view-socialmedia.video-view-socialmedia a.addthis_button_linkedin {
			background-color: #e64526;
		}
		html .article-view-socialmedia a:hover,
		html .article-view-socialmedia a.addthis_button_twitter:hover,
		html .article-view-socialmedia a.addthis_button_facebook:hover,
		html .article-view-socialmedia a.addthis_button_linkedin:hover {
			background-color: #e64526;
		}
		html .article-view-socialmedia.video-view-socialmedia a:hover,
		html .article-view-socialmedia.video-view-socialmedia a.addthis_button_twitter:hover,
		html .article-view-socialmedia.video-view-socialmedia a.addthis_button_facebook:hover,
		html .article-view-socialmedia.video-view-socialmedia a.addthis_button_linkedin:hover {
			background-color: #262959;
		}
		html .article-view-socialmedia span {
			display: none;
		}
	.article-view-articles-head {
		color: #e64526;
		font-size: 80%;
		font-family: 'VIVN', sans-serif;
		font-weight: bold;
		font-style: italic;
	}
	#tpl_content > .article-view-articles {
		margin-top: 10px;
	}


/* PARAGRAPH */
.paragraph-quote-top {
	float: right;
	clear: right;
	width: 1px;
	height: 201px;
}
.paragraph-quote {
	float: right;
	clear: right;
	max-width: 240px;
	font-family: 'VIVN', sans-serif;
	font-size: 140%; 
	line-height: 120%;
	font-weight: bold;
	font-style: italic;
	padding: 60px 0 60px 72px;
	color: #262959;
}
@media screen and (max-width: 800px) {
	.paragraph-quote {
		max-width: none;
		width: 100%;
		padding: 48px 0 48px 25%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
}
@media screen and (max-width: 400px) {
	.paragraph-quote {
		padding: 24px 0 24px 20px;
	}
}
.paragraph-quote:before {
	content: open-quote '\00a0';
}
.paragraph-quote:after {
	content: '\00a0' close-quote;
}


/* FORM STYLES */
/* OVERRULES: web.forms.css */
#tpl_body button,
#tpl_body input[type="submit"] {
	font-family: 'VIVN', sans-serif;
    font-weight: bold;
    font-style: italic;
	font-size: 120%;
	color: #fff;
	background-color: #e64526;
}
#tpl_body button:hover,
#tpl_body input[type="submit"]:hover {
	background-color: #262959;
}


/* ATOOLTIP */
#aToolTip {
	position: fixed;
	display: none;
	z-index: 50000;
}
	#aToolTip .aToolTipContent {
		position: relative;
	}
.aToolTip {
	color: #fff;
	background: #000;
	border-top-color: #000;
	padding: 6px 12px;
	margin: -15px 0 0 -18px;
	-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.1);
	box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.1);
	white-space: nowrap;
}
.aToolTip p {
	margin: 0;
}
.aToolTip:after {
	pointer-events: none;
	position: absolute;
	z-index: 100;
	bottom: -15px;
	left: 7px;
	display: block;
	width: 0;
	height: 0;
	content: '';
	border: 8px solid transparent;
	border-top-color: inherit;
}


/* CORE */
.toolbar {
	position: absolute;
	top: 0;
	/*left: 20px;*/
	left: 0;
}
/*.toolbar-right {
	left: auto;
	right: 0;
}*/
.toolbar,
.toolbar * {
	line-height: 15px;
}
.clickable,
.clickable * {
	cursor: pointer;
}