/******************************************************
	Smaller than 1200px
*******************************************************/

@media screen and (max-width: 1200px) {
	
	.wrapper {
		width: 920px;
	}

	#logo {
		margin-right: 48px;
	}

	/*-------------------------------------------*\
		Intro Section Styling
	\*-------------------------------------------*/

	#intro {
	    height: 534px;
	}

	#intro-image {
		width: 655px;
		height: 256px;
		background: url(../images/intro-image-medium.png) no-repeat;
	}

	/*-------------------------------------------*\
		Themes Section Styling
	\*-------------------------------------------*/

	#theme-slider, 
	.theme-slide {
		width: 920px;
	}

	.flex-prev, 
	.flex-next {
		top: 266px;
	}

	.flex-prev {
	    left: 824px;
	}

	/*-------------------------------------------*\
		Contact Section Styling
	\*-------------------------------------------*/

	.wpcf7-text, 
	.wpcf7-textarea {
	    width: 96.7%;
	}

}

/******************************************************
	Smaller than 920px
*******************************************************/

@media screen and (max-width: 920px) {
	
	.wrapper {
		width: 600px;
	}

	/*-------------------------------------------*\
		Main Nav Styling
	\*-------------------------------------------*/

	#menu-icon {
		position: relative;
		z-index: 15;
		width: 70px;
		height: 70px;
		float: left;
		border-right: 1px solid #F2F2F2;
		border-left: 1px solid #F2F2F2;
		background: url(../images/menu-icon.png) no-repeat;
		cursor: pointer;
		transition: all .3s;
	}

	#main-nav ul {
		position: absolute;
		left: 181px;
		top: 70px;
		z-index: 400;
		display: none;
		width: 254px;
		padding: 12px;
    	border: 1px solid #F2F2F2;
		background-color: #fff;
	}

	#main-nav li {
		height: auto;
		clear: both;
		border-left: none;
		line-height: 34px;
	}

	#main-nav li a {
		height: 34px;
		padding-left: 10px;
	}

	#main-header a 
	.blk-line,
	#main-header a:hover 
	.blk-line {
	    background-color: transparent;
	}

	/*-------------------------------------------*\
		Intro Section Styling
	\*-------------------------------------------*/

	#intro {
	    height: 470px;
	}

	#intro h1 {
		padding-top: 86px;
    	font-size: 30px;
    }

    #intro h2 {
    	padding-top: 16px;
    	font-size: 26px;
    }

    #intro-image {
		width: 600px;
		height: 235px;
		background: url(../images/intro-image-small.png) no-repeat;
	}

	/*-------------------------------------------*\
		Themes Section Styling
	\*-------------------------------------------*/

	#theme-slider, 
	.theme-slide {
		width: 600px;
		height: 263px;
	}

	.theme-thumb {
		width: 502px;
		height: 255px;
		float: none;
		margin-right: auto;
		margin-left: auto;
	}

	.theme-thumb img {
		width: 100%;
		height: auto;
	}

	.theme-bg-color {
		width: 502px;
		height: 255px;
	}

	.about-theme {
		display: none;
	}

	.flex-prev,
	.flex-next {
		top: 111px;
	}

	.flex-prev {
		left: 0;
	}

	.flex-next {
		right: 0;
	}

	/*-------------------------------------------*\
		Testimonials Section Styling
	\*-------------------------------------------*/

	#testimonials blockquote {
    	width: 80%
    }

	/*-------------------------------------------*\
		About Me Section Styling
	\*-------------------------------------------*/

	#about-me p {
    	width: 100%;
    }

	/*-------------------------------------------*\
		Contact Section Styling
	\*-------------------------------------------*/

	.wpcf7-text, 
	.wpcf7-textarea {
	    width: 94.5%;
	}

}

/******************************************************
	Smaller than 600px
*******************************************************/

@media screen and (max-width: 600px) {
	
	.wrapper {
		width: 280px;
	}

	/*-------------------------------------------*\
		Main Header Styling
	\*-------------------------------------------*/

	#logo {
	    margin-right: 18px;
	}

	#main-nav ul {
		left: 0;
	}

	#main-header li {
		margin-right: -5px;
	}

	.other-media-text {
		display: none;
	}

	/*-------------------------------------------*\
		Intro Section Styling
	\*-------------------------------------------*/

	#intro {
	    height: 390px;
	}

	#intro h1 {
		padding-top: 58px;
    	font-size: 24px;
    	line-height: 36px;
    }

    #intro h2 {
    	padding-top: 12px;
    	font-size: 24px;
    }

    #intro-image {
		width: 280px;
		height: 109px;
		background: url(../images/intro-image-x-small.png) no-repeat;
	}

	/*-------------------------------------------*\
		Themes Section Styling
	\*-------------------------------------------*/

	#theme-slider, 
	.theme-slide {
	    width: 280px;
	    height: 140px;
	}

	.theme-thumb,
	.theme-bg-color {
    	width: 260px;
    	height: 132px;
    }

    .flex-prev, 
    .flex-next {
	    top: 51px;
	}

	/*-------------------------------------------*\
		Testimonials Section Styling
	\*-------------------------------------------*/

	#testimonials blockquote {
	    width: 60%;
	}

	/*-------------------------------------------*\
		Contact Section Styling
	\*-------------------------------------------*/

	.wpcf7-text, 
	.wpcf7-textarea {
	    width: 88.5%;
	}

	#main-footer p {
		padding-top: 20px;
	    line-height: 28px;
	}

}