@charset "utf-8";

/*
/*	Copyright (c) 2023 Marketify
/*	Author: Marketify
/*	This file is made for CURRENT TEMPLATE


01)	ERLING BASE
02) ERLING MOBILE MENU
03) ERLING HEADER
04) ERLING HERO
05) ERLING ABOUT
06) ERLING SERVICES
07) ERLING PORTFOLIO
08) ERLING EXPERIENCE
09) ERLING TESTIMONIALS
10) ERLING NEWS
11) ERLING CONTACT
12) ERLING COPYRIGHT
13) ERLING TOTOP
14) ERLING MEDIA QUERIES (FOR SMALL DEVICES)


/*---------------------------------------------------*/
/*	01) ERLING BASE
/*---------------------------------------------------*/

a{
	text-decoration: none;
}
ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
ul li{
	margin: 0px;
	padding: 0px;
}
:root{
    --font-syne: 'Syne', sans-serif;
}
html {
	overflow-x: hidden;
	padding: 0px;
	margin: 0px;	
}
body{
	font-family: var(--font-syne);
	font-size: 16px;
	line-height: 27px;
	letter-spacing: 0px;
	word-wrap: break-word;
	font-weight: 400;
	background-color: #fff;
	color: #868a9b;
	overflow-x: hidden;
}

svg{
	fill: currentcolor;
	width: 15px;
	height: 15px;
}
img.svg{
	width: 15px;
	height: 15px;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
   color: #868a9b;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #868a9b;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #868a9b;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #868a9b;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color: #868a9b;
}

::placeholder { /* Most modern browsers support this now. */
   color: #868a9b;
}

h1, h2, h3, h4, h5, h6{
	font-weight:700;
	line-height: 1.3;
	font-family: var(--font-syne);
	color: #000;
	font-variant-numeric: lining-nums proportional-nums;
}

h1 { font-size: 45px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

.erling_tm_all_wrap{
	width: 100%;
	height: auto;
	clear: both;
	position: relative;
}
.erling_tm_all_wrap,
.erling_tm_all_wrap *{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.clearfix:after,
.clearfix:before{
	clear: both;
	display: table;
	content: '';
}
.erling_tm_section{
	width: 100%;
	height:auto;
	clear: both;
}

#preloader{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    display: flex;
}
#preloader:before,
#preloader:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
    background-color: #000;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
#preloader:after{
    left: auto;
    right: 0;
}
#preloader .loader_line{
    margin: auto;
    width: 1px;
    height: 250px;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
}
.loader_line:before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 0%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #fff;
    -webkit-animation: lineheight 1000ms ease-in-out 0s forwards;
    -o-animation: lineheight 1000ms ease-in-out 0s forwards;
    animation: lineheight 1000ms ease-in-out 0s forwards;
}
.loader_line:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #999999;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-animation: lineround 1200ms linear 0s infinite;
    -o-animation: lineround 1200ms linear 0s infinite;
    animation: lineround 1200ms linear 0s infinite;
    animation-delay: 2000ms;
}

@keyframes lineheight{
    0%{
        height: 0%;
    }
    100%{
        height: 100%;
    }
}

@keyframes lineround{
    0%{
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100%{
        -webkit-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
}

/*hiding all*/
.preloaded .loader_line:after{
    opacity: 0;
}
.preloaded  .loader_line{
    opacity: 0;
    height: 100%!important;
}
.preloaded:before,
.preloaded:after{
    -webkit-animation: preloadedzero 300ms ease-in-out 500ms forwards;
    -o-animation: preloadedzero 300ms ease-in-out 500ms forwards;
    animation: preloadedzero 300ms ease-in-out 500ms forwards;
}
@keyframes preloadedzero{
    0%{
        width: 50%;
    }
    100%{
        width: 0%;
    }
}
.container{
	max-width: 1210px;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	height:auto;
	padding:0px 0px;
	position:relative;
	clear:both;
}
.erling_tm_section{
	width: 100%;
}
.erling_tm_mainpart{
	width: 100%;
	padding-left: 400px;
}

/*---------------------------------------------------*/
/*	02) ERLING MOBILE MENU
/*---------------------------------------------------*/

.erling_tm_mobile_menu{
	width: 100%;
	height: auto;
	position: fixed;
	top: 0px;
	left: 0px;
	display: none;
	z-index: 10;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.erling_tm_mobile_menu .mobile_menu_inner{
	width: 100%;
	height: auto;
	float: left;
	clear: both;
	background-color: #fff;
	border-bottom: 1px solid rgba(0,0,0,.2);
	padding: 10px 20px 10px 20px;
}
.erling_tm_mobile_menu .mobile_in{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.erling_tm_mobile_menu .mobile_in .logo img{
	max-width: 90px;
	max-height: 70px;
}
.erling_tm_mobile_menu .trigger{
	line-height: 0;
}
.erling_tm_mobile_menu .dropdown{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	background-color: #fff;
	display: none;
}
.erling_tm_mobile_menu .dropdown .dropdown_inner{
	width: 100%;
	height: auto;
	clear: both;
	float: left;
	padding: 20px;
}
.erling_tm_mobile_menu .dropdown .dropdown_inner > ul{
	margin: 0px;
	list-style-type: none;
}
.erling_tm_mobile_menu .dropdown .dropdown_inner > ul > li{
	margin: 0px;
	float: left;
	width: 100%;
}
.erling_tm_mobile_menu .dropdown .dropdown_inner > ul > li a{
	text-decoration: none;
	color: #000;
	display: inline-block;
	padding: 0px 0px;
	font-weight: 500;
}
.erling_tm_mobile_menu .hamburger-box{
	width: 30px;
}
.erling_tm_mobile_menu .hamburger{
	padding: 0px;
}

/*---------------------------------------------------*/
/*	03) ERLING SIDEBAR MENU
/*---------------------------------------------------*/

.erling_tm_sidebar_menu{
	width: 400px;
	left: 0px;
	top: 0px;
	bottom: 0px;
	position: fixed;
	background-color: #fff;
	box-shadow: 0 0 30px rgb(0 0 0 / 5%);
	display: flex;
	align-items: center;
}
.erling_tm_sidebar_menu .sidebar_inner{
	width: 100%;
	padding: 0px 70px;
}
.erling_tm_sidebar_menu .logo{
	margin-bottom: 60px;
}
.erling_tm_sidebar_menu .logo img{
	max-width: 140px;
	max-height: 100px;
}
.erling_tm_sidebar_menu .menu{
	margin-bottom: 55px;
}
.erling_tm_sidebar_menu .menu ul li{
	width: 100%;
}
.erling_tm_sidebar_menu .menu ul li a{
	display: inline-block;
	color: #000;
	padding: 5px 0px;
}
.erling_tm_sidebar_menu .copyright a{
	color: #000;
}

/*---------------------------------------------------*/
/*	03) ERLING HEADER
/*---------------------------------------------------*/

.erling_tm_header{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 10;
	background-color: #fff;
}
.erling_tm_header .header_inner{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.erling_tm_header.animate .header_inner{
	padding: 20px 30px;
}
.erling_tm_header .logo img{
	max-width: 120px;
	max-height: 70px;
}
.erling_tm_header .menu{
	display: flex;
	align-items: center;
}
.erling_tm_header .list{
	position: relative;
}
.erling_tm_header .list ul{
	margin: 0px;
	list-style-type: none;
}
.erling_tm_header .list ul li{
	margin: 0px 20px 0px 0px;
	display: inline-block;
	list-style-type: none;
	opacity: 0;
	visibility: hidden;
	position: relative;
	left: 10px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.erling_tm_header .list ul li:last-child{
	margin-right: 0px;
}
.erling_tm_header .list ul li.opened{
	opacity: 1;
	visibility: visible;
	left: 0px;
}
.erling_tm_header .list ul li a{
	text-decoration: none;
	color: #000;
	display: inline-block;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.erling_tm_header .trigger{
	line-height: 1;
	padding-left: 40px;
}
.trigger .hamburger-inner, 
.trigger .hamburger-inner:after, 
.trigger .hamburger-inner:before{
	height: 2px;
	width: 30px;
}
.trigger .hamburger{
	padding: 0px;
}

/*---------------------------------------------------*/
/*	04) ERLING HERO
/*---------------------------------------------------*/

.erling_tm_hero{
	width: 100%;
	min-height: 100vh;
	position: relative;
}

.erling_tm_hero .content{
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex;
}

.erling_tm_hero .image{
	position: relative;
	width: 450px;
	height: 450px;
}
.erling_tm_hero .image .main{
	position: absolute;	
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position:center;
	background-size: cover;
	/*animation: morph 8s ease-in-out infinite;      remove the animation*/
	border-radius: 45% 35% 70% 40% / 45% 55% 50% 60%;
	background-blend-mode: multiply;
	-webkit-box-shadow: inset 0px 0px 0px 18px rgba(213, 213, 213, 0.8);
    -moz-box-shadow: inset 0px 0px 0px 18px rgba(213, 213, 213,.8);
    box-shadow: inset 0px 0px 0px 18px rgba(213, 213, 213,.8);
}
/*
@keyframes morph {
	 0% {
		 border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	}
	 50% {
		 border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
	}
	 100% {
		 border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	}
}
*/
.erling_tm_hero .details{
	display: flex;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
}
.erling_tm_hero .text{
	padding-left: 70px;
}
.erling_tm_hero .text .stroke{
	color: transparent;
	 -webkit-text-stroke: 1px #000;
}
.erling_tm_hero .text h3{
	font-size: 130px;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	font-family: 'Archivo Black', sans-serif;
}

.erling_tm_hero .text chnh3{
	font-size: 80px;
	font-weight: 600;
	line-height: 1.1;
	color: rgb(0, 0, 0);
	font-family: KaiTi;
}

.erling_tm_hero .job{
	display: inline-block;
	background-color: #f5f5f5;
	padding: 15px 30px;
	margin-top: 30px;
}
.erling_tm_hero .job span{
	font-size: 20px;
	position: relative;
	display: inline-block;
	padding-right: 15px;
	margin-right: 10px;
}
.erling_tm_hero .job span:after{
	position: absolute;
	content: "";
	width: 6px;
	height: 6px;
	background-color: rgba(0,0,0,.15);
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 100%;
}
.erling_tm_hero .job span:last-child{
	margin: 0px;
	padding: 0px;
}
.erling_tm_hero .job span:last-child:after{
	display: none;
}

/* ---- stats.js ---- */

.count-particles{
	background: #000022;
	position: absolute;
	top: 48px;
	left: 0;
	width: 80px;
	color: #13E8E9;
	font-size: .8em;
	text-align: left;
	text-indent: 4px;
	line-height: 14px;
	padding-bottom: 2px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
  }
  
  .js-count-particles{
	font-size: 1.1em;
  }
  
  #stats,
  .count-particles{
	-webkit-user-select: none;
	margin-top: 5px;
	margin-left: 5px;
  }
  
  #stats{
	border-radius: 3px 3px 0 0;
	overflow: hidden;
  }
  
  .count-particles{
	border-radius: 0 0 3px 3px;
  }
  
  
  /* ---- particles.js container ---- */
  
  #particles-js{
	width: 100%;
	height: 100%;
	background-color: #b61924;
	background-image: url('');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
  }

/*---------------------------------------------------*/
/*	05) ERLING ABOUT
/*---------------------------------------------------*/

.erling_tm_about{
	width: 100%;
	background-color: #f7f7f7;
	padding: 80px 0px;
}
.erling_tm_about .about_inner{
	width: 100%;
	display: flex;
}
.erling_tm_about .left{
	width: 50%;
	padding-right: 50px;
}
.erling_tm_about .erling_tm_title{
	margin-bottom: 30px;
}
.erling_tm_title{
	width: 100%;
	margin-bottom: 40px;
}
.erling_tm_title h3{
	font-size: 45px;
	font-weight: 700;
}
.erling_tm_title span{
	display: inline-block;
	margin-bottom: 10px;
	text-transform: uppercase;
	position: relative;
	padding-left: 60px;
}
.erling_tm_title span:before{
	position: absolute;
	content: "";
	width: 40px;
	height: 1px;
	background-color: #868a9b;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
}
.erling_tm_about .text{
	font-size: 20px;
	width: 100%;
	margin-bottom: 40px;
	text-align: justify;
}
.erling_tm_button{
	width: 100%;
}
.erling_tm_button a{
	color: #fff;
	display: inline-block;
	background-color: #000;
	padding: 20px 50px;
	position: relative;
	border: none;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
#send_message{
	color: #fff !important;
	display: inline-block !important;
	background-color: #000 !important;
	padding: 20px 50px !important;
	position: relative !important;
	border: none !important;
	cursor: pointer;
	font-size: 16px;
	font-family: var(--font-syne);
}
.erling_tm_button a:hover{
	background-color: #666;
}
.erling_tm_about .right{
	width: 50%;
	padding-left: 50px;
}
.erling_tm_about .right .list{
	width: 100%;
}
.accordion_wrap{
	width: 100%;
}
.accordion_wrap .accordion{
	width: 100%;
	margin-bottom: 10px;
}
.accordion_wrap.ready .active .accordion_content{
	display: block;
}
.accordion_wrap .accordion_header{
	width: 100%;
	background-color: #eaeaea;
	padding: 25px 20px;
	cursor: pointer;
}
.accordion_wrap .accordion_header h3{
	font-size: 17px;
	text-transform: uppercase;
}
.accordion_wrap .accordion_content{
	width: 100%;
	padding: 20px;
	background-color: #fff;
	display: none;
}

.accordion_wrap .info_list{
	width: 100%;
}
.accordion_wrap .info_list ul li{
	width: 100%;
	margin-bottom: 14px;
}
.accordion_wrap .info_list ul li:last-child{
	margin-bottom: 0px;
}
.accordion_wrap .info_list ul li span{
	display: inline-block;
}
.accordion_wrap .info_list ul li span:first-child{
	min-width: 135px;padding-right: 20px;
}
.accordion_wrap .info_list ul li a{
	color: #000;
}
.accordion_wrap .my_skills{
	width: 100%;
}
.accordion_wrap .my_skills ul li{
	width: 100%;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
}
.accordion_wrap .my_skills .title{
	min-width: 135px;
}
.accordion_wrap .erling_progress{
	position: relative;
	width: 100%;
}
.accordion_wrap .progress_inner .background{
	background:rgba(0,0,0,.05);
	width:100%;
	min-width:100%;
	position:relative;
	height:8px;
}
.accordion_wrap .progress_inner .background .bar_in{
	height:100%;
	background:#d9d9d9;
	width:0px;
	overflow:hidden;
}
.accordion_wrap .progress_inner .background .bar{
	width:0px;
	height:100%;
}
.accordion_wrap .social{
	width: 100%;
}
.accordion_wrap .social ul{
	display: flex;
	flex-wrap: wrap;
	margin-left: -20px;
}
.accordion_wrap .social li{
	width: 50%;
	margin-bottom: 14px;
	padding-left: 20px;
}
.accordion_wrap .social li:last-child{
	margin-bottom: 0px;
}
.accordion_wrap .social li a{
	color: #000;
}
.accordion_wrap .my_map{
	width: 100%;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
}
.line_effect{
	text-decoration: none;
	color: #fff;
	display: inline-block;
	position: relative;
}
.line_effect:after{
	content: '';
    width: 0;
    height: 1px;
    position: absolute;
    left: auto;
    right: 0;
    bottom: 3px;
    transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
    background: currentColor;
}
.line_effect:hover:after{
	width:100%;
	left:0;
	right:auto;
}
.text_hover_effect{
	position: relative;
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .5s;
}
.text_hover_effect:after{
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
}
.text_hover_effect:hover{
	background-size: 100% 1px;
}

.progress_inner .background .bar.open{
	-webkit-animation: wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* Safari 4+ */
	-moz-animation:    wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* Fx 5+ */
	animation:         wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* IE 10+ */
	width:100%;	
}

@-webkit-keyframes wow {0%{ width:0%; } 100%{ width:100%; }}
@-moz-keyframes wow {0%{ width:0%; } 100%{ width:100%; }}
@keyframes wow {0%{ width:0%; } 100%{ width:100%; }}

/*---------------------------------------------------*/
/*	07) ERLING PORTFOLIO
/*---------------------------------------------------*/

.erling_tm_portfolio{
	width: 100%;
	background-color: #f7f7f7;
	padding: 143px 0px;
}
.erling_tm_portfolio .portfolio_list{
	width: 100%;
	height: auto;
	clear: both;
}
.erling_tm_portfolio .portfolio_list .list_inner{
	width: 100%;
	height: auto;
	clear: both;
	position: relative;
	overflow: hidden;
}
.erling_tm_portfolio .portfolio_list .image{
	position: relative;
	overflow: hidden;
}
.erling_tm_portfolio .portfolio_list .image img{
	position: relative;
	min-width: 100%;
	opacity: 0;
}
.erling_tm_portfolio .portfolio_list .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position:center;
	background-size: cover;
	transform: scale(1)translateZ(0);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.erling_tm_portfolio .portfolio_list .details{
	position: absolute;
	z-index: 2;
	bottom: -100px;
	left: 20px;
	background-color: #fff;
	padding: 10px 20px 10px 20px;
	box-shadow: 0px 0px 20px rgba(0,0,0,.2);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.erling_tm_portfolio .portfolio_list .details h3{
	color: #000;
	font-size: 20px;
	margin-bottom: 2px;
}
.erling_tm_portfolio .portfolio_list .list_inner:hover .details{
	bottom: 20px;
}
.erling_tm_portfolio .portfolio_list .list_inner:hover .image .main{
	transform: scale(1.1)translateZ(0);
}
.erling_tm_full_link{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 5;
}
.erling_tm_swiper_progress{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	clear: both;
	margin-top: 32px;
}
.erling_tm_swiper_progress .my_pagination_in{
	position: relative;
	display: flex;
}
.erling_tm_swiper_progress span{
	display: block;
	font-size: 16px;
	letter-spacing: 0;
	color: #000;
	height: 22px;
	line-height: 22px;
}
.erling_tm_swiper_progress .pagination_progress{
	width: 200px;
	margin: 0 20px;
	position: relative;
}
.erling_tm_swiper_progress .pagination_progress .all{
	height: 1px;
	width: 100%;
	position: absolute;
	z-index: 5;
	top: 0;
	top: 50%;
	left: 0;
	background-color: rgba(0,0,0,.2);
}
.erling_tm_swiper_progress .pagination_progress .all span{
	height: 1px;
	width: 100%;
	background-color: rgba(0,0,0,.5);
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	transform-origin: left top;
	transform: scale(0);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.erling_tm_swiper_progress .my_navigation{
	position: relative;
	left: 6px;
}
.erling_tm_swiper_progress .my_navigation ul{
	margin: 0px;
	list-style-type: none;
}
.erling_tm_swiper_progress .my_navigation ul li{
	margin: 0px 10px 0px 0px;
	display: inline-block;
}
.erling_tm_swiper_progress .my_navigation ul li:last-child{
	margin-right: 0px;
}
.erling_tm_swiper_progress .my_navigation ul li a{
	text-decoration: none;
	color: #000;
	font-size: 14px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}

/*---------------------------------------------------*/
/*	08) ERLING EXPERIENCE
/*---------------------------------------------------*/

.erling_tm_experience{
	width: 100%;
	padding: 80px 0px 30px 0px;
}
.erling_tm_experience .experience_inner{
	width: 100%;
	display: flex;
}
.erling_tm_experience .left{
	width: 50%;
	padding-right: 20px;
}
.erling_tm_experience .box{
	width: 100%;
}
.erling_tm_experience .box .title{
	width: 100%;
	padding: 25px 40px;
	background-color: #eaeaea;
	margin-bottom: 30px;
}
.erling_tm_experience .box .title h3{
	font-size: 17px;
	text-transform: uppercase;
}
.erling_tm_experience .list_wrap{
	width: 100%;
}
.erling_tm_experience .box ul{
	position: relative;
}
.erling_tm_experience .box ul li{
	width: 100%;
	margin-bottom: 10px;
}
.erling_tm_experience .box ul li:last-child{
	margin-bottom: 0px;
}
.erling_tm_experience .box ul li .list_inner{
	width: 100%;
	position: relative;
	display: flex;
	justify-content: space-between;
	background-color: #f7f7f7;
	padding: 40px 35px 35px 35px;
	border-left: 5px solid rgba(0,0,0,.1);
}
.erling_tm_experience .box .time{
	display: inline-block;
}
.erling_tm_experience .box .time span{
	display: inline-block;
	background-color: #fff;
	padding: 10px 20px;
}
.erling_tm_experience .box .occ{
	padding-right: 20px;
}
.erling_tm_experience .box .occ h3{
	font-size: 17px;
	margin-bottom: 2px;
}
.erling_tm_experience .right{
	width: 50%;
	padding-left: 20px;
}

/*---------------------------------------------------*/
/*	11) ERLING CONTACT
/*---------------------------------------------------*/

.erling_tm_contact{
	width: 100%;
	padding: 80px 0px 30px 0px;
	background-color: #ffffff; /*white: eaeaea  grey:f7f7f7*/
}
.erling_tm_contact .contact_inner{
	width: 100%;
}
.erling_tm_contact .form_wrapper{
	width: 100%;
}
.erling_tm_contact .form_wrapper ul{
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
}
.erling_tm_contact .form_wrapper ul li{
	width: 50%;
	padding-left: 10px;
	margin-bottom: 10px;
}
.erling_tm_contact .form_wrapper ul li input,
.erling_tm_contact .form_wrapper ul li select{
	width: 100%;
	height: 50px;
	padding: 5px 20px;
	background-color: #eaeaea;
	font-family: var(--font-syne);
	font-size: 16px;
}
.erling_tm_contact .form_wrapper ul li input:focus,
.erling_tm_contact .form_wrapper ul li select:focus,
.erling_tm_contact .form_wrapper textarea:focus,
.erling_tm_contact .enter_code input:focus{
	outline: none;
}
.erling_tm_contact .form_wrapper textarea{
	padding: 20px;
	height: 120px;
	background-color: #eaeaea;
	resize: none;
	font-family: var(--font-syne);
	font-size: 16px;
}
.erling_tm_contact #enter_code{
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 30px;
	margin-top: 2px;
}
.erling_tm_contact #enter_code span{
	display: inline-block;
	height: 50px;
	line-height: 50px;
	color: #fff;
	background-color: #000;
	padding: 0px 30px;
}
.erling_tm_contact #enter_code input{
	display: inline-block;
	height: 50px;
	line-height: 50px;
	background-color: #eaeaea;
	padding: 0px 20px;
	font-family: var(--font-syne);
	font-size: 16px;
}
.erling_tm_contact input::-webkit-outer-spin-button,
.erling_tm_contact input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
.erling_tm_contact input[type=number] {
  -moz-appearance: textfield;
}

.error_box{
	width: 100%;
	background-color: #fce3e3;
	padding: 20px 10px;
	text-align: center;
	margin-bottom: 10px;
	display: none;
}
.error_box p{
	color: #721c24;
}
.success_box{
	width: 100%;
	display: none;
	background-color: #0ac083;
	padding: 20px 10px;
	text-align: center;
	margin-bottom: 10px;
}
.success_box p{
	color: #fff;
}
.error .cf-form-control {
	border-bottom: 2px solid red;
}
.error select {
	border-bottom: 2px solid red;
}
.success .cf-form-control {
	border-bottom: 2px solid green;
}
.success select {
	border-bottom: 2px solid green;
}
#text-area-w {
	width: 100%;
}

/*---------------------------------------------------*/
/*	12) ERLING COPYRIGHT
/*---------------------------------------------------*/

.erling_tm_copyright{
	background: var(--dark-color);
	padding: 50px 0px 30px 0px;
	background-color: #eaeaea;/*white: eaeaea  grey:f7f7f7*/
}
.erling_tm_copyright .inner{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/* New Footer*/
.erling_tm_copyright .footer-container{
	width: 100%;
	display: flex;
	
	justify-content: space-between;
}

.erling_tm_copyright ul{
	list-style: none;
  }

.erling_tm_copyright img{
	width: 150px;
  }

.erling_tm_copyright p{
	font-family: 'Lato', sans-serif;
	line-height: 1.5;
	color: black;
	margin: 0.5rem 0;
  }

.erling_tm_copyright h3{
	font-family: 'Archivo Black', sans-serif;
	font-size: 20px;
	margin-bottom: .75rem;
	line-height: 1.3;
}

.erling_tm_copyright  .list li{
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: #555 dotted 1px;
	width: 90%;
}

.erling_tm_copyright .footer-container{
	display: grid;
	/*grid-template-columns: repeat(4, 1fr);*/
	grid-template-columns: 0.8fr 0.5fr 1fr 1fr;
	grid-gap: 10px; /*1rem*/
}

.erling_tm_copyright .footer-container .footer_items{
	background-color: transparent; /* 背景颜色 */
	border: none; /* 边框 */
}

.erling_tm_copyright .footer-container > *:last-child{
	background: white;
	grid-column: 1 / span 4;
	padding: 0.5rem;
	text-align: center;
	font-size: 0.8rem;
}

.erling_tm_copyright .footer-container input[type='email']{
	width: 90%;
	padding: 0.5rem;
	margin-bottom: 0.5rem;
}
.erling_tm_copyright .footer-container input[type='submit']{
	width: 90%;
}

.erling_tm_copyright .footer-container .contact-container {
	display: grid;
	grid-template-columns: 1fr 5fr; /* 两列，每列占用可用空间的等份 */
	gap: 10px; /* 行列间隙 */
  }
  
  .erling_tm_copyright .footer-container .contact-item {
	background-color: transparent; /* 背景颜色 */
	border: none; /* 边框 */
	text-align: left; /* 文本居中 */
  }
/* New Footer*/


/*---------------------------------------------------*/
/*	13) ERLING TOTOP
/*---------------------------------------------------*/

.progressbar{
    position: fixed;
	height: 100px;
    width: 1px;
	bottom: 25px;
    right: -25px;
    background-color: rgba(0,0,0,.08);
    z-index: 10;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.progressbar.animate{
	right: 25px;
}
.progressbar .line {
	position: absolute;
    width: 1px;
	height: auto;
    background-color: rgba(0,0,0,.4);
}

.progressbar .text{
	position: absolute;
    bottom: 100px;
    left: 0px;
    font-size: 13px;
    transform: rotateZ(90deg);
    text-transform: uppercase;
    transform-origin: left;
    white-space: nowrap;
}
.progressbar a{
	text-decoration: none;
	color: #000;
}

#cal-heatmap-2023, #cal-heatmap-2024 {
	width: fit-content;
	margin: 20px;
}

/*---------------------------------------------------*/
/*	14) ERLING MEDIA QUERIES (FOR SMALL DEVICES)
/*---------------------------------------------------*/

@media (max-width: 1600px) {
	.container{max-width: 968px;}
	.erling_tm_sidebar_menu{width: 300px;}
	.erling_tm_mainpart{padding-left: 300px;}
	.erling_tm_sidebar_menu .sidebar_inner{padding: 0px 30px;}
	.erling_tm_sidebar_menu .menu ul li a{padding: 2px 0px;}
	.erling_tm_hero .image{width: 350px;height: 350px;}
	.erling_tm_hero .text h3{font-size: 85px;}
	.erling_tm_hero .job{margin-top: 20px}
	.erling_tm_title h3{font-size: 35px;}
	.erling_tm_service .service_list .title{font-size: 18px;}
	.erling_tm_service .service_list .list_inner{padding: 65px 45px;}
	.erling_tm_news .news_list ul li .title h3{font-size: 18px;}
	.erling_tm_portfolio .portfolio_list .details h3{font-size: 18px;}
	.erling_tm_experience .box .occ h3{font-size: 16px;}
}
@media (max-width: 1040px) {
	.container{padding: 0px 55px;}
	.erling_tm_header{display: none;}
	.erling_tm_sidebar_menu{display: none;}
	.erling_tm_mobile_menu{display: block;}
	.erling_tm_mainpart{padding-left: 0px;}
	.erling_tm_hero .content{margin-top: auto;}/*本来没有*/
	/*.erling_tm_hero .details{flex-direction: column;}*/
	.erling_tm_hero .image{width: 300px;height: 300px;}
	.erling_tm_hero .text{padding-left: auto;}
	.erling_tm_hero .text h3{font-size: 60px;}
	.erling_tm_hero .job{font-size: 10px 25px;}
	.erling_tm_about .about_inner{flex-direction: column;}
	.erling_tm_about .left{width: 100%;padding-right: 0px;margin-bottom: 40px;}
	.erling_tm_about .right{width: 100%;padding-left: 0px;}
	.erling_tm_title{margin-bottom: 10px;margin-top: -20px;}
	.erling_tm_title h3{font-size: 25px;}
	.erling_tm_title span{font-size: 15px;}
	.erling_tm_title span:before{width: 30px;}
	.erling_tm_title span{padding-left: 45px;}
	.accordion_wrap .accordion_header h3{font-size: 16px;}
	.erling_tm_experience .box .title h3{font-size: 16px;}
	.erling_tm_testimonials .short h3{font-size: 16px;}
	.erling_tm_service .service_list > ul > li{width: 50%;}
	.erling_tm_service .service_list .title{font-size: 20px;}
	.erling_tm_service .service_list .list_inner .svg{width: 53px;height: 53px;}
	.erling_tm_swiper_progress .pagination_progress{width: 100px;}
	.erling_tm_experience .experience_inner{flex-direction: column;}
	.erling_tm_experience .left{width: 100%;padding-right: 0px;margin-bottom: 30px;}
	.erling_tm_experience .right{width: 100%;padding-left: 0px;}
	.erling_tm_experience .box .occ h3{font-size: 16px;}
	.erling_tm_news .news_list ul li{width: 50%;}
	.progressbar.animate{
		right: 18px;
	}
}
@media (max-width: 768px) {
	.container{padding: 0px 35px;}
	.erling_tm_about .text{margin-bottom: 0px; font-size: 18px;}
	.erling_tm_hero .content{height: auto;}    /*调一个模块大小的*/
	.erling_tm_hero .details{flex-direction: column;}
	.erling_tm_hero .image{width: 300px;height: 300px; margin-top: 70px;}
	.erling_tm_hero .text{padding-left: 0px; text-align: center; margin-top: 10px;}
	.erling_tm_hero .text h3{font-size: 40px;}
	.erling_tm_hero .text chnh3{font-size: 40px; font-family: KaiTi;}
	.erling_tm_hero .job{font-size: 25px; margin-top: 10px; margin-bottom: 10px; padding: auto;}
	.erling_tm_hero .job span {font-size: 18px; margin-top: 10px; margin-bottom: 10px; white-space:nowrap;}	
	.erling_tm_service .service_list > ul{margin: 0px;}
	.erling_tm_service .service_list > ul > li{width: 100%;padding-left: 0px;}
	.erling_tm_news .news_list ul{margin: 0px;}
	.erling_tm_news .news_list ul li{width: 100%;padding-left: 0px;}
	.erling_tm_contact .form_wrapper ul{margin: 0px;}
	.erling_tm_contact .form_wrapper ul li{width: 100%;padding-left: 0px;}
	.erling_tm_contact .enter_code input{width: 100%;}
	.accordion_wrap .info_list ul li span:first-child{min-width: auto;}
	.erling_tm_copyright .inner{flex-direction: column;}
	.erling_tm_copyright .logo{margin-bottom: 15px;}
	.erling_tm_copyright .logo img{max-width: 110px;max-height: 70px;}
	.erling_tm_service .service_list .list_inner{padding: 60px 30px;}
	.erling_tm_experience .box ul li .list_inner{padding: 40px 35px 35px 35px;}
	.accordion_wrap .accordion_header{padding: 20px 20px;}
	.accordion_wrap .accordion_content{padding: 20px;}
	.erling_tm_testimonials .short{padding: 25px 30px;}
	.erling_tm_testimonials .desc{padding: 40px 30px 60px 30px}
	.erling_tm_experience .box .title{padding: 25px 30px;}
	.erling_tm_experience .box ul li .list_inner{padding: 40px 30px 35px 30px;}
	
	.erling_tm_copyright .footer-container{grid-template-columns: 1fr;}
	.erling_tm_copyright .footer-container > *:last-child{grid-column: 1;}
	.erling_tm_copyright .footer-container > *:first-child,
	.erling_tm_copyright .footer-container > *:nth-child(2){
		border-bottom: #444 dotted 1px;
		padding-bottom: 1rem;
	}
	.progressbar.animate{
		right: 18px;
	}
}


/*
1.调整平板的大小：
	.erling_tm_hero .content{margin-top: auto;}  hero居中
	.erling_tm_hero .text{padding-left: auto;}	照片和名字间隔
	删掉：.erling_tm_hero .details{flex-direction: column;}
	.container{padding: 0px 55px;}	整体两边边距
	.progressbar.animate{right: 18px;}	滑块位置

*/