﻿@media screen and (max-width:1170px)
{
@font-face {
font-family: 'apple_chancerychancery';
src: url('apple_chancery-webfont.eot');
src: url('apple_chancery-webfont.eot?#iefix') format('embedded-opentype'),
url('apple_chancery-webfont.woff2') format('woff2'),
url('apple_chancery-webfont.woff') format('woff'),
url('apple_chancery-webfont.ttf') format('truetype'),
url('apple_chancery-webfont.svg#apple_chancerychancery') format('svg');
font-weight: normal;
font-style: normal;

}


.container {
margin: 0 auto;
max-width: 1200px;
min-width:100%; width:100%;
box-sizing: border-box; padding:0 2%;
}

#header-featured{ width:100%;}
#featured-wrapper{ width:100%;}
#featured-wrapper img{ max-width:100%;}

.aboutright-panel-1 img {
  box-sizing: border-box;
  height: auto !important;
  margin: 0;
  max-width: 100% !important;
  width: 100% !important;
}
.aboutright-panel img {
  height: auto !important;
   box-sizing: border-box;
  max-width: 100%; margin:20px 0 0 0;
  max-width: 100% !important;
  width: 100% !important;

}
.services-row1-left, .services-row2-left, .services-row3-left, .services-row4-left{width:62%;}
.services-row1-right, .services-row2-right, .services-row3-right, .services-row4-right{ padding-right:2%;}

.prints-barkly-picture-framing .content-area, .about-barkly-picture-framing .content-area, .services-barkly-picture-framing .content-area, .contact-barkly-picture-framing .content-area{ background:#151213; margin-bottom:28px !important;}

}



@media screen and (max-width:1024px)
{
#banner{ width:100%; padding:0px; box-sizing:border-box; padding:15px 3%;}
#menu li a, #menu li span{ font-size:24px;}
#logo {width:40%!important;}
#logo img{ width:100% !important;}
#menu li a, #menu li span {
  color: #212121;
  display: inline-block;
  font-size: 20px !important;
  letter-spacing: 0.05em;
  margin-left: 1px;
  outline: 0 none;
  padding: 1em 10px;
  text-decoration: none;
}

.container-content{ min-width:96%;}
.contact-left img{ width:100%; box-sizing: border-box;}
.contact-right{ width:45% !important;}
.contact-barkly-picture-framing .contact-center h3{ font-size:1.2em; color:#df771c;}
.contact-barkly-picture-framing .contact-center1 h3 {
    font-size: 1.2em; color:#df771c; font-weight:normal;
}




.container-content img {
  box-sizing: border-box;
  width: 91% !important; 
}

.prints-abstract-barkly-picture-framing .container-content img{ border: solid 4px #fff; box-sizing: border-box;}

.prints-abstract-barkly-picture-framing .gallery li, .prints-vintage-barkly-picture-framing .gallery li, .prints-photography-cities-barkly-picture-framing .gallery li, .prints-miscellaneous-barkly-picture-framing .gallery li, .prints-floral-barkly-picture-framing .gallery li, .prints-figurative-barkly-picture-framing .gallery li{ margin-left:1.5%; margin-right:1.5%; width: 22%; min-width: inherit;}

.prints-abstract-barkly-picture-framing .gallery li img{ max-width: 100%; height:auto !important;}
.paginate-on{padding-left:10px;box-sizing: border-box;}
.prints-barkly-picture-framing #banner{ padding-bottom:0px;}
.gallery-paginate{ padding-top:20px; padding-left:10px;box-sizing: border-box;} 
}

@media screen and (max-width:769px)
{

}

@media screen and (max-width:768px)
{
#menu{ display:none;}
.banner-image h1{ font-size:40px;}
.rectangle-center{ width:100%; padding:0px !important;}
.rectangle-center img{width:100% !important; height:auto;}
#featured-wrapper{ width:94%; width:100%; padding:0 3%; box-sizing:border-box;}
#featured-wrapper img{ height:auto;}
#banner p{ font-size:18px; line-height:29px; padding-bottom:20px !important; padding-top:40px !important;}

.about-barkly-picture-framing .container-content img, .services-barkly-picture-framing .container-content img, .contact-barkly-picture-framing .container-content img{border:none;}

.container-content img {
  box-sizing: border-box;
  width: 100% !important;
}
.contact-leftimg{ margin-left:0px; margin-top: 20px;}
#header-wrapper{ margin-bottom:0px !Important;}
#header-featured{ margin-top:10px !important;}
.rectangle-center{ margin-top:0px !important;}

.mobile-footer{display: block;}
.banner-image{ width:100%; float:left; display:block; border-top: solid 1px #231f20;}
.banner-image h1{ font-size:40px; color:#231f20; font-weight:normal; text-align:center; padding-top:15px; font-family: 'apple_chancerychancery'; margin-left:0px !important; margin-right:0px !important;}
.mobile-banner-image{ display:none;}
.mobile-copyright{ display:none;}

.mobile-footer{ background:#eeeceb; float:left; width:100%; padding:15px 4%; box-sizing:border-box; margin-top:100px;}

.mobile-menu{ width:100%; float:left; height:auto; text-transform:uppercase;}
.mobile-menu ul{ float:left; height:auto;}
.mobile-menu ul li{height:auto; line-height:normal; margin:2px 0; }
.mobile-menu ul li a{ font-size:16px; padding:2px 10px; line-height:normal;}
.mobile-menu ul li a:hover{ background:#c3c4c6;}
.prints-barkly-picture-framing .container-content{ padding-bottom:0px;}

.mobile-address{ width:100%; float:left; height:auto; border-top: solid 1px #040707; padding-top:15px;  margin-top:15px;}
.mobile-address ul{width:100%; float:left;}
.mobile-address ul li{width:100%; float:left; color:#231f20; font-size:16px; line-height:30px; margin-bottom:10px;}
.mobile-address ul li span{ float:left; width:30px; height:30px; margin-right:10px;}

.mobile-address ul li span img{ max-width:100%; height:auto;}
.mobile-container-middle{ display:none;}
#logo{ width:35% !important; position: relative; z-index: 999;}
#logo img{ max-width:100%!Important; height:auto!important;}
#header{ height:120px;}

.mobile-inner-div-icons img{ width:50px !important; height:50px !important;}

.mobile-menu-background-class{ background:#231f20; color: #fff !important;}

.meanclose span{ background: #fff !Important;}
.backstretch img{ display:none !important;} 

.content-area p span{ padding:12px; width:100%; display:block; box-sizing:border-box;}
.content-area{ padding-bottom:0px; background:#151213;}
#header-featured{ padding-bottom:0px !important;}
.container-content{ margin-top:0px !important;}

.aboutright-1, .aboutright{ width:100%; margin-left:0px; margin-right:0px;}
.aboutright-1, .aboutright{ width:100% !important; height:auto !important;}
.aboutright{ margin-bottom:30px; margin-top:30px;}
.aboutright-1{ margin-top:30px;}

.aboutleft-panel{width:100%; padding:15px 2% 15px 2%; box-sizing: border-box;}
.aboutright-panel{ width:100%; height:auto; padding:0px;}

.services-row1-right, .services-row2-right, .services-row3-right, .services-row4-right{ padding-right:0;}

.aboutleft-panel-1{width:100%; padding:25px 2% 0 2%; box-sizing: border-box;}
.aboutright-panel-1{ width:100%; height:auto; padding:0px;}

.about-barkly-picture-framing .container-content{ padding-bottom:0px;}
.about-barkly-picture-framing #banner, .services-barkly-picture-framing #banner{ padding-top:0px;}
.about-barkly-picture-framing h1, .services-barkly-picture-framing .banner-image h1, .prints-barkly-picture-framing .banner-image h1{ margin-top:12px;}
.about-barkly-picture-framing .banner-image, .services-barkly-picture-framing .banner-image, .prints-barkly-picture-framing .banner-image{ /*border-top:none;*/}


.about-barkly-picture-framing .mobile-footer{ margin-top:100px;} 
.services-barkly-picture-framing .container-content{ padding-bottom:0px;}
.services-row4-right{ background:#fff;}
.services-row1-left, .services-row2-left, .services-row3-left, .services-row4-left{ width:100%; margin:0;}
.services-row1-right, .services-row2-right, .services-row3-right, .services-row4-right{ width:100%; margin-top:0; margin-bottom:0px; padding-right:0px;}
.services-row1-right img, .services-row2-right img, .services-row3-right img, .services-row4-right img{ width:100% !Important; height:auto !Important;}
.services-row1-right p, .services-row2-right p, .services-row3-right p, .services-row4-right p{ margin-left:0px !Important; margin-right:0px!Important; float:none !important;}
.services-row4-right p{ margin-bottom:0px !important;}

.services-row2, .services-row3, .services-row4{ margin-top:0px;}
.container-content h3 {
  color: #df771c;
  font-size: 17px;
  font-weight: normal;
}

.contact-right h3{ margin-top:20px; margin-bottom:20px; font-size:19px; text-align:center; color:#df771c; font-weight:normal;}


.services-row1-left{ padding-top:10px;}
.services-row2-right{ margin-top:30px; margin-bottom:25px;}
.services-row1-right{ margin:25px 0;}
.services-row3-right{ margin:25px 0;}
.services-row4-right{ margin-top:25px;}
.aboutright-panel-1{ margin-top:20px;}


.contact-left{ width:100%; float:left;}
.contact-center{width:100%; float:left;}
.contact-right{ width:100% !important; float:right;}
#map-canvas1{ width:100% !important;}

.contact-barkly-picture-framing .container-content h1{ color:#df771c; font-weight:normal; font-size:19px; text-align:center;}

.contact-barkly-picture-framing .banner-image{ /*border:none;*/}
.contact-barkly-picture-framing #banner{ padding-top:0px;}
.contact-barkly-picture-framing .container-content{ padding-bottom:0px !important;}
.contact-center p{ margin-top:0px; margin-bottom:0px; line-height:normal;}
.contact-center h3{ margin-bottom:5px; margin-top:25px;}
.contact-center{ padding-bottom:20px;}
.contact-left h1{ margin-top:20px; margin-bottom:0px;}
.contact-barkly-picture-framing .container-content1 h1 {
  color: #df771c;
  font-size: 19px;
  font-weight: normal;
  text-align: center;
}
.contact-barkly-picture-framing .banner-image h1{/* margin-top:0px;*/}
.print-row1 ul li{ width:33%;}

.contact-top-txt{ display:none;}
}


@media screen and (max-width:640px)
{
.container-content img { border:none;}
#header{ height:100px;}
.banner-image h1{ font-size:30px;}
#logo {width:40%!important;}
.services-row2-left ul li{ width:46%; font-size:14px;}
.print-row1 ul li{ width:}
.print-row1 ul li{ width:48%; padding:0 5% 0 5%; min-height:275px;}
.print-text {
  margin: 12px;
  width:100%; margin:0px;
}
.target_sq {
    width: 100%;
  }
  .target_sq img {
  height: auto !important;
  width:100% !important;
}
.gallery-paginate{
  display: none;
}
.paginate-on
{
  display: none;
}
.mobile-paginate-on
{
  display: block;
  width: 100%;  box-sizing: border-box;
  padding-bottom: 24px;
  background: black;
  padding:5%;
  color: #df771c;
  font-size: 12px;
}
.mobile-page
{
  color: #fff;
}
.content-area
{
  background: white;
}
.gallery.clearfix {
  margin-top: 5px;
}
.tooltip-res
{
  display: block;
}
.tooltip-res {
  width: 100%;
  color: black;
}
.tooltip-res span{
  color: #df771c;
}
.code {
  margin-bottom: 30px;
  margin-top: 15px;
  padding-left:0;
  text-align: left;
  text-transform: uppercase;
}
.mobile-title
{
  color: #df771c;
  padding-left: 5%;
  margin-bottom: 17px;
  margin-top: 15px;
  text-align: left;
  text-transform: uppercase;
}
.tool-tip-con-left
{
  clear: both;
  width: 47%;
  text-align: left;
  float: left;
  padding-left: 5%;
  margin-top: 15px;
  margin-bottom: 15px;
   font-size: 14px;
}
.tool-tip-con-left h5{ text-transform:uppercase;} 

.tool-tip-con-right
{

  width: 41%;
  text-align: right;
   float: left;
   padding-right: 7%;
    margin-top: 15px;
  margin-bottom: 15px;
   font-size: 14px;
}
.gallery li {
  height: auto;
  margin-top: 10px;
  }
div.ui-tooltip
{
  display: none !important;
}
.print-price{ margin-left:12px;}

.prints-abstract-barkly-picture-framing .container-content img{ border: none;}
.tool-tip-con-left p{margin-left:0px; margin-right:0px}
.tool-tip-con-right p{ margin-right:0px;}
.prints-abstract-barkly-picture-framing .gallery li{ width:50%; margin-left: 0px; margin-right: 0px; padding-left: 2%; padding-right: 2%; box-sizing: border-box;}

.prints-abstract-barkly-picture-framing .gallery li, .prints-vintage-barkly-picture-framing .gallery li, .prints-photography-cities-barkly-picture-framing .gallery li, .prints-miscellaneous-barkly-picture-framing .gallery li, .prints-floral-barkly-picture-framing .gallery li, .prints-figurative-barkly-picture-framing .gallery li{ width:100%; padding-right: 3%; padding-left: 3%;  box-sizing: border-box; margin-left:0px; margin-right:0px;}

.prints-abstract-barkly-picture-framing .container-content p, .prints-vintage-barkly-picture-framing .container-content p, .prints-photography-cities-barkly-picture-framing .container-content p, .prints-miscellaneous-barkly-picture-framing .container-content p, .prints-floral-barkly-picture-framing .container-content p, .prints-figurative-barkly-picture-framing .container-content p{
  font-size: 14px;
  text-transform: uppercase;
}

.prints-abstract-barkly-picture-framing h5{ text-transform: uppercase; font-weight:bold;}

.prints-abstract-barkly-picture-framing .gallery li img{ width: 100%!important; max-width: inherit; height: auto !important;}


.target_re {
    width: 100%;
  }
  .target_re img {
  height: auto !important;
  width:100% !important;
}
.mean-container .mean-bar{ top:45% !important;}
}

@media screen and (max-width:600px)
{
#logo{ width:100%;}
#logo div{ width:100%; padding:0 2%; box-sizing:border-box;}
.mobile-inner-div-icons img{ width:20%;}
.mobile-inner-div-icons img{ width:40px !important; height:40px !important;}
}

@media screen and (max-width:530px)
{
#header {
  height:90px;
}
.print-row1 ul li{ font-size:18px;}

#logo {
  width: 45% !important;
}

.prints-abstract-barkly-picture-framing .gallery li, .prints-vintage-barkly-picture-framing .gallery li, .prints-photography-cities-barkly-picture-framing .gallery li, .prints-miscellaneous-barkly-picture-framing .gallery li, .prints-floral-barkly-picture-framing .gallery li, .prints-figurative-barkly-picture-framing .gallery li{ width:100%; padding-right: 4%; padding-left: 4%;  box-sizing: border-box;}
.code{ padding-left:0px;}
.mean-container .mean-bar{ top:40% !important;}

.container-content1 p{
font-size: 1.2em;
margin: 12px;
text-transform: uppercase;
}
.container-content1 p a{ color:#e1e1e1;}
}
@media screen and (max-width:480px)
{
#logo{ margin-top:10px;}

.code{ padding-left: 0px;}

#header {
    height: 70px;
}
.prints-figurative-barkly-picture-framing .container-content img{ height:auto !important;}
.rectangle-center1 {
margin-top: 0 !important;
}
.container-content1 {
margin-top: 0 !important;
}
}


@media screen and (max-width:400px)
{
#header {
 height:55px;
}
}
