﻿* { margin: 0;user-select: none; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-overflow-scrolling: touch; }

html,
body { height: 100%; font-weight: 300; font-size: 10px; font-family: 'Open Sans', Arial, sans-serif; }
body { color: #111; background:#f1f1f1; }

img, a img { border:none; }
a { outline:none; text-decoration:none; color:#e98225; }
a:hover span { text-decoration:none; }
ul, ol { list-style-type:none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; font-size: 2rem; font-family: 'Open Sans', Arial, sans-serif; }
p { font-size:1.2rem; line-height:2rem; margin:0; padding:0; }
strong, b { font-weight:600; }

.subcolumns { overflow:hidden; }
.left { float:left; }
.right { float:right; }
.clear { clear:both; }

.visible { display:block!important; }
.hidden { display:none!important; }

.table { width:100%; height:100%; display:table; }
.table-cell { width:100%; height:100%; display:table-cell; vertical-align:middle; }
.box4 .table-cell {width:50%;}
.relative { width:100%; height:100%; position:relative; }

.transation-2s-in-out { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.transation-3s-in-out { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.transation-5s-in-out { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

.align-center { text-align:center; }
.align-left { text-align:left; }
.align-right { text-align:right; }

.mar05b { margin-bottom:0.5rem!important; }
.mar1b { margin-bottom:1rem!important; }
.mar2b { margin-bottom:2rem!important; }
.mar3b { margin-bottom:3rem!important; }

/* ============================================================= */

#app { width: 100%; height: 100%; position: relative; overflow: hidden; }

.wrapper { width:100%; height:100%; position:relative; overflow:hidden; padding:0 0 0 6rem; }
.wrapper.login-page { padding:0; }

.wrapper-content { width:100%; height:100%; position:relative; overflow:hidden; -webkit-transition:transform 0.5s ease-in-out; -moz-transition:transform 0.5s ease-in-out; -o-transition:transform 0.5s ease-in-out; -ms-transition:transform 0.5s ease-in-out; transition:transform 0.5s ease-in-out; -moz-transform:translate3d(19rem,0,0); -ms-transform:translate3d(19rem,0,0); -o-transform:translate3d(19rem,0,0); -webkit-transform:translate3d(19rem,0,0); transform:translate3d(19rem,0,0); }
.collapse-sidebar .wrapper-content { -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }

.hp .wrapper-content { padding-top:6rem; }
.archive .wrapper-content { padding-left:46rem; }
.dictionary-page .wrapper-content { padding-left:50%; }

.portrait-page #app { display:none; }
.portrait-page .portrait { display:block; }

.landscape-page .login-page { display:none; }
.landscape-page .landscape { display:block; }

/* ============================================================= */

.sidebar { width:25rem; height:100%; position:absolute; top:0; left:0; z-index:10; background-color:#e66414; box-shadow:0.5rem 0 1.5rem rgba(0,0,0,0.2); padding-top:6rem; -webkit-transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; -moz-transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; -o-transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; -ms-transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; }
.collapse-sidebar .sidebar { -moz-transform:translate3d(-19rem,0,0); -ms-transform:translate3d(-19rem,0,0); -o-transform:translate3d(-19rem,0,0); -webkit-transform:translate3d(-19rem,0,0); transform:translate3d(-19rem,0,0); }
.view-submenu .sidebar { box-shadow:0 0 0 rgba(0,0,0,0); }

.menu-btn { width:100%; height:6rem; position:absolute; top:0; left:0; cursor:pointer; border-bottom:1px solid rgba(255,244,229,.2); }
.menu-btn i { width:100%; height:100%; position:absolute; top:0; left:0; color:#fff; display:block; text-align:right; font-size:2rem; line-height:6rem; padding-right:2rem; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; }
.menu-btn:hover i { background:#ca4d00; }
.collapse-sidebar .menu-btn .back-icon,
.menu-btn .menu-icon  { display:none; }
.collapse-sidebar .menu-btn .menu-icon  { display:block; }
.menu-btn .back-icon { font-size:1.6rem; }

.main-menu { width:100%; height:100%; position:relative; overflow:hidden; }

.main-menu a { width:100%; height:6rem; display:block; color:#fff; position:relative; overflow:hidden; padding-right:6rem; border-bottom:1px solid rgba(255,244,229,.2); -webkit-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -moz-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -o-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -ms-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; transition:color 0.3s ease-in-out, background 0.3s ease-in-out; }
.main-menu a:hover { background:#ca4d00; text-decoration:none; }
.main-menu a.selected { background:rgba(255,255,255,1); color:#e66414; } 
.main-menu a.logout { position:absolute; left:0; bottom:0; border:none; border-top:1px solid rgba(255,244,229,.2); }

.main-menu i { width:6rem; height:100%; position:absolute; top:0; right:0; display:block; text-align:center; font-size:2.1rem; line-height:6rem; }
.main-menu a:nth-child(3) i.icon-ed-menu-info { font-size:2.4rem; }

.main-menu span { float:right; font-size:1.2rem; line-height:6rem; font-weight:400; opacity:1; text-transform:uppercase; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }

.profile-group-links { width:100%; position:absolute; left:0; bottom:6rem; height:6.1rem; background:#e05a07; border:none; border-top:1px solid rgba(255,244,229,.2); -webkit-transition:color 0.3s ease-in-out, background 0.3s ease-in-out, height 0.3s ease-in-out; -moz-transition:color 0.3s ease-in-out, background 0.3s ease-in-out, height 0.3s ease-in-out; -o-transition:color 0.3s ease-in-out, background 0.3s ease-in-out, height 0.3s ease-in-out; -ms-transition:color 0.3s ease-in-out, background 0.3s ease-in-out, height 0.3s ease-in-out; transition:color 0.3s ease-in-out, background 0.3s ease-in-out, height 0.3s ease-in-out; overflow:hidden; user-select:none; }
.profile-group-links.view-links,
.profile .profile-group-links { height:18.1rem; }

.main-menu i.icon-ed-excel { font-size:2.6rem; }

.main-menu .profile-link { width:100%; height:6rem; display:block; color:#fff; position:relative; overflow:hidden; padding-right:6rem; -webkit-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -moz-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -o-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -ms-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; transition:color 0.3s ease-in-out, background 0.3s ease-in-out; cursor:pointer; }
.main-menu .profile-link:hover { background:#ca4d00; }
.main-menu .profile-link i,
.main-menu .profile-link img { width:3.4rem; height:3.4rem; position:absolute; top:1.25rem; right:1.3rem; line-height:4.4rem; font-size:2.6rem; border-radius:50%; background:#ef7327; overflow:hidden; border:none; }

.main-menu .profile-group-links a { border-color:transparent; }

/* ============================================================= */

.submenu { width:46rem; height:100%; position:fixed; top:0; left:0rem; background:#fff; padding:6rem 0 0; -moz-transform:translate3d(-21rem,0,0); -ms-transform:translate3d(-21rem,0,0); -o-transform:translate3d(-21rem,0,0); -webkit-transform:translate3d(-21rem,0,0); transform:translate3d(-21rem,0,0); -moz-transition:transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; -o-transition:transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; -webkit-transition:transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; transition:transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; }
.view-submenu .submenu { box-shadow:0.5rem 0 1.5rem rgba(0,0,0,0.2); -moz-transform:translate3d(25rem,0,0); -ms-transform:translate3d(25rem,0,0); -o-transform:translate3d(25rem,0,0); -webkit-transform:translate3d(25rem,0,0); transform:translate3d(25rem,0,0);  }
.collapse-sidebar .submenu  { -moz-transform:translate3d(-40rem,0,0); -ms-transform:translate3d(-40rem,0,0); -o-transform:translate3d(-40rem,0,0); -webkit-transform:translate3d(-40rem,0,0); transform:translate3d(-40rem,0,0); }
.collapse-sidebar.view-submenu .submenu { box-shadow:0.5rem 0 1.5rem rgba(0,0,0,0.2); -moz-transform:translate3d(6rem,0,0); -ms-transform:translate3d(6rem,0,0); -o-transform:translate3d(6rem,0,0); -webkit-transform:translate3d(6rem,0,0); transform:translate3d(6rem,0,0); }

.submenu-header { width:100%; height:5.5rem; position:fixed; top:0; left:0rem; padding:2rem 3rem 0; overflow:hidden; }
.submenu-header h3 { color:#111; font-size:1.6rem; line-height:2rem; }
.submenu-header .section-filter { float:right; position:static; opacity:1; }
.submenu-header .section-filter select { width:25rem; }

.submenu-content a { width:100%; padding:0.7rem 3rem; display:block; color:#111; font-size:1.2rem; line-height:1.8rem; background:#e2e2e2; margin:0 auto 1px; -moz-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; transition: color 0.3s ease-in-out, background 0.3s ease-in-out; } 
.submenu-content a:nth-child(2n) { background:#f1f1f1; }
/*.submenu-content a:first-of-type { font-weight:bold; }*/
.submenu-content a:hover { color:#fff; background:#e66414; }

/* ============================================================= */


.header { width:auto; height:6rem; position:absolute; top:0; left:0; right:0; z-index:100; background:#f8f8f8; display:grid; grid-template-columns: 30% 40% 30%; user-select:none; border-bottom:1px solid transparent; transition: border .5s ease-in-out; border-color:rgba(0,0,0,.1); }
.view-breadcrumb-list .header {  }

.breadcrumb { width:100%; height:100%; padding-left:1.5rem; vertical-align:top; transition: background .3s ease-in-out, box-shadow .3s ease-in-out; }
.view-breadcrumb-list .breadcrumb { background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,.1); }

.breadcrumb a,
.breadcrumb span { width:auto; display:inline-block; padding:0 .5rem; font-size:1.1rem; font-weight:600; line-height:6rem; color:#000; transition: all .3s ease-in-out; text-overflow: ellipsis; max-width: 17rem;overflow:hidden;height:6rem; }
.breadcrumb span { padding:0 .1rem; color:#999; } 

.calendar-filter { width:auto; height:100%; position:absolute; top:0; left:50%; transform: translate(-50%,0); }

.calendar-filter strong,
.calendar-filter div,
.calendar-filter ul { display:inline-block; float:left; font-size:1.1rem; line-height:6rem; color:#000; padding:0 1rem; overflow:hidden; }
.calendar-filter div:first-child { padding-left:2.5rem; }
.calendar-filter strong { color:#fff; background:#000; }
.calendar-filter em { width:1rem; height:1rem; float:left; display:block; border-radius:50%; background:#ff4e00; margin:2.48rem 0.6rem 0 0;  }
.calendar-filter em.prev-week { background:#faca66; }

.calendar-filter div.vs { width:3rem; height:3rem; position:relative; overflow:hidden; padding:0; margin:0 1rem; font-weight:600; line-height:2.8rem; text-align:center; overflow:visible; border:1px solid #333; border-radius:50%; margin-top:1.5rem; }

.calendar-filter-list { height:6rem; cursor:pointer; transition: all .3s ease-in-out; }
.calendar-filter-list.view-list { height:12rem; background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,.1); }

.calendar-filter-list li { width:100%; position:relative; border-bottom:1px solid #eee; padding-right:1.5rem; }
.calendar-filter-list li:last-of-type { border:none; }

.calendar-filter-list i { width:1.5rem; height:1.5rem; position:absolute; top:2.2rem; right:-.4rem; opacity:0; font-size:1rem; line-height:1.5rem; text-align:center; transition: transform .3s ease-in-out, opacity .3s ease-in-out; }
.calendar-filter-list:hover i,
.view-list .calendar-filter-list i { opacity:1; }


/* ============================================================= */

.breadcrumb-list { width:30%!important; height:auto!important; position:absolute; top:6rem; bottom:0; left:0; right:0; opacity:0; z-index:100;  /*display:flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-content: stretch;*/ background:#fff; user-select:none; overflow-x:hidden; overflow-y:auto; transform: translate3d(0,-100%,0); transition: transform .5s ease-out, opacity .5s ease-out; }

.breadcrumb-list-full { width:100%!important; position:absolute; opacity:1; top:6rem; bottom:0; left:0; right:0; overflow:hidden; z-index:100; display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; background:#f8f8f8; user-select:none; transform: translate3d(0,-100%,0); transition: transform .5s ease-in-out, opacity .5s ease-in-out; box-shadow: none!important; }

.view-breadcrumb-list .breadcrumb-list,
.view-breadcrumb-list .breadcrumb-list-full { opacity:1; transform: translate3d(0,0,0); box-shadow: 0 1px 2px rgba(0,0,0,.1); }

.breadcrumb-list > div { height:6rem; position:relative; border-bottom:1px solid rgba(125,125,125,.1); overflow:hidden; }
.breadcrumb-list > div.expand { height:auto; overflow-y:auto; }

.breadcrumb-list-full > div { width:100%; height:100%!important; border-right:1px solid rgba(0,0,0,.1); }

/*.breadcrumb-list > div:last-of-type,*/
.breadcrumb-list-full > div:last-of-type { border:none!important; }

.breadcrumb-list ul,
.breadcrumb-list-full ul { width:100%; height:auto!important; opacity:0; transform: translate3d(0,.5rem,0); transition: transform .5s ease-in-out .45s, opacity .5s ease-in-out .45s; overflow:hidden; }
.breadcrumb-list-full ul  { height:100%!important; overflow-y:auto; }
.breadcrumb-list ul:last-of-type,
.breadcrumb-list-full ul:last-of-type { border:none; }

.view-breadcrumb-list .breadcrumb-list ul,
.view-breadcrumb-list .breadcrumb-list-full ul { opacity:1; transform: translate3d(0,0,0); }

.breadcrumb-list > div.expand { height:auto; }
.breadcrumb-list > div.expand ul { height:auto; overflow-y:hidden; }

.breadcrumb-list ul li,
.breadcrumb-list-full ul li { width:100%; position:relative; margin:0; padding:0; font-size:1.2rem; line-height:4.4rem; padding:0 3rem 0 6rem; color:#999; font-weight:600; transition: color .3s ease-in-out, background .3s ease-in-out; }
.breadcrumb-list ul li:nth-child(2n),
.breadcrumb-list-full ul li:nth-child(2n) { background:#f8f8f8; }

.breadcrumb-list ul li.bl-header,
.breadcrumb-list-full ul li.bl-header { font-size:1.4rem; line-height:6rem; font-weight:bold; padding-left:4rem; background:#fff; }

.breadcrumb-list ul li.selected,
.breadcrumb-list-full ul li.selected { background:#ffede2; color:#333; }
.breadcrumb-list ul li.selected:nth-child(2n),
.breadcrumb-list-full ul li.selected:nth-child(2n) { background:#fde3d5; }
/*.breadcrumb-list ul li.selected,
.breadcrumb-list-full ul li.selected { color:#333; }
.breadcrumb-list ul li.selected:nth-child(2n),
.breadcrumb-list-full ul li.selected:nth-child(2n) { background:#f1f1f1; }*/

.breadcrumb-list ul li.bl-header.selected,
.breadcrumb-list-full ul li.bl-header.selected { background:#ffede2; }

.breadcrumb-list ul li.selected:after,
.breadcrumb-list-full ul li.selected:after { width:2rem; height:2rem; position:absolute; top:50%; left:3.5rem; transform: translate(0,-50%); content:'\e955'; /*content:'\e93a';*/ color:#ff4e00; font-size:.8rem; line-height:2rem; text-align:center; font-family:icons; }
.breadcrumb-list ul li.bl-header.selected:after,
.breadcrumb-list-full ul.bl-header li.selected:after { left:1.5rem; }

.breadcrumb-list .trigger-expand-list { width:4rem; height:4rem; position:absolute; top:1rem; right:.5rem; color:#666; font-size:1.12rem; line-height:4rem; text-align:center; transition: transform .3s ease-in-out, color .3s ease-in-out; }
.breadcrumb-list .expand .trigger-expand-list { transform: rotateX(180deg); }

/* ============================================================= */

.content { width:100%; position:absolute; top:6rem; bottom:0; left:0; right:0;  }
.archive .content { width:auto; top:0; left:46rem; background:#fff; }
.dictionary-page .content { width:auto; top:0; left:50%; background:#fff; }
.profile .content { top:0; overflow-y:auto; }  

.main-title { width:100%; height:6rem; padding:0 6rem; margin:0 auto; color:#ff4e00; font-size:2rem; line-height:6rem; font-weight:700; }

/* ============================================================= */

.slider { width:100%; height:100%; position:relative; overflow:hidden; padding:0 6rem 5rem; }
.slider-list { height:100%; /*width:1200%;  overflow:hidden; */ }

.slide { /*width:8.3333%;*/ height:100%; /*float:left;*/ position:relative; overflow:hidden; border-left:0.2rem solid #f1f1f1; border-right:0.2rem solid #f1f1f1; }
.slide-title { width:auto; height:3rem; overflow:hidden; display:inline-block; float:left; /*opacity:0;*/ color:#ff4e00; font-size:2rem; line-height:3rem; font-weight:700; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; }
/*.slide.swiper-slide-active .slide-title { opacity:1; }*/
.slide-content { width:100%; position:absolute; top:6rem; left:0; bottom:0; overflow:hidden; }

.slide-header { width:100%; height:3rem; opacity:0; top:1.5rem; position:relative; z-index:1; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; }
.slide.swiper-slide-active .slide-header { opacity:1; }

.slide-title-info { width:auto; height:3rem; display:block; float:left; position:relative; }
.slide-title-info i { width:3rem; height:3rem; display:block; float:left; color:#999; font-size:1.6rem; line-height:3.4rem; text-align:center; cursor:pointer; -moz-transition:color 0.3s ease-in-out; -o-transition:color 0.3s ease-in-out; -webkit-transition:color 0.3s ease-in-out; transition:color 0.3s ease-in-out; }
.slide-title-info:hover i { color:#333; }

.slide-title-info div { width:30rem; height:auto; display:block; visibility:hidden; position:absolute; z-index:1001; top:3.3rem; left:50%; margin-left:-15rem; opacity:0; -webkit-transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -moz-transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -o-transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -ms-transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -moz-transform:translate3d(0,-0.5rem,0); -ms-transform:translate3d(0,-0.5rem,0); -o-transform:translate3d(0,-0.5rem,0); -webkit-transform:translate3d(0,-0.5rem,0); transform:translate3d(0,-0.5rem,0); }
.slide-title-info:hover div { opacity:1; visibility:visible; -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }
.slide-title-info div:before { width:0; height:0; position:absolute; left:50%; top:-0.5rem; margin-left:-0.6rem; content:""; border-bottom: 0.6rem solid rgba(0,0,0,1);  border-left: 0.6rem solid transparent; border-right: 0.6rem solid transparent; }
.slide-title-info:hover div span { width:auto; max-width:100%; height:100%; display:inline-block; margin:0 auto; padding:1rem 1.5rem; font-size:1.1rem; line-height:1.6rem; font-style:normal; font-weight:400; color:#fff; background:rgba(0,0,0,1); border-radius:0.3rem; overflow:hidden; }

.slide-total-visits .slide-title-info div { margin-left: -12rem; }
.slide-total-visits .slide-title-info div:before { margin-left: -3.6rem; }

.slider-arrow { width:6rem; display:block; position:absolute; top:6rem; bottom:5rem; z-index:10; background:#f1f1f1; color:rgba(0,0,0,0.2); cursor:pointer; -webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -ms-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; transition: color 0.3s ease-in-out, background 0.3s ease-in-out; }
.slider-arrow:hover { background:#e9e9e9; color:#ff4e00; }
.slider-arrow.slider-prev { left:0; }
.slider-arrow.slider-next { right:0; }
.slider-arrow i { width:2rem; height:2rem; position:absolute; top:50%; left:50%; margin:-1rem 0 0 -1rem; opacity:0; display:block; font-size:2rem; line-height:2rem; text-align:center; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; }
.slider:hover .slider-arrow i { opacity:1; }

.slider-nav { width:100%; height:0.8rem; position:absolute; left:0; bottom:2.2rem; text-align:center; font-size:0; line-height:0; }
.slider-nav span { width:0.8rem; height:0.8rem; position:relative; display:inline-block; border-radius:50%; background:#e2e2e2; cursor:pointer; margin:0 0.25rem; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; }
.slider-nav span:hover,
.slider-nav span.swiper-pagination-bullet-active { background:#ff4e00; }

.slider-nav-bullet-tooltip { width:30rem; height:2.4rem; display:block; visibility:hidden; position:absolute; z-index:1001; bottom:1.8rem; left:50%; margin-left:-15rem; opacity:0; text-align:center; -webkit-transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -moz-transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -o-transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -ms-transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -moz-transform:translate3d(0,0.5rem,0); -ms-transform:translate3d(0,0.5rem,0); -o-transform:translate3d(0,0.5rem,0); -webkit-transform:translate3d(0,0.5rem,0); transform:translate3d(0,0.5rem,0); }
.slider-nav span:hover .slider-nav-bullet-tooltip { opacity:1; visibility:visible; -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }
.slider-nav-bullet-tooltip:before { width:0; height:0; position:absolute; left:50%; bottom:-0.5rem; margin-left:-0.6rem; content:""; border-top: 0.6rem solid rgba(0,0,0,1);  border-left: 0.6rem solid transparent; border-right: 0.6rem solid transparent; }
.slider-nav-bullet-tooltip strong { width:auto; max-width:100%; height:100%; display:inline-block; margin:0 auto; padding:0 1rem; font-size:1rem; line-height:2.4rem; font-style:normal; font-weight:400; color:#fff; background:rgba(0,0,0,1); border-radius:0.3rem; overflow:hidden; -ms-text-overflow:ellipsis; -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; }

.slider-info { width:auto; position:absolute; bottom:2rem; left:6.2rem; color:#666; font-size:1rem; line-height:1.2rem; }

.slider-action { width:auto; height:4rem; position:absolute; right:6.2rem; bottom:0.5rem; z-index:200; overflow:hidden; }
.slider-action i { width:4rem; height:4rem; display:block; float:left; color:rgba(0,0,0,0.3); font-size:1.6rem; line-height:4rem; text-align:center; -webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -ms-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; transition: color 0.3s ease-in-out, background 0.3s ease-in-out; cursor:pointer; }
.slider-action i:hover { color:#fff; background:#ff4e00; }

.section-filter { width:auto; height:3rem; float:right; /*position:absolute; top:0; right:0; opacity:1;*/ -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;  }
/*.slide.swiper-slide-active .section-filter { opacity:1; }*/

.section-filter select { width:20rem; height:100%!important; float:right; margin-left:1rem; padding-left:1rem; border:1px solid rgba(0,0,0,0.2); font-size:1.1rem; }
.section-filter select:focus { border-color:rgba(0,0,0,0.4); }
.section-filter select option { padding:0.5rem 1rem; }

/* ============================================================= */


.slide-wrapper { width:100%; height:200%; -webkit-transition: transform .5s ease-in-out; -moz-transition: transform .5s ease-in-out; -o-transition: transform .5s ease-in-out; -ms-transition: transform .5s ease-in-out; transition: transform .5s ease-in-out; } 
.view-detailed-slide .slide-wrapper { transform: translate3d(0,-50%,0); }

.slide-wrapper-cell { width:100%; height:50%; position:relative; overflow:hidden; }
.slide-wrapper-cell:nth-child(2), 
.slide-wrapper-cell.slide-detailed { background-color:#fff; padding-top:6rem; }

.slide-wrapper-cell:nth-child(2) .scrollbar, 
.slide-wrapper-cell.slide-detailed .scrollbar { padding:0; }

.table-list-filters { width:100%; height:6rem; position:absolute; top:0; left:0; background:#fff; padding:1.3rem 1.5rem; box-shadow: 0 0 0.5rem rgba(0,0,0,.1); }

.table-list { width:100%; height:auto; text-align:left; }
.table-list > li { width:100%; height:4.8rem; position:relative; margin:0; padding:0; background-color:#f8f8f8; -webkit-transition: background-color .3s ease-in-out; transition: background-color .3s ease-in-out; }
.table-list > li:nth-child(2n) { background-color:#fff; }
.table-list > li:hover { background-color:rgba(230,100,20,.1)!important; }
.table-list > li:last-of-type { border-bottom:none; }
.table-list > li strong { width:100%; display:block; font-weight:400; font-size:1.2rem; line-height:1.6rem; overflow:hidden; }

/*.table-list > li.table-list-header { min-height:4rem; background:#f8f8f8; }
.table-list > li.table-list-header strong { width:auto; display:inline-block; font-weight:bold; color: var(--dark); font-size:1.1rem; line-height:1.4rem; }*/

.table-list ul { width:100%; height:100%; display: grid; grid-gap:.5rem; grid-template-columns: 1fr 20rem; padding:0 1.5rem; }
.table-list ul li { width:auto; height:100%; align-content:center; padding:1.5rem .5rem; }
.table-list ul li:last-child { justify-self:end; } 

.table-list ul li strong,
.table-list ul li span { font-size:1.2rem; line-height:1.8rem; }
.table-list ul li span { opacity:.8; }

.switch-button { width:auto; position:absolute; top:0; right:0; height:3rem; display:inline-block; font-size:1rem; line-height:2.9rem; font-weight:400; text-transform:uppercase; border:1px solid  rgba(0,0,0,.3); padding:0 3rem 0 1.5rem; cursor:pointer; color:#666; background:transparent; border-radius:2rem; box-shadow:0 0.1rem 0.2rem rgba(114,124,245,0); -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.switch-button:hover,
.switch-button:active,
.view-detailed-slide .switch-button { color:#fff; background: #000; box-shadow:0 0.1rem 0.2rem rgba(0,0,0,0.2); } 

.switch-button:after { width:2rem; height:100%; display:block; position:absolute; top:0; right:.75rem; content:'\e90b'; font-size:1rem; line-height:2.9rem; text-align:center; font-family: icons; -moz-transition: transform .3s ease-in-out; -webkit-transition: transform .3s ease-in-out; transition: transform .3s ease-in-out; }
.view-detailed-slide .switch-button:after { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }

.switch-button span:first-child,
.view-detailed-slide .switch-button span:last-child { display:inline; }
.switch-button span:last-child,
.view-detailed-slide .switch-button span:first-child { display:none; }

.drop-down { width:auto; min-width:15rem; height:3.4rem; display:inline-block; position:relative; border-radius:.3rem; background:#fff; border:1px solid  rgba(0,0,0,.1); overflow:hidden; -moz-transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background 0.3s ease-in-out, height 0.3s ease-in-out; -o-transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background 0.3s ease-in-out, height 0.3s ease-in-out; -webkit-transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background 0.3s ease-in-out, height 0.3s ease-in-out; transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background 0.3s ease-in-out, height 0.3s ease-in-out; }
.drop-down.active { height:19.6rem; border-color: rgba(0,0,0,.3); box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.1); }
.table-list-filters .drop-down { margin-right:1.5rem; }

.drop-down-button { width:100%; height:3.4rem; position:relative; display:inline-block; font-size:1rem; line-height:3.3rem; font-weight:400; text-transform:uppercase; border:none; padding:0 3rem 0 1.2rem; cursor:pointer; color:#666; background:transparent; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.drop-down.active .drop-down-button { color:#000; background: #fff; }

.drop-down-button:after { width:3rem; height:100%; display:block; position:absolute; top:0; right:0; content:'\e90b'; font-size:1rem; line-height:3.4rem; text-align:center; font-family: icons; -moz-transition: transform .3s ease-in-out; -webkit-transition: transform .3s ease-in-out; transition: transform .3s ease-in-out; }
.drop-down.active .drop-down-button:after { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }

.drop-down-list { width:100%; /*position:absolute; top:100%; left:50%; z-index:600; transform: translate(-50%,0); background:#fff;*/  }

.drop-down-list ul { }
.drop-down-list ul li { width:100%; position:relative; color:#666; padding:1.2rem; font-size:1.1rem; line-height:1.6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid rgba(0,0,0,.1); cursor:pointer; -webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; transition: color 0.3s ease-in-out, background 0.3s ease-in-out; }
.drop-down-list ul li:last-of-type { border:none; }
.drop-down-list ul li:hover { color: #000; background:#f8f8f8; }

/* ============================================================= */


.box0 { width:100%; height:100%; position:relative; background:#fff; padding:3rem 4.5rem; }

.box1, .box2, .box3, .box4, .box5 { position:absolute; display: table; /*table-layout:fixed;*/ overflow:hidden; }

.tpl-with-top-button .btn-box { width:30%; height:11%; position:absolute; top:0; right:0; }

.box0 p, .box1 p, .box2 p, .box3 p, .box4 p { font-size:1.2rem; line-height:2rem; color:#111; }

.box1.align-top .table-cell,
.box2.align-top .table-cell { vertical-align:top; padding-top:3rem; }
.box1.align-bottom .table-cell,
.box2.align-bottom .table-cell { vertical-align:bottom; padding-bottom:3rem; }

/* ============================================================= */

.wrapper.landing-page { padding:22rem 0 5rem; }

.landing-header { width:100%; height:22rem; position:absolute; top:0; left:0; overflow:hidden; padding:0 10% 9rem; background:#fff4e5 url(../img/landing-header-bg.jpg) no-repeat 100% 50%; background-size:auto 110%; }
.landing-body { width:100%; height:100%; padding:0 10%; border-top:2px solid #f1f1f1; }
.landing-footer { width:100%; height:5rem; position:absolute; bottom:0; left:0; }

.landing-header .table-cell { vertical-align:bottom; }
.landing-header h1 { font-size:1.8rem; line-height:2rem; font-weight:700; color:#000; margin:0 auto 0.7rem; }
.landing-header p { font-size:1.2rem; line-height:1.6rem; color:#666; margin:0; }
.landing-header .button { position:absolute; right:10%; bottom:9.5rem; background:#ff4e00; }
.landing-header .button:hover { background:#000; }
.landing-header .button i { font-size:1rem!important; }

/* schimbat de Hogea */
.landing-slider-menu { width:auto; height:5rem; position:absolute; bottom:0; left:10%; right:10%; background:#fff; text-align:center; }
.landing-slider-menu a { width:auto; height:100%; display:inline-block; margin:0 4%; padding:0 1.5rem; border-bottom:0.3rem solid transparent; font-size:1.2rem; line-height:5rem; font-weight:600; text-align:center; text-transform:uppercase; color:#666; cursor:pointer; -moz-transition: color 0.3s ease-in-out, border 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out, border 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out, border 0.3s ease-in-out; transition: color 0.3s ease-in-out, border 0.3s ease-in-out; }
.landing-slider-menu a:first-of-type { margin-left:0; }
.landing-slider-menu a:last-of-type { margin-right:0; }
.landing-slider-menu a:hover { color:#ff4e00; }
.landing-slider-menu a.selected { color:#ff4e00; border-color:#ff4e00; }
/* -- */
.landing-footer .slider-info { left:10%; }
.landing-footer .slider-action { right:10%; }

.landing-slider { width:100%; height:100%!important; position:relative; overflow:hidden; }
.landing-slider-list { height:100%!important; }
.landing-slide { height:100%!important; position:relative; padding:3rem 7% 6.5rem; background:#fff; overflow:hidden; }

.landing-slider .graph-bar-1 li:last-of-type .gb1-bar { background:#ff4e00; }

.landing-body .graph-legend { bottom:2.5rem; }

/* ============================================================= */

.graph-legend { width:100%; /*width:50rem;*/ height:2.4rem; position:absolute; bottom:1.5rem; left:0; z-index:20; padding:0; text-align:center; /*left:50%; margin-left:-25rem;*/ opacity:0; -webkit-transition: opacity 0.5s ease-in-out 1s; -moz-transition: opacity 0.5s ease-in-out 1s; -o-transition: opacity 0.5s ease-in-out 1s; -ms-transition: opacity 0.5s ease-in-out 1s; transition: opacity 0.5s ease-in-out 1s; }
.swiper-slide-active .graph-legend { opacity:1; }

.graph-legend span { width:auto; display:inline-block; font-size:1rem; line-height:2.4rem; padding:0; text-align:left; margin-right:2rem; color:#111; vertical-align:top; /*overflow:hidden;*/ }
.graph-legend span:last-of-type { margin-right:0; }
.graph-legend span u { text-decoration:none; }
.graph-legend em { width:1rem; height:1rem; float:left; display:block; position:relative; border-radius:50%; border:1px solid transparent; background:#faca66; margin:0.7rem 0.5rem 0 0;  }
.graph-legend span:nth-child(2) em { background:#ff4e00; }
.graph-legend span:nth-child(3) em { background:#e0e0e0; border-color: #999; }

.graph-legend.graph-legend-2 span:nth-child(1) em { background:#999; }
.graph-legend.graph-legend-2 span:nth-child(2) em { background:#be1e2d; }

.graph-legend.pr-graph-legend span:nth-child(1) em { background:#24974f; }
.graph-legend.pr-graph-legend span:nth-child(2) em { background:#1b75bb; }
.graph-legend.pr-graph-legend span:nth-child(3) em { background:#2b388f; border:none; }
.graph-legend.pr-graph-legend span:nth-child(4) em { background:#7f3f98; }

.graph-legend span em.sp-bullet:before { width:1.6rem; height:0.1rem; position:absolute; top:50%; left:50%; margin:-0.05rem 0 0 -0.8rem; content:''; }

/* ============================================================= */

.graph-legend-data { width:100%; height:10.5rem; position:absolute; left:0; bottom:1.5rem; padding:0 5.77%; overflow:hidden; opacity:0; -moz-transition: opacity 0.5s ease-in-out 1.2s; -o-transition: opacity 0.5s ease-in-out 1.2s; -webkit-transition: opacity 0.5s ease-in-out 1.2s; transition: opacity 0.5s ease-in-out 1.2s;  }
.monthly-view .graph-legend-data { padding:0 3.65%; }
.swiper-slide-active .graph-legend-data { opacity:1; }

.graph-legend-data h6 { color:#666; font-size:1rem; line-height:1.5rem; font-weight:600; margin:0 auto 0.1rem; text-transform:uppercase; }

.graph-legend-data ul { width:100%; height:3rem; position:relative; overflow:hidden; display:table; table-layout:fixed; margin:auto auto 0.9rem; }
.graph-legend-data ul li { width:auto; height:100%; display:table-cell; position:relative; text-align:center; overflow:hidden; }
.graph-legend-data ul li span,
.graph-legend-data ul li strong { width:100%; height:50%; display:block; position:relative; color:#666; font-size:0.8rem; line-height:1.5rem; overflow:hidden; border-bottom:1px solid rgba(125,125,125,0.1); }
.graph-legend-data ul li strong.up { color:#009345; }
.graph-legend-data ul li strong.down { color:#ec1c24; }

.graph-legend-data ul.prev-month,
.graph-legend-data ul.last-month { height:4.5rem; margin-bottom: 1.5rem; }
.graph-legend-data ul.prev-month li,
.graph-legend-data ul.last-month li { padding-bottom:1.5rem; overflow:visible; }

.graph-legend-data ul li.highpoint-of-month strong,
.graph-legend-data ul li.highpoint-of-week strong { background:#faca66; overflow:visible; }
.graph-legend-data ul li.highpoint-of-month strong:before,
.graph-legend-data ul li.highpoint-of-week strong:before { width:10rem; height:1.5rem; position:absolute; top:1.5rem; left:50%; content:'Highpoint of the month'; font-size:0.8rem; line-height:1.5rem; color:#666; font-weight:600; -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -o-transform: translate(-50%,0); -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
.graph-legend-data ul li.highpoint-of-week strong:before { content:'Highpoint of the week'; }
.graph-legend-data ul.last-month li.highpoint-of-month strong,
.graph-legend-data ul.last-month li.highpoint-of-week strong { background:#ff4e00; color:#fff!important; }

/* ============================================================= */

.result { width:100%; font-size:1.4rem; line-height:2rem; color:#111; margin:0 auto; }
.result span { width:auto; display:inline-block; font-size:4.4rem; line-height:4.4rem; position:relative; }
.result span i { width:4.5rem; height:5rem; opacity:0; position:absolute; top:0; right:-5rem; display:inline-block; font-size:2.8rem; line-height:5rem; text-align:center; /*background:transparent url(../svg/arrow-top.svg) no-repeat 50% 50%; background-size:cover;*/ -ms-transition:opacity 0.5s ease-in-out 1s; -moz-transition:opacity 0.5s ease-in-out 1s; -o-transition:opacity 0.5s ease-in-out 1s; -webkit-transition:opacity 0.5s ease-in-out 1s; transition:opacity 0.5s ease-in-out 1s; }
.swiper-slide-active .result span i { opacity:1; }
.result span u { font-size:2.4rem; text-decoration:none; margin-left:0.5rem; }

p.data strong { width:100%; display:block; font-size:2rem; line-height:2.6rem; overflow:hidden; font-weight:700; }
p.data strong.inline, p.data strong.inline>strong { display:inline; }
p.data strong i { font-size:1.3rem; opacity:0; -ms-transition:opacity 0.5s ease-in-out 1s; -moz-transition:opacity 0.5s ease-in-out 1s; -o-transition:opacity 0.5s ease-in-out 1s; -webkit-transition:opacity 0.5s ease-in-out 1s; transition:opacity 0.5s ease-in-out 1s; }
.swiper-slide-active p.data strong i { opacity:1; }
p.data strong u { text-decoration:none; font-size:2.4rem; font-weight:300; margin-left:0.5rem; }
p.data .weather-icon { opacity:1; width:3rem; height:3rem; display:inline-block; float:left; margin:0.3rem 0.5rem 0 0; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; background-size:100% 100%; }
p.data b.str { display:block; font-size: 2rem; line-height: 2.6rem; font-weight:700; padding-top:0.5rem; }

.border-bottom { border-bottom:1px solid #111; padding-bottom:1.5rem!important; margin-bottom:1.5rem!important; }

p.data strong.hour { font-size: 4.4rem; line-height: 5rem; font-weight:300; }
p.data strong.hour em { font-style:normal; font-size: 3rem; }

.img-box p.data span,
.img-box p.data span { width:100%; display:block; font-size:1.3rem!important; font-weight:600!important; }
.img-box p.data strong,
.img-box p.data strong { font-size: 3.2rem!important; line-height: 3.6rem!important; font-weight: 400!important; }

p.info { font-size:1rem; line-height:1.4rem; }

/* ============================================================= */

.top-list { width:100%; height:100%; position:relative; overflow:hidden; }
.top-list li { width:100%; height:33.3333%; display:table; position:relative; overflow:hidden; background:#e8e8e8; padding:0 1rem 0 2.5rem; }
/*.slide-18 .top-list li { height:10%; }*/
.top-list li:nth-child(2n) { background:#d8d8d8; }

.top-list p { width:100%; position:relative; overflow:hidden; padding-left:2rem; font-size:1.1rem; line-height:1.5rem; }
.top-list p span { width:2rem; height:2rem; display:block; position:absolute; top:0; left:0; font-weight:600; }
.top-list p strong { font-weight:600; }

/* ============================================================= */

.clock-data { width:100%; min-height:7rem; overflow:hidden; position:relative; padding-left:8.5rem; }
.box2 .clock-data { margin: 0 auto; }
.box2 .clock-data .w50s:first-of-type { padding-right:1rem; }

.clock { width:7rem; height:7rem; position:absolute; top:0; left:0; background:transparent url(../svg/clock.svg) no-repeat 50% 50%; background-size:cover; }
.clock:before { display:none; width:0.3rem; height:0.3rem; content:""; position:absolute; top:50%; left:50%; margin:-0.15rem 0 0 -0.15rem; background:#000; border-radius:50%; }
.clock-hour,
.clock-min { width:100%; height:100%; position:absolute; top:0; left:0; -ms-transition:transform 0.5s ease-in-out 0.3s; -moz-transition:transform 0.5s ease-in-out 0.3s; -o-transition:transform 0.5s ease-in-out 0.3s; -webkit-transition:transform 0.5s ease-in-out 0.3s; transition:transform 0.5s ease-in-out 0.3s; }
.clock-hour span,
.clock-min span { width:2px; height:1.5rem; position:absolute; top:2rem; left:50%; margin-left:-1px; background:#000; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; }
.clock-min span { height:2.5rem; top:1rem; }

.clock-arrow-up,
.clock-arrow-down { width:100%; height:100%; display:block; position:relative; overflow:hidden; }
.clock-arrow-up i,
.clock-arrow-down i { width:100%; height:100%; display:block; position:absolute; top:0; left:0; font-size:2.8rem; line-height:7rem; text-align:center; color:#111; -ms-transition:transform 0.7s ease-in-out 0.5s; -moz-transition:transform 0.7s ease-in-out 0.5s; -o-transition:transform 0.7s ease-in-out 0.5s; -webkit-transition:transform 0.7s ease-in-out 0.5s; transition:transform 0.7s ease-in-out 0.5s; }
.clock-arrow-up i { -moz-transform:translate3d(0,100%,0); -ms-transform:translate3d(0,100%,0); -o-transform:translate3d(0,100%,0); -webkit-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0); }
.clock-arrow-down i { -moz-transform:translate3d(0,-100%,0); -ms-transform:translate3d(0,-100%,0); -o-transform:translate3d(0,-100%,0); -webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0); }
.slide.swiper-slide-active .clock-arrow-up i,
.slide.swiper-slide-active .clock-arrow-down i { -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }

.clock-details { color:#111; text-align:left; }
.clock-details strong { width:100%; display:block; font-size:1.2rem; line-height:2rem; }
.clock-details strong i { width:auto; height:2rem; display:inline-block; float:left; font-size:1.1rem; line-height:2rem; margin-right:0.5rem; }

.clock-details span { font-weight:400; }
.clock-details span, 
.clock-details em,
.clock-details u { width:100%; display:block; font-size:1.2rem; line-height:2rem; font-style:normal; text-decoration:none; }
.clock-details em { font-size:4.4rem; line-height:5rem;  }
.clock-details u { display:inline; font-size:3rem; }

.white-clock .clock { background-image: url(../svg/clock-white.svg); }
.white-clock .clock:before,
.white-clock .clock-hour span,
.white-clock .clock-min span { background:#fff; }
.white-clock .clock-details { color:#fff; }

.time-box { height:9rem; overflow:hidden; }
.time-box.border-bottom { height:10.5rem }
.slide-visit-duration .time-box .w50s .clock-details em {font-size: 3.2rem;}
.time-box .w50s { width:50%; height:9rem; float:left; }
.time-box .clock-data { padding-left:0; }

/* ============================================================= */

.pie-chart { width:80%; display:table; height:8rem; position:relative; padding-left:9.5rem; overflow:hidden; margin:0 auto; }
.pie-chart-graph { width:8rem; height:8rem; position:absolute; top:0; left:0; text-align:center; }
.pie-chart-graph img { width:100%; height:100%; margin:0 auto; }
.pie-chart-details { width:100%; height:100%; display:table; text-align:left; }
.pie-chart-details p { width:100%!important; position:relative; padding-left:1.5rem; line-height:1.6rem; margin-bottom:0.5rem; }
.pie-chart-details p strong { font-weight:700; }
.pie-chart-details h3 { margin-bottom:0.5rem; font-size:1.2rem; line-height:1.8rem; font-weight:700; color:#111; }
.pie-chart-details p em { width:0.8rem; height:0.8rem; position:absolute; top:0.6rem; left:0.1rem; display:block; border-radius:50%; background:#fff; }
.pie-chart-details p:nth-child(2) em { background:#ff1200; }

/* ============================================================= */

.tabs { width:100%; height:100%; position:relative; overflow:hidden; }
.tabs .tab { width:33.3333%; height:100%; float:left; position:relative; display:table; border-right:0.3rem solid #f1f1f1; cursor:pointer; }
.tabs .tab:last-of-type { border:none; }
.tabs .table-cell { text-align:center; color:#fff; /*padding:0 1.5rem;*/ border:0.5rem solid transparent; background:rgba(255,163,0,1); -webkit-transition: background 0.3s ease-in-out, border 0.3s ease-in-out, opacity 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out, border 0.3s ease-in-out, opacity 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out, border 0.3s ease-in-out, opacity 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out, border 0.3s ease-in-out, opacity 0.3s ease-in-out; transition: background 0.3s ease-in-out, border 0.3s ease-in-out, opacity 0.3s ease-in-out; }

.tabs .tab.selected .table-cell,
.tabs .tab.selected:hover .table-cell { border-color:rgba(0,0,0,0.15); }

.tabs .tab span { width:100%; display:block; font-size:1.8rem; line-height:2.4rem; }
.tabs .tab span em { font-size:2.8rem; font-style:normal; margin-left:0.5rem; }
.tabs .tab strong { width:100%; display:block; font-size:1.6rem; line-height:2.6rem; -ms-text-overflow:ellipsis; -o-text-overflow:ellipsis; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.tabs .tab strong em { width:100%; display:block; font-size:1.1rem; line-height:1.2rem; font-style:normal; font-weight:400; }
.tabs .tab strong u { text-decoration:none; }

.tabs .icon { width:3rem; height:2.5rem; position:relative; display:inline-block; margin:-0.5rem auto 0; }
.tabs .icon i { width:3rem; height:3rem; position:absolute; top:50%; left:50%; margin:-1.5rem 0 0 -1.5rem; display:block; font-size:3rem; line-height:3rem; -webkit-transition: transform 0.3s ease-in-out; -moz-transition: transform 0.3s ease-in-out; -o-transition: transform 0.3s ease-in-out; -ms-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; -moz-transform:rotateX(85deg); -ms-transform:rotateX(85deg); -o-transform:rotateX(85deg); -webkit-transform:rotateX(85deg); transform:rotateX(85deg); }
.tabs .tab.selected .icon i,
.tabs .tab:hover .icon i { -moz-transform:rotateX(0); -ms-transform:rotateX(0); -o-transform:rotateX(0); -webkit-transform:rotateX(0); transform:rotateX(0); }

.w80s { width:80%!important; margin:0 auto; }

/* ============================================================= */

.hands-content { width:100%; height:100%; position:relative; overflow:hidden; }
.hands-content .left-hand,
.hands-content .right-hand { width:100%; height:9rem; position:absolute; top:50%; -ms-transition:transform 0.7s ease-in-out 0.5s; -moz-transition:transform 0.7s ease-in-out 0.5s; -o-transition:transform 0.7s ease-in-out 0.5s; -webkit-transition:transform 0.7s ease-in-out 0.5s; transition:transform 0.7s ease-in-out 0.5s; }
.hands-content .left-hand { left:0; margin-top:-12.5rem; text-align:left; -moz-transform:translate3d(-100%,0,0); -ms-transform:translate3d(-100%,0,0); -o-transform:translate3d(-100%,0,0); -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); }
.hands-content .right-hand { left:0; margin-top:4rem; text-align:right; -moz-transform:translate3d(100%,0,0); -ms-transform:translate3d(100%,0,0); -o-transform:translate3d(100%,0,0); -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0); }
.slide.swiper-slide-active .hands-content .left-hand,
.slide.swiper-slide-active .hands-content .right-hand { -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }

.hands-content .left-hand img,
.hands-content .right-hand img { width:auto; height:100%; position:absolute; top:0; left:50%; }
.hands-content .left-hand img { margin-left:-20.2rem; }
.hands-content .right-hand img { margin-left:-11.5rem; }

.hands-content .show-clock { width:5rem; height:5rem; display:block; position:absolute; top:50%; left:50%; border-radius:50%; font-size:1.6rem; line-height:1.8rem; text-align:center; font-weight:normal; color:#111; padding-top:1rem; }
.hands-content .left-hand .show-clock { margin:-2.8rem 0 0 -2.6rem; }
.hands-content .right-hand .show-clock { margin:-2.6rem 0 0 -2.5rem; }
.hands-content .show-clock em { width:100%; display:block; font-style:normal; font-size:1rem; line-height:1rem; }

.data-hands-content { width:80%; opacity:0; position:absolute; top:50%; left:7%; z-index:20; font-weight:400; margin-top:-3.5rem; -ms-transition:opacity 0.5s ease-in-out 1s; -moz-transition:opacity 0.5s ease-in-out 1s; -o-transition:opacity 0.5s ease-in-out 1s; -webkit-transition:opacity 0.5s ease-in-out 1s; transition:opacity 0.5s ease-in-out 1s; }
.data-hands-content span { width:100%; display:block; font-size:4.4rem; line-height:4.4rem; }
.slide.swiper-slide-active .data-hands-content { opacity:1; }

/* ============================================================= */

.sales { width:100%; height:100%; position:relative; overflow:hidden; padding:0 7%; }
.sales-col { width:50%; height:100%; padding:2rem 1rem 9rem; position:relative; float:left; text-align:center; overflow:hidden; }

.sales-man { width:100%; height:100%; position:relative; overflow:hidden; background:#8ebd9b; }
.sales-man-graph { width:100%; height:100%; position:absolute; top:100%; left:0; z-index:22; background:#ffbd4d; -ms-transition:transform 0.7s ease-in-out 0.5s; -moz-transition:transform 0.7s ease-in-out 0.5s; -o-transition:transform 0.7s ease-in-out 0.5s; -webkit-transition:transform 0.7s ease-in-out 0.5s; transition:transform 0.7s ease-in-out 0.5s; }
.sales-col:nth-child(2) .sales-man-graph { background:#f16622; }
.sales-man-mask { width:100%; height:104%; position:absolute; top:-2%; left:0; z-index:23; background:transparent url(../svg/man-mask.svg) no-repeat 50% 50%; background-size:auto 100%; }

.swiper-slide-active .sales-col:nth-child(1) .sales-man-graph { -moz-transform:translate3d(0,-45%,0); -ms-transform:translate3d(0,-45%,0); -o-transform:translate3d(0,-45%,0); -webkit-transform:translate3d(0,-45%,0); transform:translate3d(0,-45%,0); }
.swiper-slide-active .sales-col:nth-child(2) .sales-man-graph { -moz-transform:translate3d(0,-55%,0); -ms-transform:translate3d(0,-55%,0); -o-transform:translate3d(0,-55%,0); -webkit-transform:translate3d(0,-55%,0); transform:translate3d(0,-55%,0); }

.sales-details { width:100%; position:absolute; left:0; bottom:2rem; }
.sales-details strong,
.sales-details span { width:100%; display:block; color:#111; font-size:1.2rem; line-height:1.6rem; }
.sales-details strong { font-size:2.6rem; line-height:3.4rem; }

/* ============================================================= */

.h50s { width:100%; height:50%; display:block; position:relative; overflow:hidden; background:#ff4e00; }
.box2 .h50s:nth-child(2) { background:#ffd985; }
.box2 .h50s:nth-child(1) p { color:#fff!important; }
.box2 .h50s:nth-child(2) p { color:#111!important; }

.box3 .h50s { background:transparent; }

/* ============================================================= */

.btn { width:100%; height:6rem; display:table; font-weight: 600; font-size:1.6rem; line-height:2rem; color:#fff; background:#000; text-align:center; text-transform:uppercase; cursor:pointer; -webkit-transition:background 0.3s ease-in-out; -moz-transition:background 0.3s ease-in-out; -o-transition:background 0.3s ease-in-out; -ms-transition:background 0.3s ease-in-out; transition:background 0.3s ease-in-out; }
.btn:hover { background:#ff1200; }

.btn-box .btn { height:100%; }
.btn.before-sales-data { font-size:1.2rem; line-height:1.8rem; font-weight:400; text-transform:none; padding:0 10%; }
.btn.trigger-traffic-report-overlay { font-size:1.4rem; line-height:2rem; }

.button { width:auto; height:3.5rem; display:inline-block; color:#fff; position:relative; font-weight:600; font-size:1.2rem; padding:0 2.5rem; line-height:3.5rem; text-transform:uppercase; font-family:'Open Sans', Arial; text-align:center; background:#e66414; border:none; cursor:pointer; border-radius:0.2rem; text-shadow:0 1px 1px rgba(0,0,0,0.2); box-shadow:0 0.2rem 0.5rem rgba(0,0,0,0.2); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
button.button,
input.button { line-height:inherit; }
.button:hover { background: #ff4e00; text-decoration: none; box-shadow:0 0.1rem 0.2rem rgba(0,0,0,0.1); }
.button:active { outline:none!important; }

.button.icon-left { padding-left:0.5rem; }
.button.icon-right { padding-right:0.5rem; }
.button.icon-left i,
.button.icon-right i { width:3.5rem; height:100%; display:inline-block; float:left; font-size:1.6rem; line-height:3.5rem; text-align:center; }
.button.icon-right i { float:right; }

/* ============================================================= */

.overlay { width:100%; height:100%; opacity:0; overflow:hidden; position:fixed; left:0; top:100%; z-index:500; background:rgba(0,0,0,0.6); }

.view-overlay-campaign .overlay-campaign,
.view-engagement-segment-row .overlay-engagement-segment,
.view-sales-form-overlay .overlay-sales-form,
.view-actions-overlay .overlay-actions,
/* adaugat de mine */
.view-picker-overlay .overlay-client-picker,
/* =============== */
.view-overlay-choose-path .overlay-choose-path,
.view-overlay-traffic-report .overlay-traffic-report,
.view-overlay-visitors-flow-area .overlay-visitors-flow-area { -webkit-animation: overlay-anim 0.5s ease forwards; -moz-animation: overlay-anim 0.5s ease forwards; -o-animation: overlay-anim 0.5s ease forwards; -ms-animation: overlay-anim 0.5s ease forwards; animation: overlay-anim 0.5s ease forwards; }

@-webkit-keyframes overlay-anim {
	0% { opacity:0; -webkit-transform:translate3d(0,0,0); }
    5% { opacity:0; -webkit-transform:translate3d(0,-100%,0); }
	100% { opacity:1; -webkit-transform:translate3d(0,-100%,0); }
}
@-moz-keyframes overlay-anim {
	0% { opacity:0; -moz-transform:translate3d(0,0,0); }
    5% { opacity:0; -moz-transform:translate3d(0,-100%,0); }
	100% { opacity:1; -moz-transform:translate3d(0,-100%,0); }
}
@-ms-keyframes overlay-anim {
	0% { opacity:0; -ms-transform:translate3d(0,0,0); }
    5% { opacity:0; -ms-transform:translate3d(0,-100%,0); }
	100% { opacity:1; -ms-transform:translate3d(0,-100%,0); }
}
@-o-keyframes overlay-anim {
	0% { opacity:0; -o-transform:translate3d(0,0,0); }
    5% { opacity:0; -o-transform:translate3d(0,-100%,0); }
	100% { opacity:1; -o-transform:translate3d(0,-100%,0); }
}
@keyframes overlay-anim {
	0% { opacity:0; transform:translate3d(0,0,0); }
    5% { opacity:0; transform:translate3d(0,-100%,0); }
	100% { opacity:1; transform:translate3d(0,-100%,0); }
}
/* adaugat de mine */
.loader {will-change:opacity; width:100%; height:100%; opacity:0; overflow:hidden; position:fixed; left:0; top:100%; z-index:500; background:rgba(0,0,0,0.6); transition: opacity 0.3s ease-in; text-align: center; }
.swiper-slide .loader { position:absolute; pointer-events: none; background:rgba(0,0,0,0.3); }
.loader.show { opacity: 1; top:0;}
.swiper-slide .loader.show { pointer-events: all; opacity: 1; top:0;}
.loader span {color: #fff;
	    display: inline-block;
	    top: 50%;
	    left: 50%;
	    position: absolute;
	    -moz-transform:translate(-50%,-50%); 
	    -ms-transform:translate(-50%,-50%);
	    -o-transform:translate(-50%,-50%);
	    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    font-size: 2rem; }
/* ============== */
.overlay-content { width:30rem; height:26rem; opacity:0; position:absolute; top:50%; left:50%; margin:-13rem 0 0 -15rem; background:#fff; -webkit-transition: transform 0.5s ease-out 0.5s, opacity 0.5s ease-out 0.5s; -moz-transition: transform 0.5s ease-out 0.5s, opacity 0.5s ease-out 0.5s; -o-transition: transform 0.5s ease-out 0.5s, opacity 0.5s ease-out 0.5s; -ms-transition: transform 0.5s ease-out 0.5s, opacity 0.5s ease-out 0.5s; transition: transform 0.5s ease-out 0.5s, opacity 0.5s ease-out 0.5s; -moz-transform:scale(0.5); -ms-transform:scale(0.5); -o-transform:scale(0.5); -webkit-transform:scale(0.5); transform:scale(0.5); }
.overlay-engagement-segment .overlay-content { width:50rem; height:22rem; margin:-11rem 0 0 -25rem; }
.overlay-sales-form .overlay-content { width:30rem; height:33rem; margin:-16.5rem 0 0 -15rem; }
.overlay-choose-path .overlay-content { width:40rem; height:34rem; margin:-17rem 0 0 -20rem; }
.overlay-traffic-report .overlay-content { width:75rem; height:52rem; margin:-26rem 0 0 -37.5rem; }
.overlay-visitors-flow-area .overlay-content { width:46rem; height:36rem; margin:-18rem 0 0 -23rem; }

.view-overlay-campaign .overlay-campaign .overlay-content,
.view-engagement-segment-row .overlay-engagement-segment .overlay-content,
.view-sales-form-overlay .overlay-sales-form .overlay-content,
.view-actions-overlay .overlay-actions .overlay-content,
/* adaugat de mine */
.view-picker-overlay .overlay-client-picker .overlay-content,
/* =============== */
.view-overlay-choose-path .overlay-choose-path .overlay-content,
.view-overlay-traffic-report .overlay-traffic-report .overlay-content,
.view-overlay-visitors-flow-area .overlay-visitors-flow-area .overlay-content { opacity:1; -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); }

.overlay-header { width:100%; height:4rem; position:relative; overflow:hidden; background:#f1f1f1; padding:0 5rem 0 1.5rem; }
.overlay-traffic-report .overlay-header { height:5rem; background:#fff; text-align:center; }
.overlay-header h3 { font-size:1.4rem; line-height:4rem; font-weight:600; color:#111; }
.overlay-traffic-report .overlay-header h3 { line-height:6rem; }
.overlay-header .close-overlay { width:4rem; height:4rem; position:absolute; top:0; right:0; display:block; font-size:1.4rem; line-height:4rem; text-align:center; color:rgba(0,0,0,0.3); cursor:pointer; -webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -ms-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; transition: color 0.3s ease-in-out, background 0.3s ease-in-out; }
.overlay-header .close-overlay:hover { color:#fff; background:#ff4e00; }

/* am adaugat eu */
.overlay-client-picker .actions-btns {overflow-y: scroll;}
/* ============= */

.campaign-btns { width:100%; height:22rem; overflow:hidden; /*padding:0 1.5rem;*/ }
.campaign-btns a,
.actions-btns a { width:100%; height:50%; display:block; position:relative; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; background-size:auto 80%; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; }
.campaign-btns a:hover,
.actions-btns a:hover { background-color:rgba(0,0,0,0.1); }
.campaign-btns a.fb-btn { background-image:url(../img/facebook-btn.png); background-size:auto 70%; border-bottom:1px solid rgba(0,0,0,0.1); }
.campaign-btns a.gg-btn { background-image:url(../img/google-btn.png); }
.campaign-btns a .icon-ed-arrow-right-3,
.actions-btns a .icon-ed-arrow-right-3  { width:1.4rem; height:2rem; position:absolute; top:50%; right:1.4rem; margin-top:-1rem; display:block; color:rgba(0,0,0,0.1); font-size:1.6rem; line-height:2rem; text-align:center; -webkit-transition: color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; -ms-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; }
.campaign-btns a:hover .icon-ed-arrow-right-3,
.actions-btns a:hover .icon-ed-arrow-right-3 { color:#ff4e00; }

.actions-btns { width:100%; height:22rem; overflow:hidden; }
.actions-btns a { height:33.3333%; display:table; border-bottom:1px solid #f1f1f1; padding:0 0 0 7.5rem; }
.actions-btns a:last-of-type { border:none; }
.actions-btns a strong { width:100%; height:100%; display:table-cell; vertical-align:middle; font-weight:400; font-size:1.1rem; color:#333; }
.actions-btns .circle-icon { width:4rem; height:4rem; position:absolute; top:50%; left:2.5rem; margin-top:-2rem; color:#fff; background:#ff4e00; border-radius:50%; text-align:center; font-size:1.8rem; line-height:4rem; }

/* ============================================================= */

.graph-traffic-legend { width:auto; height:1.5rem; position:absolute; left:4rem; bottom:3.5rem; z-index:90; opacity:0; overflow:hidden; -webkit-transition: opacity 0.5s ease-in-out 1s; -moz-transition: opacity 0.5s ease-in-out 1s; -o-transition: opacity 0.5s ease-in-out 1s; -ms-transition: opacity 0.5s ease-in-out 1s; transition: opacity 0.5s ease-in-out 1s; }
.swiper-slide-active .graph-traffic-legend { opacity:1; }

.graph-traffic-legend em { width:auto; height:1.5rem; display:inline-block; float:left; font-size:1rem; line-height:1.5rem; font-style:normal; margin-right:0.5rem; }

.graph-traffic-legend-colors { width:15.9rem; height:1.5rem; float:left; overflow:hidden; margin-right:0.5rem; }
.graph-traffic-legend-colors span { width:1.5rem; height:1.5rem; float:left; display:block; margin-right:0.1rem; }
.graph-traffic-legend-colors span:last-child { margin-right:0; }
.graph-traffic-legend-colors span:nth-child(1) { background-color:#ffd985; }
.graph-traffic-legend-colors span:nth-child(2) { background-color:#ffcd67; }
.graph-traffic-legend-colors span:nth-child(3) { background-color:#f9b03a; }
.graph-traffic-legend-colors span:nth-child(4) { background-color:#ffa300; }
.graph-traffic-legend-colors span:nth-child(5) { background-color:#ff8b00; }
.graph-traffic-legend-colors span:nth-child(6) { background-color:#ff6700; }
.graph-traffic-legend-colors span:nth-child(7) { background-color:#ff4e00; }
.graph-traffic-legend-colors span:nth-child(8) { background-color:#ff3600; }
.graph-traffic-legend-colors span:nth-child(9) { background-color:#ff1200; }
.graph-traffic-legend-colors span:nth-child(10) { background-color:#e00b00; }

/* ============================================================= */

.engagement-segments-change { width:100%; height:4rem; position:absolute; left:0; bottom:13rem; padding:0 5rem; }
.engagement-segments-change.benchmark { bottom:7.5rem; }

.engagement-segments-change p { width:100%; height:2rem; font-size:1.1rem; line-height:1.5rem; }

.engagement-segments-change ul { width:100%; height:2rem; overflow:hidden; }
.engagement-segments-change ul li { width:10%; height:100%; float:left; border-right:1px solid #fff; font-size:1rem; font-weight:600; line-height:2rem; text-align:center; color:#111; }
.engagement-segments-change ul li:last-of-type { border-right:none; }

.extremely-low,
.extremely-high { background:#ffd985; }
.very-low,
.very-high { background:#ffc166; }
.low,
.high { background:#ffa300; }
.low-average,
.high-average { background:#ff4e00; }
.average { background:#ff1200; }

.engagement-segment-row { width:100%; height:10%; display:table; position:relative; overflow:hidden; padding:0 1.5rem; background:#e8e8e8; cursor:pointer; }
.engagement-segment-row:nth-child(2n) { background:#d8d8d8; }

.engagement-segment-description { padding:1.5rem 1.5rem 0.5rem; background:#e8e8e8; }

.esr-header { width:100%; height:1.5rem; overflow:hidden; }
.esr-header span { display:inline-block; font-size:1rem; line-height:1.4rem; font-weight:600; color:#1e1e1e; }

.esr-box { width:100%; height:1.6rem; position:relative; overflow:hidden; padding-left:8rem; }
.esr-label { width:8rem; height:100%; display:block; position:absolute; top:0; left:0; font-size:1rem; line-height:1.6rem; color:#1e1e1e; }

.esr-graph { width:100%; height:100%; position:relative; overflow:hidden; padding:0 5rem; }
.esr-lw-results,
.esr-benchmark-difference { width:5rem; height:100%; display:block; position:absolute; top:0; left:0; font-size:1rem; line-height:1.6rem; font-weight:600; color:#1e1e1e; text-align:right; padding-right:0.5rem; }
.esr-benchmark-difference { left:auto; right:0; text-align:center; background:#f1f1f1; padding:0; }

.esr-channel { width:100%; height:100%; position:relative; overflow:hidden; background:#f1f1f1; border-top:0.2rem solid #f1f1f1; border-bottom:0.2rem solid #f1f1f1; border-left:0.1rem solid #f1f1f1; }
.esr-box.esr-prev-week .esr-channel { background:transparent; border-color:transparent; }

.esr-channel-data-benchmark,
.esr-channel-data-benchmark-line { width:100%; height:100%; position:absolute; top:0; left:100%; background:#d8d8d8; -webkit-transition: transform 0.7s ease-in-out 0.3s; -moz-transition: transform 0.7s ease-in-out 0.3s; -o-transition: transform 0.7s ease-in-out 0.3s; -ms-transition: transform 0.7s ease-in-out 0.3s; transition: transform 0.7s ease-in-out 0.3s; }
.engagement-segment-row:nth-child(2n) .esr-channel-data-benchmark { background:#d8d8d8; }

.esr-channel-data-benchmark { background:#fff; }

.esr-channel-data-benchmark-line u { width:1px; height:100%; position:absolute; top:0; left:0; display:block; background:#666; }
.esr-channel-data-benchmark-line u:before { width:5px; height:85%; display:block; position:absolute; top:0; left:-2px; content:""; border-top:1px solid #666; border-bottom:1px solid #666; }

.esr-channel-data { width:100%; height:0.8rem; position:absolute; top:0.2rem; right:100%; background:#ff4e00; -webkit-transition: transform 0.7s ease-in-out 0.3s; -moz-transition: transform 0.7s ease-in-out 0.3s; -o-transition: transform 0.7s ease-in-out 0.3s; -ms-transition: transform 0.7s ease-in-out 0.3s; transition: transform 0.7s ease-in-out 0.3s; }
.esr-box.esr-prev-week .esr-channel-data { background:#ffc166; }

.engagement-segment-row .icon-ed-export-as { width:0.8rem; height:0.8rem; opacity:0; position:absolute; top:0.2rem; right:0.2rem; display:block; font-size:0.8rem; line-height:0.8rem; text-align:center; color:#666; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; }
.engagement-segment-row:hover .icon-ed-export-as { opacity:1; }

.overlay-engagement-segment .engagement-segment-row { height:10.5rem; }
.overlay-engagement-segment .engagement-segment-row .table-cell { padding-bottom:1rem; }
.overlay-engagement-segment .esr-header { height:2rem; }
.overlay-engagement-segment .esr-header span { font-size:1.1rem; }
.overlay-engagement-segment .esr-box { height: 2rem; margin-bottom:1rem; padding-left:10rem; }
.overlay-engagement-segment .esr-label { width: 10rem; font-size:1.1rem; line-height:2rem; }
.overlay-engagement-segment .esr-graph { padding:0 7rem; }
.overlay-engagement-segment .esr-lw-results,
.overlay-engagement-segment .esr-benchmark-difference { width: 7rem; font-size:1.1rem; line-height:2rem; }
.overlay-engagement-segment .esr-channel-data { height:1.2rem; }
.overlay-engagement-segment .esr-channel-data-benchmark-line u:before { height:90%; }

/* ============================================================= */

.sales-form { width:100%; padding:1rem 1.5rem; }

.sales-form-header { width:100%; overflow:hidden; margin-bottom:1rem; }
.sales-form-header span { width:50%; height:100%; display:inline-block; font-size:1.1rem; line-height:2rem; color:#666; text-align:center; }

.sales-form p { width:100%; overflow:hidden; margin:0 auto 0.3rem; }
.sales-form p:last-of-type { margin-bottom:0; padding-top:0.7rem; }
.sales-form label { width:49.5%; height:2.5rem; float:left; display:inline-block; font-size:1.1rem; line-height:2.5rem; color:#333; text-align:center; background:#f1f1f1; -webkit-transition:background 0.3s ease-in-out; -moz-transition:background 0.3s ease-in-out; -o-transition:background 0.3s ease-in-out; -ms-transition:background 0.3s ease-in-out; transition:background 0.3s ease-in-out; }
.sales-form input { width:49.5%; height:2.5rem; float:right; font-family: 'Open Sans', Arial, sans-serif; font-size:1.1rem; color:#333; text-align:center; border:1px solid #f1f1f1; -webkit-transition:border 0.3s ease-in-out; -moz-transition:border 0.3s ease-in-out; -o-transition:border 0.3s ease-in-out; -ms-transition:border 0.3s ease-in-out; transition:border 0.3s ease-in-out; }
.sales-form input:hover,
.sales-form input:focus { border-color:#d8d8d8; }
.sales-form button { width:100%; height:3rem; display:block; font-weight: bold; margin:0 auto; font-size:1.1rem; line-height:inherit; color:#fff; background:#000; text-align:center; text-transform:uppercase; cursor:pointer; border:0; -webkit-transition:background 0.3s ease-in-out; -moz-transition:background 0.3s ease-in-out; -o-transition:background 0.3s ease-in-out; -ms-transition:background 0.3s ease-in-out; transition:background 0.3s ease-in-out; }
.sales-form button:hover { background:#ff4e00; }

.sales-form .error label { background:rgba(255,18,0,0.3); }
.sales-form .error input { border-color:rgba(255,18,0,0.3); }

.individual-path-analysis-graph { width:100%; height:100%; position:relative; padding: 3rem 5rem; text-align:center; }
.individual-path-analysis-graph img, .individual-path-analysis-graph svg { /*width: 100%; height: 100%;*/ margin:0 auto; }

.path-analysis-list { width:100%; height:auto; }
.path-analysis-list li { width:100%; height:7.5rem; position:relative; background:#e8e8e8; overflow:hidden; padding:0 1rem 0 11rem; }
.path-analysis-list li:nth-child(2n) { background:#fff; }

.pal-pictogram { width:9rem; height:100%; position:absolute; top:0; left:1rem; }
.pal-timeline { width:1px; height:100%; position:absolute; top:0; left:50%; margin-left:0; border-left:1px dashed #ff4e00; }
.path-analysis-list li:first-child .pal-timeline { top:50%; }
.path-analysis-list li:last-child .pal-timeline { top:auto; bottom:50%; }

.pal-point { width:2.2rem; height:2.2rem; position:absolute; top:50%; left:50%; margin:-1.1rem 0 0 -1.1rem; background:transparent url(../svg/map-pin-1.svg) no-repeat 50% 50%; background-size:100% 100%; z-index:2; }
.path-analysis-list li:first-child .pal-point,
.path-analysis-list li:last-child .pal-point { background-image: url(../svg/map-pin-0.svg); background-size:100% 100%; }

.pal-logo { width:8rem; height:5.5rem; top:1rem; left:0.5rem; position:absolute; background:#fff; border-radius:0.6rem; text-align:center; z-index:3; text-align:center; overflow:hidden; }
.pal-logo i { width:100%; height:100%; display:block; font-size:3rem; line-height:5.5rem; text-align:center; color:#ff4e00; }
.pal-logo i.icon-ed-path-pin-5 { font-size:3.6rem; }
.pal-logo img { width:auto; height:3.5rem; margin:1rem auto 0; }

.path-analysis-list .table-cell p { font-size:1.1rem; line-height:1.6rem; margin:0; }
.path-analysis-list .table-cell p strong { width:100%; display:block; }
.path-analysis-list li:nth-child(2n-1) .table-cell p strong { padding-bottom:0.2rem; color:#ff4200; }

/* ============================================================= */

.choose-path-box { width:100%; height:30rem; position:relative; overflow:hidden; }

.choose-path-search { width:34rem; height:3rem; position:absolute; top:50%; left:50%; margin:-4rem 0 0 -17rem; z-index:16; overflow:hidden; padding-right:8rem; -webkit-transition:transform 0.3s ease-in-out; -moz-transition:transform 0.3s ease-in-out; -o-transition:transform 0.3s ease-in-out; -ms-transition:transform 0.3s ease-in-out; transition:transform 0.3s ease-in-out; }
.choose-path-search.move-choose-path-search { -moz-transform:translate3d(0,-9rem,0); -ms-transform:translate3d(0,-9rem,0); -o-transform:translate3d(0,-9rem,0); -webkit-transform:translate3d(0,-9rem,0); transform:translate3d(0,-9rem,0); }

.choose-path-form { width:100%; height:100%; overflow:hidden; }
.choose-path-form fieldset { width:100%; height:100%; overflow:hidden; position:relative; border:none; }
.choose-path-form input { width:100%; height:3rem; float:right; font-family: 'Open Sans', Arial, sans-serif; font-size:1.1rem; color:#333; text-align:left; border:2px solid #f1f1f1; padding:0 3rem 0 1.5rem; -webkit-transition:border 0.3s ease-in-out; -moz-transition:border 0.3s ease-in-out; -o-transition:border 0.3s ease-in-out; -ms-transition:border 0.3s ease-in-out; transition:border 0.3s ease-in-out; }
.choose-path-form input:hover,
.choose-path-form input:focus { border-color:#d8d8d8; }
.choose-path-form button { width:3rem; height:3rem; position:absolute; top:0; right:0; border:none; background:none; cursor:pointer; color:#666; -webkit-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -moz-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -o-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -ms-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; transition:color 0.3s ease-in-out, background 0.3s ease-in-out; }
.choose-path-form button:hover { background:#ff4e00; color:#fff; }
.choose-path-form button i { width:100%; height:100%; display:block; font-size:1.1rem; text-align:center; line-height:2.9rem; }

.choose-path-search .see-all-paths { width:8rem; height:3rem; display:block; position:absolute; top:0; right:0; background: #f1f1f1; font-size:1.1rem; line-height:3rem; text-align:right; padding-right:3rem; cursor:pointer; -webkit-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -moz-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -o-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -ms-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; transition:color 0.3s ease-in-out, background 0.3s ease-in-out; color:#333; }
.choose-path-search .see-all-paths:hover,
.choose-path-search .see-all-paths.active { background:#ff4e00; color:#fff; }
.choose-path-search .see-all-paths i { width:1rem; height:3rem; position:absolute; top:0; right:1.5rem; font-size:1rem; line-height:3rem; text-align:center; -webkit-transition:transform 0.3s ease-in-out; -moz-transition:transform 0.3s ease-in-out; -o-transition:transform 0.3s ease-in-out; -ms-transition:transform 0.3s ease-in-out; transition:transform 0.3s ease-in-out; }
.choose-path-search .see-all-paths.active i { -moz-transform:rotateX(180deg); -ms-transform:rotateX(180deg); -o-transform:rotateX(180deg); -webkit-transform:rotateX(180deg); transform:rotateX(180deg); }

button.apply-choose-path-search { width:12rem; height:3rem; position:absolute; left:50%; bottom:2rem; margin-left:-6rem; display:block; font-weight: bold; font-size:1.1rem; line-height:inherit; color:#fff; background:#000; text-align:center; text-transform:uppercase; cursor:pointer; border:0; -webkit-transition:background 0.3s ease-in-out; -moz-transition:background 0.3s ease-in-out; -o-transition:background 0.3s ease-in-out; -ms-transition:background 0.3s ease-in-out; transition:background 0.3s ease-in-out; }
button.apply-choose-path-search:hover { background:#ff4e00; }

.choose-path-search-autocomplete { width:34rem; height:0; position:absolute; top:50%; left:50%; margin-left:-17rem; margin-top:0; z-index:15; background:#f1f1f1; overflow:hidden; -webkit-transition:height 0.3s ease-in-out, margin 0.3s ease-in-out; -moz-transition:height 0.3s ease-in-out, margin 0.3s ease-in-out; -o-transition:height 0.3s ease-in-out, margin 0.3s ease-in-out; -ms-transition:height 0.3s ease-in-out, margin 0.3s ease-in-out; transition:height 0.3s ease-in-out, margin 0.3s ease-in-out; }
.choose-path-search-autocomplete.active { height:23rem; margin-top:-10rem; }

.choose-path-search-autocomplete ul { width:100%; }
.choose-path-search-autocomplete ul li { width:100%; height:3rem; color:#333; }
.choose-path-search-autocomplete ul > li:nth-child(2n) { background:#e0e0e0; }
.choose-path-search-autocomplete ul li.cat { height:auto; }
.choose-path-search-autocomplete ul li p { width:100%; height:3rem; font-size:1.1rem; line-height:3rem; overflow:hidden; -ms-text-overflow:ellipsis; -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; }
.choose-path-search-autocomplete ul li ul li,
.choose-path-search-autocomplete ul li ul li:nth-child(2n) { background:transparent; }

.choose-path-search-autocomplete ul li a,
.choose-path-search-autocomplete ul li strong { width:100%; display:block; color:#333; font-size:1.1rem; line-height:3rem; padding:0 1.5rem; -webkit-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -moz-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -o-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; -ms-transition:color 0.3s ease-in-out, background 0.3s ease-in-out; transition:color 0.3s ease-in-out, background 0.3s ease-in-out; }
.choose-path-search-autocomplete ul li ul li a { padding-left:3rem; }
.choose-path-search-autocomplete ul li a:hover { background:#e66414; color:#fff; }

/* ============================================================= */

.archive-sidebar { width:46rem; height:100%; position:fixed; top:0; left:0rem; background:transparent; padding:6rem 0 0; }

.archive-sidebar h2 { width:100%; height:5.5rem; position:fixed; top:0; left:0rem; padding:2rem 3rem 0; color:#ff4e00; font-size:1.8rem; line-height:2rem; }

.archive-sidebar-content { width:100%; height:100%; position:relative; overflow:hidden; }

.archive-sidebar-content a { width:100%; padding:0.7rem 3rem; display:block; color:#111; font-size:1.2rem; line-height:1.8rem; background:#e2e2e2; margin:0 auto 1px; -moz-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out; transition: color 0.3s ease-in-out, background 0.3s ease-in-out; } 
.archive-sidebar-content a:nth-child(2n) { background:#f6f6f6; }
.archive-sidebar-content a.selected,
.archive-sidebar-content a:hover { color:#fff; background:#e66414; }

.slide-img { width:100%; height:auto; margin:0 auto; padding:0 6rem 3rem; }
.slide-img img { width:100%; height:auto; margin:0 auto; box-shadow:0 0 1rem rgba(0,0,0,0.2); }

.slide-img-details { padding:0 6rem; }
.slide-img-details h3 { margin:0 auto 1rem; overflow:hidden; color:#111; font-size:2rem; line-height:2.6rem; font-weight:700; }
.slide-img-details p { margin:0 auto 2rem; font-size:1.2rem; line-height:1.8rem; color:#666; }

/* ============================================================= */

.dictionary .main-title { padding-left:6.5rem; }

.dictionary-slider .slider-arrow { top:0.4rem; bottom:5.4rem; }

.dictionary-slider .slide a { width:25%; height:50%; float:left; position:relative; overflow:hidden; margin:0; background:#fff; color:#111; border:0.4rem solid #f1f1f1; padding:0.3rem; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.dictionary-slider .slide a:hover { background:#e66414; color:#fff; }

.dictionary-slider .ds-img { width:100%; height:auto; margin:0 auto 1rem; }
.dictionary-slider .ds-title,
.dictionary-slider .ds-summary { width:100%; display:block; padding:0 1.5rem; overflow:hidden; }
.dictionary-slider .ds-title { font-size:1.4rem; line-height:2rem; margin-bottom:0.5rem; font-weight:700; }
.dictionary-slider .ds-summary { /*max-height:5.2rem;*/ max-height:50%; font-size:1.2rem; line-height:1.8rem; }

.dictionary-wrapper { width:50%; height:100%; position:fixed; top:0; left:0rem; background:transparent; padding:6rem 0 2.5rem; }
.dictionary-wrapper h2 { width:100%; height:5.5rem; position:fixed; top:0; left:0rem; padding:2rem 3rem 0; color:#ff4e00; font-size:1.8rem; line-height:2rem; }
.dictionary-wrapper .scroll-bar { padding:0 3rem; }

.dictionary-content { width:100%; height:100%; position:relative; overflow:hidden; }
.dictionary-content p { font-size:1.2rem; line-height:2rem; margin-bottom:1rem; }
.dictionary-content p strong { font-weight:600; }

.dictionary-content h1,
.dictionary-content h2,
.dictionary-content h3,
.dictionary-content h4,
.dictionary-content h5,
.dictionary-content h6 { font-size:1.2rem; line-height:2.2rem; margin-bottom:1rem; padding-top:1rem; }

/* ============================================================= */

.credits-status .content { padding:0 6rem 3rem; }

.cs-sidebar { width:30%; height:100%; float:left; position:relative; background:#fff; border-right:0.5rem solid #f1f1f1; }
.cs-sidebar li { width:100%; height:20%; position:relative; padding:0 2rem; border-bottom:1px solid rgba(0,0,0,0.2); overflow:hidden; }
.cs-sidebar li:first-of-type { padding-left:9.5rem; }
.cs-sidebar li:last-of-type { border:none; }

.cs-sidebar-logo { width:6rem; height:6rem; position:absolute; top:50%; left:2rem; margin-top:-3rem; }
.cs-sidebar h3 { font-size:1.2rem; color:#111; font-weight:600; line-height:1.6rem; text-transform:uppercase; }
.cs-sidebar p { font-size:1.5rem; color:#111; line-height:2rem; margin-bottom:0.5rem; }
.cs-sidebar span { width:100%; display:block; font-size:3.8rem; color:#333; line-height:4rem; font-weight:400; }

.cs-content { width:70%; height:100%; float:right; position:relative; }

.table-ul.credits-status-list ul { table-layout:auto; }
.table-ul.credits-status-list ul li { width:17%; display:block; float:left; text-align:center; }
.table-ul.credits-status-list ul li:nth-child(1) { width:23%; text-align:left; }
.table-ul.credits-status-list ul li:nth-child(2) { width:26%; text-align:left; }

/* ============================================================= */

.table-ul { width:100%; height:auto; }
.table-ul > li { width:100%; height:auto; position:relative; margin:0; padding:0; background:#e8e7e7; }
.table-ul > li:nth-child(2n) { background:#d6d6d6; }
.table-ul > li strong { width:100%; display:block; font-weight:400; font-size:1.1rem; line-height:1.6rem; -ms-text-overflow:ellipsis; -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.table-ul > li.table-ul-header { background:#fff; border-bottom:1px solid transparent; }
.table-ul > li.table-ul-header strong { font-weight:600; }
.table-ul ul { width:100%; height:100%; display:table; /*table-layout:fixed;*/ position:relative; overflow:hidden; padding:0 1rem; }
.table-ul ul li { width:auto; height:100%; display:table-cell; padding:1.5rem 0.5rem 1.5rem 0; overflow:hidden; }

.table-ul > li.selected { background: rgba(125,125,125,0.1); color:#e66414; }

/* ============================================================= */

.list { width:100%; height:auto; margin:0 auto 2rem; padding:0; }
.list li { width:100%; font-size:1.2rem; position:relative; padding-left:2.5rem; line-height:2rem; color:#111; margin-bottom:0.5rem; overflow:hidden; text-align:center; text-align:left; border:none!important; }
.list li:before { width:6px; height:6px; position:absolute; top:0.7rem; left:1rem; content:''; border-radius:50%; background:#ff4e00; padding:0; margin:0; line-height:0; }

.list li .list { padding-top:0.5rem; margin-bottom:0.5rem; }
.list li .list li:before { background:rgba(0,0,0,0.3); }

.list li a { color:#ff4e00; text-decoration:underline; -webkit-transition: color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; -ms-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; }
.list li a:hover { text-decoration:underline; }

/* ============================================================= */
/* modificat din span in a */
.switcher { width:12rem; height:2.4rem; position:absolute; top:1.7rem; right:7rem; background:#dbdbdb; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.1) inset; border-radius:0.3rem; }
.switcher a { color:#666; width:50%; height:100%; float:left; display:block; position:relative; z-index:9; cursor:pointer; border-radius:0.3rem; font-size:1rem; line-height:2.4rem; text-align:center; text-transform:uppercase; font-weight:400; padding:0; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.switcher.switch-to-month a:nth-child(2):hover,
.switcher a:nth-child(3):hover { color:#ff4e00; }
.switcher a:nth-child(2),
.switcher.switch-to-month a:nth-child(3) { color:#fff; }
.switcher.switch-to-month a:nth-child(2) { color:#666; text-shadow:none; }
.switcher-bg { width:50%; height:100%; position:absolute; top:0; left:0; z-index:8; background:#ff4e00; border-radius:0.3rem; color:#fff; box-shadow:0 0.1rem 0.2rem rgba(0,0,0,0.2); -moz-transition: transform 0.3s ease-out; -o-transition: transform 0.3s ease-out; -webkit-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; }
.switch-to-month .switcher-bg { -moz-transform:translate3d(100%,0,0); -ms-transform:translate3d(100%,0,0); -o-transform:translate3d(100%,0,0); -webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0); }

.header .switcher { height:3rem; top:1.5rem; right:2rem; }
.header .switcher a { line-height:3rem; }

.archive .switcher { right:3rem; }

/* ============================================================= */

.graph-grid-cols { width:100%; height:2rem; position:absolute; left:0; bottom:0; overflow:hidden; display:table; table-layout:fixed; opacity:0; transition: opacity 0.5s ease-in-out 1.2s; }
.swiper-slide-active .graph-grid-cols { opacity:1; }
.graph-grid-cols li { width:auto; height:100%; display:table-cell; position:relative; text-align:center; color: #888; font-size:0.8rem; line-height:2rem; overflow:hidden; }

/* ============================================================= */

.scrollbar,
.breadcrumb-list,
.breadcrumb-list ul,
.breadcrumb-list-full ul { width:100%; height:100%; overflow-x:hidden; overflow-y:auto; }

.scrollbar::-webkit-scrollbar-track,
.breadcrumb-list::-webkit-scrollbar-track
.breadcrumb-list ul::-webkit-scrollbar-track,
.breadcrumb-list-full ul::-webkit-scrollbar-track { background-color:transparent;  }
.scrollbar::-webkit-scrollbar,
.breadcrumb-list::-webkit-scrollbar,
.breadcrumb-list ul::-webkit-scrollbar,
.breadcrumb-list-full ul::-webkit-scrollbar { width: 0.3rem; background-color: transparent; }
.scrollbar::-webkit-scrollbar-thumb,
.breadcrumb-list::-webkit-scrollbar-thumb,
.breadcrumb-list ul::-webkit-scrollbar-thumb,
.breadcrumb-list-full ul::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.1); -moz-transition: background 0.3s ease-out; -o-transition: background 0.3s ease-out; -webkit-transition: background 0.3s ease-out; transition: background 0.3s ease-out; border-radius:.4rem; }
.scrollbar::-webkit-scrollbar-thumb:hover,
.breadcrumb-list::-webkit-scrollbar-thumb:hover,
.breadcrumb-list ul::-webkit-scrollbar-thumb:hover,
.breadcrumb-list-full ul::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,.3); }

/* ============================================================= */

.scroll-bar { width:100%; height:100%; overflow-x:hidden; overflow-y:auto; }

.scroll-bar::-webkit-scrollbar-track { background-color: transparent; }
.scroll-bar::-webkit-scrollbar { width: 0.4rem; background-color: transparent; }
.scroll-bar::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.3); -moz-transition: background 0.3s ease-out; -o-transition: background 0.3s ease-out; -webkit-transition: background 0.3s ease-out; transition: background 0.3s ease-out; }
.scroll-bar::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.5); }

/*
.scroll-bar .mCSB_container { padding:0; }
.scroll-bar .mCSB_scrollTools { width:0.3rem; right:0.3rem; }
.scroll-bar .mCSB_scrollTools .mCSB_draggerRail { background-color: rgba(0,0,0,0);	 }
.scroll-bar .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: rgba(0,0,0,0.2); border-radius: 0.2rem;	filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; }
.scroll-bar .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: rgba(0,0,0,0.4); filter: "alpha(opacity=60)"; -ms-filter: "alpha(opacity=60)"; }
*/

/* ============================================================= */

.color-10 { background-color:#ffd985; }
.color-20 { background-color:#ffcd67; }
.color-30 { background-color:#f9b03a; }
.color-40 { background-color:#ffa300; }
.color-50 { background-color:#ff8b00; }
.color-60 { background-color:#ff6700; }
.color-70 { background-color:#ff4e00; }
.color-80 { background-color:#ff3600; }
.color-90 { background-color:#ff1200; }
.color-100 { background-color:#e00b00; }

/* ============================================================= */

.box-title { width:auto; position:absolute; top:1.5rem; left:2rem; right:2rem; color:#111; font-size: 1.4rem; line-height:1.6rem; }

/* ============================================================= */

.hourly-traffic-legend { width:100%; height:2.4rem; position:absolute; top:0; left:0; background:#fff; overflow:hidden; }
.hourly-traffic-legend strong,
.hourly-traffic-legend span { display:inline-block; float:left; font-size:1rem; line-height:2.4rem; color:#000; padding:0; overflow:hidden; margin-right:1.5rem; }
.hourly-traffic-legend strong { color:#fff; background:#000; margin-right:2rem; padding:0 1rem; }
.hourly-traffic-legend em { width:1.2rem; height:1.2rem; float:left; display:block; border-radius:50%; margin:0.6rem 0.5rem 0 0;  }
.hourly-traffic-legend span:nth-child(2) em { background:#f28827; }
.hourly-traffic-legend span:nth-child(3) em { background:#c60c58; }
.hourly-traffic-legend span:nth-child(4) em { background:#e00b00; }

.hourly-traffic-graphic { width:100%; height:100%; overflow:hidden; }
.hourly-traffic-graphic img { width:auto; height:100%; }

/* ============================================================= */

.form { width:100%; position:relative; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
.form fieldset { width:100%; height:100%; border:none; position:relative; }
input, select, textarea, .form input, .form select, .form textarea { width:100%; height:3.5rem; color:#111; font-weight:normal; font-size: 1.2rem; font-family: 'Open Sans', Arial, sans-serif; border-radius:0!important; box-shadow:none!important; border:1px solid #333; padding:0 1rem; background:rgba(255,255,255,0.1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.form select, .form select option { padding:0 0 0 1rem; }
.form select option { background:rgba(0,0,0,0.8); border:none; padding:0.5rem 1rem; }

input:hover, select:hover, textarea:hover, input:focus, select:focus, textarea:focus, input:active, select:active, textarea:active { outline:none; box-shadow:none; background:rgba(255,255,255,0.2); border-color:#111; }
.form p { margin:0 0 1rem; padding:0 0 0 37%; position:relative; }

.form p label { width:35%; height:3.5rem; display:inline-block; position:absolute; top:0; left:0; color:#bfbfbf; font-weight:normal; font-size: 1.2rem; line-height:3.5rem; font-family: 'Open Sans', Arial, sans-serif; -ms-text-overflow:ellipsis; -o-text-overflow:ellipsis; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; text-shadow:0 1px 1px rgba(0,0,0,0.5); }

.form .error input, .form .error select, .form .error textarea, .login-form input.error { border-color:rgba(236,50,50,0.8); background:rgba(236,50,50,0.2); }
.form .error label, .form .error span, .form .error span:hover, .form .error span.active { color:rgba(236,50,50,0.8); }

.error-msg, .succes-msg { width:100%; position:relative; padding:0.8rem 1rem 0.8rem 3.5rem; margin:0 auto 1.5rem!important; background:rgba(236,50,50,0.8); color:#fff; overflow:hidden; text-shadow:0 1px 1px rgba(0,0,0,0.3); font-size:1.2rem; line-height:1.8rem!important; }
.succes-msg { background:rgba(74,178,66,0.8); }
.error-msg span, .succes-msg span { width:2.4rem; height:2.4rem; position:absolute; top:50%; left:0.5rem; margin-top:-1.2rem; display:block; text-align:center; font-size:2.2rem; line-height:2.2rem; }

.form-btn { width:100%; height:3.5rem; font-size:1.2rem; line-height:3.4rem; font-weight:600; font-family: 'Open Sans', Arial, sans-serif; opacity:1; color:#111; display:inline-block; text-transform:uppercase; text-align:center; cursor:pointer; border:1px solid #FF6500;  padding:0 2rem; background:transparent; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; }
.form-btn:hover { background:#FF6500; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,0.2); }

button.form-btn { line-height:inherit; }

/* ============================================================= */

.profile-header { width:100%; height:30rem; position:relative; background:#e9e9e9; padding:3rem 6.5rem; }
.user-box { width:15rem; height:15rem; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); margin-top:-1.2rem; }
.user-box h3 { width:28rem; position:absolute; top:100%; left:50%; transform: translate(-50%,0); padding-top:1.5rem; font-size:1.6rem; font-weight:400; line-height:2.6rem; text-align:center; overflow:hidden; }

.user-img { width:100%; height:100%; position:relative; border-radius:50%; box-shadow: 0 2px 3px rgba(125,125,125,.1); overflow:hidden; background:#dadada; }
.user-img i,
.user-img img { width:100%; height:100%; position:absolute; top:0; left:0; }
.user-img i { color:#eee; text-align:center; font-size:13rem; line-height:18.5rem; }
 
.user-img-upload { width:100%; height:100%; position:relative; opacity:0; background:rgba(0,0,0,.3); transition: opacity .3s ease-in-out; }
.user-img:hover .user-img-upload { opacity:1; }
.user-img input { width:100%!important; height:100%!important; position:absolute; top:0; left:0; opacity:0!important; }
.user-img-upload i { width:5rem; height:5rem; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) scale3d(.8,.8,.8); font-size:4.4rem; line-height:5rem; text-align:center; color:#fff!important; text-shadow:0 1px 2px rgba(0,0,0,.2)!important; transition: transform .3s ease-in-out; }
.user-img:hover .user-img-upload i { transform: translate(-50%,-50%) scale3d(1,1,1); }

.profile-body {  }

/* ============================================================= */

.new-form.edit-profile,
.new-form.change-password-form { width:70rem; max-width:100%; margin:0 auto; padding:6rem 6.5rem; }
.new-form.change-password-form { width:40rem; }

/* .new-form.edit-profile .form-cell:nth-child(5) { grid-column-start: 1; grid-column-end: -1; } */

.new-form.edit-profile .button,
.new-form.change-password-form .button { min-width:12rem; }

/* ============================================================= */

.power-query {  }
.power-query .content { top:0; }

.power-query-list { height:100%; margin:0; padding:0!important; }
.power-query-list li { width:100%; /*height:100%;*/ position:relative; padding:8% 6rem!important; display: grid; grid-template-columns: repeat(2,50%); align-items:center; border-bottom:1px solid rgba(0,0,0,.1); }
.power-query-list li.full { grid-template-columns: none; }

.power-query-list .pql-content,
.power-query-list .pql-image { display: grid; align-items:center; }

.power-query-list h1,
.power-query-list h2 { font-size:5.6rem; line-height:6rem; color:#ff4e00; margin:0 auto 3rem; }

.power-query-list li:first-child p { font-size: 1.6rem; line-height: 2.2rem; margin:0 0 5rem; }
.power-query-list li:first-child .button { height:5rem; line-height:5rem; border-radius:2.5rem; padding:0 3rem; font-family: 'Open Sans', Arial, sans-serif; white-space:nowrap;;}
.power-query-list li:first-child .button i { line-height:5rem; font-size:2.2rem; margin:0 1rem 0 -1rem; }
.power-query-list li:first-child .button:last-child { margin: 0 0 0 2rem; }

.power-query-list li:first-child { height:100%; grid-template-columns: 70%; }
.power-query-list li:first-child:before { width:5rem; height:5rem; position:absolute; left:50%; bottom:6rem; margin-left:-2.5rem; font-size:1.4rem; line-height:5rem; text-align:center; content:'\e936'; font-family: icons; color:rgba(0,0,0,.3); border:1px solid rgba(0,0,0,.3); border-radius:50%; }

.pql-content { padding-right:3rem; }

.pql-content h3 { position:relative; padding-left:5.5rem; font-size: 2.1rem; line-height: 2.8rem; color:#ff4e00; margin:0 auto 3rem; }
.pql-content h3 span { width:4rem; height:4rem; position:absolute; top:-.7rem; left:0; border-radius:50%; background:#ff4e00; color:#fff; font-size:1.6rem; line-height:4rem; text-align:center; }


.pql-content h4 { font-size: 1.6rem; line-height: 2.2rem; color:#111; margin:0 auto 2rem;}
.pql-content h4 b{ font-weight: inherit; color: #e66414; cursor: pointer; transition: color 0.3s ease-in-out; text-shadow: 0 1px 1px rgba(0,0,0,0.2);}
.pql-content h4 b:hover{ color: #ff4e00;}
.pql-content p { font-size: 1.4rem; line-height: 2rem; color:#111; margin:0 auto 1rem; }
.pql-content pre, .pql-image pre {user-select: text; font-size:1.4rem; line-height: 2rem;}
.pql-content pre b, .pql-content pre i, .pql-image pre b, .pql-image pre i 
{user-select: text;}

.pql-image { padding-left:3rem; }
.pql-image img, .pql-image pre { width:100%; height:auto; margin:0; }

.cnt-iframe { width:100%; height:100%; margin:0; border:none!important; }

/* ============================================================= */

.new-form { width:100%; position:relative; margin:0 auto; }

.grid-2-cols { display:grid; grid-template-columns: repeat(2,1fr); grid-gap:1rem 2.5rem; }

.form-cell { width:100%; position:relative; margin:0 auto 2rem; text-align:left; }

.new-form label { width:100%; display:block; font-size:1rem; line-height:1.4rem; font-weight:400; text-align:left; text-transform:uppercase; font-family: 'Open Sans', Arial, sans-serif; margin-bottom:.75rem; color: var(--dark); cursor:pointer; }

.new-form input,
.new-form select,
.new-form textarea { width:100%; height:4.4rem; color: #333; font-size: 1.2rem; font-weight:normal; font-family: 'Open Sans', Arial, sans-serif; border-radius:.3rem!important; box-shadow:none!important; border:1px solid #cbcbcb!important; background:transparent!important; padding:0 1.5rem; margin:0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.new-form select { padding:0 1rem; }
.new-form select option { padding:.5rem 1rem; }
.new-form textarea { height:10rem; padding:0.7rem 1.2rem; }

.new-form input:focus, 
.new-form select:focus, 
.new-form textarea:focus,
.new-form input:active, 
.new-form select:active, 
.new-form textarea:active,
.new-form input:hover, 
.new-form select:hover, 
.new-form textarea:hover  { box-shadow: 0 1px 2px rgba(125,125,125,.1)!important; outline:none!important; border-color: #cbcbcb!important; background:rgba(255,255,255,.4)!important; }

.new-form .error input,
.new-form .error select,
.new-form .error textarea,
.new-form .form-row-checkbox.error label:after,
.new-form .form-row-radio.error label:after { border-color:rgba(236,50,50,.4)!important; background:rgba(236,50,50,.1)!important; }
.new-form .error label { color:rgba(236,50,50,1)!important; }

.form-row-checkbox,
.new-form .form-row-radio { width:100%; /*min-height:3rem;*/ position:relative; margin:0 auto!important; text-align:center; padding:0; border:none; transition:all 0.3s ease-in-out; }
.form-row-checkbox label,
.new-form .form-row-radio label { width:100%; display:block; position:static; z-index:5; cursor:pointer; font-size:1.2rem; line-height:1.8rem; padding:.4rem 0 0 3rem; text-transform:none; }
.form-row-checkbox input[type=checkbox],
.form-row-radio input[type=radio] { width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; overflow:hidden; } 
.form-row-checkbox label:after,
.form-row-radio label:after { width:1.8rem; height:1.8rem; padding:0; display:block; position:absolute; top:.2rem; left:0; border-radius:0.2rem; content:""; border:1px solid #c9ccf0; background:#e7e9f8; font-family:icons; text-align:center; line-height:1.9rem; font-size:1.4rem; }
.form-row-radio label:after { border-radius:50%; }
.form-row-checkbox input[type=checkbox]:checked + label:after,
.form-row-radio input[type=radio]:checked + label:after,
.form-row-checkbox.error input[type=checkbox]:checked + label:after, .form-row-radio.error input[type=radio]:checked + label:after { content:"\e93d"; border-color:rgba(236,50,50,1)!important; background:rgba(236,50,50,1)!important; color:#fff; box-shadow: var(--shadow); }

.form-row-checkbox:last-of-type,
.form-row-radio:last-of-type { margin:0!important; }

.form-row-checkbox.error input[type=checkbox]:checked + label,
.form-row-radio.error input[type=radio]:checked + label { color: #333!important; }

.form-row-checkbox:hover label:after,
.form-row-radio:hover label:after { border-color: rgba(236,50,50,1)!important; box-shadow: var(--shadow); }

.form-row-checkbox a { color:#999; }

.profile .error-msg, 
.profile .succes-msg { width:100%; position:relative; margin:0 auto; padding:2.5rem 6.5rem; color:#fff; font-size:1.2rem; text-align:left; line-height:2rem; }
.profile .succes-msg { background:#07bc88; }

.profile .error-msg .new-form, 
.profile .succes-msg .new-form { padding-top:0; padding-bottom:0; }

.form-btns { width:100%; min-height:4rem; position:relative; padding-top:1.5rem; }
.form-btns .button { height:4.4rem; line-height:4.4rem; }

.form-btns .button.button-link { min-width:10rem!important; margin-left:1.5rem; padding:0 1.5rem!important; background: transparent!important; color:#ff4e00!important; box-shadow:none!important; text-shadow:none!important; }
.form-btns .button.button-link:hover { background: #e9e9e9!important; box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.1)!important; }

.form-cell-switcher { min-height:4rem; position:relative; user-select:none; }

.form-cell-switcher input { width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; }
.form-cell-switcher input,
.form-cell-switcher input:hover,
.form-cell-switcher input:active,
.form-cell-switcher input:focus { box-shadow:none!important; }

.form-cell-switcher label { width:4rem; height:2rem; position:absolute; top:1rem; left:0; display:block; font-size:1.3rem; line-height:2rem; text-transform:none; white-space:nowrap; text-indent: 5.5rem; background:#d2d2d2; border-radius:1rem; transition: background .3s ease-in-out; }
.form-cell-switcher input[type=checkbox]:checked + label { background:#e66414; }
.form-cell-switcher label:after { width:1.6rem; height:1.6rem; position:absolute; top:.2rem; left:.3rem; background:#fff; content:''; border-radius:.8rem; transition: transform .3s ease-in-out; }
.form-cell-switcher input[type=checkbox]:checked + label:after { transform: translate3d(1.9rem,0,0); }

.breadcrumb-search-form { width:100%; height:6rem; padding:0; background:#f8f8f8; }
.breadcrumb-search-form fieldset { width:100%; height:100%; position:relative; overflow:hidden; border:none; }
.breadcrumb-search-form fieldset:after { width:4rem; height:4rem; position:absolute; top:1rem; left:.5rem; display:block; content:"\e96f"; font-size:1.2rem; line-height:4rem; text-transform:none; text-align:center; color:#666; transition: color .3s ease-in-out; font-family:icons!important; }
.breadcrumb-search-form.new-form input { height:100%; padding:0 2.5rem 0 4rem!important; background:transparent!important; position:relative; border:none!important; }
.breadcrumb-search-form.new-form input::-webkit-input-placeholder { font-style:italic; }
.breadcrumb-search-form.new-form input:-ms-input-placeholder { font-style:italic; }
.breadcrumb-search-form.new-form input:-moz-placeholder { font-style:italic; }

/* ============================================================= */

.error-anim,
.login-form.error-anim { opacity:1; -webkit-animation: erroranim 0.5s ease-in-out forwards; -o-animation: erroranim 0.5s ease-in-out forwards; -ms-animation: erroranim 0.5s ease-in-out forwards; animation: erroranim 0.5s ease-in-out forwards; }

@-webkit-keyframes erroranim {
    0% { -webkit-transform: translate(-3rem, 0); }
    12.5% { -webkit-transform: translate(3rem, 0); }
    25% { -webkit-transform: translate(-2rem, 0); }
    37.5% { -webkit-transform: translate(2rem, 0); }
    50% { -webkit-transform: translate(-2rem, 0); }
    62.5% { -webkit-transform: translate(1rem, 0); }
    75% { -webkit-transform: translate(-1rem, 0); }
    87.5% { -webkit-transform: translate(1rem, 0); }
    100% { -webkit-transform: translate(0, 0); }
}

@-moz-keyframes erroranim {
    0% { -moz-transform: translate(-3rem, 0); }
    12.5% { -moz-transform: translate(3rem, 0); }
    25% { -moz-transform: translate(-2rem, 0); }
    37.5% { -moz-transform: translate(2rem, 0); }
    50% { -moz-transform: translate(-2rem, 0); }
    62.5% { -moz-transform: translate(1rem, 0); }
    75% { -moz-transform: translate(-1rem, 0); }
    87.5% { -moz-transform: translate(1rem, 0); }
    100% { -moz-transform: translate(0, 0); }
}

@-ms-keyframes erroranim {
    0% { -ms-transform: translate(-3rem, 0); }
    12.5% { -ms-transform: translate(3rem, 0); }
    25% { -ms-transform: translate(-2rem, 0); }
    37.5% { -ms-transform: translate(2rem, 0); }
    50% { -ms-transform: translate(-2rem, 0); }
    62.5% { -ms-transform: translate(1rem, 0); }
    75% { -ms-transform: translate(-1rem, 0); }
    87.5% { -ms-transform: translate(1rem, 0); }
    100% { -ms-transform: translate(0, 0); }
}

@-o-keyframes erroranim {
    0% { -o-transform: translate(-3rem, 0); }
    12.5% { -o-transform: translate(3rem, 0); }
    25% { -o-transform: translate(-2rem, 0); }
    37.5% { -o-transform: translate(2rem, 0); }
    50% { -o-transform: translate(-2rem, 0); }
    62.5% { -o-transform: translate(1rem, 0); }
    75% { -o-transform: translate(-1rem, 0); }
    87.5% { -o-transform: translate(1rem, 0); }
    100% { -o-transform: translate(0, 0); }
}

@keyframes erroranim {
    0% { transform: translate(-3rem, 0); }
    12.5% { transform: translate(3rem, 0); }
    25% { transform: translate(-2rem, 0); }
    37.5% { transform: translate(2rem, 0); }
    50% { transform: translate(-2rem, 0); }
    62.5% { transform: translate(1rem, 0); }
    75% { transform: translate(-1rem, 0); }
    87.5% { transform: translate(1rem, 0); }
    100% { transform: translate(0, 0); }
}

.login-form { width:52rem; margin:-6rem auto 0; opacity:0; position:relative; z-index:50; }
/*.view-login-form */.login-form { -webkit-animation: login-anim 0.5s ease-in-out 0.3s forwards; -o-animation: login-anim 0.5s ease-in-out 0.3s forwards; -ms-animation: login-anim 0.5s ease-in-out 0.3s forwards; animation: login-anim 0.5s ease-in-out 0.3s forwards; }
.login-form fieldset { position:relative; margin-bottom:2rem; padding:4rem 5rem 4rem 20rem; background: #fff; box-shadow:0 0 1rem rgba(0,0,0,0.1); border:none; }
.login-form p { padding:0; margin:0 auto 1rem; }
.login-form p:last-of-type { margin-bottom:0; }
.login-form h3 { width:100%; color:#ff6500; font-size:2.1rem; font-weight:600; line-height:2.6rem; margin:0 0 1.5rem; }
.login-form img {     width: 17.5rem;
    height: 17.5rem;
    position: absolute;
    top: 2rem;
    left: 1.5rem; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.login-form input { width:100%; height:3.5rem; color:#111; font-weight:normal; font-size: 1.2rem; font-family: 'Open Sans', Arial, sans-serif; border-radius:0!important; box-shadow:none!important; border:none!important; border-bottom:1px solid rgba(0,0,0,0.5)!important; padding:0!important; margin:0 auto 1rem; background:rgba(255,255,255,0.1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.login-form .form-btn { line-height:inherit; margin-top:1rem; }
.login-form p.subcolumns { font-size:1.1rem; }
.login-form p.subcolumns a { display:inline-block; line-height:3.5rem; }

.login-form input:focus,
.login-form input:active { outline:none!important; background:transparent!important; }

.login-form input.error { border-color:rgba(236,50,50,0.8)!important; }
.login-form input.error::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(236,50,50,0.8)!important;
}
.login-form input.error::-moz-placeholder { color: rgba(236,50,50,0.8)!important; }
.login-form input.error:-ms-input-placeholder { color: rgba(236,50,50,0.8)!important; }
.login-form input.error:-moz-placeholder { color: rgba(236,50,50,0.8)!important; }

.error-msg, .succes-msg { width:100%; position:relative; padding:1.5rem 2rem; margin:0 auto 1.5rem!important; background:rgba(236,50,50,0.8); color:#fff; overflow:hidden; text-shadow:0 1px 1px rgba(0,0,0,0.3); font-size:1.2rem; line-height:1.8rem!important; }
.succes-msg { background:#07bc88; }
.error-msg span, .succes-msg span { width:2.4rem; height:2.4rem; position:absolute; top:0.5rem; left:0.6rem; display:block; text-align:center; font-size:2rem; line-height:2.2rem; }

.form-btn { width:auto; height:3.5rem; font-size:1.2rem; line-height:3.5rem; font-weight:600; font-family: 'Open Sans', Arial, sans-serif; opacity:1; border-radius:0.3rem!important; text-transform:uppercase; color:#fff; display:inline-block; text-align:center; cursor:pointer; border:none;  padding:0 3rem; background:#e66414; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; -moz-border-radius:0.3rem!important; -webkit-border-radius:0.3rem!important; border-radius:0; }
.form-btn:hover { background:#FF6500; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,0.2); }

.login-form .error-msg, 
.login-form .succes-msg { margin:0 auto!important; }

@-webkit-keyframes login-anim {
    0% { -webkit-transform: translate3d(0,10rem,0); opacity: 0; }
    100% { -webkit-transform: translate3d(0,0,0); opacity: 1; }
}

@-moz-keyframes login-anim {
    0% { -moz-transform: translate3d(0,10rem,0); opacity: 0; }
    100% { -moz-transform: translate3d(0,0,0); opacity: 1; }
}

@-ms-keyframes login-anim {
    0% { -ms-transform: translate3d(0,10rem,0); opacity: 0; }
    100% { -ms-transform: translate3d(0,0,0); opacity: 1; }
}

@-o-keyframes login-anim {
    0% { -o-transform: translate3d(0,10rem,0); opacity: 0; }
    100% { -o-transform: translate3d(0,0,0); opacity: 1; }
}

@keyframes login-anim {
    0% { transform: translate3d(0,10rem,0); opacity: 0; }
    100% { transform: translate3d(0,0,0); opacity: 1; }
}

.copy { width:100%; position:absolute; left:0; bottom:3rem; opacity:0; z-index:49; text-align:center; -webkit-animation: copy-anim 0.5s ease-in-out 0.7s forwards; -o-animation: copy-anim 0.5s ease-in-out 0.7s forwards; -ms-animation: copy-anim 0.5s ease-in-out 0.7s forwards; animation: copy-anim 0.5s ease-in-out 0.7s forwards; }
.copy img { width:auto; height:4rem; margin:0 auto 0.5rem; }
.copy p { font-size:1.1rem; line-height:2rem; }

@-webkit-keyframes copy-anim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes copy-anim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-ms-keyframes copy-anim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes copy-anim {
    0% {  opacity: 0; }
    100% { opacity: 1; }
}

@keyframes copy-anim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.portrait-page .login-form { width: 45rem; max-width:84%; }
.portrait-page .login-form fieldset { padding: 20rem 8% 4rem; margin-bottom:0; }
.portrait-page .login-form img { width: 14rem; height: 14rem; top:3rem; left:50%; margin-left:-7rem; }
.portrait-page .login-form h3 { text-align:center; margin-bottom:2.5rem; }
.portrait-page .login-form input,
.portrait-page .login-form .form-btn { width:100%; height:5rem; font-size:1.5rem; text-align:center; }
.portrait-page .login-form .form-btn { margin-top: 2rem; }
.portrait-page .copy p { font-size:1.4rem; }
.portrait-page .error-msg, .succes-msg { padding: 1.5rem 8%; font-size: 1.45rem; line-height: 2.2rem!important; }

/* ============================================================= */

.refresh-btn { width:3.5rem; height:3.5rem; position:absolute; top:1.5rem; right:1.5rem; display:block; background:#fff; color:#666; border-radius:0.3rem; border:1px solid rgba(0,0,0,0.2); font-size:1.2rem; line-height:3.5rem; text-align:center; cursor:pointer; -moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out; -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out; transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out; }
.refresh-btn:hover { color:#fff; background:#ff4e00; border-color:#ff4e00; } 

/* ============================================================= */

.portrait,
.landscape { width:100%; height:100%; position:relative; text-align:center; display:none; color:#fff; background:#e66414; }
.portrait i,
.landscape i { width:10rem; height:10rem; display:inline-block; margin:0 auto; font-size:10rem; line-height:10rem; text-align:center; margin:0 auto 2rem; text-shadow:0 1px 1px rgba(0,0,0,0.2); }
.portrait p,
.landscape p { font-size:1.6rem; line-height:2.4rem; margin:0 auto; text-transform:uppercase; font-weight:400; }
.landscape p { font-size: 2.4rem; line-height: 3.2rem; }

/* ============================================================= */

.entrances-list { width:100%; position:relative; overflow:hidden; margin:0 auto; padding: 0; }
.entrances-list li { width:49.5%; height:24%; float:left; position:relative; margin:0 1% 1% 0; padding:6rem 1rem 0.7rem; border:1px solid rgba(125,125,125,0.1); overflow:hidden; }
.entrances-list li:nth-child(2n) { margin-right:0; }

.el-header { width:auto; height:5rem; position:absolute; top:0.7rem; left:1rem; right:1rem; overflow:hidden; padding-right:14rem; }
.el-header h3,
.el-header-right strong { color:#000; font-size:1.2rem; line-height:1.6rem; text-transform:uppercase; font-weight:700; margin-bottom:0.5rem; }
.el-header p { color:#ff4e00; font-size:1.3rem; line-height:1.8rem; font-weight:700; }

.el-header-right { width:13rem; height:100%; position:absolute; top:0; right:0; text-align:right; }
.el-header-right strong { display:block; color:#999; }
.el-header-right span { display:block; color:#ff4e00; font-size:1.1rem; line-height:1.8rem; }
.el-header-right span em { font-style:normal; font-weight:700; font-size:1.3rem; }
.el-header-right span i { font-size:1.3rem; margin-right:0.3rem; }

.el-body { width:100%; height:100%; position:relative; overflow:hidden; }
.el-body img { width:auto; height:100%; }

/* ============================================================= */

.sort-graph { width:auto; position:absolute; top:1.5rem; left:2rem; z-index:3; }
.sort-graph fieldset { width:100%; height:3rem; border:none; }
.sort-graph p { width:auto; height:100%; float:left; margin:0; line-height:3rem; }
.sort-graph p:first-of-type { margin-right:2rem; }
.sort-graph input[type="radio"] { width:auto; height:auto; float:left; margin:1rem 0.5rem 0 0; padding:0; background:transparent; }
.sort-graph label { float:left; display:inline-block; color:#666; font-size:1.2rem; line-height:3rem; transition: opacity 0.3s ease-in-out; } 
.sort-graph p:last-of-type label { margin-right:1rem; }
.sort-graph input[type="radio"]:checked + label,
.sort-graph label:hover { color:#ff4e00; }
.sort-graph select { width:auto; float:left; opacity:0.3; height:3rem; padding:0 0.5rem; border-color:rgba(0,0,0,0.2); pointer-events: none; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; }
.sort-graph input[type="radio"]:checked + label + select { opacity:1; pointer-events:auto; }