/*
	Style pour la page i-bizup 
	6clicks octobre 19 
	
*/


/* Reset css basique */

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

img {
    max-width: 99vw;
    padding: 10px;
}

form {
    max-width: 360px;
}

.hidden{display: none;}

/*Body la structure générale*/

body {
    line-height: 1.7em;
    color: #454545;
    font-size: 13px;
    font-family: "nunito", arial;
    background: url(/asset/img/cubes.svg);
    background-repeat: no-repeat;
    background-position: -441px -239px;
}

/* grille pour les info utilisateur au dessus */
.info-utilisateur {
	position: relative;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #8e1823;
    height: 80px;
    color:#FFF;
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari et Chrome */
    -o-animation: fadein 2s; /* Opera */
  
}
.info-utilisateur > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  
}

.contact-finance a, .contact-finance a:visited, .contact-finance a:link{
	color:#FFF!important;
	text-decoration: underline;
}

.contact-finance a:hover{
	color:#b1a7a7!important;
	text-decoration: none;

	
}

/* grille pour les plus grnad pour le haut login et logo*/

.body-grid-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 6vw 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
        grid-template-areas: "one up";
    justify-items: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    grid-gap: 6vw;
    margin-bottom: 90px;
}


/* block de grille pour le haut login et logo ie 11 */

@media all and (-ms-high-contrast:none) {
    .body-grid-container {
        display: -ms-grid;
        -ms-grid-columns: 1fr 1fr;
        -ms-grid-rows: 1fr;
        -ms-grid-gap: 6vw;
    }
}


/* création de la grille  pour les petit écrants*/

@media only screen and (max-width: 859px) {
    .body-grid-container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        -ms-grid-rows: 1fr 0vw 1fr;
        grid-template-rows: 1fr 1fr;
            grid-template-areas: "one " "up";
        justify-items: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        grid-gap: 0vw;
    }
    @media all and (-ms-high-contrast:none) {
        .body-grid-container {
            display: -ms-grid;
            -ms-grid-columns: 1fr;
            -ms-grid-rows: 1fr 1fr;
            -ms-grid-gap: 0px;
        }
    }
}


/* placement des elements dans la grille du haut*/

.onesolside {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: one;
    -ms-grid-column-align: right;
        justify-self: right;
    margin-top: 15vh;
    margin-right: 20px;
}

.ibizupside {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    margin-top: 15vh;
    grid-area: up;
    -ms-grid-column-align: left;
        justify-self: left;
    margin-left: 20px;
    position: relative;
}

.ibizupside:before {
    content: '';
    width: 1px;
    height: 462px;
    background-color: #b5b5b5;
    display: block;
    position: absolute;
    left: -61px;
    top: -20px;
}


/* element de la grille du haute sur petit ecrants*/

@media only screen and (max-width: 859px) {
    .onesolside {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        margin-top: 40px;
        padding: 0px 5px;
        grid-area: one;
        -ms-grid-column-align: center;
            justify-self: center;
    }
    .ibizupside {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
        margin-top: 10px;
        grid-area: up;
        -ms-grid-column-align: center;
            justify-self: center;
        position: relative;
        margin-right: 20px;
        margin-left: 5px;
    }
    @media only screen and (max-width: 859px) {
    .onesolside {
            -ms-grid-row: 1;
            -ms-grid-column: 1;
    }
    .ibizupside {
            -ms-grid-row: 3;
            -ms-grid-column: 1;
    }
    .onesolside {
            -ms-grid-row: 1;
            -ms-grid-column: 1;
    }
    .ibizupside {
            -ms-grid-row: 3;
            -ms-grid-column: 1;
    }
    }
    .ibizupside:before {
        content: '';
        width: 0px;
        height: 0px;
    }
}


/* formulaire*/

input {
    font-family: 'Nunito';
    font-size: 100%;
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #454545;
}

.user-field p,
.loginfiled p {
    font-size: 20px;
    margin: 30px 0px 0px 40px;
    padding: 0px;
    position: relative;
}

.utilisateur:before {
    content: "";
    display: block;
    width: 27px;
    height: 27px;
    background: url(/asset/img/user-ico.svg);
    background-repeat: no-repeat;
    top: -5px;
    left: -32px;
    position: absolute;
}

#passw {
    margin-bottom: 20px;
}

.password:before {
    content: "";
    display: block;
    width: 27px;
    height: 27px;
    background: url(/asset/img/pasword-ico.svg);
    background-repeat: no-repeat;
    top: -6px;
    left: -24px;
    position: absolute;
}

.connect-filed {
    margin-top: 30px;
    height: 44px;
    padding: 10px 15px;
    border-radius: 12px;
    background: #8e1823;
    color: white;
    text-decoration: none;
    text-align: center;
    text-decoration: none!important;
     -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;

}

.connect-filed:hover{
 -webkit-filter: opacity(.8);
  filter: opacity(.8);
	  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

.connect-filed a  {
    font-family: 'Nunito';
    color: white!important;
    text-decoration: none!important;
    font-size: 20px;
    width: 100%;
    height: 100%;
    display: block;
}

input{
	background-color: #b7000000;
}

input:focus, input:active  {
    background: #d2959536;
}

/* Grille de placement pour les icon du bas */

.footer-grid-container {
	width: 100%;
    text-align: center;
    max-width: 1070px;
    margin: auto;
 }
 
 .footer-grid-container .titre {
    margin-bottom: 40px;
}



.bout-footer-holder {
    display: flex;
    justify-content: center;
}
/* habillage  des boutons  */

.titre h2 {
    font-family: 'rubik';
    font-style: italic;
    font-weight: 300;
    font-size: 3.2vw;
    color: #8e1823;
}

@media screen and (min-width: 1200px) {
  .footer-grid-container .titre h2 {
     font-size: 47px;
  }
}

.bout-footer{
	display: block;
    width: 100%;
    height: 110px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 20px;
}


.bout1 {
    
    background-image: url('/asset/img/m-files-bout.svg');
    
}

.bout2 {
    
    background-image: url('/asset/img/sage-bout.svg');
    
}

.bout3 {
   
    background-image: url('/asset/img/connector-bout.svg');
   
}

.bout4 {
       
    background-image: url('/asset/img/ibizup-bout.svg');
   
}

.bout5 {
   
    background-image: url('/asset/img/insiders-bout.svg');
   }


.bout-footer a{
	display: block;
	width: 100%;
	height: 100%;
	  -webkit-transition: all .9s ease-out;
  -o-transition: all .9s ease-out;
  transition: all .9s ease-out;
}
.bout-footer:hover{
	 -webkit-filter: opacity(.8);
  filter: opacity(.8);
    background-position: -0px 2px;
      -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

/* adaptation de l'habillage pour les petit ecrans*/

@media only screen and (max-width: 859px) {
    .bout-footer-holder {
	    flex-wrap: wrap;
      
    }
    .titre h2 {
        margin-left: 10px;
        line-height: 4vh;
        font-size: 7.2vw;
    }
    .bout-footer{
	    width: 39%;
    }
    	}

/* Clef pour les animation sans passer pas JS*/

@keyframes fadein {
    from {
	    top: -80px;
        opacity:0;
    }
    to {
	    top: 0px;
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* sur Safari et Chrome */
    from {
	    top: -80px;
        opacity:0;
    }
    to {
	    top: 0px;
        opacity:1;
    }
}