*{
  box-sizing: border-box;
}
body{
  margin:0;
  padding:0;
  color:#212121;
  background-color:#EEEEEE;
  font-family: 'Open Sans', sans-serif;
}
a{
  color:#2196F3; /*Change link color */
  text-decoration:none;
}
a:hover{
  color:#64B5F6; /*Change link color (on mouse over)*/
}
#blue_bg{
  z-index:-1;
  position:fixed;
  width:100%;
  height:25%;
  top:0;
  background-color:#2196F3; /* Change top background color */
}
.card{
  width: 60%;
  margin:0 auto;
  color:#212121;
  background-color:#fff;
  border-radius: 3px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.19), 0 2px 6px 0 rgba(0, 0, 0, 0.2);
  overflow:auto;
}
#quick_card{
  padding:25px;
  margin-top:10vh;
  text-align:center;
}
i{
  padding: 5px;
}
#quick_card #photo{
  height:90px;
  width:90px;
  border-radius:50%;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.19), 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}
#switchflag{
  background-image: url('../img/france_flag.svg');
  background-size: 100%;
}
#quick_card #flag:hover{
  opacity: 0.8;
}
#quick_card #name{
  font-weight:normal;
  margin-top:20px;
  font-size:19px;
  color:#212121;
}
#quick_card #description{
  font-weight:normal;
  margin-top:15px;
  font-size:15px;
  color:#616161;
}
#quick_card #sousdescription{
  font-weight:normal;
  margin-top:15px;
  font-size:13px;
  color:#777777;
}
#about_card{
  position:relative;
  padding:15px 32px 8px 32px;
  margin:15px auto;
}
#about_card>.tab{
  margin-top:10px;
  margin-bottom:10px;
}
#about_card>.tab>.title{
  font-size:16px;
  color:#2196F3; /*Change title and title icon color (About Card)*/
}
.title i{
  position:relative;
  left:-10px;
}
#about_card>.tab>.content{
  padding:5px 20px 5px 20px;
  position:relative;
}
#about_card .element{
  margin-bottom:5px;
  margin-top:5px;
}
#about_card .element .name{
  color:#212121;
  font-size:15px;
  margin-bottom:3px;
  text-align: left;
}
#about_card .element .description{
  color:#212121;
  font-size:13px;
  margin-bottom:3px;
  text-align: left;
}
#about_card .formation {
  border-right: solid;
  border-color: #2196F3;
  border-width: 3px;
}
#about_card .formation .element .place{
  color:#616161;
  font-size:13px;
  text-align: left;
  font-weight: normal;
}
#about_card .element .place{
  color:#616161;
  font-size:14px;
  text-align: left;
  font-weight: normal;
}
#about_card .element .date{
  color:#616161;
  font-size:13px;
  margin: 5px 0px;
  text-align: right;
}
#about_card .formation .element .date{
  margin: -20px -32px -20px 0;
}
#about_card .bullet {
  vertical-align : -21%;
  margin-left: 15px;
  font-size: 56px;
  color: #2196F3;
}
ul{
  padding-left: 15px;
  list-style: none;
}
li:before {
    content: "";
    position:relative;
    left: -10px;
    background-color:#2196F3;

    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%
}
#map_card{
  position: relative;
  margin:15px auto;
}
#map {
  background-color: #CCC;
  width: 100%;
    height: 400px;
}
hr{
  width:60%;
  color: #E0E0E0;
  background-color: #E0E0E0;
  height:1px;
  border:0;
}
#contact_card{
  position:relative;
  padding:15px 30px 15px 30px;
  margin:15px auto;
}
#contact_card>.tab{
  margin-top:3px;
  margin-bottom:8px;
}
#contact_card>.tab>.title{
  font-size:16px;
  color:#2196F3; /*Change title and title icon color (Contact Card)*/
}
#contact_card>.tab>.content{
  padding-top:10px;
  text-align:center;
}
#contact_card>.tab>.content>.contacts{
  margin:0 20px 0 20px;
  display:inline-block;
  font-size:14px;
  color:#212121;
}
#contact_card a{
  color:#616161;
  text-decoration:none; /*Change link color (ONLY Contact Card)*/
}
#contact_card a:hover{
  color:#9E9E9E; /*Change link color (on mouse over, ONLY Contact Card) */
}
#fab{
  position:fixed;
  width:60px;
  height:60px;
  line-height: 60px;
  text-align:center;
  background-color:#FFC107; /*Change FAB background color */
  border-radius:99px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.19), 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}
#fab i{
  color:#fff;
  font-size:22px;
}
#fab:hover{
  background-color:#FFD54F; /*Change FAB background color (on mouse over) */
}

footer{
  z-index:-1;
  position:fixed;
  bottom:0;
  width:100%;
  text-align:center;
  text-align:center;
  font-size:15px;
  color:#757575;
  padding-bottom:10px;
  font-weight: bold;
}
/* MEDIA */
@media (min-width: 961px){
  #fab{
    top:calc(25% - 30px);
    right:calc((100% - 550px)/4 - 30px);
  }
}
@media (min-width: 481px) and (max-width: 960px) {
  .card{
    width:80%;
  }
  #fab{
    bottom:2%;
    right:2%;
  }
}
@media (max-width: 480px){
  .card{
    width:90%;
  }
  #fab{
    bottom:2%;
    right:2%;
  }
}