body { background: #FBFBFB; text-align: center; margin: 0; padding: 0 }
* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
html, body {width:100%; height:100%; padding:0; margin:0}
a, a:hover {-webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear} .text-center{text-align:center}
logo{margin:0; padding:0; display:inline-block}
.error-logo {color:#fff !important; width:167px; height:17px; margin:20px 0; text-indent:-9999px; display:inline-block; background:url(../../2.0/img/logo.png)}
.particles {width:100%; height:100vh; overflow:hidden; position:relative}
.bg-img{background-image:url(../../2.0/img/404.jpg); background-size:cover; background-position:50% 50%; width:100%; height:100%}
.overlay{width:100%; height:100%; padding:0 30px; top:0; left:0; position:absolute; background:rgba(10, 100, 142, 0.85)}
img.error-img{margin-bottom:16px; animation-name:bounceIn; animation-duration:1s}
.error-text{width:100vw; height:100vh; display:table-cell; text-align:center; vertical-align:middle}
.error-text h1 {font-family:"Nexa", Arial, sans-serif; font-size:35px; margin:0 0 12px; padding:0; letter-spacing:1px; font-weight:normal; color:#fff; animation-name:flipInX; animation-duration:3s}
.error-text p {font-family:"Open Sans", Arial, sans-serif; font-size:13px; font-weight:normal; color:#fff; margin:0 0 16px; padding:0; animation-name:flipInX; animation-duration:2s}
.error-text a.btn{border:2px solid rgba(255,255,255,.8); padding:12px 24px; display:inline-block; margin:12px; font:normal 13px "Open Sans", Arial, sans-serif; text-transform:uppercase; text-decoration:none; color:rgba(255,255,255,.8); animation-name:fadeInUp; animation-duration:1s; -webkit-transform:translateZ(0); transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-osx-font-smoothing:grayscale; position:relative; -webkit-transition-property:color; transition-property:color;  -webkit-transition-duration:0.3s; transition-duration:0.3s}
.error-text a.btn:before {content:""; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background:#fff; -webkit-transform:scaleY(0); transform:scaleY(0); -webkit-transform-origin:50% 100%; transform-origin:50% 100%; -webkit-transition-property:transform; transition-property:transform;
 -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-timing-function:ease-out; transition-timing-function:ease-out}
.error-text a.btn:hover, .error-text a.btn:focus, .error-text a.btn:active {color:#333; border-color:#fff}
.error-text a.btn:hover:before, .error-text a.btn:focus:before, .error-text a.btn:active:before {-webkit-transform:scaleY(1); transform:scaleY(1)}


@-webkit-keyframes bounceIn {0% {opacity:0; -webkit-transform:scale(.3); transform:scale(.3)} 50% {opacity:1; -webkit-transform:scale(1.05); transform:scale(1.05)} 70% {-webkit-transform:scale(.9); transform:scale(.9)} 100% {-webkit-transform:scale(1); transform:scale(1)}}
 @keyframes bounceIn {0% {opacity:0; -webkit-transform:scale(.3); -ms-transform:scale(.3); transform:scale(.3)} 50% {opacity:1; -webkit-transform:scale(1.05); -ms-transform:scale(1.05); transform:scale(1.05)} 70% {-webkit-transform:scale(.9); -ms-transform:scale(.9); transform:scale(.9)} 100% {-webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1)}}

@-webkit-keyframes flipInX {0% { -webkit-transform:perspective(400px) rotateX(90deg); transform:perspective(400px) rotateX(90deg); opacity:0} 40% {-webkit-transform:perspective(400px) rotateX(-10deg); transform:perspective(400px) rotateX(-10deg)} 70% {-webkit-transform:perspective(400px) rotateX(10deg); transform:perspective(400px) rotateX(10deg)} 100% {-webkit-transform:perspective(400px) rotateX(0deg); transform:perspective(400px) rotateX(0deg); opacity:1}}
 @keyframes flipInX {0% {-webkit-transform:perspective(400px) rotateX(90deg); -ms-transform:perspective(400px) rotateX(90deg); transform:perspective(400px) rotateX(90deg); opacity:0} 40% {-webkit-transform:perspective(400px) rotateX(-10deg); -ms-transform:perspective(400px) rotateX(-10deg); transform:perspective(400px) rotateX(-10deg)} 70% {-webkit-transform:perspective(400px) rotateX(10deg); -ms-transform:perspective(400px) rotateX(10deg); transform:perspective(400px) rotateX(10deg)} 100% { -webkit-transform:perspective(400px) rotateX(0deg); -ms-transform:perspective(400px) rotateX(0deg); transform:perspective(400px) rotateX(0deg); opacity:1}}

@-webkit-keyframes fadeInUp {0% {opacity:0; -webkit-transform:translateY(20px); transform:translateY(20px)} 100% {opacity:1; -webkit-transform:translateY(0); transform:translateY(0)}}
 @keyframes fadeInUp {0% {opacity:0; -webkit-transform:translateY(20px); -ms-transform:translateY(20px); transform:translateY(20px)} 100% {opacity:1; -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0)}}

.overlay-white{width:100%; height:100%; padding:0 30px; top:0; left:0; position:absolute; z-index:-1; background:rgba(255, 255, 255,.9)}
.general-error .error-text h1{color:#474747} .general-error .error-text p{color:#6a6a6a}
.general-error .error-text a.btn{border:2px solid #249dd6; color: #333}
.general-error .error-text a.btn:before {content:""; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background:#249dd6; -webkit-transform:scaleY(0); transform:scaleY(0); -webkit-transform-origin:50% 100%; transform-origin:50% 100%; -webkit-transition-property:transform; transition-property:transform; -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-timing-function:ease-out; transition-timing-function:ease-out}
.general-error .error-text a.btn:hover, .general-error .error-text a.btn:focus, .general-error .error-text a.btn:active {color:#fff; border-color:#249dd6}
.general-error .error-text a.btn:hover:before, .general-error .error-text a.btn:focus:before, .error-text a.btn:active:before {-webkit-transform:scaleY(1); transform:scaleY(1)}

.maintenance-bg logo {position:absolute; left:30px}
.maintenance-bg logo .error-logo{float:left}
.maintenance-text{width:50vw; height:100vh; display:table-cell; text-align:center; vertical-align:middle}
.maintenance-text h1 {font-family:"Nexa", Arial, sans-serif; font-size:35px; margin:0 0 12px; padding:0; letter-spacing:1px; font-weight:bold; color:#fff; /* animation-name:flipInX; animation-duration:3s */}
.maintenance-text p {font-family:"Open Sans", Arial, sans-serif; font-size:13px; font-weight:normal; color:#fff; margin:0 0 16px; padding:0; /* animation-name:flipInX; animation-duration:2s */}
.maintenance-text a.btn{border:2px solid rgba(255,255,255,.8); padding:12px 24px; display:inline-block; margin:0 0; font:normal 13px "Open Sans", Arial, sans-serif; text-transform:uppercase; text-decoration:none; color:rgba(255,255,255,.8); animation-name:fadeInUp; animation-duration:1s; -webkit-transform:translateZ(0); transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-osx-font-smoothing:grayscale; position:relative; -webkit-transition-property:color; transition-property:color;  -webkit-transition-duration:0.3s; transition-duration:0.3s}
.maintenance-text a.btn:before {content:""; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background:#fff; -webkit-transform:scaleY(0); transform:scaleY(0); -webkit-transform-origin:50% 100%; transform-origin:50% 100%; -webkit-transition-property:transform; transition-property:transform;
 -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-timing-function:ease-out; transition-timing-function:ease-out}
.maintenance-text a.btn:hover, .maintenance-text a.btn:focus, .maintenance-text a.btn:active {color:#333; border-color:#fff}
.maintenance-text a.btn:hover:before, .maintenance-text a.btn:focus:before, .maintenance-text a.btn:active:before {-webkit-transform:scaleY(1); transform:scaleY(1)}
.width-control{max-width:1440px; margin:0 auto}
.maintenance-image{width:50vw; height:100vh; display:table-cell; text-align:center; vertical-align:middle}
img.mainten-mg{animation-name:bounceIn; animation-duration:1s; max-width:100%}
.maintenance-bg{background-image:url(../../2.0/img/maintenance-bg.jpg); background-size:cover; background-position:50% 50%; width:100%; height:100%}
.overlay.bg-none{background:none} .mrg-top{margin-top:30px}
a.btn-social{font:normal 13px "Open Sans", Arial, sans-serif; text-decoration:none; color:rgba(255,255,255,.8); animation-name:fadeInUp; animation-duration:1s} a.btn-social span{width:19px; height:13px; display:inline-block; background:url(../../2.0/img/main-twitter.png) no-repeat scroll 0 0}

.maintenance-text.width-full{width:100vw}
.maintenance-text h1.gray{color:#333}
.maintenance-text p.gray{color:#666}
.error-logo.color{background:url(../img/eventzilla-logo-color.png); text-align:center; margin-top:40px; margin-bottom:0}
.maintenance-text a.btn.color{border:2px solid #249dd6; background:#249dd6}
a.btn-social.color{color:#666}



body.IframeStyle{background:#FBFBFB}
body.IframeStyle .maintenance-bg{background:none; width:auto; height:auto}
body.IframeStyle logo{display:none}  
body.IframeStyle .maintenance-image{display:none}  
body.IframeStyle .maintenance-text{width:100vw; height:260px}
body.IframeStyle .maintenance-text a.btn,
body.IframeStyle .maintenance-text h1,
body.IframeStyle .maintenance-text div.mrg-top{display:none}    
body.IframeStyle .maintenance-text p{color:#444; font-size:17px; margin-bottom:0}


body.IframeStyle .MainLogo{display:none}
body.IframeStyle .ErrorAlertBox{height:calc(-80px + 100vh)}


@font-face { font-family: 'AvenirLTStd-Book'; src: url('../../2.0/fonts/text/AvenirLTStd-Book.eot?#iefix') format('embedded-opentype'), url('../../2.0/fonts/text/AvenirLTStd-Book.otf') format('opentype'), url('../../2.0/fonts/text/AvenirLTStd-Book.woff') format('woff'), url('../../2.0/fonts/text/AvenirLTStd-Book.ttf') format('truetype'), url('../../2.0/fonts/text/AvenirLTStd-Book.svg#AvenirLTStd-Book') format('svg'); font-weight: normal; font-style: normal }
        @font-face { font-family: 'AvenirLTStd-Heavy'; src: url('../../2.0/fonts/title/AvenirLTStd-Heavy.eot?#iefix') format('embedded-opentype'), url('../../2.0/fonts/title/AvenirLTStd-Heavy.otf') format('opentype'), url('../../2.0/fonts/title/AvenirLTStd-Heavy.woff') format('woff'), url('../../2.0/fonts/title/AvenirLTStd-Heavy.ttf') format('truetype'), url('../../2.0/fonts/title/AvenirLTStd-Heavy.svg#AvenirLTStd-Heavy') format('svg'); font-weight: normal; font-style: normal }

        body p.PlainText { font-family: "Open Sans", Arial, sans-serif; font-size: 15px; font-weight: normal; color: #545454; margin: 0; padding: 60px 0 0 0; animation-name: flipInX; animation-duration: 2s }
        body p.AlertBox { font-family: "Open Sans", Arial, sans-serif; font-size: 14px; font-weight: normal; color: #fff; margin: 0; padding: 8px 12px; animation-name: flipInX; animation-duration: 2s; background: #F64E60 }
        a { font-family: "AvenirLTStd-Book", sans-serif; color: #2F9AE7; text-decoration: none }
        a:hover { text-decoration: underline }
        .MainLogo { padding: 30px 15px; text-align: center }
        .MainLogo img { width: 220px }

        a.btn.BlueBtn { font-family: "AvenirLTStd-Book", Arial, sans-serif; color: #fff; font-size: 14px; background: #2F9AE7; border: 1px solid #2F9AE7; border-radius: 6px; padding: 9px 15px; margin: 20px 7px 0; text-transform: none; display: inline-block }
        a.btn.BlueBtn:hover { text-decoration: none; opacity: .9 }
        a.btn.GrayBtn { font-family: "AvenirLTStd-Book", Arial, sans-serif; color: #545454; font-size: 14px; background: #F6F6F6; border: 1px solid #E8E8E8; border-radius: 6px; padding: 9px 15px; margin: 20px 7px 0; text-transform: none; display: inline-block }
        a.btn.GrayBtn:hover { text-decoration: none; opacity: .9 }
        a.btn.LinkBtn { font-family: "AvenirLTStd-Book", Arial, sans-serif; color: #2F9AE7; font-size: 14px; background: none; border-radius: 6px; padding: 9px 15px; margin: 20px 7px 0; text-transform: none; display: inline-block }
        a.btn.LinkBtn:hover { text-decoration: underline; opacity: .9 }

        .ErrorAlertBox {width:100vw; height:calc(-165px + 100vh); padding:0 20px; display:table-cell; vertical-align: middle; text-align: center }
        .ErrorAlertBox h5.TitleText { font-family: "AvenirLTStd-Heavy", Arial, sans-serif; color: #242424; font-size: 24px; font-weight: 400; margin: 0; padding: 35px 0 0; animation-name: flipInX; animation-duration: 2s }
        .ErrorAlertBox p.SubText { font-family: "AvenirLTStd-Book", Arial, sans-serif; font-size: 16px; font-weight: normal; color: #545454; margin: 0; padding: 12px 0 0; animation-name: flipInX; animation-duration: 2s }
        .FooterMdiv { border-top: 1px solid #f5f5f5; padding: 30px 0; font-family: "AvenirLTStd-Book", sans-serif; font-size: 15px; color: #646464; text-align: center }
        p.FooterEmblem { margin: 0; padding: 0 0 15px }
        p.FooterSubText { margin: 0; padding: 0 0 6px }
        .FooterLinkText { margin: 0; padding: 0 }
        .FooterLinkText a { margin: 0 6px }





@media (min-width:1440px) and (max-width:1600px) {
    
}


@media (min-width:1200px) and (max-width:1439px) {


    
}



@media (min-width:992px) and (max-width:1199px) {
    
}


@media (min-width:768px) and (max-width:991px) {
    
}


@media (min-width:576px) and (max-width:767px) {
    
.error-text h1{font-size:22px; line-height:normal}
.error-text{height:auto}
img.error-img{margin-top:20px}
.error-text a.btn{padding:8px 14px; margin:4px; font-size:11px}
.maintenance-image{display:none}
.maintenance-text{width:100vw; padding-top:40px}
.maintenance-text.color{padding-top:0}
    
}


@media (max-width:575px) {

.error-text h1{font-size:22px; line-height:normal}
.error-text{height:auto}
img.error-img{margin-top:20px}
.error-text a.btn{padding:8px 14px; margin:4px; font-size:11px}
.maintenance-image{display:none}
.maintenance-text{width:100vw; padding-top:40px}
.maintenance-text.color{padding-top:0}
    
}

