.jolicode-logo {
    background: url(../pictures/jolicode.svg) left 53% no-repeat;
}

.caption {
    color: #f7d325;
    text-shadow: 0px 2px 2px #1b1b1b;
}
.cover h2 {
    background-color: rgba(0, 0, 0, 0.5);;
    color:#FFF;
    padding: 10px 40px 10px 50px;
    position: absolute;
    text-align: right;
    top: 120px;
    left: 0;
    width: 934px;
    font-size:50px;
}
.cover p {
    margin:10px 0 0;
    text-align:center;
    color:#FFF;
    font-size:20px;
}
.cover p.date {
    margin:10px 0 0;
    text-align:center;
    color:#FFF;
    font-style:italic;
    font-size:15px;
}
.cover p a {
    color:#FFF;
}

img {
    max-width: 100%;
}

img.middle {
    vertical-align: bottom;
}

.slide>div:first-child {
    padding: 85px 100px 0;
    height: 525px;
}

.cover>div {
    padding: 105px 120px 0;
}

.slide>div.progressbar {
    padding: 0 120px;
    height: 25px;
    bottom: 0;
    position: absolute;
    top: auto;
}

.slide ul.yesno li {
    text-indent: -3em;
}

.slide ul.yesno li:before {
    content: '';
}

blockquote {
    text-indent: 3em;
}

.slide blockquote:before {
    margin-left: -150px;
}

.biggest {
    font-size: 4em;
}

.full .progress {
    background-color: #fff;
    height: 30px;
}
.full .progress div {
    border: 30px solid transparent;
    border-bottom-color:#F7D325;
    left: -60px;
    top: -30px;
}

.slide pre {
    margin: 0;
    font-family: 'PT Mono', 'Monaco';
    font-size: 18px;
    line-height: 25px;
}

.slide pre code {
    line-height: 25px;
}

.slide:after {
    position: absolute;
    bottom: 1px;
    right: 50px;
    padding: 20px 0 0;
    width: auto;
    height: auto;
    background: none;
    color: #888;
    counter-increment: slide;
    content: counter(slide);
    font-size: 14px;
    top: auto;
    z-index: 10001;
}

.slide ol, .slide ul {
    padding-left: 1em;
}

.slide li * {
    text-indent: 0;
}

.slide li blockquote {
    padding: 30px 0 30px 100px;
    text-indent: 0;
}

.slide li blockquote p {
    margin-bottom: 0;
}

.slide.tall > div {
    height: 595px;
    padding-top: 45px;
}

.slide.cover, .slide.shout{ z-index: 100002 }

.list .slide>div.progressbar:before, .full .slide>div.progressbar:before {
    background: url(../pictures/jolicode.svg) left 53% no-repeat;
    bottom: 0;
    color: #888;
    content: 'Projets perso : JoliNotif et php7-checker';
    font-size: 14px;
    height: 30px;
    left: 40px;
    line-height: 30px;
    padding-left: 70px;
    position: absolute;
    top: auto;
    width: 100%;
    z-index: 10000;
}

.list .slide.cover>div:before,
.full .slide.cover>div:before,
.list .slide.shout>div:before,
.full .slide.shout>div:before,
.list .slide.cover div.progressbar,
.list .slide.shout div.progressbar {
    display: none;
}

.slide table td, .slide table th[scope="col"] {
    text-align: center;
}

.check {
    height: 24px;
    width: 24px;
}

#coverpage h2 {
    background-color: transparent;
    margin-bottom: 0;
    padding: 10px 0 0;
    position: relative;
    text-align: right;
    top: auto;
    font-size: 50px;
    width: auto;
}
#coverpage .covertitle {
    background-color: rgba(0, 0, 0, 0.8);
    color: #FFF;
    padding: 8px 80px 12px 50px;
    position: absolute;
    text-align: right;
    bottom: 30px;
    left: -30px;
    width: 970px;
    font-size:50px;
    transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
}
#coverpage .covertitle p {
    margin: 0;
    padding: 0;
    text-align: right;
    font-size: 15px;
}
#coverpage .covertitle p .date {
    font-style: italic;
}

@page{margin:0;size:1024px 640px}

.full .progress div{}
.full .progress div[style$='100%;']{padding-left:10px}

/* progressbar for list view */
.list .slide div.progressbar {
    background-color: #fff;
    height: 30px;
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    overflow:hidden;
    padding: 0;
    top: auto;
    width: 100%;
    z-index:1
}
.list .slide div.progressbar div {
    border: 30px solid transparent;
    border-bottom-color: #F7D325;
    left: -60px;
    top: -30px;

    position:absolute;
    width:0;
}

/* vertical align the shouts (better than transform for printing) */
.slide.shout div {
    display: table;
    height: 640px;
    padding: 0 120px;
}

.slide.shout h2 {
    line-height: 150px !important;
    margin: -25% 0 0 0;
    -webkit-transform: none;
    transform: none;
    display: table-cell;
    height: auto;
    position: relative;
    top: auto;
    vertical-align: middle;
}