/* 
============================================================
CSS Index
============================================================
1. Theme default css
2. Top Nav bar
3. Header Nav bar
4. Services
5. About
6. Portfolio
7. Counter
8. Team
9. Pricing
10. Testimonail
11. Blog
12. Contact
13. Footer
14. ScrollUp 
15. Inner page bannar 
16. Index02 hero 
17. Index04 hero particles 
18. Index05 hero left-text
19. Index05 hero left-text 
20. keyframes
*/



/* ==============================================================
                    1.Theme default css 
=================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
    box-sizing: border-box;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    transition: all 0.3s ease-out 0s;
}

.f-left {
    float: left
}

.f-right {
    float: right
}

.fix {
    overflow: hidden
}

a,
.button {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

a:focus,
.button:focus {
    text-decoration: none;
    outline: none;
}

a:focus,
a:hover,
.portfolio-cat a:hover,
.footer -menu li a:hover {
    color: rgb(33, 33, 90);
    text-decoration: none;
}

a,
button {
    color: #333;
    outline: medium none;
}

button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
    outline: 0
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:'Roboto', sans-serif;
    font-weight: normal;
    color: #000000;
    margin-top: 0px;
    font-style: normal;
    font-weight: 400;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: #212058;
}

h1 {
    font-size: 56px;
    font-weight: 600;
}

h2 {
    font-size: 47px;
    font-weight: 600;
}

h3 {
    font-size: 32px;
    font-weight: 600;
}

h4 {
    font-size: 22px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 14px;
}

ul {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none
}

.mt-10 {
    margin-top: 10px;
}

p {
    font-size: 14px;
    line-height: 24px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 300;
}
hr {
    border-bottom: 1px solid #eceff8;
    border-top: 0 none;
    margin: 30px 0;
    padding: 0;
}

label {
    color: #7e7e7e;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

*::-moz-selection {
    background: #d6b161;
    color: #fff;
    text-shadow: none;
}

::-moz-selection {
    background: #444;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #444;
    color: #fff;
    text-shadow: none;
}

*::-moz-placeholder {
    color: #ffffff;
    font-size: 20px;
    opacity: 1;
}

*::placeholder {
	color: #333;
	font-size: 14px;
	opacity: 1;
}

.theme-overlay {
    position: relative
}

.theme-overlay::before {
    background-color: rgb(115, 108, 236);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    width: 100%;
}

.separator {
    border-top: 1px solid #f2f2f2
}

/* button style */
.btn{
    -moz-user-select: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 18px;
    margin-bottom: 0;
    text-align: center;
    transition: all 0.3s ease 0s;
    vertical-align: middle;
    white-space: nowrap;
    padding: 15px 30px;
    z-index: 244;
    border-radius: 5px;
    background-color: #007ac1;
    box-shadow: 0px 0px 15.66px 2.34px rgba(0, 122, 193, 0.38);

    
}

.btn2{
    -moz-user-select: none;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 18px;
    margin-bottom: 0;
    text-align: center;
    transition: all 0.3s ease 0s;
    vertical-align: middle;
    white-space: nowrap;
    padding: 20px 30px;
    border-radius: 5px;
    background-color: rgb(3, 169, 244);
    box-shadow: 0px 0px 15.66px 2.34px rgba(3, 169, 244, 0.43);
    z-index: 99999;

}

.btn3{
    -moz-user-select: none;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 18px;
    margin-bottom: 0;
    text-align: center;
    transition: all 0.3s ease 0s;
    vertical-align: middle;
    white-space: nowrap;
    padding: 20px 30px;
    border-radius: 5px;
    background-color: rgb(0, 122, 193);
    box-shadow: 0px 0px 15.66px 2.34px rgba(3, 169, 244, 0.43);
    z-index: 99999;
}

  
.btn:hover {
    background-color: #ffffff;
    color: #333;
}
.btn3:hover {
    background-color: rgb(3, 169, 244);
    color: rgb(248, 248, 248);
}
.btn2:hover {
    color: #ffffff;
    background-color: rgb(0, 122, 193);


}
/* scrollUp */
#scrollUp {
    background: #0c7ac6;
    height: 35px;
    width: 35px;
    right: 50px;
    bottom: 77px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    font-size: 20px;
    line-height: 34px;
}

#scrollUp:hover {
    background: #fff;
    color:#0c7ac6;
}



/*====================================================
                   Top Nav bar
======================================================*/
.nav-social-icon ul li {
    display: inline-block;
    padding: 10px 22px 10px 0px;
}
.nav-social-icon-info ul li {
    display: inline-block;
    padding: 10px 11px;
}
.nav-social-icon-info ul li {
    padding: 10px 11px;
    font-size: 14px;
    margin-top: 3px;
}
.nav-social-icon-info ul li span {
    margin: 0px 0px 0px 22px;
    color: #fff;
}
.nav-social-icon ul li:hover a img {
    transform: scale(1.1);
}
.nav-social-icon ul li a img {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
/*====================================================
                Header Nav bar
======================================================*/
.menu-area nav ul li {
    display: inline-block;
    font-size: 14px;
    margin-right: 30px;
    letter-spacing: 1px;
    z-index: -9;
}
.header-main-area {
    z-index: -9;
}
.menu-area nav ul {
    position: relative;
    z-index: 9999;
}
.menu-area nav ul li ul {
    position: absolute;
    width: 25%;
    background-color: #03a9f4;
    top: 180%;
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);

}
.menu-area nav ul li a {
    padding: 0px 0px 25px 0px;
    color: #333;
    font-weight: 600;
}
.menu-area nav ul li ul li a {
    display: block;
    color: #fff;
    padding: 0px;
}
.menu-area nav ul li ul li {
    padding: 13px;
    border-bottom: 1px solid #fff;
    display: block;
    margin: 0px;
}
.menu-area nav ul li ul li:last-child {
    border:none;
}
.menu-area nav ul li ul{
    transform: scaleY(0);
    transform-origin: top;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;

}
.menu-area nav ul li:hover ul{
    transform: scaleY(1);
}
/*====================================================
                    Hero
======================================================*/
.hero-area {
    background-position: center center;
    background-size: cover;
    min-height: 700px;
    background-repeat: no-repeat;
    position: relative;
}
.hero-text {
    padding-top: 150px;
}
.hero-text h1 {
    font-size: 85px;
    line-height: 111px;
    letter-spacing: 4px;
    color: #fff;
    font-weight: 600;
}
.slider-areas a {
    margin-right: 50px;
}
.btn-area a:hover i{
    transform: translateX(10px);
    transform-origin: right;

}
.btn-area a i{
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.hero-shape-area .shape {
    position: absolute;
    top: 18%;
    left: 3%;
}
.shape.shape01 {
    animation: shaperotate 3s infinite alternate;
	-webkit-animation: shaperotate 3s infinite alternate;
}
.shape.shape02 {
    left: 3%;
    top: 86%;
    animation: shapezoomanimation 3s infinite alternate;
	-webkit-animation: shapezoomanimation 3s infinite alternate;
}
.shape.shape03 {
    left: 75%;
    animation: shaperotate 2s infinite alternate;
	-webkit-animation: shaperotate 2s infinite alternate;
}
.shape.shape04 {
    top: 54%;
    left: 64%;
    animation: shapezoomanimation 2s infinite alternate;
	-webkit-animation: shapezoomanimation 2s infinite alternate;
}
.shape.shape05 {
    left: 53%;
    top: 81%;
    animation: shaperotate 3s infinite alternate;
	-webkit-animation: shaperotate 3s infinite alternate;
}
/*====================================================
                    Services
======================================================*/
h1.top-title {
    font-size: 131px;
    color: #dde8f3;
    letter-spacing: 7px;
}
.service-area{
    padding-top:200px;
}
h1.up-title {
    font-size: 77px;
    color: #007ac1;
    letter-spacing: 7px;
    margin-top: -90px;
}
h4.ser-title {
    font-family: 'Open Sans';
    font-size: 25px;
    font-weight: 700;
    color: #333;
    padding-bottom: 5px;
}
span.ser-des {
    font-size: 14px;
    color: #6f6f6f;
    letter-spacing: 1px;
    line-height: 25px;
}
.sec-padding{
    padding-bottom: 225px;
}
.ser-text:hover h4{
    color: #03a9f4;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
} 
/*====================================================
                    About
======================================================*/
.about-img {
    position: relative;
}
.icon {
    position: absolute;
    top: 47%;
    left: 35%;
    animation: videozoomanimation 2s infinite alternate;
	-webkit-animation: videozoomanimation 2s infinite alternate;
}
.ab-title {
    font-size: 77px;
    color: #007ac1;
    letter-spacing: 7px;
    padding-bottom: 15px;
}
.about-text p {
    font-size: 16px;
    color: #6f6f6f;
    letter-spacing: 1px;
    line-height: 34px;
}
/*====================================================
                   Portfolio
======================================================*/
.portfolio-area {
    margin-top: -80px;
}
.portfolio-filter ul li {
	display: inline-block;
	margin: 5px 10px;
	font-size: 14px;
	cursor: pointer;
    font-weight: 600;
}
.grid {
    width: 100%;
    padding: 50px 0px;
}

.grid img {
    cursor: pointer;
}

.portfolio-filter ul li.active {
    color: #03a9f4;
}
.text-hover {
	position: absolute;
	left: 0;
	right: 0;
	top: 40%;
}

/*====================================================
                    Counter
======================================================*/
.counter-text h1 {
    font-size: 77px;
    color: #007ac1;
    letter-spacing: 7px;
}

.counter-text ul li {
	font-size: 18px;
	padding: 15px;
}
.counter-text ul {
	margin-top: 40px;
}
.counter-text ul li i {
	color: #03a9f4;
	margin-right: 15px;
	font-size: 24px;
}
.counter-area h6 {
	font-size: 18px;
	color: #333;
	padding: 10px;
}
.counter-area span {
	font-size: 18px;
	font-weight: 600;
	margin-left: 10px;
}
.counter-area span::after {
	content: "+";
	margin-left: 5px;
}
.counter-area i {
	font-size: 17px;
	color: #03a9f4;
}
/*====================================================
                    Team
======================================================*/
.social-info h5 {
	font-size: 22px;
	font-weight: 500;
	color: #555;
	padding: 20px 0px 0px 0px;
}
.social-info span {
	font-size: 14px;
	letter-spacing: 2px;
}
.social-info ul li {
	display: inline-block;
	margin: 5px;
}
.social-info ul li:hover img {
    transform: scale(1.1);
}
.social-info ul li img {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
/*====================================================
                    Pricing
======================================================*/
.pricing-box {
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 6px 13.65px 7.35px rgba(95, 95, 95, 0.16);
}
.box-active{
    border-radius: 10px;
    background-image: -moz-linear-gradient( -20deg, rgb(3,169,244) 0%, rgb(25,126,171) 100%);
    background-image: -webkit-linear-gradient( -20deg, rgb(3,169,244) 0%, rgb(25,126,171) 100%);
    background-image: -ms-linear-gradient( -20deg, rgb(3,169,244) 0%, rgb(25,126,171) 100%);
    box-shadow: 0px 6px 13.65px 7.35px rgba(95, 95, 95, 0.16);
}
.pricing-box h2 {
	font-weight: 400;
}
.pricing-box span {
	color: #03a9f4;
	font-size: 28px;
}
.pricing-box ul li {
	font-size: 18px;
	padding: 16px 0px;
	font-weight: 400;
}
.box-active h2 ,.box-active span,.box-active ul li {
    color: #fff;
}
.pricing-box a:hover i{
    transform: translateX(10px);
    transform-origin: right;
}
.pricing-box a i{
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
/*====================================================
                    Testimonail
======================================================*/ 
.testimonial-area{
    margin-bottom: 200px;
}
.testimonial-single p {
	color: #cacaca;
	padding: 25px 327px 10px 327px;
}
.testimonial-single h5 {
	color: #fff;
	font-size: 18px;
	letter-spacing: 2px;
}
.testimonial-single span {
	color: #fff;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 1px;
}
.slick-slide img
{
    margin: 0px auto;
}
.slick-dots li button::before {
	font-size: 15px;
	color: white;

	
}
.slick-dots li.slick-active button::before {
	color: white;
}
.slick-dots li {
	width: 26px;
}
.slick-dots {
	bottom: -52px;
}
/*====================================================
                    Blog
======================================================*/ 
.single-blog h4 {
	font-size: 26px;
	font-weight: 500;
	padding: 25px 0px 15px 0px;
}
.single-blog p {
	padding: 0px 46px 15px 46px;
}
.single-blog a:hover i{
    transform: translateX(10px);
    transform-origin: right;
}
.single-blog a i{
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
/*====================================================
                    Contact
======================================================*/
.contact-info ul li a {
	font-size: 18px;
	font-weight: 600;
}
.contact-info ul li span {
	font-size: 14px;
	color: #333;
	letter-spacing: 1px;
}
.info-contact{
    margin-top: 6px;
}
.contact-form input {
	background-color: transparent;
	border: 1px solid #03a9f4;
	border-radius: 28px;
	margin: 14px 4px 20px 10px;
	font-size: 14px;
	color: #333;
	width: 47%;
	padding: 20px;
}
.contact-form textarea {
	margin: 10px 0px 30px 15px;
	padding: 20px 0px 0px 14px;
	width: 96%;
	background-color: transparent;
	border: none;
	border-radius: 15px;
	font-size: 14px;
	border: 1px solid #03a9f4;
}
.submit.btn2 {
	border: navajowhite;
	margin: 14px;
}
.submit.btn2 i {
	margin-left: 4px;
}
.submit.btn2:hover i {
    transform: translateX(10px);
    transform-origin: right;
}
.submit.btn2 {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
} 
/*===================================================
                    Footer
======================================================*/
.footer-area {
	background-position-x: center;
	background-size: cover;
	min-height: 700px;
	background-repeat: no-repeat;
	border-radius: 140px 140px 0px 0px;
}
.contact-info ul li {
	display: inline-block;
	margin: 10px 20px 0px 0px;
}
.contact-info h5 {
	font-size: 22px;
	color: #fff;
	font-weight: 500;
	padding: 150px 0px 25px 0px;
}
.contact-info p {
	color: #eee;
	font-size: 16px;
	font-weight: 400;
	line-height: 32px;
}
.contact-info-link ul li {
	margin: 10px 20px 0px 0px;
}
.contact-info-link h5 {
	font-size: 22px;
	color: #fff;
	font-weight: 500;
	padding: 150px 0px 25px 0px;
}
.contact-info-link ul li a {
	color: #ffffffd4;
	font-size: 16px;
}
.contact-info-link ul li:hover a {
	color: #333;
}
.contact-info-img h5 {
	font-size: 22px;
	color: #fff;
	font-weight: 500;
	padding: 150px 0px 25px 0px;
}
.contact-info-img ul li {
	display: inline-block;
	margin: 0px 30px 20px 0px;
}
.copyright-area span {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 95px;
	color: #fff;
	text-transform: uppercase;
}
/*====================================================
                    ScrollUp
======================================================*/  
#scrollUp {	
	font-size: 14px;
	box-shadow: 0px 0px 3px #1684b6;
	border-radius: 8px;
}
/*====================================================
                    Inner page bannar
======================================================*/
.baner-area {
	min-height: 400px;
}
.baner-shape .shape02 {
	left: 27%;
	top: 60%;
}
.baner-shape .shape01 {
	left: 18%;
}
.baner-shape .shape05 {
	left: 48%;
	top: 84%;
}
.baner-text h1 {
	line-height: 101px;
}
/*====================================================
                    Index02 hero
======================================================*/
.hero-single h1 {
	color: #ffff;
	font-size: 71px;
	line-height: 113px;
}
.hero-single p {
	color: #fff;
	line-height: 30px;
}
.heroslider-active >.slick-dots {
	bottom: -100px;
}
.hero-single p {
	padding: 0px 175px;
}
.heroslider-active > .slick-dots {
	bottom: -100px;
	left: -11px;
}
/*====================================================
             Index04 hero particles
======================================================*/
.particles-js-canvas-el {
	margin-top: -500px;
}
.heroslider-active > .slick-dots {
	bottom: -100px;
	left: -11px;
}
/*====================================================
             Index05 hero left-text
======================================================*/
.left-text p {
    padding: 0px 430px 0px 0px;
}
/*====================================================
                    Start Preloade
======================================================*/
#loading{
	background-color: #03a9f4;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 111111;
	margin-top: 0px;
	top: 0px;
}
#loading-center{
	width: 100%;
	height: 100%;
	position: relative;
	}
#loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 150px;
	width: 150px;
	margin-top: -75px;
	margin-left: -75px;	
	-ms-transform: rotate(45deg); 
   	-webkit-transform: rotate(45deg);
    transform: rotate(45deg); 

}
.object{
	width: 20px;
	height: 20px;
	background-color:#FFF;
	position: absolute;
	left: 65px;
	top: 65px;
	}
.object:nth-child(2n+0) {
	margin-right: 0px;

}


#object_one {
	-webkit-animation: object_one 2s infinite;
	animation: object_one 2s infinite;
	-webkit-animation-delay: 0.2s; 
    animation-delay: 0.2s; 
	}
#object_two {
	-webkit-animation: object_two 2s infinite;
	animation: object_two 2s infinite;
	-webkit-animation-delay: 0.3s; 
    animation-delay: 0.3s; 
	}
#object_three {
	-webkit-animation: object_three 2s infinite;
	animation: object_three 2s infinite;
	-webkit-animation-delay: 0.4s; 
    animation-delay: 0.4s; 
	}
#object_four {
	-webkit-animation: object_four 2s infinite;
	animation: object_four 2s infinite;
	-webkit-animation-delay: 0.5s; 
    animation-delay: 0.5s; 
}
#object_five {
	-webkit-animation: object_five 2s infinite;
	animation: object_five 2s infinite;
	-webkit-animation-delay: 0.6s; 
    animation-delay: 0.6s; 
}
#object_six {
	-webkit-animation: object_six 2s infinite;
	animation: object_six 2s infinite;
	-webkit-animation-delay: 0.7s; 
    animation-delay: 0.7s; 
}
#object_seven {
	-webkit-animation: object_seven 2s infinite;
	animation: object_seven 2s infinite;
	-webkit-animation-delay: 0.8s; 
    animation-delay: 0.8s; 
}
#object_eight {
	-webkit-animation: object_eight 2s infinite;
	animation: object_eight 2s infinite;
	 -webkit-animation-delay: 0.9s; 
    animation-delay: 0.9s; 
}

#object_big{
	
	position: absolute;
	width: 50px;
	height: 50px;
	left: 50px;
	top: 50px;
	-webkit-animation: object_big 2s infinite;
	animation: object_big 2s infinite;
		 -webkit-animation-delay: 0.5s; 
    animation-delay: 0.5s; 
}	




@-webkit-keyframes object_big {
 50% { -webkit-transform: scale(0.5); }

}

@keyframes object_big {
 50% { 
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
  } 

}




@-webkit-keyframes object_one {
 50% { -webkit-transform: translate(-65px,-65px)  ; }

}

@keyframes object_one {
 50% { 
    transform: translate(-65px,-65px) ;
    -webkit-transform: translate(-65px,-65px) ;
  } 

}



@-webkit-keyframes object_two {
  50% { -webkit-transform: translate(0,-65px) ; }
}

@keyframes object_two {
 50% { 
    transform: translate(0,-65px) ; 
    -webkit-transform: translate(0,-65px) ; 
  } 

}



@-webkit-keyframes object_three {
 50% { -webkit-transform: translate(65px,-65px) ; }
}

@keyframes object_three {
 50% { 
    transform: translate(65px,-65px) ;
    -webkit-transform: translate(65px,-65px) ;
  } 
}



@-webkit-keyframes object_four {
  
  50% { -webkit-transform: translate(65px,0) ; }

}

@keyframes object_four {
  50% { 
    transform: translate(65px,0) ;
    -webkit-transform: translate(65px,0) ;
  } 

}




@-webkit-keyframes object_five {
  
  50% { -webkit-transform: translate(65px,65px) ; }

}

@keyframes object_five {
  50% { 
    transform: translate(65px,65px) ;
    -webkit-transform: translate(65px,65px) ;
  } 

}



@-webkit-keyframes object_six {
  
  50% { -webkit-transform: translate(0,65px) ; }

}

@keyframes object_six {
  50% { 
    transform:  translate(0,65px) ;
    -webkit-transform:  translate(0,65px) ;
  } 

}




@-webkit-keyframes object_seven {
  
  50% { -webkit-transform: translate(-65px,65px) ; }

}

@keyframes object_seven {
  50% { 
    transform: translate(-65px,65px) ;
    -webkit-transform: translate(-65px,65px) ;
  } 

}


@-webkit-keyframes object_eight {
  
  50% { -webkit-transform: translate(-65px,0) ; }

}

@keyframes object_eight {
  50% { 
    transform: translate(-65px,0) ;
    -webkit-transform: translate(-65px,0) ;
  } 

}
/*====================================================
                    keyframes
======================================================*/
@keyframes shapezoomanimation {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
     
    }
}
@keyframes videozoomanimation {
    0% {
        transform: scale(.7);
        -webkit-transform: scale(.7);
    }

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

@keyframes shaperotate {
    0% {
        transform: rotate(400deg);
        -webkit-transform: rotate(400deg);

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