:-webkit-full-screen {background:#000;}
:-moz-full-screen {background:#000;}
:-ms-full-screen {background:#000;}
:full-screen {background:#000;}
:-webkit-full-screen #controls .arrows {padding:0 5px;}
:-moz-full-screen #controls .arrows {padding:0 5px;}
:-ms-full-screen #controls .arrows {padding:0 5px;}
:full-screen #controls .arrows {padding:0 5px;}
:-webkit-full-screen #controls .fullscreen {margin-right:0;margin-top:5px;}
:-moz-full-screen #controls .fullscreen {margin-right:0;margin-top:5px;}
:-ms-full-screen #controls .fullscreen {margin-right:0;margin-top:5px;}
:full-screen #controls .fullscreen {margin-right:0;margin-top:5px;}

h3 {margin:0;}
h4 {color:#46bcec;margin:0;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #ddd;}
section {padding-top:40px;}
section#introduction {padding-top:0;}
section#introduction p, article p:last-child {margin-bottom:0;}

.button .icon {color:#f9f9f9;}
.circled li {font-size:0.85em;list-style-type:circle;margin-left:3px;}
.has-tip {border:none;-webkit-transition:color 0.3s ease;-moz-transition:color 0.3s ease;-o-transition:color 0.3s ease;transition:color 0.3s ease;}
.has-tip:hover {border:none;}
.reveal-modal {background:#f9f9f9;overflow:hidden;width:650px;margin-left:-325px;}
.reveal-modal .button.close-reveal-modal{clear:both;float:left;margin-top:10px;padding-top:9px;padding-bottom:9px;line-height:inherit;color:inherit;position:relative;font-size:inherit;font-weight:inherit;top:inherit;right:inherit;}
.reveal-modal .event {padding-left:0;padding-right:0;}

.touch a:active {-webkit-tap-highlight-color:rgba(0,0,0,0);}
.touch #charts .graph i.fontello-info-circled {display:none;}
.touch #filtering a {-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none;}
.touch #controls .icon {opacity:0.2;}
.touch #projects li {background:#18abe7;}
.touch #projects li i {-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px);}
.touch #projects li figcaption {opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px);-webkit-transition:-webkit-transform 0.4s,opacity 0.1s;-moz-transition:-moz-transform 0.4s,opacity 0.1s;-o-transition:-moz-transform 0.4s,opacity 0.1s;transition:transform 0.4s,opacity 0.1s;}
.touch #controls {opacity:1;}

.no-js #timeline a {cursor:default;}
.no-js #timeline .icon:hover {background:#555;}
.no-js #charts .graph .columns:first-child {display:none;}
.no-js #charts .graph .columns:last-child {width:100%;text-align:center;}
.no-js #charts .graph {margin:0 auto 20px auto;}
.no-js #charts .graph dt,.no-js #charts .graph dd {text-align:center;}
.no-js #charts .graph dd:nth-child(2) .fontello-db-shape {color:#46bcec;}
.no-js #charts .graph dd:nth-child(3) .fontello-db-shape {color:#7ed0f2;}
.no-js #charts .graph dd:nth-child(4) .fontello-db-shape {color:#ced1d6;}
.no-js #charts .graph dd:nth-child(5) .fontello-db-shape {color:#a8a29f;}
.no-js #charts .graph dd:nth-child(6) .fontello-db-shape {color:#474e5e;}
.no-js #charts .graph dd:nth-child(7) .fontello-db-shape {color:#2c3344;}
.no-js #filtering {display:none;}
.no-js #projects li {display:block;}
.no-js #projects li:nth-child(3n+1) {margin-left:0;}
.no-js #projects li:nth-child(3n) {margin-right:0;}
.no-js #controls {display:none;}
.no-js #slider li .icon {display:none;}
.no-js #slider li:first-child img {display:block;}
.no-js #map {background:url(http://mylanndupuy.ovh/picture/contact/geolocation-wide.jpg) no-repeat;}

#timeline {list-style-type:none;position:relative;margin-top:15px;}
#timeline:before {content:'';position:absolute;top:20px;bottom:0;width:10px;background:#ededed;left:20%;margin-left:-10px;}
#timeline h4 {border-bottom:1px solid #ccc;}
#timeline li {position:relative;}
#timeline .date {display:block;width:25%;padding-right:10%;position:absolute;}
#timeline .date span {display:block;text-align:right;}
#timeline .date span:first-child {font-size:0.9em;color:#bbb;margin-right:2px;}
#timeline .date span:last-child {font-size:3.2em;color:#46bcec;line-height:45px;}
#timeline .event {margin:0 70px 45px 25%;background:#ededed;padding:20px 25px;position:relative;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
#timeline .event:after {right:100%;border:solid transparent;content:'';height:0;width:0;position:absolute;border-right-color:#ededed;border-width:10px;top:10px;}
#timeline .icon {-webkit-transition:background-color 0.3s ease;-moz-transition:background-color 0.3s ease;-o-transition:background-color 0.3s ease;transition:background-color 0.3s ease;width:40px;height:40px;position:absolute;color:#fff;background:#555;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 0 0 8px #ededed;-moz-box-shadow:0 0 0 8px #ededed;box-shadow:0 0 0 8px #ededed;text-align:center;left:20%;top:0;margin:0 0 0 -25px;font-size:1.4em;line-height:37px;}
#timeline .icon:hover {background:#46bcec;}

#charts h2 {margin-bottom:30px;}
#charts dl{font-size:1em;margin-bottom:0;}
#charts dt {color:#555;margin:0;margin-bottom:5px;line-height:1.4em;}
#charts dt .icon {margin-right:7px;color:inherit;}
#charts dd {margin-bottom:0;font-size:0.9em;margin-left:5px;line-height:23px;}
#charts dd .fontello-db-shape {color:#ced1d6;}
#charts canvas {width:100% !important;height:100% !important;max-width:180px;max-height:180px;display:block;margin:0 auto;}
#charts .graph {margin-bottom:20px;}
#charts .graph .icon span {font-style:normal;padding-left:5px;font-size:0.9em;}

#filtering a {padding:3px 7px;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;}
#filtering dd.active a {-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none;}
#filtering dd.active:hover a {background:#46bcec;color:#fff;cursor:default;}
#filtering dd:hover a {-webkit-border-radius:1000px;-moz-border-radius:1000px;border-radius:1000px;background:#ededed;padding:3px 7px;color:#333;}
#filtering dd:active a {-webkit-border-radius:1000px;-moz-border-radius:1000px;border-radius:1000px;background:#ddd;padding:3px 7px;color:#333;}

#projects {margin:0;min-height:305px;}
#projects li {display:none;width:374px;height:281px;margin:12px;float:left;position:relative;background:#46bcec;overflow:hidden;-webkit-transition:background 0.4s ease;-moz-transition:background 0.4s ease;-o-transition:background 0.4s ease;transition:background 0.4s ease;}
#projects li.left {margin-left:0;}
#projects li.right {margin-right:0;}
#projects li i {position:absolute;width:100%;line-height:275px;text-align:center;z-index:2;font-size:6em;color:#fff;-webkit-transition:-webkit-transform 0.4s ease;-moz-transition:-moz-transform 0.4s ease;-o-transition:-o-transform 0.4s ease;transition:transform 0.4s ease;}
#projects li figure {margin:0;}
#projects li img {opacity:0.08;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease;}
#projects li figcaption {position:absolute;z-index:3;left:0;width:100%;padding:15px;background:#2c3344;color:#98e4ff;top:auto;bottom:0;opacity:0;-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform 0.4s,opacity 0.1s 0.3s;-moz-transition:-moz-transform 0.4s,opacity 0.1s 0.3s;-o-transition:-moz-transform 0.4s,opacity 0.1s 0.3s;transition:transform 0.4s,opacity 0.1s 0.3s;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;}
#projects li h4 {color:#fff;border-bottom:0;margin-bottom:0;padding-bottom:0;}
#projects li span {font-size:0.8em;display:block;}
#projects li a {margin:0;position:absolute;bottom:12px;right:15px;font-size:2em;color:#fff;-webkit-transition:color 0.3s ease;-moz-transition:color 0.3s ease;-o-transition:color 0.3s ease;transition:color 0.3s ease;}
#projects li a:hover {color:#7ed0f2;}
#projects li:hover {background:#18abe7;}
#projects li:hover i {-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px);}
#projects li:hover img {opacity:0.55;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-o-transform:translateY(-20px);transform:translateY(-20px);}
#projects li:hover figcaption {opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px);-webkit-transition:-webkit-transform 0.4s,opacity 0.1s;-moz-transition:-moz-transform 0.4s,opacity 0.1s;-o-transition:-moz-transform 0.4s,opacity 0.1s;transition:transform 0.4s,opacity 0.1s;}

#tags {margin:0;display:inline-block;float:left;}
#tags li {font-size:0.65em;padding:1px 6px;margin:0 3px 3px 0;display:block;float:left;color:#999;background:#e9e9e9;border-bottom:1px solid #d0d0d0;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
#tags li .icon {margin-right:3px;color:#aaa;}

#scrollbar {display:none;margin:0 0 15px 0;height:2px;background:#ededed;}
#handle {width:100px;height:2px;background:#46bcec;cursor:pointer;}
#mousearea {position:absolute;top:-10px;left:0;width:100%;height:22px;}
#slider {width:1170px;height:658px;overflow:hidden;}
#slider ul {margin:0;padding:0;}
#slider li {float:left;margin:0 1px 0 0;width:1170px;height:658px;}
#slider li .icon {color:#46bcec;font-size:7em;display:block;padding-top:225px;text-align:center;width:100%;height:100%;}
#slider img {display:none;width:100%;height:100%;}
#slider img.ready {display:block !important;}
#slider:hover #controls {opacity:1;}
#controls {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;-webkit-transition:opacity 0.3s ease;-moz-transition:opacity 0.3s ease;-o-transition:opacity 0.3s ease;transition:opacity 0.3s ease;}
#controls a {display:none;}
#controls .icon {color:#f9f9f9;opacity:0.1;padding:40px 20px;margin-right:0;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
#controls .icon:hover {opacity:0.9;text-shadow:0 0 20px #111;}
#controls .icon:active {background-color:transparent;}
#controls .icon.disabled {opacity:0;cursor:default;}
#controls .arrows {position:absolute;top:50%;left:0;margin-top:-90px;padding:0 20px;width:100%;font-size:5em;}
#controls .previous {float:left;}
#controls .next {float:right;}
#controls .fullscreen {position:absolute;right:20px;top:15px;z-index:300;padding:4px 6px;font-size:1.25em;margin-right:10px;opacity:0.2;-webkit-transition:opacity 0.3s ease;-moz-transition:opacity 0.3s ease;-o-transition:opacity 0.3s ease;transition:opacity 0.3s ease;}

#sparetime ul {margin-left:15px;}
#sparetime .icon {display:block;width:130px;height:130px;margin:0 auto;line-height:130px;background:#46bcec;color:#f9f9f9;font-size:4em;text-shadow:0 2px 0px #466981;-webkit-border-radius:200px;-moz-border-radius:200px;border-radius:200px;}
#sparetime .icon.fontello-gamepad,#sparetime .icon.fontello-swimming{line-height:120px;}

#curriculum a {position:absolute;left:40px;top:40px;}
#curriculum img {-webkit-box-shadow:0 0 10px 0 #bbb;-moz-box-shadow:0 0 10px 0 #bbb;box-shadow:0 0 10px 0 #bbb;}

#map {height:500px;overflow:hidden;}
#map img {max-width:none;}
#map .gm-style-cc, #map .gmnoprint span, #map .gmnoprint a {display:none;}

#peripheral img {display:block;}

#compatibility {text-align:center;margin:25px auto 50px auto;}
#compatibility li {display:inline-block;margin:10px 40px;padding-top:10px;text-align:center;font-weight:bold;}
#compatibility li img {display:block;margin:0 auto;margin-bottom:15px;width:100px;height:100px;}

@media (min-width:980px) and (max-width:1200px){
	.touch #projects li i {-webkit-transform:translateY(-35px);-moz-transform:translateY(-35px);-o-transform:translateY(-35px);transform:translateY(-35px);}
	.touch #projects li img {-webkit-transform:translateY(-17px);-moz-transform:translateY(-17px);-o-transform:translateY(-17px);transform:translateY(-17px);}
	
	.no-js #map {background:url(http://mylanndupuy.ovh/picture/contact/geolocation-standard.jpg) no-repeat;}
	
	#timeline .date span:first-child {font-size:0.85em;}
	#timeline .date span:last-child {font-size:2.5em;}
	
	#charts dd {font-size:0.8em;line-height:20px;}
	#charts canvas {max-width:160px;}
	
	#projects {min-height:242px;}
	#projects li {width:298px;height:224px;margin:9px;}
	#projects li i {line-height:219px;font-size:5em;}
	#projects li figcaption {padding:12px;}
	#projects li a {font-size:1.7em;right:12px;}
	#projects li:hover i {-webkit-transform:translateY(-35px);-moz-transform:translateY(-35px);-o-transform:translateY(-35px);transform:translateY(-35px);}
	#projects li:hover img {-webkit-transform:translateY(-17px);-moz-transform:translateY(-17px);-o-transform:translateY(-17px);transform:translateY(-17px);}
	
	#scrollbar {margin:0 0 12px 0;}
	#slider {width:930px;height:523px;}
	#slider li {width:930px;height:523px;}
	#slider li .icon {font-size:6em;padding-top:170px;}
	#controls .arrows {margin-top:-80px;font-size:4em;}
	
	#sparetime  .icon {width:110px;height:110px;font-size:3.5em;line-height:110px;}
	#sparetime .icon.fontello-gamepad,#sparetime .icon.fontello-swimming{line-height:100px;}
	
	#curriculum a {left:25px;}
	#curriculum img {float:right;}
	
	#map {height:397px;}
	
	#compatibility {margin:20px auto 40px auto;}
	#compatibility li img {width:80px;height:80px;}
}

@media (min-width:768px) and (max-width:979px){
	dl{font-size:0.9em;}
	section {padding-top:30px;}
	section#introduction {padding-top:0;}
	
	.circled li {font-size:0.8em;}
	
	.touch #projects li i {-webkit-transform:translateY(-25px);-moz-transform:translateY(-25px);-o-transform:translateY(-25px);transform:translateY(-25px);}
	.touch #projects li img {-webkit-transform:translateY(-10px);-moz-transform:translateY(-10px);-o-transform:translateY(-10px);transform:translateY(-10px);}
	
	.no-js #map {background:url(http://mylanndupuy.ovh/picture/contact/geolocation-small.jpg) no-repeat;}
	
	#timeline .date span:first-child {font-size:0.8em;}
	#timeline .date span:last-child {font-size:2.3em;}
	#timeline:before {width:8px;}
	#timeline .icon {width:30px;height:30px;margin:5px 0 0 -21px;font-size:1.1em;line-height:29px;-webkit-box-shadow:0 0 0 6px #ededed;-moz-box-shadow:0 0 0 6px #ededed;box-shadow:0 0 0 6px #ededed;}
	
	#charts dt {margin-left:2px;margin-bottom:2px;}
	#charts dd {font-size:0.8em;line-height:18px;}
	#charts canvas {max-width:140px;}
	
	#projects {min-height:194px;}
	#projects li {width:234px;height:176px;margin:9px;}
	#projects li i {line-height:172px;font-size:4em;}
	#projects li figcaption {padding:8px;}
	#projects li span {font-size:0.6em;}
	#projects li a {font-size:1.5em;bottom:7px;right:8px;}
	#projects li:hover i {-webkit-transform:translateY(-25px);-moz-transform:translateY(-25px);-o-transform:translateY(-25px);transform:translateY(-25px);}
	#projects li:hover img {-webkit-transform:translateY(-10px);-moz-transform:translateY(-10px);-o-transform:translateY(-10px);transform:translateY(-10px);}
	
	#scrollbar {margin:0 0 10px 0;}
	#slider {width:738px;height:415px;}
	#slider li {width:738px;height:415px;}
	#slider li .icon {font-size:5em;padding-top:135px;}
	#controls .arrows {padding:0 15px;margin-top:-73px;font-size:3.5em;}
	#controls .fullscreen {font-size:1em;}
	
	#sparetime  .icon {width:90px;height:90px;font-size:3em;line-height:90px;}
	#sparetime .icon.fontello-gamepad,#sparetime .icon.fontello-swimming{line-height:80px;}
	
	#curriculum a {left:15px;}
	#curriculum img {float:right;width:80%;}
	
	#map {height:315px;}
	
	#compatibility {margin-bottom:20px;margin:15px auto 30px auto;}
	#compatibility li {margin:10px 20px;}
	#compatibility li img {width:60px;height:60px;}
}

@media (max-width:767px){
	section {padding-top:0px;}
	section#introduction p {display:none;}
	article p:last-child {margin-bottom:1.25em;}
	
	dl{font-size:0.9em;}
	
	.circled li {text-align:left;}
	.button {width:100%;}
	.reveal-modal * {text-align:center;}
	.reveal-modal {width:80%;margin-left:-40%;}
	.reveal-modal .event {padding-left:15px;padding-right:15px;}
	.reveal-modal .button.close-reveal-modal {margin-top:20px;}
	.sub-nav{margin:0 auto;display:inline-block;margin-bottom:10px;}
	
	.touch #projects li i {-webkit-transform:translateY(-25px);-moz-transform:translateY(-25px);-o-transform:translateY(-25px);transform:translateY(-25px);}
	.touch #projects li img {-webkit-transform:translateY(-10px);-moz-transform:translateY(-10px);-o-transform:translateY(-10px);transform:translateY(-10px);}
	
	.no-js #projects li:nth-child(3n+1) {margin-left:9px;}
	.no-js #projects li:nth-child(3n) {margin-right:9px;}
	.no-js #projects li:nth-child(2n+1) {margin-left:0;}
	.no-js #projects li:nth-child(2n) {margin-right:0;}
	.no-js #map {background:url(http://mylanndupuy.ovh/picture/contact/geolocation-tiny.jpg) center center no-repeat;}
	
	#timeline:before {display:none;}
	#timeline {margin-left:0;}
	#timeline h3,h4,dd {text-align:left;}
	#timeline li:nth-child(odd) .event:after {border-right-color:transparent;border-bottom-color:#ededed;}
	#timeline .date {width:100%;position:relative;padding:0 0 20px 0;}
	#timeline .date span {text-align:left;}
	#timeline .date span:last-child {font-size:2.2em;line-height:28px;}
	#timeline .event {margin:0 0 35px 0;padding:1em;font-size:95%;}
	#timeline .event:after {left:20px;border-right-color:transparent;border-bottom-color:#ededed;top:-20px;}
	#timeline .icon {width:30px;height:30px;line-height:29px;font-size:1.2em;position:relative;float:right;left:auto;margin:-55px 5px 0 0px;-webkit-box-shadow:0 0 0 6px #ededed;-moz-box-shadow:0 0 0 6px #ededed;box-shadow:0 0 0 6px #ededed;}
	
	#charts .graph {margin-top:10px;}
	#charts dt {margin-left:2px;margin-bottom:5px;text-align:left;}
	#charts dd {font-size:0.75em;line-height:15px;}
	#charts dd .icon {margin-right:5px;}
	#charts canvas {max-width:120px;float:right;}
	
	#filtering dt {float:none;}
	#filtering dd {float:none;display:inline-block;}
	
	#projects {min-height:210px;}
	#projects li {width:256px;height:192px;margin:9px;float:left !important;}
	#projects li i {display:block;line-height:188px;font-size:4em;}
	#projects li figcaption {padding:10px;text-align:left;}
	#projects li span {font-size:0.7em;float:left;}
	#projects li a {font-size:1.5em;bottom:10px;right:10px;}
	#projects li:hover i {-webkit-transform:translateY(-25px);-moz-transform:translateY(-25px);-o-transform:translateY(-25px);transform:translateY(-25px);}
	#projects li:hover img {-webkit-transform:translateY(-10px);-moz-transform:translateY(-10px);-o-transform:translateY(-10px);transform:translateY(-10px);}
	
	#tags {margin-bottom:20px;}
	
	#slider {margin:0 auto;margin-bottom:20px;width:100%;height:auto;max-width:530px;}
	#slider li {max-width:530px;height:auto;width:100%;}
	#slider li .icon {font-size:3em;padding-top:0px;max-width:530px;height:auto;width:100%;}
	#slider li:first-child img {display:block;}
	#controls {display:none;}
	
	#sparetime  h3 {text-align:left;}
	#sparetime .icon {width:90px;height:90px;font-size:2.8em;line-height:90px;}
	#sparetime .icon.fontello-gamepad,#sparetime .icon.fontello-swimming{line-height:80px;}
	
	#curriculum a {width:auto;left:50%;margin-left:-80px;}
	#curriculum img {margin-bottom:30px;}
	
	#map {height:261px;}
	
	#compatibility {margin-bottom:20px;margin:15px auto 30px auto;font-size:0.9em;}
	#compatibility li {margin:5px 10px;}
	#compatibility li img {width:50px;height:50px;}
}

@media (max-width:560px){
	#projects {margin:0 auto;width:100%;max-width:374px;min-height:0;}
	#projects li {margin-left:0;margin-right:0;width:100%;height:auto;}
	#projects li.left {margin-bottom:0;}
	#projects li figcaption {padding:10px;text-align:left;}
	#projects li span {font-size:0.7em;float:left;}
	#projects li a {font-size:1.5em;bottom:10px;right:10px;}
	#projects i {display:block;font-size:0 !important;background-size:100% auto !important;}
	#projects i.fontello-window {background:url(http://mylanndupuy.ovh/picture/projets/development.png) no-repeat;}
	#projects i.fontello-feather {background:url(http://mylanndupuy.ovh/picture/projets/design.png) no-repeat;}
	#projects i.fontello-map {background:url(http://mylanndupuy.ovh/picture/projets/mapping.png) no-repeat;}
}