:root { --maximum-font-size : 20px; --minimum-font-size : 12px; --base-font-size : 12px; } /******************************************************************************* ** ** ** BASE ** ** ** *******************************************************************************/ HTML, BODY { margin : 0; padding : 0; height : 100%; font-family : Trebuchet, "Trebuchet MS", "Helvetica Neue", helvetica, sans-serif; } HTML, BODY * { margin : 0; padding : 0; font-size: 0px; } img { text-decoration : none; border : none; } .main { width : 100%; height : 100%; min-width: 320px; position : relative; } .main.blur { filter : blur(20px); -webkit-filter : blur(20px); -moz-filter : blur(20px); -ms-filter : blur(20px); -o-filter : blur(20px); filter : url(../scripts/blur.svg#blur); filter : progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); } .content { position : relative; display: block; margin : 0px auto; width : 95%; max-width : 1500px; min-height : -moz-calc(100% - 429px); min-height : -webkit-calc(100% - 429px); min-height : calc(100% - 429px); padding-top : 180px; padding-bottom : 80px; top : 0; overflow : hidden; z-index : 0; text-align: center; } @media screen and (max-width: 700px) { .content { padding-bottom: 0px; } } .content p { color : #666666; font-size : var(--base-font-size); line-height: 18px; } .content em { font-weight : bold; color : inherit; font-size: inherit; margin-right: 0; } .content a, .content a:link, .content a:active, .content a:visited { text-decoration : none; color : inherit; font-size: inherit; } .content p a, .content p a:link, .content p a:active, .content p a:visited { padding : 0; color : #34BBFF; cursor : pointer; } .content p a:hover { color : #006A9F; } /******************************************************************************* ** ** ** CORPS ** ** ** *******************************************************************************/ .content h1 { text-align : center; font-size: calc(var(--base-font-size) + 10px); color : #006A9F; margin-bottom : 30px; letter-spacing: 2px; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition : all 0.3s ease-out; transition : all 0.3s ease-out; } .content div.title_description { text-align : center; padding : 10px 0px; width: -moz-calc(100% - 160px); width: -webkit-calc(100% - 160px); width: calc(100% - 160px); min-width: 264px; display: block; margin : 0 auto; } .content div.title_description p { font-size: var(--base-font-size); padding-bottom : 10px; max-width: 600px; margin : 0 auto; text-align: center; } .content h2 { color : #666666; font-size: calc(var(--base-font-size) + 5px); } .content .foot_description { overflow: hidden; position: relative; padding : 30px; margin : 0 auto; margin-top : 50px; } .content .foot_description:before { position : absolute; left : 0px; display : block; content : ''; width : 100%; height : 10px; border-radius : 50%; -moz-border-radius : 50%; -webkit-border-radius : 50%; -webkit-box-shadow : 0px -20px 5px -1px #666666; -moz-box-shadow : 0px -20px 5px -1px #666666; box-shadow : 0px -20px 5px -1px #666666; top : 10px; z-index : 10; } .content .foot_description h2 { text-align: left; font-weight: lighter; color : #006A9F; max-width : 800px; margin : 0 auto; margin-bottom : 20px; } .content .foot_description p { text-align: justify; max-width : 800px; margin : 0 auto; } @media screen and (min-width:651px) { .content .foot_description p { column-count : 2; -moz-column-count : 2; -webkit-column-count : 2; -webkit-column-gap : 20px; -moz-column-gap : 20px; column-gap : 20px; } } .content i { font-size: inherit; } /******************************************************************************* ** ** ** LANGUAGES ** ** ** *******************************************************************************/ .ML_flag { display: inline-block; position : relative; width : 150px; height : 100px; margin : 10px; border-radius : 5px; -moz-border-radius : 5px; -webkit-border-radius : 5px; background: #FFFFFF; -webkit-box-shadow : 0px 1px 1px #AAAAAA; -moz-box-shadow : 0px 1px 1px #AAAAAA; box-shadow : 0px 1px 1px #AAAAAA; zoom : 1; filter : progid:DXImageTransform.Microsoft.Shadow(Color=#AAAAAA, Strength=1, Direction=90); -webkit-transition : all 0.5s ease-out; -moz-transition : all 0.5s ease-out; -o-transition : all 0.5s ease-out; transition : all 0.5s ease-out; } .eq9 .ML_flag { filter : none; } .ML_flag:hover { -webkit-box-shadow : 0px 0px 2px #34BBFF; -moz-box-shadow : 0px 0px 2px #34BBFF; box-shadow : 0px 0px 2px #34BBFF; zoom : 1; filter : progid:DXImageTransform.Microsoft.Shadow(Color=#34BBFF, Strength=1, Direction=0), progid:DXImageTransform.Microsoft.Shadow(Color=#34BBFF, Strength=1, Direction=90), progid:DXImageTransform.Microsoft.Shadow(Color=#34BBFF, Strength=1, Direction=180), progid:DXImageTransform.Microsoft.Shadow(Color=#34BBFF, Strength=1, Direction=270); } .ML_flag .MLF_name { font-size : 15px; text-transform: uppercase; display: block; text-align: center; color : #666666; padding : 20px 10px; } .ML_flag:hover .MLF_name { color : #34BBFF; } .ML_flag.disabled .MLF_name { color : #AAAAAA; } .ML_flag .MLF_desc { font-size : 10px; display: block; text-align: center; color : #999999; padding : 5px; } /******************************************************************************* ** ** ** INDEX ** ** ** *******************************************************************************/ .content #index_title { width: -moz-calc(100% - 160px); width: -webkit-calc(100% - 160px); width: calc(100% - 160px); min-width: 304px; text-align : center; padding-bottom : 0px; margin : 0 auto; margin-bottom : 30px; } .content #index_title img { width : 300px; display : block; margin : 0 auto; } .content #index_title h1 { font-size : 25px; padding : 30px 0px; } .content #cablage { position : relative; -webkit-transition : all 1s ease-out; -moz-transition : all 1s ease-out; -o-transition : all 1s ease-out; transition : all 1s ease-out; overflow : hidden; width: 100%; display: block; margin : 0px auto; } .content #cablage, .content #cablage:active, .content #cablage:link, .content #cablage:visited { color : #666666; } .content #cablage:before { position : absolute; left : 0px; display : block; content : ''; width : 100%; height : 10px; border-radius : 50%; -moz-border-radius : 50%; -webkit-border-radius : 50%; -webkit-box-shadow : 0px -20px 5px -1px #666666; -moz-box-shadow : 0px -20px 5px -1px #666666; box-shadow : 0px -20px 5px -1px #666666; top : 10px; z-index : 10; } @media screen and (min-width: 701px) { .content #cablage { margin-bottom : 20px; } } .content #cablage h2 { width: -moz-calc(100% - 160px); width: -webkit-calc(100% - 160px); width: calc(100% - 160px); min-width: 244px; padding : 30px 0px; display: block; text-align: left; position: relative; text-align: center; margin : 0 auto; } .content #cablage:hover h2 { color : #34BBFF; } .content #cablage #cable_content { width: -moz-calc(100% - 160px); width: -webkit-calc(100% - 160px); width: calc(100% - 160px); min-width: 244px; max-width : 800px; padding : 10px 0px; margin : 0 auto; text-align: justify; } @media screen and (min-width: 651px) { .content #cablage #cable_content { column-count : 2; -moz-column-count : 2; -webkit-column-count : 2; -webkit-column-gap : 20px; -moz-column-gap : 20px; column-gap : 20px; } } .content #cablage #cable_content p { font-size: 12px; margin-bottom: 10px; display: block; text-align: justify; position: relative; } .content #cablage #cable_sections { display: block; text-align: center; margin : 0px auto; margin-top : 20px; min-width : 304px; width: -moz-calc(100% - 50px); width: -webkit-calc(100% - 50px); width: calc(100% - 50px); } .content #cablage #cable_sections .CS_pad { display: inline-block; vertical-align: top; margin : 20px; } .content #cablage #cable_sections .CS_pad img { width: 150px; height: auto; display: block; margin : 0px auto; margin-bottom : 5px; -webkit-transition : all 0.5s ease-out; -moz-transition : all 0.5s ease-out; -o-transition : all 0.5s ease-out; transition : all 0.5s ease-out; border-radius : 2px; -moz-border-radius : 2px; -webkit-border-radius : 2px; -webkit-box-shadow : 0px 1px 1px #666666; -moz-box-shadow : 0px 1px 1px #666666; box-shadow : 0px 1px 1px #666666; } .content #cablage #cable_sections .CS_pad .CS_pad_title { text-transform: uppercase; font-size : 10px; display: block; margin : 0px auto; -webkit-transition : all 0.5s ease-out; -moz-transition : all 0.5s ease-out; -o-transition : all 0.5s ease-out; transition : all 0.5s ease-out; } .content #cablage #cable_sections .CS_pad:hover img, .content #cablage #cable_sections .CS_pad:active img { -webkit-box-shadow : 0px 0px 2px #34BBFF; -moz-box-shadow : 0px 0px 2px #34BBFF; box-shadow : 0px 0px 2px #34BBFF; } .content #cablage #cable_sections .CS_pad:hover .CS_pad_title, .content #cablage #cable_sections .CS_pad:active .CS_pad_title { color : #34BBFF; } .content #mecatronique { position: relative; display: block; overflow-y: hidden; overflow-x: visible; } .content #mecatronique:before { position : absolute; left : 0px; display : block; content : ''; width : 100%; height : 10px; border-radius : 50%; -moz-border-radius : 50%; -webkit-border-radius : 50%; -webkit-box-shadow : 0px -20px 5px -1px #666666; -moz-box-shadow : 0px -20px 5px -1px #666666; box-shadow : 0px -20px 5px -1px #666666; top : 10px; z-index : 10; } .content #mecatronique #mecatronique_content { width: -moz-calc(100% - 160px); width: -webkit-calc(100% - 160px); width: calc(100% - 160px); min-width: 304px; max-width : 700px; height : 300px; text-align: justify; display : inline-block; position: relative; } .content #mecatronique #mecatronique_content .invisible_separator { height : 20px; display : block; float : right; clear: right; content : ''; } .content #mecatronique #mecatronique_content img { height : 300px; width: auto; display: block; position: absolute; z-index : -10; right : 0px; } .content #mecatronique #mecatronique_content h2 { display: block; text-align: left; padding : 70px 10px 0px 10px; width : 380px; } .content #mecatronique:hover #mecatronique_content h2 { color : #34BBFF; } .content #mecatronique #mecatronique_content p { font-size: 12px; padding : 10px; display: block; text-align: left; } @media screen and (max-width: 700px) { .content #mecatronique { background: rgba(0,0,0,.6); overflow: hidden; } .content #mecatronique #mecatronique_content .invisible_separator { display : none; } .content #mecatronique #mecatronique_content p, .content #mecatronique #mecatronique_content h2 { color : #FFFFFF; } } .content #definitions { width : 100%; position: relative; overflow: hidden; padding : 20px 0px; } .content #definitions:before { position : absolute; left : 0px; display : block; content : ''; width : 100%; height : 10px; border-radius : 50%; -moz-border-radius : 50%; -webkit-border-radius : 50%; -webkit-box-shadow : 0px -20px 5px -1px #666666; -moz-box-shadow : 0px -20px 5px -1px #666666; box-shadow : 0px -20px 5px -1px #666666; top : 10px; z-index : 10; } .content #definitions .definition { position : relative; -webkit-transition : all 1s ease-out; -moz-transition : all 1s ease-out; -o-transition : all 1s ease-out; transition : all 1s ease-out; overflow : hidden; background: #FFFFFF; padding : 20px; display : inline-block; vertical-align: top; width: -moz-calc(100% - 42px); width: -webkit-calc(100% - 42px); width: calc(100% - 42px); max-width : 320px; height : 200px; margin : 10px; border-radius : 2px; -moz-border-radius : 2px; -webkit-border-radius : 2px; -webkit-box-shadow : 0px 1px 1px #666666; -moz-box-shadow : 0px 1px 1px #666666; box-shadow : 0px 1px 1px #666666; } @media screen and (max-width: 400px) { .content #definitions .definition { margin-left : 0px; margin-right: 0px; } } .content #definitions .definition:hover { -webkit-box-shadow : 0px 0px 2px #34BBFF; -moz-box-shadow : 0px 0px 2px #34BBFF; box-shadow : 0px 0px 2px #34BBFF; } .content #definitions .definition, .content #definitions .definition:active, .content #definitions .definition:link, .content #definitions .definition:visited { color : #666666; } .content #definitions .definition h2 { padding : 10px; } .content #definitions .definition:hover h2 { color : #34BBFF; } .content #definitions .definition#def_3 p { font-size: 12px; padding : 10px; display: block; text-align: justify; } .content #definitions .definition#def_3 #def_3_img { background : url(../img/index/navigation_services_w150.png) no-repeat; background-size : 100% auto; display : block; margin : 0 auto; position : relative; content : ''; width : 150px; height : 80px; margin-top: 0px; background-position: center top; } @media (min-resolution: 2ddpx), (-webkit-min-device-pixel-ratio: 2) { .content #definitions .definition#def_3 #def_3_img { background : url(../img/index/navigation_services_w150@2x.png) no-repeat; background-size : 100% auto; } } .content #definitions .definition#def_4 { background : url(../img/index/navigation_atouts_w300.jpg) no-repeat; background-size : cover; background-position: center top; position: relative; } @media (min-resolution: 2ddpx), (-webkit-min-device-pixel-ratio: 2) { .content #definitions .definition#def_4 { background : url(../img/index/navigation_atouts_w300@2x.jpg) no-repeat; background-size : cover; background-position: center top; } } .content #definitions .definition#def_4 h2 { color : #FFFFFF; padding : 0px 10px 10px 10px; } .content #definitions .definition#def_4 p { color : #FFFFFF; } .content #index_foot_content { overflow : hidden; position: relative; padding : 30px; } .content #index_foot_content:before { position : absolute; left : 0px; display : block; content : ''; width : 100%; height : 10px; border-radius : 50%; -moz-border-radius : 50%; -webkit-border-radius : 50%; -webkit-box-shadow : 0px -20px 5px -1px #666666; -moz-box-shadow : 0px -20px 5px -1px #666666; box-shadow : 0px -20px 5px -1px #666666; top : 10px; z-index : 10; } .content #index_foot_content h2 { margin : 0 auto; margin-top : 30px; margin-bottom : 30px; text-align : left; max-width : 800px; } .content #index_foot_content #introduction { margin : 0px auto; text-align: justify; max-width : 800px; } @media screen and (min-width:651px) { .content #index_foot_content #introduction { column-count : 2; -moz-column-count : 2; -webkit-column-count : 2; -webkit-column-gap : 20px; -moz-column-gap : 20px; column-gap : 20px; } } .content #index_foot_content #introduction p { font-size : 12px; margin-bottom: 20px; } /******************************************************************************* ** ** ** ATOUTS ** ** ** *******************************************************************************/ #atouts_resume { position : relative; display : inline-block; vertical-align : middle; content : ''; width : 200px; height : 200px; margin : 30px 150px; background : url(../img/atouts/quality_w200.png) no-repeat; background-size: 100%; } @media (min-resolution: 2ddpx), (-webkit-min-device-pixel-ratio: 2) { #atouts_resume { background : url(../img/atouts/quality_w200@2x.png) no-repeat; background-size: 100%; } } @media screen and (max-width: 650px) { #atouts_resume { display : block; margin : 30px auto; } } #atouts_list { position : relative; display : inline-block; width : 400px; max-width: -moz-calc(100% - 30px); max-width: -webkit-calc(100% - 30px); max-width: calc(100% - 30px); vertical-align : middle; text-align: left; margin-left : 30px; } #atouts_list ol { list-style-type: none; list-style-type: decimal !ie; /*IE 7- hack*/ margin: 0; margin-left: 10px; padding: 0; counter-reset: li-counter; } #atouts_list ol > li { position: relative; margin-bottom: 30px; padding-left: 5px; } #atouts_list ol > li:before { position: absolute; top: 0; left: -40px; width: 24px; height: 24px; font-size: 20px; line-height: 1.2; text-align: center; color: #006A9F; border: 1px solid #006A9F; border-radius : 50%; -moz-border-radius : 50%; -webkit-border-radius : 50%; background-color: none; content: counter(li-counter); counter-increment: li-counter; } #atouts_main ol li p em { display : block; margin-bottom : 5px; color : #006A9F; } /******************************************************************************* ** ** ** CABLES ** ** ** *******************************************************************************/ #cables_main .title_description { margin-bottom : 20px; } .section { width : 300px; height : 250px; display : inline-block; vertical-align : top; overflow : hidden; padding : 0; margin : 0; position : relative; background : #FFFFFF; margin-bottom : 50px; -webkit-box-shadow : 0px 2px 2px #888888; -moz-box-shadow : 0px 2px 2px #888888; box-shadow : 0px 2px 2px #888888; margin-right : 10px; margin-left : 10px; transition : all 0.3s ease-out; -o-transition : all 0.3s ease-out; /* Opera */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ border-radius : 3px; -moz-border-radius : 3px; -webkit-border-radius : 3px; } @media screen and (max-width:340px) { .section { margin-right : 0px; margin-left : 0px; } } .section:hover { -webkit-box-shadow : 0px 0px 3px #34BBFF; -moz-box-shadow : 0px 0px 3px #34BBFF; box-shadow : 0px 0px 3px #34BBFF; } .section img { width : 300px; height : 250px; } .section .section_txt { background: rgba(0,0,0,0.3); display : block; width : 280px; height : 60px; position: absolute; bottom : 0; left : 0; text-align: center; color : #FFFFFF; text-decoration: none; padding : 10px; } .section .section_txt h2 { color : inherit; margin-bottom: 10px; } .section .section_txt p { text-align : left; color : inherit; } /******************************************************************************* ** ** ** SOUS-CABLES ** ** ** *******************************************************************************/ .content .navigation { display : block; text-align: left; font-size : 10px; margin-left : 20px; margin-right: 20px; margin-bottom : 20px; color : #999999; } .content .navigation .back { border-radius : 5px; -moz-border-radius : 5px; -webkit-border-radius : 5px; text-decoration: none; font-weight: bold; padding : 3px; } .content .navigation .back, .content .navigation .back:active, .content .navigation .back:link, .content .navigation .back:visited { color : inherit; } .content .navigation .back:hover { background: #999999; color : #FFFFFF; } .content h1.cable { text-align: center; margin : 30px 0px; } .content .title_circle_show { display: block; font-size : 11px; color : #999999; max-width : 400px; min-width: 264px; margin : 20px auto; margin-bottom: 20px; } .content #circle_show { display : block; margin : 0 auto; text-align: center; position: relative; border-radius : 50%; -moz-border-radius : 50%; -webkit-border-radius : 50%; width : 40px; height : 40px; overflow: hidden; background: #FFFFFF; -webkit-box-shadow : 0px 0px 1px #999999; -moz-box-shadow : 0px 0px 1px #999999; box-shadow : 0px 0px 1px #999999; } .content #circle_show .circle_show_element { font-size : 10px; color : #999999; display: inline-block; list-style: none; padding : 4px; margin : 3px; background: rgba(245,245,245,0.9); border-radius : 3px; -moz-border-radius : 3px; -webkit-border-radius : 3px; } .content #circle_show .circle_show_element a, .content #circle_show .circle_show_element a:link, .content #circle_show .circle_show_element a:active, .content #circle_show .circle_show_element a:hover, .content #circle_show .circle_show_element a:visited, .content #circle_show .circle_show_element a:disabled { font-size : 10px; color : #999999; text-decoration: none; } .content #circle_show .circle_show_separator { display: inline-block; background: none; content : ''; position: relative; } .content #circle_show .circle_show_separator.left { clear: left; float : left; } .content #circle_show .circle_show_separator.right { float : right; clear: right; } /******************************************************************************* ** ** ** CONTACT ** ** ** *******************************************************************************/ #formulaire { margin : 20px; padding : 20px; height : auto; position : relative; display: inline-block; vertical-align: top; background: url(../img/txtr_cnt.jpg) repeat; border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; border : 1px solid #DDDDDD; width : 50%; max-width : 400px; min-width : 262px; } @media screen and (max-width:344px) { #formulaire { margin-left : 0px; margin-right: 0px; } } #formulaire #contact_form_info { display: block; width : calc(100% - 20px); width : -moz-calc(100% - 20px); width : -webkit-calc(100% - 20px); padding : 10px; margin : 0px 0px 10px 0px; border-radius : 5px; -moz-border-radius : 5px; -webkit-border-radius : 5px; color : #FFFFFF; background: #006a9f; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDA2YTlmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM0YmJmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(45deg, #006a9f 0%, #34bbff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#006a9f), color-stop(100%,#34bbff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, #006a9f 0%,#34bbff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, #006a9f 0%,#34bbff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, #006a9f 0%,#34bbff 100%); /* IE10+ */ background: linear-gradient(45deg, #006a9f 0%,#34bbff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006a9f', endColorstr='#34bbff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ } .eq9 #formulaire #contact_form_info { filter: none; } #formulaire #contact_form_info #privacy_link, #formulaire #contact_form_info #privacy_link:hover, #formulaire #contact_form_info #privacy_link:active, #formulaire #contact_form_info #privacy_link:visited { color : #FFFFFF; text-decoration: underline; } #errors, #success { margin : 20px 0px 10px 0px; display : block; width : calc(100% - 20px); width : -moz-calc(100% - 20px); width : -webkit-calc(100% - 20px); padding : 10px; -webkit-border-radius : 5px; -moz-border-radius : 5px; border-radius : 5px; color : #FFFFFF; } #errors { background : #9C0225; display : none; } #errors.visible { display : block; } #success { background : rgb(0,128,0); } #errors li { padding : 2px; display: block; list-style : none; font-size: 12px; } #errors #info { font-weight : bold; display: block; text-transform: uppercase; } #formulaire .input_div { position: relative; margin : 20px 0px; } #formulaire .input_div input, #formulaire .input_div textarea { width : calc(100%); font-size : 12px; line-height: 14px; color : #666666; padding : 10px; margin : 0px; background: #FFFFFF; border : none; font-family: Trebuchet, "Trebuchet MS", "Helvetica Neue", helvetica, sans-serif; font-style: italic; -webkit-border-radius : 5px; -moz-border-radius : 5px; border-radius : 5px; -webkit-box-shadow : 0px 1px 1px #666666; -moz-box-shadow : 0px 1px 1px #666666; box-shadow : 0px 1px 1px #666666; } #formulaire .input_div input:focus, #formulaire .input_div textarea:focus { outline: none; -webkit-box-shadow : 0px 0px 3px #23BBFF; -moz-box-shadow : 0px 0px 3px #23BBFF; box-shadow : 0px 0px 3px #23BBFF; } #formulaire .input_div.failed input, #formulaire .input_div.failed textarea { -webkit-box-shadow : 0px 0px 3px #9C0225; -moz-box-shadow : 0px 0px 3px #9C0225; box-shadow : 0px 0px 3px #9C0225; } #formulaire .input_div textarea { resize : none; height : 200px; } #formulaire .input_div .info { border-radius : 0px 5px 5px 0px; -moz-border-radius : 0px 5px 5px 0px; -webkit-border-radius : 0px 5px 5px 0px; position : absolute; top : 0px; right : 0px; font-size : 12px; line-height: 14px; padding : 10px; color : rgba(52,187,255, 0.5); letter-spacing : 2.2pt; text-align : right; overflow: hidden; width : 120px; height : 14px; transition : all 0.3s ease-out; -o-transition : all 0.3s ease-out; /* Opera */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ } #formulaire .input_div.required .info { right : 15px; } #formulaire .input_div#MESSAGE_FIELD .info { border-radius : 0px 5px 0px 5px; -moz-border-radius : 0px 5px 0px 5px; -webkit-border-radius : 0px 5px 0px 5px; } #formulaire .input_div.failed .info { color : rgba(156, 2, 37, 0.5); } #formulaire .input_div:hover .info { padding : 10px 0px 10px 0px; width : 0px; letter-spacing: 0pt; right : 0px; } #formulaire #contact_warning { font-style : italic; font-size : 10px; margin-bottom: 20px; } #formulaire .submit_button { width : 100%; font-size : 12px; color : #FFFFFF; padding : 10px; margin : 0px; border : none; cursor: pointer; text-transform: uppercase; -webkit-border-radius : 5px; -moz-border-radius : 5px; border-radius : 5px; background: #34bbff; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM0YmJmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDZhOWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #34bbff 0%, #006a9f 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34bbff), color-stop(100%,#006a9f)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #34bbff 0%,#006a9f 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #34bbff 0%,#006a9f 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #34bbff 0%,#006a9f 100%); /* IE10+ */ background: linear-gradient(to bottom, #34bbff 0%,#006a9f 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34bbff', endColorstr='#006a9f',GradientType=0 ); /* IE6-8 */ } .eq9 #formulaire .submit_button { filter: none; } #formulaire #contact_warning .required { color: inherit; font-size: inherit; color : #34BBFF; } #formulaire .input_div .required { background: #34BBFF; color : #FFFFFF; -webkit-border-radius : 0px 5px 5px 0px; -moz-border-radius : 0px 5px 5px 0px; border-radius : 0px 5px 5px 0px; padding : 5px; font-size : 20px; line-height: 24px; display: inline-block; vertical-align: middle; position: absolute; right : 0px; top : 0px; } #formulaire .input_div#MESSAGE_FIELD .required { -webkit-border-radius : 0px 5px 0px 5px; -moz-border-radius : 0px 5px 0px 5px; border-radius : 0px 5px 0px 5px; } #formulaire .input_div.failed .required { background : #9C0225; } #ID_card { max-width : 400px; min-width : 302px; margin : 20px; background : url(../img/txtr_cnt.jpg) repeat; position : relative; display: inline-block; vertical-align: top; overflow : hidden; padding-bottom : 10px; border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; border : 1px solid #DDDDDD; } @media screen and (max-width:344px) { #ID_card { margin-left : 0px; margin-right: 0px; } } #ID_card #map_title { width : 100%; height : auto; position : relative; overflow : hidden; border-radius : 10px 10px 0px 0px; -moz-border-radius : 10px 10px 0px 0px; -webkit-border-radius : 10px 10px 0px 0px; margin : 0; padding : 0; background : url(../img/prodetics_map_w300.jpg) no-repeat center top; background-size : 100% auto; } @media (min-resolution: 2ddpx), (-webkit-min-device-pixel-ratio: 2) { #ID_card #map_title { background : url(../img/prodetics_map_w300@2x.jpg) no-repeat center top; background-size : 100% auto; } } #ID_card #map_title:before { content : ''; width : 100%; height : 100%; position : absolute; z-index : 1; top : 0; left : 0; overflow: hidden; background : rgba(0,0,0,0.2); border-radius : 10px 10px 0px 0px; -moz-border-radius : 10px 10px 0px 0px; -webkit-border-radius : 10px 10px 0px 0px; } #ID_card #map_title h3 { position : relative; width : auto; left : 10px; color : #FFFFFF; font-size : 20px; display : inline-block; vertical-align : middle; z-index : 1; } #ID_card #map_title #ID_countries { display : inline-block; position : relative; vertical-align : middle; width : 50%; left : 10%; margin-top : 10px; margin-bottom : 10px; z-index : 1; } #ID_card #map_title #ID_countries:before { content : ' '; width : 1px; height : 100%; position : absolute; left : -5%; top : 0; background : rgba(255, 255, 255, 0.8); } #ID_card #map_title #ID_countries li { list-style : none; color : rgba(255, 255, 255, 0.8); font-size: 10px; text-align: left; } #ID_card .ID_line { display: block; width : 300px; margin : 15px 0px; } #ID_card .ID_line .ID_title { font-weight : bold; position : relative; display: inline-block; vertical-align: top; width : 80px; padding-left : 20px; -webkit-hyphens : auto; -moz-hyphens : auto; -ms-hyphens : auto; -o-hyphens : auto; hyphens : auto; word-wrap : break-word; text-align : right; } #ID_card .ID_line .ID_info { width : 160px; padding : 0px 20px; text-align: left; display : inline-block; vertical-align: top; -webkit-hyphens : auto; -moz-hyphens : auto; -ms-hyphens : auto; -o-hyphens : auto; hyphens : auto; word-wrap : break-word; position : relative; z-index : 20; } #ID_card .ID_line .ID_info#ID_info_distance { width : 260px; padding : 10px 20px; text-align: center; font-weight: bold; color : #006A9F; } #ID_card .ID_line .ID_info#ID_info_delivery { width : 260px; padding : 10px 20px; text-align: center; font-weight: bold; } #ID_card .ID_line .ID_info span { font-size : 12px; } #ID_card .ID_line .ID_info span#country { display : block; text-transform: uppercase; } /******************************************************************************* ** ** ** JOBS ** ** ** *******************************************************************************/ .job_offer { display: inline-block; padding: 20px; margin: 20px; width : calc(80% - 80px); min-width : 280px; max-width : 400px; border-radius : 5px; -moz-border-radius : 5px; -webkit-border-radius : 5px; -webkit-box-shadow : 0px 1px 2px #999999; -moz-box-shadow : 0px 1px 2px #999999; box-shadow : 0px 1px 2px #999999; } .job_offer h2 { display: block; text-align: center; margin : 0px auto 20px auto; font-size: 14px; font-weight: bold; letter-spacing: 1px; } .job_offer p { text-align: justify; } .job_offer span { display: inline; font-size: inherit; } .job_offer ul { border-radius : 5px; -moz-border-radius : 5px; -webkit-border-radius : 5px; display: block; margin-top : 10px; margin-bottom : 10px; background: rgba(100,100,100,.1); padding : 10px; } .job_offer li { display: block; font-size: 12px; text-align: left; color : #666666; padding-left : 5px; } .job_offer li:before { content: "•"; padding-right: 5px; color: #34BBFF; } #job_offer_video { display : block; width : 80%; min-width : 280px; height : calc(height * 560/315); margin : 20px auto; border-radius : 5px; -moz-border-radius : 5px; -webkit-border-radius : 5px; -webkit-box-shadow : 0px 1px 2px #999999; -moz-box-shadow : 0px 1px 2px #999999; box-shadow : 0px 1px 2px #999999; } /******************************************************************************* ** ** ** 404 ** ** ** *******************************************************************************/ #error_home { display : block; position : relative; margin : 0 auto; padding : 0; } #error_home p { text-align : center; } #error_home img { display : block; width : 100px; margin : 0 auto; } /******************************************************************************* ** ** ** IMG_slider ** ** ** *******************************************************************************/ .img_slider { position : relative; height : auto; overflow : hidden; margin : 50px 30px; padding : 0; z-index : 0; text-align: center; } .img_slider .slide_img { position : relative; display : inline-block; vertical-align : middle; width : 200px; height : 150px; margin : 10px; overflow: hidden; background: #FFFFFF; border-radius : 3px; -moz-border-radius : 3px; -webkit-border-radius : 3px; -webkit-box-shadow : 0px 1px 2px #333333; -moz-box-shadow : 0px 1px 2px #333333; box-shadow : 0px 1px 2px #333333; border : none; cursor : pointer; transition : all 0.3s ease-out; -o-transition : all 0.3s ease-out; /* Opera */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ } .img_slider .slide_img:hover { -webkit-box-shadow : 0px 0px 2px #34BBFF; -moz-box-shadow : 0px 0px 3px #34BBFF; box-shadow : 0px 0px 3px #34BBFF; } .img_slider .slide_img img { width : 100%; height : 100%; border-radius : 3px; -moz-border-radius : 3px; -webkit-border-radius : 3px; } #fading_div { display : block; position : fixed; left : 0; width : 100%; height : 100%; background-color : #333333; background-color : rgba(0,0,0,0.8); z-index : 1001; text-align : center; transition : all 0.5s ease-out; -o-transition : all 0.5s ease-out; /* Opera */ -moz-transition : all 0.5s ease-out; /* Firefox 4 */ -webkit-transition : all 0.5s ease-out; /* Safari and Chrome */ } #fading_div.visible { top : 0; opacity : 1; } #fading_div.invisible { top : 100%; opacity : 0; } #fading_div .closing_div { width : 100%; height : 100%; background : none; content : ''; display : block; position : absolute; top : 0; } #fading_div #lighting_div { display : inline-block; position : relative; margin : 0 auto; z-index : 1002; overflow : hidden; text-align : center; width : 700px; max-width: 100%; height : 525px; max-height: 100%; top : calc(50% - 262px); top : -moz-calc(50% - 262px); top : -webkit-calc(50% - 262px); transition : all 1s ease-out; -o-transition : all 1s ease-out; /* Opera */ -moz-transition : all 1s ease-out; /* Firefox 4 */ -webkit-transition : all 1s ease-out; /* Safari and Chrome */ border-radius : 3px; -moz-border-radius : 3px; -webkit-border-radius : 3px; } #fading_div #lighting_div img { display : inline-block; vertical-align : middle; margin : 0 auto; width : 100%; height : 100%; transition : all 1s ease-out; -o-transition : all 1s ease-out; /* Opera */ -moz-transition : all 1s ease-out; /* Firefox 4 */ -webkit-transition : all 1s ease-out; /* Safari and Chrome */ } #fading_div #lighting_div #img_description { display : block; position : absolute; text-align: center; left : 0; width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: calc(100% - 20px); z-index : 1010; bottom : 0; background-color : #333333; background-color : rgba(0, 0, 0, 0.5); transition : all 0.3s ease-out; -o-transition : all 0.3s ease-out; /* Opera */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ font-size: 14px; margin : 0 auto; padding : 10px; text-decoration : none; color : #FFFFFF; } #fading_div .before, #fading_div .after { content : ''; display : inline-block; position : absolute; vertical-align : middle; width : 50%; height : 100%; background : none; z-index : 1005; transition : all 0.5s ease-out; -o-transition : all 0.5s ease-out; /* Opera */ -moz-transition : all 0.5s ease-out; /* Firefox 4 */ -webkit-transition : all 0.5s ease-out; /* Safari and Chrome */ opacity : 0; top : 0; } #fading_div .before { left : 0; } #fading_div .after { right : 0; } #fading_div .before:before, #fading_div .after:before { content : ''; display : block; position : absolute; width : 0px; height : 0px; border-top : 40px solid transparent; border-bottom : 40px solid transparent; top : 50%; margin-top : -40px; cursor: pointer; } #fading_div .before:before { border-left : 20px solid transparent; border-right : 20px solid #FFFFFF; left : 10px; } #fading_div .after:before { border-left : 20px solid #FFFFFF; border-right : 20px solid transparent; right : 10px; } #fading_div .before:hover, #fading_div .after:hover { opacity : 0.8; margin-left : -10px; margin-right : 10px; } #fading_div .after:hover { margin-right : -10px; margin-left : 10px; } #lighting_div a:link, #lighting_div a:active, #lighting_div a:visited { text-decoration : none; color : rgba( 10, 10, 10, 0.4); cursor : pointer; } #lighting_div a:hover { color : rgba(255, 255, 255, 0.5); } #lighting_div .close { background : url(../img/close_white_w50.png) no-repeat; background-size: 100%; width : 25px; height : 25px; position : absolute; top : 0; left : 0; z-index : 1010; overflow: hidden; cursor: pointer; border-radius : 3px 0px 0px 0px; -moz-border-radius : 3px 0px 0px 0px; -webkit-border-radius : 3px 0px 0px 0px; } /******************************************************************************* ** ** ** SERVICES COMPLÉMENTAIRES ** ** ** *******************************************************************************/ .service { position : relative; display : block; padding : 60px 20px; width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: calc(100% - 40px); overflow : hidden; /* IE6-8 */ } .service#service_developpement { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(20%,rgba(255,255,255,1)), color-stop(80%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#88ffffff',GradientType=1 ), progid:DXImageTransform.Microsoft.gradient( startColorstr='#88ffffff', endColorstr='#00ffffff',GradientType=1 ),; } .eq9 .service#service_developpement { filter : none; } .service:before { position : absolute; left : 0px; display : block; content : ''; width : 100%; height : 10px; border-radius : 50%; -moz-border-radius : 50%; -webkit-border-radius : 50%; -webkit-box-shadow : 0px -20px 5px -1px #666666; -moz-box-shadow : 0px -20px 5px -1px #666666; box-shadow : 0px -20px 5px -1px #666666; top : 10px; z-index : 10; } .service h2 { margin : 10px auto; display: block; } .service .service_description { display: block; margin : 10px auto; margin-bottom: 20px; width : 100%; max-width : 600px; } .service .service_description p { margin-bottom : 10px; } .service .service_pad { position : relative; display : inline-block; vertical-align: top; text-align: center; -webkit-transition : all 1s ease-out; -moz-transition : all 1s ease-out; -o-transition : all 1s ease-out; transition : all 1s ease-out; background: #FFFFFF; margin : 20px; } .service .service_pad h3 { font-size: 14px; padding : 5px; color : #666666; text-transform: uppercase; font-weight: lighter; } .service .service_pad .service_pad_img { width : auto; height : 150px; display : block; } .service .service_pad .service_pad_img:not(#service_developpement_design_img) { border-radius : 3px; -moz-border-radius : 3px; -webkit-border-radius : 3px; -webkit-box-shadow : 0px 1px 2px #666666; -moz-box-shadow : 0px 1px 2px #666666; box-shadow : 0px 1px 2px #666666; } .service .service_pad .service_pad_img#service_partenariats_tolerie_img { background : url(../img/txtr_cnt.jpg) repeat; } .service .service_pad .service_pad_txt { display : block; width : 200px; padding : 10px 0px; text-align: justify; } /******************************************************************************* ** ** ** FOOTER ** ** ** *******************************************************************************/ .privacy_chapter { display: block; text-align: left; max-width: 600px; margin : 10px auto; position: relative; } .privacy_chapter h2 { color : #666666; display: block; margin : 20px 0px 5px 0px; } .privacy_chapter .PC_text { position: relative; } .privacy_chapter .PC_text ul { display: block; text-align: left; position: relative; margin-bottom: 10px; } .privacy_chapter .PC_text ul li { font-size: 12px; line-height: 14px; color : #666666; text-align: left; position: relative; list-style: none; width : -moz-calc(100% - 20px); width : -webkit-calc(100% - 20px); width : calc(100% - 20px); margin-left : 20px; } .privacy_chapter .PC_text ul li:before { position: absolute; display: block; width : 6px; height : 6px; content : ''; border-radius : 50%; -moz-border-radius : 50%; -webkit-border-radius : 50%; background : none; border : 1px solid #006A9F; left : -20px; top : 3px; } .privacy_chapter .PC_text ul li:hover:before { background: #006A9F; } /******************************************************************************* ** ** ** FOOTER ** ** ** *******************************************************************************/ footer { position : relative; margin-top : 20px; text-align: center; overflow: hidden; padding : 30px 20px 92px 20px; background : url(../img/txtr_cnt.jpg) repeat center center; } .main#contact footer, .main#language footer, .main#error footer { padding-bottom: 30px; } footer:before { position : absolute; left : 0px; display : block; content : ''; width : 100%; height : 10px; border-radius : 50%; -moz-border-radius : 50%; -webkit-border-radius : 50%; -webkit-box-shadow : 0px -20px 5px -1px #666666; -moz-box-shadow : 0px -20px 5px -1px #666666; box-shadow : 0px -20px 5px -1px #666666; top : 10px; z-index : 10; } footer p { color : #999999; font-size: 10px; font-weight: lighter; padding : 3px; } footer .bottom_link, footer .bottom_link:visited, footer .bottom_link:active { font-size: inherit; color : #999999; text-decoration: none; font-weight: bold; cursor: pointer; } footer .bottom_link:hover { color : #34BBFF; } footer #conversion_form { display : block; position: fixed; bottom: 0; left : 0; background: rgba(255,255,255,0.9); border-top : 2px solid #34BBFF; padding : 10px; width : -moz-calc(100% - 20px); width : -webkit-calc(100% - 20px); width : calc(100% - 20px); text-align: center; } footer #conversion_form #conversion_text { font-size : 15px; color : #006A9F; display: inline-block; vertical-align: middle; text-align: right; width : auto; max-width : -moz-calc(100% - 150px); max-width : -webkit-calc(100% - 150px); max-width : calc(100% - 150px); } footer #conversion_form #conversion_button { display : inline-block; vertical-align: middle; position: relative; padding : 10px; margin-left : 10px; color : #FFFFFF; font-size : 15px; width : 120px; line-height: 20px; text-transform: uppercase; text-decoration: none; transition : background 0.5s ease-out; -o-transition : background 0.5s ease-out; -moz-transition : background 0.5s ease-out; -webkit-transition : background 0.5s ease-out; border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; font-weight: bold; background: #34bbff; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM0YmJmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDZhOWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #34bbff 0%, #006a9f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34bbff), color-stop(100%,#006a9f)); background: -webkit-linear-gradient(top, #34bbff 0%,#006a9f 100%); background: -o-linear-gradient(top, #34bbff 0%,#006a9f 100%); background: -ms-linear-gradient(top, #34bbff 0%,#006a9f 100%); background: linear-gradient(to bottom, #34bbff 0%,#006a9f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34bbff', endColorstr='#006a9f',GradientType=0 ); } footer #conversion_form #conversion_button:hover { background: rgb(0,106,159); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNmE5ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNGJiZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(0,106,159,1) 0%, rgba(52,187,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,106,159,1)), color-stop(100%,rgba(52,187,255,1))); background: -webkit-linear-gradient(top, rgba(0,106,159,1) 0%,rgba(52,187,255,1) 100%); background: -o-linear-gradient(top, rgba(0,106,159,1) 0%,rgba(52,187,255,1) 100%); background: -ms-linear-gradient(top, rgba(0,106,159,1) 0%,rgba(52,187,255,1) 100%); background: linear-gradient(to bottom, rgba(0,106,159,1) 0%,rgba(52,187,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006a9f', endColorstr='#34bbff',GradientType=0 ); } footer #conversion_form #conversion_button:active { top : 1px; } .eq9 footer #conversion_form #conversion_button { filter: none; } /******************************************************************************* ** ** ** HEADER ** ** ** *******************************************************************************/ header * { margin : 0; padding : 0; } header { position : relative; width : 100%; min-width : 320px; margin : 0; padding : 0; background: #006a9f; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDA2YTlmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM0YmJmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(45deg, #006a9f 0%, #34bbff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#006a9f), color-stop(100%,#34bbff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, #006a9f 0%,#34bbff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, #006a9f 0%,#34bbff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, #006a9f 0%,#34bbff 100%); /* IE10+ */ background: linear-gradient(45deg, #006a9f 0%,#34bbff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006a9f', endColorstr='#34bbff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ z-index : 1000; overflow : visible; } .eq9 header { filter: none; } header #head_top { position : relative; text-align: left; margin : 0 auto; width : 95%; max-width : 1500px; } @media screen and (max-width: 750px) { header #head_top { text-align: center; padding-top : 10px; } } header #head_top #head_home_link { text-decoration: none; display: inline-block; background: #FFFFFF; border-radius : 0px 0px 5px 5px; -moz-border-radius : 0px 0px 5px 5px; -webkit-border-radius : 0px 0px 5px 5px; padding-left : 5px; padding-right : 5px; margin-bottom : 5px; width : 200px; } @media screen and (max-width: 750px) { header #head_top #head_home_link { display : block; margin : 0px auto; margin-bottom: 5px; border-radius : 5px; -moz-border-radius : 5px; -webkit-border-radius : 5px; } } header #head_top #head_home_link #head_logo { position : relative; display: inline-block; vertical-align: middle; top : 0px; left : 0px; width : 180px; margin : 9px; z-index : 12; transition : top 0.5s ease-out; -o-transition : top 0.5s ease-out; /* Opera */ -moz-transition : top 0.5s ease-out; /* Firefox 4 */ -webkit-transition : top 0.5s ease-out; /* Safari and Chrome */ } header #head_top #slogan { font-family : Athelas, "Athelas", "Times New Roman", Times, serif; position : relative; display: inline-block; vertical-align: middle; margin-left : 10px; font-size : 20px; color : #FFFFFF; width : 200px; text-align: left; } @media screen and (max-width: 750px) { header #head_top #slogan { display : block; margin : 10px auto; text-align: center; } } header #head_top #slogan #service { font-style : italic; font-weight : bold; font-size : 20px; display: inline; } header #head_top #right_head { display : inline-block; vertical-align: middle; text-align : right; width : -moz-calc(100% - 420px); width : -webkit-calc(100% - 420px); width : calc(100% - 420px); } @media screen and (max-width: 750px) { header #head_top #right_head { display : block; text-align : center; width : 100%; max-width : 320px; margin : 0px auto; } } header #head_top #right_head #languages { display : inline-block; vertical-align: middle; position: relative; border : 1px solid #FFFFFF; border-radius : 3px; -moz-border-radius : 3px; -webkit-border-radius : 3px; overflow: hidden; } header #head_top #right_head #languages .language_button, header #head_top #right_head #languages .language_button:visited, header #head_top #right_head #languages .language_button:link, header #head_top #right_head #languages .language_button:active { display : inline-block; vertical-align: top; position: relative; text-align: center; padding : 5px; font-size : 12px; line-height : 12px; color : #FFFFFF; text-decoration: none; line-height: 1.0; overflow: hidden; -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -o-transition : all 0.3s ease-out; /* Opera */ transition : all 0.3s ease-out; } header #head_top #right_head #languages .language_button:hover, header #head_top #right_head #languages .language_button.used { background : #FFFFFF; color : #34BBFF; } header #head_top #right_head #languages .language_button.used { cursor: default; } header #head_top #right_head #plaquette_button { position: relative; text-decoration: none; display: inline-block; vertical-align: middle; margin-left : 10px; right: 0px; font-size : 12px; line-height : 12px; color : #FFFFFF; border : 1px solid #FFFFFF; border-radius : 3px; -moz-border-radius : 3px; -webkit-border-radius : 3px; -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -o-transition : all 0.3s ease-out; /* Opera */ transition : all 0.3s ease-out; } header #head_top #right_head #plaquette_button span { padding : 5px; display : inline-block; font-size: inherit; line-height: 1.0; } header #head_top #right_head #plaquette_button #pdf { color : #34BBFF; background: #FFFFFF; } header #head_top #right_head #plaquette_button:hover, header #head_top #right_head #plaquette_button:active { background: #FFFFFF; color : #34BBFF; } @media screen and (max-width: 750px) { header #head_top #right_head #languages { display : inline-block; vertical-align: middle; position: relative; border : none; overflow: hidden; } header #head_top #right_head #languages .language_button, header #head_top #right_head #languages .language_button:visited, header #head_top #right_head #languages .language_button:link, header #head_top #right_head #languages .language_button:active { border-radius : 50%; -moz-border-radius : 50%; -webkit-border-radius : 50%; width : 25px; line-height: 25px; padding : 0px; border : 1px solid #FFFFFF; overflow: hidden; -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -o-transition : all 0.3s ease-out; /* Opera */ transition : all 0.3s ease-out; } header #head_top #right_head #languages .language_button + .language_button { margin-left : 15px; } header #head_top #right_head #languages, header #head_top #right_head #plaquette_button { margin-left : 80px; margin-right : 80px; margin-top : 10px; margin-bottom : 10px; } } /******************************************************************************* ** ** ** MENU ** ** ** *******************************************************************************/ header #menu { display: block; position: absolute; width : 100%; top : 55px; text-align: center; background: none; } header #menu #menu_shadow { position : absolute; bottom : 25px; display : inline-block; width : 95%; max-width: 1500px; height : 30px; -webkit-border-radius : 50%; -moz-border-radius : 50%; border-radius : 50%; background : transparent; -webkit-box-shadow : 0px 30px 10px -5px #666666; -moz-box-shadow : 0px 30px 10px -5px #666666; box-shadow : 0px 30px 10px -5px #666666; content : ''; z-index: -1; } .lt9 header #menu #menu_shadow { bottom : 0px; filter : progid:DXImageTransform.Microsoft.Shadow(Color=#666666, Strength=5, Direction=180); zoom : 1; } header #menu #menu_pseudo { display: inline-block; position: relative; z-index : 100; width : 95%; max-width : 1500px; background : url(../img/txtr_cnt.jpg) repeat center center; text-align : center; white-space: nowrap; -webkit-border-radius : 0px 0px 10px 10px; -moz-border-radius : 0px 0px 10px 10px; border-radius : 0px 0px 10px 10px; } @media screen and (max-width: 750px) { header #menu { top : 191px; } header#error_header #menu { top : 147px; } header #menu #menu_pseudo { width : 100%; -webkit-border-radius : 0px; -moz-border-radius : 0px; border-radius : 0px; } } header #menu #menu_pseudo.unrounded { -webkit-border-radius : 0px; -moz-border-radius : 0px; border-radius : 0px; } header #menu.fixed { position : fixed; top : -50px; } header #menu.fixed:hover { top : 0px; } header #menu.transition { -webkit-transition : top .3s; -moz-transition : top .3s; -o-transition : top .3s; transition : top .3s; } @media screen and (max-width : 750px) { header #menu.fixed, header#error_header #menu.fixed { top : 0px; } } header #menu #menu_pseudo #mobile_menu_access { display : none; } @media screen and (max-width : 750px) { header #menu #menu_pseudo #mobile_menu_access { display: block; padding : 8px 4%; color : #666666; position : relative; font-weight : 400; cursor: pointer; -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -o-transition : all 0.3s ease-out; /* Opera */ transition : all 0.3s ease-out; } header #menu #menu_pseudo #mobile_menu_access:hover { color : #006A9F; } header #menu #menu_pseudo #mobile_menu_access.open { color : #FFFFFF; background : rgba(0, 106, 159, 0.3); } header #menu #menu_pseudo #mobile_menu_access #MMA_logo { font-family: PRODETICS; font-size : 30px; line-height : 30px; display: inline-block; vertical-align: middle; text-decoration : none; -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -o-transition : all 0.3s ease-out; /* Opera */ transition : all 0.3s ease-out; } header #menu #menu_pseudo #mobile_menu_access #MMA_title { font-size: 12px; text-transform: uppercase; line-height: 30px; display: inline-block; vertical-align: middle; margin-left : 15px; text-decoration : none; -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -o-transition : all 0.3s ease-out; /* Opera */ transition : all 0.3s ease-out; } } header #menu #menu_pseudo .menu_button { position : relative; display : inline-block; margin : 5px 12px; padding : 5px; width : 80px; -webkit-border-radius : 5px; -moz-border-radius : 5px; border-radius : 5px; background : none; vertical-align : top; text-align : center; text-decoration: none; -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -o-transition : all 0.3s ease-out; /* Opera */ transition : all 0.3s ease-out; } header #menu #menu_pseudo .menu_button:after { position: absolute; bottom : -5px; left : 0px; display: block; width : 100%; height : 5px; content : ''; } header #menu #menu_pseudo .menu_button, header #menu #menu_pseudo .menu_button:link, header #menu #menu_pseudo .menu_button:visited, header #menu #menu_pseudo .menu_button:active { color : #666666; } header #menu #menu_pseudo .menu_button#nav_link_0.selected { display : none; } header #menu #menu_pseudo .menu_button .nav_img { position : relative; display : block; margin : 0 auto; margin-bottom : 5px; width : auto; height : 40px; width : 40px; } header #menu #menu_pseudo .menu_button:hover .nav_img svg * { -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -o-transition : all 0.3s ease-out; /* Opera */ transition : all 0.3s ease-out; } header #menu #menu_pseudo .menu_button .nav_lab { position : relative; display : block; text-align : center; font-size : 10px; color : inherit; text-decoration: none; -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -o-transition : all 0.3s ease-out; /* Opera */ transition : all 0.3s ease-out; } header #menu #menu_pseudo .menu_button#nav_link_6.running .nav_lab { color : #DE8D36; } header #menu #menu_pseudo .menu_button:hover { -webkit-box-shadow : 0px 0px 0px 1px rgba(0, 106, 159, 0.3) inset; -moz-box-shadow : 0px 0px 0px 1px rgba(0, 106, 159, 0.3) inset; box-shadow : 0px 0px 0px 1px rgba(0, 106, 159, 0.3) inset; filter : progid:DXImageTransform.Microsoft.Shadow(Color=#006A9F, Strength=1, Direction=180); zoom : 1; } header #menu #menu_pseudo .menu_button#nav_link_6.running:hover { -webkit-box-shadow : 0px 0px 0px 1px rgba(222, 141, 54, 0.3) inset; -moz-box-shadow : 0px 0px 0px 1px rgba(222, 141, 54, 0.3) inset; box-shadow : 0px 0px 0px 1px rgba(222, 141, 54, 0.3) inset; filter : progid:DXImageTransform.Microsoft.Shadow(Color=#DE8D36, Strength=1, Direction=180); zoom : 1; } .eq9 header #menu #menu_pseudo .menu_button:hover { filter : none; } header #menu #menu_pseudo .menu_button:hover .nav_img svg * { fill : #006A9F !important; } header #menu #menu_pseudo .menu_button:hover .nav_lab { color : #006A9F; } header #menu #menu_pseudo .menu_button#nav_link_6.running .nav_img svg * { fill : #DE8D36 !important; } header #menu #menu_pseudo .menu_button#nav_link_6.running:hover .nav_lab { color : #DE8D36; } header #menu #menu_pseudo .menu_button.selected { font-weight : bold; } header #menu #menu_pseudo .menu_button.selected .nav_img svg * { fill : #FFFFFF !important; } header #menu #menu_pseudo .menu_button.selected .nav_lab { color : #FFFFFF; } header #menu #menu_pseudo .menu_button.selected { background : rgba(0, 106, 159, 0.3); } header #menu #menu_pseudo .menu_button.selected#nav_link_6.running { background : rgba(222, 141, 54, 0.3); } @media screen and (max-width : 850px) { header #menu #menu_pseudo .menu_button { width : 78px; margin : 5px 7px; } } @media screen and (max-width : 750px) { header #menu #menu_pseudo { text-align: left; } header #menu #menu_pseudo .menu_button { display : block; line-height : 0px; height : 0px; padding : 0px 4%; margin : 0; text-align: left; width: -moz-calc(92%); width: -webkit-calc(92%); width: calc(92%); -webkit-border-radius : 0px; -moz-border-radius : 0px; border-radius : 0px; overflow: hidden; } header #menu #menu_pseudo .menu_button.mobile_visible { padding : 8px 4%; line-height: 12px; height : 32px; } header #menu #menu_pseudo .menu_button:after { display : none; } header #menu #menu_pseudo .menu_button .nav_img { width : 30px; display : inline-block; vertical-align: middle; margin-right : 15px; height : 0px; margin-bottom: 0px; -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -o-transition : all 0.3s ease-out; /* Opera */ transition : all 0.3s ease-out; } header #menu #menu_pseudo .menu_button.mobile_visible .nav_img { height : 30px; } header #menu #menu_pseudo .menu_button .nav_lab { display: inline-block; vertical-align: middle; } } header #menu #menu_pseudo #sous_menu { position : absolute; left: -moz-calc(50% - 120px); left: -webkit-calc(50% - 120px); left: calc(50% - 120px); display : block; overflow: hidden; padding : 0px; max-height : 110px; white-space: normal; width : 0px; background : #006A9F; background : rgba(0, 106, 159, 0.8); -webkit-transition : all 0.3s ease-out; /* Safari and Chrome */ -moz-transition : all 0.3s ease-out; /* Firefox 4 */ -o-transition : all 0.3s ease-out; /* Opera */ transition : all 0.3s ease-out; -webkit-border-radius : 0px 0px 10px 10px; -moz-border-radius : 0px 0px 10px 10px; border-radius : 0px 0px 10px 10px; } @media screen and (max-width: 750px) { header #menu #menu_pseudo #sous_menu { display: none; } } header #menu #menu_pseudo #sous_menu .sous_menu_button { position : relative; display : inline-block; margin : 7px 5px 7px 5px; padding : 2px; width : 110px; color : #FFFFFF; border : 1px solid transparent; -webkit-border-radius : 5px; -moz-border-radius : 5px; border-radius : 5px; vertical-align : middle; text-decoration: none; } header #menu #menu_pseudo #sous_menu .sous_menu_button, header #menu #menu_pseudo #sous_menu .sous_menu_button:link, header #menu #menu_pseudo #sous_menu .sous_menu_button:visited, header #menu #menu_pseudo #sous_menu .sous_menu_button:active { color : #FFFFFF; color : rgba(255, 255, 255, 0.8); } header #menu #menu_pseudo #sous_menu .sous_menu_button:hover { border : 1px solid #FFFFFF; } header #menu #menu_pseudo #sous_menu .sous_menu_button.selected { background: #FFFFFF; color : #006A9F; } header #menu #menu_pseudo #sous_menu .nav_lab_u { position : relative; bottom : 0; display : block; margin : 0; padding : 0; color : inherit; vertical-align : middle; text-align : center; font-size : 12px; } @media screen and (min-width: 700px) { header #menu #menu_pseudo #nav_link_1:hover + #sous_menu.visible, header #menu #menu_pseudo #sous_menu:hover { left : 0; padding : 0px 10px 0px 10px; width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: calc(100% - 20px); } } @media screen and (min-width: 1161px) { header #menu #menu_pseudo #sous_menu.visible { left : 0; padding : 0px 10px 0px 10px; width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: calc(100% - 20px); } } /******************************************************************************* ** ** ** POLICES ** ** ** *******************************************************************************/ @font-face { font-family: "Trebuchet"; src : url('../fonts/Trebuchet MS.eot'); src : url('../fonts/Trebuchet MS.eot#iefix') format('embedded-opentype'), url('../fonts/Trebuchet MS.woff') format('woff'), url('../fonts/Trebuchet MS.ttf') format('truetype'), url('../fonts/Trebuchet MS.svg#svgFontName') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: "Trebuchet"; src : url('../fonts/Trebuchet MS Bold.eot'); src : url('../fonts/Trebuchet MS Bold.eot#iefix') format('embedded-opentype'), url('../fonts/Trebuchet MS Bold.woff') format('woff'), url('../fonts/Trebuchet MS Bold.ttf') format('truetype'), url('../fonts/Trebuchet MS Bold.svg#svgFontName') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: "Trebuchet"; src : url('../fonts/Trebuchet MS Italic.eot'); src : url('../fonts/Trebuchet MS Italic.eot#iefix') format('embedded-opentype'), url('../fonts/Trebuchet MS Italic.woff') format('woff'), url('../fonts/Trebuchet MS Italic.ttf') format('truetype'), url('../fonts/Trebuchet MS Italic.svg#svgFontName') format('svg'); font-weight: normal; font-style : italic; } @font-face { font-family: "Trebuchet"; src : url('../fonts/Trebuchet MS Bold Italic.eot'); src : url('../fonts/Trebuchet MS Bold Italic.eot#iefix') format('embedded-opentype'), url('../fonts/Trebuchet MS Bold Italic.woff') format('woff'), url('../fonts/Trebuchet MS Bold Italic.ttf') format('truetype'), url('../fonts/Trebuchet MS Bold Italic.svg#svgFontName') format('svg'); font-weight: bold; font-style: italic; } @font-face { font-family: "Athelas"; src : url('../fonts/Athelas.eot'); src : url('../fonts/Athelas.eot#iefix') format('embedded-opentype'), url('../fonts/Athelas.woff') format('woff'), url('../fonts/Athelas.ttf') format('truetype'), url('../fonts/Athelas.svg#svgFontName') format('svg'); font-weight: normal; font-style: normal; } /*@font-face { font-family: "Athelas"; src : url('../fonts/AthelasBold.eot'); src : url('../fonts/AthelasBold.eot#iefix') format('embedded-opentype'), url('../fonts/AthelasBold.woff') format('woff'), url('../fonts/AthelasBold.ttf') format('truetype'), url('../fonts/AthelasBold.svg#svgFontName') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: "Athelas"; src : url('../fonts/AthelasItalic.eot'); src : url('../fonts/AthelasItalic.eot#iefix') format('embedded-opentype'), url('../fonts/AthelasItalic.woff') format('woff'), url('../fonts/AthelasItalic.ttf') format('truetype'), url('../fonts/AthelasItalic.svg#svgFontName') format('svg'); font-weight: normal; font-style : italic; }*/ @font-face { font-family: "Athelas"; src : url('../fonts/AthelasBoldItalic.eot'); src : url('../fonts/AthelasBoldItalic.eot#iefix') format('embedded-opentype'), url('../fonts/AthelasBoldItalic.woff') format('woff'), url('../fonts/AthelasBoldItalic.ttf') format('truetype'), url('../fonts/AthelasBoldItalic.svg#svgFontName') format('svg'); font-weight: bold; font-style: italic; } @font-face { font-family: "PRODETICS"; src : url('../fonts/prodetics.eot'); src : url('../fonts/prodetics.eot#iefix') format('embedded-opentype'), url('../fonts/prodetics.woff') format('woff'), url('../fonts/prodetics.ttf') format('truetype'), url('../fonts/prodetics.svg#svgFontName') format('svg'); font-weight: normal; font-style: normal; }