/* Common */
@font-face{
    font-family:"proxima nova-regular";
    src:url("../fonts/Proxima Nova-Regular.otf");
}
@font-face
{
    font-family:"proxima nova-semibold";
    src:url("../fonts/Proxima Nova-Semibold.otf");
}    
@keyframes bottom-to-top {
    from {
        margin-top: 350px;
    }

    to {
        margin-top: 0px;
    }
}

@keyframes top-to-bottom {
    from {
        margin-top: -350px;
    }

    to {
        margin-top: 0px;
    }
}
 
@keyframes imageAnimation {
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }
    5% {
        opacity: 1;
        animation-timing-function: ease-out;
    }
    28% {
        opacity: 1;
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
    100% { opacity: 1 }
}

@keyframes twoImgAnimation {
    0% {
        opacity: 0.3;
        animation-timing-function: ease-in;
    }
    5% {
        opacity: 1;
        animation-timing-function: ease-out;
    }
    28% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        transform: scale(1.3);
    }
    100% { opacity: 1 }
}


body{
    margin:0;
    padding:0;
    font-family: "proxima nova-regular";
}

/* Header */
.header{
    width: 90%;
    left: 5%;
    right: 5%;

    height: 20%;

    position: fixed;

    /* padding-top: 1%;
    padding-bottom: 1%; */
}
.menu{
    overflow: auto;
    float: left;
    width: 52%;
}
    .menu li:first-child{
        padding-left: 0 !important;
    }
    .menu li{
        list-style: none;
        text-transform: capitalize;
        float: left;
        font-family: "proxima nova-regular";
        padding: 4% 2%;
        
    }
        .menu li a{
            text-decoration: none;
            color:#787878;
        }
        .menu li a.active{
            color:#d72832;
            text-decoration: none;
        }
        
.logo img{
    float:right;
    width: 32%;
}

/* Home page animation code */


.arrow-up {
    display: non;
    width: 0;
    height: 0;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    border-bottom: 350px solid black;
    animation-name: bottom-to-top;
    animation-duration: 1.5s;
    opacity: 0.8;
    position: absolute;
    z-index: 4;
}

.arrow-down {
    /* margin-top: -2%; */
    display: non;
    width: 0;
    height: 0;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    border-top: 350px solid #f00;
    animation-name: top-to-bottom;
    animation-duration: 1.5s;
    color: white;
    opacity: 0.8;
}
.green-bg {
    background-image: url(../images/slider-1.jpg);
}

.yellow-bg {
    background-image: url(../images/slider-2.jpg)
}

.orange-bg {
    background-image: url(../images/slider-3.jpg)
}

.red-bg {
    background-image: url(../images/slider-4.jpg)
}

.voilet-bg {
    background-image: url(../images/slider-5.jpg)
}

.blue-bg {
    background-image: url(../images/slider-6.jpg)
}

/* Animation for the slideshow images */
.slider-container {
    width: 100%;
    height: 85%;
    overflow: hidden;
    bottom: 0;
    float: left;
    position: fixed;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;


    /* -webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	-o-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2); */
    
        /* -webkit-backface-visibility: hidden;
        -webkit-animation: imageAnimation 16s linear infinite 0s;
        -moz-animation: imageAnimation 16s linear infinite 0s;
        -o-animation: imageAnimation 16s linear infinite 0s;
        -ms-animation: imageAnimation 16s linear infinite 0s;
        animation: imageAnimation 16s linear infinite 0s; */
}

.typedtext {
    position: absolute;
    z-index: 5;
    /* left: 16%;
    top: 5%; */
    font-size: 300%;
    line-height: 150%;
    color: white;
    text-align: center;
    /* border: 1px solid; */
    top: 0;

    /* -webkit-animation: blurFadeInOut 3s ease-in backwards;
	-moz-animation: blurFadeInOut 3s ease-in backwards;
	-ms-animation: blurFadeInOut 3s ease-in backwards;
	animation: blurFadeInOut 3s ease-in backwards; */
}




/* About us Page styles */
.left-slider{ 
    width: 50%;
    overflow: hidden;
    height: 100%;
    float: left;
    }
.right-slider{ 
    width: 50%;
    overflow: hidden;
    height: 100%;
    float: left;
}
.left-slider img{ width: 100%; height: 100%;animation: twoImgAnimation 5s linear infinite 0s; }
.right-slider img{ width: 100%; height: 100%;animation: twoImgAnimation 5s linear infinite 0s;}

.three-row-page-body{
    /* background-image: url(../images/about-us-1.jpg),url(../images/about-us-1.jpg);
    background-repeat: no-repeat,no-repeat;
    background-size: 50%,50%;
    background-origin: 0%,50%; */
    /* background-repeat: no-repeat;
    background-size: 100% 100%; */
    
    /* background-image: url(../images/about-us-3.jpg),url(../images/about-us-4.jpg);
    background-repeat: no-repeat,no-repeat;
    background-size: 50%,50%;
    background-position-x: 0%,100%; */

    height: 65%;
    position: fixed;
    width: 100%;
    bottom:20%;
    overflow: hidden;
    /* animation: pulse 50s infinite; */

            /* -webkit-backface-visibility: hidden;
            -webkit-animation: fadeInOutAmimation 15s linear infinite 0s;
            -moz-animation: fadeInOutAmimation 15s linear infinite 0s;
            -o-animation: fadeInOutAmimation 15s linear infinite 0s;
            -ms-animation: fadeInOutAmimation 15s linear infinite 0s;
            animation: fadeInOutAmimation 15s linear infinite 0s; */
            /* animation: flickerAnimation 5s infinite; */

            /* transition: background-image 1s linear;
    -moz-transition: background-image 1s linear;
    -webkit-transition: background-image 1s linear;
    -ms-transition: background-image 1s linear; */
 }
 @keyframes flickerAnimation {
    0%   { opacity:0.3; }
    50%  { opacity:0.5; }
    100% { opacity:1; }
  }
 @keyframes fadeInOutAmimation {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
    }
    /* 8% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
    } */
    25% {
        opacity: 1;
    }
    33% {
        opacity: 1;
        /* -webkit-transform: scale(1.3); */
    }
    100% { opacity: 1 }
}
@-webkit-keyframes fadeInOutAmimation {
    0% {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
    }
    /* 8% {
        opacity: 0.5;
        -webkit-animation-timing-function: ease-out;
    } */
    25% {
        opacity: 0.5;
    }
    33% {
        opacity: 1;
        /* -webkit-transform: scale(1.3); */
    }
    100% { opacity: 1 }
}

 /* Specialized area Page styles */

 .three-row-page-body-special{
    /* background-image: url(../images/specialized-area-1.JPG),url(../images/specialized-area-2.JPG);
    background-repeat: no-repeat,no-repeat;
    background-size: 50%,50%;
    background-position-x: 0%,100%; */

    height: 65%;
    position: fixed;
    width: 100%;
    bottom:20%;

    /* transition: background-image 1s linear;
    -moz-transition: background-image 1s linear;
    -webkit-transition: background-image 1s linear;
    -ms-transition: background-image 1s linear; */
 }
 /* Services Page styles */
 .three-row-page-body-service
 {
    background-image: url(../images/about-us-3.jpg),url(../images/about-us-4.jpg);
    background-repeat: no-repeat,no-repeat;
    background-size: 50%,50%;
    background-position-x: 0%,100%;
    
    height: 63%;
    position: fixed;
    width: 100%;
    bottom:22%;

    transition: background-image 1s linear;
    -moz-transition: background-image 1s linear;
    -webkit-transition: background-image 1s linear;
    -ms-transition: background-image 1s linear;
 }
 .footer{
    width: 90%;
    left:5%;
    right:5%;
    height: 20%;
    position:fixed;
    bottom:0;
   }
   .heading{
    font-family: "proxima nova-semibold";
   font-size: 115%;
   color: #271f20;
   padding: 1% 2% 0.5%;
}
   .content{
    font-family: "proxima nova-regular";
    color: #2f3133;
    font-size: 105%;
    text-align: justify;
    margin: 0 2%;
    line-height: 115%;
   }

/* Product page styles*/
.three-row-body-product{
    height: 55%;   
    width:100%;
    position:fixed;
    bottom:27%;
    background: black;
}
.product-screen-shot{
    width: 80%;
    margin: 1% auto;
    min-height: 300px;
    /* display: flex;
    flex-direction: row; */
}


.screen-shot{
    width: 20%;
    /* height: 273px; */
    float: left;
    margin: 0 1%;
    margin-bottom: 6%;
}
.footer-product{
    height:27%;
    width:100%;
    bottom: 0;
    position: fixed;

}
.footer-box{
    float:left;
    height:100%;
    width:25%;

}
.product-yellow-bg{
    background: #fff101;
    color:#231f20;

}
.product-red-bg{
    background:#ee1d23;
    color:#fefffc;
}
.product-green-bg{
    background:#40ae49;
    color:#231f20;
}
.product-blue-bg{
    background:#0166b3;
    color:#fefffc;
}

.header-product {
    width: 50%;
    margin: 0 auto;
    }
.header-product h3{
    font-family: "proxima nova-semibold";
    font-size:100%;
    line-height:0%;
    padding-top: 10px;
}
.menu-product{
    padding:0;

}
.menu-product li{
    list-style: none;
    font-family: "proxima nova-regular";
    font-size:95%;
    line-height:120%;
    
}


/* Contact Us page style */

.three-row-body-contact{
    height:40%;
    width: 100%;
    position:fixed;
    bottom: 45%;

    overflow: hidden;
}
.img-contact{
       /* background-image: url(../images/contact-us-2.jpg);
       background-repeat: no-repeat;
       background-size: 100% 100%; */
       height: 100%;
       /* position: fixed; */
       width: 100%;
       /* bottom:50%;  */
       overflow: hidden;
}
.img-contact{
    animation: twoImgAnimation 5s linear infinite 0s;
}
.footer-contact{
    height:50%;
    width:100%;
    position:fixed;
    bottom:0;
    background:#231f20;    
}
.container-contact{
    width:86%;
    margin:0 auto;    
}
.content-contact{
    width:50%;
    height:100%;
    float:left;
    padding: 2% 0;
}
.content-contact p{
    font-family: "proxima nova-regular";
    font-size:90%;
    line-height:150%;
    color: #dfdacf;
    margin:0;
}

.content-contact span{
    font-family: "proxima nova-semi-bold";
    font-size:110%;
    line-height:110%;
    color: #f1fcfe;
    font-weight: bold;
}
.content-contact h3{
    font-family: "proxima nova-semi-bold";
    font-size:115%;
    line-height:110%;
    color: #f1fcfe;
    margin:0;
}
.address{
    margin:2% 0;
}
.form-container{
    width:50%;
    height:100%;
    float:left;
    padding:2% 0;
}
.form-content{
    background: white;
    width: 81%;
    margin: 0 auto;
    height: 84%;
    /* position: absolute; */
    /* left: 10%; */
    /* right: 10%; */
    min-height: 250px;
}
.forms{
    width: 90%;
    margin: 0 auto;
}
.forms .form-name, .forms .form-product{
    width: 99%;
    /* border-radius: 3px; */
    margin: 1% 0;
    padding: 5px;
}
.forms .form-contact{
    width: 49%;
    /* border-radius: 3px; */
    margin: 1% 0;
    padding: 5px;
}
.forms .form-mail{
    width: 49%;
    /* border-radius: 3px; */
    margin: 1% 0;
    padding: 5px;
}
.forms .form-type{
    display: block;
    width: 99%;
    /* border-radius: 3px; */
    margin: 2% 0;
    padding: 5px;
    color: #888585;
}
.forms .form-product{
    height: 130px;
}
.align-right{
    text-align: right;
    padding: 1%;
}
.form-button{
    background-image: linear-gradient(to bottom, #cd0819, #cf091a);
    border: none;
    padding: 1% 5%;
    color: white;
    /* border-radius: 3px; */
}
.form-button:hover{
    background-image: linear-gradient(to bottom, #cf091a,#cd0819);
}
label.design{
    font-family: proxima nova-semibold;
    padding: 2% 0;
    display: block;
}


.slider {
    width: 85%;
    height: 87%;
    position: relative;
    margin: 0 auto;
    overflow-x: scroll;
    overflow-y: hidden;
    background: #313030;
    padding: 20px 0;
  }
  
  .slider::-webkit-scrollbar {
    display: none;
  }
  
  .slider .slide {
    display: flex;
    position: absolute;
    left: 0;
    transition: 0.3s left ease-in-out;
  }
  
  .slider .item {
    margin-right: 10px;
    width: 20%;
  }
  
  .slider .item:last-child {
    margin-right: 0;
  }



  .thumbnailgallery {
    width:90%;
    height:108px;
    overflow:hidden;
    margin: 1% auto;
}
.showrooms .screen-shot {
    display:inline-block;
    float: left;
}

.showrooms img {
    /* border-radius: 5px; */
    padding: 3px;
    display:block;
}



/* Login page design */



* {
  box-sizing: border-box;
}

body {
  /* font-family: "open sans", helvetica, arial, sans;
  background: url(http://farm8.staticflickr.com/7064/6858179818_5d652f531c_h.jpg)
    no-repeat center center fixed; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.log-form {
  width: 40%;
  min-width: 320px;
  max-width: 475px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
    }
  @media (max-width: 40em) {
    .log-form {
    width: 95%;
    position: relative;
    margin: 2.5% auto 0 auto;
    left: 0%;
    -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -o-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
  }
  }
  .log-form form {
    display: block;
    width: 100%;
    padding: 2em;
  }

  .log-form h2 {
    width: 100%;
    color: white;
    font-family: "open sans condensed";
    font-size: 1.35em;
    display: block;
    background: #2a2a2a;
    width: 100%;
    text-transform: uppercase;
    padding: 0.75em 1em 0.75em 1.5em;
    box-shadow: inset 0px 1px 1px white;
    border: 1px solid #2a2a2a;
    /* //text-shadow: 0px 1px 1px darken(#2a2a2a, 5%); */
    margin: 0;
    font-weight: 200;
  }

  .log-form input {
    display: block;
    margin: auto auto;
    width: 100%;
    margin-bottom: 2em;
    padding: 0.5em 0;
    border: none;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 1.25em;
    color: #757575;
  }
  .log-form input:focus {
    outline: none;
  }

  .log-form .btn {
    display: inline-block;
    background: #1fb5bf;
    border: 1px solid #1fb5bf;
    padding: 0.5em 2em;
    color: white;
    margin-right: 0.5em;
    box-shadow: inset 0px 1px 0px white;
  }

  .log-form .btn:hover {
    background: lighten(#1fb5bf, 5%);
  }
  .log-form .btn:active {
    background: #1fb5bf;
    box-shadow: inset 0px 1px 1px black;
  }
  .log-form .btn:focus {
    outline: none;
  }

  .log-form .forgot {
    color: lighten(#1fb5bf, 10%);
    line-height: 0.5em;
    position: relative;
    top: 2.5em;
    text-decoration: none;
    font-size: 0.75em;
    margin: 0;
    padding: 0;
    float: right;
  }
  .log-form .forgot:hover {
      color: #1fb5bf;
    }
    .log-form .forgot:active {
    }


    /* product management admin */
    /* input[type="file"] {
        display: block;
      } */
      .imageThumb {
        max-height: 75px;
        border: 2px solid;
        padding: 1px;
        cursor: pointer;
      }
      .pip {
        display: inline-block;
        margin: 10px 10px 0 0;
      }
      .remove {
        display: block;
        background: #444;
        border: 1px solid black;
        color: white;
        text-align: center;
        cursor: pointer;
      }
      .remove:hover {
        background: white;
        color: black;
      }
      .admin-product{
        width: 200px; float: left;
        text-align: center;
        margin: 5px;
    }
    .admin-product img
    {
        width: 200px;
        height: 280px;
    }
    .remove-from-server{
      padding: 10px 0;
      background: #151617;
      color: white;
      cursor: pointer;
    }



    /* Current Changes */

    /* .slideshow li span.img1 {
        background-image: url(../images/slider-1.jpg);
    }
    
    .slideshow li span.img2 {
        background-image: url(../images/slider-2.jpg);
    }
    
    .slideshow li span.img3 {
        background-image: url(../images/slider-3.jpg);
    }
    
    .slideshow li span.img4 {
        background-image: url(../images/slider-4.jpg);
    } */
    .slideshow{
        margin-top: -1.5%;
    }
    .slideshow:after {
        list-style: none;
    }
    
    .slideshow:after {
        content: '';
        background: transparent url(../images/pattern.png) repeat top left;
    }
    .slideshow li {
        line-height: 0;
        list-style: none;
    }
    .slideshow li span {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        color: transparent;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        opacity: 0;
        z-index: 0;
    }
    
    @media (min-width: 768px) {
        .slideshow li span {
            -webkit-backface-visibility: hidden;
            -webkit-animation: imageAnimation 16s linear infinite 0s;
            -moz-animation: imageAnimation 16s linear infinite 0s;
            -o-animation: imageAnimation 16s linear infinite 0s;
            -ms-animation: imageAnimation 16s linear infinite 0s;
            animation: imageAnimation 16s linear infinite 0s;
        }
    }
    
    /* Show at least something when animations not supported */
    .no-cssanimations .slideshow li span{
        opacity: 1;
    }
    @media screen and (max-width: 1140px) {
        .slideshow li div h3 { font-size: 100px }
    }
    @media screen and (max-width: 600px) {
        .slideshow li div h3 { font-size: 50px }
    }
    
    .slideshow li span.img1 {  }
    /* .slideshow li span.img2 {
        -webkit-animation-delay: 10s;
        -moz-animation-delay: 10s;
        -o-animation-delay: 10s;
        -ms-animation-delay: 10s;
        animation-delay: 10s;
    }
    .slideshow li span.img3 {
        -webkit-animation-delay: 14s;
        -moz-animation-delay: 14s;
        -o-animation-delay: 14s;
        -ms-animation-delay: 14s;
        animation-delay: 14s;
    }
    .slideshow li span.img4 {
        -webkit-animation-delay: 21s;
        -moz-animation-delay: 21s;
        -o-animation-delay: 21s;
        -ms-animation-delay: 21s;
        animation-delay: 21s;
    } */

    .home-page-body{
        width: 100%;
        height: 85%;
        position: fixed;
        overflow: hidden;
        bottom: 0;
    }
    .contact-image{
        position: absolute;
    height: 90%;
    }

    .mobile-header{ display: none; }

    /* #### Mobile Phones Portrait or Landscape #### */
@media only screen and (max-width: 780px){
    .header{ display: none;}
    .mobile-header{ display: block;
        width: 96%;
        left: 5%;
        right: 5%;
        height: 20%;
        position: fixed;
        z-index: 6;
    }
    .mobile-header .logo img {
        float: none;
        width: 85%;
        margin: 0 auto;
        display: block;
    }
    .mobile-menu{
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(231, 114, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        width: 37px;
        height: 25px;
        -webkit-text-stroke: red;
        position: fixed;
        left: 5%;
        top: 3.5%;
        background-repeat: no-repeat;
    }
    .mobile-header .menu {
        overflow: auto;
        /* float: left; */
        width: 100%;
        background-color: #343a40!important;
        position: fixed;
        z-index: 6;
        left: 0;
        display: none;
        top: 10%;
    }
    .mobile-header .menu li a{ color: white;}
    .mobile-header .menu li{
        float: none;
    }
    .home-page-body {
        z-index: -1;
    }
    .home-page-body {
        height: 90%;
    }


    .green-bg {
        background-image: url(../images/slider-1.jpg);
    }

    .slideshow li span {
        -webkit-backface-visibility: hidden;
        -webkit-animation: imageAnimation 16s linear infinite 0s;
        -moz-animation: imageAnimation 16s linear infinite 0s;
        -o-animation: imageAnimation 16s linear infinite 0s;
        -ms-animation: imageAnimation 16s linear infinite 0s;
        animation: imageAnimation 16s linear infinite 0s;
        background-size: 100% 100%;
    }

    .typedtext {
        font-size: 250%;
        line-height: 100%;
        width: 100%;
    height: 100%;
    }

    @keyframes bottom-to-top {
        from {
            margin-top: 650px;
        }
    
        to {
            margin-top: 60%;
        }
    }
    
    @keyframes top-to-bottom {
        from {
            margin-top: -250px;
        }
    
        to {
            margin-top: -5%;
        }
    }


    .arrow-down {
        margin-top: -5%;
    }
    .arrow-up {
        margin-top: 65%;
    }

    .footer {
        width: 95%;
        left: 2.5%;
        right: 2.5%;overflow: auto;}
    .left-slider{ float: none; width: 100%}
    .right-slider{ float: none; width: 100%}
    .slider-container{
        height: 87%;
    }
    .three-row-page-body-service { overflow: hidden;}
    .three-row-page-body-special {
        overflow: hidden;
    }

    .three-row-page-body,.three-row-page-body-service,.three-row-page-body-special{
        height: 60%;
        bottom: 26%;
    }
    .footer {
        height: 25%;
    }
    .screen-shot {
        width: 60% !important;
        margin-left: 20%;
        margin-top: 10%;
    }
    .menu-product li {
        font-size: 75%;
    }
    .header-product {
        width: 85%;
        margin: 0 auto;
    }
    .header-product h3 {
        font-size: 85%;
    }
    .three-row-body-contact{
        display: none;
    }
    .footer-contact {
        top: 14% !important;
    }
    .form-container{
        position: fixed;
    top: 63%;
    background: #231f20;
    width: 100%;
    }
    .forms .form-product {
        height: 60px;
    }
    .contact-image{
        width: 94%;
    }
    .three-row-body-product{
        height: 59%;
    }
    .menu li:first-child {
        padding-left: 2% !important;
    }
    .menu li a.active {
        /* color: #d72832; */
        text-decoration: none;
        font-weight: bold;
        color: #e77200 !important;
    }
    /* .left-slider{height: 90%}
    .right-slider{height: 90%} */
}