body,
html {
  background:#000;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size:14px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:0.8px;
  color:#aaa;
}



h1, h2, h3, h4 { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight:600; letter-spacing:1px; color:#fff;}

h2 {font-size:36px; line-height:44px;}
h4 {font-size:18px; line-height:24px;}
.text-white-75 {
  color: rgba(255, 255, 255, 0.75);
}

p{font-size:14px;}
a {color:#fff; text-decoration:none;}
a:hover, a:focus {color:#ff9227; text-decoration:none;}

.text-primary {color:#ff9227 !important;}

section h2 {margin:35px auto; letter-spacing:2.5px;}
hr.divider {
  max-width: 3.25rem;
  border-width: 0.2rem;
  border-color: #f4623a;
}

hr.light {
  border-color: #fff;
}

.btn {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  border-radius:0; -o-border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; 
}

.btn-xl {
  padding: 0.8rem 2.55rem;
  font-size: 18px;
  letter-spacing:2px;
  font-weight: 700;
  text-transform: uppercase;
}

.btn-outline-primary {
	border-width:2px;
    color: #ff9227;
    border-color: #ff9227;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    color: #fff;
    background-color: #ff9227;
    border-color: #ff9227;
}

.btn-outline-primary:not(:disabled):not(.disabled):active {background-color: #ff9227;
    border-color: #ff9227;}

.page-section {
  padding: 8rem 0;
}

.navbar-logo {position:absolute; top:10px; left:40px; width:120px; height:410px; display:block; z-index:10;   -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;}
.navbar-logo img {max-width:100%; height:auto;}
.navbar-shrink .navbar-logo {width:45px; height:155px; left:60px; }

.innerpage .navbar-logo {width:60px; height:200px; left:50px;}

@media(max-width:1299px){
	.navbar-logo, .innerpage .navbar-logo {width:60px; height:205px; left:50px;}
	.navbar-shrink .navbar-logo {left:50px; }
	
}
@media(max-width:767px){
	.navbar-logo, .innerpage .navbar-logo {width:40px; height:170px; left:20px;}
	.navbar-shrink .navbar-logo {left:20px;}
}
@media (max-width: 499px) {
	.navbar-shrink .navbar-logo {display:none;}
}


#mainNav {
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
    background-color: #000;
	min-height:57px;
}

#mainNav .navbar-brand {
  font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  color: #212529;
  text-indent: -9999px;
}

#mainNav .navbar-nav .nav-item .nav-link {
  font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  font-size: 20px;
  padding: 0.75rem 0;
  text-transform:uppercase;
  letter-spacing:0.8px;
  color: rgba(255, 255, 255, 0.5);
}
  #mainNav .navbar-nav .nav-item .nav-link:hover {
    color:rgba(255,255,255,1); 
  }
  #mainNav .navbar-nav .nav-item.active .nav-link {color:#ff9227; }
  
#mainNav  .dropdown {position:static;}
#mainNav .dropdown-item {font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700; font-size: 16px; text-transform:uppercase; color: rgba(255, 255, 255, 0.5); letter-spacing:0.8px; padding: 6px 15px 2px;}
  
#mainNav .dropdown-item:hover, #mainNav .dropdown-item:focus {color:#fff; background:transparent none;}
#mainNav .dropdown-menu {z-index:9;}

.navbar-toggler-icon {color:#fff;}
.navbar-toggler {font-size:24px; line-height:24px; padding:14px 0px 3px;}



@media (min-width: 992px) {

  #mainNav .navbar-brand {
    color: rgba(255, 255, 255, 0.7);
  }
  #mainNav .navbar-brand:hover {
    color: #fff;
  }
  #mainNav .navbar-nav .nav-item .nav-link {
    
    padding: 15px 20px;
	margin-left: 15px;
	font-size:16px;
  }
  #mainNav .navbar-nav .nav-item .nav-link:hover {
    border-bottom:3px solid #ff9227;
  }

  #mainNav.navbar-scrolled {
    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    background-color: #fff;
  }
  
  #mainNav .navbar-nav .nav-item.active .nav-link {color:rgba(255,255,255,1); border-bottom:3px solid #ff9227;}
  
  #mainNav .navbar-nav .nav-item.active .dropdown-menu {display:block;}
 
  
  .navbar-expand-lg .navbar-nav .dropdown-menu {position:absolute; left:inherit; right:0; width: 100%; border-radius: 0; margin:0; background:#141212; border:transparent none; text-align:right;}
   
   #mainNav .dropdown-item {clear:none; float:left; width:auto;}
   
   #mainNav .dropdown-item {font-size:14px;}
   
    #mainNav .dropdown-item.current {color:#fff;}

   .dropdown.show .nav-link { color:rgba(255,255,255,1) !important; border-bottom:3px solid #ff9227; }

.dropdown-menu.show {  display:block; }

   .dropdown-menu {display:none; padding:0.45rem 0;}
   .dropdown-menu-list {display:inline-block;}
   
   #menu-about .dropdown-menu-list{margin-right:100px;}
}
@media (max-width: 991px) {
#mainNav {min-height:50px;}
}


header{
  height:100vh;
  position:relative;
}

.header-caption {position:absolute; z-index:8; padding-top: calc((100vh - 200px)/2); width: 100%; text-align: center;}
.header-caption h2 {max-width:870px; margin:0 auto; text-transform:uppercase; color:#fff; text-shadow:0px 2px 2px rgba(0,0,0,0.5); letter-spacing:3px;}
.header-caption .btn {margin-top:30px; font-weight:500;}
.header-caption .btn-outline-primary {color:#fff; border-color:#fff;}
.header-caption .btn-outline-primary:hover, .header-caption .btn-outline-primary:focus{border-color:#ff9227;}

.featured-projects {position:absolute; bottom:0; z-index:8; left:0px; width:165px; height:155px; padding-top:10px; padding-bottom:35px; display:block;  color:#fff;  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size:13px; font-weight:500; text-align:center; text-transform:uppercase; letter-spacing:1.5px; cursor:pointer;}

.featured-projects:hover{background:rgba(0,0,0,0.5); color:#fff;}
.icon-arrow-down {width:63px; height:63px; display:block;  background-image:url(../img/icon.png); background-position:0 0; margin: 10px auto; }

.featured-projects:focus {color:#fff;}



footer {background:#000; font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 600; letter-spacing:0.8px; text-transform:uppercase; color:#888; height:55px;}
.footer-col-left {font-size: 12px;}
.footer-col-right {text-align:right; font-size: 14px;}
.footer-contact i {margin:0 5px}
footer a {color:#888;}
footer a:hover, footer a:focus {color:#fff;}


@media(max-width:1299px){
.featured-projects {width: 140px; height: 140px; padding-top: 0;}
}
@media(max-width:1199px){
.featured-projects {bottom:50px;}
.featured-projects:hover {background:transparent;}
}

@media (max-width: 991px) {
#mainNav .navbar-nav .nav-item .nav-link {text-align:center;}
.dropdown-menu {background:transparent; text-align:center; display:none;}
.header-caption h2 {max-width:700px;}
.footer-col-left, .footer-col-right {text-align:center;}
footer {height:70px;}
}

@media (max-width: 767px) {
	 h2 {font-size:30px; line-height:36px;}
	.header-caption h2 {max-width:400px;}
	.featured-projects {width:100%;}
	
}
@media (max-width: 549px) {footer {height:80px;}}

@media (max-width: 499px) {
	 h2 {font-size:24px; line-height:30px;}
	.header-caption h2 {max-width:320px;}
	
	
}

@media (max-width: 349px) {
	h2 {font-size:20px; line-height:28px;}
	.header-caption h2 {max-width:300px;}
}

#carouselHomepage .carousel-item {
  height: 100vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#carouselActivities .carousel-item {height:auto; min-height:0;}

.carousel-fade .carousel-item {
 opacity: 0;
 transition-duration: .6s;
 transition-property: opacity;
}

.carousel-fade  .carousel-item.active,
.carousel-fade  .carousel-item-next.carousel-item-left,
.carousel-fade  .carousel-item-prev.carousel-item-right {
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-right {
 opacity: 0;
}

.carousel-fade  .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-prev {
 transform: translateX(0);
 transform: translate3d(0, 0, 0);
}


@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.5, 1.5);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}

#carouselHomepage .carousel-inner .carousel-item  > img {
  -webkit-animation: zoom 30s;
  animation: zoom 30s;
  height:100vh;
  width:auto;
}

.carousel-control-prev-icon {background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 1792 1792'%3e%3cpath d='M1203 544q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z'/%3e%3c/svg%3e")}
.carousel-control-next-icon {background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 5 14'%3e%3cpath d='M4.648 7.5q0 0.102-0.078 0.18l-3.641 3.641q-0.078 0.078-0.18 0.078t-0.18-0.078l-0.391-0.391q-0.078-0.078-0.078-0.18t0.078-0.18l3.070-3.070-3.070-3.070q-0.078-0.078-0.078-0.18t0.078-0.18l0.391-0.391q0.078-0.078 0.18-0.078t0.18 0.078l3.641 3.641q0.078 0.078 0.078 0.18z'/%3e%3c/svg%3e")}
.carousel-control-prev-icon, .carousel-control-next-icon {width:50px; height:50px; background-color:rgba(20,18,18,1);}


@media (min-width: 1399px) {
  #carouselHomepage .carousel-inner .carousel-item  > img {
    height:auto;
	width:100%;
  }
}

#portfolio .container-fluid {
  max-width: 1920px;
}

#portfolio .container-fluid .portfolio-box {
  position: relative;
  display: block;
}

#portfolio .container-fluid .portfolio-box .portfolio-box-caption {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  opacity: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
  text-align: center;
}

#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category {
  font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing:2px
}

#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name {
  font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; text-transform:uppercase; font-size:25px; font-weight:600; letter-spacing:2px;
}

#portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}

.portfolio-box {
  position: relative;
  overflow: hidden;
}
.portfolio-box img {
  max-width: 100%;
  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.portfolio-box:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.innerpage {padding-top:50px;}
.innerpage footer {position:fixed; bottom:0; width:100%; z-index:8;}

.secondary-bar {height:50px; background:#141212; position:fixed; top:57px; width:100%; display:block; z-index:8;}
.page-projects, .page-activities, .page-management-team {background-image:url(../img/bg1.jpg); background-repeat:no-repeat; background-size:cover;  background-attachment: fixed; background-position:center center; height:calc(100vh - 100px); position:fixed; width:100%; z-index:0;}
.page-contact {background-image:url(../img/home_slider1.jpg); background-repeat:no-repeat; background-size:cover;  background-attachment: fixed; background-position:center center; height:calc(100vh - 100px); position:fixed; width:100%; z-index:0;}
.page-company-profile {background-image:url(../img/bg2.jpg); background-repeat:no-repeat; background-size:cover;  background-attachment: fixed; background-position:center center; height:calc(100vh - 100px); position:fixed; width:100%; z-index:0;}
.page-construction-team {background-image:url(../img/bg3.jpg); background-repeat:no-repeat; background-size:cover;  background-attachment: fixed; background-position:center center; height:calc(100vh - 100px); position:fixed; width:100%; z-index:0;}
.page-partners {background-image:url(../img/bg4.jpg); background-repeat:no-repeat; background-size:cover;  background-attachment: fixed; background-position:center center; height:calc(100vh - 100px); position:fixed; width:100%; z-index:0;}


.py-50{padding: 50px 0;}
.visible-md {display:none;}


.activity, .company-profile {padding-top:40px;}
.activity-item  {width:100%: display:block; margin-bottom:30px; }

.activity-item .main-image{width:100%: display:block; position: relative; overflow: hidden; height:230px;}
.activity-item .main-image img {
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.activity-item:hover .main-image img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.activity-item .activity-title a{width:100%; display:block; text-align:center; padding:7px 15px; background:rgba(0,0,0,0.9); color:#fff; text-transform:uppercase; font-size:14px; letter-spacing:1.3px;}
.activity-item:hover .activity-title a, .activity-item:focus .activity-title a {background:#ff9227;}

.activity-box {background:rgba(20,18,18,0.7); width:100%; display:block; padding:30px;}
.backlink {position:relative; top:-30px; float:right;}
#gmap_canvas {height: 480px; color:#222;}

.contact-details {padding:0; margin:0; font-size:14px;}
.contact-details li {list-style:none; position:relative; width:100%; padding:15px 0 15px 40px; display:block;}
.contact-details i {position:absolute; left:0; font-size:25px; color:#fff;}


.slogan {margin:30px 0; padding:10px 0 10px 20px; max-width:500px; margin-left:80px; border-left:4px solid #ff9227; font-weight:500;}

.team-item { width:100%; display:block; padding:0px; position:relative; padding-top:60px; cursor:pointer; margin-bottom:120px; min-height:250px;}
.team-desc {background:rgba(20,18,18,0.7); width:100%; display:block; padding:90px 20px 20px; margin-top:-70px; overflow:hidden; z-index:4; position:absolute;}
.team-image {border-radius:140px; width:140px; height:140px; overflow:hidden; display:inline-block; border:4px solid #fff; z-index:5; position:relative;}
.team-desc h4{font-weight:500;}
.team-desc h5{color:#fff; font-style:italic;}

.team-item:hover .team-image{border:4px solid #ff9227;}

.business-partners {padding-top:100px;}
.partner-timeline {position:relative; width:100%; display:block; margin:0 auto;}
.partner-line {background-color:#ff9227; width:80%; height:3px; display:block; position:relative; z-index:2; left: 10%; bottom: -70px;}
.partner-item {width:100%; display:block; padding:0px; position:relative; text-align:center; z-index:3; }
.partner-item .partner-logo {border-radius:130px; width:130px; height:130px; overflow:hidden; display:inline-block; border:3px solid #ff9227; z-index:5; position:relative; transition: transform .2s;}
.partner-item:hover .partner-logo{
  transform: scale(1.3); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.partner-item .partner-desc {font-size:11px; line-height:16px; padding:15px; margin:25px 0; }
.partner-item:hover .partner-desc {background:rgba(20,18,18,0.85);}

.navbar-expand-lg .navbar-collapse {padding-right:75px;}
.selectlang {position:fixed; right:15px; display:block; top:10px; width:70px; z-index:1031; border-left: 1px solid #333; padding-left: 10px;}
.selectlang .dropdown a {color:rgba(255,255,255,0.5); font-weight:600; background:transparent; border:transparent none; font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; background: #000;}
.btn:focus, .btn.focus {box-shadow:none;}

.dropdown-toggle::after {border:transparent none; content:"\f107"; font-family:'FontAwesome'; position:relative; top:2px;}

.modal-image-item {width:100%; display:block; padding:30px 0; position:relative; text-align:center; z-index:3; }
.modal-image-item .partner-logo {border-radius:130px; width:200px; height:200px; overflow:hidden; display:inline-block; border:3px solid #ff9227; z-index:5; position:relative;;}

@media (min-width:992px) {
	.team-desc {min-height:270px;}
}
@media (max-width:1199px) {
.activity-item .main-image {height:190px;}
.partner-item {text-align:left; min-height:170px; }
#business-partners  .container{max-width:500px;}
	.partner-item .partner-logo{float:left; margin-right: 40px;}
	.partner-item .partner-desc {float:left; width:calc(100% - 200px); margin:5px 0; font-size:13px;}
	.partner-line {width:3px; height:750px; left: 65px; top:0; bottom:inherit; position:absolute;}
	
}

@media (max-width:991px) {
	.navbar-expand-lg .navbar-collapse {padding-right:0;}
	.py-50 {padding-bottom:70px; padding-top:0;}
	.secondary-bar {display:none;}
	.visible-md {display:block;}
	.activity-box {margin-bottom:30px;}
	.activity-box .carousel, #gmap_canvas  {margin-bottom:20px;}
	.backlink {top:0;}
	#management-team .container, #construction-team .container{max-width:400px;}
	
	.team-item {margin-bottom:80px;}
	.business-partners {    padding-top: 70px;}
	
	.selectlang {right:65px; border-left:transparent none; border-right:1px solid #333;}
}

@media (max-width:767px) {
.hide-sm {display:none;}
.activity-item .main-image {height:auto;}
.activity-item:hover .main-image img {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
.slogan {padding:10px 0 10px 20px; margin-left:0px;} 

.activity, .company-profile {padding-top:20px;}
}

@media (max-width:549px) {
	.py-50 {padding-bottom:80px;}
	h2{font-size:22px; line-height:28px;}
	
	.partner-item .partner-logo {width:100px; height:100px; border-radius:100px; margin-right:20px;}
	.partner-item .partner-desc {float:left; width:calc(100% - 140px); margin:-10px 0 0;}
	.partner-line {left:50px; height:850px; }
	.partner-item:hover .partner-logo{transform: scale(1.1);}
}

@media (max-width:399px) {
	h2{font-size:16px; line-height:20px;}
	.partner-item {min-height:180px; }
	.team-desc h4 {font-size:16px; line-height:24px;}
	.team-desc h5 {font-size:14px; line-height:20px;}
	.team-desc p {font-size:13px; line-height:18px;}
}



.hovered{
  position:absolute;
  bottom:0;
  left: 0;
  height: 100%;
  font-size:11.5px;
  letter-spacing:0.3px;
  background: rgba(20,18,18,0.95);
  width: 100%;
  padding: 80px 15px 15px 15px;
  animation-name: fadeFromtop;
  -webkit-animation-name: fadeFromtop;
  animation-duration: 400ms;
  -webkit-animation-duration: 400ms;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
   opacity:0;
}
.team-item:hover .hovered{
	opacity:1;
  animation-name: fadeFromBottom;
        -webkit-animation-name: fadeFromBottom;
        animation-duration: 500ms;
        -webkit-animation-duration: 500ms;
        animation-timing-function: ease-in;
        -webkit-animation-timing-function: ease-in;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
}

@keyframes fadeFromBottom  {
        0%{
            opacity:0;
            -webkit-transform: translateY(100%);
            -moz-transform: translateY(100%);
            -ms-transform: translateY(100%);
            -o-transform: translateY(100%);
            transform: translateY(100%);
        }
        100%{
            opacity: 1;
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px);
            display: block;
        }
    }
@keyframes fadeFromtop  {
    0%{
        opacity:1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100%{
        opacity: 0;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(400%);
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }
}