@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
/* BUTTONS */
#contacts{
	width:100%;
	display: none;
	position: fixed;
	padding: 0px;
	z-index: 1;
}
.tel-button{
	width:100%;
	display: block;
	cursor: pointer;
	text-decoration: none;
	background-color: yellow;
	color: black;
	padding-top: 7px;
	padding-bottom: 7px;
	font-size: 24px;
}
.inst-button{
	width: 100%;
	display: block;
	cursor: pointer;
	text-decoration: none;
	background-color: yellow;
	color: black;
	padding-top: 7px;
	padding-bottom: 7px;
	font-size: 24px;
}
/* MENU */
.main-menu
{
	display: flex;
	position:static;
	height:50px;
    list-style-type: none;
	justify-content:center;
	margin:0 5px;
    padding: 0px;
    text-transform:uppercase;
    transition: top 400ms linear;
}
.main-menu li
{
    display: block;
	position:relative;
    text-align:center;
	width:100%;
    padding: 0px;
	z-index:3;
	background-color:red;
}
.main-menu li:hover
{
	background-color:rgb(240, 100, 20);
}
.main-menu a
{
	display: block;
	line-height:50px;
    text-decoration: none;
    font-size: 14px;
    color:white;
}
.submenu
{
    padding: 0px;
    list-style-type: none;
    display: none;
}
.submenu li
{
    padding: 0px;
    position: relative;
	width:100%;
	background-color:grey;
}
.main-menu li:hover .submenu
{
    display: block;
}
.wsub
{
    display: none;
}
.wsub li
{
    display: block;
    padding: 0px;
}
.submenu li:hover .wsub
{
    list-style-type: none;
    padding: 0px;
    left:250px;
    top:0px;
    position: absolute;
    display: block;
}
.for-mobile
{
    display: none;
    position: relative;
    background-color: red;
    height: 50px;
    margin:0 5px;
    z-index:10;
    flex-direction: row;
    justify-content: center;
}
.open-button
{
    position: relative;
    width:100%;
    height: 50px;
    border:none;
    line-height: 0;
    text-align: center;
    cursor: pointer;
    background-color: red;
    color:white;
    text-transform: uppercase;
	font-size:22px;
	font-family: 'Open Sans Condensed';
}
body
{
  margin:0;
  font-family: 'Roboto';
  background-image:url(chalkboard.jpg);
  color:white;
  font-size:14px;
}
a
{
	color:white;
}
.bar
{
	background-color:rgba(255,40,0,1);
	text-align:center;
	color:white;
	padding:4px;
	margin:5px 5px 0px 5px;
}
.bar h1
{
	color: white;;
	padding:10px;
	width:30%;
	margin:0 auto;
	font-size:30px;
	line-height:34px;
}
/* T-SHIRTS */
.t-shirts-box
{
  display: grid;
  grid-template-columns:repeat(3, 1fr);
  grid-gap:5px;
  margin:5px;
}
.t-shirt
{   display:grid;
	background-color:rgb(255, 40, 0);
    box-sizing: border-box;
	grid-gap:5px;
	padding:5px;
	margin:0px;
	text-align:center;
}
.t-shirt img
{
	width:100%;
	margin:0 auto;
}
.t-shirt span
{
	display:inline-block;
	color:white;
	line-height:18px;
	font-size:14px;
	margin:0 auto;
	width:100%;
}
/* GOODS */
.goods-content
{
  display: grid;
  grid-template-columns:1fr 1fr;
  grid-gap:5px;
  margin:5px;
}
.goods-content div
{
  display: flex;
  flex-direction: column;
  padding:15px;
  background-color:rgba(0, 0, 0, 0.4);
  border:1px solid grey;
  justify-items: center;
  align-items: top;
  font-size:16px;
}
.goods-content img
{
	width:65%;
}
.goods-content span
{
	color:white;
	line-height:18px;
	padding:10px;
	align-items: top;
}
/* T-SHIRTS_SLIDER */
.slider
{
	display:flex;
	align-items:center;
	justify-items:center;
	justify-content:center;
	flex-direction: column;
	margin:5px;
	padding:5px;
	grid-gap:5px;
	background-color:rgba(0, 0, 0, 0.4);
    font-size:16px;
    border:1px solid grey;
}
.top-img
{
  width:100%;
}
.container
{
    display: flex;
    overflow: hidden;
    justify-content: flex-start;
	align-content: flex-start;
    width:400px;
	margin:0;
	padding:0;
}
#slider-news
{
    display: grid;
    position: relative;
    justify-content: flex-start;
    align-content: flex-start;
    grid-gap: 0;
    grid-template-columns: repeat(2, 400px);
    left:0px;
	margin:0;
	padding:0;
    transition: left 500ms;
}
#slider-news_1
{
    display: grid;
    position: relative;
    justify-content: flex-start;
    align-content: flex-start;
    grid-gap: 0;
    grid-template-columns: repeat(2, 400px);
    left:0px;
	margin:0;
	padding:0;
    transition: left 500ms;
}
#slider-news img
{
    width:400px;
	margin:0;
	padding:0;
}
#slider-news_1 img
{
    width:400px;
	margin:0;
	padding:0;
}
.slide
{
    display: grid;
	margin:10px auto;
    grid-template-columns: 35px 35px;
    grid-template-rows: 35px;
    grid-gap:10px;
    justify-content: center;
}
.slide button
{
	font-size:22px;
	color:grey;
	padding:0px;
	margin:0px;
border-radius:5px;
}
/* FOOTER */
#footer div
{
	text-align:center;
}
#footer span
{
	display:block;
}
.like-button
{
	cursor: pointer;
    border: 1px solid skyblue;
	padding:0px;
    width:100px;
	height:30px;
	background-color:#ff2b2b;
	color:white;
}
/* FOR_GADJETS */
@media screen and (max-width: 1080px)
{
.t-shirts-box
{
	grid-template-columns: 1fr;
}
.main-menu
{
	position: relative;
    top:-500px;
	margin:0 5px;
    height: 500px;
    flex-direction:column;
    justify-content:flex-start;
    z-index: 3;
}
.for-mobile
{
    display: flex;
}
.goods-content
{
	grid-template-columns:1fr;
	text-align:left;
	font-size:16px;
}

.goods-content img
{
	width:100%;
}
.goods-content span
{
	padding-left:0px;
}
#body-news, #t-shirts, #footer, #goods
{
	position:relative;
	top:-500px;
}
.ism-slider {display:none;}
.bar h1
{
	font-size:20px;
	display:inline;
}
.slider
{
grid-template-columns:1fr;
}
#contacts{
	display: grid;
	grid-gap: 3px;
	grid-template-columns: repeat(2,1fr);
	justify-content: center;
	bottom: 3px;
}
.tel-button::before{
	content: '';
	display: inline-block;
	background-size: contain;
	width:35px;
	height: 35px;
	margin-bottom: -5px;
	margin-right: 5px;
	margin-left: 5px;
	background-image: url(phone-call.png);
}
.inst-button::before{
	content: '';
	display: inline-block;
	background-size: contain;
	width:35px;
	height: 35px;
	margin-bottom: -5px;
	margin-right: 5px;
	margin-left: 5px;
	background-image: url(inst.png);
}
#slider-news
{
    grid-template-columns: repeat(2, 300px);
}
#slider-news img
{
    width:300px;
}
#slider-news_1
{
    grid-template-columns: repeat(2, 300px);
}
#slider-news_1 img
{
    width:300px;
}
.container
{
	width:300px;
}
}