/* version ordinateur*/

@media screen and (min-width: 950px) {

  ::selection { background: blue; color:inherit; }
  ::-moz-selection { background: blue; color:inherit; }

    /*GLOBAL PAR DEFAUT*/
    html {
    width:100%;
    margin:none;
    padding: 0px;
    }

    /*HEADER*/
    header {
    height: 70px;
	position: fixed;
	width: 100%;
  background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0.547900390625) 10%, rgba(255,255,255,0) 100%);
	z-index: 100;
    top:0px;
    left:0px;
    margin-bottom:35px;
    }

    header .logo {
    width:286px;
    z-index: 110;
    }

    header h1 {
    text-align:left;
    font-size:15px;
    font-family:helvetica;
    color:white;
    margin-left:20px;
    margin-top:10px;
    margin-bottom:0px;
    width:205px;
    top:0%;
    height:30px;
    position:fixed;
    opacity: 1;
    }

    header h1 a {
        color:black;
    }

    header a:hover {
        text-decoration: none;
        color:white;
        cursor:crosshair;
    }

    header a:visited {
        color:black;
    }

    /*=>animation*/
    header h1:hover {
    opacity:0;
    transition:6s;
    }

    header h1:not(hover) {
    opacity:1;
    transition:3s;
    }

    /*=>menu*/
    header p a:hover {
    text-decoration: underline;
    }

    .listemenu {
    list-style-type: none;
    margin: 0;
    top: 60px;
    padding: 0;
    width: inherit;
    position: fixed;
    margin-left: 10px;
    cursor:crosshair;
    left:0%;
    color:black;
    background-color:white;
    }

    li a:visited {
    color:black;
    }

    li {
    float: left;
    list-style-type: none;
    }

    li a, .dropbtn {
    display: block;
    color: black;
    font-size:12px;
    text-align: left;
    padding: 10px 10px;
    text-decoration: none;
    font-family: helvetica;
    letter-spacing:0.5px;
    cursor:crosshair;
    list-style-type: none;
    }

        /*=>menu mobile*/
        .mobilemenu {
        display:none;
    }

    .mobilemenu div {
        display:none;
    }

    .mobilemenu div svg {
        display:none;
    }
    .svgcontent {
        display:none;
    }

    .mylinks {
        display:none;
    }

    /*ADDed*/
    li a:hover, .dropdown:hover .dropbtn  {
    color:blue;
    text-decoration:line-through;}

li a:visited:hover {
color:blue;
}

li.dropdown {
    display: block;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    width: inherit;
    padding-bottom: 20px;
    padding-right: 10px;
    /*border-width: 1px;
    border-color:black;
    border-style:solid;
    border-top:none;*/

}

.dropdown-content a {
    font-family:helvetica;
    width:118px;
    height:20px;
    margin:0;
    padding:0;
    background-color: white;
    letter-spacing: 1px;
    font-size: 14px;
    color: black;
    padding: 8px 5px;
    text-decoration: none;
    display: block;
    text-align: left;
    padding-left:17px;
    font-family: helvetica;
}

.dropdown-content .special{
        text-align: center;
        padding-bottom: 2px;
    }

.dropdown-content a:hover {
    cursor:pointer;
    text-decoration: underline;
    }

.dropdown:hover .dropdown-content {
    display: block;
}
    /*ADDed*/


    /*CONTENU*/
    #content {
    position:absolute;
    left:70px;
    top:0px;
    text-align: justify;
    display: block;
    margin:0 auto;
    padding-right: 20px;
    color:white;
    font-size:14px;
    }

    summary {
        outline:none;
    }

   details a:hover{background-color:#00007B;transition:0.5s;
    }
    .surlign:hover{background-color:#00007B;transition:0.6s;}

    /*CONTENU portfolio "selection of works"*/
    .WorkList {
    list-style-type: none;
    margin: 0;
    top: 60px;
    padding: 0;
    width: 200px;
    height:85%;
    position: fixed;
    overflow-y: scroll;
    margin-left: 10px;
    cursor:crosshair;
    color:black;
    background-color:white;
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image:linear-gradient(to bottom, black 50%, transparent 100%);
    }

    .Work {position:absolute;right:10%;left:auto;top:17px;width:50%;padding-bottom:30px;}

    .WorkTitre {font-size:23px;letter-spacing:1px;text-align:right;font-weight:500}

    .WorkImg {display:block;width:100%;padding-top:27px;}

    .WorkImgLegend {text-align:right;letter-spacing:0.1px;padding-top:3px;font-size:10px;text-align:left;}

    .WorkTech {font-weight:200;padding-top:8px;font-size:11px;line-height:15px;letter-spacing:0.1px;}

    .WorkDescription {text-align:left;padding-top:10px;padding-bottom:0px;line-height:21px;color:black;font-size:16px;}

/*Filtre version mobile*/

    .WorkSelect {
    top:20px;
    right:35%;
    position: absolute;
    display :none;
    }

/*SECTION INDEX COVER*/

.bluecover {
  width:100%;
  height:auto;
  border:none;
  opacity:1;
  z-index:1;
  cursor:pointer;
}
.bluecover a:hover {
    cursor:crosshair;
    opacity:96%;
    transition: 0.5s;
    }
  .bluecover a:not(hover){
    cursor:crosshair;
    opacity:100%;
    transition: 0.5s;
    }

/* !*/
}
/* version appareils IPAD*/

@media screen and (max-width: 950px) and (min-width: 680px) {

  ::selection { background: blue; color:inherit; }
  ::-moz-selection { background: blue; color:inherit; }

    /*GLOBAL PAR DEFAUT*/
    html {
    width:100%;
    margin:none;
    padding: 0px;
    }

    /*HEADER*/
    header {
    height: 70px;
	position: fixed;
	width: 100%;
    background: white;
	z-index: 100;
    top:0px;
    left:0px;
    margin-bottom:35px;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0.547900390625) 10%, rgba(255,255,255,0) 100%);
    }

    header .logo {
    width:286px;
    }

    header h1 {
    text-align:left;
    font-size:15px;
    font-family:helvetica;
    color:white;
    margin-left:20px;
    margin-top:10px;
    margin-bottom:0px;
    width:205px;
    top:0%;
    height:30px;
    position:fixed;
    opacity: 1;
    z-index:115;
    }

    header h1 a {
        color:black;
    }

    header a:hover {
        text-decoration: none;
        color:white;
        cursor:crosshair;
    }

    header a:visited {
        color:black;
    }

    /*=>animation*/
    header h1:hover {
    opacity:0;
    transition:6s;
    }

    header h1:not(hover) {
    opacity:1;
    transition:3s;
    }

    /*=>menu*/
    header p a:hover {
    text-decoration: underline;
    }

    .listemenu {
    list-style-type: none;
    margin: 0;
    top: 60px;
    padding: 0;
    width: inherit;
    position: fixed;
    margin-left: 10px;
    cursor:crosshair;
    left:0%;
    color:black;
    background-color:white;
    display:none;
    }

    li a:visited {
    color:black;
    }

    li {
    float: left;
    list-style-type: none;
    }

    li a, .dropbtn {
    display: block;
    color: black;
    font-size:12px;
    text-align: left;
    padding: 3px 30px;
    text-decoration: none;
    font-family: helvetica;
    letter-spacing:0.5px;
    cursor:crosshair;
    list-style-type: none;
    }

    /*MENU MOBILE*/

    /* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: none;
  position: absolute;
    width:190px;
    right:10px;
    z-index:110;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
display: none;
text-align: left;
background-color: white;
    border-style:solid;
    border-width: 1px;
    border-color:black;
}

/* Style navigation menu links */
.topnav a{
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display:block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: none;
  display: block;
  position: absolute;
  right: 0px;
  top: 0px;
  width:190px;
}

/* Add a grey background color on mouse-over */
.mylinks a:hover {
    text-decoration:line-through;
    color:blue;
}

.mylinks {
  padding-bottom:0px;
  padding-top:5px;
    margin-top: 12px;
    margin-right:5px;
    }
.mylinks a{
    font-size: 16px;
    font-family: helvetica, arial;
    padding:0px;
    padding-left:19px;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0.7px;
}

/* Style the active link (or home/logo) */
.active {
    background-color: transparent;
    width:50px;
    }

    /*anim menu mobile*/
    .anim {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 17s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
    to {
        opacity: 1;
    }
}

    /*CONTENU*/
    #content {
    position:absolute;
    left:70px;
    top:0px;
    text-align: justify;
    display: block;
    margin:0 auto;
    padding-right: 20px;
    color:white;
    }

    summary {
        outline:none;
    }

   details a:hover{
        background-color: #00007B;
        transition:0.5s;
    }

    /*CONTENU portfolio "selection of works"*/
    .WorkList {
    list-style-type: none;
    margin: 0;
    top: 60px;
    padding: 0;
    width: 230px;
    position: fixed;
    margin-left: 0px;
    left:10px;
    cursor:crosshair;
    color:black;
    background-color:white;
    height : 85%;
    overflow-y: scroll;
    scrollbar-color: rebeccapurple green;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image:linear-gradient(to bottom, black 50%, transparent 100%);
    }

    /*ADDed*/
    li a:hover {
    color:blue;
    text-decoration:line-through;}

  li a:visited {
  color:black;
  }

  li a:visited:hover {
  color:blue;
  }

  li {
  float: left;
  list-style-type: none;
  }

  li a, .dropbtn {
  display: block;
  color: black;
  font-size:12px;
  text-align: left;
  padding: 10px 10px;
  padding-right:10px;
  text-decoration: none;
  font-family: helvetica;
  letter-spacing:0.5px;
  cursor:crosshair;
  }

    .Work {position:absolute;right:5%;left:auto;top:25px;width:60%;padding-bottom:30px;}

    .WorkTitre {font-size:23px;letter-spacing:1px;text-align:right;font-weight:500}

    .WorkImg {display:block;width:100%;padding-top:27px;}

    .WorkImgAutres {display:block;width:100%;padding-top:5px;}

    .WorkImgLegend {text-align:right;letter-spacing:0.1px;padding-top:2px;font-size:9px;text-align:left;}

    .WorkTech {font-weight:200;padding-top:8px;font-size:11px;line-height:15px;letter-spacing:0.1px;}

    .WorkDescription {text-align:left;padding-top:10px;padding-bottom:0px;line-height:21px;color:black;font-size:16px;}

    /*Filtre version mobile*/

        .WorkSelect {
        top:20px;
        right:43%;
        position: absolute;
        display :none;
        }

        /*SECTION INDEX COVER*/

        .bluecover {
          width:100%;
          height:auto;
          border:none;
          opacity:1;
          z-index:1;
          cursor:pointer;
        }
        .bluecover a:hover {
            cursor:crosshair;
            opacity:96%;
            transition: 0.5s;
            }
          .bluecover a:not(hover){
            cursor:crosshair;
            opacity:100%;
            transition: 0.5s;
            }
/*!*/
}
/*Version telephone portable (iphone)*/
@media screen and (max-width: 679px) {
  @-ms-viewport { width: 320px; }

::selection { background: blue; color:inherit; }
::-moz-selection { background: blue; color:inherit; }


    /*GLOBAL PAR DEFAUT*/
    html {
    width:100%;
    margin:none;
    padding: 0px;
    }

    /*HEADER*/
    header {
    height: 120px;
	position: fixed;
	width: 100%;
    background: white;
	z-index: 100;
    top:0px;
    left:0px;
    margin-bottom:35px;
background: linear-gradient(180deg, rgba(255,255,255,1) 19%, rgba(255,255,255,0.40086206896551724) 45%, rgba(255,255,255,0.22146118721461183) 70%, rgba(255,255,255,0) 94%, rgba(255,255,255,0) 100%);}

    header .logo {
    width:286px;
    z-index: 300;
    }

    header h1 {
    text-align:center;
    left:0px;
    font-size:15px;
    font-family:helvetica;
    color:white;
    padding-top:10px;
    margin-bottom:0px;
    margin-right:30%;
    margin-left:30%;
    width:40%;
    padding:0;
    top:0%;
    height:30px;
    position:fixed;
    opacity: 1;
    z-index: 120;
    }

    h1 a{
    width:240px;
    z-index: 200;
    }

    header h1 a {
        color:black;
    }

    header a:hover {
        text-decoration: none;
        color:white;
        cursor:crosshair;
    }

    header a:visited {
        color:black;
    }

    /*=>animation*/
    header h1:hover {
    opacity:0;
    transition:6s;
    }

    header h1:not(hover) {
    opacity:1;
    transition:3s;
    }

    /*=>menu*/
    header p a:hover {
    text-decoration: underline;
    }

    .listemenu {
    list-style-type: none;
    margin: 0;
    top: 60px;
    padding: 0;
    width: inherit;
    position: fixed;
    margin-left: 10px;
    cursor:crosshair;
    left:0%;
    color:black;
    background-color:white;
    display:none;
    }

    li a:visited {
    color:black;
    }

    li {
    float: left;
    list-style-type: none;
    }

    li a, .dropbtn {
    display: block;
    color: black;
    font-size:12px;
    text-align: left;
    padding: 3px 30px;
    text-decoration: none;
    font-family: helvetica;
    letter-spacing:0.5px;
    cursor:crosshair;
    }

    /*MENU MOBILE*/

    /* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: none;
  position: absolute;
    width:153px;
    right:10px;
    z-index:110;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
display: none;
text-align: left;
background-color: white;
    border-style:solid;
    border-width: 1px;
    border-color:black;
}

/* Style navigation menu links */
.topnav a{
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display:block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: none;
  display: block;
  position: absolute;
  right: 0px;
  top: 0px;
  width:150px;
}

/* Add a grey background color on mouse-over */
.mylinks a:hover {
  text-decoration:line-through;
  color:blue;
}

.mylinks {
  padding-bottom:0px;
  padding-top:5px;
    margin-top: 12px;
    margin-right:5px;
    }
.mylinks a{
    font-size: 16px;
    font-family: helvetica, arial;
    padding:0px;
    padding-left:19px;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0.7px;
}

/* Style the active link (or home/logo) */
.active {
    background-color: transparent;
    width:50px;
    }

    /*anim menu mobile*/
    .anim {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 17s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
    to {
        opacity: 1;
    }
}

    /*CONTENU*/
    #content {
    position:absolute;
    left:70px;
    top:0px;
    text-align: justify;
    display: block;
    margin:0 auto;
    padding-right: 20px;
    color:white;
    }

    summary {
        outline:none;
    }

   details a:hover{
        background-color: #00007B;
        transition:0.5s;
    }

    /*CONTENU portfolio "selection of works"*/
    .WorkList {
    list-style-type: none;
    margin: 0;
    top: 60px;
    padding: 0;
    width: 200px;
    position: absolute;
    margin-left: 0px;
    left:-10px;
    cursor:crosshair;
    color:black;
    background-color:white;
    display:none;
    }

    /*ADDed*/
    li a:hover, .dropdown:hover .dropbtn  {
    color:blue;
    text-decoration:line-through;}

  li a:visited {
  color:black;
  }

  li a:visited:hover {
  color:blue;
  }

  li {
  float: left;
  list-style-type: none;
  }

  li a, .dropbtn {
  display: block;
  color: black;
  font-size:12px;
  text-align: left;
  padding: 3px 30px;
  padding-right:10px;
  text-decoration: none;
  font-family: helvetica;
  letter-spacing:0.5px;
  cursor:crosshair;
  list-style-type: none;
  }

    .Work {position:absolute;right:5%;left:auto;top:65px;width:90%;padding-bottom:30px;z-index:80;}

    .WorkTitre {font-size:23px;letter-spacing:1px;text-align:right;font-weight:500}

    .WorkImg {display:block;width:100%;padding-top:27px;}

    .WorkImgAutres {display:block;width:100%;padding-top:5px;}

    .WorkImgLegend {text-align:right;letter-spacing:0.1px;padding-top:2px;font-size:9px;text-align:left;}

    .WorkTech {color:black;font-weight:200;padding-top:8px;font-size:11px;line-height:15px;letter-spacing:0.1px;}

    .WorkDescription {text-align:left;padding-top:10px;padding-bottom:0px;color:black;line-height:21px;font-size:16px;}

    /*Filtre version mobile*/

        .WorkSelect {
        top:50px;
        left:5%;
        margin:none;
        width:78px;
        padding:0px;
        height:auto;
        position: fixed;
        z-index:100;
        }
        select {
          // A reset of styles, including removing the default dropdown arrow
    appearance: none;
    // Additional resets for further consistency
    background-color: transparent;
    border: none;
    padding: 0 2em 0 0;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
        }
        /*SECTION INDEX COVER*/

        .bluecover {
          width:100%;
          height:auto;
          border:none;
          opacity:1;
          z-index:1;
          cursor:pointer;
        }
        .bluecover a:hover {
            cursor:crosshair;
            opacity:97%;
            transition: 0.5s;
            }
          .bluecover a:not(hover){
            cursor:crosshair;
            opacity:100%;
            transition: 0.5s;
            }
/*!*/
}