@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
/* font-family: 'Lato', sans-serif; */

@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,700');
/* font-family: 'Oswald', sans-serif; */


@font-face {
	font-family: 'gotham-book';
	src: url('../fonts/ufonts.com_gotham-book.eot');
	src: local('☺'), url('../fonts/ufonts.com_gotham-book.woff') format('woff'), url('../fonts/ufonts.com_gotham-book.ttf') format('truetype'), url('../fonts/ufonts.com_gotham-book.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'gotham_mediumregular';
    src: url('../fonts/ufonts.com_gotham-medium-webfont.woff2') format('woff2'),
         url('../fonts/ufonts.com_gotham-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
	font-family: 'GothamBold';
	src: url('../fonts/Gotham Bold.eot');
	src: local('☺'), url('../fonts/Gotham Bold.woff') format('woff'), url('../fonts/Gotham Bold.ttf') format('truetype'), url('../fonts/Gotham Bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}






@charset "utf-8";
/* CSS Document */

body{ font-family: 'Lato', sans-serif; font-size:14px;  }

.inblock{ display:inline-block !important;}

.pad0{ padding:0 !important;}
.padlr0{ padding-left:0 !important; padding-right:0 !important;}
.padtop30{ padding-top:30px !important;}
.margtop30{ margin-top:30px !important;}
.nooverflow{ overflow:hidden;}
.padlr30{ padding:0 30px !important;}


/* -------------------------------------- header ------------------------------------------------*/

#header{ padding:23px 0 36px 0; background:#000;}

.topbar p, .topbar a{color:#fff; font-size:12px; }
.topbar{ padding-bottom:30px;}

#header .navbar-brand { 
    height: auto;
    padding: 0;  
}

#header .navbar {
    position: relative;
    min-height: auto;
    margin: 0;
    border: none;
    height: auto;
    background: none;
}

#header .navbar .navbar-nav > li > a {
    color: #fff;
    font-size: 16px;
    font-family: 'Oswald', sans-serif;
    padding: 3px 8px;
    font-weight: 300;
}

#header .navbar .navbar-nav > li > a:hover, .active{ color:#fffc00 !important;}

.active2{ color:#fff !important;}


#header .nav {
    padding-top: 28px;
    float: right;
}


#header .navbar-collapse {
    padding-right:0; 
}

#header .fa.fa-search { 
    color: #fffc00;
}

.fullimg{ width:100% !important;}


/* -------------------------------------- banner ------------------------------------------------*/

#banner{ position:relative; }

#banner .carousel-caption {
    right: inherit;
    left: 3%;
    padding: 0;
    top: 165px;
    text-align: left;
    text-shadow: none;
}

#banner .carousel-indicators {
    width: 30%;
    text-align: left;
    left: 3%;
    bottom: 20%;
    margin: 0;
}

#banner h1{ font-size:53px; color:#fff; font-family: 'Oswald', sans-serif; margin:0 0 5px 0; }
#banner h3{ font-size:33px; color:#fff; font-family: 'Oswald', sans-serif; font-weight:300; margin:0 0 30px 0;}

.bnrlink{ padding:20px 40px; background:#e7cf01; margin:0 5px 0 0;  font-family: 'Oswald', sans-serif; font-size:13px; line-height:1; display:inline-block; color:#000; transition:ease-in 0.3s;}

.bnrlink.redbg{ background:#e00e0e; color:#fff;}


/* -------------------------------------- banner ------------------------------------------------*/
#smokey{ background:#fcf9de; padding:50px 0 40px 0;}

#smokey h2, .redheading{ font-family: 'Oswald', sans-serif; font-size:33px; color:#e00e0e; margin:0 0 10px 0; text-align:center; position:relative; display:inline-block;}
#smokey h2::before, .redheading::before {
    content: "";
    position: absolute;
    width: 160px;
    border-bottom: 3px solid #000;
    left: -162px;
    top: 15px;
}

#smokey h2::after, .redheading::after {
    content: "";
    position: absolute;
    width: 160px;
    border-bottom: 3px solid #000;
    right: -180px;
    top: 15px;
}

#smokey h5{ font-family: 'Oswald', sans-serif; font-size:17px; color:#191919; margin:0 0 25px 0; text-align:center; position:relative; }

#smokey p, .commonp{ font-family: 'Lato', sans-serif; font-size:15px; color:#161616; margin:0; text-align:center; }

/* -------------------------------------- threebox ------------------------------------------------*/

#threebox{ padding:40px 0;}

#threebox .yellowbox {
    background: url(../images/yellowboxbg.jpg) no-repeat center center;
    padding: 23px 5px;
    text-align: center;
    background-size: cover;
    min-height: 245px;
}

#threebox h2{ font-family: 'Oswald', sans-serif; font-size:31px; color:#e70202; margin:0 0 10px 0; text-align:center;  }

#threebox h4{ font-family: 'Oswald', sans-serif; font-size:14px; color:#191919; margin:0 0 15px 0; text-align:center;  }

#threebox p{ font-family: 'Lato', sans-serif; font-size:15px; color:#242424; margin:0 0 15px 0; text-align:center; }

#threebox h3{ font-family: 'Oswald', sans-serif; font-size:27px; color:#000000; margin:0 0 15px 0; text-align:center; font-weight:300;  }

#threebox h3 span{  font-size:24px;  font-weight:normal;  }

.red{ color:#e70202 !important;}
#threebox h4.red{ margin:0;}

.list {
    padding: 0;
    margin: 0;
}

.list li {
    list-style: none;
    text-align: left;
    padding: 5px 0 5px 30px;
    background: url(../images/liimg.png) no-repeat 5px 5px;
    line-height: 1;
    font-size: 13px;
}

/* -------------------------------------- now ------------------------------------------------*/

#now {
    padding: 60px 0;
    background: url(../images/redcarbg.jpg) no-repeat center center;
    background-size: cover;
    overflow: hidden; 
	 
}

 

#now h2{ font-family: 'Oswald', sans-serif; font-size:44px; color:#fff; margin:0 0 10px 0; text-align:right; display:inline-block; border-bottom:3px solid #fff; font-weight:300;  }

#now h3{ font-family: 'Oswald', sans-serif; font-size:29px; color:#fff; margin:0 0 10px 0; text-align:right; display:inline-block; border-bottom:3px solid #fff;   }

#now .commonp {
    color: #fff;
    margin: 0 0 20px 51%;
    text-align: right;
}

#now .bnrlink {
    width: 160px;
    padding: 20px 21px;
    text-align: center;
    margin-left: 10px;
} 

#serving{ padding:30px 0;}	
#serving h5{ font-family: 'Oswald', sans-serif; font-size:13px; color:#191919; margin:0 0 30px 0; text-align:center;  }


#serving .owl-carousel .owl-nav .owl-prev {
    left: -30px;
    position: absolute;
    top: 40%;
    background: none;
    color: #000;
    font-size: 20px;
    padding: 0;
    margin: 0;
}

#serving  .owl-carousel .owl-nav .owl-next{ right: -30px;
    position: absolute;
    top: 40%;
	background: none;
    color: #000;
    font-size: 20px;
    padding: 0;
    margin: 0; 
	}
	
#serving .owl-dots {
    display: none;
}	

#serving .owl-carousel {
    width: 98%;
    margin: 0 auto;
}


#serving h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    background: #e9f035;
    display: block;
    padding: 15px 10px;
    font-size: 21px;
    margin: 0;
    color: #191919;
}

#coupons{ padding:75px 0; background:url(../images/bottomcar.jpg) no-repeat center center; background-size:cover;}

#coupons h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    color: #fff;
    display: block;
    padding: 15px 10px;
    font-size: 49px;
    margin: 0;
    position: absolute;
    top: 32px;
    text-align: center;
    left: 15%;
}

.redwrap {
    position: relative;
    display: block; 
	text-align:center;
}

#footer{ padding:60px 0 35px 0; background:url(../images/footerbg.jpg) no-repeat center center; background-size:cover;}

.list2 {
    padding: 0;
    text-align: center;
    margin: 0 0 30px 0;
}

.list2 li{ display:inline-block; list-style:none; } 

.list2 li a {
    display: inline-block;
    font-size: 17px;
    color: #ffff00;
    font-family: 'Oswald', sans-serif;
    padding: 3px 5px;
    font-weight: 300;
}

.footerbox{ margin:0 230px;}

.list3 {
    padding: 10px 30px;
    text-align: center;
    margin: 0 0 30px 0;
    background: #fff;
    border-radius: 5px;
}

.list3 span {
    position: absolute;
    left: 100%;
    top: 3px;
	transition:ease-in 0.9s;
}

.list3 li:first-child:hover span{ left:5px;}


.list3 li {
    display: inline-block;
    font-size: 17px;
    color: #ffff00;
    font-family: 'Oswald', sans-serif;
    padding: 3px 5px;
    font-weight: 300;
    position: relative;
    overflow: hidden;
	transition:ease-in 0.5s;
}



.footerbox p{ font-family: 'Lato', sans-serif; font-size:13px; color:#fff; margin:0 0 10px 0; text-align:center; }
.footerbox p a{   color:#fff; }
.yellow{ color:#ffff00 !important;}


.social {
    padding: 0;
    text-align: center;
    margin: 35px 0 35px 0;
}

.social li {
    list-style: none;
    display: inline-block;
    background: #7f0000;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    padding: 10px 0 0 0;
    margin: 0 1px;
}



.bnrlink:hover{background:#fff; color:red;}

.social li:hover{
    animation-name: flash;
    -webkit-animation-name: flash;
    box-shadow: 0 0 30px #fff;
}


#res{ padding:75px 0 90px 0;}


#res .redheading { 
    margin: 0 0 30px 0; 
}

#res .redheading::before { 
    top: 8px;
}

#res .redheading::after { 
    top: 8px;
}


#res p {
    font-family: 'gotham-book';
    font-size: 19px;
    color: #343434;
    padding: 15px 0 15px 0;
    margin: 0;
}

.benefits{ margin:50px 0 50px 0;}

.benefitbox {
    background: #000;
    color: #fff;
    padding: 30px 0 35px 30px;
    height: 333px;
}

.list4{ padding:0; }

.list4 li {
    list-style: none;
    font-family: 'gotham_mediumregular';
    font-size: 17px;
    color: #fff;
    margin: 0 0 12px 0;
}

.list4 li:first-child{ color:#d3bd02;}

.benefits .col-sm-6{ padding:0;}

.graybox{ background:#c8c8c8; padding:10px 60px 10px 30px;}

#res .graybox p {
    color: #252525;
    padding: 12px 0 0 0;
    float: left;
    margin: 0;
}

.requestq {
    display: inline-block;
    color: #ffff00;
    padding: 15px 50px;
    background: #e10606;
    float: right;
	font-family: 'GothamBold';
}

.padbot20{ padding-bottom:20px !important;}
.padlr10{ padding:0 10px !important; position:relative;}

.tint{ padding:70px 20px;}

.tint img{
    width: 100%;
}

.tint h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: 50px;
    position: absolute;
    top: 35%;
    left: 35%;
    margin: 0;
}

.tint h3.lastext {
    top: 40%;
    text-align: center;
}

.suntek{ padding:50px 0 0 0;}

.suntek h3, .redh3{  font-family: 'gotham_mediumregular'; color:#e32e2e; font-size:17px; }

.list1{ padding:0;}

.list1 li {
    list-style: none;
    font-family: 'gotham-book';
    font-size: 17px;
    color: #252525;
    margin: 0 0 12px 0;
    position: relative;
    padding: 0 0 0 30px;
}

.list1 li::before {
    content: "";
    position: absolute;
    left: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: red;
    top: 7px;
}


#auto{ padding:40px 0; }

#auto p, .commonp {
    font-family: 'gotham-book';
    font-size: 17px;
    color: #343434;
    padding: 15px 0 15px 0;
    margin: 0;
}

#suntekwrapper{ padding:30px 0;}

.graysuntek {
    padding: 25px 50px;
    background: #efefef;
    text-align: center;
    margin: 0 0 35px 0;
    position: relative;
}

.graysuntek h3 {
    font-family: 'gotham_mediumregular';
    color: #e32e2e;
    font-size: 19px;
    margin: 0;
}


.graysuntek .commonp{ color:#262626; font-family:19px; }

.mytable {
    margin: 0 21%;
}

.mytable th{ background:#e2e2e2; color:#e00e0e; font-size:19px; padding:21px 0; text-align:center; font-family: 'gotham_mediumregular';} 
.mytable td{ background:#fff; color:#262626; font-size:19px; padding:10px 0; text-align:center; font-family: 'gotham_mediumregular';} 

#carbon {
    padding: 25px 0 60px 0;
    background: url(../images/autocarbg.jpg) no-repeat center center;
    background-size: cover;
    position: relative;
}

#carbon h3{ font-family: 'GothamBold'; font-size:16px; color:#e10606; margin:0; }

.arrowlist {
    padding: 0;
    width: 50%;
}

.arrowlist li {font-family: 'GothamBold'; 
    list-style: none;
    font-size: 16px;
    color: #202020;
    padding: 15px 0 15px 30px;
    background: url(../images/liarrow.png) no-repeat left 21px;
}


.foursquare {
    position: absolute;
    right: 150px;
    top: 70px;
}

.foursquare h5{font-family: 'GothamBold';  color:#fff; font-size:19px; top:0; position:absolute; }

.foursquare h5.one {
    top: 17%;
    left: 45%;
}

.foursquare h5.two {
    top: 44%;
    left: 19%;
}


.foursquare h5.three {
    top: 44%;
    right: 17%;
}

.foursquare h5.four {
    top: 69%;
    left: 44%;
}

#boats { padding:5px 0 50px 0;}
#boats h2{  font-family: 'gotham_mediumregular'; color:#e10606; font-size:24px; padding:5px 0 50px 0; text-align:center;}

#boats .owl-carousel .owl-nav .owl-prev {
    left: -30px;
    position: absolute;
    top: 40%;
    background: none;
    color: #000;
    font-size: 20px;
    padding: 0;
    margin: 0;
}

#boats  .owl-carousel .owl-nav .owl-next{ right: -30px;
    position: absolute;
    top: 40%;
	background: none;
    color: #000;
    font-size: 20px;
    padding: 0;
    margin: 0; 
	}
	
#boats .owl-dots {
    display: none;
}

.pageheading {
    font-family: 'Oswald', sans-serif;
    font-size: 33px;
    color: #e00e0e;
    margin: 0 0 10px 0;
    text-align: center;
    position: relative;
    display: inline-block;
}

 .pageheading::before {
    content: "";
    position: absolute;
    width: 160px;
    border-bottom: 3px solid #000;
    left: -162px;
    top: 8px;
}

.pageheading::after {
    content: "";
    position: absolute;
    width: 160px;
    border-bottom: 3px solid #000;
    right: -180px;
    top: 8px;
}


#album{ padding:70px 0 35px 0;}


.abox {
    display: block;
    margin: 20px 0;
    position: relative;
}

.refresh {
    background: #ec8878;
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    padding: 17px 0 0 0;
    color: #2a2a2a;
    font-size: 27px;
    box-shadow: 2px 3px 11px #696666;
}


#truck{ padding:50px 0;}

#truck .media-heading { font-family: 'GothamBold'; color:#323232; background:#ccc; font-size:17px; padding:18px 0 18px 21px; }

#truck .media-left {
    padding-right: 0;
}

#truck  .media{ background:#f5f5f5;}

#truck p{  font-family: 'gotham-book'; color:#1d1d1d; font-size:15px; padding:10px 0 25px 21px; margin:0 0 10px 0; }


#rhino{ padding:40px 0 80px 0;}

#rhino h3{  font-family: 'Lato', sans-serif; font-weight:700; color:#191919; font-size:32px; text-align:center; margin:40px 0 30px 0; }
#rhino h3 span{  font-family: 'gotham-book'; font-weight:normal;}

#rhino .commonp{ margin:0 0 50px 0; }


#colors{ padding:40px 0 80px 0; background:#f6f6f6;}
#colors img{ display:inline-block; vertical-align:top;}
#colors h3{  font-family: 'gotham_mediumregular'; color:#5d2c2c; font-size:25px;  margin:25px 0 0 30px; display:inline-block; }

.w80{ width:80%; }
.w20{ width:20%}

.col {
    margin: 0 0 33px 0;
	position:relative;
	text-align:center;
}

.col h5 {
    font-family: 'GothamBold';
    font-size: 18px;
    color: #fff;
    position: absolute;
    top: 44%;
    left: 0;
    margin: 0;
    text-align: center;
    width: 100%;
}

.w20  h5 { top:48%;}


.row.colortexture {
    margin-top: 35px;
}

#about{ padding:40px 0 50px 0;}

#about .commonp{ margin:0 0 60px 0;}

.timing{ position:relative; text-align:center; margin:0 0 40px 0;}

.timing .commonp{ position:absolute; top:30px ;color:#fff; font-size:19px;  text-align:center; width:100%; margin:0 !important;}


#about .owl-carousel .owl-nav .owl-prev {
    left: -30px;
    position: absolute;
    top: 40%;
    background: none;
    color: #000;
    font-size: 20px;
    padding: 0;
    margin: 0;
}

#about  .owl-carousel .owl-nav .owl-next{ right: -30px;
    position: absolute;
    top: 40%;
	background: none;
    color: #000;
    font-size: 20px;
    padding: 0;
    margin: 0; 
	}
	
#about .owl-dots {
    display: none;
}

#about .owl-carousel { 
    width: 96%;  	
    margin: 0 auto;
}

#contact{ padding:70px 0 100px 0;}

#contact h5{
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    color: #191919;
    margin: 0 0 15px 0;
    text-align: center;
	font-weight:300;
}


.infobox {
    padding: 30px 60px;
    margin: 50px 80px 0 80px;
    box-shadow: 0 10px 33px #ccc;
    border: 3px solid #ccc;
    border-radius: 5px;
}

.list-contact{ padding:0; }

.list-contact li {
    list-style: none;
    font-family: 'gotham-book';
    font-size: 15px;
    color: #191919;
    margin: 0 0 21px 0;
    position: relative;
    padding: 5px 0 0 40px;
}


.list-contact li a{ 
    color: #191919; 
}



.list-contact li i {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    border: 1px solid #191919;
    border-radius: 50%;
    padding: 6px 0 0 0;
    text-align: center;
    color: #191919;
}

.list-contact li i.red{ border:1px solid #E00E0E;}


#contact h3{
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    color: #191919;
    margin: 0 0 15px 0; 
	font-weight:700;
}


#getintouch{ padding:0 0 100px 0}

.frm{ margin:35px 100px 0 100px;}

.frm .form-control { 
    height: 50px; 
    font-size: 16px; 
    color: #555; 
}

.frm textarea.form-control {
    height: 100px;
}

.frm .form-group {
    margin-bottom: 21px;
}

.subbtn {
    padding: 12px 25px;
    background: #e00e0e;
    margin: 0 5px 0 0; 
    font-size: 15px;
    line-height: 1;
    display: inline-block;
    color: #fff;
	font-weight:bold;
    transition: ease-in 0.3s;
}

.subbtn:hover{ animation-name:pulse; -webkit-animation-name:pulse; animation-iteration-count:2; color:#fff; }

.frm img{ display:inline-block; margin:0 25px 0 0;}


.search input[type="text"] {
    display: inline-block;
    position: absolute;
    right: 0;
    margin: 5px 0 0 0;
    border-radius: 5px;
    background: #eee;
    padding: 2px 10px;
    border: 1px solid #ccc;
	display:none;
}


.video i.fa.fa-play {
    position: absolute;
    top: 36%;
    left: 40%;
    font-size: 30px;
    color: #fff;
    padding: 5px 12px 5px 16px;
    background: #e00e0e;
    border-radius: 5px;
}



.frm .subbtn {
    margin: 18px 0 0 15px;
}


.specialtext {
    position: absolute;
    height: 170px;
    width: 280px;
    background: rgba(238,79,0,0.8);
    top: 35%;
    right: 25px;;
    padding: 10px;
	text-align:center;
	border-radius:5px;
}

#banner .specialtext h3 {
    font-size: 33px;
    color: #f3e56f;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    margin: 0 0 10px 0;
    padding: 0 0 8px 0;
    border-bottom: 3px solid #e6ce01;
}

#banner .specialtext p {
    color: #fff;
    font-size: 17px;
    min-height: 100px;
    vertical-align: middle;
    padding: 5px 0 0 0;
}



.abox img {
    width: 100%;
    height: 230px;
}





/* --------------------------------- ---------------- animation start -------------------------------- -----------------------*/

/* animation css */



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

.delayhalf {
  -webkit-animation-delay:0.5s;
  animation-delay: 0.5s; 
}

.delay1 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s; 
}

.delayonehalf {
  -webkit-animation-delay:1.5s;
  animation-delay: 1.5s; 
}

.del1 {
  -webkit-animation-delay:0.3s;
  animation-delay: 0.3s; 
}

.del2 {
  -webkit-animation-delay:0.6s;
  animation-delay: 0.6s; 
}

.del3 {
  -webkit-animation-delay:0.9s;
  animation-delay: 0.9s; 
}

.del4 {
  -webkit-animation-delay:1.2s;
  animation-delay:1.2s; 
}
.del5 {
  -webkit-animation-delay:1.2s;
  animation-delay:1.2s; 
}

.del6 {
  -webkit-animation-delay:1.5s;
  animation-delay:1.5s; 
}

.del7 {
  -webkit-animation-delay:1.8s;
  animation-delay:1.8s; 
}




@-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 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 bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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



@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

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

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

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

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

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

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

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

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




@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }

}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

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

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

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

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



@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

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

/* --------------------------------- ---------------- animation end -------------------------------- -----------------------*/