/***************************************
========================================

	Author Name   : Belal Hossain
	This is html template
	Template Name : Larson - Minimal Personal Portfolio Template
	Version: 1.0
	
****************************************
=======================================/



/* ----------------------------------------------------------------

 ==> Table Of Content

	01 Basics
	02 Buttons
	03 Header
	04 Banner
	05 About
	06 Service
	07 Works 
	08 Counter
	09 Resume
	10 Cta
	11 Testimonial
	12 Blog
	13 Contact
	14 Footer
	15 Top-control
 

---------------------------------------------------------------- */

/* all font-family */
/* font-family: 'Josefin Sans', sans-serif; */
/* font-family: 'Kanit', sans-serif; */
/* font-family: 'Jost', sans-serif; */



/* ----------------------------------------------------------------
    [ 01 Start Basics ]
-----------------------------------------------------------------*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
  list-style: none;
  word-wrap: break-word;
}

body  {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #666;
    overflow-x: hidden;

    margin: 0;
    padding: 0;
}
.background {
    position: absolute;  
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #000;
  }
h1,
h2,
h3,
h4,
h5,
h6{
	font-family: 'Montserrat', sans-serif;
	color: #000;
}
img{
	max-width: 100%;
	height: auto;
}
ul{
	padding: 0;
	list-style: none;
}
p {
    margin: 0;
}
a:hover{
	text-decoration: none;
	outline: none;
}
.text_white{
	color: #fff;
}
.padding_0{
	padding: 0;
}
.gray_bg{
	background: #fafafa;
}
.dark_bg_1{
	background: #000;
}
.dark_bg_2{
	background: #0F1113;
}
.form-control::-webkit-input-placeholder {
    color: #666;
    opacity: 1; 
}
.form-control:-ms-input-placeholder {
    color: #666;
    opacity: 1; 
}
.form-control::-ms-input-placeholder {
    color: #666;
    opacity: 1; 
}
.form-control::placeholder {
    color: #666;
    opacity: 1; 
}

/* START PRELOADER DESIGN */
.preloader {
	background: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;	
}
.preloader.dark_preloader{
	background: #000;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;	
}
.spinner {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	font-size: 10px;
	text-indent: -12345px;
	z-index: 10000;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #000;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}
.dark_preloader .double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.view-more-btn:hover .viewButton {
  color: black !important;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
/* END PRELOADER DESIGN */

/* Start Section-Padding */
.section_padding{
    /* padding: 100px 0; */
    padding: 110px 0 0 0;
}
.pb_70{
	padding-bottom: 70px;
}
/* End Section-Padding */

/* Start Section-Heading */
.section_heading {
    padding-bottom: 100px;
    padding-top: 0;
    position: relative;
}
.section_heading:after {
    position: absolute;
    content: "";
    display: block;
    height: 30px;
    width: 3px;
    bottom: 70px;
    left: 50%;
    background-color: #000;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
.dark_heading.section_heading:after {
    position: absolute;
    content: "";
    background-color: #fff;
}
.section_heading h2 {
    font-size: 40px;
    font-weight: 600;
    color: #000;
    margin-top: 0;
    margin-bottom: 10px;
}
.dark_heading.section_heading h2 {
    color: #fff;
}
.section_heading p {
	margin: 0 auto;
    margin-bottom: 20px;
    max-width: 530px;
}

/* End Section-Heading */

/* ----------------------------------------------------------------
    [ End Basics ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [ 02 Start Buttons ]
-----------------------------------------------------------------*/
/* Start Btn-Style */
.main_btn {
    color: #fff;
    font-size: 14px;
    margin-top: 30px;
    text-transform: capitalize;
    padding: 23px 40px;
    letter-spacing: 0.6px;
    font-weight: 600;
    background: #000;
    line-height: 10px;
    border-radius: 30px;
    border: none;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out 0s;
    position: relative;
}
.dark_bg_btn{
    color: #000;
    background: #fff;
}
.main_btn:focus,
.main_btn:hover {
    color: #fff;
    background: #000;
}
.dark_bg_btn:focus,
.dark_bg_btn:hover {
    color: #000;
    background: #fff;
}
.main_btn:before,
.main_btn:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: all 0.5s ease 0s;
}
.main_btn:hover:before{
    background: rgba(255, 255, 255, 0.7);
    left: 60%;
    right: 60%;
}
.dark_bg_btn:hover:before{
    background: rgba(0, 0, 0, 0.7);
    left: 60%;
    right: 60%;
}
.main_btn:hover:after{
    background: rgba(255, 255, 255, 0.7);
    top: 60%;
    bottom: 60%;
}
.dark_bg_btn:hover:after{
    background: rgba(0, 0, 0, 0.7);
    top: 60%;
    bottom: 60%;
}
.about_btn .contact_number {
    background: transparent;
    border: 1px solid #000;
    padding: 18px 50px;
    margin-top: 29px;
    border-radius: 30px;
    position: absolute;
    right: 47%;
}
.about_btn .dark_cn {
    background: transparent;
	color: #fff;
    border: 1px solid #fff;
}
.about_btn .contact_number:focus{
    background: transparent;
    border: 1px solid #000;
	box-shadow: none;
}
.about_btn .dark_cn:focus{
    background: transparent;
    border: 1px solid #fff;
	box-shadow: none;
}
.blog_btn {
    padding: 20px 30px;
}
/* ----------------------------------------------------------------
    [ End Buttons ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [ 03 Start Header ]
-----------------------------------------------------------------*/
.navbar-fixed-top, .navbar-fixed-bottom{
position: absolute;
}
.navbar-default {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    width: 100%;
    padding: 20px 0;
    background: #fff;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}
.navbar-brand { padding: 0px }
.navbar-default .navbar-nav>li>a {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    padding: 15px 5px;
    text-transform: capitalize;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    position: relative;
}
.navbar-default.dark_bg_menu .navbar-nav>li>a {
    color: #fff;
}
.navbar-nav li a:before,
.navbar-nav li a:after{
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}
.navbar-nav li a:before{
    margin-right: 8px;
    content: '[';
    -webkit-transform: translate(20px);
    -moz-transform: translate(20px);
    transform: translate(20px);
}
.navbar-nav li a:after{
    margin-left: 8px;
    content: ']';
    -webkit-transform: translate(-20px);
    -moz-transform: translate(-20px);
    transform: translate(-20px);
}
.navbar-default .navbar-nav>li>a:hover:before,
.navbar-default .navbar-nav>li>a:hover:after,
.navbar-default .navbar-nav > li.active > a:after,
.navbar-default .navbar-nav > li.active > a:before{
    opacity: 1;
    -webkit-transform: translate(0px);
    -moz-transform: translate(0px);
    transform: translate(0px);
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus{
    color: #000;
    background: none;
}
.navbar-default.dark_bg_menu .navbar-nav>.active>a,
.navbar-default.dark_bg_menu .navbar-nav>.active>a:hover, 
.navbar-default.dark_bg_menu .navbar-nav>.active>a:focus{
    color: #fff;
    background: none;
}
.navbar-default .navbar-nav>li>a:hover, 
.navbar-default .navbar-nav>li>a:focus {
    color: #000;
    background-color: transparent;
}
.navbar-default.dark_bg_menu .navbar-nav>li>a:hover, 
.navbar-default.dark_bg_menu .navbar-nav>li>a:focus {
    color: #fff;
    background-color: transparent;
}
.menu-top { background: rgba(0, 0, 0, 0) none repeat scroll 0 0 }
.navbar-default.sticky_menu {
    background-color: #fff;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    animation: fadeInDown 1s both 0.2s;
}
.navbar-default.dark_bg_menu.sticky_menu {
    background-color: #000;
    box-shadow: 0 1px 20px rgba(255, 255, 255, 0.1);
    width: 100%;
    animation: fadeInDown 1s both 0.2s;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background: transparent; }
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border: none;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #000;
}
.navbar-default.dark_bg_menu .navbar-toggle .icon-bar {
    background-color: #fff;
}
/* ----------------------------------------------------------------
    [ End Header ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [ 04 Start Banner ]
-----------------------------------------------------------------*/
.main_banner{
    /* height: 700px; */
    height: 760px;
	background-size: cover;
	background-repeat: no-repeat;
}
.banner_bg{
	background-image: url(../images/banner.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
}
.banner_bg:before{
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255, 0.7);
}
.banner_bg_2{
    /* background-image: url(../images/banner2.jpg); */
    background-color: #000;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
}
.banner_bg_2:before{
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0, 0.5);
}
.parallax_bg{
	background-attachment: fixed;
}
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
	top: 0;
}
.display_table{
	display: table;
	width: 100%;
	height: 100%;
}
.display_table_cell{
	display: table-cell;
  vertical-align: middle;
}
.banner_content .sm_title {
    font-size: 30px;
    font-weight: 600;
}
.banner_bg_2 .sm_title {
    color: #fff;
}
.banner_content h1 {
    color: #000;
    font-size: 52px;
    margin: 0 0 5px;
}
.banner_bg_2 .banner_content h1 {
    color: #fff;
}
.banner_content h1 span .fw_300{
	font-weight: 300;
}
.banner_content h1 span .fw_800{
	font-weight: 800;
}
.banner_content .sub_title{
}
.banner_content .sub_title span {
	position: relative;
    font-weight: 400;
    color: #666;
    text-transform: uppercase;
    font-size: 14px;
    margin: 0 10px;
}
.banner_bg_2 .banner_content .sub_title span {
	position: relative;
    font-weight: 400;
    color: #fff;
}
.banner_content .sub_title span:after {
    position: absolute;
    content: "";
    top: 10px;
    bottom: 0;
    right: -12px;
    width: 4px;
    height: 4px;
    background: #666;
    border-radius: 50%;
}
.banner_content .sub_title span:last-child:after {
    display: none;
}
.banner_social_link {
    margin-top: 12px;
}
.banner_social_link li {
    display: inline-block;
    margin: 0 5px;
}
.banner_social_link a {
    position: relative;
    display: block;
    width: 45px;
	color: #000;
	font-size: 22px;
    line-height: 45px;
    border-radius: 50%;
    text-decoration: none;
    transition: 0.3s;
	z-index: 0;
}
.banner_bg_2 .banner_social_link a {
	color: #fff;
}
.banner_social_link a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 50%;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: 0.3s;
	z-index: -1;
}
.banner_bg_2 .banner_social_link a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
}
.banner_social_link a:hover:before {
    -webkit-transform: scale(1);
    transform: scale(1);
}
.banner_social_link a:hover{
	color: #fff;
}
.banner_bg_2 .banner_social_link a:hover{
	color: #000;
}

/* particle background */
#home canvas.particles-js-canvas-el{
    position: absolute;
    top: 0;
}

/* Start Scroll-mouse */
#home .mouse {
    position: absolute;
    width: 22px;
    height: 42px;
    /* bottom: 100px; */
    bottom: 15px; 
    left: 50%;  
    margin-left: -12px;
    border-radius: 15px;
	animation: finger 1s infinite 0s;
}
.mouse i {
    font-size: 30px;
    color: #000;
}
.banner_bg_2 .mouse i {
    font-size: 30px;
    color: #fff;
}
@keyframes intro{
	0%{
		opacity: 0;
		transform: translateY(40px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes finger{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		transform: translateY(20px);
	}
}	
/* ----------------------------------------------------------------
    [ End Banner ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
    [ start Moto I do everything with passion ]
-----------------------------------------------------------------*/
#b{
  width:95%;
  margin:auto;
  
}

.moto{
  width:20%;
  transform: rotateZ(-360deg);
  opacity: 0.6;
  z-index: -1;
  float: left;

}

.moto_content_logo{
  
}

.clearfix{
  clear: both;
}

.b{
  width: 35%;
  float: right;
}

.moto_heading{
  width: 65%;
  position: relative;
  min-height: 489px;
}
.passion{
  position: absolute;
  top:60%;
  float: left;
  transform: translateY(-60%);
}

.passion1{
  position: absolute;
  top:30%;
  float: left;
  transform: translateY(-30%);
}
/* ----------------------------------------------------------------
    [ 05 Start About ]
-----------------------------------------------------------------*/
.about_content_area h5{
    font-size: 18px;
    margin-top: 0;
    font-weight: 500;
}
.dark_bg_1{
  margin-bottom: 20px;
}
.dark_bg_1 .about_content_area h5{
	color: #fff;
}
.about_content_area h3{
	font-size: 18px;
	font-weight: 600;
	margin: 12px 0 33px;
}
.dark_bg_1 .about_content_area h3{
	color: #fff;
}
.about_me {
    margin-top: 30px;
}
.about_me .email a{
    color: #666;
}
.about_me div {
    margin-bottom: 20px;
}
.about_me span {
    display: inline-block;
    position: relative;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    width: 150px;
    margin-right: 30px;
}
.dark_bg_1 .about_me span {
    color: #fff;
}
.about_me span:after {
    content: ":";
    position: absolute;
    right: 0;
}
.about_btn .contact_btn{
	position: relative;
}
/* ----------------------------------------------------------------
    [ End About ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [ 06 Start Service ]
-----------------------------------------------------------------*/
.single_service{
    text-align: center;
    padding: 40px 30px;
    background: #fff;
    margin-bottom: 30px;
	position: relative;
    transition: 0.4s;
}
.dark_bg_2 .single_service{
    background: #000;
}
.single_service:hover {
    box-shadow: 0px 1px 40px rgba(0,0,0, 0.15);
}
.dark_bg_2 .single_service:hover {
    box-shadow: 0px 1px 40px rgba(255,255,255, 0.15);
}
.single_service .service_icon {
    position: relative;
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    color: #000;
    background: rgba(0, 0, 0, 0.05);
    font-size: 30px;
    line-height: 70px;
    border-radius: 50%;
    text-decoration: none;
    transition: 0.4s;
    z-index: 0;
}
.dark_bg_2 .single_service .service_icon {
    position: relative;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    transition: 0.4s;
    z-index: 0;
}
.single_service .service_icon:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 50%;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: 0.4s;
	z-index: -1;
}
.single_service:hover .service_icon:before {
    -webkit-transform: scale(1);
    transform: scale(1);
}
.single_service:hover .service_icon{
	color: #fff;
	box-shadow: none;
}
.single_service h4 {
    font-size: 22px;
    margin-top: 20px;
    text-transform: capitalize;
    color: #000;
    font-weight: 500;
}
.dark_bg_2  .single_service h4 {
    color: #fff;
}
.single_service p{
	margin-top: 15px;
}
.service_slider .owl-dots{
	margin-top: 20px;
	text-align: center;
}
.service_slider .owl-dot{
	margin: 0 5px;
	display: inline-block;
	width: 10px;
	height: 10px;
	background: rgba(0,0,0, 0.3);
	border-radius: 30px;
}
.dark_bg_2 .service_slider .owl-dot{
	margin: 0 5px;
	display: inline-block;
	width: 10px;
	height: 10px;
	background: rgba(255,255,255, 0.3);
	border-radius: 30px;
}
.service_slider .owl-dot.active{
	background: #000;
}
.dark_bg_2 .service_slider .owl-dot.active{
	background: #fff;
}
/* ----------------------------------------------------------------
    [ End Service ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [ 07 Start Works ]
-----------------------------------------------------------------*/
.work_filter ul {
	padding: 0;
	list-style: none;
	margin-bottom: 30px;
}
.work_filter ul li {
    font-weight: 600;
    text-transform: capitalize;
    display: inline-block;
    cursor: pointer;
    font-size: 16px;
    border-radius: 30px;
    padding: 5px 30px;
    letter-spacing: 1px;
	background: transparent;
    margin: 0 10px 20px;
    transition: all 0.5s ease-in-out;
	position: relative;
}
.dark_bg_1 .work_filter ul li {
    color: #fff;
}
.work_filter ul li:after {
    position: absolute;
    content: "";
    width: 1px;
    height: 20px;
    background: #ddd;
    top: 10px;
    right: -13px;
}
.work_filter ul li:last-child:after {
    display: none;
}
.work_filter ul li.active{
	background-color: #000;
	color: #fff;
}
.dark_bg_1 .work_filter ul li.active{
	background-color: #fff;
	color: #000;
}
.box{
    text-align: center;
    overflow: hidden;
    position: relative;
}
.box .box_content_area{
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    height: 100%;
    left: 0;
    z-index: 1;
    transition: all 0.6s ease 0s;
}
.box .hover_content{
	position:absolute;
    width:100%;
    top:50% !important;
    left:50% !important;
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%)
}
.box .hover_content h5{
    color: #fff;
    margin: 0;
    font-size: 18px;
}
.box .hover_content span {
    color: #fff;
	font-weight: 500;
    font-size: 14px;
}
.box .hover_content .icon a{
    display: inline-block;
	margin-top: 10px;
    font-size: 20px;
    color: #fff;
}
.port_content_button {
    margin-top: 10px;
}
/* ----------------------------------------------------------------
    [ End Works ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [ 08 Start Counter ]
-----------------------------------------------------------------*/
.single_counter {
    box-shadow: 0 0 30px rgba(0,0,0, 0.15);
    padding: 30px 0;
    border: 1px solid transparent;
	transition: all 0.3s ease 0s;
}
.dark_bg_2 .single_counter {
	box-shadow: 0 0 30px rgba(255,255,255, 0.15);
    border: 1px solid #000;
}
.single_counter:hover{
	background: #fff;
    border: 1px solid #000;
}
.dark_bg_2 .single_counter:hover{
	background: none;
    border: 1px solid #fff;
}
.single_counter .icon{
	margin-bottom: 20px;
}
.single_counter .icon i {
    font-size: 50px;
    color: #000;
}
.dark_bg_2 .single_counter .icon i {
    color: #fff;
}
.single_counter span{
	font-size: 30px;
	font-weight: 800;
	font-style: italic;
	color: #000;
	font-family: 'Montserrat', sans-serif;
}
.dark_bg_2 .single_counter span{
	color: #fff;
}
.single_counter p{
    font-size: 16px;
    color: #666;
    font-weight: 600;
    margin-bottom: 0;
}
/* ----------------------------------------------------------------
    [ End Counter ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [ 09 Start Resume ]
-----------------------------------------------------------------*/
.resume-container h3{
    font-size: 30px;
    margin-bottom: 30px;
    margin-left: 15px;
    font-weight: 600;
}
.dark_bg_1 .resume-container h3{
	color: #fff;
}
.resume-container h3 i{
    margin-right: 15px;
    font-size: 30px;
}
.dark_bg_1 .resume-container h3 i{
	color: #fff;
}
.single_resume strong{
    color: #000;
    font-size: 14px;
}
.dark_bg_1 .single_resume strong{
    color: #fff;
}
.single_resume h5 {
    font-size: 16px;
    font-weight: 700;
}
.dark_bg_1 .single_resume h5 {
    color: #fff;
}
.single_resume{
    box-shadow: 0px -1px 30px rgba(0,0,0, 0.1);
    display: block;
    padding: 30px 30px;
    margin-bottom: 30px;
	position: relative;
}
.dark_bg_1 .single_resume{
    box-shadow: 0px -1px 30px rgba(255,255,255, 0.2);
    display: block;
	position: relative;
}
.single_resume:after {
    content: "";
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    width: 90%;
    height: 2px;
    background: #000;
    position: absolute;
    transition: all 0.3s ease;
}
.dark_bg_1 .single_resume:after {
    content: "";
    width: 90%;
    height: 2px;
    background: #fff;
    position: absolute;
    transition: all 0.3s ease;
}
.single_resume:hover:after {
    width: 100%;
}
/* ----------------------------------------------------------------
    [ End Resume ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [ 10 Start Cta ]
-----------------------------------------------------------------*/
.cta_section{
	background: url(../images/cta-action.jpg);
	position: relative;
    background-size: cover;
    background-attachment: fixed;
	padding: 100px 0;
}
.cta_section:before{
	position: absolute;
	content: "";
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255, 0.90);
	
}
.dark_overlay::before{
	position: absolute;
	content: "";
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
    background: #00000000;
}
.creative-stuff::before {
  background: linear-gradient(to right, #000 53%, #ffffff88);
  z-index: -1;
}
.cta_content h3 {
    color: #000;
    font-size: 30px;
	margin-top: 0;
    margin-bottom: 0;
}
.dark_overlay h3 {
    color: #fff;
}
/* ----------------------------------------------------------------
    [ End Cta ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [ 11 Start Testimonial ]
-----------------------------------------------------------------*/
.single_testimonial {
    margin: 0 50px;
    text-align: center;
    position: relative;
}
.single_testimonial .description {
    padding: 0 145px;
    margin-bottom: 30px;
    font-style: italic;
    background: transparent;
    line-height: 30px;
    position: relative;
}
.single_testimonial .description:before {
    content: "\f10d";
    font-family: 'FontAwesome';
    font-size: 45px;
    color: #000;
    position: absolute;
    top: 10px;
    left: 90px;
}
.dark_bg_2 .single_testimonial .description:before {
    content: "\f10d";
    font-family: 'FontAwesome';
    font-size: 45px;
    color: #fff;
}
.single_testimonial .pic {
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 5px;
    border-radius: 50%;
    background: rgba(255,255,255, 0.8);
    margin-bottom: 15px;
}
.single_testimonial .pic img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.single_testimonial .title{
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    letter-spacing: 1px;
    text-transform: capitalize;
    margin: 0 0 5px 0;
}
.dark_bg_2 .single_testimonial .title{
    color: #fff;
}
.single_testimonial .post{
    display: block;
    font-size: 14px;
    text-transform: capitalize;
}
.testimonial_area .owl-dots{
	margin-top: 20px;
	text-align: center;
}
.testimonial_area .owl-dot{
	margin: 0 5px;
	display: inline-block;
	width: 10px;
	height: 10px;
	background: rgba(0,0,0, 0.3);
	border-radius: 30px;
}
.dark_bg_2 .testimonial_area .owl-dot{
	margin: 0 5px;
	display: inline-block;
	width: 10px;
	height: 10px;
	background: rgba(2555,255,255, 0.3);
	border-radius: 30px;
}
.testimonial_area .owl-dot.active{
	background: #000;
}
.dark_bg_2 .testimonial_area .owl-dot.active{
	background: #fff;
}
/* ----------------------------------------------------------------
    [ End Testimonial ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [ 12 Start Blog ]
-----------------------------------------------------------------*/
.blog-thumb small {
	color: #000;
	font-weight: 600;
	display: block;
}
.dark_bg_1 .blog-thumb small {
	color: #fff;
}
.blog-thumb small .fa {
	margin-right: 5px;
}
.blog-thumb small,
.blog-thumb small + span {
	display: inline-block;
	vertical-align: middle;
}
.blog-thumb small + span{
	color: #666;
	font-size: 10px;
	font-weight: bold;
	text-transform: capitalize;
	margin-left: 2px;
}
.blog-info a h4{
    padding: 8px 0 12px;
    font-size: 22px;
    margin: 0;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.dark_bg_1 .blog-info a h4{
    color: #fff;
}
.blog-info a h4:hover{
	color: #000;
}
.dark_bg_1 .blog-info a h4:hover{
	color: #fff;
}
.blog-info {
    padding: 30px;
    background: #fff;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.dark_bg_1 .blog-info {
    background: #000;
    box-shadow: 0 1px 30px rgba(255, 255, 255, 0.2);
}
/* ----------------------------------------------------------------
    [ End Blog ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [ 13 Start Contact ]
-----------------------------------------------------------------*/
.contact {
	overflow: hidden;
	padding: 0;
}
.input_padding {
    overflow: hidden;
}
.form-control {
    background: #fafafa;
    border: 1px solid #fafafa;
    border-radius: 5px;
    color: #666;
    box-shadow: none;
    font-size: 15px;
    height: 45px;
}
.dark_bg_2 .form-control {
    background: #fff;
}
.form-control:focus {
    border-color: #fafafa;
    box-shadow: none;
    outline: 0 none;
}
.dark_bg_2 .form-control:focus {
    border-color: #fff;
}
.form-group #submitButton{
    width: 100%;
}
.contact_details {
    background: #fafafa;
    padding: 30px 0;
    border-radius: 10px;
}
.dark_bg_2 .contact_details {
    background: #fff;
}
.single_contact {
    padding-bottom: 30px;
    text-align: center;
}
.single_contact i {
    color: #000;
    font-size: 30px;
}
.single_contact h5{
    color: #000;
    margin: 15px 0 0;
    font-size: 18px;
}
.mb0 { margin-bottom: 0; }
.pb_0{ padding-bottom: 0; }
/* ----------------------------------------------------------------
    [ End Contact ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [ 14 Start Footer ]
-----------------------------------------------------------------*/
.footer {
    padding: 30px 0;
    background: #1a1a1a;
}
.copy-text p{
	text-align: center;
	color: #fff;
	margin: 0;
}
/* ----------------------------------------------------------------
    [ End Footer ]
-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
    [ 15 Start Top-control ]
-----------------------------------------------------------------*/
.topcontrol {
    background: #000 none repeat scroll 0 0;
    border-radius: 0;
    bottom: 5px;
    margin-bottom: 50px;
    box-shadow: 0 1px 10px 0 rgba(255, 255, 255, 0.3);
    color: #fff;
    cursor: pointer;
    font-size: 30px;
    opacity: 1;
    line-height: 40px;
    filter: alpha(opacity=100);
    padding: 0 10px;
    border-radius: 5px;
    position: fixed;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    width: 40px;
    height: 40px;
    z-index: 99;
}
.topcontrol:hover {
    background: #fff;
    color: #000;
}
/* ----------------------------------------------------------------
    [ End Top-control ]
-----------------------------------------------------------------*/

.title-left-align{
    padding-bottom:10%;
    vertical-align: bottom;
}
.top-name-title{
    display: flex;
    align-items: center;
    color: #fff !important;
    font-size: 2.5rem;
    margin-left: 1rem;
}

.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 30px;
    padding: 9px 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.main-title-name{
    color: #f70e0e;
}

.single-main-line{
    display: flex;
    align-items: baseline;
    padding-bottom: 2rem;
}
.small-text{
    color:#fff;
    /* font-size: 5rem; */
    font-size: 41px;
    padding-right: 1rem;
    font-weight: 700;
}
.main-bold{
    color:#f70e0e;
    font-weight: 700;
    /* font-size: 7rem; */
    font-size: 81.0px;
}
.discover-right-img{
    /* background-image: url('https://anima-uploads.s3.amazonaws.com/projects/5ee444743e7ba21d73d4327a/releases/5f316ca014a1858adbdbf1d3/img/home-screen@1x.png'); */
    background-color: #ffebcb;
    /* width: 399px; */
    display: flex;
    align-items: center;
    height: 530px;
}
.discover-images{
    display: flex;
    align-items: center;
    flex-direction: row;
}
.ux-design-view-btn{
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 1rem;
    padding: 10px 30px;
    font-size: 1.5rem;
}
.ux-design-view-btn:hover{
  background-color: #fff;
  color: #000;
  transition: 0.3s ease-in;
}

.view-more-parent{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    margin-top: 38px;
}
.view-more-btn{
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 3px 15px;
    background-color: #000;
    font-weight: 700;
}
.view-more-btn:hover{
  background-color: #fff;
  color: #000;
  transition: 0.3s ease-in;
}
.view-more-line{
    width: 10%;
    background-color: #ddd;
    height: 2px;
    border-radius: 5rem;
    margin: 0 2rem;
}

.explore-more-parent{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem;
}
.explore-more-btn{
    color: #fff;
    border: 1px solid #ddd;
    border-radius: 2rem;
    padding: 10px 49px;
    background-color: transparent;
    font-size: 3rem;
    font-weight: 700;
}
.explore-more-line{
    width: 31%;
    background-color: #ddd;
    height: 2px;
    border-radius: 5rem;
    margin: 0 2rem;
}

.video_overlay:before{
	position: absolute;
	content: "";
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0, 0.85);
}
.video_overlay{
    display: flex;
    align-items: center;
}

.explore_section{
	background: url('../images/lyt\ bg.png');
	position: relative;
    background-size: cover;
    background-attachment: fixed;
	padding: 100px 0;
}
.explore_section:before{
	position: absolute;
	content: "";
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: #1d1d1d96;
	
}
.explore_content h3 {
    color: #000;
    font-size: 30px;
	margin-top: 0;
    margin-bottom: 0;
}

.creative-background-image{
    background-image: url('../images/bg-d.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 452px 0;
}


/* accordian-gallery-start */
.accrodian-container {
    padding: 25px 0;
    margin: 0 auto;
    width: 100%;
  }
  
  .accrodian-gallery-wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 70vh;
  }
  
   .accrodian-item {
    flex: 1;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    transition: flex 0.8s ease;
  }
   .accrodian-item:hover {
    flex: 7;
  }
  
   .accrodian-item-1 {
    background-image: url("./../images/M/Codepen.svg");
  }
  
   .accrodian-item-2 {
    background-image: url("./../images/M/Bechance.svg");
  }
  
   .accrodian-item-3 {
    background-image: url("./../images/M/Dribble.svg");
  }
  
   .accrodian-item-4 {
    background-image: url("./../images/M/GitHub.svg");
  }
  
   .accrodian-item-5 {
    background-image: url("./../images/M/Kenyons.svg");
  }

  /* accordian-gallery-end */

  /* pinterest design start */
  .grid-item { width: 400px;padding:1rem }
.grid-item--width2 { width: 400px; }
/* pinterest design end */

/* ux-design layout start */
.ux_section{
	/* background: url('https://anima-uploads.s3.amazonaws.com/projects/5ee444743e7ba21d73d4327a/releases/5f316ca014a1858adbdbf1d3/img/screen-shot-2020-08-09-at-5-41-24-pm@1x.png'); */
	position: relative;
    /* background-size: cover;
    background-attachment: fixed; */
	padding: 100px 0;
}
.ux_section:before{
	position: absolute;
	content: "";
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: #000000c4;
	
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
  overflow: hidden;
}
video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.video-container {
  position: relative;
  z-index: 2;
  top:53%;
}
/* ux-design layout end */

/* pikachu slider :start */
.slider__navi {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	z-index: 999;
}

.slider__navi a {
	display: block;
	height: 6px;
	width: 20px;
	margin: 20px 0;
	text-indent: -9999px;
	box-shadow: none;
	border: none;
	background: rgba(0,0,0,0.2);
}

.slider__navi a.active {
	background: rgba(255,255,255,1);
}

body  {
	position: relative;
	font-size: 100%;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	min-height: 100vh;
}

.flex__container {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	-o-flex-flow: row wrap;
	flex-flow: row wrap; 
	-webkit-justify-content: flex-start;
	-moz-justify-content: flex-start;
	-ms-justify-content: flex-start;
	-o-justify-content: flex-start;
	justify-content: flex-start;
	height: 80vh;
	width: 100%;
	z-index: 1;
}

.flex__container.flex--active {
	z-index: 2;
}

.text--sub {
	font-size: 12px;
	letter-spacing: 0.5rem;
	text-transform: uppercase;
	margin-bottom: 40px;
}

.text--big {
	font-family: 'Poppins', sans-serif;
	font-size: 7.5em;
	font-weight: 700;
	line-height: 110px;
  margin-left: -8px;
}

.text--normal {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
	line-height: 22px;
	margin-top: 25px;
}

.text__background {
	font-family: 'Poppins', sans-serif;
	position: absolute;
	left: 72px;
	bottom: -60px;
	color: rgba(0,0,0,0.05);
	font-size: 170px;
	font-weight: 700;
}

.flex__item {
	height: 80vh;
	color: #fff;
	transition: transform 0.1s linear;
}

.view-more-btn:hover .blackHover {
  color: black !important;
}

.flex__item--left {
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	align-items: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	width: 65%;
	transform-origin: left bottom;
	transition: transform 0.1s linear 0.4s;
	opacity: 0;
	position: relative;
	overflow: hidden;
}

.flex__item--right {
	width: 35%;
	transform-origin: right center;
	transition: transform 0.1s linear 0s;
	opacity: 0;
}

.flex--preStart .flex__item--left,
.flex--preStart .flex__item--right,
.flex--active .flex__item--left,
.flex--active .flex__item--right {
	opacity: 1;
}

/* Piplup */

.flex--piplup .flex__item--left {
	background: #3e9fe6;
}

.flex--piplup .flex__item--right {
	background: #d3eaef;
}

/* Pikachu */

.flex--pikachu .flex__item--left {
	background: #f8d41f;
}

.flex--pikachu .flex__item--right {
	background: #f4ecc5;
}

/* Blaziken */

.flex--blaziken .flex__item--left {
	background: #f64f37;
}

.flex--blaziken .flex__item--right {
	background: #ffebcd;
}

/* Dialga */

.flex--dialga .flex__item--left {
	background: #476089;
}

.flex--dialga .flex__item--right {
	background: #ade8f7;
}

/* Zekrom */

.flex--zekrom .flex__item--left {
	background: #424242;
}

.flex--zekrom .flex__item--right {
	background: #a7bcbb;
}

.flex__content {
	margin-left: 80px;
	width: 55%;
	opacity: 1;
	transform: translate3d(0,0,0);
	transition: transform 0.2s linear 0.2s, opacity 0.1s linear 0.2s;
}

.pokemon__img {
	position: absolute;
	bottom: 15px;
	right: 10%;
	max-height: 500px;
	opacity: 1;
	transform: translate3d(0,0,0);
	transition: opacity 0.43s 0.6s, transform 0.4s 0.65s cubic-bezier(0, 0.88, 0.4, 0.93);
}

/* Animate-START point */

.flex__container.animate--start .flex__content {
	transform: translate3d(0,-200%,0);
	opacity: 0;
}

.flex__container.animate--start .pokemon__img {
	transform: translate3d(-200px,0,0);
	opacity: 0;
}

/* Animate-END point */

.flex__container.animate--end .flex__item--left {
	transform: scaleY(0);
}

.flex__container.animate--end .flex__item--right {
	transform: scaleX(0);
}

.flex__container.animate--end .flex__content {
	transform: translate3d(0,200%,0);
	opacity: 0;
}

.flex__container.animate--end .pokemon__img {
	transform: translate3d(200px,0,0);
	opacity: 0;
}
/* pikachu slider end */

/* download btn css */
#downloadBtn  {
    display: -webkit-box;
    display: flex;
    /* width: 100%;
    height: 100vh; */
    -webkit-box-pack: center;
            /* justify-content: center; */
    -webkit-box-align: center;
            align-items: center;
    /* font-family: "Source Code Pro"; */
    
  }
  #downloadBtn  svg {
    position: absolute;
    width: 0;
    height: 0;
  }
  #downloadBtn  .btn {
    padding: 15px 25px;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    color: #ffffff83;
    position: relative;
    border: 2px solid #ffffff39;
    border-radius: 10px;
    font-family: 'Kanit',Helvetica,Arial,serif;
    font-weight: 700;
    font-size: 16px;
  }
  #downloadBtn  .btn span {
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }
  #downloadBtn  .btn:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ff00b8;
    left: 0;
    top: 0;
    border-radius: 75px;
    z-index: -1;
    -webkit-transition-delay: 1s;
            transition-delay: 1s;
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
  }
  #downloadBtn  .btn div {
    width: 100%;
    height: 400%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -2;
    -webkit-filter: url("#goo");
            filter: url("#goo");
  }
  #downloadBtn  .btn div:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 25%;
    left: 0;
    bottom: 0;
    background: #ff00b8;
  }
  #downloadBtn  .btn div:before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    left: 0px;
    bottom: 0px;
    border-radius: 100%;
    background: #ff00b8;
  }
  #downloadBtn  .btn.loading {
    -webkit-animation: flick 7s ease-in-out 1 forwards;
            animation: flick 7s ease-in-out 1 forwards;
  }
  #downloadBtn  .btn.loading:before {
    border-radius: 0px;
    box-shadow: inset 0 0 0 3px #ff00b8;
    -webkit-transition-delay: 1.3s;
            transition-delay: 1.3s;
    -webkit-animation: loading 5s ease-in-out 1 forwards;
            animation: loading 5s ease-in-out 1 forwards;
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
    box-sizing: border-box;
  }
  @-webkit-keyframes loading {
    0% {
      background: repeating-linear-gradient(45deg, #ff00b8, #ff00b8 5px, #fff 5px, #fff 10px);
      background-position: -500px 50%;
      background-size: 925%;
      -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
              clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
      padding: 20px 40px;
    }
    97.5% {
      background: repeating-linear-gradient(45deg, #ff00b8, #ff00b8 5px, #fff 5px, #fff 10px);
      background-position: -900px 50%;
      background-size: 925%;
      box-shadow: inset 0 0 0 3px #ff00b8;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
              clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
      content: '';
      color: #1f00ff;
      padding: 20px 40px;
      z-index: -1;
    }
    100% {
      background: #fff;
      background-position: -900px 50%;
      background-size: 925%;
      box-shadow: inset 0 0 0 3px #1f00ff;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
              clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
      content: 'COMPLETE!';
      color: #1f00ff;
      padding: 20px 40px;
      font-weight: 900;
      z-index: 9;
    }
  }
  @keyframes loading {
    0% {
      background: repeating-linear-gradient(45deg, #ff00b8, #ff00b8 5px, #fff 5px, #fff 10px);
      background-position: -500px 50%;
      background-size: 925%;
      -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
              clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
      padding: 20px 40px;
    }
    97.5% {
      background: repeating-linear-gradient(45deg, #ff00b8, #ff00b8 5px, #fff 5px, #fff 10px);
      background-position: -900px 50%;
      background-size: 925%;
      box-shadow: inset 0 0 0 3px #ff00b8;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
              clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
      content: '';
      color: #1f00ff;
      padding: 20px 40px;
      z-index: -1;
    }
    100% {
      background: #fff;
      background-position: -900px 50%;
      background-size: 925%;
      box-shadow: inset 0 0 0 3px #1f00ff;
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
              clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
      content: 'COMPLETE!';
      color: #1f00ff;
      padding: 20px 40px;
      font-weight: 900;
      z-index: 9;
    }
  }
  #downloadBtn  .btn.loading div:before {
    -webkit-animation: plop 1.75s ease-out forwards;
            animation: plop 1.75s ease-out forwards;
  }
  @-webkit-keyframes plop {
    0% {
      -webkit-transform: translateX(0px) translateY(0px);
              transform: translateX(0px) translateY(0px);
    }
    40% {
      -webkit-transform: translateX(0px) translateY(0px);
              transform: translateX(0px) translateY(0px);
    }
    70% {
      -webkit-transform: translateX(100px) translateY(-150px);
              transform: translateX(100px) translateY(-150px);
      background: #ff00b8;
    }
    90% {
      -webkit-transform: translateX(200px) translateY(0px);
              transform: translateX(200px) translateY(0px);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(200px) translateY(0px);
              transform: translateX(200px) translateY(0px);
      opacity: 0;
    }
  }
  @keyframes plop {
    0% {
      -webkit-transform: translateX(0px) translateY(0px);
              transform: translateX(0px) translateY(0px);
    }
    40% {
      -webkit-transform: translateX(0px) translateY(0px);
              transform: translateX(0px) translateY(0px);
    }
    70% {
      -webkit-transform: translateX(100px) translateY(-150px);
              transform: translateX(100px) translateY(-150px);
      background: #ff00b8;
    }
    90% {
      -webkit-transform: translateX(200px) translateY(0px);
              transform: translateX(200px) translateY(0px);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(200px) translateY(0px);
              transform: translateX(200px) translateY(0px);
      opacity: 0;
    }
  }
  #downloadBtn  .btn.loading span {
    -webkit-animation: slide 1s ease-in-out 1 forwards;
            animation: slide 1s ease-in-out 1 forwards;
    -webkit-transition-delay: 6.75s;
            transition-delay: 6.75s;
    color: #1f00ff;
  }
  @-webkit-keyframes flick {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    10.5% {
      -webkit-transform: rotate(-15deg);
              transform: rotate(-15deg);
    }
    12% {
      -webkit-transform: rotate(15deg);
              transform: rotate(15deg);
    }
    13% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    21% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      padding-left: 60px;
      padding-right: 60px;
    }
    97.5% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      padding-left: 40px;
      padding-right: 80px;
    }
    100% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      padding-left: 40px;
      padding-right: 40px;
    }
  }
  @keyframes flick {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    10.5% {
      -webkit-transform: rotate(-15deg);
              transform: rotate(-15deg);
    }
    12% {
      -webkit-transform: rotate(15deg);
              transform: rotate(15deg);
    }
    13% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    21% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      padding-left: 60px;
      padding-right: 60px;
    }
    97.5% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      padding-left: 40px;
      padding-right: 80px;
    }
    100% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      padding-left: 40px;
      padding-right: 40px;
    }
  }
  #downloadBtn  .btn span {
    display: inline-block;
  }
  #downloadBtn  .btn span:nth-of-type(1) {
    -webkit-animation-delay: 0.0142857143s;
            animation-delay: 0.0142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(2) {
    -webkit-animation-delay: 0.0285714286s;
            animation-delay: 0.0285714286s;
  }
  #downloadBtn  .btn span:nth-of-type(3) {
    -webkit-animation-delay: 0.0428571429s;
            animation-delay: 0.0428571429s;
  }
  #downloadBtn  .btn span:nth-of-type(4) {
    -webkit-animation-delay: 0.0571428571s;
            animation-delay: 0.0571428571s;
  }
  #downloadBtn  .btn span:nth-of-type(5) {
    -webkit-animation-delay: 0.0714285714s;
            animation-delay: 0.0714285714s;
  }
  #downloadBtn  .btn span:nth-of-type(6) {
    -webkit-animation-delay: 0.0857142857s;
            animation-delay: 0.0857142857s;
  }
  #downloadBtn  .btn span:nth-of-type(7) {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
  }
  #downloadBtn  .btn span:nth-of-type(8) {
    -webkit-animation-delay: 0.1142857143s;
            animation-delay: 0.1142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(9) {
    -webkit-animation-delay: 0.1285714286s;
            animation-delay: 0.1285714286s;
  }
  #downloadBtn  .btn span:nth-of-type(10) {
    -webkit-animation-delay: 0.1428571429s;
            animation-delay: 0.1428571429s;
  }
  #downloadBtn  .btn span:nth-of-type(11) {
    -webkit-animation-delay: 0.1571428571s;
            animation-delay: 0.1571428571s;
  }
  #downloadBtn  .btn span:nth-of-type(12) {
    -webkit-animation-delay: 0.1714285714s;
            animation-delay: 0.1714285714s;
  }
  #downloadBtn  .btn span:nth-of-type(13) {
    -webkit-animation-delay: 0.1857142857s;
            animation-delay: 0.1857142857s;
  }
  #downloadBtn  .btn span:nth-of-type(14) {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
  #downloadBtn  .btn span:nth-of-type(15) {
    -webkit-animation-delay: 0.2142857143s;
            animation-delay: 0.2142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(16) {
    -webkit-animation-delay: 0.2285714286s;
            animation-delay: 0.2285714286s;
  }
  #downloadBtn  .btn span:nth-of-type(17) {
    -webkit-animation-delay: 0.2428571429s;
            animation-delay: 0.2428571429s;
  }
  #downloadBtn  .btn span:nth-of-type(18) {
    -webkit-animation-delay: 0.2571428571s;
            animation-delay: 0.2571428571s;
  }
  #downloadBtn  .btn span:nth-of-type(19) {
    -webkit-animation-delay: 0.2714285714s;
            animation-delay: 0.2714285714s;
  }
  #downloadBtn  .btn span:nth-of-type(20) {
    -webkit-animation-delay: 0.2857142857s;
            animation-delay: 0.2857142857s;
  }
  #downloadBtn  .btn span:nth-of-type(21) {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
  }
  #downloadBtn  .btn span:nth-of-type(22) {
    -webkit-animation-delay: 0.3142857143s;
            animation-delay: 0.3142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(23) {
    -webkit-animation-delay: 0.3285714286s;
            animation-delay: 0.3285714286s;
  }
  #downloadBtn  .btn span:nth-of-type(24) {
    -webkit-animation-delay: 0.3428571429s;
            animation-delay: 0.3428571429s;
  }
  #downloadBtn  .btn span:nth-of-type(25) {
    -webkit-animation-delay: 0.3571428571s;
            animation-delay: 0.3571428571s;
  }
  #downloadBtn  .btn span:nth-of-type(26) {
    -webkit-animation-delay: 0.3714285714s;
            animation-delay: 0.3714285714s;
  }
  #downloadBtn  .btn span:nth-of-type(27) {
    -webkit-animation-delay: 0.3857142857s;
            animation-delay: 0.3857142857s;
  }
  #downloadBtn  .btn span:nth-of-type(28) {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
  }
  #downloadBtn  .btn span:nth-of-type(29) {
    -webkit-animation-delay: 0.4142857143s;
            animation-delay: 0.4142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(30) {
    -webkit-animation-delay: 0.4285714286s;
            animation-delay: 0.4285714286s;
  }
  #downloadBtn  .btn span:nth-of-type(31) {
    -webkit-animation-delay: 0.4428571429s;
            animation-delay: 0.4428571429s;
  }
  #downloadBtn  .btn span:nth-of-type(32) {
    -webkit-animation-delay: 0.4571428571s;
            animation-delay: 0.4571428571s;
  }
  #downloadBtn  .btn span:nth-of-type(33) {
    -webkit-animation-delay: 0.4714285714s;
            animation-delay: 0.4714285714s;
  }
  #downloadBtn  .btn span:nth-of-type(34) {
    -webkit-animation-delay: 0.4857142857s;
            animation-delay: 0.4857142857s;
  }
  #downloadBtn  .btn span:nth-of-type(35) {
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
  }
  #downloadBtn  .btn span:nth-of-type(36) {
    -webkit-animation-delay: 0.5142857143s;
            animation-delay: 0.5142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(37) {
    -webkit-animation-delay: 0.5285714286s;
            animation-delay: 0.5285714286s;
  }
  #downloadBtn  .btn span:nth-of-type(38) {
    -webkit-animation-delay: 0.5428571429s;
            animation-delay: 0.5428571429s;
  }
  #downloadBtn  .btn span:nth-of-type(39) {
    -webkit-animation-delay: 0.5571428571s;
            animation-delay: 0.5571428571s;
  }
  #downloadBtn  .btn span:nth-of-type(40) {
    -webkit-animation-delay: 0.5714285714s;
            animation-delay: 0.5714285714s;
  }
  #downloadBtn  .btn span:nth-of-type(41) {
    -webkit-animation-delay: 0.5857142857s;
            animation-delay: 0.5857142857s;
  }
  #downloadBtn  .btn span:nth-of-type(42) {
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
  }
  #downloadBtn  .btn span:nth-of-type(43) {
    -webkit-animation-delay: 0.6142857143s;
            animation-delay: 0.6142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(44) {
    -webkit-animation-delay: 0.6285714286s;
            animation-delay: 0.6285714286s;
  }
  #downloadBtn  .btn span:nth-of-type(45) {
    -webkit-animation-delay: 0.6428571429s;
            animation-delay: 0.6428571429s;
  }
  #downloadBtn  .btn span:nth-of-type(46) {
    -webkit-animation-delay: 0.6571428571s;
            animation-delay: 0.6571428571s;
  }
  #downloadBtn  .btn span:nth-of-type(47) {
    -webkit-animation-delay: 0.6714285714s;
            animation-delay: 0.6714285714s;
  }
  #downloadBtn  .btn span:nth-of-type(48) {
    -webkit-animation-delay: 0.6857142857s;
            animation-delay: 0.6857142857s;
  }
  #downloadBtn  .btn span:nth-of-type(49) {
    -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
  }
  #downloadBtn  .btn span:nth-of-type(50) {
    -webkit-animation-delay: 0.7142857143s;
            animation-delay: 0.7142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(51) {
    -webkit-animation-delay: 0.7285714286s;
            animation-delay: 0.7285714286s;
  }
  #downloadBtn  .btn span:nth-of-type(52) {
    -webkit-animation-delay: 0.7428571429s;
            animation-delay: 0.7428571429s;
  }
  #downloadBtn  .btn span:nth-of-type(53) {
    -webkit-animation-delay: 0.7571428571s;
            animation-delay: 0.7571428571s;
  }
  #downloadBtn  .btn span:nth-of-type(54) {
    -webkit-animation-delay: 0.7714285714s;
            animation-delay: 0.7714285714s;
  }
  #downloadBtn  .btn span:nth-of-type(55) {
    -webkit-animation-delay: 0.7857142857s;
            animation-delay: 0.7857142857s;
  }
  #downloadBtn  .btn span:nth-of-type(56) {
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
  }
  #downloadBtn  .btn span:nth-of-type(57) {
    -webkit-animation-delay: 0.8142857143s;
            animation-delay: 0.8142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(58) {
    -webkit-animation-delay: 0.8285714286s;
            animation-delay: 0.8285714286s;
  }
  #downloadBtn  .btn span:nth-of-type(59) {
    -webkit-animation-delay: 0.8428571429s;
            animation-delay: 0.8428571429s;
  }
  #downloadBtn  .btn span:nth-of-type(60) {
    -webkit-animation-delay: 0.8571428571s;
            animation-delay: 0.8571428571s;
  }
  #downloadBtn  .btn span:nth-of-type(61) {
    -webkit-animation-delay: 0.8714285714s;
            animation-delay: 0.8714285714s;
  }
  #downloadBtn  .btn span:nth-of-type(62) {
    -webkit-animation-delay: 0.8857142857s;
            animation-delay: 0.8857142857s;
  }
  #downloadBtn  .btn span:nth-of-type(63) {
    -webkit-animation-delay: 0.9s;
            animation-delay: 0.9s;
  }
  #downloadBtn  .btn span:nth-of-type(64) {
    -webkit-animation-delay: 0.9142857143s;
            animation-delay: 0.9142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(65) {
    -webkit-animation-delay: 0.9285714286s;
            animation-delay: 0.9285714286s;
  }
  #downloadBtn  .btn span:nth-of-type(66) {
    -webkit-animation-delay: 0.9428571429s;
            animation-delay: 0.9428571429s;
  }
  #downloadBtn  .btn span:nth-of-type(67) {
    -webkit-animation-delay: 0.9571428571s;
            animation-delay: 0.9571428571s;
  }
  #downloadBtn  .btn span:nth-of-type(68) {
    -webkit-animation-delay: 0.9714285714s;
            animation-delay: 0.9714285714s;
  }
  #downloadBtn  .btn span:nth-of-type(69) {
    -webkit-animation-delay: 0.9857142857s;
            animation-delay: 0.9857142857s;
  }
  #downloadBtn  .btn span:nth-of-type(70) {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
  }
  #downloadBtn  .btn span:nth-of-type(71) {
    -webkit-animation-delay: 1.0142857143s;
            animation-delay: 1.0142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(72) {
    -webkit-animation-delay: 1.0285714286s;
            animation-delay: 1.0285714286s;
  }
  #downloadBtn  .btn span:nth-of-type(73) {
    -webkit-animation-delay: 1.0428571429s;
            animation-delay: 1.0428571429s;
  }
  #downloadBtn  .btn span:nth-of-type(74) {
    -webkit-animation-delay: 1.0571428571s;
            animation-delay: 1.0571428571s;
  }
  #downloadBtn  .btn span:nth-of-type(75) {
    -webkit-animation-delay: 1.0714285714s;
            animation-delay: 1.0714285714s;
  }
  #downloadBtn  .btn span:nth-of-type(76) {
    -webkit-animation-delay: 1.0857142857s;
            animation-delay: 1.0857142857s;
  }
  #downloadBtn  .btn span:nth-of-type(77) {
    -webkit-animation-delay: 1.1s;
            animation-delay: 1.1s;
  }
  #downloadBtn  .btn span:nth-of-type(78) {
    -webkit-animation-delay: 1.1142857143s;
            animation-delay: 1.1142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(79) {
    -webkit-animation-delay: 1.1285714286s;
            animation-delay: 1.1285714286s;
  }
  #downloadBtn  .btn span:nth-of-type(80) {
    -webkit-animation-delay: 1.1428571429s;
            animation-delay: 1.1428571429s;
  }
  #downloadBtn  .btn span:nth-of-type(81) {
    -webkit-animation-delay: 1.1571428571s;
            animation-delay: 1.1571428571s;
  }
  #downloadBtn  .btn span:nth-of-type(82) {
    -webkit-animation-delay: 1.1714285714s;
            animation-delay: 1.1714285714s;
  }
  #downloadBtn  .btn span:nth-of-type(83) {
    -webkit-animation-delay: 1.1857142857s;
            animation-delay: 1.1857142857s;
  }
  #downloadBtn  .btn span:nth-of-type(84) {
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
  }
  #downloadBtn  .btn span:nth-of-type(85) {
    -webkit-animation-delay: 1.2142857143s;
            animation-delay: 1.2142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(86) {
    -webkit-animation-delay: 1.2285714286s;
            animation-delay: 1.2285714286s;
  }
  #downloadBtn  .btn span:nth-of-type(87) {
    -webkit-animation-delay: 1.2428571429s;
            animation-delay: 1.2428571429s;
  }
  #downloadBtn  .btn span:nth-of-type(88) {
    -webkit-animation-delay: 1.2571428571s;
            animation-delay: 1.2571428571s;
  }
  #downloadBtn  .btn span:nth-of-type(89) {
    -webkit-animation-delay: 1.2714285714s;
            animation-delay: 1.2714285714s;
  }
  #downloadBtn  .btn span:nth-of-type(90) {
    -webkit-animation-delay: 1.2857142857s;
            animation-delay: 1.2857142857s;
  }
  #downloadBtn  .btn span:nth-of-type(91) {
    -webkit-animation-delay: 1.3s;
            animation-delay: 1.3s;
  }
  #downloadBtn  .btn span:nth-of-type(92) {
    -webkit-animation-delay: 1.3142857143s;
            animation-delay: 1.3142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(93) {
    -webkit-animation-delay: 1.3285714286s;
            animation-delay: 1.3285714286s;
  }
  #downloadBtn  .btn span:nth-of-type(94) {
    -webkit-animation-delay: 1.3428571429s;
            animation-delay: 1.3428571429s;
  }
  #downloadBtn  .btn span:nth-of-type(95) {
    -webkit-animation-delay: 1.3571428571s;
            animation-delay: 1.3571428571s;
  }
  #downloadBtn  .btn span:nth-of-type(96) {
    -webkit-animation-delay: 1.3714285714s;
            animation-delay: 1.3714285714s;
  }
  #downloadBtn  .btn span:nth-of-type(97) {
    -webkit-animation-delay: 1.3857142857s;
            animation-delay: 1.3857142857s;
  }
  #downloadBtn  .btn span:nth-of-type(98) {
    -webkit-animation-delay: 1.4s;
            animation-delay: 1.4s;
  }
  #downloadBtn  .btn span:nth-of-type(99) {
    -webkit-animation-delay: 1.4142857143s;
            animation-delay: 1.4142857143s;
  }
  #downloadBtn  .btn span:nth-of-type(100) {
    -webkit-animation-delay: 1.4285714286s;
            animation-delay: 1.4285714286s;
  }
  @-webkit-keyframes slide {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    75% {
      -webkit-transform: translateX(-20px) rotate(-5deg);
              transform: translateX(-20px) rotate(-5deg);
    }
    90% {
      -webkit-transform: translateX(2px) rotate(1deg);
              transform: translateX(2px) rotate(1deg);
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }
  @keyframes slide {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    75% {
      -webkit-transform: translateX(-20px) rotate(-5deg);
              transform: translateX(-20px) rotate(-5deg);
    }
    90% {
      -webkit-transform: translateX(2px) rotate(1deg);
              transform: translateX(2px) rotate(1deg);
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }
/* / download btn css */

/* social link btn */
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.social-links {
	display: flex;
}

.social-btn {
	cursor: pointer;
	height: 50px;
	width: 50px;
	font-family: 'Titillium Web', sans-serif;
	color: #333;
	border-radius: 10px;
	box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
	background: white;
	margin: 5px;
	transition: 1s;
}

.social-btn span {
	width: 0px;
	overflow: hidden;
	transition: 1s;
	text-align: center;
}

.social-btn:hover {
	width: 150px;
	border-radius: 5px;
}

.social-btn:hover span {
	padding: 2px;
	width: max-content;
}

#twitter svg {
	fill: #1da1f2;
}

#linkedin svg {
	fill: #0e76a8;
}

#github {
	fill: #333;
}
/* /social link btn */


/* contact */
.contact-background{
  background-color: #fff;
  margin-bottom: 6rem;
  height: 35rem;
  border-radius: 20rem;
  padding: 02rem 18rem;
  align-items: center;
  display: flex;
}
.contact-name-bg{
  margin-bottom: 0;
  background-color: #000;
  padding: 1rem 2rem;
  color: #fff;
  font-size: 16px;
  border-radius: 1.5rem;
}
.contact-reply-text{
  color: #000;
  font-size: 1.8rem;
  margin-bottom: 0;
}
.contact-getInTouch-text{
  color: #000;
  font-size: 1.4rem;
  margin-bottom: 0;
}
.contact-work-text{
  color: #000;
    font-size: 4rem;
    margin-bottom: 0;
    font-weight: 800;
}
.contact-long-text{
  color: #000;
  font-size: 2rem;
  margin-bottom: 0;
}
/* /contact */




/*  footer   */
footer {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  text-align: center;
  z-index: 999;
}

footer p {
  margin: 10px 0;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida  Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
footer .fa-heart{
  color: red;
}
footer .fa-dev{
  color: #fff;
}
footer .fa-twitter-square{
color:#1da0f1;
}
footer .fa-instagram{
color: #f0007c;
}
fotter .fa-linkedin{
color:#0073b1;
}
footer .fa-codepen{
color:#fff
}
footer a {
  color: #3c97bf;
  text-decoration: none;
margin-right:5px;
}
.youtubeBtn{
  position: fixed;
  left: 50%;
transform:translatex(-50%);
  bottom: 45px;
  cursor: pointer;
  transition: all .3s;
  vertical-align: middle;
  text-align: center;
  display: inline-block;
}
.youtubeBtn i{
 font-size:20px;
float:left;
}.youtubeBtn a{
  color:#ff0000;
  animation: youtubeAnim 1000ms linear infinite;
float:right;
}