@charset "utf-8";
/* CSS Document */

main aside.top,
main aside.top div.triggerRight  				{ 	-webkit-transition: all 333ms ease-in-out;
													-moz-transition: all 333ms ease-in-out;
													-ms-transition: all 333ms ease-in-out;
													-o-transition: all 333ms ease-in-out;
													transition: all 333ms ease-in-out;}
													
main aside.top  								{ width:420px; margin:0px; padding:90px 24px 0px 24px; position:fixed; right:-420px; 
												  top:0px; font-size:87%; padding-bottom:32px; z-index:9999; height:100vh; }
												  
main aside.top.open  							{ right:0px; }

main aside.top div.triggerRight 				{ display:block; position:absolute; left:-80px; top:39px; width:45px; height:45px; 
												  -webkit-border-radius: 50%; border-radius:50%;
												  background-image:url(pic/mail.svg); background-position:center; background-size:60%; 
												  background-repeat:no-repeat; background-color:#66a317; cursor:pointer; opacity:1;
												  border:#fff 2px solid;  }
												  	
main aside.top.open div.triggerRight			{ background-image:url(pic/mail-b.svg); background-color:#ffffff; left:356px; top:24px; opacity:0.75; border:#66a317 2px solid; }	
								  
main aside.top div.triggerRight:hover 			{ opacity:1;   } 	


@media only screen and (max-width : 960px)  { 
main aside.top div.triggerRight { height:45px; width:45px; left: -60px; top: 82px;}
}	



@media
only screen and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2),

only screen and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1), 

only screen and (max-width : 765px)  { 

main aside.top { display:none !important; visibility:hidden !important; opacity:0 !important; z-index:1 !important; }

}