/* lg */ 
@media (min-width: 1450px) {
	
	.tr-canvas {
		top: 100px;
		left: 200px;
		width: 730px;
	}
	.pp-section .tr-canvas {
		top: 180px;
	}
	.banner-content,
	.tr-page-content.tr-middle {
		height: 950px;
	}
	.banner-thumb {
		border-radius: 100%;
		overflow: hidden;
	}
	.banner-2 .banner-thumb {
		top: 200px;
	}
}

/* md */
@media (min-width: 1200px) and (max-width: 1350px) { 

	.container {
	    max-width: 1040px;
	}	

}

/* md */
@media (min-width: 1000px) and (max-width: 1100px) { 

	.container {
	    max-width: 880px;
	}

}


/* md */
@media (min-width: 992px) and (max-width: 1199px) {
	
	.entry-header iframe {
		min-height: 237px;
	}
	#pp-nav.right {
		right: 15px;
	}
	.tr-canvas.canvas-3 {
		height: 600px;
	}	
	.banner-thumb,
	.pp-section .banner-thumb {
		top: inherit;
		margin-top: -45px;
	}	
	.tr-canvas {
		width: 650px;
		height: 650px;
		left: 0;
	}
	.banner-thumb {
		border-radius: 100%;
		overflow: hidden;
	}	


	.page-layout .col-md-6 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;		
	}
	.page-layout .banner-thumb {
		position: static;
		width: 65%;
		max-width: 65%;
		margin-bottom: 50px;
		margin-top: 0;
	}	
	.page-layout .offset-md-6 {
		margin-left: 0;
	}
	.page-layout .container {
		max-width: 860px;
	}
	.page-layout .tr-canvas {
		width: 750px;
		height: 750px;
		left: 35px;
	}
	.page-layout .tr-page-content.tr-middle,
	.page-layout .banner-content {
		height: 1190px;
	}
	.page-layout .tr-menu.sticky-menu .main-drop-menu .tr-nav > li > a, 
	.page-layout .main-drop-menu .tr-nav>li>a {
		padding: 15px 10px;
	}
	.tr-address,
	.tr-author-info, 
	.experience-content {
		margin-top: 30px;
	}	
}


/* md */
@media (min-width: 1000px) and (max-width: 1199px) {
	
	.tr-social {
		left: 25px;
	}
	.tr-menu .tr-nav.nav-2 li a span {
		display: none;
	}
	.tr-menu .tr-nav.nav-2 {
		right: 25px;
	}	
}

/* md */
@media (max-width: 999px) {

	.tr-menu {
		position: fixed;
	}
	.tr-menu .tr-nav {
		margin-right: 0;
	}
	.tr-menu .main-drop-menu  {
		width: 100%;
		text-align: left;
		position: static;
		height: 0;
	}
	.tr-menu.menu-open .main-drop-menu {
		height: 100%;
	}
	.main-drop-menu li {
		display: block;
	}
	.main-drop-menu .tr-nav li a,
	.tr-menu.sticky-menu .main-drop-menu .tr-nav > li > a {
		color: #fff;
		padding: 10px 20px;
		line-height: 25px;
		border-top: 1px solid #fff;
		margin-top: 0;
	}
	.main-drop-menu .tr-nav li a:hover, .main-drop-menu .tr-nav li.active>a:hover, 
	.tr-menu.sticky-menu .main-drop-menu .tr-nav > li.active > a:hover, 
	.tr-menu.sticky-menu .main-drop-menu .tr-nav > li > a:hover {
		color: #fff;
	}
	.main-drop-menu .tr-nav .tr-dropdown-menu li a {
		font-size: 14px;
		padding-left: 30px;
		margin-top: 0;
		padding-top: 12px;
		padding-bottom: 12px;
	}
	.main-drop-menu .tr-nav .tr-dropdown-menu .tr-dropdown-menu li a {
		padding-left: 40px;
	}
	.close-menu {
		top: 25px;
	}
	.tr-menu.menu-style-1 .close-menu, 
	.tr-menu.menu-style-1 .tr-toggle-menu {
		display: block;
	}
	.tr-menu.menu-style-1 .main-drop-menu {
		visibility: hidden;
		opacity: 0;
	}
	.tr-menu.menu-style-1.menu-open .main-drop-menu {
		visibility: visible;
		opacity: 1;
	}
	.tr-social,
	.tr-menu .tr-nav.nav-2 {
		display: none;
	}
	.tr-menu .tr-social {
		display: block;
		position: static;
		padding:8px 10px;
		border-top: 1px solid #fff;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);		
	}
	.tr-menu .tr-social li {
		display: inline-block;
		margin-bottom: 0;
	}
	.tr-dropdown i {
	    top: 0;
	    right: 0;
	    width: 45px;
	    margin-top: 0;
	    height: 45px;
	    line-height: 45px;
	    display: block;
	}
	.tr-dropdown-menu .tr-dropdown i {
		height: 37px;
		line-height: 37px;
	}
	.tr-menu .tr-dropdown-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		display: none;
		padding: 0;
		-webkit-transform: rotateX(0deg); 
		-moz-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		-o-transform: rotateX(0deg);
		transform: rotateX(0deg);
		-webkit-box-shadow:none ;
		-moz-box-shadow:none ;
		-ms-box-shadow:none ;
		-o-box-shadow:none ;
		box-shadow:none ;
		-webkit-transition: inherit !important;
		-moz-transition: inherit !important;
		-ms-transition: inherit !important;
		-o-transition: inherit !important;
		transition: inherit !important;
		margin-left: 0;
	}
	.tr-social li a span,
	.tr-menu .tr-nav.nav-2 li a span {
		display: none;
	}
	.tr-menu .button {
		position: absolute;
		right: 40px;
	}
	.menu-width-button .tr-toggle-menu {
		right: 0;
	}
	.menu-width-button .close-menu {
		right: 3px;
	}
	.tr-menu.menu-width-button .tr-nav {
		margin-right: 0;
	}
	.tr-social li a {
		color: #fff;
		background-color: transparent;
	}
	.tr-menu.sticky-menu .tr-nav li {
		float: none;
	}
	.tr-menu.sticky-menu .main-drop-menu .tr-nav>li.current>a, 
	.tr-menu.sticky-menu .main-drop-menu .tr-nav>li>a:hover {
		color: #fff;
	}
	.tr-menu.sticky-menu .tr-social {
		margin-bottom: 20px;
	}

	.tr-sticky {
	    -ms-flex: 0 0 100%;
	    flex: 0 0 100%;
	    max-width: 100%;
	}
	.tr-side-menu .tr-toggle-menu,
	.tr-side-menu.menu-open .close-menu {
		display: block;
	}
	.tr-menu.tr-side-menu .main-drop-menu {
		visibility: hidden;
		opacity: 0;
	}
	.tr-menu.tr-side-menu.menu-open .main-drop-menu {
		visibility: visible;
		opacity: 1;
	}
	.tr-menu.tr-side-menu .navbar-brand {
		display: block;
	}
	.tr-introduction {
		margin-bottom: 0;
		border-bottom: 0;
		padding: 15px 0 40px;
	}
	.tr-menu.tr-side-menu .tr-nav {
		padding-bottom: 0;
		border-bottom: 0;
	}
	.tr-menu.tr-side-menu .tr-social {
		margin-top: 0;
	}

}

@media (max-width: 991px) {
	 	
	.tr-language-skill li {
		margin-right: 15px;
	}
	.experience {
		font-size: 16px;
	}
	.experience-thumb {
		margin-right: 15px;
	}	
	.experience h3 {
		font-size: 20px;
	}
	.featured-portfolio {
		margin-top: 40px;
		margin-bottom: 50px;
	}
	.featured-post {
		margin-top: 50px;
		margin-bottom: 70px;
	}
	.entry-title {
		font-size: 22px;
	}
	.tr-canvas,
	.tr-canvas.canvas-3 {
		width: 500px;
		height: 500px;
		top: 120px;
	}
	.blog-details blockquote {
		padding: 15px 50px;
	}
	.blog-details blockquote::after {
	    border-left: 30px solid #1232f2;
	    border-bottom: 30px solid #fff;
	}	
	.blog-details blockquote::before {
		font-size: 26px;
		left: 15px;
	}
	.blog-details .entry-footer .tagcloud,
	.blog-details .blog-social {
		float: none;
	}
	.blog-details .blog-social {
		margin-top: 15px;
	}
	.comment-list .children {
		margin-left: 0;
	}
	.widget-portfolio {
		margin-left: 0;
	}
	.tr-address h3 {
		font-size: 20px;
	}
	#pp-nav.right {
		right: 15px;
	}
	.tr-section-headding {
		padding-right: 0;
	}	
	.tr-canvas.canvas-animetion {
		width: 500px;
		height: 500px;
	}
	.banner-thumb {
		border-radius: 100%;
		overflow: hidden;
	}
	.banner-2 .banner-thumb {
		border-radius: 0;
	}
	.present-experience .experience-thumb {
	    min-width: 130px;
	}
	.section-title {
		font-size: 30px;
	}
	.banner-content .section-title {
		font-size: 36px;
	}
	.page-layout .tr-banner .tr-canvas {
		display: none;
	}
	
}

/* sm */
@media (min-width: 768px) and (max-width: 991px) {
	
	.entry-header iframe {
		min-height: 175px;
	}	
	.banner-thumb,
	.pp-section .banner-thumb {
		top: inherit;
		margin-top: -30px;
		padding-right: 0;
	}
	.tr-canvas.canvas-animetion {
		top: 150px;
		left: 0;
	}			
	.pp-section .tr-canvas {
		top: 220px;
	}
	.banner-content {
		height: 720px;
	}

	.page-layout .col-md-6 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;		
	}
	.page-layout .banner-thumb {
		position: static;
		width: 500px;
		height: 500px;
		margin-left: 15px;
		margin-bottom: 40px;
		display: block;
		flex: inherit;		
	}
	.page-layout .offset-md-6 {
		margin-left: 0;
	}
	.page-layout .tr-page-content.tr-middle,
	.page-layout .banner-content {
		height: 1190px;
	}

	.tr-address,
	.tr-author-info, 
	.experience-content {
		margin-top: 30px;
	}	
}

/* xs */
@media (max-width: 767px) {
	
	.section-content {
		padding: 80px 0 60px;
	}
	.tr-author-info,
	.experience-content,
	.tr-contact-form {
		margin-top: 50px;
	}
	.tr-address {
		margin-top: 30px;
	}
	.tr-achievement ul li {
		margin-right: 20px;
		font-size: 14px;
		margin-top: 30px;
	}
	.tr-achievement {
		margin-top: 15px;
	}
	.tr-achievement h3 {
		font-size: 36px;
	}
	.sub-title {
		font-size: 16px;
	}
	.tr-language-skill li {
		margin-top: 30px;
	}
	.tr-language-skill .percent {
	    width: 90px;
	    height: 90px;
	    line-height: 90px;
	    font-size: 24px;
	}	
	.footer-top {
	    padding: 70px 0 60px;
	}
	.sub-title {
		margin-bottom: 20px;
	}
	.featured-post {
	    margin-top: 30px;
	    margin-bottom: 45px;
	}
	#portfolio-menu {
		margin-bottom: 35px;
	}
	.featured-portfolio {
		margin-bottom: 30px;
	}
	.tr-author-info, 
	.experience-content{
		margin-top: 30px;
	}
	.tr-language-skill	{
		margin-top: 0;
	}
	.skill-progress {
	    margin-bottom: 25px;
	}
	.tr-text span.author-title {
		margin-top: 0;
	}
	.tr-author-info ul li {
		margin-bottom: 15px;
	}
	.btn.btn-primary {
		padding: 10px 30px;
		font-weight: normal;
	}
	.tr-menu {
		top: 0px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.banner-content .section-title {
		font-size: 28px;
		margin-bottom: 8px
	}
	.tr-previuos-next {
		margin-bottom: 25px;
	}
	.tr-comments-area h3.title, 
	.tr-comment-form h3.title {
		margin-bottom: 30px;
	}
	.tr-comment-form,
	.tr-sidebar {
		margin-top: 30px;
	}
	.tr-comment-form .btn.btn-primary {
		margin-top: 20px;
	}
	.blog-details .entry-title {
		font-size: 28px;
	}
	.tr-page-content {
	    padding-top: 150px;
	}
	.tr-menu .navbar-brand {
		max-width: 100px;
		padding: 15px 0;
	}	
	.footer-widget h3 {
		margin-bottom: 15px;
	}
	.portfolio-details h2 {
		margin: 30px 0;
		font-size: 26px;
	}	
	.related-portfolio {
		margin-top: 30px;
	}
	.related-portfolio .section-title {
		font-size: 26px;
	}
	.portfolio .read-more {
		font-size: 14px;
	}
	.portfolio h3 {
		font-size: 20px;
		margin-top: 10px;
	}
	.widget-portfolio ul li {
		padding: 10px 0;
	}	
	.experience {
		margin-bottom: 20px;
	}
	.banner-content .btn.btn-primary {
		margin-top: 25px;
	}
	.tr-canvas {
		height: 460px;
		width: 500px;
		left: 0;
	}
	.pp-section {
		padding-top: 150px;
	}
	.pp-section .banner-content {
		padding-top: 0;
	}
	.tr-footer .footer-widget {
		margin-bottom: 25px;
	}
	.present-experience {
		margin-top: 30px;
	}
	.present-experience .experience-text {
		margin-top: 0;
	}
	.portfolio-fluid.featured-portfolio .portfolio-thumb {
		max-height: 350px;
	}
	.banner-content {
		height: inherit;
		padding: 120px 0 100px;
	}
	.tr-canvas {
		top: 80px;
	}
	.tr-canvas.canvas-1 {
		top: 80px;
		left: 20px;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);		
	}
	.page-layout .banner-thumb,
	.banner-thumb {
		height: 400px;
		width: 400px;
		position: static;
		margin-bottom: 40px;
		margin-left: 15px;
	}	
	.tr-banner .tr-canvas {
		display: none;
	}

}

/* XS Portrait */
@media (max-width: 575px) { 

	.tr-language-skill .percent{
		width: 70px;
		height: 70px;
		line-height: 70px;
		font-size: 22px;
	}
	.experience {
		margin-bottom: 20px;
	}
	.tr-canvas,
	.tr-canvas.canvas-3,
	.tr-canvas.canvas-4 {
	    width: 420px;
	    height: 430px;
	    top: 70px;
	}
	.tr-canvas.canvas-3 {
		top: 100px;
	}
	.featured-portfolio .portfolio-text {
		bottom: 10px;
		padding: 20px;
	}
	.featured-portfolio .portfolio h3 {
		margin: 10px 0;
	}
	.tr-frame::before, 
	.tr-frame::after {
		width: 10px;
	}
	.tr-frame .frame-top, 
	.tr-frame .frame-bottom {
		height: 10px;
	}
	body {
		padding: 10px;
	}
	.blog-details .entry-title {
		font-size: 24px;
	}
	.blog-details .entry-content {
		padding: 30px 15px;
	}
	.tr-replay {
		float: none;
		display: block;
	}
	.comment-box .comment-meta span.title {
		float: none !important;
	}
	.tr-comments-area h3.title, 
	.tr-comment-form h3.title {
		font-size: 22px;
	}
	.pagination {
		margin-top: 25px;
	}
	.featured-post {
	    margin-top: 15px;
	    margin-bottom: 30px;
	}	
	.portfolio-details h2,
	.related-portfolio .section-title {
		font-size: 24px;
	}
	.tr-achievement {
		margin-top: 20px;
	}
	#portfolio-menu li {
		margin-right: 5px;
	}	
	.pp-section {
		padding-left: 10px;
		padding-right: 10px;
	}
	.pp-section {
		padding-top: 120px;
	}
	.tr-address .icon {
		font-size: 24px;
	}
	.tr-canvas.canvas-animetion {
		width: 400px;
		height: 400px;
	}	
	.present-experience .experience-thumb {
	    min-width: 100px;
	}	
	.pagination li a, .pagination li span {
		width: 35px;
		height: 35px;
		line-height: 35px;
	}
	.banner-content {
	    padding: 100px 0 70px;
	}
	.section-content {
	    padding: 50px 0 40px;
	}
	.footer-top {
	    padding: 60px 0 40px;
	}	
	.tr-canvas.canvas-2 {
		top: 100px;
	}
	.container-fluid .container {
		padding-left: 0;
		padding-right: 0;
	}			
}

/* XS Portrait */
@media (max-width: 475px) {
	
	.experience-text {
		margin-top: 0;
	}
	.tr-previuos-next li,
	.tr-previuos-next .next{
		float: none;
		width: 100%;
		text-align: left;
	}
	.tr-previuos-next li.text-center {
		margin: 10px 0;
	}
	.comment-list > li {
	    padding: 30px 20px 15px;
	}	
	.commenter-avatar {
		margin-right: 10px;
	}
	.blog-details .tr-post p {
		margin-bottom: 1rem;
	}
	.tr-page-content {
		padding-top: 130px;
	}
	.widget-portfolio ul li h4 {
		min-width: initial;
	}
	.section-title {
		font-size: 24px;
	}
	.tr-language-skill li,
	.tr-achievement ul li {
		width: 50%;
		margin-right: 0;
	}
	.featured-post .tr-post .entry-title {
		margin-bottom: 15px;
		padding-bottom: 20px;
	}
	.tr-form .btn.btn-primary {
		margin-top: 0;
	}
	#pp-nav.right {
		right: 10px;
	}
	.tr-menu {
		top: 0px;
	}
	.tr-menu .button {
		top: 3px;
	}
	.tr-menu .btn.btn-primary {
		padding: 5px 15px;
		font-size: 14px;
	}
	.tr-canvas,
	.tr-canvas.canvas-3,
	.tr-canvas.canvas-4 {
		width: 350px;
		height: 350px;
		top: 75px;
	}
	.tr-canvas.canvas-animetion {
		width: 300px;
		height: 300px;
	}		
	.tr-canvas.canvas-1 {
		left: 0;
	}
	.tr-canvas.canvas-3 {
		top: 100px;
	}
	.page-layout .banner-thumb, 
	.banner-thumb {
		width: 270px;
		height: 270px;
		margin-bottom: 30px;
	}
}

@media (max-width: 380px) {
	.tr-canvas,
	.tr-canvas.canvas-3,
	.tr-canvas.canvas-4 {
		width: 290px;
		height: 330px;
		top: 90px;
		border-radius: 100%;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

}
@media (max-width: 999px){
.tr-nav li.active>a{
 color:#fff !important;
}
span.hashatg{
 padding: 2px 5px 2px 5px;
 font-size: 1em;
}
}