/*about-me*/
	.main-profile-image::before {
	    position: absolute;
	    content: '';
	    width: 100%;
	    height: 200%;
	    top: -100px;
	    left: -100px;
	    background: #4c84ff;
	    transform: rotate(-30deg);
	}.main-profile-image {
	    background: #252C48;
	    padding: 30px;
	    border-radius: 10px;
	    position: relative;
	    overflow: hidden;
	    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.12);
	}
	.main-profile-image img {
	    border-radius: 10px;
	    position: relative;
	    z-index: 1;
	}
	.greeting {
	    background: #4c84ff;
	    color: #fff;
	    font-size: 16px;
	    font-weight: 600;
	    padding: 3px 10px;
	    position: relative;
	    line-height: 26px;
	}.greeting::after {
		position: absolute;
		content: '';
		bottom: -10px;
		left: 5px;
		width: 0;
		height: 0;
		border-top: 0px solid transparent;
		border-left: 10px solid #4c84ff;
		border-bottom: 10px solid transparent;
	}.name, h4 {
	    font-size: 40px;
	    font-weight: 700;
	    color: #484848;
	    margin-top: 20px;
	    margin-bottom: 0px;
	    /*text-shadow: 3px -3px 10px rgba(0, 0, 0, 0.3);*/
	    font-family: 'Josefin Sans', sans-serif;
		text-transform: uppercase;
	}
	.name span {
	    color: #4c84ff;
	}
	.header_title {
	    font-size: 20px;
	    line-height: 31px;
	    font-weight: 600;
	    color: #484848;
	}


	/*typed animation*/

	#text {
		display: inline-block;
		vertical-align: middle;
		color: #4c84ff;
		letter-spacing: 2px;
	}

	#cursor {
		display: inline-block;
		vertical-align: middle;
		width: 3px;
		height: 40px;
		background-color: #4c84ff;
		animation: blink .75s step-end infinite;
	}ul {
	    /*margin: 0;*/
	    /*padding: 0;*/
	}
	.personal_info ul li, .table ul li, .form-control {
	    border-color: #e1e1e1;
	}
	.personal_info ul li {
	    border-bottom: 1px solid;
        border-bottom-color: currentcolor;
	    border-width: 80%;
	    padding: 10px 0px;
	}
	.personal_info ul li {
	    border-bottom: 1px solid;
	    padding: 10px 0px;
	}
	.project-tech-desc ul li{
		font-size: 1rem;
	}
	ul li {
	    /*list-style-type: none;*/
	}.color_secondery {
	    color: #818181;
	}

	@keyframes blink {
		from, to { 
			background-color: transparent 
		}
		50% { 
			background-color: #4c84ff; 
		}
	}

	.utf-box-stats.with-margin {
	    margin-bottom: 20px;
	}
	.utf-box-stats {
	    padding: 30px 15px 25px 15px;
	    border-radius: 6px;
	    text-align: center;
	    background-color: #ffffff;
	    border: 1px solid rgba(0, 0, 0, 0.05);
	    box-shadow: 0 2px 10px rgba(0,0,0,.15);
	}.utf-box-stats i {
	    display: inline-block;
	    float: none;
	    width: 100%;
	    font-size: 40px;
	    margin-bottom: 15px;
	    color: #325d84;
	}

	/*service area css*/
		.service-area {
	  background: #202020;
	  padding-bottom: 160px;
	  border-top:1px solid rgba(102,102,102,.3);
	  position: relative;
	}
	.service-section .services-wrapper {
		/*text-align: center;*/
		margin-bottom: 30px;
		/*padding: 40px 20px 30px;*/
		/*background: #222;*/
		padding: 30px 15px 25px 15px;
		border-radius: 6px;
		text-align: center;
		background-color: #eeeded;
		border: 1px solid rgba(0, 0, 0, 0.05);
		box-shadow: 0 2px 10px rgba(0,0,0,.15);
		height: 500px;
	}


	.services-icon-wrapper {
	  position: relative;
	  z-index: 1;
	  width: 100px;
	  height: 100px;
	  line-height: 100px;
	  border: 1px solid #666;
	  /*font-size: 50px;*/
	  background: transparent;
	  -webkit-box-sizing: content-box;
	  -moz-box-sizing: content-box;
	  box-sizing: content-box;
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%;
	  border-radius: 50%;
	  color: #ddd;
	  margin: auto;
	}
	.service-section .services-icon-wrapper .service-dot {
	  width: 100%;
	  height: 100%;
	  left: 56%;
	  top: 8%;
	}
	.service-section .services-icon-wrapper .service-dot:nth-child(1) {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-animation: service-dot_1 2s infinite linear;
	-moz-animation: service-dot_1 2s infinite linear;
	-o-animation: service-dot_1 2s infinite linear;
	animation: service-dot_1 2s infinite linear;
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	animation-play-state: paused;
	}
	.services-icon-wrapper i {
	  position: absolute;
	  top: 0;
	  left: 50%;
	  transform: translateX(-50%);
	}
	.service-section .services-wrapper:hover .service-dot:nth-child(1) {
	-webkit-animation-play-state: running;
	-moz-animation-play-state: running;
	-o-animation-play-state: running;
	animation-play-state: running; }


	@-webkit-keyframes service-dot_1 {
	0% {
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg); }
	100% {
	  -webkit-transform: rotate(360deg);
	  transform: rotate(360deg); } }

	@-moz-keyframes service-dot_1 {
	0% {
	  -moz-transform: rotate(0deg);
	  transform: rotate(0deg); }
	100% {
	  -moz-transform: rotate(360deg);
	  transform: rotate(360deg); } }

	@-o-keyframes service-dot_1 {
	0% {
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg); }
	100% {
	  -o-transform: rotate(360deg);
	  transform: rotate(360deg); } }

	@keyframes service-dot_1 {
	0% {
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg); }
	100% {
	  -webkit-transform: rotate(360deg);
	  -moz-transform: rotate(360deg);
	  -o-transform: rotate(360deg);
	  transform: rotate(360deg); } }

	@-webkit-keyframes service-dot_2 {
	0% {
	  -webkit-transform: rotate(180deg);
	  transform: rotate(180deg); }
	100% {
	  -webkit-transform: rotate(540deg);
	  transform: rotate(540deg); } }

	@-moz-keyframes service-dot_2 {
	0% {
	  -moz-transform: rotate(180deg);
	  transform: rotate(180deg); }
	100% {
	  -moz-transform: rotate(540deg);
	  transform: rotate(540deg); } }

	@-o-keyframes service-dot_2 {
	0% {
	  -o-transform: rotate(180deg);
	  transform: rotate(180deg); }
	100% {
	  -o-transform: rotate(540deg);
	  transform: rotate(540deg); } }

	@keyframes service-dot_2 {
	0% {
	  -webkit-transform: rotate(180deg);
	  -moz-transform: rotate(180deg);
	  -o-transform: rotate(180deg);
	  transform: rotate(180deg); }
	100% {
	  -webkit-transform: rotate(540deg);
	  -moz-transform: rotate(540deg);
	  -o-transform: rotate(540deg);
	  transform: rotate(540deg); } }
	.service-section .services-icon {
	  color: #ffc600;
	  -webkit-text-fill-color: transparent;
	  -webkit-background-clip: text;
	  background-image: -webkit-linear-gradient(0deg, #ffc600 0%, #ff4200 100%);
	  background-image: -moz-linear-gradient(0deg, #ffc600 0%, #ff4200 100%);
	}

	.services-icon-wrapper i.fi {
	  position: absolute;
	  left: 30px;
	  top: 0;
	}
	.dots {
	  width: 15px;
	  height: 15px;
	  background: #666;
	  border-radius: 50%;
	  left: 15px;
	  top: 0;
	  position: relative;
	}
	.service-content h2{
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 20px;
	color: #325d84;
	margin-top: 30px;
	}

	.gallery-section {
	  padding-bottom: 100px;
	  border-top: 1px solid rgba(102,102,102,.3);
	}
	.personal_info ul {
		margin: 0;
		padding: 0;
	}
	.personal_info ul li {
	    list-style-type: none;
	}
/*about me*/

/*common & portfollio*/
			body{
			    font-family: 'Poppins', sans-serif;
			    /*font-family: 'Open Sans', sans-serif;*/
			}
			.home-section .home-subheading {
			    font-size: 3em;
			    font-weight: 300;
			    text-transform: none;
			}
			.home-heading{
				font-size: 4rem;
			}.btn{
				font-size: 1.5rem;
			}

			.mybtn {
			    margin-top: 27px;
			    display: inline-block;
			}
			.mybtn-bg {
			    background: #4c84ff;
			    border-color: #4c84ff;
			    color: #fff! important;
			}
			.mybtn {
			    padding: 8px 30px;
			    border-radius: 4px;
			    display: inline-block;
			    border: 1px solid transparent;
			        border-top-color: transparent;
			        border-right-color: transparent;
			        border-bottom-color: transparent;
			        border-left-color: transparent;
			    position: relative;
			    z-index: 3;
			    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
			    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
			    -webkit-transition: all .4s;
			    -o-transition: all .4s;
			    transition: all .4s;
			    cursor: pointer;
			    outline: none !important;
			    overflow: hidden;
			}
			.mybtn::after {
			    -webkit-transition-delay: 0s;
			    -o-transition-delay: 0s;
			    transition-delay: 0s;
			    background: #252C48;
			    opacity: 1;
			}
			.mybtn::before, .mybtn::after {
			    content: '';
			    width: 0;
			    height: 100%;
			    background: #252C48;
			    position: absolute;
			    left: 0;
			    top: 0;
			    -webkit-transition: width 0.4s;
			    -o-transition: width 0.4s;
			    transition: width 0.4s;
			        transition-delay: 0s;
			    z-index: 1;
			    opacity: .4;
			}
			.mybtn span {
			    text-transform: uppercase;
			    position: relative;
			    z-index: 6;
			    -webkit-transition-delay: 0s;
			    -o-transition-delay: 0s;
			    transition-delay: 0s;
			}
			.home-section {
			    position: unset;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 1;
				/*background: url(https://jtom.me/images/home-bg3.ef171b05.jpg) top center no-repeat #bababa;*/
				    background-size: auto;
				background-size: auto;
				background-size: cover;
				background: #2a304d;
				color: #fff;
				padding-left: 110px;
				padding-top: 130px;
				text-shadow: 1px 1px 2px rgba(0,0,0,.6);
				font-size: 12px;
				width: 100%;
				height: 100%;
			}

			.project-title{
				font-family: 'Poppins', sans-serif;
				font-size: 24px;
				line-height: 1.5;
				/*color: #3f7db3;*/
			}
			.line_double {
			    position: relative;
			    text-transform: lowercase;
			    padding: 0 50px !important;
			}
			.project-title span{
				font-size: 18px;
			    display: table;
			    font-size: 18px;
			    font-weight: 600;
			    padding-left: 35px;
			}
			.project-img{
				/*box-shadow: 0px 0px 3px -1px #080f15;*/
				/*border-radius: 8px;*/
				/*z-index: 9;*/
				/*position: inherit;*/
			}
			.project-features{
				/*bottom: 0;*/
				/*position: absolute;*/
			}
			.project-info{
				background: #eee;
				color: #333;
				border-radius: 10px;
				/*margin-left: -1rem;*/
				box-shadow: 0 7px 20px rgba(85, 85, 85, 0.16);

			}.portfolio-single, .portfolio-single .project-desc{
				font-size: 1.15rem;
			}
			.btn-primary{
				border-radius: 0; font-size: 1rem;
			}
			.color_default {
			    color: #00a1f2;
			}
			.line_double::before {
			    left: 0;
			}
			.line_double::after {
			    right: 0;
			}
			.line_double::before, .line_double::after, .line_double::before, .line_double::after, {
			    transform: translateY(-50%);
			    -webkit-transform: translateY(-50%);
			    -ms-transform: translateY(-50%);
			    -moz-transform: translateY(-50%);
			    -o-transform: translateY(-50%);
			}
			.line_double::before, .line_double::after {
			    content: "";
			    position: absolute;
			    width: 25px;
			    height: 2px;
			    top: 50%;
				background-color: #00a1f2 !important;
			}
			.project-info-main.left{
				right: -3rem;
				z-index: 9;
			}
			.project-info-main.right{
				left: -3rem;
				z-index: 9;
			}
			.srv_item_number::after {
			    content: "";
			    position: absolute;
			    right: 0;
			    bottom: 0;
			    display: block;
			    width: 80px;
			}.srv_item_number {
			    position: relative;
			    overflow: hidden;
			    text-align: right;
			    /*border-bottom: 1px dotted;*/
			}
			.srv_item_number strong {
			    font-size: 42px;
			    line-height: 42px;
			    font-weight: 700;
			    position: relative;
			    top: 20px;
			    display: inline-block;
			    transition: all .4s ease;
			    padding-right: 20px;
			}.project-card:hover .srv_item_number strong {
			    top: 0;
			}
			.width-60{
				width: 60%;
			}
			.line_double::before, .line_double::after {
			    background-color: #325d84 !important;
			}.project-title .color_default{
				color: #325d84;
			}.portfolio-main-img, .rs-img{
				box-shadow: 0 7px 20px rgba(85, 85, 85, 0.16);
				border-radius: 8px;
			}.project-title{
				font-size: 20px;
				/*color: #3f7db3;*/
			}

			/*project details css*/

			.project-title{
				color: #3f7db3;
			}.tech-tags{
				padding-left: 0;
			}
			.tech-tags li {
			    display: inline-block;
			}.tech-tags a {
			    display: inline-block;
			    color: #fff;
			    padding: 4px 10px;
			    font-size: 16px;
			    text-transform: uppercase;
			}
/*common & portfollio*/

/*sidebar*/
body{
	font-size: 15px;
	font-weight: normal;
}
.sidebar:not(.sidebar-component) .sidebar-content {
    position: fixed;
    top: 0;
    bottom: 0;
    /*width: 25%;*/
    width: inherit;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: left ease-in-out .15s,right ease-in-out .15s;
    left: auto;
}.sidebar{
	width: 25%;
	color: #fff;
	text-align: left;
	background-color: rgba(21, 98, 166, 0.8);
}
.nav-sidebar .nav-link{
	padding: .50rem 1.25rem;
}
.name-title{
	font-family: IBM plex sans;
}a, a:hover {
    color: rgba(255, 255, 255, 0.8);
}
.footer-icon-div{
	margin-top: 2.5rem;
}
.footer-icon-div ul{
	padding: .25rem 1rem;
}
.nav-sidebar a > i, .footer-icon-div a > i {
    font-size: 18px;
    background: rgba(255,255,255,.1);
    border-radius: 25px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}
.footer-icon-div .title{
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: start;
	align-items: flex-start;
	padding: .75rem 1.25rem;
	transition: background-color ease-in-out .15s,color ease-in-out .15s;
}
.nav-sidebar > .nav-item > .nav-link{
	font-weight: normal;
}
.sidebar ul li .nav-link.active::after {
    content: " ";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-right: 8px solid #eeeded;
	top: 12px;
	left: auto;
	right: 0;
}.sidebar ul li .nav-link.active::before {
    content: " ";
	display: block;
	position: absolute;
	width: 0;
	height: auto;
	border-top: 24px solid white;
	border-bottom: 15px solid white;
	border-left: 5px solid #eeeded;
	top: 0px;
	left: 0;
	right: auto;
}
.sidebar .nav-sidebar > .nav-item > .nav-link.active {
    background-color: rgba(255,255,255,.1);
}
.sidebar-expand-md.sidebar-main{
	box-shadow: none;
}
/*sidebar*/

/*contact me*/
			.single-info{
				padding: 30px 15px 25px 15px;
				border-radius: 6px;
				text-align: center;
				background-color: #ffffff;
				border: 1px solid rgba(0, 0, 0, 0.05);
				box-shadow: 0 2px 10px rgba(0,0,0,.15);
			}
			.contact-form{
				padding: 45px;
				border-radius: 6px;
				text-align: center;
				background-color: #ffffff;
				border: 1px solid rgba(0, 0, 0, 0.05);
				box-shadow: 0 2px 10px rgba(0,0,0,.15);
			}
			.single-info i{
				display: inline-block;
				float: none;
				width: 100%;
				font-size: 40px;
				/*margin-bottom: 15px;*/
				color: #325d84;
			}
			.info-icon {
			    width: 65px;
			    height: 65px;
			    font-size: 25px;
			    color: #4285F4;
			    text-align: center;
			    line-height: 65px;
			    border-radius: 50%;
			    display: inline-block;
			    margin-bottom: 25px;
			    background: rgba(66, 133, 244, 0.1);
			}
			.info-content h5{
				font-family: 'Josefin Sans', sans-serif;
				font-size: 18px;
				font-weight: 600;
				margin-bottom: 10px;text-transform: uppercase;
			}
			.contact-form-title{
				font-size: 25px;
				margin-bottom: 1rem;
			}
/*contact me*/

/*image popup*/
	.img-container {
	  /*margin: 20px;*/
	}

	.img-container img {
	   width: 100%;
	   height: auto;
	   border: 1px solid #ccc;
	   border-radius: 5px;
	   cursor: pointer;
	   -webkit-tap-highlight-color: transparent;
	   transition: .3s;
	  -webkit-transition: .3s;
	  -moz-transition: .3s;

	}
	.img-container img:hover{
	  transform: scale(0.97);
	 -webkit-transform: scale(0.97);
	 -moz-transform: scale(0.97);
	 -o-transform: scale(0.97);
	  opacity: 0.75;
	 -webkit-opacity: 0.75;
	 -moz-opacity: 0.75;
	  transition: .3s;
	 -webkit-transition: .3s;
	 -moz-transition: .3s;
	}
	.img-show img{
		/*top: 25%;*/
	}

	
/*sidebar responsive*/
@media (max-width: 860px) {
	.sidebar {
    	/*width: 100%! important;*/
	}
	.sidebar {
	    -ms-flex: 0 0 auto;
	    flex: 0 0 auto;
	    width: 18rem;
	    z-index: 1040;
	    background-color: rgba(21, 98, 166);
	}
	.sidebar:not(.sidebar-component) .sidebar-content{
		top: 3.00003rem;
	}
}



@media (max-width: 800px) {
	.project-info-main.right{
		left: auto;
	}
	.project-info-main.left{
		right: auto;
	}
	.card-header .width-60{
		width: 100%;
	}
	.project-title{
		font-size: 16px;
	}
}

/*sidebar responsive*/