@font-face {
  font-family: myFirstFont;
 
  src: url("../fonts/Prata-Regular.ttf");
  
}

* {
  font-family: myFirstFont;
}
a{
	text-decoration:none;
}

body{
margin:0;
padding:0;
position:relative;
}
.header {
display:flex;
justify-content:space-between;
height:50px;
align-items:center;
}
h1,h2,h3,h4,h5{
	font-weight: 200;
}
.header h1{
padding-left:1rem;
color:#303030;
font-size:1.8rem;
}
.open-menu{
font-weight: 100;
}
.header .menu{
padding-right:1rem;
display:flex;
}

.header i{
padding-right:1rem;
cursor:pointer;
font-size:1.4rem;
}
.header .menu li{
list-style-type:none;
margin-left:1.5rem;
}
.header .menu li a{
text-decoration:none;
color:#222222;
font-size:1.1rem;
display:flex;
align-items:center;
padding:.5rem;
}
.header .menu li .active{
border-bottom:2px solid #222222;
}
.header .menu li a:hover{
border-bottom:2px solid #222222;
}


.header .mobile-menu{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#ddd;
padding:0;
margin:0;
display:flex;
justify-content:center;
align-items:center;
z-index:999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
}
.header .mobile-menu li{
list-style-type:none;

}
.header .mobile-menu li a{
text-decoration:none;
color:#222222;
display:flex;
justify-content:center;
align-items:center;
height:50px;
padding:0;
margin:0;
}
.header .mobile-menu li .active{
color:#222222;
border-bottom:2px solid #222222;
}
.header .mobile-menu li a:hover{
color:#f7f7f7;
border-bottom:2px solid #f7f7f7;
}


.header .mobile-menu,.mobile{
display:none;
}


.footer{
height:50px;
position:fixed;
bottom:0;
display:flex;
align-items:center;
z-index:22222222;
}
.footer:hover{
background:#ddd;
}
.footer ul{
display:flex;
justify-content:space-between;
}
.footer ul li{
list-style-type:none;
display:flex;
justify-content:space-between;
}
.footer ul li a{
text-decoration:none;
margin-right:40px;
color:#303030;
}
.footer-pops{
display:none;
position:fixed;
bottom:45px;
width:300px;
min-height:100px;
border-radius:10px;
background:#f9f9f9;
z-index:99999999999999999999999999999999999999999999999999999999999999;
box-shadow:3px 3px 10px #222222;
}

.pops-head{
display:flex;
justify-content:space-between;
align-items:center;
padding-left:1rem;
padding-right:1rem;
}
.pops-body{
padding:1rem;
}
.body{
padding:2rem;
}

.contact-holder{
	width:700px;
	margin:0 auto;
	display:flex;
    justify-content:space-between;
align-items:center;
}
.contact-img img{
	max-width:100%;
	max-height:100%;
}
.contact-img,.contact-form{
	width:350px;
	height:auto;
}
.contact-form input, .contact-form textarea, .contact-form button{
//margin-bottom:1rem;
}
.info-holder{
	width:90%;
	margin:0 auto;
	padding:1rem;
	display:flex;
	justify-content:space-between;
	
}
.info-img{
	width:39%;
	height:auto;
}
.info-img img{
	max-width:100%;
	max-height:100%;
}
.info-text{
	width:55%;
	height:auto;
}
.info-holder h4{
	font-size:1.1rem;
	line-height:1.5rem;
	 text-align: justify;
  text-justify: inter-word;
}

.appreciate-pop{
margin-left:180px;
}
.follow-pop{
margin-left:140px;
}
.share-pop{
margin-left:100px;
}




.header .menu .has-sub{
    position:relative;
  
}
.header .menu .has-sub ul{
   
    width:100%;
     max-width:200%;
   position:absolute;
   left:0;
   padding:0;
   margin:0;
   background:#303030;
   display:none;
}

.header .menu .has-sub:hover ul{
 
   display:block;
}
.header .menu .has-sub ul li{
    width:100%;
     padding:0;
   margin:0;
}
.header .menu .has-sub ul li a{
     width:100%;
word-break:keep-all;
word-wrap:nowrap;
color:#f7f7f7;
}


@media only screen and (max-width: 700px) {
	.info-holder h4{
		font-size:1rem;
	line-height:1.2rem;
}

 .header .mobile-menu, .mobile{
display:block;
}
.header .menu,.header .mobile-menu .has-sub ul{
display:none;
}
.header .mobile-menu .has-sub:hover ul{
   display:block;
}
.contact-holder{
	width:90%;
	flex-direction:column;
}
.contact-img img{
	max-width:100%;
	max-height:100%;
}
.contact-img,.contact-form{
	width:100%;
	height:auto;
}
.info-holder{
	width:99%;
	padding:0rem;
	margin:0 auto;
	flex-direction:column;
}
.info-img{
	width:100%;
}
.info-text{
width:100%;
}
.appreciate-pop{
margin-left:80px;
}
.follow-pop{
margin-left:60px;
}
.share-pop{
margin-left:40px;
}

}


#wrapper{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
#wrapper  #blog-app{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
} 
#wrapper  #blog-app .single-blog{
    flex-shrink: 1;
    width: 24%;
    height: auto;
    background: #f8f8f8;
    border-radius: 20px;
    box-shadow: 1px 1px 10px #3b3a3a;
    overflow: hidden;
    margin-right: 1%;
    margin-bottom: 1%;
}
#wrapper  #blog-app .single-blog .single-blog-img{
    
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
}
#wrapper  #blog-app .single-blog .single-blog-title{
    padding: 10px;
    height: 20%;
}

#wrapper  #blog-app .single-blog .single-blog-img img{
    max-width: 100%;
    max-height: 100%;    
}
@media screen and (max-width:600px){
    #wrapper  #blog-app .single-blog{
        width: 90%;
        
        margin-right: 0;
        
        margin: 0 auto;
        margin-bottom: 20px;
    }
}
#add-blog{

}
#blog-input-div,#blog-input-div-out{
   
    width: 100%;
    height: 80vh;

}