/*** fonts ***/
@font-face {
    font-family: 'Sackers Gothic';
    src: url('../fonts/SackersGothicLightAT.eot');
    src: url('../fonts/SackersGothicLightAT.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SackersGothicLightAT.woff2') format('woff2'),
        url('../fonts/SackersGothicLightAT.woff') format('woff'),
        url('../fonts/SackersGothicLightAT.ttf') format('truetype'),
        url('../fonts/SackersGothicLightAT.svg#SackersGothicLightAT') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Sackers Gothic';
    src: url('../fonts/SackersGothicStd-Heavy.eot');
    src: url('../fonts/SackersGothicStd-Heavy.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SackersGothicStd-Heavy.woff2') format('woff2'),
        url('../fonts/SackersGothicStd-Heavy.woff') format('woff'),
        url('../fonts/SackersGothicStd-Heavy.ttf') format('truetype'),
        url('../fonts/SackersGothicStd-Heavy.svg#SackersGothicStd-Heavy') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Comfortaa';
    src: url('../fonts/Comfortaa-Light.eot');
    src: url('../fonts/Comfortaa-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Comfortaa-Light.woff2') format('woff2'),
        url('../fonts/Comfortaa-Light.woff') format('woff'),
        url('../fonts/Comfortaa-Light.ttf') format('truetype'),
        url('../fonts/Comfortaa-Light.svg#Comfortaa-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Comfortaa';
    src: url('../fonts/Comfortaa-Regular.eot');
    src: url('../fonts/Comfortaa-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Comfortaa-Regular.woff2') format('woff2'),
        url('../fonts/Comfortaa-Regular.woff') format('woff'),
        url('../fonts/Comfortaa-Regular.ttf') format('truetype'),
        url('../fonts/Comfortaa-Regular.svg#Comfortaa-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Comfortaa';
    src: url('../fonts/Comfortaa-Bold.eot');
    src: url('../fonts/Comfortaa-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Comfortaa-Bold.woff2') format('woff2'),
        url('../fonts/Comfortaa-Bold.woff') format('woff'),
        url('../fonts/Comfortaa-Bold.ttf') format('truetype'),
        url('../fonts/Comfortaa-Bold.svg#Comfortaa-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

/*** reset style ***/
/* *, ::after, ::before {
    box-sizing: content-box !important;
} */

html, body, nav, p, h1, h2, h3, h4, h5, h6, img, ul, li{
    margin: 0;
    padding: 0;
    color: #000000;
}

html, body{
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, a{
    font-family: 'Sackers Gothic';
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
}

:focus{
    outline: none !important;
}

h1{
    font-weight: 300;
    color: #000000;
}

h2{
    color: #DC0031;
    letter-spacing: 5px;
}

h3{
    font-weight: bold;
    font-style: italic;
}

h4{
    font-weight: bold;
    text-decoration: underline;
}

p{
    font-family: 'Comfortaa';
    line-height: 1.8;
    letter-spacing: 1px;
    color: #000000;
    text-transform: none;
}

a{
    text-decoration: none;
    user-select: none;
    border: none;
    cursor: pointer;
    color: #ffffff;
    letter-spacing: 1px;
    transition: all .25s ease-in;
}

.blocker{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(251,251,251,1);
    z-index: 9999;
}

.blocker div{
    position: absolute;
    left: 0;
    right: 0;
    top: 30%;
    margin: auto;
    display: inline-block;
    text-align: center;
}

.blocker div img{
    width: 15%;
}

.pt-150 {
    padding-top: 100px;
}

/*** popup ***/
._popup{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(0,0,0,0.75);
    z-index: 999;
    display: none;
}

._popup ._popup_content{
    margin: 3% auto;
    width: 90%;
    max-width: 1200px;
}

._popup .close_btn:hover{
    opacity: 0.3;
}

._popup .closeX{
    text-align: right;
    font-size: 18px;
}

._popup .btn{
    color: #fff;
    background: #000000;
    padding: 0.8rem 2.5rem;
    margin: 5% 0 0;
    font-size: 10px;
    display: inline-block;
}

._popup ._popup_content.content_text{
    text-align: center;
    margin-top: 15%;
    padding: 5% 2%;
    background-color: #fff;
}

._popup ._popup_content.content_text p{
    width: 70%;
    margin: 1% auto 0;
    font-size: 13px;
}

._popup ._popup_content.content_text h2{
    font-size: 26px;
    letter-spacing: 3px;
}
/*** Sticky Icon ***/
.float-button {
    transition: all .25s ease-in-out;
    position: fixed;
    bottom: 60px;
    right: 0;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin: 0 2em 2em 0;
    border-radius: 50%;
    padding: .25em;
    width: 50px;
    height: 50px;
    background-color: #DC0031;
    z-index: 9999;
    animation: ring;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    /* animation: ring 1.5s infinite; */
    border: solid transparent;
    box-shadow: 0px 1px 12px #9d9c9c;
}
.float-button .fab {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
}
.float-button.instagram {
    bottom: 0;
}
@keyframes ring {
  0% {
      width: 50px;
      height: 50px;
      opacity: 1;
      transform: rotate(360deg);
  }
  25%  {
      opacity: 0.8;
      transform: rotate(0deg);
  }
  50%  {
      width: 50px;
      height: 50px;
      opacity: 1;
  }
  75% {
  }
  100% {
      width: 50px;
      height: 50px;
      opacity: 1;
  }
}

/*** header ***/
header{
    /* position: fixed; */
    top: 0;
    width: 100%;
    padding-top: 22px;
    padding-bottom: 22px;
    margin: auto;
    text-align: center;
    transition: all .25s ease-in;
    z-index: 998;
    /* background: rgba(0,0,0, .6); */
    background: #fff;
    box-shadow: 0 2px 16px 0px grey;

    
}
header.sticky {
    position: fixed;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: 0 2px 16px 0px grey;
    background: #fff;
}

/*** logo ***/
header .logo{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    width: 15%;
    min-width: 100px;
    /* background: #ffffff; */
    padding: 0 3%;
    transition: 0.5s ease;
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
}
header .logo img{
    width: 100%;
}
.video {
    position: relative;
}
.youtube-embed-area {
    padding-left: 0px;
    padding-right: 0px;
}
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* .video:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: #000000;
    z-index: 99;
    opacity: 0.2;
} */

/*** navigation ***/
nav{
    width: 100%;
    margin: auto;
    text-align: center;
    position: fixed;
    top: 25px;
    left: 10px;
    z-index: 999;
    transition: .2s ease all
}
.sticky + nav {
    top: 20px;
}

nav .menu{
    position: absolute;
    padding: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 999;
    left: 0px;
    transition: 0.5s;
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
    box-sizing: content-box !important;
}
.mobile-show {
    display: none;
}

nav .menu .menu_bar{
    background: #DC0031;
    display: inline-block;
    vertical-align: middle;
    width: 2px;
    margin: 3px 1px;
    transition: 0.5s;
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
}

/*nav .menu .menu_bar.top_menu{
    left: 2px;
}

nav .menu .menu_bar.mid_menu{
    left: 12px;
}

nav .menu .menu_bar.btm_menu{
    left: 22px;
}*/

nav .menu .menu_bar.top_menu{
    height: 80%;
}

nav .menu .menu_bar.mid_menu{
    height: 60%;
}

nav .menu .menu_bar.btm_menu{
    height: 40%;
}

nav .menu .menu_bar.top_animate{
    height: 40%;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    background: #ffffff;
}

nav .menu .menu_bar.mid_animate{
    height: 60%;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    background: #ffffff;
}

nav .menu .menu_bar.btm_animate{
    height: 80%;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    background: #ffffff;
}

nav .menu .menu_block{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

nav .menu img{
    width: 70px;
    top: 12px;
    position: absolute;
    display: none;
}

.main_nav{
    position: fixed;
    width: 250px;
    height: 100%;
    z-index: 998;
    text-align: center;
    top: 0;
    left: -250px;
    background-color: #000000;
    transition: all .5s ease-in;
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
}

.main_nav.active{
    left: 0;
}

.main_nav a.nav{
    margin: 5% auto;
    font-size: 10px;
    display: block;
    outline: none;
    color: #fff;
}

.main_nav img.nav_logo{
    width: 60%;
    margin: 5rem 0 1rem;
}

.main_nav span{
    display: block;
    margin: 15% auto;
    height: 1px;
    background: rgba(255,255,255,0.5);
    width: 25%;
}

.main_nav a.nav:hover, .main_nav a.nav.active, .sticky .title_deco ul li a.active{
    color: #DC0031;
}

.main_nav a.nav_social{
    display: inline-block;
    vertical-align: middle;
    margin: 0 3%;
}

.main_nav a.nav_social img{
    width: 100%;
}

.main_nav a.nav_social:hover{
    opacity: 0.3;
}

/*** scroll btn ***/
.scrolltop{
    position: fixed;
    right: 0%;
    bottom: 5%;
    color: #fff;
    text-align: center;
    z-index: 99;
    width: 30px;
    height: 30px;
    line-height: 28px;
    font-size: 20px;
    background-color: #000000;
    display: none;
    transform: rotate(270deg);
    transition: all .25s ease;
}

.scrolltop:before{
    content: "\003e";
    font-family: 'Comfortaa';
    font-weight: normal;
}

.scrolltop:hover{
    bottom: 6%;
}

/*** footer ***/
footer{
    /* width: 90%; */
    margin: auto;
    padding: 2rem 0;
    color: #000000;
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #000;
    width: 100%;
    padding-top: 3rem
}

footer p{
    font-family: 'Sackers Gothic';
    text-transform: uppercase;
}
footer #contact_holder .contact_details {
    width: 100%;
}
footer #contact_holder .contact_details .phone {
    padding-top: 0;
}
footer p {
     color: #fff;
}
footer > p {
    border-top:  1px solid #fff;
    padding-top: 25px;
    margin-bottom: 0;
}
.fireworks {
    position: fixed;
    z-index: 9999;
    top: 0;
}
/* Snow */
/* .snowflake {
    color: #defcff;
    font-size: 2em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px #000;
}

@-webkit-keyframes snowflakes-fall{
    0%{
        top:-10%
    }
    100%{
        top:100%
    }
}
 @-webkit-keyframes snowflakes-shake{
    0%,100%{
        -webkit-transform:translateX(0);
        transform:translateX(0)
    }
    50%{
        -webkit-transform:translateX(80px);
        transform:translateX(80px)
    }
}
 @keyframes snowflakes-fall{
    0%{
        top:-10%
    }
    100%{
        top:100%
    }
}
@keyframes snowflakes-shake{
    0%,100%{
        transform:translateX(0)
    }
    50%{
        transform:translateX(80px)
    }
}
.snowflake{
    position:fixed;
    top:-10%;
    z-index:9999;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default;
    -webkit-animation-name:snowflakes-fall,snowflakes-shake;
    -webkit-animation-duration:10s,3s;
    -webkit-animation-timing-function:linear,ease-in-out;
    -webkit-animation-iteration-count:infinite,infinite;
    -webkit-animation-play-state:running,running;
    animation-name:snowflakes-fall,snowflakes-shake;
    animation-duration:10s,3s;
    animation-timing-function:linear,ease-in-out;
    animation-iteration-count:infinite,infinite;
    animation-play-state:running,running
}
.snowflake:nth-of-type(0){
    left:5%;
    -webkit-animation-delay:0s,0s;
    animation-delay:0s,0s
}
.snowflake:nth-of-type(1){
    left:10%;
    -webkit-animation-delay:1s,1s;
    animation-delay:1s,1s
}
.snowflake:nth-of-type(2){
    left:15%;
    -webkit-animation-delay:6s,.5s;
    animation-delay:6s,.5s
}
.snowflake:nth-of-type(3){
    left:30%;
    -webkit-animation-delay:4s,2s;
    animation-delay:4s,2s
}
.snowflake:nth-of-type(4){
    left:40%;
    -webkit-animation-delay:2s,2s;
    animation-delay:2s,2s
}
.snowflake:nth-of-type(5){
    left:50%;
    -webkit-animation-delay:8s,3s;
    animation-delay:8s,3s
}
.snowflake:nth-of-type(6){
    left:60%;
    -webkit-animation-delay:6s,2s;
    animation-delay:6s,2s
}
.snowflake:nth-of-type(7){
    left:70%;
    -webkit-animation-delay:2.5s,1s;
    animation-delay:2.5s,1s
}
.snowflake:nth-of-type(8){
    left:75%;
    -webkit-animation-delay:1s,0s;
    animation-delay:1s,0s
}
.snowflake:nth-of-type(9){
    left:90%;
    -webkit-animation-delay:3s,1.5s;
    animation-delay:3s,1.5s
}
.snowflake:nth-of-type(10){
    left:25%;
    -webkit-animation-delay:2s,0s;
    animation-delay:2s,0s
}
.snowflake:nth-of-type(11){
    left:65%;
    -webkit-animation-delay:4s,2.5s;
    animation-delay:4s,2.5s
}

.snowflake:nth-of-type(12){
    left:95%;
    -webkit-animation-delay:1s,0s;
    animation-delay:1s,0s
}

.snowflake:nth-of-type(13){
    left:44%;
    -webkit-animation-delay:5s,3.5s;
    animation-delay:5s,3.5s
} */

/* Pop Up */
#myModal img {
    width: 100%;
    border: 2px solid #fff;
}
#myModal .modal-body {
    padding: 0;
    margin-bottom: -10px;
}
#myModal .modal-body button {
    position: absolute;
    z-index: 9999;
    color: #fff;
    right: 10px;
    top: 5px;
    opacity: 1;
}
  

/*** general ***/
.section_holder{
    width: 100%;
    position: relative;
}

.section_holder .content{
    width: 90%;
    margin: auto;
    text-align: center;
}

.section_holder .container{
    width: 80%;
    max-width: 1200px;
    margin: 3% auto;
}

.title_deco{
    display: inline-block;
    vertical-align: middle;
    width: 30%;
    min-width: 300px;
}

.title_deco img{
    width: 100%;
}

.title{
    display: inline-block;
    vertical-align: middle;
    padding: 0 3%;
    font-size: 1.2vw;
    width: 30%;
}

.register_form .title {
    width: 100%;
}

.title_deco ul {
    display: flex;
    list-style: none;
    justify-content: space-around;
    margin-bottom: 0;
}
.title_deco ul li a{
   color: #000;
    font-size: 14px;
    font-weight: 600;
}
.title_deco ul li a:hover,
.title_deco ul li a.active{
    color: #DC0031;
}
.video img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: top;
}
.home-banner img {
    width: 100%;
    /* height: 100vh;
    object-fit: cover;
    object-position: top; */
}


.sticky .title_deco ul li a{
    color: #000;
 }
/*** aim ***/
#aim_holder{
    margin: 5% auto;
    width: 90%;
}

#aim_holder h1{
    font-size: 2vw;
    font-weight: bold;
}

#aim_holder h1 span{
    color: #DC0031;
}

#aim_holder p{
    font-size: 12px;
    width: 70%;
    margin: 3% auto;
}

/*** works ***/
#work_holder .works_cont{
    /* padding-bottom: 185rem; */
    position: relative;
    /* width: 1000px; */
    margin: auto;
}

#work_holder .works_tile{
    /* display: inline-block;
    position: absolute;
    padding: 30px;
    height: 500px; */
    padding: 15px 30px;
    border: 1px solid rgb(158, 151, 151);
    transition: all .25s ease-in;
    margin-bottom: 30px;
}
.more {
    color: #ffffff;
    background: #000000;
    display: inline-block;
    padding: 1% 2%;
    margin: 0 0 5%;
    font-size: 10px;
    text-transform: uppercase;
}
.more:hover {
    opacity: .3;
    text-decoration: none;
    color: #fff;
}

/* #work_holder .works_tile.small{
    width: 140px;
}

#work_holder .works_tile.big{
    width: 340px;
    padding-left: 31px;
} */

#work_holder .row{
    margin-top: 3%;
}
#work_holder .works_tile h3{
    font-size: 10px;
    text-align: right;
    margin-bottom: 1rem;
}

#work_holder .works_tile a div{
    width: 100%;
    padding-bottom: 100%;
    background-position: center;
    background-size: 140%;
    background-repeat: no-repeat;
    transition: all 0.25s ease-in;
}

#work_holder .works_tile a{
    font-size: 10px;
    font-weight: bold;
    text-align: left;
    color: #000000;
    display: block;
    margin: 1rem 0 5px;
    line-height: 1.8;
    min-height: 36px;;
}

#work_holder .works_tile p{
    font-size: 12px;
    text-align: left;
    min-height: 147px;
}

#work_holder .works_tile a:hover{
    color: #DC0031;
}

#work_holder .works_tile a:hover div{
    background-size: 160%;
}

/* #work_holder #work_b1{
    top: 0;
    left: 0;
    height: 510px;
}

#work_holder #work_b2{
    top: 0;
    left: 402px;
    height: 590px;
}

#work_holder #work_s1{
    top: 0;
    left: 804px;
    height: 410px;
}

#work_holder #work_s2{
    top: 471px;
    left: 804px;
    height: 330px;
}

#work_holder #work_s3{
    top: 571px;
    left: 0;
    height: 610px;
}

#work_holder #work_s4{
    top: 571px;
    left: 201px;
    height: 480px;
}

#work_holder #work_b3{
    top: 651px;
    left: 402px;
    height: 490px;
}

#work_holder #work_s5{
    top: 862px;
    left: 804px;
}

#work_holder #work_s6{
    top: 1242px;
    left: 0;
}

#work_holder #work_s7{
    top: 1112px;
    left: 201px;
}

#work_holder #work_s8{
    top: 1202px;
    left: 402px;
}

#work_holder #work_s9{
    top: 1202px;
    left: 603px;
}

#work_holder #work_s10{
    top: 1423px;
    left: 804px;
}

#work_holder #work_s11{
    top: 1803px;
    left: 0;
}

#work_holder #work_s12{
    top: 1673px;
    left: 201px;
}

#work_holder #work_s13{
    top: 1763px;
    left: 402px;
}

#work_holder #work_s14{
    top: 1763px;
    left: 603px;
}

#work_holder #work_s15{
    top: 1984px;
    left: 804px
}

#work_holder #work_s16{
    top: 2234px;
    left: 201px;
}

#work_holder #work_s17{
    top: 2324px;
    left: 402px;
}

#work_holder #work_s18{
    top: 2324px;
    left: 603px;
} */

/*** service ***/
#services_holder .service{
    display: inline-block;
    vertical-align: top;
    width: 25%;/*25%*/
    margin: 0 1% 5%;
}

#services_holder .service img{
    width: 50%;
}
.service i {
    color:  #000;
    font-size: 50px;
}

#services_holder .service h5{
    font-size: 13px;
    font-weight: bold;
    margin: 15px 0 5px;
}

#services_holder .service p{
    font-size: 12px;
    font-style: italic;
    width: 70%;
    margin: auto;
}

/*** about ***/
#about_holder .about{
    display: inline-block;
    vertical-align: top;
    width: 41%;
    margin: 0 3% 3%;
}

#about_holder .about p{
    font-size: 14px;
    font-style: italic;
    letter-spacing: 0px;
    text-transform: none;
    text-align: justify;
    margin-bottom: 20px;
}
.about img {
    width: 100%;
}

/*** clients ***/
/* #clients_holder .container{
    padding-bottom: 33%;
    position: relative;
    overflow: hidden;
} */

/* #clients_holder .clients_showcase{
    position: absolute;
    width: 100%;
} */

/* #clients_holder .clients_showcase#cli_pg2{
    left: 100%;
} */

/* #clients_holder .clients_showcase img{
    display: inline-block;
    vertical-align: top;
    width: 8.5%;
    margin: 0 2% 3%;
} */
#cli_pg1 img {
    padding: 25px;
    height: auto;
}

.slick-next:before, .slick-prev:before {
    color: #DC0031 !important;
    font-size: 25px !important;
}

#clients_holder .btn_clnt_holder{
    position: absolute;
    width: 100%;
    top: 92%;
    text-align: center;
}

#clients_holder .btn_clnt_holder a{
    background-color: #000000;
    display: inline-block;
    padding: 1% 1%;
    margin: 0 5px;
    font-size: 10px;
}

#clients_holder .btn_clnt_holder a:hover, #clients_holder .btn_clnt_holder a.active{
    opacity: 0.3;
}

/*** contact ***/
#contact_holder img.photo{
    display: inline-block;
    vertical-align: top;
    width: 35%;
    margin: 0 5%;
}

#contact_holder .contact_details{
    display: inline-block;
    vertical-align: top;
    width: 40%;
    text-align: left;
}

#contact_holder .contact_details p{
    font-size: 12px;
    font-weight: normal;
}

#contact_holder .contact_details .phone p a{
    display: inline-block;
    margin-right: 5%;
    color: #DC0031;
    font-family: 'Comfortaa';
    font-weight: bold;
    text-transform: none;
    font-size: 14px;
}

#contact_holder .contact_details .phone p a img{
    display: inline-block;
    vertical-align: middle;
    width: 35px;
}

#contact_holder .contact_details .phone p span{
    display: inline-block;
    margin-right: 0
}

#contact_holder .contact_details .address{
    border-bottom: 1px solid rgba(0,0,0,0.3);
    padding-bottom: 5%;
}

#contact_holder .contact_details .address p.company_name{
    text-transform: uppercase;
    margin-bottom: 2%;
    font-size: 16px;
}

#contact_holder .contact_details .address p.company_name span{
    font-size: 7px;
    display: block;
    margin-top: -5px;
}

#contact_holder .contact_details .address a{
    display: inline-block;
    margin: 2% 3% 0 0;
    width: 40px;
}

#contact_holder .contact_details .address a img{
    width: 100%;
}

#contact_holder .contact_details .phone{
    padding-top: 5%;
}

#contact_holder .contact_details .phone p a:hover, #contact_holder .contact_details .address a:hover{
    opacity: 0.3;
}

/*** register ***/
#register_holder{
    border-bottom: 2px solid #8D704E;
}

#register_holder .title_deco{
    width: 34%;
    margin-bottom: 1%;
}

#register_holder h1{
    color: #8D704E;
    font-size: 3vw;
    margin-bottom: 5%;
}

#register_holder .note{
    width: 50%;
    margin: auto;
}

.register_form{
    width: 50%;
    margin: 5% auto 0;
}

.register_form h2{
    margin-bottom: 2%
}

.register_form .fill_holder{
    width: 96%;
    margin: 0 auto 2%;
}

.register_form .fill_holder:nth-child(5){
    margin-bottom: 4%;
}

.register_form .fill_holder input.form_input, .register_form .fill_holder textarea.form_input{
    resize: none;
    width: 90%;
    border: 1px solid rgba(0,0,0,0.3);
    padding: 3%;
    color: #375267;
    font-family: 'Comfortaa';
    font-weight: bold;
    font-size: 12px;
    -webkit-appearance: none;
    letter-spacing: 1px;
}

.register_form .fill_holder .form_input::placeholder{
    color: rgba(55,82,103,0.7);
    font-family: 'Comfortaa';
    font-weight: 300;
}

.register_form .fill_holder .form_input:focus{
    outline: none;
}

.register_form .fill_holder .err_msg{
    color: rgba(239,12,56,1);
    font-size: 11px;
    opacity: 0;
    text-align: left;
    padding-left: 2%;
    letter-spacing: 0px;
}

.register_form .fill_holder #submitBtn{
    color: #ffffff;
    background: #000000;
    display: inline-block;
    padding: 2% 6%;
    margin: 5% 0 0;
    font-size: 10px;
    text-transform: uppercase;
}

.register_form .fill_holder #submitBtn:hover, #folder_holder a:hover{
    opacity: 0.3;
    text-decoration: none;
}

/*** portfolio ***/
/* #portfolio_holder .banner{
    background-size: cover;
    padding-bottom: 56.25%;
    width: 80%;
    margin: 0 auto 4%;
} */

#portfolio_holder .banner{
    background-size: contain;
    width: 40%;
    margin: 0 auto;
    background-repeat: no-repeat;
    padding-bottom: 35%;

}

#portfolio_holder .title{
    color: #000000;
    font-weight: bold;
}

#portfolio_holder .desc{
    width: 70%;
    margin: 0 auto;
    font-size: 12px;
}

#portfolio_holder .port_nav{
    width: 70%;
    margin: 4% auto;
}

#portfolio_holder .port_nav a{
    color: #000;
    display: inline-block;
    vertical-align: top;
    line-height: 0;
    font-size: 20px;
    width: 5%;
}

#portfolio_holder .port_nav a:nth-child(1){
    margin-top: -2px;
}

#portfolio_holder .port_nav a:nth-child(2){
    color: #DC0031;
    font-weight: bold;
}

#portfolio_holder .port_nav a:nth-child(3){
    margin-top: -1px;
}

#portfolio_holder .port_nav a:hover{
    opacity: 0.3;
}

#portfolio_holder .port_photos img{
    width: 100%;
    margin-bottom: 3%;
}

#portfolio_holder .appa_logo{
    display: inline-block;
    margin-top: 2%;
}

/*** showcase ***/
#showcase_holder .banner, #folder_holder .banner{
    /* background-size: cover; */
    /* padding-bottom: 56.25%; */
    /* width: 80%; */
    /* margin: 0 auto 4%; */
    background-size: contain;
    width: 40%;
    margin: 0 auto;
    background-repeat: no-repeat;
    padding-bottom: 35%;

}

#showcase_holder .title, #folder_holder .title{
    color: #000000;
    font-weight: bold;
}

#showcase_holder .item{
    display: inline-block;
    vertical-align: top;
    width: 25%;
    margin: 3%;
}
#showcase_holder a {
    overflow: hidden;
}

#showcase_holder a:hover img {
    transform: scale(1.1);
}
#showcase_holder .item img{
    width: 100%;
    transition: .2s ease all;
    margin-bottom: 0;;
}
#showcase_holder a:hover h5 {
    margin-top: 5%;
}

#showcase_holder a:hover {
    text-decoration: none;
}

#showcase_holder h3 {
    font-size: 16px;
    font-weight: bold;
}

#showcase_holder .item h5, #folder_holder a h5{
    font-size: 10px;
    margin-top: 3%;
    transition: .2s ease all;
}

/* #showcase_holder a, #folder_holder a{
    color: #ffffff;
    background: #000000;
    display: inline-block;
    padding: 1% 3%;
    margin: -1% 1% 5%;
    font-size: 10px;
    text-transform: uppercase; */
}

.section_holder .container h3{
    text-align: center;
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
}

#folder_holder .container a.folder_btn{
    display: inline-block;
    width: 20%;
    margin: 2%;
    padding: 0;
    background: transparent;
}

#folder_holder .container a.folder_btn img{
    width: 100%;
}


/* Portfolio Category Page */
.nav-tabs {
    display: flex;
     justify-content: center;
     margin-top: 50px;
 }
 .nav-tabs .nav-link {
     color: #000;
 }
 .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active,  .nav-tabs .nav-link:hover{
     color: #DC0031;
 }
 #portfolio_holder .port_photos {
    display: grid !important;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    
}
#portfolio_holder .port_photos a {
    overflow: hidden;
    
}
#portfolio_holder a:hover img {
    transform: scale(1.1);
}

#portfolio_holder .port_photos img {
    height: 135px;
    object-fit: cover;
    transition: .2s ease all;
    margin-bottom: 0;;
}

/* Awards */
#awards_holder img {
    width: 100%;
}

#awards_holder .works_tile a {
    font-size: 10px;
    font-weight: bold;
    text-align: left;
    color: #000000;
    display: block;
    margin: 1rem 0 5px;
    line-height: 1.8;
    min-height: 36px;
}
#awards_holder .works_tile a:hover {
    text-decoration: none;
}
.g-recaptcha > div {
    margin: auto;
}

/* Interior */
#interior_holder .works_cont .col-xl-3 {
    margin-bottom: 30px;
}
#interior_holder .works_cont img {
    width: 100%;
    max-height: 130.5px;
    object-fit: cover;
}

#interior_holder h3 {
    font-size: 16px;
    text-align: left;
    margin-bottom: 1rem;
}

/* Clients */
#cli_all {
    margin: 100px auto;
    display: grid !important;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
#cli_all  img {
    margin: auto;
}

/* New Fireworks */
.fireworks-container {
	pointer-events: none;
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1.25;
}
.stage-container {
    overflow: hidden;
    box-sizing: initial;
    /* border: 1px solid #222;
    margin: -1px; */
    width: 100%;
}
.canvas-container {
	width: 100%;
	height: 100%;
	transition: filter 0.3s;
	background: transparent !important;
}
.help-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    transition-property: visibility;
    transition-duration: 0.25s;
}
.modal-content {
    border: none !important;
}