/* TERRY BICYCLES 2017
landingpage-styles-2017.css - 20170825
update 20180803
by Colin Dodgson

Styles for the category landing pages
Pulls in and modifies some rules used in home page for responsive display of images
Overwrites rules used in previous landing page set up still in other style sheets
 */
#shopbywrap {
    /* position: relative; */
    display: inline-grid; 
}
#shopbyboxX {
    font-family: 'Open Sans',sans-serif;
    font-size: 12px;
    padding: 4px 0;
    border-radius: 4px;
    /* background-color: #ccc; */
    margin: 10px 0 5px;
     text-align: left; 
    /* width: 100px; */
    float: left;
    cursor: pointer;
    position: relative;
    display: block;
    clear: both;
}
span.sbsSpinner.downarrow {
    background: url(/site/images/arrow-sq-up.svg) 0 2px no-repeat;
    /* width: 9px; */
    /* height: 9px; */
    /* margin: 0px 5px 5px 5px; */
    background-size: contain;
}
span.sbsSpinner {
    background: url(/site/images/arrow-sq-down.svg) 0 2px no-repeat;
    width: 9px;
    height: 9px;
    margin: 0px 0 5px 8px;
    background-size: contain;
    /* float: left; */
    /* margin-left: 30px; */
    padding: 0 !important;
    display: inline-block;
    position: absolute;
    top: 20%;
    left: 70px;
}
#itemCnt {
    float: right;
    margin-left: 10px;
}
.arrayrow:first-child { padding-left: 0; }

#maincontents { max-width: 975px;     width: 100%; }
#maincontentsfirsttable { display: inline; }
#landingcategory  {
	background: none !important;
}
#landingcategory h1 {
	font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.respimg1.mainimgpane.hpimg { max-width: 975px;
width: 100%; }
.respimg2.mainimgpane.hpimg { max-width: 480px;
width: 40vw;  }
.respimg3.mainimgpane.hpimg { max-width: 316px;
width: 27vw; }
.respimgrow { float: left;
height: auto;
margin-right: 0;
overflow: hidden; position: relative; }
.respimgrow.last { margin-right: 0; }
.eqspaceldg {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.respimgrow.respimg1 img  { max-width: 975px !important; width: 100%; }
.respimgrow.respimg2 img  { max-width: 480px !important; width: 100%;  }
.respimgrow.respimg3 img  { max-width: 316px !important; width: 100%;  }

#landingcontent, .respimgwrap, #sortBar {
	/*width: 82vw !important;*/ max-width: 975px; padding: 0;
}
#sortBar { margin: 10px auto; }
.respimgwrap {
	margin-bottom: 20px;
}
.ldgtxtbox {
	position: absolute;
    left: 15px;
    bottom: 15px;
    padding: 12px;
    background-color: #fff;
    opacity: 0.9;
    font-family: 'Open Sans', sans-serif;
    /*font-weight: bold;*/
    text-align: left;
    color: #212121;
    font-size: 20px;
    text-transform: uppercase;
    line-height: 110%;
}
.img1 .mainimgpane span.inner { padding-top: 46%; }
.img2 .mainimgpane span.inner { padding-top: 121%; }
.img3 .mainimgpane span.inner { padding-top: 140%; }
.helpcellimg {  position: relative; cursor: pointer; }
.helpcellimg img { 
    width: 211px;
    height: auto; }
.landingcontent .category-cell div .helpboxtext {     font-family: 'Open Sans', sans-serif;
    text-align: left;
    color: #444 !important;
    position: absolute;
    width: 60%;
    height: auto;
    left: 12%;
    margin: 20px 0 0 30px !important;
    text-align: left !important;
    display: block;
    line-height: 130%; }
.landingcontent .category-cell div .helplg { 
    font-weight: 200;
    font-size: 1.5vw;
    top: 0%; }
.landingcontent .category-cell div .helpsm { 
    font-weight: 400;
    font-size: 1.0vw;
    top: 78%; }

  /*overrides for overlay/trigger*/ 
.tdiffinnertext {
    background-color: white;
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
}
.reasonsinner {  padding: 30px; }
.fancybox-skin { background-color: #fff; }
#reasonstitle { background-image: none; text-align: left; width: 100% !important; height: auto; }
#reasonstitle span { font-family: 'Open Sans', sans-serif;
    color: #d70c8c; line-height: 110%; font-size: 30px; font-weight: 200; }
#reasonstitle span.hide {  position: relative; left: 0; }

#category-list2 {
	display: none;
}

* content driven ----------- */
@media only screen 
and (max-width : 1500px) {
	.feature4Txt { font-size: 2.2vw; }
}
@media only screen 
and (min-width : 1201px) {
	
	
}
@media only screen 
and (max-width : 1200px) {
	/*.mainimgpane  {    margin-bottom: 15px; }*/
	.tiersection  { width: 98%; margin: 2% 1%;  }
	.ldgtxtbox {  font-size: 1.8vw;  }
	/*.mainimgpane  { width: 98vw;  }*/
	.feature2 {    width: 47vw ;  }
	.feature4Txt { font-size: 2.5vw; }
	/* Item page overrides */
	
	#left-wrap {
    width: 15vw !important;
    padding-left: 1vw; }
	
	.landingcontent .category-cell div .helpboxtext { width: 70%; left: 5%; }
	.landingcontent .category-cell div .helplg { font-size: 1.7vw;  }
	.landingcontent .category-cell div .helpsm { font-size: 1.3vw;  }
}
@media only screen 
and (max-width : 1090px) {
/* Styles */
}
@media only screen 
and (min-width : 1025px) {
	
}
@media only screen 
and (max-width : 1024px) {
	.ldgtxtbox {  font-size: 1.9vw;  }
	.feature4Txt { font-size: 2.5vw; }
	#landingcontent { margin: auto; }
	.landingcontent .category-cell div .helplg { font-size: 2.2vw;  }
	.landingcontent .category-cell div .helpsm { font-size: 1.7vw;  }
	#maincontents {     width: 100vw; max-width: 1200px; }
	#its, #its tbody, #filteredoutput table, #filteredoutput tbody { margin: auto; }
	.category-wrap { margin: auto;  max-width: 100% !important; }
	/*#sortBar { width: 90vw !important; }*/
}
@media only screen 
and (max-width : 900px) {
	.maxWidthEl.tiersection { margin: 3% auto;  }
	.catpane {   width: 30vw ;    }
	.feature2 {    width: 46vw ;  }
}
@media only screen 
and (max-width : 768px) {
	#its, #its tbody, #filteredoutput table, #filteredoutput tbody { max-width: 546px;  }
	#maincontents div#category-list.landingcontent, .category-wrap  {     max-width: 766px !important; }

}
@media only screen 
and (max-width : 700px) {


#mainimg  { width: 100vw;  margin: 0; }
#mainimg span.inner {   padding-top: 100%; }
#catpaneleft span.inner, #catpanectr span.inner, #catpaneright span.inner {   padding-top: 41%; }
.catpane { width: 100%; max-width: 630px; margin: 2% 0; float:none;}
.ldgtxtbox {     font-size: 2.2vw; padding:2.1vw;  }
.feature2 {   width:100%;  margin: 2% 0; max-width: 632px; float: none; }
.feature4 {   width: 43vw;  margin: 2% 1%; max-width: 298px; float:none; }
}
@media only screen 
and (max-width : 600px) {
	#landingcategory h1 { font-size: 4.0vw; }
	.ldgtxtbox {     font-size: 2.3vw; }
	.landingcontent .category-cell div .helplg { font-size: 3.2vw;  }
	.landingcontent .category-cell div .helpsm { font-size: 2.5vw;  }
}
@media only screen 
and (max-width : 510px) {
		.helpcellimg {   width: 100%; }
		.landingcontent .category-cell div .helpboxtext { width: 60%; left: 8%; }
		#its, #its tbody, #filteredoutput table, #filteredoutput tbody { max-width: 320px; min-width: 0; }
}
@media only screen 
and (max-width : 440px) {
	
}
@media only screen 
and (max-width : 420px) {
	
}
@media only screen 
and (max-width : 414px) {

	.landingcontent .category-cell div .helplg { font-size: 4.2vw;  }
	.landingcontent .category-cell div .helpsm { font-size: 3.0;  }
}
@media only screen 
and (max-width : 400px) {
	
}

@media only screen 
and (max-width : 359px) {
	
}

@media only screen 
and (max-width : 320px) {


}