/* 
    Created on : 20 janv. 2014, 17:07:12
    Author     : sreuse
*/

@font-face {font-family: 'FuturaBT-Book';src: url('webfonts/29A3DA_0_0.eot');src: url('webfonts/29A3DA_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/29A3DA_0_0.woff') format('woff'),url('webfonts/29A3DA_0_0.ttf') format('truetype');}
@font-face {font-family: 'FuturaBT-Bold';src: url('webfonts/29A3DA_1_0.eot');src: url('webfonts/29A3DA_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/29A3DA_1_0.woff') format('woff'),url('webfonts/29A3DA_1_0.ttf') format('truetype');}
body { font-family: 'FuturaBT-Book';color: #696c71; font-size: 1.6em}
a { text-decoration: none;}
.futura { font-family: 'FuturaBT-Book' }
.futurabold {font-family: 'FuturaBT-Bold'}
.gold { color: #ccc074}
.bggold { background-color: #ccc074}
.debug1 { background-color:red}
.white { color: white;}
.bgwhite {background-color: #fff }
.black {color:#5d5735}
.bgblack {background-color: #302f2d }
.grey { color: #696c71}
.bggrey { background-color: #696c71}
.bgtransp { background: transparent}
.lightgrey { color: #e0e0e0 }
.bgorange { background-color: #f29e23}
header { background: #081e2b ; height:320px; background-position: center;background-repeat: no-repeat}
.barnav {
    position: static;
    background-color : transparent;
    height : 85px;
    padding-top : 30px;
}
.barnav-fixed {
    background: #162b3e; /* Old browsers */
    background: -moz-linear-gradient(left, #162b3e 5%, #5b799b 41%, #162b3e 90%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(5%,#162b3e), color-stop(41%,#5b799b), color-stop(90%,#162b3e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #162b3e 5%,#5b799b 41%,#162b3e 90%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #162b3e 5%,#5b799b 41%,#162b3e 90%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #162b3e 5%,#5b799b 41%,#162b3e 90%); /* IE10+ */
    background: linear-gradient(to right, #162b3e 5%,#5b799b 41%,#162b3e 90%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#162b3e', endColorstr='#162b3e',GradientType=1 ); /* IE6-9 */
}
#accessnav { height: 28px; background-color: #081e2b; color: #302f2d;}
.ribbon {height:5px;}
.ribbonbig {height:25px;}
.panel {width: 100%;display:none; background: #302f2d; border-bottom: 3px solid #302f2d;padding-bottom: 25px;padding-top: 25px;}
#subheader { background: url('../images/design/logo_net4biz_title.png') no-repeat 15px 0;;margin-top: 5px;}
#nav-mobile { width: 100%;height: 20px; margin-right: 10px; float: right; background:url('../images/design/nav-icon.png') no-repeat center right; cursor:pointer}
#btn-nav-mobile { width: 20px; height: 20px;  margin-right: 10px;margin-top: 5px; float: right; background:url('../images/design/nav-icon.png') no-repeat center right; cursor:pointer}
#jingle h2 {font-size: 1.6em;padding-top: 48px;color:white; letter-spacing: 2px;}
#jingle h2 span {
    color:#ccc074;font-size: 0.8em;letter-spacing:0px;
    -webkit-animation: blurFadeIn 2s ease-in backwards;
	-moz-animation: blurFadeIn 2s ease-in backwards;
	-ms-animation: blurFadeIn 2s ease-in backwards;
	animation: blurFadeIn 2s ease-in backwards;
}
ul.menu li { float: left;}
ul.menu li a {border-right: solid 1px;padding: 0 12px;text-decoration: none;}
ul.menu li a:hover span{
}
a#lien-accueil {display: block; width:280px;height:65px;}
#accessnav ul.menu li a { color:whitesmoke}
ul.menu li:last-child a {border-right:none}
address { font-style: normal;font-size: 0.9em}
.logo { height: 85px;padding-top: 30px; padding-left: 15px; background: url('../images/design/bkg_header_trans.png') repeat-x}
#logo { width: 277px; height:45px;background-image: url('../images/design/logo_net4biz.png');background-size: contain;background-repeat: no-repeat}
#nav { padding-top: 20px;}
#nav ul li a { color: #ccc074; font-size: 1.2em;text-transform: uppercase;}
#mobile-nav ul li a { color: white;background: #81a0b2; font-size: 1.2em;text-transform: uppercase;display: block; width: 100%; padding:4px 0 4px 20px;border-bottom: 1px solid #466a84;border-top: 1px solid lightblue}
#mobile-nav ul li:first-child a{ border-top:none}
ul.picto { width:650px;margin: 0 auto; margin-top: 60px;}
ul.picto li { float: left;margin-right: 200px;}
ul.picto li:last-child { margin-right: 0}
ul.picto li a { width: 50px;height: 50px;background-size: cover;display: block}
ul.picto li a.picmobile { background-image: url('../images/design/picto_mobile-apps.png')}
ul.picto li a.picshop { background-image: url('../images/design/picto_e-shop.png')}
ul.picto li a.pichosting { background-image: url('../images/design/picto_hebergement.png')}
.portscreen {width:500px;height: 454px; background: url('../images/design/display-screen.png') no-repeat top center;}
.portitem {width:442px;margin-top:30px; height: 250px; overflow: auto}
h2, h3, h4 { text-transform: uppercase; }
h2 { font-size: 3.6em; font-weight: normal;line-height: 1.2em}
h3 { font-size: 1.6em;line-height: 1.2em}
h4 { font-size: 1.7em;line-height: 1.2em}
#solutions {padding-top: 25px;padding-bottom: 50px}
#portfolio { border-bottom: 1px solid #e0e0e0}
.bigpicto {min-height: 400px}
.bigpicto a, a.picimg {
    border-color: rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 86px;
    display: inline-block;
    height: 173px;
    width: 174px;
    background-position: center;
    background-repeat: no-repeat;
    background-origin: border-box;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
    cursor: pointer;
}
.bigpicto a:hover, a.picimg:hover { 
    border-width: 0px;
    border-color: rgba(255, 255, 255, 0.5);
}

.bigpicto a {cursor:pointer}
#pic-eshop {background-image: url('../images/design/picto_e-shop.png')}
#pic-hosting {background-image: url('../images/design/picto_hebergement.png')}
#pic-mobile {background-image: url('../images/design/picto_mobile-apps.png')}
#pic-webdesign {background-image: url('../images/design/picto_webdesign.png')}
#pic-infogerance {background-image: url('../images/design/picto_telegerance.png')}
.knowmore span {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.8em;
    width: 130px;
    background: url('../images/design/bkg_header_trans.png') repeat-x;
    padding: 8px 12px 4px 12px;
    display: block;
    -moz-border-radius-topleft:  6px;  /* Firefox jusqu'à la version version 3.6 */
    -webkit-border-top-left-radius: 6px;  /* Safari, Chrome (avant WebKit version 533) */
    border-top-left-radius: 6px;  /* Firefox 4; navigateurs supportant CSS3 */
    -moz-border-radius-topright:  6px;  
    -webkit-border-top-right-radius: 6px; 
    border-top-right-radius: 6px;
    cursor: pointer;
}
.knowmore span.customers { background: #696c71; }
.contact span {
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: bold;
    width: 100px;
    color: #302f2d;
    background: white;
    text-align: center;
    padding: 0px 8px 2px 8px;
    display: block;
    -moz-border-radius-bottomleft:  6px;  /* Firefox jusqu'à la version version 3.6 */
    -webkit-border-bottom-left-radius: 6px;  /* Safari, Chrome (avant WebKit version 533) */
    border-bottom-left-radius: 6px;  /* Firefox 4; navigateurs supportant CSS3 */
    -moz-border-radius-bottomright:  6px;  
    -webkit-border-bottom-right-radius: 6px; 
    border-bottom-right-radius: 6px;
    cursor: pointer;
}
.down span {color: white; background: #302f2d; }
.close {display: block; width: 30px;height:30px; 
        background: url('../images/design/close-icon-white.png') no-repeat;
        margin: 10px 10px 0 0;
        background-size: cover;cursor: pointer}
.content {padding-top: 40px;}
.soldetail { padding-top: 60px; bottom: 0px;width: 100%; overflow: auto;}
.soldetail h2 {font-size: 3.2em;line-height: 1.2em}

.folio {float:left;min-height: 350px;width: 400px; text-align: left}
/*.folio:last-child { border-right:none }*/
.folio h4 { font-size:1.2em; letter-spacing: -1px}

ul.customers li {margin-bottom: 15px;}
#footer {border-top: 5px solid #696c71}
footer {padding-bottom: 100px;font-size: 0.9em;}
footer > .col {padding-right: 25px;padding-left: 25px;border-right: 1px solid #e0e0e0;}
footer > .col:last-child {padding-right: 0;border-right: none;vertical-align: top}
footer ul li, footer h4 {padding-bottom: 15px }
footer h4 {font-family: FuturaBT-Bold;font-size: 17px;font-weight: normal}
footer ul li a {text-decoration: none;text-transform: uppercase; color: #e0e0e0;font-weight: bold}
.pt4 { padding-top: 40px;}
address {color: white;font-size: 1.1em;line-height: 1.2em}
address span {font-size: 0.8em}

/********************************/
.zindex10 {z-index: 10}
.zindex15 {z-index: 15}
.zindex20 {z-index: 20}
.zindex25 {z-index: 25}
.zindex30 {z-index: 30}
.zindex35 {z-index: 35}
.zindex40 {z-index: 40}
.zindex45 {z-index: 45}
.zindex50 {z-index: 50}

.zindex55 {z-index: 55}
.zindex60 {z-index: 60}
.zindex70 {z-index: 70}
.zindex80 {z-index: 80}
.zindex90 {z-index: 90}

.opacityless {opacity: .99}

.posrelative {position: relative}

.posabsolute {position: absolute}

.posfixed {position: fixed}

.hidden {display: none}

.uppercase {text-transform: uppercase}
.txtnormal {font-weight: normal}

/********* FORM *************************/
input[type=text], textarea {
    width: 330px;
    background: #eee;
    padding: 8px 16px;
    border:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
input[type=text].subject { width:400px;}
label {color:white; text-transform: uppercase;font-weight: bold}
textarea {
    width: 400px;
    height: 175px;
    margin: 0;
}
form, fieldset, ol {
    margin: 0;
    padding: 0;
}

form ol li {
    margin-bottom: 12px;
}

form ol li.check {margin-bottom: 4px;}

form ol li.tarea {margin-bottom: 8px;}

input[type="checkbox"] {
    display:none;
    margin: 0;
}

input[type="checkbox"] + label {
    font-size:12px;
}

input[type="checkbox"] + label span {
    display:inline-block;
    width:37px;
    height:37px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(../images/design/check_box.gif) left top no-repeat;
    cursor:pointer;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}

input[type="checkbox"]:checked + label span {
    background:url(../images/design/check_box.gif) -43px top no-repeat;
}
button.flat, input[type=button].flat, input[type=submit].flat, a.flat {
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;

    border:none;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-transform:uppercase;
    background: #ccc074;
}

input.error {
    border: 1px solid red;
    color: red;
}
.valign-middle {
    display: table-cell;
    vertical-align: middle;
}
.valign-top {
    display: table-cell;
    vertical-align: top;
}
.bordercollapse { border-collapse:collapse; }

/***TOOLTIP****************/
a.hastip {
	position: relative;
	text-decoration: none;
}

.tip {
	opacity: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);					/* Fucking IE */
	position: absolute;
	left: 80px;
	top: -400px;
	z-index: 30;
	padding: 0 20px;
	height: 40px;
	width: auto;
	border: solid 3px #191919;
	-webkit-border-radius:	6px;
	-moz-border-radius:	6px;
	-o-border-radius:	6px;
	border-radius:		6px;
	line-height: 40px;
	font-size: 18px;
	font-weight: bold;
	color: #e0e0e0;
	white-space: nowrap;
	background-color: rgba(0,0,0,.8);
	background-image:	-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.27)), to(rgba(0,0,0,0)), color-stop(0.3, rgba(0,0,0,.27)));
	background-image:	-webkit-linear-gradient(top, rgba(0,0,0,.27) 30%, rgba(0,0,0,0));
	background-image:          -moz-linear-gradient(top, rgba(0,0,0,.27) 30%, rgba(0,0,0,0));
	background-image:	     -o-linear-gradient(top, rgba(0,0,0,.27) 30%, rgba(0,0,0,0));
	background-image:		linear-gradient(top, rgba(0,0,0,.27) 30%, rgba(0,0,0,0));
	
	-webkit-transform:	scale(0);
	-moz-transform:		scale(0);
	-o-transform:		scale(0);
	transform:		scale(0);
	-webkit-transition:	opacity .3s ease-in-out,top .3s ease-in-out,-webkit-transform 0s linear .4s;
	-moz-transition:	opacity .3s ease-in-out,top .3s ease-in-out,-moz-transform 0s linear .4s;
	-o-transition:		opacity .3s ease-in-out,top .3s ease-in-out,-o-transform 0s linear .4s;
	transition:		opacity .3s ease-in-out,top .3s ease-in-out,transform 0s linear .4s;
}
.hastip:hover .tip, .hastip:active .tip {
	opacity: 1;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);				/* Fucking IE */
	top: -350px;
	z-index: 40;
	-webkit-transform:	scale(1);
	-moz-transform:		scale(1);
	-o-transform:		scale(1);
	transform:		scale(1);
	-webkit-transition:	opacity .3s ease-in-out, top .3s ease-in-out;
	-moz-transition:	opacity .3s ease-in-out, top .3s ease-in-out;
	-o-transition:		opacity .3s ease-in-out, top .3s ease-in-out;
	transition:		opacity .3s ease-in-out, top .3s ease-in-out;
}
.preview { cursor: pointer}

#previews {
    display: table;
    table-layout: fixed;
    width: 100%;
}
#previews > *,
.prevcol {
    display: table-cell;
    vertical-align: top;
}