@media (max-width: 800px) {
*, html {
margin:0;
padding:0;
}
body {
background:url(images/bg.jpg);
font:normal 13px "Segoe UI", Arial, Helvetica, sans-serif;
color:#333333;
}
.wrapper {
width:100%;
margin:0 auto;
}
.left {
float:left;
}
.right {
float:right;
}
.clearfix:before,.clearfix:after {
content:" ";display:table
}
.clearfix:after{
clear:both
}
.clearfix{
*zoom:1
}
a {
color:#333333;
}
a:hover {
text-decoration:none;
}
a img {
border:none;
}
header {
height: 236px;
width: 100%;
background:url(images/header.png);
}
.header {
position:relative;
}
.top-menu {
width:145px;
height:19px;
position:absolute;
right:0;
top:0;
background:url(images/top-menu.png);
padding:8px 80px;
}
.top-menu ul{
margin:0;
padding:0;
list-style:none;
}
.top-menu ul li {
float:left;
margin:0;
color:#3a1f05;
}
.top-menu ul li a{
color:#3a1f05;
text-decoration:none;
}
.top-menu ul li a:hover{
color:#333333;
}
.top-menu ul li:first-child:after {
content:"|";
padding: 0 10px;
}
.logo {
position:absolute;
left:50px;;
top:20px;
}
.logo img {
width:175px;
}
.menu {
position:absolute;
right:100px;
top:100px;
}
.menu ul {
padding:0;
margin:0;
list-style:none;
}
.menu ul li {
float:left;
padding:3px 10px;
font:normal 18px 'Gabriela', serif;
background:url(images/sep.png) no-repeat;
height:35px;
}
.menu ul li:first-child {
background:none;
}
.menu ul li a {
text-decoration:none;
color:#f6c968;
-webkit-transition:color 0.3s ease-in;
-moz-transition:color 0.3s ease-in;
-o-transition:color 0.3s ease-in;
transition:color 0.3s ease-in;
}
.menu ul li a:hover {
color:#875923;
}
/* CONTENT */
.content {
background:url(images/white-bg.png) center top no-repeat;
}
.page{
background:#eceee2;
}
.content-box {
padding:10px 25px;
}
.content-box h1 {
font:normal 24px 'Noto Serif', serif;
border-bottom: 1px dashed #a3a3a1;
margin:5px 0;
padding:5px 0;
}
.content-box h2 {
font:normal 18px 'Noto Serif', serif;
border-bottom: 1px dotted #a3a3a1;
margin:10px 0;
}
.content-box p {
text-align:justify;
}
.service-list {
width:221px;
margin-left:15px;
border-radius:20px;
}
.service-list img {
border-radius:20px 20px 0 0 ;
vertical-align:top;
}
.service-box img {
border-radius:0;
vertical-align:top;
}
.service-box {
background:#FFFFFF;
width:86%%;
margin:0 auto;
padding:15px 15px;
border-top:none;
border-radius:20px;
}
.service-box2 {
background:#FFFFFF;
width:210px;
margin:0 auto;
padding:15px 5px;
border:1px solid #d9dbce;
border-top:none;
height:250px;
position:relative
}
.service-box2 span {
background:#1b1b1b;
padding:5px;
color:#FFFFFF;
position:absolute;
bottom:5px;
right:5px;
}
.service-box p {
padding:5px 0;
margin:0;
}
.service-box span {
background:#1b1b1b;
padding:5px;
color:#FFFFFF;
margin:5px 0 0;
}
footer {
background:url(images/footer.png);
height:105px;
}
.footer-menu {
width:100%;
padding:25px 0 5px 0;
margin:0 auto;
}
.footer-menu ul {
padding:0;
margin:0;
list-style:none;
}
.footer-menu ul li {
display:inline-block;
padding:5px 10px;
font:normal 14px 'Gabriela', serif;
background:url(images/sep.png) no-repeat;
height:32px;
}
.footer-menu ul li:first-child {
background:none;
}
.footer-menu ul li a {
color:#f6c968;
text-decoration:none
}
.footer-menu ul li a:hover {
text-decoration:underline
}
footer p {
color:#d5b869;
text-align:center;
}
footer p a {
color:#d5b869;
}
footer p a:hover {
text-decoration:none;
}
/* SERVICES */
.list_carousel {
margin: 0 0 0 0;
width: 100%;
}
.list_carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
width: 100%;
}
.list_carousel li {
color: #333333;
text-align: center;
background-color: #FFF;
width: 95%;
padding:0;
margin: 10px 6px;
display: block;
float: left;
}
.list_carousel li img {
width: 100%;
}
.list_carousel li .img {
border-radius: 10px;
}
.list_carousel.responsive {
width: auto;
margin-left: 0;
}
.clearfix {
float: none;
clear: both;
}
.prev {
position:absolute;
left:-25px;
top:-250px;
}
.next {
position:absolute;
right:0;
top:-250px;
}
/*Contacts */
input {
width:300px;
padding:5px;
border:1px solid #ecece8;
}
textarea {
width:300px;
padding:5px;
border:1px solid #ecece8;
}
.gallery_img{
width:49%;
}
.gallery_img img{
width:90%;
}
.contact_info{
}
.contact_form{
}
}
@media (min-width: 800px) {
*, html {
margin:0;
padding:0;
}
body {
background:url(images/bg.jpg);
font:normal 13px "Segoe UI", Arial, Helvetica, sans-serif;
color:#333333;
}
.wrapper {
width:100%;
max-width:980px;
margin:0 auto;
}
.left {
float:left;
}
.right {
float:right;
}
.clearfix:before,.clearfix:after {
content:" ";display:table
}
.clearfix:after{
clear:both
}
.clearfix{
*zoom:1
}
a {
color:#333333;
}
a:hover {
text-decoration:none;
}
a img {
border:none;
}
header {
height: 236px;
width: 100%;
background:url(images/header.png);
}
.header {
position:relative;
}
.top-menu {
width:145px;
height:19px;
position:absolute;
right:0;
top:0;
background:url(images/top-menu.png);
padding:8px 80px;
}
.top-menu ul{
margin:0;
padding:0;
list-style:none;
}
.top-menu ul li {
float:left;
margin:0;
color:#3a1f05;
}
.top-menu ul li a{
color:#3a1f05;
text-decoration:none;
}
.top-menu ul li a:hover{
color:#333333;
}
.top-menu ul li:first-child:after {
content:"|";
padding: 0 10px;
}
.logo {
position:absolute;
left:50px;;
top:20px;
}
.logo img {
width:175px;
}
.menu {
position:absolute;
right:100px;
top:100px;
}
.menu ul {
padding:0;
margin:0;
list-style:none;
}
.menu ul li {
float:left;
padding:3px 10px;
font:normal 18px 'Gabriela', serif;
background:url(images/sep.png) no-repeat;
height:35px;
}
.menu ul li:first-child {
background:none;
}
.menu ul li a {
text-decoration:none;
color:#f6c968;
-webkit-transition:color 0.3s ease-in;
-moz-transition:color 0.3s ease-in;
-o-transition:color 0.3s ease-in;
transition:color 0.3s ease-in;
}
.menu ul li a:hover {
color:#875923;
}
/* CONTENT */
.content {
background:url(images/white-bg.png) center top no-repeat;
}
.page{
background:#eceee2;
}
.content-box {
padding:10px 25px;
}
.content-box h1 {
font:normal 24px 'Noto Serif', serif;
border-bottom: 1px dashed #a3a3a1;
margin:5px 0;
padding:5px 0;
}
.content-box h2 {
font:normal 18px 'Noto Serif', serif;
border-bottom: 1px dotted #a3a3a1;
margin:10px 0;
}
.content-box p {
text-align:justify;
}
.service-list {
width:221px;
margin-left:15px;
}
.service-list img {
vertical-align:top;
}
.service-box {
background:#FFFFFF;
width:189px;
margin:0 auto;
padding:15px 15px;
border:1px solid #d9dbce;
border-top:none;
height:230px;
}
.service-box2 {
background:#FFFFFF;
width:189px;
margin:0 auto;
padding:15px 15px;
border:1px solid #d9dbce;
border-top:none;
height:250px;
position:relative
}
.service-box2 span {
background:#1b1b1b;
padding:5px;
color:#FFFFFF;
position:absolute;
bottom:5px;
right:5px;
}
.service-box p {
padding:5px 0;
margin:0;
}
.service-box span {
background:#1b1b1b;
padding:5px;
color:#FFFFFF;
margin:5px 0 0;
}
footer {
background:url(images/footer.png);
height:105px;
}
.footer-menu {
width:450px;
padding:25px 0 5px 0;
margin:0 auto;
}
.footer-menu ul {
padding:0;
margin:0;
list-style:none;
}
.footer-menu ul li {
display:inline-block;
padding:5px 10px;
font:normal 14px 'Gabriela', serif;
background:url(images/sep.png) no-repeat;
height:32px;
}
.footer-menu ul li:first-child {
background:none;
}
.footer-menu ul li a {
color:#f6c968;
text-decoration:none
}
.footer-menu ul li a:hover {
text-decoration:underline
}
footer p {
color:#d5b869;
text-align:center;
}
footer p a {
color:#d5b869;
}
footer p a:hover {
text-decoration:none;
}
/* SERVICES */
.list_carousel {
margin: 0 0 30px 15px;
width: 100%;
}
.list_carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.list_carousel li {
color: #333333;
text-align: center;
background-color: #eee;
width: 212px;
padding: 0;
margin: 6px;
display: block;
float: left;
}
.list_carousel.responsive {
width: auto;
margin-left: 0;
}
.clearfix {
float: none;
clear: both;
}
.prev {
position:absolute;
left:-25px;
top:-250px;
}
.next {
position:absolute;
right:0;
top:-250px;
}
/*Contacts */
input {
width:300px;
padding:5px;
border:1px solid #ecece8;
}
textarea {
width:300px;
padding:5px;
border:1px solid #ecece8;
}
.gallery_img{
width:24%;
}
.gallery_img img{
width:90%;
}
.contact_info{
display:inline-block;
vertical-align:text-bottom;
width:40%;
}
.contact_form{
display:inline-block;
vertical-align:top;
width:55%;
margin-left:4%;
}
}