/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */



/* #Base 960 Grid
================================================== */
   @media only screen and (min-width: 960px) and (max-width: 1200px) {

    .contentBox{ position: relative; width: 940px; margin: 0 auto;}
	.headerLeft {
		padding: 0 0 0 45px;
		width: 245px;
	}
	.logo {
		width: 358px;
	}
	.headerRight {
		padding: 0 45px 0 0;
		width: 245px;
	}
	.searchInner {
		width: 215px;
	}
	.search input {
		width: 183px;
	}
	#menu {
		width: 940px;
	}
	.sf-menu > li > a {
		padding: 10px 20px 0;
	}
	.col {
		width:920px;
	}
	.col3 {
		width: 285px;
	}
	.col2 {
		width: 445px;
	}
	.col4 {
		width: 205px;
	}
	.colMain {
		width: 700px;
	}
	.siderbar {
		width: 220px;
	}
	.s-col3.item {
		width: 215px;
	}
	.porfolio-content li, .folioCol2 .porfolio-content li, .folioCol3 .porfolio-content li {
		width:270px;
	}
	.priceBox {
		width: 235px;
	}
	.workText {
		width: 475px;
	}
	#workfolio {
		width: 465px;
	}
	.ui-slider-vertical {
		margin: 80px 45px;
	}
	ul#tabfolio {
		width: 250px;
	}
	.tabDetail {
		width: 650px;
	}
	li.teamfolioContent h3 {
		width: 615px;
	}
	.folioSlider blockquote {
		width: 530px;
	}
	.folioSlider .snap {
		margin: 45px 30px;
	}
	.twitterBlock {
		width: 575px;
	}
	.tweet {
		width: 575px;
	}
	.newsletter input {
		width: 215px;
	}
	footer section.flickr {
		width: 280px;
	}
	footer section {
		width: 200px;
	}
	.caption p, .caption h2 {
		font-size:25px;
		padding:6px 20px;
	}
	.contentBox#mobMenu{display:none;}
	
	/*portfolio*/
	#portfolio-wrapper .four-columns li {
		width: 273px;
	}
	#portfolio-wrapper .three-columns li {
		width: 195px;
	}
	#portfolio-wrapper .two-columns li {
		width: 430px;
	}
	.banner-pos {
		bottom: 5%;
	}
	.banner-pos h2 {
		font-size:48px;
		padding: 10px 20px;	
		margin:5px 0 30px;
		line-height:54px;
	}
   }
/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 769px) and (max-width: 959px) {
    .contentBox{ position: relative; width:750px; margin: 0 auto; }
	.headerLeft {
		padding: 0 0 0 10px;
		width: 245px;
	}
	.logo {
		width:238px;
	}
	.headerRight {
		padding: 0 10px 0 0;
		width: 245px;
	}
	.search {
		padding: 10px 0;
	}
	.searchInner {
		width: 215px;
	}
	.search input {
		width: 183px;
	}
	#menu {
		width:750px;
	}
	.sf-menu > li > a {
		padding: 10px 20px 0;
	}
	.col {
		width:720px;
	}
	.col3 {
		width: 222px;
	}
	.col4 {
		width:160px;
	}
	h2 {
		font-size:28px;
	}
	.staticBox p {
		font-size: 12px;
	}
	.col2 {
		width:350px;
	}
	.colMain {
		width:557px;
	}
	.siderbar {
		width:172px;
	}
	.s-col3.item {
		width: 258px;
	}
	.staticBox2 p {
		font-size: 12px;
	}
	.porfolio-content li, .folioCol2 .porfolio-content li, .folioCol3 .porfolio-content li {
		width:333px;
	}
	.colMain .porfolio-content li {
		width: 235px;
	}
	.priceBox {
		width:186px;
	}
	.priceBox ul li {
		font-size:14px;
	}
	.priceBox.active .pricePlan {
		font-size: 30px;
	}
	.priceBox .pricePlan {
		font-size: 20px;
	}
	.workText {
		padding-right: 15px;
		width: 325px;
	}
	.workText p {
		font-size: 13px;
	}
	#workfolio {
		width: 410px;
	}
	.ui-slider-vertical {
		margin: 80px 25px;
	}
	ul#tabfolio {
		width: 215px;
	}
	.tabDetail {
		width:495px;
	}
	li.teamfolioContent h3 {
		width:450px;
	}
	.folioSlider blockquote:before {
		bottom: 130px;
	}
	.folioSlider blockquote {
		font-size: 13px;
		width: 375px;
	}
	.folioSlider .snap {
		margin:15px;
	}
	.twitterBlock {
		width:435px;
	}
	.tweet {
		width:435px;
	}
	.newsletter {
		margin-left:20px;
	}
	.newsletter input {
		width:180px;
	}
	footer section.flickr {
		width:345px;
	}
	.flickr-feed img {
		max-width: 58px;
	}
	footer section {
		width:345px;
	}
	.caption p, .caption h2 {
		font-size:25px;
		padding:6px 20px;
	}
	.contentBox#mobMenu{
		display:block;
		margin-top:25px;
	}
	#menu {
		display:none;
	}
	.home .parallex #menu {
		display: none;
	}
	.parallex .logo {
		float: none;
		margin: 25px auto;
		text-align: center;
		width: 110px;
	}
	
	/*portfolio*/
	#portfolio-wrapper .four-columns li {
		width: 145px;
	}
	#portfolio-wrapper .three-columns li {
		width: 210px;
	}
	#portfolio-wrapper .two-columns li {
		width: 335px;
	}
	#workfolio nav{display:block;}
	#slider-vertical{display:none;}

 }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 768px) {
    .contentBox{ position: relative; width:710px; margin: 0 auto; }
	.headerLeft {
		padding: 0 0 0 10px;
		width: 225px;
	}
	.logo {
		width:238px;
	}
	.headerRight {
		padding: 0 10px 0 0;
		width: 225px;
	}
	.search {
		padding: 10px 0;
	}
	.searchInner {
		width:180px;
	}
	.search input {
		width:150px;
	}
	#menu {
		width:710px;
	}
	.sf-menu > li > a {
		padding: 10px 20px 0;
	}
	.col {
		width:690px;
	}
	.col3 {
		width: 210px;
	}
	.colMain {
		width:527px;
	}
	.siderbar {
		width:162px;
	}
	.s-col3.item {
		width: 242px;
	}
	.photoCloud.block .blockContent .photoThumb {
		height: 60px;
		width: 60px;
	}
	h2 {
		font-size:28px;
	}
	.staticBox p {
		font-size: 12px;
	}
	.col2 {
		width:325px;
	}
	.col4 {
		margin: 5px;
		width: 325px;
	}
	.staticBox2 p {
		font-size: 12px;
	}
	.porfolio-content li, .folioCol2 .porfolio-content li, .folioCol3 .porfolio-content li {
		width:190px;
	}
	.colMain .porfolio-content li {
		width:222px;
	}
	.priceBox {
		width:177px;
	}
	.priceBox ul li {
		font-size:14px;
	}
	.priceBox.active .pricePlan {
		font-size: 30px;
	}
	.priceBox .pricePlan {
		font-size: 20px;
	}
	.workText {
		padding-right: 15px;
		width: 325px;
	}
	.workText p {
		font-size: 13px;
	}
	#workfolio {
		width:370px;
	}
	.folioinner {
		width: 290px;
		height:290px;
	}
	.foliopan {
		height: 274px;
		width: 274px;
	}
	ul.wi-container {
		height:258px;
		width:258px;
	}
	.ui-slider-vertical {
		margin: 80px 25px;
	}
	ul#tabfolio {
		width: 215px;
	}
	.tabDetail {
		width:455px;
	}
	li.teamfolioContent h3 {
		width:400px;
	}
	.folioSlider blockquote:before {
		bottom: 130px;
	}
	.folioSlider blockquote {
		font-size: 13px;
		width: 340px;
	}
	.folioSlider .snap {
		margin:15px;
	}
	.twitterBlock {
		width:435px;
	}
	.tweet {
		width:435px;
	}
	.newsletter {
		margin-left:20px;
	}
	.newsletter input {
		width:144px;
	}
	footer section.flickr {
		width:700px;
	}
	footer section {
		width:700px;
	}
	.caption p, .caption h2 {
		font-size:18px;
		padding:6px 20px;
	}
	.contentBox#mobMenu{
		display:block;
		margin-top:25px;
	}
	#menu {
		display:none;
	}
	.home .parallex #menu {
		display: none;
	}
	.parallex .logo {
		float: none;
		margin: 25px auto;
		text-align: center;
		width: 110px;
	}

	/*-------login box----------*/
	.login_box {
    	width: 500px;
	}
	.login_box .input-box input {
		width: 415px;
	}
	
	/*portfolio*/
	#portfolio-wrapper .four-columns li {
		width:315px;
	}
	#portfolio-wrapper .three-columns li {
		width:315px;
	}
	#portfolio-wrapper .two-columns li {
		width:315px;
	}	
	#workfolio nav{display:block;}
	#slider-vertical{display:none;}
	.banner-pos {
		bottom: 5%;
	}
	.banner-pos h2 {
		font-size:32px;
		padding: 10px 20px;	
		margin:5px 0 5px;
		line-height:36px;
	}
	.banner-pos p {
		font-size:12px;
		margin:10px 0px;
	}
	.banner-pos .bannerBtn {
	padding: 10px 30px;
	color: #fff;
	font-size: 12px;
	background: none;
	border:3px solid #fff;
	margin: 10px;
	}
	}


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width:600px) and (max-width: 767px) {
    .contentBox{ position: relative; width:540px; margin: 0 auto; }
	.headerLeft {
		border: medium none;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	.logo {
		border-top: 1px solid #EEEEEE;
		border-bottom: 1px solid #EEEEEE;
		margin:10px 0;
		padding: 10px 0;
		width: 100%;
	}
	.headerRight {
		border: medium none;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	.search {
		padding: 10px 0;
	}
	.searchInner {
		height: auto;
		width: 350px;
	}
	.search input {
		padding: 8px;
		width:290px;
	}
	.button-search {
		margin: 12px;
	}
	#menu {
		width:540px;
	}
	.sf-menu > li > a {
		padding: 10px 20px 0;
	}
	.col {
		width:520px;
	}
	.col3, .col2, .col4, .colMain, .siderbar {
		margin: 15px 0;
		padding: 2%;
		width: 96%;
	}
	.s-col3.item {
		margin: 5px;
		width: 238px;
	}
	h2 {
		font-size:28px;
	}
	.staticBox p {
		font-size: 12px;
	}

	.staticBox2 p {
		font-size: 12px;
	}
	.porfolio-content li, .folioCol2 .porfolio-content li, .folioCol3 .porfolio-content li {
		width:228px;
	}
	.colMain .porfolio-content li {
		width: 216px;
	}
	.priceBox {
		width: 100%;
		margin:0 0 15px 0
	}
	.priceHeading span {
		left: 260px;
	}
	.priceBox.active {
		padding: 0;
		position: relative;
		z-index: 1500;
		margin:0 0 15px 0;
	}
	.priceBox.active .priceButton {
		margin-bottom:20px;
	}
	.priceBox ul li {
		font-size:14px;
	}
	.priceBox.active .pricePlan {
		font-size: 30px;
	}
	.priceBox .pricePlan {
		font-size: 20px;
	}
	.workText {
		margin: 0;
		padding: 2%;
		width: 96%;
	}
	.workText p {
		font-size: 13px;
	}
	#workfolio {
		width: 100%;
	}
	.folioinner {
		width: 290px;
		height:290px;
	}
	.foliopan {
		height: 274px;
		width: 274px;
	}
	ul.wi-container {
		height:258px;
		width:258px;
	}
	.ui-slider-vertical {
		margin: 50px 80px;
	}
	ul#tabfolio {
		width: 100%;
	}
	.tabDetail {
		margin-top: 15px;
		width: 500px;
	}
	li.teamfolioContent h3 {
		padding:2%;
		width: 96%;
	}
	.folioSlider blockquote:before {
		bottom: 130px;
	}
	.folioSlider blockquote {
		font-size: 13px;
		width:96%;
		padding:2%;
	}
	.folioSlider .snap {
		margin: 50px 130px;
	}
	.folioSlider blockquote:before {
		bottom: -20px;
		left: 47%;
	}
	.twitterBlock {
		width:100%;
	}
	.tweet {
		width:100%;
	}
	.newsletter {
		margin: 20px 0 0;
	}
	.newsletter input {
		width:428px;
	}
	footer section.flickr {
		width: 100%;
	}
	footer section {
		width:100%;
		margin:0px;
	}
	.flickr-feed img {
		max-width: 59px;
	}
	footer#footerBottom p {
		display: inline-block;
		float: none;
		text-align: center;
		width: 100%;
	}
	footer#footerBottom ul {
		display: inline-block;
		float: none;
		padding: 15px 0;
		text-align: center;
	}
	footer#footerBottom {
		background: none repeat scroll 0 0 #333333;
		display: inline-block;
		padding: 15px 0;
		text-align: center;
		width: 100%;
	}
	.caption p, .caption h2 {
		font-size: 15px;
		padding: 5px 20px;
	}
	.topLinks{
		display: inline-block;
		text-align: center;
		width: 100%;
		border-top: 1px solid #FAD18D;
	}
	ul#topLinks {
		border-top: 1px solid #CA830B;
		display: inline-block;
		float: none;
		width: 100%;
	}
	.contentBox#mobMenu{
		display:block;
		margin-top:25px;
	}
	#menu {
		display:none;
	}
	.home .parallex #menu {
		display: none;
	}
	.parallex .logo {
		float: none;
		margin: 25px auto;
		text-align: center;
		width: 110px;
	}
	/*-------login box----------*/
	.login_box {
    	width:278px;
		padding:0px;
	}
	.login_box .input-box input {
		width:193px;
	}	
	/*portfolio*/
	#portfolio-wrapper .four-columns li {
		-moz-box-sizing: border-box;
		margin: 6px;
		width: 98%;
	}
	#portfolio-wrapper .three-columns li {
		-moz-box-sizing: border-box;
		margin: 6px;
		width: 98%;
	}
	#portfolio-wrapper .two-columns li {
		-moz-box-sizing: border-box;
		margin: 6px;
		width: 98%;
	}			
	#workfolio nav{display:block;}
	#slider-vertical{display:none;}
	
	.banner-pos h2 {
		font-size: 16px;
		line-height: 20px;
		margin: 5px 0;
		padding: 5px 10px;
	}
	.banner-pos p {
		font-size: 12px;
		line-height: 20px;
		margin: 0;
	}
	.banner-pos .bannerBtn {
		background: none repeat scroll 0 0 transparent;
		border: 3px solid #FFFFFF;
		color: #FFFFFF;
		font-size: 10px;
		margin: 10px;
		padding: 7px 20px;
	}
	ul.porfolio-nav li a {
		padding: 10px 15px;
	}
    }


/* #Mobile (wide)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (min-width:300px) and (max-width:599px) {
    .contentBox{ position: relative; width:278px; margin: 0 auto; }
	.headerLeft {
		border: medium none;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	.logo {
		border-top: 1px solid #EEEEEE;
		border-bottom: 1px solid #EEEEEE;
		margin:10px 0;
		padding: 10px 0;
		width: 100%;
	}
	.headerRight {
		border: medium none;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	.search {
		padding: 10px 0;
	}
	.searchInner {
		height: auto;
		width:245px;
	}
	.search input {
		padding: 8px;
		width:185px;
	}
	.button-search {
		margin: 12px;
	}
	#menu {
		width:278px;
	}
	.sf-menu > li > a {
		padding: 10px 20px 0;
	}
	.col3, .col2, .col, .col4, .colMain, .siderbar  {
		margin: 15px 0;
		padding: 2%;
		width: 98%;
	}
	.s-col3.item {
		margin: 5px;
		width: 250px;
	}
	.postCommentBox {
		float: left;
		margin-left: 0;
		margin-top: 10px;
	}
	.inCol2 {
		width: 98%;
	}
	h2 {
		font-size:28px;
	}
	.staticBox p {
		font-size: 12px;
	}

	.staticBox2 p {
		font-size: 12px;
	}
	.porfolio-content li, .folioCol2 .porfolio-content li, .folioCol3 .porfolio-content li {
		width:240px;
	}
	.priceBox {
		width: 100%;
		margin:0 0 15px 0
	}
	.priceHeading span {
		left:125px;
	}
	.priceBox.active {
		padding: 0;
		position: relative;
		z-index: 1500;
		margin:0 0 15px 0;
	}
	.priceBox.active .priceButton {
		margin-bottom:20px;
	}
	.priceBox ul li {
		font-size:14px;
	}
	.priceBox.active .pricePlan {
		font-size: 30px;
	}
	.priceBox .pricePlan {
		font-size: 20px;
	}
	.workText {
		margin: 0;
		padding: 2%;
		width: 96%;
	}
	.workText p {
		font-size: 13px;
	}
	#workfolio {
		width: 100%;
	}
	.folioinner {
		width: 225px;
		height:225px;
	}
	.foliopan {
		height: 209px;
		width: 209px;
	}
	ul.wi-container {
		height:193px;
		width:193px;
	}
	.ui-slider-vertical {
		margin:25px 13px;
	}
	ul#tabfolio {
		width: 100%;
	}
	.tabDetail {
		margin-top: 15px;
		width: 238px;
	}
	li.teamfolioContent h3 {
		padding:2%;
		width: 96%;
	}
	.folioSlider blockquote:before {
		bottom: 130px;
	}
	.folioSlider blockquote {
		font-size: 13px;
		width:96%;
		padding:2%;
	}
	.folioSlider .snap {
		margin: 50px 10px;
	}
	.folioSlider blockquote:before {
		bottom: -20px;
		left: 47%;
	}
	.twitterBlock {
		width:100%;
	}
	.tweet {
		width:100%;
	}
	.newsletter {
		margin: 20px 0 0;
	}
	.newsletter input {
		width:250px;
	}
	footer section.flickr {
		width: 100%;
	}
	footer section {
		width:100%;
		margin:0px;
	}
	.flickr-feed img {
		max-width: 59px;
	}
	footer#footerBottom p {
		display: inline-block;
		float: none;
		text-align: center;
		width: 100%;
	}
	footer#footerBottom ul {
		display: inline-block;
		float: none;
		padding: 15px 0;
		text-align: center;
	}
	footer#footerBottom {
		background: none repeat scroll 0 0 #333333;
		display: inline-block;
		padding: 15px 0;
		text-align: center;
		width: 100%;
	}
	.caption p, .caption h2 {
		font-size: 10px;
		padding: 1px 5px;
	}
	.topLinks{
		display: inline-block;
		text-align: center;
		width: 100%;
		border-top: 1px solid #FAD18D;
	}
	ul#topLinks {
		border-top: 1px solid #CA830B;
		display: inline-block;
		float: none;
		width:auto;
	}
	.currency {
		float: right;
		margin-left: 0;
	}
	.currency ul {
		left: -60px;
	}
	ul.porfolio-nav li {
		width:100%;
	}
	ul.porfolio-nav li a {
		padding:5%;
		width:90%;
		border-bottom: 1px solid #FAD18D;
		border-top: 1px solid #CA830B;
	}
	ul.porfolio-nav{
		border:none;	
	}
	.cartBox {
		display: inline-block;
		float: none;
	}
	.cartContent {
		right: -120%;
	}
	.contentBox#mobMenu{
		display:block;
		margin-top:25px;
	}
	#menu {
		display:none;
	}
	.home .parallex #menu {
		display: none;
	}
	.parallex .logo {
		float: none;
		margin: 25px auto;
		text-align: center;
		width: 110px;
	}
	.home .parallex #menu {
		display: none;
	}
	.parallex .logo {
		float: none;
		margin: 25px auto;
		text-align: center;
		width: 110px;
	}
	/*-------login box----------*/
	.login_box {
    	width:278px;
		padding:0px;
	}
	.login_box .input-box input {
		width:193px;
	}
	
	/*-------breadcrumb box----------*/
	ul#breadcrumb {
		display: inline-block;
		float: none;
		margin: 30px 0;
	}	
	/*portfolio*/
	#portfolio-wrapper .four-columns li {
		-moz-box-sizing: border-box;
		margin: 6px;
		width: 96%;
	}
	#portfolio-wrapper .three-columns li {
		-moz-box-sizing: border-box;
		margin: 6px;
		width: 96%;
	}
	#portfolio-wrapper .two-columns li {
		-moz-box-sizing: border-box;
		margin: 6px;
		width: 96%;
	}
	#workfolio nav{display:block;}
	#slider-vertical{display:none;}
	.banner-pos {
		bottom: 12%;
	}
	.banner-pos h2 {
		font-size:18px;
		padding: 5px;	
		margin:5px 0 5px;
		line-height:18px;
		text-align:center;
	}
	.banner-pos p {
		font-size:12px;
		margin:10px 0px;
		height:40px;
		overflow:hidden;
	}
	.banner-pos .bannerBtn {
	padding: 5px 15px;
	color: #fff;
	font-size: 12px;
	background: none;
	border:2px solid #fff;
	margin: 5px;
	}
   }
/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }