@import url('../css/fonts.css');


html, body{
    margin: 0%;
    box-sizing: border-box;
    overflow-x: hidden;
}

:root{

    /*      Theme colors        */
    --text-gray: #3f4954;
    --text-light : #686666da;
    --bg-color: #0f0f0f;
    --white: #ffffff;
    --midnight: #104f55;

    /* gradient color   */
    --sky: linear-gradient(120deg, #cc7a37 0%, #fbd7c2 100%);

    /*      theme font-family   */
    --Abel: 'Abel', cursive;
    --Anton: 'Anton', cursive;
    --Josefin : 'Josefin', cursive;
    --Lexend: 'Lexend', cursive;
    --Livvic : 'Livvic', cursive;
}

/* ----------------- Footer --------------------- */

footer .footer {
    width: 100%;
    
	background: #000000;
  display: block;
}

footer .inner-footer {
	width: 100%;
	margin: auto;
	  /*
    padding: 30px 5px; */
    padding-top:30px;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	justify-content: center;
}

footer .footer-items {
	width: 18%;
	padding: 10px 5px;
  box-sizing: border-box;

}

footer h1 {
	padding: 10px 0;
	font-size: 25px;
	color: #fff;
  text-transform: uppercase;
  margin-top: -15px;
}

footer .footer-items p {
	color: grey;
	font-size: 16px;
	text-align: justify;
  line-height: 25px;
}

footer h2 {
   padding-left:2px;
	margin: 0px 0;
	color: #eaba5d;
	font-size: 16px;
	font-weight: lighter;
  text-transform: uppercase;
  font-family: 'Open-Sans';
}


footer h3 {
    margin-right: auto;
     margin: 0px 0;
     color: #eaba5d;
     font-size: 16px;
     font-weight: lighter;
   text-transform: uppercase;
   font-family: 'Open-Sans';
 }
 

footer .border {
	height: 1px;
    width: 40px;
    padding-left:25px;
	
  background: #ff9800;

}

footer ul {
    list-style: none;
    display:block;
	color: #fff;
	font-size: 15px;
	letter-spacing: 0.5px;
}

footer ul a {
	text-decoration: none;
	outline: none;
	color: #fff;
	transition: 0.3s;
}

footer ul a:hover {
	color: #ff9800;
}

footer ul li {
	margin: 10px 0;
  height: 25px;
  font-size:18px;
  font-family: 'Open-Sans';
}

footer li i {
	margin-right: 20px;
}

footer .social-media {
	width: 100%;
	color: #fff;
	text-align: center;
}

footer .social-media a {
	text-decoration: none;
}

footer .social-media i {
    width: 15px;
	margin: 2px 12px;
	color: #fff;
    transition: 0.3s;
    float: left;
    font-size: 22px;

}

footer .social-media i:hover {
	background: grey;
}

footer .footer-bottom {
	padding: 10px;
	background: #3d545f;
	color: #fff;
	font-size: 12px;
}
footer .inner-footer .footer-items input[type="email"]{
	border: 0;
	padding: 6px 8px;
	width: 65%;
}
footer .inner-footer .footer-items input[type="submit"]{
background: #e23719;
border: 0;
width: 35%;
padding: 6px 0;
text-align: center;
color: #fff;
transition: 0.3s;
cursor: pointer;
}
footer .inner-footer .footer-items input[type="submit"]:hover{
	background: #16a32d;
}

@media screen and (max-width: 1085px) {
	footer .footer-items {
		width: 50%;
	}
}

@media screen and (max-width: 600px) {
	footer .footer-items {
        width: 100%;
        margin-left:15px;
	}
}
/* ---------x------- Footer ----------x---------- */

/*              Viewport less then or equal to 1130px            */

@media only screen and (max-width: 1130px){
    .site-content .post-content > .post-image .post-info{
        left: 2rem !important;
        bottom: 1.2rem !important;
        border-radius: 0% !important;
    }

    .site-content .sidebar .popular-post .post-info{
        display: none !important;
    }

    footer.footer .container{
        grid-template-columns: repeat(2, 1fr);
    }

}

/*      x       Viewport less then or equal to 1130px    x     */


/*              Viewport less then or equal to 750px            */

@media only screen and (max-width: 750px){
    .nav .nav-menu, .nav .nav-items{
        flex-direction: column;
    }

    .nav .toggle-collapse{
        display: initial;
    }

    main .site-content{
        grid-template-columns: 100%;
    }

    footer.footer .container{
        grid-template-columns: repeat(1, 1fr);
    }

}


/*        x      Viewport less then or equal to 750px       x     */


/*              Viewport less then or equal to 520px            */

@media only screen and (max-width: 520px){
    main .blog{
        height: 70vh;
    }

    .site-content .post-content > .post-image .post-info{
        display: none;
    }

    footer.footer .container > div{
        padding:  1rem .9rem !important;
    }

    footer .rights{
        padding: 0 1.4rem;
        text-align: center;
    }

    nav .toggle-collapse{
        width: 80% !important;
    }

}

/*        x      Viewport less then or equal to 520px       x     */