@font-face {
font-family: "Quark-Bold";
src: url("font/Quark-Bold.eot");
src: url("font/Quark-Bold.woff") format("woff"),
	 url('font/Quark-Bold.ttf') format('truetype');
}

@font-face {
font-family: "Quark-Light";
src: url("font/Quark-Light.eot");
src: url("font/Quark-Light.woff") format("woff"),
	 url('font/Quark-Light.ttf') format('truetype');
}

body{
	font-family: 'Quark-Bold', sans-serif;
}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
    main .blog-banner .card-body {
        width: 100%;
        height: 14vw;
    	object-fit: cover;
    }
  }
  
  /* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */
  
  @media (min-width: 1025px) and (max-width: 1280px) {
    main .blog-banner .card-body {
        width: 100%;
        height: 14vw;
        object-fit: cover;
    }
  }
  
  /* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */
  
  @media (min-width: 768px) and (max-width: 1024px) {
    main .blog-banner .card-body {
        width: 100%;
        height: 18vw;
        object-fit: cover;
    }
  }
  
  /* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */
  
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    main .blog-banner .card-body {
        width: 100%;
        height: 18vw;
        object-fit: cover;
    }
    
  }
  
  /* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */
  
  @media (min-width: 481px) and (max-width: 767px) {
    
    /* CSS */
    
  }
  
  /* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */
  
  @media (min-width: 320px) and (max-width: 480px) {
    
    /* CSS */
    
  }
  
.blog-banner .banner-logo{
	font-size:1.4em;
	margin-top:20px;
}
.blog-banner .banner-text{
	font-size:2.2em;
	margin-top:25px;
}
#title-wifi{
	background:#000;
	color:#fff;
	padding :24px 34px;
	cursor: pointer;
	border: 2px solid #000;
	
	-webkit-border-top-left-radius: 24px;
	-webkit-border-bottom-left-radius: 24px;
	-moz-border-radius-topleft: 24px;
	-moz-border-radius-bottomleft: 24px;
	border-top-left-radius: 24px;
	border-bottom-left-radius: 24px;
}

#title-forum{
	background:#ccc;
	color:#000;
	padding :24px 32px;
	cursor: pointer;
	border: 2px solid #000;
	
	-webkit-border-top-right-radius: 24px;
	-webkit-border-bottom-right-radius: 24px;
	-moz-border-radius-topright: 24px;
	-moz-border-radius-bottomright: 24px;
	border-top-right-radius: 24px;
	border-bottom-right-radius: 24px;
}

main .blog-banner .bg-banner-cutomer{
	background: linear-gradient(-45deg, #e6dada, #274046, #8e9eab, #eef2f3);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

main .blog-col .card:hover{
    opacity: 0.7;
    -webkit-transform:scale(1.04);
    -moz-transform:scale(1.04);
    -ms-transform:scale(1.04);
    -o-transform:scale(1.04);
    transform:scale(1.04);
}
.like-button {
  color: #888;
  font-size: 1.5em;
  font-family: 'Quark-Bold', sans-serif;
  background-color: transparent;
  border: 0.1em solid;
  border-radius: 1em;
  padding: 0.333em 1em 0.25em;
  line-height: 1.2em;
  box-shadow: 0 0.25em 1em -0.25em;
  cursor: pointer;
  transition: color 150ms ease-in-out, background-color 150ms ease-in-out, transform 150ms ease-in-out;
  outline: 0;
  margin: 0.2em 0;
}
/* .like-button:hover {
    color: #FF2013;
} */
  
.like-button:active {
    transform: scale(0.95);
}
.like-button-selected {
    color: #FFF;
    background-color: #FF2013;
    border-color: #FF2013;
}
.heart-icon{
    display: inline-block;
    fill: currentColor;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.2em;
}
.card-blog-link{
	cursor: pointer;
}
.card-body-title{
	height:4em;
}
.card-text-title{
	font-size:1.4em;
}

div.cookie-box{ 
  z-index:999;
  display:block;
  margin:0;
  padding:0;
  position:fixed;
  bottom:1.2%;
  left:1.2%;
  background:  rgba(30, 30, 30, 0.9);

  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
 }