CSS_media_query_ratoni

<style type="text/css">
.call-container {
background-image: url('/wp-content/uploads/2015/07/Health_Training_2_.jpg');
width: 100%;
height: 560px;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
background-origin: content-box;
background-size: cover;
position: relative;
top: 0px;
right: 0px;
}
.call-slogan {
display: block;
position: absolute;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
font: bold 4em/105% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: white;
/* overflow: hidden; */
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
text-align: center;
}
.call-text {
display: block;
position: absolute;
width: 50%;
height: 50%;
top: 10%;
left: 25%;
font: bold 2em/105% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: white;
/* overflow: hidden; */
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
text-align: center;
}
.call-button {
position: absolute;
width: 50%;
height: 20%;
top: 63%;
left: 25%;
display: block;
font-size: 4em;
color: #404140;
/*Step 2: Basic Button Styles*/
display: block;
/* height: 100px;
width: 300px; */
background: rgba(0, 0, 0, 0.30);
border: 2px solid rgba(0, 0, 0, 0.30);
/*Step 3: Text Styles*/
color: rgba(255, 255, 255, 0.55);
text-align: center;
font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
/* cursor: pointer; */
}
.call-button:hover {
/* color: rgba(80, 20, 20, 1); */
background: rgba(255, 255, 255, 0.30);
border: 2px solid rgba(255, 255, 255, 0.30);
/*Step 3: Text Styles*/
color: rgba(0, 0, 0, 0.55);
}
@media screen and (max-width: 600px) {
.call-text { font-size: 1.3em; }
.call-slogan { font-size: 2.3em; }
.call-button { font-size: 2em;}
}
</style>
<div class="call-container">
<h1 class="call-text">Висококачествени маратонки на супер цени!</h1>
<h3 class="call-slogan">Качество / Цена = MAX</h3>
<a href="/shop/" class="call-button">Действай!</a></div>

</br>
<!-- <h1>Последно добавени продукти:</h1> -->
[recent_products per_page="9" columns="4"]