* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body{
	margin:0px;
	padding:0px;
	font-family:'Nunito Sans', Verdana, sans-serif;			
	font-weight:normal;
	color:#111111;
	font-size:16px;
	line-height:1.5em;
}
	
#s4-workspace {   
	margin:0px;
	padding:0px;
}

#s4-bodyContainer{
	background:#333;
	width:100%;
	height:100%
}

#s4-page{
	background:#ffffff !important;	
	width:100%;
	height:auto;
	margin:0px;
	padding:0px;
}

.print-header{
	display:none
}

section{
	padding:0px;
	width:100%
}

.position-center{
	width:100%;
    position:absolute;
  	top:50%;
  	transform:translateY(-50%);
    margin: auto;
    z-index:30
}

.position-quarter{
	width:100%;
	position:relative;
  	top:20%;
  	transform:translateY(-50%);
  	margin-left:auto;
  	marign-right:auto;
    z-index:30
}


.anchor{
	position:absolute; 
	bottom:0px;
	padding:50px 0px
}

.border{
	border:3px solid #e6e6e6
}

no-border{
	border:0px !important
}

.pad1x {
	padding:20px 0px
}

.pad1x-all{
	padding:20px;
}

.pad2x{
	padding:40px 0px
}

.pad2x-all{
	padding:40px
}

.pad3x{
	padding:60px 0px
}

.pad3x-all{
	padding:60px
}

.pad4x{
	padding:80px 0px
}


.pad4x-top{
	padding:80px 0 0 0;
}

.padding-bottom{
	padding-bottom:50px
}

.no-margin{
	margin:0px !important}
	
.no-pad{
	padding:0px !important}

.white-bar{
	background:	#ffffff;
	width:100%;}
.gray-bar {
	background:	#f2f2f2;
	width:100%;}

.button {
	width:auto;
	font-family: 'Nunito Sans', Verdana, sans-serif;
    font-size: .95rem
}
	
.white{
	color:#ffffff!important
}

.orange{
	color:#f79738!important}

.green{
	color:#92c437!important}

.blue {
	color:#1e646e!important}

.gray {
	color:#616161!important}
	
.teal {
	color:#26808c!important
}

.yellow{color:#ffd83b!important
}

.lime{
	color:#b9c635!important
}
	
.light-gray{
	color:#d0d0d0!important}
	
.gray{
	color:#7a7a7a!important}
	
.dark-gray{
	color:#111111!important;
}
	
.white{
	color:#ffffff!important;}

.bg-gray{
	background:#a3a29b!important;}
	
.bg-gray-light{
	background:#f2f2f2!important;}

.bg-orange{
	background:#f68820!important;}

.bg-green {	background:#8bc640!important;}

.bg-green-dark {background:#136630!important;}

.bg-green-light {background:#b8c635!important;}

.bg-purple {
	background-color: #8e87bd!important;}

.bg-blue {
	background-color: #32C1CE!important;}
	
.bg-teal{
	background-color:#26808c!important;}
	
.bg-teal-dark{
	background-color:#1e646e!important;}

	
.bg-white{
	background-color:#FFFFFF!important;
}

.bg-yellow{
	background-color:#ffd83b!important;
}

.bg-teal-gradient{
	background: rgba(38,128,140,1);
	background: linear-gradient(90deg, rgba(38,128,140,1) 0%, rgba(38,128,140,1) 40%, rgba(38,128,140,0) 40%, rgba(186,146,46,0) 100%);
	padding:0px;
	width:auto;
}

.bg-teal-gradient .btn.fill-reverse{
	margin:0px !important;
}

.bg-teal-gradient .h3{
	margin:10px 20px 0px 20px;
	position:relative;
	top:5px
}

.bg-teal-gradient .btn.fill-reverse{
	line-height:1.7rem;
	border-radius:40px;
	
}

.left{
	float:left!important;
}
.right{
	float:right!important;
}
.clear{
	clear:both
}


.lowercase{
	text-transform:none!important
}
.show-for-mobile{
	display:none!important
}

.show-for-desktop{
	display:block !important
}
	
.callout{
	padding:1.5rem 1.2rem;
	background:#f5f5f5;
	border:1px solid rgba(10, 10, 10, 0.05)
}

/*Typography*/
a{
	text-decoration:none !important}
	
.link{   
	font-size: .9rem;
    line-height: 1.2rem;
}

.link-line-to-left{
	display: inline-block;
	padding-left: 65px;
	position: relative;
	transition: .708s ease-out;
	margin-top:20px
}
	
.link-line-to-left:before{
	transition: .2s ease-out .108s;
    content: '';
    display: inline-block;
    width: 50px;
    height: 1px;
    background-color:#85bd1f;
    position: absolute;
    top: 50%;
    left: 0;
}

.link-line-to-left:after{
	transition: .6s ease-out;
    content: '';
    display: inline-block;
  	width: 0;
	height: 1px;
	position: absolute;
	top: 50%;
	right: 0;
}

.link-line-to-left:hover{
	padding-left: 0;
    padding-right: 65px;
    color:#85bd1f;}
    
.link-line-to-left:hover:before{
	opacity:0
}

.link-line-to-left:hover:after{
	height: 1px;
	width:50px;
	background-color:#85bd1f;
	position: absolute;
	top: 50%;
}


div, dl, dt, dd, ul, ol, li, pre, form, p, blockquote, th, td, table{
	font-family:'Nunito Sans', Verdana, sans-serif;	
	font-size:.95rem;
	color: #111111;
	font-weight:normal;
	line-height: 1.2;
}

strong, .strong{
	font-weight:700;
}

em, i{
	font-weight:normal;
}

.barlow{
	font-family:'Barlow Condensed', Verdana, sans-serif;
}

h1, .h1{
	font-family: 'Barlow Condensed', sans-serif;	
	color:#f79738 /*#85bd1f*/;
	font-size:3rem;
	font-weight:600;
	line-height:1.1;
	margin-top:5px;
}

h2, .h2, .ms-rtestate-field h2, h2.ms-rteElement-H2{
	font-family: 'Barlow Condensed', sans-serif;
	color:#2a2a2a;
	font-size:2rem;	
	text-transform:uppercase;
	line-height:1.3em;
	font-weight:600;}

h3, .h3, .panel h3,.ms-rtestate-field h3, h3.ms-rteElement-H3{
	font-family: 'Barlow Condensed', sans-serif;	
	color:#1e646e;
	font-size:1.7rem;	
	margin-top:15px;
	font-weight:400;
	line-height:1.2
}

h4, .h4, .panel h4,.ms-rtestate-field h4, h4.ms-rteElement-H4, .panel h4{
	font-family: 'Barlow Condensed', Verdana, sans-serif;	color:#f28e28;
	font-size:1.3rem;	
	letter-spacing:.1px;
	font-weight:700;
	line-height:1.2;
}

h5, .h5,.ms-rtestate-field h5, h5.ms-rteElement-H5 {
	font-family:'Nunito Sans', Verdana, sans-serif;		
	font-size:1.2rem;
	color:#fff;
	margin:0px;
	line-height:1.3em;
	font-weight:600
}


h6, .h6 {
	font-family:'Nunito Sans', Verdana, sans-serif;	
	font-size:.95rem;
	color:#fff;
	margin:0px;
	line-height:1em;
	font-weight:600;
}

a:link,a:visited {
	color:#32c0c4
}

.uppercase{
	text-transform:uppercase!important
}

.text-shadow{
	text-shadow:1px 1px rgba(0,0,0,.4)
}

.callout:hover{
	opacity:.7
}
.top-banner{
	position: fixed;
	width: 100%;	
	z-index:100;
	top:0;
	background-color:transparent;
	max-height: 100%;
	height: auto;
	-webkit-transition: linear .3s;
	-moz-transition: linear .3s;
	-ms-transition: linear .3s;
	-o-transition: linear .3s;
	transition: linear .3s;
}

.info-above-menu{
	color:#222;
	padding:10px 0px 8px 0px;
	background:rgba(221,96,40,.9);
	margin-bottom:10px	
	/*border-bottom:2px solid rgba(255,255,255,.3)*/
}
	
.info-above-menu div, .info-above-menu a, .info-above-menu a:visited{
	color:#ffffff;
	font-size:1rem;
	font-family:'Nunito Sans', Verdana, sans-serif;	
	font-weight:600
}

.info-above-menu a:hover{
	color:#222
}

.menu-container{
	width:100%;
	position:relative;
	background-color:transparent;
	padding:5px 0px
}
	
.menu-container.scrolled{
	background-color:rgba(0,0,0,.8);
	-webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
    padding-top:0px;
    padding-bottom:0px
}

.mvlogo{
	width:68%}
	
.logo-small{
	width:80%;
	padding:5px
}

.menu-container.scrolled .logo-small{
	display:block
}

/*Navigation*/
ul.nav {
	list-style:none;
	width:100%;
	padding:0px;
	margin:0px 0px 0px 0px;
}
	
ul.nav li{
	font-family:'Nunito Sans', Verdana, sans-serif;	
	font-weight:600!important;
	display:inline;
	max-height:60px;
	text-align:center;
	font-size:1rem;
	margin:0px;
	font-weight:normal;
	letter-spacing:.5px;
	padding:0px 5px
	
}
	
ul.nav li{
	padding:0px 5px
}
	
ul.nav li:last-child{
	padding:0px 0px  0px 10px
}

ul.nav li a:link, ul.nav li a:visited{
	color:#ffffff;
	text-transform:uppercase;
	font-weight:700;
	text-shadow: 1px 1px 1px rgba(0,0,0,.9)

}

ul.nav li a:hover{
	color:#92c437;
	text-decoration:none
}
	
.slicknav_menu {
    display:none;
}

/*HOMEPAGE VIDEO BG*/

.fullsize-video-bg {
  position: relative;
  background-color: black;
  height:65vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
  background: url('http://www.zwc.ca/SiteAssets/video/ZWCbackground.jpg') center center / cover no-repeat;
}

.fullsize-video-bg  video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.fullsize-video-bg .hp-tagline {
  position: relative;
  z-index: 2;
  top:15vh
}

.fullsize-video-bg  .overlay {
  display:none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color:rgba(0,0,0,0);
}


.hp-banner{
	position:absolute;
	bottom:0px;
	background:rgba(0,0,0,.5);
	width:100%;
	padding:0px 0px 5px 0px}

.collaboration{
	position:absolute;
	bottom:50px;
	right:10px;
	text-align:right;
	float:right;
	width:90%;
	padding:10px;
	background:rgba(0,0,0,.1)
}

.collaboration img{
	width:175px;
	position:relative;
	top:0px
}

.collaboration img.metro{
	top:25px
}

.collaboration span{
	color:#ffffff;
	font-weight:600;
	position:relative;
}

div.days {   
	display:inline-block;
	width:100%;
	overflow:hidden;
	white-space:nowrap;
	opacity:0;
	font-family: 'Barlow Condensed', sans-serif;
	color: #d0d0d0;
	font-size: 2rem;
	text-transform: uppercase;
	line-height: 1em;
	text-align:center;
	text-shadow:2px 2px 2px rgba(70,70,70,.9)
}

div.confDate {
	display:inline-block;
	overflow:hidden;
	white-space:nowrap;
	width:0px;
	font-family: 'Barlow Condensed', sans-serif;
	color:#d0d0d0;
	font-size: 2.1rem;
	text-transform: uppercase;
	line-height: 1.3em;
}

div.days .fill-reverse.btn{
	text-shadow:2px 2px rgba(70,70,70,0)
}

.confDetail span {
 	margin-left:-1000px;
  	font-family: 'Barlow Condensed', sans-serif;
	color: #ffffff;
	font-size: 2rem;
	margin-top: 15px;
	font-weight: 400;
	line-height: 1.5;
	text-shadow:1px 2px rgba(0,0,0,.9)
}

.get-tickets {
	width:100%;
	font-family: 'Barlow Condensed'
}

.get-tickets .h3{
	font-size:2rem;
	text-shadow:1px 2px rgba(0,0,0,.9);
	margin-right:10px;
	color:#ffffff;
	font-family: 'Barlow Condensed'
}

.get-tickets .h3 span.days-to-go{
	font-weight:800;
	font-size:3rem;
	color:#ffffff;
}

.get-tickets .btn.fill-reverse{
	position:relative;
	top:-10px;
	font-family:"Barlow Condensed", sans-serif;
	font-size:1.5rem
}

.get-tickets .confDetail span{
	font-size:2.5rem
}


.hp-bottom-container{
	width:90%;
	margin-left:auto;
	margin-right:auto;
	background:rgba(0,0,0,.8)
}

.f-speakers{
	position:relative;
	top:15%;
	clear:both;
	background-color:rgba(0,0,0,.1);
	width:100%;
	float:right;
	z-index: 10;
	margin-top:0px;
	padding:20px}
	
	
.f-speakers h3{
	text-align:center;
	margin-top:0px
}

.f-speakers h5{
	text-align:right
}

.f-speakers p{
	font-size:.9rem
}


.f-item{
	width:40%;
	float:left;
	position:relative;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
	display:inline-block;
	left:40px	
}

.f-item{
	
}
.f-speakers img{
	width:100%;
	float:right
}

.f-item:nth-child(2){
	position:absolute;
	left:300px;
	top:-25px;
}

.speaker-slider{
	width:100%;
}


.hp-right .f-speakers{
	 width:75%;
	 margin-bottom:10px;
}


.speaker-item{
	position:relative;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
	display:inline-block;
	width:50%;
	float:left;
}

a.speaker-item .name{
	position:absolute;
	color:#ffffff;
	bottom:0px;
	width:100%;
	padding:0px 10px 15px 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background:rgba(0,0,0,.5);
}

a.speaker-item .name div {
	font-weight:600
}

a.speaker-item:nth-child(2){
	margin-top:20px;
	height:350px;
	background:transparent url('/HPFeaturedSpeakers/ShivvyJervis.jpg') no-repeat center center;
	background-size:cover;
}

a.speaker-item:nth-child(2) .name{
	text-align:right
}

a.speaker-item:nth-child(3){
	top:-200px;
	left:0px;
	height:350px;
	background:transparent url('/HPFeaturedSpeakers/GerdLeonhard.jpg') no-repeat center center;
	background-size:cover;
	z-index:20
}

a.speaker-item:nth-child(4){
	margin-top:20px;
	height:350px;
	background:transparent url('/HPFeaturedSpeakers/SheilaWattCloutier.jpg') no-repeat center center;
	background-size:cover;
	right:-20px
}

a.speaker-item:nth-child(5){
	top:-200px;
	left:20px;
	height:350px;
	background:transparent url('/HPFeaturedSpeakers/Billy-Almon.jpg') no-repeat center center;
	background-size:cover;
}

a.speaker-item:nth-child(6){
	margin-top:20px;
	height:350px;
	background:transparent url('/HPFeaturedSpeakers/Janez-Potocni.jpg') no-repeat center center;
	background-size:cover;
	right:-40px
}

a.speaker-item:nth-child(7){
	top:-200px;
	left:40px;
	height:350px;
	background:transparent url('') no-repeat center center;
	background-size:cover;
}

a.speaker-item:nth-child(8){
	top:20px;
	height:350px;
	background:transparent url('') no-repeat center center;
	background-size:cover;
	right:-60px
}

a.speaker-item:nth-child(9){
	top:-180px;
	left:60px;
	height:350px;
	background:transparent url('') no-repeat center center;
	background-size:cover;
}



/*HP Banner Featured*/
.banner-f-speakers{
	height:68vh;
	position:absolute;
	top: 50%;
    transform: translateY(-50%);
}


.f-speaker-item{	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
	float:right;
	width:100%;
	height:200px;
	margin-bottom:10px;
	position:relative!important;
}

.f-speaker-item:nth-child(2){	
	float:left;
}


a.f-speaker-item .name{
	position:absolute;
	bottom:0;
	left:0;
    color:#ffffff;
	width:100%;
	padding:5px 10px 5px 10px;
	display:inline-block;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background:rgba(0,0,0,.5);
	
}

a.f-speaker-item .name .link-line-to-left{
	margin-top:0px
}

.bg-section{
	background:transparent url('http://www.zwc.ca/ZWCBanners/Banner1.JPG')no-repeat center center;
}

.overlay{    
	height:inherit;
    position: relative; 
    width: 100%;
    z-index:30;
    background:rgba(0,0,0,.3)}

.supporters{
	text-align:center
}

.supporters h4{
	text-align:left;
	margin-bottom:20px;
	text-transform:uppercase;
}

    
.supporters img{
	width:87%
}

.parallax{
  background-color:#f2f2f2;
  background-image: url('http://www.zwc.ca/SiteAssets/img/squares-bg.png');
  min-height: 500px;
  background-attachment: fixed;
  background-position: center bottom;
  background-repeat: no-repeat;
   background-size: cover
  }

/*Main Page styles*/

.main-banner{
	width:100%;
}
.content-main{
	position:relative;
	top:-20px;
	padding-bottom:80px;}

.banner{
	width:100%;}

.banner img {
	width:100%;
	position:relative;
	z-index:2}

.banner-new{
	background:#ffffff url('/SiteAssets/img/bg-new.jpg') no-repeat center bottom; 
	background-size:cover;	
	margin-bottom:20px; 
	padding:120px 0px 60px 0px;}


.title-banner{
	width:100%;
	position:relative;
	top:-45px;
	z-index:10	}

.page-title{
	width:100%;
	padding:7px 0px;
	background: #e7e7e7;}


.circle-square{
	width:100%;
	margin-top:50px;
	clear:both;}

.zw-square {
	width:90%;
    padding-bottom:70%;
    overflow: hidden;
	position:absolute;
	bottom:5px;
	left:14px	}

.zw-circle{
	width:60%;
    height:0;
    padding-bottom: 60%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
	text-align:center;
	position:relative;
	top:0}

.zw-circle p{
	width:90%;
	height:10px;
	position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    line-height:1.1em;
    font-size:18px}

.register{
	width:100%;
	padding:20px 0px;
	position:relative;
	background:#32c0c4}

.register a.button{
	background:#e3e3e3;
	color:#333!important;}

.register a.button:hover {
    background: #d2d2d2;
    color:#333!important;}

/*TILES*/

.tile{
	background-color:transparent;
	vertical-align: bottom;
	text-align:left;
	width: 100%;
	margin-bottom: 10px;
	padding:50px 30px 40px 30px;}
	
.tile-grey {
	background-color: #616D76;
	vertical-align: bottom;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
	padding:30px;}

.tile-lg-grey {
	background-color: #9a9a9a;
	vertical-align: bottom;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
	padding:30px;}

	
.tile-purple {
	background-color: #8e87bd;
	vertical-align: bottom;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
	padding:30px;}

.tile-orange {
	background-color: #f68820;
	vertical-align: bottom;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
	padding:30px;}
	
.tile-green {
	background-color: #b8c635;
	vertical-align: bottom;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
	padding:30px;}

.tile-blue {
	background-color: #32C1CE;
	vertical-align: bottom;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
	padding: 30px;}

.tile-title {
	color: #ffffff;
	text-transform: uppercase;
	bottom: 0px;
	width: 100%;
	text-align: center;
	text-decoration: none;
	margin-bottom: 10px;
	font-size:1.2rem;
	line-height:1.1;}

.tile-title:hover {
	text-decoration: none;}

.session-block:hover {
	text-decoration:none !important;
	opacity:.85}
	
.session-block p{
	color:#ffffff;}

.tile-overlay {
	height:100%;
	width:100%; 
	background-color:rgba(0,0,0,.0);
	position:relative;
	transition: background-color 0.5s ease;}

a .tile-overlay:hover {
	background-color:rgba(0,0,0,.2);
	text-decoration:none}

	
.grid{
	width:33%;
	position:relative;
	display:inline-block;
	background-size:cover;
	float:left;
	padding:0px 10px;
}
	

.grid:hover {
	opacity:1;
    z-index:100}
	
.grid-content{	
	padding:20px 10px;
	width:100%;
	margin-bottom:10px;
	min-height:200px;
	position:relative}

.grid-text{
    position: absolute;
  	 left: 50%;
  	top: 50%;
  	transform: translate(-50%, -50%);
  	font-size:1rem;
  	color:#ffffff;
  	text-align:center;
	margin-left:auto;
	margin-right:auto;
	width:95%

}
  	
.grid-title {
    position:relative;
	top:70px;
	text-transform:uppercase;
	font-size:1.1rem;
	line-height:1.1;
	font-weight:500;
	margin-bottom:5px;
	color:#ffffff;
	transition: top 0.5s ease-in-out ;}

	
.grid-text p{
	color:#ffffff;
	position:relative;
	top:10px;
	opacity:0;
	transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;
    width:95%;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto}
    
.grid:hover {
	opacity:.8;}

.grid:hover .grid-title{
	top:0px}

.grid:hover .grid-text p{
	opacity:1;
	transform: translateY(0);}
	

.circle-clip{
	-webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
}


/*CONTENT SEARCH*/

.card {
	width:25%;
	float:left;
	padding:10px}
	
.speaker-list{
	width:100%;
	float:left;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	background-repeat:no-repeat;
	background-position:center center;
	min-height:220px;}

.speaker-overlay {
	height:100%;
	width:100%; 
	background-color:rgba(0,0,0,.1);
	position:relative;
	transition: background-color 0.5s ease;
    min-height:220px;}

a .speaker-overlay:hover {
	background-color:rgba(0,0,0,.6);
	text-decoration:none}


a .speaker-overlay h5{
	text-decoration:none}

.speaker-overlay h5 {
    position:absolute;
	bottom:0px;
    text-align:center;
    width:100%;
    line-height:1.1em;
    font-size:13px;
    margin-left:auto;
    margin-right:auto;
    padding:8px 5px 5px 5px;
    min-height:60px;
    background-color:rgba(0,0,0,.7);}

.speaker-overlay:hover h5 {
	color:#ddd;
	text-decoration:none !important}

.speaker-category{
	width:25%;
	float:left;
	background-color:#f4f4f4;
	text-align:center;
	position:relative;
	padding:10px;
	min-height:350px;}

.speaker-category h2{
	font-size:1.5em;
	width:100%;
    height:50px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	color:#333 !important;}

img.speaker-photo{
	width:100%;
	border:10px solid #eee;}

.speaker-name{
	font-size:1.6em;
	text-transform:uppercase;
	color:#333;}

.speaker-title, .speaker-title p{
	font-size:1.3em;
	font-weight:normal}

.divider{
	width:45%;
	margin-left:auto;
	margin-right:auto;
	margin-top:1px;
	height:2px;
	background:#d3d3d3}


.whats-new{
	padding:20px;
	background:#eee;
	margin-left:auto;
	margin-right:auto; 
	z-index:39}

/*FOOTER*/
.footer {
	width:100%;
	background:#333;
	padding:50px 0px 100px 0px;
	color:#fff;
	position:relative;
	z-index:50}

.footer i{
	color:#fff}

.footer p, .footer li, .footer a, .footer span  {
	color:#fff;
	font-size:.85rem !important}
	
.footer a:link, .footer a:visited{
	color:#ffffff !important}
	
.footer a:hover{
	color:#32c0c4 !important;}
	
img.mv-logo{
	width:80%;}

/* vertical align classes */
.spanOuter {
    text-align: center;
    position: relative;
    display: table;
    height : 250px; /* Determine the height of the box */
}

.spanMiddle {
    display: table-cell;
    text-align: center;
    vertical-align: middle;                     
}

/*BACK TO TOP*/

.back-top {
	display:none;
	background:transparent;
	text-align:center;
	position:fixed;
	bottom:10px;
	right:10px;
	z-index:200;	}

.back-top i {
	font-size:3em;
	color:/*#31b4b8*/#8780b5}


/*XXLARGE SCREEN*/
@media all and (min-width:1921px) {

.content-main{
	top:-100px;}

.f-speaker-item {
	width: 20vw;
	height: 21vh;
}

a.f-speaker-item .name{
	width: 20vw;
}


}
/*XLARGE SCREEN*/
@media all and (min-width:1442px) and (max-width:1921px) {

.content-main{
	top:-60px;}
	
.f-speaker-item {
	width: 30vw;
	height: 21vh;
}

.parallax{
  background-size: cover
}


}


/*MEDIUM SCREEN*/
@media all /*only screen and (min-width: 100px)*/ and (max-width:1025px) {

#s4-workspace{	
	overflow-y: scroll;
 	overflow-x: hidden;
 	-webkit-overflow-scrolling: touch;}
 	
/*.position-center{
	width:100%;
  	top:50%;}*/


.content-main{
	position:relative;
	top:0px;
	padding-bottom:80px
}

.hp-tagline{
	height:95vh
}

.hp-left{
	width:45%;
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
}

.hp-right{
	width:55%;
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
}

h1, .h1{
	font-size:2.8rem;}
	
h2, .h2{
	font-size:1.8rem;}

	
h3, .h3, .panel h3{
	font-size:1.5rem;}
	
.speaker-title, .speaker-title p{
	font-size:1.1rem}
	

	
.f-speakers h3{
	font-size:1.3rem
}

.f-speakers h5{
	font-size:1.1rem
}

.hp-logo{
	width:70%;}
	
.anchor{
	padding:20px 0px}

.speakers-padding{
	padding-top:50px;}

.logo-arrow{
    line-height:60px;}

.logo-arrow:after {
    top:60px; }

ul.nav {
	margin:5px 0px 0px 0px;
	padding:0px}

ul.nav li{
	font-size:1rem;
	padding:0px 5px;}

ul.nav li a:link{
	padding:0px 0px 0px 10px;}

ul.nav li a:link, ul.nav li a:visited{
	font-size:13px}

.twitter{
	padding:0px 0px}
	
.twitter a:link{
	color:#fff!important;
	font-size:13px;
	line-height:1em}
	

/* #menu is the original menu */
        
.slicknav_menu {
    display:none;}

.banner{
	height:200px;
	margin-bottom:20px}

.banner-new{
	padding:100px 0px 60px 0px;}

h1.hp-date{
	font-size:1.3rem;
	font-weight:bold}

h1.hp-text {
	font-size:28px;
	font-weight:bold}

.tagline{
	font-size:1.5rem;
	font-weight:bold;
	line-height:1.1;}

.tagline:nth-child(2){
	margin-left:90px}

.tagline:nth-child(3){
	margin-left:180px}

.card{
	width:33%}
	
.speaker-list{
	width:100%;}

.speaker-title-container{
	width:33%}

.whats-new div{
	font-size:16px;}}

.whats-new h3{
	font-size:20px}

img.speaker-print{
	display:none;}

.speaker-list-print{
	display:none;}

.featuring-photo{
	max-width:120px; 
	height:120px; 
	overflow:hidden; 
	border-radius:50%; 
	border:3px solid #fff; 
	float:right;}

.featuring-photo-small{
	max-width:120px; 
	height:120px; 
	overflow:hidden; 
	border-radius:50%; 
	border:3px solid #fff; 
	margin:0 auto;}

div.days {   
	font-size: 2rem;
}

.confDetail span{
	font-size:2rem
}

h3.date{
	bottom:10%;
	line-height:1.2
}

/*BETWEEN MEDIUM AND SMALL SCREEN*/
@media all /*only screen and (min-width: 100px)*/ and (max-width:950px) {
.fullsize-video-bg {
	height:50vh
}

.fullsize-video-bg .hp-tagline {
	top:13vh
}

.hp-left{
	width:43%
}

.hp-right{
	width:57%
}

.animated-logo{
	top:50%;
}

.pad1x-all{	
	padding:10px
}
	
h1, .h1{
	font-size:2.5rem;
	line-height:1.1
}


h4, .h4, .panel h4{
	font-size:1.1rem;	
}

.confDetail span{
	font-size:1.6rem
}

div.days {   
	font-size:1.5rem;
}

.f-speakers {
	width:100%;
	float:right;
	padding:10px
}

.f-speakers h3{
	font-size:1.3rem
}

.f-speakers h5{
	font-size:1.1rem
}

.f-speakers p{
	font-size:.9rem
}

.show-for-mobile{
	display:block !important
}

.show-for-desktop{
	display:none !important
}

.collaboration {
	bottom:50px
}

.collaboration span{
	font-size:.85rem
}
.collaboration img{
	width:150px;
	top:0px
}

.get-tickets .btn.fill-reverse{
	top:0px;}



.parallax{
  background-attachment:scroll;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: cover
}

.fullsize-video-bg {
  height:60vh;
  }
  
  .link {
    font-size: .8rem;
    line-height: 1.1rem;
}

}

@media screen and (min-width:900px) and (max-height:950px){

.pad1x-all{
	padding:10px;
}

.fullsize-video-bg {
  height:90vh;
}


.fullsize-video-bg .hp-tagline {
	height:100vh;
	top:18vh
}

.position-quarter{
  	top:10%;
}


.hp-tagline h1{
	margin-top:20px
}

h1, .h1{
	font-size:2.3rem
}

h2,.h2{
	font-size:1.8rem	
}

h6, .h6, .link{
	font-size:.8rem
}

.link{
	margin-top:10px
}


div.days {   
	font-size:1.5rem;
}

.title-container{
	top:43%
}

div.confDate{   
	font-size:1.8rem;
}

.confDetail span, .get-tickets .confDetail span{
	font-size:1.3rem;
	line-height:.9
}

h3.date{
	bottom:0%;
	font-size:1.4rem;	
}	

.content-hp{
	padding:30px 0px;
}

.get-tickets{
	font-size:1.2rem
}
	
.info-above-menu{
	padding:6px 0px 8px 0px;}

.mvlogo{
	width:60%}
    
.hp-logo{
	width:90%}

h1.hp-date{
	font-size:1.4rem;
	margin-bottom:15px}

.tagline{
	font-size:1.6rem}
	
.animated-logo{
	top:20%;
}

.animated-logo img{
	width:70%
}

.hp-right{
	top:25px;
	height:100vh
}

		
.f-speakers h3{
	font-size:1.5rem;
}

.f-speakers h5{
	font-size:1.1rem;
}


.hp-right .f-speakers{
	top:10%;
	width:50%;
	float:right;
}

.collaboration{
  	bottom:50px;
	text-align:right;
}	
.collaboration img{
	width:150px
}

.f-speaker-item{	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
	float:right;
	width:100%;
	height:180px;
	margin-bottom:0px;
	position:relative!important;
}


/*.f-speaker-item{	
	height:22vh;
	width:21vw;
	}

a.f-speaker-item .name{
	width:21vw;
}*/
	
}

/**  iPad with portrait orientation.*/

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
.fullsize-video-bg .hp-tagline{
	height:100vh;
	top:13vh
}

.hp-right{
	width:55%
}

.position-quarter{
	top:15%
}

.info-above-menu{
	background:rgba(221,96,40,.9);
	margin-bottom:0px;
}

.menu-container{
	background-color:rgba(0,0,0,.8);
}

.animated-logo{
	top:23%;
}

.animated-logo img{
	right:0px;
	width:95%;
}

.confDetail span, .get-tickets .confDetail span{
	font-size:1.7rem
}

.logo-small{
	display:block;
	width:100%;
	margin-top:5px}

.full-screen {
  height: 1024px;}
  
.full-screen-overlay{
  height: 1024px !important;}


.tile-grey {
	padding:10px;
	min-height:120px;}

.tile-orange {
	padding:10px;
	min-height:120px;}

.tile-green {
	padding:10px;
	min-height:120px;}

.tile-grey img {
	max-width:60px;	}

.tile-orange img {
	max-width:60px;	}

.tile-green img {
	max-width:60px;	}

.tile-title {
	font-size:12px;}

.tile-title:hover {
	text-decoration:none !important;}

.session-block a:hover {
	text-decoration:none !important;}
	
ul.nav li a:link, ul.nav li a:visited{
	font-size:12px;}
	
ul.nav li a:link{
padding:0px 0px 0px 5px;}

/*.f-speaker-item{	
	height:30vw;
	width:38vh;
}

a.f-speaker-item .name{
	width:38vh
}

a.f-speaker-item .name .link{
}*/

.f-speaker-item{
	height:200px
}
.f-speaker-item .link{
	text-align:right;
	font-size:.8rem;
	line-height:1.2
}

.f-speaker-item  .link-line-to-left {
	padding-left:50px}


.f-speaker-item  .link-line-to-left:before{
	width:50px
}


}


/** iPad with landscape orientation.*/

@media all and (min-device-height: 768px) and (max-device-width: 1024px) and (orientation:landscape){

.hp-right{
	padding-right:10px
}
.info-above-menu{
	background:rgba(221,96,40,.9);
}

.menu-container{
	background-color:rgba(0,0,0,.8);
}


.pad1x-all{
	padding:10px;
}

.logo-small{
	display:block;
	width:100%;
}

.position-quarter{
	top:12%
}

.position-quarter[style]{
	padding:20px 10px!important
}

.position-quarter h4{
  	font-size:1.2rem!important
}


.title-container{
	top:40%
}

.f-speakers{
	top:14%;
}

.hp-right .f-speakers{
	top:10%;
	width:58%
}
.animated-logo{
	top:20%;
}

.animated-logo img{
	right:0px;
	width:70%
}

.collaboration{
	bottom:50px;
	right:10px
}

.collaboration img{
	width:150px
}

h3.date{
	bottom:0%
}

.banner{
	height:150px;
	margin-bottom:170px;
	clear:both}

.content-main{
	position:relative;
	top:0px;
	padding-bottom:80px;}

.full-screen {
    height:768px;}
  
.full-screen-overlay{
  height:768px !important;}
  
  
/*.f-speaker-item{	
	width:30vw;
	height:23vh
}

a.f-speaker-item .name{
	width:30vw;
}*/

.link{
	font-size:.85rem;
	line-height:1.1;
	text-align:right
}

/*position-center{
	height:300px;}*/

.tile-grey {
	padding:10px;
	/*min-height:120px;*/}

.tile-orange {
	padding:10px;
	/*min-height:120px;*/}
.tile-green {
	padding:10px;
	/*min-height:120px;*/}

.tile-grey img {
	max-width:60px;	}

.tile-orange img {
	max-width:60px;	}

.tile-green img {
	max-width:60px;	}

.tile-title {
	font-size:12px;}

}


/*SMALL SCREEN*/
@media all /*only screen and (min-width: 100px)*/ and (max-width:750px) {

#navigation {
    display:none;
}
        
.slicknav_menu {
    display:block;
    z-index:1000 !important;
    position:fixed;
    width:100%;
}

.menu-container{
	display:none
}

.fullsize-video-bg .hp-tagline{
	top:8vh
}

.fullsize-video-bg{
	height:110vh
}

.hp-tagline{
	position:relative;
	height:auto;
	padding-bottom:30px
}

.hp-left{
	position:relative;
	width:100%;
	float:left;
	margin:0;
	height:auto;
	padding-left: 0.625rem;
 	padding-right: 0.625rem;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
	display:inline-block;
	text-align:center
}

.hp-right{
	position:relative;
	width:100%;
	float:left;
	margin:0px;
	padding-left: 0.625rem;
 	padding-right: 0.625rem;	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
	display:inline-block;
	height:auto;
	padding-bottom:20px;
}

.bg-teal-gradient{
	background: rgba(38,128,140,1);
	background: linear-gradient(90deg, rgba(38,128,140,1) 0%, rgba(38,128,140,1) 60%, rgba(38,128,140,0) 60%, rgba(186,146,46,0) 100%);
	padding:0px;
	width:auto;
	margin-bottom:20px
}


.name{
	background-color:rgba(0,0,0,.6);
	padding:5px;
	font-size:.7rem;
	color:#ffffff;
}

h1,.h1, h1.title{
	font-size:2rem;
}

.position-quarter{
	width:100%;
    position:relative;
  	top:5%;
  	transform:translateY(-50%);
    margin: auto;
    z-index:30;
    text-align:center
}

h2,.h2{
	font-size:1.5rem;
}

h3, .h3, .panel h3{
	font-size:1.3rem;
}

h4, .h4, .panel h4{
	font-size:1.2rem;
}

.pad1x-all{
	padding:10px;
}

.pad3x {
    padding: 30px 0px;
}

div.days {   
	font-size: 1.5rem;
	line-height:1.2;
	width:100%
}

div.confDate{
	font-size:1.6rem;
	line-height:1.2;
	text-align:left;
	position:relative;
}

div.confDetail{
	position:relative;
	margin-right:auto;
	margin-left:auto;
}
.confDetail span,  .get-tickets .confDetail span {
	font-size:1.3rem;
	position:relative;
}

.confDetail > span.animate{
	animation:none;
}

.title-container{
	position:relative;
  	top:auto;
  	transform: translateY(0%);
  	padding-top:75px	
}

.date{
	position:relative;
	bottom:0px;
	color:#ffffff;
	transform: translateY(0%);
}

.f-speakers, .hp-right .f-speakers{
	width:100%;
	margin-bottom:10px;
	padding:10px;}
	
.f-speakers h3{
	text-align:center
}

.f-speakers h5{
	font-size:.85rem
}
.f-speakers .name{
	font-size:.85rem
}

.f-speakers img{
	width:100%;
	float:left
}

.banner-f-speakers{
	width:100%;
	height:auto; 
	position:relative;
	top:0px;
	transform:none
}

.f-speaker-item{
	height:200px
}

.f-speaker-item .link{
	text-align:right;
	font-size:.8rem;
	line-height:1.2
}

.f-speaker-item  .link-line-to-left {
	padding-left:50px}

.f-speaker-item  .link-line-to-left:before{
	width:50px
}
.collaboration{
	position:relative!important;
	padding:0px 5px ;
	bottom:0px;
}

.collaboration span{
	top:0px;
	width:100vw !important
}

.collaboration img{
	width:120px;
}

.collaboration img.metro{
	top:0px
}

a.speaker-item:first-child{
	height:20px!important;
}

a.speaker-item{
	width:100%!important;
	float:left!important;
	top:0px!important;
	left:0px!important;
	height:300px!important;
	right:0px!important;
	clear:both;
	margin-top:20px!important;
}

.grid{
	width:100%;
}

.animated-logo img{
	width:100%;
}

.get-tickets .btn.fill-reverse{
	top:0px;}
	
.supporters img{
	width:50%
}

.fullscreen-bg {
    background: url('../img/videoframe.jpg') center center / cover no-repeat;
  }

  .fullscreen-bg__video {
    display: none;
  }
  
.parallax{
  background-color:#f2f2f2;
  background-image: url('http://www.zwc.ca/SiteAssets/img/squares-bg-mobile.png');
  min-height:inherit;
  background-attachment:scroll;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: cover
}


}

@media all and (max-width:600px) {

.fullsize-video-bg{
	height:auto;
	padding-bottom:50px
}
}