html, body { position:relative; overflow-x:hidden; height:100%; width:100%; padding:0; margin:0; font-family:Helvetica, sans-serif; min-width:640px; }
body {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none; 
       -moz-user-select: none;
        -ms-user-select: none; 
            user-select: none; 
}
.save-status { 
  -webkit-touch-callout: all;
    -webkit-user-select: all;
     -khtml-user-select: all; 
       -moz-user-select: all;
        -ms-user-select: all; 
            user-select: all;  }
textarea, select, input, button { outline: none; }
h1 { margin:0 0 25px 0; color:#000; font-size:20px;}
h2 { margin:0 0 10px; font-size:16px; }
a { font-family:Helvetica, sans-serif; text-decoration:none; }
p { font-size:16px; max-width:600px; letter-spacing:1px; }
ul { list-style-type:none; margin:0; padding:0; }
li { line-height:30px; margin:0; padding:0; }
[title] { cursor:pointer; }
input, select { line-height:30px; border:1px solid #999; height:30px; border-radius:5px; font-size:16px; padding:0 10px; text-align:center; }
#fp-menu-donate input { border:0; height:auto; }
input.xs { width:30px; }
input.sm { width:50px; }

button.jscolor, .colors button { width:100%; }
[data-action] { color:#4a5984; cursor:pointer; }
[data-action]:hover { color:#3c3d6a; }
.button, [data-action].button { cursor:pointer; display:inline-block; padding:0 30px; line-height:30px; background:#3c3d6a; color:#fff; font-size:20px; border-radius:10px; }
.button:hover, [data-action].button:hover { background:#4a5984; }
.group:before, .group:after { content:""; display:table; } 
.group:after { clear:both; }
.group { zoom:1; }
.group.advanced { display:none; }
.expanding { font-size:11px; cursor:pointer; margin-bottom:15px; display:block; }
.expanding .indicator { display:inline-block; width:10px; text-align:center; }

.popup { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, .3); z-index:999; display:none; }
.popup-modal { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; border-radius:6px; box-shadow:0 0 12px 0px rgba(0, 0, 0, .6); padding:30px 36px 30px 30px; width:90%; max-width:480px; }
.popup-content main { max-height:300px; padding-right:30px; overflow-y:auto; }
.popup-close { width:32px; height:32px; display:block; position:absolute; top:25px; right:30px; cursor:pointer; background:url(../images/x.svg) 0 0 no-repeat; background-size:contain; }
.popup h1 { font-size:24px; font-weight:bold; line-height:24px; margin-bottom:30px; }
.popup h2 { font-size:20px; font-weight:bold; line-height:20px; margin-bottom:15px; }
.popup ul { list-style:outside disc; margin-bottom:30px; }
.popup li { margin-left:20px; font-size:17px; line-height:20px; margin-bottom:15px; }
.popup small { font-size:13px; }


#logo { display:inline-block;  color:#f7ecc7; letter-spacing:2px; line-height:50px; font-family:Impact, sans-serif; font-size:36px;}
#logo small { font-size:16px; }
.hamburger { float:right; border-left:1px solid #f7ecc7; padding:0 10px 0 20px; line-height:40px; padding-top:10px; }
.hamburger-inner, 
.hamburger-inner:after, 
.hamburger-inner:before,
.hamburger.is-active .hamburger-inner, 
.hamburger.is-active .hamburger-inner:after, 
.hamburger.is-active .hamburger-inner:before 
{ background-color:#f7ecc7; }

#fp-interface { box-shadow:0 0 20px rgba(0,0,0,.6); color:#3f3f3f; background:#fafcff; z-index:100; position:absolute; top:0; left:0; width:100%; min-width:640px; }
#fp-interface .left, #fp-interface .right { float:left; width:50%; max-width:220px; }
#fp-interface .menu-panel { display:none; }
#fp-interface .form-group { display:block; margin-bottom:30px; }
#fp-interface #fp-menu-settings .colors button { height:30px; line-height:30px; font-size:18px; display:block; border:none; margin-bottom:15px; }
#fp-menu-toggle { 
  height: 50px;
background: #424751; 
background: -moz-linear-gradient(top, #424751 0%, #515864 100%); 
background: -webkit-linear-gradient(top, #424751 0%,#515864 100%); 
background: linear-gradient(to bottom, #424751 0%,#515864 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424751', endColorstr='#515864',GradientType=0 );
padding:10px; }
#fp-menu-main li { padding:0 20px; cursor:pointer; line-height:44px; font-size:22px; color:#3f3f3f; text-decoration:none; }
#fp-menu-main li:hover { background:rgba(0,0,0,.2); }

.menu-panel header { background:#eef4ff; padding:15px; }
.menu-panel main { padding:15px; }
#fp-interface .back { font-size:18px; color:#4a5984; cursor:pointer; font-weight:bold; }
#fp-interface .back:hover { color:#3c3d6a; }

#fp-container { position:relative; min-width:300px; width:100%; }
#fp-whip { display:none; box-sizing:border-box; position:relative; border-top:100px solid transparent; border-bottom:50px solid transparent; margin:0 auto; }

#fp-whip .left { position:absolute; left:-2px; top:0; }
#fp-whip .right { position:absolute; right:-2px; top:0; }
#fp-whip .row { position:absolute; border-left:2px solid black; border-top:2px solid black; }

#fp-whip .tile { display:block; -webkit-print-color-adjust:exact; background:#000; box-sizing:border-box; position:relative; }
#fp-whip .left .row { transform:rotate(45deg); transform-origin:bottom left; left:0; }
#fp-whip .left .row .tile { float:left; }
#fp-whip .right .row { transform:rotate(-45deg); transform-origin:bottom right; right:0; }
#fp-whip .right .row .tile { float:right; }
#fp-whip .sequence { display:none; white-space:nowrap; font-size:14px; box-sizing:border-box; z-index:-1; min-width: 150px; position:absolute; padding:0 10px; bottom:0; border-bottom:2px solid #000; font-weight:bold; }
#fp-whip .left .sequence { right:100%; text-align:right; transform:rotate(-45deg); transform-origin:bottom right;  }
#fp-whip .right .sequence { left:100%; transform:rotate(45deg); transform-origin:bottom left; }

#fp-whip .panel { position:absolute; top:0; left:0; width:calc(100% - 2px); height:calc(100% - 2px); cursor:pointer; }
#fp-whip .panel span { display:none; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:#fff; font-size:.8em; }
#fp-whip .row:hover .panel span { display:block !important; }
#fp-whip .tile .panel { -webkit-print-color-adjust: exact; opacity:1; transition:opacity ease-in-out 150ms; z-index:5; }
#fp-whip .tile.over .panel.under { opacity:0; transition:opacity ease-in-out 150ms;  }
#fp-whip .tile.over:hover .panel.under { opacity:.8; z-index:10; }
#fp-whip .tile.over:hover .panel.under span { display:none; }
#fp-whip .tile.under .panel.under { opacity:1; transition:opacity ease-in-out 150ms; }
#fp-whip .tile.under .panel.over { opacity:0; transition:opacity ease-in-out 150ms; }
#fp-whip .tile.under:hover .panel.over { opacity:.8; z-index:10; }
#fp-whip .tile.under:hover .panel.over span { display:none; }
#fp-whip .row.active .panel span { display:block; }
#fp-whip .row.active .sequence { background:rgba(255, 228, 0, .3); }

#fp-whip.many .row:hover .panel span { display:none; }
.plaiting #fp-whip.many .row:hover .panel span { display:block; }

#step { margin-bottom:15px; font-weight:bold; font-size:16px;  }

#fp-controller { position:absolute; top:300px; left:50px; display:none; }

#fp-whip { width:80%; max-width:800px; }
#fp-whip.x8 { max-width:140px; }
#fp-whip.x12 { max-width:180px; }
#fp-whip.x16 { max-width:240px; }
#fp-whip.x32 { max-width:480px; }
#fp-whip.x64 { max-width:960px; }
#fp-whip.x128 { max-width:1200px; }
.plaiting #fp-whip { border-top:200px solid transparent;  }
#fp-whip.print, #fp-whip.print.many { max-width:400px; width:400px; }
#fp-whip.print .sequence { min-width:400px; }
#fp-whip.many .sequence { font-size:10px; }

.disabled { opacity:.3; }
@media screen and (max-width:768px) {
  #fp-whip .row:hover .panel span { display:none; }
}
@media screen and (min-width:768px) {

	.plaiting #fp-whip .sequence { display:block; }
}

@media print {
	body, html { overflow-x:visible;  }
	#fp-interface { display:none !important; }
	#fp-whip .sequence { display:block; }
	.plaiting #fp-whip, #fp-whip { border-top:20px solid transparent; }
	#fp-whip .row { box-shadow:none; }
}