/**
 * Owl Carousel v2.2.1
 * Copyright 2013-2020 David Deutsch
 * Licensed under  ()
 */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
/* Normal desktop :1200px. */
@media (min-width: 1500px) and (max-width: 1600px) {

  .hero-thumb-inner {
    /*right: 200px !important;*/
}
  .slick-wrapper .slick-items img {
    height: 900px !important;
  }
  .hero-section.style-3 .hero-thumb-inner {
    right: 0px !important;
  }

}

@media (min-width: 1200px) and (max-width: 1500px) {
  .hero-thumb-inner {
    /*right: 130px !important;*/
  }
  .hero-section.style-3 .hero-thumb-inner {
    right: 0px !important;
  }
  .cda-2-content {
  	 margin-left: 0 !important;
  }
  .appointment-carousel .testimonial-content p {
  	width: 80% !important;
  }
}
/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1199px) {

  .header-top-area::before {
   	 /*width: 65% !important;*/
   }
  .hero-content-area p {
    width: 100% !important;
  }
  
  
  
  
.menu-wrapper h4 { 

	right:77vw !important;
	/*margin-right:350px;*/
	}




  
   
  .hero-content-area h4 {
    /*font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 2px;*/
    /*border-top: 2px solid #FF0000;*/
    display: inline-block;
   /* margin-bottom: 28px;*/
	top:20px;
	position:absolute;
	left:-10vw  !important;
	
}
  
  
  
  
  
  
  
  
  
  
  
  
  
  .hero-thumb-inner {
  	/*bottom: -20px !important;
  	right: -88px !important;*/
  }
  .carousel-thumb-inner {
    right: -175px !important;
  }
  .hero-thumb-inner img {
     width: 660px !important;
  }
  .section-head h3,
  .section-head h2 {
  	font-size: 30px !important;
  }
  .process-single-item {
  	padding-left: 10px;
  	padding-right: 10px;
  }
  .appointment-content-section {
  	margin-left: -70px;
    padding-top: 25px !important;
    padding-bottom: 15px !important;
  }
  .services-section .section-head,
  .team-section .section-head {
    padding-bottom: 35px !important;
  }
  .widget p{
    margin-top: 0;
  }
  .popular-post-title h6 {
    font-size: 14px !important;
  }
  .popular-post-title {
  	margin-left: 20px !important;
  }
  .feature-section {
  	 margin-top: 0 !important;
     padding-top: 80px;
  }
   .feature-section.style-7{
     margin-top: -70px !important;
  }
  .feature-single-item {
  	box-shadow: 0 0 15px rgba(0,0,0,0.15) !important;
  }
  .hero-section.style-3 .hero-thumb-inner {
  	/*bottom: -195px !important;
  	left: -170px !important;*/
  }
  .hero-section.style-3 .hero-content-area {
   	margin-left: -80px !important;
  }
  .hero-section.style-3 .hero-content-area h1 {
  	font-size: 59px !important;
  }
  .cda-2-content {
  	margin-left: 0 !important;
  }
  .call-do-action-section.style-2 {
    padding-bottom: 100px !important
  }
  .counter-container.style-3 {
  	margin-top: 0 !important;
  }
  .services-section.style-4 {
    padding-bottom: 70px!important;
  }
  .services-overlay .overlay-icon {
  	margin-bottom: 0 !important;
  	margin-top: 15px;
  }
  .feature-content h4 {
  	font-size: 17px !important;
  }
  .about-helpline {
  	font-size: 16px !important;
  }
  .appointment-carousel {
    padding-bottom: 80px !important;
    padding-top: 60px !important;
  }
  .about-section.style-5 .section-content ul li {
  	font-weight: 500 !important;
    font-size: 14px !important;
  }
  .tabs-style-2 #tabs .ui-tabs-anchor {
  	padding: 10px 30px 15px !important;
  }
  .feature-section.style-4 {
    padding-top: 0;
  }
  .swiper-container-two {
    height: 455px !important;
  }
  .swiper-slider-2 .swiper-content-area h1 {
    font-size: 50px !important;
  }
  .swiper-content-area {
    transform: translateY(35%) !important;
  }
  .swiper-slider-2 .swiper-content-area p {
    width: 70% !important;
  }
  .feature-section.style-5 {
    padding-top: 0 !important;
  }
  .section-head.style-3{
    padding-left: 15px;
  }
  .feature-content-section .single-content .content-icon {
    margin-right: 15px !important;
    margin-left: 0;
  }
  .tag-item .all-days ul li, .tag-item .all-date ul li {
    width: 34px !important;
  }
  .slick-wrapper .slick-items img {
    height: 455px !important;
  }
   .slick-wrapper .slick-items {
    height: 455px !important;
  }
  .slick-content-area h1 {
    font-size: 50px !important;
  }
  .slick-content-area p {
    width: 65% !important;
  }
  .team-section-head {
    padding-bottom: 300px !important;
  }
  .team-section {
    margin-top: -300px !important;
  }
  .team-section-head.style-2 {
    padding-bottom: 220px !important;
  }
  .team-section.style-2 {
    margin-top: -220px !important;
  }
  .team-section-head.style-4{
    padding-bottom: 450px !important;
  }
  .team-section.style-4 {
    margin-top: -450px !important;
  }
  .team-section.style-5 {
    padding-bottom: 80px !important;
  }
  .csd-info {
    padding: 0 30px !important;
  }
}

/* Tablet desktop :768px. */








@media (min-width: 768px) and (max-width: 991px) {



.menu-wrapper h4 { 
display: inline-block;
   /* margin-bottom: 28px;*/
	top:1px !important;
	position:absolute;
	/*left:-30vw;*/
	color:#FFFFFF;
	right:75vw !important;
	/*margin-right:350px;*/
	}



.menu-wrapper h4 a {
    /*font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 2px;*/
    /*border-top: 2px solid #FF0000;*/
    
	/*border:#FF0000 thick solid;*/
	color:#FFFFFF;
	/*height:80px;
	width:150px;*/
	/*background:#FF0000;*/
	text-align:left;
	font-size:16px !important;
	font-weight:500 !important;
	  white-space: nowrap; 
	 font-family: 'Rubik', sans-serif !important;
}


.menu-wrapper h4 img {
width:60px !important;
height:34px !important;
margin-right:-20px !important;


}

.menu-wrapper  h4 span {
display:inline-block ;


}





















 /*start style for Mobile menu*/
  .logo {
    display: none !important;
  }
  
 .logo-txt-img {
  display: block !important;
  }
  
  .logo-txt::before {
    display: block !important;
  }
  .active-nav {
    left: 0 !important;
  }
  .menu-toggle{
    display: block !important;
  }
  .menu-wrapper {
    padding: 30px 0 !important;
overflow: hidden !important;

position:static !important;

background:#252628;
	
  }
  .menu-wrapper nav {
position: absolute;
    background: #f8f8f8;
    width:398px ; /*ammar 398px   90vw*/
    transition: .5s;
    top: 60px;
    left:-100%;
    height: 100vh;
	z-index:100 !important;
	 /*ammar*/
  }
  .menu-wrapper nav ul {
    width:100%;
  }
  .menu-wrapper nav ul li {
    display: block !important;
    border-bottom: 1px solid  #d9d9d9;
  }
  .menu-wrapper nav ul li:nth-child(6) {
    border-bottom: none;
  }
  .menu-wrapper nav ul li a {
    color: #232323 !important;
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 13px 50px !important;
    font-size: 14px !important;
  }
  .menu-wrapper nav ul li a i{
    display: none !important;
  }
  .menu-wrapper nav ul li a span i {
    display: inline-block !important;
    position: absolute;
    right: 20px;
    color: #232323;
    font-size: 12px;
    top: 17px;
  }
  .menu-wrapper nav ul li:hover a span i {
    color: #FF3c00;
  }
  /*nav end*/

  /*Sum Menu */
 .menu-wrapper ul li:hover .sub-menu {
    top: 0px;
  }
 .menu-wrapper .sub-menu {
    left: 397px !important;
    top: 0 !important;
    width: 210px;
    background: #f8f8f8 !important;
    padding: 0px 0px 0px 5px !important;
	
  }
  .menu-wrapper .sub-menu li {
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    display: block !important;
    border-bottom: 1px solid  #f2f2f2;
	
  }
  .menu-wrapper .sub-menu li a {
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 7px 15px !important;
    font-size: 14px !important;
	
  }
  .menu-wrapper .sub-menu li a i{
    display: none !important;
  }
  .menu-wrapper .sub-menu li a span i {
    display: inline-block !important;
    position: absolute;
    right: 20px;
    color: #232323;
    font-size: 12px;
    top: 14px;
    background: #f2f2f2 !important;
  }
   .menu-wrapper .sub-menu li:hover a span i {
    color: #FF3c00;
    transform: rotate(90deg);
  }

  /*Inner Sub Menu */
  .menu-wrapper .sub-menu .inner-sub-menu {
    left: -5px !important;
    top: 70px !important;
    width: 200px !important;
    background: #f8f8f8 !important;
    padding: 0px 0px 0px 5px !important;
  }
  .menu-wrapper .sub-menu li:hover .inner-sub-menu {
    position: absolute;
    top: 43px !important;
    left: -15px !important;
    opacity: 1;
    visibility: visible;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li {
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    display: block !important;
    border-bottom: 1px solid  #f2f2f2;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li a {
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 7px 15px !important;
    font-size: 14px !important;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li a i{
    display: none !important;
  }
/*end style for Mobile menu*/


  /*Start Hero section*/
 .hero-section {
  	height: 600px !important;
  }
  .hero-content-area p {
    width: 100% !important
  }
  
  
.hero-content-area h1 {

	font-size: 48px !important; /*60 58*/
top:33vh !important;  /*200-320*/
	/*margin-top:20px !important;
	position:absolute !important;*/
	
	height:380px !important;
	
    /* height:450px !important;*/
	 /*margin-top:60px !important;
	position:absolute !important;*/

}
  .hero-content-area h4 {
    
   	top:10px !important;
	
	
	position:fixed !important;
	left:1vw !important;
}


.hero-content-area h4 a {
   text-align:left;
	font-size:14px !important;
	font-weight:500 !important;
	 font-family: 'Rubik', sans-serif !important;
}


.hero-content-area h4 img {
width:60px !important;
height:34px !important;

}

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .hero-thumb-inner {
   	display:block; /*none*/
  }
  .section-head h3,
  .section-head h2 {
  	font-size: 24px !important;
  }
 .choose-us-section .section-head h3 {
    margin-bottom: 0 !important;
  }
 .section-head h3 {
   margin-bottom: 15px !important;
  }
  .fun-fact-section .section-head h3 {
  	 margin-bottom: 0 !important;
  }
 .about-section .section-head h3 {
   margin-bottom: 0 !important;
  }
 .section-head h5{
   margin-bottom: 10px !important;
  }
  .single-team-member {
  	margin-bottom: 30px !important;
  }
  .team-section {
  	background-size: cover !important;
  }
  .appointment-content-section {
  	margin-left: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .process-section {
    padding-bottom: 38px !important
  }
  .process-single-item {
  	margin-bottom: 35px !important;
  }
  .process-content {
  	width: 90%;
  }
  .call-do-action-content p {
  	width: 50% !important;
  }
  .subscribe-section-title h5 {
  	margin: 25px 0 !important;
  }
  .widget p{
    margin-top: 0;
  }
  .widget {
  	margin-bottom: 45px !important;
  }
  .single-post-img img {
  	width: 100% !important;
  }
  .choose-us-content .section-head {
  	padding-top: 25px;
  }
  .feature-section {
     margin-top: 0 !important;
     padding-top: 80px;
  }
  .feature-section.style-7 {
     margin-top: -70px !important;
  }
  .feature-single-item {
    box-shadow: 0 0 15px rgba(0,0,0,0.15) !important;
    margin-bottom: 30px;
  }
  .feature-content p {
  	padding: 5px 30px 0px !important;
  }
  .counter-single-item-inner {
    display: block !important;
    text-align: center;
  }
  .fun-fact-container {
  	padding: 20px 0;
  }
  #tabs .tabs-btn-list li {
  	width: 100% !important;
  	margin-bottom: 8px !important;
  }
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  	padding: .5em 6.6em !important;
  }
  .cda-2-content {
  	margin-left: 0 !important;
  }
  .cda-2-content h4 {
  	font-size: 16px !important;
  }
  .cda-2-content h3 {
  	font-size: 20px !important;
  }
  .blog-section.style-3 {
  	padding-top: 0 !important;
  }
  .blog-section.style-3 {
  	margin-bottom: -860px !important;
  }
  .call-do-action-2 {
  	padding-top: 915px !important;
  }
  .counter-container.style-3 {
  	margin-top: 0px !important;
  }
  .call-do-action-section.style-2 {
    padding-bottom: 100px !important
  }
  .services-section.style-4 {
    padding-bottom: 70px!important;
  }
  .blog-section.bg-2 {
  	padding-top: 70px !important;
  }
  .blog-section.style-3 .blog-single-carousel {
  	 margin-top: 0 !important;
  }
  .appointment-carousel .testimonial-content-text {
  	padding: 20px 0px 30px !important;
  }
  .appointment-carousel  {
    padding-top: 90px !important;
    padding-bottom: 80px !important;
  }
  .call-do-action-4 .cda-2-content {
  	padding: 0 !important;
  }
  .call-do-action-4 .cda-2-container {
  	padding: 25px 0;
  }
  .tabs-style-2 #tabs ul li a {
  	font-size: 14px !important;
  }
  .tabs-style-2 #tabs .ui-tabs-anchor {
  	padding: 2px 22px 10px !important;
  }
  .tabs-style-2 ul li a i {
  	padding-bottom: 5px !important;
  }
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }
  .swiper-slider-content .video-icon {
    right: -100px !important;
  }
  .swiper-container-two {
    height: 400px !important;
  }
  .swiper-slider-2 .swiper-content-area h1 {
    margin-bottom: 30px;
  }
  .swiper-content-area {
    transform: translateY(30%) !important;
  }
  .swiper-slider-2 .swiper-content-area p {
    display: none !important;
  }
  .breadcumb-area {
    height: 370px !important;
  }
  .pricing-single-items.style-2  {
    padding: 0 !important;
  }
  .appointment-section.style-3 .input-box {
    width: 90% !important;
  }
  .member-intro {
    padding-left: 0 !important;
  }
  .appointment-section.style-3 .ap-submit-btn {
    width: 90% !important;
  }
  .appointment-content .appointment-form {
    padding: 0 0 0 15px !important;
  }
  .contact-us .ap-submit-btn {
    width: 40% !important;
  }
  .contact-us .input-box.textarea {
    width: 88% !important;
  }
   #accordion h3, #accordion-2 h3 {
    font-size: 14px !important;
  }
  .services-section.style-9 .section-head h3 {
    margin-bottom: 0 !important;
  }
  .section-head.style-4 h3{
    margin-bottom: 0 !important;
  }
  .tag-item .all-days ul li, .tag-item .all-date ul li {
    width: 41px !important;
  }
  .calender-area.style-2 .tag-item .all-days ul li,   .calender-area.style-2 .tag-item .all-date ul li {
    width: 94px !important;
  }
  .slick-wrapper .slick-items img {
    height: 400px !important;
  }
   .slick-wrapper .slick-items {
    height: 400px !important;
  }
  .slick-content-area h1 {
    margin-bottom: 30px;
  }
  .slick-content-area p {
   display: none;
  }
  .team-section-head {
    padding-bottom: 900px !important;
  }
  .team-section {
    margin-top: -900px !important;
  }
  .team-section-head.style-4{
    padding-bottom: 975px !important;
  }
  .team-section.style-4 {
    margin-top: -985px !important;
  }
  .team-section.style-5 {
    padding-bottom: 80px !important;
  }
  .csd-info {
    padding: 0 !important;
  }
  .nivo-directionNav {
    display: none !important;
  }
  .em-slider-main-title {
    font-size: 60px !important;
  }
  .em-slider-text {
    display: none !important;
  }
  .carousel-slider-section .owl-nav {
    display: none !important;
  }
  .carousel-thumb-inner {
    display: none !important;
  }
  .section-content ul li {
    width: 100% !important;
}
.portfolio_nav ul li {
  width: 100% !important;
}
.nivo-controlNav {
    display: block !important;
  }


}

/* Large Mobile :600px. */
@media only screen and (min-width: 600px) and (max-width: 767px) {
  
  /*AMMAR ADDED */
    .header-top-area,  .header-button {
    display:none !important;     /*display:none !important;*/
  }
  /**/
  
  /*start style for Mobile menu*/
  .logo {
    display: none !important;
  }
  
  .logo-txt-img {
  display: block !important;
  }
  
  .logo-txt::before {
    display: block !important;
  }
  .menu-toggle {
    display: block !important;
  }
  .active-nav {
    left: 0 !important;
  }
  .menu-wrapper {
    padding: 30px 0 !important;
    overflow: hidden !important;
	position:static !important;
	background:#252628;
  }
  

  
  
  
  .menu-wrapper nav {
    position: absolute;
    background: #f8f8f8;
   /* width: 250px !important;*/
	 width: 90vw; /*ammar 398px*/
    transition: .5s;
    top: 60px;
    left:-100%;
    height: 100vh;
	z-index:1000 !important; /*ammar*/
  }
  .menu-wrapper nav ul {
    width:100%;
  }
  .menu-wrapper nav ul li {
    display: block !important;
    border-bottom: 1px solid  #d9d9d9;
  }
  .menu-wrapper nav ul li:nth-child(6) {
    border-bottom: none;
  }
  .menu-wrapper nav ul li a {
    color: #232323 !important;
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 13px 50px !important;
    font-size: 14px !important;
  }
  .menu-wrapper nav ul li a i{
    display: none !important;
  }
  .menu-wrapper nav ul li a span i {
    display: inline-block !important;
    position: absolute;
    right: 20px;
    color: #232323;
    font-size: 12px;
    top: 17px;
  }
  .menu-wrapper nav ul li:hover a span i {
    color: #FF3c00;
  }
  /*nav end*/

  /*Sub Menu */
 .menu-wrapper ul li:hover .sub-menu {
    top: 0px;
  }
 .menu-wrapper .sub-menu {
    left: 250px !important;
    top: 0 !important;
    width: 200px !important;
    background: #f8f8f8 !important;
    padding: 0px 0px 0px 5px !important;
  }
  .menu-wrapper .sub-menu li {
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    display: block !important;
    border-bottom: 1px solid  #f2f2f2;
  }
  .menu-wrapper .sub-menu li a {
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 7px 15px !important;
    font-size: 14px !important;
  }
  .menu-wrapper .sub-menu li a i{
    display: none !important;
  }
  .menu-wrapper .sub-menu li a span i {
    display: inline-block !important;
    position: absolute;
    right: 20px;
    color: #232323;
    font-size: 12px;
    top: 14px;
    background: #f2f2f2 !important;
  }
   .menu-wrapper .sub-menu li:hover a span i {
    color: #FF3c00;
    transform: rotate(90deg);
  }

  /*Inner Sub Menu */
  .menu-wrapper .sub-menu .inner-sub-menu {
    left: -5px !important;
    top: 70px !important;
    width: 200px !important;
    background: #f8f8f8 !important;
    padding: 0px 0px 0px 5px !important;
  }
  .menu-wrapper .sub-menu li:hover .inner-sub-menu {
    position: absolute;
    top: 43px !important;
    left: -15px !important;
    opacity: 1;
    visibility: visible;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li {
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    display: block !important;
    border-bottom: 1px solid  #f2f2f2;
    width: 200px !important;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li a {
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 7px 15px !important;
    font-size: 14px !important;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li a i{
    display: none !important;
  }
/*end style for Mobile menu*/

  .hero-section {
  	height: 600px !important;
  }
  .hero-content-area p {
  	width: 80% !important;
  	margin: auto !important;
  	padding: 10px 0 35px;
  }
  .hero-thumb-inner {
   	display:block;  /*none*/
  }
  .hero-content-area {
    text-align: center !important;
  }
  .hero-content-area h1 {
    font-size: 45px !important; /*45*/
	/*margin-top:60px !important;
	position:absolute !important;*/
	
	top:29vh !important;  /*200-320*/
	/*margin-top:20px !important;
	position:absolute !important;*/
	
	height:380px !important;
	
	
  }
  

  
.menu-wrapper h4 { 
display: inline-block;
   /* margin-bottom: 28px;*/
	top:1px !important;
	position:absolute;
	/*left:-30vw;*/
	color:#FFFFFF;
	right:73vw !important;
	/*margin-right:350px;*/
	}



.menu-wrapper h4 a {
    /*font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 2px;*/
    /*border-top: 2px solid #FF0000;*/
    
	/*border:#FF0000 thick solid;*/
	color:#FFFFFF;
	/*height:80px;
	width:150px;*/
	/*background:#FF0000;*/
	text-align:left;
	font-size:16px !important;
	font-weight:500 !important;
	  white-space: nowrap; 
	 font-family: 'Rubik', sans-serif !important;
}


.menu-wrapper h4 img {
width:60px !important;
height:34px !important;
margin-right:-20px !important;


}

.menu-wrapper  h4 span {
display:inline-block ;


}

  
  .hero-content-area h4 {
    
   
    
	top:10px !important;
	
	position:fixed !important;
	left:1vw !important;
	
}


.hero-content-area h4 a {
   text-align:left;
	font-size:14px !important;
	font-weight:500 !important;
	 font-family: 'Rubik', sans-serif !important;
}


.hero-content-area h4 img {
width:60px !important;
height:34px !important;

}

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .hero-section .video-icon {
    display: none !important;
  }
  .section-head h3,
  .section-head h2 {
  	font-size: 23px !important;
  }
  .about-content-container {
  	margin-top: 30px;
    padding-left: 0 !important;
  }
  .services-section .section-title,
  .team-section .section-title,
  .section-head.style-2 .section-title {
  	margin-bottom: 15px;
  }
  .services-section .section-head,
  .team-section .section-head {
    padding-bottom: 35px !important;
  }
  .team-section {
    background-size: cover !important;
  }
  .services-content-section {
  	padding: 20px 20px 0 !important;
  }
  .single-team-member {
    margin-bottom: 30px !important;
  }
  .choose-us-content-section {
    padding-left: 0 !important;
    margin-top: 20px;
  }
  .appointment-content-section {
  	 margin-left: 0 !important;
  }
  .appointment-content-section {
    padding: 40px 35px 30px !important;
    margin-top: 20px;
  }
  .process-section {
    padding-bottom: 38px !important
  }
  .process-single-item {
    margin-bottom: 35px !important;
  }
  .call-do-action-content p {
  	width: 77% !important;
  }
  .call-do-action-content h2,
  .sub-title {
    font-size:  25px !important;
  }
  .testimonial-content-text {
  	padding: 20px 25px 50px !important;
  }
  .widget p{
    margin-top: 0;
  }
  .widget {
    margin-bottom: 45px !important;
  }
  .single-post-img img {
    width: 100% !important;
  }
  .footer-copyright-text {
  	text-align: center;
    padding-bottom: 0 !important;
  }
  .footer-copyright-text p{
  	margin: 10px;
  }
  .footer-copyright-link{
    text-align: center !important;
    padding-top: 0 !important;
  }
  .feature-section {
     margin-top: 0 !important;
     padding-top: 80px;
  }
  .feature-section.style-7 {
     margin-top: -70px !important;
  }
  .feature-single-item {
    box-shadow: 0 0 15px rgba(0,0,0,0.15) !important;
    margin-bottom: 30px;
  }
  .feature-single-item {
  	margin-bottom: 30px;
  }
  .about-section.style-2 {
    padding-top: 45px !important;
  }
  .fun-fact-container {
  	padding: 0 15px;
  }
  .counter-text span {
  	font-size: 40px !important;
  }
  .counter-single-item-inner {
  	padding: 20px 0px !important;
  	text-align: center !important;
  	display: block !important;
  }
  .team-section.style-2 {
   padding-bottom: 0 !important
  }
  .choose-us-content {
    padding-left: 10px !important;
  }
  #tabs .tabs-btn-list li {
    width: 100% !important;
    margin-bottom: 8px !important;
  }
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: .5em 13.8em !important;
  }
  .award-single-items-inner {
  	text-align: center;
  	margin-bottom: 30px;
  }
  .counter-container.style-3 {
  	margin-top: 0 !important;
  }
  .counter-container.style-3 .counter-icon {
      margin-right: 0 !important;
  }
  .blog-section.style-3 {
     background: #f4f7fc !important;
  }
  .blog-section.style-3 .section-title {
    margin-bottom: 30px;
  }
  .cda-2-container {
  	text-align: center;
    padding: 35px 0;
  }
  .cda-2-thumb {
  	margin-bottom: 25px;
  }
  .cda-2-content h4 {
  	font-size: 18px !important;
  }
  .cda-2-content h3 {
  	font-size: 20px !important;
  }
  .cda-2-content {
  	margin-left: 0px !important;
  }
  .call-do-action-section.style-2 {
    padding-bottom: 100px !important
  }
  .testimonial-section.style-4 .testimonial-content-text {
  	padding: 20px 0px 30px !important;
    width: 100% !important;
  }
  .testimonial-section.style-4 .owl-dots {
    margin-top: 20px !important;
  }
  .services-section.style-4 {
    padding-bottom: 70px!important;
  }
  .btn-common.hero-btn-2 {
  	display: none;
  }
  .about-thumb-section {
  	margin-top: 15px;
  }
  .appointment-carousel {
  	margin-top: 20px;
  }
  .appointment-section.style-2 .testimonial-content-text {
  	padding: 20px 0 30px !important;
  }
  .appointment-section.style-2 {
  	margin-top: 0 !important;
  }
  .feature-section.style-7 {
    padding-bottom: 0 !important;
  }
  .tabs-style-2 #tabs ul li {
  	width: 100% !important;
  }
  .tabs-style-2 #tabs .ui-tabs-anchor {
  	padding: 10px 45px 15px !important;
  }
  .tabs-style-2 #tabs ul li a {
  	width: 100%;
  }
  .tabs-style-2 .tab-content-inner {
  	margin-top: 25px;
  }
  .tabs-style-2 #tabs ul {
     margin-left: 0 !important;
  }
  .swiper-slide.slide-1{
    height: 500px !important;
  }
  .swiper-slide.slide-2{
    height: 500px !important;
  }
  .swiper-slider-content h1 {
    font-size: 45px !important;
  }
  .swiper-slider-content h2 {
    font-size: 45px !important;
  }
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }
  .container.text-left {
    text-align: center !important;
  }
  .em_slider_inner.container.text-left {
    text-align: left !important;
  }
  .swiper-slider-content .video-icon {
    display: none !important;
  }
  .swiper-container-one {
    height: 100% !important;
  }
  .swiper-container-two {
    height: 360px !important;
  }
  .swiper-slider-2 .swiper-content-area h5 {
    font-size: 16px !important;
  }
  .swiper-slider-2 .swiper-content-area h1 {
    margin-bottom: 30px;
    font-size: 22px !important;
  }
  .swiper-slider-2 .swiper-content-area p {
    display: none !important;
  }
  .btn-common.btn-swiper-2 a {
    font-size: 14px !important;
    padding: 15px 20px !important;
  }
  .breadcumb-area {
    height: 370px !important;
  }
  .section-thumb img{
    margin-bottom: 30px;
  }
  .breadcumb-content h1 {
    font-size: 31px !important;
  }
  .breadcumb-content .bold-txt {
    font-size: 50px !important;
  }
  .pricing-single-items.style-2  {
    padding: 0 !important;
  }
  .member-thumb img {
    padding-bottom: 20px !important;
  }
  .appointment-section.style-3 .ap-submit-btn {
    width: 80% !important;
  }
  .contact-us .input-box {
    width: 90% !important;
  }
  .contact-us .input-box.textarea {
    width: 90% !important;
  }
  .cda-content-area {
    margin-top: 40px;
  }
  #accordion h3, #accordion-2 h3 {
    font-size: 14px !important;
  }
  .section-head.style-3{
    padding-bottom: 0 !important;
  }
  .web-dev-thumb-section img {
    margin-bottom: 35px;
  }
 .tag-item {
    width: 63%;
  }
  .blog-section.style-7  .blog-content-text h5 a {
    font-size: 22px !important;
  }
  .slick-wrapper .slick-items img {
    height: 360px !important;
  }
   .slick-wrapper .slick-items {
    height: 360px !important;
  }
  .slick-content-area h1 {
    font-size: 30px !important;
    margin-bottom: 30px;
  }
  .slick-content-area p {
   display: none;
  }
  .slick-content-area h5 {
    font-size: 16px !important;
  }
  .btn-common.btn-slick a {
    padding: 15px 25px !important;
    font-size: 14px !important;
  }
  .team-section-head {
    padding-bottom: 1960px !important;
  }
  .team-section {
    margin-top: -2000px !important;
  }
  .team-section-head.style-4{
    padding-bottom: 2050px !important;
  }
  .team-section.style-4 {
    margin-top: -2075px !important;
  }
  .team-section.style-5 {
    padding-bottom: 80px !important;
  }
  .csd-info {
    padding: 0 !important;
    margin-bottom: 0 !important;
  }
  .nivo-directionNav {
    display: none !important;
  }
  .em-slider-main-title {
    font-size: 40px !important;
  }
  .em-slider-text {
    display: none !important;
  }
  .em-button-button-area a {
    padding: 10px 25px !important;
  }
  .em-slider-sub-title {
    font-size: 16px !important;
  }
  .carousel-slider-section .owl-nav {
    display: none !important;
  }
  .carousel-thumb-inner {
    display: none !important;
  }
  .carousel-slider-content {
    text-align: center !important;
  }
 .carousel-slider-content p {
    width: 85% !important;
    margin: auto;
    padding-top: 15px;
  }
  .carousel-slider-content h1, .carousel-slider-content h2 {
    font-size: 45px !important;
  }
  .btn-common.btn-carousel-slider-2 {
    display: none !important;
  }
  .carousel-slider-section .video-icon {
    display: none !important;
  }
  .mm-social-icon {
    margin-top: 15px !important;
    margin-left: 25px;
    text-align: left !important;
  }
  .mm-social-icon span {
    padding: 0 18px !important;
  }
  .mm-social-icon a {
    height: 30px !important;
    width: 30px !important;
    line-height: 30px !important;
    font-size: 14px !important;
  }
  .portfolio_nav ul li {
    width: 100% !important;
  }
  .nivo-controlNav {
    display: block !important;
  }
}



/* Smart mobile */
@media only screen and (min-width: 481px) and (max-width: 599px) {

  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /*start style for Mobile menu*/
  .logo {
    display: none !important;
  }
  
  .logo-txt-img {
  display: block !important;
  }
  .logo-txt::before {
    display: block !important;
  }
  .menu-toggle {
    display: block !important;
  }
  .active-nav {
    left: 0 !important;
  }
  .menu-wrapper {
    padding: 30px 0 !important;
    overflow: hidden !important;
	position:static !important;
	background:#252628;
	
	
	
	
	
  }
  .menu-wrapper nav {
    position: absolute;
    background: #f8f8f8;
   /* width: 250px !important;*/
	 width: 90vw; /*ammar 398px*/
    transition: .5s;
    top: 60px;
    left:-100%;
    height: 100vh;
	z-index:1000 !important; /*ammar*/
  }
  .menu-wrapper nav ul {
    width:100%;
  }
  .menu-wrapper nav ul li {
    display: block !important;
    border-bottom: 1px solid  #d9d9d9;
  }
  .menu-wrapper nav ul li:nth-child(6) {
    border-bottom: none;
  }
  .menu-wrapper nav ul li a {
    color: #232323 !important;
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 13px 50px !important;
    font-size: 14px !important;
  }
  .menu-wrapper nav ul li a i{
    display: none !important;
  }
  .menu-wrapper nav ul li a span i {
    display: inline-block !important;
    position: absolute;
    right: 20px;
    color: #232323;
    font-size: 12px;
    top: 17px;
  }
  .menu-wrapper nav ul li:hover a span i {
    color: #FF3c00;
  }
  .nav-btn {
    display: none !important;
  }
  .mm-social-icon {
    margin-top: 15px !important;
    margin-left: 25px;
    text-align: left !important;
  }
  .mm-social-icon span {
    padding: 0 18px !important;
  }
  .mm-social-icon a {
    height: 30px !important;
    width: 30px !important;
    line-height: 30px !important;
    font-size: 14px !important;
  }
  /*nav end*/

  /*Sub Menu */
 .menu-wrapper ul li:hover .sub-menu {
    top: 0px;
  }
 .menu-wrapper .sub-menu {
    left: 250px !important;
    top: 0 !important;
    width: 200px !important;
    background: #f8f8f8 !important;
    padding: 0px 0px 0px 5px !important;
  }
  .menu-wrapper .sub-menu li {
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    display: block !important;
    border-bottom: 1px solid  #f2f2f2;
  }
  .menu-wrapper .sub-menu li a {
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 7px 15px !important;
    font-size: 14px !important;
  }
  .menu-wrapper .sub-menu li a i{
    display: none !important;
  }
  .menu-wrapper .sub-menu li a span i {
    display: inline-block !important;
    position: absolute;
    right: 20px;
    color: #232323;
    font-size: 12px;
    top: 14px;
    background: #f2f2f2 !important;
  }
   .menu-wrapper .sub-menu li:hover a span i {
    color: #FF3c00;
    transform: rotate(90deg);
  }

  /*Inner Sub Menu */
  .menu-wrapper .sub-menu .inner-sub-menu {
    left: -5px !important;
    top: 70px !important;
    width: 200px !important;
    background: #f8f8f8 !important;
    padding: 0px 0px 0px 5px !important;
  }
  .menu-wrapper .sub-menu li:hover .inner-sub-menu {
    position: absolute;
    top: 43px !important;
    left: -15px !important;
    opacity: 1;
    visibility: visible;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li {
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    display: block !important;
    border-bottom: 1px solid  #f2f2f2;
    width: 200px !important;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li a {
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 7px 15px !important;
    font-size: 14px !important;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li a i{
    display: none !important;
  }
/*end style for Mobile menu*/

  .header-top-area,  .header-button {
    display:none !important;     /*display:none !important;*/
  }
  .hero-section {
    height: 500px !important;
  }
 .hero-content-area p {
    width: 85% !important;
    margin: auto !important;
    padding: 10px 0 35px;
 }
  .hero-thumb-inner {
    display:block;  /*none*/
  }
  .hero-content-area {
    text-align: center !important;
  }
  
  .hero-content-area h1 {
    font-size: 32px !important;
		top:29vh !important;  /*481-599*/
	/*margin-top:20px !important;
	position:absolute !important;*/
	padding:30px 20px 100px 20px !important;
	height:280px !important;
  }
  
  
  
  .menu-wrapper h4 { 
display: inline-block;
   /* margin-bottom: 28px;*/
	top:1px !important;
	position:absolute;
	/*left:-30vw;*/
	color:#FFFFFF;
	right:74vw !important;
	/*margin-right:350px;*/
	}



.menu-wrapper h4 a {
    /*font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 2px;*/
    /*border-top: 2px solid #FF0000;*/
    
	/*border:#FF0000 thick solid;*/
	color:#FFFFFF;
	/*height:80px;
	width:150px;*/
	/*background:#FF0000;*/
	text-align:left;
	font-size:16px !important;
	font-weight:500 !important;
	  white-space: nowrap; 
	 font-family: 'Rubik', sans-serif !important;
}


.menu-wrapper h4 img {
width:60px !important;
height:34px !important;
margin-right:-20px !important;


}

.menu-wrapper  h4 span {
display:none !important;


}

  
  
  
  
  
  
  
  
  
  
   .hero-content-area h4 {
    
   
    
	top:7px !important;
	
	
	position:fixed !important;
	left:1vw !important;
}


.hero-content-area h4 a {
   text-align:left;
	font-size:14px !important;
	font-weight:500 !important;
	 font-family: 'Rubik', sans-serif !important;
}


.hero-content-area h4 img {
width:60px !important;
height:34px !important;

}

  
.hero-content-area h4 span {
display:none !important;


}
  .hero-section .video-icon {
    display: none !important;
  }
  .section-head h3,
  .section-head h2 {
   font-size: 22px !important;
  }
  .about-content-container {
  	margin-top: 30px;
    padding-left: 0 !important;
  }
   #tabs .tabs-btn-list li {
    margin-right: 0 !important;
    width: 100%;
    margin-bottom: 10px;
  }
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: .5em 11em !important;
  }
  .tabs-btn-list li a{
    display:block;
    width:100%;
  }
  .services-section .section-title,
  .team-section .section-title,
  .section-head.style-2 .section-title {
  	margin-bottom: 25px;
  }
  .services-section .section-head,
  .team-section .section-head {
    padding-bottom: 35px !important;
  }
  .team-section {
    background-size: cover !important;
  }
  .services-content-section {
  	padding: 20px 20px 0 !important;
  }
  .single-team-member {
    margin-bottom: 30px !important;
  }
  .choose-us-content-section {
    padding-left: 0 !important;
    margin-top: 20px;
  }
  .appointment-content-section {
  	 margin-left: 0 !important;
  }
  .appointment-content-section {
    padding: 40px 20px 30px !important;
    margin-top: 20px;
  }
  .process-section {
    padding-bottom: 38px !important
  }
  .process-single-item {
    margin-bottom: 35px !important;
  }
  .process-content p {
  	width: 95% !important;
  }
  .call-do-action-content p {
  	width: 77% !important;
  }
  .call-do-action-content h2,
  .sub-title {
    font-size:  25px !important;
    margin-bottom: 20px;
  }
  .testimonial-content-text {
  	padding: 20px 25px 50px !important;
  }
  .widget p{
    margin-top: 0;
  }
  .widget {
    margin-bottom: 45px !important;
  }
  .single-post-img img {
    width: 100% !important;
  }
  .footer-copyright-text {
  	text-align: center;
    padding-bottom: 0 !important;
  }
  .footer-copyright-text p{
  	margin: 10px;
  }
  .footer-copyright-link{
    text-align: center !important;
    padding-top: 0 !important;
  }
  .feature-section {
     margin-top: 0 !important;
     padding-top: 80px;
  }
  .feature-section.style-7 {
     margin-top: -70px !important;
  }
  .feature-single-item {
    box-shadow: 0 0 15px rgba(0,0,0,0.15) !important;
    margin-bottom: 30px;
  }
  .feature-single-item {
    margin-bottom: 30px;
  }
  .about-section.style-2 {
    padding-top: 45px !important;
  }
  .fun-fact-container {
  	padding: 0 15px;
  }
  .counter-text span {
  	font-size: 40px !important;
  }
  .counter-single-item-inner {
  	padding: 20px 0px !important;
  	text-align: center !important;
  	display: block !important;
  }
  .team-section.style-2 {
   padding-bottom: 0 !important
  }
  .choose-us-content {
    padding-left: 10px !important;
  }
  .hero-btn-2{
    display: none !important;
  }
  .award-single-items-inner {
  	text-align: center;
  	margin-bottom: 30px;
  }
  .counter-container.style-3 {
	   margin-top: 0 !important;
  }
  .blog-section.style-3 .section-title {
  	margin-bottom: 30px;
  }
  .blog-section.style-3{
    background: #f4f7fc;
  }
  .cda-2-container {
  	text-align: center;
    padding: 35px 0;
  }
  .cda-2-thumb {
  	margin-bottom: 25px;
  }
  .cda-2-content h4 {
  	font-size: 18px !important;
  }
  .cda-2-content h3 {
  	font-size: 20px !important;
  }
  .cda-2-content {
  	margin-left: 0px !important;
  }
  .call-do-action-section.style-2 {
    padding-bottom: 100px !important
  }
  .testimonial-section.style-4 .testimonial-content-text {
  	width: 100% !important;
    padding: 20px 25px 30px !important;
  }
  .testimonial-section.style-4 .owl-dots {
  	margin-top: 20px !important;
  }
  .services-section.style-4 {
    padding-bottom: 70px!important;
  }
  .about-thumb-section {
  	margin-top: 15px;
  }
  .appointment-carousel {
  	margin-top: 20px;
  }
  .appointment-section.style-2 .testimonial-content-text {
  	padding: 20px 0 30px !important;
  }
  .appointment-section.style-2 {
  	margin-top: 0 !important;
  }
  .feature-section.style-7 {
    padding-bottom: 0 !important;
  }
  .about-feature li {
    font-size: 13px !important;
  }
  .call-do-action-section.style-6 {
    padding-bottom: 100px !important;
  }
  .tabs-style-2 #tabs ul li {
    width: 100% !important;
  }
  .tabs-style-2 #tabs .ui-tabs-anchor {
    padding: 10px 45px 15px !important;
  }
  .tabs-style-2 #tabs ul li a {
    width: 100%;
  }
  .tabs-style-2 .tab-content-inner {
    margin-top: 25px;
  }
  .tabs-style-2 #tabs ul {
  	 margin-left: 0 !important;
  }
  .swiper-slide.slide-1{
    height: 500px !important;
  }
  .swiper-slide.slide-2{
    height: 500px !important;
  }
  .swiper-slider-content h1 {
    font-size: 45px !important;
  }
  .swiper-slider-content h2 {
    font-size: 45px !important;
  }
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }
  .container.text-left {
    text-align: center !important;
  }
  .swiper-slider-content .video-icon {
    display: none !important;
  }
  .swiper-slider-content {
    margin: 0 15px !important;
  }
  .swiper-container-one {
    height: 100% !important;
  }
  .swiper-container-two {
    height: 280px !important;
  }
  .swiper-slider-2 .swiper-content-area h5 {
    font-size: 16px !important;
  }
  .swiper-slider-2 .swiper-content-area h1 {
    margin-bottom: 30px;
    font-size: 22px !important;
  }
  .swiper-slider-2 .swiper-content-area p {
    display: none !important;
  }
  .btn-common.btn-swiper-2 a {
    font-size: 14px !important;
    padding: 15px 20px !important;
  }
  .breadcumb-area {
    height: 370px !important;
  }
  .section-thumb img{
    margin-bottom: 30px;
  }
  .breadcumb-content h1 {
    font-size: 31px !important;
  }
  .pricing-single-items.style-2  {
    padding: 0 !important;
  }
  .member-thumb img {
    padding-bottom: 20px !important;
  }
  .appointment-section.style-3 .ap-submit-btn {
    width: 80% !important;
  }
  .contact-us .input-box {
    width: 90% !important;
  }
  .contact-us .input-box.textarea {
    width: 90% !important;
  }
  .cda-content-area {
    margin-top: 40px;
  }
  .appointment-content .appointment-form {
    padding: 0 0 0 20px !important;
  }
  #accordion h3, #accordion-2 h3 {
    font-size: 14px !important;
  }
  .section-head.style-3{
    padding-bottom: 0 !important;
    padding-left: 15px;
  }
  .web-dev-thumb-section img {
    margin-bottom: 35px;
  }
  .blog-section.style-7 .blog-content-text h5 a {
    font-size: 22px !important;
  }
  .breadcumb-content .bold-txt {
    font-size: 50px !important;
  }
  .single-blog-social-icon ul li i {
    font-size: 12px !important;
    height: 30px !important;
    width: 30px !important;
    line-height: 30px !important;
  }
  .tag-item {
    width: 393px;
  }
  .tag-item .all-days ul li, .tag-item .all-date ul li {
    width: 56px !important;
  }
  .slick-wrapper .slick-items img {
    height: 280px !important;
  }
   .slick-wrapper .slick-items {
    height: 280px !important;
  }
 .slick-content-area h1 {
    font-size: 22px !important;
    margin-bottom: 30px;
  }
  .slick-content-area p {
   display: none;
  }
  .slick-content-area h5 {
    font-size: 16px !important;
  }
  .btn-common.btn-slick a {
    padding: 15px 25px !important;
    font-size: 14px !important;
  }
  .team-section-head {
    padding-bottom: 1680px !important;
  }
  .team-section {
    margin-top: -1710px !important;
  }
  .team-section-head.style-4{
    padding-bottom: 1750px !important;
  }
  .team-section.style-4 {
    margin-top: -1785px !important;
  }
  .team-section.style-5 {
    padding-bottom: 80px !important;
  }
  .csd-info {
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  .nivo-directionNav {
    display: none !important;
  }
  .em-slider-main-title {
    font-size: 40px !important;
  }
  .em-slider-text {
    display: none !important;
  }
  .em-button-button-area a {
    padding: 10px 25px !important;
  }
  .em-slider-sub-title {
    font-size: 16px !important;
  }
  .em_slider_inner.container.text-left {
    text-align: left !important;
  }
  .carousel-slider-section .owl-nav {
    display: none !important;
  }
  .carousel-thumb-inner {
    display: none !important;
  }
  .carousel-slider-content {
    text-align: center !important;
  }
  .carousel-slider-content p {
    width: 85% !important;
    margin: auto;
    padding-top: 15px;
  }
  .carousel-slider-content h1, .carousel-slider-content h2 {
    font-size: 45px !important;
  }
  .btn-common.btn-carousel-slider-2 {
    display: none !important;
  }
  .carousel-slider-section .video-icon {
    display: none !important;
  }
  .portfolio_nav ul li {
    width: 100% !important;
  }
  .nivo-controlNav {
    display: block !important;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

   /*start style for Mobile menu*/
  .logo {
    display: none !important;
  }
  
  .logo-txt-img {
  display: block !important;
  }
  
  .logo-txt::before {
    display: block !important;
  }
  .menu-toggle {
    display: block !important;
  }
  .active-nav {
    left: 0 !important;
  }
  .menu-wrapper {
    padding: 30px 0 !important;
    overflow: hidden !important;  
	position:static !important;
	background:#252628;
  }
  .menu-wrapper nav {
    position: absolute;
    background: #f8f8f8;
    /*width: 170px !important;*/
	 width: 90vw; /*ammar 398px*/
    transition: .5s;
    top: 60px;
    left: -100%;
    height: 100vh;
	z-index:1000 !important; /*ammar*/
  }
  .menu-wrapper nav ul {
    width:100%;
  }
  .menu-wrapper nav ul li {
    display: block !important;
    border-bottom: 1px solid  #d9d9d9;
  }
  .menu-wrapper nav ul li:nth-child(6) {
    border-bottom: none;
  }
  .menu-wrapper nav ul li a {
    color: #232323 !important;
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 13px 15px !important;
    font-size: 14px !important;
  }
  .menu-wrapper nav ul li a i{
    display: none !important;
  }
  .menu-wrapper nav ul li a span i {
    display: inline-block !important;
    position: absolute;
    right: 20px;
    color: #232323;
    font-size: 12px;
    top: 17px;
  }
  .menu-wrapper nav ul li:hover a span i {
    color: #FF3c00;
  }
  .nav-btn {
    display: none !important;
  }
  .mm-social-icon {
    text-align: left !important;
    margin-top: 12px !important;
  }
  .mm-social-icon span {
    padding: 0 15px !important;
  }
  .mm-social-icon a {
    height: 25px !important;
    width: 25px !important;
    line-height: 25px !important;
    font-size: 12px !important;
  }
  /*nav end*/

  /*Sub Menu */
 .menu-wrapper ul li:hover .sub-menu {
    top: 0px;
  }
 .menu-wrapper .sub-menu {
    left: 170px !important;
    top: 0 !important;
    width: 160px !important;
    background: #f8f8f8 !important;
    padding: 0px 0px 0px 5px !important;
  }
  .menu-wrapper .sub-menu li {
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    display: block !important;
    border-bottom: 1px solid  #f2f2f2;
  }
  .menu-wrapper .sub-menu li a {
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 7px 5px 7px 12px !important;
    font-size: 14px !important;
  }
  .menu-wrapper .sub-menu li a i{
    display: none !important;
  }
  .menu-wrapper .sub-menu li a span i {
    display: inline-block !important;
    position: absolute;
    right: 15px;
    color: #232323;
    font-size: 12px;
    top: 14px;
    background: #f2f2f2 !important;
  }
   .menu-wrapper .sub-menu li:hover a span i {
    color: #FF3c00;
    transform: rotate(90deg);
  }

  /*Inner Sub Menu */
  .menu-wrapper .sub-menu .inner-sub-menu {
    left: -5px !important;
    top: 70px !important;
    width: 170px !important;
    background: #f8f8f8 !important;
    padding: 0px 0px 0px 5px !important;
  }
  .menu-wrapper .sub-menu li:hover .inner-sub-menu {
    position: absolute;
    top: 43px !important;
    left: -13px !important;
    opacity: 1;
    visibility: visible;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li {
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    display: block !important;
    border-bottom: 1px solid #f2f2f2;
    width: 161px !important;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li a {
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 7px 15px !important;
    font-size: 14px !important;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li a i{
    display: none !important;
  }
/*end style for Mobile menu*/

  .header-top-area,  .header-button {
      display:none !important;     /*display:none !important;*/
  }
  .hero-section {
   height: 500px !important;
  }
  .hero-content-area p {
   width: 88% !important;
   margin: auto !important;
   padding: 10px 0 35px;
  }
  .hero-thumb-inner {
     display:block;  /*none*/
  }
  .hero-content-area {
    text-align: center !important;
  }
  .hero-content-area h1 {
    font-size: 32px !important;
		top:29vh !important;  /*320-480*/
	/*margin-top:20px !important;
	position:absolute !important;*/
	padding:30px 20px 100px 20px !important;
	height:280px !important;
  }
  
  
  
  
  .menu-wrapper h4 { 
display: inline-block;
   /* margin-bottom: 28px;*/
	top:1px !important;
	position:absolute;
	/*left:-30vw;*/
	color:#FFFFFF;
	right:74vw !important;
	/*margin-right:350px;*/
	}



.menu-wrapper h4 a {
    /*font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 2px;*/
    /*border-top: 2px solid #FF0000;*/
    
	/*border:#FF0000 thick solid;*/
	color:#FFFFFF;
	/*height:80px;
	width:150px;*/
	/*background:#FF0000;*/
	text-align:left;
	font-size:16px !important;
	font-weight:500 !important;
	  white-space: nowrap; 
	 font-family: 'Rubik', sans-serif !important;
}


.menu-wrapper h4 img {
width:60px !important;
height:34px !important;
margin-right:-20px !important;


}

.menu-wrapper  h4 span {
display:none !important;


}
  
  
  
  
  
  
  
  
   .hero-content-area h4 {
    
   
    
	top:7px !important;

	position:fixed !important;
	left:1vw !important;
	
}


.hero-content-area h4 a {
   text-align:left;
	font-size:14px !important;
	font-weight:500 !important;
	 font-family: 'Rubik', sans-serif !important;
}


.hero-content-area h4 img {
width:60px !important;
height:34px !important;

}

  
.hero-content-area h4 span {
display:none !important;


}
  
  
  
  .hero-section .video-icon {
    display: none !important;
  }
  .section-head h3,
  .section-head h2 {
   font-size: 22px !important;
  }
  .about-content-container {
  	margin-top: 30px;
    padding-left: 0 !important;
  }
  #tabs .tabs-btn-list li {
    margin-right: 0 !important;
    width: 100%;
    margin-bottom: 10px;
  }
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: .5em 6em !important;
  }
  .tabs-btn-list li a{
    display:block;
    width:100%;
  }
  .services-section .section-title,
  .team-section .section-title,
  .section-head.style-2 .section-title {
  	margin-bottom: 25px;
  }
  .services-section .section-head,
  .team-section .section-head {
    padding-bottom: 35px !important;
  }
  .team-section {
    background-size: cover !important;
  }
  .services-content-section {
  	padding: 20px 20px 0 !important;
  }
  .single-team-member {
    margin-bottom: 30px !important;
  }
  .choose-us-content-section {
    padding-left: 0 !important;
    margin-top: 20px;
  }
  .appointment-content-section {
  	 margin-left: 0 !important;
  }
  .appointment-content-section {
    padding: 40px 20px 30px !important;
    margin-top: 20px;
  }
  .process-section {
    padding-bottom: 38px !important
  }
  .process-single-item {
    margin-bottom: 35px !important;
  }
  .process-content p {
  	width: 95% !important;
  }
  .call-do-action-content p {
  	width: 77% !important;
  }
  .call-do-action-content h2,
  .sub-title {
    font-size:  25px !important;
    margin-bottom: 20px;
  }
  .testimonial-content-text {
  	padding: 20px 25px 50px !important;
  }
  .widget p{
    margin-top: 0;
  }
  .widget {
    margin-bottom: 45px !important;
  }
  .single-post-img img {
    width: 100% !important;
  }
  .footer-copyright-text {
    font-size: 15px !important;
  	text-align: center;
    padding-bottom: 0 !important;
  }
  .footer-copyright-text p{
  	margin: 10px;
  }
  .footer-copyright-link{
    text-align: center !important;
    padding-top: 0 !important;
  }
  .footer-copyright-link ul li {
  	padding: 0 5px !important;
  }
  .feature-section {
     margin-top: 0 !important;
     padding-top: 80px;
  }
   .feature-section.style-7 {
     margin-top: -70px !important;
  }
  .feature-single-item {
    box-shadow: 0 0 15px rgba(0,0,0,0.15) !important;
    margin-bottom: 30px;
  }
  .feature-single-item {
    margin-bottom: 30px;
  }
  .about-section.style-2 {
    padding-top: 45px !important;
  }
  .fun-fact-container {
    padding: 0 15px;
  }
  .counter-text span {
    font-size: 40px !important;
  }
  .counter-single-item-inner {
    padding: 20px 0px !important;
    text-align: center !important;
    display: block !important;
  }
  .team-section.style-2 {
   padding-bottom: 0 !important
  }
  .choose-us-content {
  	padding-left: 10px !important;
  }
  .hero-btn-2{
    display: none !important;
  }
  .award-single-items-inner {
  	text-align: center;
  	margin-bottom: 30px;
  }
  .counter-container.style-3 {
	   margin-top: 0 !important;
  }
  .blog-section.style-3 .section-title {
  	margin-bottom: 30px;
  }
  .blog-section.style-3{
    background: #f4f7fc;
  }
  .cda-2-container {
  	text-align: center;
    padding: 35px 0;
  }
  .cda-2-thumb {
  	margin-bottom: 25px;
  }
  .cda-2-content h4 {
  	font-size: 18px !important;
  }
  .cda-2-content h3 {
  	font-size: 20px !important;
  }
  .cda-2-content {
  	margin-left: 0px !important;
  }
  .call-do-action-section.style-2 {
    padding-bottom: 100px !important
  }
  .services-section.style-4 {
    padding-bottom: 70px!important;
  }
  .testimonial-section.style-4 .testimonial-content-text {
  	width: 100% !important;
    padding: 20px 5px 30px !important;
  }
  .testimonial-section.style-4 .owl-dots {
  	margin-top: 20px !important;
  }
  .subscribe-submit-btn {
  	font-size: 14px !important;
  	padding: 12px 10px !important;
  }
  .blog-section.style-3 .blog-content {
  	padding: 45px 30px 40px !important;
  }
  .about-thumb-section {
  	margin-top: 15px;
  }
  .appointment-carousel {
  	margin-top: 20px;
  }
  .appointment-section.style-2 .testimonial-content-text {
  	padding: 20px 0 30px !important;
  }
  .appointment-section.style-2 {
  	margin-top: 0 !important;
  }
  .feature-section.style-7 {
    padding-bottom: 0 !important;
  }
  .section-content ul li {
  	width: 100% !important;
  }
  .call-do-action-section.style-6 {
    padding-bottom: 100px !important;
  }
  .tabs-style-2 #tabs ul li {
    width: 100% !important;
  }
  .tabs-style-2 #tabs .ui-tabs-anchor {
    padding: 10px 45px 15px !important;
  }
  .tabs-style-2 #tabs ul li a {
    width: 100%;
  }
  .tabs-style-2 .tab-content-inner {
    margin-top: 25px;
  }
  .tabs-style-2 #tabs ul {
     margin-left: 0 !important;
  }
  .swiper-slide.slide-1{
    height: 500px !important;
  }
  .swiper-slide.slide-2{
    height: 500px !important;
  }
  .swiper-slider-content h1 {
    font-size: 32px !important;
  }
  .swiper-slider-content h2 {
    font-size: 32px !important;
  }
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }
  .container.text-left {
    text-align: center !important;
  }
  .swiper-slider-content .video-icon {
    display: none !important;
  }
  .swiper-container-one {
    height: 100% !important;
  }
  .swiper-container-two {
    height: 280px !important;
  }
  .swiper-slider-2 .swiper-content-area h5 {
    font-size: 16px !important;
  }
  .swiper-slider-2 .swiper-content-area h1 {
    margin-bottom: 30px;
    font-size: 22px !important;
  }
  .swiper-slider-2 .swiper-content-area p {
    display: none !important;
  }
  .btn-common.btn-swiper-2 a {
    font-size: 14px !important;
    padding: 15px 20px !important;
  }
  .breadcumb-area {
    height: 370px !important;
  }
  .section-thumb img{
    margin-bottom: 30px;
  }
  .breadcumb-content h1 {
    font-size: 31px !important;
  }
  .pricing-single-items.style-2  {
    padding: 0 !important;
  }
  .breadcumb-content {
    left: 30px !important;
  }
  .member-thumb img {
    padding-bottom: 20px !important;
  }
  .appointment-section.style-3 .ap-submit-btn {
    width: 80% !important;
  }
  .contact-us .input-box {
    width: 90% !important;
  }
  .contact-us .input-box.textarea {
    width: 90% !important;
  }
  .cda-content-area {
    margin-top: 40px;
  }
  .appointment-content .appointment-form {
    padding: 0 0 0 20px !important;
  }
  .contact-us .ap-submit-btn {
    width: 50% !important;
  }
  #accordion h3, #accordion-2 h3 {
    font-size: 14px !important;
  }
  .section-head.style-3{
    padding-bottom: 0 !important;
    padding-left: 15px;
  }
  .web-dev-thumb-section img {
    margin-bottom: 35px;
  }
  .blog-section.style-6 .blog-content-text h5{
    margin-top: 20px;
  }
  .blog-section.style-6 .blog-content-text h5 a {
    font-size: 20px !important;
  }
  .tag-item a {
    padding: 5px 4px !important;
  }
  .tag-item {
    width: 100%;
  }
  .tag-item .all-days ul li, .tag-item .all-date ul li {
    width: 33px !important;
  }
  .blog-section.style-7  .blog-content-text h5 a {
    font-size: 22px !important;
  }
  .tag-item {
    width: 232px !important;
  }
  .slick-wrapper .slick-items img {
    height: 280px !important;
  }
  .slick-wrapper .slick-items {
    height: 280px !important;
  }
  .slick-content-area h1 {
    font-size: 22px !important;
    margin-bottom: 30px;
  }
  .slick-content-area p {
   display: none;
  }
  .slick-content-area h5 {
    font-size: 16px !important;
  }
  .btn-common.btn-slick a {
    padding: 12px 12px !important;
    font-size: 12px !important;
  }
  .team-section-head {
    padding-bottom: 1160px !important;
  }
  .team-section {
    margin-top: -1190px !important;
  }
  .team-section-head.style-4{
    padding-bottom: 1230px !important;
  }
  .team-section.style-4 {
    margin-top: -1260px !important;
  }
  .team-section.style-5 {
    padding-bottom: 80px !important;
  }

  .case-study-intro {
    padding: 15px !important;
    margin-bottom: 20px !important;
  }
  .csd-info {
    padding: 0 !important;
    margin-bottom: 0 !important;
  }
  .nivo-directionNav {
    display: none !important;
  }
  .em-slider-main-title {
    font-size: 30px !important;
  }
  .em-slider-text {
    display: none !important;
  }
  .em-button-button-area a {
    padding: 10px 25px !important;
  }
  .em-slider-sub-title {
    font-size: 14px !important;
  }
  .em_slider_inner.container.text-left {
    text-align: left !important;
  }
  .em-slider-button {
    display: none;
  }
  .carousel-slider-section .owl-nav {
    display: none !important;
  }
  .carousel-thumb-inner {
    display: none !important;
  }
  .carousel-slider-content {
    text-align: center !important;
  }
  .carousel-slider-content p {
    width: 100% !important;
    margin: auto;
    padding-top: 15px;
  }
  .carousel-slider-content h1, .carousel-slider-content h2 {
    font-size: 25px !important;
  }
  .btn-common.btn-carousel-slider-2 {
    display: none !important;
  }
  .carousel-slider-section .video-icon {
    display: none !important;
  }
   .portfolio_nav ul li {
    width: 100% !important;
  }
  .nivo-controlNav {
    display: block !important;
  }
}


/* jr adedd*/
@media only screen and (min-width: 200px) and (max-width: 320px) {
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

   /*start style for Mobile menu*/
  .logo {
    display: none !important;
  }
  
  .logo-txt-img {
  display: block !important;
  }
  
  .logo-txt::before {
    display: block !important;
  }
  .menu-toggle {
    display: block !important;
  }
  .active-nav {
    left: 0 !important;
  }
  .menu-wrapper {
    padding: 30px 0 !important;
    overflow: hidden !important;
	position:static !important;
	background:#252628;
  }
  .menu-wrapper nav {
    position: absolute;
    background: #f8f8f8;
    /*width: 170px !important;*/
	 width: 90vw; /*ammar 398px*/
    transition: .5s;
    top: 60px;
    left: -100%;
    height: 100vh;
	z-index:1000 !important; /*ammar*/
  }
  .menu-wrapper nav ul {
    width:100%;
  }
  .menu-wrapper nav ul li {
    display: block !important;
    border-bottom: 1px solid  #d9d9d9;
  }
  .menu-wrapper nav ul li:nth-child(6) {
    border-bottom: none;
  }
  .menu-wrapper nav ul li a {
    color: #232323 !important;
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 13px 15px !important;
    font-size: 14px !important;
  }
  .menu-wrapper nav ul li a i{
    display: none !important;
  }
  .menu-wrapper nav ul li a span i {
    display: inline-block !important;
    position: absolute;
    right: 20px;
    color: #232323;
    font-size: 12px;
    top: 17px;
  }
  .menu-wrapper nav ul li:hover a span i {
    color: #FF3c00;
  }
  .nav-btn {
    display: none !important;
  }
  .mm-social-icon {
    text-align: left !important;
    margin-top: 12px !important;
  }
  .mm-social-icon span {
    padding: 0 15px !important;
  }
  .mm-social-icon a {
    height: 25px !important;
    width: 25px !important;
    line-height: 25px !important;
    font-size: 12px !important;
  }
  /*nav end*/

  /*Sub Menu */
 .menu-wrapper ul li:hover .sub-menu {
    top: 0px;
  }
 .menu-wrapper .sub-menu {
    left: 170px !important;
    top: 0 !important;
    width: 160px !important;
    background: #f8f8f8 !important;
    padding: 0px 0px 0px 5px !important;
  }
  .menu-wrapper .sub-menu li {
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    display: block !important;
    border-bottom: 1px solid  #f2f2f2;
  }
  .menu-wrapper .sub-menu li a {
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 7px 5px 7px 12px !important;
    font-size: 14px !important;
  }
  .menu-wrapper .sub-menu li a i{
    display: none !important;
  }
  .menu-wrapper .sub-menu li a span i {
    display: inline-block !important;
    position: absolute;
    right: 15px;
    color: #232323;
    font-size: 12px;
    top: 14px;
    background: #f2f2f2 !important;
  }
   .menu-wrapper .sub-menu li:hover a span i {
    color: #FF3c00;
    transform: rotate(90deg);
  }

  /*Inner Sub Menu */
  .menu-wrapper .sub-menu .inner-sub-menu {
    left: -5px !important;
    top: 70px !important;
    width: 170px !important;
    background: #f8f8f8 !important;
    padding: 0px 0px 0px 5px !important;
  }
  .menu-wrapper .sub-menu li:hover .inner-sub-menu {
    position: absolute;
    top: 43px !important;
    left: -13px !important;
    opacity: 1;
    visibility: visible;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li {
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    display: block !important;
    border-bottom: 1px solid #f2f2f2;
    width: 161px !important;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li a {
    background-color: #f8f8f8;
    width: 100%;
    display: inline-block;
    margin: 0 !important;
    padding: 7px 15px !important;
    font-size: 14px !important;
  }
  .menu-wrapper .sub-menu .inner-sub-menu li a i{
    display: none !important;
  }
/*end style for Mobile menu*/

  .header-top-area,  .header-button {
    display:none !important;     /*display:none !important;*/
  }
  .hero-section {
   height: 500px !important;
  }
  .hero-content-area p {
   width: 88% !important;
   margin: auto !important;
   padding: 10px 0 35px;
  }
  .hero-thumb-inner {
     display:block;  /*none*/
  }
  .hero-content-area {
    text-align: center !important;
  }
    .hero-content-area h1 {
    font-size: 26px !important;
	top:29vh !important;  /*200-320*/
	/*margin-top:20px !important;
	position:absolute !important;*/
	padding:30px 15px 100px 15px !important;
	height:280px !important;
  }
  
  
  
  .menu-wrapper h4 { 
display: inline-block;
   /* margin-bottom: 28px;*/
	top:1px !important;
	position:absolute;
	/*left:-30vw;*/
	color:#FFFFFF;
	right:74vw !important;
	/*margin-right:350px;*/
	}



.menu-wrapper h4 a {
    /*font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 2px;*/
    /*border-top: 2px solid #FF0000;*/
    
	/*border:#FF0000 thick solid;*/
	color:#FFFFFF;
	/*height:80px;
	width:150px;*/
	/*background:#FF0000;*/
	text-align:left;
	font-size:14px !important;
	font-weight:500 !important;
	  white-space: nowrap; 
	 font-family: 'Rubik', sans-serif !important;
}


.menu-wrapper h4 img {
width:60px !important;
height:34px !important;
margin-right:-20px !important;


}

.menu-wrapper  h4 span {
display:none !important;


}
   .hero-content-area h4 {
    
   
    
	top:7px !important;
	
	position:fixed !important;
	left:1vw !important;
	
}


.hero-content-area h4 a {
   text-align:left;
	font-size:14px !important;
	font-weight:500 !important;
	 font-family: 'Rubik', sans-serif !important;
}


.hero-content-area h4 img {
width:60px !important;
height:34px !important;

}

  
.hero-content-area h4 span {
display:none !important;


}
  
  
  
  
  
  
  
  
  
  
  
  .hero-section .video-icon {
    display: none !important;
  }
  .section-head h3,
  .section-head h2 {
   font-size: 22px !important;
  }
  .about-content-container {
  	margin-top: 30px;
    padding-left: 0 !important;
  }
  #tabs .tabs-btn-list li {
    margin-right: 0 !important;
    width: 100%;
    margin-bottom: 10px;
  }
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: .5em 6em !important;
  }
  .tabs-btn-list li a{
    display:block;
    width:100%;
  }
  .services-section .section-title,
  .team-section .section-title,
  .section-head.style-2 .section-title {
  	margin-bottom: 25px;
  }
  .services-section .section-head,
  .team-section .section-head {
    padding-bottom: 35px !important;
  }
  .team-section {
    background-size: cover !important;
  }
  .services-content-section {
  	padding: 20px 20px 0 !important;
  }
  .single-team-member {
    margin-bottom: 30px !important;
  }
  .choose-us-content-section {
    padding-left: 0 !important;
    margin-top: 20px;
  }
  .appointment-content-section {
  	 margin-left: 0 !important;
  }
  .appointment-content-section {
    padding: 40px 20px 30px !important;
    margin-top: 20px;
  }
  .process-section {
    padding-bottom: 38px !important
  }
  .process-single-item {
    margin-bottom: 35px !important;
  }
  .process-content p {
  	width: 95% !important;
  }
  .call-do-action-content p {
  	width: 77% !important;
  }
  .call-do-action-content h2,
  .sub-title {
    font-size:  25px !important;
    margin-bottom: 20px;
  }
  .testimonial-content-text {
  	padding: 20px 25px 50px !important;
  }
  .widget p{
    margin-top: 0;
  }
  .widget {
    margin-bottom: 45px !important;
  }
  .single-post-img img {
    width: 100% !important;
  }
  .footer-copyright-text {
    font-size: 15px !important;
  	text-align: center;
    padding-bottom: 0 !important;
  }
  .footer-copyright-text p{
  	margin: 10px;
  }
  .footer-copyright-link{
    text-align: center !important;
    padding-top: 0 !important;
  }
  .footer-copyright-link ul li {
  	padding: 0 5px !important;
  }
  .feature-section {
     margin-top: 0 !important;
     padding-top: 80px;
  }
   .feature-section.style-7 {
     margin-top: -70px !important;
  }
  .feature-single-item {
    box-shadow: 0 0 15px rgba(0,0,0,0.15) !important;
    margin-bottom: 30px;
  }
  .feature-single-item {
    margin-bottom: 30px;
  }
  .about-section.style-2 {
    padding-top: 45px !important;
  }
  .fun-fact-container {
    padding: 0 15px;
  }
  .counter-text span {
    font-size: 40px !important;
  }
  .counter-single-item-inner {
    padding: 20px 0px !important;
    text-align: center !important;
    display: block !important;
  }
  .team-section.style-2 {
   padding-bottom: 0 !important
  }
  .choose-us-content {
  	padding-left: 10px !important;
  }
  .hero-btn-2{
    display: none !important;
  }
  .award-single-items-inner {
  	text-align: center;
  	margin-bottom: 30px;
  }
  .counter-container.style-3 {
	   margin-top: 0 !important;
  }
  .blog-section.style-3 .section-title {
  	margin-bottom: 30px;
  }
  .blog-section.style-3{
    background: #f4f7fc;
  }
  .cda-2-container {
  	text-align: center;
    padding: 35px 0;
  }
  .cda-2-thumb {
  	margin-bottom: 25px;
  }
  .cda-2-content h4 {
  	font-size: 18px !important;
  }
  .cda-2-content h3 {
  	font-size: 20px !important;
  }
  .cda-2-content {
  	margin-left: 0px !important;
  }
  .call-do-action-section.style-2 {
    padding-bottom: 100px !important
  }
  .services-section.style-4 {
    padding-bottom: 70px!important;
  }
  .testimonial-section.style-4 .testimonial-content-text {

  	width: 100% !important;
    padding: 20px 5px 30px !important;
  }
  .testimonial-section.style-4 .owl-dots {
  	margin-top: 20px !important;
  }
  .subscribe-submit-btn {
  	font-size: 14px !important;
  	padding: 12px 10px !important;
  }
  .blog-section.style-3 .blog-content {
  	padding: 45px 30px 40px !important;
  }
  .about-thumb-section {
  	margin-top: 15px;
  }
  .appointment-carousel {
  	margin-top: 20px;
  }
  .appointment-section.style-2 .testimonial-content-text {
  	padding: 20px 0 30px !important;
  }
  .appointment-section.style-2 {
  	margin-top: 0 !important;
  }
  .feature-section.style-7 {
    padding-bottom: 0 !important;
  }
  .section-content ul li {
  	width: 100% !important;
  }
  .call-do-action-section.style-6 {
    padding-bottom: 100px !important;
  }
  .tabs-style-2 #tabs ul li {
    width: 100% !important;
  }
  .tabs-style-2 #tabs .ui-tabs-anchor {
    padding: 10px 45px 15px !important;
  }
  .tabs-style-2 #tabs ul li a {
    width: 100%;
  }
  .tabs-style-2 .tab-content-inner {
    margin-top: 25px;
  }
  .tabs-style-2 #tabs ul {
     margin-left: 0 !important;
  }
  .swiper-slide.slide-1{
    height: 500px !important;
  }
  .swiper-slide.slide-2{
    height: 500px !important;
  }
  .swiper-slider-content h1 {
    font-size: 32px !important;
  }
  .swiper-slider-content h2 {
    font-size: 32px !important;
  }
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }
  .container.text-left {
    text-align: center !important;
  }
  .swiper-slider-content .video-icon {
    display: none !important;
  }
  .swiper-container-one {
    height: 100% !important;
  }
  .swiper-container-two {
    height: 280px !important;
  }
  .swiper-slider-2 .swiper-content-area h5 {
    font-size: 16px !important;
  }
  .swiper-slider-2 .swiper-content-area h1 {
    margin-bottom: 30px;
    font-size: 22px !important;
  }
  .swiper-slider-2 .swiper-content-area p {
    display: none !important;
  }
  .btn-common.btn-swiper-2 a {
    font-size: 14px !important;
    padding: 15px 20px !important;
  }
  .breadcumb-area {
    height: 370px !important;
  }
  .section-thumb img{
    margin-bottom: 30px;
  }
  .breadcumb-content h1 {
    font-size: 31px !important;
  }
  .pricing-single-items.style-2  {
    padding: 0 !important;
  }
  .breadcumb-content {
    left: 30px !important;
  }
  .member-thumb img {
    padding-bottom: 20px !important;
  }
  .appointment-section.style-3 .ap-submit-btn {
    width: 80% !important;
  }
  .contact-us .input-box {
    width: 90% !important;
  }
  .contact-us .input-box.textarea {
    width: 90% !important;
  }
  .cda-content-area {
    margin-top: 40px;
  }
  .appointment-content .appointment-form {
    padding: 0 0 0 20px !important;
  }
  .contact-us .ap-submit-btn {
    width: 50% !important;
  }
  #accordion h3, #accordion-2 h3 {
    font-size: 14px !important;
  }
  .section-head.style-3{
    padding-bottom: 0 !important;
    padding-left: 15px;
  }
  .web-dev-thumb-section img {
    margin-bottom: 35px;
  }
  .blog-section.style-6 .blog-content-text h5{
    margin-top: 20px;
  }
  .blog-section.style-6 .blog-content-text h5 a {
    font-size: 20px !important;
  }
  .tag-item a {
    padding: 5px 4px !important;
  }
  .tag-item {
    width: 100%;
  }
  .tag-item .all-days ul li, .tag-item .all-date ul li {
    width: 33px !important;
  }
  .blog-section.style-7  .blog-content-text h5 a {
    font-size: 22px !important;
  }
  .tag-item {
    width: 232px !important;
  }
  .slick-wrapper .slick-items img {
    height: 280px !important;
  }
  .slick-wrapper .slick-items {
    height: 280px !important;
  }
  .slick-content-area h1 {
    font-size: 22px !important;
    margin-bottom: 30px;
  }
  .slick-content-area p {
   display: none;
  }
  .slick-content-area h5 {
    font-size: 16px !important;
  }
  .btn-common.btn-slick a {
    padding: 12px 12px !important;
    font-size: 12px !important;
  }
  .team-section-head {
    padding-bottom: 1160px !important;
  }
  .team-section {
    margin-top: -1190px !important;
  }
  .team-section-head.style-4{
    padding-bottom: 1230px !important;
  }
  .team-section.style-4 {
    margin-top: -1260px !important;
  }
  .team-section.style-5 {
    padding-bottom: 80px !important;
  }

  .case-study-intro {
    padding: 15px !important;
    margin-bottom: 20px !important;
  }
  .csd-info {
    padding: 0 !important;
    margin-bottom: 0 !important;
  }
  .nivo-directionNav {
    display: none !important;
  }
  .em-slider-main-title {
    font-size: 30px !important;
  }
  .em-slider-text {
    display: none !important;
  }
  .em-button-button-area a {
    padding: 10px 25px !important;
  }
  .em-slider-sub-title {
    font-size: 14px !important;
  }
  .em_slider_inner.container.text-left {
    text-align: left !important;
  }
  .em-slider-button {
    display: none;
  }
  .carousel-slider-section .owl-nav {
    display: none !important;
  }
  .carousel-thumb-inner {
    display: none !important;
  }
  .carousel-slider-content {
    text-align: center !important;
  }
  .carousel-slider-content p {
    width: 100% !important;
    margin: auto;
    padding-top: 15px;
  }
  .carousel-slider-content h1, .carousel-slider-content h2 {
    font-size: 25px !important;
  }
  .btn-common.btn-carousel-slider-2 {
    display: none !important;
  }
  .carousel-slider-section .video-icon {
    display: none !important;
  }
   .portfolio_nav ul li {
    width: 100% !important;
  }
  .nivo-controlNav {
    display: block !important;
  }
}















@media screen  and (min-width: 320px) and (max-width: 991px) and (orientation: landscape) {


.hero-content-area h1 {

	

	/*top:-50vh !important;*/  /*23vh*/
  height:auto !important;
	position:static !important;
	margin-top:-110px !important;
	/*margin-bottom:-1500px !important;*/
	padding:40px 40px 70px 40px !important;
font-size: 35px !important;
}

.topMobile {

}

/* html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }*/
}

@media screen  and (min-width: 320px) and (max-width: 991px) and (orientation: landscape) {

}
.nivoSlider{position:relative;width:100%;height:auto;overflow:hidden}.nivoSlider img{position:absolute;top:0;left:0;max-width:none}.nivo-main-image{display:block!important;position:relative!important;width:100%!important}.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:white;filter:alpha(opacity=0);opacity:0}.nivo-slice{display:block;position:absolute;z-index:5;height:100%;top:0}.nivo-box{display:block;position:absolute;z-index:5;overflow:hidden}.nivo-box img{display:block}.nivo-caption{position:absolute;left:0;bottom:0;background:#000;color:#fff;width:100%;z-index:8;padding:5px 10px;opacity:.8;overflow:hidden;display:none;-moz-opacity:.8;filter:alpha(opacity=8);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.nivo-caption p{padding:5px;}.nivo-caption a{display:inline-block;}.nivo-html-caption{display:none}.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer}.nivo-prevNav{left:0}.nivo-nextNav{right:0}.nivo-controlNav{text-align:center;padding:15px 0}.nivo-controlNav a{cursor:pointer}.nivo-controlNav a.active{font-weight:700}
@charset "UTF-8";


/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
}

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}