/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
#1	header
#2	navigation
#3	about
#4	work-experience
#5	previous-projects
#6	education
#7	technical-skill
#8	some-of-my-work
#9	pricing
#10	contact
#11	footer


--------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
	.section-heading h2 {
		font-size: 25px;
	}

	.section-heading p {
		font-size: 15px;
		font-weight: normal;
	}

	.section-icon span  {
		width: 60px;
		height: 60px;
		line-height: 50px;
		border: 5px solid #382e22;
		top: 32px;
	}

	.section-icon span i {
		font-size: 25px !important;
	}

}

/*site-loder*/
@media only screen and (max-width: 1100px) {
	.loder-middle {
		left: 37%;
	}
}

@media only screen and (max-width: 970px) {
	.loder-middle {
		left: 34%;
	}
}

@media only screen and (max-width: 767px) {
	.loder-middle {
		left: 30%;
	}
}

@media only screen and (max-width: 620px) {
	.loder-middle {
		left: 26%;
	}
}

@media only screen and (max-width: 500px) {
	.loder-middle {
		left: 18%;
	}
}

@media only screen and (max-width: 400px) {
	.loder-middle {
		left: 11%;
	}
}

@media only screen and (max-width: 340px) {
	.loder-middle {
		left: 7%;
	}
}
@media only screen and (max-width: 300px) {
	.loder-middle {
		left: 0%;
	}
}



/*--------------------------------------------------------------
#1	header
--------------------------------------------------------------*/
@media only screen and (max-width: 1199px) {
	header .col {
		padding-right: 30%;
	}
}

@media only screen and (max-width: 991px) {
	header .col {
		padding-right: 15%;
	}
}

@media only screen and (max-width: 767px) {
	header .my-img {
		background: none;
	}

	header .col {
		padding-right: 0;
	}
}

@media only screen and (max-width: 630px) {
	header h1 {
		font-size: 30px;
		line-height: 40px;
	}

	header p {
		font-size: 17px;
		font-weight: normal;
	}

	header a {
		background-color: #382e22;
		font-size: 14px;
		text-transform: uppercase;
		color: #fff;
		display: inline-block;
		padding: 10px 20px 10px 48px;
		border: 1px solid #fff;
		border-radius: 40px;
		position: relative;
	}

	header a i {
		position: absolute;
		left: 15px;
		color: #63201c;
		font-size: 20px !important;
	}

}


/*--------------------------------------------------------------
#2	navigation
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
	.navbar button span {
		background-color: #fff;
	}
}



/*--------------------------------------------------------------
#3	about
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
	.about .section-heading h2 {
		font-size: 25px;
	}

	.about .section-heading h2 + p {
		font-size: 18px;
		margin: 20px 0 40px;
	}

	.about .top-info a {
		font-size: 14px;
		padding: 10px 25px 10px 45px;
		border: 1px solid #fff;
		margin-right: 20px;
	}

	.about .top-info a i {
		left: 15px;
		font-size: 20px !important;
	}

	/*bottom-info*/
	.bottom-info .row .col:first-child div:first-child p {
		font-size: 25px;
		padding: 0 25px;
	}

	.bottom-info .row .col:first-child div:last-child {
		padding: 0 25px;
	}

	.bottom-info .row .col:first-child div:last-child p {
		font-size: 16px;
		font-weight: normal;
	}
}



/*--------------------------------------------------------------
#4	work-experience
--------------------------------------------------------------*/
@media only screen and (max-width: 991px) {
	.work-experience .work-list h3 i{
		right: -78px;
	}

	.work-experience .right h3 i {
		left: -75px;
		top: 0;
	}
}

@media only screen and (max-width: 625px) {
	.work-experience .work-list h3 {
		font-size: 14px;
	}

	.work-experience .work-list h3:after {
		right: -36px;
		top: 0;
	}
}

@media only screen and (max-width: 545px) {
	.work-experience ul:before {
		content: "";
		display: none;
	}

	.work-experience ul li .col {
		width: 100%;
		padding: 0;
	}

	.work-experience .work-list .thumbnail {
		text-align: left;
	}

	.work-experience .work-list h3 {
		margin-left: -16px;
	}

	.work-experience .work-list h3 i {
		display: none;
	}

	.work-experience .work-list h3:after {
		display: none;
	}
}



/*--------------------------------------------------------------
#5	previous-projects
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
	.previous-projects .section-icon span {
		top: -30px;
	}

	.previous-projects .section-icon i {
		margin-left: -10px;
	    margin-top: -20px;
	}

	.previous-projects .col {
		margin-bottom: 45px;
	}

	.previous-projects .col i {
		width: 40px;
		height: 40px;
		font-size: 40px;
	}

	.previous-projects .icon + p {
		font-size: 30px;
		margin-top: -30px;
	}

	.previous-projects .col h3 {
		margin-top: 0;
	}
}



/*--------------------------------------------------------------
#6	education
--------------------------------------------------------------*/
@media only screen and (max-width: 1199px) {
	.education .dotted-border {
		left: 29%;
	}
}

@media only screen and (max-width: 991px) {
	.education .dotted-border {
		left: 25%;
	}
}


@media only screen and (max-width: 767px) {
	.education {
		margin-top: -18px;
		padding-bottom: 100px;
	}

	.education .dotted-border {
		display: none;
	}

	.education .row .col-sm-7:before {
		display: none;
	}

	.education .row .col:first-child p {
		font-size: 18px;
		color: #63201c;
		padding-right: 25px;
	}

	.education .details {
		padding: 15px 20px;
	}

	.education .row .col:last-child h3 {
		font-size: 16px;
	}

	.education .row .col:last-child h3 + span {
		font-size: 15px;
	}

}



/*--------------------------------------------------------------
#7	technical-skill
--------------------------------------------------------------*/
@media only screen and (max-width: 1199px) {
	.technical-skill .col span {
		left: 34%;
		top: 20%;
	}

	.technical-skill .kata {
		left: 34%;
	}
}

@media only screen and (max-width: 991px) {
	.technical-skill .col span {
		left: 33%;
	}

	.technical-skill .kata {
		left: 33%;
	}
}


@media only screen and (max-width: 767px) {
	.technical-skill {
		background: none;
		background-color: #1c1b1c;
	}

	.technical-skill .col span {
		left: 40%;
	}

	.technical-skill .kata {
		left: 40%;
	}

	.technical-skill .row .col:first-child,
	.technical-skill .row .col:nth-child(2) {
		margin-bottom: 50px;
	}
}

@media only screen and (max-width: 660px) {
	.technical-skill .col span {
		left: 38%;
	}
	.technical-skill .kata {
		left: 38%;
	}
}

@media only screen and (max-width: 545px) {
	.technical-skill .col span {
		left: 34%;
	}

	.technical-skill .kata {
		left: 34%;
	}
}

@media only screen and (max-width: 456px) {
	.technical-skill .col span {
		font-size: 18px;
		width: 50px;
		height: 50px;
		line-height: 50px;
		left: 39%;
	}

	.technical-skill .kata {
		width: 50px;
		height: 50px;
		left: 39%;
		background-color: transparent;
	}

	.technical-skill .kata-before {
		  border-left: 7px solid transparent;
		  border-right: 7px solid transparent;
		  border-top: 30px solid #909090;
		  position: absolute;
		  left: -10px;
		  top: 8px;
	}
	
	.technical-skill h3 {
		font-size: 14px;
	}

	.technical-skill canvas {
		width: 120px !important;
		height: 120px !important;
	}

}

@media only screen and (max-width: 456px) {
	.technical-skill .col span {
		left: 37%;
	}
}

@media only screen and (max-width: 317px) {
	.technical-skill .col span {
		left: 35%;
	}
}


/*--------------------------------------------------------------
#8	some-of-my-work
--------------------------------------------------------------*/
@media only screen and (max-width: 1199px) {
	.some-of-my-work .last-row .col {
		padding: 0 15px;
	}

	.some-of-my-work .last-row .col {
		margin-bottom: 50px;
	}

	.some-of-my-work .last-row .col:last-child {
		margin-bottom: 0;
	}
}

@media only screen and (max-width: 767px) { 
	.some-of-my-work #my-tab {
		width: 100%;
	}

	.some-of-my-work .tab-content {
		position: relative;
		top: 100px;
		padding-bottom: 70px;
	}

}

@media only screen and (max-width: 460px) { 
	.some-of-my-work .tab-content .col a {
		width: 100%;
		text-align: center;
		font-size: 12px;
		padding: 5px;
	}

}



/*--------------------------------------------------------------
#9	pricing
--------------------------------------------------------------*/
@media only screen and (max-width: 991px) { 
	.pricing .col {
		padding: 0 2px;
	}

	.pricing .thumbnail ul li {
		padding-left: 10px;
	}

}

@media only screen and (max-width: 767px) { 
	.pricing {
		background-color: #63201c;
		
	}
	.pricing .col {
		margin-bottom: 50px;
	}
}



/*--------------------------------------------------------------
#10	contact
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) { 
	.contact ul li input[type="submit"] {
		font-size: 14px;
	}

}




/*--------------------------------------------------------------
#11	footer
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) { 
	footer ul {
		padding-left: 15px;
	}

	footer ul li {
		display: inline-block;
		margin-right: 10px;
	}

	footer ul li a {
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 20px;
	}

}

@media only screen and (max-width: 500px) { 
	footer p {
		padding-left: 15px;
		float: left;
	}
}