html,
body {
font-family: 'Suisse Int\'l';
font-weight: 400;
font-size: 16px;
padding: 0;
margin: 0;
color: #030408; } p{
font-size: 16px;	
line-height: 1.3;
margin: 0 0 20px;
}
h1, h2, h3, h4, h5, h6, .heading {
margin-top: 0;
line-height: 1.2;
}
a:hover{
text-decoration: none;
}
a {
color: #030408;;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-decoration: none;
}
:focus{
outline: none;
}
img{
max-width: 100%;
}
ul{
padding: 0;
margin: 0;
} .bg-body{
background: #f2f2f2;
}
*{
box-sizing: border-box;
}
h2{
font-size: 2.5rem;
font-weight: 400;
}
h3,
.h3 {
font-size: 1.75rem;
font-weight: bold;
margin-bottom: 15px;
}
.heading {
font-size: 2rem;
font-weight: bold;
}
.flex{
display: flex;
flex-wrap: wrap;
}
.flex-middle{
align-items: center;
}
.flex-center{
justify-content: space-between;
}
.single-pagi.flex-center.first{
justify-content: flex-end;
}
#header{
padding: 30px 100px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000000; }
#header.is-hidden {
background-color: transparent;
}
#header.is-hidden .menu-main {
opacity: 0;
transform: translateY(-10px);
}
#header.is-hidden img:first-child {
opacity: 0;
}
#header .menu-main {
transition: transform .25s cubic-bezier(0.73, 1, 0.68, 1),
opacity .25s cubic-bezier(0.73, 1, 0.68, 1);
}
#content{
margin-top: 140px;
}
#header .logo{
height: 60px;
margin: 0;
}
#header .logo > a{
display: grid;
}
#header .logo img{
grid-row: 1;
grid-column: 1;
height: 100%;
transition: opacity .25s cubic-bezier(0.73, 1, 0.68, 1);
}
.text-right{
text-align: right;
}
.text-center{
text-align: center;
}
.wapper{
width: 100%;
padding: 0 100px;
}
.hd-right{
font-size: 1.375rem;
line-height: 1.2;
}
.hd-right li{
display: block;
}
.home-custom.single-pagi a {
margin: 0 -10px 100px;
}
.home-custom {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;	
}
.home-custom.archive {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;	
}
.home-custom .item{
width: unset;
padding: 0;
margin: 0;
}
.home-custom .item.portrait {
grid-row: 2 span;
}
.home-custom .item img{
width: 100%;
height: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.home-custom .item.portrait img{
aspect-ratio: 2 / 3;
}
.home-custom .item h2{
max-width: 80%;
margin: 20px auto 0;
}
#footer{
margin-top: 15vh;
padding: 40px 0;
}
.ft-left{
align-items: flex-end;
column-gap: 100px;
}
.ft-left .ft-logo,
.ft-left p {
font-size: 1.25rem;
line-height: 1.5rem;
margin: 0;
}
.ft-left .ft-logo {
margin-bottom: auto;
}
.ft-left p:last-child {
font-size: 0.75rem;
line-height: 0.875rem;
}
.ft-box{
align-items: flex-end;
}
.social{
margin: 0 -10px;
position: relative;
top: 0;
}
.social a{ margin: 0 10px;
}
.social a i{
font-size: 35px;
}
.social a img {
height: 40px;
}
.logo a:hover {
opacity: 1 !important;
}
.single-custom{
margin-bottom: 0;
position: relative;
}
.single-custom .left_arrow, .single-custom .right_arrow{
display: block;
position: absolute;
width: 49.5%;
bottom: 0;
top: 0;
z-index: 500;
height: calc(100vh - 450px);
}
.single-custom .left_arrow {
left:-100px;
}
.single-custom .right_arrow {
right: -100px;
}
.single-custom .close, .single_project .close_project{
font-size: 40px;
position: absolute;
top: -6px;
right: 0;
line-height: 1;
cursor: pointer;
z-index: 10000;
}
.single-custom .featured-big{
width: 100%;
}
@media (min-width: 992px) {
.single-custom .featured-big {
width: auto;
height: 80vh;
}
}
.single-custom .featured-big img{
display: block;
width: auto;
height: 100%;
margin: 0 auto;
}
.single_project .project_info .des{
padding: 0;
height: calc(100vh - 500px);
overflow-y: hidden;
}
.single_project .project_info .des h2{
font-size: 1.5rem;
}
.single_project .project_info .des p{
font-size: 1rem;
}
.slider-one{
margin-bottom: 50px;
}
.single-slider .slick-arrow{
position: absolute;
top: 0;
right: 0;
height: 100%;
border: none;
background: none;
width: 50px;
z-index: 5;
font-size: 0;
}
.single-slider .slick-prev{
left: 0;
}
.single-custom .des h2{
font-size: 1.75rem;
font-weight: 600;
}
.single-custom .des p{
max-width: 50%;
margin: 0 auto 20px;
font-size: 1.25rem;
}
.single-custom .des p:last-child{
margin-bottom: 0;
}
.featured-two{
display: flex;
flex-wrap: wrap;
column-gap: 40px;
}
.featured-two img{
width: calc(50% - 20px);
display: block;
}
.single-content{
margin-bottom: 0;
}
.single-pagi{
font-size: 1rem;
line-height: 1.3;
position: relative;
margin-top: 15vh;
margin-bottom: 10vh;
}
.fp-table{
justify-content: flex-start !important;
}
.fp-auto-height .single-content{
height: 500px;
}
.single-pagi a{
display: flex;
align-items: center;
column-gap: 20px;
}
.single-pagi a img{
height: 30px;
}
.single-pagi span{
opacity: 0;
transition: all 0.3s;
}
.single-pagi a:hover{
opacity: 1;
}
.single-pagi a:hover span{
opacity: 1;
}
.single-pagi .next{
text-align: right;
}
.single-custom  .des2{
display: grid;
grid-template-columns: repeat(2,1fr);
column-gap: 250px;
margin-top: 100px;
}
.single-custom  .des1 p{
max-width: 100%;
}
.single-custom  .des2 .des-col{ }
.des-col{
text-align: left;
}
.single-custom  .des2 p{
max-width: 100%;
font-size: 1.25rem;
}
.single-slider{
margin-bottom: 20px;
}
.slider-function{
font-size: 1.875rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.3;
}
.single-slider{
height: calc(100vh - 450px);
overflow-y: hidden;
}
.single-slider .it{
width: 100%;
height: 100%;
display: none;
}
.single-slider .it.active{
display: block;
}
.single_project{ position: relative;
} .single_project .project_info{
padding-top: 50px;
}
.single-pagi.active_info{
display: flex !important;
}
.single_project .wrapper_single_project_images{
position: relative;
overflow-y: hidden;
margin-bottom: 50px;
height: calc(100vh - 450px);
}
.project_image  img{
width: auto;
height: 100%;		
}
.single_project .project_image{
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 0;
text-align: center;
}
.single_project .project_image.active{
display: block;
}
.title_single_project h2{
margin-bottom: 20px;
}
.single_project .right_arrow {
right: 0;
cursor: url(//spirale.li/wp-content/themes/spirale/assets/images/arrow_mouse_right.png), auto;
}
.single_project .left_arrow {
left: 0;
cursor: url(//spirale.li/wp-content/themes/spirale/assets/images/arrow_mouse_left.png), auto;
}
.des-slider2{
display: none !important;
}
.des-slider1.hide{
display: none !important;
}
.des-slider2.show{
display: block !important;
}
.single_project .swiper-container h2{
font-size: 1.5rem;
font-weight: 700;
margin: 30px 0 0;
}
.single_project .swiper-container p{
max-width: 70%;
margin: 0 auto 20px;
font-size: 1rem;
}
.swiper-slide{
height: calc(100vh - 300px);
text-align: center;
}
.swiper-button-next, .swiper-button-prev{
position: absolute;
top: 0;
width: 50%;
bottom: 0;
height: calc(100vh - 230px);
}
.swiper-button-next:after, .swiper-button-prev:after{
display: none;
}
.swiper-button-next.child-next, .swiper-button-prev.child-prev{
z-index: 10;
}
.swiper-button-next{ right: 0;
}
.swiper-button-prev{ left: 0;
}
.box-slide-text{
text-align: left;
}
.box-slide-text h2{
margin-bottom: 16px !important;
}
.box-slide-text p{
max-width: 100% !important;
}
.section.section-slider,
.section.section-image {
margin-bottom: 10vh;
}
.des.text-center.title_single_project {
margin-top: 8px;
} #fullpage #header{
position: absolute;
}
#fullpage #content{
margin-top: 0;
padding-top: 123px;
}
#fullpage .bg-body{
height: 100%;
}
#footer{  }
.swiper-slide img{
width: auto !important;
height: 100%;
}
.swiper-pagination{
position: relative;
margin-top: 45px;
font-size: 1.5rem;
font-weight: 400;
margin-bottom: -15px;
}
#wpadminbar {
z-index: 9999999999999999999 !important;
}
@media(max-width: 1279px){
.single_project .close_project{
top: -30px !important;
}
}
@media(max-width: 767px){
.single_project .close_project{
left: 0px;
top: -46px !important;
z-index: 10000001;
}
.single_project .project_image.project_info {
margin-top: calc(400px - 100vh) !important;
}
.single_project .project_info .des h2{
font-size: 1.2rem;
margin-bottom: 5px;
}
.single_project .project_info .des p{
font-size: 0.8rem;
margin-bottom: 5px;
}
.single_project .prev_next_box{
bottom: -50px !important;
}
.single-pagi a img{
height: 20px;
}
}