.buttons-container{margin:100px auto;text-align:center;}

/*.transformicon {display:inline-block;margin:0 1em;border:none;background:transparent;outline: 0;}
.transformicon span{display:block !important;}*/

/* button background colors to be updated per site preference (default is transparent) */
button.bg-color1 {background-color: #1F2F4A;}
button.border1 {border:0.4rem solid #1F2F4A;}
button.bg-color2 {background-color: #000;}
button.bg-color3 {background-color: #00F;}

/********************************************************************************************/
.grid-button{padding:2rem;cursor:pointer;user-select:none;}
.grid-button .grid{width:1rem;height:1rem;background:#FFF;color:#FFF;transition:0.3s;}
.grid-button.open .grid{-webkit-transform:rotate3d(0,0,1,-45deg)/* scale3d(0.8,0.8,0.8)*/;transform:rotate3d(0,0,1,-45deg)/* scale3d(0.8,0.8,0.8)*/;}
.grid-button.rearrange .grid{box-shadow:-1.25rem -1.25rem,0 -1.25rem,1.25rem -1.25rem,-1.25rem 0,1.25rem 0,-1.25rem 1.25rem,0 1.25rem,1.25rem 1.25rem;}
.grid-button.rearrange.open .grid{box-shadow:0 -1rem,0 -2rem,1rem 0,-2rem 0,2rem 0,-1rem 0,0 2rem,0 1rem;}
.grid-button.collapse .grid{box-shadow:-1.25rem 0,-1.25rem 1.25rem,1.25rem 0,1.25rem -1.25rem,0 -1.25rem,-1.25rem -1.25rem,0 1.25rem,1.25rem 1.25rem;}
.grid-button.collapse.open .grid{box-shadow:-1rem 0,0 0 transparent,1rem 0,0 0 transparent,0 -1rem,0 0 transparent,0 1rem,0 0 transparent;}
/********************************************************************************************/

.lines-button{padding:1rem 0.5rem;transition:.3s;cursor:pointer;user-select:none;border-radius:0.2rem;}
.lines-button:hover{opacity:1;}
.lines-button:active{transition:0.5s;}

.lines{display:inline-block;width:2rem;height:0.2rem;background:#FFF;border-radius:0.1rem;transition:0.3s;position:relative;}
.lines:before,.lines:after{display:inline-block;width:2rem;height:0.2rem;background:#FFF;border-radius:0.1rem;transition:0.3s;position:absolute;left:0;content:'';-webkit-transform-origin:0.1rem center;transform-origin:0.1rem center;}
.lines:before{top:0.5rem;}
.lines:after{top:-0.5rem;}

/* line background colors to be updated per site preference (default is white [hex: #FFF]) */
.lines.bg-color1,.lines.bg-color1:before,.lines.bg-color1:after {background-color: #F00;}
.lines.bg-color2,.lines.bg-color2:before,.lines.bg-color2:after {background-color: #000;}
.lines.bg-color3,.lines.bg-color3:before,.lines.bg-color3:after {background-color: #00F;}

.lines-button:hover .lines:before{top:0.6rem;}
.lines-button:hover .lines:after{top:-0.6rem;}
.lines-button.open{/*-webkit-transform:scale3d(0.8,0.8,0.8);transform:scale3d(0.8,0.8,0.8)*/;}
.lines-button.arrow.open .lines:before,.lines-button.arrow.open .lines:after{left: -0.1rem; width:1rem;}
.lines-button.arrow.open .lines:before{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg); top: 0;}
.lines-button.arrow.open .lines:after{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg); top: 0;}
.lines-button.arrow-up.open{-webkit-transform:/*scale3d(0.8,0.8,0.8) */rotate3d(0,0,1,90deg);transform:/*scale3d(0.8,0.8,0.8) */rotate3d(0,0,1,90deg);}
.lines-button.minus.open .lines:before,.lines-button.minus.open .lines:after{-webkit-transform:none;transform:none;top:0;width:2rem;}
.lines-button.x.open .lines{background:transparent;}
.lines-button.x.open .lines:before,.lines-button.x.open .lines:after{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;top:0;width:2rem;}
.lines-button.x.open .lines:before{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);}
.lines-button.x.open .lines:after{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);}
.lines-button.x2 .lines{transition:background 0.3s 0.5s ease;}
.lines-button.x2 .lines:before,.lines-button.x2 .lines:after{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transition:top 0.3s 0.6s ease,-webkit-transform 0.3s ease;transition:top 0.3s 0.6s ease,transform 0.3s ease;}
.lines-button.x2.open .lines{transition:background 0.3s 0s ease;background:transparent;}
.lines-button.x2.open .lines:before,.lines-button.x2.open .lines:after{transition:top 0.3s ease,-webkit-transform 0.3s 0.5s ease;transition:top 0.3s ease,transform 0.3s 0.5s ease;top:0;width:2rem;}
.lines-button.x2.open .lines:before{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);}
.lines-button.x2.open .lines:after{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);}

/*****************************/
.lines-button.arrow-right .lines:before,.lines-button.arrow-right .lines:after{-webkit-transform-origin:1.9rem center;transform-origin:1.9rem center;}
.lines-button.arrow-right.open .lines:before,.lines-button.arrow-right.open .lines:after{left:0.80710678118654752440084436210485rem;} /* added half height to calculated top coordinate */
.lines-button.arrow-right.open .lines:before{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);top:-0.70710678118654752440084436210485rem;} /* for 45 deg; top = sqrt(hypotenuse^2/2)*/
.lines-button.arrow-right.open .lines:after{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);top:0.70710678118654752440084436210485rem;}

/*****************************/
.cross-toggle{padding:1rem 0.5rem;transition:0.5s;cursor:pointer;user-select:none;border-radius:0.2rem;}
.cross-toggle:hover{opacity:1;}
.cross-toggle:active{transition:0.5s;}

/* Chevron UP to X */
.cross-toggle .display_up{display:inline-block;width:2rem;height:0.2rem;position:relative; background: transparent !important;}
.cross-toggle .display_up:before,.cross-toggle .display_up:after{display:inline-block;width:1.4142135623730950488016887242097rem;height:0.2rem;background:#FFF;border-radius:0.1rem;transition:0.5s;position:absolute;content:'';-webkit-transform-origin:0 center;transform-origin:0 center;}
.cross-toggle .display_up:before{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);top: 0.5rem; left: 0.06666666666666666666666666666667rem;} /* top = -half of invisible bar width; left = 1/3 of height */
.cross-toggle .display_up:after{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);top: -0.5rem; left: 0.9333333333333333333333333333333rem;} /* top = half of invisible bar width; left = half of length - 1/3 of height */

/* line background colors to be updated per site preference (default is white [hex: #FFF]) */
.display_up.bg-color1,.display_up.bg-color1:before,.display_up.bg-color1:after {background-color: #CB333B;}
.display_up.bg-color2,.display_up.bg-color2:before,.display_up.bg-color2:after {background-color: #EEE;}
.display_up.bg-color3,.display_up.bg-color3:before,.display_up.bg-color3:after {background-color: #00F;}

.cross-toggle.open{/*-webkit-transform:scale3d(0.8,0.8,0.8);transform:scale3d(0.8,0.8,0.8);*/}
.cross-toggle.open .display_up:before,.cross-toggle.open .display_up:after{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;top:0;left: 0;width:2rem;}
.cross-toggle.rotate.open .display_up:before{transform:rotate3d(0,0,1,135deg);}
.cross-toggle.rotate.open .display_up:after{transform:rotate3d(0,0,1,-135deg);}

/* Chevron DOWN to X */
.cross-toggle .display_down{display:inline-block;width:2rem;height:0.2rem;position:relative; background: transparent !important;}
.cross-toggle .display_down:before,.cross-toggle .display_down:after{display:inline-block;width:1.4142135623730950488016887242097rem;height:0.2rem;background:#FFF;border-radius:0.1rem;transition:0.5s;position:absolute;content:'';-webkit-transform-origin:0 center;transform-origin:0 center;}
.cross-toggle .display_down:before{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);top: -0.5rem; left: 0.06666666666666666666666666666667rem;} /* top = -half of invisible bar width; left = 1/3 of height */
.cross-toggle .display_down:after{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);top: 0.5rem; left: 0.9333333333333333333333333333333rem;} /* top = half of invisible bar width; left = half of length - 1/3 of height */

/* line background colors to be updated per site preference (default is white [hex: #FFF]) */
.display_down.bg-color1,.display_down.bg-color1:before,.display_down.bg-color1:after {background-color: #CB333B;}
.display_down.bg-color2,.display_down.bg-color2:before,.display_down.bg-color2:after {background-color: #EEE;}
.display_down.bg-color3,.display_down.bg-color3:before,.display_down.bg-color3:after {background-color: #00F;}

.cross-toggle.open{/*-webkit-transform:scale3d(0.8,0.8,0.8);transform:scale3d(0.8,0.8,0.8);*/}
.cross-toggle.open .display_down:before,.cross-toggle.open .display_down:after{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;top:0;left: 0;width:2rem;}
.cross-toggle.rotate.open .display_down:before{transform:rotate3d(0,0,1,135deg);}
.cross-toggle.rotate.open .display_down:after{transform:rotate3d(0,0,1,-135deg);}