@charset "utf-8";* {
margin:0;
padding:0;
}

a img, img a {
border:none;
}


body {
 font-family:Arial, sans-serif;
font-size:1.0em;
} 

  


/*   Tipographika   */

h1 {
font:bold 1.4em 'PT Sans Narrow', sans-serif;
color:#444;
padding:0 0 0.3em 0;
}

h2 {
font:bold 1.2em 'PT Sans Narrow', sans-serif;
color:#444;
padding:0 0 0.3em 0;
}
h3 {
font:bold 1.1em 'PT Sans Narrow', sans-serif;
color:#444;
padding:0 0 0.3em 0;
}


.breadcrumbs a {
text-decoration:underline;
color:#444;
font:1em Arial;
transition:.6s;
}

.breadcrumbs a:hover {
text-decoration:none;
color:#76be19;
transition:.3s;
}

p {
font:0.8em Arial;
color:#444;
padding:.3em 0;
text-indent:25px;
}

/*    Joomla Content View  */

.item-page ul, .blog ul, .item-page ol, .blog ol, #xmap ul {
padding:0.5em 25px;
}

.item-page ul li, .blog ul li, .item-page ol li, .blog ol li, #xmap ul li {
padding:0.2em 0;
color:#444;
font:1em Arial;
}

.item-page a, .blog a, #xmap a {
color:#3d9b01;
}

.article-info {
font:0.8em Arial;
color:#666;
}

.items-row, .leading-0, .item {
margin:0 0 1.5em 0;
}

.readmore a {
display:inline-block;
padding:0.3em 20px;
background:#3d9b01;
color:#fff!important;
text-decoration:none;
cursor:pointer;
}

.readmore a:hover {
background:#2c7200;
}

.article-info-term {
display: none;
}

.pagination {
text-align:center;
padding:1em 0 0 0;
background:#f6f6f6;
}

.pagination ul li {
list-style:none;
padding:0 4px 0 0;
display:inline;
}

.yashare-box {
margin:1.5em 0 1em 0;
}

/*   Layout         */

#page {
width:100%;
background: url('/templates/jt-garden/images/bg.jpg') #fff;
}

#header {
width:100%;
border-top:3px solid #76be19;
background:#fbfbfb;
}

.layout {
width:1200px;
  margin:0 auto;
overflow:hidden;
}



.logo {
width:23.1%;
height:8.75em;
margin:0;
float:left;
}

.title {
width:50%;
margin-top:1.5em;
float:left;
text-align:center;
}

.title a {
text-decoration:none;
}

.title a p {
font:bold 2em 'PT Sans Narrow', sans-serif;
color:#1e1e1e;
}

.title a span {
font:1.25em/1.5em 'PT Sans Narrow', sans-serif;
color:#444;
}

.search-box {
width:23.1%;
float:right;
height: 2.5em;
  margin-top:2.5em;
}
.search-box input.ya-site-form__submit {
padding:0 6px!important;
cursor:pointer;
}




#menu {
width:100%;
background:#f4f4f4;
border-top:1px dashed #ddd;
box-shadow:2px 5px 8px #ddd;
height:2.2em;
margin-bottom:1.25em;
}

.menu-top {
width:1150px;
margin:0 auto;
overflow:hidden;
}

.menu-top ul li {
float:left;
list-style:none;
}

.menu-top ul li a {
padding:0.35em 35px;
display:inline-block;
font:1.20em 'PT Sans Narrow', sans-serif;
text-decoration:none;
color:#444;
transition:.6s;
}

.menu-top ul li a:hover {
text-decoration:underline;
color:#76be19;
transition:.3s;
}

#content {
width:100%;
overflow:hidden;

}

.breadcrumbs {
width:99.7%;
background:#fbfbfb;
border:1px solid #bbb;
margin:0 0 1.25em 0;
overflow:hidden;
padding:.5em 0;
}

.breadcrumbs ul {
padding:0;
}

.breadcrumbs ul li {
float:left;
list-style:none;
}

.divider {
padding: 0 3px;
}

.main {
width:56.5%; /*  570px */
float:left;
margin:0 0 1.25em 0
}

.item-page, .blog, #xmap {
background:#fff;
border:1px solid #ddd;
padding:1.125em 3%;
font:1.0em Arial;
color:#444;
margin:0 0 1.25em 0;
}

.left, .right {
width:20.0%;  /*   ~270px */
border:1px solid #ddd; ;
}


.left {width:20.0%;
float:left;
margin:0 1.7% 0 0;
}

.right {width:20.0%;
float:right;
}

#footer {
background:#2d2e2c;
padding:1em 0;
overflow:hidden;
width:100%;
}

.footbox {
width:80%;
float:center;
text-align:right;
overflow:hidden;
}

.footbox ul.nav li {
float:right;
padding:0 20px 0 0;
list-style:none;
} 

.footbox ul.nav li a {
color:#ccc;
text-decoration:underline;
}

.footbox ul.nav li a:hover {
text-decoration:none;
}

.li {
width:19%;
float:left;
}

.toplink {
width:50px;
display:block;
float:right; 
padding:0 30px 0 0;
}

.toplink a {
color:#64af34;
}

/*   Modules   */

.yadirect {
background:#fff;
margin-top:1em;
text-align:center;
}

.yadirect-top {
background:#fff;
margin-bottom:1em;
text-align:center;
}

.moduletablemenu, .moduletable {
background:#fff;
padding:0 0 1em 0;
margin-bottom:1em;
}

.moduletablemenu ul.nav, .moduletable ul.nav  {
padding:0.5em 20px;
}

.moduletablemenu ul.nav li, .moduletable ul.nav li {
list-style:none;
padding:.25em 0;
}

.moduletablemenu ul.nav li a, .moduletable ul.nav li a {
text-decoration:none;
color:#444;
transition:.5s;
}

.moduletablemenu ul.nav li a:hover, .moduletable ul.nav li a:hover {
text-decoration:underline;
color:#76be19;
transition:.25s;
}


  .latestnews ul.nav li a:hover, .latestnews ul.nav li a:hover {
text-decoration:underline;
color:#76be19;
transition:.25s;
  
}


.left .moduletablemenu, .left .moduletable {
box-shadow:3px 5px 8px 5px  #ddd; 

}

.right .moduletablemenu, .right .moduletable {
box-shadow:-3px 5px 8px 5px  #ddd; 
}

.left .moduletablemenu h3, .left .moduletable h3 {

  background: url('/templates/jt-garden/images/h3-green.jpg');
padding:0.5em 0 0.5em 50px;
}

.right .moduletablemenu h3, .right .moduletable h3 {
background: url('/templates/jt-garden/images/h3-green.jpg');
padding:0.5em 0 0.5em 50px;
}

.moduletablemenu h4, .moduletable h3 {
font:bold 1.0em 'PT Sans Narrow', sans-serif;
color:#444;
}

.moduletable .custom {
padding:0 10px 0 0;
}

.moduletable .custom a {
color:#444;
font:1em Arial;
text-decoration:none;
}

.moduletable .custom a:hover {
text-decoration:underline;
color:#76be19
}

.bottom-ads a {
color:#3d9b01;
text-decoration:underline;
}

.bottom-ads a:hover {
text-decoration:none;
}
<p>/* Reponsive */ div, img, section { -moz-transition: width 0.5s ease-in-out, left 1s ease-in-out; -webkit-transition: width 0.5s ease-in-out, left 1s ease-in-out; -moz-transition: width 0.5s ease-in-out, left 1s ease-in-out; -o-transition: width 0.5s ease-in-out, left 1s ease-in-out; transition: width 0.5s ease-in-out, left 1s ease-in-out; } @media screen and (max-width: 1024px), only screen and (max-device-width: 1024px) { img, iframe, object, embed { max-width:100%!important; } .layout, .menu-top { width:960px; } } @media screen and (max-width: 800px), only screen and (max-device-width: 800px) { img, iframe, object, embed { max-width:100%!important; } .logo, .title { width:43%; float:left; } .search-box { width:95%; margin:0 auto 1em auto; float:left; } .layout, .menu-top { width:760px; } .left, .right, .main { float:none; width:95%; margin:0 auto; overflow: hidden; } .breadcrumbs { margin:0 auto 1.25em auto; padding:5px; width:94%; } .toplink { display:none; } } @media screen and (max-width: 768px), only screen and (max-device-width: 768px) { img, iframe, object, embed { max-width:100%!important; } .logo, .title { width:43%; float:left; } .search-box { width:95%; margin:0 auto 1em auto; float:left; } .layout, .menu-top { width:720px; } .left, .right, .main { float:none; width:95%; margin:0 auto; overflow: hidden; } .breadcrumbs { margin:0 auto 1.25em auto; padding:5px; width:94%; } .toplink { display:none; } } @media screen and (max-width: 640px), only screen and (max-device-width: 640px) { img, iframe, object, embed { max-width:100%!important; } #menu { height:auto; } .menu-top ul li { float:none; } .logo, .title { width:43%; float:left; } .search-box { width:95%; margin:0 auto 1em auto; float:left; } .layout, .menu-top { width:610px; } .left, .right, .main { float:none; width:95%; margin:0 auto; overflow: hidden; } .breadcrumbs { margin:0 auto 1.25em auto; padding:5px; width:94%; } .toplink { display:none; } .footbox { width:60%; } .footbox ul.nav li { float:none; } } @media screen and (max-width: 600px), only screen and (max-device-width: 600px) { img, iframe, object, embed { max-width:100%!important; } #menu { height:auto; } .menu-top ul li { float:none; } .logo, .title { width:43%; float:left; } .search-box { width:95%; margin:0 auto 1em auto; float:left; } .layout, .menu-top { width:560px; } .left, .right, .main { float:none; width:95%; margin:0 auto; overflow: hidden; } .breadcrumbs { margin:0 auto 1.25em auto; padding:5px; width:94%; } .toplink { display:none; } .footbox { width:60%; } .footbox ul.nav li { float:none; } } @media screen and (max-width: 540px), only screen and (max-device-width: 540px) { img, iframe, object, embed { max-width:100%!important; } #menu { height:auto; } .menu-top ul li { float:none; } .logo, .title { width:43%; float:left; } .search-box { width:95%; margin:0 auto 1em auto; float:left; } .layout, .menu-top { width:500px; } .left, .right, .main { float:none; width:95%; margin:0 auto; overflow: hidden; } .breadcrumbs { margin:0 auto 1.25em auto; padding:5px; width:94%; } .toplink { display:none; } .footbox { width:60%; } .footbox ul.nav li { float:none; } } @media screen and (max-width: 480px), only screen and (max-device-width: 480px) { img, iframe, object, embed { max-width:100%!important; } .title a p { font-size:1.7em; } #menu { height:auto; } .menu-top ul li { float:none; } .logo, .title { width:43%; float:left; } .search-box { width:95%; margin:0 auto 1em auto; float:left; } .layout, .menu-top { width:440px; } .left, .right, .main { float:none; width:95%; margin:0 auto; overflow: hidden; } .breadcrumbs { margin:0 auto 1.25em auto; padding:5px; width:94%; } .toplink { display:none; } .footbox { width:60%; } .footbox ul.nav li { float:none; } } @media screen and (max-width: 400px), only screen and (max-device-width: 400px) { img, iframe, object, embed { max-width:100%!important; } .title a p { font-size:1.7em; } #menu { height:auto; } .menu-top ul li { float:none; } .logo, .title { width:90%; float:none; margin:0 auto; } .search-box { width:95%; margin:0 auto 1em auto; float:left; } .layout, .menu-top { width:360px; } .left, .right, .main { float:none; width:95%; margin:0 auto; overflow: hidden; } .breadcrumbs { margin:0 auto 1.25em auto; padding:5px; width:94%; } .toplink { display:none; } .footbox { width:60%; } .li { display:none; } .footbox ul.nav li { float:none; } } @media screen and (max-width: 320px), only screen and (max-device-width: 320px) { img, iframe, object, embed { max-width:100%!important; } .title a p { font-size:1.7em; } #menu { height:auto; } .menu-top ul li { float:none; } .logo, .title { width:90%; float:none; margin:0 auto; } .search-box { width:95%; margin:0 auto 1em auto; float:left; } .layout, .menu-top { width:290px; } .left, .right, .main { float:none; width:95%; margin:0 auto; overflow: hidden; } .breadcrumbs { margin:0 auto 1.25em auto; padding:5px; width:94%; } .toplink { display:none; } .footbox { width:60%; } .li { display:none; } .footbox ul.nav li { float:none; } }