/* [Table of contents] ## Site Loader */ /* - Theme Switcher */ .color-switcher { width: 230px; position: fixed; left: 0; top: 180px; z-index: 1001; padding: 0px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .color-switcher h5 { font-size: 15px; margin-top: 0; padding: 0 20px 0; } .color-switcher p { background-color: #fff ; color: #000; font-size: 12px; font-style: italic; font-weight: 500; line-height: 26px; margin-bottom: 0; margin-left: 10px; margin-top: 5px; text-align: center; text-transform: uppercase; } .color-switcher ul { display: inline-block; list-style: none; margin-bottom: 5px; margin-top: 5px; padding: 0; width: 100%; } .color-switcher ul li { float: left; } .color-switcher-block li a img { border: 2px solid transparent; } .color-switcher-block li.active a img { border-color: #000; } .color-switcher ul li a { display: block; width: 35px; height: 35px; outline: none; text-align: center; line-height: 35px; font-size: 14px; color: #333; } .picker_close { width: 48px; height: 48px; position: absolute; left: 0; top: 0px; text-align: center; background: #fff; line-height: 53px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); color: #000; } .picker_close i { font-size: 22px; } .position { -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .style-picker { left: 0px; position: relative; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; } .position .style-picker { display: table; left: 50px; } .style-picker, .layouts, .backgrounds, .choose-header, .choose-footer { display: none; text-align: left; width: 100%; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .style-picker h3 { border-bottom: 1px solid #000; color: #000; font-size: 14px; font-weight: bold; letter-spacing: 0.5px; line-height: 26px; margin: 12px 0 0; padding-bottom: 10px; padding-left: 10px; text-align: center; text-transform: uppercase; } .layouts a, .choose-header a, .choose-footer a { display: inline-block; text-align: center; width: 40%; margin: 0 5px 0 0; color: #5d5d5d; font-size: 15px; border: 1px solid #e7e7e7; padding: 5px 7px 2px; } .layouts a:hover, .choose-header a:hover, .choose-footer a:hover { border: 2px solid #a9a9a9; padding: 4px 5px 1px; } .styleswitcher { position: fixed; width: 120px; background: #ffffff; color: #595959; top: 150px; right: -123px; z-index: 999; } .styleswitcher p { color: #000 !important; } .styleswitcher.ackapa { left: 0; } .styleswitcher .switch { padding-left: 15px; padding-bottom: 10px; } .styleswitcher .switch h5 { margin-top: 20px; } .styleswitcher .switch p { margin-top: 10px; } .stylebutton { cursor: pointer; position: absolute; text-align: center; line-height: 40px; background: #fff; font-size: 20px; width: 40px; height: 40px; top: 0px; right: -40px; } .styleswitcher a { width: 24px; height: 24px; float: left; margin-right: 7px; margin-bottom: 10px; position: relative; z-index: 999; } .color-switcher ul li { margin: 2px; } .color-switcher-block { max-width: 195px; margin: 0 auto; } /* ## Site Loader */ .load-position .logo { margin: 0 auto; width: 150px; } .load-complete .triangle-skew-spin { margin: 0 auto; display: block; top: 50%; position: absolute; left: 0; right: 0; text-align: center; } .load-complete .triangle-skew-spin > div { display: inline-block; border-color: transparent transparent #44BBFF transparent; } .load-complete { position: fixed; background: #fff; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; z-index: 1031; } .load-complete .logo { color: #4C4C4C; text-align: center; display: block; margin-bottom: 20px; font-family: 'Roboto', sans-serif; font-size: 50px; } .load-complete .load-position h6 { text-align: center; color: #000; font-size: 12px; font-weight: 400; font-style: italic; } .load-complete .load-position { position: absolute; top: 50%; left: 0; z-index: 999; right: 0; margin-top: -100px; } .load-complete .loading { position: absolute; width: 100%; height: 1px; margin: 20px auto; left: 0; right: 0; } .load-complete .loading-line { position: absolute; background: #eee; width: 100%; height: 2px; } .load-complete .loading-break { position: absolute; background: #059664; width: 15px; height: 2px; } .load-complete .loading-dot-1 { -webkit-animation: loading 2s infinite; -moz-animation: loading 2s infinite; -ms-animation: loading 2s infinite; -o-animation: loading 2s infinite; animation: loading 2s infinite; } .load-complete .loading-dot-2 { -webkit-animation: loading 2s 0.5s infinite; -moz-animation: loading 2s 0.5s infinite; -ms-animation: loading 2s 0.5s infinite; -o-animation: loading 2s 0.5s infinite; animation: loading 2s 0.5s infinite; } .load-complete .loading-dot-3 { -webkit-animation: loading 2s 1s infinite; -moz-animation: loading 2s 1s infinite; -ms-animation: loading 2s 1s infinite; -o-animation: loading 2s 1s infinite; animation: loading 2s 1s infinite; } @keyframes "loading" { from { left: 0; } to { left: 100%; } } @-moz-keyframes loading { from { left: 0; } to { left: 100%; } } @-webkit-keyframes "loading" { from { left: 0; } to { left: 100%; } } @-ms-keyframes "loading" { from { left: 0; } to { left: 100%; } } @-o-keyframes "loading" { from { left: 0; } to { left: 100%; } }