@font-face {
    font-family: 'Cookie';
    src: url('Cookie-Regular.woff2') format('woff2'),
        url('Cookie-Regular.woff') format('woff'),
        url('Cookie-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


*,
*:before,
*:after { 
    padding: 0; 
    margin: 0; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

html { height: 100%; }

body {
    font-family: 'Open Sans Condensed','Arial Narrow', serif;
	background: #e3e3e3;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    -webkit-font-smoothing: antialiased;
    overflow-y: scroll;
    overflow-x: hidden;
}

a {
    color: #555;
    text-decoration: none;
}



.container {
    width: 100%;
    position: relative;
}

.main {
    width: 1000px;
    min-height: 600px;
    margin: 0 auto;
    position: relative;
}



/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both
}

.clearfix {
    *zoom: 1
}



.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions {
    display: block;
}




/* pfold style */

.uc-container {
	position: relative;
	width: 100px;
	height: 100px;
	top: 0;
	left: 0;
}

.uc-single, 
.uc-final-wrapper,
.uc-initial-content,
.uc-back,
.uc-front {
	background: #fff;
}

.uc-final,
.uc-initial, 
.uc-final-wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.uc-initial-content,
.uc-final-content {
	width: 100%;
	height: 100%;
	position: relative;
}

.uc-final,
.uc-final-content {
	display: none;
}

.uc-initial-content {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.uc-part {
	top: 0;
	left: 0;
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.uc-part > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.uc-part .uc-back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

/* Transformation-origin classes */

.uc-unfold-left {
	-webkit-transform-origin: 0 50%;
	-moz-transform-origin: 0 50%;
	-o-transform-origin: 0 50%;
	-ms-transform-origin: 0 50%;
	transform-origin: 0 50%;
}

.uc-unfold-right {
	-webkit-transform-origin: 100% 50%;
	-moz-transform-origin: 100% 50%;
	-o-transform-origin: 100% 50%;
	-ms-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}

.uc-unfold-top {
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}

.uc-unfold-bottom {
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

/* Unfolding classes */
.uc-unfold-left.uc-unfold {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.uc-unfold-right.uc-unfold {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.uc-unfold-top.uc-unfold {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

.uc-unfold-bottom.uc-unfold{
	-webkit-transform: rotateX(-180deg);
	-moz-transform: rotateX(-180deg);
	-o-transform: rotateX(-180deg);
	-ms-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
}

.uc-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.uc-overlay, 
.uc-flipoverlay {
	background-color: rgba(100, 100, 100, 0.7);
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.uc-flipoverlay {
	background-color: rgba(100, 100, 100, 0.4);
}

.uc-inner {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.uc-inner-rotate {
	-webkit-transform: rotateY(180deg) rotateX(180deg);
	-moz-transform: rotateY(180deg) rotateX(180deg);
	-o-transform: rotateY(180deg) rotateX(180deg);
	-ms-transform: rotateY(180deg) rotateX(180deg);
	transform: rotateY(180deg) rotateX(180deg);
}

.uc-container.uc-current {
	z-index: 9999;
}

/* Demo 1 */
.demo-1 .uc-container{
	width: 500px;
	height: 700px;
	margin: 60px auto;
} 

.scrollwrap {
    width: 100%;
    height: 100%;
    padding: 0px;
    overflow: hidden;
    position: absolute;
}


.demo-1 .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: "Satisfy", cursive;
    color: #224092;
    cursor: pointer;
    font-size: 20px;
    width: 20px;
    height: 20px;
    border: 2px solid #224092;
    border-radius: 50%;
    text-align: center;
    line-height: 14px;
}


.uc-initial-content,
.uc-final-content{
box-shadow: 0px 0px 30px #bbb;
}

.cont1 {
  display: flex; /* or inline-flex */
}

.cont1a {
width:20%;
background-color:#003e89;
height:700px
}


.cont1b {
width:80%;
text-align:center;
height:700px
}

.responsive {
max-width:100%;
height:auto;
margin:0;
border:0;
}

.cont1b{
padding:90px 30px
}

.d2021{
margin:40px 0
}

.hirondelle{
max-width:60px;
width:60px;
margin:auto;
margin-bottom:20px
}

.hirondelle2{
max-width:60px;
width:60px;
margin:auto;
margin-bottom:20px
}



.textintro{
font-family:'Amarillo';
font-size:17px;
color:#1e3d8e;
line-height:35px
}

.textintro2{
font-family:'Cookie';
font-size:20px;
color:#1e3d8e;
line-height:27px;
opacity:0
}

.signature{
font-size:15px;
color:#1e3d8e;
text-align:right;
opacity:0
}

.textsuite{
font-family:'Amarillo';
font-size:17px;
color:#1e3d8e;
line-height:35px
}


.d1,.d2,.d3,.d4{
display:inline-block;
margin:0!important;
padding:0!important;
}
.d1 img,.d2 img,.d3 img,.d4 img{
margin:0;
padding:0
}


.d1{
width:91px
}
.d2{
width:114px
}

.d3{
width:95px
}

.d4{
width:40px
}

.letter {
  display: inline-block;
  opacity:0;
}

.suite{
width:150px;
color:#fff;
margin:auto;
margin-top:40px;
background-color:#1e3d8e;
border-radius:20px;
font-size:14px;
padding:5px;
cursor:pointer;
opacity:0
}

.illus{
width:50%;
height:700px;
display:inline-block;
margin:0;
padding:0;
float:left;
}

.cont3{
width:50%;
height:700px;
display:inline-block;
padding:90px 30px;
margin:0;
float:right;
background:url(logo-tam-gris.png) no-repeat bottom center;
background-size: 100px 82px;	
	
}

@media screen and (max-width: 800px) {
.uc-container.uc-current {
top:30px!important;
}
}  

.uc-final-wrapper .uc-initial div {
    opacity: 1!important;
    transform: scaleX(1) translateZ(0px)!important;
}

.uc-final-wrapper .uc-initial .letter {
    opacity: 1!important;
    transform: scaleX(1) translateZ(0px)!important;
}

@media screen and (min-width: 800px) {
.uc-container.uc-current{
    left: -25%!important;
}
}	

@media screen and (max-width: 800px) {
.main {
    width: 500px!important;
    min-height: 700px!important;
}

.uc-container{
    left:0!important;
}


.uc-initial-content,
.uc-initial
{
    width: 500px!important;
    height: 700px!important;
    display: block;
}

.uc-final-content ,
.uc-final,
.uc-current .uc-final-wrapper
{
    width: 500px!important;
    height: 1400px!important;
    display: block;
}

.cont3,
.illus
{
    width: 500px!important;
    height: 700px!important;
    display: block;
}
	
.uc-container.uc-current{
    left: 0!important;
}
	
}