/* EVENTR CSS 

	1. CORE CSS
	2. NAVBAR
	3. HIGHLIGHT 
	4. INFO 
	5. SPEAKERS
	6. PROGRAM
	7. DOWNLOAD
	8. VENUE
	9. FUNFACTS
	10. REGISTER
	11. GALLERY
	12. TESTIMONIAL
	13. SPONSORS
	14. FOOTER
	15. MISC.
 
 */
 
 

/* CORE CSS */

body {
	color:#666666;
	font-family:'Open Sans';
	font-size:14px;
	font-weight:400;
	line-height:23px;
}

h1, h2, h3, h4, h5, h6 {
	color:#262626;
}

h2 {
	color:#262626;
	margin-bottom:5px;
	font-weight: 300;
	font-size: 34px;
	font-style: normal;
	font-family:'Open Sans';
}

h3 {
	font-family:'montserratregular';
	font-size:28px;
	letter-spacing:-2px;
	color:#262626;
	line-height:28px;
}

h4 {
	font-family:'montserratregular';
	font-size:18px;
	letter-spacing:1px;
}

h5 {
	font-family:'montserratlight';
}

section {
	padding:90px 0;
}

.uppercase {
	text-transform:uppercase;
}

.no-padding {
	padding:0;
}

.mfp-bg {
	background:#ffffff;
}

.lead {
	color:#999999;
}

a {
	outline:none;
}

.owl-theme .owl-controls .owl-page span {
	background:#428bca;
}



header{background: #363b3f;
	color: #ccc;
	padding: 10px 0;
}
/* NAVBAR */

.navbar-custom {
	font-family:'Open sans';
	font-size:12px;
	font-weight:400;
	letter-spacing:1px;
	background: #fff;
	margin-bottom:0;
	border-radius:0;
	padding: 15px 0 10px 0;
	z-index:1041;
	color:#333333;
	width:100%;
	-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
  -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
  transition: background .5s ease-in-out,padding .5s ease-in-out;
}

.navbar-custom a {
	color:#333333;
}

.navbar-custom .navbar-nav > li > a:hover {
	color:#428bca;
	background:transparent;
}

.navbar-custom .navbar-nav > li > a:active,
.navbar-custom .navbar-nav > li > a:focus {
	color:#428bca;
	background:transparent;
}

.navbar-custom .icon-bar {
	background:#428bca;
}

.sticky-wrapper {
	position:absolute;
	width:100%;
}

.sticky-wrapper a {
	color:#ffffff;
}

.is-sticky .navbar-custom {
	width:100%;
	background:#fff;
	padding: 10px 0 0 0;
	-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
  	-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
	transition: background .5s ease-in-out,padding .5s ease-in-out;
}

.is-sticky a {
	color:#262626;
}


/* navbar effect */

.navbar-custom a {
	padding: 8px 0;
	color:#262626;
}

.navbar-custom .navbar-nav > li > a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 4px;
	background: rgba(0,0,0,0.1);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

.navbar-custom .navbar-nav > li > a:hover::after,
.navbar-custom .navbar-nav > li > a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}


/* HIGHLIGHT */

#highlight {
	padding:0px;
}

#highlight h2 {
	color:#fff;
	margin-bottom:5px;
	font-weight: 300;
	font-size: 34px;
	font-style: normal;
	font-family:'Open Sans';
}

#highlight #left {
	color:#b0b0b0;
	background:#363b3f;
	min-height:100px;
	border-bottom: 1px solid #fff;
}

#highlight #right {
	background:#428bca;
	min-height:100px;
	border-bottom: 1px solid #fff;
}

#right #countdown {
	margin:15px 0;
}

@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {

#highlight #left {
	background:none;
	text-align:center;
}

#highlight h2 {
	color:#262626;
}

#highlight #right {
	background:none;
}
	
}


/* INFO */

#info {
	padding:70px 0 90px 0;
}

#info i {
	color:#428bca;
	margin-bottom:10px;
}

.feature {
	margin:30px 0 0 0;
}


/* countdown */

#countdown {
	margin-top:0;
}

#countdown .countdown_amount {
	color:#666666;
	font-family:'montserratregular';
	font-size:40px;
	text-align:left;
	line-height:50px;
	text-align:center;
}

#countdown .countdown_section {
	color:#262626;
	font-family:'montserratbold';
	font-size:13px;
	text-align:left;
	line-height:10px;
	letter-spacing:0;
	text-align:center;
}


/* SPEAKER */

#speakers {
	background:#f5f5f5;
	border-top:1px solid #f0f0f0;
	padding:100px 0 110px 0;
}

.speaker {
	margin-bottom:30px;
	background:#ffffff;
}

.speaker .caption {
	padding:10px;
}

.speaker h4 {
	font-family:'montserratregular';
	font-size:16px;
	letter-spacing:1px;
	margin-bottom:0;
}

.speaker h4:after {
	content: "";
  	display: block;
  	width: 40px;
  	height: 2px;
	margin:0 auto;
 	background-color: #428bca;
 	margin-top: 10px;
  	margin-bottom: 5px;
}

.speaker .company {
	color:#999999;
	font-family:'Open sans';
	font-size:10px;
	letter-spacing:2px;
	text-transform:uppercase;
	margin:0;
}

#speakers .owl-buttons {
	position: absolute;
	font-size: 10px;
	right: 0;
}

#list-speaker li{
	display:none; 
}

/* speaker detail */

#speaker-detail {
	background:#ffffff;
	box-shadow: 0px 3px 5px rgba(0,0,0,.1);
}

#speaker-detail h2 {
	color:#fff;
	margin-bottom:5px;
	font-weight: 300;
	font-size: 34px;
	font-style: normal;
	font-family:'Open Sans';
}

#speakers h2 {
	color:#262626;
	margin-bottom:5px;
	font-weight: 300;
	font-size: 34px;
	font-style: normal;
	font-family:'Open Sans';
}

#speaker-detail h2 span {
}

#speaker-detail img {
	width:100%;
	height:auto;
}

#speaker-detail .lead {
	margin-bottom:10px;
}

#speaker-detail .social{
	margin-bottom:10px;
}

#speaker-detail .social li{
	padding-left:1px;
}

#speaker-detail .social li:first-child{
	padding-left:5px;
}

#speaker-detail .social a {
	opacity:0.8;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
			transition: all 0.3s;
}

#speaker-detail .social a:hover {
	opacity:1;
}

#speaker-detail .social a .fa-facebook-square{
	color:#3b5998;
}

#speaker-detail .social a .fa-twitter-square{
	color:#00aced;
}

#speaker-detail .social a .fa-linkedin-square{
	color:#007bb6;
}

#speaker-detail .social a .fa-google-plus-square{
	color:#dd4b39;
}

#speaker-detail .mfp-close {
	color:#ffffff;
	background:#262626;
	opacity:1;
}

#speaker-detail li {
	padding-right:1px;
}

#speaker-detail #content {
	height:230px;
	margin-bottom:15px;
} 


/* PROGRAM */

#program {
	color:#ffffff;
	background:#428bca;
	padding:70px 0 90px 0;
}

#program h4 {
	font-size:17px;
	letter-spacing:0;
}

#program .lead {
	color:#ffffff;
}

#program img {
	border:2px solid #ffffff;
}

#program .nav-tabs {
	border-bottom:1px solid #ffffff;
	margin-bottom:20px;
	font-size:19px;
}

#program .nav-tabs > li > a {
	color: #ffffff;
	padding:10px 100px 10px 0;
	background: none;
	border:none;
	cursor: default;
}

#program .nav-tabs > li.active > a {
	color: #262626;
	padding:10px 50px 10px 0;
	border-bottom:4px solid #ffffff;
	padding:10px 100px 10px 0;
}

#program .nav-tabs > li > a:hover,
#program .nav-tabs > li.active > a:hover {
	color: #262626;
}

#program .panel {
	background:transparent;
}

#program .panel-body {
	border-top:1px solid #ffffff;
	padding:20px 0;
}

#program .panel-default {
	border:none;
	border-bottom:1px solid #ffffff;
	border-radius:0px;
}

#program .panel-default > .panel-heading {
	color: #333333;
	background:transparent;
	border-color: #ffffff;
	padding:10px 0;
}

#program .panel-title {
	float:left;
}

#program .panel-title > a {
	color: #262626;
	text-decoration:none;
	-webkit-transition: all 0.1s;
	   -moz-transition: all 0.1s;
	        transition: all 0.1s;
}

#program .panel-title > a:hover {
	color: #ffffff;
}

#program .date {
	color:#000;
	font-family:'montserratregular';
	margin-bottom:0;
	font-size:17px;
	line-height:18px;
}

#program .speaker-name {
	
	font-family:'montserratregular';
	font-size:12px;
	letter-spacing:1px;
}

#program .panel-body h4 {
	color:#666666;
	font-size:21px;
}

#program .panel-body p {
	margin-right:10px;
	display:inline-block;
}

#program .panel-body p span {
	color:#666666;
	display:inherit;
}

#program .about-speaker i{
	color:#262626;
}

#program .about-speaker a{
	color:#262626;
	text-decoration:none;
}

#program .about-speaker a:hover{
	color:#000000;
	text-decoration:none;
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

#myTab li {
	width:100%;
}

#program .panel-title {
	display:block;
	float:none;
}

#program .speaker-name {
	text-align:center;
	margin-top:20px;
}

}


/* DOWNLOAD */

#download {
	padding:90px 0 110px 0;
}

#download h3:after {
	content: "";
  	display: block;
  	width: 120px;
  	height: 3px;
 	background-color: #428bca;
 	margin-top: 12px;
  	margin-bottom: 15px;
}


/* VENUE */

#venue {
	padding-top:0;
}

#venue .venue {
	display:table;
	width:100%;
}

#venue .venue .venue-inner {
	background:#363b3f;
	display:table-cell;
	vertical-align:middle;
	padding: 100px 0;
	
}

#venue .venue .venue-inner p{
	color: #CCCCCC
	
}

.venue-inner h2 {
	color:#ffffff;
	margin-top:0;
}

#venue h2:after {
	content: "";
  	display: block;
  	width: 60px;
  	height: 3px;
 	background-color: #428bca;
 	margin-top: 12px;
  	margin-bottom: 15px;
}

#venue h3 {
	margin-top:10px;
}

#venue h3:after {
	content: "";
  	display: block;
  	width: 60px;
  	height: 3px;
 	background-color: #428bca;
 	margin-top: 12px;
  	margin-bottom: 15px;
}

.venue-inner h4 {
	color:#ffffff;
}

#venue i {
	color:#428bca;
}

.venue-inner .lead {
	color:#b0b0b0;
}

.venue-info {
	margin-bottom:45px;
}

.hotel-carousel {
	margin-top:20px;
	margin-bottom:70px;
}

#hotel-carousel .item {
	margin:0 7px;
}

.hotel .caption {
	position:relative;
	padding:10px 0 0 0;
	line-height:19px;
}

.hotel .caption h5 {
	font-family:'montserratlight';
}

.hotel .caption .rating {
	position:absolute;
	top:0;
	right:0;
	padding:17px 0 0 0;
}


/* FUNFACTS */

#funfacts  {
	position:relative;
	margin: 0 auto;
}

.funfacts-inner {
	position:absolute;
	width:100%;
	height:100%;
}

#funfacts .item {
	margin:20px 0 0 0;
}

#funfacts i {
	float:left;
	border-right:1px solid #ffffff;
	padding:20px 20px 20px 0;
}

#funfacts .desc {
}

#funfacts .numbers {
	font-size:40px;
	font-weight:400;
	margin-top:15px;
	margin-bottom:0;
	line-height:1;
	color: #428bca;
}

#funfacts .description {
	font-size:12px;
	font-weight:300;
	letter-spacing:2px;
}


/* REGISTER */

#register {
	background:#f5f5f5;
	border-bottom:1px solid #f0f0f0;
	padding:70px 0 90px 0;
}

#price-carousel {
	margin:20px 0 40px 0;
}

.price-table {
	color:#ffffff;
	background:#428bca;
	padding:20px;
	line-height:1;
	font-weight:300;
	position:relative;
	overflow:hidden;
}

.early-bird {
	background:#428bca;
}

.standart {
	background:#fcba00;
}

.vip {
	background:#f0b202;
}

.price-table .icon {
	color:rgba(255,255,255, 0.4);
	position:absolute;
	bottom:-50px;
	right:-50px;
	display:block;
	font-size:40px;	
}

.price-table .price {
	color:#444444;
	font-family:'montserratbold';
	font-size:50px;
	font-weight:400;
}

.price-table h3 {
	color:#ffffff;
	background:#262626;
	font-family:Open Sans;
	font-weight:400;
	font-size:10px;
	letter-spacing:2px;
	border-radius:30px;
	text-transform:uppercase;
	padding:0px 16px;
	margin:0 0 10px 0;
	display:inline-block;
	float:right;
}

.price-table .desc li {
	font-family:'montserratlight';
	line-height:2;
	border-bottom:1px dotted;
	border-color:rgba(255,255,255, 0.7);
}

.price-table .desc li:last-child {
	border-bottom:none;
}

/* register form */

#register-form {
	padding:25px;
	background:#ffffff;
}

#register-form h2 {
	margin-bottom:15px;
}

.register-form {
	margin-top:20px;
}


/* GALLERY */

#gallery {
	padding:70px 0 90px 0;
}

#timeline .item {
	margin:10px 10px 20px 10px;
}


/* TESTIMONIAL */

#testimonial {
	background:#428bca;
	background-image: url(../img/bg-testimonial.png);
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-position: center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	color:#ffffff;
	padding:0;
}

#testimonial .testimonial-inner {
	background:rgba(0, 0, 0, 0.7);  
	padding:50px 40px 30px 40px;
	min-height:400px;
}

#testimonial-carousel img {
	border:2px solid #ffffff;
	margin:0 0 20px 0;
}

#testimonial .lead {
	color:#b0b0b0;
}

#testimonial .name {
	color:#ffffff;
	font-family:'montserratbold';
	font-size:12px;
	letter-spacing:2px;
	text-transform:uppercase;
}

#testimonial .owl-theme .owl-controls {
  text-align: left;
}


/* SPONSORS */

#sponsors {
	margin:0;
}
#sponsors2 {
	margin:30px 0;
	padding:70px 0 90px 0;
}



.sponsor {
	border:1px solid #428bca;
	margin:0 5px;
	padding:10px;
	text-align:center;
}

#sponsors-carousel:first-child {
	margin-left:0;
}

#sponsors-carousel:last-child {
	margin-right:0;
} 

#sponsors i {
	color:#428bca;
}


/* CONTACT */

#gmap_canvas {
	height:220px;
	transform:none !important;
	-webkit-transform:none !important;
	-moz-transform:none !important;
	-o-transform:none !important;
	-ms-transform:none !important;
	border-top:1px solid #f2f2f2;
}

.gmnoprint,
.gm-style-cc {
	display:none;
}

footer {
	color:#b0b0b0;
	background:#363b3f;
	padding:70px 0;
}


footer .clearfix{
	clear: both;
	border-bottom: 1px dotted #ccc;
	padding: 0 0 9px 0;
	margin: 0 15px 20px 15px;
	margin: 0 15px 20px 15px;
}

footer h4 {
	color:#ffffff;
}

footer h4:after {
	content: "";
  	display: block;
  	width: 60px;
  	height: 3px;
 	background-color: #428bca;
 	margin-top: 12px;
  	margin-bottom: 15px;
}

footer ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

footer li  {
	list-style: none;
	margin: 0 0 20px 0;
	padding: 0
}
footer ul li h4 {
	font-weight: 300;
	font-size: 14px;
	font-style: normal;
	
}
footer ul li a:hover {
}

footer .button-big {
	font-size:16px;
	width:100%;
}

footer dt {
	color:#ffffff;
	font-family:'montserratlight';
	font-size:13px;
	margin-top:7px;
	margin-bottom:3px;
	cursor:pointer;
}

/* Subfooter */

.subfooter {
	color:#ececee;
	font-size:10px;
	letter-spacing:1px;
	background:#000000;
	padding:20px 0;
}

.subfooter ul {
	margin-bottom:0;
}

.subfooter li a {
	color:#ececee;
}

.subfooter li a:hover {
	color:#ffffff;
	text-decoration:none;
}

/* Newsletter */

#newsletter {
	color:#262626;
	background:#ebe8e8;
	margin-bottom:0;
}


/* MISC. */

/* FORM ELEMENTS */

input[type="text"],
input[type="email"],
select,
textarea {
	font-size:16px;
	font-family:inherit;
	width:100%;
	min-height:30px;
	padding:12px 10px;
	text-transform:uppercase;
	border:0;
	border:1px solid #999999;
	margin-bottom:20px;
	outline:none;
} 


/* BUTTONS */

.button {
	font-family:'montserratregular';
	font-size: 17px;
	text-transform: uppercase;
	border: none;
	padding: 5px 15px;
	display: inline-block;
	position: relative;
	outline: none;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
			transition: all 0.3s;
}

.button:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	        transition: all 0.3s;
}

.button-xsmall {
	padding:2px 7px;
	font-size:11px;
	letter-spacing:1px;
}

.button-small {
	padding:5px 30px;
	font-size:13px;
	letter-spacing:1px;
}

.button-big {
	padding:10px 18px;
	font-size:21px;
}

.button-line-light {
	color:#ffffff;
	background:transparent;
	border:2px solid #ffffff;
}

.button-line-light:hover,
.button-line-light:active {
	color: #262626;
	background: #ffffff;
	text-decoration:none;
}

.button-line-dark {
	color:#262626;
	background:transparent;
	border:2px solid #262626;
}

.button-line-dark:hover,
.button-line-dark:active {
	color: #ffffff;
	background: #262626;
	text-decoration:none;
}


/* PRELOAD */

#preload {
	background:#428bca;
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%; 
	z-index: 9999;
	display:table;
}

#preload .preload {
	display:table-cell;
  	vertical-align:middle;
}

.spinner {
  width: 30px;
  height: 30px;
  background-color: #fff;
  
  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}


/* OWL CAROUSEL */

.owl-theme .owl-controls .owl-buttons div {
	color: #428bca;
	margin:0;
	padding: 1px;
	font-size: 12px;
	background: transparent;
	filter: Alpha(Opacity=50);
	opacity: 0.5;
}

/* GALLERY IMG OVERLAY EFFCET */

.wrap {
	display: block;
	overflow: hidden;
	position: relative;
}

.wrap .overlay:after {
	background: none repeat scroll 0 0 rgba(250, 196, 43, 0.7);
	height: 100%;
	content:"";
	display: block;
	left: 0;
	opacity: 0;
	position: absolute;
	top: -100%;
	-webkit-transition: all 0.6s ease 0s;
	-moz-transition: all 0.6s ease 0s;
	-ms-transition: all 0.6s ease 0s;
	-o-transition: all 0.6s ease 0s;
	transition: all 0.6s ease 0s;
	width: 100%;
}
	
.wrap:hover .overlay:after {
	top: 50%;
	opacity: 1;
}

.wrap .overlay:before {
	background: none repeat scroll 0 0 rgba(250, 196, 43, 0.7);
	bottom: -100%; 
	height: 100%;
	content:"";
	display: block;
	left: 0;
	opacity: 0;
	position: absolute;
	-webkit-transition: all 0.6s ease 0s;
	-moz-transition: all 0.6s ease 0s;
	-ms-transition: all 0.6s ease 0s;
	-o-transition: all 0.6s ease 0s;
	transition: all 0.6s ease 0s;
	width: 100%;
}

.wrap:hover .overlay:before {
	bottom: 50%;
	opacity: 1;
}

.wrap .icon {
	color:#ffffff;
	visibility: hidden;
	margin: 0;
	opacity: 0;
	position: absolute;
	text-align: center;
	width: 100%;
	top: 50%;
	margin-top: -20px;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
	
.wrap:hover .icon {
	opacity: 1;
	visibility: visible;
}

.wrap .icon a {
	color:#ffffff;
}

.wrap .icon a:hover {
	color:#333333;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}

/* Speaker hover effect */

/* Common style */
.speaker figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin-bottom: 20px;
	width: 100%;
	height: auto;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.speaker figure img {
	position: relative;
	display: block;
	height: auto;
	max-width: 100%;
	opacity: 0.8;
}

.speaker figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.speaker figure figcaption::before,
.speaker figure figcaption::after {
	pointer-events: none;
}

.speaker figure figcaption,
.speaker figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.speaker figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
	outline:none;
}

/*---------------*/
/***** Ming *****/
/*---------------*/

figure.effect-ming {
	background: #030c17;
}

figure.effect-ming img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-ming figcaption::before {
	position: absolute;
	top: 15px;
	right: 15px;
	bottom: 15px;
	left: 15px;
	border: 1px solid #fff;
	box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.4,1.4,1);
	transform: scale3d(1.4,1.4,1);
}

figure.effect-ming span img {
	padding: 4em 0;
	opacity: 0;
	margin:0 auto;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.5);
	transform: scale(1.5); 
}

figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover span img {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-ming:hover figcaption {
	background-color: rgba(58,52,42,0);
}

figure.effect-ming:hover img {
	opacity: 0.4;
}



.custom-select {
  position: relative;
	margin: 0 0 0 -15px;
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color: #428bca;
	
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 5px 15px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #428bca;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99999;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}




table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
}

table caption {
  margin: .5em 0;
}

table tr {
  background-color: #fff;
  padding: .35em .20em;
}
table thead tr{
    margin: 1px;
	border-bottom: 1px solid #fff;
    padding: 0;
  }

table td {
  padding: .5em;
  text-align: center;
}



table th {
	padding: .625em;
  text-align: center;
	background: #428bca;
	color: #fff;
}

tr:nth-child(even) {background-color: #f2f2f2;}
@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}

.pdf{margin: -10px 0 0 0; text-decoration: none}
.bookmark{
  background: #428bca;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#428bca), color-stop(100%,#31699a));
  background-image: -webkit-linear-gradient(top, #428bca 0%, #31699a 100%);
  background-image: -moz-linear-gradient(top, #428bca 0%, #31699a 100%);
  background-image: -o-linear-gradient(top, #428bca 0%, #31699a 100%);
  background-image: -ms-linear-gradient(top, #428bca 0%, #428bca 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#428bca', endColorstr='#31699a',GradientType=0 );
  background-image: linear-gradient(top, #428bca 0%, #31699a 100%);
  text-align: center;
	padding: 5px 0 0 0;
	color: #fff;
  height:80px;
  position:absolute;top:-105px;left:10px;
  width:40px;
	z-index: 99;
}

.bookmark:after{content:'';display:block;border:20px solid transparent;border-bottom-color:#fff;position:absolute;bottom:0;}


.bookmark2{
  background: #428bca;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#428bca), color-stop(100%,#31699a));
  background-image: -webkit-linear-gradient(top, #428bca 0%, #31699a 100%);
  background-image: -moz-linear-gradient(top, #428bca 0%, #31699a 100%);
  background-image: -o-linear-gradient(top, #428bca 0%, #31699a 100%);
  background-image: -ms-linear-gradient(top, #428bca 0%, #428bca 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#428bca', endColorstr='#31699a',GradientType=0 );
  background-image: linear-gradient(top, #428bca 0%, #31699a 100%);
  text-align: center;
	padding: 5px 0 0 0;
	color: #fff;
  height:80px;
  position:absolute;top:-130px;right:10px;
  width:40px;
	z-index: 99;
}
.bookmark2:after{content:'';display:block;border:20px solid transparent;border-bottom-color:#fff;position:absolute;bottom:0;}

.bookmark3{
  background: #428bca;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#fff));
  background-image: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
  background-image: -moz-linear-gradient(top, #fff 0%, #fff 100%);
  background-image: -o-linear-gradient(top, #fff 0%, #fff 100%);
  background-image: -ms-linear-gradient(top, #fff 0%, #fff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#fff',GradientType=0 );
  background-image: linear-gradient(top, #fff 0%, #fff 100%);
  text-align: center;
	padding: 5px 0 0 0;
	color: ##428bca;
  height:80px;
  position:absolute;top:-100px;left:10px;
  width:40px;
	z-index: 99;
}
.bookmark3:after{content:'';display:block;border:20px solid transparent;border-bottom-color:#428bca;position:absolute;bottom:0;}


.bookmark4{
  background: #428bca;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#428bca), color-stop(100%,#31699a));
  background-image: -webkit-linear-gradient(top, #428bca 0%, #31699a 100%);
  background-image: -moz-linear-gradient(top, #428bca 0%, #31699a 100%);
  background-image: -o-linear-gradient(top, #428bca 0%, #31699a 100%);
  background-image: -ms-linear-gradient(top, #428bca 0%, #428bca 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#428bca', endColorstr='#31699a',GradientType=0 );
  background-image: linear-gradient(top, #428bca 0%, #31699a 100%);
  text-align: center;
	padding: 5px 0 0 0;
	color: #fff;
  height:80px;
  position:absolute;top:-130px;right:10px;
  width:40px;
	z-index: 99;
}
.bookmark4:after{content:'';display:block;border:20px solid transparent;border-bottom-color:#363b3f;position:absolute;bottom:0;}


.bookmark5{
  background: #428bca;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#428bca), color-stop(100%,#31699a));
  background-image: -webkit-linear-gradient(top, #428bca 0%, #31699a 100%);
  background-image: -moz-linear-gradient(top, #428bca 0%, #31699a 100%);
  background-image: -o-linear-gradient(top, #428bca 0%, #31699a 100%);
  background-image: -ms-linear-gradient(top, #428bca 0%, #428bca 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#428bca', endColorstr='#31699a',GradientType=0 );
  background-image: linear-gradient(top, #428bca 0%, #31699a 100%);
  text-align: center;
	padding: 5px 0 0 0;
	color: #fff;
  height:80px;
  position:absolute;top:-120px;left:10px;
  width:40px;
	z-index: 99;
}

.bookmark5:after{content:'';display:block;border:20px solid transparent;border-bottom-color:#fff;position:absolute;bottom:0;}



.title-slide{color: #428bca; font-family: Times}




     HTML CSS 

    Result 

EDIT ON

/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

.boxred{padding: 20px; border: 1px dashed #f00; display: block; width: 50%; margin: 0 auto}