@font-face {
    font-family: 'montserratregular';
    src: url('../fonts/montserrat-regular-webfont.eot');
    src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/montserrat-regular-webfont.woff2') format('woff2'),
         url('../fonts/montserrat-regular-webfont.woff') format('woff'),
         url('../fonts/montserrat-regular-webfont.ttf') format('truetype'),
         url('../fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sanchez_regular';
    src: url('../fonts/sanchezregular-webfont.eot');
    src: url('../fonts/sanchezregular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sanchezregular-webfont.woff2') format('woff2'),
         url('../fonts/sanchezregular-webfont.woff') format('woff'),
         url('../fonts/sanchezregular-webfont.ttf') format('truetype'),
         url('../fonts/sanchezregular-webfont.svg#sanchez_regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sanchez-semibold';
    src: url('../fonts/sanchez-semibold-webfont.eot');
    src: url('../fonts/sanchez-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sanchez-semibold-webfont.woff2') format('woff2'),
         url('../fonts/sanchez-semibold-webfont.woff') format('woff'),
         url('../fonts/sanchez-semibold-webfont.ttf') format('truetype'),
         url('../fonts/sanchez-semibold-webfont.svg#webfontregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


body {margin: 0; font-family: 'montserratregular', sans-serif; font-weight: 300; font-size: 15px}
strong, p strong {font-weight: 300; font-style: normal}

header, footer {background-color: #000}
footer {position: fixed;bottom: 0;width:100%;}
header{padding: 1%; height: 70px}
footer {padding: 2%;text-align: center}
#logo{float: left;width: 50px;height: 50px;background: url("../img/logo-net-stack-bc.svg") no-repeat center;display: block;margin: 0 20px 0 0;}

#body-home a#logo{background: url("../img/logo-net-stack.svg") no-repeat center;}

#mobile-menu-droite, #mobile-menu-gauche, #menu-icon {display: none}

#ecran-menu {display: flex}
.sous-menu {float: right;font-size: 13px;}
header ul li, footer ul li,.sous-menu a, footer a {display: inline-block;padding: 0 20px 0 0}
li, .sous-menu a {float: left}
main li {float: none; display: block}
.sous-menu a {padding: 0 5px !important}
br {display: block; padding: 1% 0 0 0}
em {display: block; padding: 5% 0 0 0; font-size: 13px}
li a, .sous-menu a, footer a, #menu-icon a, footer p {color: #FFF}
a, main li a {color:#000}
footer p em, footer p, p em {padding: 0; margin-bottom:0px !important}
main ul {padding: 0}
main ul li {list-style: circle; display: list-item;margin: 0 0 0 15px;}


h1, h2, h3, h4, #menu li a, blockquote, a#menu-icon, ul#menu-technique {font-family: 'sanchez_regular', serif; font-weight: normal}
blockquote {font-family: 'sanchez-semibold';font-weight: normal;font-style: normal}
h1, h2, h3, h4 {margin: 1% 0}
h1 {margin: 0 0 1% 0}
a {text-decoration: none; border-bottom: 1px solid #000 }
button a {border-bottom:0px}
li a:hover, a#logo:hover, .sous-menu a:hover, .footer a:hover, p a:hover {opacity: 0.5}
#body-clouds a#menu-hebergements-cloud, #body-sauvegarde a#menu-sauvegarde, #body-securite a#menu-securite, #body-telephonie a#menu-telephonie, #body-services a#menu-services, #body-contact a#menu-contact, #body-client a#menu-client, #body-support a#menu-support, #body-support1 a#menu-support, #body-support2 a#menu-support, #body-contact a#menu-footer-contact, #body-client a#menu-footer-client, #body-support a#menu-footer-support, #body-plan a#menu-footer-plan, #body-mentions a#menu-footer-mentions, #body-support1 a#menu-footer-support,#body-support2 a#menu-footer-support {color:#000 !important; background-color: #fff; padding: 0 5px}

main {padding: 5% 5% 15% 5%}
.colonne,.colonne-droite {width: 50%; background-color: #fff; padding: 2%}
.colonne-droite {margin: 0 0 0 48%}

/*#menu-technique, #colonne-technique {background-color: #fff; padding: 10px; margin: 0px}
*/
#colonne-technique, #menu-technique, #menu-table-matiere {display:table-cell;padding: 10px}
#colonne-technique {width: 60%; border: 1px solid #000}
#menu-technique, #menu-table-matiere {width: 15%}
/*#menu-technique {float: left}*/
/*#colonne-technique {float: right}*/
#menu-technique a {text-decoration: none}
#menu-technique ul {display: none}
#menu-technique li:hover ul {display: block}
#body-technique #main-technique ul li {list-style: none; margin:5% 0}
#menu-technique ul li, #menu-table-matiere {font-family: 'montserratregular', sans-serif;font-weight: 300;font-size: 15px;font-size: 13px}
#menu-technique ul {font-family: 'sanchez_regular', serif; font-weight: normal}

h1 {line-height: 1.5;display:inline;
  background-image: linear-gradient(
        transparent 50%,
        #e1fffe 50%,
        #86c9fa 85%,
        transparent 85%,
        transparent 100%
    );
    background-repeat: no-repeat;background-size: 0% 100%;animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards;}

.img-contact {height: inherit; width: 150px; vertical-align: middle}


@keyframes animatedBackground {
    to {
        background-size: 100% 100%;
    }
}

input, textarea {border: none; border-bottom: 1px solid #000}
textarea, .button {border:1px solid #000}
.button {padding: 2%}
#Message, input {width: 96%;}
input.button {width: inherit}
label {display:block}

html #body-home {background: url("../img/net-stack.jpg") center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

html #body-clouds {background: url("../img/net-stack-cloud.jpg") center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

html #body-sauvegarde {background: url("../img/net-stack-sauvegarde.jpg") center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

html #body-securite {background: url("../img/net-stack-save.jpg") center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

html #body-telephonie {background: url("../img/net-stack-telephonie.jpg") center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

html #body-services {background: url("../img/net-stack-services.jpg") center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

html #body-contact {background: url("../img/net-stack-contact.jpg") center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

html #body-support, html #body-support1, html #body-support2 {background: url("../img/net-stack-support.jpg") center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

html #body-client {background: url("../img/net-stack-client.jpg") center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

html #body-plan {background: url("../img/net-stack-plan-site.jpg") center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

html #body-mentions {background: url("../img/net-stack-mentions.jpg") center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

/*html #body-technique {background: url("../img/net-stack-technique.jpg") center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover}*/

.account-wall>.form-signin {border-radius: none;background-color: #FFF;padding: 5%; margin-left: auto;margin-right: auto;display: block;width: 50%;}
#logo-connexion img {width: 50px;height: 50px}
#logo-connexion, #loader {text-align: center}

footer a {padding: 0 10px}

#menu-technique ul.menu_01 a li{display: none}
#menu-technique ul.menu_01 a:hover li {display:block}


/*MEDIA QUERY*/
@media only screen and (max-width: 640px) {
	body {font-size: 13px}
	header {padding: 10px;height: 50px}
	.colonne,.colonne-droite {width:97% }
	.colonne-droite {margin: 0}
	footer a {text-align: left}
	#ecran-menu, .sous-menu, #logo {display: none}
	#menu-icon, #mobile-logo {display: block;color: #FFF}
	#menu-icon {width: inherit;height: 50px;padding: 15px 0 0 0;}
	#mobile-logo {width: 50px;height: 70px}
	
	a#menu-icon, a#mobile-menu {border-bottom:none}

	#mobile-menu-droite {float: right;display: block}
	#mobile-menu-gauche {float: left;display: block}

nav#mobile-menu-gauche ul {left:0%;width: 25%;}
nav#mobile-menu-droite ul {right:0%;width: 40%}

nav ul, nav:active ul {display: none;position: absolute;padding:0;background: #000;top:55px;color: #fff}
nav li {text-align: center;width: 100%;padding: 10px 0;margin: 0;border-top: 1px solid #fff}

main {padding: 5% 5% 25% 5%}
nav:hover ul {display: block;}
.spacer {clear: both;}
	header ul li {padding: 5px 0;}}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}