@import url('https://fonts.google.com/specimen/Oswald');
@import url("https://fonts.googleapis.com/css?family=Indie+Flower&display=swap");
@import url('https://fonts.googleapis.com/css?family=Yeon+Sung&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');


/*----------------------------------------------------------------------*/

/*____________________________ARTICLE__________________________________*/


/*----------------------------------------------------------------------*/

div.article-header{
  clear: both;
  width: 60%;
  margin:auto;
  padding: 23px;
  padding-bottom: 13px;
  margin-top: 10px;
}

p.article-date{

	font-family: 'Rasa';

	margin: 0px 10px 20px 0px;
	font-size: 21px;
	 text-align: left;
	 float:left;

}

 h1.article-title
 {
	/*font-family: 'Montserrat';*/
	font-family: 'Playfair Display';
	 /*font-weight:700;*/
	 font-weight:700;
	 font-size: 2.8rem;
	  letter-spacing: 0rem;
	 color:#3b3b3b;
	 margin-top: 0px;
	 margin-bottom: 10px;
 }

 article{
  width: 60%;
  margin:auto;
  padding: 15px;
  font-family: 'Rasa';
  font-weight: 300;
  line-height: 1.5;
  padding-top: 0;
  color: #3b3b3b;
  font-size: 22px;
  text-align: justify;
 }


 /*Mobile:*/
@media all and (max-width: 700px)    {

  div.article-header{
  width: 90%;;
  }

  article{
  width: 85%;
  }
}


/*Tablet:*/
@media all and (min-width: 700px)  and (max-width: 900px)  {

  div.article-header{
  width: 70%;;
  }

  article{
  width: 70%;
  }
}

/*Desktop:*/
@media all and (min-width: 901px) and (max-width: 1300px) {

  div.article-header{
  width: 60%;;
  }

  article{
  width: 60%;
 }

}

@media all and (min-width: 1301px) and (max-width: 1600px)  {



}

@media all and (min-width: 1600px)  {

  }


 /*----------------------------------------------------------------------*/

/*____________________________RECOMENDED ARTICLES________________________*/


/*----------------------------------------------------------------------*/

 #suggestion-container{
  margin:auto;
  /*width: 950px;*/
  width: 75%;
  overflow: auto;
  margin-top: 10px;
  display: flex;
 flex-wrap: wrap;
  align-items: center;
}


#suggestion-title{
font-family: 'Rasa';
	margin-top: 0px;
	margin-bottom: 15px;
	margin-left: 45px;
	font-size: 23px;
	font-weight: bold;
}



 div.suggestion{
  display: inline-block;
  padding: 0px;
  height: 280px;
  width: 31%;
  overflow: hidden;
  margin-bottom:15px;
  margin-right:5px;
  margin-top:5px;
  margin-left:10px;



	border-color: #232323;
    /*border-style: solid;*/
}

p.suggestion{
	margin:auto;
	margin-right:20px;
	overflow: hidden;
	font-size: 18px;
	font-family: 'Rasa';
	color: #232323;
	line-height: 1.7em;
	/*text-align: justify;*/

}




img.img-container-suggestion{
	margin:auto;
	/*height: 200px;*/
	width: 300px;
	height: 100%;

}

div.img-container-suggestion{
	/*overflow: hidden;*/
	position: relative;
	margin-top: 5px;
	margin-bottom: 0px;
	height: 75%;
	padding:0px;
	text-align: center;
	z-index: -1;
}


p.suggestion-text-block {
	margin: 0 0 0 0;
	font-family: 'Rasa';
	font-size: 18px;
	 color: black;
}

.suggestion-text-block:hover {
	 text-decoration: underline;
	  color: #FF00FF;
}

div.suggestion-text-block {
  font-family: 'Rasa';
  text-align: center;


  color: black;
  padding: 10px 10px 10px 10px;


}

 /*Mobile:*/
@media all and (max-width: 700px)    {

  #suggestion-container{

    width: 90%;

  }

  div.suggestion{
  display: inline-block;
  width: 90%;
  }
}


/*Tablet:*/
@media all and (min-width: 700px)  and (max-width: 1000px)  {

  #suggestion-container{

    width: 90%;

  }

  div.suggestion{
  display: inline-block;
  width: 45%;
  }




}

/*Desktop:*/
@media all and (min-width: 1000px) and (max-width: 1300px) {
 #suggestion-container{

  width: 90%;

}

    div.suggestion{
  display: inline-block;
  width: 31%;
  }

}

@media all and (min-width: 1301px) and (max-width: 1600px)  {

 #suggestion-container{

  width: 90%;

}

    div.suggestion{
  display: inline-block;
  width: 31%;
  }


}

@media all and (min-width: 1600px)  {

  }


 /*----------------------------------------------------------------------*/

/*____________________________COMMENTS__________________________________*/


/*----------------------------------------------------------------------*/
#comment-section-container{
  margin:auto;
  /*width: 950px;*/
  width: 75%;
  overflow: auto;
  margin-top: 10px;
  margin-bottom: 30px;
  display: block;

}


#comment-section-title{
font-family: 'Rasa';
	margin-top: 0px;
	margin-bottom: 15px;
	font-size: 23px;
}



 div.single-comment{
  /*display: inline-block;*/
  padding: 0px;


  overflow: hidden;
  margin-bottom:15px;
  margin-right:5px;
  margin-top:5px;
  margin-left:10px;



	border-color: #232323;
    /*border-style: solid;*/
}

p.single-comment{
	margin:auto;
	margin-right:20px;
	overflow: hidden;
	font-size: 18px;
	font-family: 'Rasa';
	color: #232323;
	line-height: 1.7em;
	/*text-align: justify;*/

}

img.img-container-commenter{
	margin:auto;
	height: 120px;
	width: auto;


}

div.commenter-photo{
	/*overflow: hidden;*/
	display: inline-block;

	width: 30%;
	/*position: relative;*/
	margin-top: 5px;
	margin-bottom: 0px;
	/*height: 75%;*/
	padding:10px;
	text-align: center;
	vertical-align:top;
	/*z-index: -1;*/
}

div.comment-block {
	display: inline-block;
	width: 60%;
  font-family: 'Rasa';
  text-align: left;
	vertical-align:top;

  color: black;
  padding: 10px 10px 10px 10px;


}

div.commenter-block-head {

  font-family: 'Rasa';
  text-align: left;
	vertical-align:top;

  color: black;

}

p.comment-section-name {
display: inline-block;
	margin: 0 10px 0 0;
	font-family: 'Rasa';
	text-align: left;
	font-size: 18px;
	 color: black;
	 font-weight: bold;
}

p.comment-section-date-time{
display: inline-block;
	margin: 0 0 0 0;
	font-family: 'Rasa';
	text-align: left;
	font-size: 18px;
	 color: black;
}

p.comment-block-text {
	margin: 0 0 0 0;
	font-family: 'Rasa';
	text-align: left;
	font-size: 18px;
	 color: black;
}

.col-25 {
  float: left;
  width: 15%;
  margin-top: 6px;
  font-size: 18px
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row-comment-form:after {
  content: "";
  display: table;
  clear: both;
}

.container-form {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  margin-bottom: 30px;
}

.radio-buttons-gender{
    display: inline-block;
    font-size: 18px;
}


input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}


 /*Mobile:*/
@media all and (max-width: 700px)    {

	#comment-section-container{
	  width: 95%;
	}

	div.comment-block {
	width: 95%;

	}

	.container-form {

  padding: 5px;
  }

	.col-25 {

  font-size: 16px
  }

}


/*Tablet:*/
@media all and (min-width: 700px)  and (max-width: 900px)  {
  .col-25 {

  font-size: 23px
}


}

/*Desktop:*/
@media all and (min-width: 901px) and (max-width: 1300px) {


}

@media all and (min-width: 1301px) and (max-width: 1600px)  {



}

@media all and (min-width: 1600px)  {

  }