//
// Responsive CSS File - Mobile < 768px
// --------------------------------------------------


// Grid Variables
// -------------------

@containerWidth: 100%;
@columnCount:    1;
@gutterRatio:    10%;
@paddingRatio:   100%;


// Type Variables
// -------------------

@fontSize: 16px;
@lineHeight: 140%;


// Base Styles
// -------------------

@import "_variables.less"; // site variables
@import "_mixins.less"; // grid and mixins

@media (max-width: 700px) {
	
	@import "_layout.less";


	// Custom Styles
	// -------------------	
	.logo {
		min-width: 100%;
		padding-bottom: 1em;
	}

	.head {
		text-align: center;
		width: 75%;
		padding: 0.5em;

		p {
			font-size: 0.9em;
			margin-bottom: 0;
		}
	}

	form {
		text-align: center;
	}

	input.url,
	input.short-url {
	    width: 100%;
		padding-right: 0;
		font-size: 0.9em;
	}

	input[type="submit"],
	.short-url-button {
		width: 100%;
	    -webkit-border-radius: 6px;
	    -moz-border-radius: 6px;
	    border-radius: 6px;
		margin-left: 0;
		font-size: 0.9em;
	}

	.customise-container {
		font-size: 0.9em;

		input {
			font-weight: 500;
		}
	}

	.footer {
		font-size: 14px;
		width: 100%;

		.footer-links {
			display: block;
		}

		span {
			padding: 0 0.5em;
		}
	}
}

@media (max-width: 450px) {
	.link-section {
		width: 80%;
	}
}

@media (max-width: 340px) {
	.main-content {
		margin-top: 30%;
    	margin-bottom: 30%;
	}

	input.url {
		font-size: 0.8em;
	}

	input[type="submit"] {
		font-size: 0.8em;
	}
}