body{
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #333;
}

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

.form-control{
    font-size: 16px;
}

a, a:focus, a:hover {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease; 
}
a.link{
    font-size: 16px;
    font-weight: 600;
    color: #3498db;
}

/* LOADING */
#loading {
    display: none;
    top: 0;
    left: 0;
    z-index: 9999 !important;;
    background: rgba(255,255,255,.8);
}

h1,h2,h3,h4{
	color: #3498db;
}

input, textarea, select, .btn,
input:focus, textarea:focus, button:focus, select:focus{
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    -o-appearance: none !important;
    appearance: none !important;
    outline: 0;
}

.passos input[type=radio]{
    display: none;
}

.form-control,
.form-control:focus,
.form-control:active{
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 0px;
    padding: 0 20px;
    box-shadow: none;
}

// Text Size
.txt-small{font-size: 12px !important;}
.txt-normal{font-size: 16px !important;}
.txt-medium{font-size: 18px !important;}
.txt-large{font-size: 40px !important;}
.txt-extra{font-size: 57px !important;}
.txt-big{font-size: 50px !important;}

.inline{
    width: auto !important;
    display: inline-block !important;
}

.btn{
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4em;
    padding: 12px 32px;
    border-color: transparent;
    letter-spacing: 1px;
    max-width: 100%;
    white-space: normal;
    transition: all 0.2s ease;
}

.btn-lg{
    font-size: 15px;
    padding: 18px 32px;
}

.btn-style{
    color: #fff;
    font-weight: 400;
    border-radius: 50px;
    background-color: #4c5057;
}
.btn-style:hover{
    color: #fff;
    background-color: #373a40;
}
.btn-green{
    background-color: #3ed662;
    margin-bottom: 10px;
}
.btn-icon{
    position: relative;
    padding-right: 85px;
}
.btn-icon:after{
    font: normal normal normal 14px/1 FontAwesome;
    width: 20px;
    right: 20px;
    height: 20px;
    top: 13px;
    font-size: 19px;
    float: right;
    content: "\f138";
    position: absolute;
}

.btn-circle{
    border: 0;
    color: #fff;
    cursor: pointer;
    font-weight: 400;
    letter-spacing: 2px;
    background-color: transparent;
}
.btn-circle:hover{color: #fff;}
.btn-circle span.arrow{
    width: 60px;
    height: 60px;
    display: inline-block;
    background-color: #4c5057;
    background-image: url(../img/arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    border-radius: 50px;
    margin-left: 20px;
    vertical-align: middle;
    transition: all 0.2s ease;
}
.btn-circle:hover span.arrow{
    margin-left: 10px;
    margin-right: 10px;
}

.btn-center{margin: 0 auto;display: block;}
a, a:active, a:focus, .btn:active:focus, .btn:focus, .btn.active, .btn:active,
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus{
    outline: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
    background-image: none;
}

.h1, .h2, .h3, h1, h2, h3{
    margin-top: 5px;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-style: italic;
}
@media (max-width: 768px) {
    .h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5{
        font-size: 22px !important;
    }

    .txt-small{font-size: 12px !important;}
    .txt-normal{font-size: 16px !important;}
    .txt-medium{font-size: 18px !important;}
    .txt-large,.txt-extra,.txt-big{font-size: 35px !important;}
}

h5.alerta{
    font-weight: 600;
    font-size: 20px;
    margin: 0;  
    text-transform: uppercase;
}

section .titulo{
    padding: 0 20px;
    margin-bottom: 45px;
    text-transform: uppercase;
}

.vertical-center{
    display: table;
}

.vertical-center .middle{
    margin: 15px 0;
    float: none;
    display: table-cell;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .vertical-center .middle{
        width: 100%;
        display: block;
    }
}

.clear{display: block;padding: 7.5px 0;}

.mg-30{height: 30px;}
.mg-45{height: 45px;}
.mg-60{height: 60px;}
.mg-75{height: 75px;}
.mg-90{height: 90px;}
.mg-120{height: 120px;}
.mg-160{height: 160px;}

.pg-15{padding-top: 15px;padding-bottom: 15px;}
.pg-30{padding-top: 30px;padding-bottom: 30px;}
.pg-45{padding-top: 45px;padding-bottom: 45px;}
.pg-60{padding-top: 60px;padding-bottom: 60px;}
.pg-75{padding-top: 75px;padding-bottom: 75px;}
.pg-90{padding-top: 90px;padding-bottom: 90px;}
.pg-120{padding-top: 120px;padding-bottom: 120px;}
.pg-160{padding-top: 160px;padding-bottom: 160px;}

.container-box{display: block;}
.container-box.pg-30{padding: 30px;}
.container-box.pg-45{padding: 45px;}
.container-box.pg-60{padding: 60px;}
.container-box.center{margin: 0 auto;}
.container-box.w-full{float: left;width: 100%;}

@media only screen and (max-width: 767px){
    .pg-30{padding-top: 15px;padding-bottom: 15px;}
    .pg-45,.pg-60{padding-top: 30px;padding-bottom: 30px;}
    .pg-75,.pg-90,.pg-120,.pg-160{padding-top: 60px;padding-bottom: 60px;}

}

.max-250{max-width: 250px;}
.max-350{max-width: 350px;}
.max-450{max-width: 450px;}
.max-550{max-width: 550px;}
.max-650{max-width: 650px;}
.max-950{max-width: 950px;}

.no-pg{padding:0 !important;}
.no-mg{margin:0 !important;}

.bg-white{background-color: #ffffff;}
.bg-gray{background-color: #373a40;display: block;color: #fff;position: relative;}

.borda-top{border-top:1px solid rgba(255, 255, 255, 0.23);}
.borda-bottom{border-bottom:1px solid rgba(255, 255, 255, 0.23);}
.borda-right{border-right:1px solid rgba(255, 255, 255, 0.23);}
.borda-left{border-left:1px solid rgba(255, 255, 255, 0.23);}

.dropdown-menu{
    font-size: 15px;
    border-radius: 0;
    border-color: transparent;
    -webkit-box-shadow: 0 6px 40px rgba(0, 0, 0, 0.09);
    box-shadow: 0 6px 40px rgba(0, 0, 0, 0.09);
}

.background-image{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.img-front{
    z-index: -1;
}

.img-front img{
    width: 120%;
    box-shadow: -20px 20px 60px rgba(0, 0, 0, 0.23);
}

.box{
    z-index: 15;
    position: relative;
}

@media (max-width: 768px) {
  .text-sm-left{text-align: left !important;}
  .text-sm-right{text-align: right !important;}
  .text-sm-center{text-align: center !important;}
  .container-box{padding: 15px !important;}

  .img-front img{
    width: 100%;
}
}

@media (max-width: 992px) {
  .text-md-left{text-align: left !important;}
  .text-md-right{text-align: right !important;}
  .text-md-center{text-align: center !important;}
}

.hidden{ display: none !important;}
@media (max-width: 575px){.hidden-xs-down {display: none !important;}}
@media (min-width: 576px){.hidden-sm-up {display: none !important;}}
@media (max-width: 767px){.hidden-sm-down {display: none !important;}}
@media (min-width: 768px){.hidden-md-up {display: none !important;}}
@media (max-width: 991px){.hidden-md-down {display: none !important;}}
@media (min-width: 992px){.hidden-lg-up {display: none !important;}}
@media (max-width: 1199px){.hidden-lg-down {display: none !important;}}
@media (min-width: 1200px){.hidden-xl-up {display: none !important;}}

.m-center{
    margin: 0 auto;
}

.valores img{
    width: 50px;
    float: left;
}

.session02 h3, .session02 p{
    margin-bottom: 30px;
}

.valores h4{
    color: #fff;
    float: left;
    padding-left: 10px;
    font-size: 21px;
}

.valores span{
    color: #fff;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    position: relative;
    display: block;
}

.valores .topico{
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}

.session01 input{
    max-width: 600px;
    height: 62px;
    border: 1px solid #c2c2c2;
    margin: 0 auto;
    /* padding-top: 10px; */
    display: block;
    position: relative;
    margin: 20px auto 35px;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-radius: 4px;
}

.session01 button{
	text-align: center;
    margin: 0 auto;
    display: block;
    width: 100%;
    max-width: 600px;
    padding: 15px 40px;
    background: #3498db;
    border: none;
    border-radius: 4px;
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.session01 p{
	max-width: 600px;
    margin: 0 auto;
    font-size: 19px;
    margin-top: 40px;
    position: relative;
}

.modal-footer, .modal-header{
	border: none;
}

.title-modal{
	float: left;
	font-size: 22px;
}

.modal-body input.form-control, .modal-body select.form-control {
    margin: 10px 0;
    height: 50px;
    border-radius: 4px;
}

.modal-body textarea{
	border-radius: 4px;
    min-height: 150px;
}

.modal-body{
	padding: 0 15px;
}

.modal-content{
	box-shadow: 0 5px 25px rgba(0,0,0,.5);
	border: 1px solid rgba(241, 241, 241, 0.2);
}

.passos,.semroubar,.incompleto{
	display: none;
}

body{
   background: url(../img/background.jpg);
   background-size: cover;
   /* background-position: 0 -300px; */
   background-repeat: no-repeat;
}

.presession{
    width: 100%;
    min-height: 100%;
    background: rgba(105, 104, 104, 0.21);
    background: #4B1248;
    background: -webkit-linear-gradient(to right, #4B1248, #F0C27B);
    background: linear-gradient(to left, rgba(75, 18, 72, 0.48), rgba(240, 194, 123, 0.58));
}

@media(min-width: 980px){
    .presession .container{
       position: absolute;
       margin: 0 auto;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }
}

.presession h3, .presession p{
	color: #fff;
}

.session02 p{
    text-align: center;
}

.session02{
    display: none;
}

.session01 button{
	
  background: #f857a6; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #f857a6, #ff5858); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #f857a6, #ff5858);
}

.form-control, .form-control:focus, .form-control:active{
    border: 1px solid #bbb;
}

input.form-control::placeholder {
    color: #555;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #555;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 color:    #555;
 opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
 color:    #555;
 opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color:    #555;
}
::-ms-input-placeholder { /* Microsoft Edge */
 color:    #555;
}

.windows8 {
    position: relative;
    width: 78px;
    height:78px;
    margin:auto;
}

.windows8 .wBall {
    position: absolute;
    width: 74px;
    height: 74px;
    opacity: 0;
    transform: rotate(225deg);
    -o-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    animation: orbit 6.96s infinite;
    -o-animation: orbit 6.96s infinite;
    -ms-animation: orbit 6.96s infinite;
    -webkit-animation: orbit 6.96s infinite;
    -moz-animation: orbit 6.96s infinite;
}

.windows8 .wBall .wInnerBall{
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgb(0,0,0);
    left:0px;
    top:0px;
    border-radius: 10px;
}

.windows8 #wBall_1 {
    animation-delay: 1.52s;
    -o-animation-delay: 1.52s;
    -ms-animation-delay: 1.52s;
    -webkit-animation-delay: 1.52s;
    -moz-animation-delay: 1.52s;
}

.windows8 #wBall_2 {
    animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}

.windows8 #wBall_3 {
    animation-delay: 0.61s;
    -o-animation-delay: 0.61s;
    -ms-animation-delay: 0.61s;
    -webkit-animation-delay: 0.61s;
    -moz-animation-delay: 0.61s;
}

.windows8 #wBall_4 {
    animation-delay: 0.91s;
    -o-animation-delay: 0.91s;
    -ms-animation-delay: 0.91s;
    -webkit-animation-delay: 0.91s;
    -moz-animation-delay: 0.91s;
}

.windows8 #wBall_5 {
    animation-delay: 1.22s;
    -o-animation-delay: 1.22s;
    -ms-animation-delay: 1.22s;
    -webkit-animation-delay: 1.22s;
    -moz-animation-delay: 1.22s;
}



@keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        transform: rotate(180deg);
        animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        transform: rotate(300deg);
        animation-timing-function: linear;
        origin:0%;
    }

    30% {
        opacity: 1;
        transform:rotate(410deg);
        animation-timing-function: ease-in-out;
        origin:7%;
    }

    39% {
        opacity: 1;
        transform: rotate(645deg);
        animation-timing-function: linear;
        origin:30%;
    }

    70% {
        opacity: 1;
        transform: rotate(770deg);
        animation-timing-function: ease-out;
        origin:39%;
    }

    75% {
        opacity: 1;
        transform: rotate(900deg);
        animation-timing-function: ease-out;
        origin:70%;
    }

    76% {
        opacity: 0;
        transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        transform: rotate(900deg);
    }
}

@-o-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -o-transform: rotate(180deg);
        -o-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -o-transform: rotate(300deg);
        -o-animation-timing-function: linear;
        -o-origin:0%;
    }

    30% {
        opacity: 1;
        -o-transform:rotate(410deg);
        -o-animation-timing-function: ease-in-out;
        -o-origin:7%;
    }

    39% {
        opacity: 1;
        -o-transform: rotate(645deg);
        -o-animation-timing-function: linear;
        -o-origin:30%;
    }

    70% {
        opacity: 1;
        -o-transform: rotate(770deg);
        -o-animation-timing-function: ease-out;
        -o-origin:39%;
    }

    75% {
        opacity: 1;
        -o-transform: rotate(900deg);
        -o-animation-timing-function: ease-out;
        -o-origin:70%;
    }

    76% {
        opacity: 0;
        -o-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -o-transform: rotate(900deg);
    }
}

@-ms-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -ms-transform: rotate(180deg);
        -ms-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -ms-transform: rotate(300deg);
        -ms-animation-timing-function: linear;
        -ms-origin:0%;
    }

    30% {
        opacity: 1;
        -ms-transform:rotate(410deg);
        -ms-animation-timing-function: ease-in-out;
        -ms-origin:7%;
    }

    39% {
        opacity: 1;
        -ms-transform: rotate(645deg);
        -ms-animation-timing-function: linear;
        -ms-origin:30%;
    }

    70% {
        opacity: 1;
        -ms-transform: rotate(770deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin:39%;
    }

    75% {
        opacity: 1;
        -ms-transform: rotate(900deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin:70%;
    }

    76% {
        opacity: 0;
        -ms-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -ms-transform: rotate(900deg);
    }
}

@-webkit-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -webkit-transform: rotate(180deg);
        -webkit-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -webkit-transform: rotate(300deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin:0%;
    }

    30% {
        opacity: 1;
        -webkit-transform:rotate(410deg);
        -webkit-animation-timing-function: ease-in-out;
        -webkit-origin:7%;
    }

    39% {
        opacity: 1;
        -webkit-transform: rotate(645deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin:30%;
    }

    70% {
        opacity: 1;
        -webkit-transform: rotate(770deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin:39%;
    }

    75% {
        opacity: 1;
        -webkit-transform: rotate(900deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin:70%;
    }

    76% {
        opacity: 0;
        -webkit-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(900deg);
    }
}

@-moz-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -moz-transform: rotate(180deg);
        -moz-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -moz-transform: rotate(300deg);
        -moz-animation-timing-function: linear;
        -moz-origin:0%;
    }

    30% {
        opacity: 1;
        -moz-transform:rotate(410deg);
        -moz-animation-timing-function: ease-in-out;
        -moz-origin:7%;
    }

    39% {
        opacity: 1;
        -moz-transform: rotate(645deg);
        -moz-animation-timing-function: linear;
        -moz-origin:30%;
    }

    70% {
        opacity: 1;
        -moz-transform: rotate(770deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin:39%;
    }

    75% {
        opacity: 1;
        -moz-transform: rotate(900deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin:70%;
    }

    76% {
        opacity: 0;
        -moz-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -moz-transform: rotate(900deg);
    }
}

.master-loading{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.51);
    top: 0;
}

.img-olho{
    max-width: 220px;
    /* margin: 0 auto; */
    display: block;
    margin-bottom: 10px;
}

.master-loading .windows8{
    top: 50%;
}

.alert-email{
    display: none;
}

label.error{
    color: red;
    font-size: 12px;
    font-weight: 500;
}


/* MOBILE *//* MOBILE *//* MOBILE *//* MOBILE *//* MOBILE *//* MOBILE *//* MOBILE */
/* MOBILE *//* MOBILE *//* MOBILE *//* MOBILE *//* MOBILE *//* MOBILE *//* MOBILE */
@media(max-width: 768px){
    .modal .btn{
        width: calc(100% - 10px);
        margin: 5px;
    }

    .modal .close{
        position: absolute;
        right: 20px;
    }
}

.btn-sem-roubar{
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
/*
@media(min-width: 1199px){
    .modal.in .modal-dialog {
        -webkit-transform: translate(0,50%);
        -ms-transform: translate(0,50%);
        -o-transform: translate(0,50%);
        transform: translate(0,50%);
    }
    }*/



    .js .inputfile {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }

    .inputfile + label {
        max-width: 80%;
        font-size: 1.25rem;
        /* 20px */
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        padding: 0.625rem 1.25rem;
        /* 10px 20px */
    }

    .no-js .inputfile + label {
        display: none;
    }

    .inputfile:focus + label,
    .inputfile.has-focus + label {
        outline: 1px dotted #000;
        outline: -webkit-focus-ring-color auto 5px;
    }

    .inputfile + label * {
        /* pointer-events: none; */
        /* in case of FastClick lib use */
    }

    .inputfile + label svg {
        width: 1em;
        height: 1em;
        vertical-align: middle;
        fill: currentColor;
        margin-top: -0.25em;
        /* 4px */
        margin-right: 0.25em;
        /* 4px */
    }


    /* style 1 */

    .inputfile-1 + label {
        color: #f1e5e6;
        background-color: #d3394c;
    }

    .inputfile-1:focus + label,
    .inputfile-1.has-focus + label,
    .inputfile-1 + label:hover {
        background-color: #722040;
    }

    .errorLogo{
        color: red;
        display: none;
    }


    #uploadImage{
        position: relative;
        border: 2px dashed #ddd;
        max-width: 100%;
        padding: 50px;
        text-align: center;
    }
    #uploadedImage{
        border: 2px dashed #ddd;
        text-align: center;
        width: 100%;
        max-height: 153px;
        display: none;
        background: url(../img/fundo-trans.png);
    }

    label.btn span {
      font-size: 1.3em ;
  }

  label input[type="radio"]:checked ~ .fa-circle {
    background: #333;
    border-radius: 50%;
}
label:hover input[type="radio"] ~ .fa {
    color: #333;
}

label input[type="checkbox"] ~ svg.fa.fa-square-o{
    color: #c8c8c8;    display: inline;
}
label input[type="checkbox"] ~ svg.fa.fa-check-square-o{
    display: none;
}
label input[type="checkbox"]:checked ~ svg.fa.fa-square-o{
    display: none;
}
label input[type="checkbox"]:checked ~ svg.fa.fa-check-square-o{
    color: #7AA3CC;    display: inline;
}
label:hover input[type="checkbox"] ~ svg.fa {
    color: #7AA3CC;
}

div[data-toggle="buttons"] label.active{
    color: #333;
}

div[data-toggle="buttons"] label {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 2em;
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
    cursor: pointer;
    background-color: none;
    border: 0px solid 
    #333;
    border-radius: 3px;
    color: #333;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

div[data-toggle="buttons"] label:hover {
    color: #7AA3CC;
}

div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.labelRadio h4{
    color: #333;
}

div[data-toggle="buttons"] label.error{
    overflow: hidden;
    display: block;
    width: 100%;
    color: red;
    font-size: 12px;
    font-weight: 500;
}

#notImage span{
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    float: right;
    margin-top: 10px;
    display: none;
}

/** LIGHTBOX MARKUP **/
.lightbox {
	/* Default to hidden */
	display: none;

	/* Overlay entire screen */
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	/* A bit of padding around image */
	padding: 1em;

	/* Translucent background */
	background: rgba(0, 0, 0, 0.8);
}

/* Unhide the lightbox when it's the target */
.lightbox:target {
    display: block;
}

.lightbox span {
    /* Full width and height */
    display: block;
    width: 100%;
    height: 100%;

    /* Size and position background image */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}