?
áEÓê¤ÎïLwebshll2019
/* ===================================
About
=================================== */
/*
Theme Name: Grid Images
Theme URI:
Author: Themes Industry
Author URI:
Description: One Page , Multi Parallax Template
Tags: One page, multi page, multipurpose, parallax, creative, html5
*/
/* ===================================
Table of Contents
=================================== */
/*
01 body
02 Custom Classes
02-1 short codes
02-2 loader
03 navigation
04 Column Slider
05 Media Queries
/*Table Of Contents ends */
/*IMPORT GOOGLE FONT */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Open+Sans:300,400&display=swap');
html{
scroll-behavior: smooth;
}
*{
padding: 0;
margin: 0;
}
body{
background-color: #191919;
}
/*************************************/
/*********** Header area ***********/
/*************************************/
.head-sec .top-navigation{
position: absolute;
left: 0;
right: 0;
z-index: 111;
}
.head-sec .top-navigation .navbar{
padding: 20px 30px;
background-color: transparent;
}
.head-sec .navigation-toggle ul{
padding-left: 0;
margin: auto 0;
}
.head-sec .navigation-toggle ul li{
list-style: none;
}
.head-sec .navigation-toggle #toggle-btn{
width: 45px;
padding: 10px;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.6);
}
.head-sec .navigation-toggle #toggle-btn span{
width: 25px;
background-color: #ffffff;
height: 2px;
display: block;
margin-top: 3px;
-webkit-transition: .8s ease;
-o-transition: .8s ease;
transition: .8s ease;
margin-left: auto;
margin-right: auto;
}
/*close nav*/
.head-sec .navigation-toggle #close_nav{
width: 45px;
padding: 10px;
padding-top: 15px;
padding-bottom: 15px;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.8);
}
.head-sec .navigation-toggle #close_nav a{
transition: .5s ease;
transform: rotate(180deg);
display: block;
}
.head-sec .navigation-toggle #close_nav span{
width: 25px;
background-color: #ffffff;
height: 2px;
display: block;
margin-top: 3px;
-webkit-transition: .8s ease;
-o-transition: .8s ease;
transition: .8s ease;
margin-left: auto;
margin-right: auto;
}
.head-sec .navigation-toggle #close_nav span:first-child{
transform: rotate(45deg);
margin-bottom: -4px;
}
.head-sec .navigation-toggle #close_nav span:nth-child(2){
width: 0;
display: none;
}
.head-sec .navigation-toggle #close_nav span:last-child{
transform: rotate(-45deg);
margin-top: 2px;
}
/*************************************/
/******** Header Navigation *********/
/*************************************/
.head-sec .navbar.broad{
position: absolute;
right: 30px;
top: 100px;
z-index: 11;
padding: 0 0;
display: none;
}
.head-sec .navbar.broad-nav{
display: block;
}
.head-sec .broad ul{
text-align: right;
}
.head-sec .broad ul li .nav-link{
color: #FFFFFF;
text-decoration: none;
font-size: 16px;
background-color: rgba(0, 0, 0, 0.8);
display: inline-block;
padding: 5px 20px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
transition: .4s ease-in-out;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
background-color: #FFFFFF;
}
.broad.navbar ul li{
-webkit-animation-name: myan;
animation-name: myan;
margin-bottom: 5px;
-webkit-transition: all .5s ease 500ms;
-o-transition: all .5s ease 500ms;
transition: all .5s ease 500ms;
-webkit-animation-duration: .5s;
animation-duration: .5s;
}
@-webkit-keyframes myan {
from{
-webkit-transform: translateX(30px);
transform: translateX(30px);
opacity: 0;
}
to{
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
}
@keyframes myan {
from{
-webkit-transform: translateX(30px);
transform: translateX(30px);
opacity: 0;
}
to{
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
}
.broad.reverse-nav ul li{
-webkit-animation-name: myanres;
animation-name: myanres;
-webkit-animation-duration: .3s;
animation-duration: .3s;
}
@-webkit-keyframes myanres {
from{
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
to{
-webkit-transform: translateX(30px);
transform: translateX(30px);
opacity: 0;
}
}
@keyframes myanres {
from{
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
to{
-webkit-transform: translateX(30px);
transform: translateX(30px);
opacity: 0;
}
}
/*.broad.navbar ul li{*/
/* -webkit-animation-delay: .1s;*/
/* animation-delay: .1s;*/
/* -webkit-animation-fill-mode: both;*/
/* animation-fill-mode: both;*/
/*}*/
/*.broad.navbar ul li:nth-child(2){*/
/* !*-webkit-animation-name: myan;*!*/
/* !*animation-name: myan;*!*/
/* -webkit-animation-delay: .15ms;*/
/* animation-delay: .15s;*/
/* -webkit-animation-fill-mode: both;*/
/* animation-fill-mode: both;*/
/*}*/
/*.broad.navbar ul li:nth-child(3){*/
/* !*-webkit-animation-name: myan;*!*/
/* !*animation-name: myan;*!*/
/* -webkit-animation-delay: .2s;*/
/* animation-delay: .2s;*/
/* -webkit-animation-fill-mode: both;*/
/* animation-fill-mode: both;*/
/*}*/
/*.broad.navbar ul li:nth-child(4){*/
/* !*-webkit-animation-name: myan;*!*/
/* !*animation-name: myan;*!*/
/* -webkit-animation-delay: .25s;*/
/* animation-delay: .25s;*/
/* -webkit-animation-fill-mode: both;*/
/* animation-fill-mode: both;*/
/*}*/
/*.broad.navbar ul li:nth-child(5){*/
/* !*-webkit-animation-name: myan;*!*/
/* !*animation-name: myan;*!*/
/* -webkit-animation-delay: .3s;*/
/* animation-delay: .3s;*/
/* -webkit-animation-fill-mode: both;*/
/* animation-fill-mode: both;*/
/*}*/
/*.broad.navbar ul li:nth-child(6) {*/
/* !*-webkit-animation-name: myan;*!*/
/* !*animation-name: myan;*!*/
/* -webkit-animation-delay: .35s;*/
/* animation-delay: .35s;*/
/* -webkit-animation-fill-mode: both;*/
/* animation-fill-mode: both;*/
/*}*/
/*.broad.navbar ul li:nth-child(7) {*/
/* !*-webkit-animation-name: myan;*!*/
/* !*animation-name: myan;*!*/
/* -webkit-animation-delay: .4s;*/
/* animation-delay: .4s;*/
/* -webkit-animation-fill-mode: both;*/
/* animation-fill-mode: both;*/
/*}*/
/*.broad.navbar ul li:nth-child(8) {*/
/* !*-webkit-animation-name: myan;*!*/
/* !*animation-name: myan;*!*/
/* -webkit-animation-delay: .45s;*/
/* animation-delay: .45s;*/
/* -webkit-animation-fill-mode: both;*/
/* animation-fill-mode: both;*/
/*}*/
/*************************************/
/*********** Columned Slider ***********/
/*************************************/
.columned-slider .columned-slider-inner .swiper-slide{
height: 100vh;
cursor: pointer;
background-size: cover !important;
}
.columned-slider .columned-slider-inner .swiper-slide .columned-slider-overlay{
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
transform: scaleY(0);
transform-origin: 50% 100%;
background-color: rgba(0, 0, 0, .6);
transition: .3s ease-in-out;
}
.columned-slider .columned-slider-inner .swiper-slide:hover .columned-slider-overlay{
/*top: 0;*/
transform: scaleY(1);
}
.columned-slider .columned-slider-inner .swiper-slide .columned-slider-detail{
position: absolute;
bottom: 20px;
font-family: 'Montserrat', sans-serif;
color: #FFFFFF;
padding: 0 50px 15px 50px;
transition: 500ms ease-in-out;
}
.columned-slider .columned-slider-inner .swiper-slide:hover .columned-slider-detail{
transform: translateY(-150px);
}
.columned-slider .columned-slider-inner .swiper-slide .columned-slider-detail .columned-heading{
font-size: 28px;
margin-bottom: 15px;
}
.columned-slider .columned-slider-inner .swiper-slide .columned-slider-detail .columned-description{
font-size: 16px;
margin-bottom: 20px;
}
.columned-slider .columned-slider-inner .swiper-slide .columned-slider-detail .columned-line-devider{
height: 1.5px;
width: 20%;
background-color: #FFFFFF;
display: block;
}
/***********************************/
/***********Modal window css*********/
/***********************************/
.slide-modal-window{
padding: 60px 50px;
max-width: 90%;
}
.slide-modal-window .modal-des-area .modal-inner-description{
font-family: 'Montserrat', sans-serif;
}
.slide-modal-window .modal-des-area .modal-inner-description .slide-heading{
font-size: 28px;
margin-bottom: 20px;
}
.slide-modal-window .modal-des-area .modal-inner-description .slide-des{
font-size: 16px;
margin-bottom: 20px;
}
.slide-modal-window .modal-des-area .modal-inner-description .hashtags_div{
display: block;
margin-bottom: 10px;
}
.slide-modal-window .modal-des-area .modal-inner-description .hashtags_div a{
background-color: transparent;
border: solid 1px #000;
color: #000;
padding: 6px 10px 6px 10px;
text-decoration: none;
margin-right: 5px;
display: inline-block;
}
.slide-modal-window .modal-des-area .modal-inner-description .hashtags_div a:last-child{
margin-right: 0;
}
.slide-modal-window .modal-des-area .modal-inner-description .slide-btn{
font-size: 14px;
background-color: #000000;
padding: 8px 25px 8px 25px;
color: #fff;
text-decoration: none;
margin-top: 20px;
border: solid 1px #000;
transition: .8s ease-in-out;
}
.slide-modal-window .modal-des-area .modal-inner-description .slide-btn:hover{
background-color: transparent;
color: #000;
}
/***********************************/
/*********** Media Query *********/
/***********************************/
@media (max-width: 575.98px) {
.head-sec .broad ul li .nav-link {
padding: 2px 15px;
}
.head-sec .navbar.broad {
top:80px;
}
.slide-modal-window {
max-width: 85%;
padding: 35px 33px;
}
.slide-modal-window .modal-des-area {
padding-top: 20px;
text-align: center;
}
.slide-modal-window .modal-des-area .modal-inner-description .slide-heading {
font-size: 20px;
margin-bottom: 3px;
}
.slide-modal-window .modal-des-area .modal-inner-description .slide-des {
font-size: 11px;
margin-bottom: 0px;
}
.slide-modal-window .modal-des-area .modal-inner-description .hashtags_div a {
padding: 0 3px 0 3px;
font-size: 7px;
margin-right: 3px;
border: none;
}
.slide-modal-window .modal-des-area .modal-inner-description .slide-btn {
font-size: 10px;
padding: 5px 20px 5px 20px;
margin-top: 0px;
}
.columned-slider .columned-slider-inner .swiper-slide .columned-slider-detail {
bottom: 30%;
}
.columned-slider .columned-slider-inner .swiper-slide:hover .columned-slider-detail {
transform: translateY(0px);
}
.slide-modal-window .modal-des-area .modal-inner-description .slide-des {
line-height: 2;
}
.head-sec .broad ul li .nav-link {
font-size: 12px;
}
.head-sec .navigation-toggle #close_nav span {
width: 19px;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
.columned-slider .columned-slider-inner .swiper-slide .columned-slider-detail .columned-description {
font-size: 12px;
margin-bottom: 10px;
}
.columned-slider .columned-slider-inner .swiper-slide .columned-slider-detail .columned-heading {
font-size: 24px;
margin-bottom: 7px;
}
.slide-modal-window {
text-align: center;
max-width: 75%;
padding: 22px 50px;
margin-top: 10px;
}
.slide-modal-window .modal-des-area .modal-inner-description .slide-heading {
font-size: 22px;
text-align: center;
margin-bottom: 7px;
margin-top: 10px;
}
.slide-modal-window .modal-des-area .modal-inner-description .slide-des {
font-size: 12px;
text-align: center;
margin-bottom: 15px;
line-height: 1.8;
}
.slide-modal-window .modal-des-area .modal-inner-description .hashtags_div a {
padding: 0 3px 0 3px;
font-size: 10px;
}
.slide-modal-window .modal-des-area .modal-inner-description .hashtags_div {
text-align: center;
}
.slide-modal-window .modal-des-area .modal-inner-description .slide-btn {
font-size: 11px;
display: inline-block;
padding: 3px 15px 3px 15px;
margin-top: 6px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.columned-slider .columned-slider-inner .swiper-slide .columned-slider-detail .columned-heading {
font-size: 22px;
margin-bottom: 10px;
}
.columned-slider .columned-slider-inner .swiper-slide .columned-slider-detail .columned-description {
font-size: 13px;
margin-bottom: 10px;
}
.slide-modal-window {
max-width: 90%;
padding: 52px 21px;
}
.slide-modal-window .modal-des-area .modal-inner-description .slide-heading {
font-size: 22px;
margin-bottom: 5px;
}
.slide-modal-window .modal-des-area .modal-inner-description .slide-des {
font-size: 12px;
margin-bottom: 10px;
}
.slide-modal-window .modal-des-area .modal-inner-description .hashtags_div a {
background-color: transparent;
border: solid 1px #000;
color: #000;
padding: 0 3px 0 3px;
text-decoration: none;
margin-right: 0;
font-size: 10px;
display: inline-block;
}
.slide-modal-window .modal-des-area .modal-inner-description .slide-btn {
font-size: 11px;
padding: 5px 15px 5px 15px;
margin-top: 6px;
}
}