@font-face {
 font-family:Snippet;
 src:url(Snippet-Regular.ttf);
 font-display:swap
}
body,
html {
 padding:0;
 margin:0;
 font-family:tahoma,arial,helvetica,sans-serif
}
.titled,
h1,
h2,
h3,
h4,
h5 {
 font-family:Snippet,tahoma,arial,helvetica,sans-serif;
 font-weight:400;
 margin:0
}
h1 {
 font-size:70px
}
h3 {
 font-size:28px
}
h1 {
 padding-left:1.5%;
 padding-top:1%;
 margin:0;
 font-size:40px
}
h2 {
 padding-left:1.5%;
 padding-top:5px;
 margin:0;
 font-size:20px;
 color:#aaa
}
a {
 color:#000;
 text-decoration:none;
 display:block
}
dd,
dl,
dt {
 padding:0;
 margin:0
}
dl {
 display:inline-block;
 padding:0;
 overflow:hidden;
 height:207px;
 width:207px;
 margin:5px;
 font-size:20px;
 vertical-align:top
}
#container {
 position:absolute;
 text-align:center;
 top:50%;
 margin-top:-220px;
 bottom:0;
 min-height:250px;
 left:0;
 right:0
}
#left,
#right {
 display:inline-block;
 vertical-align:top;
 height:430px;
 font-family:Snippet,tahoma,arial,sans-serif
}
#left {
 text-align:right;
 margin-right:0
}
#right {
 padding-right:116px;
 margin-left:10px
}
dl#dc,
dl#dm,
dl#dn,
dl#ds,
dl#mp,
dl#ns {
 height:101px
}
dl#dc,
dl#dn,
dl#ns {
 display:block;
 margin:0;
 margin-bottom:5px
}
dl#dc,
dl#ns {
 margin-left:217px
}
dl#ds {
 width:101px;
 height:207px;
 margin-top:11px
}
dl#dm {
 vertical-align:top;
 height:101px;
 margin-left:0
}
dl#mp {
 display:block
}
dl dt a {
 background:#383737;
 width:79px;
 padding:11px;
 height:24px;
 padding-top:66px;
 color:#fff;
 line-height:22px;
 text-align:right
}
dl#dc dt a,
dl#dm dt a,
dl#ns dt a {
 background:#383737;
 margin-left:106px
}
dl#dm dt a {
 background:#b72700
}
dl#dn dt a {
 background:#eee;
 box-shadow:0 0 10px #ddd inset;
 color:#000;
 padding-top:47px;
 padding-bottom:30px;
 text-align:left
}
dl#mp dt a {
 background:#0283c1
}
dl#ds dt a {
 background:url(pictures/madein.png) center no-repeat #fff;
 background-size:75%;
 color:#000;
 box-shadow:0 0 15px #ddd inset;
 margin-top:100px;
 height:30px;
 padding-top:60px
}
dl#bg dt a,
dl#pf dt a {
 padding:0;
 width:207px;
 height:207px;
 font-size:40px;
 margin:0;
 margin-bottom:-207px;
 background:0 0;
 background-size:contain;
 background-position:center
}
dl#bg dt,
dl#pf dt {
 width:207px
}
dl#bg dt a span,
dl#pf dt a span {
 background:rgba(125,91,195,.7);
 display:block;
 padding:150px 19px 20px 11px;
 width:177px;
 height:37px;
 font-size:40px;
 margin:0;
 text-shadow:0 0 5px #7d5bc3;
 transition:background .6s;
 transition-delay:.2s
}
dl#bg dt a span {
 background:rgba(165,133,255,.7);
 text-shadow:0 0 5px #a585ff
}
dl#pf dt:hover a span {
 background:rgba(125,91,195,0)
}
dl#bg dt:hover a span {
 background:rgba(165,133,255,0)
}
dl#pf.load dt a span,
dl#pf.load dt:hover a span {
 background:#7d5bc3;
 transition-delay:0s
}
dl#bg.load dt a span,
dl#bg.load dt:hover a span {
 background:#a585ff;
 transition-delay:0s
}
dl dd {
 position:absolute;
 display:block;
 width:207px;
 height:102px;
 margin-top:-102px;
 font-size:16px;
 overflow:hidden;
 opacity:0;
 transition:opacity .4s;
 transition-delay:.3s
}
dl#ds dd {
 margin-top:-207px;
 width:101px;
 height:207px
}
dl#dc dd a,
dl#dm dd a,
dl#dn dd a,
dl#mp dd a,
dl#ns dd a {
 background:#383737;
 width:105px;
 height:90px;
 padding:5px;
 padding-left:90px;
 color:#fff;
 transition:margin .3s;
 margin-left:100px;
 transition-delay:.3s
}
dl#dm dd a {
 background:#b72700 url(pictures/oiseaux.jpg);
 height:61px;
 padding:0;
 padding-top:40px;
 font-size:24px;
 width:195px;
 padding-right:12px;
 padding-left:0;
 text-shadow:0 0 4px #000
}
dl:hover dd {
 opacity:1
}
dl#dc:hover dd a,
dl#dm:hover dd a,
dl#dn:hover dd a,
dl#ds:hover dd a,
dl#ns:hover dd a {
 margin:0
}
dl#dn dt a {
 background:#eee url(https://portfolio.thomas-daveluy.fr/public/la-galerie/.02_s.jpg) no-repeat left center;
 color:#fff;
 text-shadow:0 0 3px #000,0 0 8px #000;
 padding:67px 0 30px 11px;
 width:90px;
 height:5px
}
dl#dn dd {
 /*! height:51px; *//*! padding:0; *//*! margin-bottom:0 */
}
dl#dn dd a {
 background:#eee url(https://portfolio.thomas-daveluy.fr/public/la-galerie/.02_s.jpg) no-repeat left center;
 box-shadow:0 0 10px #ccc inset;
 padding:50px 10px 0;
 height:50px;
 padding-right:0;
 width:202px;
 color:#fff;
 margin-left:-100px;
 margin-bottom:0;
 text-align:left;
 font-size:28px;
 line-height:20px;
 text-shadow:0 0 3px #000,0 0 8px #000
}
dl#dn dd#dd-dn {
 margin-top:-50px;
 height:50px
}
dl#dn dd#dd-dn a {
 margin-top:0;
 border-top:1px solid #eee;
 height:41px
}
dl#dn dd span {
 font-size:17px
}
dl#ds dd a {
 padding:10px;
 width:81px;
 margin-top:130px;
 height:187px;
 color:#000;
 text-align:right;
 line-height:18px;
 font-size:14px;
 background:url(pictures/madein.jpg) no-repeat bottom #fff;
 background-size:contain;
 box-shadow:0 0 15px #ddd inset;
 transition:margin .3s;
 transition-delay:.3s
}
dl#mp {
 width:207px;
 height:101px;
 margin:0;
 transition:width .3s;
 margin-right:-207px;
 transition-delay:.3s
}
dl#mp:hover {
 width:207px
}
dl#mp dt {
 margin-bottom:-101px;
 margin-right:-207px
}
dl#mp dd {
 margin:0;
 margin-left:0;
 margin-bottom:0;
 height:101px;
 padding:0;
 text-align:left;
 position:relative;
 font-size:14px;
 width:260px
}
dl#mp dd a {
 background:url(pictures/c.svg) no-repeat 50px 57px #0283c1;
 background-size:145px;
 padding-left:10px;
 font-size:20px;
 line-height:24px;
 display:block;
 text-align:right;
 width:187px;
 padding-right:10px;
 height:101px;
 margin-left:-101px
}
dl#mp dd:hover a {
 margin-left:0
}
dl#ns dd a,
dl#ns dt a {
 background:url(pictures/ns.png);
 text-shadow:0 0 5px #000
}
dl#ns dd a {
 padding-left:0;
 padding-right:10px;
 padding-top:50px;
 width:197px;
 font-size:18px;
 line-height:22px
}
dl#ns dd a span {
 font-size:26px;
 display:block
}
dl#bg,
dl#pf {
 transition:width .3s;
 padding:0;
 margin-right:0;
 transition-delay:.3s
}
dl#bg {
 margin-left:0;
 margin-right:5px
}
dl#bg:hover,
dl#pf:hover {
 width:414px
}
dl#bg dd,
dl#pf dd {
 text-align:left;
 position:relative;
 margin:0;
 margin-bottom:5px;
 margin-left:207px;
 height:48px;
 line-height:38px;
 font-size:20px
}
dl#bg dd a,
dl#pf dd a {
 padding:5px;
 height:38px
}
dl#bg dd a img,
dl#bg dd a span,
dl#pf dd a img {
 display:inline-block;
 float:left;
 vertical-align:top;
 width:48px;
 margin:0;
 margin-top:-5px;
 height:48px;
 margin-right:5px;
 background:#a585ff;
 border:none;
 font-size:0;
object-fit: cover; 
}
dl#pf dd.cursus a:hover,
dl#pf dd.divers a:hover,
dl#pf dd.expos a:hover,
dl#pf dd.videos a:hover {
 background-color:#d8ceeb
}
dl#bg dd {
 color:#a585ff;
 font-size:16px;
 line-height:14px;
 width:207px;
 padding:0;
 overflow:hidden
}
dl#bg dd a {
 display:block;
 height:48px;
 width:197px;
 padding-right:10px
}
dl#bg dd a:hover {
 background:#d3c4ff
}
dl#bg dd.bg1 {
 opacity:1
}
dl#bg dd.bg2 {
 opacity:.85
}
dl#bg dd.bg3 {
 opacity:.7
}
dl#bg dd.bg4 {
 opacity:.55
}
footer {
 position:fixed;
 bottom:1%;
 right:1%;
 left:1%;
 font-size:12px
}
footer ul {
 padding:0;
 list-style:none
}
footer a,
footer li {
 display:inline-block;
 color:#666
}
footer li {
 margin-left:10px;
 color:#999
}
footer li a:hover {
 color:#000
}
#contact-page {
 margin:0 auto;
 padding:0 4%;
 max-width:1100px
}
#contact-page #contact-top {
 border-bottom:1px solid #ccc;
 margin:5% 0 0 0;
 margin-left:100px
}
#contact-page #contact-top p#contact-image {
 float:left;
 margin:0 20px 0 -100px;
 width:150px;
 height:150px;
 border-radius:75px;
 overflow:hidden
}
#contact-page #contact-top p#contact-image img {
 width:100%
}
#contact-page #contact-top h1 {
 margin:0;
 padding:10px 0 0 0
}
#contact-page #contact-top h1 a {
 margin:0;
 color:#0283c1;
 text-decoration:none
}
#contact-page #contact-top p.titled {
 font-size:26px;
 margin:0;
 display:block;
 padding-left:80px;
 letter-spacing:1px;
 padding-bottom:10px
}
#contact-page #contact-left {
 display:inline-block;
 width:48%;
 border-right:1px solid #ccc
}
#contact-page #contact-left,
#contact-page #contact-right {
 display:inline-block;
 width:43%;
 vertical-align:top;
 padding:10px 4%
}
#contact-page #contact-right {
 padding:10px 0 10px 4%
}
#contact-page h2,
#contact-page h3 {
 color:#0283c1;
 font-size:34px;
   padding-left:0;
}
#contact-page h3 {
 font-size:28px
}
#contact-page #contact-left p,
#contact-page #contact-left ul {
 margin:10px 0 25px 0
}
#contact-page #contact-left p#contact-book a {
 display:inline-block;
 text-decoration:none;
 background-color:#fff;
 border:1px solid #0283c1;
 color:#0283c1;
 line-heigth:10px;
 padding:6px 10px 6px 8px;
 font-size:12px;
 border-radius:2px
}
#contact-page #contact-left p#contact-book a:last-child span {
 font-size:20px;
 width:10px;
 height:10px;
 box-sizing:content-box;
 border:2px solid #0283c1;
 position:relative;
 display:inline-block;
 vertical-align:top;
 border-radius:10px;
 margin-right:8px;
 margin-bottom:-30px;
 margin-top:-1px
}
#contact-page #contact-left p#contact-book a:first-child span {
 width:6px;
 height:10px;
 box-sizing:content-box;
 background:#0283c1;
 position:relative;
 display:inline-block;
 vertical-align:top;
 margin-right:10px;
 margin-left:4px;
 margin-bottom:-30px;
 margin-top:-1px
}
#contact-page #contact-left p#contact-book a:first-child span:before {
 content:"";
 width:0;
 height:0;
 border-left:8px solid transparent;
 border-right:8px solid transparent;
 border-top:8px solid #0283c1;
 position:absolute;
 margin-left:-5px;
 margin-top:8px;
 background:0 0
}
#contact-page #contact-left p#contact-book a:last-child span:before {
 content:"";
 display:inline-block;
 position:absolute;
 right:-5px;
 bottom:-3px;
 border-width:0;
 background:#0283c1;
 width:6px;
 height:2px;
 transform:rotate(45deg)
}
#contact-page #contact-left p#contact-book a:hover {
 color:#fff;
 border-radius:3px;
 background:#0283c1
}
#contact-page #contact-left p#contact-book a:hover span {
 border-color:#fff
}
#contact-page #contact-left p#contact-book a:first-child:hover span,
#contact-page #contact-left p#contact-book a:hover span:before {
 background:#fff
}
#contact-page #contact-left p#contact-book a:first-child:hover span:before {
 border-top:8px solid #fff;
 background:0 0
}
#contact-page #contact-left p {
 margin-bottom:30px
}
#contact-page #contact-left p#contact-mail a {
 border:1px solid #0283c1;
 padding:5px 15px 5px 0;
 border-radius:2px;
 color:#0283c1;
 text-decoration:none;
 font-size:18px;
 line-height:36px;
 height:36px;
 overflow:hidden;
 display:inline
}
#contact-page #contact-left p#contact-mail a:hover {
 background:#0283c1;
 color:#fff;
 border-radius:3px
}
#contact-page #contact-left p#contact-mail a:before {
 content:"@";
 color:#fff;
 background:#0283c1;
 display:inline-block;
 vertical-align:top;
 font-size:24px;
 height:32px;
 width:36px;
 text-align:center;
 line-height:28px;
 margin-right:10px;
 margin-top:2px
}
#contact-page p span.at,
#contact-page p span.point {
 font-size:0
}
#contact-page p span.point:after {
 content:".";
 font-size:14px
}
#contact-page p span.at:after {
 content:"@";
 font-size:14px
}
#contact-page #contact-left ul {
 list-style:none;
 padding:0
}
#contact-page #contact-left ul#rs li {
 display:inline-block;
 width:64px;
 height:64px;
 text-align:left;
 margin-right:10px;
 margin-bottom:26px;
 background:url(/scripts/pictures/yt.svg) no-repeat center;
 background-size:contain
}
#contact-page #contact-left ul#rs li a {
 display:inline-block;
 width:64px;
 padding-top:70px;
 font-size:12px;
 text-decoration:none;
 color:#aaa;
 position:absolute;
 text-align:center
}
#contact-page #contact-left ul#rs li#contact-yt {
 background-color:#e83517
}
#contact-page #contact-left ul#rs li#contact-dm {
 background:url(/scripts/pictures/dm.svg) no-repeat center
}
#contact-page #contact-left ul#rs li#contact-in {
 background:url(/scripts/pictures/in.svg) no-repeat center
}
#contact-page #contact-left ul#rs li#contact-tw {
 background:url(/scripts/pictures/tw.svg) no-repeat center
}
#contact-page #contact-left ul#rs li#contact-ba {
 background:url(/scripts/pictures/madein.png) no-repeat center;
 background-size:90%;
 box-shadow:0 0 15px #ddd inset
}
#contact-page #contact-left ul#amis li {
 margin:0 0 10px 0
}
#contact-page #contact-left ul#rs li a:hover {
 color:#000
}
#contact-page #contact-left ul#amis li a {
 margin:0 0 5px;
 padding:0px 0 0px 7px;
 color:#555;
 text-decoration:none;
 height:24px;
  line-height:20px;
 display:inline-block;
}
#contact-page #contact-left ul#amis li a:hover {
 color:#000;
 border-color:#333
}
#contact-page #contact-left ul#amis li a:before {
 content:"";
  width:24px;
  height:24px;
  padding:0;
  background:#ccc;
 display:inline-block;
  vertical-align: middle;
  margin-right:8px;
}
#contact-page #contact-left ul#amis li a.nau:before {
  background:url(https://naufrage-thegame.com/pictures/favicon-32x32.png) #fff no-repeat center;
  background-size:24px;
}
#contact-page #contact-left ul#amis li a.gui:before {
  background:url(https://guillaumelepoix.fr/wp-content/uploads/2020/11/cropped-gl-32x32.png) #fff no-repeat center;
  background-size:24px;
}
#contact-page #contact-left ul#amis li a.mat:before {
  background:url(https://www.mbceramique.fr/img/favicon.ico) #fff no-repeat center;
  background-size:24px;
}
#contact-page #contact-left ul#amis li a.cbp:before {
  background:url(https://ciebandepassante.fr/public/themes/bande-passante/images/favicon-32x32.png) #fff no-repeat center;
  background-size:24px;
}
#contact-page #contact-left ul#amis li a.oei:before {
  background:url(https://loeildoodaaq.fr/pictures/favicon.png) #fff no-repeat center;
  background-size:16px;
  width:22px;
  height:22px;
  border:1px solid #ccc;
  border-radius:12px;
}
#contact-page #contact-right label:not(.robbie) {
 display:block;
 text-transform:uppercase;
 font-size:12px;
 letter-spacing:1px;
 color:#333;
 margin-top:25px;
 font-family:Snippet,tahoma,arial,helvetica,sans-serif
}
#contact-page #contact-right label.robbie{
 display:inline-block;
  width:calc(49% - 15px);
  margin-top:10px;
  border:1px solid #ddd;
  padding:10px 5px;
  border-radius:5px;
  cursor:pointer;
}
#contact-page #contact-right label.robbie:not(:last-of-type){
 margin-right:2%;
}
#contact-page #contact-right input[type=email],
#contact-page #contact-right input[type=text] {
 border:none;
 display:block;
 border-bottom:2px solid #ccc;
 width:calc(100% - 8px);
 padding:4px;
 font-size:18px;
 margin:5px 0;
 transition:all .25s
}
#contact-page #contact-right input::placeholder,
#contact-page #contact-right textarea::placeholder {
 color:#aaa
}
#contact-page #contact-right input:invalid,
#contact-page #contact-right textarea:invalid {
 border-color:#f66;
 box-shadow:none;
 color:#800
}
#contact-page #contact-right input:valid,
#contact-page #contact-right textarea:valid {
 border-color:#beb;
 box-shadow:none
}
#contact-page #contact-right input:placeholder-shown,
#contact-page #contact-right textarea:placeholder-shown {
 border-color:#ccc;
 box-shadow:none
}
#contact-page #contact-right input#m-hp {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -100;
}
#contact-page #contact-right textarea {
 border:1px solid #ccc;
 display:inline-block;
 border-bottom:2px solid #ccc;
 width:calc(100% - 8px);
 max-width:100%;
 padding:4px;
 font-size:18px;
 margin:10px 0;
 color:#111;
 font-family:tahoma,arial,helvetica,sans-serif;
 transition:border-color .25s;
 min-height:120px
}
#contact-page #contact-right input[type=submit] {
 margin:0 auto;
 display:inline-block;
 border:none;
 text-transform:uppercase;
 padding:10px 30px;
 border-radius:2px;
 cursor:pointer;
 margin-top:10px;
 box-shadow:0 1px 3px #777;
 font-family:Snippet,tahoma,arial,helvetica,sans-serif;
 background-color:#0283c1;
 color:#fff;
 margin-bottom:2px;
 overflow:visible
}
#contact-page #contact-right input[type=submit]:hover {
 background-color:#10a0ff
}
#contact-page #contact-right input[type=submit]:active {
 margin-top:12px;
 margin-bottom:0;
 box-shadow:0 0 2px #000
}
#contact-page #contact-right p:last-child {
 text-align:right;
 display:inline-block;
 vertical-align:middle;
 width:auto;
 float:right
}
#contact-page #contact-right h3 {
 font-size:16px;
 font-weight:700;
 color:#d33;
 text-align:center;
 margin-top:20px
}
#box-contact {
 position:fixed;
 z-index:1000;
 top:0;
 bottom:100%;
 left:0;
 right:0;
 background:rgba(255,255,255,.95);
 text-align:center;
 overflow:hidden;
 opacity:0;
 transition:opacity .25s,bottom 0s .25s
}
#box-contact.show {
 display:block;
 opacity:1;
 bottom:0;
 transition:opacity .25s,bottom 0s
}
#box-contact>div {
 position:absolute;
 height:350px;
 top:50%;
 margin-top:-175px;
 width:100%
}
#box-contact>div ul {
 list-style:none;
 padding:0;
 margin-top:30px
}
#box-contact>div ul li {
 display:inline-block;
 vertical-align:top;
 width:200px;
 height:200px
}
#box-contact>div ul li:last-child {
 margin-left:80px
}
#box-contact>div ul li:last-child:before {
 content:"ou";
 position:absolute;
 margin-left:-162px;
 margin-top:75px;
 color:#fff;
 font-size:18px;
 line-height:18px;
 background:#0283c1;
 padding:10px 10px;
 height:20px;
 width:20px;
 border-radius:40px
}
#box-contact>div ul li a {
 display:block;
 width:200px;
 height:50px;
 padding-top:150px;
 border:1px solid #ccc;
 border-radius:5px;
 color:#333;
 text-decoration:none;
 box-shadow:0 0 5px #ddd;
 transition:all .25s;
 background:url(pictures/gmail.svg) no-repeat center 15px #f5f5f5;
 background-size:120px
}
#box-contact>div ul li:last-child a {
 background:url(pictures/copy.svg) no-repeat center 15px #f5f5f5;
 background-size:120px
}
#box-contact>div ul li a:hover {
 background-color:#fff;
 color:#000;
 box-shadow:0 0 10px #aaa
}
#box-contact>div p {
 width:500px;
 margin:50px auto
}
#box-contact>div p a {
 background:#0283c1;
 color:#fff;
 text-decoration:none;
 padding:10px 30px;
 border-radius:3px
}
#contact-page nav {
 margin-top:0;
 margin-bottom:40px
}
#contact-page nav ul {
 padding:0 0 0 4%;
 margin:10px 0;
 list-style:none;
 text-align:right
}
#contact-page nav ul li {
 display:inline-block
}
#contact-page nav ul li a {
 display:block;
 color:#0283c1;
 text-decoration:none;
 font-family:Snippet,tahoma,arial,helvetica,sans-serif;
 font-size:18px;
 margin-right:20px
}
#contact-page nav ul li a:hover {
 transform:scale(1.1);
 opacity:.8
}
.g-recaptcha {
 display:inline-block;
 vertical-align:middle
}
@media screen and (max-width:900px) {
 #right {
  padding-right:0
 }
 #left {
  padding-left:107px
 }
 dl#ns {
  margin-left:0
 }
 dl#dm {
  margin-right:-212px;
  margin-top:223px
 }
 dl#ds {
  margin-right:0
 }
 h1,
 h2 {
  text-align:center
 }
}
@media screen and (max-width:850px) {
 #left {
  padding-left:0
 }
}
@media screen and (max-width:750px) {
 dl#ds {
  display:none
 }
 dl#bg {
  margin-right:0;
  margin-bottom:11px
 }
 #container {
  margin-top:-200px
 }
}
@media screen and (max-width:640px) {
 dl#bg dd,
 dl#pf dd {
  display:none
 }
 dl#bg:hover,
 dl#pf:hover {
  width:207px
 }
 dl#dc:hover dd a,
 dl#dm:hover dd a,
 dl#dn:hover dd a,
 dl#ds:hover dd a,
 dl#ns:hover dd a {
  margin:0
 }
}
@media screen and (max-width:750px) {
 #contact-page #contact-top {
  margin-left:0
 }
 #contact-page nav {
  margin-bottom:20px
 }
 #amis,
 #amis-h3 {
  display:none
 }
 #contact-page #contact-top p#contact-image {
  margin-left:-10px;
  margin-right:10px;
  width:100px;
  height:100px;
  border-radius:50px
 }
 #contact-page #contact-top h1 {
  font-size:40px;
  margin-bottom:5px;
  margin-top:-5px;
  padding-top:0
 }
 #contact-page #contact-top p.titled {
  font-size:22px;
  padding-left:10px;
  padding-top:0;
  overflow:hidden
 }
 #contact-page #contact-left,
 #contact-page #contact-right {
  display:inline-block;
  width:98%;
  vertical-align:top;
  padding:10px 1%;
  border:none
 }
 .g-recaptcha {
  display:block;
  text-align:center
 }
 .g-recaptcha>div {
  display:inline-block
 }
 #contact-page #contact-right p:last-child {
  text-align:center;
  display:block;
  width:100%;
  float:none
 }
}
@media screen and (max-width:500px) {
 #box-contact>div {
  top:0;
  margin-top:5%;
  width:70%;
  margin-left:15%;
  text-align:center
 }
 #box-contact>div ul {
  margin-top:5%
 }
 #box-contact>div ul li {
  display:inline-block;
  margin:0 auto 20px auto;
  transform:scale(.9)
 }
 #box-contact>div ul li:last-child {
  margin-left:0;
  margin-top:15px
 }
 #box-contact>div ul li:last-child:before {
  margin-left:-18px;
  margin-top:-50px
 }
 #box-contact>div p {
  text-align:center;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  width:auto;
  height:60px
 }
 #box-contact>div p a {
  display:block;
  border-radius:0;
  padding:20px 0
 }
}