@charset "UTF-8";
/* CSS Document */
html, body {
  overflow-x: hidden;
  width: 100%;}

iframe {border:none;}
html {
	scroll-behavior: smooth;
    scroll-snap-type: inline; }
@font-face {
    font-family: angelina;
    src: local(angelina), url('angelina.ttf') format('opentype');}
@font-face {
    font-family: 'ArchitectsDaughterRegular';
    src: url('ArchitectsDaughter-webfont.eot');
    src: url('ArchitectsDaughter-webfont.eot?#iefix') format('embedded-opentype'),
        url('ArchitectsDaughter-webfont.woff') format('woff'),
        url('ArchitectsDaughter-webfont.ttf') format('truetype'),
        url('ArchitectsDaughter-webfont.svg#ArchitectsDaughterRegular') format('svg');
    font-weight: normal;
    font-style: normal;} 
 
body {
    height: auto;
    width: auto;
    text-align: center;
    font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #cccccc;}


.index {
    background-image: url(../images/backgroundbeige.png);
    background-repeat: repeat-x;
    background-color: #cccccc;}
#logo img {margin-top: 16px;}

/*  BACKGROUND COLOURS ---------------------------------------------------- */

.index-new {background-image: none;background-repeat: repeat-x;background-color: #fff;}

/*background-image: url(../images/indexback.jpg);*/
.hidden {display: none;}
.bg-transparent {background-color: transparent;}
.whiteback {background-color: #FFF;}

.freesite   {background-image: none;background-repeat: none;
    background-color: #7b95a1;
     background-color: #e68f00;
    background-color: rgba(121, 151, 165, 0.8);
   }
.free   {background-image: none;background-repeat: none;
    background-color: #628090;
    background-color: #7b95a1;
}

.intermediate   {background-image: none;background-repeat: none;
    background-color: #b8bab4;
}
.starter-project   {background-image: none;background-repeat: none;
    background-color: #aaa; background-color: #e1dcd3;  background-color: #1f7a8c; background-color: #b8bab4;}
.starter-projectred   {background-image: none;background-repeat: none;
    background-color: #a83e68; background-color: #b8bab4;}



.ltblue {background-image: none;background-repeat: none;background-color:#7ac6c9;}
.proback {background-image: none;background-repeat: none;background-color: #003566;}
.cream { background-color:#c0c2bd;}

.calcgrey  { background-color:#B7B7B7;}
.vltgrey { background-color: #eee;}
.vltgreyddd { background-color: #ddd;background-color: #d9dad7;}


.blind   {background-image: none;background-repeat: none;
    background-color: #7b95a1;}

.yourmakes {background-image: none;background-repeat: none;
    background-color: #7b95a1;}

.askcindy    {background-image: none;background-color:#003566;}
#askcindy    {background-color:#003566;}
#login    {background-color: rgb(230,143,0,0.9);background-color: #7ac6c9;}
#loggedincourse    {background-color: #7ac6c9;}


#curtcourse {   background-color: #7ac6c9;}
 
 
.community   {background-image: none;background-color:#7ac6c9;}

.member    {background-image: none; background-color: #7b95a1; }
.tutorialc {background-image: none;background-repeat: none;
     background-color: #D2386E;background-color: #7997A5;}

.extras   {background-image: none;background-repeat: none;
 background-color: #27A0AF;}
.calcfree   {background-image: none;background-repeat: none;
 background-color: #7997A5}

.calcmember   {background-image: none;background-repeat: none;
 background-color:#cf7d9e; background-color: #7997A5;background-color:  #23909D; background-color: #27A0AF; }

.blind-maker   {background-image: none;background-repeat: none; background-color: #7b95a1;}

.curtain-maker   {background-image: none;background-repeat: none; background-color: #7b95a1;}

.cushion-maker   {background-image: none;background-repeat: none; background-color:#7b95a1;}

.blind-extra   {background-image: none;background-repeat: none;background-color: #628090;}

.curtain-extra   {background-image: none;background-repeat: none;background-color: #628090;}

.cushion-extra   {background-image: none;background-repeat: none;background-color: #628090; }

.warning    { background-color: #27A0AF;}

.guide {
    background-image: none;
    background-repeat: none;
    background-color: #7b95a1;}

.basics {
    background-image: none;
    background-repeat: none;
    background-color: #8f9188;
}



.calculator {
    background-image: none;
    background-repeat: none;
    background-color: #7997A5;
}
.contactus {
    background-image: none;
    background-repeat: none;
    background-color: #7b95a1;}

#logoimg {
    width: 420px;
    height: 169px;
    background-image: url(../images/Scissors-shopNEWnoshadow.png);
    background-image: url(../images/scissors-black4.png);
}

#logoimgindex {
    width: 200px;
    height: 120px;
    background-image: url(../images/LOGOindex.webp);
    background-repeat: no-repeat;}

.logotext {
    color: #fff;
    font-size: 1.2em;}

.logotextpos {
    padding-top: 75px;
    padding-left: 20px;}

.logotextpos-index {
    padding-top: 60px;
    padding-left: 10px;
}


#wrap {
    height: auto;
    width: 900px;
    margin: 0 auto;
    text-align: left;
}

#wrap-index {
    height: auto;
    width: 900px;
    margin: 0 auto;
    text-align: left;
}
/*  STANDARD LINK TEXT COLOUR WHITE ---------------------------------------------------- */
a:link {font-weight: normal;color: #ffffff;text-decoration: none;  }
a:visited {font-weight: normal;color: #ffffff;text-decoration: none;}
a:hover {font-weight: normal;color: #F9F9F9;text-decoration: underline;}


/*  LINK STYLING ---------------------------------------------------- */

.cm-link a:link {
    font-weight: normal;color: #27A0AF;
    text-decoration: none;
}

.cm-link a:visited {
    font-weight: normal;color: #27A0AF;
    text-decoration: none;
}
.cm-link a:hover {
    font-weight: normal;color:  #cf7d9e;
    text-decoration: underline;
}

.bm-link {font-weight: normal;color: #fb10a6;text-decoration: none;}
.bm-link a:link {
    font-weight: normal;
    color: #27A0AF;
    text-decoration: none;
}

.bm-link a:visited {
    font-weight: normal;
    color: #27A0AF;
    text-decoration: none;
}
.bm-link a:hover {
    font-weight: normal;
  color: #e68f00;color: #fb10a6;color:  #cf7d9e;color: #fb10a6;
    text-decoration: underline;
}

#cm-link {font-weight: normal;color: #7ac6c9;text-decoration: none;}
#cm-link a:link {
    font-weight: normal;color: #27A0AF;
    text-decoration: none;
}

#cm-link a:visited {
    font-weight: normal;color: #27A0AF;
    text-decoration: none;
}
#cm-link a:hover {
    font-weight: normal;color: #27A0AF;
    text-decoration: underline;
}

#bm-link {font-weight: normal;color: #b3b5b0;text-decoration: none;}
#bm-link a:link {
    font-weight: normal;
  color: #27A0AF;
    text-decoration: none;
}

#bm-link a:visited {
    font-weight: normal;
 color: #27A0AF;
    text-decoration: none;
}
#bm-link a:hover {
    font-weight: normal;color: #fb10a6;
    text-decoration: underline;
}

.cshm-link a:link {
    font-weight: normal;color: #27A0AF;
    text-decoration: none;
}

.cshm-link a:visited {
    font-weight: normal;color: #27A0AF;
    text-decoration: none;
}
.cshm-link a:hover {
    font-weight: normal;color:  #cf7d9e;
    text-decoration: underline;
}

#cshm-link {font-weight: normal; color: #27A0AF; text-decoration: none;}
#cshm-link a:link {
    font-weight: normal; color: #27A0AF; 
    text-decoration: none;
}

#cshm-link a:visited {
    font-weight: normal;color: #27A0AF;
    text-decoration: none;
}
#cshm-link a:hover {
    font-weight: normal;color:  #cf7d9e; 
    text-decoration: underline;
}



#ftr-link a:link {
    font-weight: normal;
     color: rgba(121, 151, 165, 1);
 
    text-decoration: none;
}

#ftr-link a:visited {
    font-weight: normal;
  color: rgba(121, 151, 165, 1);
    text-decoration: none;
}
#ftr-link a:hover {
    font-weight: normal;
    color: #fb10a6;color:  #cf7d9e;
    text-decoration: underline;
}

.blu-link a:link {
    font-weight: normal;
    color: rgba(121, 151, 165, 1);
    text-decoration: none;
}

.blu-link a:visited {
    font-weight: normal;
    color: rgba(121, 151, 165, 1);
    text-decoration: none;
}

.blu-link a:hover {
    font-weight: normal;
    color: rgba(121, 151, 165, 1);
    text-decoration: underline;
}


#brtblu-link {font-weight: normal;color: #fb10a6;text-decoration: none;}
.brtblu-link a:link {
    font-weight: normal;
    color: #27A0AF;
    text-decoration: none;
}

.brtblu-link a:visited {
    font-weight: normal;
    color: #27A0AF;
    text-decoration: none;
}
.brtblu-link a:hover {
    font-weight: normal;color: #fb10a6;
    text-decoration: underline;
}

#brtblu-link {font-weight: normal;color: #27A0AF;text-decoration: none;}
#brtblu-link a:link {
    font-weight: normal;
    color: #27A0AF;
    text-decoration: normal;
}

#brtblu-link a:visited {
    font-weight: normal;
    color: #27A0AF;
    text-decoration: none;
}
#brtblu-link a:hover {
    font-weight: normal; color: #fb10a6;
    text-decoration: underline;
}



#gry-link a:link {
    font-weight: normal;
    color: #ccc;
    text-decoration: none;
}

#gry-link a:visited {
    font-weight: normal;
    color: #ccc;
    text-decoration: none;
}
#gry-link a:hover {
    font-weight: normal;
    color: #e5b7ca;;
    text-decoration: underline;
}

#red-link a:link {
    font-weight: normal;
    color: #e5b7ca;
    text-decoration: none;
}

#red-link a:visited {
    font-weight: normal;
    color: #e0aac0;
    text-decoration: none;
}
#red-link a:hover {
    font-weight: normal;
    color: #e68f00;;
    text-decoration: underline;
}

.green-link a:link {
    font-weight: normal;
    color: rgba(58, 96, 110, 1);
    text-decoration: none;
}

.green-link a:visited {
    font-weight: normal;
    color: rgba(58, 96, 110, 1);
    text-decoration: none;
}

.green-link a:hover {
    font-weight: normal;
    color: rgba(58, 96, 110, 1);
    text-decoration: underline;
}



.amber-link a:link {
    font-weight: normal;
    color: #e68f00;
    text-decoration: none;
}

.amber-link a:visited {
    font-weight: normal;
    color: #e68f00;
    text-decoration: none;
}
.amber-link a:hover {
    font-weight: normal;color: #e68f00;
    text-decoration: underline;
}

.cyan-link a:link {
    font-weight: normal;
    color: #27AAE1;
    text-decoration: none;
}

.cyan-link a:visited {
    font-weight: normal;
    color: #27AAE1;
    text-decoration: none;
}
.cyan-link a:hover {
    font-weight: normal;
    color: #e68f00;
    text-decoration: underline;
}


#amber-link a:link {
    font-weight: normal;
    color: #e68f00;color:#cf7d9e;
    text-decoration: none;
}

#amber-link a:visited {
    font-weight: normal;
    color: #e68f00;color:#cf7d9e;
    text-decoration: none;
}
#amber-link a:hover {
    font-weight: normal;
    color: #a100f2;color: #e68f00;color:#cf7d9e;
    text-decoration: underline;
}


#rd-link a:link {
    font-weight: normal;
    color: #cf7d9e;
    text-decoration: none;
}

#rd-link a:visited {
    font-weight: normal;
    color: #cf7d9e;
    text-decoration: none;
}
#rd-link a:hover {
    font-weight: normal;color: #27A0AF;
    text-decoration: underline;
}




#purp-link a:link {
    font-weight: normal;
    color: #a100f2;
    text-decoration: none;
}

#purp-link a:visited {
    font-weight: normal;
    color: #a100f2;
    text-decoration: none;
}
#purp-link a:hover {
    font-weight: normal;
    color: #e68f00;
    text-decoration: underline;
}



.mem-link a:link {
    font-weight: normal;
    color: #3f6574;
    text-decoration: none;
}

.mem-link a:visited {
    font-weight: normal;
    color: #3f6574;
    text-decoration: none;
}

.mem-link a:hover {
    font-weight: normal;
    color: #e68f00;
    text-decoration: underline;
}


/*  TEXT COLOURS ---------------------------------------------------- */
.blue {color: #27A0AF;}

.whitetext {color: #FFF;}
.bluish {color: #27A0AF;}
.ltblu  {color: #7ac6c9;}
.drkblutxt  {color: #628090;}
/*  CHECKED TO HERE 4thjun25 ---------------------------------------------------- */

.interlined {color: #27A0AF;}
.orangetext {
    color: #ff006e;}

.dustpinktext {color:#f2adbf;}
   
.orangetext2 {color:#cf7d9e;}
.optiontext  {
    color: #27A0AF;}
.txt999  { color: #999; }
.memtext { color: #3a606e; }
.piped {color: #27A0AF;}
.bluegrey { color: rgba(121, 151, 165, 1);}

.txteee {color: #eee;}
.txtgrey6 {color: #666;}
.txtgrey {color: #848e96;}


#orangemsg  { color: #e68f00; padding:20px;  font-size:1.1em; }

.starterprojectcol {color: #7ac6c9;  color: rgba(121, 151, 165,0.8);}
.cmcol {color: #27A0AF;}
.bmcol {color: #27A0AF;}
.cshmcol {color: #27A0AF; }
.ftrcol { color: rgba(121, 151, 165, 1);}
.txtppgrey {color:rgba(48, 69, 92, 0.8)}



.blueback {background-color: #27A0AF;}
.lightblue {background-color: #8BA8B5;}
.color333 {  color: #333;}
.red {color: #CC0000;}

.pink { color:#fb10a6;}

.darkyellow {color:#E9BA2E;}
.orange {background-color: #FF9900;}
.purple {background-color: #999;}

.raspberrytxt  {color:#A7025F}
.numbered {list-style-type: decimal;}






/*  TEXT STYLING ---------------------------------------------------- */
.blur { filter: url(#wherearemyglasses); }

.strong {font-weight: bold;}
.normal {font-weight: normal;}
.center {text-align: center;}
.txtr {text-align: right;}

.f08em {font-size: 0.8em;}
.f06em {font-size: 0.6em;}

.f09em {font-size: 0.9em;}
.f1em {font-size: 1.0em;}
.f11em {font-size: 1.1em;}
.f12em {font-size: 1.2em;}
.f13em {font-size: 1.3em;}
.f14em {font-size: 1.4em;}
.f15em {font-size: 1.5em;}
.f18em {font-size: 1.8em;}
.f25em {font-size: 2.5em;}
/*  ROUNDED CORNERS  ---------------------------------------------------- */
.border10 {   border-radius: 10px;}
.border20 { border-radius: 20px;}


.bordercomment {

    -moz-border-radius-topleft: 70px;
    -moz-border-radius-topright: 70px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 70px;
    -webkit-border-top-left-radius: 70px;
    -webkit-border-top-right-radius: 70px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 70px;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 5x;
    border-bottom-right-radius: 70px;
}
.heroborder {border-radius: 50px;}

.herobordermob {border-radius: 20px;}

.border40 { border-radius: 40px;}
.border5 { border-radius: 5px;}
    

.border-bottom {border-bottom: 5px solid #ccc ;}

 ul.responsive-table  {padding-inline-start: 0px; padding-left: 0px;
}
.responsive-table li {
    border-radius: 3px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  .table-header {
    background-color:#7b95a1;
    font-size: 14px;
      color:#fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .table-row {
    background-color: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
  }

.col-2 {flex-basis: 40%;}
.col-3 {flex-basis: 20%;}
.col-4 {flex-basis: 40%;}
  
.border-none {border: none;}
.borderl {border-left: thin solid #999999 ;}
.bordert {border-top: thin solid #999999 ;}
.bordergrey {border: 2px solid #ccc ;}

/*  PADDING AND MARGIN ---------------------------------------------------- */
.inline {display:inline;}
.block {display:inline-block;}
.inlineblock {display:inline-block;}
.hidden {display:none;}


.h360 {height: 360px;}

.pad10is {padding-inline-start: 10px;}
.pad5pl {padding-left: 5%;}
.pad7plr {padding-left: 7%;padding-right: 7%;}
.pad10pl {padding-left: 10%;}
.pad10pr {padding-right: 10%;}
.video-pad5p {padding: 5%;}
.pad5a {padding: 5px;}
.pad5 {padding: 10px;}
.pad15 {padding: 17px;}
.pad20 {padding: 20px;}
.pad30 {padding: 30px;}
.pad40 {padding: 40px;}
.pad5t {padding-top: 5px;}
.pad5l {padding-left: 5px;}
.pad10b {padding-bottom: 10px;}

.pad20r {padding-right: 20px;}
.pad20t {padding-top: 20px;}
.pad20b {padding-bottom: 20px;}
.pad20pl {padding-left: 20%;}

.pad30lr {padding-left: 30px;padding-right: 30px;}
.pad30b {padding-bottom: 30px;}
.pad30t {padding-top: 30px;}
.pad30pl {padding-left: 30%;}

.pad40t {padding-top: 40px;}
.pad40b {padding-bottom: 40px;}
.pad40l {padding-left: 40px;}
.pad60l {padding-left: 60px;}
.pad60r {padding-right: 60px;}

.margin0 {margin: 0px;}
#margin0 {margin: 0px;}
.margin20 {margin: 20px;}
.margin10 {margin: 10px;}


.margin5l {margin-left: 5px;}
.margin10l{ margin-left: 10px;}
.marginm20l{ margin-left: -20px;}
.margin10limg img{ margin-left: 10px;}
.margin20l { margin-left: 20px;}
.margin20pl { margin-left: 20%;}
.margin30l { margin-left: 30px;}

.margin40l { margin-left: 40px;}
.margin30pl { margin-left: 30%;}
.margin50pl { margin-left: 50%;}
.margin90pl { margin-left: 90%;}

.margin10r {margin-right: 10px;}
.margin20r { margin-right: 20px;}
.margin40lr { margin-left: 40px;margin-right: 40px;}
.margin40r {margin-right: 40px;}
.margin70r {margin-right: 70px;}
.margin40rnom  {margin-right: 40px;}/* 0px when mob */


.margin5t {margin-top: 5px;}

.margin15t {margin-top: 15px;}
.margin20t {margin-top: 20px;}
.margin40t {margin-top: 40px;}
.margin50t {margin-top: 50px;}
.margin100t {margin-top: 100px;}
.margin108t {margin-top: 108px;}
.margin160t {margin-top: 160px;}
.margin40tnom {margin-top: 40px;} /* 0px when mob */

 .mobm25t {margin-top: 10px;} /* 25px when mob */

.marginM15t {margin-top: -15px;}
.marginM50t {margin-top: -50px;}

.marginM15b {margin-bottom: -15px;}
.marginM60b {margin-bottom: -60px;}

.margin10b {margin-bottom: 10px;}
.margin20b {margin-bottom: 20px;}
.margin40b {margin-bottom: 40px;}
.margin100b {margin-bottom: 120px;}  /* 0px when mob */

.floatr {float: right;}
.floatl {float: left;}


.wid100 {width: 100%;}
.wid90 {width: 90%;}
.wid80 {width: 80%;}
.wid70 {width:70%;}
.wid40 {width: 40%;}
.wid25 {width: 25%;}
.wid30 {width: 30%;}
.wid35 {width: 35%;}
.wid10 {width: 19%;}
.wid60 {width: 60%;}
.w50 {width: 50px;}
.w10 {width: 10px;}
.w170 {width: 175px;}

.width200 {width: 200px;}
.width320 {width: 320px;}
.width400 {width: 400px;}
.width500 {width: 500px;}
.width800 {width: 800px;}
.wid40img img {width: 40%;}

.h20 {height: 14px; padding-left: 20px;}
.h15 {height: 16px; width: 16px; }
.h30{height: 30px; }
.h34{height: 34px; }

.h70 {height: 70px; }
.h100 {height: 100px; }
.h150 {height: 150px; }
.h500 {height: 500px; }

.alignl  {text-align: left;}
.alignc  {text-align: center;}
.alignr  {text-align: right;}

table.pleatspace td {padding:5px; background-color: rgba(0, 0, 0, 0.2);
    border: thin solid #d77Odb;}

 table.fabguide tr {padding:5px; line-height:25px;   font-family: "ArchitectsDaughterRegular", "Handwriting - Dakota", "Comic Sans MS", Arial, cursive; font-size: 1.0em;}
 
.grad {
    background: -webkit-linear-gradient(#FFF, #F5F5F5);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#FFF, #F5F5F5);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#FFF, #F5F5F5);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(#FFF, #F5F5F5);
    /* Standard syntax */
}

.shadow {
    -webkit-box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    -moz-box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
}
.bodydropdown {
    color: #BB0000;
}

#fwgap {float: left; width: 800px; height: 20px; font-size: 0.9em; margin-top: 40px;}

#header {
    float: left;
    height: 215px;
    width: 900px;}
#headtop {
    float: left;
    height: 126px;
    width: 900px;
    margin-top: 15px;}
#logo {
    float: left;
    height: 126px;
    width: 285px;
    margin-left: 15px;
}

#logoindex {
    float: left;
    height: 90px;
    width: 285px;
    margin-left: 15px;
    background-color: rgba(121, 151, 165, 0.7);}

#logoindex img { margin-top: 13px;}

#headerright {float: left;height: 126px;width: 600px;}



#anchorTitle {
    /* border radius */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;

    /* box shadow */
    -moz-box-shadow: 2px 2px 3px #e6e6e6;
    -webkit-box-shadow: 2px 2px 3px #e6e6e6;
    box-shadow: 2px 2px 3px #e6e6e6;

    background-color: #fff;
    border: solid 3px #d6d6d6;
    color: #333;
    display: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.3;
    text-align: left;
    max-width: 200px;
    padding: 5px 7px;
    position: absolute;
}

/*  background-color: #814685; border: thin solid #d77Odb;    purple colours*/
#headermenu {
    float: right;
    height: 39px;
    width: auto;
   padding: 4px;
    margin-top: 0px;
    background-color: rgba(0, 0, 0, 0.1);
    border: thin solid #d77Odb;
}

#headermenuindex {
    float: right;
    height: 39px;
    width: auto;
padding: 4px;
    margin-top: 0px;
    background-color: rgba(121, 151, 165, 0.7);
    border: thin solid #d77Odb;
}



.wide {
    padding-left: 10px;
    padding-right: 10px;
}

#menu {
    float: left;
    height: 63px;
    width: 600px; 
 
}

#headermenutop {
    float: left;
    height: 15px;
    width: 570px;
    margin-top: 5px;
    color: #FFFFFF;
    text-align: right;
    font-size: 12px;
    font-weight: bold;
    vertical-align: text-bottom;
}

#menulinks {
    float: left;
    height: 20px;
    width: auto;
    margin-top: 11px;
    margin-left: 0px;
    font-size: 15px;
    font-weight: normal;
    color: #FFFFFF;
    text-decoration: none;
    
    
}

#menulinks a:link {
    font-weight: normal;
    color: #ffffff;
    text-decoration: none;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 2px;
    padding-bottom: 2px;
 
}

#menulinks a:visited {
    font-weight: normal;
    color: #ffffff;
    text-decoration: none;
  
}

#menulinks a:hover {
    font-weight: normal;
    color: #cccccc;
    text-decoration: none;
  
}


#followlinks {
    float: left;
    height: 25px;
    width: auto;
    margin-top: 7px;
    margin-left: 0px;
}
#followlinksindex {
    float: left;
    height: 25px;
    width: auto;
    margin-top: 7px;
    margin-left: 0px;
}

#followbox {
    float: left;
    height: 25px;
    width: 25px;
    ;
    margin-left: 5px;
}

#headerADbanner {
    float: left;
    height: 63px;
    width: 600px;
}

#headbottom {
    float: left;
    height: 59px;
    width: 500px;
    margin-top: 0px;
    font-weight: bold;
}

#headtitle {
    float: left;
    margin-top: 14px;
    margin-left: 10px;
    height: 45px;
    width: 600px;
    font-family: Helvetica neue, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 55px;
    color: #FFFFFF;
    vertical-align: bottom;
}

#headtitle-index {
    float: left;
    margin-top: 14px;
    margin-left: 10px;
    height: 45px;
    width: 600px;
    font-family: Helvetica neue, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 55px;
   
    vertical-align: bottom;
}

.headtitle-index{       color: #6a8795;  color: rgba(121, 151, 165, 1.0);}





#headtitle a:link {
    font-weight: bold;
    font-family: Helvetica neue, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 55px;
    color: #FFFFFF;
    text-decoration: none;
}

#headtitle a:visited {
    font-weight: bold;
    font-family: Helvetica neue, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 55px;
    color: #FFFFFF;
    text-decoration: none;
}

#headtitle a:hover {
    font-weight: bold;
    font-family: Helvetica neue, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 55px;
    color: #cccccc;
    text-decoration: none;
}

#advertholder {
    float: right;
    height: auto;
    width: auto;
    margin-top: 20px;
    position: relative;z-index: 2000;

}

#advertholder-left {float: left;height: 120px; width: 300px;}
#advertholder-left img {float: right;}

#blind-safety {
    float: left;
    margin-bottom: 0px;
    margin-top: 5px;
    margin-left: 16px;
    height: 14px;
    width: 100px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    background-color: #fff;
    text-align: center;
    border: thin solid #ccc;
}

#blind-safety a:link {
    font-weight: bold;
    color: #cc0000;
    text-decoration: none;
}

#blind-safety a:visited {
    font-weight: bold;
    color: #cc0000;
    text-decoration: none;
}

#blind-safety a:hover {
    font-weight: bold;
    color: #ccc;
    text-decoration: underline;
}

#guidebutton {
    float: left;
    margin-bottom: 0px;
    margin-top: 5px;
    margin-left: 16px;
    height: 14px;
    width: 100px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    background-color: #fff;
    text-align: center;
    border: thin solid #ccc;
}

#guidebutton a:link {
    font-weight: bold;
    color: #27A0AF;
    text-decoration: none;
}

#guidebutton a:visited {
    font-weight: bold;
    color: #27A0AF;
    text-decoration: none;
}

#guidebutton a:hover {
    font-weight: bold;
    color: #ccc;
    text-decoration: underline;
}

#midsection {
    float: left;
    height: auto;
    width: 900px;
    margin-top: 5px;
    margin-bottom: 0px;
    background-color: #f0f0f0;
    border: thin solid #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

#midsection-index {
    float: left;
    height: auto;
    width: 875px;
    margin-top: 25px;
    margin-bottom: 20px;
    background-color: rgba(121, 151, 165, 0.8);
    padding-left: 25px;
    padding-top: 25px;
}
#midsection-index2 {
    float: left;
    height: auto;
    width: 825px;
    margin-top: 5px;
    margin-bottom: 20px;
  background-color:#cdcfcb;
     border:25px solid rgb(185, 223, 224);
     color:#628090 ;
    padding-left: 25px;
    padding-top: 25px;
}

#midsection-index-starterprojects {
    float: left;
    height: auto;
    width: 875px;
    margin-top: 5px;
    margin-bottom: 20px;
   background-color:rgb(185, 223, 224) ;
 background-color:#d9dad7;
    padding-left: 25px;
    padding-top: 25px;
}

#midsection-index-pro {
    float: left;
    height: auto;
    width: 825px;
    margin-top: 5px;
    margin-bottom: 20px;
background-color:  #628090;
    border: 25px solid #003566;
   color:#628090 ;
    padding-left: 25px;
    padding-top: 25px;
}


#midsection-form {
    float: left;
    height: auto;
    width: 675px;
    margin-top: 5px;
    margin-left: 90px;
    padding-left: 0px;
    padding-top: 25px;
    border-style: solid;
    border-width: 10px;
      border-color:#3a606e;
    border-color: rgba(121, 151, 165, 0.8);
    
  
   
}

.testimonial {
    color: rgba(121, 151, 165, 1);
    font-size: 1.4em;
    font-family: 'Handlee',Arial; 
    width: 80%;
    margin-left: 10%;
    padding-top: 20px;
}

.testimonial-index {
    color: rgba(121, 151, 165, 1);
    font-size: 1.1em;
    font-family: 'Handlee',Arial; 
    width: 80%;
    margin-left: 0px;
    padding-top: 0px;
}

.testimonialdropdown {margin-left: 20px;}

.index-text {
    color: #666;
    font-size: 15px;
    width: 80%;
    margin-left: 10%;}

#index-insert {
    float: left;
    height: 640px;
    width: 100%;
    margin: 0;
    margin-bottom: 10px;
        margin-top: -15px;}

        #index-insert2 {
    float: left;
    height: 600px;
    width: 100%;
    margin: 0;
    margin-bottom: 10px;
}

#video-holder {
    float: left;
    width: 100%;
    margin: 0;
    margin-bottom: 20px;
margin-top: 15px;
}


.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url(../images/sh-index-new6.avif);

    /* Set a specific height */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   position: relative; 
   z-index:500;
  overflow: hidden;
}

.hero-image video {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none; 
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover; /* Ensures the video covers the entire div */
  z-index: -1; /* Keeps the video behind the content */
}
 

.hero-image2 {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images-WYM/WYM-collage.jpg);

    /* Set a specific height */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* Place text in the middle of the image */
.hero-text {
    text-align: left;
    position: absolute;
    top: 76%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    background-color: rgba(121, 151, 165, 0.7);
    color: #fff;
    font-size: 18px;
    font font-weight: bold;
    padding-left: 0px;
    padding-right: 20px;
    padding-top: 0px;
    padding-bottom: 10px;
line-height: 26px; }
    
.hero-text li { list-style-type: none;} 

.hero-text2 {
    text-align: left;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    background-color: rgba(121, 151, 165, 0.4);
    color: #fff;
    font-size: 16px;
    font font-weight: bold;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 2px;
    padding-bottom: 2px;
line-height: 26px; 
    
}

.hero-head {
    text-align: center;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 85px;
    width: 930px;
    background-color: none;
    color: #fff;
    font-size: 15px;
    padding: 10px:
}



/* Test HERO BUTTONS */

.hero-text-calc {
    text-align: left;
    position: absolute;
 margin-top: 50px;
    height: auto;
    background-color: rgba(121, 151, 165, 0.9);
     background-color: #27a0af;
    color: #fff;
    font-size: 18px;
    font font-weight: bold;
    padding-left: 0px;
    padding-right: 20px;
    padding-top: 0px;
    padding-bottom: 10px;
line-height: 26px; 
    
}
.hero-text-calc li { list-style-type: none;} 
.hero-button2-calc {background-color: rgba(0, 0, 0, 0.1); width:140px;float: left;
    margin-bottom: 0;
    margin-top: 8px;
    margin-left: 3%;
     text-align: center;
     height:28px; font-size: 0.9em; padding-top:11px;
    padding-bottom: 8px;
    }

#hero-link2 {color: #fff;font-size: 0.9em;}
#hero-link2 a:link {font-size: 0.9em; width:30%;color:#fff;  font-family: Helvetica neue, Arial, Helvetica, sans-serif; font-weight: bold;}
#hero-link2 a:hover {color: #F5F796 !important;  color: #ccc !important; 
    text-decoration: none; }
    #hero-link2 a:visited {color: #fff;}

#hero-link1 {color: #7ac6c9;color: #fff;font-size: 0.9em;}
#hero-link1 a:link {font-size: 0.9em; width:27%;color:#7ac6c9;color: #fff;  font-family:  Helvetica neue, Arial, Helvetica, sans-serif;font-weight: bold;}
#hero-link1 a:hover { color: #ccc; !important;  
    text-decoration: none; }
    #hero-link1 a:visited {color: #fff;}


.hero-button2 {background-color: rgba(0, 0, 0, 0.2); background-color: rgba(121, 151, 165, 1);width:140px;float: left;
    margin-bottom: 0;
    margin-top: 8px;
    margin-left: 3%;
     text-align: center;
     font-size: 0.9em; padding-top:11px;
    padding-bottom: 8px;
    }

  .hero-button4 {background-color: rgba(0, 0, 0, 0.2); background-color: rgba(121, 151, 165, 1);width:140px;float: left;
    margin-bottom: 0;
    margin-top: 8px;
    margin-left: 3%;
     text-align: center;
     height:21px; font-size: 0.9em; padding-top:4px;
    padding-bottom: 10px;
    border:6px solid #003566;

    }

    .blc {border-bottom-left-radius: 30px;}
  .blr {border-bottom-right-radius: 30px;}

  .hero-beginner{ background-color: #b3b5b0;}
.hero-advanced {background-color:#7ac6c9; color:#fff; }
.hero-pro {color: #27A0AF;background-color: #003566; }
/* end test HERO BUTTONS */


#index-title {
    float: left;
    height: 80px;
    width: 900px;
    margin-top: 10px;
    margin-bottom: 5px;
}

#midsectionbanner {
    float: left;
    height: 98px;
    width: 878px;
    margin-top: 10px;
    margin-bottom: 0px;
    margin-left: 10px;
}

#midsectionbannercalc {
    float: left;
    height: 118px;
    width: 878px;
    margin-top: 10px;
    margin-bottom: 0px;
    margin-left: 10px;
}

#midsectionbannercalcblank {
    float: left;
    height: 20px;
    width: 878px;
    margin-top: 10px;
    margin-bottom: 0px;
    margin-left: 10px;
}

#midsectionbannercontact {
    float: left;
    height: 20px;
    width: 878px;
    margin-top: 10px;
    margin-bottom: 0px;
    margin-left: 10px;
}

#content {
    float: left;
    height: auto;
    width: 878px; 
    margin-top: 0px;
    margin-bottom: 20px;
    margin-left: 10px;
    background-color: #FFFFFF;
    border: thin solid #FFFFFF;
}

#printbar {
    float: left;
    height: 40px;
    width: 838px;
    margin-left: 20px;
}

#sidenav {
    float: left;
    height: auto;
    width: 160px;
    margin-left: 10px;
    margin-top: 15px;
    padding-right: 10px;
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: #ffffff;
    font-size: 25px;
    font-weight: bold;
    color: #cccccc;
}

#sidenavtitle {
    float: left;
    height: 20px;
    width: 140px;
    margin-left: 15px;
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #999999;
}



#sidenavdoltay {
    float: left;
    height: 80px;
    width: 140px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0px;
    font-size: 10px;
    font-weight: normal;
    color: #888B82;

}


.imgcontainer {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}








div.tutoriallistbox-curtain {
    float: left;
    height: auto;
    width: 100%;
    background-color: #ffffff;
    color: #4e6691 ;
     color: #3f6574 ;
    margin: 15px auto;
    padding: 0px;
    position: relative;

}

span.tutoriallistbox-curtain {
    background: #ffffff;
    display: block;
    height: auto;
    position: relative;
    width: 100%;
}



div.tutoriallistbox-curtain a:link {
    color: #4e6691;
     color: #3a606e  ;
    text-decoration: none;
}

div.tutoriallistbox-curtain a:visited {
    color: #4e6691;
     color: #3a606e  ;
    text-decoration: none;
}

div.tutoriallistbox-curtain a:hover {
    color: #999999;
     color: #e68f00 ;
    text-decoration: underline;
}

div.tutoriallistbox-free {
    float: left;
    height: auto;
    width: 850px;
    background-color: #FFFFFF;
    color: #000000;
     color: #3a606e ;
    margin: 25px auto;
    padding: 0px;
    position: relative;
    -webkit-box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    -moz-box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    border-radius:15px;
}


div.tutoriallistbox-blind {
    float: left;
    height: auto;
    width: 800px;
    background-color: #FFFFFF;
    color: #000000;
     color: #3a606e ;
    margin: 25px auto;
    padding: 0px;
    position: relative;
    -webkit-box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    -moz-box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    border-radius:15px;
}

div.tutoriallistbox-pro {
    float: left;
    height: auto;
    width: 800px;
    background-color: #FFFFFF;
    color: #000000;
     color: #3a606e ;
    margin: 25px auto;
    padding: 0px;
    position: relative;
    -webkit-box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    -moz-box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    border-radius:15px;
}

span.tutoriallistbox-blind {
    background: #ffffff;
    display: block;
    height: auto;
    position: relative;
    width: 850px;
}

div.tutoriallistbox-blind a:link {
    color: #000000;
      color: #3a606e ;
    text-decoration: none;
}

div.tutoriallistbox-blind a:visited {
    color: #000000;
      color: #3a606e ;
    text-decoration: none;
}

div.tutoriallistbox-blind a:hover {
    color: #999999;
     color: #e68f00 ;
    text-decoration: underline;
}

div.tutoriallistbox-other {
    float: left;
    height: auto;
    width: 850px;
    background-color: #FFFFFF;
    color: #3a606e;
    margin: 15px auto;
    padding: 0px;
    position: relative;
    -webkit-box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    -moz-box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
}

span.tutoriallistbox-other {
    background: #ffffff;
    display: block;
    height: auto;
    position: relative;
    width: 850px;
}

.tutoriallistbox-text {
    float: left;
    height: auto;
    width: 80%;
    color: #fff;
    font-size: 0.9em;
    margin-left: 10%;
    margin-top: 10px;
    padding-bottom: 20px;
}

.freetoread-text {
    float: left;
    height: auto;
    width: 80%;
    color: #fff;
    font-size: 1.2em;
    margin-left: 10%;
    margin-top: 10px;
    padding-bottom: 20px;
}



div.interlined {
    color: #27A0AF;
}

div.interlined a:link {
    color: #27A0AF;
    text-decoration: none;
}

div.interlined a:visited {
    color: #27A0AF;
    text-decoration: none;
}

div.interlined a:hover {
    color: #999999;
    text-decoration: underline;
}

div.greymob {
    color: #666;
}

div.greymob a:link {
    color: #666;
    text-decoration: none;
}

div.greymob a:visited {
    color: #666;
    text-decoration: none;
}

div.greymob a:hover {
    color: #999999;
    text-decoration: underline;
}

div.lampshades {
    color: #E88D49;
}

div.lampshades a:link {
    color: #E88D49;
    text-decoration: none;
}

div.lampshades a:visited {
    color: #E88D49;
    text-decoration: none;
}

div.lampshades a:hover {
    color: #999999;
    text-decoration: underline;
}


div.cushions {
    color: #990066;
}

div.cushions a:link {
    color: #990066;
    text-decoration: none;
}

div.cushions a:visited {
    color: #990066;
    text-decoration: none;
}

div.cushions a:hover {
    color: #999999;
    text-decoration: underline;
}

.other {
    color: #666666;
}

.blackout {
    color: #27A0AF;
}


#tutoriallistbox-left {
    float: left;
    height: auto;
    width: 100px;
    margin-left: 20px;
    margin-top: 20px;
}
#tutoriallistbox-left img{ width: 45%; padding:10%;}

#tutoriallistbox-leftfree {
    float: left;
    height: auto;
    width: 140px;
    margin-left: 30px;
    margin-top: 20px;
}
#tutoriallistbox-leftfree img{ width: 45%; padding:10%;}

#tutoriallistbox-right {
    float: left;
    height: auto;
    width: 672px;
    margin-left: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-left-width: thin;
    border-left-style: solid;
    border-left-color: #999999;
}

#tutoriallist-title {
    float: left;
    height: auto;
    width: 110px;
    margin-left: 0px;
    margin-top: 0px;
    font-size: 26px;
    text-align: center;
}

#tutoriallist-list {
    float: left;
    height: auto
        ;
    width: 208px;
    margin-left: 10px;
    margin-top: 0px;
    font-size: 12px;
    text-align: left;
}

#courselist {
    display:inline;
    float: left;
    height: auto
        ;
    width: 190px;
    margin-left: 0px;
    margin-top: 0px;
    font-size: 12px;
    text-align: left;
}

#buttonlist {
    display:inline;
    float: left;
    height: auto
        ;
    width: 250px;
    margin-left: 40px;
    padding: 20px;
    margin-top: 0px;
    font-size: 12px;
    text-align: left;
}

#buttonlist-loggedin {
    display:inline;
    float: left;
    height: auto
        ;
    width: 200px;
    margin-left: 60px;
    padding: 20px;
    margin-top: 30px;
    font-size: 12px;
    text-align: left;
}


#list-title {
    float: left;
    height: 18px;
    width: 148px;
    margin-left: 40px;
    margin-top: 0px;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    vertical-align: top;
}

#list-head {
    float: left;
    height: 18px;
    width: 148px;
    margin-left: 40px;
    margin-top: 0px;

    text-align: center;
    text-decoration: none;
    vertical-align: top;
}


#list {
    float: left;
    height: auto;
    width: 208px;
    margin-left: 0px;
    margin-top: 0px;
    font-size: 13px;
    line-height: 18px;
}

#list ul {
    list-style-type: disc;
}







#maincontent {
    float: left;
    height: auto;
    width: 650px;
}

#maincontent a:link {
    font-weight: normal;
    color: #666666;
    text-decoration: none;
    font-style: italic;
}

#maincontent a:visited {
    font-weight: normal;
    color: #666666;
    text-decoration: none;
    font-style: italic;
}

#maincontent a:hover {
    font-weight: normal;
    color: #660099;
    text-decoration: underline;
}


.bluelink a:link {
    font-weight: normal;
    color: #006699;
    text-decoration: none;
}

.bluelink a:visited {
    font-weight: normal;
    color: #666666;
    text-decoration: none;
}

.bluelink a:hover {
    font-weight: normal;
    color: #660099;
    text-decoration: underline;
}

#tutorial-step {
    float: left;
    height: 20px;
    width: 580px;
    margin-left: 50px;
    margin-top: 25px;
    font-size: 20px;
    color: #333333;
}



#tutorial-step-T-RIGHT {
    float: right;
    height: 18px;
    width: 170px;
    margin-right: 30px;
    vertical-align: top;
}

#tutorial-text {
    float: left;
    height: auto;
    width: 580px;
    margin-left: 50px;
    margin-top: 35px;
    font-size: 0.8em;
    color: #666666;
    font-family: Helvetica, Arial, sans-serif;
}



#extra-instructions {float: left;height: auto;width: 540px;margin-left: 40px;background-color: #7ac6c9;font-size: 14px;color: #fff;font-family: Helvetica, Arial, sans-serif;padding: 20px;border-radius: 8px;}

#extra-instructions-curtain {float: left;height: auto;width: 540px;margin-left: 40px;background-color: #7ac6c9;font-size: 14px;color: #fff;font-family: Helvetica, Arial, sans-serif;padding: 20px;border-radius: 8px;}






#tutorial-textgrey {
    float: left;
    height: auto;
    width: 540px;
    margin-left: 40px;
    margin-top: 35px;
    background-color: #e4e4e4;
    border: thin solid #e4e4e4;
    font-size: 0.8em;
    font-family: Helmet, Freesans, Helvetica, Arial, sans-serif;
    padding: 20px;
}





#tutorial-textgrey-extra {
    float: left;
    height: auto;
    width: auto;
    margin-left: 0;
    margin-top: 35px;
    background-color: #e4e4e4;
    border: thin solid #e4e4e4;
    font-size: 12px;
    font-family: Helmet, Freesans, Helvetica, Arial, sans-serif;
    padding: 20px;
}














#tutorial-textwhite {
    float: left;
    height: auto;
    width: 540px;
    margin-left: 40px;
    margin-top: 25px;
    background-color: #ffffff;
    border: thin solid #ffffff;
    font-size: 0.8em;
    font-family: Helmet, Freesans,Helvetica, Arial, sans-serif;
    padding: 20px;
}

#tutorial-textwhiteintrotop {
    float: left;
    height: auto;
    width: 540px;
    margin-left: 40px;
    margin-top: 5px;
    background-color: #ffffff;
    border: thin solid #ffffff;
    font-size: 1em;
    font-family: Helvetica, Arial, sans-serif;
    padding: 20px;
}

#tutorial-textwhiteintrotop h2 {
    font-size: 13px;
    color: #333;
}

#basictemplate-text {
    float: left;
    height: auto;
    width: auto;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 5px;
    background-color: #ffffff;
    border: thin solid #ffffff;
    font-size: 0.9em;
    font-family: Helvetica, Arial, sans-serif;
    padding: 20px;
    
}

#basictemplate-text h2 {
    font-size: 13px;
    color: #333;
}

#tutorial-textLTgrey {
    float: left;
    height: auto;
    width: 550px;
    margin-left: 40px;
    margin-top: 35px;
    background-color: #f0f0f0;
    border: thin solid #f0f0f0;
    font-size: 12px;
    font-family: Helvetica, Arial, sans-serif;
    padding: 15px;
}

.greybox550 {
    float: left;
    height: auto;
    width: 550px;
    margin-left: 40px;
    margin-top: 35px;
    background-color: #f0f0f0;
    font-size: 12px;
    font-family: Helvetica, Arial, sans-serif;
    padding: 15px;
    border-radius: 10px;
}

.tutorial-textLTgrey-narrow {
    float: left;
    height: auto;
    width: 287px;
    margin-left: 0px;
    margin-top: 15px;
    background-color: #f0f0f0;
    font-size: 12px;
    font-family: Helvetica, Arial, sans-serif;
    padding: 10px;
    border-radius:8px;
}

.tutorial-textLT-narrow {
    float: left;
    height: auto;
    width: 285px;
    margin-left: 0px;
    margin-top: 15px;
    ;
    font-size: 12px;
    font-family: Helvetica, Arial, sans-serif;
    padding: 10px;
}




#tutorial-left h1 {
    font-size: 25px;
    color: #333333;
    font-family: Helvetica, Arial, sans-serif;
}

#tutorial-text h2 {
    font-size: 20px;
    color: #666666;
    font-family: Helvetica, Arial, sans-serif;
}

#tutorial-text h3 {
    font-size: 17px;
    color: #666666;
    margin-top: 10px;
    font-family: Helvetica, Arial, sans-serif;
}

#tutorial-text ul {
    list-style-type: decimal;
}

#tutorial-text .plain li {
    list-style-type: none;
}

.disc li {
    list-style-type: disc;
}

.nodisc li {
    list-style-type: none;
}

#tutorial-left {
    float: left;
    height: auto;
    width: 300px;
    margin-left: 50px;
    margin-top: 35px;
    font-size: 12px;
    color: #666666;
}

#tutorial-right {
    float: left;
    height: auto;
    width: 140px;
    margin-left: 50px;
    margin-top: 35px;
    font-size: 12px;
    color: #666666;
}


#tutorial-leftintro {
    float: left;
    height: auto;
    width: 220px;
    margin-left: 50px;
    font-size: 12px;
    color: #666666;
}



#tutorial-leftFH {
    float: left;
    height: 150px;
    width: 220px;
    margin-left: 50px;
}

#tutorial-rightFH {
    float: left;
    height: 150px;
    width: 220px;
    margin-top: 10px;
    margin-left: 50px;
}





















.protip {
    color: #27A0AF;
}


#imagebox10 {
    float: left;
    height: auto;
    width: auto;
    margin-left: 20px;
    margin-top: 50px;
}

#imagebox1 {
    float: left;
    height: auto;
    width: auto;
    margin-left: 20px;
    margin-top: 20px;
}

#imagebox3 {
    float: left;
    height: auto;
    width: 100%;
    margin-left: 20px;
    margin-top: 10px;
}

#imagetext {
    float: left;
    height: auto;
    width: 220px;
    margin-top: 10px;
    font-size: 11px;
    color: #666666;
}

#calcbox {
    float: left;
    width: 540px;
    height: 30px;
    text-align: right;
    vertical-align: bottom;
    font-family: Helvetica, Arial, sans-serif;
}





#calcbox a.buttongrey {
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    margin: 10px;
    dislay: block;
    padding: 1px 4px 1px 4px;
    ;
    background: #27A0AF;
    background: #E9BA2E;
    color: #fff;
    text-decoration: none;
}

#calcbox a.glossgrey {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    color: #fff;
}

#calcbox a.glossgrey:hover {
    color: #ffffff;
    background-color: #999999;
}


#calcbox2 {
    float: left;
    width: 525px;
    height: 30px;
    text-align: right;
    vertical-align: bottom;
    font-family: Helvetica, Arial, sans-serif;
}

#calcbox2 a.buttongrey {
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    margin: 10px;
    dislay: block;
    padding: 1px 4px 1px 4px;
    background: #27A0AF;
    background: #E9BA2E;
    color: #fff;
    text-decoration: none;
}

#calcbox2 a.glossgrey {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    color: #fff;
}

#calcbox2 a.glossgrey:hover {
    color: #ffffff;
    background-color: #999999;
}




#midsection a.button {
    font-size: 11px;
    margin: 10px;
    dislay: block;
    padding: 1px 4px 1px 4px;
    background: #660066;
    background: #ff9f00;
    color: #ffffff;
    text-decoration: none;
    font-style: normal;
}

#midsection a.gloss {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    color: #ffffff;
}

#midsection a.gloss:hover {
    background: #a400a4;
    -webkit-box-shadow:
        2px 2px 4px rgba(0, 0, 0, .2),
        0px 0px 3px rgba(0, 0, 0, .1),
        inset 0px 10px 12px #ce00ce,
        inset 0px 20px 2px rgba(200, 240, 48, .5),
        inset 0px 25px 25px #ce00ce;
    -moz-box-shadow:
        2px 2px 4px rgba(0, 0, 0, .2),
        0px 0px 3px rgba(0, 0, 0, .1),
        inset 0px 10px 12px #ce00ce,
        inset 0px 20px 2px rgba(200, 240, 48, .5),
        inset 0px 25px 25px #ce00ce;
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, .2),
        0px 0px 3px rgba(0, 0, 0, .1),
        inset 0px 10px 12px #ce00ce,
        inset 0px 20px 2px rgba(200, 240, 48, .5),
        inset 0px 25px 25px #ce00ce;
    -webkit-text-shadow: -1px -1px 1px rgb(0, 0, 0);
    -moz-text-shadow: -1px -1px 1px rgb(0, 0, 0);
    text-shadow: -1px -1px 1px rgb(0, 0, 0);
}




#videolink {
    display: block;
    float: left;
    height: auto;
    width: 100%;
    margin-left: 0px;
    margin-bottom: 5px;
    margin-top: 0px;
    font-size: 12px;
    color: #000000;
}



#aboutvideo {
    float: left;
    height: 20px;
    width: 100%;
    margin-left: 5px;
    margin-bottom: 0px;
    margin-top: 30px;
    text-align: left;
    padding-left: 30%;
    font-size: 18px
}






#comsection h3 {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: normal;
}

#comsection {
    float: left;
    width: 560px;
    padding: 10px;
    margin-top: 5px;
    margin-left: 40px;
    margin-bottom: 40px;
    background-color: #7997A5;
    font-family: Arial, Helvetica, sans-serif;
}

#comsection-wide {
    float: left;
    width: auto;
    height: auto;
    margin-left: 120px;
}

#comsection a:link {
    color: #27A0AF;
    text-decoration: underline;
}

#comsection a:visited {
    color: #27A0AF;
}

#comsectionnew h3 {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: normal;
}

#comsectionnew {
    float: left;
    width: 560px;
    padding: 10px;
    margin-left: 40px;
    margin-bottom: 40px;
    background-color: #ccc;
    font-family: Arial, Helvetica, sans-serif;
}


#comsectionnew a:link {
    color: #27A0AF;
    text-decoration: underline;
}

#comsectionnew a:visited {
    color: #27A0AF;
}



input.cmtx_honeypot {
    display: none !important;
}

/*lampshade */
#shopsection {
    float: left;
    width: 100%;
    margin-top: 0px;
    margin-left: 0;
    margin-bottom: 0px;
    background-color: #00B1D7;
    font-family: Arial, Helvetica, sans-serif;
}

#shopsectiontitle {
    float: left;
    width: auto;
    height: auto;
}

#shopsectiontitle h3 {
    font-family: Helvetica neue, "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 36px;
    font-weight: bold;
    ;
    margin-top: 5px;
    margin-left: 30px;
    margin-bottom: 10px;
}

#shopwindow-tutorial {
    float: left;
    width: 100%;
    padding-top:10px;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    background-color: #fff;
    color: #1D5178;
    font-size: 14px;
    text-align: left;
}


#shopwindow-tutorial a {
    color: #1D5178;
    font-style: normal;
}

#shopdel a {
    float: right;
    height: 27px;
    width: auto;
    font-size: 13px;
    font-weight: bold;

    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 27px;
    vertical-align: text-top;
    text-align: right;
    margin-right: 16px;
    margin-top: 25px;
    font-style: normal;
}



#contactmain {
    float: left;
    height: auto;
    width: 560px;
    margin-top: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #999;
}

#contactleftform {
    text-align: right;
    float: left;
    height: 25px;
    width: 150px;
    margin-left: 25px;
    margin-top: 9px;
    color: #999999;
}

#contactright {
    text-align: left;
    float: left;
    height: 25px;
    width: 320px;
    margin-left: 20px;
    margin-top: 9px;
}

#contactrightblock {
    text-align: left;
    float: left;
    height: 125px;
    width: 320px;
    margin-left: 20px;
    margin-top: 9px;
}

#contactleft {
    text-align: right;
    float: left;
    height: 25px;
    width: 150px;
    margin-left: 60px;
    margin-top: 9px;
}

#contactheading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: #999;
    text-align: center;
    float: left;
    height: 20px;
    width: 560px;
    margin-top: 30px;
    font-weight: bold;
}

#termsmain {
    float: left;
    height: auto;
    width: 560px;
    margin-top: 40px;
    margin-left: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
}

/*materials guide*/
#guidemain {
    float: left;
    height: auto;
    width: auto;
    margin-top: 5px;
    margin-left: 80px;
    margin-right: 80px;
    Arial,
    Helvetica,
    sans-serif;
    font-size: 1.1em;
    color: #000;
}

/*newsletter*/
#newslettermain {
    float: left;
    height: auto;
    width: 600px;
    margin-top: 40px;
    margin-left: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
}



#bigphoto {
    float: left;
    height: auto;
    width: 100%;
    margin-top: 30px;
    margin-left: 36px;
}

#scrollholder {
    float: left;
    height: auto;
    width: 100%;}
#photoholder {
    float: left;
    height: auto;
    width: 690px;
    margin-top: 40px;
    margin-left: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
}



#photoholder a:link {
    text-decoration: underline;
}

#photoholder a:visited {
    text-decoration: none;
}

#photoholder a:hover {
    text-decoration: none;
}

#photoline {
    float: left;
    height: auto;
    width: 230px;

}




#photowide {
    float: left;
    height: auto;
    width: 650px;
    margin-top: 20px;
    margin-left: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #5B5B5B;
    background-color: #FFE;
    border: thin solid #E2E2E2;

}

#photospace {
    float: left;
    height: auto;
    width: 210px;
    margin-top: 20px;
    margin-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #5B5B5B;
    background-color: #FFE;
    border: thin solid #E2E2E2;
}

#photospace-med {
    float: left;
    height: auto;
    width: 420px;
    margin-top: 20px;
    margin-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #5B5B5B;
    background-color: #FFE;
    border: thin solid #E2E2E2;
}



#aboutbox {
    float: left;
    height: auto;
    width: 760px;
    margin-top: 20px;
    margin-left: 50px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
}

#aboutleft {
    float: left;
    height: auto;
    width: 160px;
    margin-top: 20px;
    margin-left: 20px;
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
}

#aboutright {
    float: left;
    height: auto;
    width: 560px;
    margin-top: 20px;
    margin-left: 20px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
}

#coursebox {
    float: left;
    height: auto;
    width: auto;
    margin-top: 20px;
    margin-left: 50px;
    text-align: left;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
}

.orange {background-color: #FF9900;}
.buy-butt {background-color: rgba(121, 151, 165, 0.8); border: 0px solid #ccc; }

#footer {
    float: left;
    width: 902px;
    height: 50px;
    margin-bottom: 50px;
}


#footercontent {
    height: 20px;
    width: 100%;
    margin-top: 10px;
    margin-left: 10px;
    text-align: left;
    font-size: 13px;
    color: #ffffff;
}

#footercontent-index {
    height: 30px;
    width: 100%;
    margin-top: 30px;
    margin-left: 10px;
    text-align: left;
    font-size: 13px;
    color: #666;
}

#footercontent-index a {color: #999;}

#imageboxwhite {
    width: 540px;
    float: left;
    background-color: #FFFFFF;
    height: auto;
    margin-top: 15px;
    margin-bottom: 15px;
}



#imageboxwhitepad {
    width: 540px;
    float: left;
    background-color: #FFFFFF;
    height: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
}


#bannertutorialbox {
    float: left;
    height: 75px;
    width: 530px;
    margin-top: 10px;}

#bannertutorialbox a:link{ font-weight: bold; color: #333;}
#bannertutorialbox a:hover { font-weight: bold; opacity: 0.5;}
#bannertutorialbox a:visited { font-weight: bold; color: #333;}

#bannertutorialbox-top {
    float: left;
    height: 20px;
    width: 530px;
    margin-top: 5px;
    margin-left: 40px;
    font-size: 25px;
    color: #333333;
    font-weight: bold;
}
#bannertutorialbox-top h1{
        font-size: 1em;
\margin:0;}


.titlesmall {
    font-size: 15px;
    color: #333333;
    font-weight: bold;
}



#bannertutorialbox-sub {
    float: left;
    height: 11px;
    width: 300px;
    margin-top: 7px;
    margin-left: 140px;
    font-size: 11px;
    font-weight: normal;
    text-align: right
}

#bannertutorialbox-bottom {
    float: left;
    height: 25px;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    margin-top: 10px;
    margin-left: 40px;
    font-size: 13px;
    color: #666666;
    font-weight: bold;
    background-color:  rgba(121, 151, 165, 0.7);
border: thin solid #ccc;
}

#bannertutorialbox-bottomstarterproject {
    float: left;
    height: 25px;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    margin-top: 10px;
    margin-left: 40px;
    font-size: 13px;
    color: #666666;
    font-weight: bold;
    background-color: #bbb;
border: thin solid #bbb;
}


#baselink {
    float: right;
    height: 70px;
    width: 530px;
    margin-top: 18px;
    margin-right: 30px;
    border-left-width: thin;
    border-left-style: solid;
    border-left-color: #ffffff;
}

#baselink-bottom {
    float: right;
    height: 21px;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    margin-top: 15px;
    margin-left: 50px;
    font-size: 13px;
    color: #fff;
    font-weight: bold;
    background-color: #e9ba2e;
}



#step-box {
    float: left;
    height: 18px;
    width: auto;
}

#step-boxdark {
    float: left;
    height: 18px;
    width: auto;
    background-color: #7b95a1;
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
    color: #fff;
    font-weight: normal;
}

#step-starterproject {
    float: left;
    height: 18px;
    width: auto;
    background-color: #55b6c0; 
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
    color: #fff;
    font-weight: normal;
}


#step-starterproject a:link {
    color: #ffffff;
    text-decoration: none;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 0px;
    padding-bottom: 2px;
    font-style: normal;
}

#step-starterproject a:visited {
    color: #ffffff;
    text-decoration: none;
    font-style: normal;
}

#step-starterproject a:hover {
    color: #999999;
    text-decoration: underline;
    background-color: #ffffff;
    font-style: normal;
}


#step-boxdark a:link {
    color: #ffffff;
    text-decoration: none;
    padding-left: 6px;
    padding-right: 4px;
    padding-top: 0px;
    padding-bottom: 2px;
    font-style: normal;
}

#step-boxdark a:visited {
    color: #ffffff;
    text-decoration: none;
    font-style: normal;
}

#step-boxdark a:hover {
    color: #999999;
    text-decoration: underline;
    background-color: #ffffff;
    font-style: normal;
}

#step-box {
    float: left;
    height: 18px;
    width: auto;
}

#step-boxdarkwide {
    float: left;
    height: 18px;
    width: auto;
    background-color: #7b95a1;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 13px;
    color: #fff;
    font-weight: normal;
}

#step-boxdarkwide a:link {
    color: #ffffff;
    text-decoration: none;
    padding-left: 5px;
    padding-right: 3px;
    padding-top: 0px;
    padding-bottom: 2px;
    font-style: normal;
}

#step-boxdarkwide a:visited {
    color: #ffffff;
    text-decoration: none;
    font-style: normal;
}

#step-boxdarkwide a:hover {
    color: #999999;
    text-decoration: underline;
    background-color: #ffffff;
    font-style: normal;
}

.btrad a#btrad,
.btape a#btape,
.bint a#bint,
.bblackout a#bblackout,
.bblackoutinterlined a#bblackoutinterlined,
.pipcush a#pipcush,
.plaincush a#plaincush {
    color: #00D2FF;
    text-decoration: underline;
}

.link0 a#link0,
.link0 a#link0,
.link1 a#link1,
.link2 a#link2,
.link3 a#link3,
.link4 a#link4,
.link5 a#link5,
.link6 a#link6,
.link7 a#link7,
.link8 a#link8,
.link9 a#link9,
.link10 a#link10,
.link11 a#link11,
.link12 a#link12,
.link13 a#link13,
.link14 a#link14,
.link15 a#link15 {
    background-color: #E9BA2E;
    padding-top: 6px;
}

#step-boxclear {
    float: left;
    height: 21px;
    width: auto;
    background-color: none;
}

#step-boxclear a:link {
    color: #fff;
    text-decoration: none;
    font-style: normal;
    font-weight: bold;
}

#step-boxclear a:visited {
    color: #fff;
    text-decoration: none;
    font-style: normal;
}

#step-boxclear a:hover {
    color: #666;
    text-decoration: none;
    font-style: normal;
}

#step-boxblank {
    float: left;
    height: 18px;
    width: auto;
    margin-left: 5px;
    margin-right: 5px;
}





#cartbox {
    float: right;
    height: auto;
    width: 100px;
}
























#maincontent #tutorial-textLTgrey ul li {
    list-style-type: decimal;
}

#maincontent #tutorial-textLTgrey a:link {
    font-weight: bold;
    color: #333333;
    text-decoration: none;
    font-style: normal;
}

#maincontent #tutorial-textLTgrey a:visited {
    font-weight: normal;
    color: #666666;
    text-decoration: none;
    font-style: normal;
}

#maincontent #tutorial-textLTgrey a:hover {
    font-weight: normal;
    color: #000000;
    text-decoration: underline;
    font-style: normal;
}

.maincontent-Tutorial #tutorial-textLTgrey ul li {
    list-style-type: decimal;
}

.maincontent-Tutorial #tutorial-textLTgrey a:link {
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    font-style: normal;
}

.maincontent-Tutorial #tutorial-textLTgrey a:visited {
    font-weight: normal;
    color: #666666;
    text-decoration: none;
    font-style: normal;
}

.maincontent #tutorial-textLTgrey a:hover {
    font-weight: normal;
    color: #000000;
    text-decoration: underline;
    font-style: normal;
}


#content-Tutorial {
    float: left;
    height: auto;
    width: 878px;
    margin-top: 0px;
    margin-bottom: 20px;
    margin-left: 10px;
    background: #f0f0f0;
}

div.sidenav-Tutorial {
    ;
    float: left;
    height: auto;
    width: 181px;
    margin-left: 10px;
    margin-top: 10px;
    padding-right: 10px;
    border-right-width: thin;
    border-right-style: solid;
    border-right-color: #ffffff;
    font-size: 25px;
    font-weight: bold;
    color: #cccccc;
}

div.maincontent-Tutorial {
    float: left;
    height: auto;
    width: 635px;
    background: #ffffff;
    margin: 30px auto;
    padding: 10px;
    position: relative;
    -webkit-box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    -moz-box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
    box-shadow: 0 1px 7px hsla(0, 0%, 0%, .2);
}

span.maincontent-Tutorial {
    background: #ffffff;
    display: block;
    height: auto;
    position: relative;
    width: 635px;
}



.ArchitectsDaughterRegular {
    font-weight: normal;
    font-style: normal;
    line-height: normal;
    font-family: 'ArchitectsDaughterRegular', Georgia, serif;
    font-size-adjust: 0.55
}




/* Wobble Horizontal */
@-webkit-keyframes wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }

    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }

    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }

    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }

    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes wobble-horizontal {

 0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }

    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }

    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }

    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }

    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.wobble-horizontal {
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);}

.wobble-horizontal:hover,
.wobble-horizontal:focus,
.wobble-horizontal:active {
    -webkit-animation-name: wobble-horizontal;
    animation-name: wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;}

.videocorner20 iframe {border-radius:20px;}


#footermob {display: none;}
#footercontentmob {display: none;}
#footercontentmob a { display: none;}
.footlink {display: none;}

#headtopmob { display: none;}
#headtopmob-index { display: none;}
#mobheadbot-index {display: none;}

#mobile-nav {display: none;}
#mobile-navtop {display: none;}

#contactmain-mob {display: none;}

#main-nav {display: none;}

#mobvideolink {display: none;}
#MOBaboutvideo {display: none;}

#mob-stepC {display: none;}
#mob-stepL {display: none;}
#mob-stepR {display: none;}

#mobile-nav {display: none;}

#mob {display: none;}

.mob {display: none;}
.NOmob {display: block;}
.dropdown {display: none;}

.dropdown-content {display: none;}

.adholdermob {display: none;}

.qu {

    float: right;
    margin-left: 10px;
    color: #fff;
    margin-top: 6px;
    background-color: #66CCCC;
    padding: 5px;
    font-size: 9px;
}

#calclink {
    background-color: #27A0AF;
    padding: 8px;
    font-size: 12px;
    text-align: center;}

#sidenavcomments {
    float: left;
    height: auto;
    width: 140px;
    margin-left: 5px;
    margin-top: 0px;
    font-size: 10px;
    color: #fff;
    padding: 10px;
    font-weight: normal;
    font: "Arial Black", Gadget, sans-serif}



#subscribe a:link {
    color: #fff;
    text-decoration: none;
    font-style: normal;
}

#subscribe a:hover {
    background: #B20202;
    color: #fff;
    text-decoration: none;
    font-style: normal;
}

#subscribe a:visited {
    background: #B20202;
    color: #fff;
    text-decoration: none;
    font-style: normal;
}

.accordion {background-color: none;color: #fff;cursor: pointer;padding: 10px;width: 100%;border: none;text-align: left;outline: none;font-size: 16px;transition: 0, 5s;margin-top: 8px;}


.faqaccordion {background-color: #f2f2f2;
    color: #848e96;}

.indexaccordion {
    background-color: none;
    color: #3A606E;
    font-weight: bold;
    padding: 0px;
    padding-left: 20px;

}



.indexaccordion-courses {
    background-color: rgba(135, 161, 173);
    padding: 0px;
    font-size:0.9em;
    padding-top: 5px;
    padding-left: 60px;
 }

.indexaccordion-member {
  background-color:  #628090;
    padding: 0px;
    font-size:1em;
    padding-top: 5px;
    padding-left: 350px;
 }


.indexaccordion-free {
    background-color: rgba(149, 171, 183);
    padding: 0px;
    font-size:1.0em;
    font-weight:bold;
    padding-top: 5px;
    padding-left: 60px;
    padding-right: 60px;
 }

.readmore {
    background-color: #fff;
    color: #333;
    padding: 0px;
    font-size:1.0em;
    font-weight:bold;
    padding-top: 5px;
 padding-right: 60px;
 }

.tutorangetop a:link {text-decoration: none;}




.tutaccordion {
    background-color: #27a0af;
    color: #fff;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    transition: 0, 5s;
    margin-top: 8px;
}

.tutbutton {
    background-color: #27a0af;
    color: #fff;
    padding: 10px;
    padding-bottom:18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    margin-top: 8px;
}



.coursesaccordion { background-color: none;color: #fff;xwidth: 100%;border: none;text-align: left;outline: none;transition: 0, 5s;  }

.listaccordion {
    cursor: pointer;
    color: #fff;
    padding: 0px;
    padding: 5px;
    padding-right: 15px;
    width: 60%;
    border: none;
    transition: 0, 5s;margin-top: 8px;
   margin-left: 15%;
    font-size: 1em;   }

.active,
.accordion:hover {}
	

.tutaccordion:after {
    content: '\2228';
    color: #fff;
    font-weight: bold;
    font-size: 22px;
    float: right;
    margin-left: 5px;}



 .proaccordian {margin-left: -25px; padding-left: 50px; }

.accordion:after {
    content: '\2228';
    color: #fff;
    font-weight: bold;
    font-size: 22px;
    float: right;
    margin-left: 5px;}

.indexaccordion-free:after {
     color:  rgba(149, 171, 183);}

.coursesaccordion:after {
    content: '\003e\003e'; }

.listaccordion:after {
    content: '';
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    float: right;
    margin-left: 5px;
}

.faqaccordion:after {
    color: #27a0af;
}


.active:after {
    content: "\2227";
    font-weight: normal;
    color: #ccc;
    font-weight: bold;
    font-size: 22px;
}

.actived:after {
    content: "\003c\003c";
   
}

#panel4:after {margin-top:50px;}
.panel {
    padding: 0 8px;
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    font-size: 0.9em;
    color: #848e96;

}
.panelnoback {
    padding: 0 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    font-size: 13px;

}

.panel li { margin-top: 15px;}
.tutlist li { margin-top: 0px;}
#videolist li { margin-top: 0px;}
.margin0t li {margin-top: 0px;}

.materialpanel li {  margin-top: 0;}
  .panel-member{  background-color:#d9dad7;}
.tutpanel {
    padding: 0 8px;
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    font-size: 0.9em;
    color: #333;}

.txtgrey6 {color: #666;}

.tutpanel1 {max-height: 0;}
.tutpanel2 {max-height: 0;}
.tutpanel3 {max-height: 0;}
.tutpanel4 {max-height: 0;}
.tutpanel5 {max-height: 0;}
.tutpanel6 {max-height: 0;}
.tutpanel7 {max-height: 0;}
.tutpanel8 {max-height: 0;}
.tutpanel9 {max-height: 0;}
.tutpanel10 {max-height: 0;}
.tutpanel11 {max-height: 0;}
.tutpanel12 {max-height: 0;}
.tutpanel13 {max-height: 0;}
.tutpanel14 {max-height: 0;}
.tutpanel15 {max-height: 0;}
.tutpanel16 {max-height: 0;}
.tutpanel17 {max-height: 0;}
.tutpanel18 {max-height: 0;}
.tutpanel19 {max-height: 0;}
.tutpanel20 {max-height: 0;}


.blind-top {
    background-color: #27A0AF;  background-color:#7ac6c9;
}
.pro-top {background-color: #27A0AF; }

.curtain-top {
    background-color: #7ac6c9;
}

.cushion-top {
    background-color: #a83e68; background-color: #cf7d9e; background-color: #e09f3e;background-color: #7ac6c9;
}
.cushion-pom { background-color:#f2adbe; background-color: #E1999A; }
.cushion-brush { background-color: #C7914E; }


.midgrey-top {
    background-color: #ccc; 
      
 
}

.tutorangetop {
    background-color: #e68f00;background-color: #cf7d9e; background-color: #e68f00;
}

.tutpurpletop {
    background-color: #a83e69;
}

.tutpurpletext {
    color: #a83e69;}









.tutgreytop {
    background-color: #848e96;
}


.tutpurpleABtop {
    background-color: #92669A;
}
.tutgreenOEtop {
    background-color: #629A99;
}






.opacity97 {opacity: 97%;}

.opacity95 {opacity: 95%;}
.opacity94 {opacity: 94%;}


.opacity91 {opacity: 91%;}

.opacity90 {opacity: 90%;}


.opacity88 {opacity: 88%;}


.opacity85 {opacity: 85%;}

.opacity82 {opacity: 82%;}

.opacity80 {opacity: 80%;}
.opacity79 {opacity: 79%;}

.opacity76 {opacity: 76%;}
.opacity75 {opacity: 75%;}

.opacity73 {opacity: 73%;}

.opacity70 {opacity: 70%;}

.opacity67 {opacity: 67%;}

.opacity65 {opacity: 65%;}
.opacity64 {opacity: 64%;}

.opacity61 {opacity: 61%;}
.opacity60 {opacity: 60%;}

.opacity58 {opacity: 58%;}

.opacity55 {opacity: 55%;}

.opacity52 {opacity: 52%;}

.opacity50 {opacity: 50%;}

.tutmembertop  { background-color: #4b898d;}

.tutlimetop {background-color: #a1b72e;}

#faqboxholder {
    float: left;
    height: auto;
    width: 540px;
    padding: 20px;
    padding-top: 0px;
    background-color: none;
    margin-top: 15px;
    margin-bottom: 25px;
    margin-left: 40px;
    color: #848e96;
}

.faqboxholdermember {
    float: left;
    height: auto;
    width: 80%;
    padding: 20px;
    padding-top: 0px;
    background-color: none;
    margin-top: 15px;
    margin-bottom: 25px;
    margin-left: 10%;
    color: #848e96;
}


#faqbox {
    float: left;
    height: auto;
    width: 100%;
    background-color: none;
}

#tutaccordbox {
    float: left;
    height: auto;
    width: 90%;
    margin-left: 7%;
    background-color: none;
}

.txtppgrey {color:rgba(48, 69, 92, 0.8)}

.indexback {background-color: #fff;}

.mobbutton {  color:#fff; padding:10px; list-style: none; width: 95%;margin-top:8px;text-align: center;
background-color: #7b95a1;}
.mobbutton a:link { color:#fff;}
.mobbuttonmem {background-color: #3a606e ;}

/* Dropdown Button */
.dropbtn {color: white;
 background-color: rgba(121, 151, 165, 0.0);
  font-size: 15px;
  border: none;}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
#dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(58,96,110, 0.8);
  min-width: 160px;
  z-index: 1;
}

/* Links inside the dropdown */
#dropdown-content a:link {
text-align: left;
        padding-left: 10px;
    padding-right: 8px;
    padding-top: 12px;
    padding-bottom: 4px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
#dropdown-content a:hover {color: #e68f00;}

/* Show the dropdown menu on hover */
.dropdown:hover #dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown 
.dropdown:hover .dropbtn {background-color: #3e8e41;} */



.margin30l { margin-left: 30px;}
.widecont{ width:790px; height: 480px; margin-top: 20px;}
.widecont630{ width:790px; height: 630px; margin-top: 20px;}
.Lcont{ width:29%; height: 320px; float:left;padding-left:4%; }
.listident10 {padding-inline-start: 10px;}



/* Index Comments  */

.comments-holder  {float:left; height:auto; width:100%;}
.comments-holder-row  {float:left; height:320px; width:100%;}
.comments-holder-bubble  {float:left;  margin-top: 20px; height:300px;}

#main-nav-mem:target {
        display: block;
        z-index: 999;
        width: 300px;}

  #main-nav-mem a {
        display: block;
        border-bottom: 1px solid #aaa;
        color: white;
        padding: 15px;}

    #main-nav-mem a:hover {
        background: #e68f00;
        background-color: #addcde;
        color: white;
        text-decoration: none;}

    #main-nav-mem .slideTitle a {
        display: block;
        border-bottom: 1px solid #aaa;
        color: white;
height: 35px;
        padding: 2px;}

  .slide {
        float: right;
        padding-top: 8px;
        padding-right: 8px;}

    .slideL { float: left;
        padding: 0px;}

  .navigation-mem {

        /* Collapsed */
        width: 0;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;}

    .navigation-mem {
        transition: width 0.6s ease;
    }

  .navigation-mem a {background: rgba(98,120,131, 0.96); }

.navigation-mem  .slideTitle a { background: rgba(98,120,131, 0.96); }


  .navigation {

        /* Collapsed */
        width: 0;

        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;

    }

    .navigation {
        transition: width 0.6s ease;
    }
        
        .navigation a { background: rgba(98,120,131, 0.96);}
 .navigation .slideTitle a {background: rgba(98,120,131, 0.96);}
        
    #main-nav:target {
        display: block;
        z-index: 999;
        width: 60%;

    }

    #main-nav:target + #wrap {
        width: 100%;
    }

    #main-nav a {
        display: block;
        border-bottom: 1px solid #aaa;
        color: white;
        padding: 10px;
        font-size: 0.9em;

    }

    #main-nav a:hover {
        background: #e68f00;
        background-color: #addcde;
        color: white;
        text-decoration: none;
    }

    #main-nav .slideTitle a {
        display: block;
        border-bottom: 1px solid #aaa;
        color: white;

        height: 35px;
        padding: 2px;
    }

    .slide {
        float: right;
        padding-top: 8px;
        padding-right: 8px;
    }

    .slideL {
        float: left;
        padding: 0px;
    }

#navlineimage img {height:30px; margin-top:-6px; margin-bottom:-7px;}
   

#tutorial-textwhite iframe {border-radius: 20px;}

#tutorial-textgrey iframe {border-radius: 20px;}
#explainervideo iframe {border-radius: 20px;}
#content iframe {border-radius: 20px;}
.tutpanel iframe {border-radius: 20px;}
#scrollholder iframe {border-radius: 20px;}

.index-box { width:160px;  height:220px;  margin-left: 80px;  float:left; }

.index-box4 { width:160px;  height:220px;  margin-left: 50px;  float:left; }

.index-box4l { width:160px;  height:220px;  margin-left: 30px;  float:left; }
.index-box4b { width:160px;  height:220px;  margin-left: 5px;  float:left; }
.index-box3l { width:160px;  height:220px;  margin-left: 130px;  float:left; }
.index-box3b { width:160px;  height:220px;  margin-left: 120px;  float:left; }

.boxline { width:900px; height:240px; margin-top: 60px;}
.memberline { width:900px; height:150px; margin-top: 60px;}
.box-image { background-color: #fff; height: 170px; width: 160px; border-radius: 40px; }


.box-image:hover{ background-color: #c9e8e9; }
.box-image2:hover{ background-color: #c8d4da ; }

.box-image img {  width: 80%; margin-left: 10%; height:auto;}

.box-image2 { background-color: #fff; height: 170px; width: 160px; border-radius: 40px; }
.box-image2 img {  width: 50%; margin-left: 25%; margin-top: 20px; margin-bottom: 30px;height:auto;}
 
.box-text {  width: 80%; margin-left: 10%; margin-top: -20px; height:auto;  text-align: center; text-decoration:none;}
.box-text2 {  width: 90%; margin-left: 10%; margin-top: -20px; height:auto;  text-align: center; text-decoration:none;}
.box-text3 {  width: 80%; margin-left: 10%; margin-top: -35px; height:auto;  text-align: center; text-decoration:none;}
.box-subtext {  width: 100%;  margin-top: 0; height:auto;  text-align: center; text-decoration:none;}


.cush-line { margin-top: 60px;margin-bottom: 40px;}
.cush-image img { width:400px; height:220px; margin-left: 100px; border-radius: 10px; }

.index-course-button {    float: left;
    margin-bottom: 0;
    margin-top: 15px;
    margin-left: 5%;
    width: 160px;
   text-align: center;
    width:90%; height:22px; font-size: 1.1em; padding-top:8px;
    padding-bottom: 10px;
    font-family: Arial,Helvetica,sans-serif;
    }

.index-course-button-bordered {    float: left;
    margin-bottom: 0;
    margin-top: 15px;
    margin-left: 5%;
    width: 156px;
   text-align: center;
    width:85%; height:18px; font-size: 1.1em; padding-top:6px;
    padding-bottom: 10px;
    font-family: Arial,Helvetica,sans-serif;}

    

.index-text-course-button {    float: left;
    margin-bottom: 20px;
    margin-top: 15px;
    margin-left: 20%;
   text-align: center;
    width:60%; height:22px; font-size: 1.3em; padding-top:8px;
    padding-bottom: 6px;
    font-family: Arial,Helvetica,sans-serif;}


   


.curtain-course-button { background-color: #7ac6c9;
    color: #fff; }
.curtain-course-button:hover { color: #7ac6c9; background-color: #fff; }

.askcindy-button { background-color: #004280;
    color: #fff; }
.askcindy-button:hover { color: #004280; background-color: #fff; }

.bluegrey-button { background-color: rgba(121, 151, 165, 0.8);
    color: #fff; }
.bluegrey-button:hover { color: rgba(121, 151, 165, 0.8); background-color: #fff; }


.beginner-button { background-color: #1f7a8c; background-color:#fff; color: #27A0AF; border:6px solid #92d0d3;}
.beginner-button:hover { color: #27A0AF; background-color: #c9e8e9; }

.beginner-buttondark { background-color: #1f7a8c; background-color:#fff; color: #27A0AF; border:6px solid rgb(185, 223, 224);}
.beginner-buttondark:hover { color: #27A0AF; background-color: #c9e8e9; }

.intermediate-button { background-color: #27A0AF;   color: #fff; border:1px solid #27A0AF; }
.intermediate-button:hover { color: #27A0AF;   background-color: #fff; }

.pro-button { background-color: #27A0AF;   color: #fff; border:1px solid #27A0AF; }
.pro-button:hover { color: #27A0AF;   background-color: #fff; }

.cushion-course-button { background-color: #7ac6c9;   color: #fff; border:1px solid #7ac6c9; }
.cushion-course-button:hover { color: #7ac6c9;   background-color: #fff; }







.unlockdetail {margin-bottom: 40px; padding-left:10px; padding-right:10px;width:110%;padding-bottom:10px;border-bottom:10px solid #7ac6c9;border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;background-color: #eee; text-align: center;}

.extra-button { background-color: #7ac6c9;   color: #fff; border:1px solid #7ac6c9; }
.extra-button { background-color: rgba(0, 0, 0, 0.1);   color: #fff; border:none; }
.extra-button:hover { color: #fff;   background-color: #7ac6c9; }

.buy-this-course-button { background-color: #27A0AF;   color: #fff; border:2px solid #27A0AF; }
.buy-this-course-button:hover { color: #27A0AF;   background-color: #fff; }

 #hamburger-desktop {
        position: fixed;
        right: 0;
        left: 0;
        
        margin: 0;
     margin-top:46px;
     height:4px;
        width:100%;
    z-index: 990;
    
    }
.hamholder {width:900px;   margin:0 auto;}
.hamholder img {float:left; margin-top:-8px;}

.hamholder-accord {width:900px;   margin:0 auto;}
.hamholder-accord img {float:left; margin-left: 70px;margin-top: -14px;}

.hamholder-basic {width:900px;   margin:0 auto;}
.hamholder-basic img {float:left; margin-left: 20px;margin-top: -14px;}


/* --amazon link styling---  */

.ac-badge-rectangle {
    height: 22px;
    background-color: #232F3E;
    border-color: #232F3E;
    display: flex;
    width: 160px; }
.ac-badge-text-primary {
    line-height: 22px;
    margin-left: 8px;
    margin-right: 3px;
    font-family: "Amazon Ember",Arial!important;
}
.ac-badge-text-secondary {
    line-height: 22px;
    margin-right: 8px;
    font-family: "Amazon Ember",Arial!important;
}
    
.amzwht {color:#FFF;  }  
.amzor {color:#F69931;}


.font1em {font-size: 1em;}



 .dropdown1 {
  position: relative; /* Positioning context for the dropdown */
  display: block; /* Makes the dropdown a block-level element */
  width: auto; /* Allows the dropdown to size itself according to the button's content */
}

/* Dropdown content (hidden by default) */
.dropdown-content1 {
  display: none;
  position: absolute; /* Positions it below the button */
  background-color: #f9f9f9;
  width: 126px; /* Can be adjusted as needed */
  
  z-index: 1;
  top: 100%; /* Places the dropdown directly below the button */
  left: 0; /* Aligns the dropdown to the left of the button */
  margin-top: 48px; /* Adds spacing between the button and dropdown */
}

/* Dropdown links */
.dropdown-content1 a {
  color: black;
  padding: 4px 1px;
  text-decoration: none;
  display: block;
  font-size:16px;
  color:#27A0AF;}

/* Change color on hover */
.dropdown-content1 a:hover {
  background-color: #ddd;}

/* Show the dropdown when hovering over the button */
.dropdown1:hover .dropdown-content1 {
  margin-left:20px; display: block;}








 .dropdown2 {
  position: relative; /* Positioning context for the dropdown */
  display: block; /* Makes the dropdown a block-level element */
  width: auto; /* Allows the dropdown to size itself according to the button's content */
}

/* Dropdown content (hidden by default) */
.dropdown-content2 {
  display: none;
  position: absolute; /* Positions it below the button */
  background-color: #f9f9f9;
  width: 130px; /* Can be adjusted as needed */
  
  z-index: 1;
  top: 100%; /* Places the dropdown directly below the button */
  left: 0; /* Aligns the dropdown to the left of the button */
  margin-top: 48px; /* Adds spacing between the button and dropdown */
}

/* Dropdown links */
.dropdown-content2 a {
  color: black;
  padding: 4px 1px;
  text-decoration: none;
  display: block;
  font-size:16px;
  color:#27A0AF;}

/* Change color on hover */
.dropdown-content2 a:hover {
  background-color: #ddd;}

/* Show the dropdown when hovering over the button */
.dropdown2:hover .dropdown-content2 {
  margin-left:172px; display: block;}




 .dropdown3 {
  position: relative; /* Positioning context for the dropdown */
  display: block; /* Makes the dropdown a block-level element */
  width: auto; /* Allows the dropdown to size itself according to the button's content */
}

/* Dropdown content (hidden by default) */
.dropdown-content3 {
  display: none;
  position: absolute; /* Positions it below the button */
  background-color: #f9f9f9;
  width: 132px; /* Can be adjusted as needed */
  
  z-index: 1;
  top: 100%; /* Places the dropdown directly below the button */
  left: 0; /* Aligns the dropdown to the left of the button */
  margin-top: 48px; /* Adds spacing between the button and dropdown */
}

/* Dropdown links */
.dropdown-content3 a {
  color: black;
  padding: 4px 1px;
  text-decoration: none;
  display: block;
  font-size:16px;
  color:#27A0AF;}

/* Change color on hover */
.dropdown-content3 a:hover {
  background-color: #ddd;}

/* Show the dropdown when hovering over the button */
.dropdown3:hover .dropdown-content3 {
  margin-left:328px; display: block;}



















































   
  .firefox {display: none;}

/* Firefox SVG image problem --------- */



@-moz-document url-prefix() { 
      .NOTfirefox {display: none;}
  .firefox {display: inline;;}
}















/* Smartphones (portrait and landscape) --------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    -- #mob {display: block;}
.mob {display: block;}
.NOmob {display: none;}
.mobwidthauto {width:100%;}
#main-nav-mem {display: none;}
.navigation-mem {display: none;}


       
        
#scrollholder { padding:0px;}

.wid75m {width: 75%;}
.margin40tnom {margin-top: 0px;}
.margin40rnom {margin-right: 0px; margin-left: 0px;}
.margin100b {margin-bottom: 0px;} 
.video-pad5p {padding: 0px}    
.box-subtext {  margin-left: 10%;}

.border10 {-moz-border-radius-topleft: 0; -moz-border-radius-topright: 0;-moz-border-radius-bottomleft: 0;-moz-border-radius-bottomright: 0;-webkit-border-top-left-radius: 0;-webkit-border-top-right-radius: 0;-webkit-border-bottom-left-radius: 0;-webkit-border-bottom-right-radius: 0;border-top-left-radius: 0;border-top-right-radius: 10;border-bottom-left-radius: 0}
        
        #tutorial-textwhite iframe {border-radius: 10px;}

#tutorial-textgrey iframe {border-radius: 10px;}
.tutpanel iframe {border-radius: 10px;}
#scrollholder iframe {border-radius: 10px;}
       
  .mobm25t {margin-top: 25px;}         
       
 #buttonlist-loggedin {margin-left: 20%;} 

    body {
        background-color: #7B95A1;
        width: 100%;
        background-image: none;
        overflow-x: hidden;
         padding:0;
        Margin:0;
        scroll-snap-type: block;
       
    }

    .index-new {
        background-color: #e8e8e8;
        background-image: none;}
    .beigemob {
        background-color: #c0c2bd;
        background-image: none;} 
 .greybluemob {
        background-color: rgba(121, 151, 165, 0.7);
        background-image: none;}
 .intbluemob {
        background-color: rgb(185, 223, 224);
        background-image: none;}

        


    #wrap {
        height: auto;
        width: 100%;
        margin: 0 0;
        text-align: left;
        float: right;
        transition: width 0.6s ease;
        z-index: 1;
        padding:0;}
        
            #wrap-index {
        height: auto;
        width: 100%;
        margin: 0 0;
        text-align: left;
        float: right;
        transition: width 0.6s ease;
        z-index: 1;
        background-color: #fff; 
    }


#headtopmob {
        display: block;
        color: #fff;
        font-size: 12px;
        height: 54px;
        width: 100%;
        background-image: url(../images/LOGOMOB4.svg);
        background-repeat: no-repeat;
        background-size: auto;
        background-position: right;
    }


    #headtopmob-index {
        display: block;
        color: #999;
        font-size: 12px;
        height: 54px;
        width: 100%;
        background-image: url(../images/LOGOMOB9.png);
        background-repeat: no-repeat;
        background-size: auto;
        background-position: right;
    }

    #headtopmob a {
        display: block;
        
    }

    #mobheadmenu {
        float: left;
        width: 80px;
        height: 54px;
        display: block;
        color: #fff;
        font-size: 12px;
    }

       #mobheadmenu-index {
        display:block;
        float: left;
        width: 80px;
        height: 54px;
        display: block;
        color: #999;
        font-size: 12px;
    }

    #mobheadtitle {
        float: left;
        font-family: "angelina", "Arial Black", Arial, "Comic Sans MS";
        font-size: 35px;
        padding: 10px;
        width: auto;
        font-weight: normal;

    }

    #mobheadbot {
        padding-top: 40px;
        text-align: right;
        padding-right: 20px;
        border-bottom-width: thin;
        border-bottom-style: solid;
        border-bottom-color: #FFF;

    }

      #mobheadbot-index {
         display:block;
        padding-top: 40px;
        text-align: right;
        padding-right: 20px;
        border-bottom-width: thin;
        border-bottom-style: solid;
        border-bottom-color: #FFF;

    }

    #sidenav {
        display: none;
    }

    #sidenavtitle {
        display: none;
    }

    #headerADbanner {
        display: none;
    }

    #cartbox {  display: none;}

    #header {
        float: left;
        height: auto;
        width: 100%;
    }

    #hamburger {
        position: fixed;
        right: 0;
        left: 0;
        z-index: 990;
        margin: 0;
        width:100%;
    }

    #headtop {
        float: left;
        height: 100%;
        width: 100%;

        margin-top: 5px;
    }

    #logo {
        display: none;
    }

    #headerright {
        display: none;
    }

    #headbottom {
        float: left;
        height: 54px;
        width: auto;
        margin-top: 0px;
        font-weight: bold;
    }

    #headtitle {
        float: left;
        margin-top: 3px;
        margin-left: 10px;
        height: 46px;
        width: auto;
        font-family: Helvetica neue, "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 40px;
        color: #FFFFFF;
        vertical-align: bottom;
    }

    #headtitle-index {
        width: 100%;
        font-size: 40px;
    }
        
    #headtitle-index-mem {
        width: 100%;
        font-size: 40px;
    }       

    #index-title {
        width: 100%;
    }
  #headtitle-indexmob {
      float: left;
    padding-top: 14px;
        width: 100%;
        font-size: 40px;
       height: 60px;}

        #pro-textmob {
      float: left;
        width: 100%;
        padding-bottom:20px;
        }
        
      #headtitle-indexmobthin {
      float: left;
    padding-top: 14px;
 
        width: 100%;
        font-size: 1.4em;
       height: 40px;
    margin-bottom: 20px;
 
    }
  

.moblist-title { width:73%; font-size: 25px; text-align: left; padding-left: 27%; }      
 .mobindexlist{   padding-inline-start: 27%; line-height: 23px;}
.anchor  {
    width: 50%;
    height: auto;
    margin-left: 20%;
    float: left;}

.mobindex-coursebox {
    width: 60%;
    height: auto;
    margin-left: 20%;
    float: left;
    margin-bottom: 30px;
    margin-top: 40px;
    border: 4px solid rgba(121, 151, 165, 0.9);
    padding: 20px;
            border-radius: 20px;}

    .mobindex-coursebox-single {
    width: 50%;
    height: auto;
    margin-left: 20%;
    float: left;
    margin-bottom: 30px;
    margin-top: 40px;
    border: 4px solid rgba(121, 151, 165, 0.9);
    padding: 20px;
            border-radius: 20px;}

   .box-image img {  width: 100%; margin-top:-10px; }       
.box-text {font-size: 1.2em; width:100%;margin-top:-30px;}
.box-text70 {font-size: 1.2em; width:100%;margin-top:-70px; margin-left:10px}

    #headtitle a:link {
        font-weight: bold;
        font-family: Helvetica neue, "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 40px;
        color: #FFFFFF;
        text-decoration: none;
    }

    #headtitle a:visited {
        font-weight: bold;
        font-family: Helvetica neue, "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 40px;
        color: #FFFFFF;
        text-decoration: none;
    }

    #headtitle a:hover {
        font-weight: bold;
        font-family: Helvetica neue, "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 40px;
        color: #cccccc;
        text-decoration: none;
    }

    .tutoriallistbox-text {
        color: #7B95A1;
       margin-top: 0;  
    }

 

    #midsection {
        float: left;
        height: auto;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 0px;
        margin-left: 0;
        margin-right: 0;
        background-color: #fff;
        border: none;
        -moz-border-radius-topleft: 0px;
        -moz-border-radius-topright: 0px;
        -webkit-border-top-left-radius: 0px;
        -webkit-border-top-right-radius: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        -moz-border-radius-bottomleft: 0px;
        -moz-border-radius-bottomright: 0px;
        -webkit-border-bottom-left-radius: 0px;
        -webkit-border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        z-index: 2;
    }

    #midsectionbanner {
        float: left;
        height: 50px;
        width: auto;
        margin-top: 10px;
        margin-bottom: 0px;
        margin-left: 10px;
    }

    #content {
        float: left;
        height: auto;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 0px;
        margin-right: 0px;
        background-color: #FFFFFF;
        border: none;
        padding: 0px;
    }

    #tutorial-step-T-RIGHT {
        display: none;
    }

    #maincontent {
        float: left;
        height: auto;
        width: 100%;
    }

    #maincontent a:link {
        font-weight: normal;
        color: #666666;
        text-decoration: none;
        font-style: italic;
    }

    #maincontent a:visited {
        font-weight: normal;
        color: #666666;
        text-decoration: none;
        font-style: italic;
    }

    #maincontent a:hover {
        font-weight: normal;
        color: #660099;
        text-decoration: underline;
    }


    #content-Tutorial {
        float: left;
        height: auto;
        width: 100%;
        margin-top: 0px;
        margin-bottom: 20px;
        margin-left: 0px;
        background: #fff;
        z-index: 3;
    }

    div.sidenav-Tutorial {
        display: none;
    }

    div.maincontent-Tutorial {
        float: left;
        height: auto;
        width: 94%;
        background: #ffffff;
        margin-top: 0px;
        margin-bottom: 10px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        position: relative;
        -webkit-box-shadow: 0 0px 0px hsla(0, 0%, 0%, 0);
        -moz-box-shadow: 0 0px 0px hsla(0, 0%, 0%, 0);
        box-shadow: 0 0px 0px hsla(0, 0%, 0%, 0);
    }


   

    #comsection h3 {
        color: #FFFFFF;
        font-size: 20px;
        font-weight: normal;
    }

    #comsection {
        float: left;
        width: 96%;
        padding-left: 5px;
        margin-top: 5px;
        margin-left: 0px;
        margin-bottom: 40px;
        margin-right: 0px;
        background-color: #27A0AF;
        font-family: Arial, Helvetica, sans-serif;
    }


    #comsectionnew h3 {
        color: #FFFFFF;
        font-size: 20px;
        font-weight: normal;
    }

    #comsectionnew {
        float: left;
        width: 96%;
        padding-left: 5px;
        margin-top: 5px;
        margin-left: 0px;
        margin-bottom: 40px;
        margin-right: 0px;
        background-color: #ccc;
        font-family: Arial, Helvetica, sans-serif;
    }

    #faqboxholder {
        float: left;
        width: 97%;
        padding: 5px;
        padding-bottom: 20px;
        padding-top: 0px;
        margin-top: 5px;
        margin-left: 0;
        margin-bottom: 20px;
        margin-right: 0px;
    }

    #bannertutorialbox {
        float: left;
        height: auto;
        margin-top: 10px;
        width: auto;
    }

    #bannertutorialbox-top {
        float: left;
        height: 20px;
        width: auto;
        margin-top: 5px;
        margin-left: 5px;
        font-size: 20px;
        color: #333333;
        font-weight: bold;
    }

    .titlesmall {
        font-size: 15px;
        color: #333333;
        font-weight: bold;
    }

    #bannertutorialbox-sub {
        float: left;
        height: 11px;
        width: auto;
        margin-top: 29px;
        margin-left: 20px;
        text-align: left;
    }


    #bannertutorialbox-bottom {
        display: none;
    }
    #bannertutorialbox-bottomstarterproject {        display: none;
    }

    #baselink-bottom {
        display: none;
    }

    #mobile-navtop {
        display: block;
        float: left;
        margin-left: 10px;
    }

    #mobile-navtop a {
        color: #fff;
        font-size: 13px;
        font-weight: bold;
    }

    #mobile-nav {
        display: block;
        float: left;
        margin: 5px;
        width: 97%;
    }

    #mobile-nav a {
        color: #fff;
        font-size: 13px;
        font-weight: bold;
    }

    #mobile-nav {
        display: block;
    }

    #mob-stepL {
        display: block;
        float: left;
        margin: 10px;
        background-color: #778993;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
    }

    #mob-stepC {
        display: block;
        float: left;
    }

    #mob-stepR {
        display: block;
        float: left;
        margin: 10px;
        background-color: #778993;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
    }


    /* footer ----------- */

    #footer {
        display: none;
    }

    #footermob {
        display: block;
        float: left;
        width: 98%;
        height: auto;
        margin-top: 30px;
        margin-left: 2%;
    }

    #footercontent {
        display: none;
    }
        
 

    #footercontentmob {
        display: block;
        height: auto;
        width: 100%;
    }

    #footercontentmob a {
        display: block;
        font-size: 16px;
        color: #fff;
        font-style: normal;
        font-weight: normal;
        text-decoration: none;
        font-family: Arial, "Arial Black", Gadget, sans-serif;
    }



    .footlinkholder {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }

    .footlink {
        display: block;
        float: left;
        height: 30px;
        width: 25%;
        margin-right: 4%;
        margin-bottom: 12px;
        text-align: center;
        background-color: #aaa;
        background-color: rgba(0, 0, 0, 0.2);
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright: 10px;
        -moz-border-radius-bottomleft: 10px;
        -moz-border-radius-bottomright: 10px;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding-top: 10px;
        padding-right: 5px;
        padding-bottom: 12px;
        padding-left: 5px;
    }
        
.colorfootlink {
        display: block;
        float: left;
        height: 28px;
        width: 24%;
        margin-right: 4%;
        margin-bottom: 12px;
        text-align: center;
        background-color: #aaa;
        background-color: rgba(0, 0, 0, 0.2);
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright: 10px;
        -moz-border-radius-bottomleft: 10px;
        -moz-border-radius-bottomright: 10px;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding-top: 10px;
        padding-right: 5px;
        padding-bottom: 12px;
        padding-left: 5px;
    }



        
       

.extrafootlink  {  display: block;
        float: left;
        height: 28px;
        width: 24%;
        margin-right: 4%;
        margin-bottom: 12px;
        text-align: center;
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright: 10px;
        -moz-border-radius-bottomleft: 10px;
        -moz-border-radius-bottomright: 10px;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding-top: 10px;
        padding-right: 5px;
        padding-bottom: 12px;
        padding-left: 5px;   background-color: none; border:1px solid #fff;
    }

 .intfootlink { background-color: #e68f00;background-color: #7ac6c9; border:1px solid rgba(0, 0, 0, 0.1);
    }
  .orfootlink   { background-color: rgba(162, 162, 162);border:1px solid rgba(0, 0, 0, 0.1);}
    .drkbluefootlink  {  background-color: #002B53; border:1px solid rgba(0, 0, 0, 0.1);
    }


  .greyblufootlink  {  background-color:rgba(121, 151, 165, 0.95);}    
.brtblufootlink  {  background-color:#2bafc0;}
.darkbluefootlink    {background-color:#002B53;}

.ltblufootlink {   background-color: #7ac6c9;}

    .footlink2 {
        display: block;
        float: left;
        height: 50px;
        width: 20%;
        margin-right: 2%;
        margin-bottom: 2px;
        padding: 10px 8px 8px 20px;
    }



    .footlink-spacer {
        display: block;
        float: left;
        height: 50px;
        width: 17%;
        margin-right: 0;
        margin-bottom: 2px;
        padding: 0;
    }


    /* tutorial ----------- */
    #tutorial-step {
        float: left;
        height: 40px;
        width: auto;
        margin-left: 0px;
        margin-top: 10px;
        font-size: 20px;
        color: #333333;
        font-family: Arial, Helvetica, sans-serif;
    }

 

    #tutorial-text {
        float: left;
        height: auto;
        width: auto;
        margin-left: 0px;
        margin-top: 15px;
        font-size: 14px;
        color: #404040;
        font-family: Helmet, Freesans, Helvetica, Arial, sans-serif;
    }
      
        #extra-instructions {height: auto;width: auto;margin-left: 0px;margin-top: 0px;}
        
            #extra-instructions-curtain {height: auto;width: auto;margin-left: 0px;margin-top: 0px;}

    #tutorial-textgrey {
        float: left;
        height: auto;
        width: 94%;
        margin-left: 0px;
        margin-top: 15px;
        background-color: #fff;
        border: none;
        font-size: 14px;
        color: #404040;
        font-family: Helmet, Freesans, Helvetica, Arial, sans-serif;
        border-bottom: 15px solid #eee; 
        padding-top: 15px;
        padding-bottom: 25px;
        padding-left: 5px;
    }

  #tutorial-textgreynotopmargin {
        float: left;
        height: auto;
        width: 94%;
        margin-left: 0px;
        margin-top: 15px;
        background-color: #fff;
        border: none;
        font-size: 14px;
        color: #404040;
        font-family: Helmet, Freesans, Helvetica, Arial, sans-serif;
        border-bottom: 15px solid #eee; 
        padding-top: 15px;
        padding-bottom: 25px;
        padding-left: 5px;
    }
   

    #tutorial-textGR {
        float: left;
        height: auto;
        width: auto;
        margin-left: 0px;
        margin-top: 35px;
        background-color: #ffffff;
        border: 15px solid #339900;
        font-size: 12px;
        font-family: Helvetica, Arial, sans-serif;
        padding: 20px;
    }

    #tutorial-textwhite {
        float: left;
        height: auto;
        width: 94%;
        margin-left: 0px;
        margin-top: 15px;
        background-color: #ffffff;
        border: none;
        font-size: 14px;
        font-family: Helvetica, Arial, sans-serif;
        padding-top: 15px;
        padding-right: 5px;
        padding-bottom: 15px;
        padding-left: 5px;
         border-bottom: 15px solid #eee;
    }

    #tutorial-textwhiteintrotop {
        float: left;
        height: auto;
        width: 94%;
        margin-left: 0px;
        margin-top: 5px;
        background-color: #ffffff;
        border: thin solid #ffffff;
        font-size: 14px;
        font-family: Helvetica, Arial, sans-serif;
        padding: 20px;
        padding-right: 5px;
        padding-left: 5px;
    }

    #tutorial-textwhiteintrotop img {
        width: 100%;
    }
        
   #basictemplate-text {
        float: left;
        height: auto;
        width: 94%;
        margin-left: 7px;
        margin-top: 0px;
        background-color: #ffffff;
        border: thin solid #ffffff;
        font-size: 14px;
        font-family: Helvetica, Arial, sans-serif;
       padding: 0px;
        padding-bottom: 20px;
        padding-right: 5px;
        padding-left: 5px;
    }  
        


    #tutorial-textLTgrey {
        float: left;
        height: auto;
        width: auto;
        margin-left: 0px;
        margin-top: 35px;
        background-color: #f0f0f0;
        border: thin solid #e4e4e4;
        font-size: 14px;
        font-family: Helvetica, Arial, sans-serif;
        padding: 15px;
    }

    .tutorial-textLTgrey-narrow {
        float: left;
        height: auto;
        width: auto;
        margin-left: 0px;
        margin-top: 15px;
        background-color: #f0f0f0;
        border: thin solid #e4e4e4;
        font-size: 14px;
        font-family: Helvetica, Arial, sans-serif;
        border-radius:8px;

    }

    .tutorial-textLT-narrow {
        float: left;
        height: auto;
        width: auto;
        margin-left: 0px;
        margin-top: 15px;
        font-size: 14px;
        font-family: Helvetica, Arial, sans-serif;
        padding: 0px;
    }
    

    #calcbox {
        float: left;
        width: 100%;
        height: 40px;
        text-align: right;
        vertical-align: bottom;
        font-family: Helvetica, Arial, sans-serif;
    }

 

    #calcbox a.buttongrey {
        font-size: 11px;
        font-style: normal;
        font-weight: bold;
        margin: 10px;
        dislay: block;
        padding: 5px 9px 5px 9px;
        ;
        background: #27A0AF;
        color: #fff;
        text-decoration: none;
    }

    #calcbox a.glossgrey {
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        font-size: 11px;
        font-style: normal;
        font-weight: bold;
        color: #fff;
    }

    #calcbox a.glossgrey:hover {
        color: #ffffff;
        background-color: #999999;
    }

    #calcboxsmall {
        float: left;
        width: auto;
        height: 40px;
        text-align: left;
        margin-left: 20px;
        margin-top: 10px;
        vertical-align: bottom;
        font-family: Helvetica, Arial, sans-serif;
    }

   

    #calcbox2 {
        float: left;
        width: 100%;
        height: 40px;
        text-align: right;
        vertical-align: bottom;
        font-family: Helvetica, Arial, sans-serif;
    }

    #calcbox2 a.buttongrey {
        font-size: 11px;
        font-style: normal;
        font-weight: bold;
        margin: 10px;
        dislay: block;
        padding: 5px 9px 5px 9px;
        background: #27A0AF;
        color: #fff;
        text-decoration: none;
    }

    #calcbox2 a.glossgrey {
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        font-size: 11px;
        font-style: normal;
        font-weight: bold;
        color: #fff;
    }

    #calcbox2 a.glossgrey:hover {
        color: #ffffff;
        background-color: #999999;
    }


    #tutorial-left h1 {
        font-size: 25px;
        color: #333333;
        font-family: Helvetica, Arial, sans-serif;
    }

    #tutorial-text h2 {
        font-size: 20px;
        color: #666666;
        font-family: Helvetica, Arial, sans-serif;
    }

    #tutorial-text h3 {
        font-size: 17px;
        color: #666666;
        margin-top: 10px;
        font-family: Helvetica, Arial, sans-serif;
    }

    #tutorial-text ul {
        list-style-type: decimal;
    }

    #tutorial-text .plain li {
        list-style-type: none;
    }

    .disc li {
        list-style-type: disc;
    }

    #tutorial-left {
        float: left;
        height: auto;
        width: auto;
        margin-left: 10px;
        margin-top: 35px;
        font-size: 12px;
        color: #666666;
    }

    #tutorial-right {
        float: left;
        height: auto;
        width: 100%;
        margin-left: 5px;
        margin-top: 35px;
        font-size: 12px;
        color: #666666;
    }


    #tutorial-leftintro {
        float: left;
        height: auto;
        width: 60%;
        margin-left: 15%;
        font-size: 12px;
        color: #666666;
    }

 

    #imagebox10 {
        float: left;
        height: auto;
        width: auto;
        margin-left: 20px;
        margin-top: 10px;
    }

    #imagebox1 {
        float: left;
        height: auto;
        width: auto;
        margin-left: 20px;
        margin-top: 20px;
    }

 

    #imagebox3 {
        float: left;
        height: auto;
        width: auto;
        margin-left: 20px;
        margin-top: 10px;
    }

    #imagetext {
        float: left;
        height: auto;
        width: 220px;
        margin-top: 10px;
        font-size: 11px;
        color: #666666;
    }

    #imageboxwhite {
        width: auto;
        float: left;
        background-color: #FFFFFF;
        height: auto;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    #imageboxwhitepad {
        width: 100%;
    }

    #videolink {
        display: block;
        float: left;
        height: auto;
        width: 100%;
        margin-left: 0px;
        margin-bottom: 5px;
        margin-top: 0px;
        font-size: 12px;
        color: #000000;
    }

    #aboutvideo {
        float: left;
        height: 20px; 
        margin-left: 5px;
        margin-bottom: 5px;
        margin-top: 20px;
        text-align: left;
        padding-left: 65px;
        font-size: 18px
    }

    #videolist {
        float: left;
        width: 240px;}

    #baselink {
        float: right;
        height: 70px;
        width: auto;
        margin-top: 18px;
        margin-right: 30px;
        border-left-width: thin;
        border-left-style: solid;
        border-left-color: #ffffff;
    }

    #baselink-bottom {
        float: right;
        height: 21px;
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        margin-top: 15px;
        margin-left: 50px;
        font-size: 13px;
        color: #fff;
        font-weight: bold;
        background-color: #e4e4e4;
        border: thin solid #ccc;
    }



    #step-boxclear a:link {
        color: #fff;
    }

    #step-boxclear a:visited {
        color: #fff;
    }

    #bigphoto {
        width: auto;
        margin-left: 5px;
    }

    #bigphoto img {
        width: 100%;
    }

    #coursebox {
        margin-top: 0px;
        margin-left: 0px;
    }

 



    #photoholder li {
        width: 250px;
    }

 /*   #htmpara {
        width: 100%;
        margin-left: 0px
    }   */

    #photoline a:link {
        display: block;
        color: #fff;
        font-style: normal;
        text-decoration: none;
    }

    #photoline a:visited {
        display: block;
        color: #fff;
    }

    #photoline a:hover {
        color: #FF0;
        font-style: normal;
        text-decoration: none;
    }

    /* index page ----------- */

    #midsection-index {
        float: left;
        height: auto;
        width: 100%;
        margin-top: 5px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #f0f0f0;
        border: none;
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright: 10px;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        box-shadow: 0 0 0px rgba(0, 0, 0, 0);
        padding-top: 25px;
        padding-left: 0px;
    }
            #midsection-index2 {
        float: left;
        height: auto;
        width: 100%;
        margin-top: 5px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #f0f0f0;
        border: none;
        -moz-border-radius-topleft: 10px;
        -moz-border-radius-topright: 10px;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        box-shadow: 0 0 0px rgba(0, 0, 0, 0);
        padding-top: 25px;
        padding-left: 0px;
    }

    #midsection-indexmob {
        float: left;
        height: auto;
        width: 100%;
        margin-top: 5px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #fff;
        border: none;
        padding-top: 0px;
        padding-left: 0;}

    #tutoriallist-list {
        width: 300px;
        margin-bottom: 15px;}

    #list-title {
        width: 100%;
        font-size: 25px;}


    .boldermob {

        font-weight: bold;
        line-height: 30px;
    }

    #list {
        font-size: 17px;
        width: 300px;
        line-height: 25px;
    }

    /* terms page -----------
#midsectionbannercontact {float: left;height: 20px;width: auto;margin-top: 10px;margin-bottom: 0px;margin-left: 10px;} */
    #midsectionbannercontact {
        display: none;
    }

    #printbar {
        float: left;
        height: 40px;
        width: auto;
        margin-left: 20px;
    }

    #termsmain {
        float: left;
        height: auto;
        width: auto;
        margin-top: 40px;
        margin-left: 0px;
        padding-left: 15px;
        padding-right: 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #000000;
    }

    #guidemain {
        float: left;
        height: auto;
        width: auto;
        margin-top: 5px;
        margin-bottom: 30px;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.1em;
        color: #000000;
    }

    /* contact page ----------- */
    #contactmain {
        display: none;
    }

    #contactmain-mob {
        display: block;
        float: left;
        height: auto;
        width: auto;
        margin-top: 0px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #000000;
    }

    #contactleftform-mob {
        text-align: left;
        float: left;
        height: 19px;
        width: 200px;
        margin-left: 5px;
        margin-top: 15px;
       
    }

    #contactright-mob {
        text-align: left;
        float: left;
        height: 25px;
        width: 90%;
        margin-left: 10px;
        
    }

    #contactrightblock-mob {
        text-align: left;
        float: left;
        height: 125px;
        width: 90%;
        margin-left: 10px;
        
    }

    #contactleft-mob {
        text-align: left;
        float: left;
        height: 25px;
        width: 50px;
        margin-left: 5px;
        margin-top: 9px;
    }

    #contactheading-mob {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        color: #000000;
        text-align: center;
        float: left;
        height: 20px;
        width: auto;
        margin-top: 30px;
        font-weight: bold;
    }



    /*about page ----------- */
    #aboutbox {
        float: left;
        height: auto;
        width: 94%;
        margin-top: 20px;
        margin-left: 15px;
        margin-right: 0;
        text-align: left;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #000000;
    }

    #aboutleft {
        float: left;
        height: auto;
        width: 200px;
        margin-top: 20px;
        margin-left: 0px;
        text-align: left;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #000000;
    }

    #aboutright {
        float: left;
        height: auto;
        width: auto;
        margin-top: 20px;
        margin-left: 0px;
        margin-right: 5px;
        text-align: left;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #000000;
    }


  #videolink {
        display: none;
    }  

    #mobvideolink {
        display: block;
        float: left;
        height: 100%;
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 5px;
        margin-top: 0px;
        font-size: 12px;
        color: #000000;
        padding: 0;
    }


     #aboutvideo {
        width: 84%;
    }     


    #videoADtitle {
        width: 200px;
    }

   







    .link0 a#link0,
    .link0 a#link0,
    .link1 a#link1,
    .link2 a#link2,
    .link3 a#link3,
    .link4 a#link4,
    .link5 a#link5,
    .link6 a#link6,
    .link7 a#link7,
    .link8 a#link8,
    .link9 a#link9,
    .link10 a#link10,
    .link11 a#link11,
    .link12 a#link12,
    .link13 a#link13 {
        background-color: #e2ba4d;
        padding-top: 6px;
    }

    #step-boxdarkwide {
        height: auto;
        width: auto;
        font-size: 14px;
        text-align: center;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        -moz-border-radius-bottomleft: 5px;
        -moz-border-radius-bottomright: 5px;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .blue {
        width: 260px;
    }


    #imagebox3 img {
        width: auto;
    }

    #shopsection {
        width: 100%;
        margin-top: 5px;
        margin-left: 0px;
        margin-bottom: 0px; }

    #pleatcalc {
        margin-left: 0px;
        width: 100%;
        margin-top: 0;
    }

    #pleatcalc-left {
        width: 300px;
        margin-left: 30px;
        height: auto;
    }

    #pleatcalc-leftblindcalc {
        width: auto;
        margin-left: 0px;
        height: auto;
        padding: 20px;
    }
        
           #pleatcalc-lefthdpr {
        width: auto;
        margin-left: 0px;
        height: auto;
        padding: 0;
    }

    #pleatcalcpatt {
        margin-left: 0px;
     
    }
        


    .myformfabric-curtain {
        width: auto;
        padding: 0px;
    }

    .myformfabric-blind {
         width: auto;
        padding: 0px;
    }

    .myformfabric-curtainDATA {
        width: auto;
        padding: 0px;
    }

  .myformfabric-blindDATA { width: auto;
        padding: 0px;} 

    #stylized .small {
        width: 170px;
    }

    #stylizedgrey .small {
        width: 170px;
    }

    #stylized input {
        width: 60px;
        margin-left: 4px;
    }

    #stylizedgrey input {
        width: 40px;
        margin-left: 4px;
    }

    #stylizedgrey p {
        width: 90%;
    }

    #stylized p {
        width: 90%;
    }

         #methodhdpr input{ width:80px;}


    #comsection-wide {
        width: 96%;
        margin-left: 2%;
    }

    .qu {
        float: left;
        margin-left: 4px;
    }

    #midsectionbannercalc {
        width: 100%;
        margin-left: 0px;
    }

    #midsectionbannercalcblank {
        display: none;
    }

 



    #howto {
        margin-top: 0px;
    }

    #howto img {
        margin-left: 0px;
    }

 
    #photoholder {
        width: auto;
        margin-left: 0px;
        margin-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }

    #photowide {
        width: auto;
        margin-left: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }

    #photowide img {
        width: 100%;
    }

    #photospace {
        width: 100%;
        margin-left: 0px;
        padding-left: 0px;
        padding-right: 0px;
        border:none;
    }

    #photospace img {
        width: 100%;
    }

    #photospace-med {
        width: 280px;
        margin-left: 0px;
        padding-left: 10px;
        padding-right: 10px;
    }

    #photospace-med img {
        width: 100%;
    }

    #photoline {
        width: 100%;
        margin-left: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }

    #midsectionbanner {
        height: auto;
        margin-bottom: 10px;
    }

    /* Dropdown Button */
    .dropbtn {
        color: white;
        padding-top: 6px;
        font-size: 13px;
        font-weight: bold;
        background-color: #e2ba4d;
        background-color: #7ac6c9;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        border: none;
        margin-top: 10px;
        cursor: pointer; }



    /* The container <div> - needed to position the dropdown content */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #7B95A1;
        min-width: 230px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 99;
    }

    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 8px 8px;
        border: thin solid #CCC;
        text-decoration: none;
        display: block;
    }

    /* Change color of dropdown links on hover */
    .dropdown-content a:hover {
        background-color: #999
    }

    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* Change the background color of the dropdown button when the dropdown content is shown */
    .dropdown:hover .dropbtn {
        background-color: #999;
    }

    body {
        cursor: pointer
    }



    #link0m,
    #link1m,
    #link2m,
    #link3m,
    #link4m,
    #link5m,
    #link6m,
    #link7m,
    #link8m,
    #link9m,
    #link10m,
    #link11m,
    #link12m,
    #link13m,
    #link14m {
        display: none
    }


    .link0 #link0m,
    .link1 #link1m,
    .link2 #link2m,
    .link3 #link3m,
    .link4 #link4m,
    .link5 #link5m,
    .link6 #link6m,
    .link7 #link7m,
    .link8 #link8m,
    .link9 #link9m,
    .link10 #link10m,
    .link11 #link11m,
    .link12 #link12m,
    .link13 #link13m,
    .link14 #link14m {
        background-color: none;
        padding-top: 0px;
        display: block }

    #printbar { margin-left: 0px; }

.safetybox {
        float: left;
        height: auto;
        margin-top: 10px;
        background-color: #fff;}
            


    #blind-safety {
        float: left;
        margin-left: 0px;
        margin-bottom: 0px;
        margin-top: 0px;
        background-color: #fff;
        height: auto;
        width: auto;
        padding: 0px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 8px;
        font-weight: bold;
        text-align: center;
        border: none;
    }

    #blind-safety a:link {
        color: #A30028;
    }

    #blind-safety a:visited {
        color: #A30028;
    }

    #blind-safety a:hover {
        color: #A30028;
    }


#guidebutton a:link {
    font-weight: bold;
    color: #27A0AF;
    text-decoration: none;
}

#guidebutton a:visited {
    font-weight: bold;
    color: #27A0AF;
    text-decoration: none;
}

#guidebutton a:hover {
    font-weight: bold;
    color: #ccc;
    text-decoration: underline;
}
        


    #tutaccordbox {
        width: 96%;
        margin-left: 0;
    }

    .indexback {
        background-color: #7997A5;
        background-color: #fff;
    }

    .adholdermob {
        padding-left: 50%;
        padding-top: 20px;
    }

    #index-insert {
        height: 460px;
        background-color: #fff;margin-bottom: 0;
            margin-top: 0;
    }


 .hero-image {
        background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url(../images/sh-index-new3mob.avif);
    z-index:500;}
    
    .hero-textmob {
        text-align: left;
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: auto;
        background-color: rgba(165, 165, 165, 0.7);
        color: #fff;
        font-size: 15px;
        line-height: 20px;
        padding-left: 0px;
       
        padding-top: 0px;
        padding-bottom: 0px;
        width:80%;
    }
.hero-textmob ul {padding-inline-start:0px;}
        .hero-textmob li { list-style-type: none;} 
         
   .widecont{ width:100%; height: auto; margin-top: 20px;}
.widecont630{ width:100%; height:  auto; margin-top: 20px;}
.Lcont{ width:100%; height: auto; float:left;padding-left:0; }     
        
  .faqboxholdermember {
    margin-left: 5%;  }    
        
        
.carousel-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.carousel-box {
  flex: 0 0 80vw;  /* Each box takes up 75% of the viewport width */
  scroll-snap-align: start;
 display: flex;
  align-items: center;
font-weight: bold;
  margin-right: -10px;  /* Gap between boxes */
  height:290px;
}

/* Button styling */

.scroll-button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  box-shadow: none;
  z-index: 10;
}

#carousel1 .scroll-button {
  background-image: url('/images/brown-right.svg');
background-color:#fff;}
#carousel2 .scroll-button {
  background-image: url('/images/ltblue-right.svg');
background-color:#fff;}
#carousel3 .scroll-button {
  background-image: url('/images/ltblue-right.svg');
background-color:#fff;}
#carousel4 .scroll-button {
  background-image: url('/images/darkblue-right2.svg');
background-color:#fff;}
#carousel5 .scroll-button {
  background-image: url('/images/darkblue-right2.svg');
background-color:#fff;}



.scroll-button:hover {
  background-color: #f0f0f0;
}


.dot-indicator {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  gap: 10px;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #eee;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color:#aaa;
}

.scroll-container {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

.scroll-container::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
}
   
    /* Styles #814685*/
}