html{
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
body{
    margin:0;
    overflow-x: hidden;
}
*:focus {
    outline: 0 !important;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
    display:block
}
audio,canvas,progress,video{
    display:inline-block;
    vertical-align:baseline
}
audio:not([controls]){
    display:none;
    height:0
}
[hidden],template{
    display:none
}
a{
    background-color:transparent
    
}
a:active,a:hover{
    outline:none;
}
a:focus {
    border: none;
    outline: none;
}
abbr[title]{
    border-bottom:1px dotted
}
b,strong{
    font-weight:700
}
dfn{
    font-style:italic
}
h1{
    font-size:2em;
    margin:.67em 0
}
mark{
    background:#ff0;
    color:#000
}
small{
    font-size:80%
}
sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
sup{
    top:-.5em
}
sub{
    bottom:-.25em
}
img{
    border:0
}
svg:not(:root){
    overflow:hidden
}
figure{
    margin:1em 40px
}
hr{
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    height:0
}
pre{
    overflow:auto
}
code,kbd,pre,samp{
    font-family:monospace,monospace;
    font-size:1em
}
button,input,optgroup,select,textarea{
    color:inherit;
    font:inherit;
    margin:0
}
button{
    overflow:visible
}
button,select{
    text-transform:none
}
button,html input[type=button],input[type=reset],input[type=submit]{
    -webkit-appearance:button;
    cursor:pointer
}
button[disabled],html input[disabled]{
    cursor:default
}
button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0
}
input{
    line-height:normal
}
input[type=checkbox],input[type=radio]{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:0
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{
    height:auto
}
input[type=search]{
    -webkit-appearance:textfield;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
}
fieldset{
    border:1px solid silver;
    margin:0 2px;
    padding:.35em .625em .75em
}
legend{
    border:0;
    padding:0
}
textarea{
    overflow:auto
}
optgroup{
    font-weight:700
}
table{
    border-collapse:collapse;
    border-spacing:0
}
td,th{
    padding:0
}

.sidebar {
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    position: absolute;
    z-index: 9998;
    background-color: #4c4c4c;
    min-height: 100vh;
}

.sidebar.collapsed {
    transition: width .5s ease-in-out;
    width: 30px;
}

.sidebar.expanded {
    transition: width .5s ease-in-out;
    width: 222px;
  }

.sidebar .panel{
    top:30px;
    left:30px;
    bottom:0;
    position:absolute;
    z-index:3001;
    width:192px;
    /* background-color:#807d76 */
}

.sidebar .accordion .panel{
    width:100%;
    background-color:#807d76;
    border-radius:0;
    border:none;
    margin:0;
    box-shadow:none
}
.sidebar .panel .panel-heading{
    background:0 0;
    color:#fff;
    margin:10px 0 0;
    padding-left: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
    background-color:#a5a5a5;
}

.sidebar .panel .legend {
    color: #000;
    background-color: #1f2b35;
    padding: 4px;
    font-size: 14px;
    margin-bottom: 5px;
    border: 0;
}

.sidebar .panel label {
    color: #fff;
    font-weight: 700;
    font-size: .9em;
    letter-spacing: -.02em;
    cursor: pointer;
    position: relative;
    min-height: 1em;
    width: 100%;
    float: left;
    margin-bottom: 0;
    margin-top: 10px;
    padding-left: 20px;
}

.sidebar .panel label input{
    padding-left: 45px;
    top: 1px;
    margin: 0;
}

.sidebar .menuHandle {
    width: 30px;
    background: #2d82f5;
    top: 0px;
    left: 0;
    bottom: 0;
    position: absolute;
}


@media print{
    *,:after,:before{
        background:0 0!important;
        color:#000!important;
        -webkit-box-shadow:none!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) ")"
    }
    a[href^="javascript:"]:after,a[href^="#"]:after{
        content:""
    }
    blockquote,pre{
        border:1px solid #999;
        page-break-inside:avoid
    }
    thead{
        display:table-header-group
    }
    img,tr{
        page-break-inside:avoid
    }
    img{
        max-width:100%!important
    }
    h2,h3,p{
        orphans:3;
        widows:3
    }
    h2,h3{
        page-break-after:avoid
    }
    select{
        background:#fff!important
    }
    .navbar{
        display:none
    }
    .btn>.caret,.dropup>.btn>.caret{
        border-top-color:#000!important
    }
    .label{
        border:1px solid #000
    }
    .table{
        border-collapse:collapse!important
    }
    .table td,.table th{
        background-color:#fff!important
    }
    .table-bordered td,.table-bordered th{
        border:1px solid #ddd!important
    }
}
*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
:after,:before{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
html{
    font-size:10px;
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}
body{
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:14px;
    line-height:1.42857143;
    color:#fff;
    background-color:#555
}
button,input,select,textarea{
    font-family:inherit;
    font-size:inherit;
    line-height:inherit
}
a{
    color:#f90;
    text-decoration:none
}
a:focus,a:hover{
    color:#ff671f;
    text-decoration:underline
}
a:focus{
    outline:thin dotted;
    outline:5px auto -webkit-focus-ring-color;
    outline-offset:-2px
}
figure{
    margin:0
}
img{
    vertical-align:middle
}
.img-responsive{
    display:block;
    max-width:100%;
    height:auto
}
.img-rounded{
    border-radius:6px
}
.img-thumbnail{
    padding:4px;
    line-height:1.42857143;
    background-color:#777;
    border:1px solid #ddd;
    border-radius:4px;
    -webkit-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    display:inline-block;
    max-width:100%;
    height:auto
}
.img-circle{
    border-radius:50%
}
hr{
    margin-top:20px;
    margin-bottom:20px;
    border:0;
    border-top:1px solid #eee
}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0
}
.sr-only-focusable:active,.sr-only-focusable:focus{
    position:static;
    width:auto;
    height:auto;
    margin:0;
    overflow:visible;
    clip:auto
}
[role=button]{
    cursor:pointer
}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{
    font-family:inherit;
    font-weight:500;
    line-height:1.1;
    color:inherit
}
.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{
    font-weight:400;
    line-height:1;
    color:#777
}
.h1,.h2,.h3,h1,h2,h3{
    margin-top:20px;
    margin-bottom:10px
}
.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{
    font-size:65%
}
.h4,.h5,.h6,h4,h5,h6{
    margin-top:10px;
    margin-bottom:10px
}
.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{
    font-size:75%
}
.h1,h1{
    font-size:36px
}
.h2,h2{
    font-size:30px
}
.h3,h3{
    font-size:24px
}
.h4,h4{
    font-size:18px
}
.h5,h5{
    font-size:14px
}
.h6,h6{
    font-size:12px
}
p{
    margin:0 0 10px
}
.lead{
    margin-bottom:20px;
    font-size:16px;
    font-weight:300;
    line-height:1.4
}
@media (min-width:768px){
    .lead{
        font-size:21px
    }
}
.small,small{
    font-size:85%
}
.mark,mark{
    background-color:#fcf8e3;
    padding:.2em
}
.text-left{
    text-align:left
}
.text-right{
    text-align:right
}
.text-center{
    text-align:center
}
.text-justify{
    text-align:justify
}
.text-nowrap{
    white-space:nowrap
}
.text-lowercase{
    text-transform:lowercase
}
.text-uppercase{
    text-transform:uppercase
}
.text-capitalize{
    text-transform:capitalize
}
.text-muted{
    color:#777
}
.text-primary{
    color:#337ab7
}
a.text-primary:hover{
    color:#286090
}
.text-success{
    color:#3c763d
}
a.text-success:hover{
    color:#2b542c
}
.text-info{
    color:#31708f
}
a.text-info:hover{
    color:#245269
}
.text-warning{
    color:#8a6d3b
}
a.text-warning:hover{
    color:#66512c
}
.text-danger{
    color:#a94442
}
a.text-danger:hover{
    color:#843534
}
.bg-primary{
    color:#fff;
    background-color:#337ab7
}
a.bg-primary:hover{
    background-color:#286090
}
.bg-success{
    background-color:#dff0d8
}
a.bg-success:hover{
    background-color:#c1e2b3
}
.bg-info{
    background-color:#d9edf7
}
a.bg-info:hover{
    background-color:#afd9ee
}
.bg-warning{
    background-color:#fcf8e3
}
a.bg-warning:hover{
    background-color:#f7ecb5
}
.bg-danger{
    background-color:#f2dede
}
a.bg-danger:hover{
    background-color:#e4b9b9
}
.page-header{
    padding-bottom:9px;
    margin:40px 0 20px;
    border-bottom:1px solid #eee
}
ol,ul{
    margin-top:0;
    margin-bottom:10px
}
ol ol,ol ul,ul ol,ul ul{
    margin-bottom:0
}
.list-unstyled{
    padding-left:0;
    list-style:none
}
.list-inline{
    padding-left:0;
    list-style:none;
    margin-left:-5px
}
.list-inline>li{
    display:inline-block;
    padding-left:5px;
    padding-right:5px
}
dl{
    margin-top:0;
    margin-bottom:20px
}
dd,dt{
    line-height:1.42857143
}
dt{
    font-weight:700
}
dd{
    margin-left:0
}
@media (min-width:768px){
    .dl-horizontal dt{
        float:left;
        width:160px;
        clear:left;
        text-align:right;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }
    .dl-horizontal dd{
        margin-left:180px
    }
}
abbr[data-original-title],abbr[title]{
    cursor:help;
    border-bottom:1px dotted #777
}
.initialism{
    font-size:90%;
    text-transform:uppercase
}
blockquote{
    padding:10px 20px;
    margin:0 0 20px;
    font-size:17.5px;
    border-left:5px solid #eee
}
blockquote ol:last-child,blockquote p:last-child,blockquote ul:last-child{
    margin-bottom:0
}
blockquote .small,blockquote footer,blockquote small{
    display:block;
    font-size:80%;
    line-height:1.42857143;
    color:#777
}
blockquote .small:before,blockquote footer:before,blockquote small:before{
    content:'\2014 \00A0'
}
.blockquote-reverse,blockquote.pull-right{
    padding-right:15px;
    padding-left:0;
    border-right:5px solid #eee;
    border-left:0;
    text-align:right
}
.blockquote-reverse .small:before,.blockquote-reverse footer:before,.blockquote-reverse small:before,blockquote.pull-right .small:before,blockquote.pull-right footer:before,blockquote.pull-right small:before{
    content:''
}
.blockquote-reverse .small:after,.blockquote-reverse footer:after,.blockquote-reverse small:after,blockquote.pull-right .small:after,blockquote.pull-right footer:after,blockquote.pull-right small:after{
    content:'\00A0 \2014'
}
address{
    margin-bottom:20px;
    font-style:normal;
    line-height:1.42857143
}
.container{
    margin-right:auto;
    margin-left:auto;
}
@media (min-width:768px){
    .container{
        width:100%
    }
}
@media (min-width:992px){
    .container{
        width:100%
    }
}
@media (min-width:1200px){
    .container{
        width:100%
    }
}

@media (min-width:1500px){
    .container{
        width:100%;
    }
}

.container-fluid{
    margin-right:auto;
    margin-left:auto;
    padding-left:15px;
    padding-right:15px
}
.row{
    margin-left:-5px;
    
}
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{
    position:relative;
    min-height:1px;
    padding-left:5px;
    padding-right:5px
}
@media (min-width:12px){
    .col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{
        float:left
    }
    .col-md-12{
        width:100%
    }
    .col-md-11{
        width:91.66666667%
    }
    .col-md-10{
        width:83.33333333%
    }
    .col-md-9{
        width:75%
    }
    .col-md-8{
        width:66.66666667%
    }
    .col-md-7{
        width:58.33333333%;
        height: 600px;
    }
    .col-md-6{
        width:50%
    }
    .col-md-5{
        width:41.66666667%
    }
    .col-md-4{
        width:33.33333333%
    }
    .col-md-3{
        width:25%
    }
    .col-md-2{
        width:16.66666667%
    }
    .col-md-1{
        width:8.33333333%
    }
    .col-md-pull-12{
        right:100%
    }
    .col-md-pull-11{
        right:91.66666667%
    }
    .col-md-pull-10{
        right:83.33333333%
    }
    .col-md-pull-9{
        right:75%
    }
    .col-md-pull-8{
        right:66.66666667%
    }
    .col-md-pull-7{
        right:58.33333333%
    }
    .col-md-pull-6{
        right:50%
    }
    .col-md-pull-5{
        right:41.66666667%
    }
    .col-md-pull-4{
        right:33.33333333%
    }
    .col-md-pull-3{
        right:25%
    }
    .col-md-pull-2{
        right:16.66666667%
    }
    .col-md-pull-1{
        right:8.33333333%
    }
    .col-md-pull-0{
        right:auto
    }
    .col-md-push-12{
        left:100%
    }
    .col-md-push-11{
        left:91.66666667%
    }
    .col-md-push-10{
        left:83.33333333%
    }
    .col-md-push-9{
        left:75%
    }
    .col-md-push-8{
        left:66.66666667%
    }
    .col-md-push-7{
        left:58.33333333%
    }
    .col-md-push-6{
        left:50%
    }
    .col-md-push-5{
        left:41.66666667%;
    }
    .col-md-push-4{
        left:33.33333333%
    }
    .col-md-push-3{
        left:25%
    }
    .col-md-push-2{
        left:16.66666667%
    }
    .col-md-push-1{
        left:8.33333333%
    }
    .col-md-push-0{
        left:auto
    }
    .col-md-offset-12{
        margin-left:100%
    }
    .col-md-offset-11{
        margin-left:91.66666667%
    }
    .col-md-offset-10{
        margin-left:83.33333333%
    }
    .col-md-offset-9{
        margin-left:75%
    }
    .col-md-offset-8{
        margin-left:66.66666667%
    }
    .col-md-offset-7{
        margin-left:58.33333333%
    }
    .col-md-offset-6{
        margin-left:50%
    }
    .col-md-offset-5{
        margin-left:41.66666667%
    }
    .col-md-offset-4{
        margin-left:33.33333333%
    }
    .col-md-offset-3{
        margin-left:25%
    }
    .col-md-offset-2{
        margin-left:16.66666667%
    }
    .col-md-offset-1{
        margin-left:8.33333333%
    }
    .col-md-offset-0{
        margin-left:0
    }
}
.nav{
    margin-bottom:0;
    padding-left:0;
    list-style:none
}
.nav>li{
    position:relative;
    display:block
}
.nav>li>a{
    position:relative;
    display:block;
    padding:10px 15px
}
.nav>li>a:focus,.nav>li>a:hover{
    text-decoration:none;
    background-color:#eee
}
.nav>li.disabled>a{
    color:#777
}
.nav>li.disabled>a:focus,.nav>li.disabled>a:hover{
    color:#777;
    text-decoration:none;
    background-color:transparent;
    cursor:not-allowed
}
.nav>li>a>img{
    max-width:none
}
.navbar{
    position:relative;
    min-height:73px;

}
.navbar-header{
    text-align:center
}
@media (min-width:768px){
    .navbar-header{
        float:left
    }
    .navbar-footer{
        float:right;
        padding-right:30px;
        padding-top: 20px;
    }
}

.navbar-footer{
    text-align:center;
    font-size: 20px;
}

.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{
    margin-right:-15px;
    margin-left:-15px
}
@media (min-width:768px){
    .container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{
        margin-right:0;
        margin-left:0
    }
}
.navbar-brand{
    float:left;
    padding:15px 15px;
    font-size:18px;
    line-height:20px;
    height:73px
}
.navbar-brand:focus,.navbar-brand:hover{
    text-decoration:none
}
@media (min-width:768px){
    .navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{
        margin-left:-15px
    }
}
.navbar-nav>li>a{
    padding-top:15px;
    padding-bottom:15px;
    line-height:20px
}
@media (min-width:768px){
    .navbar-left{
        float:left!important
    }
    .navbar-right{
        float:right!important;
        margin-right:-15px
    }
    .navbar-right~.navbar-right{
        margin-right:0
    }
}
.navbar-default{
    background-color:#000;
    border-color:#000
}
.navbar-default .navbar-nav>li>a{
    color:#fff
}
.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{
    color:#ff671f;
    background-color:transparent
}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{
    color:#555;
    background-color:#000
}
.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover{
    color:#555;
    background-color:transparent
}
.jumbotron{
    padding:30px 15px;
    margin-bottom:30px;
    color:inherit;
    background-color:#fff
}
.jumbotron .h1,.jumbotron h1{
    color:inherit
}
.jumbotron p{
    margin-bottom:15px;
    font-size:21px;
    font-weight:200
}
.jumbotron>hr{
    border-top-color:#e6e6e6
}
/* .container .jumbotron,.container-fluid .jumbotron{
    border-radius:6px
} */
.jumbotron .container{
    max-width:100%
}
@media screen and (min-width:768px){
    .jumbotron{
        padding:48px 0
    }
    .container .jumbotron,.container-fluid .jumbotron{
        padding-left:60px;
        padding-right:60px
    }
    .jumbotron .h1,.jumbotron h1{
        font-size:63px
    }
}
.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.nav:after,.nav:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.row:after,.row:before{
    content:" ";
    display:table
}
.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.nav:after,.navbar-header:after,.navbar:after,.row:after{
    clear:both
}
.center-block{
    display:block;
    margin-left:auto;
    margin-right:auto
}
.pull-right{
    float:right!important
}
.pull-left{
    float:left!important
}
.hide{
    display:none!important
}
.show{
    display:block!important
}
.invisible{
    visibility:hidden
}
.text-hide{
    font:0/0 a;
    color:transparent;
    text-shadow:none;
    background-color:transparent;
    border:0
}
.hidden{
    display:none!important
}
.affix{
    position:fixed
}
@media (min-width:768px){
    .form-inline .form-group{
        display:inline-block;
        margin-bottom:0;
        vertical-align:middle
    }
}
.buttons>li{
    float:left;
    width:33.333%;
    text-align:center
}
.buttons>li>a{
    line-height:1.42857143
}
@media (min-width:992px){
    .buttons>li>a{
        line-height:43px
    }
}
@media (min-width:768px){
    .buttons>li{
        text-align:left;
        width:auto
    }
}
@media (min-width:768px){
    .buttons{
        float:right
    }
}
.navbar-brand{
    min-width:281px
}
.navbar-brand img{
    max-width:251px
}
.page-footer{
    margin-top:15px;
    text-align:center
}
.asn-logo{
    margin:15px 0;
    max-width:150px
}
img[src*=svg]{
    width:100%\9;
    width:100%
}
main{
    overflow:hidden;
    background-color:#fff;
    /* border-radius:6px */
}
#pan-layer{
    cursor:move
}
.svg-message{
    display:none;
    color:#000
}
.no-svg .svg-message{
    display:block
}
.no-svg #pan-layer{
    display:none
}


/* #myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

#myImg:hover {opacity: 0.7;} */

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
/* width: 80%;
max-width: 700px; */
max-height: 60vh;
}

/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)} 
to {-webkit-transform:scale(1)}
}

@keyframes zoom {
from {transform:scale(0)} 
to {transform:scale(1)}
}

/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}

/* Absolute Center Spinner */
.loading {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  
  /* Transparent Overlay */
  .loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
      background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));
  
    background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
  }
  
  /* :not(:required) hides these rules from IE9 and below */
  .loading:not(:required) {
    /* hide "loading..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
  }
  
  .loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 150ms infinite linear;
    -moz-animation: spinner 150ms infinite linear;
    -ms-animation: spinner 150ms infinite linear;
    -o-animation: spinner 150ms infinite linear;
    animation: spinner 150ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
  }
  
  /* Animation */
  
  @-webkit-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-moz-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-o-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }