/***** Colors *****/

/* As RGBa codes */

.rgba-primary-0 { color: rgba(247,176, 21,1) }
.rgba-primary-1 { color: rgba(255,209,110,1) }
.rgba-primary-2 { color: rgba(255,196, 70,1) }
.rgba-primary-3 { color: rgba(198,137,  3,1) }
.rgba-primary-4 { color: rgba(156,107,  0,1) }

.rgba-secondary-1-0 { color: rgba( 14,162,121,1) }	
.rgba-secondary-1-1 { color: rgba( 82,190,160,1) }
.rgba-secondary-1-2 { color: rgba( 46,169,135,1) }
.rgba-secondary-1-3 { color: rgba(  2,130, 95,1) }
.rgba-secondary-1-4 { color: rgba(  0,103, 74,1) }

.rgba-secondary-2-0 { color: rgba(247,103, 21,1) }	
.rgba-secondary-2-1 { color: rgba(255,162,110,1) }
.rgba-secondary-2-2 { color: rgba(255,136, 70,1) }
.rgba-secondary-2-3 { color: rgba(198, 73,  3,1) }
.rgba-secondary-2-4 { color: rgba(156, 56,  0,1) }

.rgba-complement-0 { color: rgba( 31, 65,167,1) }	
.rgba-complement-1 { color: rgba( 96,121,194,1) }
.rgba-complement-2 { color: rgba( 62, 90,174,1) }
.rgba-complement-3 { color: rgba( 17, 46,134,1) }
.rgba-complement-4 { color: rgba( 10, 34,106,1) }



.bg-green {
	color:#fff; 
	background:#3cb64a; 
}
.bg-lite-green {
	
}
.bg-dark-green {
	color:#fff; 
	background:#277d3c; 
}
.bg-yellow {
	color:#fff; 
	background:#f9b217;
}
.bg-lite-yellow {
	
}
.bg-dark-yellow {
	color:#fff; 
	background:#bc872c; 
}
.bg-orange {
	color:#fff; 
	background:#ee5123; 
}
.bg-lite-orange {
	
}
.bg-dark-orange {
	color:#fff; 
	background:#af3b25; 
}
.bg-red {
	background:#e00; 
	color:#fff; 
}
.bg-lite-red {
	background:#e44; 
}
.bg-dark-red {
	background:#c00; 
	color:#fff; 
}
.bg-gray {
	background:#666; 
	color:#fff; 
}
.bg-lite-gray {
	background:#ddd; 
}
.bg-dark-gray {
	background:#222; 
	color:#fff; 
}
.bg-blue {
	color:#fff; 
}
.bg-lite-blue {
	
}
.bg-dark-blue {
	color:#fff; 
}
.bg-sugar-blue {
	color:#fff; 
	background:#7ea1c5; 
}
.bg-lite-sugar-blue {
	
}
.bg-dark-sugar-blue {
	color:#fff; 
	background:#5e788e; 
}






/***** Style *****/

body.index {
	padding-top:100px;
}



a.litebox {
	position:relative;
	display:inline-block; 
}
a.litebox:after {
	border-color: transparent transparent #eee;
	border-style: solid;
	border-width: 0 0 34px 46px;
	bottom: 0;
	color: #999;
	content: "+";
	font-size: 26px;
	height: 0;
	line-height: 40px;
	opacity: 0.5;
	position: absolute;
	right: 0;
	text-indent: -20px;
	width: 0;
	
	transition-duration: 0.2s;
	transition-timing-function:ease-out; 
}
a.litebox:hover:after {
	opacity:1;
}



/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(j/colorbox/images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(j/colorbox/images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(j/colorbox/images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(j/colorbox/images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(j/colorbox/images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(j/colorbox/images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(j/colorbox/images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(j/colorbox/images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(j/colorbox/images/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(j/colorbox/images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(j/colorbox/images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(j/colorbox/images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(j/colorbox/images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(j/colorbox/images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*
    Colorbox Style
*/







/* SECTION */

#section-buildings {
  background-image: url("i/bg/build.png");
  background-position:center bottom;
  background-repeat:no-repeat;
  padding-bottom:260px;
  min-height:615px;
}

#section-contacts {
  background-color:#333;
  background-image: url("i/bg/circuitsw.png");
  background-position:center bottom;
  background-repeat:no-repeat;
  box-shadow:0 8px 13px rgba(0, 0, 0, 0.4) inset; 
  
}
#section-vofficepc {
  background-image: url("i/bg/vofficepc.png");
  background-position:center bottom;
  background-repeat:no-repeat;
  padding-bottom:50px;
  min-height:520px;
}
#section-voffice {
  background-image: url("i/bg/sea.jpg");
  background-position:center bottom;
  background-repeat:no-repeat;
  min-height:534px;
}
#section-voffice .btn {
    color: #000;
    box-shadow: 0 1px 10px rgba(0,0,0,0.3);
    border: 2px solid #000;
}
#section-voffice .btn:hover {
    background:rgba(255,255,255,0.2); 
    color:rgba(0,0,0,0.7);
    border-color:rgba(0,0,0,0.7); 
}

#section-public-private {

}
#section-public-private .split-column {
  min-height: 460px;
}
#section-public-private .split-left {
  background-image:url(i/bg/split-v.png) ;
}
#section-public-private .split-right {
  background-image:url(i/bg/split-b.png) ;
}
 /*
#section-cubes {
  background-image: url("i/bg/tech-cubes.png");
  background-position:center bottom;
  background-repeat:no-repeat;
  min-height:578px;
}
*/
#section-cubes {
  background-image: url("i/bg/tech-cubes.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: auto 95%;
  min-height:480px;
  

  
  
}
#section-sys {
  background-image: url("i/bg/tech-sistemi2.png");
  background-position:right bottom;
  background-repeat:no-repeat;
  min-height:450px;
}
#section-virtual {
  background-image: url("i/bg/tech-virtual.jpg");
  background-position:right bottom;
  background-repeat:no-repeat;
  min-height:386px;
}

#section-networking {
  background-image: url("i/bg/tech-network.jpg");
  background-position:right bottom;
  background-repeat:no-repeat;
  min-height:500px;
}
#section-networking .icon-band {
  
  margin-top:20px; 
  
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+70,0+100 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */

}
#section-storage {
  background-image: url("i/bg/dataflow-blue.jpg");
  background-position:left center;
  background-repeat:repeat-y;
  min-height:385px;
}

 
#section-database {
  background-image: url("i/bg/tech-database-white-left.jpg");
  background-position:left bottom;
  background-repeat:no-repeat; 
  min-height:385px; 
}
#section-backup {
  background-image: url("i/bg/tech-backup.png");
  background-position:right bottom;
  background-repeat:no-repeat;
  min-height:515px;
}

#section-software {
  background-image: url("i/bg/tech-software.png");
  background-position:right bottom;
  background-repeat:no-repeat;
  min-height:620px;
}




























/* slider */

.container.slider-container {
	overflow:hidden;
	position:relative; 
	padding:0;
}
.slider-strip {
	transition-duration:0.2s; 
}
.slider-element {
	float:left;
	width:25%;
	background:#fa0; 
	text-align:center; 
	overflow:hidden;
	
	opacity:0.5;
	transition-duration:0.2s; 
}
.slider-element img {
	display:block; 
	width:60%;
	margin:0 auto; 
}
.slider-element.active{
	width:50% ; 
	opacity:1;
}
.slider-element.hidden {
	width:0; 
}
.slider-controls {
	clear:both; 
	position:relative;
	z-index:5; 
}
a.slider-control {
	
}
a.slider-control:hover {
	
}





.trium-stripe {
background: #efefef;
background: rgb(200,200,200);
background: -moz-linear-gradient(top, rgba(200,200,200,1) 0%, rgba(239,239,239,1) 15%, rgba(239,239,239,1) 100%);
background: -webkit-linear-gradient(top, rgba(200,200,200,1) 0%,rgba(239,239,239,1) 15%,rgba(239,239,239,1) 100%);
background: linear-gradient(to bottom, rgba(200,200,200,1) 0%,rgba(239,239,239,1) 15%,rgba(239,239,239,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8c8', endColorstr='#efefef',GradientType=0 );
	
	
}
.trium .panel-img img ,
.trium-stripe .panel-img img {
	width:100%;
	vertical-align:top;
	transition-duration:0.2s; 
	transition-delay:0.1s;
	transition-timing-function: ease-out; 
}
.trium-stripe .panel-img img {

	opacity:0.5;
}

.trium-stripe .panel-img a:hover  img ,
.trium-stripe .panel-img a:active  img ,
.trium-stripe .panel-img a:focus  img {
	opacity:1; 
}



/* ########### VARIE ############### */