/*
 * Breakpoint: 768px
 */
@media screen and (min-width: 768px) and (max-width: 959px) {
	.container {
		width: 748px;
	}
	.container .columns {
		width: 44px;
		float: left;
		margin-left: 20px;
	}
	.container .columns:first-child,
	.container .columns.first {
		margin-left: 0;
	}
	.container .offset-one {
		padding-left: 64px;
	}	
	.container .columns.two {
		width: 108px;
	}
	.container .offset-two {
		padding-left: 128px;
	}
	.container .columns.one-fourth,
	.container .columns.three {
		width: 172px;
	}
	.container .offset-one-fourth,
	.container .offset-three {
		padding-left: 192px;
	}
	.container .columns.one-third,
	.container .columns.four {
		width: 236px;
	}
	.container .offset-one-third,
	.container .offset-four {
		padding-left: 256px;
	}
	.container .columns.five {
		width: 300px;
	}
	.container .offset-five {
		padding-left: 320px;
	}
	.container .columns.one-half,
	.container .columns.six {
		width: 364px;
	}
	.container .offset-one-half,
	.container .offset-six {
		padding-left: 384px;
	}
	.container .columns.seven {
		width: 428px;
	}
	.container .offset-seven {
		padding-left: 448px;
	}
	.container .columns.two-thirds,
	.container .columns.eight {
		width: 492px;
	}
	.container .offset-two-thirds,
	.container .offset-eight {
		padding-left: 512px;
	}
	.container .columns.three-fourths,
	.container .columns.nine {
		width: 556px;
	}
	.container .offset-three-fourths,
	.container .offset-nine {
		padding-left: 576px;
	}
	.container .columns.ten {
		width: 620px;
	}
	.container .offset-ten {
		padding-left: 640px;
	}
	.container .columns.eleven {
		width: 684px;
	}
	.container .offset-eleven {
		padding-left: 704px;
	}
	.container .columns.twelve {
		width: 748px;
	}
	.container .columns.one-fifth {
		width: 133px;
	}
	.container .offset-one-fifth {
		padding-left: 153px;
	}
	.container .columns.two-fifths {
		width: 286px;
	}
	.container .offset-two-fifths {
		padding-left: 306px;
	}
	.container .columns.three-fifths {
		width: 439px;
	}
	.container .offset-three-fifths {
		padding-left: 459px;
	}
	.container .columns.four-fifths {
		width: 592px;
	}
	.container .offset-four-fifths {
		padding-left: 612px;
	}
	.container .columns.five-fifths {
		width: 745px;
	}
	.container .offset-five-fifths {
		padding-left: 765px;
	}
}

/*
 * Breakpoint: 1200px
 */
@media screen and (min-width:1200px) {
	.container.hd,
	.container.large {
		width: 1180px;
	}
	.container.hd .columns,
	.container.large .columns {
		width: 80px;
	}
	.container.hd .offset-one,
	.container.large .offset-one {
		padding-left: 100px;
	}
	.container.hd .columns.two,
	.container.large .columns.two {
		width: 180px;
	}
	.container.hd .offset-two,
	.container.large .offset-two {
		padding-left: 200px;
	}
	.container.hd .columns.one-fourth,
	.container.large .columns.one-fourth,
	.container.hd .columns.three,
	.container.large .columns.three {
		width: 280px;
	}
	.container.hd .offset-one-fourth,
	.container.large .offset-one-fourth,
	.container.hd .offset-three,
	.container.large .offset-three {
		padding-left: 300px;
	}
	.container.hd .columns.one-third,
	.container.large .columns.one-third,
	.container.hd .columns.four,
	.container.large .columns.four {
		width: 380px;
	}
	.container.hd .offset-one-third,
	.container.large .offset-one-third,
	.container.hd .offset-four,
	.container.large .offset-four {
		padding-left: 400px;
	}
	.container.hd .columns.five,
	.container.large .columns.five {
		width: 480px;
	}
	.container.hd .offset-five,
	.container.large .offset-five {
		padding-left: 500px;
	}
	.container.hd .columns.one-half,
	.container.large .columns.one-half,
	.container.hd .columns.six,
	.container.large .columns.six {
		width: 580px;
	}
	.container.hd .offset-one-half,
	.container.large .offset-one-half,
	.container.hd .offset-six,
	.container.large .offset-six {
		padding-left: 600px;
	}
	.container.hd .columns.seven,
	.container.large .columns.seven {
		width: 680px;
	}
	.container.hd .offset-seven,
	.container.large .offset-seven {
		padding-left: 700px;
	}
	.container.hd .columns.two-thirds,
	.container.large .columns.two-thirds,
	.container.hd .columns.eight,
	.container.large .columns.eight {
		width: 780px;
	}
	.container.hd .offset-two-thirds,
	.container.large .offset-two-thirds,
	.container.hd .offset-eight,
	.container.large .offset-eight {
		padding-left: 800px;
	}
	.container.hd .columns.three-fourths,
	.container.large .columns.three-fourths,
	.container.hd .columns.nine,
	.container.large .columns.nine {
		width: 880px;
	}
	.container.hd .offset-three-fourths,
	.container.large .offset-three-fourths,
	.container.hd .offset-nine,
	.container.large .offset-nine {
		padding-left: 900px;
	}
	.container.hd .columns.ten,
	.container.large .columns.ten {
		width: 980px;
	}
	.container.hd .offset-ten,
	.container.large .offset-ten {
		padding-left: 1000px;
	}
	.container.hd .columns.eleven,
	.container.large .columns.eleven {
		width: 1080px;
	}
	.container.hd .offset-eleven,
	.container.large .offset-eleven {
		padding-left: 1100px;
	}
	.container.hd .columns.twelve,
	.container.large .columns.twelve {
		width: 1180px;
	}
	.container.hd .columns.one-fifth,
	.container.large .columns.one-fifth {
		width: 220px;
	}
	.container.hd .offset-one-fifth,
	.container.large .offset-one-fifth {
		padding-left: 240px;
	}
	.container.hd .columns.two-fifths,
	.container.large .columns.two-fifths {
		width: 460px;
	}
	.container.hd .offset-two-fifths,
	.container.large .offset-two-fifths {
		padding-left: 480px;
	}
	.container.hd .columns.three-fifths,
	.container.large .columns.three-fifths {
		width: 700px;
	}
	.container.hd .offset-three-fifths,
	.container.large .offset-three-fifths {
		padding-left: 720px;
	}
	.container.hd .columns.four-fifths,
	.container.large .columns.four-fifths {
		width: 940px;
	}
	.container.hd .offset-four-fifths,
	.container.large .offset-four-fifths {
		padding-left: 960px;
	}
	.container.hd .columns.five-fifths,
	.container.large .columns.five-fifths {
		width: 1180px;
	}
	.container.hd .offset-five-fifths,
	.container.large .offset-five-fifths {
		padding-left: 1200px;
	}
}

/* #Media Queries
================================================== */


	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {

	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.hidden-desktop {
			display: inherit !important;
		}
		.visible-desktop {
			display: none !important ;
		}
		.visible-tablet {
			display: inherit !important;
		}
		.hidden-tablet {
			display: none !important;
		}
		#wrapper {
			width: 818px;
		}		
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.hidden-desktop {
			display: inherit !important;
		}
		.visible-desktop {
			display: none !important;
		}
		.visible-phone {
			display: inherit !important;
		}
		.hidden-phone {
			display: none !important;
		}
		#wrapper {
			width: 370px;
		}
		.container {
			width: 300px;
		}		
		#logo {
			display: block;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
		}
		
		.twit_img {
			display: none;
		}
		.cs-text{
			width: 765px !important;
		}
		
		.cs-text span {
			background: url("../img/scratch-texture.png") repeat scroll 0 0 rgba(0, 0, 0, 0.05);
			box-shadow: -6px 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 30px rgba(255, 255, 255, 0.4) inset;
			color: rgba(255, 255, 255, 0.7);
			cursor: default;
			display: block;
			float: left;
			font-family: 'Medula One', cursive;
			font-size: 40px;
			font-weight: lighter;
			line-height: 90px;
			position: relative;
			text-align: center;
			text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
			text-transform: uppercase;
			transform: skewY(8deg);
			transition: all 0.5s ease-in-out 0s;
			width: 45px;
			z-index: 1;
			box-shadow: 
				-6px 2px 10px rgba(0,0,0,0.5), 
				inset 0 0 0 10px rgba(255, 255, 255, 0.4);
			-webkit-backface-visibility: hidden;
			border-radius: 5px;
			-webkit-transform: skewY(8deg);
			-moz-transform: skewY(8deg);
			-o-transform: skewY(8deg);
			-ms-transform: skewY(8deg);
			transform: skewY(8deg);
			-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all 0.5s ease-in-out;
			-o-transition: all 0.5s ease-in-out;
			-ms-transition: all 0.5s ease-in-out;
			transition: all 0.5s ease-in-out;
		}

		.cs-text span:before {
			content: '';
			position: absolute;
			left: 10px;
			right: 10px;
			top: 10px;
			bottom: 10px;
			box-shadow: 
				1px 1px 1px rgba(255,255,255,0.4), 
				inset 1px 1px 1px rgba(0,0,0,0.1);
		}

		.cs-text span:after {
			content: '';
			position: absolute;
			left: 50%;
			top: 5px;
			margin-left: -5px;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			box-shadow: inset 1px 1px rgba(0, 0, 0, 0.4);
			background: rgba(0, 0, 0, 0.1);
		}

		.cs-text span:hover {
			-webkit-transform: translateY(-10px) scale(1.1);
			-moz-transform: translateY(-10px) scale(1.1);
			-o-transform: translateY(-10px) scale(1.1);
			-ms-transform: translateY(-10px) scale(1.1);
			transform: translateY(-10px) scale(1.1);
			color: rgba(255,255,255,1);
			text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
		}
				.button.medium{
			padding: 10px 10px;
		}
		.footer-copy p {
			display: block;
			margin: 0 auto 20px;
			text-align: center !important;
			
		}			
		.social-icons{
			text-align:center;
			float:none !important;
		}
		.columns {
			width: 100%;
		}		
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		#wrapper {
			width: 550px;
		}		
		.container {
			width: 480px;
		}
			.twit_img {
			display: list-item;
		}
		
		.cs-text{
			width: 480px;
		}
		.cs-text span {
			background: url("../img/scratch-texture.png") repeat scroll 0 0 rgba(0, 0, 0, 0.05);
			box-shadow: -6px 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 30px rgba(255, 255, 255, 0.4) inset;
			color: rgba(255, 255, 255, 0.7);
			cursor: default;
			display: block;
			float: left;
			font-family: 'Medula One', cursive;
			font-size: 60px;
			font-weight: lighter;
			line-height: 110px;
			position: relative;
			text-align: center;
			text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.5);
			text-transform: uppercase;
			transform: skewY(8deg);
			transition: all 0.5s ease-in-out 0s;
			width: 70px;
			z-index: 1;
			box-shadow: 
				-6px 2px 10px rgba(0,0,0,0.5), 
				inset 0 0 0 15px rgba(255, 255, 255, 0.4);
			-webkit-backface-visibility: hidden;
			border-radius: 5px;
			-webkit-transform: skewY(8deg);
			-moz-transform: skewY(8deg);
			-o-transform: skewY(8deg);
			-ms-transform: skewY(8deg);
			transform: skewY(8deg);
			-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all 0.5s ease-in-out;
			-o-transition: all 0.5s ease-in-out;
			-ms-transition: all 0.5s ease-in-out;
			transition: all 0.5s ease-in-out;
		}

		.cs-text span:before {
			content: '';
			position: absolute;
			left: 15px;
			right: 15px;
			top: 15px;
			bottom: 15px;
			box-shadow: 
				1px 1px 1px rgba(255,255,255,0.4), 
				inset 1px 1px 1px rgba(0,0,0,0.1);
		}

		.cs-text span:after {
			content: '';
			position: absolute;
			left: 50%;
			top: 5px;
			margin-left: -5px;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			box-shadow: inset 1px 1px rgba(0, 0, 0, 0.4);
			background: rgba(0, 0, 0, 0.1);
		}

		.cs-text span:hover {
			-webkit-transform: translateY(-10px) scale(1.1);
			-moz-transform: translateY(-10px) scale(1.1);
			-o-transform: translateY(-10px) scale(1.1);
			-ms-transform: translateY(-10px) scale(1.1);
			transform: translateY(-10px) scale(1.1);
			color: rgba(255,255,255,1);
			text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
		}
		.button.medium{
			padding: 10px 10px;
		}

		
	}