.-.-.-.-.-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

a:-webkit-any-link {
    cursor: pointer;
    text-decoration: none;
}

.w3-xxxlarge{
	font-size: 20px!important;
	border-radius:20px;
}

.bg{
	background-image: url(demo-portrait.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position-x:center; 
}

.my-buttons{
	padding: 5% 36%;
}

.mystyle-header{

font-size: 2rem;
	text-shadow: 2px 2px 4px #000000;
	line-height: 1rem;
	margin: 10px 31vw;
}

.pass-pointer{

font-size: 0.9rem;
margin: 10px 5vw;

}

/* Small devices (phones, 360px and up) */
@media (min-width: 360px) {

.my-buttons{
	display: flex;
	padding: 95% 3%;
}

.mystyle-header{

font-size: 2rem;
	text-shadow: 2px 2px 4px #000000;
	line-height: 1rem;
	margin: 10px 1vw;
}

.pass-pointer{

font-size: 0.9rem;
margin: 10px 1vw;
color:#fff!important;
text-shadow: 2px 2px 4px #000000;

}

.footer-style{
	font-size: 0.9rem;
	margin: 0px 7vw;
	color:white;
	text-shadow: 2px 2px 4px #000000;
}

}

/* Medium devices (teblets, 565px and up) */
@media (min-width: 565px) {

.mystyle-header{

font-size: 2rem;
	text-shadow: 2px 2px 4px #000000;
	line-height: 1rem;
	margin: 10px 1vw;
}

.pass-pointer{

font-size: 0.9rem;
margin: 10px 1vw;
color:#fff!important;
text-shadow: 2px 2px 4px #000000;

}

.footer-style{
	font-size: 0.9rem;
	margin: 0px 28vw;
	color:white;
	text-shadow: 2px 2px 4px #000000;
}

}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

.bg{
background-image: url(demo-tab.jpg);
background-size: cover;
margin-right: 20px;	
}

.my-buttons{
	margin: 0 0 0 10%;
	padding: 38% 25%;
}

.mystyle-header{

font-size: 2rem;
	text-shadow: 2px 2px 4px #000000;
	line-height: 1rem;
	margin: 10px 1vw;
}

.pass-pointer{

font-size: 0.9rem;
margin: 10px 1vw;
color:#fff!important;
text-shadow: 2px 2px 4px #000000;

}

.footer-style{
	font-size: 0.9rem;
	margin: 0px 28vw;
	color:white;
	text-shadow: 2px 2px 4px #000000;
}

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

.bg{
background-image: url(demo-landscape.jpg);
background-size: cover;
margin-right: 20px;	
}

.my-buttons{
	margin: 0 0 0 2%;
	padding: 16% 38%;
}

.mystyle-header{

font-size: 2rem;
	text-shadow: 2px 2px 4px #000000;
	line-height: 1rem;
	margin: 10px 31vw;
}

.pass-pointer{

font-size: 0.9rem;
margin: 10px 31vw;
color:#000!important;
text-shadow: 2px 2px 4px #ffffff;

}

.footer-style{
	font-size: 0.9rem;
	margin: 0px 41vw;
	color:white;
	text-shadow: 2px 2px 4px #000000;
}

}

</style>

</head>

<div class="w3-row my-buttons">
  <div class="w3-container w3-half">
    <p><button class="w3-button w3-red w3-xxxlarge" style="color:fff;"><a href="https://hrpsychology.soulfood.gr/">ΨΥΧΟΛΟΓΙΑ</a></button></p>  
  </div>
  <div class="w3-container w3-half">
   <p><button class="w3-button w3-blue w3-xxxlarge" style="color:fff;"><a href="https://hrnutrition.soulfood.gr">ΔΙΑΤΡΟΦΗ</a></button></p>
  </div>
</div>

</body>

</html>

/home/hrpsychology/public_html/soulfood.gr/index-prothalamos-demo.htm