/*
* Copyright 2014, All Rights Reserved.
*
* Code licensed under the MIT License:
* http://brenopolanski.mit-license.org
*
* @author Breno Polanski <breno.polanski@gmail.com>
* Release version 0.2.0
*
* Summary:
*
*	0. BORDERS
*	1. MARGINS
*	2. PADDINGS
*	3. BLOCK POSITIONS
*	4. WIDTH
*	5. HEIGHT
*	6. FONT SIZES
*	7. FONT/TEXT SETTINGS
*	8. OTHERS
*	9. BORDER RADIUS
*	10. FLAT UI COLORS
*	11. MEDIA QUERIES
*	12. EFFECTS
*		- 12.1. EFFECT SMOOTH
*		- 12.2. EFFECT BLINK
*		- 12.3. EFFECT SPIN
*		- 12.4. EFFECT ROTATE
*		- 12.5. EFFECT FLIP
*/

/* ==========================================================================
   0. BORDERS
   ========================================================================== */

.sh-bn { border: none !important; }
.sh-btn { border-top: none !important; }
.sh-brn { border-right: none !important; }
.sh-bbn { border-bottom: none !important; }
.sh-bln { border-left: none !important; }

/* ==========================================================================
   1. MARGINS
   ========================================================================== */

.sh-m5 { margin: 5px; }
.sh-m10 { margin: 10px; }
.sh-m15 { margin: 15px; }
.sh-m20 { margin: 20px; }
.sh-m25 { margin: 25px; }
.sh-m30 { margin: 30px; }

.sh-mt5 { margin-top: 5px; }
.sh-mr5 { margin-right: 5px; }
.sh-mb5 { margin-bottom: 5px; }
.sh-ml5 { margin-left: 5px; }

.sh-mt10 { margin-top: 10px; }
.sh-mr10 { margin-right: 10px; }
.sh-mb10 { margin-bottom: 10px; }
.sh-ml10 { margin-left: 10px; }

.sh-mt15 { margin-top: 15px; }
.sh-mr15 { margin-right: 15px; }
.sh-mb15 { margin-bottom: 15px; }
.sh-ml15 { margin-left: 15px; }

.sh-mt20 { margin-top: 20px; }
.sh-mr20 { margin-right: 20px; }
.sh-mb20 { margin-bottom: 20px; }
.sh-ml20 { margin-left: 20px; }

.sh-mt25 { margin-top: 25px; }
.sh-mr25 { margin-right: 25px; }
.sh-mb25 { margin-bottom: 25px; }
.sh-ml25 { margin-left: 25px; }

.sh-mt30 { margin-top: 30px; }
.sh-mr30 { margin-right: 30px; }
.sh-mb30 { margin-bottom: 30px; }
.sh-ml30 { margin-left: 30px; }

/* ==========================================================================
   2. PADDINGS
   ========================================================================== */

.sh-p5 { padding: 5px; }
.sh-p10 { padding: 10px; }
.sh-p15 { padding: 15px; }
.sh-p20 { padding: 20px; }
.sh-p25 { padding: 25px; }
.sh-p30 { padding: 30px; }

.sh-pt5 { padding-top: 5px; }
.sh-pr5 { padding-right: 5px; }
.sh-pb5 { padding-bottom: 5px; }
.sh-pl5 { padding-left: 5px; }

.sh-pt10 { padding-top: 10px; }
.sh-pr10 { padding-right: 10px; }
.sh-pb10 { padding-bottom: 10px; }
.sh-pl10 { padding-left: 10px; }

.sh-pt15 { padding-top: 15px; }
.sh-pr15 { padding-right: 15px; }
.sh-pb15 { padding-bottom: 15px; }
.sh-pl15 { padding-left: 15px; }

.sh-pt20 { padding-top: 20px; }
.sh-pr20 { padding-right: 20px; }
.sh-pb20 { padding-bottom: 20px; }
.sh-pl20 { padding-left: 20px; }

.sh-pt25 { padding-top: 25px; }
.sh-pr25 { padding-right: 25px; }
.sh-pb25 { padding-bottom: 25px; }
.sh-pl25 { padding-left: 25px; }

.sh-pt30 { padding-top: 30px; }
.sh-pr30 { padding-right: 30px; }
.sh-pb30 { padding-bottom: 30px; }
.sh-pl30 { padding-left: 30px; }

/* ==========================================================================
   3. BLOCK POSITIONS
   ========================================================================== */

.sh-block { display: block; }

.sh-pos-rel { position: relative; }
.sh-pos-abs { position: absolute; }
.sh-pos-fxd { position: fixed; }

.sh-left { float: left !important; }
.sh-right { float: right !important; }

.sh-center-block {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.sh-clear { clear: both; }

.sh-ltr { direction: ltr; }
.sh-rtl { direction: rtl; }

/* ==========================================================================
   4. WIDTH
   ========================================================================== */

/* pixel */

.sh-w10-px { width: 10px !important; }
.sh-w20-px { width: 20px !important; }
.sh-w30-px { width: 30px !important; }
.sh-w40-px { width: 40px !important; }
.sh-w50-px { width: 50px !important; }
.sh-w60-px { width: 60px !important; }
.sh-w70-px { width: 70px !important; }
.sh-w80-px { width: 80px !important; }
.sh-w90-px { width: 90px !important; }

.sh-w100-px { width: 100px !important; }
.sh-w200-px { width: 200px !important; }
.sh-w300-px { width: 300px !important; }
.sh-w400-px { width: 400px !important; }
.sh-w500-px { width: 500px !important; }
.sh-w600-px { width: 600px !important; }
.sh-w700-px { width: 700px !important; }
.sh-w800-px { width: 800px !important; }
.sh-w900-px { width: 900px !important; }
.sh-w1k-px { width: 1000px !important; }

/* percent */

.sh-w10-pct { width: 10% !important; }
.sh-w20-pct { width: 20% !important; }
.sh-w30-pct { width: 30% !important; }
.sh-w40-pct { width: 40% !important; }
.sh-w50-pct { width: 50% !important; }
.sh-w60-pct { width: 60% !important; }
.sh-w70-pct { width: 70% !important; }
.sh-w80-pct { width: 80% !important; }
.sh-w90-pct { width: 90% !important; }
.sh-w100-pct { width: 100% !important; }

/* ==========================================================================
   5. HEIGHT
   ========================================================================== */

/* pixel */

.sh-h100-px { height: 100px !important; }
.sh-h200-px { height: 200px !important; }
.sh-h300-px { height: 300px !important; }
.sh-h400-px { height: 400px !important; }
.sh-h500-px { height: 500px !important; }
.sh-h600-px { height: 600px !important; }
.sh-h700-px { height: 700px !important; }
.sh-h800-px { height: 800px !important; }
.sh-h900-px { height: 900px !important; }
.sh-h1k-px { height: 1000px !important; }

/* percent */

.sh-h10-pct { height: 10% !important; }
.sh-h20-pct { height: 20% !important; }
.sh-h30-pct { height: 30% !important; }
.sh-h40-pct { height: 40% !important; }
.sh-h50-pct { height: 50% !important; }
.sh-h60-pct { height: 60% !important; }
.sh-h70-pct { height: 70% !important; }
.sh-h80-pct { height: 80% !important; }
.sh-h90-pct { height: 90% !important; }
.sh-h100-pct { height: 100% !important; }

/* ==========================================================================
   6. FONT SIZES
   ========================================================================== */

.sh-f10 { font-size: 10px; }
.sh-f11 { font-size: 11px; }
.sh-f12 { font-size: 12px; }
.sh-f13 { font-size: 13px; }
.sh-f14 { font-size: 14px; }
.sh-f15 { font-size: 15px; }
.sh-f16 { font-size: 16px; }
.sh-f17 { font-size: 17px; }
.sh-f18 { font-size: 18px; }
.sh-f19 { font-size: 19px; }
.sh-f20 { font-size: 20px; }
.sh-f21 { font-size: 21px; }
.sh-f22 { font-size: 22px; }
.sh-f23 { font-size: 23px; }
.sh-f24 { font-size: 24px; }
.sh-f25 { font-size: 25px; }
.sh-f26 { font-size: 26px; }
.sh-f27 { font-size: 27px; }
.sh-f28 { font-size: 28px; }
.sh-f29 { font-size: 29px; }
.sh-f30 { font-size: 30px; }

/* ==========================================================================
   7. FONT/TEXT SETTINGS
   ========================================================================== */

.sh-b { font-weight: bold; }
.sh-i { font-style: italic; }

.sh-vam { vertical-align: middle; }

.sh-tar { text-align: right; }
.sh-tac { text-align: center; }
.sh-taj { text-align: justify; }

.sh-tdu { text-decoration: underline; }

.sh-ttc { text-transform: capitalize; }
.sh-ttu { text-transform: uppercase; }
.sh-ttl { text-transform: lowercase; }

.sh-wsn { white-space: nowrap; }
.sh-wspw { white-space: pre-wrap; }
.sh-wspl { white-space: pre-line; }

/* ==========================================================================
   8. OTHERS
   ========================================================================== */

.sh-crop { overflow: hidden; }
.sh-li { list-style: none !important; }
.sh-txtarea-outln:focus, .sh-input-outln:focus { outline: none !important; }

/* ==========================================================================
   9. BORDER RADIUS
   ========================================================================== */

.sh-radius5 {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
}

.sh-radius10 {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
}

.sh-radius20 {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	border-radius: 20px;
}

/* ==========================================================================
   10. FLAT UI COLORS
   ========================================================================== */

/* Inspired by Flat UI Colors
   http://flatuicolors.com/
   ========================================================================== */

.sh-turquoise { background-color: rgba(26, 188, 156,1.0); }
.sh-emerald { background-color: rgba(46, 204, 113,1.0); }
.sh-peter-river { background-color: rgba(52, 152, 219,1.0); }
.sh-amethyst { background-color: rgba(155, 89, 182,1.0); }
.sh-wet-asphalt { background-color: rgba(52, 73, 94,1.0); }
.sh-green-sea { background-color: rgba(22, 160, 133,1.0); }
.sh-nephritis { background-color: rgba(39, 174, 96,1.0); }
.sh-belize-hole { background-color: rgba(41, 128, 185,1.0); }
.sh-wisteria { background-color: rgba(142, 68, 173,1.0); }
.sh-midnight-blue { background-color: rgba(44, 62, 80,1.0); }
.sh-sun-flower { background-color: rgba(241, 196, 15,1.0); }
.sh-carrot { background-color: rgba(230, 126, 34,1.0); }
.sh-alizarin { background-color: rgba(231, 76, 60,1.0); }
.sh-clouds { background-color: rgba(236, 240, 241,1.0); }
.sh-concrete { background-color: rgba(149, 165, 166,1.0); }
.sh-orange { background-color: rgba(243, 156, 18,1.0); }
.sh-pumpkin { background-color: rgba(211, 84, 0,1.0); }
.sh-pomegranate { background-color: rgba(192, 57, 43,1.0); }
.sh-silver { background-color: rgba(189, 195, 199,1.0); }
.sh-asbestos { background-color: rgba(127, 140, 141,1.0); }

/* ==========================================================================
   11. MEDIA QUERIES
   ========================================================================== */

.sh-hidden {
	display: none !important;
	visibility: hidden;
}

.sh-visible-phone {
	display: none !important;
}

.sh-visible-tablet {
	display: none !important;
}

.sh-hidden-desktop {
	display: none !important;
}

.sh-visible-desktop {
	display: inherit !important;
}

@media (min-width: 768px) and (max-width: 979px) {
	.sh-hidden-desktop {
		display: inherit !important;
	}
	.sh-visible-desktop {
		display: none !important ;
	}
	.sh-visible-tablet {
		display: inherit !important;
	}
	.sh-hidden-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.sh-hidden-desktop {
		display: inherit !important;
	}
	.sh-visible-desktop {
		display: none !important;
	}
	.sh-visible-phone {
		display: inherit !important;
	}
	.sh-hidden-phone {
		display: none !important;
	}
}

.sh-visible-print {
	display: none !important;
}

@media print {
	.sh-visible-print {
		display: inherit !important;
	}
	.sh-hidden-print {
		display: none !important;
	}
}

/* ==========================================================================
   12. EFFECTS
   ========================================================================== */

/* 12.1. EFFECT SMOOTH
   ========================================================================== */

.sh-smooth-2 {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.sh-smooth-5 {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

/* 12.2. EFFECT BLINK
   ========================================================================== */

@-webkit-keyframes blink {
	0% { opacity: 1; }
	80% { opacity: 1; }
	81% { opacity: 0; }
	100% { opacity: 0; }
}
@-moz-keyframes blink {
	0% { opacity: 1; }
	80% { opacity: 1; }
	81% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes blink {
	0% { opacity: 1; }
	80% { opacity: 1; }
	81% { opacity: 0; }
	100% { opacity: 0; }
}

.sh-blink {
	-webkit-animation: blink 1s infinite;
	-moz-animation: blink 1s infinite;
	animation: blink 1s infinite;
}

/* 12.3. EFFECT SPIN
   ========================================================================== */

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(359deg); }
}
@-moz-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(359deg); }
}
@keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(359deg); }
}

.sh-spin {
	-webkit-animation: spin 2s infinite linear;
	-moz-animation: spin 2s infinite linear;
	animation: spin 2s infinite linear;
}

/* 12.4. EFFECT ROTATE
   ========================================================================== */

.sh-rotate-90 {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.sh-rotate-180 {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.sh-rotate-270 {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
}

/* 12.5. EFFECT FLIP
   ========================================================================== */

/* horizontal */

.sh-flip-h {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
	-webkit-transform: scale(-1, 1);
	-moz-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

/* vertical */

.sh-flip-v {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
	-webkit-transform: scale(1, -1);
	-moz-transform: scale(1, -1);
	-ms-transform: scale(1, -1);
	transform: scale(1, -1);
}