/* Theme Name: ARBORENZIA Author: Alban Monnier Author URI: http://arborenzia.ch/ Description: Theme par ALBAN MONNIER ; Text Domain: theme_AM */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ /*RESET*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*GLOBAL*/ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} .clearfix {display: inline-block;} .selected { background: #FF0000; color: #FFF;} html[xmlns] .clearfix {display: block;} * html .clearfix {height: 1%;} .clear {clear: both;} p {margin: 0px; } a:hover { color: #b1b1b1;transition: 0.2s} a { text-decoration: none ; color: #3d3d3d; text-transform:uppercase;font-weight:bold; } *{box-sizing: border-box;} ul {list-style: none;} body{ font-family: "moniker", sans-serif; font-weight: 700; font-style: normal; font-size: 12px ; margin: 0px ; padding: 0px; background-color:white; color: #3d3d3d;opacity: 0;transition: 0.3s; } body.effect {opacity: 1;transition: 0.3s;} p {font-size: 1.4vw; color: #3d3d3d; font-weight: 100; } h1 {font-size: 1.8vw; text-transform: uppercase; font-weight: bold; color: #3d3d3d } h2 {font-size: 20px;color: #3d3d3d;line-height: 30px;font-weight: 100;} h3 {font-size: 20px;} /*WRAPER*/ #main { padding-top:8.75vw } #wraper {width: 95vw;margin: auto;z-index: 1;} /*HEADER RESPONCIVE*/ #containerLogoMenu {width: 100vw; margin: 0px;height: calc(100vw*0.09);display: flex;align-items: center;justify-content: space-between; position: fixed;z-index: 13; transition: 0.4s; } #containerLogoMenu.petit {width: 100vw; margin: 0px;height: calc(100vw*0.05);display: flex;align-items: center;justify-content: space-between; position: fixed;z-index: 13;transition: 0.4s; } #LogoMenuResponsive { background-image: url(../img/LogoMenuResponsive.svg);width: 2.5vw;height: calc(2.5vw*0.8);background-repeat: no-repeat;display: block;cursor: pointer;z-index: 15;right: 2.5%;position: fixed;transition: 0.4s;margin: auto;} #LogoMenuResponsive.petit { width: 2vw;height: calc(2vw*0.8)} #LogoMenuResponsive.open{background-image: url(../img/CroixResponcive.svg);width: 2.5vw;height: calc(2.5vw*0.8)} #LogoMenuResponsive.open.petit {width: 2vw;height: calc(2vw*0.8)} #containerHeaderResponcive{ margin: auto; text-transform: uppercase; line-height: 4.7vw; font-size: 4.93vw; width: 80%} #headerResponcive { width:100%; height:100vh; background-color:#3d3d3d;position:fixed; z-index: 6;opacity: 1; margin: auto; font-size: 3.66vw; color: white; display: flex; transition: 0.8s; margin-top: -100vh;} #headerResponcive.ouvert { width:100%; height: 100vh; opacity: 1;display: flex;transition: 0.8s; margin-top: 0px;} .ChoixMenuResponcive { color: white; display: flex;} /*HEADER*/ #header {width: 95vw; margin: 0px;height: calc(95vw*0.09);background-color: white;display: flex;align-items: center;justify-content: space-between; position: fixed;z-index: 1; transition: 0.4s; } #header.petit {width: 95vw; margin: 0px;height: calc(95vw*0.05);background-color: white;display: flex;align-items: center;justify-content: space-between; position: fixed;z-index: 1;transition: 0.4s; } #header.Ouvert { display: flex; transition: 0.2s; margin-top: 0px;z-index: 1} #header.close { display:none} .menu {font-size: 1.4vw;width:95vw } #menus li {float: right; margin-left:4vw} #menus li a {text-decoration: none;} #logoTexte {font-size: 2.26vw;text-transform: uppercase;cursor: pointer;position: absolute;display: block; transition: 0.4s;left:2.5% ;z-index: 3} #logoTexte.cache {display: none} #logoTexte.petit {font-size: 1.4vw;text-transform: uppercase;cursor: pointer;position: absolute;display: block;transition: 0.4s; } #menuPart1 { text-transform:uppercase; } #logoInsta{background-image: url(../img/instaLog.svg) ; width: 1.5vw; height: calc(1.5vw*1); background-repeat: no-repeat;display: flex; margin-left: 4vw; cursor: pointer;} #logoLinkedin{background-image: url(../img/link.svg) ; width: 1.5vw; height: calc(1.5vw*1); background-repeat: no-repeat;display: flex;margin-left: 0.5vw;cursor: pointer;} /*Texte déscriptif projet*/ #containerInfoProject {width: 95vw;display: block;padding: 2vw; margin-bottom: 2vw; margin-top: 2vw} #bigTitre { font-size: 4.93vw } #contInfo0 {} #contInfo1et2 {display: flex;} #info0 {width: 51.833vw; margin-right: 1.25vw;padding: 2vw; line-height: 4.7vw} #info1 {width: 55.833vw; margin-right: 1.25vw;padding: 2vw ;line-height: 2.2vw; text-align: justify;} #info2 { width:30.833vw; padding: 2vw; line-height: 2.2vw } .listeService { font-size: 1.4vw; font-weight: 100} .br {display: none;} .bold{font-weight: bold ;} /*PARTIE IMAGE */ #containerHome{width: 95vw ; height: calc(95vw*0.430); background-image: url(../img/animHome.gif); background-size: cover;background-position: center;margin: auto;background-position:center;} .box {width: 95vw; display: flex; margin: auto;z-index: 2} #apercuVid { width: 30.833vw;height: calc(30.833vw* 1); background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw;position: absolute;} #apercuVid.full{opacity: 1; transition: 0.4s; } #apercu-1 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu-1.full{opacity: 1; transition: 0.4s} #apercu-2 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu-2.full{opacity: 1; transition: 0.4s} #apercu-3 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu-3.full{opacity: 1; transition: 0.4s} #apercu1 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu1.full{opacity: 1; transition: 0.4s} #apercu2 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu2.full{opacity: 1; transition: 0.4s} #apercu3 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu3.full{opacity: 1; transition: 0.4s; } #apercu4 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu4.full{opacity: 1; transition: 0.4s} #apercu5 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu5.full{opacity: 1; transition: 0.4s} #apercu6 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu6.full{opacity: 1; transition: 0.4s; } #apercu7 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu7.full{opacity: 1; transition: 0.4s} #apercu8 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu8.full{opacity: 1; transition: 0.4s} #apercu9 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu9.full{opacity: 1; transition: 0.4s; } #apercu10 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu10.full{opacity: 1; transition: 0.4s} #apercu11 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu11.full{opacity: 1; transition: 0.4s} #apercu12 {width: 100%; height: 100%; background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw} #apercu12.full{opacity: 1; transition: 0.4s; } .video {width: 30.833vw;height: calc(30.833vw* 1); margin-bottom: 1.25vw;position: absolute;} #imVid { width: 30.833vw;height: calc(30.833vw* 1);margin-bottom: 1.25vw } #im-1 { width:30.833vw; height: calc(30.833vw*1); background-image: url(../img/albinetCouve2.jpg); background-size:cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw; } #im1 { width:30.833vw; height: calc(30.833vw*1.2); background-image: url(../img/im1.jpg); background-size:cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw; } #im-2 { width:30.833vw; height: calc(30.833vw*1.2); background-image: url(../img/instaCouve.jpg); background-size:cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw; } #im2 { width:30.833vw; height: calc(30.833vw*0.9) ;background-image: url(../img/tourisme2.jpg); background-size:cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw; } #im-3 { width:30.833vw; height: calc(30.833vw*0.9); background-image: url(../img/MochupBrochureDigi_A4.jpg); background-size:cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw;} #im3{ width:30.833vw; height: calc(30.833vw*1.2); background-image: url(../img/FILMSUISSE_Vignette.jpg); background-size:cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw; } #im4 { width:30.833vw ; height: calc(30.833vw*1.2); background-image: url(../img/Livre_vignette.jpg); background-size: cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw } #im5 { width:30.833vw ; height: calc(30.833vw*1.1); background-image: url(../img/analyse1.jpg); background-size: cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw } #im6 { width:30.833vw ; height: calc(30.833vw*1.8); background-image: url(../img/bain2.jpg); background-size: cover;background-position: center;cursor: pointer; margin-bottom: 1.25vw } #im7 { width:30.833vw ; height: calc(30.833vw*1.2); background-image: url(../img/WarningVignette.jpg); background-size: cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw } #im8 { width:30.833vw ; height: calc(30.833vw*1); background-image: url(../img/cart.jpg); background-size: cover;background-position:center;cursor: pointer; margin-bottom: 1.25vw } #im9 { width:30.833vw ; height: calc(30.833vw*1); background-image: url(../img/log5.gif); background-size: cover;background-position: center; cursor: pointer; margin-bottom: 1.25vw } #im10 {width:30.833vw ; height: calc(30.833vw*1.3); background-image: url(../img/signal1.jpg); background-size: cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw } #im11 {width:30.833vw ; height: calc(30.833vw*1.7); background-image: url(../img/v3.jpg); background-size: cover;background-position:center;cursor: pointer; margin-bottom: 1.25vw } #im12{ width:30.833vw ; height: calc(30.833vw*1); background-image: url(../img/carte1.png); background-size: cover;background-position: center; cursor: pointer; margin-bottom: 10% } .colonne1 { width:30.833vw; margin-right:1.25vw } .colonne2 {width:30.833vw; margin-right:1.25vw } .colonne3 {width:30.833vw; } /*FOOTER*/ #footer {margin: auto; text-align: center; width: 95vw ; text-transform: uppercase;color:#3d3d3d; /*margin-top: -3vw*/} #containerFooter { margin:auto; } #logoFooter {background-image: url(../img/3log.svg);width: 3vw; height: calc(3vw*1.2); margin: auto; background-repeat: no-repeat;background-position: center;} #textFooter { display:flex;font-size: 1.2vw;font-weight: bold} #yearDate{} #copyright{margin-left: 0.1vw;margin-right: 0.1vw;} footer p {font-weight: bold; font-size: 0.86vw} footer a {font-size: 0.86vw} #containerNewFooter{width: 95vw; display: flex;text-align: left;margin-top: 6vw; margin-bottom: 2vw} #foot1 {width: 30.833vw; margin-right: 1.25vw; font-size: 1.4vw; display: flex; align-items: flex-end; } #foot2 {width: 30.833vw; margin-right: 1.25vw; font-size:0.86vw ; text-align: center; margin: auto;display: flex;} #foot3 {width: 30.833vw; font-size: 1.4vw; display: flex;justify-content: flex-end;align-items: flex-end; } #instaLinks { cursor:pointer; } /* SITE RESPENSIVE /////////////////////////////////////////////////////////////// */ /*//////////////////////////////////////////////////////////////////////////////// */ /*//////////////////////////////////////////////////////////////////////////////// */ @media screen and (max-width: 1024px) { nav { display: block; width: 100%;} #LogoMenuResponsive.open{background-image: url(../img/CroixResponcive.svg);width: 3.5vw;height: calc(3.5vw*0.8);background-repeat: no-repeat;display: block;cursor: pointer;z-index: 16;right: 2.5%;position: fixed;transition: 0.4s;margin: auto;} #LogoMenuResponsive { display:block; transition: 0.5s;margin: auto;width: 3.5vw;height: calc(3.5vw*0.8);} #containerLogoMenu {height: calc(100vw*0.1); } .menu {display: none;transition: 0.5s;color: white;} #header {height: calc(95vw*0.1);} #logoTexte {font-size: 2.5vw;} /*aa copier*/ p {font-size: 2.26vw;} footer p {font-weight: bold; font-size: 1.4vw} footer a {font-size: 1.4vw} #logoFooter {width: 5vw;height: calc(5vw*1.2);} #textFooter { font-size: 1.8vw;} #bigTitre { font-size: 5.93vw } #containerInfoProject {display: block;} #info0 { line-height: 5.7vw; width: 60vw} #info1 {line-height: 3.1vw;width: 84.833vw;} #info2 { width:33.833vw; padding: 2vw; line-height: 3.1vw } .listeService { font-size: 2.26vw; font-weight: 100;line-height: 2.68vw;} #brArchi { display:none; } #contInfo1et2 {display: block;} /*a copier*/ #main { padding-top:9.5vw } #apercu-1 {line-height: 2.4vw;padding: 2vw;} #apercu-2 {line-height: 2.4vw;padding: 2vw;} #apercu-3 {line-height: 2.4vw;padding: 2vw;} #apercu1 {line-height: 2.4vw;padding: 2vw;} #apercu2 {line-height: 2.4vw;padding: 2vw;} #apercu3 {line-height: 2.4vw;padding: 2vw;} #apercu4 {line-height: 2.4vw;padding: 2vw;} #apercu5 {line-height: 2.4vw;padding: 2vw;} #apercu6 {line-height: 2.4vw;padding: 2vw;} #apercu7 {line-height: 2.4vw;padding: 2vw;} #apercu8 {line-height: 2.4vw;padding: 2vw;} #apercu9 {line-height: 2.4vw;padding: 2vw;} #apercu10 {line-height: 2.4vw;padding: 2vw;} #apercu11 {line-height: 2.4vw;padding: 2vw;} #apercu12 {line-height: 2.4vw;padding: 2vw;} #apercu13 {line-height: 2.4vw;padding: 2vw;} #logoInsta{display: none;} #logoLinkedin{display: none;} #containerHeaderResponcive{ margin: auto; text-transform: uppercase; line-height: 5.93vw; font-size: 5.7vw; width: 80%} } /* RESPENCIVe MOBIL //////////////////////// */ @media screen and (max-width: 500px) { nav { display: block; width: 100%;} #LogoMenuResponsive.open{background-image: url(../img/CroixResponcive.svg);width: 6.5vw;height: calc(6.5vw*0.8);background-repeat: no-repeat;display: block;cursor: pointer;z-index: 16;right: 2.5%;position: fixed;transition: 0.4s;margin: auto;right: 5vw} #LogoMenuResponsive { display:block; transition: 0.5s;margin: auto;width: 6.5vw;height: calc(6.5vw*0.8);right: 5vw} #containerLogoMenu {height: calc(100vw*0.25); } #header {height: calc(95vw*0.25);padding: 3vw} .menu {font-size: 3vw;} #logoTexte {font-size: 5.5vw;padding: 3vw} /*aa copier*/ #containerInfoProject {display: block;} #info0 {width: 77.833vw; line-height: 9.7vw} #info1 {line-height: 5.68vw;width: 84.833vw;} #info2 { width:63.833vw; padding: 2vw; line-height: 5.68vw } .listeService { font-size: 4.1vw; font-weight: 100;line-height: 5.68vw;} #bigTitre { font-size: 9.59vw } footer p {font-weight: bold; font-size: 2.26vw} footer a {font-size: 2.26vw} #logoFooter {width: 10vw;height: calc(10vw*1.2);} /*aa copier*/ h1 {font-size: 2.5vw} #italique {font-size: 2vw ; margin-top: 2vw} #main {padding-top: 23vw;} p {font-size: 4.1vw;} #containerHeaderResponcive {line-height: 10vw;padding-left: 20px;margin: auto ; width: 100%} #headerResponcive {font-size: 8vw} .box {width: 95vw; margin: auto;z-index: 2;display: block;} #containerHome{width: 95vw ; height: calc(95vw*1.2); background-image: url(../img/animHomeNatel.gif); background-size: cover;background-position: center;margin: auto;background-position:center; margin-bottom: 1.25vw;} #apercuVid { width: 95vw;height: calc(95vw* 1); background-color: #3d3d3d; color:white ; line-height: 1.4vw; font-weight: bold;opacity: 0;transition: 0.4s ; padding: 1.8vw;position: absolute;} #imVid { width: 95vw;height: calc(95vw* 1);margin-bottom: 1.25vw } .video {width: 95vw;height: calc(95vw* 1); margin-bottom: 1.25vw;position: absolute;} #im-1 { width:95vw; height: calc(95vw*1.2); background-image: url(../img//albinetHomeCouveNatel.jpg); background-size:cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw; } #im1 { width:95vw; height: calc(95vw*1.4); background-image: url(../img/im1.jpg); background-size:cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw; } #im-2 { width:95vw; height: calc(95vw*1.2); background-image: url(../img/instaCouve.jpg); background-size:cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw; } #im2 { width:95vw; height: calc(95vw*0.9) ;background-image: url(../img/tourisme2.jpg); background-size:cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw; } #im-3 { width:95vw; height: calc(95vw*0.9); background-image: url(../img/MochupBrochureDigi_A4.jpg); background-size:cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw;} #im3{ width:95vw; height: calc(95vw*1.2); background-image: url(../img/FILMSUISSE_Vignette.jpg); background-size:cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw; } #im4 { width:95vw ; height: calc(95vw*1.2); background-image: url(../img/Livre_vignette.jpg); background-size: cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw } #im5 { width:95vw ; height: calc(95vw*1.1); background-image: url(../img/analyse1.jpg); background-size: cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw } #im6 { width:95vw ; height: calc(95vw*1.8); background-image: url(../img/bain2.jpg); background-size: cover;background-position: center;cursor: pointer; margin-bottom: 1.25vw } #im7 { width:95vw ; height: calc(95vw*1); background-image: url(../img/WarningVignette.jpg); background-size: cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw } #im8 { width:95vw ; height: calc(95vw*1); background-image: url(../img/cart.jpg); background-size: cover;background-position:center;cursor: pointer; margin-bottom: 1.25vw } #im9 { width:95vw ; height: calc(95vw*1); background-image: url(../img/log5.gif); background-size: cover;background-position: center; cursor: pointer; margin-bottom: 1.25vw } #im10 {width:95vw ; height: calc(95vw*1.3); background-image: url(../img/signal1.jpg); background-size: cover;background-position:center; cursor: pointer; margin-bottom: 1.25vw } #im11 {width:95vw ; height: calc(95vw*1.7); background-image: url(../img/v3.jpg); background-size: cover;background-position:center;cursor: pointer; margin-bottom: 1.25vw } #im12{ width:95vw ; height: calc(95vw*1); background-image: url(../img/carte1.png); background-size: cover;background-position: center; cursor: pointer; margin-bottom: 10% } .colonne1 { width:95vw; margin-right:1.25vw } .colonne2 {width:95vw; margin-right:1.25vw } .colonne3 {width:95vw; } #containerHeaderResponcive{ margin: auto; text-transform: uppercase; line-height: 9.59vw; font-size: 9.7vw; width: 80%} }