.sidebar 
	padding: 0
	height: 100%
	float: left
	min-height: 1px
	overflow: auto
	vertical-align: top
	display: inline-block
	padding-left: 10px
	background-color: var(--bgdark)

	@media (min-width: 768px)
		width: 25%

	&-scrolling 
		width: 100%
		position: unset

	&-fixed 
		position: fixed
		bottom: 0px
		width: 50%

		@media (min-width: 768px)
			width: calc(25% - 5px)

	&-menu
		list-style-type: none
		padding-left: 20px
		margin-bottom: 40px

		li
			font-size: 0.8rem
			padding-top: 8px
			padding-bottom: 8px
			border: 1px solid var(--bgdark)
			padding-left: 20px
			margin: 0
			cursor: pointer

			a
				color: var(--textlinkdark)

			&:hover
				border: 1px solid var(--accent)

				&:before, a
					color: var(--textlink)

	&-content 			
		background-color: var(--bgdark)
		border-right: 5px solid var(--accent)
		padding-top: 30px
		padding-left: 10px
		@media (min-width: 992px)
			padding-left: 20px
			padding-right: 20px

	&-offcanvas 
		@media screen and (max-width: 767px)
			left: -46% !important

	hr 
		border-top: 1px solid var(--accent)

	&-game-info 
		background-color: var(--bgdarker)
		border: 1px solid var(--accent)
		margin-bottom: 1rem
		overflow: hidden

		p
			margin: 0

		.sidebar-game-platform
		    position: absolute
		    display: inline-block
		    box-shadow: 0px 0px 10px rgba(0,0,0,0.9)
		    -webkit-transform: rotate(-45deg)
		    -moz-transform: rotate(-45deg)
		    -o-transform: rotate(-45deg)
		    -ms-transform: rotate(-45deg)
		    top: -50px
		    right: 20px
		    width: 25px

		    @media (min-width: 768px)
			    top: -60px
			    right: 35px
			    width: 40px

	&-header img
		float: right

	&-heading 
		font-weight: bold
		font-size: 1.1rem
		letter-spacing: 0.1em
		text-transform: uppercase
		padding-top: 10px
		padding-left: 10px
		margin-top: 0


	&-date 
		color: var(--textlinkdark)
		font-size: 0.7rem


.row-offcanvas
	@media screen and (max-width: 767px)
		position: relative
		transition: all 0.25s ease-out
		opacity: 1

	&-right
		.sidebar-offcanvas
			@media screen and (max-width: 767px)
				right: -50%
		@media screen and (max-width: 767px)
			right: 0

	&-left
		.sidebar-offcanvas
			@media screen and (max-width: 767px)
				left: -48%
		@media screen and (max-width: 767px)
			left: 0


	&-right.active
		@media screen and (max-width: 767px)
			right: 50%
	&-left.active
		@media screen and (max-width: 767px)
			left: 50%

.sidebar-offcanvas
	@media screen and (max-width: 767px)
		position: absolute
		top: 0
		width: 50%