/*! Fonts generated by Font Squirrel (https://www.fontsquirrel.com) */


@font-face {
    font-family: 'josefin_sanslight';
    src: url('fonts/josefinsans-light-webfont.woff2') format('woff2'),
         url('fonts/josefinsans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'arconregular';
    src: url('fonts/arcon-regular-webfont.woff2') format('woff2'),
         url('fonts/arcon-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* p tops, Summary*/
@font-face {
    font-family: 'josefin_slabsemibold';
    src: url('fonts/josefinslab-semibold-webfont.woff2') format('woff2'),
         url('fonts/josefinslab-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*FOR NOTES SEE 24-3.css*/
body {
min-height:100vh;
margin:0;
padding:0;
overflow-x:hidden;
margin-top:68px;/* 68px is height of fixed logobox at biggest screensize */
vertical-align:baseline;
background:#48403e;/*new choc*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:grayscale;
font:inherit;
font-size:100%;
font-style:normal;
font-family:arconregular,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:normal;
line-height:normal;
letter-spacing:normal;
word-spacing:normal;}

div,table,a,img,ul,h1,h2,h3,p {
margin:0;
padding:0;
background:transparent;}

div,table,ul,img {
margin-left:auto;
margin-right:auto;/* center for msie >>> */
text-align:center;}

h1,h2,h3,p{line-height:normal;}
table {width: 100%;}



/* DROPDOWN MENU */

/*- Reset button*/
button {
  display: inline-block;
  border: none;
  margin: 0;
  padding: 0;
  font-family: josefin _sansthin, sans-serif;
  font-size: 1rem;
  line-height: 1em;
  background: transparent;
  -webkit-appearance: none;}

 
#menubox, .slidemenu {display:none;} 
/* OVERLAY*/
#overlay {display:none;}/* shows at @ 769w /767h when menu is active*/
  
/* --------- END MENUSTUFF Large Screens --------*/

/* - - - - - - BG IMAGES - - - - -  */
#indexbg, #ropesbg, #fittingsbg, #knotsbg {
height:55vh;/* IMPORTANT!!!! */
  max-width:2560px;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius:0;
}


/* --IMAGE_SETS- */
#indexbg {
background-image: url("images/24-srcsets/stairropes-main-2250.jpeg");
background-image: -webkit-image-set(
    url("images/24-srcsets/stairropes-main-2250.jpeg") 1x,
    url("images/24-srcsets/stairropes-main-3840.jpeg") 2x);
background-image: image-set(
    url("images/24-srcsets/stairropes-main-2250.jpeg") 1x,
    url("images/24-srcsets/stairropes-main-3840.jpeg") 2x);
max-height:797px; /*IMPORTANT*/
  }

 #ropesbg {
background-image: url("images/24-srcsets/ropes-main-2250.jpeg");
background-image: -webkit-image-set(
    url("images/24-srcsets/ropes-main-2250.jpeg") 1x,
    url("images/24-srcsets/ropes-main-3840.jpeg") 2x);
background-image: image-set(
    url("images/24-srcsets/ropes-main-2250.jpeg") 1x,
    url("images/24-srcsets/ropes-main-3840.jpeg") 2x);
max-height:799px; /*IMPORTANT*/
  }
 
#fittingsbg {
background-image: url("images/24-srcsets/fittings-main-2250.jpeg");
background-image: -webkit-image-set(
    url("images/24-srcsets/fittings-main-2250.jpeg") 1x,
    url("images/24-srcsets/fittings-main-3840.jpeg") 2x);
background-image: image-set(
    url("images/24-srcsets/fittings-main-2250.jpeg") 1x,
    url("images/24-srcsets/fittings-main-3840.jpeg") 2x);
max-height:741px; /*IMPORTANT*/
  }

 #knotsbg {
background-image: url("images/24-srcsets/knots-main-2250.jpeg");
background-image: -webkit-image-set(
    url("images/24-srcsets/knots-main-2250.jpeg") 1x,
    url("images/24-srcsets/knots-main-3840.jpeg") 2x);
background-image: image-set(
    url("images/24-srcsets/knots-main-2250.jpeg") 1x,
    url("images/24-srcsets/knots-main-3840.jpeg") 2x);
max-height:800px; /*IMPORTANT*/
  }
/* END - - BG IMAGES - - END */ 


/* LOGOBOX & SUBT BOXES*/
#logobox,#subtitlebox {
width:100%;
margin-left:auto;
margin-right:auto;}


/* LOGOGBOX*/
#logobox{
background:#48403E;/*IMPORTANT! */
position:fixed;
z-index:2;
top:0;
height:68px;
border-bottom:0px dotted cyan;
}


/* LOGO TEXT */
#logotext {
font-family:josefin_sanslight, sans-serif;
color:#fff;
font-size:49px;
line-height:0.9em;
letter-spacing:2px;
margin-top:5px;
margin-bottom:16px;/*this doesn't seem to do anything!*/}


#logobox a, visited, active{text-decoration:none;
border:0;}
#logobox a:hover{background:transparent;}/*  IMPORTANT*/


#logobox a, visited, active:focus{outline:none;}
/* IMPORTANT */

/*-------------SUBTITLE-------------*/

/*SUBTITLE BOX*/
#subtitlebox {
overflow:hidden;
text-align:center;
height:33px;
border-bottom:2px solid #e6e6e5;/*mercury*/
border:0px solid red;
position: -webkit-sticky;
position:sticky;
top:4px;/**IMPORTANT*/

z-index:1;/*IMPORTANT*/
}

/* SUBTITLE generic */
#subtitle{color:#fff;}

/* SUBTITLE changes */
#subtitle {
font-size:16px;
letter-spacing:2px;
word-spacing:2px;
margin-top:4px;
}

/* MAIN CONTAINERS */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* MAXw whitebox- WAS 2560to= original w of top banner*/
#whitebox{
max-width:1920px;
background:#fff;}

.mainbox {
max-width:1280px;
margin:0 auto;
padding-left:5%;padding-right:5%;
border:0px dotted orange;}


/* ------------ Top BoXES ------------ */
.toptextbox,.topbox{overflow: hidden;}

.toptextbox {/*for index,ropes,fittings,knots */
margin-top:2em;
margin-bottom:1em;
width:90%;
max-width:52em;
border:0px solid red;}

.toptextbox p.top{text-align:center;line-height:1.67em;}


.topbox {/*for measure,order & barriers NB .topbox h1 is left aligned until 480! SEE HEADERS*/
padding-top:3em;
margin-bottom:3em;
max-width: 950px;}


.topboxsmall{/*for faqs,contact & customers */
padding-top:0.2em;
margin-bottom:1.2em;
width:90%;
max-width:700px;
border:0px solid orange;}

.topboxsmall p.top{text-align:center;line-height:1.67em;}


.samplebox,.sampleboxnextto,.sampleboxsmall,.sampleboxsmallnextto,.samplebox700,.samplebox700w,.samplebox700main{overflow: hidden;border:0px solid green;}

.samplebox,.sampleboxnextto{
max-width: 950px;}
.sampleboxsmall,.sampleboxsmallnextto{
max-width:840px;}
.samplebox,.sampleboxsmall{
margin-bottom:4.5em;}
.sampleboxnextto,.sampleboxsmallnextto{
margin-bottom:2em;}


.samplebox700, 
.samplebox700w, 
.samplebox700main{padding:2% 4%;width:80%;max-width:700px;background:#f0f1f5;/*palest mercury*/border:1px solid #e6e6e5;/*mercury*/border-radius:4px;margin:1em auto 3em auto;}

.samplebox700w{background:transparent;border:0px solid black;margin-top:0;margin-bottom:1em;padding:2px;}

.samplebox700 p, .samplebox700 ul li{color:#181818;
letter-spacing:0.02em;
margin:1.5%;
padding-bottom:2%;}
.samplebox700 ul li{
line-height:1.55em;}


/*BOXES FOR TASSELPIX*/
.box350,.box400{margin:auto;padding:22px 0 10px 0;}
.box350 {max-width:350px;}
.box400 {max-width:400px;}
/*MINI COLOURED TEXT BOXES*/
.boxtext {margin-top:5%;padding:3% 5%;background-color:#f1eeee; border:0px solid #8d908f; border-radius:6px;}


div.right{float:right;padding:1% 0% 1.5% 3%;}
div.left{float:left;padding:1% 3% 1.5% 0%;}
div.third,div.barrierflow{width:33%;float:left;}
div.half,div.pricehalf{width:50%; float:left;}


/*CREDITS BOX*/
#credits{overflow:hidden;margin:auto;padding:22px 0 75px 0px;/* so box in white sits behind fixed knotbar which is 75px*/}


/* !!!!--- A FEW FLEXBOXES ----!!!*/

#knotimgbar, #knotlinkbar {
position:fixed;
z-index:2;
width:100%;
max-width:1920px;
left:0;
right:0;
bottom:0;
display: flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
border-top:3px solid #f1eeee;
overflow:hidden;
}

/*JUST KNOT IMAGE BAR*/
#knotimgbar {
background:#cfcec9;
padding-bottom:27px;}

/*JUST LINK BAR*/
#knotlinkbar {
background:transparent;
border:0;
padding-bottom:7px;}

/* 8 xcolumns */
#knotimgbar div, #knotlinkbar div {
  flex: 12.5%;
  max-width: 12.5%;
  border:0px dotted yellow;
}

/*knot images*/
#knotimgbar div img {
max-width:100%;
height:auto;
display:block;
margin:0 auto 0 auto;
border:0px solid green;
}

/*knot links*/
#knotlinkbar div a  {
color:#181818;
font-size:1.05em;
text-decoration: none;
text-align: center;
padding-top:36px;
padding-bottom:2px;
}

#knotlinkbar div a:hover {
color: #fff;letter-spacing:1.5px;background:transparent;}


/*FLEX 6 USED only for for Stonkimgs on Index page */
/*FLEX6 - 6xcolumn -> 3 - 2 - >1*/
.flex6 {
  display: flex;
  flex-wrap: wrap;
  border:0px solid lime;
  padding-bottom:5%;
}

/* 6 x columns */
.flex6 div {
  flex: 16.66%;
  max-width: 16.66%;
  padding:1%;
  margin-top:4%;
}

.flex6 div img {
  border-radius:11px;
  vertical-align: middle;/*DOn't think this makes any diff!?! */
}

/*FLEX 3 TO BE */
.flex3 {
  display: flex;
  flex-wrap: wrap;
  border:0px solid red;
  padding-bottom:2%;
}

/* 3 equal columns - Become 100% at W622*/
.flex3 div {
  flex: 33.33%;
  max-width: 33.33%;
  padding-top:1%;
  border:0px dashed lime;}

.flex3 div p {text-align:center;}
/* END OF FLEX3 BOX */


/*ENDBOX TO BE*/
#endbox {
width:100%;
margin-bottom:75px;/*IMPORTANT?!*/
padding:2%;}

#endbox p, #endbox a{
font-size:0.95rem;
font-family:arconregular, sans-serif;
color:#cfcec9;/*old mid grey*/
text-align:center;
line-height:1.3em;
padding:19px 5px 0 5px;}
#endbox p{margin-top:2em;}
#endbox a{border:0;}

#endbox a:hover{
background:#323232;
border-radius:7px;
letter-spacing:1.5px;
color:#fff;
}
/* END OF A FEW FLEX BOXES */



/*  -  - - - - -HEADERS - - - - - */
h1,h2,h3{
text-align:left;
color:#826e5d;
letter-spacing:1px;
font-weight:normal;/* IMPORTANT! */}

h1,h2.center,h3.center{text-align:center;}
h1{margin-top:0.8em;margin-bottom:0.4em;}
h2{margin-bottom:0.5em;}
h3{margin-bottom:0.5em;color:#4c4c4b;}

h1{font-size:2.2em;}
h2{font-size:1.75em;}
h3{font-size:1.55em;}

.topbox h1{margin-top:0;text-align:left;}
h2.faq{text-align:left;font-size:1.3em;font-weight:600;}

#quote{/*used for a knots h3*/
text-align:center;
font-family:"josefin_slabsemibold";
font-style:oblique;
font-size:1.3em;
color:#073f80;
letter-spacing:0.3px;
word-spacing:0.1px;
margin-bottom:1em;}

p{text-align:left;color:#4c4c4b;margin-bottom:1em;word-spacing:0.5px;font-size:1.16em;line-height:1.6em;}
p.med{margin-top:1.5em;}
p.center{text-align: center;}
p.customersname{color:#181818;font-size:1.2em;margin:3% 1.5% 1% 1.5%;}
p.customers{font-family:"josefin_slabsemibold";color:#073f80;font-size:1.18em;font-style:oblique;margin:0 1.5% 6% 3.5%;}

p.label{text-align:center;color: #51473f;font-size:1em;padding-bottom:4%;}
p.top{color:#000;font-family:josefin_slabsemibold;font-size:1.3em;margin-top:0;margin-bottom:0.6em;}
p.listtop{text-align:left;color:#000;font-size:1.1em;margin-top:0;margin-bottom:0.3em;}
p.policy{font-size:98%;}



/*--------IMGS-------------- */

img.border{border:3px solid #cfcec9;}
/* -------LINKS--------- */
a, visited, active 
{
color:#0f7ffe;
letter-spacing:0.3px;
text-decoration:none;
border:none;
display:inline-block;
line-height:100%;}


a:hover {
color:#181818;
background:none;
text-decoration:underline;
transition: 0.4s; /* Transition effects on hover (color) */}


a.image,a.stonkimg,a.anchor{border:0;} 
a.image,a.anchor{display:inline;}/*IMPORTANT!esp for anchor*/
a.anchor{position:relative;top:-68px;visibility: hidden;}
a.image:hover, a.stonkimg:hover {background: none;}



p.more {margin-top:auto; /* Margin-top:auto is IMPORTANT!! to get this more link to sit nicely at bottom */}
a.more {
  text-decoration:none;
  border:1px solid #e6e6e5;/*mercury*/
  border-radius:4px;
  padding:0.5em;
  background:#48403e;/*new choc*/
  font-family:arconregular;
  font-size:1em;
  color:#fff;}

a.more:hover {
color:#000;
background:#f0f1f5;/*palest mercury*/;}

/* -------LINKS END--------- */



/* IeMac  NECESSARY????? */
* html>body ul>li, * html>body ul>li a{display:inline-block;}
* html>body ul>li a{width:1px;white-space:nowrap}


/* -------LISTS--------- */
ul.knotlist, #faqlist {list-style:none;}
ul.knotlist {font-family:arconregular;color:#4c4c4b;font-size:1.05em;margin-left:4%;margin-bottom:4%;line-height: 153%;}
ul.knotlist li{margin:1%; padding: 9px 0 0 35px;background-image: url(images/list.gif);background-repeat: no-repeat;background-position: 3px 9px;text-align: left;}

/*FAQ*/
#faqlist li{padding:8px 0px 8px 35px;background-image: url(images/list.gif);background-repeat: no-repeat;background-position:1px 5px;text-align:left;}

#faqlist li a, active, visited {font-size:1.2em;color:#323232; display:inline;border:0px;}

#faqlist a:hover {
color:#0f7ffe;
transition: 0.4s;}


/* -------TABLES--------- */
#pricingtable,#pricelisttable{border: 1px dotted #cfcec9;text-align: left;empty-cells: show;margin-bottom:1%;}
#pricingtable td,#pricelisttable td {background-color:#f1eeee;border:1px dotted #cfcec9;padding:1.5% 0% 1.5% 2.5%;font-size:1.05em;}

#pricelisttable td.titles{column-span:all;border:0px;background-color:transparent;padding-top:3%;}
#pricelisttable td.notes{column-span:all;border:0px;background-color:transparent;color:#000;font-size:0.95em;font-weight:300;word-spacing:1px;line-height:1.5em;padding:1.5% 3% 3% 3%;}
hr{max-width: 930px;background-color:#cfcec9; height:2px;border-width:0;margin:5px auto;}


/* -----------NEW NEW NEW------------- */
/* -----------WIDTH WIDTH WIDTH ONLY------------- */
/* ------Screen <=1600 ----- */
@media screen and (max-width:1600px)
{
TACO-GLITCH-1600W{}
/*APPLIES TO ALL PAGES/BG IMAGES: */
#indexbg, #ropesbg, #fittingsbg, #knotsbg {height:44vh;}
/* END Screen WIDTH <=1600 */
}

/* -----------NEW NEW NEW------------- */
/* -----------WIDTH WIDTH WIDTH ONLY------------- */
/* ------Screen <=1440 ----- */
@media screen and (max-width:1440px)
{
TACO-GLITCH-1440W{}
/* TOP H1 BOX (to fit first text in nicely)*/
#h1box {
margin-top:2rem;
}

/* END Screen WIDTH <=1440 */
}



/* -----------HERE BEFORE------------- */
/* Screen from 1280 to 1025*/
@media screen and (max-width:1280px)
{
TACO-GLITCH-1280{}

}

/* Screen from 1024 to 911*/
@media screen and (max-width:1024px)
{
TACO-GLITCH-1024W{}
img, img.border {max-width:100%;height:auto;}
/* TOP H1 BOX (to fit first text in nicely)*/
#h1box {
margin-top:1.3rem;}
}


/* Screen from 910 to 821 */
@media screen and (max-width:910px)
{
TACO-GLITCH-910W{}
h1{letter-spacing:1px;margin-top:0.6em;}
h2{margin-top:0.7em;}
h1{text-align:center;}
h1,h2,h3,p{padding-left:3%;padding-right:3%;}
div.right,div.left{float:none;width:100%;display:block;padding:0%;margin:0%;}

}


/* -----------WIDTH WIDTH WIDTH------------- */
/* -------Screen <=820 ------------*/
@media screen and (max-width:820px)
{
TACO-GLITCH-820W{}
div.barrierflow{width:50%;}
div.barrierflow p{text-align:center;font-size:0.85em;margin-top:0.3em;padding-bottom:1.6em;letter-spacing:0.04em;}
.samplebox700,.samplebox700w,.samplebox700main{width:90%;}

/* - - - - - - BG IMAGES - - - - -  */

/* --IMAGE_SETS- */
#indexbg {
background-image: url("images/24-srcsets/stairropes-main-1125.jpeg");
background-image: -webkit-image-set(
    url("images/24-srcsets/stairropes-main-1125.jpeg") 1x,
    url("images/24-srcsets/stairropes-main-2250.jpeg") 2x);
background-image: image-set(
    url("images/24-srcsets/stairropes-main-1125.jpeg") 1x,
    url("images/24-srcsets/stairropes-main-2250.jpeg") 2x);
max-height:399px; /*OTHERWISE DISTORTS AS min IMAGE displayed(1125) IS 399px high*/
}

#ropesbg {
background-image: url("images/24-srcsets/ropes-main-1125.jpeg");
background-image: -webkit-image-set(
    url("images/24-srcsets/ropes-main-1125.jpeg") 1x,
    url("images/24-srcsets/ropes-main-2250.jpeg") 2x);
background-image: image-set(
    url("images/24-srcsets/ropes-main-1125.jpeg") 1x,
    url("images/24-srcsets/ropes-main-2250.jpeg") 2x);
max-height:400px; /*OTHERWISE DISTORTS AS min IMAGE displayed(1125) IS 400px high*/
}

#fittingsbg {
background-image: url("images/24-srcsets/fittings-main-1125.jpeg");
background-image: -webkit-image-set(
    url("images/24-srcsets/fittings-main-1125.jpeg") 1x,
    url("images/24-srcsets/fittings-main-2250.jpeg") 2x);
background-image: image-set(
    url("images/24-srcsets/fittings-main-1125.jpeg") 1x,
    url("images/24-srcsets/fittings-main-2250.jpeg") 2x);
max-height:371px; /*OTHERWISE DISTORTS AS min IMAGE displayed(1125) IS 371px high*/
}

#knotsbg {
background-image: url("images/24-srcsets/knots-main-1125.jpeg");
background-image: -webkit-image-set(
    url("images/24-srcsets/knots-main-1125.jpeg") 1x,
    url("images/24-srcsets/knots-main-2250.jpeg") 2x);
background-image: image-set(
    url("images/24-srcsets/knots-main-1125.jpeg") 1x,
    url("images/24-srcsets/knots-main-2250.jpeg") 2x);
max-height:400px; /*OTHERWISE DISTORTS AS min IMAGE displayed(1125) IS 400px high*/
}

/* END - - - - - - BG IMAGES - - - - - END */ 
/* ---END@820w---- */

}



/* ---!!!!!WIDTH OR OR HEIGHT!!!!!------ */
/*** WIDTH 768 or less OR HEIGHT 767(was 820) or less ***/
/* ** FOR ONLY
I.SHOW MENU
II.UNFIX BOTTOM KNOT BAR 
III.CHANGE BOTTOM MARGIN
** */

@media screen and (max-width:769px), screen and (max-height:767px)
{
TACO-GLITCH-769W-OR-767H{}

/* I. @769W OR 767H
------  SLIDE MENU ----- */
#menubox, .slidemenu {display:initial;}
#menubox {
position: fixed;
z-index:4;
top:0;
width:100%;/*important*/
height:auto;/*doesn;t matter - done by javascript*/}


/*  @769W OR 767H 
- - TOP BIT - - */
#menutop {height:73px;}

.slidemenu {/*contains the content*/
  height:0;
  width:172px;
  position: fixed;
  z-index: 3;
  right: 0;
  top: 0;
  background:#f0f1f5;/*palest mercury*/
  overflow-y:hidden;
  transition: 0.66s;}


/* - - MAIN LINKS - - height% changes at 540HEIGHT & 475HEIGHT */
.menucontent {
  position: relative; 
  width:100%;  
  height: 8.4%;
  border:0px dotted orange;
  }

/*  @769W OR 767H
LINKS - - font size, line heights & letter spacing changes at 540HEIGHT &/OR 475HEIGHT*/
.menucontent a, visited, active{
  display: block;
  text-align:left;
  color:#181818;
  max-height:100%; 
  transition: 0.33s;
  max-width:122px;/*keep link area small*/
  padding-left:22px;
  font-size: 1.26em;}

.menucontent a:hover{
letter-spacing:2px;
text-decoration:none;
color:#0f7ffe;}


/* - - - @769W OR 767H
  MENU BUTTON inside menubox - - - */
/*POSITION OF MENU BUTTON*/
#menu-button{
cursor: pointer;
display: inline-block;
position: absolute;
top: 5px;
right: 22px;
border: 0px solid brown;}
	
/*  @769W OR 767H
- - MENU BUTTON OPEN(///)SPANS inside #menu-button- - - */
	.menuline1,
	.menuline2,
	.menuline3 {
display: block; /*!!important - need to use spans (inline element) inside a buttton, so apply block to make them behave like divs! */
width: 35px;
height: 2px;
border-radius: 3px;
background:#fff;
margin: 7px 0;
transition: 0.4s;
}

/*  @769W OR 767H
- - - - -  MENU BUTTON CHANGE TO CLOSE(X) - - - - */	
.change .menuline1{
-webkit-transform: rotate(-45deg) translate(-8px, 7px);
transform: rotate(-45deg) translate(-8px, 7px);
background:#000;}

.change .menuline2{ 
opacity: 0;}

.change .menuline3 {
-webkit-transform: rotate(45deg) translate(-7px, -7px);
transform: rotate(45deg) translate(-6px, -5px);
background:#000;}

/*darknesssss*/
#overlay {
display:block;/*IMPORTANT!!!*/
z-index: -1;/* Default (not seen) unless js triggered by menu-click->open */
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: transparent;/* Default (not seen) unless js triggered by menu-click->open */
transition: background 0.7s;}


/*  @769W OR 767H
II. KNOTBAR ----------------------*/
#knotlinkbar {display:none;}
#knotimgbar {position:relative;max-height:55px;/*Important!*/}


/*  @769W OR 767H
III. VERY BOTTOM BOX */
#endbox {margin-bottom:0;}
/*CREDITS BOX*/
#credits{overflow:hidden;margin:auto;padding-bottom:0;}
}/* END MEDIA SCREEN WIDTH <=769 OR HEIGHT<=767 */


/* -----------WIDTH WIDTH WIDTH------------- */
/* -----------WIDTH WIDTH WIDTH------------- */
/* -------Screen from <=767 ------------*/
@media screen and (max-width:767px)
{
TACO-GLITCH-767W{}

/* @767w 
MENU - buttons a bit further to right & smaller for smaller screen*/
/* - - MENU BUTTON OPEN(///)SPANS inside #menu-button- - - */
	.menuline1,
	.menuline2,
	.menuline3 {
width: 26px;}

#menu-button{right:19px;}


/* @767w 
FLEX3 -> 1 column */
.flex3 div {
  flex: 100%;
  max-width: 500px;}


/*  @767w 
ENDBOX FLEX3 -> For 1 column  SEE 480w*/
#endbox .flex3 div {
  flex: 33.33%;
  max-width: 33.33%;
  max-width: 100%;}

/* @767w 
FLEX6 */
/* -> 3 xcolumns & fixed image size */
.flex6 div {
  flex: 33.33%;
  max-width: 33.33%;}

}/* END MEDIA SCREEN WIDTH <=767 */
/* @767w 
** ---END of FLEXBOXES CHANGES--- ***/

/* ----HEIGHT-Screen from 740 to 623--HEIGHT -- */
/* Screen from 740 to 623 */
@media screen and (max-width:740px)
{
TACO-GLITCH-740W{}
div.third,div.half,div.pricehalf{float:none;width:100%;display:block;} 
#pricingtable td,#pricelisttable td, #pricelisttable td.titles {padding-left:1%;}

}/* - - END MEDIA SCREEN WIDTH <=740 - - */



/* Screen from 622 to 563 */
@media screen and (max-width:622px)
{
TACO-GLITCH-622W{}
/* MENU - buttons a bit further to right & smaller for smaller screen*/
/* - - MENU BUTTON OPEN(///)SPANS inside #menu-button- - - */
	.menuline1,
	.menuline2,
	.menuline3 {
width: 22px;}
#menu-button{right:16px;}

/*@ 622w 
KNOTBAR*/
#knotimgbar{max-height:52px;}
/* knot bar divs to 6 equal columns! */
#knotimgbar div {
  flex: 16.66%;
  max-width: 16.66%;
  border:0px dotted yellow;}



/* ----TABLES changes-------- */
#pricingtable td,#pricelisttable td, #pricelisttable td.titles {padding-left:0%;}

}/* - - END MEDIA SCREEN WIDTH <=622 - - */




/* -----------WIDTH WIDTH WIDTH------------- */
/* Screen from <=562  */
@media screen and (max-width:562px)
{
TACO-GLITCH-562W{}
div.barrierflow{float:none;width:100%;display:block;}

/* ------NEW---NEW----NEW----------- */
/* - - - - - - BG IMAGES - - - - -  */

/* --IMAGE_SETS @562w - */

#indexbg {
background-image: url("images/24-srcsets/stairropes-main-820.jpeg");
background-image: -webkit-image-set(
    url("images/24-srcsets/stairropes-main-820.jpeg") 1x,
    url("images/24-srcsets/stairropes-main-1125.jpeg") 2x,
    url("images/24-srcsets/stairropes-main-2250.jpeg") 4x);
background-image: image-set(
    url("images/24-srcsets/stairropes-main-820.jpeg") 1x,
    url("images/24-srcsets/stairropes-main-1125.jpeg") 2x,
    url("images/24-srcsets/stairropes-main-2250.jpeg") 4x);
max-height:291px; /*IMPORTANT*/
  }

#ropesbg {
background-image: url("images/24-srcsets/ropes-main-820.jpeg");
background-image: -webkit-image-set(
    url("images/24-srcsets/ropes-main-820.jpeg") 1x,
    url("images/24-srcsets/ropes-main-1125.jpeg") 2x,
    url("images/24-srcsets/ropes-main-2250.jpeg") 4x);
background-image: image-set(
    url("images/24-srcsets/ropes-main-820.jpeg") 1x,
    url("images/24-srcsets/ropes-main-1125.jpeg") 2x,
    url("images/24-srcsets/ropes-main-2250.jpeg") 4x);
max-height:291px; /*IMPORTANT*/
  }
 
#fittingsbg {
background-image: url("images/24-srcsets/fittings-main-820.jpeg");
background-image: -webkit-image-set(
    url("images/24-srcsets/fittings-main-820.jpeg") 1x,
    url("images/24-srcsets/fittings-main-1125.jpeg") 2x,
    url("images/24-srcsets/fittings-main-2250.jpeg") 4x);
background-image: image-set(
    url("images/24-srcsets/fittings-main-820.jpeg") 1x,
    url("images/24-srcsets/fittings-main-1125.jpeg") 2x,
    url("images/24-srcsets/fittings-main-2250.jpeg") 4x);
max-height:270px; /*IMPORTANT*/
  }


#knotsbg {
background-image: url("images/24-srcsets/knots-main-820.jpeg");
background-image: -webkit-image-set(
    url("images/24-srcsets/knots-main-820.jpeg") 1x,
    url("images/24-srcsets/knots-main-1125.jpeg") 2x,
    url("images/24-srcsets/knots-main-2250.jpeg") 4x);
background-image: image-set(
    url("images/24-srcsets/knots-main-820.jpeg") 1x,
    url("images/24-srcsets/knots-main-1125.jpeg") 2x,
    url("images/24-srcsets/knots-main-2250.jpeg") 4x);
max-height:291px; /*IMPORTANT*/
  }

/*@562w MENU CHANGES*/
#menu-button{right:14px;}

.slidemenu {/*full screen menu*/
  width:100%;border-radius:0;}

.menucontent a, visited, active{
text-align:center;
padding:0;
margin-left:auto;
margin-right:auto;/* ALL IMPORTANT */}

/* @562w 
LOGO */
#logobox {height:63px;/*LEAVE*/} 


/* @562w 
SUBTITLE */

#subtitle {
letter-spacing:1px;
word-spacing:1px;} 

/* @562w -
TOPtextbox p.top NO mercury background or border OR extra margins */
.toptextbox p.top{
background:transparent;
border:0;
margin-top:0;
margin-bottom:0;}
/* @562w 
TOPBOX - Reduce top margins & widen topbox */
.toptextbox {
margin-top:0;
width:100%;}


}/* END MEDIA SCREEN WIDTH <=562 */



/* Screen from 480-321 */
@media screen and (max-width:480px)
{ 
TACO-GLITCH-480W{}

/* @480w LOGO CHANGES */
#logobox {height:60px;} 
#logotext{font-size:39px;margin-top:9px;letter-spacing:0;}

/* @480w SUBTITLE CHANGES */
#subtitlebox {height:30px;}
#subtitle {font-size:15px;word-spacing:0.5px;letter-spacing:0.5px;margin-top:2px;}

.samplebox700, 
.samplebox700w, 
.samplebox700main,
.topboxsmall{width:100%;}

/* @480w TOPBOX */
.topbox {padding-top:1.7em;}
.topbox h1{text-align:center;}

/* @480w FLEX6 */
/* 2 equal columns */
.flex6 div {
  flex: 50%;
  max-width: 50%;
  padding:2%;}

/* @480w ENDBOX FLEX3 ONLY -> 1 column */
#endbox .flex3 div {
  flex: 100%;}

/* @480w 
KNOTBAR CHANGES*/
/* -> 4x columns */
#knotimgbar div{flex: 25%;max-width: 25%;}


/*----TEXT changes---*/
p{font-size:1.15em;;}

/* @480w Headers*/
h1{font-size:2em;}
h2{font-size:1.6em;}
h3{font-size:1.4em;}
p{line-height:1.55em;}
p.top{line-height:1.4em;}
h2,p.top{text-align:center;}

}/* END MEDIA SCREEN WIDTH <=480 */


/*** -HEIGHT_-_-_HEIGHT 540 or LESS ->476 _-_-HEIGHT_-_HEIGHT- ***/

@media screen and (max-height:540px)
{
TACO-GLITCH-540H{}
/*  @540HEIGHT 
MENU CHANGES reduced for HEIGHT */
#menutop {height:59px;}
.menucontent a, visited, active
{font-size: 1.16em;}

}/* END MEDIA SCREEN HEIGHT <=540-476 */


/*** _-HEIGHT_-_-_HEIGHT 475 or LESS ->351 -***/
@media screen and (max-height:475px)
{
TACO-GLITCH-475H{}
/* MENU CHANGES reduced for HEIGHT & y-SCROLL enabled  */
#menutop {height:36px;}
.slidemenu {overflow-y: scroll;} /* Enable vertical scroll */

}/* END MEDIA SCREEN HEIGHT <=475-351 */


/* -----------WIDTH WIDTH WIDTH------------- */
/* Screen from <=375(->360) */
@media screen and (max-width:375px)
{
TACO-GLITCH-375W{}

/* @375w SUBTITLE CHANGES */
#subtitlebox {height:30px;}
#subtitle {font-size:14px;word-spacing:0;letter-spacing:0;margin-top:0;}

}/* END MEDIA SCREEN WIDTH <=375(->320) */


/* -----------WIDTH WIDTH WIDTH------------- */
/* Screen from  <=359 */
@media screen and (max-width:359px)
{
TACO-GLITCH-359W{}

#subtitle {line-height:0.9em;}
}/* END MEDIA SCREEN WIDTH <=359>>> */


/* -----------WIDTH WIDTH WIDTH------------- */
/* Screen from  320-289 */
@media screen and (max-width:320px)
{TACO-GLITCH-320W{}
h1{line-height:1.2em;}
}