home/static/css/style.css

body{
    font-family:"Inconsolata",Arial,sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:1.7;
    color:#333;
    background:#000
}

li {
  color: white;
  list-style: none;
  font-size: 22px;
}

#page{
    position:relative;
    overflow-x:hidden;
    width:100%;
    height:100%;
    -webkit-transition:0.5s;
    -o-transition:0.5s;
    transition:0.5s
}
.offcanvas #page{
    overflow:hidden;
    position:absolute
}
.offcanvas #page:after{
    -webkit-transition:2s;
    -o-transition:2s;
    transition:2s;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:101;
    background:rgba(0,0,0,0.7);
    content:""
}
a{
    color:#623D4F;
    -webkit-transition:0.5s;
    -o-transition:0.5s;
    transition:0.5s
}
a:hover,a:active,a:focus{
    color:#623D4F;
    outline:none;
    text-decoration:underline
}
p{
    margin-bottom:30px
}
h1,h2,h3,h4,h5,h6,figure{
    color:#fff;
    font-family:"Inconsolata",Arial,sans-serif;
    font-weight:400;
    margin:0 0 20px 0
}
::-webkit-selection{
    color:#fff;
    background:#623D4F
}
::-moz-selection{
    color:#fff;
    background:#623D4F
}
::selection{
    color:#fff;
    background:#623D4F
}
.cisti-nav{
    background:#fff
}
.cisti-nav .top-menu{
    padding:28px 0
}
.cisti-nav #cisti-logo{
    font-size:32px;
    margin:0;
    padding:0;
    text-transform:uppercase;
    font-weight:700;
    font-family:"Inconsolata",Arial,sans-serif
}
.cisti-nav #cisti-logo a span{
    color:#623D4F
}
.cisti-nav a{
    padding:5px 10px;
    color:#000
}
@media screen and (max-width: 768px){
    .cisti-nav .menu-1{
        display:none
    }
}
.cisti-nav ul{
    padding:0;
    margin:5px 0 0 0
}
.cisti-nav ul li{
    padding:0;
    margin:0;
    list-style:none;
    display:inline
}
.cisti-nav ul li a{
    font-size:18px;
    padding:30px 15px;
    color:rgba(0,0,0,0.7);
    -webkit-transition:0.5s;
    -o-transition:0.5s;
    transition:0.5s
}
.cisti-nav ul li a:hover,.cisti-nav ul li a:focus,.cisti-nav ul li a:active{
    color:#000
}
.cisti-nav ul li.has-dropdown{
    position:relative
}
.cisti-nav ul li.has-dropdown .dropdown{
    width:140px;
    -webkit-box-shadow:0px 14px 33px -9px rgba(0,0,0,0.75);
    box-shadow:0px 14px 33px -9px rgba(0,0,0,0.75);
    z-index:1002;
    visibility:hidden;
    opacity:0;
    position:absolute;
    top:40px;
    left:0;
    text-align:left;
    background:#000;
    padding:20px;
    -webkit-border-radius:4px;
    -ms-border-radius:4px;
    border-radius:4px;
    -webkit-transition:0s;
    -o-transition:0s;
    transition:0s
}
.cisti-nav ul li.has-dropdown .dropdown:before{
    bottom:100%;
    left:40px;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
    border-bottom-color:#000;
    border-width:8px;
    margin-left:-8px
}
.cisti-nav ul li.has-dropdown .dropdown li{
    display:block;
    margin-bottom:7px
}
.cisti-nav ul li.has-dropdown .dropdown li:last-child{
    margin-bottom:0
}
.cisti-nav ul li.has-dropdown .dropdown li a{
    padding:2px 0;
    display:block;
    color:#999;
    line-height:1.2;
    text-transform:none;
    font-size:13px;
    letter-spacing:0
}
.cisti-nav ul li.has-dropdown .dropdown li a:hover{
    color:#fff
}
.cisti-nav ul li.has-dropdown:hover a,.cisti-nav ul li.has-dropdown:focus a{
    color:#000
}
.cisti-nav ul li.btn-cta a{
    padding:30px 0px !important;
    color:#fff
}
.cisti-nav ul li.btn-cta a span{
    background:#623d4f;
    padding:4px 10px;
    display:inline-block;
    zoom:1;
    *display:inline;
    -webkit-transition:0.3s;
    -o-transition:0.3s;
    transition:0.3s;
    -webkit-border-radius:100px;
    -moz-border-radius:100px;
    -ms-border-radius:100px;
    border-radius:100px
}
.cisti-nav ul li.btn-cta a:hover span{
    -webkit-box-shadow:0px 14px 20px -9px rgba(0,0,0,0.75);
    box-shadow:0px 14px 20px -9px rgba(0,0,0,0.75)
}
.cisti-nav ul li.active>a{
    color:#000 !important;
    position:relative
}
.cisti-nav ul li.active>a:after{
    position:absolute;
    bottom:25px;
    left:0;
    right:0;
    content:'';
    width:30px;
    height:2px;
    background:#623D4F;
    margin:0 auto
}
#cisti-counter,.cisti-bg,.product{
    background-size:cover;
    background-position:top center;
    background-repeat:no-repeat;
    position:relative
}
.cisti-video{
    overflow:hidden
}
@media screen and (max-width: 992px){
    .cisti-video{
        height:450px
    }
}
.cisti-video a{
    z-index:1001;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-45px;
    margin-left:-45px;
    width:90px;
    height:90px;
    display:table;
    text-align:center;
    background:#fff;
    -webkit-box-shadow:0px 14px 30px -15px rgba(0,0,0,0.75);
    -ms-box-shadow:0px 14px 30px -15px rgba(0,0,0,0.75);
    -o-box-shadow:0px 14px 30px -15px rgba(0,0,0,0.75);
    box-shadow:0px 14px 30px -15px rgba(0,0,0,0.75);
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    border-radius:50%
}
.cisti-video a i{
    text-align:center;
    display:table-cell;
    vertical-align:middle;
    font-size:40px
}
.cisti-video .overlay{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.3);
    -webkit-transition:0.5s;
    -o-transition:0.5s;
    transition:0.5s
}
.cisti-video:hover .overlay{
    background:rgba(0,0,0,0.7)
}
.cisti-video:hover a{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -o-transform:scale(1.1);
    transform:scale(1.1)
}
#cisti-header .display-tc,.cisti-cover .display-tc{
    display:table-cell !important;
    vertical-align:middle
}
#cisti-header .display-tc h1,#cisti-header .display-tc h2,.cisti-cover .display-tc h1,.cisti-cover .display-tc h2{
    margin:0;
    padding:0;
    color:white;
}
#cisti-header .display-tc h1,.cisti-cover .display-tc h1{
    margin-bottom:20px;
    font-size:54px;
    line-height:1.3;
    font-weight:300
}
@media screen and (max-width: 768px){
    #cisti-header .display-tc h1,.cisti-cover .display-tc h1{
        font-size:30px
    }
}
#cisti-header .display-tc h2,.cisti-cover .display-tc h2{
    font-size:20px;
    line-height:1.5;
    margin-bottom:30px
}
#cisti-header .display-tc .btn,.cisti-cover .display-tc .btn{
    padding:15px 30px;
    color:#fff;
    border:none !important;
    font-size:18px
}
@media screen and (max-width: 768px){
    #cisti-header .display-tc .btn,.cisti-cover .display-tc .btn{
        width:80%;
        margin:0 auto
    }
}
.btn {
    background-color: white;
    color: black !important;
}

.btn:hover {
    background-color: lightgrey;
}

#cisti-features{
    background:#000;
}
#cisti-features .services-padding{
    padding:7em 0
}
#cisti-features .feature-left{
    margin-bottom:40px;
    float:left
}
@media screen and (max-width: 992px){
    #cisti-features .feature-left{
        margin-bottom:30px
    }
}
#cisti-features .feature-left .icon i{
    font-size:30px;
    color:#1a1a1a !important
}
#cisti-features .feature-left .icon{
    display:table;
    float:left;
    text-align:center;
    width:60px;
    height:60px;
    background:#fff;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    border-radius:50%
}
#cisti-features .feature-left .icon i{
    display:table-cell;
    vertical-align:middle;
    height:60px;
    color:#623D4F !important
}
#cisti-features .feature-left .feature-copy{
    float:right;
    width:78%;
    padding: 15px;
}

.logo {
    width: 40px;
    margin-top: 10px;
}

@media screen and (max-width: 768px){
    #cisti-features .feature-left .feature-copy{
        width:84%
    }
}
@media screen and (max-width: 480px){
    #cisti-features .feature-left .feature-copy{
        width:70%
    }
}
#cisti-features .feature-left h3{
    font-size:24px;
    font-weight:400;
    color: red;
}
#cisti-features .feature-left p{
    font-size:22px;
    color: #fff;
}
#cisti-features .feature-left p:last-child{
    margin-bottom:0
}
#cisti-features .ipad-bg{
    background-size:cover;
    background-position:top center;
    background-repeat:no-repeat;
    position:relative;
    height:430px
}
@media screen and (max-width: 768px){
    #cisti-features .ipad-bg{
        height:210px
    }
}
@media screen and (max-width: 480px){
    #cisti-features .ipad-bg{
        display:none
    }
}
#cisti-wireframe{
    border:none !important
}
#cisti-wireframe blockquote{
    border:none;
    padding:0;
    font-weight:bold
}
.user-frame{
    width:90%;
    padding:3em;
    -webkit-box-shadow:0px 0px 24px 0px rgba(0,0,0,0.13);
    box-shadow:0px 0px 24px 0px rgba(0,0,0,0.13)
}
@media screen and (max-width: 768px){
    .user-frame{
        width:100%;
        margin-bottom:3em
    }
}
.user-frame h3{
    line-height:34px
}
.user-frame p{
    color:rgba(0,0,0,0.6)
}
.user-frame span{
    font-weight:bold
}
.user-frame small{
    color:#2A528A
}
#cisti-slider{
    background:#2A528A
}
#cisti-slider .heading h2,#cisti-slider .heading p{
    color:#fff
}
#cisti-slider .heading h2{
    font-size:40px
}
#cisti-slider .heading p{
    font-style:22px
}
#cisti-hero{
    height:500px !important;
    background:url(../images/loader.gif) no-repeat center center
}
#cisti-hero .btn{
    font-size:24px
}
#cisti-hero .btn.btn-primary{
    padding:14px 30px !important
}
#cisti-hero .flexslider{
    border:none;
    z-index:1;
    margin-bottom:0
}
#cisti-hero .flexslider .slides{
    position:relative
}
#cisti-hero .flexslider .slides li{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:top center;
    height:600px !important;
    position:relative;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    border-radius:4px
}
#cisti-hero .flexslider .flex-control-nav{
    top:-30px !important;
    z-index:1000;
    right:0;
    float:right;
    width:auto
}
#cisti-hero .flexslider .flex-control-nav li{
    margin-bottom:10px
}
#cisti-hero .flexslider .flex-control-nav li a{
    background:rgba(255,255,255,0.3);
    box-shadow:none;
    width:12px;
    height:12px;
    cursor:pointer
}
#cisti-hero .flexslider .flex-control-nav li a.flex-active{
    cursor:pointer;
    background:transparent;
    border:1px solid #fff
}
#cisti-hero .flexslider .flex-direction-nav{
    display:none
}
#cisti-hero .flexslider .slider-text-bg .desc{
    margin-top:9em;
    padding:2em;
    background:#E8E6E9;
    -webkit-box-shadow:0px 21px 24px 0px rgba(0,0,0,0.13);
    box-shadow:0px 21px 24px 0px rgba(0,0,0,0.13);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    border-radius:10px
}
@media screen and (max-width: 768px){
    #cisti-hero .flexslider .slider-text-bg .desc p{
        display:none
    }
}
#cisti-hero .flexslider .slider-text,#cisti-hero .flexslider .slider-text-bg{
    display:table;
    opacity:0;
    height:600px;
    z-index:9
}
#cisti-hero .flexslider .slider-text>.slider-text-inner,#cisti-hero .flexslider .slider-text-bg>.slider-text-inner{
    display:table-cell;
    vertical-align:middle;
    min-height:500px
}
.cisti-bg-section{
    background:rgba(98,61,79,0.03)
}
#cisti-slider,#cisti-about,#cisti-wireframe,#cisti-started,#cisti-portfolio,#cisti-blog,#cisti-content-section,#cisti-contact,#cisti-footer{
    padding:7em 0;
    clear:both
}
@media screen and (max-width: 768px){
    #cisti-slider,#cisti-about,#cisti-wireframe,#cisti-started,#cisti-portfolio,#cisti-blog,#cisti-content-section,#cisti-contact,#cisti-footer{
        padding:3em 0
    }
}
#cisti-content{
    border-bottom:2px solid rgba(98,61,79,0.1)
}
#cisti-started{
    border-bottom:none
}
.cisti-social-icons{
    margin:0;
    padding:0
}
.cisti-social-icons li{
    margin:0;
    padding:0;
    list-style:none;
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline
}
.cisti-social-icons li a{
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
    color:#623D4F;
    padding-left:10px;
    padding-right:10px
}
.cisti-social-icons li a i{
    font-size:20px
}
.cisti-heading{
    margin-bottom:5em
}
.cisti-heading.cisti-heading-sm{
    margin-bottom:2em
}
.cisti-heading h2{
    font-size:40px;
    margin-bottom:20px;
    line-height:1.5;
    color:#000
}
.cisti-heading p{
    font-size:18px;
    line-height:1.5;
    color:#828282
}
.cisti-heading span{
    display:block;
    margin-bottom:10px;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:2px
}
#cisti-started{
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    position:relative;
    float:left;
    width:100%
}
#cisti-started .overlay{
    z-index:0;
    position:absolute;
    bottom:0;
    top:0;
    left:0;
    right:0;
    background:#623d4f
}
#cisti-started .cisti-heading{
    margin-bottom:0
}
#cisti-started .cisti-heading h2{
    color:#fff;
    margin-bottom:20px !important
}
#cisti-started .cisti-heading p{
    color:rgba(255,255,255,0.8)
}
#cisti-started .btn{
    height:54px;
    border:none !important;
    background:#fff;
    color:#623D4F;
    font-size:16px;
    text-transform:uppercase;
    font-weight:400;
    padding-left:50px;
    padding-right:50px
}
.member{
    width:100%;
    float:left
}
.member .author{
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    position:relative;
    height:400px
}
.member .desc{
    width:80%;
    margin:0 auto;
    margin-top:4em
}
.member .desc h3{
    margin-bottom:10px
}
.member .desc span{
    display:block;
    margin-bottom:20px;
    font-size:14px;
    color:rgba(0,0,0,0.3)
}
.cisti-blog{
    width:100%;
    float:left;
    margin-bottom:40px
}
@media screen and (max-width: 768px){
    .cisti-blog{
        width:100%
    }
}
.cisti-blog .blog-bg{
    display:block;
    width:100%;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    position:relative;
    height:300px
}
@media screen and (max-width: 768px){
    .cisti-blog .blog-bg{
        height:400px
    }
}
.cisti-blog .blog-text{
    margin-bottom:30px;
    position:relative;
    width:100%;
    padding:30px;
    float:left;
    background:#fff;
    -webkit-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.06);
    box-shadow:0px 2px 5px 0px rgba(0,0,0,0.06);
    -webkit-transition:0.3s;
    -o-transition:0.3s;
    transition:0.3s
}
.cisti-blog .blog-text span{
    display:inline-block;
    margin-bottom:20px;
    font-size:14px !important;
    color:rgba(0,0,0,0.3)
}
.cisti-blog .blog-text .stuff{
    margin:0;
    padding:0;
    border-top:1px solid rgba(0,0,0,0.05);
    padding-top:20px
}
.cisti-blog .blog-text .stuff li{
    list-style:none;
    display:inline-block;
    margin-left:10px
}
.cisti-blog .blog-text .stuff li:first-child{
    margin-left:0
}
.cisti-blog .blog-text .stuff li:last-child{
    float:right
}
.cisti-blog .blog-text .stuff li:last-child i{
    padding-right:0;
    padding-left:10px
}
.cisti-blog .blog-text .stuff li i{
    font-size:14px;
    padding-right:5px
}
.cisti-blog .blog-text h3{
    font-size:24px;
    margin-bottom:20px;
    line-height:1.5
}
.cisti-blog .blog-text h3 a{
    color:#000
}
.cisti-portfolio{
    width:100%;
    float:left;
    margin-bottom:40px
}
.cisti-portfolio>a{
    width:100%;
    float:left;
    -webkit-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.06);
    box-shadow:0px 2px 5px 0px rgba(0,0,0,0.06)
}
.cisti-portfolio>a:hover{
    webkit-box-shadow:0px 8px 16px -4px rgba(0,0,0,0.13);
    box-shadow:0px 8px 16px -4px rgba(0,0,0,0.13)
}
.cisti-portfolio .portfolio-entry{
    width:100%;
    float:left;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    position:relative;
    height:300px
}
@media screen and (max-width: 768px){
    .cisti-portfolio .portfolio-entry{
        height:400px
    }
}
.cisti-portfolio .portfolio-text{
    width:100%;
    float:left;
    padding:20px
}
.cisti-portfolio .portfolio-text .stuff{
    margin:0;
    padding:0;
    border-top:1px solid rgba(0,0,0,0.05);
    padding-top:20px
}
.cisti-portfolio .portfolio-text .stuff li{
    list-style:none;
    display:inline-block;
    margin-left:10px;
    color:rgba(0,0,0,0.3)
}
.cisti-portfolio .portfolio-text .stuff li:first-child{
    margin-left:0
}
.cisti-portfolio .portfolio-text .stuff li:last-child{
    float:right
}
.cisti-portfolio .portfolio-text .stuff li i{
    font-size:14px;
    padding-right:5px
}
.cisti-team{
    position:relative;
    background:#fff;
    padding:30px;
    border-radius:5px;
    margin-bottom:30px;
    -webkit-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.06);
    box-shadow:0px 2px 5px 0px rgba(0,0,0,0.06)
}
@media screen and (max-width: 768px){
    .cisti-team{
        border-right:0;
        margin-bottom:80px
    }
}
.cisti-team h2{
    font-size:16px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:bold;
    margin-bottom:50px
}
.cisti-team figure{
    position:relative;
    top:0px;
    background-size:cover;
    margin-bottom:20px
}
.cisti-team figure img{
    width:150px;
    height:150px;
    border:10px solid #fff;
    background-size:cover;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    border-radius:50%
}
.cisti-team>div{
    padding:30px 30px 0 30px
}
.cisti-team>div h3{
    margin-bottom:0;
    font-size:20px;
    color:#623D4F
}
.cisti-team>div .position{
    color:#d9d9d9;
    margin-bottom:30px
}
.cisti-team>div,.cisti-team blockquote{
    border:none;
    padding:0;
    margin-bottom:20px
}
.cisti-team>div p,.cisti-team blockquote p{
    font-size:16px;
    line-height:1.5;
    color:#555555
}
.cisti-team span{
    color:#b3b3b3
}
#cisti-footer .cisti-footer-links{
    padding:0;
    margin:0
}
@media screen and (max-width: 768px){
    #cisti-footer .cisti-footer-links{
        margin-bottom:30px
    }
}
#cisti-footer .cisti-footer-links li{
    padding:0;
    margin:0;
    list-style:none
}
#cisti-footer .cisti-footer-links li a{
    color:rgba(0,0,0,0.5);
    text-decoration:none
}
#cisti-footer .cisti-footer-links li a:hover{
    text-decoration:underline
}
#cisti-footer .cisti-widget{
    margin-bottom:30px
}
@media screen and (max-width: 768px){
    #cisti-footer .cisti-widget{
        text-align:left
    }
}
#cisti-footer .cisti-widget h4{
    margin-bottom:30px;
    font-size:20px
}
#cisti-footer .copyright .block{
    display:block
}
.contact-info{
    margin-bottom:4em;
    padding:0
}
.contact-info li{
    list-style:none;
    margin:0 0 20px 0;
    position:relative;
    padding-left:40px;
    color:#000
}
.contact-info li i{
    position:absolute;
    top:.3em;
    left:0;
    font-size:22px;
    color:rgba(0,0,0,0.3)
}
.contact-info li a{
    color:#000
}
.form-control{
    -webkit-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
    border:none;
    border:2px solid rgba(0,0,0,0.1);
    font-size:18px;
    font-weight:300;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    border-radius:4px
}
.form-control:focus,.form-control:active{
    box-shadow:none;
    border:2px solid rgba(0,0,0,0.8)
}
input[type="text"]{
    height:50px
}
.form-group{
    margin-bottom:30px
}
#cisti-offcanvas{
    position:absolute;
    z-index:1901;
    width:270px;
    background:#000;
    top:0;
    right:0;
    top:0;
    bottom:0;
    padding:75px 40px 40px 40px;
    overflow-y:auto;
    display:none;
    -moz-transform:translateX(270px);
    -webkit-transform:translateX(270px);
    -ms-transform:translateX(270px);
    -o-transform:translateX(270px);
    transform:translateX(270px);
    -webkit-transition:0.5s;
    -o-transition:0.5s;
    transition:0.5s
}
@media screen and (max-width: 768px){
    #cisti-offcanvas{
        display:block
    }
}
.offcanvas #cisti-offcanvas{
    -moz-transform:translateX(0px);
    -webkit-transform:translateX(0px);
    -ms-transform:translateX(0px);
    -o-transform:translateX(0px);
    transform:translateX(0px)
}
#cisti-offcanvas a{
    color:rgba(255,255,255,0.5)
}
#cisti-offcanvas a:hover{
    color:rgba(255,255,255,0.8)
}
#cisti-offcanvas ul{
    padding:0;
    margin:0
}
#cisti-offcanvas ul li{
    padding:0;
    margin:0;
    list-style:none
}
#cisti-offcanvas ul li>ul{
    padding-left:20px;
    display:none
}
#cisti-offcanvas ul li.offcanvas-has-dropdown>a{
    display:block;
    position:relative
}
#cisti-offcanvas ul li.offcanvas-has-dropdown>a:after{
    position:absolute;
    right:0px;
    font-family:'Inconsolata';
    speak:none;
    font-weight:normal;
    font-style:normal
}