/*
 Table Of Contents
 1.) Media Query for Handheld Devices
 2.) Media Query for Tablet
 3.) Media Query for mobile
 ===============================================*/

/*
 1.) Media Query for Handheld Devices
 ===============================*/
/*------------------Desktop css -----------*/
@media only screen and (max-width: 1199px) {
	.header .container {
		max-width: 1000px;
	}
	.navigation li:nth-child(2), .navigation li:nth-child(3), .navigation li:nth-child(4), .navigation li:nth-child(5) {
		width: 100px;
		padding: 28px 10px;
	}
	.navigation li:first-child {
		width: 279px;
		padding: 28px 20px 28px 172px;
	}
	.navigation li:last-child {
		width: 280px;
		background-position: -873px 0;
	}
	.navigation li:last-child:hover {
		background-position: -873px -154px;
	}
	.main-content-wrap::after {
		left: -6%;
		width: 111%;
		height: 94px;
	}
}
/*
 2.) Media Query for Tablet
 ===============================*/
/*------------------Tablet css -----------*/
@media only screen and (max-width: 1024px) {
	.sbOptions {
		margin: 0;
		width: 100%;
	}
	.mid-cntnt {
		-webkit-background-size: cover;
		background-size: cover;
	}
	.no-pot-wrap {
		margin-left: 10px;
		min-width: 217px;
		justify-content: center;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.no-pot-wrap  i {
		width: 62px;
		margin-right: 7px;
	}
	.icon-weapon {
		background-position: -395px -247px;
	}
	.no-pot-wrap:hover .icon-weapon {
		background-position: -324px -248px;
	}
	.no-pot-wrap:hover {
		background: url(../images/arrow-bar-hov.png) center top no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.mid-cntnt:nth-child(2) {
		margin-left: 8px;
	}
	input[type="text"], input[type="email"], select, input[type="password"], input:focus {
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		padding: 10px;
	}
	.sbToggle {
		top: 9px;
	}
	.main-content-wrap::after {
		bottom: -58px;
		left: 0%;
		width: 100%;
		height: 94px;
		background: url(../images/content-end.png) center top no-repeat;
		background-size: contain;
	}
}
@media only screen and (max-width: 992px) {
	.container {
		max-width: 740px;
		padding: 0 10px;
	}
	.main-content-wrap::after {
		bottom: -67px;
	}
	.navigation li:last-child {
		width: 210px;
		background-position: -941px 0;
		padding: 28px 17px;
	}
	.navigation li:last-child:hover {
		background-position: -941px -154px;
	}
	.navigation li:nth-child(2), .navigation li:nth-child(3), .navigation li:nth-child(4), .navigation li:nth-child(5) {
		width: 78px;
	}
	.navigation li:nth-child(4) {
		width: 80px;
	}
	.navigation li a {
		font-size: 1.4rem;
	}
	.navigation li:first-child {
		width: 225px;
		padding: 28px 20px 28px 167px;
	}
	.btn {
		background-size: 100% 100%;
		padding: 28px 30px 21px;
		line-height: 0.8;
	}
	.mid-hate {
		padding: 0 0px 34px;
	}
	.time {
		margin: 23px 0px 0 0;
	}
	.votes-count {
		padding: 7px 0px;
	}
	.votes li {
		padding-right: 5px;
	}
	.side-info {
		padding: 0 5px;
	}
	.btn:hover {
		background: url(../images/btn-hov.png) no-repeat;
		background-size: 100% 100%;
	}
	.social-icons li {
		width: 18%;
	}

	.primary-footer, .foot-list {
		margin-right: 6.5%;
	}
	.buttons-sctn {
		margin: 0;
		text-align: left;
	}
	.buttons-sctn button {
		margin-left: 6px;
		padding: 15px 22px;
	}
}

/*
 3.) Media Query for Mobile
 ===============================*/
/*------------------Mobile  css -----------*/

@media screen and (max-width: 767px) {
	.header {
		padding-bottom: 36px;
		background: url(../images/head.png) center top no-repeat;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.navigation li {
		background: none;
		width: 100% !important;
		padding: 5px !important;
		height: auto !important;
		margin-left: 0;
		text-align: center !important;
	}
	.header nav {
		position: relative;
		min-height: 50px;
	}
	.menu {
		display: inline-block;
		position: absolute;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
		top: 17px;
	}
	.menu span {
		display: block;
		height: 2px;
		width: 30px;
		background-color: #000;
		margin-bottom: 5px;
	}
	.menu span:last-child {
		margin-bottom: 0;
	}
	.navigation {
		display: none;
		position: absolute;
		width: 100%;
		left: 0%;
		background: rgba(45,20,12,0.9);
		z-index: 1;
		padding: 10px;
		top: 54px;
	}
	.navigation li::after {
		display: none;
	}
	.home-content {
		text-align: center;
		padding: 40px 0;
	}
	.logo {
		padding: 0;
		margin-bottom: 50px;
	}
	.slogan-fig img {
		width: 300px;
	}
	.slogan {
		font-size: 2.2rem;
	}
	.pull-left, .pull-right {
		float: none;
	}
	.d-flex {
		flex-flow: column;
	}
	.news-head .pull-left, .votes .pull-left {
		float: left;
	}
	.news-head .pull-right, .votes .pull-right {
		float: right;
	}
	.main-content-wrap::after {
		height: 80px;
		bottom: -67px;
	}
	.main-content-wrap::before {
		bottom: -89px;
	}
	.content-info, .side-info, .primary-footer, .foot-list {
		width: 100%;
		text-align: left;
		margin-right: 0;
	}
	.primary-footer, .foot-list {
		margin-bottom: 20px;
	}
	.footer {
		padding: 0px 20px 30px;
	}
	.text-center-mob {
		text-align: center;
	}
	.events h3::after {
		position: absolute;
		left: 0;
		bottom: -15px;
		content: "";
		width: 100%;
		height: 8px;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.btn {
		padding: 17px 10px 13px;
	}
	.bar::before, .bar a {
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.bar {
		padding: 19px 30px 19px 61px;
	}
	.no-pot-wrap {
		margin-left: 0;
		width: 100%;
		min-width: auto;
		flex-flow: initial;
		margin-bottom: 10px;
	}
	.no-pot-sctn {
		align-items: center;
		margin: 0 auto;
		width: 100%;
		padding: 20px 7px;
		justify-content: initial;
	}
	.mid-hate {
		padding: 0;
	}
	.mid-cntnt {
		margin-bottom: 20px;
		-webkit-background-size: cover;
		background-size: cover;
		width: 100%;
	}
	.mid-cntnt:nth-child(2) {
		margin-left: 0;
	}
	.input-wrap {
		align-items: initial;
	}
	.buttons-sctn {
		text-align: center;
		margin-right: 0px;
	}
	.buttons-sctn button, .loaders {
		width: 100%;
	}
	.load-cntnt span.pull-left {
		float: left;
	}
	.load-cntnt span.pull-right {
		float: right;
	}
	.subpage-info {
		padding: 17px 15px 50px;
	}
	.sbToggle {
		top: 9px;
	}
	.login-form {
		top: 30px;
		width: 100%;
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
		padding: 22px;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.login-form .btns-wrap {
		padding: 0 0px 0 7px;
	}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.slogan-fig img {
		width: 400px;
	}
	.main-content-wrap::after {
		height: 80px;
		bottom: -58px;
	}
}