/******HEADER***
header{
 z-index:-1;
 position: relative;
 text-align: center;
 padding:10px 5px;
 height: 10px;
 color: white;
 overflow: hidden;
  background: #C04848;
  background: linear-gradient(
  rgba(0, 0, 0, 0.6),
  rgba(0, 0, 0, 0.7)
  background-size: cover;
  ), url("https://ik.imagekit.io/ikmedia/blog/hero-image.jpeg");
  background-repeat: no-repeat;
}

header .post-title{
  margin-top:30px;
}

header .name.post{
  color:#FFF;
  font-weight: bold;
  font-size:1.2em;
  text-align: center;
  padding-left:10px;
  text-transform: uppercase;
  position:static;
  transform: none;

}

header .name span{
  font-size:0.6em;
  text-transform: capitalize;
  display:block;
  margin-top:4px;
  letter-spacing: 1px;
}

header .name{
  color:#FFF;
  font-weight: bold;
  font-size:1.7em;
  text-transform: uppercase;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*****HEADAER*****/
header .actions{
	position:absolute;
	bottom:10px;
	right:10px;
  width:100%;
  text-align: right;
}

header .actions .action-item{
	background:var(--primaryColor);
	color:#FFF;
	font-weight: bold;
	font-size: 1em;
  height:35px;
	text-transform: uppercase;
}

header .actions #search-item{
  width:40%;
  border:2px solid var(--primaryColor);
  border-radius: 5px;
  position:relative;
  padding:0px;
}

header .actions #search-item button{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  padding:1px 7px;
  color: #FFF;
  font-size:0.8em;
  text-transform: uppercase;
  font-weight: bold;
  background:var(--primaryColor);
}


/****NAV***/
nav{
  text-align: center;
  display: block;
  /* margin-top:70px; */
  margin-bottom:10px;
}
nav li{
  list-style: none;
  display: inline-block;
  border-radius:10px;
  font-weight: bold;
  text-transform: uppercase;
  font-size:0.8em;
  padding:5px 10px;
  color:#FFF;
  background: var(--secondaryColor);
}

/******HOME******/
#home #banner{
  position: relative;
  height:400px;
  overflow: hidden;
  margin-bottom:10px;
}

@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(1,1);
    }
}

#home #banner img{
  width:100%;
  height:100%;
  object-fit:cover;
  animation: zoominoutsinglefeatured 6s infinite ;
}

#home #banner .title{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:#000;
  opacity: 0.6;
  color:#FFF;
  font-weight: bold;
  text-transform: uppercase;
  font-size:1.2em;
  padding:10px 10px;
  margin:0;
  text-align: center;
}


#home #tags .tag{
  list-style: none;
  display: inline-block;
  background:var(--primaryColor);
  color:#FFF;
  border-radius: 10px;
  padding:5px 10px;
  text-transform: uppercase;
  margin:2px 5px 8px 4px;
  font-weight: bold;
  font-size:0.7em;
}


section#home .post{
  overflow: hidden;
  border-radius: 10px;
  color:#444;
  box-shadow: 5px 5px #888888;
  background: #FFF;
  margin-bottom:10px;
  font-size:0.9em;
  position: relative;
  height:150px;
}

section#home .post img{
  width:30%;
  height: 100%;
  float:left;
  margin-right:5px;
  object-fit:cover;
}


section#home .post .title{
  text-align: left;
  margin:10px 0px 0px 2px;
  font-weight: bold;
  font-size:1.3em;
  text-transform: uppercase;
}

section#home .post .desc{
  text-align: justify;
  font-size:0.9em;
  margin:5px 0px 0px 2px;
  padding:3px 5px;
}


/******MAIN - HOME PAGE*****/

#main{
  z-index:100;
}

#main .row > div{
  padding:2px 4px;
  margin-top:-4px;
}

#featured-post{
  height:220px;
  position: relative;
  overflow: hidden;
  background:#FFF;
  border-radius: 5px;
  display: block;
  z-index:100;
  margin:-100px auto 5px auto;
  border:1px solid #FFF;
}

#featured-post img{
  width:40%;
  height:100%;
  float:left;
  object-fit: cover;
  margin-right: 10px;
}

#featured-post .data{
  padding:5px 10px 15px 5px;
}

#featured-post .data,
#featured-post .data .title,
#featured-post .data .desc,{
  float: left;
}

#featured-post .data .title{
  margin:1px 0px 2px 0px;
  font-size:1em;
  font-weight: bold;
  text-transform: uppercase
}

#featured-post .data .desc{
  margin:1px 0px 2px 0px;
  font-size:0.8em;
  text-align: justify;
  padding-top:5px;
}

#main .set{
  min-height:100px;
  width:100%;
  padding:5px;
  border-radius: 2px;
  background: #FFF;
}

#main .set:nth-child(2),
#main .set:nth-child(3){
  padding:0;
  background: none;
}

#main .set .post{
  overflow: hidden;
  width:100%;
  height:150px;
  border:0;
  background: #FFF;
  color:#666;
  margin-top:10px;
}

#main .set .post img{
  width:25%;
  height:100%;
  float:left;
  object-fit: cover;
  margin-right: 10px;
}

#main .set .post .data{
  padding:5px 10px 15px 5px;
}

#main .set .post .data,
#main .set .post .data .title,
#main .set .post .data .desc,{
  float: left;
}

#main .set .post .data .title{
  margin:1px 0px 2px 0px;
  font-size:1em;
  font-weight: bold;
  text-transform: uppercase
}

#main .set .post .data .desc{
  margin:1px 0px 2px 0px;
  font-size:0.8em;
  text-align: justify;
  padding-top:5px;
}

#main .set .other-post{
  color:#666;
  background:#FFF;
  padding:2px;
}

#main .set .other-post img{
  width:100%;
  height:auto;
}

#main .set .other-post .title{
  margin:10px 0px 2px 0px;
  font-size:1em;
  font-weight: bold;
  text-transform: uppercase;
  text-align:center;
}

#main #tags .tag{
  list-style: none;
  display: inline-block;
  background:var(--primaryColor);
  color:#FFF;
  border-radius: 10px;
  padding:5px 20px;
  margin:5px;
  font-weight: bold;
}

/***********SEARCH**********/

section#search{
  padding-top:10px;
}

section#search .post{
  overflow: hidden;
  border-radius: 10px;
  color:#444;
  box-shadow: 5px 5px #888888;
  background: #FFF;
  margin-bottom:10px;
  font-size:0.9em;
  position: relative;
  height:180px;
}

section#search .post img{
  width:30%;
  height: 100%;
  float:left;
  margin-right:5px;
}


section#search .post .title{
  text-align: left;
  margin:10px 0px 0px 2px;
  font-weight: bold;
  font-size:1.3em;
  text-transform: uppercase;
}

section#search .post .desc{
  text-align: justify;
  font-size:0.9em;
  margin:5px 0px 0px 2px;
  padding:3px 5px;
}

/**********POLICIES***********/
section#policies{
	background:#FFF;
	padding-top:10px;
	padding-bottom:30px;
}
section#policies #title{
	text-align: center;
	font-weight: bold;
	color:#000;
	font-size:1.2em;
	text-transform: uppercase;
	letter-spacing: 1px;
}

section#policies #data li{
	color:#666;
	display:block;
	font-weight: bold;
	font-size:0.9em;
	margin-bottom:5px;
}

section#policies #data  li::before {
  content: "→";
  color: #777;
  font-weight: bold;
  display: inline-block;
  width: 1em;
	font-size:1.5em;
  margin-left: -1em;
}