﻿/* structure */
body {margin:0; padding:0; font-family:'Roboto', Arial; font-size:16px; line-height:1;  }
*{box-sizing:border-box}
img{border:none; vertical-align:bottom; max-width:100%}
a{text-decoration:none; outline:none}

::-webkit-scrollbar {
    width: 8px;
}
 
::-webkit-scrollbar-track {
    background:rgba(182,182,182,.5);
    border-radius: 10px
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background:#b6b6b6
}
::-webkit-scrollbar-button       { /* 2 */ }

/* =========================================
System Tooltip 

    NW = Top Left
    NN = Top
    NE = Top Right
    WW = Left
    EE = Right
    SW = Bottom Left
    SS = Bottom
    SE = Bottom Right
========================================= */
.sys-tt{position:relative}
.sys-tt:not(.disabled):hover:after{content:attr(data-tooltip); text-transform:uppercase; position:absolute;z-index:15; padding:4px 8px; /*background:#138DCC;*/ background:#707070; color:#fff; border-radius:3px; text-align:center; white-space:nowrap; font-size:10px; font-family:Arial}
.sys-tt-sw:after,.sys-tt-ss:after,.sys-tt-se:after{top:calc(100% + 8px)}
.sys-tt-nw:after, .sys-tt-sw:after{right:50%; transform:translate(15px)}
.sys-tt-nw:after, .sys-tt-nn:after, .sys-tt-ne:after{bottom:calc(100% + 8px)}
.sys-tt-ne:after, .sys-tt-se:after{left:50%; transform:translate(-15px)}
.sys-tt-ww:after, .sys-tt-ee:after{top:50%; transform:translate(0, -50%)}
.sys-tt-ww:after{right:calc(100% + 8px)}
.sys-tt-ee:after{left:calc(100% + 8px)}
.sys-tt-nw:after, .sys-tt-sw:after{}
.sys-tt-nn:after, .sys-tt-ss:after{transform:translate(50%); right:50%}


/*/-* Preloader *-/
.loading-frame{background-color: rgba(255,255,255,0.8);/* display: none; *-/position: fixed;top:0;left:0;bottom:0;right:0;z-index: 1000;}
.loading-frame.solid-frame{background:rgba(255,255,255,0.7)}
.loading-frame#quicktour{background:rgba(0,0,0,0.7)}
.spinner{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}

/* preloader 07 *-/
@keyframes rotate07 {
	from { transform: rotate(0deg);   }
	to   { transform: rotate(360deg); }
}

.preloader07 {
	animation: rotate07 .5s linear infinite;
	background: #03a9f4;
	border-radius: 50%;
	height: 50px;
	width: 50px;
	position:absolute; top:50%; left:50%;
    margin: -50px auto 0;
}

.preloader07:before,
.preloader07:after {
	content: '';
	position: absolute;
}

.preloader07:before {
	border-radius: 50%;
	background:
		linear-gradient(0deg,   hsla(0, 0%, 100%, 1  ) 50%, hsla(0, 0%, 100%, 0.9) 100%)   0%   0%,
		linear-gradient(90deg,  hsla(0, 0%, 100%, 0.9)  0%, hsla(0, 0%, 100%, 0.6) 100%) 100%   0%,
		linear-gradient(180deg, hsla(0, 0%, 100%, 0.6)  0%, hsla(0, 0%, 100%, 0.3) 100%) 100% 100%,
		linear-gradient(360deg, hsla(0, 0%, 100%, 0.3)  0%, hsla(0, 0%, 100%, 0  ) 100%)   0% 100%
	;
	background-repeat: no-repeat;
	background-size: 50% 50%;
	top: -1px;
	bottom: -1px;
	left: -1px;
	right: -1px;
}

.preloader07:after {
	background: white;
	border-radius: 50%;
	top: 20%;
	bottom: 20%;
	left: 20%;
	right: 20%;
}*/
.loading-frame{background-color: rgba(0,0,0,.3); display: none; position: fixed; top:0; left:0; bottom:0; right:0; z-index: 1000;}
.loading-frame.solid-frame{background:rgba(0,0,0,.3)}
.loading-frame#quicktour{background:rgba(0,0,0,0.7)}
.spinner{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}

   .item-block-wrapper{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) scale(.5);}
        .item-block-wrapper, .small-orb-wrapper, .large-orb-wrapper, .larger-orb-wrapper{ height:48px; width:48px}
        .small-orb-wrapper{transform-origin:50% 50%; animation:orbit 3s infinite linear reverse; position:absolute}
        .large-orb-wrapper{transform-origin:50% 50%; animation:orbit 10s infinite linear; position:absolute}
        .larger-orb-wrapper{transform-origin:50% 50%; animation:orbit 15s infinite linear reverse; position:absolute;}
        .item-block{width:48px; height:48px; position:absolute; left:0; top:0}
        
        
        .ib-a, .ib-01, .ib-04{clip-path: polygon(0 0, 16px 0, 48px 48px, 32px 48px); animation:color1 1s infinite}
        .ib-b, .ib-02, .ib-03{clip-path: polygon(32px 0, 48px 0, 16px 48px, 0 48px )}
        
        .ib-01{background:#D8222D; animation:color1 2s infinite}
        .ib-02{background:#FF5758; animation:color2 2s infinite; }
        .ib-03{background:#1E9ADD; animation:color4 2s infinite; }
        .ib-04{background:#082B73; animation:color3 2s infinite; }
       

        .item-orb-wrapper{position:absolute; left:0; top:50%; transform:translate(-50%,-50%); transform-origin:24px}
        .item-orb, .item-orb-large, .item-orb-larger{border-radius:50%; background:#082B73;  transform:translate(-24px) ; animation:orbPulse .5s infinite}
        .item-orb{width:4px; height:4px; }
        .item-orb-large{width:8px; height:8px; position:absolute; margin-left:-16px; margin-top:10px; opacity:.8 }
        .item-orb-larger{width:12px; height:12px; position:absolute; margin-left:-40px; margin-top:10px; }
        .io-01{transform:rotate(30deg)}
        .io-02{transform:rotate(60deg)}
        .io-03{transform:rotate(90deg)}
        .io-04{transform:rotate(120deg)}
        .io-05{transform:rotate(150deg)}
        .io-06{transform:rotate(180deg)}
        .io-07{transform:rotate(210deg)}
        .io-08{transform:rotate(240deg)}
        .io-09{transform:rotate(270deg)}
        .io-10{transform:rotate(300deg)}
        .io-11{transform:rotate(330deg)}
        .io-12{transform:rotate(360deg)}


        @keyframes colorRing{ 
        
            25% {
            background-color:#D8222D
        }      
        50% {
            background-color:#FF5758
        }75% {
           background-color:#082B73
        }
         100% {
            background-color:#1E9ADD
        }
    }
    @keyframes color1{ 
        0% {
            height:0;   
        }      
        25% {
            height:48px;
        }
    }
    @keyframes color2{ 
        0% {
            height:0;   
        } 
        25% {
            height:0;   
        }      
        50% {
            height:48px;
        }
    }
    @keyframes color3{ 
        0% {
            height:48px;  z-index:-2 
        } 
        49.9% {
            height:48px;  z-index:-2
        } 
        50% {
            height:0;  z-index:2
        }      
        75% {
            height:48px;  z-index:2
        }
    }
    @keyframes color4{ 
        0% {
            height:48px;  z-index:-1        } 
        74.9% {
            height:48px;  z-index:-1   
        } 
        75% {
            height:0;  z-index:3
        }      
        100% {
            height:48px;  z-index:3
        }
    }

    @keyframes orbPulse{ 
        0% {
           transform:scale(.8) translate(-24px) ; opacity:0.5; box-shadow:none
        }
        100% {
           transform:scale(1.1) translate(-24px); opacity:1; box-shadow:none

        }
      
    }
    @keyframes orbPulseLarge{ 
        0% {
           transform:scale(1.1) translate(-24px) ; opacity:0.5
        }
        100% {
           transform:scale(1) translate(-32px); opacity:1
        }
      
    }

    @keyframes orbit{ 
        0% {
           transform:rotate(0deg)
        }
        100% {
                      transform:rotate(360deg)
        }
      
    }

/* component */
.sys-icon-btn{display:inline-block; text-align: center; padding:8px; color:#fff}
select {font-family: inherit; background-color: transparent; padding: 4px 0; border-width:0; border-bottom-width: 1px; border-bottom-style: solid; border:none; border-bottom:1px solid #b6b6b6; color:rgba(33,33,33,.5); outline:none; width:100%; font-size:16px; background-color: transparent; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height:24px; cursor:pointer}
/* Remove focus */
select:focus { outline: none; }


/* editor */
.sys-ef{font-size:16px; }
.sys-ef-20{font-size:20px; }
.sys-ef-24{font-size:24px; }
.sys-ef-32{font-size:32px; }

.editor-page-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px}

.sys-editor-header{position:fixed; left:0; right:0; top:0; z-index:200; background:#03a9f4; display:table; width:100%; font-size:14px;line-height:36px;table-layout:fixed}
.sys-editor-header, .sys-editor-header a{color:#fff; }
.sys-editor-header .sys-icon-btn{color:rgba(255,255,255,.5)}
.sys-editor-header .sys-icon-btn.disabled{color:rgba(166,166,166,.5); cursor:default}
.sys-editor-header .sys-col{display:table-cell; vertical-align:middle; padding:0 16px; }

.sys-editor-header .sys-col:not(#header-option){text-overflow:ellipsis; overflow:hidden}

.editor-control-list{list-style:none; margin:0; padding:0; display:inline-block; vertical-align:middle }
.editor-control-list > li{display:table-cell; vertical-align:middle}
.editor-control-list > li + li{border-left:1px solid #b6b6b6}
.editor-control-list .sys-power-switch{margin:0 8px}

.sys-cms-device-list{list-style:none; margin:0; padding:0;}
.sys-cms-device-list > li{display:table-cell; vertical-align:middle}
.sys-cms-device-list .select{color:rgba(255,255,255,1)}
input[name=color]{display:none}
.device-color-list{list-style:none; margin:0; padding:0; display:none; vertical-align:middle; opacity:0;}
.device-color-list li{display:inline-block; vertical-align:middle}
.color-btn{border-radius:50%; width:24px; height:24px; border:2px solid #ccc; display:block; opacity:.5; cursor:pointer}
.color-btn.silver{background:#fff}
.color-btn.black{background:#000}
#radio_silver:checked ~ .device-color-list .color-btn.silver, 
#radio_black:checked ~ .device-color-list .color-btn.black{opacity:1}

/* editor_font/style */
@font-face {
    font-family: 'editor-icon';
    src: url('../xtopia_p01/editor_font/fonts/editor-icon.eot?gw6mdd');
    src: url('../xtopia_p01/editor_font/fonts/editor-icon.eot?gw6mdd#iefix') format('embedded-opentype'),
        url('../xtopia_p01/editor_font/fonts/editor-icon.ttf?gw6mdd') format('truetype'),
        url('../xtopia_p01/editor_font/fonts/editor-icon.woff?gw6mdd') format('woff'),
        url('../xtopia_p01/editor_font/fonts/editor-icon.svg?gw6mdd#editor-icon') format('svg');
    font-weight: normal;
    font-style: normal;
}

.sys-ef {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'editor-icon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sys-ef-tp-desktop:before {
    content: "\e987";
}
.sys-ef-tp-mobile:before {
    content: "\e989";
}
.sys-ef-tp-tablet:before {
    content: "\e98f";
}


/* Page */
/*body{overflow:hidden}*/

#content-wrapper{width:100%; margin:41px auto 0 ; box-sizing:border-box; }
#content-wrapper:before{transition:all .3s}
#content{border:none; width:100%; height:100%; position:relative; z-index:5; display:block}
.device-frame{position:relative; margin:0 auto; transition:all .2s}
.device-frame:before{content: ''; width: calc(100% - 8px); height: calc(100% - 8px); position: absolute; top: 4px; left: 4px; display:block}
.tablet-view .device-screen, .mobile-view .device-screen{background:#fff; width: 100%; position: relative; height: 100%; color: white; z-index: 2; text-align: center; display: block;  overflow:hidden}
.device-screen iframe{background:#fff; }
.camera { background: #3c3d3d; width: 10px; height: 10px; position: absolute; z-index: 3; margin-left: -5px; -webkit-border-radius: 100%; border-radius: 100%; opacity:0}

.device-frame .clock{display:none;}

.desktop-view{}
.desktop-view #content{height:calc(100vh - 41px); display:block}
.tablet-view.silver .device-frame, .mobile-view.silver .device-frame{background:#bcbcbc;}
.tablet-view.silver .device-frame:before, .mobile-view.silver .device-frame:before{background: #fcfcfc; }

.silver .home{ background: #fcfcfc; box-shadow: inset 0 0 0 1px #bcbcbc;}
.silver .home:after{border:1px solid rgba(0,0,0,0.2);}

.black .device-frame{background:#464646;}
.black .device-frame:before{background:#080808; }
 
.black .home{ background:#242324; box-shadow: inset 0 0 0 1px #bcbcbc;}
.black .home:after{border:1px solid rgba(255,255,255,0.1)}


/*Tablet Emulator*/
#content-wrapper.tablet-view {margin:64px 0}
.tablet-view .device-screen{border-radius: 1px; -webkit-box-shadow: 0 0 0 3px #111; box-shadow: 0 0 0 3px #111;}
.tablet-view #content{height:1024px}
.tablet-view .device-frame{padding:90px 25px;   border-radius: 44px; width:818px; }
.tablet-view .device-frame:before {   border-radius: 40px; }
.tablet-view  .camera {  top: 44px; left: 50%; opacity:1}
.tablet-view .home {  -webkit-border-radius: 36px; border-radius: 36px; width: 50px; height: 50px; position: absolute; left: 50%; margin-left: -25px; bottom: 22px;    }
.tablet-view  .home:after { width: 15px; height: 15px; margin-top: -8px; margin-left: -8px;  -webkit-border-radius: 4px; border-radius: 4px; position: absolute; display: block; content: ''; top: 50%; left: 50%; }


/*Mobile Emulator*/
.mobile-view{border-radius:50px}
.mobile-view .device-screen{border-radius:40px; -webkit-box-shadow: 0 0 0 3px #1f1f1f; box-shadow: 0 0 0 3px #1f1f1f; background:#f2f2f2}
.mobile-view  .device-screen:before, .mobile-view  .device-screen:after{content: ''; position: absolute; left: 50%; transform: translateX(-50%);z-index:6}
.mobile-view  .device-screen:before{top: 0px; width: 56%; height: 30px; background-color: #1f1f1f; border-radius: 0px 0px 40px 40px; }
.mobile-view  .device-screen:after{bottom: 7px; width: 140px; height: 4px; background-color: #f2f2f2; border-radius: 10px; }
#content-wrapper.mobile-view {margin:64px 0}
.mobile-view.silver .device-frame:before, .mobile-view.silver .device-frame,
.mobile-view.black .device-frame, .mobile-view.black .device-frame:before{background: #1f1f1f; }
.mobile-view .device-frame { padding: 20px; width: 400px; height: 780px;  border-radius:54px; }
.mobile-view .device-frame:before {border-radius: 50px;  }

.mobile-view .speaker { background: #101010; width: 64px; height: 8px; position: absolute; top: 26px; left: 50%; z-index: 3; margin-left: -32px;  border-radius: 8px; box-shadow: inset 0px -3px 3px 0px rgba(255, 255, 255,.2)}
.mobile-view .camera { top: 25px; left: 250px; z-index: 3; opacity:1; width: 12px; height: 12px; background-color: #101010; border-radius: 12px; box-shadow: inset 0px -3px 2px 0px rgba(255, 255, 255, 0.2);}
.mobile-view .camera:before {content: ''; position: absolute; background-color: #2d4d76; width: 6px; height: 6px; top: 2px; left: 2px; top: 3px; left: 3px; display: block; border-radius: 4px; box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5)}
.mobile-view .home { -webkit-border-radius: 100%; border-radius: 100%; width: 72px; height: 72px; z-index: 3; position: absolute; left: 50%; margin-left: -36px; bottom: 30px; display:none;}
.mobile-view .home:after {width: 20px; height: 20px;  -webkit-border-radius: 4px; border-radius: 4px; position: absolute; display: block; content: ''; top: 50%; left: 50%; margin-top: -11px; margin-left: -11px; }
.mobile-view #content{height:calc(740px - 48px); margin-top:48px}
.clock{display:none;}
.mobile-view .device-frame .clock{display:block;    position: absolute; left: 48px; top: 32px; z-index: 5;}
@media screen and (max-width:1024px){
    .tablet-view #content{height:calc(100vh - 48px); margin-top:0}
    #content-wrapper.tablet-view{margin:41px 0 0}
    .tablet-view .device-frame{padding:0; border-radius: 0; width:auto; }
    .tablet-view .device-screen{background:#fff;  -webkit-box-shadow: none; box-shadow: none; height:auto}
    .tablet-view  .camera, .tablet.device-color-list{display:none}
}
@media screen and (max-width:767px){
    .mobile-view .device-screen:before, .mobile-view .device-screen:after{display:none;}
    .mobile-view #content{height:calc(100vh - 48px); margin-top:0}
    #content-wrapper.mobile-view{margin:41px 0 0}
    .mobile-view .device-frame{padding:0; border-radius: 0; width:auto; height:auto }
    .mobile-view .device-screen{background:#fff;  -webkit-box-shadow: none; box-shadow: none; border-radius:0}
    .mobile-view  .camera, .mobile-view  .speaker, .mobile.device-color-list{display:none} 

    .mobile-view .device-frame .clock{display:none}
}