body{margin:auto; font-family:"Times New Roman", Arial, Helvetica, sans-serif; font-size:17px; background:#fcfcfb; color:#999; -webkit-text-size-adjust: 100%;}

button{display:inline-block; padding:12px 20px 12px 20px; font-family: quattrocento-regular, Arial, Helvetica, sans-serif;  font-size:18px; background:#9c9c9b; color:#FFF; border:0px; border-radius:3px; cursor:pointer; -webkit-appearance:button; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
button:hover{background:#DDD; color:#555;}
p{line-height:22px;}

@media screen and (max-width: 768px){
	input,textarea{font-size:16px; border-radius:0; border:1px solid #DDD; -webkit-appearance: none;}
	button{width:90%; margin:3% 5%; }
}

input,select,textarea{width:92%; margin:0 0 1% 0; padding:3% 4%; font-family:montserrat-light, Arial, Helvetica, sans-serif; font-size:15px; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; -webkit-appearance:none; border-radius: 5px; border:1px solid #ddd; background: #fff; color:#333;}
input[type='checkbox']{width:20px; -webkit-appearance: checkbox; padding:0;}
input[type='radio']{width:20px; -webkit-appearance: radio; padding:0;}
select{background:#fff url(http://www.autosynergy.co.uk/assets/icons/select-arrow-black.png) no-repeat; background-position:97% center; background-size:22px;}


/* ---------------------------------------
FONTS
------------------------------------------*/
@font-face {
    font-family: 'open-sans-light';
    src: url('/fonts/open-sans-light-webfont.eot');
    src: url('/fonts/open-sans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/open-sans-light-webfont.woff') format('woff'),
         url('/fonts/open-sans-light-webfont.ttf') format('truetype'),
         url('/fonts/open-sans-light-webfont.svg#open-sans-light') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open-sans';
    src: url('/fonts/open-sans-webfont.eot');
    src: url('/fonts/open-sans-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/open-sans-webfont.woff') format('woff'),
         url('/fonts/open-sans-webfont.ttf') format('truetype'),
         url('/fonts/open-sans-webfont.svg#open-sans') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open-sans-semi-bold';
    src: url('/fonts/open-sans-semi-bold-webfont.eot');
    src: url('/fonts/open-sans-semi-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/open-sans-semi-bold-webfont.woff') format('woff'),
         url('/fonts/open-sans-semi-bold-webfont.ttf') format('truetype'),
         url('/fonts/open-sans-semi-bold-webfont.svg#open-sans-semi-bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open-sans-bold';
    src: url('/fonts/open-sans-bold-webfont.eot');
    src: url('/fonts/open-sans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/open-sans-bold-webfont.woff') format('woff'),
         url('/fonts/open-sans-bold-webfont.ttf') format('truetype'),
         url('/fonts/open-sans-bold-webfont.svg#open-sans-bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'afta-thin';
    src: url('/fonts/afta-thin-webfont.eot');
    src: url('/fonts/afta-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/afta-thin-webfont.woff') format('woff'),
         url('/fonts/afta-thin-webfont.ttf') format('truetype'),
         url('/fonts/afta-thin-webfont.svg#afta-thin') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'quattrocento-regular';
    src: url('/fonts/quattrocento-regular.eot');
    src: url('/fonts/quattrocento-regular.eot?#iefix') format('embedded-opentype'),
         url('/fonts/quattrocento-regular.woff') format('woff'),
         url('/fonts/quattrocento-regular.ttf') format('truetype'),
         url('/fonts/quattrocento-regular.svg#quattrocento-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'helvetica-thin';
    src: url('/fonts/helvetica-thin-webfont.eot');
    src: url('/fonts/helvetica-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/helvetica-thin-webfont.woff') format('woff'),
         url('/fonts/helvetica-thin-webfont.ttf') format('truetype'),
         url('/fonts/helvetica-thin-webfont.svg#helvetica-thin') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1{font-family: quattrocento-regular, Arial, Helvetica, sans-serif; font-size:32px; font-weight:normal; display:inline;}
h2{font-family: quattrocento-regular, Arial, Helvetica, sans-serif; font-size:24px; font-weight:normal; display:inline;}
h3{font-family: quattrocento-regular, Arial, Helvetica, sans-serif; font-weight:normal; display:inline;}
h4{font-family: quattrocento-regular, Arial, Helvetica, sans-serif; font-weight:normal; display:inline;}

@media screen and (max-width: 768px){
	h1{font-size:5.8vw;}
	h2{font-size:4vw;}
}

@media screen and (max-width: 480px){
	h1{font-size:9vw; letter-spacing:-1px;}
	h2{font-size:7.1vw; letter-spacing:-1px;}
}


a:link    {color:#444;text-decoration:none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
a:visited {color:#444;text-decoration:none;}
a:hover   {color:#aa0000; text-decoration:none; -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;}

.no-desktop{display:none;}

@media screen and (max-width: 768px){
	.no-mobile{display:none !important;}
}

/* ---------------------------------------
Header & Navigation
------------------------------------------*/
header{position:relative; max-width:1280px; height:135px; margin:auto; text-align:center; border-left:1px solid #eee6e3; border-right:1px solid #eee6e3;}
header #logo{height:120px; margin:10px 0 0 0;}
header #actions{position:absolute; top:40px; right:20px;}	
header #actions li{position:relative; display:inline-block; width:100px; vertical-align:top;}
header #actions #count{position:absolute; top:-6px; right:26%; width:20px; height:20px; font-size:10px; line-height:20px; background: #333; color:#fff; border-radius: 30px;}
header #actions img{width:32px;}
header #actions b{display:block; font-size:19px; font-weight:normal; text-transform:uppercase;}	
header #actions small{font-size:15px;}

nav{max-width:1280px; margin:auto; background:#9c9c9b; border-left:1px solid #eee6e3; border-right:1px solid #eee6e3;}
nav #menu{height:47px; text-align:center; font-size:18px;}
nav #menu li{position:relative; float:left; width:20%;}
nav #menu a{display:block; padding:13px 0; color:#FFF; text-transform:uppercase;}
nav #menu a:hover{background:#f7f6f4; color:#555; text-transform:uppercase;}

.mobilemenu{display:none; position:absolute; top:0; right:0; font-size:14px; line-height:20px; padding:16px; text-align:center; vertical-align: middle;}
.icon-bar {background-color: #9c9c9b; display: block; height: 2px; line-height: 10px; margin-top: 5px; vertical-align: text-top; width:20px;
-moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;}
.rotateLeft {margin-top: 10px; position: relative; transform: rotate(-225deg); -webkit-transform: rotate(-225deg);}
.rotateRight {margin-top: -2px; position: relative; transform: rotate(45deg); -webkit-transform: rotate(45deg);}

@media screen and (max-width: 1024px){
	nav #menu{height:48px; text-align:center; font-size:16px; letter-spacing:-1px;}
}

@media screen and (max-width: 768px){
	header{height:60px; margin:auto;}
	header #logo{height:50px; margin:5px 0 0 0;}
	header #actions{position:absolute; top:17px; right:45px;}	
	header #actions li{display:inline-block; width:32px;}	
	header #actions img{width:24px;}	
	header #actions b{display:none;}
	header #actions #count{top:-6px; right:22%; width:16px; height:16px; font-size:10px; line-height:15px;}


	nav #menu{display:none; position:absolute; top:60px; width:100%; z-index:99; height:auto; left:0; background:#9c9c9b; box-shadow:0 5px 8px -8px #000;}
	nav #menu li{width:100%; padding:0;}
	nav #menu li.sel{background:none;}
	nav #menu a{display:block; padding:3%; border-right:0; border-bottom:1px solid #fff;}
	.mobilemenu{display:block;}
}

/* ---------------------------------------
Main Structure
------------------------------------------*/
#main{max-width:1280px; margin:auto; background:#f7f6f4; border-left:1px solid #eee6e3; border-right:1px solid #eee6e3;}
#main aside{float:left; width:23%; min-height:400px;}
#main section{float:right; width:75%;}

@media screen and (max-width: 768px){
	#main{margin:0 auto auto auto;}
	#main aside{float:none; width:100%; min-height:180px;}
	#main section{float:none; width:100%;}
	.inner{padding:5%;}
}

/* ---------------------------------------
Breadcrumbs
------------------------------------------*/
#breadcrumbs{clear:both; width:100%; color:#777;}
#breadcrumbs div{max-width:1280px; margin:auto;font-size:10px; text-transform:uppercase; letter-spacing:2px; border-left:1px solid #eee6e3; border-right:1px solid #eee6e3;}
#breadcrumbs a{display:inline-block; padding:8px; color:#777;}
#breadcrumbs span{display:inline-block; padding:8px;}
@media screen and (max-width: 768px){
	#breadcrumbs{display:none;}
}

/* ---------------------------------------
Home Page
------------------------------------------*/
#hero{position:relative; width:100%; height:570px; margin:0 0 20px 0; border-top:1px solid #fff; background:#fff;}
#hero .royalSlider{width:100%; height:570px;}

#overview{clear:both; padding:3% 10% 3% 10%; text-align:center;}

#home-cats{text-align:center;}
#home-cats li{position:relative; display:inline-block; width:33.2%; margin:0 0.1% 0 0; height:0; padding:0 0 22% 0;}
#home-cats span{position:absolute; bottom:10%; left:0; width:100%; padding:3% 0; background:rgba(156,156,156,0.6); font-size:20px; color:#FFF; text-transform:uppercase;}
#home-cats #antiques{background:url(/images/bg-antiques.jpg); background-size:cover;}
#home-cats #gifts{background:url(/images/bg-gifts.jpg); background-size:cover;}
#home-cats #diary{background:url(/images/bg-diary.jpg); background-size:cover;}
	
@media screen and (max-width: 768px){
	#hero{height:380px; margin:0 0 1% 0;}
	#hero .royalSlider{height:380px;}
	#home-cats li{width:100%; margin:0; padding:0 0 60% 0;}
}

@media screen and (max-width: 520px){
	#hero{height:220px;}
	#hero .royalSlider{height:220px;}
	.homecat{width:100%; margin:1% 0 0 0; padding:0 0 65% 0;}
	#overview{clear:both; padding:8%;}
}



#snav{border-top:3px solid #9c9c9b;}
#snav li{border-bottom:1px solid #eee6e3;}
#snav a{display:block; padding:4% 3% 4% 7%;}

/* ---------------------------------------
	sub cat 
------------------------------------------*/
#scat{padding:3%;}
#scat #list{clear:both; text-align:center; border-top:1px solid #eee6e3;}
#scat #list li{position:relative; display:inline-block; width:32.3%; height:0; margin:1% 0.5% 1% 0.5%; padding:0 0 21.3% 0; background:#FFF; vertical-align:top; cursor:pointer;}
#scat #list .over{position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; transition: all 0.2s ease-out;}
#scat #list .over:hover{background:rgba(0,0,0,0.2); transition: all 0.2s ease-out;}
#scat #list img{width:100%;}
#scat #list a{position:absolute; display:block; bottom:6%; left:0; z-index:2; width:100%; padding:2.5% 0; background:rgba(156,156,156,0.6); font-size:20px; color:#FFF; text-transform:uppercase;}

@media screen and (max-width: 768px){
	#scat #list li{width:100%; margin:3% 0; padding:0 0 65% 0;}
}

/* ---------------------------------------
Product Results
------------------------------------------*/
#pr{padding:3%;}
#pr #gallery{}
#pr #gallery li{display:inline-block; width:24%; height:0; margin:0 0.5% 3% 0.5%; padding:0 0 26% 0; vertical-align:top; background:#FFF; border-bottom: 2px solid #fff; transition: all 0.2s ease-in;}
#pr #gallery li:hover{border-bottom: 2px solid #eee6e3; transition: all 0.2s ease-in;}
#pr #gallery .photo{background:#fff; line-height:0; cursor:pointer;}
#pr #gallery .photo img{width:100%;}
#pr #gallery .detail{padding:3% 3% 3% 4%;}
#pr #gallery .detail b{display:block; font-size:17px;}
@media screen and (max-width: 1024px){
	#pr #gallery li{width:31.3%; margin:0 1% 2% 1%; padding:0 0 33% 0; }
}
@media screen and (max-width: 768px){
	#pr #gallery li{width:48%; margin:0 1% 2% 1%; padding:0 0 50% 0; }
}
@media screen and (max-width: 480px){
	#pr #gallery li{width:100%; margin:0 0 6% 0; padding:0 0 105% 0; }
}

/* ---------------------------------------
Product Detail
------------------------------------------*/
#pd #media{position:relative; float:left; width:50%; margin:0 0 0 0;}
#pd #media #photo-landscape{width:100%; height:0; padding: 0 0 75% 0;}
#pd #media #photo-portrait{width:75%; height:0; margin:0 auto; padding: 0 0 100% 0;}
#pd #media .royalSlider{position:absolute; top:0; left:0; width:100%; height:100%;}
#pd #media .rsDefault{width:100%; margin:0; line-height:0;}
#pd #media .royalSlider .photo{width:100%;}

#pd #detail{float:right; width:46%; padding:2%;}
#pd #detail #description{margin:2% 0 3% 0; padding: 3% 0; border-top:1px solid #eee6e3; border-bottom:1px solid #eee6e3;}
#pd #detail #description p{margin:0; padding:0;}
#pd #detail #price{margin:0 0 3% 0;}
#pd #detail #price #current{font-size:30px; color:#333;}
#pd #detail #price #old{color:#888;}
#pd #detail #price #save{color:#AA0000;}

#pd #detail #already-in{padding:2% 3%; background:#fff;}

#pd #detail .c2a{margin:2% 0 0;}
#pd #detail .c2a .question{background: #ebdad4;}

#pd #sim-products{clear:both; padding:2% 0; border-top:1px solid #DDD;}
#pd #sim-products #heading{margin:2%; font-size:20px;}
#pd #sim-products #sim-list{margin:1% 0 0 0;}
#pd #sim-products #sim-list li{width:90%; min-height:150px; margin:0 5%; cursor:pointer;}
#pd #sim-products #sim-list img{width:100%; margin:0 0 10px 0; background:#FFF;}

@media screen and (max-width: 768px){
	#pd #media{float:none; width:100%; margin:0;}
	#pd #detail{float:none; width:96%; margin:1% 0 0 0;}

	#pd #sim-products{margin:0 0 5% 0; border-top:1px solid #FFF;}
	#pd #sim-products #heading{margin:5%; font-size:20px;}
}


/* ---------------------------------------
Enquiry Form [product-detail.php]
------------------------------------------*/
#enq-form{display:none; position: relative; background:#fff; overflow: hidden; border-top:1px solid #eee6e3;}
#enq-form .left{float:left; width:48%;}
#enq-form .right{float:right; width:50%;}
#enq-form .close{position: absolute; top:5%; right:5%; font-family: helvetica-thin, Arial, Helvetica, sans-serif;  font-size:48px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}

#enq-form h3{display: block; margin:0; font-family: quattrocento-regular, Arial, Helvetica, sans-serif;  font-size:28px;}
#enq-form ul{text-align: center; }
#enq-form li{position: absolute; width:100%; height:100%; background:#f7f6f4;}
#enq-form li div{padding:10% 5% 5%;}
#enq-form li img{width:64px;}
#enq-form li b{display: block;}
#enq-form li.loading{z-index:5; background: #fff;}
#enq-form li.thanks{z-index:4; background:#fcfcfb;}
#enq-form #form-wrapper{padding:5%; overflow: hidden; background:#f7f6f4;}
	
@media screen and (max-width:768px){
	#enq-form .left{width:100%;}
	#enq-form .right{width:100%;}
	#enq-form .close{position: absolute; top:0%; right:5%;}
	
	#enq-form li div{padding:25% 5%;}
}


#contact{overflow: hidden;}
	
#global-wrapper{position:relative; min-height:600px; overflow: hidden;}
#global-thankyou{position:absolute; top:0; left:0; z-index:3; width: 84%; min-height:600px; padding:3% 8%; background: #f7f6f4;}	
#global-loading{position:absolute; top:0; left:0; z-index:2; width: 84%; min-height:600px; padding:3% 8%; background: #eee;}	
#global-form{padding:3% 8%;}

#global-form li{float:left; width:50%; margin:0 0 2% 0;}
#global-form .full-width{width:100%; margin:0 0 2% 0;}
#global-form b{display: block; font-weight: normal; padding:1%;}
#global-form input{width: 90%; padding: 3%;}
#global-form textarea{width: 94%; padding: 2%;}
#global-form input[type=checkbox]{vertical-align:middle; width: 20px;}

#global-form .mail-list{width: 94%; padding:0  0 5% 0;}

@media screen and (max-width: 768px){
	#global-wrapper{min-height:400px;}
	#global-thankyou{padding:5% 8%; min-height:400px;}
	#global-loading{padding:5% 8%; min-height:400px;}
	#global-form{padding:5% 0;}
	
	#global-form li{width:100%; margin:0;}
	#global-form .full-width{margin:0;}
	#global-form b{display: none;}
	
	#global-form input{width: 90%; margin:0; padding:5%; border:0; border-top: 1px solid #eee;}
	#global-form textarea{width: 90%; margin:0; padding:5%; border-top: 1px solid #eee;}
}




/* ---------------------------------------
General Enquiry Form (product-detail.php)
------------------------------------------*/
#genform{position:relative; width:100%; min-height:250px; margin:2.5% 0 2% 0; padding:2% 0 2% 0; border-top:1px solid #DDD; border-bottom:1px solid #DDD; overflow:hidden;}
#genform #content #heading{font-size:22px;}
#genform #loading{display:none; position:absolute; top:0; left:0; z-index:6; width:100%; height:100%; background:#AAA; color:#FFF; text-align:center;}
#genform #loading b{display:block; font-weight:normal; font-size:22px;}
#genform #loading img{width:32px;}

#genform #thankyou{display:none; position:absolute; top:0; left:0; z-index:5; width:100%; height:100%; background:#fdf8ef; text-align:center;}
#genform #thankyou b{display:block; font-weight:normal; font-size:22px;}
#genform #thankyou img{width:48px;}
#genform .pad{padding:9% 5%;}

#genform input{width:29.1%; margin:0 0 1% 0; padding:1.7%;}
#genform textarea{width:96.5%; padding:1.5%;}
#genform button{margin-top:1%;}

@media screen and (max-width: 768px){
	#genform{margin:2.5% 0 0 0; padding:3% 0 3% 0; background:#fefcf9;}
	#genform #content #heading{padding:3% 0 0% 5%; font-size:5vw;}
	#genform #content p{padding:0% 5% 3% 5%;}
	#genform #thankyou{}
	#genform input{width:90%; margin:0; padding:3% 5%; border:0; border-top:1px solid #DDD; background:#fefcf9;}
	#genform textarea{width:90%; padding:3% 5%; border:0; border-top:1px solid #DDD; background:#fefcf9;}
	#genform .pad{padding:25% 5%;}
}
@media screen and (max-width: 480px){
	#genform{padding:5% 0 5% 0;}
	#genform #content #heading{font-size:7vw;}
	#genform input{margin:0; padding:4% 5%;}
	#genform textarea{padding:4% 5%;}
}


/* ---------------------------------------
Footer
------------------------------------------*/
footer{clear:both; width:100%; background:#FFF; border-top:1px solid #eee6e3;}
footer #foot{max-width:1170px; padding:2%; min-height:200px; margin:auto;}

footer #detail{float:left;}
footer #social{float:right; text-align:right;}
footer #social li{display:inline-block; width:36px; height:36px; margin:0 5px 0 0; border-radius:100px; background: #9c9c9b;}
footer #social img{width:36px;}


@media screen and (max-width: 768px){
	footer #foot{padding:5%;}
	footer #social{float:left; }
}


@media screen and (max-width: 768px){
	.noMobile{display:none !important;}
}