for n in range(1, 6)
    h{n}
        padding-bottom 16px
        fs (2.3rem - (n * 0.20rem))
        font-weight 100

@media (max-width: 500px) and (min-width: 100px), (max-width: 500px) and (min-height: 200px) {

.only_desktop_block
  display block !important
  @media(max-width 768px)
    display none !important

.only_desktop_inline_block
  display inline-block !important
  @media(max-width 768px)
    display none !important

.only_mobile_block
  display none !important
  @media(max-width 768px)
    display block !important

.only_mobile_inline_block
  display none !important
  @media(max-width 768px)
    display inline-block !important

  <-- her i am use 2 space
	<-- her i am use one tab

.star
	.star-el
		+icon("star","icon")
	.star-el
		+icon("star","icon")
	.star-el
		+icon("star","icon")
	.star-el
		+icon("star","icon")
	.star-el
		+icon("star","icon")

$('.star .star-el').hover(function () {
	if (!$(this).parent().hasClass('fix-rating')) {
		$('.star .star-el').removeClass('star--active');
		$(this).addClass('star--active');
		$(this).prevAll('.star-el').addClass('star--active')
	}
});
$('.star .star-el').click(function () {
	$(this).parent().toggleClass('fix-rating');
	$(this).addClass('star--active');
	$(this).prevAll('.star-el').addClass('star--active')
});

.star--active
	fill red

.star
	f()
	.icon
		size 40px
		cp()

$breakpoint = {
  tablet : 640px,
  laptop : 1000px,
  desk : 1260px,
  large : 1600px
}

$media = {
  mobile : "(max-width: "+unit(($breakpoint.tablet - 1), 'px')+")",
  tablet : "(min-width: "+unit($breakpoint.tablet, 'px')+") and (max-width: "+unit(($breakpoint.laptop - 1), 'px')+")",
  laptop : "(min-width: "+unit($breakpoint.laptop, 'px')+") and (max-width: "+unit(($breakpoint.desk - 1), 'px')+")",
  desk  : "(min-width: "+unit($breakpoint.desk, 'px')+") and (max-width: "+unit(($breakpoint.large - 1), 'px')+")",
  large : "(min-width: "+unit($breakpoint.large, 'px')+")"
}
// will produce rules like this
// $media.tablet = "@media (min-width: 640px) and (max-width: 999px)"

// ===
// Usage example
// ===
// html
//   font-size 16px
//   @media $media.mobile
//     font-size 12px

// ===
// Generate visibility classes
// ===
for key, value in $media
  .{key}-shown
    display none !important

  .{key}-hidden
    display block !important


  @media value
    .{key}-shown
      display block !important

    .{key}-hidden
      display none !important

// This will produce
// .mobile-shown { display: none !important; }
// .mobile-hidden { display: none !important; }

// @media (max-width: 639px) {
//   .mobile-shown { display: block !important; }
//   .mobile-hidden { display: none !important; }
// }
// ... and others

// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
$screen-xs ?=                   480px
$screen-phone ?=                $screen-xs

// Small screen / tablet
$screen-sm ?=                   768px
$screen-tablet ?=               $screen-sm

// Medium screen / desktop
$screen-md ?=                   992px
$screen-desktop ?=              $screen-md

// Large screen / wide desktop
$screen-lg ?=                   1200px
$screen-lg-desktop ?=           $screen-lg

// So media queries don't overlap when required, provide a maximum
$screen-xs-max ?=               ($screen-sm - 1)
$screen-sm-max ?=               ($screen-md - 1)
$screen-md-max ?=               ($screen-lg - 1)


// Variables need to be passed after @media declarations
// Media Helpers

minw(w)
  '(min-width:' + w +')'

maxw(w)
  '(max-width:' + w +')'

min-max(min-w, max-w)
  minw(min-w) +  ' and ' + maxw(max-w)

screen-min(w)
  'screen and ' + minw(w)

screen-max(w)
  'screen and ' + maxw(w)

screen-min-max(min-w, max-w)
  'screen and ' + min-max(min-w, max-w)


// Commonly used @media variables
// Min
$media-min-phone ?= minw($screen-xs)
$media-min-tablet ?= minw($screen-sm)
$media-min-desktop ?= minw($screen-md)
$media-min-lg-desktop ?= minw($screen-lg)
$media-min-grid-float-breakpoint ?= minw($grid-float-breakpoint)

// Max
$media-max-sm ?= maxw($screen-sm)

// Max -1
$media-max-phone ?= maxw($screen-xs-max)
$media-max-tablet ?= maxw($screen-sm-max)
$media-max-desktop ?= maxw($screen-md-max)

// Screen and min
$media-screen-min-phone ?= screen-min($screen-xs)
$media-screen-min-tablet ?= screen-min($screen-sm)
$media-screen-min-desktop ?= screen-min($screen-md)
$media-screen-min-lg-desktop ?= screen-min($screen-lg)

// Min Max
$media-tablet ?= min-max($screen-sm, $screen-sm-max)
$media-desktop ?= min-max($screen-md, $screen-md-max)

// Font Family
// TODO
default-font-family = -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;

// Font Sizes
/*
 * 1.1^ 6 = 1.77    extra-large
 * 1.1^ 5 = 1.61
 * 1.1^ 4 = 1.46
 * 1.1^ 3 = 1.33    large
 * 1.1^ 2 = 1.21
 * 1.1^ 1 = 1.10
 * 1.1^ 0 = 1.00    base
 * 1.1^-1 = 0.90
 * 1.1^-2 = 0.83
 * 1.1^-3 = 0.75    small
 * 1.1^-4 = 0.68
 * 1.1^-5 = 0.62
 * 1.1^-6 = 0.56    extra-small
 */
base-font-size = 1rem
extra-large-font-size = base-font-size * 1.77
large-font-size =       base-font-size * 1.33
small-font-size =       base-font-size * 0.75
extra-small-font-size = base-font-size * 0.56

// Size
display-height = 480px

// Line height
base-line-height = 1.5
heading-line-height = 1.2

// Other Sizes
base-border-radius = 3px
base-spacing = base-line-height * 1em
large-spacing = base-spacing * 3
small-spacing = base-spacing / 3
base-z-index = 0

// Colors
default-font-color = rgba(0, 0, 0, 0.87)
theme-color = #0094aa

shadow(depth = 1)
  if      depth == 1
    box-shadow: 0  2px  5px 0 rgba(0, 0, 0, .16), 0  2px 10px 0 rgba(0, 0, 0, .12)
  else if depth == 2
    box-shadow: 0  8px 17px 0 rgba(0, 0, 0,  .2), 0  6px 20px 0 rgba(0, 0, 0, .19)
  else if depth == 3
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19)
  else if depth == 4
    box-shadow: 0 16px 28px 0 rgba(0, 0, 0, .22), 0 25px 55px 0 rgba(0, 0, 0, .21)
  else if depth == 5
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0,  .2), 0 40px 77px 0 rgba(0, 0, 0, .22)
  else if depth == -1
    box-shadow: 0  2px  5px 0 rgba(0, 0, 0, .16) inset, 0  2px 10px 0 rgba(0, 0, 0, .12) inset
  else if depth == -2
    box-shadow: 0  8px 17px 0 rgba(0, 0, 0,  .2) inset, 0  6px 20px 0 rgba(0, 0, 0, .19) inset
  else if depth == -3
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24) inset, 0 17px 50px 0 rgba(0, 0, 0, .19) inset
  else if depth == -4
    box-shadow: 0 16px 28px 0 rgba(0, 0, 0, .22) inset, 0 25px 55px 0 rgba(0, 0, 0, .21) inset
  else if depth == -5
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0,  .2) inset, 0 40px 77px 0 rgba(0, 0, 0, .22) inset
  else
    box-shadow: none

@require '../styles/_variables.styl'
@require './_shadow'

card(depth = 1)
  shadow(depth)
  padding: base-spacing
  border-radius: base-border-radius

  &:hover
    shadow(depth + 1)

/*----------  utility classes  ----------*/
.responsive-iframe
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	iframe
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		height: 100%;
		width: 100%;
		border: 0;

.tab__head
	.tab__head-el.tab__head-el--active(data-tab="1") Таб 1
	.tab__head-el(data-tab="2") Таб 2
	.tab__head-el(data-tab="3") Таб 3
.tab__cont.tab__cont--active(data-tab="1")
	.tab__wrap
		p Информация для Таб 1
.tab__cont(data-tab="2")
	.tab__wrap
		p Информация для Таб 2
.tab__cont(data-tab="3")
	.tab__wrap
		p Информация для Таб 3

var tabConstruct = function (elHead,elTab){
	$("."+elHead).click(function () {
		var elHeadActive = elHead+'--active';
		var elTabActive = elTab+'--active';

		$("."+elHead).removeClass(elHeadActive);
		$(this).addClass(elHeadActive);
		var curentTab = $(this).data('tab');
		$("."+elTab).each(function () {
			$(this).removeClass(elTabActive);
			if ($(this).data('tab') == curentTab) {
				$(this).addClass(elTabActive);
			}
		})
	});
};

tabConstruct('tab__head-el','tab__cont');

.tab__cont
	display: none
.tab__cont--active
	display: block
.tab__head-el
	cp()

.button
	display inline-block
	border none
	color #fff
	text-decoration none
	background-color accentColor
	padding 15px 45px
	font-size 13px
	text-transform uppercase
	font-weight 600
	letter-spacing 3px
	border-radius 2px
	text-align center
	position relative
	outline none
	transition background-color .1s ease
	&::after
		transition background-color .2s ease
		position absolute
		content ''
		height 4px
		bottom 0
		width 100%
		background-color darken(accentColor, 50%)
		opacity .18
		border-bottom-left-radius 2px
		border-bottom-right-radius 2px
		left 0
	&:focus, &:hover
		text-decoration none
		color #fff
	&:hover
		background-color: lighten(accentColor, 5%)
		&::after
			opacity .22
	&:active
		background-color darken(accentColor, 5%)
		&::after
			opacity .32