/* ========================
   Theme Name: Nikola Keavy
   ======================== */


/** Table of Contents:

* 1.0 - Fonts
* 2.0 - Icon-fonts
* 3.0 - Useful classes
* 4.0 - General
    * 4.1 - Buttons
    * 4.2 - Animations
* 5.0 - Mobile menu
* 6.0 - Header
* 7.0 - Footer
* 8.0 - Pages
    * 8.1 - Work
    * 8.2 - About
    * 8.3 - Contact

**/

/* 1.0 - Fonts
============================== */
@font-face {
    font-family: 'CircularStdBook';
    src: url('../fonts/CircularStdBook.eot');
    src: url('../fonts/CircularStdBook.eot') format('embedded-opentype'),
    url('../fonts/CircularStdBook.woff2') format('woff2'),
    url('../fonts/CircularStdBook.woff') format('woff'),
    url('../fonts/CircularStdBook.ttf') format('truetype'),
    url('../fonts/CircularStdBook.svg#CircularStdBook') format('svg');
}
@font-face {
    font-family: 'CircularStdBold';
    src: url('../fonts/CircularStdBold.eot');
    src: url('../fonts/CircularStdBold.eot') format('embedded-opentype'),
    url('../fonts/CircularStdBold.woff2') format('woff2'),
    url('../fonts/CircularStdBold.woff') format('woff'),
    url('../fonts/CircularStdBold.ttf') format('truetype'),
    url('../fonts/CircularStdBold.svg#CircularStdBold') format('svg');
}
@font-face {
    font-family: 'CircularStdBlack';
    src: url('../fonts/CircularStdBlack.eot');
    src: url('../fonts/CircularStdBlack.eot') format('embedded-opentype'),
    url('../fonts/CircularStdBlack.woff2') format('woff2'),
    url('../fonts/CircularStdBlack.woff') format('woff'),
    url('../fonts/CircularStdBlack.ttf') format('truetype'),
    url('../fonts/CircularStdBlack.svg#CircularStdBlack') format('svg');
}

/* 2.0 - Icon fonts
============================== */
@font-face {
  font-family: 'icomoon';
  src:  url('../icon-fonts/icomoon-55xvk7.eot');
  src:  url('../icon-fonts/icomoon-55xvk7.eot#iefix') format('embedded-opentype'),
    url('../icon-fonts/icomoon-55xvk7.ttf') format('truetype'),
    url('../icon-fonts/icomoon-55xvk7.woff') format('woff'),
    url('../icon-fonts/icomoon-55xvk7.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-close:before {
  content: "\e905";
}
.icon-menu:before {
  content: "\e904";
}
.icon-arrow-right3:before {
  content: "\e92f";
}
.icon-arrow-left:before {
  content: "\e906";
}
.icon-envelope:before {
  content: "\e903";
}
.icon-twitter:before {
  content: "\e901";
}
.icon-linkedin-square:before {
  content: "\e902";
}
.icon-chevron-down:before {
  content: "\e900";
}

/* 3.0 - Useful classes
============================== */
.upper-text{
    text-transform: uppercase;
}
.relative-block{
    position: relative;
}
.no-margin{
    margin: 0!important;
}
.no-padding{
    padding: 0!important;
}
.alt-bg{
    /* background-color: #f7dddc; */
    background-color: #FFFFFF;
}
.section-small{
    padding: 25px 0;
}
.section{
    padding: 70px 0;
}
.section-medium{
    padding: 107px 0;
}
.intro{
    font-family: 'CircularStdBlack';
    font-size: 32px;
    line-height: 1.2;
}

.small {
    max-width: 400px;
}

.wrapper-inner{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
}
.page-content{
    flex-grow: 1;
    margin-bottom: 160px;
}
@media screen and (max-width: 40em) {
    .column, .columns {
        padding-right: 18px;
        padding-left: 18px;
    }
    .intro{
        font-size: 24px;
    }
    .no-padding-mob{
        padding-left: 0;
        padding-right: 0;
    }
    .no-padding-top{
        padding-top: 0;
    }
    .section-small img,
    .section img{
        width: 100%;
        height: auto;
    }
    .small {
        max-width: 100%;
    }

}
/* 4.0 - General
============================== */
body{
    font-family: 'CircularStdBook';
    font-size: 16px;
    line-height: 1.5;
    background-color: #fff;
    color: #2b2b2b;
}
h1, h2, h3, h4{
    font-family: 'CircularStdBlack';
    line-height: 1.2;
}
h1,h2{
    font-size: 56px;
}
h3{
    font-size: 32px;
    margin-bottom: 14px;
}
h4{
    font-size: 24px;
}
h5{
    font-size: 20px;
}
h6{
    font-size: 18px;
}
a{
    transition: all .5s;
}
a:hover{
    color: #f7dddc;
}
.alt-bg a:hover{
    color: #fff;
}
@media screen and (max-width: 40em) {
    h1,h2{
        font-size: 36px;
    }
    h1.alt, h3, h4{
        font-size: 20px;
    }
}

/**** 4.1 - Buttons ****/
.button{
    position: relative;
    overflow: hidden;
    font-family: 'CircularStdBlack';
    font-size: 24px;
    line-height: 1;
    padding: 25px 75px;
    border: none;
}
.button > * {
    position: relative;
}
.button span {
    display: block;
}

.button:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    padding-top: 0;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.button:active:before,
.button:hover:before {
    width: 120%;
    padding-top: 120%;
    transition: width .8s ease-out, padding-top .8s ease-out;
}
@media screen and (max-width: 40em) {
    .button{
        width: 100%;
        padding: 25px;
    }
}
/**** 4.2 - Animations ****/
/*custom anim*/
.cover-slide-right{
    position: relative;
    overflow: hidden;
}
.cover-slide-right > span{
    opacity: 0;
}
.cover-slide-right:after{
    content: "";
    display: block;
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
}
.cover-slide-right.slide-done > span{
    opacity: 1;
    transition: opacity .2s ease .5s;
}
.cover-slide-right.slide-done:after{
    left: auto;
    right: 0;
    animation: cv-slide-right 1.5s cubic-bezier(1, 0.03, 0, 0.98);
}

@keyframes cv-slide-right{
    0%{width: 0; left: 0; right: auto;}
    40%{width: 100%; left: 0; right: auto;}
    40.1%{width: 100%; left: 0%; right: auto;}
    100%{width: 100%; left: 110%; right: auto;}
}
.anim-children-start-bottom > *{
    transform: perspective(300px)translateY(90px) rotateX(10deg);
    opacity: 0;
    transition: all 1s;
}
.anim {
    opacity: 0;
    transition: all 1.5s ease;
}
.anim-children > * {
    opacity: 0;
    transition: all 2s ease .5s;
}
.anim-start-left {
    transform: translateX(-90px);
}
.anim-start-right {
    transform: translateX(90px);
}
.anim-start-bottom {
    transform: perspective(300px) translateY(90px) rotateX(15deg);
}
.anim-start-top {
    transform: translateY(-90px);
}
.anim-children > * {
    transform: translateY(-90px);
}
.anim-children-start-left > * {
    transform: translateX(-90px);
}
.anim-children > *:nth-child(2) {
    transition-delay: .75s;
}
.anim-children > *:nth-child(3) {
    transition-delay: 1s;
}
.anim-children > *:nth-child(4) {
    transition-delay: 1.25s;
}
.anim-children > *:nth-child(5) {
    transition-delay: 1.5s;
}
.anim-children > *:nth-child(6) {
    transition-delay: 1.75s;
}
.anim-children > *:nth-child(7) {
    transition-delay: 2s;
}
.anim-children > *:nth-child(8) {
    transition-delay: 2.25s;
}
.anim-children > *:nth-child(9) {
    transition-delay: 2.5s;
}
.anim-done,
.anim-done > * {
    transform: none !important;
    opacity: 1!important;
}
.wrapper-inner{
    overflow: hidden;
}

/***** 5.0 - Mobile menu *****/
.mobile-menu{
    display: none;
}
@media screen and (max-width: 40em) {
    body.open{
        overflow-x: hidden;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        width: 100%;
        background: #2b2b2b;
        left: -100%;
        min-height: 100%;
        height: calc(100% - 80px);
        overflow-y: auto;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
        z-index: 999;
    }
    .mobile-menu-head{
        padding: 20px 0;
    }
    .mobile-menu-head a{
        font-family: 'CircularStdBlack';
        font-size: 20px;
        color: #fff!important;
    }
    .mobile-menu li a{
        display: block;
        padding: 75px 20px;
        text-align: center;
        border-top: solid 1px #4a4a4a;
        font-family: 'CircularStdBlack';
        font-size: 36px;
        color: #fff;
    }
    .mobile-menu li a:hover{
        background-color: #fff;
        color: #2b2b2b;
    }
    .open .mobile-menu {
        left: 0;
    }
}

/* 6.0 - Header
============================== */
.head-topbar{
    padding: 20px 0;
}
.head-topbar a{
    font-family: 'CircularStdBold';
    font-size: 20px;
    line-height: 1;
}
.head-middle{
    min-height: 500px;
}
.scroll-down {
    position: absolute!important;
    bottom: 20px;
    left: calc(50% - 24px);
    color: #2b2b2b;
    font-size: 32px;
    transition-property: left, opacity !important;
    transition-duration: 0s, 0.6s !important;
    transition-delay: 0s, 0.7s !important;
    opacity: 0;
}
.scroll-down > span{
    transition: all .5s;
    display: inline-block;
}
.scroll-down:hover > span{
    bottom: 0;
    transform: perspective(200px) rotateX(-360deg);
}

/* 7.0 - Footer
======================================= */
.footer{
    padding: 20px 0;
}
.copyright{
    font-size: 12px;
    margin-bottom: 0;
}
.copyright a{
    text-decoration: underline;
}
.copyright a:hover{
    text-decoration: none;
}

/* 8.0 - Pages
======================================= */
/*** 8.1 Work ***/
.simple-section h2{
    margin-bottom: 40px;
}
.des_work-section{
    background-color: #FFFFFF;
    padding-bottom: 250px;
}
.overlay{
    background: rgb(43, 43, 43);
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    z-index: 20;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.work-box:hover .overlay{
    padding: 20px;
    height: 100%;
}
.des_work-section a{
    display: inline-block;
    margin-bottom: 20px;
}
.title-section{
    padding-top: 130px;
    padding-bottom: 100px;
}
/*** 8.2 About ***/
.about .intro{
    margin-bottom: 50px;
    margin-top: 40px;
}
.profileImg img {
    width: 160px;
    border-radius: 80px;
    margin: 0 auto;
    display: block;
    margin-top: 70px;
}
.details-box{
    max-width: 345px;
    margin: 0 auto;
}
.details-box+.details-box{
    margin-top: 50px;
}
/*** 8.3 Contact ***/
.contact h2{
    margin-bottom: 135px;
}
.contact h2 a{
    border-bottom: 3px solid #2b2b2b;
}
.contact h2 a:hover{
    color: #fff;
    border-bottom-color: #fff;
}
.social a{
    font-size: 20px;
    padding: 0 10px;
}
.social a:hover{
    color: #fff;
}

@media screen and (max-width: 40em) {
    .des_work-section a{
        display: block;
    }
    .contact h2{
        margin-bottom: 100px;
    }
    .simple-section h2{
        margin-bottom: 20px;
    }
}


/*  Images Lightbox */

#lightbox-container{
    display: none;
    position: fixed;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.95);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    text-align: center;
    padding-left: 35px;
    padding-right: 40px;
}
#lightbox-container.lightbox-visible{
    display: block;
}
#lightbox-container.lightbox-visible:after{
    content: url("ajax-loader.gif");
    display: inline-block;
    position: absolute;
    top: 48%;
    left: 48%;
    width: 30px;
    height: 30px;
    opacity: 0.3;
}
#lightbox-container .lightbox-content{
    z-index: 99999;
    min-height: calc(100% - 65px);
    margin-top: 40px;
    transition: all 3s ease;
    transform: translateY(200px);
}
@keyframes zoomIn{
    from{transform: scale(0);}
    to{transform: scale(1);}
}
#lightbox-container.lightbox-visible .lightbox-content{
    transform: translateY(0);
    animation: zoomIn .9s;
}
#lightbox-container .close-lightbox{
    display: inline-block;
    position: fixed;
    font-size: 2em;
    right: 2%;
    cursor: pointer;
    top: 1%;
    z-index: 99999999;
    color: #fff;
}
#lightbox-container .lightbox-content img{
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 678px) {
    .slick-prev, .slick-next{
        bottom: 0;
    }
    #lightbox-container.lightbox-visible:after{
        display: none;
    }
}