@import url('https://fonts.googleapis.com/css?family=Oswald');
* { box-sizing: border-box; }
body{
	font-family: 'Oswald', sans-serif;
}
a, a:hover,
a:active {
	color: #fff;
	outline: none;
	text-decoration: none !Important;
	underline: none !Important;
}
header a{
	font-family: 'Oswald', sans-serif;
	display: block;
	padding: 10px 0;
	color: #980d13;
	background: #ffdd00;
	border: none;
	margin: 20px auto 0;
	text-align: center;
	width: 200px;
}
header a:hover{
    background: #f0d310;
    color: #98202e;
}
.content-sec{
	display: none;
}
.extended{
	display:none;
}
.not-extended{
	display:block;
}
.active .not-extended{
	display:none;
}
.active .extended{
	display:block;
	cursor: pointer;
}
.logo img{
	width: 230px;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.c-code span{
	color: #980d13;
	background: #ffdd00;
	display: block;
	position: relative;
	line-height: 30px;
	text-transform: uppercase;
}
.c-code{
	position: absolute;
	bottom: 10px;
	width: 135px;
	height: 60px;
	text-transform: none;
}
.content-in-box{
	background: url(/images/box/tranback.png);
    background-repeat: no-repeat;
	width:170px;
	height: 170px;
	padding: 15px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.grid{
	max-width: 1020px;
	margin: auto;
	width:100%;
	margin-top: 80px;
}
/* ---- isotope ---- */
/* clear fix */
.grid:after {
	content: '';
	display: block;
	clear: both;
}
/* ---- .element-item ---- */
.element-item  img{
	position: relative;
	width: 170px;
	height: 170px;
	padding: 10px;
}
.element-item img:hover {
	transition: 0.8s;
    cursor: pointer;
	padding: 5px;
}
.modal-content{
	text-align: center;
}
.modal-header{
	border-bottom: none;
}
.modal-footer{
	border-top: none;
	padding: 0px 15px 15px 0px;
}
.modal-body{
	padding: 0px;
}
.modal-dialog {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
}
.modal-content {
    margin: 0 auto;
    color:#000;
}
.btn-default {
    color: #000;
    background-color: #fff;
    border-color: #ccc;
    font-size: 12px;
}
@media (max-width: 1199px) { 
.grid {
    max-width: 850px;
	}
}
@media only screen and (max-width: 991px) {
	.grid {
    max-width: 680px;
	margin-top: 40px;
	margin-bottom: 40px;
	}
}
@media only screen and (max-width: 767px) {
body{
	background-image: none !Important;
}
.grid {
    max-width:510px;
	}
}
@media only screen and (max-width: 575px) {
.grid {
    max-width:340px;
	}
}
@media only screen and (max-width: 360px) {
.grid {
    max-width:170px;
	}
}