/*----------------------- Demo Page Style Css----------------------*/

body {
  color: #777777;
  font-size: 13px;
  font-family: "Open Sans",sans-serif;
  background-color: #ffffff;
  font-weight: 400;
  line-height: 24px;
}

.dark-demo, .light-demo {
    height: 100vh;
    cursor: pointer;
}

@media (max-width:991px) {
    .dark-demo, .light-demo {
        height: 50vh;
    }
}

.dark-demo {
    background-image: url(demo-images/dark-demo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000;
    background-position: top center;
}

.light-demo {
    background-image: url(demo-images/light-demo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000;
    background-position: top center;
}

.demo-item .overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0;
    background: rgba(103, 58, 183, 0.7);
    width: 100%;
    height: 100%;
    transition: .3s ease;
    opacity: 0;
}

.demo-item:hover .overlay {
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity 0.7s;
    transition: opacity 0.7s;
}

.demo-item .overlay h3 {
    font-size: 80px;
    letter-spacing: 1px;
    color: #fff;
    opacity: 0;
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -o-animation-delay: .2s;
    animation-delay: .2s;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 50px, 0);
}

.demo-item .overlay p {
    text-transform: none;
    color: #fff;
    letter-spacing: 1px;
    font-size: 20px;
    opacity: 0;
    -webkit-animation-delay: .4s;
    -moz-animation-delay: .4s;
    -o-animation-delay: .4s;
    animation-delay: .4s;
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: opacity 0.6s, transform 0.6s;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 60px, 0);
}


.demo-item:hover h3, .demo-item:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.demo-item a {
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #fff;
    padding-bottom: 4px;
}

.demo-item a:hover, .demo-item a:focus {
    color: #fff !important;
    text-decoration: none;
}

.demo-item .content {
    vertical-align: middle;
    display: table;
    width: 100%;
    height: 100%;
}

.demo-item .content .block {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}