/**
* Файл со стилями для адаптива
* Строится по принципу mobile first,
* используется bootstrap медиа-запросы
*  
* Breakpoints:
* - $screen-lg: 1200px
* - $screen-md: 992px
* - $screen-sm: 768px
* - $screen-xs: 480px 
*/

/* == Default: phone */

/* bootstrap need box-model */
.img-thumbnail,
[class^="col-"],
[class*=" col-"],
.container,
.container-fluid,
.row {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* header */
#header .logo {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

#header .header-info {
	float: none;
	margin: 20px auto;
	width: 200px;	
}

#header .header-info:after {
	content: '';
	display: table;
	clear: both;
}

#header .menu {
	margin-top: 0;
}

/* == Breakpoint: Only Extra Small */
@media (max-width: 767px) {
	
	/* layout */
	#footer {
		margin: 0;
		height: auto;
	}
	
	#footer .justify-col {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	#space-for-footer {
		height: 0;
	}
	
	/* catalog */
	.catalog-list .item.odd,
	.catalog-list .item.even
	{
		width: 100%;
		margin: 0 0 1.5em;
	}
}

/* == Breakpoint: Small screen / tablet */
@media (min-width: 768px) {
  
	/* header */
	#header .logo {
		float: left;
	}
	
	#header .header-info {
		width: auto;
		float: right;
		margin: 0;
	}
	
	#header .header-info:after {
		display: none;
	}
}


/* == Breakpoint: Medium screen / desktop */
@media (min-width: 992px) {
  
  /* header */
  #header .menu {
	  margin-top: 45px;
  }
  
}

/* == Default: Large screen / wide desktop */
@media (min-width: 1200px) {
	
}