@font-face{font-family:"SolaimanLipi"; src:url("fonts/SolaimanLipi.eot") format("eot"),	url("fonts/SolaimanLipi.svg#SolaimanLipi") format("svg"), url("fonts/SolaimanLipi.ttf") format("truetfe"), url("fonts/SolaimanLipi.woff") format("woff");}
*{margin:0;padding:0;text-decoration:none;list-style-type:none;font-family:SolaimanLipi;transition:0.5s;}
h1, h2, h2, h3{color:#22BEEF;}p{color:#22BEEF; font-size:17px;}a{font-family:SolaimanLipi;color:#22BEEF; }


#container{
	margin:0 auto;
	margin-top:10px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.0);
	max-width:980px;
	display: grid;
	grid-template-columns: 1fr;
}
.header{
	background-color:#22BEEF;
	display:grid;
	grid-template-columns: 10fr 1fr;
	align-items:center;
	padding:10px;
	border-radius:5px 5px 0px 0px;
	margin-bottom:3px;
}
.header h1, p{color:#FFFFFF;}
.logo{width:60px; height: 60px; float:left; margin:0px 15px 0px 0px;}
.site_name{font:bold 35px SolaimanLipi;	color:#FFFFFF; transition:color 0.5s;}
.login{text-align:center; border:1px solid; border-radius:5px; border-color: #FFFFFF; font-size:20px; color:#FFFFFF;}
.login:hover{ background-color: #00F; font-size:20px; color:#FFFFFF;}
.banner{border-radius:5px; margin-bottom:3px;}
.holding{text-align:center; color:#FFFFFF; font-size:25px;}
.holding_data{background-color:#22BEEF; border: 1px solid; border-color: #22BEEF; padding: 10px;  border-radius:5px 5px 0px 0px;}
.select{border:1px solid; border-color:#22BEEF;margin-bottom:3px;}
.selector{font-size:18px; border: 2px solid; border-color: #22BEEF; margin: 10px; padding: 5px;  border-radius:5px;}
.btn{background-color: green; color:#FFFFFF;}
.parisad_all{text-align:center; color:#FFFFFF; font-size:25px; }
.parisad{background-color:#22BEEF; border: 1px solid; border-color: #22BEEF; padding: 10px;  border-radius:5px 5px 0px 0px;}
.parisad_idt{
	color: #22BEEF; border:1px solid; border-color:#22BEEF;margin-bottom:3px;
	padding: 10px;
	display: grid;
	grid-gap:15px;
	grid-template-columns: repeat(auto-fit, 200px);
	justify-content:space-evenly;
}
.officer_idt{height: 230px; border:1px solid; border-color:#22BEEF; border-radius:5px; }
.idt_photo{background-image: url("img/parisad/upinfo.png"); background-size: 100%; margin:0 auto; height: 170px; width: 170px; border:1px solid; border-color:#22BEEF; border-radius:50%; margin-top: 10px;}
.up_seba{text-align:center; color:#FFFFFF; font-size:25px; }
.parisad{background-color:#22BEEF; border: 1px solid; border-color: #22BEEF; padding: 10px;  border-radius:5px 5px 0px 0px;}
.parisad_serv{
	color: #22BEEF; border:1px solid; border-color:#22BEEF;margin-bottom:3px;
	padding: 10px;
	display: grid;
	grid-gap:15px;
	grid-template-columns: repeat(auto-fit, 150px);
	justify-content:space-evenly;
}
.serv{height: 120px; border:1px solid; border-color:#22BEEF; border-radius:5px; }
.serv_idt{background-image: url("img/parisad/character.png"); background-size: 100%; margin:0 auto; height: 90px; width: 130px; }
.footer{background-color:#22BEEF; text-align:center; color:#FFFFFF; padding:15px; border-radius:0px 0px 5px 5px;}


@media only screen and (max-width: 600px) {
  .header{grid-template-columns: 1fr;}
  .logo{float:none; margin:0 auto;}
  .login{margin-top:10px; padding:5px; background-color:#00F;}
  .header-left {grid-column: 1 / span 1; text-align:center;}
  .header-left img{ width:60px;}
  .header-center {grid-column: 1 / span 1;}
  .header-right {grid-column: 1 / span 1; text-align:center;}
  .banner img {height:200px;}
  .selector {width:100%;}
}

@media only screen and (min-width: 600px) {

}

@media only screen and (min-width: 768px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 1;}
  .item3 {grid-area: 2 / span 4;}
  .item4 {grid-area: 2 / span 1;}
  .item5 {grid-area: 3 / span 6;}
}