@import url('https://fonts.googleapis.com/css?family=Open+Sans');
 /* Remove padding and margin */ 
* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    }
 body{ 
        font-family: "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; 
        background: url(/images/wallpaper.png) repeat; 
        color: #000000;     
        text-align:center; 
    }

 h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #333;
    font-family: "Poppins", sans-serif !important;
}

 p{ 
        font-size: 1.2em;     
    }

 header{background: #2e615b;}
 #box1{
 	margin: 12px 0px;
    font-size: 17px;
    color: #fff;
    margin: 12px 10px;
    text-align: left;
 }
 header .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: beige;
    color: #ffcf00;
 }
  #box2{
    font-size: 17px;
    color: #fff;
    float: right;
    margin-top: 7px;
    margin-right: 15px;
 }
 /* banner CSS */
#services{
	background-image: url(images/services.png);	
  	width: 100%;
    background-size: 100% 100%;
    height: 350px;  	
}
.gallery {
	padding:20px 0 !important;
}

.prd {
	margin:35px 5px 0 5px !important;
	border:1px solid #ccc !important;
	box-sizing:border-box !important;
	transition:1s all ease-in-out;
}
.prd:hover {
	 box-shadow: 4px 4px 10px #c8c8c8;
	 transform:scale(1.2);
	 transition:1s all ease-in-out;
}

/* ---  Nav Bar   --  */
.navbar-default {
    background-color: #ffcf00;
    border-color: #e7e7e7;
    padding: 4px;
    margin-top: 20px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #3a3a3a;
    background-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
.navbar-default .navbar-nav > li > a {
    color: #121212 !important;
}
.nav {
    padding-left: 12%;
    margin-bottom: 0;
    list-style: none;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #000;
    background-color: #ffffff;
}

/*------------- end of nav bar --------------*/
#free-form{
    background-color:#2e615b;
    /* padding: 18px 0px; */
    padding-top: 20px;
    width: 50%;
    left: 25%;
    position: relative;
    margin-top: -32px;
    border-radius: 20px;
    padding-bottom: 20px;
}
#free-form h1{
    margin-top: 0;
    color: #ffcf00;
   
}

#free-form input{
    height: 35px;
    width: 20%;
    border-radius: 50px;
}

.paragaraph{
    margin-top: 30px;
    margin-bottom: 30px;
}

 h1{
    font-size: 26px;
    font-weight: 600;
    color: #ffcf00;
    text-shadow: 2px 2px 4px #021714;
}
.paragaraph p{
    font-weight: 500;
    color: #585858;
    padding-left: 65px;
    padding-right: 65px;
    text-transform: uppercase;
}
.paragaraph img{
    margin-top: 25px;
    margin-bottom: 25px;
}

#services p{
    font-size: 40px;
    margin-top: 6%;
    color: #fff;
    text-shadow: 10px 9px 4px #b38c00;
}

.button {
    padding: 12px 25px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #4e4848;
    background-color: #ffcf00;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #e2e2e2;
    margin-top: 22px;
}

.button:hover { background-color: #ffcf00;}

.button:active {
    background-color: #ffcf00;
    box-shadow: 0 5px #828408;
    transform: translateY(4px);
}
/* End of body parts  */
footer{background: #2e615b;}

footer p{
    color: #fff;
    text-align: justify;
    margin-top: 15px;
    margin-bottom: 15px;
}
footer ul{
    list-style-type: none;
    font-size: 17px;
    line-height: 28px;
    text-align: left;
    margin-left: 38%;
}

footer a{
    color: #ffffff;
    text-decoration: none;
}

footer a:hover, a:focus {
    color: #ffcf00;
    text-decoration: none;
}

footer .login-mail{
    margin-top: 40px;
}

.footer-border{
    border-top: 2px solid #fff;
}
.box-right{
        float: right;
}
/*    about us  */
.feature-5 {
    padding: 80px 35px;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
}
.feature-5 h4 {
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
    transition: all .3s;
    -webkit-transition: all .3s;
   
}
.feature-5 p {
    position: relative;
    z-index: 2;
    transition: all .3s;
    -webkit-transition: all .3s;
  
}

.feature-5:hover img {
    opacity: 1;
}


.feature-5 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .3s;
    -webkit-transition: all .3s;
    background: #000;
}

.feature-5 i {
    position: relative;
    font-size: 42px;
    margin-bottom: 25px;
    z-index: 2;

}


.feature-5:hover i {
    -webkit-animation: moveFromRightRotate 300ms ease;
    animation: moveFromRightRotate 300ms ease;
}

.feature-5:hover i, .feature-5:hover h4, .feature-5:hover p {
    color: #fff;
}

.feature-5:hover h4 {
    -webkit-animation: moveFromLeftRotate 300ms ease;
    animation: moveFromLeftRotate 300ms ease;
}

.feature-5:hover i, .feature-5:hover h4, .feature-5:hover p {
    color: #fff;
}

.feature-5:hover p {
    -webkit-animation: moveFromBottom 300ms ease;
    animation: moveFromBottom 300ms ease;
}

.feature-5:hover i, .feature-5:hover h4, .feature-5:hover p {
    color: #fff;
}

.who-we-are{
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
}
.who-box{
    padding-top: 5em;
   
    text-align: justify;
}

#image:hover {
-webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 10px rgba(255, 236, 195, 0.75);
}
#image {
-webkit-box-shadow: 0px 0px 15px 5px rgba(164, 181, 0, 0.36);
box-shadow: 0px 0px 15px 5px rgba(164, 181, 0, 0.36);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

/*    end of  choose us    */
.why-choose-us{
background:url(images/whuchooseus.jpg) no-repeat center center fixed;  
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
text-align: left;
}

.w3-separator-outer {
    overflow: hidden;
}
.w3-separator.style-liner {
    width: 20px;
}

.w3-separator {
    display: inline-block;
    height: 3px;
    width: 50px;
    margin-bottom: 10px;
    position: relative;
}
.bg-white {
    background-color: #FFF;
}

.w3-separator[class*="style-"]:before {
    left: auto;
    right: 30px;
}
.w3-separator[class*="style-"]:after, .w3-separator[class*="style-"]:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 30px;
    width: 70px;
    height: 1px;
    background: #cecece;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.w3-separator[class*="style-"]:after, .w3-separator[class*="style-"]:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 30px;
    width: 70px;
    height: 1px;
    background: #cecece;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.section-full {
    position: relative;
}
.why-choose-us{
    color: aliceblue;
    text-align: justify;
    padding-top: 35px;
    padding-bottom: 35px;
}

.text-white {
    color: #fff;
}
.text-white {
    color: #fff;
}
.counter {
    position: relative;
}

.font-weight-300 {
    font-weight: 300;
}

.font-40 {
    font-size: 40px;
}
.border-2 {
    border-width: 2px;
}

.border-1, .border-2, .border-3, .border-4, .border-5 {
    border-style: solid;
}

.text-white {
    color: #fff;
}

.m-b30 {
    margin-bottom: 30px;
}

.p-tb15 {
    padding-bottom: 15px;
    padding-top: 15px;
}

.p-lr10 {
    padding-left: 10px;
    padding-right: 10px;
}

.text-center {
    text-align: center;
}

.text-center {
    text-align: center;
}

.m-a0 {
    margin: 0;
}

.font-weight-500 {
    font-weight: 500;
}

/* ---- end of about us ----*/
.inqueryn {
    font-family: 'Merriweather', serif !important;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 18px;
    color: #a59000;
    font-family: roboto;
    text-align: left;
}

/* ---------- end of inquiry ------------*/
.contact-box{
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 15px;
    line-height: 1.5em;
    text-align: left;
    box-shadow: 7px 6px 20px 2px #ffcf0082;
}

.contact-box h3{
    font-size: 22px;
    color: coral;
    margin-bottom: 8px;

}
.contact-box ul{
    font-size: 30px;
}

.name{
  color: #aaa;
  font-size: 12px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  text-align: right;
}

.name div:first-of-type{
  font-size: 14px;
}

.name a{
  color: #aaa;
}

.name a:hover{
  color: #888;
}

.left{
  float: left;
}

.right{
  float: right;
}



.perspective{
  -webkit-perspective: 1200px;
}

.tardis-wrap{
  -webkit-transform-style: preserve-3d;
  -webkit-transform : translateZ(-300px);

  -webkit-animation: zoom-away 12s ease 8s;
}

.tardis{
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -webkit-transform : rotateX(-20deg) rotateY(-30deg);

  -webkit-animation : fade-in 8s ease, take-off 12s ease 8s;
  /*-webkit-animation: take-off 12s ease;*/
}




/*
#
# Begin details
#
*/
.tardis .side{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 360px;
  background-color: #3f577d;
  
  box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;

  -webkit-transform-style: preserve-3d;
  z-index: 1;
}

.side:nth-of-type(1){
  -webkit-transform : translateZ(100px);
}

.side:nth-of-type(2){
  -webkit-transform : rotateY(90deg) translateZ(100px);
}

.side:nth-of-type(3){
  -webkit-transform : rotateY(180deg) translateZ(100px);
}

.side:nth-of-type(4){
  -webkit-transform : rotateY(-90deg) translateZ(100px);
}

.tardis .roof{
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #3f577d;
  -webkit-transform-style: preserve-3d;
  -webkit-transform : rotateX(-90deg) translateZ(-100px);
  z-index: 2;
}


/* The top roof box */
.roof-top{
  position: absolute;
  
  left: 30px;
  width: 140px;
  height: 140px;
  z-index: 2; 
  -webkit-transform-style: preserve-3d;
}

.top-lid{
  width: 140px;
  height: 140px;
  background-color: #355683;

  -webkit-transform-style: preserve-3d;
  -webkit-transform : rotateX(-90deg) translateZ(-89px);
}

.roof-panel{
  position: absolute;
  width: 140px;
  height: 20px;
  background-color: #445d84;
  box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;
  top: -20px;
  -webkit-transform-style: preserve-3d;
}

.roof-panel.a{
  -webkit-transform: rotateY(0deg) translateZ(70px);
}

.roof-panel.b{
 -webkit-transform: rotateY(90deg) translateZ(70px);
}

.roof-panel.c{
  -webkit-transform: rotateY(180deg) translateZ(70px);
}

.roof-panel.d{
  -webkit-transform: rotateY(-90deg) translateZ(70px);
}

/* Light */
.light{
  position: absolute;
  width: 40px;
  height: 40px;
  top: -60px;
  left: 85px;
  z-index: 3;
  -webkit-transform-style: preserve-3d;
}

.light-lid{
  width: 30px;
  height: 30px;
  background-color: #eee;
  

  -webkit-transform-style: preserve-3d;
  -webkit-transform : rotateX(-90deg) translateZ(-14px);
}

.light .light-panel{
  position: absolute;
  width: 30px;
  height: 40px;
  
  -webkit-transform-style: preserve-3d;
}

.light .light-panel .bottom{
  width: 30px;
  height: 12px;
  position: absolute;
  bottom: 0px;
  background-color: #355683;
  box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;
}

.light .light-panel .top{
  width: 30px;
  height: 28px;
  position: absolute;
  top: 0px;
  background-color: #eee;
  box-shadow: inset 1px 0 0 #fff, inset -1px 0 0 #fff, inset 0 1px 0 #fff, inset 0 -1px 0 #fff;
}

.light-panel.a{
  -webkit-transform: rotateY(0deg) translateZ(15px);
}
.light-panel.b{
  -webkit-transform: rotateY(90deg) translateZ(15px);
}
.light-panel.c{
  -webkit-transform: rotateY(180deg) translateZ(15px);
}
.light-panel.d{
  -webkit-transform: rotateY(-90deg) translateZ(15px);
}


/* Floor */
.tardis .floor{
  position: absolute;
  width: 220px;
  height: 220px;
  left: -10px;
  top: 360px;
  -webkit-transform-style: preserve-3d;
}

.floor-lid{
  position: absolute;
  width: 220px;
  height: 220px;
  background-color: #355683;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(90deg) translateZ(109px);;
}

.floor-panel{
  position: absolute;
  width: 220px;
  height: 10px;
  background-color: #3f577d;
  box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;
  -webkit-transform-style: preserve-3d;
}

.floor-panel.a{
  -webkit-transform: rotateY(0deg) translateZ(110px);
}

.floor-panel.b{
 -webkit-transform: rotateY(90deg) translateZ(110px);
}

.floor-panel.c{
  -webkit-transform: rotateY(180deg) translateZ(110px);
}

.floor-panel.d{
  -webkit-transform: rotateY(-90deg) translateZ(110px);
}







/*
#
# Top sign
#
*/
.side .top-sign{
  width: 180px;
  height: 28px;
  background-color: #445d84; 
  border: solid 1px #54749f;
  box-shadow: 0px 2px 4px rgba(0,0,0,.4);
  border-radius: 2px;
  position: absolute;
  top: 10px;
  left: 10px;

  z-index: 10;
}

.top-sign .text{
  background-color: #28394d;
  border: solid 1px #54749f;
  border-radius: 2px;
  width: 100px;
  margin: 3px auto;
  height: 20px;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  padding: 0px 5px;
  box-shadow: inset 0px 0px 3px rgba(0,0,0,.4);
  position: relative;

  text-shadow: 0px 0px 4px rgba(255,255,255, .6);
}

.text .tiny{
  font-size: 4px;
  line-height: 6px;
  text-align: center;
  width: 20px;
  position: absolute;
  right: 35px;
  top: 4px;
}

/*
#
# Door frame
#
*/
.side .door-frame{
  position: absolute;
  width: 160px;
  left: 20px;
  top: 35px;
  bottom: 0px;

  background-color: #445d84; 
  
  box-shadow:inset 0px 2px 8px rgba(0,0,0,.5);

  z-index: 5;
}


.door-frame .door{
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 77px;

  box-shadow:inset 0px 0px 3px rgba(0,0,0,.7);
}

.door.door-left{
  left: 0px;
}

.door.door-right{
  right: 0px;
}

/* Insets */
.door .door-inset{
  position: absolute;
  left: 10px;
  bottom: 10px;

  width: 55px;
  height: 65px;
  box-shadow:inset 0px .5px 5px rgba(0,0,0,.5);
}

.door-inset:nth-of-type(2){
  bottom: 85px;
}

.door-inset:nth-of-type(3){
  bottom: 160px;
}

/* Sign */
.door .sign{
  position: absolute;
  left: 15px;
  bottom: 165px;
  width: 45px;
  height: 55px;
  background-color: #d5e4f6;
  box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;
  /*background: url('sign.png') 50% 50% no-repeat;*/
}

/* Window */
.door .window{
  position: absolute;
  left: 10px;
  bottom: 235px;

  width: 55px;
  height: 65px;
  background-color: #28475d;
}

.window .pane{
  width: 14px;
  height: 28px;
  background-color: #dfe7fc;
  float: left;
  margin: 2px;
  box-shadow: inset 0px 0px 10px #fff;
}

.pane.a{
  margin-left: 3px;
  margin-right: 1px;
}

.pane.d{
  margin-left: 3px;
  margin-right: 1px;
}
.contact-us img{
  margin-top: 60px;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  14% {
    opacity: .2;
  }
  28% {
    opacity: 0;
  }
  42% {
    opacity: .4;
  }
  56% {
    opacity: .1;
  }
  70% {
    opacity: .6;
  }
  84%{
    opacity: .2;
  }
  100%{
    opacity: 1;
  }
}

@-webkit-keyframes take-off {
  0% {
    -webkit-transform : rotateX(-20deg) rotateY(-30deg) translateY(0px);
  }
  10%{
    -webkit-transform : rotateX(-20deg) rotateY(-30deg) translateY(5px);
  }
  30%{
    -webkit-transform: rotateX(5deg) rotateY(-60deg) translateY(-30px);
  }
  50%{
    -webkit-transform: rotateX(-10deg) rotateY(220deg) translateY(-10px);
  }
  100%{
    -webkit-transform : rotateX(-20deg) rotateY(-800deg) translateY(100px);
  }
}

@-webkit-keyframes zoom-away {
  0% {
    -webkit-transform : translateZ(-300px);
  }
  30%{
    -webkit-transform : translateZ(-300px) rotateY(10deg); 
  }
  60%{
    opacity: 1;
    -webkit-transform : translateZ(110px) rotateX(20deg) rotateY(-10deg);
  }
  100%{
    -webkit-transform : translateZ(-30000px) rotateX(-20deg) rotateY(180deg);
    opacity: 0;
  }
}
/* end of contact --*/

 .thumbex {
  margin: 10px 20px 30px;
  min-width: 250px;
  max-width: 435px;
  height: 300px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  outline: 2px solid white;
  outline-offset: -15px;
 /* background-color: blue;*/
  box-shadow: 5px 10px 40px 5px rgba(0, 0, 0, 0.5);
}
 .thumbex .thumbnail {
  overflow: hidden;
  min-width: 250px;
  height: 300px;
  position: relative;
  opacity: 0.88;
  backface-visibility: hidden;
  transition: all 0.4s ease-out;
}
 .thumbex .thumbnail img {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  height: 115%;
  width: auto;
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
}
 .thumbex .thumbnail span {
  position: absolute;
  z-index: 2;
  top: calc(150px - 20px);
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 50px;
  margin: 0 45px;
  text-align: center;
  font-size: 24px;
  color: white;
  font-weight: 300;
  font-family: "Raleway", sans-serif;
  letter-spacing: 0.2px;
  transition: all 0.3s ease-out;
}
.thumbex .thumbnail:hover {
  backface-visibility: hidden;
  transform: scale(1.15, 1.15);
  opacity: 1;
}
 .thumbex .thumbnail:hover span {
  opacity: 0;
}
.product h3{
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 18px;
}

.triangle{
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
  width: 200px;
}
.triangle:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: red;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}

.triangle:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: red;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}​

/* end of products */
@media only screen and (max-width: 768px) {
    h1{
        font-size: 16px;
    }
    .paragaraph p {
        font-weight: 500;
        color: #585858;
        padding-left: 25px;
        padding-right: 25px;
        text-transform: uppercase;
    }
    #free-form {
        background-color: #2e615b;
        padding: 18px 0px; 
        padding-top: 20px;
        width: 100%;
        left: 0px;
        position: relative; 
        margin-top: 0px; 
        border-radius: 20px; 
        padding-bottom: 20px;
    }
    p {
        font-size: 1em;
    }
    #services p {
        font-size: 22px;
        margin-top: 5em;
       
    }


    .button {
        font-size: 12px;
        margin-top: 22px;
    }
    #box2 {
       float: left;
    }
    .box-right{
        float: left;
    }
}

@media only screen and (max-width: 1199px) {
  .nav {
    padding-left: 0%;
    margin-bottom: 0;
    list-style: none;
}
}