@charset "UTF-8";


		/*------------------------------------------------------------------------------------ 
		  ------------------------------------------------------------------------------------
                                                                                                    
                                                                                                    
                   `...`                                                                            
                  :dNNNd/                                                                           
                  sMMosMM/                                                      `:+oo+/.            
                  `yNmsNMo                       `.--`      `/o/` ```          -yyooohNNh-          
                    :dMMM:    /d/      `+s+.  `/yNMNNNy:    dMMMmhNMNy-  -o/``..`     .hMN-         
                     /NMMh-  `mMd   ` `dmoNm `hMNs. .yMM/   Md/dMN+-hMm``NMMmNMMNy`    `mMy         
                   `yMNoyMNo`oMMd  hN/`hMmNNymMN-    `mMd   dd`.Md  /MN.-MyhMN/:mMy     +Mm`        
                  :mMd-  /NMNMMMy  dMh  -hMNdNMh      yMh   hm. Nd  +Mh +M+:My  oMN`    /MM.        
         `.`    .yMNo./sdNMMMoNMs  mMm. `dN. .mN/    -mMy  /Md` md` yMd/mM/-My  +MM.    yMN`        
        .mNNy//sNMh--mMms/dMm`hMd.oMMMo.yMm`  :NMdsshNMMNdmMm:  --  dMMMMM-`Nh  /MM+  `+MMd`        
        :MMMMMMMd/` hMMo+hMN/ -dMNMmsmMNMNo    .sdNNNd+:oso:`       :dNNmo` ::  `mMMdhdMMN:         
         +hddhs:`   +mNNNdo.   `.:-` `-/:.       ``.``               `..`        .smMMNmy-          
           ```       `..``                                                         `.-.`            
         ------------------------------------------------------------------------------------                                                                                           
			swann landing page 2021 CSS Document
			copyright swann jacquet 2021
			swannjacquet.com
			contact@swannjacquet.com
			Please contact me for any question or problem you encounter here
		------------------------------------------------------------------------------------
		------------------------------------------------------------------------------------*/




/* GLOBAL */
	
	body {
    overflow: hidden;
	width:100%;
	height:100%;
	}
		
	
	#cont1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: black;
    position: absolute;
    top: 0;
    left: 0;
	}
			
			

	#backgrnd1 {
    background-image: url(swnn2021-BG2.jpg);
   	background-position: center;
 	width: 100%;
    background-size: cover;
    height: 100%;
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
	animation: 2s ease-out 0s 1 slide2;
	z-index:1;
	}
	
	
	@keyframes slide2 {
  	0% {opacity:0;}
	25% {opacity:0;}
  	100% {opacity:1;}
	}



	/* panneau depliable */

	#infos1 {
	height: 100%;
	right:0;
	position:absolute;
	background-color:#000000f2;
	opacity:1;
	top: 0;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
	display:block;
	animation: 3s ease-out 0s 1 slide1;
	overflow-y: scroll;
    margin-right: -17px;
	z-index:10;
	}
		


	@keyframes slide1 {
  	0% {transform: translateX(100%);}
	50% {transform: translateX(100%);}
  	100% {transform: translateX(0);}
	}
	
	
	.infopl {
	opacity:0.6;
	}
		

	.infodpl {
	margin-right:0;
	opacity:1;
	}
	
		
	/* OPEN / CLOSE  */
	
	#close1 {
    width: 50px;
    height: 50px;
    /* padding-bottom: 5%; */
    position: fixed;
    float: left;
    cursor: pointer;
    opacity: 0.5;
    z-index: 999;
    /*background-image: url(arrow2021.svg);*/
	background-color: white;
	-webkit-mask-box-image: url(arrow2021.svg);
    background-position: center;
    background-size: cover;
    top: 15px;
	}

	#close1:hover {
    opacity: 1;
	}	
	
	.open {
	/*opacity:1;*/
	-ms-transform: rotate(180deg)!important;; /* IE 9 */
   	-webkit-transform: rotate(180deg)!important;; /* Safari */
   	transform: rotate(180deg)!important;;
	}
	
	.close {
	/*opacity:0.5;*/
	-ms-transform: rotate(360deg) /* IE 9 */
   	-webkit-transform: rotate(360deg); /* Safari */
   	transform: rotate(360deg);
	}
	
	.close, .open {
		-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	}
	
	#close1,{
		-webkit-transition: all 100ms ease-in-out;
	-moz-transition: all 100ms ease-in-out;
	-ms-transition: all 100ms ease-in-out;
	-o-transition: all 100ms ease-in-out;
	transition: all 100ms ease-in-out;
	}
	
	/* infos section */
	
	
	#swann1 {
    background-image: url(Swann2021.svg);
    margin: 0 auto;
    background-position: center;
    background-size: cover;
	}
	
	#french {
    background-image: url(french2021.svg);
    margin: 0 auto;
    background-position: center;
    background-size: cover;
	}
	
	#illustrator {
    background-image: url(illustrator2021.svg);
    margin: 0 auto;
    background-position: center;
    background-size: cover;
	}
	#CTA {
	width: fit-content;
    margin: 0 auto;	
	margin-bottom: 38px;
	}
	
	#portfolio {
    background-image: url(portfolio2021.svg);
    margin: 0 auto;
    background-position: center;
    background-size: cover;
	}
	
	#behance {
    /*background-image: url(behance2021.svg);*/
	background-color: white;
	-webkit-mask-box-image: url(behance2021.svg);
    margin: 0 auto;
    background-position: center;
    background-size: cover;
	cursor: pointer;
	}
	
	/*#behance:hover {
	background-color: #00ff9c;
	}*/
	
	
	#infos2 {
	width:100%;
	position:absolute;
	top: 50%;
	left:50%;
	transform: translateY(-50%) translateX(-50%);
	}
	
	#links {
		/*background-color:red;*/
		width:100%;
		text-align: center;
	}
		
	
	
	/* liens réseaux */
	
	#lnkdn, #fb, #twitter, #devart, #sketchfab {
	/*background-image: url(snicons2021.svg);*/
	background-color:white;
	display: inline-block;
	}
		
	#lnkdn {
    -webkit-mask-box-image: url(linkedin2021.svg);
	}
	
	#fb {
    -webkit-mask-box-image: url(fb2021.svg);
	}
	
	#twitter {
    -webkit-mask-box-image: url(twitter2021.svg);
	}
	
	#devart {
    -webkit-mask-box-image: url(devart2021.svg);
	}
	
	#sketchfab {
     -webkit-mask-box-image: url(sketchfab2021.svg);
	}
	
	#behance:hover, #lnkdn:hover, #fb:hover, #twitter:hover, #devart:hover, #sketchfab:hover {
	/*background-color: #00ff9c; vert Lacteo*/
	background-color: #ff2828; /*rouge*/
	}
	
	
	#behance, #behance:hover,
	#lnkdn, #lnkdn:hover,
	#fb, #fb:hover,
	#twitter, #twitter:hover,
	#devart, #devart:hover,
	#sketchfab, #sketchfab:hover {
	-webkit-transition: all 100ms ease-in-out;
	-moz-transition: all 100ms ease-in-out;
	-ms-transition: all 100ms ease-in-out;
	-o-transition: all 100ms ease-in-out;
	transition: all 100ms ease-in-out;
	}