.mainbutton, .mainbutton1, .mainbutton2, .mainbutton3{
	/*color: black;
	height: auto;
	width: 210px;*/
	position:fixed;
	visibility: hidden;
	}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

/*out*/
@keyframes fadeout {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-moz-keyframes fadeout { /* Firefox */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-o-keyframes fadeout { /* Opera */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

/*==============================*/
/*==============================*/
.mainbutton  {
            width:auto;
			letter-spacing: normal;
			font-weight: 300;
			position:fixed;
			right: 20px;
			top: 80px;
        }
/***level1***/
.mainbutton ul{
        /* positioning */
        	position:relative;
            z-index:1000;
        /* remove the dots next to list items: */
            list-style:none; 
        /* get rid of any default or inherited margins and padding: */
            margin:0; 
            padding:0; 
            
        /* styling: */
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-weight: normal;
            font-size: 16px;

        }
        
        /* we're using the direct descendant selectors > to ONLY affect the main menu items */
        .mainbutton > ul > li {
        /* positioning */ 
            position: relative;
            float: left;
        /* styling: */
            /*margin-right: 10px;*/
			/*text-align: center;*/
			
        }
        .mainbutton > ul > li > a {
        /* positioning */ 
            display:block;
        /* styling: */
            /* background-color: #2c2c2c;  grey */
			background-color: #2dcae5;
            padding:8px 10px;
            text-decoration:none;
            /*color:#aaaaaa; */
			color: #ffffff;
			
border-radius: 2px;
    box-shadow: 0 .5px 1px rgba(0,0,0,0.3);
	width: 190px;
            
        }
        .mainbutton > ul > li > a:hover{
        /* styling: */
            /*background-color:#666666;  grey */
			/*background-color: #2c2c2c;*/
			background-color: #545454;
           /* color:#eeeeee;  light grey */
		   color: #2DCAE5;
        }

/***level2***/		
.mainbutton ul ul{
            font-size: 13px;
           /* background-color:#e6056f; /* remove. this is for illustration purposes only */
           /* width:340px; /* you need a width to accommodate tertiary menus */
            
            position:absolute;
            z-index:100;
            
            height: 0;
            overflow: hidden;
			
			-webkit-transition: height 0.3s ease-in;
            -moz-transition: height 0.3s ease-in;
            -o-transition: height 0.3s ease-in;
            -ms-transition: height 0.3s ease-in;
            transition: height 0.3s ease-in;

        }

        /* don't display tertiary box yet */
        .mainbutton > ul > li:hover ul ul, .mainbutton > ul > li > a:hover ul ul{
            height:0;
            
        }
        /* tertiary drop-down box */
        .mainbutton ul ul ul{
            /*left:170px;*/
            width:190px;
			color: #2DCAE5;

        }
        
        .mainbutton > ul > li:hover ul, .mainbutton > ul > li > a:hover ul,
        .mainbutton ul ul li:hover > ul, .mainbutton ul ul li a:hover > ul{
            height:170px;  /*need a height to accommodate any tertiary menus */
        }
        
        /* drop-down item styles */
        /* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".mainbutton ul ul li", becomes: ".mainbutton ul ul ul li" */
 
 
 /*** first ***/       
        .mainbutton ul ul li{
            /*background-color:#eaeaea;  grey */
			background-color: #ffffff;
			border-radius: 0px 0px 0px 0px;
			border-right: 1px solid #e6e6e6;
			border-left: 1px solid #e6e6e6;
    /*box-shadow: 0 .5px 1px rgba(0,0,0,0.3);*/
            
			width:190px;
			padding: 5px 0px 7px;/**/
			
			-webkit-transition: background-color 0.3s ease;
            -moz-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            -ms-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
        }
        
        .mainbutton ul ul li:hover {
            /*background-color:#999;  grey */
			background-color: #fafafa;
			color: #2DCAE5;
        }
        
        .mainbutton ul ul li a {
            display:block;
            text-decoration:none;
            /**/margin:0 12px;
            padding:5px 0;
            color:#4c4c4c; /* grey */
        }
        .mainbutton ul ul li a:hover, .mainbutton ul ul li:hover > a {
            /*color:#ffffff;  white */
			color: #2DCAE5;
        }
		
/*** last ***/
		.mainbutton ul ul li.last{
            /*background-color:#eaeaea;  grey */
			background-color: #ffffff;
			border-radius: 0px 0px 2px 2px;
    box-shadow: 0 .5px 1px rgba(0,0,0,0.3);
            width:190px;
			/*width:210px;*/
			padding: 5px 0px 7px;/**/
			
			-webkit-transition: background-color 0.3s ease;
            -moz-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            -ms-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
        }
		
		.mainbutton ul ul  li.last:hover {
            /*background-color:#999;  grey */
			background-color: #fafafa;
			color: #2DCAE5;
			
        }
        
        .mainbutton ul ul  li.last a {
            display:block;
            text-decoration:none;
            /**/margin:0 12px;
            padding:5px 0;
            color:#4c4c4c; /* grey */
        }
        .mainbutton ul ul  li.last a:hover, .mainbutton ul ul li:hover > a {
            /*color:#ffffff;  white */
			color: #2DCAE5;
        }
	
	
	/* unfortunate ie7 gap fix */
        .ie7 .mainbutton ul ul li{
            margin-bottom:-3px;
        }
		
		/* .arrow{background:url(arrow.png) right center no-repeat;} */
		
/***==================button 1=============***/
.mainbutton1  {
            width:auto;
			letter-spacing: normal;
			font-weight: 300;
			position:fixed;
			right: 20px;
			top: 80px;
        }
/***level1***/
.mainbutton1 ul{
        /* positioning */
        	position:relative;
            z-index:1000;
        /* remove the dots next to list items: */
            list-style:none; 
        /* get rid of any default or inherited margins and padding: */
            margin:0; 
            padding:0; 
            
        /* styling: */
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-weight: normal;
            font-size: 16px;

        }
        
        /* we're using the direct descendant selectors > to ONLY affect the main menu items */
        .mainbutton1 > ul > li {
        /* positioning */ 
            position: relative;
            float: left;
        /* styling: */
            /*margin-right: 10px;*/
			/*text-align: center;*/
			
        }
        .mainbutton1 > ul > li > a {
        /* positioning */ 
            display:block;
        /* styling: */
            /* background-color: #2c2c2c;  grey */
			background-color: #2dcae5;
            padding:8px 10px;
            text-decoration:none;
            /*color:#aaaaaa; */
			color: #ffffff;
			
border-radius: 2px;
    box-shadow: 0 .5px 1px rgba(0,0,0,0.3);
	width: 190px;
            
        }
        .mainbutton1 > ul > li > a:hover{
        /* styling: */
            /*background-color:#666666;  grey */
			/*background-color: #2c2c2c;*/
			background-color: #545454;
           /* color:#eeeeee;  light grey */
		   color: #2DCAE5;
        }

/***level2***/		
.mainbutton1 ul ul{
            font-size: 13px;
           /* background-color:#e6056f; /* remove. this is for illustration purposes only */
           /* width:340px; /* you need a width to accommodate tertiary menus */
            
            position:absolute;
            z-index:100;
            
            height: 0;
            overflow: hidden;
			
			-webkit-transition: height 0.3s ease-in;
            -moz-transition: height 0.3s ease-in;
            -o-transition: height 0.3s ease-in;
            -ms-transition: height 0.3s ease-in;
            transition: height 0.3s ease-in;

        }

        /* don't display tertiary box yet */
        .mainbutton1 > ul > li:hover ul ul, .mainbutton1 > ul > li > a:hover ul ul{
            height:0;
            
        }
        /* tertiary drop-down box */
        .mainbutton1 ul ul ul{
            /*left:170px;*/
            width:190px;
			color: #2DCAE5;

        }
        
        .mainbutton1 > ul > li:hover ul, .mainbutton1 > ul > li > a:hover ul,
        .mainbutton1 ul ul li:hover > ul, .mainbutton1 ul ul li a:hover > ul{
            height:170px;  /*need a height to accommodate any tertiary menus */
        }
        
        /* drop-down item styles */
        /* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".mainbutton ul ul li", becomes: ".mainbutton ul ul ul li" */
 
 
 /*** first ***/       
        .mainbutton1 ul ul li{
            /*background-color:#eaeaea;  grey */
			background-color: #ffffff;
			border-radius: 0px 0px 0px 0px;
			border-right: 1px solid #e6e6e6;
			border-left: 1px solid #e6e6e6;
    /*box-shadow: 0 .5px 1px rgba(0,0,0,0.3);*/
            
			width:190px;
			padding: 5px 0px 7px;/**/
			
			-webkit-transition: background-color 0.3s ease;
            -moz-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            -ms-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
        }
        
        .mainbutton1 ul ul li:hover {
            /*background-color:#999;  grey */
			background-color: #fafafa;
			color: #2DCAE5;
        }
        
        .mainbutton1 ul ul li a {
            display:block;
            text-decoration:none;
            /**/margin:0 12px;
            padding:5px 0;
            color:#4c4c4c; /* grey */
        }
        .mainbutton1 ul ul li a:hover, .mainbutton1 ul ul li:hover > a {
            /*color:#ffffff;  white */
			color: #2DCAE5;
        }
		
/*** last ***/
		.mainbutton1 ul ul li.last{
            /*background-color:#eaeaea;  grey */
			background-color: #ffffff;
			border-radius: 0px 0px 2px 2px;
    box-shadow: 0 .5px 1px rgba(0,0,0,0.3);
            width:190px;
			/*width:210px;*/
			padding: 5px 0px 7px;/**/
			
			-webkit-transition: background-color 0.3s ease;
            -moz-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            -ms-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
        }
		
		.mainbutton1 ul ul  li.last:hover {
            /*background-color:#999;  grey */
			background-color: #fafafa;
			color: #2DCAE5;
			
        }
        
        .mainbutton1 ul ul  li.last a {
            display:block;
            text-decoration:none;
            /**/margin:0 12px;
            padding:5px 0;
            color:#4c4c4c; /* grey */
        }
        .mainbutton1 ul ul  li.last a:hover, .mainbutton1 ul ul li:hover > a {
            /*color:#ffffff;  white */
			color: #2DCAE5;
        }
	
	
	/* unfortunate ie7 gap fix */
        .ie7 .mainbutton1 ul ul li{
            margin-bottom:-3px;
        }
		
		/* .arrow{background:url(arrow.png) right center no-repeat;} */
		
		
/***==================button 2=============**/
.mainbutton2  {
            width:auto;
			letter-spacing: normal;
			font-weight: 300;
			position:fixed;
			right: 20px;
			top: 80px;
        }
/***level1***/
.mainbutton2 ul{
        /* positioning */
        	position:relative;
            z-index:1000;
        /* remove the dots next to list items: */
            list-style:none; 
        /* get rid of any default or inherited margins and padding: */
            margin:0; 
            padding:0; 
            
        /* styling: */
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-weight: normal;
            font-size: 16px;

        }
        
        /* we're using the direct descendant selectors > to ONLY affect the main menu items */
        .mainbutton2 > ul > li {
        /* positioning */ 
            position: relative;
            float: left;
        /* styling: */
            /*margin-right: 10px;*/
			/*text-align: center;*/
			
        }
        .mainbutton2 > ul > li > a {
        /* positioning */ 
            display:block;
        /* styling: */
            /* background-color: #2c2c2c;  grey */
			background-color: #2dcae5;
            padding:8px 10px;
            text-decoration:none;
            /*color:#aaaaaa; */
			color: #ffffff;
			
border-radius: 2px;
    box-shadow: 0 .5px 1px rgba(0,0,0,0.3);
	width: 190px;
            
        }
        .mainbutton2 > ul > li > a:hover{
        /* styling: */
            /*background-color:#666666;  grey */
			/*background-color: #2c2c2c;*/
			background-color: #545454;
           /* color:#eeeeee;  light grey */
		   color: #2DCAE5;
        }

/***level2***/		
.mainbutton2 ul ul{
            font-size: 13px;
           /* background-color:#e6056f; /* remove. this is for illustration purposes only */
           /* width:340px; /* you need a width to accommodate tertiary menus */
            
            position:absolute;
            z-index:100;
            
            height: 0;
            overflow: hidden;
			
			-webkit-transition: height 0.3s ease-in;
            -moz-transition: height 0.3s ease-in;
            -o-transition: height 0.3s ease-in;
            -ms-transition: height 0.3s ease-in;
            transition: height 0.3s ease-in;

        }

        /* don't display tertiary box yet */
        .mainbutton2 > ul > li:hover ul ul, .mainbutton2 > ul > li > a:hover ul ul{
            height:0;
            
        }
        /* tertiary drop-down box */
        .mainbutton2 ul ul ul{
            /*left:170px;*/
            width:190px;
			color: #2DCAE5;

        }
        
        .mainbutton2 > ul > li:hover ul, .mainbutton2 > ul > li > a:hover ul,
        .mainbutton2 ul ul li:hover > ul, .mainbutton2 ul ul li a:hover > ul{
            height:170px;  /*need a height to accommodate any tertiary menus */
        }
        
        /* drop-down item styles */
        /* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".mainbutton ul ul li", becomes: ".mainbutton ul ul ul li" */
 
 
 /*** first ***/       
        .mainbutton2 ul ul li{
            /*background-color:#eaeaea;  grey */
			background-color: #ffffff;
			border-radius: 0px 0px 0px 0px;
			border-right: 1px solid #e6e6e6;
			border-left: 1px solid #e6e6e6;
    /*box-shadow: 0 .5px 1px rgba(0,0,0,0.3);*/
            
			width:190px;
			padding: 5px 0px 7px;/**/
			
			-webkit-transition: background-color 0.3s ease;
            -moz-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            -ms-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
        }
        
        .mainbutton2 ul ul li:hover {
            /*background-color:#999;  grey */
			background-color: #fafafa;
			color: #2DCAE5;
        }
        
        .mainbutton2 ul ul li a {
            display:block;
            text-decoration:none;
            /**/margin:0 12px;
            padding:5px 0;
            color:#4c4c4c; /* grey */
        }
        .mainbutton2 ul ul li a:hover, .mainbutton2 ul ul li:hover > a {
            /*color:#ffffff;  white */
			color: #2DCAE5;
        }
		
/*** last ***/
		.mainbutton2 ul ul li.last{
            /*background-color:#eaeaea;  grey */
			background-color: #ffffff;
			border-radius: 0px 0px 2px 2px;
    box-shadow: 0 .5px 1px rgba(0,0,0,0.3);
            width:190px;
			/*width:210px;*/
			padding: 5px 0px 7px;/**/
			
			-webkit-transition: background-color 0.3s ease;
            -moz-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            -ms-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
        }
		
		.mainbutton2 ul ul  li.last:hover {
            /*background-color:#999;  grey */
			background-color: #fafafa;
			color: #2DCAE5;
			
        }
        
        .mainbutton2 ul ul  li.last a {
            display:block;
            text-decoration:none;
            /**/margin:0 12px;
            padding:5px 0;
            color:#4c4c4c; /* grey */
        }
        .mainbutton2 ul ul  li.last a:hover, .mainbutton2 ul ul li:hover > a {
            /*color:#ffffff;  white */
			color: #2DCAE5;
        }
	
	
	/* unfortunate ie7 gap fix */
        .ie7 .mainbutton2 ul ul li{
            margin-bottom:-3px;
        }
		
		/* .arrow{background:url(arrow.png) right center no-repeat;} */
		
/*=============button 3==================*/
.mainbutton3  {
            width:auto;
			letter-spacing: normal;
			font-weight: 300;
			position:fixed;
			right: 20px;
			top: 80px;
        }
/***level1***/
.mainbutton3 ul{
        /* positioning */
        	position:relative;
            z-index:1000;
        /* remove the dots next to list items: */
            list-style:none; 
        /* get rid of any default or inherited margins and padding: */
            margin:0; 
            padding:0; 
            
        /* styling: */
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-weight: normal;
            font-size: 16px;

        }
        
        /* we're using the direct descendant selectors > to ONLY affect the main menu items */
        .mainbutton3 > ul > li {
        /* positioning */ 
            position: relative;
            float: left;
        /* styling: */
            /*margin-right: 10px;*/
			/*text-align: center;*/
			
        }
        .mainbutton3 > ul > li > a {
        /* positioning */ 
            display:block;
        /* styling: */
            /* background-color: #2c2c2c;  grey */
			background-color: #2dcae5;
            padding:8px 10px;
            text-decoration:none;
            /*color:#aaaaaa; */
			color: #ffffff;
			
border-radius: 2px;
    box-shadow: 0 .5px 1px rgba(0,0,0,0.3);
	width: 190px;
            
        }
        .mainbutton3 > ul > li > a:hover{
        /* styling: */
            /*background-color:#666666;  grey */
			/*background-color: #2c2c2c;*/
			background-color: #545454;
           /* color:#eeeeee;  light grey */
		   color: #2DCAE5;
        }

/***level2***/		
.mainbutton3 ul ul{
            font-size: 13px;
           /* background-color:#e6056f; /* remove. this is for illustration purposes only */
           /* width:340px; /* you need a width to accommodate tertiary menus */
            
            position:absolute;
            z-index:100;
            
            height: 0;
            overflow: hidden;
			
			-webkit-transition: height 0.3s ease-in;
            -moz-transition: height 0.3s ease-in;
            -o-transition: height 0.3s ease-in;
            -ms-transition: height 0.3s ease-in;
            transition: height 0.3s ease-in;

        }

        /* don't display tertiary box yet */
        .mainbutton3 > ul > li:hover ul ul, .mainbutton3 > ul > li > a:hover ul ul{
            height:0;
            
        }
        /* tertiary drop-down box */
        .mainbutton3 ul ul ul{
            /*left:170px;*/
            width:190px;
			color: #2DCAE5;

        }
        
        .mainbutton3 > ul > li:hover ul, .mainbutton3 > ul > li > a:hover ul,
        .mainbutton3 ul ul li:hover > ul, .mainbutton3 ul ul li a:hover > ul{
            height:170px;  /*need a height to accommodate any tertiary menus */
        }
        
        /* drop-down item styles */
        /* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".mainbutton ul ul li", becomes: ".mainbutton ul ul ul li" */
 
 
 /*** first ***/       
        .mainbutton3 ul ul li{
            /*background-color:#eaeaea;  grey */
			background-color: #ffffff;
			border-radius: 0px 0px 0px 0px;
			border-right: 1px solid #e6e6e6;
			border-left: 1px solid #e6e6e6;
    /*box-shadow: 0 .5px 1px rgba(0,0,0,0.3);*/
            
			width:190px;
			padding: 5px 0px 7px;/**/
			
			-webkit-transition: background-color 0.3s ease;
            -moz-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            -ms-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
        }
        
        .mainbutton3 ul ul li:hover {
            /*background-color:#999;  grey */
			background-color: #fafafa;
			color: #2DCAE5;
        }
        
        .mainbutton3 ul ul li a {
            display:block;
            text-decoration:none;
            /**/margin:0 12px;
            padding:5px 0;
            color:#4c4c4c; /* grey */
        }
        .mainbutton3 ul ul li a:hover, .mainbutton3 ul ul li:hover > a {
            /*color:#ffffff;  white */
			color: #2DCAE5;
        }
		
/*** last ***/
		.mainbutton3 ul ul li.last{
            /*background-color:#eaeaea;  grey */
			background-color: #ffffff;
			border-radius: 0px 0px 2px 2px;
    box-shadow: 0 .5px 1px rgba(0,0,0,0.3);
            width:190px;
			/*width:210px;*/
			padding: 5px 0px 7px;/**/
			
			-webkit-transition: background-color 0.3s ease;
            -moz-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            -ms-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
        }
		
		.mainbutton3 ul ul  li.last:hover {
            /*background-color:#999;  grey */
			background-color: #fafafa;
			color: #2DCAE5;
			
        }
        
        .mainbutton3 ul ul  li.last a {
            display:block;
            text-decoration:none;
            /**/margin:0 12px;
            padding:5px 0;
            color:#4c4c4c; /* grey */
        }
        .mainbutton3 ul ul  li.last a:hover, .mainbutton3 ul ul li:hover > a {
            /*color:#ffffff;  white */
			color: #2DCAE5;
        }
	
	
	/* unfortunate ie7 gap fix */
        .ie7 .mainbutton3 ul ul li{
            margin-bottom:-3px;
        }
		
		/* .arrow{background:url(arrow.png) right center no-repeat;} */