/*********************************************************************
***********************************************************************
    Template Name: Mutant Portfolio Theme
    Template URI:
    Description: Personal Portfolio Template
    Author: Ashiqur Rahman Tusher
    Author URI: 
    Version: 1
************************************************************************
************************************************************************/

/*==================================================
            Bootstrap 3 Media Queries             
==================================================*/
/*==========  Desktop First  Method  ==========*/

/*-----------------------------------------------------------------------
	TABLE OF CONTENTS
-------------------------------------------------------------------------
	1. Start Header
	2. Start Menu
	3. Start About Me
	4. Start Services
	5. Start Portfolio
	6. Start Testimonials
	7. Start Contact
============================================================================
============================================================================*/

/*--------------------------------
  1. Start Header
----------------------------------*/
@media(max-width: 550px) and (min-height: 501px){
	.introduction{
		font-size: 45px;
		margin-bottom: 5px;
	}
	.animated-text{
		font-size: 21px;
		margin-top: 7px;
    	margin-bottom: 2px;
	}
	.head-holder .hireMe{
		margin-top: 10px;
    	font-size: 18px;
    	padding: 3px 12px;
	}
}
@media (min-width: 470px) and (max-width: 727px){
	.fullscreen-nav-holder div{
		margin-bottom: 15px;
	}
	.full-nav-icon-holder{
		margin-top: 15px;
	}
}
@media (min-width: 728px) and (max-height:470px ){
	.full-nav-container{
		margin-top: 20px;
	}
}
@media (min-width: 469px)and (max-width: 727px) and (max-height:500px ){
	.full-nav-container{
		margin-top: 20px;
	}
	.first-name,.last-name{
		display: inline-block;
		font-size: 35px;
		margin: 0;
	}
	.occupation{
		font-size: 15px;
	}
	.fulscreen-nav{
		margin-top: 25px;
	}
	.full-nav-icon-holder{
		margin-top: 0;
		margin-bottom: 10px;
	}
}
@media (max-height: 535px) and (max-width: 468px){
	.first-name,.last-name{
		display: inline-block;
		font-size: 35px;
		margin: 0;
	}
	.occupation{
		font-size: 15px;
	}
	.name{
		text-align: left;
	}
	.full-nav-container{
		margin-top: 20px;
	}
	.fullscreen-nav-holder div{
		margin-bottom: 15px;
		margin: 0;
    	margin-bottom: 15px;
    	width: 100%;
    	text-align: left;
	}
	.fulscreen-nav{
		margin-top: 25px;
	}
	.full-nav-icon-holder{
		margin-top: -5px;
		width: 70%;
		justify-content: flex-start;
	}
	.full-nav-holder{
		padding-left: 20px;
		display: block;
	}
	.full-nav-content{
		display: block;
	}
}
@media (max-width: 469px) and (min-height: 536px){
	.fullscreen-nav-holder div{
		margin-bottom: 15px;
		margin: 0;
    	margin-bottom: 15px;
    	width: 100%;
    	text-align: center;
	}
	.full-nav-icon-holder{
		margin-top: 15px;
	}
	.full-nav-container{
		margin-top: 20px;
	}
	.first-name{
		font-size: 35px;
	}
	.last-name{
		font-size: 70px;
	    font-weight: 600;
	    line-height: 0;
	    margin-top: 28px;
	    margin-bottom: 28px;
	}
	.occupation{
		font-size: 14px;
	}
	.fullscreen-nav{
		margin-top: 35px;
	}
	.full-nav-holder{
		display: block;
	}
	.full-nav-content{
		display: block;
	}
}
@media (max-width: 767px){
	.logo{
		left: 0px;
	}
	.header .logo img{
		width: 185px;
	}
	.slider-button{
		display: none;
	}
}
@media (max-width: 990px) {
	.header{
		background-position: center;
	}
}
@media (min-height: 301px) and (max-height: 500px){
	.introduction{
		font-size: 35px;
	}
	.animated-text{
		font-size: 18px;
	}
	.head-holder .hireMe{
		margin-top: 10px;
		font-size: 16px;
		padding: 3px 12px;
	}
}
@media (max-height: 300px){
	.introduction{
		font-size: 35px;
	}
	.animated-text{
		font-size: 18px;
	}
	.head-holder .hireMe{
		margin-top: 10px;
		font-size: 16px;
		padding: 3px 12px;
	}
	.head-container{
		display: block;
    	margin-top: 130px;
    	margin-bottom: 50px;
    	height: auto;
    }
}
@media(max-width: 468px) and (max-height: 440px){
	.full-nav-container{
		margin-bottom: 30px;
	}
	.fullscreen-nav-container{
		position: absolute;
		top: 0;
		bottom: 100%;
		width: 100%;
		height: 447px;
	}
}
@media (max-height: 430px){
	.fullscreen-nav-container{
		min-height:420px;
	}
}
/*--------------------------------
  1. End Header
----------------------------------*/

/*--------------------------------
  2. Start Menu
----------------------------------*/
@media (max-width: 991px){
	.desktop-menu{
		width: 95%;
		margin-left: 10px;
	}
}
@media (max-width: 600px){
	.desktop-menu{
		display: none;
	}
	.mobile-menu{
		display: block;
	}
	.menu-container{
		justify-content: flex-end;
		padding: 0px 20px;
		height: 0px;
		background: #fff;
	}
	.desktop-menu-logo{
		display: none;
	}
	.menu-container-transparent{
		background: rgb(255,255,255);
	}
}
@media (min-width: 601px) and (max-width: 991px){
	.menu-container{
		justify-content: flex-start;
	}
}
@media(min-width: 601px){
	.mobile-menu-fix{
		display: none;
	}
}
/*--------------------------------
  2. End Menu
----------------------------------*/

/*--------------------------------
  3. Start About Me
----------------------------------*/
@media (max-width: 767px){
	.about-me-text{
		display: block;
		height: auto;
		margin-bottom: 30px;
		-webkit-order: 2;
		-moz-order: 2;
		-ms-order: 2;
		-o-order: 2;
		order: 2;
	}
	.about-me-image{
		-webkit-order: 1;
		-moz-order: 1;
		-ms-order: 1;
		-o-order: 1;
		order: 1;
		margin-bottom: 30px;
	}
	.about-me-holder{
		display: flex;
    	flex-wrap: wrap;
	}
	.experience-skill {
	    margin-top: 10px;
	}
	.experience-chart,.skill-progress-bar{
		margin-top: 25px;
	}
	.skill{
		margin-top: 30px;
	}
	.skillbar{
		margin-bottom: 15px;
	}
}
@media (max-width: 500px){
	.about-me .col-xs-9{
		width: 100%;
	}
}
@media (min-width:601px) and (max-width: 991px){
	.about-me{
		padding: 125px 0px 35px 0px;
	}
}
@media (max-width: 600px){
	.about-me{
		padding: 70px 0px 0px 0px;
	}
}
/*--------------------------------
  3. End About Me
----------------------------------*/

/*--------------------------------
  4. Start Services
----------------------------------*/
@media(min-width: 526px) and (max-width: 767px){
	.services-icon img{
		width: 100%;
	}
	.service-label{
		top: 110px;
		letter-spacing: 0;
		font-size: 17px;
	}
}
@media (max-width: 525px){
	.services-holder .col-xs-4{
		width: 100%;
	}
	.min-width-bar{
		left: 40%;
    	right: 40%;
	}
}
@media (max-width: 475px){
	.services-heading h1 {
    	margin-bottom: 80px;
	}
}
@media (min-width:768px) and (max-width: 991px){
	.services{
		padding: 70px 0px 35px 0px;
	}
}
@media (max-width: 767px){
	.services{
		padding: 70px 0px 0px 0px;
	}
}
/*--------------------------------
  4. End Services
----------------------------------*/

/*--------------------------------
  5. Start Portfolio
----------------------------------*/
@media (min-width: 865px) and (max-width: 1147px){
	.portfolio-navigation{
		width: 45%;
	}
}
@media (min-width: 650px) and (max-width: 864px){
	.portfolio-navigation{
		width: 60%;
	}
}
@media (min-width: 548px) and (max-width: 649px){
	.portfolio-navigation{
		width: 70%;
	}
}
@media (min-width: 389px) and (max-width: 547px){
	.portfolio-navigation{
		width: 100%;
		justify-content: space-around;
	}
}
@media(max-width: 388px){
	.portfolio-navigation{
		width: 95%;
		justify-content: space-around;
	}
	.portfolio-navigation li{
		margin-bottom: 15px;
	}
}
@media (min-width: 676px) and (max-width: 1000px){
	.portfolio .col-sm-4{
		width: 50%;
	}
}
@media (max-width: 675px){
	.portfolio .col-xs-6{
		width: 100%;
	}
	.portfolio-holder h1:before{
		left: 42%;
		right: 42%;
	}
}
@media(max-width: 330px){
	.item-created{
		display: none;
	}
}
@media (min-width:766px) and (max-width: 991px){
	.portfolio{
		padding: 20px 0px 35px 0px;
	}
}
@media (max-width: 767px){
	.portfolio{
		padding: 20px 0px 0px 0px;
	}
}
/*--------------------------------
  5. End Portfolio
----------------------------------*/

/*--------------------------------
  6. Start Testimonials
----------------------------------*/
@media(max-width: 380px){
	.single-testimonial p{
		width: 80%;
	}
}
@media (max-width: 991px){
	.fun-facts{
		justify-content: space-around;
	}
	.fun-fact-holder{
		margin-bottom: 40px;
	}
}
@media (min-width:766px) and (max-width: 991px){
	.testimonials{
		padding: 70px 0px 35px 0px;
	}
}
@media (max-width: 767px){
	.testimonials{
		padding: 70px 0px 0px 0px;
	}
}
/*--------------------------------
  6. End Testimonials
----------------------------------*/

/*--------------------------------
  7. Start Contact
----------------------------------*/
@media (max-width: 300px){
	.footer-icons{
		width: 100%;
	}
	.footer-icons .fa{
		margin-bottom: 10px;
	}
}
/*--------------------------------
  7. End Contact
----------------------------------