// Vars ****************************************************************************************************************



// Mixins **************************************************************************************************************



// Extends *************************************************************************************************************



// Placeholders ********************************************************************************************************
%_box-sizing-base {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
%_box-sizing {
	@extend %_box-sizing-base;

	&:after,
	&:before {
		@extend %_box-sizing-base;
	}
}


%_clearfix {
	// For modern browsers
	&:before,
	&:after {
		content: " ";
		display: table;
	}

	&:after {
		clear: both;
	}
}


%_rounded-corners {
	$border-radius: 0; //2px;
	-moz-border-radius: $border-radius;
	-webkit-border-radius: $border-radius;
	border-radius: $border-radius;
}
%_NO_rounded-corners {
	$border-radius: 0;
	-moz-border-radius: $border-radius;
	-webkit-border-radius: $border-radius;
	border-radius: $border-radius;
}


%_trans-on {
	-webkit-transition-duration: .3s;
	-moz-transition-duration: .3s;
	-ms-transition-duration: .3s;
	-o-transition-duration: .3s;
	transition-duration: .3s;
}
%_trans-off {
	-webkit-transition-duration: 0;
	-moz-transition-duration: 0;
	-ms-transition-duration: 0;
	-o-transition-duration: 0;
	transition-duration: 0;
}

%_background_clip {
	-moz-background-clip: padding; /* Firefox 3.6 */
	-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
	background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

.ish-no-transition {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

// Body ****************************************************************************************************************
body {
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
}

// Make box model correct -> padding, border = inner
[class^="ish-"], [class*=" ish-"] {
	@extend %_box-sizing;
}


ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}


hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}


img {
	vertical-align: top;
}


textarea {
	resize: vertical;
}


.left {
	float: left;
}


.right {
	float: right;
}


.screen-reader-text{
	display: none;
}


.hidden, .hidden * {
	visibility: hidden;
}


// Image replacement
.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;

	&:before {
		content: "";
		display: block;
		width: 0;
		height: 100%;
	}
}


// MQ checker
/*
.mq:before {
	position: fixed;
	bottom: 150px;
	right: 0;
	display: inline-block;
	padding: 1px 4px 0;
	background: #ff0000;
	color: #fff;
	z-index: 99999;
	font-size: 10px;
}

@media all and (min-width: 1280px) { .mq:before { content: "more than 1280"; } }
@media all and (max-width: 1280px) { .mq:before { content: "1024 - 1280"; background: green; } }
@media all and (max-width: 1024px) { .mq:before { content: "768 - 1024"; background: blue; } }
@media all and (max-width: 768px) { .mq:before { content: "480 - 768"; background: #ff00ff; } }
@media all and (max-width: 480px) { .mq:before { content: "320 - 480"; background: orange; } }
@media all and (max-width: 320px) { .mq:before { content: "240 - 320"; background: #1cb1f2; } }
@media all and (max-width: 240px) { .mq:before { content: "less than 240"; background: #00C31F; } }
/**/