/*
Theme Name: OkinAwa
Author: Le Petit Studio
Author URI: http://www.lepetitstudio.fr
*/

html
{
box-sizing: border-box;
}

*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}

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

@font-face {
    font-family: 'Blogger Sans';
    src: url('font/BloggerSans-Light.eot');
    src: url('font/BloggerSans-Light.eot?#iefix') format('embedded-opentype'),
        url('font/BloggerSans-Light.woff2') format('woff2'),
        url('font/BloggerSans-Light.woff') format('woff'),
        url('font/BloggerSans-Light.ttf') format('truetype'),
        url('font/BloggerSans-Light.svg#BloggerSans-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

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

@font-face {
  font-family: 'okinawa';
  src: url('font/okinawa.eot');
  src: url('font/okinawa.eot#iefix') format('embedded-opentype'),
       url('font/okinawa.woff2') format('woff2'),
       url('font/okinawa.woff') format('woff'),
       url('font/okinawa.ttf') format('truetype'),
       url('font/okinawa.svg#okinawa') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'okinawa';
    src: url('font/okinawa.svg#okinawa') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "okinawa";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-right:before { content: '\e800'; } /* '' */
.icon-facebook:before { content: '\e801'; } /* '' */
.icon-instagram:before { content: '\e802'; } /* '' */
.icon-logo-artquid:before { content: '\e803'; } /* '' */
.icon-logo-etsy:before { content: '\e804'; } /* '' */
.icon-logo-redbubble:before { content: '\e805'; } /* '' */

body
{
overflow: hidden;
}

.back-bt, .boxlink-bt
{
display:none;
}

.container
{
height: 100vh;
background:#fff;
display:flex;
border: 15px solid #fff;
position: relative;
}

.box-container
{
display: flex;
justify-content: space-between;
width: 90vh;
height: 90vh;
flex-wrap: wrap;
margin: auto;
transition: all 400ms 600ms, width 300ms 300ms, background-color 300ms 600ms;
}

.test
{
width: 90vh;
height: 90vh;
position: absolute;
left: 50%;
top: 50%;
background: white;
margin-left: -45vh;
margin-top: -45vh;
display:none;
}

.box
{
width:28vh;
height:28vh;
/*
background:#494949;
*/
transition: all 600ms 600ms, width 300ms 300ms, background-color 300ms 600ms;
position:absolute;
left:50%;
top:50%;
z-index:1;
display:flex;
cursor:pointer;
z-index:5;
}

.box::before
{
display:block;
content:'';
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:99;
}

.box.active::before, .box-rs::before
{
display:none;
}

.box h2
{
font-family: 'Blogger Sans';
color:#fff;
font-weight:normal;
font-size:7vh;
z-index:5;
transition: 400ms 850ms;
position:absolute;
right:15px;
bottom:5px;
text-align:right;
}

.box1
{
margin-left:-45vh;
margin-top:-45vh;
background:#09243a;
}

/*
.box1 h2
{
margin:auto;
}
*/

.box2
{
margin-left:-14vh;
margin-top:-45vh;
background:#191919;
}

/*
.box2 h2
{
position:absolute;
right:15px;
bottom:0px;
}
*/

.box2 .img-bg
{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background:url(images/menu-fabric-img.jpg) no-repeat center center;
background-size:cover;
transition:all 400ms 800ms;
}

.box2.active .img-bg
{
opacity:0;
transition:all 400ms 150ms;
}

.box3
{
margin-left:17vh;
margin-top:-45vh;
background:#669e3d;
}

/*
.box3 h2
{
width:100%;
text-align:center;
padding-top:15px; 
}
*/

.box4
{
margin-left:-45vh;
margin-top:-14vh;
}

/*
.box4 h2
{
position:absolute;
right:15px;
bottom:0px;
}
*/

.box4 .img-bg
{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}

.box4 .img-bg::before
{
display:block;
content:'';
width:100%;
height:100%;
background:url(images/menu-expo-img.jpg) no-repeat center center;
background-size:cover;
position:absolute;
left:0;
top:0;
opacity:1;
transition:all 600ms 600ms;
}

.box4.active .img-bg::before
{
opacity:0;
transition:all 400ms 400ms;
}

.box4 .img-bg img
{
opacity:0;
transition:all 600ms 600ms;
}

.box4.active .img-bg img
{
opacity:1;
transition:all 400ms 400ms;
}

.box5
{
margin-left:-14vh;
margin-top:-14vh;
background:#fff;
}

.box5 h1
{
transition: all 400ms 850ms;
}

.box5 img
{
width:100%;
height:auto;
max-width:400px;
}

.box5 .img-bg
{
background-size:contain !important;
transition: all 200ms 50ms;
width:70%;
height:70%;
position:absolute;
left:150px;
top:150px;
opacity:0;
}

.box6
{
margin-left:17vh;
margin-top:-14vh;
background:none;
}

/*
.box6 h2
{
position:absolute;
left:15px;
bottom:0px;
color:#fc0019;
}
*/

.box6 .img-bg
{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
/*
background:url(images/menu-labo-img.jpg) no-repeat center center;
background-size:cover;
*/
}

.box6.active .img-bg
{
}

.box7
{
margin-left:-45vh;
margin-top:17vh;
background:#ff9900;
}

/*
.box7 h2
{
position:absolute;
left:0px;
bottom:0px;
width:100%;
text-align:center;
}
*/

.box8
{
margin-left:-14vh;
margin-top:17vh;
}

/*
.box8 h2
{
position:absolute;
left:0px;
bottom:0px;
width:100%;
text-align:center;
}
*/

.box8 .img-bg
{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background:url(images/OuEstEmyr-Grand.png) no-repeat center center;
background-size:cover;
}

.box9
{
margin-left:17vh;
margin-top:17vh;
background:#fa0026;
}

/*
.box9 h2
{
position:absolute;
left:15px;
top:15px;
}
*/

.box.active
{
left:0 !important;
top:0 !important;
margin:0 !important;
width:60%;
height:100%;
z-index:99;
transition: all 400ms 400ms, width 300ms 800ms;
opacity:1;
cursor:auto;
}

.box5.active
{
background:#191919;
}

.box5.active h1
{
opacity:0;
transition:all 400ms 150ms;
}

.box5.active .img-bg
{
transition:all 800ms 1600ms;
opacity:1;
}

.box7.active, .box9.active
{
width:100%;
}

.box.fade
{
opacity:0;
}

.box.active h2
{
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
transition: 300ms 0ms ease-in, opacity 375ms 0ms;
}

.box8 .img-bg
{
transition: all 800ms 300ms;
left:0;
top:0;
border:2px solid rgba(255,255,255,0);
}

.box4 .img-bg, .box6 .img-bg
{
transition: all 800ms 300ms;
left:0;
top:0;
overflow:hidden;
}

.box4 .img-bg img, .box6 .img-bg img
{
position: relative;
left: -250px;
top: -50px;
transition: all 800ms 300ms;
}

.box4 .img-bg img
{
left:-700px;
top:-400px;
}

.box8.active .img-bg
{
transition: all 800ms 300ms;
width:70%;
height:87%;
left:150px;
top:50px;
border:5px solid rgba(255,255,255,1);
}

.box4.active .img-bg, .box6.active .img-bg
{
transition: all 800ms 300ms;
width:100%;
height:96%;
padding-left:50px;
padding-top:50px;
}

.box4.active .img-bg img, .box6.active .img-bg img
{
transition: all 800ms 300ms;
left:0;
top:0;
}

.box8 figcaption
{
position:absolute;
left:0;
bottom:-50px;
opacity: 0;
transition: all 800ms 0ms;
}

.box8.active figcaption
{
transition: all 800ms 1800ms;
opacity:1;
}

.box8 figcaption h3
{
font-family: 'Canter';
color: #fff;
font-size:2em;
letter-spacing: 1px;
}

.box8 figcaption h3 i
{
font-size:0.7em;
}

.box8 figcaption h3 span.soustitre
{
font-family: 'Blogger Sans';
font-weight: 300;
font-size:0.8em;
}

.close
{
display:block;
cursor:pointer;
position:absolute;
z-index:9999;
left:15px;
top:15px;
width:30px;
height:30px;
transition: all 500ms;
}

.close::after, .close::before
{
content: '';
display:block;
position: absolute;
top: 9px;
left: 0px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 25px;
height: 8px;
background-color: #fff;
opacity: 0;
transition: 500ms;
}

.close5::after, .close5::before
{
background-color:#fff;
}

.close::before
{
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.close.active::after, .close.active::before
{
opacity: 1;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
transition: 500ms 800ms;
}

.close.active::before
{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.close:hover
{
opacity:0.7;
transform: scale(0.8);
}

/*
.close:hover::after
{
transition: 300ms 0ms;
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}

.close:hover::before
{
transition: 300ms 0ms;
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
*/

.box-content
{
width:70%;
height:100%;
box-sizing: border-box;
position:absolute;
left:15%;
padding-top:5%;
transition: all 600ms 0ms;
opacity: 0;
z-index:9;
}

.content9 .box-content, .content7 .box-content, .box1 .box-content, .content2 .box-content
{
width:70%;
height:95%;
box-sizing: border-box;
position:absolute;
left:0;
top:0;
padding-left:5%;
padding-top:3%;
text-align:left;
transition: all 600ms 0ms;
opacity: 0;
z-index:9;
}

.box1 .box-content
{
width:95%;
padding-top:5%;
}

.box.active .box-content, .content.active .box-content
{
opacity: 1;
transition: all 600ms 1600ms;
}

.box1 .box-content ul.list-actu
{
display: flex;
flex-direction: column;
justify-content: space-between;
width:100%;
height: 100%;
}

.box1 .box-content ul.list-actu li
{
height:30%;
list-style-type:none;
margin:0;
padding:0;
}

.box1 .box-content ul.list-actu li figure
{
width:100%;
height:100%;
overflow:hidden;
border:2px solid #fff;
}

.box1 .box-content ul.list-actu li figure img
{
width:100%;
height:auto;
}

.content2.active
{
z-index:999 !important;
}

.content2 .box-content, .content2 .box-content .load-container
{
display:flex;
align-items:flex-start;
}

.content2 .box-content .load-container
{
width:100%;
height:100%;
}

.content2 .liste-image
{
width:40%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}

.content2 .liste-image li
{
width:23%;
list-style-type:none;
margin-bottom:2%;
transition: all 600ms 0ms;
}

.content2 .liste-image li.active, .content2 .liste-image li:hover
{
opacity:0.5;
}

.content2 .liste-image li a
{
display:block;
}

.content2 .liste-image li img
{
width:100%;
height:auto;
border:2px solid #fff;
}

.content2 .zoom-container
{
width:38%;
height:100%;
color:#fff;
margin-left:3%;
}

.content2 .zoom-container .img-container
{
margin-bottom:5%;
}

.content2 .zoom-container img
{
width:100%;
height:auto;
border:3px solid #fff;
}

.content2 .zoom-container .texte-container
{
color: #fff;
font-family: 'Blogger Sans';
font-weight: 300;
font-size: 2vh;
line-height: 3vh;
position:relative;
}

.content2 .zoom-container .texte-container h3 span.titre
{
font-family: 'Canter';
font-size: 2em;
letter-spacing: 1px;
}

.content2 .zoom-container .texte-container h3 span.guillemet
{
font-weight:100;
}

.content2 .zoom-container .texte-container .prix
{
position:absolute;
right:0;
bottom:0;
font-weight:bold;
}

.content9 .box-content .img-content, .content7 .box-content .img-content
{
width: 49%;
height: 100%;
float: left;
}

/*
.content7 .load-container
{
position:absolute;
top:20px;
opacity:0;
transition: all 600ms;
}

.content7 .load-container.active
{
top:0px;
opacity:1;
}
*/

.content7 .box-content .img-content
{
width:30%;
position:relative;
}

.content7 .box-content .img-content img
{
position:absolute;
left:0;
bottom:0;
border: 5px solid rgba(255,255,255,1);
}

.content7 .media-container
{
position:absolute;
left:0;
top:20px;
width:100%;
height:100%;
padding-left: 5%;
padding-top: 3%;
box-sizing: border-box;
opacity:0;
transition: all 600ms;
display:flex;
z-index:1;
}

.content7 .media-container .load-container
{
width:100%;
display:flex;
}

.content7 .media-container.active
{
top:0;
opacity:1;
z-index:9;
}

.content7 .media-container iframe
{
border: 5px solid rgba(255,255,255,1);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.content9 .box-content .img-content img, .content7 .box-content .img-content img
{
width:100%;
height:auto;
}

.content9 .box-content .img-content img
{
border:3px solid #fff;
}

.box-content .map
{
width:100%;
height:80%;
border:5px solid rgba(255,255,255,1);
margin-bottom:5%;
}

.box-content .texte
{
color:#fff;
font-family: 'Blogger Sans';
font-weight: 300;
/*
font-size:1.3em;
line-height:1.5em;
*/
font-size:2vh;
line-height:3vh;
}

.content9 .box-content .texte, .content7 .box-content .texte
{
width: 30%;
height: 100%;
float: left;
position:relative;
margin-left:2%;
}

.content7 .box-content .texte
{
width:49%;
}

.content7 .box-content .texte.video
{
height:auto;
margin-bottom:auto;
margin-top:auto;
width:80%;
max-width:1000px;
}

.content7 .box-content .texte.video .video-container
{
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}

.content9 .box-content .texte .texte-bottom, .content7 .box-content .texte .texte-bottom
{
position:absolute;
left:0;
bottom:0;
}

.content9 .box-content .texte .texte-bottom h3 img
{
width:35%;
}

.content7 .box-content .texte h3
{
font-family: 'Canter';
color: #fff;
font-size:2em;
letter-spacing: 1px;
}

.box-content .texte a
{
transition: all 0.5s ease;
color:#fff;
text-decoration:none;
}

.content9 .box-content .texte a
{
font-weight:normal;
}

.content9 .box-content .texte i
{
font-size:0.8em;
margin-right:5px;
}

.box-content .texte a:hover
{
opacity:0.7;
}

.box-content .texte h3 span
{
font-weight:300;
}

.content.active
{
z-index:9;
}

.content1
{
background:#191919;
position:absolute;
right:0;
left:0;
height:100%;
width:0;
transition: all 600ms 600ms, width 300ms 300ms, background-color 300ms 600ms;
}

.content1.active
{
transition: all 300ms 900ms;
width:100%;
}

.content2, .content4, .content5, .content6, .content7, .content8, .content9
{
background:#191919;
position:absolute;
right:0;
height:100%;
width:100%;
transition: all 600ms 600ms, width 300ms 300ms, background-color 300ms 600ms;
opacity:0;
}

.content7, .content9
{
background:none;
}

.content2.active, .content4.active, .content5.active, .content6.active, .content7.active, .content8.active, .content9.active
{
transition: all 400ms 900ms;
opacity:1;
}

.content3
{
background:#191919;
position:absolute;
right:0;
height:100%;
width:0;
transition: all 600ms 600ms, width 300ms 300ms, background-color 300ms 600ms;
}

.content3.active
{
transition: all 300ms 800ms;
width:40%;
}

.content7.active, .content9.active
{
z-index:999;
background:none;
}

.content
{
padding:0px;
text-align:right;
box-sizing:border-box;
}

.content h2
{
font-family: 'Blogger Sans';
color:#fff;
font-weight:normal;
font-size:5em;
z-index:5;
transition: all 600ms 0ms;
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
padding:50px;
}

.content.active h2
{
opacity: 1;
transition: all 600ms 1200ms;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}


.content ul.liste-item
{
width: 30%;
float: right;
height: 75%;
margin-right: 50px;
transition: all 600ms 0ms;
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}

.content1 ul.liste-item
{
width: 40%;
height: 95%;
position: absolute;
top: 0;
right: 0;
margin-right: 0;
padding-top: 3%;
padding-right: 3%;
padding-left: 1%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.content1 ul.liste-item li
{
height:30%;
color:#fff;
list-style-type:none;
margin:0;
padding:0;
text-align:left;
position:relative;
}

.content1 ul.liste-item li div.text-bottom
{
position:absolute;
left:0;
bottom:0;
}

.content1 ul.liste-item li div.text-bottom h3
{
font-family: 'Canter';
font-size: 3vh;
letter-spacing: 1px;
text-transform:uppercase;
}

.content1 ul.liste-item li div.text-bottom h3 i
{
font-size: 2vh;
position: relative;
top: -3px;
margin-right: 5px;
}

.content1 ul.liste-item li div.text-bottom p
{
color: #fff;
font-family: 'Blogger Sans';
font-weight: 300;
font-size: 2vh;
line-height: 3vh;
}

.content2 ul.liste-item
{
width:250px;
max-width:90%;
}

.content2 ul.liste-item li
{
font-family: 'Blogger Sans';
color:#fff;
border:2px solid #fff;
box-sizing: border-box;
padding:5px;
list-style-type:none;
margin:0 0 5% 0;
transition: all 600ms 0ms;
width:100%;
text-align:center;
}

.content4 ul.liste-item
{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
height:auto;
}

.content4 ul.liste-item li
{
width:48%;
font-family: 'Blogger Sans';
color:#fff;
border:2px solid #fff;
box-sizing: border-box;
padding:5px;
list-style-type:none;
margin:0 0 3% 0;
transition: all 600ms 0ms;
}


.content4 ul.liste-item li a, .content2 ul.liste-item li a
{
color:#fff;
text-decoration:none;
}

.content4 ul.liste-item li h3
{
font-family: 'Canter';
font-size: 4vh;
letter-spacing: 1px;
}

.content4 ul.liste-item li h3 i
{
font-size: 3vh;
position: relative;
top: -3px;
left: -5px;
}

.content4 ul.liste-item li h4, .content2 ul.liste-item li h4
{
font-size:3vh;
letter-spacing: 1px;
margin:5px 0px;
}

.content4 ul.liste-item li span.date, .content4 ul.liste-item li span.ville
{
font-size:1.6vh;
}

.content9 ul.liste-item, .content7 ul.liste-item
{
width:13%;
height:auto;
position:absolute;
right:0;
bottom:5%;
}

.content7 ul.liste-item
{
width:7%;
}

.content.active ul.liste-item
{
opacity: 1;
transition: all 600ms 1600ms;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}

.content8 ul.liste-item li
{
width: 100%;
overflow: hidden;
padding: 0;
list-style-type: none;
height: 30%;
margin-bottom: 3%;
border: 2px solid #fff;
position:relative;
opacity:1;
transition: all 600ms 0ms;
}

.content9 ul.liste-item li, .content7 ul.liste-item li
{
overflow: hidden;
padding: 0;
list-style-type: none;
margin-top:15%;
transition: all 600ms 0ms;
}

.content9 ul.liste-item li img, .content7 ul.liste-item li img
{
width:100%;
height:auto;
transform:scale(0.7);
transform-origin:right center;
transition: all 600ms 0ms;
}

.content9 ul.liste-item li a, .content7 ul.liste-item li a
{
color:#fff;
}

.content ul.liste-item li.active, .content ul.liste-item li:hover
{
opacity:0.2;
}

.content1 ul.liste-item li.active, .content1 ul.liste-item li:hover,
.content9 ul.liste-item li.active, .content9 ul.liste-item li:hover,
.content7 ul.liste-item li.active, .content7 ul.liste-item li:hover
{
opacity:1;
}

.content9 ul.liste-item li.active img, .content9 ul.liste-item li:hover img,
.content7 ul.liste-item li.active img, .content7 ul.liste-item li:hover img
{
transform:scale(1);
}

.content8 ul.liste-item li img
{
/*
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
*/
width:100%;
height:auto;
}

.content div.wpcf7
{
height:75%;
}

.content form
{
width: 88%;
height:75%;
float: right;
margin-right: 50px;
transition: all 600ms 0ms;
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}

.content form p
{
height:100%;
}

.content form label.none
{
display:none;
}

.content6 .texte, .content5 .texte
{
width: 30%;
height:75%;
float: right;
margin-right: 50px;
transition: all 600ms 0ms;
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
text-align:justify;
color:#fff;
font-family: 'Blogger Sans';
font-weight: 300;
/*
font-size:1.5em;
*/
font-size:3vh;
line-height:4vh;
}

.content5 .texte
{
font-size:2vh;
}

.content.active form
{
opacity: 1;
transition: all 600ms 1600ms;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}

.content6.active .texte, .content5.active .texte
{
opacity: 1;
transition: all 600ms 1600ms;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}

.content form .wpcf7-form-control-wrap
{
width:100%;
height:10%;
max-height:35px;
box-sizing:border-box;
margin-bottom:3%;
color:#fff;
display:grid;
}

.content form input
{
width:100%;
height:100%;
background:none;
border:0;
border-bottom:1px solid #3f3f3f;
padding:0 10px;
box-sizing:border-box;
color:#fff;
}

.content form input:focus
{
outline:none;
border-bottom:1px solid #fff;
}

.content form .wpcf7-form-control-wrap.your-message
{
width:100%;
height:40%;
max-height:none;
padding:10px;
box-sizing:border-box;
margin-bottom:3%;
color:#fff;
}

.content form textarea
{
width:100%;
height:100%;
background:none;
border:0;
border-bottom:1px solid #3f3f3f;
box-sizing:border-box;
color:#fff;
}

.content form textarea:focus
{
outline:none;
border-bottom:1px solid #fff;
}

.content form input.wpcf7-submit
{
cursor:pointer;
background:none;
font-family: 'Blogger Sans';
width: auto;
height:10%;
max-height:35px;
font-size: 20px;
letter-spacing: 1px;
text-transform: unset;
border-right: 0;
border-left: 0;
border-top: 0;
background: linear-gradient(#191919 50%,#fff 50%);
color: #3f3f3f;
background-position: right top;
background-size: 100% 200%;
transition:all 500ms;
}

.content form input.wpcf7-submit:hover
{
color:#fff;
border-bottom:1px solid #fff;
}

.content form span.wpcf7-not-valid-tip, .content div.wpcf7-response-output
{
color:#fff;
font-family: 'Blogger Sans';
font-weight:300;
}

.content div.wpcf7-response-output
{
border:0;
}

p.copy
{
color: #000;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
text-align: center;
font-family: 'Blogger Sans';
color:#1d1d1b;
font-size:13px;
transition: all 600ms 600ms;
z-index:9;
}

p.copy .lps-bt
{
color:#1d1d1b;
text-decoration:none;
border-bottom:1px dotted #1d1d1b;
}

p.copy .lps-bt:hover
{
border-bottom:1px solid #1d1d1b;
}

p.copy .lps-bt img
{
position:relative;
top:7px;
}

p.copy.fade
{
opacity:0;
transition: all 600ms 300ms;
}

.box-rs
{
margin-left:17vh;
margin-top:-45vh;
z-index:1;
}

.box-rs ul
{
position: absolute;
right:-40px;
top:0;
}

.box-rs ul li
{
list-style-type:none;
margin-bottom:5px;
}

.box-rs ul li span
{
display:none;
}

.box-rs ul li a
{
color:#323232;
font-size:25px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
transition:all 0.5s ease;
}

.box-rs ul li a:hover
{
opacity:0.7;
}


/*******RESPONSIVE******************/

@media (max-width: 1024px) {

html, body{width:100%;height:100%;}

body.page-template-page-smartphone
{
overflow:auto;
}

.container
{
display:block;
height:100%;
border:10px solid #fff;
}

.page-template-page-smartphone .container
{
height:auto;
min-height:100%;
background:#191919;
}

.page-template-page-smartphone.page-id-228 .container
{
background:#09243a;
}

.page-template-page-smartphone .container h2
{
font-family: 'Blogger Sans';
color: #fff;
font-weight: normal;
font-size: 5em;
z-index:5;
padding:20px 20px 30px 20px;
text-align:right;
}

.box-container
{
width:100%;
height:100%;
}

.box
{
width:100%;
height:10.5%;
position:relative;
margin:0;
left:0;
top:0;
overflow:hidden;
}

.box.active
{
width:100%;
height:auto;
min-height:100%;
}

.boxlink-bt
{
display:block;
width:100%;
height:100%;
position:relative;
z-index:999;
}

.box4 .img-bg img
{
width:100%;
height:auto;
left:0;
top:-500px;
}

.box5
{
background:url(images/logo-okin-awa-wide.svg) no-repeat center center;
background-size:contain;
}

.box5 h1
{
display:none;
}

.box5 .img-bg
{
display:none;
}

.box6 .img-bg img
{
position:absolute;
left:-10px;
bottom:-10px;
top:initial;
}

.box8 .img-bg
{
border:0;
}

.box h2 br
{
display:none;
}

.content
{
display:none;
}

p.copy
{
font-size:12px;
}

/****ACTU*******/

.page-id-228 .box1
{
margin:0;
background:none;
}

.page-id-228 .box1 .box-content
{
opacity:1;
position:relative;
padding-top:0;
height:auto;
}

.page-id-228 .box1 .box-content ul.list-actu li
{
height:auto;
margin-bottom:50px;
color:#fff;
}

.page-id-228 .box1 .box-content ul.list-actu li h3
{
font-family: 'Canter';
font-size: 3vh;
letter-spacing: 1px;
text-transform: uppercase;
}

.page-id-228 .box1 .box-content ul.list-actu li h3 i
{
font-size: 2vh;
position: relative;
top: -3px;
margin-right: 5px;
}

.page-id-228 .box1 .box-content ul.list-actu li p
{
color: #fff;
font-family: 'Blogger Sans';
font-weight: 300;
font-size: 2vh;
line-height: 3vh;
}

.page-id-228 .box1 .box-content ul.list-actu li figure
{
border:0;
margin-top:10px;
}

.page-id-228 .box1 .box-content ul.list-actu li figure img
{
border:2px solid #fff;
}


/******FABRIC*********/

.page-id-236 .content2
{
position:relative;
height:auto;
}

.page-id-236 .content2 .content
{
display:block;
}

.page-id-236 .content2 ul.liste-item
{
opacity: 1;
position: relative;
float: none;
width: 90%;
height: auto;
display: flex;
flex-wrap:wrap;
justify-content: space-around;
margin: 0 auto;
transform: translateY(0px);
}

.page-id-236 .content2 ul.liste-item li
{
width:45%;
}

.page-id-236 .content2 .box-content
{
position:relative;
display:block;
opacity:1;
width:90%;
height:auto;
margin:0 auto;
padding:0;
}

.page-id-236 .content2 .box-content .load-container
{
display:block;
}

.page-id-236 .content2 .liste-image
{
width:100%;
}

.page-id-236 .content2 .zoom-container
{
width:100%;
margin:30px auto;
}


/******CONTACT*********/

.page-id-247 .content
{
display:block;
}

.page-id-247 .content3
{
width: 90%;
margin: 0 auto;
height: auto;
position: relative;
}

.page-id-247 .content form
{
width:100%;
height:auto;
float:none;
margin-bottom:50px;
}

.page-id-247 .content form .wpcf7-form-control-wrap
{
height:35px;
}

.page-id-247 .box-content
{
width: 100%;
height:auto;
margin: 0 auto;
opacity: 1;
position: relative;
left: 0;
padding: 15px 2%;
background:#669e3d;
}

.page-id-247 .box-content .map
{
height:300px;
}


/******EXPO**************/

.page-id-254 .content
{
display:block;
}

.page-id-254 .content4
{
position:relative;
width:90%;
height:auto;
margin:0 auto 30px auto;
}

.page-id-254 .content4 ul.liste-item
{
width:100%;
float:none;
margin:0;
}

.page-id-254 .content4 ul.liste-item li a
{
display:block;
}

.page-id-254 .box4
{
width:90%;
margin:0 auto 30px auto;
}

.page-id-254 .box4 .img-bg
{
position:relative;
}

.page-id-254 .box4.active .img-bg
{
height:auto;
padding:0;
}

.page-id-254 .box4 img
{
width:100% !important;
height:auto !important;
}


/****A PROPOS**********/

.page-id-261 .content
{
display:block;
}

.page-id-261 .content5
{
width: 90%;
height: auto;
margin: 0 auto;
position: relative;
opacity: 1;
}

.page-id-261 .texte
{
width: 100%;
height: auto;
margin: 0;
position: relative;
opacity: 1;
transform:translateY(0px);
}

.page-id-261 .img-bg
{
width: 60%;
height: 60%;
background-size: contain !important;
position: absolute;
left: 20%;
top: 20%;
z-index: 0;
opacity: 0.1;
}

/******LABO***********/

.page-id-267 .content
{
display:block;
}

.page-id-267 .content6.active
{
display: block;
width: 90%;
height: auto;
margin: 0 auto;
position: relative;
}

.page-id-267 .content6.active .texte
{
width: 100%;
height: auto;
float: none;
margin: 0;
position: relative;
font-size:2vh;
line-height:3vh;
}

.page-id-267 .box6
{
position: relative;
width: 90%;
height: auto;
margin: 30px auto;
}

.page-id-267 .box6.active .img-bg
{
width: 100%;
height: auto;
padding: 0;
}

.page-id-267 .box6.active .img-bg img
{
position:relative;
width:100%;
height:auto;
}


/******MEDIA************/

.page-id-274 .container
{
background:#ff9900;
}

.page-id-274 .content
{
display:block;
}

.page-id-274 .content7.active
{
display: block;
width: 90%;
height: auto;
margin: 0 auto;
position: relative;
}

.page-id-274 .content.active ul.liste-item
{
position: relative;
width: 100%;
display: flex;
margin: 0 auto 30px auto;
float: none;
bottom: 0;
}

.page-id-274 .content.active ul.liste-item li
{
width:20%;
margin-top:0;
padding-right:20px;
}

.page-id-274 .box-content
{
display: block;
width: 100%;
height: auto;
margin: 0 auto;
position: relative;
padding:0;
}

.page-id-274 .content7 .media-container.active
{
position:relative;
padding:0;
width:100%;
height:auto;
}

.page-id-274 .content7 .box-content .img-content
{
display:none;
}

.page-id-274 .content7 .box-content .img-content img, .page-id-274 .content7 .box-content .texte .texte-bottom
{
position:relative;
}

.page-id-274 .content7 .box-content .texte
{
float:none;
width:100%;
}

/******CITYZEN************/

.page-id-281 .content
{
display:block;
}

.page-id-281 .content8.active
{
display: block;
width: 90%;
height: auto;
margin: 0 auto;
position: relative;
}

.page-id-281 .content ul.liste-item
{
width:100%;
height:auto;
float:none;
}

.page-id-281 .content8 ul.liste-item li
{
border:0;
height:auto;
}

.page-id-281 .content8 ul.liste-item li img
{
border:2px solid #fff;
}

.page-id-281 .box.active
{
width:90%;
margin:30px auto !important;
}

.page-id-281 .box8.active .img-bg
{
position:relative;
width:100%;
height:400px;
left:0;
top:0;
}

.page-id-281 .box8.active .img-bg figcaption
{
bottom:0;
position:relative;
box-sizing:border-box;
padding:10px;
}

/******MY SHOP************/

.page-id-285 .container
{
background:#fa0026;
}

.page-id-285 .content
{
display:block;
}

.page-id-285 .content9.active
{
display: block;
width: 90%;
height: auto;
margin: 0 auto;
position: relative;
}

.page-id-285 .content.active ul.liste-item
{
position: relative;
width: 100%;
display: flex;
margin: 0 auto 30px auto;
float: none;
bottom: 0;
}

.page-id-285 .content.active ul.liste-item li
{
width:30%;
margin-top:0;
padding-right:20px;
}

.page-id-285 .content9 .box-content
{
width: 100%;
position: relative;
height: auto;
padding: 0;
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
}

.page-id-285 .content9 .box-content .img-content, .page-id-285 .content9 .box-content .texte
{
float:none;
width:100%;
height:auto;
margin:0;
}

.page-id-285 .content9 .box-content .texte
{
margin-bottom:30px;
}

.page-id-285 .content9 .box-content .img-content, .page-id-285 .content9 .box-content .texte .texte-bottom
{
position:relative;
}

.page-id-285 .content9 .box-content .texte .texte-bottom h3
{
display:none;
}


/*****BOUTON RETOUR**********/

.page-template-page-smartphone .back-bt
{
display:block;
cursor:pointer;
position:absolute;
z-index:99999;
left:30px;
top:30px;
width:40px;
height:40px;
transition: all 500ms;
}

.back-bt span
{
display:none;
}

.back-bt::after, .back-bt::before
{
content: '';
display:block;
position: absolute;
top: 9px;
left: 0px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
width: 25px;
height: 8px;
background-color: #fff;
opacity: 1;
transition: 500ms;
}

.back-bt::before
{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}



}