body{
font-family:"verdana";
color:#010553;
font-size:1em;
background:#ffffff;
 
height:100%;
margin:0px 0px 0px 0px;

}


 body.index{

 

position: relative;
background:#ffffff url('marotex-yarns/main_blanket.jpg') no-repeat center center fixed ;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

div.mar-toppage{
	
background: #0c55b5 url('images/bgtop.jpg') repeat-x;
height: 60px;
width:100%;
position:relative;
border-style:solid;
border-color:#417944;
border-width:1px;
margin:0px; 
padding:0px;

}



div.mar-banner{ 
width:95%;
position:relative;
border-style:solid;
border-color:#00ff00;
border-width:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
}


div.mar-logo{ 

 
width:35%;
margin:0px; 
padding:0px; 

border-style:solid;
border-color:#417944;
border-width:0px;
}


div.mar-main-menu{ 
height:60px;
width:70%;
position:absolute;
top:5px;
right:5px;
//background:#ffffff url('images/bgmarotex.png') repeat-x;
color:#ffffff;
font-size:0.8em;
height: 20px;
vertical-align:text-middle;
border-style:solid;
border-color:#ff0000;
border-width:0px;
text-align:right;
 
}







div.mar-yarn-menu-cont{ 
display:none;
 height: 40px;
width:100%;
position:relative;
 
//background:#ffffff url('marotex-yarns/button-bg.jpg') repeat-x;
color:#010553;
font-size:0.8em;

vertical-align:text-middle;
text-align:center;

border-bottom-style:solid;
border-bottom-color:#0a4aa8;
border-bottom-width:1px;
//background:  url('marotex-yarns/button-bgr.jpg') repeat-x;
}

div.mar-yarn-menu-cont-index{ 
 height: 40px;
width:100%;
position:relative;
 
 
color:#010553;
font-size:0.8em;

vertical-align:text-middle;
text-align:center;

border-bottom-style:solid;
border-bottom-color:#0a4aa8;
border-bottom-width:1px;
 
}



div.mar-yarn-menu{ 
 
width:96%;
 
margin-left:auto;
margin-right:auto; 
 
text-align:center;

 
border-left-style:solid;
border-left-color:#0a4aa8;
border-left-width:1px;
//background: #FF00FF;

}


ul.mar-list-menu{
   list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
   
}

li.mar-yarn-menu-button-fur{ 
width:19.8%;
float: left;
padding: 0px 0px 3px 0px;
border-right-style:solid;
border-right-color:#0a4aa8;
border-right-width:1px;
background: #FFFFFF;
}

 

li.mar-yarn-menu-button{ 
width:19.8%;
float: left;
padding: 0px 0px 3px 0px;
border-right-style:solid;
border-right-color:#0a4aa8;
border-right-width:1px;

background: #FFFFFF;
}
li.mar-yarn-menu-button-t{ 
width:19.8%;
float: left;
padding: 0px 0px 3px 0px;
border-right-style:solid;
border-right-color:#0a4aa8;
border-right-width:1px;
border-bottom-style:solid;
border-bottom-color:#0a4aa8;
border-bottom-width:1px;
background: #FFFFFF;
}

li.mar-yarn-menu-button a,li.mar-yarn-menu-button-t a{
padding: 0px 10px 0px 10px;
font-weight:bold;
font-size:0.9em;
font-style:normal;
color:#0a4aa8;
text-decoration:none;
 
}

li.mar-yarn-menu-button a:hover, li.mar-yarn-menu-button-t a:hover{ 
 
 
color:#0f9303;
text-decoration:none;
 //background:  url('marotex-yarns/button-bgr.jpg') repeat-x;
 //background: #FFFFFF;
}

li.mar-yarn-menu-button-fur a{ 
padding: 0px 10px 0px 10px;
font-weight:bold;
font-size:0.9em;
font-style:normal;
color:#0a4aa8;
text-decoration:none
}

li.li.mar-yarn-menu-button-fur a:hover{ 
color:#0f9303;
text-decoration:non
}



img.image-hue{
	-webkit-filter: hue-rotate(150deg);
  filter: hue-rotate(150deg);
}

a.mar-top{
font-weight:normal;
font-size:0.9em;
font-style:normal;
color:#ffffff;
text-decoration:none;
}

a.mar-top:hover{ 
font-weight:normal;
font-size:0.9em;
font-style:normal;
color:#1ddb0c;
text-decoration:none;
}


a.mar-top-rev{
font-weight:normal;
font-size:0.9em;
font-style:normal;
color:#1ddb0c;
text-decoration:none;
}

a.mar-top-rev:hover{ 
font-weight:normal;
font-size:0.9em;
font-style:normal;
color:#ffffff;
text-decoration:none;
}






div.mar-yarn-main{
position:relative;
width:95%;
  padding:  0;
margin-left:auto;
margin-right:auto; 
 
text-align:center;

border-style:solid;
border-color:#0a4aa8;
border-width:1px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

div.mar-address{	
position:relative;
width:96%;
color:#036525;
padding:0% 2% 0% 2%;
margin:20px;
	font-size:0.9em;
	font-style:normal;
	text-align:left;
border-right-style:solid;
border-right-color:#a0bce2;
border-right-width:0px;
border-bottom-style:solid;
border-bottom-color:#a0bce2;
border-bottom-width:1px;
}


div.mar-form{	
position:relative;
width:96%;
color:#036525;
padding:0% 2% 0% 2%;
margin:0px;
	border-style:solid;
border-color:#324ce2;
border-width:0px;
}

div.mar-yarn-main-mob{
position:relative;
width:95%;
  padding:  0;
  
 
text-align:center;

border-style:solid;
border-color:#0a4aa8;
border-width:1px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
margin-left:auto;
margin-right:auto;	 
}


div.mar-yarn-main-center{
position:relative;
width:95%;
  padding:  0;
margin-left:auto;
margin-right:auto; 
 
text-align:center;

border-style:solid;
border-color:#0a4aa8;
border-width:0px;
 
}


div.mar-yarn-left{
width:98%;
 padding:  0;
text-align:center;
margin: 0px 0px 0px 0px;
border-left-style:solid;
border-left-color:#b4d1fd;
border-left-width:0px;	
}




div.mar-yarn-left img.swank{
 
 
  padding:  0;
margin:50px 0px 0px 0px;
 

border-style:solid;
border-color:#dceafd;
border-width:0px;

}


div.mar-yarn-right-mob{
	width:95%;
 position:relative;
text-align:center;

border-style:solid;
border-color:#ff0000;
border-width:0px;	


padding: 5px 5px 5px 5px;
}


div.mar-yarn-right{
	display:none;
	width:388px;
 position:relative;
text-align:center;

border-left-style:solid;
border-left-color:#ff0000;
border-left-width:0px;	

padding: 5px 5px 5px 5px;
}

div.mar-yarn-left-pattern{
width:98%;
 padding:  0;
text-align:center;
margin: 0px 0px 0px 0px;
border-left-style:solid;
border-left-color:#b4d1fd;
border-left-width:0px;	
}

div.mar-yarn-right-pattern{
width:98%;
 padding:  0;
text-align:center;
margin: 0px 0px 0px 0px;
border-left-style:solid;
border-left-color:#b4d1fd;
border-left-width:0px;	
}


div.mar-yarn-title-cont{
width:95%;	
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
margin-left:auto;
margin-right:auto;	
}

div.mar-yarn-title{
	width:80%;
 color:#208714;
	font-size:1.2em;
	font-style:normal;
	text-align:left;
margin-left:auto;
margin-right:auto;

border-style:solid;
border-color:#ff0000;
border-width:0px;

padding: 10px 0px 10px 0px;
}

.menucon{
	width:15%;
 
//float:right; 
margin:0;
padding: 10px 0px 10px 0px;
 
z-index:99;
border-style:solid;
border-color:#000000;
border-width:0px;
}


div.mar-yarn-right-text{
	width:98%;
 color:#030872;
	font-size:1em;
	font-style:normal;
	text-align:left;
 
border-style:solid;
border-color:#dceafd;
border-width:0px;
position:relative;
 

padding: 1% 1% 1% 1%;
margin:20px 0px 30px 0px;
}

div.mar-yarn-right-paterns img.pattern-img{
	//width:30%;
float:left;
 
border-style:solid;
border-color:#dceafd;
//border-color:#000000;
border-width:1px;
//position:relative;
 
margin-right:20px;
padding: 2px;
}

div.mar-yarn-right-paterns {
	width:95%;
	height:99px;
 color:#010553;
	font-size:1em;
	font-style:normal;
	text-align:left;
 
border-style:solid;
border-color:#b4d2fb;
border-width:1px;
position:relative;
 

padding:3px 3px 3px 3px;
margin-left:auto;
margin-right:auto;
}

div.mar-yarn-right-paterns a, div.mar-yarn-abreviations a{
font-weight:normal;
font-size:0.9em;
font-style:normal;
color:#030872;
text-decoration:none;
text-shadow: 2px 2px 5px rgba(1,5,83, 0.2);
margin: 0px;
padding: 0px;
 
}

div.mar-yarn-right-paterns a:hover,  div.mar-yarn-abreviations a:hover{
 
font-weight:normal;
font-size:0.9em;
font-style:normal;
color:#248c18;
text-decoration:none;
text-shadow: 0px 0px 0px rgba(1,83,5, 0.2);
margin: 0px;
padding: 0px;
}






div.mar-color-icons{
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
	
position:relative;
width:95%;
padding:  0px;

margin-left:auto;
margin-right:auto; 
margin-top:10px;
margin-bottom:10px;

text-align:center;
font-size:1em;
color:#030872;
border-style:solid;
border-color:#0a4aa8;
border-width:0px;
text-align:center; 
}

div.mar-color-icon{
position:relative;
width:22%;
  padding:0px;
margin:0px 0px 5px 5px;
text-align:center;

border-style:solid;
border-color:#b4d2fb;
border-width:1px;

}

div.mar-color-icons img.icon-swank{
position:relative;
width:98%;
  padding:  2px 0px 2px 0px;
margin:1px;
text-align:center;
 

}

div.mar-videos{
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
	
position:relative;
width:95%;
padding:  0px;

margin-left:auto;
margin-right:auto; 
margin-top:10px;
margin-bottom:10px;

text-align:center;
font-size:1em;
color:#030872;
border-style:solid;
border-color:#0a4aa8;
border-width:0px;
text-align:center; 
}

div.mar-video{
position:relative;
width:100%;
  padding:0px;
 
text-align:center;

border-style:solid;
border-color:#b4d2fb;
border-width:1px;
margin-left:auto;
margin-right:auto; 
margin-top:0px;
margin-bottom:0px;

} 

div.mar-yarn-abreviations{
width:95%;
color:#208714;
font-size:0.9em;
font-style:normal;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid;
border-color:#aa0000;
border-width:0px;
padding: 0px 0px 0px 0px;
display: flex; 
}

div.mar-yarn-abreviations-l{
	width:33%;
 color:#208714;
	font-size:1em;
	font-style:normal;
 
 
text-align:right;
border-style:solid;
border-color:#b4d2fb;
border-width:1px;
margin: 0px 0px 0px 0px;
padding: 0px;
//background:#00ff00;
}


div.mar-yarn-abreviations-m{
	width:31%;
 color:#208714;
	font-size:1em;
	font-style:normal;
	text-align:center;
 
 
border-style:solid;
border-color:#b4d2fb;
border-width:1px;
margin: 0px 10px 0px 10px;
padding: 0px;
//background:#00ff00;
}

div.mar-yarn-abreviations-r{
	width:33%;
 color:#208714;
	font-size:1em;
	font-style:normal;
	text-align:left;
 
 
border-style:solid;
border-color:#b4d2fb;
border-width:1px;
margin: 0px;
padding: 0px;
}


div.mar-yarn-abreviations-l-index{
	width:493px;
 color:#208714;
	font-size:1em;
	font-style:normal;
	text-align:left;
 
text-align:right;
border-style:solid;
border-color:#b4d2fb;
border-width:1px;
margin: 0px 10px 0px 0px;
padding: 0px;
background:#f9fbfe;
}

div.mar-yarn-abreviations-r-index{
	width:493px;
 color:#208714;
	font-size:1em;
	font-style:normal;
	text-align:left;
 
 
border-style:solid;
border-color:#b4d2fb;
border-width:1px;
margin: 0px;
padding: 0px;
background:#f9fbfe;
}


.mar-copy{
font-weight:normal;
font-size:11px;
font-style:normal;
color:#030872;
text-decoration:none;
}





div.mar-small-text{
	display:none;
	width:100%;
 color:#036525;
	font-size:0.75em;
	font-style:normal;
	text-align:center;
 
border-style:solid;
border-color:#000000;
border-width:0px;
position:relative;
 

padding:0;
margin:20px 0px 20px 0px;
}

div.mar-small-text-mob{
	
	width:100%;
 color:#036525;
	font-size:0.75em;
	font-style:normal;
	text-align:center;
 
border-style:solid;
border-color:#000000;
border-width:0px;
position:relative;
 

padding:0;
margin:20px 0px 20px 0px;
}


div.mar-pattern-contact{
	
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
 color:#036525;
 
 
border-style:solid;
border-color:#000000;
border-width:0px;

 

padding:0;
margin:20px 0px 20px 0px;
}




.spacer{
font-family:"Arial";
font-size:1px;
font-style:normal;
color:#000000;
text-decoration: none; 
}
.spacer3{
font-family:"Arial";
font-size:3px;
font-style:normal;
color:#000000;
text-decoration: none; 
}

.spacer5{
font-family:"Arial";
font-size:5px;
font-style:normal;
color:#000000;
text-decoration: none; 
}

.spacer10{
font-family:"Arial";
font-size:10px;
font-style:normal;
color:#000000;
text-decoration: none; 
}

.spacer30{
font-family:"Arial";
font-size:30px;
font-style:normal;
color:#000000;
text-decoration: none; 
}
.spacer50{
font-family:"Arial";
font-size:50px;
font-style:normal;
color:#000000;
text-decoration: none; 
}

div.mar-spacer{
font-size:100px;	
}

#slideshow {
  margin: 0px;
  position: relative;
  width: 100%;
  //height: 250px;
  padding: 0px;
  //box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

#slideshow > div {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.navdrawer-container {
        position: fixed;       
        top: 60px;
        left: 0;
        width: 100%;
        height: 0px;
        color: #033375;
        //background-color: rgba(34, 48, 64, 0.95);
		background-color: rgba(70, 147, 246, 0.95);
        overflow: hidden;
        z-index: 22;
        -webkit-transition: height 0.4s ease-out, background-color 0.4s ease-out;
        transition: height 0.4s ease-out, background-color 0.4s ease-out;
      }

      .navdrawer-container.open {
        height: 310px;
      }

      .navdrawer-container ul {
        width: 100%;
        height: auto;

        padding: 0;
        margin: 0;

        list-style-type: none;

        z-index: 22;
      }

      .navdrawer-container ul li a {
        display: block;
        font-size:1.2em;
        height: 30px;
        font-family: Helvetica;
        padding: 0 10px;
        
        line-height: 30px;
        
        text-decoration: none;
        color: #ffffff;
		font-weight:normal;
      }

      .navdrawer-container ul li {
        border-bottom-style: solid;
        border-width: 1px;
        border-color: #ffffff;
		text-align:left;
		//border: 2px solid blue;
      }

      .navdrawer-container ul li a:hover {
        background-color: rgba(162,197,243, 1);
		//background-color: rgba(147, 178, 213, 0.9);
		//color: #ff9d02;
		color: #01306d;
      }

      .navdrawer-container ul li a:focus {
        background-color: rgba(92, 142, 200, 0.3);
        outline: 0;
      }

      .navdrawer-container ul li a:active {
        background-color: rgba(165, 180, 200, 0.4);
      } 


div.mar-text{
width:80%;
color:#010553;
font-size:0.9em;
font-style:normal;
text-align:left;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid;
border-color:#aa0000;
border-width:0px;
padding: 0px 0px 0px 0px;
}


table.table-patterns{
width: 100%;
font-size:14px; 
border: 1px solid #e5f0fe;	
}

table.table-patterns td.white{
text-align: left;	
padding: 10px;
border-bottom: 1px solid #e5f0fe;
background-color: #ffffff;
width: 100%;
}

td.blue{
text-align: left;	
padding: 10px;
border-bottom: 1px solid #e5f0fe;
background-color: #e5f0fe;
width: 100%;
font-size:13px;
font-Weight:bold;
}

a.patterns-link{
font-weight:normal;
font-size:12px;
font-style:normal;
color:#010553;
text-decoration:none;	
}

a.patterns-link:hover{
font-weight:normal;
font-size:12px;
font-style:normal;
color:#049b36;
text-decoration:none;	
}

@media (min-width: 350px) {

a.mar-top{
font-size:0.9em;
}

a.mar-top:hover{ 
font-size:0.9em;
}

}


@media (min-width: 430px) {
div.mar-spacer{
font-size:150px;	
}
	 
div.mar-logo{ 

height:60px;
width:179px;
 
}

.mar-small-text-mob{	
display:none;
}	
div.mar-small-text{
display:block;	
}
} 
	

@media (min-width: 600px) {

div.mar-spacer{
font-size:180px;	
}

div.mar-video{

width:48%;


} 

}
	
@media (min-width: 750px) {
	
div.mar-spacer{
font-size:200px;	
}	
	
div.mar-address{	
position:relative;
width:34%;
color:#036525;
padding:0% 2% 0% 2%;
margin:1%;
	font-size:0.9em;
	font-style:normal;
	text-align:left;
 
border-right-width:1px;
 
border-bottom-width:0px;
}


div.mar-form{	
 
width:55%;
}	
	
	
	div.mar-color-icons{

font-size:0.8em;
 
}


div.mar-yarn-right-text{	
font-size:0.8em;
}
	
div.mar-color-icon{
 
width:18%;
 
}	
	 
.navdrawer-container{	
display:none;
} 
 
.menucon{	
display:none;
}
div.mar-yarn-menu-cont{	
display:block;
}
 
div.mar-main-menu{ 
font-size:0.9em;
} 
 

div.mar-yarn-left-pattern{
width:58%;
 padding:  0;
text-align:center;
margin: 0px 0px 0px 0px;
border-left-style:solid;
border-left-color:#b4d1fd;
border-left-width:0px;	
}

div.mar-yarn-right-pattern{
width:38%;
 padding:  0;
text-align:center;
margin: 0px 0px 0px 0px;
border-left-style:solid;
border-left-color:#b4d1fd;
border-left-width:0px;	
}


}	 

@media (min-width: 830px) {

div.mar-spacer{
font-size:230px;	
}

div.mar-video{

width:30%;


}

}

@media (min-width: 930px) {

div.mar-spacer{
font-size:270px;	
}

}

@media (min-width: 1020px) {
	 
div.mar-yarn-right{	
display:block;
} 
 
div.mar-small-text-mob{	
display:none;
}
div.mar-yarn-right-mob,div.mar-yarn-main-mob{	
display:none;
}
div.mar-yarn-left{
width:598px;
}
 
 div.mar-yarn-right{
	width:388px;
	font-size:0.8em;
 
}

div.mar-yarn-main,div.mar-color-icons,div.mar-yarn-title,div.mar-yarn-main-center{
	width:1000px;
 
}

div.mar-yarn-right-text{	
font-size:0.9em;
}
}