Modèle présentation [obligatoire]

/******************************************************
CSS de @linus pour Epicode : http://epicode.bbactif.com
Téléchargé le 21/10/2016
En cas de pépin contactez-moi par MP sur Epicode!
******************************************************/

/*** import google fonts ***/
@import 'http://fonts.googleapis.com/css?family=Unica+One';

/*** import font awesome pour les icones ***/
@import 'http://strandhogg.fr/epicode/css/font-awesome.min.css';

/*reset des styles par défault du navigateur*/
.template-linus-13 ul{ list-style:none; }
.template-linus-13 ul, .template-linus-13 h5, .template-linus-13 h4, .template-linus-13 h3, .template-linus-13 h2, .template-linus-13 h1, .template-linus-13 p, .template-linus-13 figure{margin:0;padding:0;font-weight:normal;}
.template-linus-13 a, .template-linus-13 a:hover{text-decoration:none;text-decoration:none!important;}
.template-linus-13 a img{border:none;}

/*couleurs et styles par défaut*/
.template-linus-13.lighter .tli-block h3{
   color:#9c9bab;
}
.template-linus-13.darker .tli-block h3{
   color:#565656;
}
.template-linus-13 .tli-header.tli-gradient{
   background-color:#8191d0;
   background:-moz-linear-gradient(top, #8191d0 0%,#a8bdff 100%); background: -webkit-linear-gradient(top, #8191d0 0%,#a8bdff 100%); background: linear-gradient(to bottom, #8191d0 0%,#a8bdff 100%);
}
.template-linus-13 .tli-header.tli-flat{
   background:#8191d0;
}
.template-linus-13 .tli-header:before{
   left:0px;
   border-right-color:#6774a6;
}
.template-linus-13 .tli-header:after{
   right:0px;
   border-left-color:#6774a6;
}
.template-linus-13 .tli-fields{
   border-left-color:#8191d0;
}
.template-linus-13 .tli-fields li span{
   color:#8191d0;
}
.template-linus-13.lighter .tli-fields li,
.template-linus-13.lighter .tli-fields li span{
   border-right:1px solid #e8e8e8;
}
.template-linus-13.lighter .tli-fields{
   background:#e8e8e8;
}
.template-linus-13.darker .tli-fields li,
.template-linus-13.darker .tli-fields li span{
   border-right:1px solid #272727;
}
.template-linus-13.darker .tli-fields{
   background:#272727;
}

.template-linus-13.lighter .tli-body{
   background:#f1f1f1;
}
.template-linus-13.darker .tli-body{
   background:#2d2d2d;
}
.template-linus-13.darker .tli-separator:before,
.template-linus-13.darker .tli-separator:after{
   background:#2d2d2d;   
}
.template-linus-13.lighter .tli-separator:before,
.template-linus-13.lighter .tli-separator:after{
   background:#f1f1f1;
}
.template-linus-13.lighter .tli-header h2,
.template-linus-13.lighter .tli-header h3,
.template-linus-13.lighter .tli-header .tli-separator i,
.template-linus-13.lighter .tli-separator{
   color:#f1f1f1;
   color:#f1f1f1 !important;
}
.template-linus-13.darker .tli-header h2,
.template-linus-13.darker .tli-header h3,
.template-linus-13.darker .tli-header .tli-separator i,
.template-linus-13.darker .tli-separator{
   color:#2d2d2d;
   color:#2d2d2d !important;
}
.template-linus-13.lighter .tli-credits{
   background:#e8e8e8;
}
.template-linus-13.darker .tli-credits{
   background:#252525;
}

.template-linus-13.lighter .tli-header .tli-avatar:hover span{
   background:#e8e8e8;
   color:#444;
   color:#444 !important;
}

.template-linus-13.darker .tli-header .tli-avatar:hover span{
   background:#252525;
   color:#999;
   color:#999 !important;
}

.template-linus-13.lighter .tli-block .tli-line{
   border-top-color:#e8e8e8;
}
.template-linus-13.darker .tli-block .tli-line{
   border-top-color:#272727;
}
.template-linus-13.lighter .tli-body,
.template-linus-13.lighter .tli-body h2,
.template-linus-13.lighter a{
   color:#444;
   color:#444 !important;
}
.template-linus-13.darker .tli-body,
.template-linus-13.darker .tli-body h2,
.template-linus-13.darker a{
   color:#999;
   color:#999 !important;
}
.template-linus-13.lighter .tli-credits,
.template-linus-13.lighter .tli-credits a{
   color:#bdbdbd;
   color:#bdbdbd !important;
}
.template-linus-13.darker .tli-credits,
.template-linus-13.darker .tli-credits a{
   color:#4e4e4e;
   color:#4e4e4e !important;
}

/*style général*/
.template-linus-13{
   text-align:left;
   width:400px;
   font-family:arial;
   font-size:11px;
   line-height:13px;
   padding:1em 2em;
}

/*champs civils*/
.template-linus-13 .tli-fields:after{
   content:' ';
   display:block;
   clear:both;
}

.template-linus-13 .tli-fields{
   font-family:'Unica One', sans-serif;
   list-style-type:none;
   text-transform: uppercase;
   margin:0 0 2em 0;
   padding:1em;
   font-size:1em;
   border-left-width:8px;
   border-left-style:solid;
}

.template-linus-13 .tli-fields li{
   margin-bottom:0.25em;
   float:left;
   text-align:left;
   min-width:45%;
}

.template-linus-13 .tli-fields li,
.template-linus-13 .tli-fields li span{
   padding:0 5px;
}

.template-linus-13 .tli-fields li span{
   display:inline-block;
   font-weight:bold;
   padding-left:0;
   margin-right:5px;
}

.template-linus-13 .tli-body{
   padding:2em;
}

.template-linus-13 .tli-block h2{
   height:0px;
}

.template-linus-13 .tli-inner-line h3{
   font-size:1.17em;
}

.template-linus-13 .tli-block .tli-line:after{
   content:' ';
   display:block;
   clear:both;
}

.template-linus-13 .tli-block .tli-line{
   display:block;
   margin-top:0.5em;
   padding-top:0.5em;
   border-top-width:1px;
   border-top-style:solid;
   font-size:0.85em;
}

.template-linus-13 .tli-block:first-child .tli-line{
   border-top:none;
   margin-top:0;
}

.template-linus-13 .tli-inner-line{
   display:flex;
   flex-direction:column;
   justify-content:space-around;
   height:40px;
   float:left;
}

.template-linus-13 .tli-block .tli-details{
   text-align:justify;
}

/*avatar*/
.template-linus-13 .tli-header .tli-avatar{
   -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);
   -webkit-transform-origin:CENTER; -moz-transform-origin:CENTER; -o-transform-origin:CENTER; transform-origin:CENTER;
   display:block;
   overflow:hidden;
   width:100px;
   height:100px;
   /*border-radius:50%;*/
   margin:0 auto;
   -webkit-transition:transform ease-in 0.6s;
   transition:transform ease-in 0.6s;
}

.template-linus-13 .tli-header .tli-avatar img{
   border-radius:50%;
}

.template-linus-13 .tli-header .tli-avatar:hover{
   -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);
   -webkit-transform-origin:CENTER; -moz-transform-origin:CENTER; -o-transform-origin:CENTER; transform-origin:CENTER;
}

.template-linus-13 .tli-header .tli-avatar span{
   border-radius:50%;
   font-size:1em;
   line-height:1.2em;
   -webkit-transition:background-color 1s, color 1s;
   transition:background-color 1s, color 1s;
   color:rgba(0,0,0,0);
   background-color:rgba(0,0,0,0);
   z-index:2;
   display:flex;
   align-items:center;
   justify-content:center;
}

.template-linus-13 .tli-header .tli-avatar span{
   position:absolute;
   padding:0 5%;
   width:90%;
   height:100%;
   left:0px;
   top:0px;
}

/*polices des titres*/
.template-linus-13 .tli-line,
.template-linus-13 .tli-header{
   font-family: 'Unica One', sans-serif;
}

/*en-tête*/
.template-linus-13 .tli-header{
   text-align:center;
   padding:7em 3em 10em 3em;
   position:relative;
   overflow:hidden;
   z-index:10;
}

.template-linus-13 .tli-header:after,
.template-linus-13 .tli-header:before{
   content:' ';
   display:block;
   position:absolute;
   bottom:-10px;
   width:0;
   height:0;
   border-top:0 solid transparent;
   border-bottom:10px solid transparent;
}

.template-linus-13 .tli-header:before{
   border-right-width:10px;
   border-right-style:solid;
}

.template-linus-13 .tli-header:after{
   border-left-width:10px;
   border-left-style:solid;
}

/*séparateur*/
.template-linus-13 .tli-separator:before,
.template-linus-13 .tli-separator:after{
   content:' ';
   position:absolute;
   height:1px;
   width:35%;
   top:50%;
}

.template-linus-13 .tli-separator:before{
   left:10%;
}

.template-linus-13 .tli-separator:after{
   right:10%;
}

.template-linus-13 .tli-separator{
   position:relative;
   border:none;
   padding:0.25em 0;
   font-size:1.5em;
}

/*titres*/
.template-linus-13 .tli-header h2{
   margin-top:1em;
   text-transform:uppercase;
   font-size:1.3em;
}

.template-linus-13 .tli-header h3{
   font-size:1em;
}

.template-linus-13 .tli-block .tli-avatar{
   width:40px;
   height:40px;
   border-radius:50%;
   margin-right:1.5em;
}

.template-linus-13 .tli-block .tli-avatar{
   overflow:hidden;
   float:left;
}

.template-linus-13 .tli-avatar img{
   width:100%;
   height:100%;
   -webkit-filter:saturate(120%);
   filter:saturate(120%);
}

.template-linus-13 .tli-target{
   display:none;
   position:fixed;
}

.template-linus-13 .tli-block .tli-details{
   max-height:0;
   opacity:0;
   margin:0;
   padding-right:1em;
   overflow:hidden;
    -webkit-transition: max-height 1s, opacity 1s, margin 1s; /* Safari */
    transition: max-height 1s, opacity 1s, margin 1s;
}

.template-linus-13 .tli-block.tli-default-opened .tli-details{
    -webkit-transition: max-height 0s, opacity 0s, margin 0s; /* Safari */
    transition: max-height 0s, opacity 0s, margin 0s;
   padding-right:0;
}

/*mécanisme d'ouverture*/
.template-linus-13 .tli-target:target + div,
.template-linus-13 .tli-default-opened .tli-details{
   max-height:450px;
   margin:1em 0;
   overflow-x:hidden;
   overflow-y:auto;
   opacity:1;
}

.template-linus-13 .tli-target:target + div{
   max-height:450px;
   margin:1em 0;
   overflow-x:hidden;
   overflow-y:auto;
   opacity:1;
}

/*crédits*/
.template-linus-13 .tli-credits a{
   text-decoration:underline;
   text-decoration:underline !important;
}

.template-linus-13 .tli-credits{
   text-align:right;
   padding:1em;
}


/*scrollbar*/
.template-linus-13 .tli-body ::-webkit-scrollbar {
    width: 6px;
}
.template-linus-13 .tli-body ::-webkit-scrollbar-button {
    width: 6px;
    height: 4px;
}
.template-linus-13 .tli-body ::-webkit-scrollbar-track {
    background:#eee;
    border: thin solid lightgray;
    box-shadow: 0px 0px 3px #dfdfdf inset;
    border-radius:10px;
}
.template-linus-13 .tli-body ::-webkit-scrollbar-thumb {
    background:#999;
    border: thin solid gray;
    border-radius:10px;
}
.template-linus-13 .tli-body ::-webkit-scrollbar-thumb:hover {
    background:#7d7d7d;
}