@font-face {
                font-family: 'Audi Type Extended';
                src: local('Audi Type Extended Normal'), local('AudiType-ExtendedNormal'),
                    url('AudiType-ExtendedNormal.woff') format('woff');
                font-weight: normal;
                font-style: normal;
            }
body {
	margin:0px;
	font-family: arial, helvetica, sans-serif;
}

#ad {
	position: relative;
	display: block;
	margin: auto;
	overflow:hidden;
	width: 66.66vh;
	height: 100vh;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
	background-color:white;
}

.full {
    position: absolute;
    top: 0;
    left: 0;
    background-size: 100%;
    width: 100%;
    height: 100%;
}
.clickthrough {
    border: 1px solid black;
    box-sizing: border-box;
    cursor: hand;
    cursor: pointer;
}
.logo {
	background-image: url(logo.png);
		opacity: 0
}
.slide_1 {
	background-image: url(slide1.jpg);
	opacity:0;
}
.slide_3 {
	background-image: url(slide3.jpg);
	opacity:0;
}
.slide_4 {
	background-image: url(slide4.jpg);
	opacity:0;
}
.slide_5 {
	background-image: url(slide5.jpg);
	opacity:0;
}
.slide_6 {
	background-image: url(slide6.jpg);
	opacity:0;
}
.slide_fin {
	background-image: url(slide-fin.png);
	opacity:0;
}
.txt_1 {
	background-image: url(txt1.png);
	    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
			opacity:0;
}
.txt_2 {
	background-image: url(txt2.png);
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
			opacity:0;
}
.txt_3 {
	background-image: url(txt3.png);
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
			opacity:0;
}
.txt_4 {
	background-image: url(txt4.png);
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
			opacity:0;
}
.txt_5 {
	background-image: url(txt5.png);
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
			opacity:0;
}
.txt_6 {
	background-image: url(txt6.png);
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
			opacity:0;
}
.txt_7 {
	background-image: url(txt7.png);
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
			opacity:0;
}

.partenaire {
	margin: 71vh 0 0 3.5vh;
	font-size: 3.8vh;
	font-family: 'Audi Type Extended';
	color: white;
	line-height: 125%;
	width: auto;
	height: auto;
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
			opacity:0;
}

.repiquage {
	margin: 50vh 0 0 4vh;
	padding-left: 15px;
	border-left: 2px solid;
	font-size: 2.4vh;
	font-family: 'Audi Type Extended';
	line-height: 125%;
	width: auto;
	height: auto;
	opacity: 0
}

#ad.portrait{
	width: 100vw;
	height: 150vw;
	margin-top: calc((100vh - 150vw) / 2);
}

.portrait .partenaire {
	margin: 106vw 0 0 4.5vw;
	font-size: 5.3vw;
}

.portrait .repiquage {
	margin: 59vw 0 0 14.5vw;
	font-size: 3.5vw;
}

.white {
	background:#ffffff;
	opacity:0;
}

.logo.animate, .slide_1.animate, .slide_2.animate, .slide_3.animate, .slide_4.animate, .slide_5.animate, .slide_6.animate, .slide_7.animate, .slide_fin.animate, .repiquage.animate {
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	opacity:1;
}
.logo.animate_2, .slide_1.animate_2, .slide_2.animate_2, .slide_3.animate_2, .slide_4.animate_2, .slide_5.animate_2, .slide_6.animate_2, .slide_7.animate_2, .slide_fin.animate_2, .repiquage.animate_2 {
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	opacity:0;
}
.partenaire.animate, .txt_2.animate, .txt_3.animate, .txt_4.animate, .txt_5.animate, .txt_6.animate, .txt_7.animate {
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
    -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
            transform: translateX(0%);
			opacity:1;
}
.partenaire.animate_2, .txt_2.animate_2, .txt_3.animate_2, .txt_4.animate_2, .txt_5.animate_2, .txt_6.animate_2, .txt_7.animate_2 {
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	opacity:0;
}
.clickthrough {
    border: 1px solid black;
    box-sizing: border-box;
    cursor: hand;
    cursor: pointer;
}