/* //////////////// RESET //////////////// */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}

article,main,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} a{text-decoration:none;} img {display: block; border: 0;} * {background-repeat: no-repeat;}

html{box-sizing: border-box;} *, *:before, *:after {box-sizing: inherit;}



/* //////////////// MEDIA QUERIES //////////////// */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .pad-tb {
        padding-top: 0px !important;
        padding-bottom: 10px;
    }
    .pad-tb-expli {
        padding-top: 20px !important;
        padding-bottom: 10px;
    }
}


@media only screen and (min-height: 800px) {
	.inside {padding: 10px 20px;}
    footer .inside{
        padding: 8px 20px !important;
    }
	.pad-tb {padding-top: 10px; padding-bottom: 10px;}
	
	.toggle {height: 30px; background-position: center 10px;}

	.project-scroll {max-height: 380px;}
    .projects-scroll {max-height: 480px;}
    .instance-scroll {max-height: 145px;}
    .instance-scroll-media {max-height: 480px;}
}

@media only screen and (max-height: 799px) {
	.inside {padding: 10px 20px;}
	.pad-tb {padding-top: 10px; padding-bottom: 10px;}
	
	.toggle {height: 30px; background-position: center 10px;}
	
	.project-scroll {max-height: 280px;}
	.projects-scroll {max-height: 480px;}
	.instance-scroll {max-height: 145px;}
	.instance-scroll-media {max-height: 480px;}
}


/* //////////////// FLEX //////////////// */

.flex {list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-box-direction:normal;-moz-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-flow:row wrap;flex-wrap:wrap;-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}

.flex > * {min-width: 1%;}



/* //////////////// BODY //////////////// */

html, body {height: 100%;}

body {font-family: 'Roboto', sans-serif; background: #000000; font-size: 12px; overflow: hidden;}

main {position: relative; background: #000000; height: 100%;}

#page:-webkit-full-screen	{ width: 100% }
#page:-moz-full-screen		{ width: 100% }
#page:-ms-full-screen		{ width: 100% }
#page:-o-full-screen		{ width: 100% }
#page:full-screen			{ width: 100% }



/* //////////////// CLASSES //////////////// */

.inside.less-tb {padding: 5px 20px;} .inside.last {padding-bottom: 0;}

.pad-rl {padding-right: 20px; padding-left: 20px;}

.pad-t {padding-top: 20px;} .pad-b {padding-bottom: 20px;}

.marg-t {margin-top: 20px;} .marg-b {margin-bottom: 20px;}
.marg-t-5-vid-li {margin-top: 3px !important;}

.marg-b-5 {margin-bottom: 5px;} .marg-b-10 {margin-bottom: 10px;} .marg-b-15 {margin-bottom: 15px;}

.right {float: right;} .left {float: left;}

.tcenter {text-align: center;} .tright {text-align: right;} .tleft {text-align: left;}

.tgrey {color: #888;}

.large {font-size: 18px; font-weight: 500;} .larger {font-size: 28px; font-weight: 500;}

.block {display: block;} .iblock {display: inline-block;} .hide {display: none;}

.full {width: 100%;} .full-imp {width: 100% !important;} .half {width: 50%;}

.border-bot {border-bottom: 1px solid #ddd;}



/* //////////////// TRANSITION //////////////// */

input, input:hover,
.nav-img a > div, .nav-img a:hover > div,
.button, .button:hover,
.btn, .btn:hover,
.toggle, .toggle:hover,
#goback, #goback:hover,
#fullscreen, #fullscreen:hover,
.skip, .skip:hover,
.zoom, .zoom:hover {-webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out;}



/* //////////////// LINKS //////////////// */

a {color: #888;} a:hover {color: #222;}



/* //////////////// INPUTS //////////////// */

.input-text {color: #222; background: none; border: 0; border-bottom: 1px solid #ccc; padding: 0; line-height: 30px;}



/* //////////////// BUTTONS //////////////// */

.button-login {color: #fff; border: 0; text-align: left; cursor: pointer; padding: 0 20px; line-height: 50px;}

.button, .btn {background-color: #eee; line-height: 20px; padding: 0 5px; display: block;}
.button:hover, .btn:hover {background-color: #ddd;}

.range_inputs button {border: 0; width: 100%; margin-bottom: 10px; font-size: 14px; padding: 5px 10px;}
.range_inputs .applyBtn {color: #fff;} .range_inputs .applyBtn:hover {color: #222;}

.drp-buttons button {border: 0;  margin-bottom: 10px; font-size: 14px; padding: 5px 10px;}
.drp-buttons .applyBtn {color: #fff; float:right !important;} .drp-buttons .applyBtn:hover {color: #222;}
.drp-buttons .cancelBtn  {float:right !important;}

.drp-selected{
    float: left !important;
}
                                      /*
.daterangepicker .drp-buttons {
    clear: inherit !important;
}
.daterangepicker.ltr.show-calendar.opensright {
    width: 48% !important;
}
.drp-buttons{
    width: 100px;

}
.daterangepicker.show-calendar .drp-buttons{
    display: inline-block !important;
}
*/

/* //////////////// TEXT //////////////// */

h1,h2,h3,h4,h5,p {line-height: 1.1;}



/* //////////////////////////////// PAGE //////////////////////////////// */

/* //////////////// CONTROL BOX //////////////// */

#control {width: 270px; position: absolute; left: 40px; top: 0;}

.box, .daterangepicker {background-color: #fff; -webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.2);}

.pattern {background-image: url(../img/layout/pattern.png); background-repeat: repeat-x;}

.round-bot, .nav-img.horizontal div, .toggle {-webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;}
.round, .nav-img.horizontal img, .button, .btn {-webkit-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;}

.left-tab a, .skip.prev {-webkit-border-radius: 3px 0 0 0; -moz-border-radius: 3px 0 0 0; border-radius: 3px 0 0 0;}
.right-tab a, .skip.next {-webkit-border-radius: 0 3px 0 0; -moz-border-radius: 0 3px 0 0; border-radius: 0 3px 0 0;}



/* //////////////// IMAGE NAVI //////////////// */

.nav-img a {position: relative; display: block;}
.nav-img img {width: 100%; height: auto;}
.nav-img div {position: absolute; bottom: 0; left: 0; width: 100%; color: #fff; background: rgba(0,0,0,0.5);}
.nav-img li:not(.active) a:hover > div {background: rgba(0,0,0,1);}

.nav-img.vertical li {margin-bottom: 20px;} .nav-img.vertical li:last-child {margin: 0;}
.nav-img.vertical div {line-height: 30px; padding: 0 10px; font-size: 14px;}

.nav-img.horizontal div {line-height: 20px; padding: 0 5px; font-size: 12px;}

.instance_icons_list {width: 60px;}

.instance-scroll .mCSB_inside > .mCSB_container {margin-right: 0 !important;}

.scroll {overflow: hidden;}




/* //////////////// TOGGLE //////////////// */

.toggle {width: 100%; cursor: pointer;}
.toggle:hover {background-color: #eee;}

.toggle.close {background-image: url(../img/arrows/up.png);}
.toggle.close:hover {background-image: url(../img/arrows/up-hover.png);}

.toggle.open {background-image: url(../img/arrows/down.png);}
.toggle.open:hover {background-image: url(../img/arrows/down-hover.png);}



/* //////////////// BACK / FULLSCREEN //////////////// */

#goback, #fullscreen {line-height: 20px; cursor: pointer;}

#goback {background-image: url(../img/arrows/left.png); padding-left: 25px; background-position: left 2px;}
#goback:hover {background-image: url(../img/arrows/left-hover.png);}

#fullscreen {background-image: url(../img/icons/fullscreen.png); padding-right: 30px; color: #888; background-position: right 2px;}
#fullscreen:hover {background-image: url(../img/icons/fullscreen-hover.png); color: #222;}



/* //////////////// TABS //////////////// */

.nav-tabs a {font-size: 16px; font-weight: 500; line-height: 40px; padding: 0 20px; display: block;}

.nav-tabs li:not(.active) a {color: #222; border-bottom: 1px solid #ddd;}
.nav-tabs li:not(.active) a:hover {background: #eee;}

.nav-tabs .active a {color: #fff;}



/* //////////////// SECTIONS //////////////// */

.tabs .section {padding-left: 32px;}

.section {padding-left: 38px;}

.section.icon-cam {background-image: url(../img/icons/cam.png);}
.section.icon-date {background-image: url(../img/icons/date.png);background-size: 20px;padding-left:29px;}
.section.icon-cloud {background-image: url(../img/icons/cloud.png);background-size: 20px;padding-left:29px;}
.section.icon-compare {background-image: url(../img/icons/iconset/thin-0151_plus_add_new.png);background-size: 20px;padding-left:29px;background-position: 4px}
.section.icon-email {background-image: url(../img/icons/iconset/thin-0319_email_mail_post_card.png);background-size: 20px;padding-left:29px;margin-top:5px}
.section.icon-weather {background-image: url(../img/icons/radio.png);background-size: 20px;padding-left:29px;margin-top:5px;background-position: 4px}

.section.icon-cloud a, .section.icon-compare a, .section.icon-email, .section.icon-weather a{
    line-height: 20px;
}


/* //////////////// NAV BUTTONS //////////////// */

.nav-buttons li {width: 47%; margin-top: 10px;}
.nav-buttons li:first-child {margin-top: 0;}
.nav-buttons li.active .button {color: #fff;}



/* //////////////// DATEPICKER //////////////// */

.daterangepicker_input input {background: url(../img/icons/minical.png) no-repeat 8px center; background-size: 12px;}

.daterangepicker th.month {font-weight: bold;}
.daterangepicker tr:nth-child(2) th {border-bottom: 1px solid #ddd;}
.daterangepicker td, .daterangepicker th {line-height: 20px;}




/* //////////////// TIME //////////////// */

.skip {width: 60px; background-position: center center; cursor: pointer;}

.skip.prev {background-image: url(../img/arrows/left-big.png); }
.skip.prev:hover {background-image: url(../img/arrows/left-big-white.png);}

.skip.next {background-image: url(../img/arrows/right-big.png);}
.skip.next:hover {background-image: url(../img/arrows/right-big-white.png);}

.skip.pause {background-image: url(../img/arrows/pause.png); }
.skip.pause:hover {background-image: url(../img/arrows/pause-white.png);}

.skip.play {background-image: url(../img/arrows/right-big.png);}
.skip.play:hover {background-image: url(../img/arrows/right-big-white.png);}



/* //////////////// PRELOADER //////////////// */

.preloader-cont {height: 2px;background-color:#ededed;}

.preloader {position:relative;height:2px;display:block;width:100%;background-color:#ededed;border-radius:0;overflow:hidden;display:none;}

.preloader .bar:before {content:'';position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left, right;-webkit-animation:bar 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;animation:bar 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}

.preloader .bar:after {content:'';position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left, right;-webkit-animation:bar-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation:bar-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;-webkit-animation-delay:1.15s;animation-delay:1.15s}@-webkit-keyframes bar{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes bar{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@-webkit-keyframes bar-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}@keyframes bar-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}

.preloader-cont, .preloader, .preloader .bar {-webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;}



/* //////////////// ZOOM //////////////// */

.zoom {width: 60px; background-position: center center; cursor: pointer;}

.zoom.zoom-in {background-image: url(../img/icons/zoom-in.png);}
.zoom.zoom-in:hover {background-image: url(../img/icons/zoom-in-hover.png);}

.zoom.zoom-out {background-image: url(../img/icons/zoom-out.png);}
.zoom.zoom-out:hover {background-image: url(../img/icons/zoom-out-hover.png);}

.zoomline {height: 15px; width: 150px; overflow: hidden; background: url(../img/misc/dot.png) repeat-x left 7px;}

.zoomline .picker {width: 15px; height: 15px; display: inline-block; line-height: 15px; cursor: move;}
.zoomline .picker:hover, .zoomline .picker:active div {background-color: #222;}
.zoomline .picker div {background-color: #fff; width: 7px; height: 7px; display: inline-block;}

.zoomline .picker, .zoomline .picker div {-webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;}

input[type=range] {-webkit-appearance: none; width: 100%; background-color: transparent;}
input[type=range]:focus {outline: none;}

input[type=range]::-webkit-slider-runnable-track {width: 100%; height: 13px; cursor: pointer; animate: 0.2s; background: transparent url(../img/misc/dot.png) repeat-x left 6px;}
input[type=range]::-moz-range-track {width: 100%; height: 13px; cursor: pointer; animate: 0.2s; background: transparent url(../img/misc/dot.png) repeat-x left 6px;}
input[type=range]::-ms-track {width: 100%; height: 13px; cursor: pointer; animate: 0.2s; background: transparent url(../img/misc/dot.png) repeat-x left 6px;}

input[type=range]::-webkit-slider-thumb {height: 13px; width: 13px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; cursor: pointer; -webkit-appearance: none; border: 2px solid; background: #fff;}
input[type=range]::-moz-range-thumb {height: 13px; width: 13px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; cursor: pointer; -webkit-appearance: none; border: 2px solid; background: #fff;}
input[type=range]::-ms-thumb {height: 13px; width: 13px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; cursor: pointer; -webkit-appearance: none; border: 2px solid; background: #fff;}


/* //////////////// FOOTER //////////////// */

footer {color: #888; position: relative; width: 100%; background: #000; height: 3%;}

footer .foot-cont {height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden; position: relative; padding: 0 1%;}
footer .foot-cont > div {position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%);}

footer li {display: inline; margin-left: 20px;}
footer a:hover {color: #fff;}

.pointer {cursor: pointer;}











