home/static/css/style.css
2019-03-14 01:47:50 +01:00

991 lines
20 KiB
CSS

body{
font-family:"Inconsolata",Arial,sans-serif;
font-weight:400;
font-size:18px;
line-height:1.7;
color:#333;
background:#000
}
#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%
}
@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
}