.top{
  background-color:black;
}
.top img{
  margin:1em;
  width:100px;
}
div.map {
  width: 100%;
  height: 500px;
  margin-top: 30px;
  text-align: center; }
  div.map svg {
    height: 95%;
    width: 95%; } 
    div.map svg g#world > g, div.map svg g#world > path {
      fill: #90CAF9;
      transition: .6s fill; }
      div.map svg g#world > g.hover, div.map svg g#world > g:hover, div.map svg g#world > path.hover, div.map svg g#world > path:hover {
        fill: #42A5F5;
        cursor: pointer;
         }
.hover{
  transition: .6s fill; 
  fill: #42A5F5;
}
div.mapProvince {
  width: 100%;
  height: 556px;
  text-align: center;
  margin-bottom: 20px; }
  div.mapProvince svg {
    height: 145%;
    width: 55%; }
    div.mapProvince svg > g, div.mapProvince svg > path {
      fill: #42A5F5; }

ul#navP {
  margin: 0;
    padding: 0;

  text-align: center;
  display: block; }
  ul#navP li {
    display: inline-block; }
   
      ul#navP li a.hover, ul#navP li a:hover {
        text-decoration: none;
        color: #218de4; }
    ul#navP li::after {
      content: ' - ';
      color: #4c96d2;
      margin-right: 5px;
      margin-left: 5px; }
    ul#navP li:last-child::after {
      content: ''; }

h1 {
  text-align: center;
  letter-spacing: 0.1em;
  display: block;
  font-size: 1.8em;
  margin-bottom: 33px;
  color: #424242; }

div.filters {
  text-align: center; }
  div.filters button {
    border: 0;
    background-color: #e5f3ff;
    color: #1f80ce;
    cursor: pointer;
    padding: 5px;
    margin-bottom: 5px;
    font-size: 12px;
    letter-spacing: 0.1em; }
    div.filters button:focus, div.filters button.active {
      background-color: #42a5f5;
      outline: 0;
      color: #fff; }

ul.result {
      margin: 0;
  margin-top: 30px; }
  ul.result li {
    display: inline-block;
    width: 290px;
    margin-right: 6px;
    margin-bottom: 6px; }
    ul.result li button.agency {
      padding: 16px 16px;
      border-radius: 5px;
      background-color: #F5F5F5;
      border: 1px solid #e2e2e2;
      letter-spacing: 1px;
      font-size: 12px;
      cursor: pointer;
      width: 100%;
      text-align: left; }
      ul.result li button.agency:focus {
        outline: 0; }
      ul.result li button.agency span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 10px;
        display: block; }

#myModal div.map {
  width: 100%;
  height: 200px;
  margin-top: 0; }
#myModal span {
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
  letter-spacing: 1px;
  font-size: 12px;
  word-wrap: break-word; }
.filters select{
    display: block;
    height: 30px;
    background-color: #42a5f5;
    color: #fff;
    border: 1px solid transparent;
    letter-spacing: 1px;
    font-size: 13px;
    width: 250px;
    margin: 0 auto;
    margin-bottom: 7px;


}
.filters select:focus{
      outline: 0;
    }
div.map {
  width: 100%;
  height: 500px;
  margin-top: 30px;
  text-align: center; }
  div.map svg {
    height: 95%;
    width: 95%; }
    div.map svg g#Canada > g, div.map svg g#Canada > path {
      fill: #90CAF9;
      transition: .6s fill; }
      div.map svg g#Canada > g.hover, div.map svg g#Canada > g:hover, div.map svg g#Canada > path.hover, div.map svg g#Canada > path:hover {
        fill: #42A5F5;
        cursor: pointer; }

div.mapProvince {
  width: 100%;
  height: 300px;
  text-align: center;
  margin-bottom: 20px; }
  div.mapProvince svg {
    height: 95%;
    width: 95%; }
    div.mapProvince svg > g, div.mapProvince svg > path {
      fill: #42A5F5; }

ul#navP {
  margin: 0;
    padding: 0;

  text-align: center;
  display: block; }
  ul#navP li {
    display: inline-block; }
    ul#navP li a {
      text-decoration: none;
      color: #424242;
      font-size: 12px;
      letter-spacing: 1px; }
      ul#navP li a.hover, ul#navP li a:hover {
        text-decoration: none;
        color: #218de4; }
    ul#navP li::after {
      content: ' - ';
      color: #4c96d2;
      margin-right: 5px;
      margin-left: 5px; }
    ul#navP li:last-child::after {
      content: ''; }

h1 {
  text-align: center;
  letter-spacing: 0.1em;
  display: block;
  font-size: 1.8em;
  margin-bottom: 33px;
  color: #424242; }

div.filters {
  text-align: center; }
  div.filters button {
    border: 0;
    background-color: #e5f3ff;
    color: #1f80ce;
    cursor: pointer;
    padding: 5px;
    margin-bottom: 5px;
    font-size: 12px;
    letter-spacing: 0.1em; }
    div.filters button:focus, div.filters button.active {
      background-color: #42a5f5;
      outline: 0;
      color: #fff; }

ul.result {
      margin: 0;
  margin-top: 30px; }
  ul.result li { }
    ul.result li button.agency {
      padding: 16px 16px;
      border-radius: 5px;
      background-color: #F5F5F5;
      border: 1px solid #e2e2e2;
      letter-spacing: 1px;
      font-size: 12px;
      cursor: pointer;
      width: 100%;
      text-align: left; }
      ul.result li button.agency:focus {
        outline: 0; }
      ul.result li button.agency span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 10px;
        display: block; }

#myModal div.map {
  width: 100%;
  height: 200px;
  margin-top: 0; }
#myModal span {
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
  letter-spacing: 1px;
  font-size: 12px;
  word-wrap: break-word; }
.filters select{
    display: block;
    height: 30px;
    background-color: #42a5f5;
    color: #fff;
    border: 1px solid transparent;
    letter-spacing: 1px;
    font-size: 13px;
    width: 250px;
    margin: 0 auto;
    margin-bottom: 7px;


}
.filters select:focus{
  outline: 0;
}
div.map {
  width: 100%;
  height: 500px;
  margin-top: 30px;
  text-align: center; }

div.mapRus{
    height: 600px;
    margin-top: 46px;
    margin-left: 316px;    
}
div.mapRus svg{
  width: 600px;
  height:95%;
}

div.map svg {
  height: 95%;
  width: 95%; }

div.map svg#Australia > g, div.map svg#Australia > path {
  fill: #90CAF9;
  transition: .6s fill; }
div.map svg#Australia > g.hover, div.map svg#Australia > g:hover, div.map svg#Australia > path.hover, div.map svg g#Canada > path:hover {
  fill: #42A5F5;
  cursor: pointer; }

div.map svg#mexico > g, div.map svg#mexico > path {
  fill: #90CAF9;
  transition: .6s fill; 
}
div.map svg#mexico > g.hover, div.map svg#mexico > g:hover, div.map svg#mexico > path.hover, div.map svg g#Canada > path:hover {
  fill: #42A5F5;
  cursor: pointer; 
}

div.map svg#reunion > g, div.map svg#reunion > path {
  fill: #90CAF9;
  transition: .6s fill; 
}
div.map svg#reunion > g.hover, div.map svg#reunion > g:hover, div.map svg#reunion > path.hover, div.map svg g#Canada > path:hover {
  fill: #42A5F5;
  cursor: pointer; 
}



div.map svg#Guadeloupe > g, div.map svg#Guadeloupe > path {
  fill: #90CAF9;
  transition: .6s fill; 
}
div.map svg#Guadeloupe > g.hover, div.map svg#Guadeloupe > g:hover, div.map svg#Guadeloupe > path.hover, div.map svg g#Canada > path:hover {
  fill: #42A5F5;
  cursor: pointer; 
}

div.map svg#monaco > g, div.map svg#monaco > path {
  fill: #90CAF9;
  transition: .6s fill; 
}
div.map svg#monaco > g.hover, div.map svg#monaco > g:hover, div.map svg#monaco > path.hover, div.map svg g#Canada > path:hover {
  fill: #42A5F5;
  cursor: pointer; 
}
path#frames{
  fill:none;
}
div.map svg#united > g, div.map svg#united > path {
  fill: #90CAF9;
  transition: .6s fill; 
}

div.map svg#united > g.hover, div.map svg#united > g:hover, div.map svg#united > path.hover, div.map svg g#Canada > path:hover {
  fill: #42A5F5;
  cursor: pointer; 
}
div.map svg#Antigua_and_Barbuda > g, div.map svg#Antigua_and_Barbuda > polygon {
  fill: #90CAF9;
  transition: .6s fill; 
}

div.map svg#Antigua_and_Barbuda > g.hover, div.map svg#Antigua_and_Barbuda > g:hover, div.map svg#Antigua_and_Barbuda > polygon.hover, div.map svg g#Canada > path:hover {
  fill: #42A5F5;
  cursor: pointer; 
}

div.map svg#bermudaPolygon > g, div.map svg#bermudaPolygon > polygon {
  fill: #90CAF9;
  transition: .6s fill; 
}

div.map svg#bermudaPolygon > g.hover, div.map svg#bermudaPolygon > g:hover, div.map svg#bermudaPolygon > polygon.hover, div.map svg g#Canada > path:hover {
  fill: #42A5F5;
  cursor: pointer; 
}


div#center{
  margin: : 6em;
}
.nouveau{
  padding: 0.3em;
  background-color: white;
  left:50px;
  border-radius:10px;
  color:red !important;
}
#center2{
  text-align: center;
  background-color: orange;
}
#center2 p{
  text-shadow: 1px 1px #FFC107;
  margin-bottom:3em;
}
#center3{
  background-color: #fbfbfb;
  height: 18em;
  margin:4em 0px;
}
#loaderImg{
  width:3em;
}
#centerLoading{
  text-align: center;
}
.fade{
  border:1px solid red;
}
.fade.ng-enter {
  transition:3.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}

footer{
  background-color: black;
  padding:2em;
  margin-top:3em;

}
footer img{
  width:100px;
}
footer h6{
  margin-top:1em;
  color:white;
  font-family: 'Open Sans', sans-serif;

}