@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;}


*{margin:0;padding:0}
a{text-decoration:none}
*{font:normal 17px SolaimanLipi;}
.center{margin:0 auto; text-align:center;}

body {
	font-family: "Solaimanlipi", sans-serif;

}

.grid-container {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-areas:
	'header header header header header header header header'
	'banner banner banner banner banner banner banner banner'
	'search search search search search search search search'
	'context context context context context context context context'
	'content content content content content content content content'
	'con2tex con2tex con2tex con2tex con2tex con2tex con2tex con2tex'
	'cont2 cont2 cont2 cont2 cont2 cont2 cont2 cont2'
	'footer footer footer footer footer footer footer footer';
	max-width:1000px;
	margin:0 auto;
	margin-top:5px;
}


.head{grid-area:header; display: grid; grid-template-columns: 85px auto 85px; background-color: #22BEEF; border-top-left-radius: 5px; border-top-right-radius: 5px; color:#FFFFFF;}
.header-left{ border-radius: 5px 0px 0px 0px; background-color: #22BEEF; text-align:center;}
.header-left img{ width:75px; }
.header-center{ font-size:40px; text-align:center; align-content:center;}
.header-right{ border-radius: 0px 5px 0px 0px; background-color: #22BEEF; align-content:center; padding:10px; }
.login{height: 35px; border:1px solid; border-radius: 5px; background-color: #22BFFF; align-content:center;text-align:center; color:#FFFFFF;}
.banner{ grid-area:banner; margin-top:5px; width:100%;}
.banner img{ width:100%; border-radius: 5px;}
.search{grid-area:search; padding:10px; background-color: #22BEEF; border-radius: 5px; color:#FFFFFF;text-align:center;}
.search p{font-size:25px;}
.selector{padding:5px; border-radius: 5px; background-color:blue; border-color:#FFFFFF; color:#FFFFFF;}
.context{padding: 15px;grid-area:context; font-size:25px; background-color: #22BEEF; border-top-left-radius: 5px; border-top-right-radius: 5px; color:#FFFFFF;margin-top:5px; text-align:center;}
.content{grid-area:content; display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); border:1px solid; border-color: #22BEEF; color:#22BEEF;text-align:center; padding-bottom:20px;}
.secimg{width:135px; height:135px; border:1px solid; border-color: #22BEEF; border-radius: 50%; margin:0 auto; margin-top:20px; background-size: 100%; background-repeat: no-repeat;overflow:hidden;}
.mqimg{width:135px; height:135px; border-radius: 50%; margin:0 auto; background-size: 100%; background-repeat: no-repeat;}
.con2tex{padding: 15px;grid-area:con2tex; font-size:25px; background-color: #22BEEF; border-top-left-radius: 5px; border-top-right-radius: 5px; color:#FFFFFF;margin-top:5px; text-align:center;}
.cont2{grid-area:cont2; display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); border:1px solid; border-color: #22BEEF; color:#22BEEF;text-align:center; padding-top:20px; padding-bottom:20px;}
.bsecimg{width:135px; height:135px; border:1px solid; border-color: #22BEEF; border-radius: 5px; margin:0 auto; margin-top:10px; background-size: 100%; background-repeat: no-repeat;}
.footer{padding: 5px;grid-area:footer; font-size:25px; background-color: #22BEEF; color:#FFFFFF;margin-top:5px; text-align:center;}
.btn{height: 35px; width:75px; border-radius: 5px; background-color:blue; color:#FFFFFF;}


@media only screen and (max-width: 600px) {
  .head{grid-template-columns: 1fr;}
  .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;}
}