/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
.but{
	font-size: 19px;
}
.but_os{
font-size: 19px;
}
.but a:hover{
	display: inline-block;
	color:#FFF;
	font-size: 21px;
	margin-top: -2px;
	  -webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}
.but_os a:hover{
	display: inline-block;
	color:#FFF;
	font-size: 21px;
	margin-top: -2px;
	  -webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}
.but a:active{
	font-size: 17px;
	color:#d7b295;
}
.but_os a:active{
	font-size: 17px;
	color:#d7b295;
}
.mainab ul{
font-size: 12px;
}


.when{

	   
	background:url('../images/mara.jpg') 50% 0% no-repeat;

 background-attachment: fixed;
background-size: cover;}



.tvor{
	background:url('../images/mara.jpg') 50% 0% no-repeat;
    background-attachment: fixed;
background-size: cover;}
    
.mat{
	background:url('../images/mara.jpg') 50% 0% no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.rule{
	background:url('../images/mara.jpg') 50% 0% no-repeat;	
    background-attachment: fixed;
    background-size: cover;
}
.reg {
	    
	background:url('../images/mara.jpg') 50% 0% no-repeat;
background-attachment: fixed;
background-size: cover;}
}


/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	
.but{
	font-size: 11px;
	width: 21%;
	padding-right: 0;
}
.mainab ul{
font-size: 10px;
}
.lit{
	font-size: 20px;}
	.but_os{


font-size: 11px;
}
.but a:hover{
	display: inline-block;
	color:#FFF;
	font-size: 12px;
	margin-top: -2px;
	  -webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}
.but_os a:hover{
	display: inline-block;
	color:#FFF;
	font-size: 12px;
	margin-top: -2px;
	  -webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}
.but a:active{
	font-size: 9px;
	color:#d7b295;
}
.but_os a:active{
	font-size: 9px;
	color:#d7b295;
}

.logo{
	margin-top: 10%;
}
}
.podmainab{
	font-size: 20px;
}


/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
.mainab{
	display: none;
}
.top_header{
	display: none;
}
.inf h1{
	font-family: "RobotoSlab",serif;
	font-weight: bold;
	width: 200%;
	margin-left: -50%;
	height: 40px;
	color:#fee8c6;
	font-size: 18px;
	text-transform: uppercase;
	text-align:center;
	padding-top: 5px;

}
.inf h1:hover{
	cursor:pointer;
	font-size: 20px;
	color: #fff;
	 -webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}
.inf h1:active{
	font-size: 16px;
	color: #fee8c6;
	 -webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}
.what{
	

	background:url('../images/mara.jpg') 43% 0%;
	background-attachment: fixed;
	background-size: cover;

}
.when{

	background:url('../images/mara.jpg') 43% 0%;
	background-attachment: fixed;
	background-size: cover;
}

.pol{
background:url('../images/mara.jpg') 43% 0%;
background-attachment: fixed;	
background-size: cover;
}
.rule{
	background:url('../images/mara.jpg') 43% 0%;
	background-attachment: fixed;
	background-size: cover;	
}
.tvor{
	background:url('../images/mara.jpg') 43% 0%;
	background-attachment: fixed;
	background-size: cover;
}

.reg {
	background:url('../images/mara.jpg') 43% 0%;
	background-attachment: fixed;
	background-size: cover;
}
.mat{
	background:url('../images/mara.jpg') 43% 0%;
	background-attachment: fixed;
	background-size: cover;
}

.inf{
	font-size: 16px;
}
.pun{
	font-size: 18px;
}
.im, .imc, .imc1{
	font-size: 17px;
}
.left, .left1, .right{
	width: 100%;
}
}
@media only screen and (max-height : 700px){
	.mainab{
	display: none;
}
.logo{
	margin-top:10%;
}
.podmainab{
	display: block;
}
.downar img{
	margin-top: -20px;
	}
}
@media only screen and (max-height : 600px){
	.mainab{
	display: none;
}
.logo{
	margin-top:5%;
}
.podmainab{
	display: none;
}
.downar img{
	margin-top: -20px;
	}}

@media only screen and (max-height : 405px){
	.mainab{
	display: none;
}

.logo img{
	width: 30%;

	
	
}
.podmainab{
	display: none;
}
.downar img{
	margin-top: -60px;
	}}

@media only screen and (max-height : 200px){
	.mainab{
	display: none;
}

.logo img{
	display: none;
	
	
}
.podmainab{
	display: none;
}
.downar img{
	margin-top: -20px;
	}}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
.mainab{
	display: none;

}

.downar{
	margin-top: -20px;
	}
.podmainab{
	display: block;
}
.top_header{
	display: none;
}
.inf h1{
	font-family: "RobotoSlab",serif;
	font-weight: bold;
	width: 200%;
	margin-left: -50%;
	height: 40px;
	color:#fee8c6;
	font-size: 18px;
	text-transform: uppercase;
	text-align:center;
	padding-top: 5px;

}
.inf h1:hover{
	cursor:pointer;
	font-size: 20px;
	color: #fff;
	 -webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}
.inf h1:active{
	font-size: 16px;
	color: #fee8c6;
	 -webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}

.what{
	

	background:url('../images/mara.jpg') 43% 0%;
	background-attachment: fixed;
	background-size: cover;

}
.when{
	
	background:url('../images/mara.jpg') 43% 0%;
	background-attachment: fixed;
	background-size: cover;
}

.rule{
	background:url('../images/mara.jpg') 43% 0%;
	background-attachment: fixed;
	background-size: cover;	
}
.tvor{
	background:url('../images/mara.jpg') 43% 0%;
	background-attachment: fixed;
	background-size: cover;
}

.reg {
	background:url('../images/mara.jpg') 43% 0%;
	background-attachment: fixed;
	background-size: cover;
}
.mat{
	background:url('../images/mara.jpg') 43% 0%;
	background-attachment: fixed;
	background-size: cover;
}
.inf{
	font-size: 16px;
}
.pun{
	font-size: 18px;
}
.im, .imc, .imc1{
	font-size: 17px;
}
.left, .left1, .right{
	width: 100%;
}

}




/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

 /* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}