body{
	
	width: 100%;
	height : 100%;
	margin : 0;
    background : white;
    font-size : 100%;
}
#lat_contener{
    display: block;
    position : absolute;
    background: transparent linear-gradient(0deg, rgb(31, 73, 125) 0%, rgb(31, 73, 125) 1%, rgb(142, 180, 227) 100%);
    width : 100%;
    height : 100%;
    top : 0%;
    left : 0%;
    z-index : -1;
}

#banner_content{
    display: block;
    padding : 0% 0% 1% 0%;
    text-align: center;
    margin-top : 30%;
    background: rgba(31, 73, 125,1);
    color : white;
    position: relative;
    font-family: 'Titillium Web', sans-serif;
    z-index : 0;
    box-shadow : 5px 8.7px 20px rgba(86, 86, 86, 0.9) !important
}

#nom{
    font-weight : 600;
    font-size : 2.2em;
    text-align: center;
}

#poste{
    margin-top : 0%;
    font-weight: 300;
    font-style : italic;
    text-align: center;
    font-size : 1.6em;
}

#img_contener{
    display: block;
    position : absolute;
    background: transparent;
    width : 30%;
    top : 0%;
    left : 36%;
    z-index : 1;
}

#profil{
    width : 100%;
    margin-top : 0%;
    margin-left : 0%;
}

#main_content{
    z-index: 1;
    margin-top : 0%;
    margin-right: auto;
    margin-left: 0%;
    background: transparent;
    box-shadow : 0 -5px 40px 7px rgba(0, 0, 0, 0.08);
    position : relative;
    display: block;
    height : auto;
    padding-bottom : 2%;
}

#bottom_content div{
    height : 5%;
    padding : 2% 0% 1% 25%;
    font-family: 'Titillium Web', sans-serif;
    font-size : 1.7em;
    color : white;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

#profession{
    font-weight: 600;
    font-size : 1.8em !important;
    text-align: center;
    font-style : italic;
    padding-top : 2% !important;
    padding-bottom : 1% !important;
    padding-left : 0% !important;
    
}

.separation{
    height : 1px !important;
    margin-left : 15%;
    margin-right : 15%;
    padding : 0px !important;
    background-color : #eaeaea;
}

#social{
    padding : 1% 0% 1% 15%!important;
    font-size : 1.2em !important;
    color :#eaeaea;
}

#share{
    padding : 1% 0% 1% 15%!important;
    font-size : 1.2em !important;
    color :#eaeaea;
}

#vcard{
    width : 74%;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top : 1%;
    margin-bottom : auto;
    cursor : pointer;
    box-shadow : 5px 8.7px 20px rgba(86, 86, 86, 0.5);
    border-radius: 0.5em;
    padding-bottom : 2% !important;
    padding-top : 2% !important;
    padding-left : 0% !important;
    padding-right : 0% !important;
    text-align : center !important;
    background : transparent linear-gradient(0deg, rgb(31, 73, 125) 0%, rgb(31, 73, 125) 1%, rgb(50, 118, 200) 100%);
    font-weight : 600;
    color : white;
}

#vcard:hover{
    box-shadow : 5px 8.7px 20px rgba(86, 86, 86, 0.9) !important
}

.picto{
    width : 6%;
    position : absolute;
    left : 16%;
    margin-top : 0%;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.picto:hover{
    cursor : pointer;
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -moz-transform: scale(1.2);
}

.icon{
    width : 9%;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    margin-top : 0%;
    margin-right : 1%;
}

.icon:hover{
    cursor : pointer;
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -moz-transform: scale(1.2);
}

.legende{
    color : #aaaaaa;
}

.lien{
    text-decoration: none;
    color : inherit;
}

/*Smartphone en mode Portrait*/
@media only screen
and (orientation: portrait)
and (max-device-width : 360px)
and (min-device-width : 360px)
and (max-height : 2000px)
and (min-height : 1500px)
{
    body{font-size : 200% !important;}
    #bottom_content div{padding : 4% 0% 2% 25%;}
    #profession{padding : 2% 0% 1% 0% ! important;}
    #banner_content{margin-top : 30% !important;}
/*    #lat_contener{background: rgb(100, 100, 0);}*/
    #img_contener{
        width : 30%;
        left : 35%;}
}
@media only screen
and (orientation: portrait)
and (max-device-width : 360px)
and (min-device-width : 360px)
and (max-height : 1500px)
and (min-height : 1000px)
{
    body{font-size : 200% !important;}
    #bottom_content div{padding : 2% 0% 0% 25%;}
    #profession{padding : 2% 0% 1% 0% ! important;}
    #banner_content{margin-top : 30% !important;}
/*    #lat_contener{background: rgb(0, 100, 100);}*/
    #img_contener{
        width : 30%;
        left : 35%;}
}
/*iPhone 4 en mode Portrait*/
@media only screen
and (orientation: portrait)
and (max-device-width : 321px)
and (min-device-width : 320px)
{
    body{font-size : 160% !important;}
    #bottom_content div{padding : 1% 0% 0% 25%;}
    #profession{padding : 0% 0% 1% 0% ! important;}
    #banner_content{margin-top : 18% !important;}
/*    #lat_contener{background: rgb(100, 0, 0);}*/
    #img_contener{
        width : 18%;
        left : 42%;}
}
/*iPad en mode Portrait*/
@media only screen
and (orientation: portrait)
and (max-device-width : 1024px)
and (min-device-width :  768px)
{
    body{font-size : 160% !important;}
    #bottom_content div{padding : 2% 0% 1% 25%;}
    #profession{padding : 2% 0% 1% 0% ! important;}
    #banner_content{margin-top : 23% !important;}
/*    #lat_contener{background: rgb(0, 0, 200);}*/
    #img_contener{
        width : 23%;
        left : 40%;}
}
@media screen
and (orientation: portrait)
and (min-width :  1025px)
{
    #bottom_content div{padding : 4% 0% 2% 25%;}
    #profession{padding : 4% 0% 2% 0% ! important;}
    #banner_content{margin-top : 32% !important;}
    #lat_contener{background: rgb(0, 255, 0);}
    #img_contener{
        width : 32%;   /* devrait etre 32*/
        left : 35%;   /*devrait etre 35*/
    }
}


/* cas des affichage en mode paysage: modifications */

@media screen
and (orientation: landscape)
{
    body{
        font-size : 110% !important;
    }
    
    #lat_contener{
        width : 25%;
        left : 5%;
    }
    
    #banner_content{
        padding : 1% 0% 1% 30%;
        margin-top : 4%;
    }
    
    #poste{
        font-size : 1.8em;
    }
    
    #img_contener{
        width : 18%;
        top : 0%;
        left : 9%;
    }
    
    #main_content{
        margin-left: 30%;
        background: transparent;
    }
    
    #bottom_content div{
        height : 5%;
        font-size : 1.8em;
        color : rgb(80, 80, 80);
    }
    #profession{
        color: rgb(90, 90, 90);
        font-size : 2em!important;
        padding-top : 4% !important;
        padding-bottom : 4% !important;
    }
    #social{visibility: hidden;}
    #share{visibility: hidden;}
    .separation{visibility: hidden;}
    .icon{visibility: hidden;}
    #vcard{visibility: hidden;}
    
    .picto{
        left : -20%;
    }
    
    @media (max-height: 1100px)
    {
        #bottom_content div{
            padding : 3% 0% 3% 5%;
        }
    }
    @media (max-height: 770px)
    {
        #bottom_content div{
            padding : 3% 0% 2% 5%;
        }
    }
    @media (max-height: 500px)
    {
        #banner_content{
            margin-top : 2%;
        }
        #bottom_content div{
            padding : 1% 0% 0% 5%;
        }
        #profession{
            padding-top : 2% !important;
            padding-bottom : 1% !important;
        }
    }
}