@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:url('../font/open-sans-v15-latin-regular.eot');src:local('Open Sans Regular'),local('OpenSans-Regular'),url('../font/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'),url('../font/open-sans-v15-latin-regular.woff2') format('woff2'),url('../font/open-sans-v15-latin-regular.woff') format('woff'),url('../font/open-sans-v15-latin-regular.ttf') format('truetype'),url('../font/open-sans-v15-latin-regular.svg#OpenSans') format('svg')}
body{font-family:'Open Sans',sans-serif;margin:0;}
.content{background:#CCC;}
.middle{max-width:1200px;margin:0 auto;padding:25px 15px;background:#F1F1F1;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-gap:5px;align-items:stretch;margin-top:20px;}
.post{border:1px solid #ccc;overflow:hidden}
.cover{padding:5px}
.cover > a > img{max-width:240px;height:280px;width:100%;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;transition:all 0.3s;}
.cover > a > img:hover{-moz-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1);}
.text {padding:0 10px 10px}
.text > a{text-decoration:none;color:#333;}
.text > a > h3{font-size:14px;font-weight:600;}
.TopNav{
background: #2196f3;
color: #FFF;
padding: 10px;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.8s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
}

#mAinZ {
transition: margin-left .8s;
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.oprak{
 margin-top:30px;
}
.oprak > ul {
max-width: 355px;
width: 100%;
display: inline-block;
padding: 5px 15px;
}
.oprak > ul > li {
list-style-type: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.5em;
}
.oprak > ul > li:before{
content: url("/templates/3coloumb-azalea/static/images/ico.png");
margin-right: 10px;
}
.oprak > ul > li > a{
color: #2196f3;
text-decoration: none;
font-size: 14px;
}
.oprak > h3, .middle > h3 {
border-bottom: 1px solid #888;
margin-bottom: 0px;
}
@media only screen and (max-width: 486px) {
.post {
text-align: center;
}
.oprak > ul { 
padding:5px; display:block;
}
}