/*
Theme Name: Crad - Creative Coming Soon HTML5 Template
Theme URI: http://live.envalab.com/html/crad
Author: ENVALAB
Author URI: http://envalab.com/
Version: 1.0
*/
/* =================================================
1. Base CSS
* Padding CSS
* Button CSS
* Form Inpout CSS
* Main Manu CSS
* Responsive Menu CSS
2. Header CSS
3. Hero Area CSS
4. Services CSS
5. Filter Area CSS
6. User Experience CSS
7. Included feature Area CSS
8. Call to Action CSS
a14ae3
9. Footer Area CSS
===================================================*/
/*=========================================
Base CSS
===========================================*/
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
.alignleft {
float: left;
margin-right: 15px;
}
.alignright {
float: right;
margin-left: 15px;
}
.aligncenter {
display: block;
margin: 0 auto 15px;
}
a:focus,
input:focus,
textarea:focus,
button:focus {
outline: 0 solid
}
img {
max-width: 100%;
height: auto;
}
p {
margin-bottom: 10px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0px;
font-weight: 700;
line-height: 48px;
}
ul {
margin: 0;
padding: 0;
}
body {
color: #313131;
font-size: 16px;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 28px;
}
a:hover {
text-decoration: none
}
/* =============================================
Padding CSS
================================================*/
.padding-100 {
padding: 80px 0;
}
.padding-80 {
padding: 80px 0;
}
.pdt-150 {
padding-top: 150px;
}
.pdt-100 {
padding-top: 100px;
}
.pdt-120 {
padding-top: 120px;
}
.pdt-20 {
padding-top: 20px;
}
.pdt-60 {
padding-top: 60px;
}
.pdt-90 {
padding-top: 90px;
}
/* =============================================
Button CSS
===============================================*/
.boxed-btn {
background: #762ecd none repeat scroll 0 0;
border-radius: 30px;
display: inline-block;
padding: 10px 40px;
color: #fff;
border: 1px solid #762ecd;
transition: 0.4s;
font-weight: 700;
font-size: 18px;
}
.boxed-btn:hover {
background: transparent;
color: #fff;
border-color: #fff
}
.borderd-btn {
border: 1px solid #fff;
border-radius: 30px;
color: #fff;
display: inline-block;
transition: all 0.4s ease 0s;
width: 200px;
padding: 10px 30px;
text-align: center;
font-weight: 700;
font-size: 18px;
}
.borderd-btn:hover {
background: #762ecd;
border-color: #762ecd;
color: #fff;
}
.section-title {
margin-bottom: 60px;
}
.section-title h2 {
margin-bottom: 10px;
}
.store-btn {
border: 1px solid #fff;
border-radius: 5px;
color: #fff;
display: inline-block;
height: 58px;
line-height: 57px;
margin-right: 10px;
margin-top: 50px;
text-align: center;
transition: all 0.4s ease 0s;
width: 200px;
}
.store-btn:hover {
background: #1e96f2 none repeat scroll 0 0;
border-color: #1e96f2;
color: #fff;
}
.slack-main-menu.main-menu.offcanvas {
display: none;
}
.get-btn {
background: transparent;
border-radius: 50px;
box-shadow: 0 0 10px #762ecd;
color: #fff;
display: inline-block;
padding: 10px 20px;
position: absolute;
right: 0;
text-align: center;
text-transform: uppercase;
top: 5px;
transition: 0.3s;
border: 1px solid #fff;
}
.get-btn:hover {
background: #fff;
border-color: #fff;
color: #762ecd;
border: 1px solid #762ecd;
}
/*=======================================================
Main Manu CSS
========================================================*/
.main-menu {
margin-top: 13px;
}
.main-menu ul {
list-style: outside none none;
margin-bottom: 0;
/*margin-right: 140px;*/
margin-top: 0;
padding: 0;
}
.main-menu ul li {
display: inline-block;
position: relative;
line-height: 35px;
padding-bottom: 10px;
padding-right: 15px;
}
a.main-desktop-get-btn.get-btn {
padding: 8px 30px;
text-transform: none;
right: 15px;
}
.main-menu ul li a:focus {
color: #fff;
}
.main-menu ul li a:hover {
opacity: 0.8;
}
.main-menu ul li li a:hover {
opacity: 1;
}
.main-menu ul li a {
color: #fff;
font-size: 16px;
transition: 0.4s;
text-transform: capitalize;
}
.main-menu ul li ul ,.offcanvas-menu ul li ul {
position: absolute;
left: 0;
top: 150%;
z-index: 99;
background: #762ecd;
width: 250px;
padding: 10px;
transition: 0.3s;
opacity: 0;
visibility: hidden;
}
.main-menu li:hover ul , .offcanvas-menu li.active-dropdown ul {
opacity: 1;
visibility: visible;
top: 100%;
}
.offcanvas-menu ul li ul {
transition: none;
}
.offcanvas-menu li.active-dropdown ul {
position: static;
background: transparent;
padding: 0;
}
.main-menu ul li ul li {
display: block;
text-align: left;
padding-bottom: 0;
}
/* ===========================================================
Responsive Menu CSS
==============================================================*/
.responsive-menu {
text-align: right;
display: none;
margin-top: -35px;
}
.slicknav_menu {
background: #222222 none repeat scroll 0 0;
display: inline-block;
padding: 0;
text-align: left;
}
.offcanvas-menu-trigger {
display: inline-block;
font-size: 24px;
margin-top: 6px;
cursor: pointer;
}
.offcanvas-menu-trigger.theme-2 {
position: absolute;
right: 9px;
top: 6px;
}
.offcanvas-menu .logo {
margin-bottom: 30px;
}
.offcanvas-menu {
background: #a14ae3 none repeat scroll 0 0;
height: 100%;
padding-top: 30px;
position: fixed;
right: -100%;
text-align: center;
top: 0;
width: 250px;
z-index: 99;
transition: 0.4s;
}
.offcanvas-menu.active {
right: 0;
}
.offcanvas-menu ul {
list-style: outside none none;
margin: 0;
padding: 0;
}
.offcanvas-menu ul a {
color: #fff;
display: inline-block;
padding: 10px 0;
transition: 0.4s;
}
.offcanvas-menu ul li i {
color: #fff;
}
.offcanvas-menu ul li {
display: block;
position: relative;
}
.offcanvas-menu ul a:hover {
opacity: 0.8;
}
.offcanvasmenu-close {
background: #fff none repeat scroll 0 0;
border-radius: 50%;
cursor: pointer;
font-size: 23px;
height: 40px;
left: -20px;
line-height: 40px;
position: absolute;
text-align: center;
top: 5px;
transition: all 0.4s ease 0s;
width: 40px;
}
.offcanvasmenu-close:hover {
background: red none repeat scroll 0 0;
color: #fff;
}
.offcanvas-body-overlay {
background: #000 none repeat scroll 0 0;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9;
visibility: hidden;
opacity: 0;
transition: 0.4s;
}
.offcanvas-body-overlay.active {
visibility: visible;
opacity: 0.7;
}
.offcanvas-menu-trigger.theme-3 {
position: absolute;
right: 5px;
top: 2px;
}
/* =====================================================
Header CSS
======================================================*/
header {
padding-bottom: 20px;
padding-top: 10px;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}
header,
header h2 {
color: #fff;
}
header .borderd-btn {
background: #762ecd;
border: none;
width: auto;
border: 1px solid #762ecd;
}
header .borderd-btn:hover {
background: transparent;
border: 1px solid #762ecd;
}
.logo h1 {
margin: 0;
font-weight: 900;
}
.logo a {
font-size: 24px;
color: #fff;
}
.logo a span {
font-weight: 300;
}
/* =====================================================
Hero Area CSS
======================================================*/
.hero-area h2 {
margin-bottom: 35px;
}
.hero-area h1 {
font-weight: 900;
margin-bottom: 25px;
}
.hero-area,
.hero-area h2 {
color: #fff;
}
.hero-area {
background-position: center center;
background-size: cover;
overflow: hidden;
padding: 250px 0 0;
position: relative;
z-index: 1;
}
select:focus {
border: none;
outline: none;
}
.hero-area h1 {
color: #fff;
}
.hero-area .boxed-btn {
margin-right: 20px;
}
.hero-area p {
margin-bottom: 65px;
}
.hero-area::after {
background: #a14ae3;
content: "";
height: 100%;
left: 0;
opacity: 0.95;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.right-img {
position: absolute;
right: -60px;
top: 18%;
width: 55%;
}
.border-center {
position: relative;
}
.border-center::after {
background: #fff none repeat scroll 0 0;
content: "";
height: 80%;
left: 50%;
margin-left: -0.5px;
position: absolute;
top: 10%;
width: 1px;
opacity: 0.25;
}
.hero-area {
background-image: url(../img/landing-bg.jpg);
background-attachment: fixed;
height:100vh;
position: relative;
}
.hero-area h1 {
font-size: 60px;
}
.hero-area .right-img {
right: 0;
width: 30%;
top: 70px;
}
.hero-area .right-img.right-img1 {
z-index: 2;
}
.hero-area .right-img.right-img2 {
right: 9%;
top: 120px;
z-index: 1;
}
.hero-area .right-img.right-img3 {
right: 18%;
top: 170px;
}
.hero-area p {
margin-bottom: 45px;
}
.landing-title {
margin-bottom: 40px;
}
.landing-title p {
position: relative;
padding-bottom: 10px;
text-transform: uppercase;
font-size: 14px;
}
.landing-title p::before {
position: absolute;
content: "";
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 40px;
height: 2px;
background: #323232;
opacity: 0.7;
}
/* =====================================================
Services Area CSS
======================================================*/
.service-area {
background: #a14ae3;
color: #fff;
}
.service-area .single-services i {
font-size: 45px;
}
.service-area .col-lg-4:nth-child(1) .service-icon i {
/*color: #ef7c5d;*/
color:#fff;
}
.service-area .col-lg-4:nth-child(2) .service-icon i {
/*color: #2cc7ff;*/
color:#fff;
}
.service-area .col-lg-4:nth-child(3) .service-icon i {
/*color: #e84756;*/
color:#fff;
}
.service-area .col-lg-4:nth-child(4) .service-icon i {
/*color: #ff7783;*/
color:#fff;
}
.service-area .col-lg-4:nth-child(5) .service-icon i {
/*color: #52b3ad;*/
color:#fff;
}
.service-area .col-lg-4:nth-child(6) .service-icon i {
/*color: #ff7e3a;*/
color:#fff;
}
.single-services h4{
/*color: #222;*/
}
.landing-item-menu {
text-align: center;
border: 1px solid #eee;
margin-bottom: 50px;
border-radius: 30px;
background: #fff;
overflow: hidden;
}
/* =====================================================
Feature Area CSS
======================================================*/
.template-feature {
font-size: 14px;
background: #fafafa;
}
.landing-item-menu li {
display: inline-block;
cursor: pointer;
position: relative;
width: 20%;
padding: 15px;
margin-right: -4px;
text-transform: uppercase;
border-left: 1px solid #eee;
}
.landing-item-menu li:first-child {
border: 0;
}
.landing-item-menu li:hover::before, .landing-item-menu li.active {
color: #762ecd;
}
.landing-item-menu li:hover::before, .landing-item-menu li.active::before {
width: 100%;
}
.landing-item-menu li::before {
position: absolute;
width: 0;
height: 5px;
background: #762ecd;
left: 0;
bottom: 0;
content: "";
transition: 0.3s;
}
.single-landing-item {
text-align: center;
margin-top: 30px;
}
.single-landing-item p {
font-weight: 300;
}
/* =====================================================
User Experience Area CSS
======================================================*/
.better-ux , .included-feature {
color: #fff;
background: url(../img/landing/better-ux.jpg) no-repeat center / cover;
position: relative;
padding: 95px 0 180px;
}
.better-ux img.left-img , .included-feature img.left-img {
position: absolute;
width: 45%;
top: 95px;
left: 0;
height: 70%;
}
.user-experience {
padding: 50px 0 0;
}
.user-experience p {
margin: 15px 0 45px;
opacity: 0.8;
}
.user-experience a:hover i {
margin-left: 10px;
}
.user-experience a i {
transition: all 0.4s;
}
.user-experience a {
color: #323232;
opacity: 0.8;
transition: all 0.4s;
}
.user-experience a:hover {
opacity: 1;
}
.better-ux .user-experience a, .included-feature .user-experience a {
color: #fff;
}
.landing-mobile {
position: relative;
padding: 95px 0 180px;
overflow: hidden;
}
.single-landing-item-img {
overflow: hidden;
}
.single-landing-item img {
transition: all 0.4s;
}
.single-landing-item-img:hover img {
transform: scale(1.3);
}
.landing-mobile img.left-img {
position: absolute;
width: 48%;
top: 95px;
right: 0;
content: "";
height: 70%;
}
.included-feature {
background: url(../img/landing/included-feature.jpg) no-repeat center / cover;
padding: 175px 0 80px;
}
/* =====================================================
Footer Area CSS
======================================================*/
footer.site-footer {
background: #a14ae3;
color: #fff;
padding: 20px 0;
}
footer a {
color: #fff;
text-decoration: underline;
}
.single-services {
text-align: center;
margin: 40px 0;
}
footer a:hover , footer a:focus {
color: #fff;
}
.section-padding h2 {
margin-bottom: 15px;
}
.section-padding .boxed-btn {
background: #762ecd none repeat scroll 0 0;
border-color: #762ecd;
margin-bottom: 40px;
margin-top: 30px;
text-transform: capitalize;
}
.section-padding .boxed-btn:hover {
background: transparent none repeat scroll 0 0;
color: #762ecd;
}
.back-to-login {
text-decoration: underline;
color: #313131;
}
.back-to-login:hover {
text-decoration: underline;
color: #49a19f;
}
.constellation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 0.4s;
}
/* Pre Loader Style */
div#preloader {
position: fixed;
left: 0;
top: 0;
z-index: 988899;
width: 100%;
height: 100%;
overflow: visible;
background: #fff url('../img/loader.gif') no-repeat center center;
}
/* END of Pre Loader Style */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.landing-mobile img.left-img {
width: 50%;
top: 125px;
height: 60%;
}
.landing-mobile {
padding: 50px 0 140px;
}
}
/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-area .right-img {
display: block;
}
.hero-area .right-img.right-img1 {
right: -5%;
top: 100px;
}
.hero-area .right-img.right-img2 {
right: 4%;
top: 135px;
}
.hero-area .right-img.right-img3 {
right: 13%;
}
}
@media only screen and (max-width: 991px) {
.user-experience {
padding: 0;
}
.landing-mobile {
padding: 70px 0;
}
.landing-mobile img.left-img {
display: none;
}
.hero-area.main-landing {
height: auto;
padding: 170px 0;
}
}
/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
.right-img , img.left-img {
display: none;
}
.hero-area {
text-align: center;
}
.hero-area h2 {
font-size: 22px;
line-height: 32px;
}
.hero-area .boxed-btn {
margin-bottom: 20px;
margin-right: 0;
}
.hero-area p {
margin-bottom: 32px;
}
.hero-area {
padding-bottom: 80px;
padding-top: 100px;
}
.slack-main-menu.main-menu.offcanvas {
display: block;
}
.main-menu, .get-btn {
display: none;
}
.hero-area.main-landing {
padding: 110px 0 70px;
}
}
@media only screen and (max-width: 480px) {
.landing-item-menu li {
width: 100%;
}
.single-landing-item-img:hover img {
transform: scale(1);
}
}