@charset "UTF-8";

/* CSS Document */

  
  /* COLORS :
  #007ac1 ; rgb(0, 122, 193) ; bleu utilisé le plus souvent
  #208ccc ; rgb(32, 140, 204) ;
  #328cc1 ; rgb(50, 140, 193) ;
  #109fd3 ; rgb(16, 159, 211) ;
  #098aba ; rgb(9, 138, 186) ; */
 		
        /* Police Roboto */

@font-face {
  font-family: 'Roboto-Thin';
  src: url('Roboto-Thin.eot?#iefix') format('embedded-opentype'),  url('Roboto-Thin.woff') format('woff'), url('Roboto-Thin.ttf')  format('truetype'), url('Roboto-Thin.svg#Roboto-Thin') format('svg');
  font-weight: normal;
  font-style: normal;
            }
			
@font-face {
  font-family: 'Roboto-Light';
  src: url('Roboto-Light.eot?#iefix') format('embedded-opentype'),  url('Roboto-Light.woff') format('woff'), url('Roboto-Light.ttf')  format('truetype'), url('Roboto-Light.svg#Roboto-Light') format('svg');
  font-weight: normal;
  font-style: normal;
            }

header {
        width: 100%;
        height: 10%;
        position: absolute;
        font-family: roboto-light, Arial, sans-serif;
        }

html, body, section {
                    height: 100%;
                    margin: 0;
                    border: 0;
                    font-family: roboto-light, Arial, sans-serif;
                    }

  /*Scrollbar width*/ 
::-webkit-scrollbar { width: 12px; }
 /*Track*/ 
::-webkit-scrollbar-track { background-color:black; }
 /*Handle*/ 
::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 10px;
    border: 2px solid #00578A;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #00578A;}


        /*  Menu  */

.topnav {
        overflow: hidden;
        width: 100%;
        position: fixed;
        background-color:black;
        height:auto;
        z-index: 1;
        }

.topnav a {
           float: left;
           display: block;
           color: white;
           text-align: center;
           margin:0px;
           padding: 14px 16px;
           text-decoration: none;
           font-size: 18px;
           position:relative;
          }

/*.topnav a::after {
  content: '';
  position: absolute;
  width: 100%;
  -ms-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  -ms-transform-origin: bottom right;
  -webkit-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  -o-transform-origin: bottom right;
  transform-origin: bottom right;
  -webkit-transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
}

.topnav a:hover::after {
  -ms-transform: scaleX(1);
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
  -ms-transform-origin: bottom left;
  -webkit-transform-origin: bottom left;
  -moz-transform-origin: bottom left;
  -o-transform-origin: bottom left;
  transform-origin: bottom left;
}*/

.activemenu {border-bottom: #0087ca 2px solid;  font-weight: bold;}

.topnav .icon {display: none;}

        /* Menu responsive design */

    @media screen and (max-width: 834px) {
        
        .topnav a:not(:first-child), .dropdown .dropbtn {display: none;}

        .topnav a.icon {
                        float: right;
                        display: block;
                        }
    }

    @media screen and (max-width: 834px) {
        
        .topnav.responsive {position: relative;}

        .topnav.responsive .icon {
                                 position: absolute;
                                 right: 0;
                                 top: 0;
                                  }

        .topnav.responsive a {
                             float: none;
                             display: block;
                             text-align: left;
                             }

        .topnav.responsive .dropdown {float: none;}

        .topnav.responsive .dropdown-content {position: relative;}

        .topnav.responsive .dropdown .dropbtn {
                                              display: block;
                                              width: 100%;
                                              text-align: left;
                                              }
                                        }

        /* Burger Menu Responsive Design*/

.bar1, .bar2, .bar3 {
                    width: 30px;
                    height: 4px;
                    background-color: #febb00;
                    margin: 6px 0;
                    transition: 0.4s;
                    }

.change .bar1 {
              -webkit-transform: rotate(-45deg) translate(-8px, 6px);
              transform: rotate(-45deg) translate(-8px, 6px);
              }

.change .bar2 {opacity: 0;}

.change .bar3 {
              -webkit-transform: rotate(45deg) translate(-8px, -6px);
              transform: rotate(45deg) translate(-8px, -6px);
              }

.choixlangues {float: right;}

        /* Dropdown Button languages */

.dropbtn {
         background-color: transparent;
         padding: 14px 16px;
         font-size: 20px;
         border: none;
         }

.dropdown {
          /*position: relative;*/
          /*display: inline-block;*/
          float:right;
          }

.dropdown-content {
                  display: none;
                  /*position: absolute;*/ /*essayer de l'enlever !!*/
                  background-color:black;
                  min-width: 16px;
                  z-index: 1;
                  }

/*.dropdown-content a :hover {background-color: black;}*/

.dropdown-content a {
                    color: white;
                    padding: 3px 10px;
                    text-decoration: none;
                    display: block;
                    }

.dropdown:hover .dropdown-content {
                                  display: -webkit-flex; /* Safari */
                                  -webkit-flex-direction: column;
                                  display: flex;
                                  flex-direction:column;
                                  /*-webkit-box-orient: vertical;*/
                                  /*justify-content: center;
                                  align-items:center;*/
                                  }

.dropdown:hover .dropbtn {background-color: #007ac1;}


        /* GENERAL */

section h1 {
            text-align: center;
            padding: 40px 0px 20px 0px;
            font-size: 40px;
            color: #febb00;
           }
section h2 {
            text-justify: auto;
            font-size: 30px;
            color: white;
           }
section p {
           text-justify: auto;
           padding: 0px 0px 0px 0px;
           font-size: 20px;
           line-height: 1.3;
           color: white;
          }
h2 {
    font-size: 40px;
    font-style: italic;
    text-align: left;
    }

/* TEST NOUVEL ANIM BRN */

/*.introduction H1 {
  font-size: 128px;
  color: rgba(0,171,255,0.37);
  background-image: url(Images/b.png);
  background-size: 800px;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-animation: animintro 15s linear infinite;
  animation: animintro 15s linear infinite;
  margin:8% 3% 0% 3%;
  text-align:left;*/
  /*text-stroke: #009fff6e 1px;
  -webkit-text-stroke: #009fff6e 1px;*/
  /*text-shadow: black 0.1em 0.1em 0.2em
}

@keyframes animintro {
  0% {
    background-position: left 0px top 0px;
  }
  40% {
    background-position: left 800px top 0px;
  }
}*/
        /* FIN TEST NOUVEL ANIM BRN */


        /* PAGE ACCUEIL */

.introduction {
              padding: 10px;
              color: white;
              background-image: url(Images/newbg5.png);
              background-repeat: no-repeat;
              background-size: COVER;
              background-position: 50% 0px;
              background-attachment: fixed;
              background-color:black;
              height:100%;
              width:auto;
              }

.logoBRN img {
              max-width: 100%;
              height: auto;
              margin-left:5%;
              margin-top:7%;
              }

.introduction p {
                font-size: 1.6em;
                font-style: italic;
                margin:3% 50% 1% 5%;
                text-align:justify;
                color:#33b4ff;
                }

.scroll-down {
              position: absolute;
              opacity: 1;
              bottom: 30px;
              left: 50%;
              margin-left: -16px;
              width: 32px;
              height: 32px;
              border: 2px solid #febb00;
              background-size: 14px auto;
              border-radius: 50%;
              /*z-index: 2;*/
              display: block;
             -moz-transition: all .5s ease-in 3s;
             -o-transition:all .5s ease-in 3s;
             -ms-transition:all .5s ease-in 3s;
             -webkit-transition: all .5s ease-in 3s;
              transition: all .5s ease-in 3s;
              -webkit-animation: bounce 2s infinite 2s;
              animation: bounce 2s infinite 2s;
              -moz-transition:all .2s ease-in;
             -o-transition:all .2s ease-in;
             -ms-transition:all .2s ease-in;
              -webkit-transition: all .2s ease-in;
              transition: all .2s ease-in;
              -ms-transform: scale(1);
              -webkit-transform: scale(1);
              -moz-transform: scale(1);
              -o-transform: scale(1);
              transform: scale(1);
             }

.scroll-down:before {
                    position: absolute;
                    top: calc(45% - 8px);
                    left: calc(50% - 7px);
                    -moz-transform: rotate(-45deg);
                    -ms-transform:rotate(-45deg);
                    -o-transform: rotate(-45deg);
                    -webkit-transform: rotate(-45deg);
                    transform: rotate(-45deg);
                    display: block;
                    width: 12px;
                    height: 12px;
                    content: "";
                    border: 2px solid #febb00;
                    border-width: 0px 0 2px 2px;
                    }

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
 
.vo2 h1 {padding: 0%;}
  
.vo2 {
       width: auto;
       height: auto;
       background: rgb(0,122,193); /* Old browsers */
       background: -moz-linear-gradient(45deg, rgb(0,122,193) 0%, rgb(0,122,193) 50%, rgb(0,0,0) 100%); /* FF3.6-15 */
       background: -webkit-linear-gradient(45deg, rgb(0,122,193) 0%,rgb(0,122,193) 50%,rgb(0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
       background: linear-gradient(45deg, rgb(0,122,193) 0%,rgb(0,122,193) 50%,rgb(0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007ac1', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
       padding: 3% 10% 5% 10%;
       display: flex;
       text-align: justify;
      }

.motcle p {
          padding:0%;
          text-align:center;
          color:#febb00;
          }

.imagevo2 {
           display: flex;
           align-items: center;
          }

.imagevo2 img {
              max-width: 400px;
              height: auto;
              padding-left:12%;
              }

/*.vo2imgfond {
            background-image: url(Images/A61Z8848-bleu.jpg);
            background-repeat: no-repeat;
            background-position: 50%;
            background-size:cover;
            background-attachment:fixed;
            background-color:white;
            width: 100%;
            height: 50%;
            }*/

.services {
           width: 100%;
           height: auto;
           display: flex;
           display: -webkit-box;
           display: -webkit-flex;
           display: -ms-flexbox;
           background: rgb(0,0,0); /* Old browsers */
           background: -moz-linear-gradient(top, rgb(0,0,0) 0%, rgb(0,122,193) 70%, rgb(0,122,193) 100%); /* FF3.6-15 */
           background: -webkit-linear-gradient(top, rgb(0,0,0) 0%,rgb(0,122,193) 70%,rgb(0,122,193) 100%); /* Chrome10-25,Safari5.1-6 */
           background: linear-gradient(to bottom, rgb(0,0,0) 0%,rgb(0,122,193) 70%,rgb(0,122,193) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
           filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#007ac1',GradientType=0 ); /* IE6-9 */
          }

.titreservices {visibility:hidden;}

.menuservices {
               /*width: 35%;*/
               margin:0% 9%;
               height: auto;
               display: -webkit-box;
               display: -webkit-flex;
               display: -ms-flexbox;
               display: flex;
               flex-direction:column;
               -webkit-flex-direction: column; /* Safari 6.1+ */
              }

.menuservices1 {
                padding : 3% 0% 4% 0%;
                /*z-index: 9999;*/
                list-style-type: none;
                position: -webkit-sticky;
                position: sticky;
                top:0;
                }

.menuservices1 ul {
                  position: relative;
                  padding-left: 100%;
                  }

.menuservices ul li {padding-bottom: 40px;}

.menuservices a {
                display: block;
                width: 12px;
                height: 12px;
                text-indent: -9999px;
                border-radius: 50%;
                border: 2px solid;
                border-color: #febb00;
                text-decoration: none;
                }

.menuservices a:hover {
                      border-radius: 50%;
                      background-color: #febb00;
                      text-decoration: none;
                      }

.menuservices a.active {
                       border-radius: 50%;
                       background-color: #febb00;
                       text-decoration: none;
                       }

.label {
       position: relative;
       top: -80%;
       left: -200%;
       width: 100%;
       text-align: right;
       font-size: 22px;
       color: white;
       }

#nosservices {
             width:100%;
             text-align: justify;
             padding: 0% 14% 1% 14%;
             background: rgba(0,0,0,1);
             background: -moz-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,122,193,1) 100%);
             background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(65%, rgba(0,0,0,1)), color-stop(100%, rgba(0,122,193,1)));
             background: -webkit-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,122,193,1) 100%);
             background: -o-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,122,193,1) 100%);
             background: -ms-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,122,193,1) 100%);
             background: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 65%, rgba(0,122,193,1) 100%);
             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#007ac1', GradientType=1 );
             }

#nosservices h2 {
                color:#febb00;
                padding:0px;
                }

#nosservices p {
                color:white;
                padding:0px;
               }

.par {padding: 8% 0%;}

.par2 {
      display: flex;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      justify-content:space-around;
      width: 100%;
      }

.imgpar {margin-right: 2%; width:210px; height:210px;}

.servicesimg {
             color: white;
             background-image: url(Images/EE-velo-chariot-metasys.jpg);
             background-repeat: no-repeat;
             background-size: cover;
             background-position: 50% 0px;
             background-attachment: fixed;
             background-color:black;
             height: 50%;
             padding:1%;
             }

.contact {
          width: auto;
          height: auto;
          background: rgb(0,122,193); /* Old browsers */
          background: -moz-linear-gradient(top, rgb(0,122,193) 0%, rgb(0,0,0) 100%); /* FF3.6-15 */
          background: -webkit-linear-gradient(top, rgb(0,122,193) 0%,rgb(0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
          background: linear-gradient(to bottom, rgb(0,122,193) 0%,rgb(0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007ac1', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
          padding: 0% 5%;
          display: flex;
          flex-direction: column;
          font-size: 20px;
          color: white;
         }


.textecontact {
              display: flex;
              justify-content: space-around;
              padding-top: 2%;
              color: white;
              }

.contact a {
           color: white;
           text-decoration:none;
           }

#elementscontact p {
                   font-size: 30px;
                   font-weight: bold;
                   }

    /*input et textarea*/
input:not([type="submit"]), textarea {
                                     display: block;
                                     width: 380px;
                                     padding: 4px 8px;
                                     border: 4px solid #fff;
                                     color: black;
                                     font-size: 13px;
                                     border-radius: 6px;
                                     -webkit-border-radius: 6px;
                                     -moz-border-radius: 6px;
                                     transition: background 0.2s linear, box-shadow 0.6s linear;
                                     -webkit-transition: background 0.2s linear, box-shadow 0.6s linear;
                                     -moz-transition: background 0.2s linear, box-shadow 0.6s linear;
                                     -o-transition: background 0.2s linear, box-shadow 0.6s linear;
                                     }

input:not([type="submit"]):focus, textarea:focus {
                                                 border: solid 4px #febb00;
                                                 color: #febb00;
                                                 }

input:not([type="submit"]) {height: 20px;}

    /* couleur pour les champs obligatoires*/
input:required, textarea:required {opacity: 0.6;}

    /*placeholder*/

input:-moz-placeholder, textarea:-moz-placeholder {
                                                  color: white;
                                                  font-style: italic;
                                                  }

textarea {
         min-height: 150px;
         resize: vertical;
         }

label {
      color: white;
      transition: color 1s ease;
      -webkit-transition: color 1s ease;
      -moz-transition: color 1s ease;
      }

label:hover {color: #febb00;}

.indication {
            color: grey;
            font-size: 12px;
            font-style: italic;
            }
			
.required {color: #febb00;}			

.indication-recaptcha {
					   display:none;
					   color: grey;
					   font-size: 12px;
					   font-style: italic;
					   margin-top: 0%;
					  }
			 
.indication-recaptcha a {color: grey;}

    /*bouton*/

input[type=submit] {
                    margin: auto;
                    cursor: pointer;
                    color: #febb00;
                    font-size:  18px;
                    padding: 10px 20px;
                    border: 2px solid #febb00;
                    background-color: transparent;
                    border-radius: 50px;
                    -moz-border-radius: 50px;
                    -webkit-border-radius: 50px;
                    transition: all 0.4s linear;
                    -webkit-transition: all 0.4s linear;
                    -moz-transition: all 0.4s linear;
                    -o-transition: all 0.4s linear;
                    }

input[type=submit]:hover {
                         color: #007ac1 ;
                         background: #feba00;
                         /*background-image: -webkit-linear-gradient(top, #feba00, #fed400);
                         background-image: -moz-linear-gradient(top, #feba00, #fed400);
                         background-image: -ms-linear-gradient(top, #feba00, #fed400);
                         background-image: -o-linear-gradient(top, #feba00, #fed400);
                         background-image: linear-gradient(to bottom, #feba00, #fed400);*/
                         /*box-shadow: 0px 0px 0px #000 inset, 0 0 0px 5px #febb00;
                         -moz-box-shadow: 0px 0px 0px #000 inset, 0 0 0px 5px #febb00;
                         -webkit-box-shadow: 0px 0px 0px #000 inset, 0 0 0px 5px #febb00;*/
                         }

/*PAGE REPONSE AUTOMATIQUE PHP */

#repauto {
         text-align:center;
         background-color:black;
         width:100%;
         height:100%;
         }

#repauto p {
            font-size:20px;
            padding: 15% 0%;
            color:white;
            margin:auto;
           }

#repauto a {
           font-size: 20px;
           color: white;
           }


/*PAGE NOTRE GAMME*/


.introergo {
            background-image: url(Images/ultron9.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 0% 60%;
            background-attachment: fixed;
            height:88%;
            width:auto;
            padding:3% 10% 0% 3%;
           }

.introergo h1 {
              font-size: 85px;
              text-align: left;
              padding:0px;
              }

.introergo p {
              font-size: 28px;
              color:#007ac1;
              opacity: 0;
              margin:1px 4px;
              animation: fadeInUp 1s ease-in-out 0s forwards;
              -webkit-animation: fadeInUp 1s ease-in-out 0s forwards;
              -moz-animation: fadeInUp 1s ease-in-out 0s forwards;
              -o-animation: fadeInUp 1s ease-in-out 0s forwards;
              }

.introergo2 {
             display: flex;
             flex-wrap: wrap;
            }

#nb {
    display: flex;
    flex-direction: column;
    margin: 8% 0% 0% 10%;
    }

#first {animation-delay: 0.5s;}
#second {animation-delay: 1.2s;}
#third {animation-delay: 2s;}
#fourth {animation-delay: 2.8s;}
#fifth {animation-delay: 3.5s;}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.metasys {
         width: 100%;
         height: auto;
         float: left;
         text-align: justify;
         padding: 20px 0px 70px 0px;
          /* ANCIEN DEGRADE
         background: linear-gradient(223deg, #00c69c, #0057d0);
         background-size: 400% 400%;
         -webkit-animation: AnimationName 11s ease infinite;
         -moz-animation: AnimationName 11s ease infinite;
         -o-animation: AnimationName 11s ease infinite;
         animation: AnimationName 11s ease infinite;
         */
         background: linear-gradient(224deg, #febb00, #007ac1, #0057d0);
         background-size: 300% 300%;
         -webkit-animation: metasys 30s ease infinite;
         -moz-animation: metasys 30s ease infinite;
         -o-animation: metasys 30s ease infinite;
         animation: metasys 30s ease infinite;
         }

.presentationmetasys {padding: 0% 22%;}

.metasysabm {
            display: flex;
            justify-content:space-between;
            padding: 20px 40px;
            height:auto;
            }

.metaaa {
        /*background-color:rgba(0, 0, 0, 0.1);*/
        width:100%;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        padding:0px 20px 20px 20px;
        margin:20px 30px;
        -webkit-box-shadow: 11px 14px 20px 1px rgba(0,0,0,0.47);
        -moz-box-shadow: 11px 14px 20px 1px rgba(0,0,0,0.47);
        box-shadow: 11px 14px 20px 1px rgba(0,0,0,0.47);
        }

/*.metaaa:hover {
              -webkit-transform: translateY(-0.25em);
              transform: translateY(-0.25em);
              opacity:0.8;
              transition-delay:1s;
              }*/

    /* ANCIEN DEGRADE

        @-webkit-keyframes AnimationName {
        0% {
            background-position: 0% 65%;
        }

        50% {
            background-position: 100% 36%;
        }

        100% {
            background-position: 0% 65%;
        }
    }

    @-moz-keyframes AnimationName {
        0% {
            background-position: 0% 65%;
        }

        50% {
            background-position: 100% 36%;
        }

        100% {
            background-position: 0% 65%;
        }
    }

    @-o-keyframes AnimationName {
        0% {
            background-position: 0% 65%;
        }

        50% {
            background-position: 100% 36%;
        }

        100% {
            background-position: 0% 65%;
        }
    }

    @keyframes AnimationName {
        0% {
            background-position: 0% 65%;
        }

        50% {
            background-position: 100% 36%;
        }

        100% {
            background-position: 0% 65%;
        }
    }

    @keyframes anim-demo {
        to {
            -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
        }
        
       */
     
@-webkit-keyframes metasys {
    0%{background-position:88% 0%}
    50%{background-position:13% 100%}
    100%{background-position:88% 0%}
}
@-moz-keyframes metasys {
    0%{background-position:88% 0%}
    50%{background-position:13% 100%}
    100%{background-position:88% 0%}
}
@-o-keyframes metasys {
    0%{background-position:88% 0%}
    50%{background-position:13% 100%}
    100%{background-position:88% 0%}
}
@keyframes metasys {
    0%{background-position:88% 0%}
    50%{background-position:13% 100%}
    100%{background-position:88% 0%}
}
    
    /* La ligne du dessus c'est pour le dégradé de couleur sur metasys*/

#tra { height: 100%; }

#trb { height: 100%; }

#trm { height: 100%; }

.gallerie {
           width: auto;
           height: auto;
           background-color:black;
          }
     
 /*.previous {
             background-color: yellow;
             color: white;
             border-radius:50%;
             height:30px;
             width:30px;
             }

.next {
    background-color: yellow;
    color: white;
    height:30px;
    width:30px;
    border-radius:50%;
    }

.previous :hover {
    background-color: #ddd;
    color: black;
}*/

.row {
     display: -ms-flexbox; /* IE10 */
     display: flex;
     -ms-flex-wrap: wrap; /* IE10 */
     flex-wrap: wrap;
     padding: 0 2px;
     margin:auto;
     }
    
    /* Create four equal columns that floats next to each other */
.column {
        -ms-flex: 16%; /* IE10 */
        flex: 16%;
        max-width: 16%;
        padding: 0 2px;
        }

.column img {
            margin-top: 2px;
            vertical-align: middle;
            }

.active, .column img:hover {opacity: 1;}

    /* Clear floats after the columns */
.row:after {
            content: "";
            display: table;
            clear: both;
           }

    /* Responsive layout - makes a two column-layout instead of four columns */
    @media (max-width: 1024px) {
        .column {
        -ms-flex: 32%;
        flex: 32%;
        max-width: 32%;
        }
    }

    /* Responsive layout - makes a two column-layout instead of four columns */
    @media (max-width: 800px) {
        .column {
        /*-ms-flex: 48%;
        flex: 48%;*/
        max-width: 48%;
        }
    }

    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media (max-width: 500px) {
        .column {
        /*-ms-flex: 100%;
        flex: 100%;*/
        max-width: 100%;
        }
    }

 
/* The Modal (background) */
.modal {
       display: none;
       position: fixed;
       z-index: 1;
       padding-top: 20px;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       overflow: auto;
       background-color: rgba(0, 0, 0, 0.9);
       }

/* Modal Content */
.modal-content {
               position: relative;
               background-color: rgba(0, 0, 0, 0.9);
               margin: auto;
               width: 100%;
               height:100%;
               max-width: 1000px;
               color:white;
               }

/* The Close Button */
.close {
       color: white;
       position: absolute;
       top: 0px;
       right: 15px;
       font-size: 35px;
       font-weight: bold;
       }

.close:hover,
.close:focus {
              color: #007ac1;
              text-decoration: none;
              cursor: pointer;
              }

.mySlides {display: none;}

.cursor {cursor: pointer}

/* Next & previous buttons */
.prev,
.next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
      }

/* Position the "next button" to the right */
.next {
      right: 0;
      border-radius: 3px 0 0 3px;
      }

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {background-color: rgba(0, 0, 0, 0.8);}

img.hover-shadow {transition: 0.3s}

.hover-shadow:hover {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)}

.caract {
        width: auto;
        height: auto;
        background-color:black;
        text-align: center;
        display: flex;
        flex-direction:column;
        }

#caracteristiques {
                  max-width:1350px;
                  height:auto;
                  margin:auto;
                  }

/* Button used to open the download brochure form -  */


.open-button {
             background-image: linear-gradient(to right, #fdbf00 0%, #33b4ff 51%, #fdbf00 100%);
             -moz-background-image: linear-gradient(to right, #fdbf00 0%, #33b4ff 51%, #fdbf00 100%);
             -webkit-background-image: linear-gradient(to right, #fdbf00 0%, #33b4ff 51%, #fdbf00 100%);
             -o-background-image: linear-gradient(to right, #fdbf00 0%, #33b4ff 51%, #fdbf00 100%);
             flex: 1 1 auto;
             margin: 5% 32% 7% 32%;
             padding: 20px;
             text-align: center;
             text-transform: uppercase;
             transition: 0.5s;
             background-size: 200% auto;
             color: white;
             font-size:15px;
             font-weight:bold;
             box-shadow: 0 0 10px #f6d365;
             border-radius: 10px;
             -moz-border-radius: 10px;
             -webkit-border-radius: 10px;
             border:hidden;
             cursor:pointer;
             }

.open-button:hover { background-position: right center; /* change the direction of the change here */ }

/*.open-button {
             cursor: pointer;
             color: #febb00;
             font-size:  18px;
             padding: 10px 20px;
             border: 2px solid #febb00;
             background-color: transparent;
             border-radius: 50px;
             -moz-border-radius: 50px;
             -webkit-border-radius: 50px;
             transition: all 0.4s linear;
             -webkit-transition: all 0.4s linear;
             -moz-transition: all 0.4s linear;
             -o-transition: all 0.4s linear;
             margin: 5% auto 3% auto;
             width: 300px;
             }

.open-button:hover {
                   color: #007ac1;
                   background: #feba00;
                   }*/

/* The popup form - hidden by default */

.form-popup {
            display: none;
            z-index: 9;
            }

.form-container { 
                 margin: 0% 30% 2% 30%;
                 padding: 3% 2%;
                 border: 3px solid #feba00;
                 border-radius: 30px;
                 display:flex;
                 flex-direction:column;
                }

.form-container label {text-align:left;}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=submit], .form-container input[type=email] {
            width: 90%;
            padding: 15px;
            margin: 5px 0 22px 0;
            border: none;
            background: #f1f1f1;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            }

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=submit]:focus {
             background-color: #ddd;
             outline: none;
             border-radius: 10px;
             -moz-border-radius: 10px;
             -webkit-border-radius: 10px;
             }

/* Set a style for the submit/login button */

.btn-cancel {
            border: none;
            opacity: 0.8;
            margin:2% auto 0% auto;
            box-shadow:2px 0px 27px 4px #febb00;
	        color:#febb00;
            background-color: transparent;
            -moz-border-radius: 42px;
            -webkit-border-radius: 42px;
            border-radius: 42px;
            cursor: pointer;
            height: 48px;
            width: 48px;
            top: calc(45% - 8px);
            }

.btn-cancel:hover {opacity: 1;}

.btn-dl {
        background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
        -moz-background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
        -webkit-background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
        -o-background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
        flex: 1 1 auto;
        margin: 10px 18%;
        padding: 20px;
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        /*box-shadow: 0 0 20px #f6d365;*/
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border:hidden;
        cursor:pointer;
        }

.btn-dl:hover { background-position: right center; /* change the direction of the change here */ }

/* Page PHP btn télécharger la brochure #dlbrochure */

#dlbrochure {
            /*position: relative;*/
            text-decoration: none;
            cursor: pointer;
            margin: 3% 6%;
            color: #febb00;
            font-size:  20px;
            padding: 10px 20px;
            border: 2px solid #febb00;
            background-color: transparent;
            border-radius: 50px;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            transition: all 0.4s linear;
            -webkit-transition: all 0.4s linear;
            -moz-transition: all 0.4s linear;
            -o-transition: all 0.4s linear;
            }

#dlbrochure:hover {
                  color: #007ac1;
                  background: #feba00;
                  }
/* Fin Page PHP btn télécharger la brochure #dlbrochure */


.anim-fadein {
             animation: fadein 2.5s;
             -moz-animation: fadein 2.5s; /* Firefox */
             -webkit-animation: fadein 2.5s; /* Safari et Chrome */
             -o-animation: fadein 2.5s; /* Opera */
             }

    @keyframes fadein {
        from { opacity: 0; }
        to { opacity: 1; }
        }

    @-moz-keyframes fadein { /* sur Firefox */
        from { opacity: 0; }
        to { opacity: 1; }
        }

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

    @-o-keyframes fadein { /* sur Opera */
        from { opacity: 0; }
        to { opacity: 1; }
        }

.advantages {
            width:auto;
            height:auto;
            background-color:grey;
            padding:1% 5%;
            }

.personnalisation {background-color:aliceblue;}

.cardio {
        width: auto;
        height: auto;
        background-color: #1E8BC3;
        padding: 2% 10% 0% 10%;
        margin-top: 0px;
        display: flex;
        flex-direction:column;
        text-align: justify;
        }

.cardio2 {display: flex;}

.cardio2 a {color : white;}

.echocardiaque {
               width: auto;
               height: auto;
               background-color: #1E8BC3;
               /*float: left;*/
               padding: 5% 10% 2% 10%;
               margin-top: 0px;
               display: flex;
               text-align: justify;
               }

.cardio img {
            max-width:600px;
            padding-right: 100px;
            }

.echocardiaque img {
                    max-width:400px;
                    padding-left: 150px;
                    }

.contactimg {
            color: white;
            background-image: url(Images/A61Z8807copie.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 50% 0px;
            background-attachment: fixed;
            padding:5% 20% 0% 5%;
            height:50%;
            }

/*PAGE ENTREPRISE*/


.intro-entreprise {
                 padding:2% 0%;
                 background-image: url(Images/bg-intro-entreprise.png);
                 background-repeat: no-repeat;
                 background-size: cover;
                 background-position:50% 0px;
                 background-color:black;
                 height:100%;
                 width:auto;
                 display:flex;
                 align-items:center;
                 }
    .intro-entreprise img {
        display: none;
    }
.titre-intro-entreprise {margin: 0% 0% 0% 25%;}

.titre-intro-entreprise H1 {
                            color:#007ac1;
                            font-size:65px;
                            margin:0%;
                            text-align:left;
                            }

.texte-intro-entreprise {margin:5% 15% 0% 2%;}

.texte-intro-entreprise h1 {
                            text-align: left;
                            padding-top: 0px;
                            color: white;
                            border-left-style: solid;
                            border-color:#007ac1;
                            padding-left:5%;
                            margin:0%;
                           }

.texte-intro-entreprise p {
                          color: white;
                          text-align:justify;
                          line-height:35px;
                          border-left-style: solid;
                          border-color:#007ac1;
                          padding-left:5%;
                          margin:0%;
                          }

.valeurs {
         width: auto;
         height: auto;
         padding: 8% 0%;
         text-align: justify;
         background-color:black;
         background: rgb(0,0,0); /* Old browsers */
         background: -moz-linear-gradient(top, rgb(0,0,0) 0%, rgb(0,122,193) 70%, rgb(0,122,193) 100%); /* FF3.6-15 */
         background: -webkit-linear-gradient(top, rgb(0,0,0) 0%,rgb(0,122,193) 70%,rgb(0,122,193) 100%); /* Chrome10-25,Safari5.1-6 */
         background: linear-gradient(to bottom, rgb(0,0,0) 0%,rgb(0,122,193) 70%,rgb(0,122,193) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#007ac1',GradientType=0 ); /* IE6-9 */
         }

.valeurs h2 {padding: 20px 80px;}

.valeurs p {padding: 0px 80px;}

.column2 {
         float: left;
         width: 50%;
         }

    /* Clear floats after the columns */
.row2:after {
            content: "";
            display: table;
            clear: both;
            }

.carte {
        height:auto;
        background-image: url(Images/Europe-Clients.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 100% 0px;
        background-attachment: fixed;
        float:left;
        }

.carte h1 {color: #109fd3;}

#photoclients {width: 50%;}

#photoclients img {padding: 25px;width:160px;}


/* PAGE EPREUVE D'EFFORT */

.introepreuveeffort {
                    padding: 2% 0%;
                    background-color: black;
                    height: auto;
                    width: auto;
                    }

.efc {
      display: flex;
      align-items:center;
      margin:5% 5% 0% 5%;
     }

.efc h2 {color:#7fc8f2;}

.epreuveeffort {
               text-align:justify;
               padding:2%;
               border-radius: 20px 20px 20px 20px;
               -moz-border-radius: 20px 20px 20px 20px;
               -webkit-border-radius: 20px 20px 20px 20px;
               border: 10px inset #0091e6;
               width:45%;
               height:max-content;
               }

.epreuveeffort:hover {
                      border: 10px inset #00e66b;
                      transition: all 0.4s linear;
                      -webkit-transition: all 0.4s linear;
                      -moz-transition: all 0.4s linear;
                      -o-transition: all 0.4s linear;
                      }

.epreuveeffort h3 {
                  text-decoration:underline;
                  margin-top:3%;
                  padding: 0%;
                  color: #7fc8f2;
                  }

.epreuveeffort p {
                 margin-bottom: 1%;
                 padding: 0%;
                 }

.explication {
             width: 55%;
             margin-left:10%;
             text-align:justify;
             }

.programmerea {
              padding: 2% 0%;
              background-color: black;
              height: auto;
              width: 100%;
              display:flex;
              flex-direction:column;
              text-align: justify;
              }

.programmerea h3 {color: #7fc8f2;}

.programmerea p {
                color: white;
                margin:0%;
                }

.prc {padding: 0% 7% 3% 5%;}

.prc h1 {padding-bottom: 7%;}

.prc img {
          max-width:600px;
          float:left;
          padding-right:3%;
          margin-top:-6%;
         }

.prc2 img {
           max-width:600px;
           float:right;
           padding-left:3%;
           margin-top:-5%;
           
          }

.prc2 {padding: 0% 5% 5% 5%;}

/*.prc h3 {padding-right:40%;}
.prc p {padding-right:40%;}*/


/* PAGE PUBLICATIONS SCIENTIFIQUES ET NEWS */


/*.logo img {
          display: block;
          margin-left: auto;
          margin-right: auto;
          padding-top:8%;
          width:40%;
          }*/

.publications {
              background-image: url(Images/bg-pubsci.png);
              background-size: contain;
              background-color:black;
              width:auto;
              height:auto;
              padding:5% 0%;
              }

.publications h2 {
                 font-style:normal;
                 font-size:22px;
                 }

.publications a {color:#febb00;}

.publications p {
                 font-size:16px;
                 color:#3ab6ff
                }

.articles {
           margin: 5% 15%;
           display: flex;
           flex-wrap: wrap;
          }

.article {
         transition:all 0.5s;
         border: outset #0091e6 2px;
         border-radius:10px;
         -webkit-border-radius:10px;
         margin:1% 0%;
         padding : 1% 2%;
         width:100%;
         height:auto;
         background-color:#002b4f;
         }

.publications label {
                    background:#0091e6;
                    box-shadow: 0 1px 3px #0087ca, 0 1px 2px #0087ca;
                    padding:1% 2%;
                    margin:0% 1% 5% 1%;
                    -moz-border-radius: 32px;
                    -webkit-border-radius: 32px;
                    border-radius: 32px;
                    cursor:pointer;
                    color:white;
                    }

input[type="radio"] {display:none;}

input[type="radio"][id="BRN"]:checked + label {background:black;}

input[type="radio"][id="BRN"]:checked ~ .useful, input[type="radio"][id="BRN"]:checked ~ .green {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

input[type="radio"][id="useful"]:checked + label { background:black; }

input[type="radio"][id="useful"]:checked ~ .BRN, input[type="radio"][id="useful"]:checked ~ .green {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

input[type="radio"][id="green"]:checked + label {background:black;}

input[type="radio"][id="green"]:checked ~ .BRN, input[type="radio"][id="green"]:checked ~ .useful {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}


/*News

.selection {padding:1%;}*/

/*input[type="radio"][id="blue"]:checked + label {background:black;}

input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

input[type="radio"][id="red"]:checked + label { background:black; }

input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

input[type="radio"][id="green"]:checked + label {background:black;}

input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}*/



/*PAGE LOGIN*/

/*FIN PAGE LOGIN*/



/* Return on top */

#returnOnTop {
             background-color: transparent;
             -moz-border-radius: 42px;
             -webkit-border-radius: 42px;
             border-radius: 42px;
             border-color:orange;
             color: #febb00;
             bottom: 9%;
             cursor: pointer;
             display: none;
             /*filter: alpha(opacity = 50);*/  /*IE < 8*/ 
             height: 48px;
             opacity: 0.6;
             position: fixed;
             z-index: 1;
             right: 1%;
             width: 48px;
             }

#returnOnTop:hover {filter: alpha(opacity = 100); opacity: 1;}

 /* FOOTER */

.footer {
        width: auto;
        height: auto;
        padding: 1% 0%;
        background-color: black;
        color: white;
        font-size: 14px;
        display: flex;
        justify-content: space-around;
        }

footer h3 {
          font-weight: bolder;
          text-align: center;
          padding: 10px 0px 0px 0px;
          font-size: 17px;
          text-decoration: underline;
          }

.footer ul, p {
              font-size: 13px;
              list-style-type: none;
              }

footer li a:hover {
                  text-decoration: underline;
                  color: white;
                  }

footer a {
         color: white;
         text-decoration: none;
         }

#contact li {padding: 1% 0%;}

.copyright {
            background-color: black;
            color:white;
            font-size:13px;
            text-align:center;
            padding-bottom:1%;
           }

.mentionslegales {
                 background-color:black;
                 width:auto;
                 height:auto;
                 padding:14%;
                 font-size:10px;
                 }

.ml2 {
     border-width:10px;
     border-style:inset;
     border-color:#0091e6;
     padding:4%;
     font-size: 13px;
     position:relative;
     }

.ml2 h2 {
        color:#0091e6;
        font-size:35px;
        text-align:center;
        font-style:normal;
        margin-bottom: 8%;
        }

.ml2 h3 {
        color:#febb00;
        font-size:18px;
        }

.ml2 p {font-size:16px;}

.ml2 a {color:white;}

@media screen and (max-width: 1224px) {

/* Page Accueil */

.logoBRN img {
              margin-top:10%;
              margin-left:3%;
             }

.introduction p {
                 margin-top: 5%;
                 margin-right: 30%;
                }
    
#nosservices {padding: 0% 8% 1% 8%;}

#elementscontact {padding : 0% 4%;}


#I1 {width:350px; height: 300px;} /* carte google maps */

/* Page Notre Gamme */

.introergo {
            padding: 3% 1%;
            background-position: 80% 60%;
           } 

.introergo h1 {
               font-size: 80px;
               padding-left: 2%;
              }

.introergo p {font-size: 26px;}

.presentationmetasys {padding: 0% 10%;}

.metasysabm {
            display: flex;
            flex-direction: column;
            padding: 5% 10%;
            }

.metaaa {
         width: 90%;
         padding: 0% 5% 5% 5%;
         margin: 20px 30px 25px 0px;
        }

#caracteristiques {
                   max-width: 870px;
                   margin: auto;
                  }

.cardio {padding: 20px 40px 5px 30px;}

.cardio2 img {
              max-width: 450px;
              padding-right:15px;
             }

.echocardiaque {
               padding: 20px 40px 5px 40px;
               margin-top: 0px;
               }

.echocardiaque img {
                    max-width: 350px;
                    margin-bottom: 5%;
                    margin-left:2%;
                    padding:0px;
                    }

/* Page Entreprise */

.intro-entreprise {background-position: 20% 0%;}

.titre-intro-entreprise H1 {font-size: 60px;}

.titre-intro-entreprise {margin: 0% 0% 0% 12%;}

.texte-intro-entreprise {margin: 8% 12% 0% 2%;}

.valeurs p {padding: 0px 60px;}

#photoclients {width: 55%;}

/* Page Epreuve d'Effort */

.explication {margin-left: 7%;}
    
.prc {padding: 0% 5% 3% 5%;}

.prc img {max-width: 520px;}

.prc2 img {max-width: 520px;}

}

@media screen and (max-width: 1024px) and (orientation: portrait) {

section h1 {
           padding: 20px 0px 10px 0px;
           font-size: 35px;
           }

section p {
          padding: 0px 0px;
          font-size: 20px;
          }

section h2 {font-size: 25px;}

/* PAGE ACCUEIL */

.introduction {background-position: 75%;}

.logoBRN img {
              max-width:75%;
              margin-top:15%;
             }

.introduction p {
                font-size: 25px;
                margin: 15% 35% 0% 2%;
                background: rgb(4,4,4);
                background: -moz-linear-gradient(50deg, rgba(4,4,4,0) 30%, rgba(0,0,0,0.8463586118040967) 85%);
                background: -webkit-linear-gradient(50deg, rgba(4,4,4,0) 30%, rgba(0,0,0,0.8463586118040967) 85%);
                background: linear-gradient(50deg, rgba(4,4,4,0) 30%, rgba(0,0,0,0.8463586118040967) 85%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#040404",endColorstr="#000000",GradientType=1); 
                }

.vo2 {padding: 4% 1% 4% 3% ;}

.imagevo2 {
           margin:auto;
           padding: 0% 5% 0% 0%;
          }

.menuservices {margin: 0% 13%;}

#nosservices {padding: 5%;}

.label {font-size: 20px;}

.par {padding: 25px 20px;}

.par2 {
      display: flex;
      flex-direction: column;
      }

.servicesimg {background-position: 18%;}

.contact {
         padding: 15px;
         display: flex;
         justify-content: space-around;
         font-size: 15px;
         }

#elementscontact p {font-size: 25px;}

   /*input et textarea*/
input:not([type="submit"]), textarea {font-size: 14px;}

    /*bouton*/
input[type=submit] {
                    margin-left: 10px;
                    margin-bottom: 2%;
                   }

#map {display: none; }

/* PAGE NOTRE GAMME */

.introergo {
            background-image:url(Images/bg-phone-meta.png);
            background-position : 85% 60%;
            height:80%;
           }

.introergo h1 {
               font-size: 80px;
               padding-left: 3%;
              }

.introergo p {font-size: 25px;}

#nb {margin: 8% 0% 0% 8%;}

.presentationmetasys {padding: 0% 5%;}

.metasysabm {
             display: flex;
             flex-direction: column;
             padding: 5% 10%;
            }

.metaaa {
         width:90%;
         padding: 0% 5% 5% 5%;
         margin: 20px 30px 25px 0px;
        }

.modal-content {margin-top: 4%;}

/*.modal-content img {max-width: 90%;
                    max-height:90%;
                    margin:auto;
}*/

#caracteristiques {
                   max-width: 840px;
                   margin:auto;
                  }

.cardio {padding: 0% 4%;}

.cardio2 {display: flex;}

.echocardiaque {padding: 0% 4%;}

.cardio img {
             max-width: 455px;
             height: auto;
             padding-right: 3%;
            }

.echocardiaque img {
                    max-width: 340px;
                    height: auto;
                    padding-left: 3%;
                    }

.contactimg {background-position: 80%;}

/* PAGE EPREUVE EFFORT */

.introepreuveeffort {padding: 5% 0% 0% 0%;}

.efc {
     display: flex;
     flex-direction: column;
     margin: 5% 0% 0% 0%;
     }

.epreuveeffort {
               margin:0% 10%;
               width:auto;
               border: 8px inset #0091e6;
               }

.epreuveeffort:hover {border: 8px inset #00e66b;}

.explication {
             width:auto;
             padding: 5% 5% 0% 5%;
             margin-left: 0%;
             }

.prc { padding: 0% 5% 3% 5%;}

.prc2 { padding: 0% 5% 3% 5%;}

.prc img {max-width: 450px;}

.prc2 img {max-width: 450px;}

 
/* PAGE ENTREPRISE */
        			
.intro-entreprise {background-position: 10% 0%;}

.titre-intro-entreprise {margin: 0% 0% 0% 5%;}

.texte-intro-entreprise {margin: 5% 5% 0% 2%;}

.valeurs h2 {padding: 2% 8%;}

.valeurs p {padding: 0% 8% 2% 8%;}

#photoclients {width:100%;}

#photoclients img {width:140px;}

.carte H1 {
          margin-left:20%;
          margin-right:20%;
          background: rgb(255,255,255);
          background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 2%, rgba(255,255,255,0.7959384437368697) 50%, rgba(255,255,255,0) 98%);
          background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 2%, rgba(255,255,255,0.7959384437368697) 50%, rgba(255,255,255,0) 98%);
          background: linear-gradient(90deg, rgba(255,255,255,0) 2%, rgba(255,255,255,0.7959384437368697) 50%, rgba(255,255,255,0) 98%);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
          }			
		}

@media screen and (max-width: 1024px) and (orientation: landscape) {

section h1 {
            padding: 20px 0px 10px 0px;
            font-size: 35px;
           }

section h2 {font-size: 30px;}

section p {
           padding: 0px 0px;
           font-size: 20px;
          }

/* Page accueil */

.introduction {background-position: 75%;}

.logoBRN img {
              max-width:80%;
              margin-top:10%;
              margin-left:2%
             }

.introduction p {
                 margin-top:8%;
                 margin-left:3%;
                 font-size: 25px;
                 background: rgb(4,4,4);
                 background: -moz-linear-gradient(50deg, rgba(4,4,4,0) 30%, rgba(0,0,0,0.8463586118040967) 85%);
                 background: -webkit-linear-gradient(50deg, rgba(4,4,4,0) 30%, rgba(0,0,0,0.8463586118040967) 85%);
                 background: linear-gradient(50deg, rgba(4,4,4,0) 30%, rgba(0,0,0,0.8463586118040967) 85%);
                 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#040404",endColorstr="#000000",GradientType=1);
                }

.vo2 {padding: 5% 0% 5% 5% ;}

.imagevo2 {
           margin:auto;
           padding: 0% 5% 0% 0%;
          }

.menuservices {margin: 0% 12%;}

#nosservices {padding: 0% 5% 3% 5%;}

.label {font-size: 20px;}
                
.textecontact {
               display:flex; 
               flex-wrap:wrap;
              }

 /* PAGE NOTRE GAMME */

.introergo {background-position: 85%;}

.introergo h1 {
               font-size:72px;
               padding-left:5%;
              }

.introergo p {font-size:25px;}

.presentationmetasys {padding: 0% 4%;}

.metasysabm {
            display: flex;
            flex-direction: column;
            padding: 5% 8%;
            }

.metaaa {
         width: 90%;
         padding: 0% 5% 5% 5%;
         margin: 20px 30px 25px 0px;
        }

#caracteristiques {
                   max-width: 800px;
                   margin: auto;
                  }

.modal-content {margin-top: 4%;}

.open-button {margin: 6% 26% 7% 26%;}

.cardio {padding: 20px 20px 0px 20px;}

.cardio2 img {
              max-width: 450px;
              padding-right:10px;
             }

.echocardiaque {
               padding: 0px 20px;
               margin-top: 0px;
               }

.echocardiaque img {
                    max-width: 350px;
                    margin-bottom: 5%;
                    padding:0px;
                    }

.contactimg {background-position: 65%;}

/* PAGE ENTREPRISE */

.intro-entreprise {background-position: 20% 0%;}

.titre-intro-entreprise {margin: 0% 0% 0% 10%;}

.texte-intro-entreprise {margin: 15% 10% 0% 2%;}

.valeurs h2 {padding: 2% 8%;}

.valeurs p {padding: 0% 8% 2% 8%;}

.carte {background-position:120% 0%;}

#photoclients {width: 60%;}

#photoclients img {
                   padding: 20px;
                   width: 150px;
                  }

/* PAGE EPREUVE EFFORT */

.introepreuveeffort {padding: 5% 0% 0% 0%;}

.efc {
     display: flex;
     flex-direction: column;
     margin: 5% 0% 0% 0%;
     }

.epreuveeffort {
               margin:0% 4%;
               width:50%;
               border-radius: 20px 20px 20px 20px;
               -moz-border-radius: 20px 20px 20px 20px;
               -webkit-border-radius: 20px 20px 20px 20px;
               border: 5px inset #0091e6;
               }

.epreuveeffort:hover {border: 5px inset #00e66b;}

.explication {
             width:auto;
             padding: 5% 5% 0% 5%;
             margin-left:0%;
             }

.prc {padding: 0% 5% 3% 5% ;}

.prc2 {padding: 0% 5% 3% 5% ;}

.prc img {
          max-width: 480px;
          padding-right:1%;
          margin-top: -4%;
         }

.prc2 img {
           max-width: 480px;
           padding-left:1%;
           margin-top: -3%;
          }

}

@media screen and (max-width: 834px) and (orientation: portrait) {

.topnav {position:absolute;}

/* PAGE ACCUEIL */

.introduction {background-position: 75%;}

.logoBRN img {
              max-width:90%;
              margin-top:16%;
              margin-left:2%;
             }

.introduction p {
                 margin-top:10%;
                 margin-left:3%;
                 background: rgb(4,4,4);
                 background: -moz-linear-gradient(50deg, rgba(4,4,4,0) 35%, rgba(0,0,0,0.798739564185049) 80%);
                 background: -webkit-linear-gradient(50deg, rgba(4,4,4,0) 35%, rgba(0,0,0,0.798739564185049) 80%);
                 background: linear-gradient(50deg, rgba(4,4,4,0) 35%, rgba(0,0,0,0.798739564185049) 80%);
                 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#040404",endColorstr="#000000",GradientType=1);
                }

.vo2 {
	  padding:2% 3%; 
      display:flex;
      flex-direction:column;
	  }

.imagevo2 {padding: 0%;}

.imagevo2 img {
               margin: auto;
               padding-left:0%;
               }

#elementscontact p {font-size: 25px;}

.titreservices {padding: 0%;}
    
/* PAGE NOTRE GAMME */

.introergo {background-position: 50% 60%;}

.introergo h1  { 
                margin: 9% 3% 5% 3%;
                padding: 0px;
			    font-size:70px;
               }

#nb {margin: 18% 0% 0% 0%;}

#caracteristiques {
                   max-width: 700px;
                   margin: auto;
                  }

#dlbrochure {margin: 2% 25%;}

.cardio2 {
         display: flex;
         flex-direction: column-reverse;
         align-items:center;
         }

.cardio {padding:0% 4%;}

.cardio img {max-width: 400px;}

.echocardiaque {       
                padding: 0% 4% 2% 4%;
                display:flex;
                flex-direction:column;
                align-items:center;
               }

.contactimg {background-position: 80%;}

/* PAGE EPREUVE EFFORT */

.introepreuveeffort {padding: 6% 0% 0% 0%;}

.efc {
     display: flex;
     flex-direction: column;
     }

.epreuveeffort {
               margin: 0% 11%;
               padding:3%;
               border: 4px inset #0091e6;
               width:auto;
               }

.epreuveeffort:hover {border: 4px inset #00e66b;}

.explication {
             width: auto;
             padding: 5% 5% 5% 5%;
             margin-left: 0%;
             }

.programmerea {width:auto;}

.prc {padding: 0% 5% 3% 5%;}

.prc2 {padding: 0% 5% 5% 5%;}

.prc img {
          max-width: 450px;
          padding-right:0%;
          margin-top:-4%;
         }

.prc2 img {
           max-width: 450px;
           padding-left:0%;
           margin-top:-2%;
          }

/* PAGE ENTREPRISE */

.titre-intro-entreprise H1 {font-size: 52px;}

#map {display:none;}

.footer {display:none;}

}

@media screen and (max-width: 896px) and (orientation: landscape) { 

.topnav {position: absolute;}

section h1 {
            padding: 20px 0px 10px 0px;
            font-size: 30px;
           }

section p {
           padding: 0px 0px;
           font-size: 17px;
          }

section h2 {font-size: 20px;}

#returnOnTop {bottom: 1%;}


    /* Page accueil */

.introduction {height: auto;}

.logoBRN img {
              max-width:70%;
              margin-top:10%;
              margin-left:2%;
             }

.introduction p {
                font-size: 20px;
                margin: 15% 5% 5% 2%;
                padding: 0%;
                background-color:rgba(0, 0, 0, 0.5);
                }

.scroll-down {display: none;}

.vo2 {
      padding: 0% 3%;
      display: flex;
      flex-direction: column;
     }

.vo2 h1 {padding-top: 2%;}

.imagevo2 {
           margin: auto;
           padding: 0% 0% 5% 0%;
          }

.imagevo2 img {padding: 0px;}

.titreservices {visibility: hidden;}

.menuservices1 h1 {padding: 0%;}

.menuservices ul li {
                     padding-bottom: 30px;
                     padding-left: 95%;
                    }

.menuservices a {
                 border: 0px;
                 width: 0px;
                 height: 0px;
                }

.label {font-size: 19px;}

#nosservices {
              text-align: justify;
              padding: 5%;
             }

.par {padding: 25px 20px;}

.par2 {
       display: flex;
       flex-direction: column;
      }

img.imgpar {margin: auto;}

.servicesimg {height: 60%;}

.contact {
          padding: 10px;
          font-size: 15px;
         }

.textecontact {padding: 15px;}

#elementscontact p {font-size: 20px;}

/*input et textarea*/
input:not([type="submit"]), textarea {
                                      width: 270px;
                                      font-size:12px;
	                                 }

/*bouton*/ 
input[type=submit] {
	                margin:5% 0% 5% 1%;
					margin-left: 20px;
					}

.indication {margin-bottom: 1%;}

.grecaptcha-badge { visibility: hidden; }

.indication-recaptcha {
					   display: block;
					   width:300px;
					  }
					  
#map {display: none;}


/* PAGE NOTRE GAMME */

.introergo {
            background-position: 85%;
            height:100%;
           }

.introergo h1 {
               font-size: 40px;
               padding-top:2%;
              }

.introergo p {font-size: 18px;}

.presentationmetasys {padding: 0% 3%;}

.metasysabm {
            display: flex;
            flex-direction: column;
            padding: 3% 3%;
            }

.metaaa {
         width: 90%;
         padding: 0px 15px 20px 15px;
         margin: 5% 5% 2% 3%;
        }

.modal-content {
                margin-top: 4%;
                max-width: 80%;
               }

#caracteristiques {
                   max-width: 565px;
                   margin: auto;
                  }

.open-button {
              margin: 6% 22% 7% 22%;
              padding: 15px;
             }


.cardio {padding: 20px 20px 0px 20px;}

.cardio2 {
         display: flex;
         flex-direction: column-reverse;
         align-items:center;
         }

.echocardiaque {
               display:flex;
               flex-direction:column;
               align-items:center;
               padding: 0px 20px;
               margin-top: 0px;
               }

.cardio2 img {
              max-width: 330px;
              padding:0px;
             }

.echocardiaque img {
                    max-width: 250px;
                    margin-bottom: 5%;
                    padding:0px;
                    }

/* PAGE EPREUVE EFFORT*/

.introepreuveeffort {padding: 7% 0% 2% 0%;}

.efc {
     display: flex;
     flex-direction: column;
     margin: 5% 0% 0% 0%;
     }

.epreuveeffort {
               margin: 0% 10%;
               padding:2% 3%;
               border: 3px inset #0091e6;
               width:auto;
               }

.epreuveeffort:hover {border: 3px inset #00e66b;}

.explication {
             width: auto;
             padding:8% 6% 0% 6%;
             margin-left:0%;
             }

.prc {padding: 0% 4% 3% 4%;}

.prc img {
          max-width: 350px;
          padding-right: 1%;
          margin-top: -4%;
         }

.prc2 {padding: 0% 4% 3% 4%;}

.prc2 img {
           max-width: 350px;
           padding-left: 1%;
           margin-top: -1%;
          }

/* PAGE ENTREPRISE */

.intro-entreprise {height: auto;}

.texte-intro-entreprise p {line-height: 28px;}

.titre-intro-entreprise {margin: 0% 0% 0% 5%;}

.titre-intro-entreprise H1 {font-size: 35px;}

.texte-intro-entreprise {margin: 12% 5% 0% 2%;}

.valeurs {padding: 5% 0%;}

.carte {background-position: 110% 0%;}

#photoclients {width: 70%;}

#photoclients img {width:110px;}

/* PAGE PUBLICATIONS SCIENTIFIQUES  */

.publications h2 {font-size: 20px;}

.article {margin-bottom: 3%;}

.footer {display:none;}

	}

@media screen and (max-width: 480px) /*and (orientation:portrait)*/
                    
	{

.topnav {position:absolute;}

section h1 {
            padding:20px 0px 10px 0px;
			font-size:30px;
			}

section p	{
			padding: 0px 0px;
			font-size:18px;
			}
			
section h2 {font-size: 22px;}

#returnOnTop {bottom: 1%;}
					
/* Page accueil */

.introduction {
               background-image: url(Images/bg-phone-intro.png);
               background-position: 50%;
              }

.logoBRN img {
              max-width:100%;
              height:auto;
              margin-top:20%;
              margin-left:0%;
             }
	
.introduction p	{
                font-size:18px;
                font-style:normal;
                /*text-align:initial;*/
                margin: 12% 2% 0% 2%;
                color:white;
                }
	
.vo2 {
	  padding:5% 5%;
      display:flex;
      flex-direction:column;
	  }

.imagevo2 img {
               max-width: 300px;
               margin: auto;
               padding-left:0%;
               }

.menuservices {display:none;}

.titreservices {visibility:visible;}

#nosservices {padding: 5% 5% 5% 5%;}

.par {padding: 25px 20px;}

.par2 {
      display:flex;
      flex-direction:column;
      }

.imgpar {margin: auto;}

.contact {
		 padding: 10px;
		 font-size:15px;
		 }

.textecontact {
              display:flex;
              flex-direction:column;
              align-items:center;
              padding-top:0%;
              padding-bottom:2%;
              }
			  
#elementscontact {
				  display:flex;
				  flex-wrap:wrap;
				  justify-content:space-around;
				  padding:5% 0%;
				 } 
				 
#elementscontact p {font-size: 20px;}

/*input et textarea*/
input:not([type="submit"]), textarea {
                                     width: 210px;
                                     font-size:12px;
	                                 }

input[type=submit] {
                    margin:5% 0% 5% 1%;
                    font-size:16px;
                   }

.indication {margin-bottom: 0%;}
				   
.grecaptcha-badge { visibility: hidden; }

.indication-recaptcha {
					   display: block;
					   width:250px;
					  }

#map    {display:none;}

/* PAGE NOTRE GAMME */

.introergo	{
              height:90%;}
		
.introergo h1 {
    		   font-size:40px;
		       padding: 5% 5%;
			  }

.introergo p {font-size:18px;}

#nb {
    flex-wrap:wrap;
    flex-direction: row;
    margin: 0%;
}

.presentationmetasys {padding: 0% 4%;}

.metasysabm {
            display: flex;
            flex-direction:column;
            padding: 2% 0%;
            }

.metaaa {
         width:auto;
         padding: 0% 4% 3% 4%;
         margin: 5%;
         hyphens: auto;
         -webkit-hyphens: auto;
         -ms-hyphens: auto;
         }

.mySlides {padding:15%;}

#caracteristiques {
                   max-width:100%;
                   height:auto;
                   margin:auto;
                  }

.open-button {
              margin: 12% 10%; 
              padding: 15px 5px;
              box-shadow:none;
             }

#dlbrochure {
            margin: 30px 15px;
            font-size: 18px;
            padding: 8px 10px;
            }

.form-container {
                 margin: 5% 10%;
                 padding:6% 3%;
                }

.cardio {padding: 5% 5% 1% 5%;}

.cardio2 {
         display: flex;
         flex-direction: column-reverse;
         align-items:center;
         }

.cardio2 img {
              max-width: 300px;
              padding:0%;
             }

.echocardiaque {
                padding: 0% 5%;
                display:flex;
                flex-direction:column;
                align-items:center;
               }

.echocardiaque img {
                    max-width: 250px;
                    margin-bottom: 5%;
                    padding:0px;
                    }

.contactimg {background-position: 80%;}

/* PAGE EPREUVE EFFORT*/

.introepreuveeffort {padding: 10% 0% 2% 0%;}

.efc {
     display: flex;
     flex-direction: column;
     margin: 5% 0% 0% 0%;
     }

.epreuveeffort {
               margin: 0% 10%;
               padding:2% 5%;
               border: 2px inset #0091e6;
               width:auto;
               }

.epreuveeffort:hover {border: 2px inset #00e66b;}

.explication {
             width: auto;
             padding:10% 5% 5% 5%;
             margin-left:0%;
             }

.programmerea {width:auto;}

.prc {padding:0% 5%;}

.prc2 {padding:0% 5% 10% 5%;}

.prc img {
          max-width:320px;
          margin:auto;
          padding:0% 0%;
         }

.prc2 img {
           max-width:340px;
           margin:auto;
           padding:0% 0%;
          }

/* PAGE PUBLICATIONS SCIENTIFIQUES */

.publications h1 {padding-top:18%;}

.publications h2 {font-size:18px;}

.publications p {font-size:16px;}

.articles {margin: 5% 6%;}

.article {
         margin-bottom:5%;
         padding : 2%;
         }

/* PAGE ENTREPRISE */

.intro-entreprise {
                  flex-direction:column;
                  height:auto;
                 }

.intro-entreprise img {
                       margin-top:20%;
                       margin-bottom: 2%;
                       display:block;
                       max-width:85%;
                      }

.titre-intro-entreprise {display:none;}

.texte-intro-entreprise H1 {
                            margin-bottom:4%;
                            color:#febb00;
                            border-color:#febb00;
                           }  

.texte-intro-entreprise p {line-height: 28px; border:none;}

.valeurs {padding: 4% 6% 8% 6%;}

.valeurs h1 {padding:8% 0% 0% 0%;}

.valeurs h2 {padding: 0% 0%;}

.valeurs p {padding: 1% 0%;}

.column2 {width: 100%;}

.carte {height: auto;}

.carte h1 {
           background: rgb(255,255,255);
           background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 2%, rgba(255,255,255,0.7959384437368697) 50%, rgba(255,255,255,0) 98%);
           background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 2%, rgba(255,255,255,0.7959384437368697) 50%, rgba(255,255,255,0) 98%);
           background: linear-gradient(90deg, rgba(255,255,255,0) 2%, rgba(255,255,255,0.7959384437368697) 50%, rgba(255,255,255,0) 98%);
           filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
          }

#photoclients img {width:110px;}

/*PAGE REPONSE AUTOMATIQUE PHP */

#repauto p {
            font-size:35px;
            padding: 20% 0%;
           }

#repauto a {font-size: 30px;}

.footer {display:none;}

	}


				/*background-image: -moz-linear-gradient(to right, #5e42a6, #b74e91);
				background-image: -webkit-linear-gradient(to right, #5e42a6, #b74e91);
				background-image: -ms-linear-gradient(to right, #5e42a6, #b74e91);
				background-image: linear-gradient(to right, #5e42a6, #b74e91);
				-moz-transition: max-width 0.2s ease;
				-webkit-transition: max-width 0.2s ease;
				-ms-transition: max-width 0.2s ease;
				transition: max-width 0.2s ease;
				border-radius: 0.2em;
				height: 0.05em;*/

.animatable {

 /* initially hide animatable objects */
  visibility: hidden; 
  /* initially pause animatable objects their animations */
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

/* show objects being animated */
.animated {
   visibility: visible;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}


@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-o-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
	}
	60% {
		-webkit-transform: translateX(20px);
	}

	80% {
		-webkit-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-2000px);
	}

	60% {
		-moz-transform: translateX(20px);
	}

	80% {
		-moz-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-2000px);
	}

	60% {
		opacity: 1;
		-o-transform: translateX(20px);
	}

	80% {
		-o-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}

	60% {
		transform: translateX(20px);
	}

	80% {
		transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@-webkit-keyframes bounceInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
	}

	60% {
		-webkit-transform: translateX(-20px);
	}

	80% {
		-webkit-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(2000px);
	}

	60% {
		-moz-transform: translateX(-20px);
	}

	80% {
		-moz-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInRight {
	0% {
		opacity: 0;
		-o-transform: translateX(2000px);
	}

	60% {
		-o-transform: translateX(-20px);
	}

	80% {
		-o-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes bounceInRight {
	0% {
		opacity: 0;
		transform: translateX(2000px);
	}

	60% {
		transform: translateX(-20px);
	}

	80% {
		transform: translateX(5px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInUp {
	0% {
		opacity: 0;
		-moz-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInUp {
	0% {
		opacity: 0;
		-o-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.3);
	}
	50% {
		-webkit-transform: scale(1.05);
	}

	70% {
		-webkit-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes bounceIn {
	0% {
		opacity: 0;
		-moz-transform: scale(.3);
	}

	50% {
		-moz-transform: scale(1.05);
	}

	70% {
		-moz-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-moz-transform: scale(1);
	}
}

@-o-keyframes bounceIn {
	0% {
		opacity: 0;
		-o-transform: scale(.3);
	}

	50% {
		-o-transform: scale(1.05);
	}

	70% {
		-o-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-o-transform: scale(1);
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3);
	}

	50% {
		transform: scale(1.05);
	}

	70% {
		transform: scale(.9);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@-webkit-keyframes moveUp {
	0% {
		opacity: 1;
		-webkit-transform: translateY(40px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes moveUp {
	0% {
		opacity: 1;
		-moz-transform: translateY(40px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes moveUp {
	0% {
		opacity: 1;
		-o-transform: translateY(40px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes moveUp {
	0% {
		opacity: 1;
		transform: translateY(40px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#002b4f;
	}
}

@-o-keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#002b4f;
	}
}

@keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#002b4f;
	}
}

.animated.animationDelay{
	animation-delay:.4s;
	-webkit-animation-delay:.4s;
}
.animated.animationDelayMed{
	animation-delay:1.2s;
	-webkit-animation-delay:1.2s;
}
.animated.animationDelayLong{
	animation-delay:1.6s;
	-webkit-animation-delay:1.6s;
}
.animated.fadeBgColor {
	-webkit-animation-name: fadeBgColor;
	-moz-animation-name: fadeBgColor;
	-o-animation-name: fadeBgColor;
	animation-name: fadeBgColor;
}
.animated.bounceIn {
	-webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	animation-name: bounceIn;
}
.animated.bounceInRight {
	-webkit-animation-name: bounceInRight;
	-moz-animation-name: bounceInRight;
	-o-animation-name: bounceInRight;
	animation-name: bounceInRight;
}
.animated.bounceInLeft {
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
}
.animated.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}
.animated.fadeInDown {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
.animated.fadeInUp {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
.animated.moveUp {
	-webkit-animation-name: moveUp;
	-moz-animation-name: moveUp;
	-o-animation-name: moveUp;
	animation-name: moveUp;
}

@-webkit-keyframes dash {
                        100% {
                             -ms-stroke-dashoffset: 0;
                             stroke-dashoffset: 0;
                             }
                        }

@keyframes dash {
                100% {
                     -ms-stroke-dashoffset: 0;
                     stroke-dashoffset: 0;
                     }
                }

.dropbtn2 {
          background-color: transparent;
          color:white;
          padding: 14px 16px;
          font-size: 20px;
          border: none;
          }

.dropdown2 {float:left;}

.dropdown-content2 {
                    display: none;
                    background-color:black ;
                    min-width: 16px;
                    z-index: 1;
                    }

/*.dropdown-content a :hover {background-color: black;}*/

.dropdown-content2 a {
                     color: white;
                     padding: 8px 1px;
                     text-decoration: none;
                     display: block;
                     }

.dropdown2:hover .dropdown-content2 {
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: column;
    display: flex;
    flex-direction:column;
    /*-webkit-box-orient: vertical;*/
    /*justify-content: center;
    align-items:center;*/
    }

.dropdown2:hover .dropbtn2 {background-color: #007ac1;}