/*
	Theme Name: HTML5 Blank
	Theme URI: http://html5blank.com
	Description: HTML5 Blank WordPress Theme
	Version: 1.4.3
	Author: Todd Motto (@toddmotto)
	Author URI: http://toddmotto.com
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}

body {
	font:300 11px/1.4 'Lato', sans-serif;
	color:#444;
	overflow:auto;
	padding:0;
	margin:0 auto;
	position:relative;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
}
a {
	color:#444;
	text-decoration:none;
	cursor: pointer
}
a:hover {
	color:#444;
	text-decoration: none !important
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
a:visited { 
    text-decoration: none !important
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}


h1,h2,h3,h4,h5,h6{
	margin: 0;
	font-weight: 400;
    font-family: 'Lato', sans-serif;

}

h1{
	font-size:35px ;
}
h2{
	font-size:30px;
}
h3{
	font-size:20px;
}
h4{
	font-size:16px;
}
h5{
	font-size:12px;
}
h6{
	font-size:10px;
}
/*------------------------------------*\
    Common elements
\*------------------------------------*/

.redButton{	
	background: #ec322a;
	font-size: 18px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    line-height: 39px;
    transition:all .3s
}
.redButton:hover{
	color: #fff;
	background: #ff5049
}
.third{
	width: 33.33333%;
	float: left
}
.half{
	width: 50%;
	float: left
}

.clearfix{
	width: 100%;
	clear: both;
	display: block;
	height: 1px
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/
.preheader{
background: #ec6c2e;
color: #fff;
font-size: 20px;
height: 36px
}
.preheader .rightfloat{
	float: right;
	margin-right: 110px;
	margin-top: 3px;
}
.preheader a{
color: #fff;
margin: 0 8px;
font-weight: 400;
opacity: .8;
transition:all .3s
}
.preheader a span{
	font-size: 16px;
	margin-left: 5px;
	opacity: .8;
transition:all .3s
}
.preheader a:hover,.preheader a span:hover,.fa-search:hover,.preheader a:hover >span{
	opacity: 1
}

#mainSearch{
	display: none;
	position: absolute;
    top: 36px;
    width: 100%;
    height: 100px;
    z-index: 1
}
.search{
	display:block;
	background: #FBFBFB;
	position: relative;
    width: 100%;
    height: 105px;
}

.search-input{
	border: 0px;
    background:transparent;
    padding: 0 2em;
    height: 100%;
    width: 100%;
    padding: 0 64px;
    box-sizing: border-box;
    color: #000000;
    outline: none;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    font-size: 30px;
    border: 0px !important;
    text-align: center
}




/* header */
.header {
width: 100%;
background: #fff;
padding-top: 30px;
position: relative;
height: 164px
}
/* logo */
.logo {
margin-left: 113px;
max-width: 40%;
float: left
}
.logo a,.logo a img{
	max-width: 370px
}

.mobileMenuTrigger{
	display: none
}

/* nav */

.topDonate{
	float: right;
	width: 130px;
    margin: 2px 5px;    
}

.nav {
	max-width:60%;
	float: right;
	position: absolute;
	right: 112px;
	bottom: 49px 
	}

.nav ul{
	float: right;
	padding: 0px;
    margin: 0px;
}
#menu-main-menu li{
	display: block;
    float: left;
    padding: 10px 10px 19px;
    position: relative;
}

#menu-main-menu li.current-menu-item a{
	color: #00747c
}

#menu-main-menu li:hover > a{
	color: #00747c
}
.nav ul li a{
    font-size: 19px;
    font-weight: 600;
    text-transform: uppercase;	
}
#menu-main-menu li:hover > ul.dl-submenu{
	display: block;
	opacity: 1;
	background: #008797;
}
#menu-main-menu li ul.dl-submenu{
	display: none;
	opacity: 0;
	width: 100%;
	background: /* #008797 */;
	position: absolute;
	text-align: center;
	position: fixed;
	left: 0px;
	margin-top:0;
	z-index: 2;
	top:150px	
}
#menu-main-menu li.current-menu-item > ul{
	display: block;
	opacity: 1;
	z-index: 1
}
#menu-main-menu li.current-menu-parent ul{
	display: block;
	opacity: 1
}

#menu-main-menu li ul.dl-submenu li.current-menu-item{
	-webkit-text-stroke-width: .5px;
	-webkit-text-stroke-color: #fff	
}

#menu-main-menu li ul li{
	display: inline-block;
	float: none;
	padding: 14px 5px;
	font-size: 16px
}
#menu-main-menu li ul li a{
	font-size: 16px;
	text-transform: capitalize;
	border-right: 1px solid #00747c;
	padding-right: 9px;
	color: #ffffff;
	font-weight: 400;
	transition: all .3s
}
#menu-main-menu li ul.dl-submenu li a{
	color: #fff;
}
#menu-main-menu li ul.dl-submenu li a:hover{	
	-webkit-text-stroke-width: .5px;
	-webkit-text-stroke-color: #fff
}
#menu-main-menu li ul li:last-child a{
	border-right: 0px solid #00747c;
}
.TopmenuBG{
	background:#008797;
	width: 100%;
	height: 50px;
	position: absolute;
	bottom: 0px
}
/*------------------------------------*\
    MOBILE MENU
\*------------------------------------*/
.dl-menuwrapper{
	float: right !important	
}

.dl-menu.dl-animate-out-1 {
	animation: MenuAnimOut1 0.4s linear forwards;
}

@keyframes MenuAnimOut1 {
	50% {
		transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

.dl-menu.dl-animate-in-1 {
	animation: MenuAnimIn1 0.3s linear forwards;
}

@keyframes MenuAnimIn1 {
	0% {
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}




/* section */
section{
width: 100%;
clear: both;
box-sizing: border-box	
}

/* wrapper */
.wrapper {
	max-width:1200px;
	width:100%;
	margin:0 auto;
	position:relative;
	padding: 0 20px
}



/* sidebar */
.sidebar {
	float: right;
	width: 360px;
}
.sidebarWidget{
	margin-bottom: 40px
}
.widgetTitle{
	font-size: 30px
}

.sidebar-widget .getUpdates{
	padding-top: 30px
}

/* footer */
.footer {

}



/*------------------------------------*\
    HOME SLIDER
\*------------------------------------*/

.homeSlider{
	min-height: 620px;
}



.slide{
	height: 620px
}


.slide .slideText {
    position: absolute;
    left: 11%;
    transition: 1.5s;
    -moz-transition: 1.5s;
    -webkit-transition: 1.5s;
    -o-transition: 1.5s;
    opacity: 0;
    top: 45%;
    -webkit-backface-visibility: hidden;
    background: rgba(10, 31, 33, 0.55);
    padding: 25px 60px;
    width: 400px;
    min-height: 360px
}

.slide {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: relative
}

.go {
    opacity: 1 !important
}

.slideText h1 {
    font-weight: 600;
    font-size: 27px;
    line-height: 130%;
    margin: 0px;
    color: #fff
}

.slideText p {
    font-size: 15px;
    font-weight: 400;
    color: #fff
}

.flex-caption {
    bottom: 0px;
    text-align: right;
    position: absolute;
    width: inherit;
    color: #fff;
    box-sizing: border-box;
    padding: 0 20px;
}

.sliderLink {
    color: #fff;
    border: 1px solid #fff;
    font-size: 10px;
    padding: 10px 22px;
    font-weight: 700;
    letter-spacing: 1.5px;
    position: relative;
    bottom: -30px;
    cursor: pointer
}

.sliderLink:hover {
    background: rgba(255, 255, 255, .51);
    color: #fff
}

.flex-control-nav {
    bottom: -20px;
    transition: .1s .3s;
    -moz-transition: .1s .3s;
    -webkit-transition: .1s .3s;
    -o-transition: .1s .3s;
}

.flex-control-nav li a {
    border: 1px solid white;
    background-image: none;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -o-border-radius: 30px;
    -webkit-border-radius: 30px;
    height: 12px;
    width: 12px;
    display: block;
    margin: 0 4px;
    behavior: url(/PIE.php);
}

.flex-control-nav li:first-child{
	margin-left: -5px
}

.flex-control-nav li a:hover,
.flex-control-nav li a.flex-active {
    background-color: #fff;
    outline: none
}

.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -20px;
    text-align: left;
    transition: all 1s;
    left: 11%;
    opacity: .7
}

.flex-control-nav li {
    margin: 0 0 0 5px;
    display: inline-block;
    zoom: 1;
    *display: inline;
    outline: none
}

.flex-control-nav li:first-child {
    margin-left: 56px;
}

.flex-control-nav a {
    width: 13px;
    height: 13px;
    display: block;
    background: url(theme/bg_control_nav.png) no-repeat;
    cursor: pointer;
    text-indent: 999em;
}

.flex-control-nav a:hover {
    background-position: 0 -13px;
}

.flex-control-nav a.flex-active {
    background-position: 0 -26px;
    cursor: default;
}

.flexslider:hover .flex-control-nav {
    bottom: 30px
}


/*------------------------------------*\
    PRESENTERS
\*------------------------------------*/
.presentersCarr{
	background: #7cced9;
	padding: 30px 0 15px
}
.presentersCarr h2{
	text-align: center;
	color: #fff;
	font-size: 30px;
	margin-bottom: 25px
}
.presentersCarr h5{
	text-align: center;
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	margin-top: 15px
}
.presentersCarr .circleslider{
	width: 1140px;
	margin: 0 auto 0px;
	position: relative
}
.circleSlide .cont a:hover,.circleSlide .cont a h3:hover{
	color: #fff
}
.circleslider .slick-prev,.circleslider  .slick-next{
	background: transparent;
	overflow: hidden;
	text-indent: 999px;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 40px;
	height: 65px;
	background-position: center center;
	background-repeat: no-repeat;
	outline: none;
	opacity: .5;
	transition:all .3s;
	cursor: pointer
}
.circleslider .slick-prev:hover,.circleslider  .slick-next:hover{
	opacity: 1
}

.circleslider .slick-prev{
	float: left;
	margin-left: -68px;
	top:35%;
	background-image: url(images/chevleft.png);
	position: absolute;	
}
.circleslider .slick-next{
	float: right;
	margin-right: -68px;
	top:35%;
	background-image: url(images/chevright.png);
	position: absolute;
	right: 0px
}
.circleSlide{
	height: 380px;
	float: left;
	outline: none
	
}
.circleSlide .cont{
	width: 100%;
	margin: 0 auto;
	padding: 0 45px
}

.circleThumbnail{
	width: 100%;
	height: 280px;
	border-radius: 50%;
	background-size: cover;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.6);
	transition:all .3s;
	background-color: #fff	
}

.circleThumbnail:hover{
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
}

.circleSlide .cont h3{
	text-align: center;
	font-size: 25px;
	margin-top: 10px;
	color: #000
	
	
}
.circleSlide .cont h6{
	text-align: center;
	font-size: 14px;
    color: #000

}

/*------------------------------------*\
    INVITATION
\*------------------------------------*/
.invitation{
	padding-top: 85px;
	padding-bottom:70px;
}
.invitation h1{
	color:#00747c;
	font-weight: 600
}
.invitation h2{
	margin: 0px;
	line-height: 100%
}
.invitation h6{
	font-size: 16px
}
.invitation p{
	font-size: 24px;
	box-sizing:border-box;
	padding: 0 70px;
	font-weight: 400;
	line-height: 110%;
	margin-top: 15px
}
.invitation .fa{
	color:#00747c;
	font-size: 50px;
	float: left
}

.calendar{
	background: url(images/calBG.png) left top no-repeat;
	background-size: 50px;
	padding-left: 60px;
	padding-right: 25px
}

.map-marker{
		background: url(images/markBG.png) left top no-repeat;
	background-size: 50px;
	padding-left: 60px;
	padding-right: 25px


}


/*------------------------------------*\
    Event POSTER
\*------------------------------------*/

.eventsPoster{
	height: 620px;
	background-size: cover ;
	background-repeat: no-repeat ;
	background-position: center center;
	position: relative;
	}
.eventCont{
	position: absolute;
	width: 100%;
	bottom: 130px;	
}
.eventCont h1{
	text-align: center;
	margin-bottom: 25px
}
.eventCont p{
	font-size: 20px;
	text-align:center;
	color:#fff;
	font-weight: 400;
	text-shadow: 0px 0px 1px #3b3b3b

}
.eventButton{
	margin: 0 auto;
	display: block;
	width: 100%;
	max-width: 300px;
	background: rgba(250, 250, 250, 0.7);
	border: 2px solid #7cced9;
	position: relative;
	font-size: 20px;
	text-align: center;;
	color: #00747c;
	font-weight: 800;
	padding: 15px 0;
	box-sizing: border-box;
	border-radius: 5px;
	transition:all .3s
}

.eventButton:hover{
	background: rgba(250, 250, 250, 9);
	color: #00747c;
}

/*------------------------------------*\
    3 POSTS
\*------------------------------------*/
.threePosts{
	background: #f4f4f4;
	padding: 65px 0 45px
}
.threePosts .wrapper{
	max-width: 1140px;
	width: 100%
}
.blogslider{

}
.blogSlide{
float: left;
width: 33.3333%;
padding: 0 	15px 
}
.blogSlide .cont{
	background: #fff;
	width: 100%;
	margin: 0 auto
}
.squareThumbnail{
	background-size: cover
}

.blogSlide .cont h3{
	text-align: center;
	font-size: 25px;
	background:#ec6c2e;
	padding-bottom: 5px;
	margin: 0 auto;
	padding:15px 20px 15px;
	color:#fff
}
.blogSlide .cont p{
	max-width: 250px;
	margin: 0 auto;
	max-width: 250px;
    margin: 20px auto 0;
    font-size: 16px;
    line-height: 110%;
    padding: 0px 20px 30px
}

/*------------------------------------*\
    UPDATES
\*------------------------------------*/
.getUpdates{
	background: #7cced9;
	padding: 96px 0 83px
}
.getUpdates h1{
	color: #fff;
	text-align: center;
	margin-bottom: 40px
	
}
.getUpdates h2{
	color: #fff;
	text-align: center;
	margin-bottom: 20px;
	font-size: 25px;
	font-weight: 600
	
}
.getUpdates form{
	width: 320px;
	margin: 0 auto;
	display: block;
}
.getUpdates form input{
	background: #dbdad9;
	border: 0px;
	border-radius: 5px;
	font-size: 18px;
	padding: 20px;
	font-weight: 100;
	width: 100%;
	margin: 15px 0
}


.getUpdates form input.placeholder {
   color:#8b8b8b;
   font-weight: 300
}


.getUpdates form input::-webkit-input-placeholder {
   color:#8b8b8b;
   font-weight: 300
}

.getUpdates form input:-moz-placeholder { /* Firefox 18- */
   color:#8b8b8b;
   font-weight: 300  
}

.getUpdates form input::-moz-placeholder {  /* Firefox 19+ */
   color:#8b8b8b;
   font-weight: 300  
}

.getUpdates form input:-ms-input-placeholder {  
   color:#8b8b8b;
   font-weight: 300 
}

.whitebutton{
	border:2px solid #fff !important; 
	background: rgba(255, 255, 255, 0.25) !important;
	border-radius: 5px !important;
	width: 100% !important;
	padding: 12px !important;
	font-weight: 600 !important;
	color: #fff !important;
	transition: all .3s;
	text-transform: uppercase
}

.whitebutton:hover{
	background: rgba(255, 255, 255, 0.6) !important;
	color: #fff !important;
	text-shadow: 1px 1px 1px rgba(187, 187, 187, 0.89) !important
}

.getUpdates form button,#suscribeButton{
	display: block;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
	margin-top: 15px;
	font-size: 25px;
}


.mc4wp-alert p{
	font-size: 20px;
	color: #fff
}



/*------------------------------------*\
    HERO
\*------------------------------------*/
.becomeHeroPoster{
	background: #ec322a;
	padding-bottom: 25px;
}

.becomeHeroPoster .coverImg{
	width: 100%;
	height: 570px;
	background-size: cover;
	margin-bottom: 30px;
	background-repeat: no-repeat ;
	background-position: center center 
	
}
.becomeHeroPoster h1{
	text-align: center;
	color: #fff;
	font-size: 40px
}

.becomeHeroPoster h3{
	text-align: center;
	color: #fff;
	font-size: 25px;
	margin: 10px 0 25px
}

.becomeHeroPoster .whitebutton{
	display: block;
	margin: 0 auto;
	max-width: 130px;
	text-align: center;
	border: 2px solid #fff;
	font-size: 13px;
	margin-top: 20px
}

/*------------------------------------*\
    LOGISTICS
\*------------------------------------*/
.logistics{
	padding-top: 97px;
	padding-bottom: 75px;
	border-bottom: 1px solid #e4e4e4;
	background: #f5f5f5
}

.logistics h1{
	color: #00929e;
	border-bottom: 2px solid #7cced9;
	display:block;
	margin:0 auto;
	width:235px;
	text-align:center;
	font-weight:600;
	padding-bottom:10px;
	padding-top: 35px;
	
}

.logistics p{
	font-size: 18px;
	font-weight: 600;
	color: #000;
	margin: 22px 0
}

.logistics p a{
	color: #000;transition: all .3s
}

.logistics p a:hover{
	color: #00747c
}


.logistics iframe{
	border: 3px solid #f0807b !important;
	margin: 0 auto;
	display: block;
	width: 100%
}


/*------------------------------------*\
    PREFOOTER
\*------------------------------------*/
.preFooter{
	background: #ffffff;
	padding: 45px 0 0px
}
.preFooter .wrapper{
	text-align: center
}
.preFooter .wrapper img{
	margin: 0 auto
}
.preFooter .wrapper h5{
	margin: 30px auto;
	display: block;
	max-width: 170px;;
}
.preFooter .wrapper h5 a{
	font-size: 18px;
	font-weight: 600;
	color: #7d7d7d;
	display: block;
	transition:all .3s 
}
.preFooter .wrapper h5 a:hover{
	color: #00929e
}

.partnersCarousel button{
	display: none !important
}


/*------------------------------------*\
    FOOTER Menu
\*------------------------------------*/    
.footerMenu{
	background: #737070;
	padding: 45px 0
}
#menu-footer-menu{
	width: 100%;
	display: block;
	background: purple;
	padding: 0px;
	margin: 0px
}
#menu-footer-menu li{
	list-style: none;
	display: block;
	width: 20%;
	padding: 0px;
	float: left;
}

#menu-footer-menu li a{
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	color: #bfbfbf;
	transition:all .3s
	}

#menu-footer-menu li a:hover{
	color: #fff
	
}

#menu-footer-menu .dl-submenu{
	width: 100%;
	padding: 0px;
	margin-top: 15px;
	box-sizing: border-box;
    padding-left: 0px;
	
}
#menu-footer-menu .dl-submenu li{
	display: block;
	width: 100% !important;
	float: none;
	text-align: left;
	padding: 5px 20px 5px 0px;
    box-sizing: border-box;
}

#menu-footer-menu li ul.dl-submenu > li.menu-item-has-children > a{
	color: #fff;
}

#menu-footer-menu li ul.dl-submenu > li.menu-item-has-children ul{
	padding-left: 10px
}




#menu-footer-menu .dl-submenu li > a{
	text-transform: none !important;
	font-weight:300;
	font-size: 14px;
    border-bottom: .05em solid #7B7878;
    display: block;
    color: #fff
}

#menu-footer-menu .dl-submenu li li a{
	color: #bfbfbf
}



#menu-footer-menu .dl-submenu li a:hover{
	border-bottom: .05em solid #fff;
}
/*------------------------------------*\
    FOOTER
\*------------------------------------*/
.footer{
	background: #000;
	padding: 40px 0;
	color: #fff;
		font-size: 20px;
}
.footer .third{
	text-align: center
}
.footer p,.footer a{
	font-size: 15px;
	text-transform: uppercase;
	font-weight: 600;
	color: #fff;
}
.bottomSocial p{
	text-align: right;
	text-transform: none !important;
	font-size: 25px;
	line-height: 20px;
}
.bottomSocial p a{
	font-size: 20px;
	margin: 0 10px;

}

.bottomSocial p span{
	text-transform: none !important;
	font-size: 16px
}
.GetNewFoot{
	
}

/*------------------------------------*\
    PAGES
\*------------------------------------*/
.postLayout{
	margin-top: 80px
}
.pageLayout{
	margin-top: 45px;
}
.postLayout .wrapper{

}



.postLayout article{
	width: calc(100% - 420px);
	background: #fff;
	float: left
}
.speakerlayout article{
width: 100%	
}
.fullPage{
	margin-top: 30px;
}
.fullPage article{
	width: 100%
}
.pageTitle{
	font-size: 40px;
	margin: 0;
	line-height: 100%
}
.date{
	margin-top: 15px;
	font-size: 14px;
	font-weight: 200;
	color: #808080;
}
.wpusb-item{
	margin-left: 4px !important;
}
.wpusb-item a{
	box-shadow: none !important;
	border-radius: 0px !important;
	padding-right: 10px !important;	
}
.wpusb-item a i{
	font-size: 15px !important;
}
.wpusb-buttons .wpusb-printer a{
	background: #bdbdbd !important;
	color: #3b3b3b !important
}
.wpusb .wpusb-item:first-child{
	margin-left: 0px !important
}
.postLayout article{
	font-size: 18px;
	font-weight: 400;
	color: #000
}
.postLayout article p, .postLayout article li{
	font-size: 18px;
}
.postLayout article img{
	box-sizing: border-box;
	padding: 5px
}
.postLayout article blockquote{
	background: #bdbdbd url(images/quote.png) no-repeat;
	background-position: 25px 34px;
	width: 100%;
	padding: 25px 20px 25px 80px;
	margin: 0px;
	border: 0px;
    margin: 20px 0;	
}
.postLayout article blockquote p{
	font-size: 35px;
    margin: 0;
    font-weight: 400;
}
.postLayout article a{
	color: #1993c5
}
#postTags{
	display: block;
	margin-top: 10px
}
#postTags a{
	background: #e4f5f7;
	padding: 5px 10px;
}
/*------------------------------------*\
    Experience
\*------------------------------------*/
.experience{
	background: #01545c;
	padding-top: 44px;
	padding-bottom: 0px
}
.experience .pageTitle{
	text-align: center;
	color: #fff;
	max-width:820px;
	margin: 0px auto 20px;
	line-height: 120%
}
.experience p{
	color: #fff;
	font-size: 20px;
	max-width:820px;
	margin: 0 auto 20px;
	font-weight: 400	
}
.conferenceGrid{
	margin-top:35px;
	background: #00747c
}
.gridElem4{
	display: block;
	float: left;
	width: 25%;
	position: relative;
	overflow: hidden
}
.gridElem4 img{
	width: 100%;
}
.gridOverlay{
	width: 100%;
	height: 100%;
	position: absolute;
	top:100%;
	z-index: 1;
	background: rgba(0, 117, 126, 0.71);
	transition:all .5s;
	opacity: 0
}



.gridElem4:hover > .gridOverlay{
	top:0%;
	opacity: 1
}
.gridOverlay a{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	background: transparent url(images/gridarrow.png) no-repeat;
	background-position: center 50%;
	text-decoration: none
}
.gridOverlay h3{
	font-size: 22px;
	color: #fff;
	text-align: center;
	padding: 18% 20px 0;
	margin: 0 auto;
	width: 100%;
    position: absolute;
}

.gridOverlay p{
	width: 100%;
	text-align: center;
	font-size: 16px;
	line-height: 120%;
	margin: 0 auto;
	position: absolute;
    bottom: 20%;
    padding: 0 20px;
}


/*------------------------------------*\
    Exhibitors
\*------------------------------------*/
.exhibitorsGrid{
	
}
.exhibitorsGrid .gridElem1{
	width: 100%;
	height: 620px;
	background-position: center center;
    background-size: cover;
    position: relative
}
/*------------------------------------*\
    SPEAKERS
\*------------------------------------*/
.gridElem6{
	display: block;
	float: left;
	position: relative;
	overflow: hidden;
	width: 16.66666%
}

.gridElem6:hover > .gridOverlay{
	top:0%;
	opacity: 1
}

.gridElem6 img{
	width: 100%
}


.speakerTitle{
	margin-bottom: 40px;
	    font-size: 35px;
    font-weight: 600;
}

.speakerPic{
	float: left;
	margin: 0px 30px 10px 0;
	

}

.speakerPic img{
	border-radius: 50%;
	width: 260px;
	height: auto;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
	padding: 0px !important
}

.speakerCont img{
	display: none
}

.speakvnav{
	float: right;
    display: table-cell;
    width: 100%;
    margin: 0;
    color: #fff;
    font-size: 32px;
    vertical-align: middle;
    text-align: center;
    margin-top: 10px;
    background: #ec6c2e
}
.speakvnav h5{
	margin: 5px 0;
	color: #fff;
	font-weight: 400;
	font-size: 14px;
	margin-bottom: 10px;
	text-transform: uppercase
}
.speakvnav a {
    color: #fff;
    margin: 0 10px;
}
.speakvnav .icon-angle-left {
    background-position: -240px -60px;
    width: 18px; height: 30px;
}
.speakvnav .icon-angle-right {
    background-position: -360px -60px;
    width: 18px; height: 30px;
}

.speakerSched{
	border-top: 5px solid #1993c5;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-top: 20px;
	background: #f4f4f4;
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.6)
}
.speakerSched h2{
	font-family: 'Lato', sans-serif;
	float: left;
	background: #99cc00;
	color: #fff;
	font-size: 16px;
    font-weight: 500;
	padding: 12px 30px;
	text-transform: uppercase;
	line-height: 1.428571429;
	
}

/*------------------------------------*\
   REGISTRATION
\*------------------------------------*/

.registrationGrid{
	margin-top: 50px;
	font-size: 16px
}



/*------------------------------------*\
    SPONSORS
\*------------------------------------*/


.sponsorsGrid .gridElem6{
	box-sizing: border-box;
	padding: 30px;
	
}

.sponsorsGrid .gridElem6 a img{
	-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
    filter: grayscale(0%);
    box-shadow: 0px 0px 0px #fff;;
    transition: all .5s
}

.sponsorsGrid .gridElem6:hover > a img{
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
    box-shadow: 0px 0px 2px #3b3b3b
}

/*------------------------------------*\
    SESSIONS
\*------------------------------------*/


.sessionLayout{
	background: #01545c;
	padding: 35px 0 
}

article.session,aside.session{
	padding: 0px
}
.sessionNav{
	width: 160px;
	float: right;
	text-align: center;
	margin-left: 50px;
}
.sessionNav span{
	display: block;
	color: #fff;
	font-weight: 400;
    margin-bottom: 10px;
    text-transform: uppercase
}
.icon-angle-left {
    background-position: -240px -60px;
    width: 18px;
    height: 30px;
}
.icon-angle-right {
    background-position: -360px -60px;
    width: 18px;
    height: 30px;
}
.icon-th-large {
    background-position: -300px -60px;
    width: 31px;
    height: 30px;
   }

.sessionLayout .pageTitle{
	color: #fff;
	line-height: 120%
}

.sessionDet{
	background: #FBFBFB;
	padding: 10px;
}

.sessionCal span i{
	color: #00747c;
	width: 18px
}

.location,.sesdate,.time{
	display: block;
	font-size: 16px;
	margin: 3px 0
}

.sessionAsideTitle{
	margin-bottom: 20px !important;
	border-bottom: 2px solid #ccc;
	padding-bottom: 5px
	
}

.session .speakers-thumbs {
    display: table;
    margin: 0;
    padding:0;
    height: auto;
    text-align: left;
}
.session .speaker {
    display: table-cell;
    float: left;
    width: 100%;
    height: auto;
    margin: 10px 0;
    padding: 0 1em;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #242424;
    vertical-align: middle
}
.session .speaker img {
    max-width: 54px;
    margin: 0 0.5em 0 0;
    display: inline-block;
    border-radius: 50%;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
    vertical-align: middle
}
.session .speaker span{
	display: inline-block;
}
/*------------------------------------*\
    404
\*------------------------------------*/
.postSearch{
	border: 1px solid #F3F3F3;
	margin-top: 30px}
.postSearch .search{
	display: block;
	position: relative;
	top:0px}
/*------------------------------------*\
    IMAGES
\*------------------------------------*/



/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/



/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (max-width:1280px) {
.logo a, .logo a img {
    max-width: 300px;
}
.nav ul li a{
	font-size: 17px
}
.topDonate{
	width: 102px;
}
.redButton{
	font-size: 17px;
}
.presentersCarr .circleslider{
	width: 800px;
}
.bottomSocial p a{
	margin: 0 5px;
}


}

@media only screen and (max-width:1140px) {
.preheader .rightfloat{
	margin-right: 50px;
}
.logo {
    margin-left: 43px;
    }
.nav{
	right: 52px
}
.invitation h1{
	font-size: 30px;
}
.invitation h2{
	font-size: 20px
}
.invitation p{
	font-size: 20px
}

.bottomSocial p span{
	font-size: 14px;
}
.footer p, .footer a{
	font-size: 15px;
}

.footersearchT{
	font-size:25px
}

}
@media only screen and (max-width:1024px) {


}

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

.dl-menuwrapper{
	z-index: 9;
}


.nav{
	display: none
}

.logo {
    margin-left: 20px;
    max-width: 50%;
    float: left;
    position: relative;
    top:-6px;
    z-index: 9
}	
.logo a, .logo a img {
    max-width: 300px;
        width: 100%;
}
.mobileMenuTrigger {
    display: block;
    float: right;
    background-color: #277c90;
    font-size: 23px;
    margin-right: 20px;
    padding: 10px 15px;
    color: #fff
}
.preheader .rightfloat{
	margin-right: 12px
}
.header{
	padding-top: 16px;
	height: 80px;
}

.TopmenuBG{
	height: 5px;
}

.slide .slideText{
	margin-top: -200px;
    width: 100%;
    left: 0px;
    min-height: 200px;
    bottom: 0px;
    top: initial;	
}	
.flex-control-nav{
	text-align: center !important;
}
.presentersCarr .circleslider{
	width: 600px;
}
.circleSlide .cont{
	padding: 0 25px;
}
.circleSlide .cont h3{
	font-size: 20px
}

.invitation h1{
	font-size: 25px;
}
.invitation h2{
	font-size: 18px
}
.invitation p{
	font-size: 17px
}
#menu-footer-menu li a{
	font-size: 15px
}
#menu-footer-menu .sub-menu{
	padding-left: 0px;
	font-weight: 100;
}
.gridElem6{
	width: 33.33333%;
}
.bottomSocial p a{
	font-size: 20px
}
.footer p, .footer a{
	font-size: 13px;
}
.bottomSocial p span{
	display: none
}
}
@media only screen and (max-width:820px) {
.half .half{
	width: 100%;
	text-align: center;
	margin-bottom: 30px;
	padding: 0 20px
}
.half{
	padding: 0 20px
}	
.invitation p{
	padding: 0 20px
}	
.blogSlide{
	width: 100%;
	margin-bottom: 30px;
}
.squareThumbnail{
	max-height: 240px;
	background-position: center center
}
.blogSlide .cont h3,.blogSlide .cont p {
	max-width: 650px;
}

#eventFrame{
	height: 850px
}
	
}
@media only screen and (max-width:768px) {
.postLayout article{
	width: 100%
}
.sidebar {
    float: none;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    clear: both;
}
.gridElem4{
	width: 33.33333%;
}
.textwidget #mc4wp-form-1 .getUpdates form input.placeholder{
	max-width: 250px
}
}
@media only screen and (max-width:745px) {
.presentersCarr .circleslider{
	width: 430px;
}
.homeSlider {
    min-height: 420px;
}
.slide {
    height: 420px;
}
.sliderLink{
	display: none
}
.gridElem4{
	width: 50%;
}
#schedAnimBalls{
	display: none
}

}
@media only screen and (max-width:620px) {
.half{
	width: 100%;
	padding: 30px 20px	
}
.gridElem6{
	width: 50%;
}
.footer .third{
	width: 100%;
	padding: 10px 0
}
.bottomSocial p{
	text-align: center
}
.footer{
	    padding: 10px 0;
}

#eventFrame{
	height: 1050px
}




}
@media only screen and (max-width:480px) {
.preheader .rightfloat{
	text-align: center
}
.preheader a span{
	display: none
}
.homeSlider {
    min-height: 380px;
}
.slide {
    height: 380px;
    background-size: auto 250px !important;
    background-position: center top !important;
    background-color: #277c90 !important
}
.slide .slideText{
	height: 132px;
	min-height: inherit;
	background: #277c90;
	padding: 24px 20px
}
.slideText h1{
	font-size: 22px;
}
.slideText p{
	display: none
}


.presentersCarr .circleslider {
    width: 280px;
}
.circleslider .slick-next{
	    margin-right: -39px;
}
.circleslider .slick-prev{
	margin-left: -39px;
}

.preheader .rightfloat{
	float: none;
	margin: 0 auto 0;
	width: 310px;
	display: block;
	padding-top: 2px;
}
.preheader a span{
	font-size: 14px
}
.logo {
max-width: 260px;
display: block;
margin: 5px auto;

}
.logo a{
	width: auto;
	overflow: hidden;
	display: block;
	padding-right: 20px
}
.invitation{
	padding-top: 45px;
    padding-bottom: 70px;
}
.eventsPoster{
	height: 420px;
}
.eventCont h1{
	font-size: 22px;
	font-weight: 600;
}

.eventButton{
	max-width: 260px;
}
.eventCont p{
	padding: 0 20px;
}

.becomeHeroPoster .coverImg{
	height: 370px;
}

.becomeHeroPoster h1{
	font-size: 22px;
}

.logistics{
	padding-top: 27px;
    padding-bottom: 35px;
}

.logistics h1{
	    padding-top: 5px;
}
.logistics .wrapper .half{
	padding: 30px 0px;
}

.logistics iframe{
	height: 300px
}

.footerMenu{
	display: none
}

.gridElem4{
	width: 100%;
}

#eventFrame{
	height: 1250px;
	min-width: 400px
}

.speakerlayout .wrapper{
	padding: 0px;
	max-width: 480px
}



}
@media only screen and (max-width:360px) {
	
.getUpdates form input{
	width: 90% !important;
	margin: 15px auto;
	display: block
}	
	
	
	
}

@media only screen and (max-width:320px) {
.header{
	padding-top: 15px;

}
.logo {
    max-width: 220px;
    display: block;
    margin-left: 10px
}








.mobileMenuTrigger {
    display: block;
    float: right;
    background-color: #277c90;
    font-size: 20px;
    margin-right: 20px;
    padding: 10px 15px;
    color: #fff;
}

.gridElem6{
	width: 100%;
    padding: 10px
}
}












}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
	   only screen and (min-resolution:144dpi) {




}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.size-full{
	margin: 5px 0 20px !important;
	padding: 0px !important
}

.wp-caption {
	background:#f5f5f5;
	border:1px solid #e0e0e0;
	max-width:96%;
	padding:5px 3px 5px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:13px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {

}
.bypostauthor {

}
/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Common styles of menus */
.dl-menuwrapper {
	width: 100%;
	float: left;
	position: absolute;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 200%;
	perspective-origin: 50% 200%;
}

.dl-menuwrapper:first-child {
	margin-right: 0px;
}

.dl-menuwrapper button {
	background: #ffffff;
	border: none;
	width: 48px;
	height: 45px;
	text-indent: -900em;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	outline: none;
}


.dl-menuwrapper button:hover{
	background: #fff
}

.dl-menuwrapper ul {
	background: #ec6c2e;
}

.dl-menuwrapper button:after {
	content: '';
	position: absolute;
	width: 68%;
	height: 5px;
	background: #ec6c2e;
	top: 10px;
	left: 16%;
	box-shadow: 
		0 10px 0 #ec6c2e, 
		0 20px 0 #ec6c2e;
}
.dl-menuwrapper button.dl-active > .dl-menuwrapper button:after{
background: #ffffff;
	box-shadow: 
		0 10px 0 #ffffff, 
		0 20px 0 #ffffff	
		
}
.dl-menuwrapper ul {
	padding: 0;
	list-style: none;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.dl-menuwrapper li {
	position: relative;
}

.dl-menuwrapper li a {
	display: block;
	position: relative;
	padding: 15px 20px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: #fff;
	outline: none;
}

.no-touch .dl-menuwrapper li a:hover {
	background: rgba(255,248,213,0.1);
}

.dl-menuwrapper li.dl-back > a {
	padding-left: 30px;
	background: rgba(0,0,0,0.1);
}

.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
	position: absolute;
	top: 0;
	line-height: 50px;
	font-family: 'icomoon';
	speak: none;
	-webkit-font-smoothing: antialiased;
	content: "\e000";
}

.dl-menuwrapper li.dl-back:after {
	left: 10px;
	color: rgba(212,204,198,0.3);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.dl-menuwrapper li > a:after {
	right: 10px;
	color: rgba(0,0,0,0.15);
}

.dl-menuwrapper .dl-menu {
	margin:0;
	position: absolute;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	top:59px
}

.dl-menuwrapper .dl-menu.dl-menu-toggle {
	transition: all 0.3s ease;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
}

/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
	display: none;
}

/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
	display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
	display: block;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {
	position: absolute;
	width: 100%;
	top: 50px;
	left: 0;
	margin: 0;
}

/* Animation classes for moving out and in */

.dl-menu.dl-animate-out-1 {
	-webkit-animation: MenuAnimOut1 0.4s;
	animation: MenuAnimOut1 0.4s;
}

.dl-menu.dl-animate-out-2 {
	-webkit-animation: MenuAnimOut2 0.3s ease-in-out;
	animation: MenuAnimOut2 0.3s ease-in-out;
}

.dl-menu.dl-animate-out-3 {
	-webkit-animation: MenuAnimOut3 0.4s ease;
	animation: MenuAnimOut3 0.4s ease;
}

.dl-menu.dl-animate-out-4 {
	-webkit-animation: MenuAnimOut4 0.4s ease;
	animation: MenuAnimOut4 0.4s ease;
}

.dl-menu.dl-animate-out-5 {
	-webkit-animation: MenuAnimOut5 0.4s ease;
	animation: MenuAnimOut5 0.4s ease;
}

@-webkit-keyframes MenuAnimOut1 {
	0% { }
	50% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		-webkit-transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut2 {
	0% { }
	100% {
		-webkit-transform: translateX(-100%);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut3 {
	0% { }
	100% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut4 {
	0% { }
	100% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut5 {
	0% { }
	100% {
		-webkit-transform: translateY(40%);
		opacity: 0;
	}
}

@keyframes MenuAnimOut1 {
	0% { }
	50% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
		transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		-webkit-transform: translateZ(-372.5px) rotateY(15deg);
		transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

@keyframes MenuAnimOut2 {
	0% { }
	100% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		opacity: 0;
	}
}

@keyframes MenuAnimOut3 {
	0% { }
	100% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
}

@keyframes MenuAnimOut4 {
	0% { }
	100% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
}

@keyframes MenuAnimOut5 {
	0% { }
	100% {
		-webkit-transform: translateY(40%);
		transform: translateY(40%);
		opacity: 0;
	}
}

.dl-menu.dl-animate-in-1 {
	-webkit-animation: MenuAnimIn1 0.3s;
	animation: MenuAnimIn1 0.3s;
}

.dl-menu.dl-animate-in-2 {
	-webkit-animation: MenuAnimIn2 0.3s ease-in-out;
	animation: MenuAnimIn2 0.3s ease-in-out;
}

.dl-menu.dl-animate-in-3 {
	-webkit-animation: MenuAnimIn3 0.4s ease;
	animation: MenuAnimIn3 0.4s ease;
}

.dl-menu.dl-animate-in-4 {
	-webkit-animation: MenuAnimIn4 0.4s ease;
	animation: MenuAnimIn4 0.4s ease;
}

.dl-menu.dl-animate-in-5 {
	-webkit-animation: MenuAnimIn5 0.4s ease;
	animation: MenuAnimIn5 0.4s ease;
}

@-webkit-keyframes MenuAnimIn1 {
	0% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		-webkit-transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

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

@-webkit-keyframes MenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn5 {
	0% {
		-webkit-transform: translateY(40%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}

@keyframes MenuAnimIn1 {
	0% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
		transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		-webkit-transform: translateZ(0px) rotateY(0deg);
		transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

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

@keyframes MenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn5 {
	0% {
		-webkit-transform: translateY(40%);
		transform: translateY(40%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
	-webkit-animation: SubMenuAnimIn1 0.4s ease;
	animation: SubMenuAnimIn1 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
	-webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
	animation: SubMenuAnimIn2 0.3s ease-in-out;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
	-webkit-animation: SubMenuAnimIn3 0.4s ease;
	animation: SubMenuAnimIn3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-4 {
	-webkit-animation: SubMenuAnimIn4 0.4s ease;
	animation: SubMenuAnimIn4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
	-webkit-animation: SubMenuAnimIn5 0.4s ease;
	animation: SubMenuAnimIn5 0.4s ease;
}

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

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

@-webkit-keyframes SubMenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn5 {
	0% {
		-webkit-transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0);
		opacity: 1;
	}
}

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

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

@keyframes SubMenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn5 {
	0% {
		-webkit-transform: translateZ(-200px);
		transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
	-webkit-animation: SubMenuAnimOut1 0.4s ease;
	animation: SubMenuAnimOut1 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
	-webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
	animation: SubMenuAnimOut2 0.3s ease-in-out;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
	-webkit-animation: SubMenuAnimOut3 0.4s ease;
	animation: SubMenuAnimOut3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-4 {
	-webkit-animation: SubMenuAnimOut4 0.4s ease;
	animation: SubMenuAnimOut4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
	-webkit-animation: SubMenuAnimOut5 0.4s ease;
	animation: SubMenuAnimOut5 0.4s ease;
}

@-webkit-keyframes SubMenuAnimOut1 {
	0% {
		-webkit-transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(50%);
		opacity: 0;
	}
}

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

@-webkit-keyframes SubMenuAnimOut3 {
	0% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut4 {
	0% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut5 {
	0% {
		-webkit-transform: translateZ(0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-200px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut1 {
	0% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
		opacity: 0;
	}
}

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

@keyframes SubMenuAnimOut3 {
	0% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut4 {
	0% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut5 {
	0% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-200px);
		transform: translateZ(-200px);
		opacity: 0;
	}
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu {
	position: relative;
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}

.no-js .dl-menuwrapper li .dl-submenu {
	display: block;
}

.no-js .dl-menuwrapper li.dl-back {
	display: none;
}

.no-js .dl-menuwrapper li > a:not(:only-child) {
	background: rgba(0,0,0,0.1);
}

.no-js .dl-menuwrapper li > a:not(:only-child):after {
	content: '';
}

/* Colors for demos */

/* Demo 1 */
.demo-1 .dl-menuwrapper button {
	background: #c62860;
}

.demo-1 .dl-menuwrapper button:hover,
.demo-1 .dl-menuwrapper button.dl-active,
.demo-1 .dl-menuwrapper ul {
	background: #9e1847;
}

/* Demo 2 */
.demo-2 .dl-menuwrapper button {
	background: #e86814;
}

.demo-2 .dl-menuwrapper button:hover,
.demo-2 .dl-menuwrapper button.dl-active,
.demo-2 .dl-menuwrapper ul {
	background: #D35400;
}

/* Demo 3 */
.demo-3 .dl-menuwrapper button {
	background: #08cbc4;
}

.demo-3 .dl-menuwrapper button:hover,
.demo-3 .dl-menuwrapper button.dl-active,
.demo-3 .dl-menuwrapper ul {
	background: #00b4ae;
}

/* Demo 4 */
.demo-4 .dl-menuwrapper button {
	background: #90b912;
}

.demo-4 .dl-menuwrapper button:hover,
.demo-4 .dl-menuwrapper button.dl-active,
.demo-4 .dl-menuwrapper ul {
	background: #79a002;
}

/* Demo 5 */
.demo-5 .dl-menuwrapper button {
	background: #744783;
}

.demo-5 .dl-menuwrapper button:hover,
.demo-5 .dl-menuwrapper button.dl-active,
.demo-5 .dl-menuwrapper ul {
	background: #643771;
}