/* CSS Document */

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

@media (max-width: 379px) {
	
	/* Content Area */
	.wr_home_intro{
		min-height:160px;
	}
	.main_content{
		padding-top:20px;
	}
	.intro_texts .gray_text{
		font:bold 18px/12px "Poppins", Arial, Helvetica, sans-serif ;
	}
	.intro_texts .green_text{
		font: bold 46px/30px B"Poppins", Arial, Helvetica, sans-serif;
	}
	.intro_shadow img{
		width:100%;
	}
 	@-webkit-keyframes shadow-scaling {
		0%   {transform:scale(1);top:90px; opacity:1; }
		50%  {transform:scale(.5); top:105px; opacity:0.7;}
		100% {transform:scale(1); top:90px; opacity:1;}
	}
	@keyframes shadow-scaling {
		0%   {transform:scale(1);top:90px; opacity:1; }
		50%  {transform:scale(.5); top:105px; opacity:0.7;}
		100% {transform:scale(1); top:90px; opacity:1;}
	}
	
	
}

@media (max-width: 575px) {
	/* ul.grid figure img.sampleThumb{
		border:10px #008fcc solid;
	} */

	.tags{
		display:none;
	}
	.intro_texts .green_text {
        font: bold 26px / 18px "Poppins", Arial, Helvetica, sans-serif;
    }

}
@media (max-width: 479px) {
	.col-xs-6{
		width:100%;
	}
	.tags{
		display:flex;
	}
}
@media (max-width: 767px) {
	.wr_logo{
		top: 240px;
		left: calc(50% - 50px);
	}
	.logo {
		width: 100px;
		height: 145px ;
	}
	.wr_header {
		min-height:350px;
		margin:0 -15px;
	}
	.wr_header > nav {
		margin:0 ;
	}
	.wr_header > nav > ul.nav > li{
		display:block;
		width:100%;
	}
	.wr_header > nav > ul.nav > li a{
		text-align:center;
		background-color:#CCC;
		border-bottom:1px solid #fff;
		font: size 16px;
	}
	.wr_header > nav > ul.nav > li:first-child a{
		border-top:1px solid #fff;
	}
	.wr_header > nav > ul.nav > li a.active{
		margin:0;
		background-color:#838383;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		border:none;
		border-bottom:1px solid #fff;
	}
	.wr_header > nav > ul.nav li a:hover{
		animation:none !important;
	}
	.wr_header > nav > ul.nav > li a:hover{
		background:#acb2b5;
		color:#fff;
	}
	ul.skill_bar_chart li {
		width:10.5%;
	}
	section.skills {
		padding: 30px 0 40px;
	}
	
}

@-webkit-keyframes shadow-scaling {
	0%   {transform:scale(0.7);top:70px; opacity:1; }
	50%  {transform:scale(.5); top:75px; opacity:0.7;}
	100% {transform:scale(0.7); top:70px; opacity:1;}
}
@keyframes shadow-scaling {
	0%   {transform:scale(0.7);top:70px; opacity:1; }
	50%  {transform:scale(.5); top:75px; opacity:0.7;}
	100% {transform:scale(0.7); top:70px; opacity:1;}
}

/* Small devices (tablets, 380px and up) */
@media (min-width: 380px){
	/* Content Area */
	.wr_logo{
		top: 250px;
	}
	.wr_logo.small {
        top: 240px;
    }
	.wr_home_intro{
		min-height:210px;
	}
	.main_content{
		padding-top:30px;
	}
	.intro_texts .gray_text{
		font:bold 30px/20px "Poppins", Arial, Helvetica, sans-serif ;
	}
	.intro_texts .green_text{
		font: bold 40px/30px "Poppins", Arial, Helvetica, sans-serif;
	}
	.intro_shadow img{
		width:100%;
	}
	.intro_texts .gray_text{
		font:bold 22px/18px "Poppins", Arial, Helvetica, sans-serif ;
	}
	.intro_texts .green_text{
		font: bold 36px/24px "Poppins", Arial, Helvetica, sans-serif;
	}
	@-webkit-keyframes shadow-scaling {
		0%   {transform:scale(1);top:100px; opacity:1; }
		50%  {transform:scale(.5); top:105px; opacity:0.7;}
		100% {transform:scale(1); top:100px; opacity:1;}
	}
	@keyframes shadow-scaling {
		0%   {transform:scale(1);top:100px; opacity:1; }
		50%  {transform:scale(.5); top:105px; opacity:0.7;}
		100% {transform:scale(1); top:100px; opacity:1;}
	}
}

@media (min-width: 700px) {
    .main_content {
        padding-top: 40px;
    }
	.wr_logo{
		top: 270px;
	}
	.wr_home_intro {
        min-height: 220px;
        margin-top: 30px;
    }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.wr_logo{
		top: 30px;
	}
	.wr_logo.small {
        top: 30px;
    }
	/*  Header */
	.wr_header > nav > ul.nav{
		padding-top:28px;
	}
	.wr_header > nav > ul.nav li a{
		font-size:32px;
		font-size:16px;
	}
	.wr_header > nav > ul.nav > li.home{
		margin-left:30px;
		margin-right:60px;
	}
	.wr_header > nav > ul.nav > li.know_me{
		margin-right:225px;
	}
	.wr_header > nav > ul.nav > li.portfolio{
		margin-left:0px;
	}
	.wr_header > nav > ul.nav > li.contact_me{
		margin-left:40px;
	}
	.logo img {
  		left:91px;
  		top:8px;
	}
	
	/* Content Area */
	.wr_home_intro{
		min-height:350px;
		margin-top:40px;
	}
	.main_content{
		padding-top:500x;
	}
	.intro_texts .gray_text{
		font:bold 46px/36px "Poppins", Arial, Helvetica, sans-serif ;
	}
	.intro_texts .green_text{
		font: bold 72px/56px "Poppins", Arial, Helvetica, sans-serif;
	}
 	@-webkit-keyframes shadow-scaling {
		0%   {transform:scale(1);top:210px; opacity:1; }
		50%  {transform:scale(.5); top:225px; opacity:0.7;}
		100% {transform:scale(1); top:210px; opacity:1;}
	}
	@keyframes shadow-scaling {
		0%   {transform:scale(1);top:210px; opacity:1; }
		50%  {transform:scale(.5); top:225px; opacity:0.7;}
		100% {transform:scale(1); top:210px; opacity:1;}
	}
	
	ul.skill_bar_chart li {
		width:10.5%;
	}
	
	.tools_and_tech_item{
		width: 50%;
	}

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	
	/*  Header */
	.wr_header > nav > ul.nav {
		padding-top:52px;
	}
	.wr_header > nav > ul.nav > li a{
		font-size:40px;
		font-size:20px;
	}
	.wr_header > nav > ul.nav > li.home{
		margin-left:40px;
		margin-right:90px;
	}
	.wr_header > nav > ul.nav > li.know_me{
		margin-right:305px;
	}
	.wr_header > nav ul.nav > li.portfolio{
		margin-left:0px;
	}
	.wr_header > nav > ul.nav > li.contact_me{
		margin-left:60px;
		margin-right: 40px;
	}
	
	.logo img {
  		left:131px;
  		top:10px;
	}
	
	/* Content Area */
	.wr_home_intro{
		min-height:500px;
		margin-top:10px;
	}
	.main_content{
		padding-top:100px;
		
	}
	.intro_texts .gray_text{
		font:bold 64px/68px "Poppins", Arial, Helvetica, sans-serif ;
	}
	.intro_texts .green_text{
		font: bold 100px/90px "Poppins", Arial, Helvetica, sans-serif;
	}
	
 	@-webkit-keyframes shadow-scaling {
		0%   {transform:scale(1);top:300px; opacity:1; }
		50%  {transform:scale(.5); top:315px; opacity:0.7;}
		100% {transform:scale(1); top:300px; opacity:1;}
	}
	@keyframes shadow-scaling {
		0%   {transform:scale(1);top:300px; opacity:1; }
		50%  {transform:scale(.5); top:315px; opacity:0.7;}
		100% {transform:scale(1); top:300px; opacity:1;}
	}
	ul.skill_bar_chart li {
		width:11%;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

	.tools_and_tech_item{
		width: 25%;
	}
	
	/*  Header */
	.wr_header > nav > ul.nav {
		padding-top:52px;
	}
	.wr_header > nav > ul.nav > li a{
		font-size:40px;
		font-size:20px;
	}
	.wr_header > nav ul.nav li.home{
		margin-left:50px;
		margin-right:140px;
	}
	.wr_header > nav ul.nav > li.know_me{
		margin-right:380px;
	}
	.wr_header > nav ul.nav > li.portfolio{
		margin-left:0px;
	}
	.wr_header > nav > ul.nav > li.contact_me{
		margin-left:119px;
		margin-right:50px;
	}
	.logo img {
  		left:131px;
  		top:10px;
	}
	
	/* Content Area */
	.wr_home_intro{
		min-height:300px;
		margin-top:0px; 
	}
	.main_content {
        padding-top: 70px;
    }
	.intro_texts .gray_text{
		font:bold 48px/40px "Poppins", Arial, Helvetica, sans-serif ;
	}
	.intro_texts .green_text{
		font: bold 72px/68px "Poppins", Arial, Helvetica, sans-serif;
	}
	
	@-webkit-keyframes shadow-scaling {
		0%   {transform:scale(1);top:190px; opacity:1; }
		50%  {transform:scale(.5); top:195px; opacity:0.7;}
		100% {transform:scale(1); top:190px; opacity:1;}
	}
	@keyframes shadow-scaling {
		0%   {transform:scale(1);top:190px; opacity:1; }
		50%  {transform:scale(.5); top:195px; opacity:0.7;}
		100% {transform:scale(1); top:190px; opacity:1;}
	}

	.wr_bar_chart{
		margin-top: 100px;
	}

	p.intro {
		font-size: 18px;
	}

}
@media (max-width: 1199px) {
	.hover-overlay .wr_infoIcons {
		padding-top: 25%;
	}
	.hover-overlay img {
		max-width: 32px;
		max-height: 32px;
	}
}
@media (max-width: 991px) {
	.cntactInfo{
		margin-top:32px;
	}
}
@media (max-width: 768px){
	ul.skill_bar_chart li .percentage{
		font-size:26px !important;
		line-height:20px !important;
	}
	ul.skill_bar_chart li .skill{
		-ms-transform: rotate(-90deg); /* IE 9 */
    	-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    	transform: rotate(-90deg);
		font-size:18px !important;
		white-space:nowrap;
		padding-left:25px;
	}
	ul.skill_bar_chart li.average .quarter{
		display:none;
	}
	ul.skill_bar_chart li.average{
		width:0;
	}
	.bar-xaxis .percent{
		margin-left:0;
	}
}


@media (max-width: 992px){
	ul.skill_bar_chart li.average .quarter{
		font-size:14px;
	}
	.what_i_do h2{
		margin-top:10px;
	}
	
}



/* ================= 2025.01.20 ============== */