body{
    font-family: 'Century Gothic', Calibri, serif;
    font-size: 13px;
    margin: 0px;
    padding: 0px;
}

nav{
    width: 100%;
    background-color: #424558;
}

nav > ul{
    margin: 0px;
    padding: 0px;
}

nav > ul::after{
    content: "";
    display: block;
    clear: both;
}

nav > ul > li{
    float: left;
    position: relative;
}

nav > ul > li > a{
   padding: 20px 30px;
   color: #FFF;
}

nav > ul > li:hover a{
    padding: 15px 30px 20px 30px;
}

nav li{
    list-style-type: none;
    left: 25%;
}

.submenu{
    display: none;
}

nav a{
    display: inline-block;
    text-decoration: none;
    padding: 20px 30px;
    font-size: 15px;
    text-transform: uppercase;
    color: #FFF;
}

nav li:hover .submenu{
    display: inline-block;
    position: absolute;
    top: 100%
    left: 0px;
    padding: 0px;
    z-index: 1000;
}

.submenu li{
    border-bottom: 1px solid #CCC;
}

.submenu li a{
    padding: 15px 30px;
    font-size: 13px;
    color: #222538;
    width: 300px;
}

.menu-ACCUEIL:hover{
    border-top: 5px solid #FFFFFF;
    background-color:  RGBa(255, 255, 255, 0.50);
}

.menu-GENEALOGIE:hover{
    border-top: 5px solid #a0522d;
    background-color: RGBa(232, 180, 113, 0.50);
}

.menu-PASSIONS:hover{
    border-top: solid #0070BB;
    background-color: RGBa(000, 112, 192, 0.50);
}

.menu-PASSIONS:hover{
    border-top: solid #0070BB;
    background-color: RGBa(000, 112, 192, 0.50);
}

.menu-LOISIRS:hover{
    border-top: 5px solid #4C8;
    background-color: RGBa(64, 200, 130, 0.50);
}

.menu-ACCUEIL .submenu{
    background-color: RGB(230, 100, 40);
}

.menu-GENEALOGIE .submenu{
    background-color: RGB(232, 180, 113, 0.90);
}

.menu-VTT .submenu{
    background-color: RGB(250, 215, 100);
}

.submenu li:hover a{
    color: #a0522d;
    font-size: 15px;
    font-weight: bold;
}

.menu-ACCUEIL .submenu li:hover{
    background-color: RGB(210, 77, 60);
}
.menu-GENEALOGIE .submenu li:hover{
    background-color: RGB(149, 124, 101);
}

.menu-PASSIONS .submenu li:hover{
    background-color: RGB(200, 165, 75);
}

h1{
    font-size: 40px;
    font-weight: normal;
    text-align: center;
}

h2{
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

header{
    height: 100px;
    background-color: #C5C5C5;
    border-left: 1px solid #424558;
    border-right: 1px solid #424558;
    border-top: 1px solid #424558;
}

footer{
    height: 80px;
    padding-top: 30px;
    text-align: center;
    background-color: #C5C5C5;
    border-top: 2px solid #AAA;
}

.table{
    display: table;
    margin: 0 auto;
}

section{
    width: 100%;
    min-height: 300px;
    padding-bottom: 10px;
    margin-bottom: 0px;
}

.sec{
    margin: 0px 10%;
}

.left{
    float: left;
    width: 30%;
}
.right{
    float: left;
    width: 70%;
}
.cleft, .cright, .sousleft, .sousright{
    width: 50%;
    float: left;
}

.sec::after, .exp::after, .reco::after{
    content: "";
    display: table;
    clear: both;
}

.orange{
    border-top: 5px solid #e47d26;
    background-color: RGBa(228, 117, 38, 0.15);
    margin-bottom: 0px;
}
.rose{
    border-top: 5px solid #e44d96;
    background-color: RGBa(228, 77, 128, 0.15);
    margin-bottom: 0px;
}
.vert{
    border-top: 5px solid #4c8;
    background-color: RGBa(64, 200, 130, 0.50);
}
.bleu{
    border-top: 5px solid #29c;
    background-color: RGBa(30, 152, 212, 0.50);
}
.marron{
    border-top: 5px solid #a0522d;
    background-color: RGBa(232, 180, 113, 0.90);
}
.rouge{
    border-top: 5px solid #e44d26;
    background-color: RGBa(228, 77, 38, 0.15);
}
.leftexp{
    width: 53%;
    float: left;
    margin-left: 5%;
}
.rightexp{
    width: 42%;
    float: left;
    <!margin-left: 5%;>
}
.leftexptourisme{
    width: 50%;
    float: left;
    margin-left: 10%;
}
.rightexptourisme{
    width: 100%;
    float: left;
    <!margin-left: 0%;>
}
.leftexpiano{
    width: 50%;
    float: left;
    margin-left: 10%;
}
.leftexpianoentier{
    width: 90%;
    float: left;
    margin-left: 10%;
}
.rightexpiano{
    width: 35 %;
    float: left;
    margin-left: 0%;
}
.leftexpVTT{
    width: 45%;
    float: left;
}
.rightexpVTT{
    width: 35%;
    float: left;
    <!margin-left: 5%;>
}
.leftexp img{
    width: 100%;
    max-width: 500px;
    margin-left: 10%;
    border: 2px solid #000000;
}
.rightexp img{
    width: 100%;
    max-width: 400px;
    margin-left: 0%;
    border: 2px solid #000000;
    box-shadow: 0px 8px 40px #000000;
}
.rightexpiano img{
    width: 100%;
    max-width: 400px;
    margin-left: 0%;
    border: 10px solid #FFFFFF;
    box-shadow: 0px 8px 40px #000000;
}
.rightexptourisme img{
    width: 100%;
    max-width: 600px;
    margin-left: 0%;
    border: 10px solid #FFFFFF;
    box-shadow: 0px 8px 40px #000000;
}
.diaporama1{
    margin: 0 auto;
    width: 600px;
    height: 450px;
    border: 2px solid #000000;
    box-shadow: 0px 8px 40px #000000;
    background-image: url("imgs/Photo1.jpg");
    
    webkit-animation-name: diapo1;
    webkit-animation-duration: 18s;
    webkit-animation-timing-function: linear;
    webkit-animation-iteration-count: infinite;
    webkit-animation-direction: normal;
    
    moz-animation-name: diapo1;
    moz-animation-duration: 18s;
    moz-animation-timing-function: linear;
    moz-animation-iteration-count: infinite;
    moz-animation-direction: normal;
    
    animation-name: diapo1;
    animation-duration: 18s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}
    
@-webkit-keyframes diapo1{
    0%{background-image: url("imgs/Photo1.jpg");}
    19%{background-image: url("imgs/Photo1.jpg");}
    26%{background-image: url("imgs/Photo10.jpg");}
    48%{background-image: url("imgs/Photo10.jpg");}
    55%{background-image: url("imgs/Photo11.jpg");}
    77%{background-image: url("imgs/Photo11.jpg");}
}
    
@-moz-keyframes diapo1{
    0%{background-image: url("imgs/Photo1.jpg");}
    19%{background-image: url("imgs/Photo1.jpg");}
    26%{background-image: url("imgs/Photo10.jpg");}
    48%{background-image: url("imgs/Photo10.jpg");}
    55%{background-image: url("imgs/Photo11.jpg");}
    77%{background-image: url("imgs/Photo11.jpg");}
}
    
@-keyframes diapo1{
    0%{background-image: url("imgs/Photo1.jpg");}
    19%{background-image: url("imgs/Photo1.jpg");}
    26%{background-image: url("imgs/Photo10.jpg");}
    48%{background-image: url("imgs/Photo10.jpg");}
    55%{background-image: url("imgs/Photo11.jpg");}
    77%{background-image: url("imgs/Photo11.jpg");}
}

.diaporama1rubriquePHOTOS{
    margin: 0 auto;
    width: 600px;
    height: 450px;
    border: 15px solid #FFFFFF;
    box-shadow: 0px 8px 40px #000000;
    background-image: url("imgs/Photo1.jpg");
    
    webkit-animation-name: diapo1;
    webkit-animation-duration: 18s;
    webkit-animation-timing-function: linear;
    webkit-animation-iteration-count: infinite;
    webkit-animation-direction: normal;
    
    moz-animation-name: diapo1;
    moz-animation-duration: 18s;
    moz-animation-timing-function: linear;
    moz-animation-iteration-count: infinite;
    moz-animation-direction: normal;
    
    animation-name: diapo1;
    animation-duration: 18s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}
    
@-webkit-keyframes diapo1{
    0%{background-image: url("imgs/Photo1.jpg");}
    19%{background-image: url("imgs/Photo1.jpg");}
    26%{background-image: url("imgs/Photo10.jpg");}
    48%{background-image: url("imgs/Photo10.jpg");}
    55%{background-image: url("imgs/Photo11.jpg");}
    77%{background-image: url("imgs/Photo11.jpg");}
}
    
@-moz-keyframes diapo1{
    0%{background-image: url("imgs/Photo1.jpg");}
    19%{background-image: url("imgs/Photo1.jpg");}
    26%{background-image: url("imgs/Photo10.jpg");}
    48%{background-image: url("imgs/Photo10.jpg");}
    55%{background-image: url("imgs/Photo11.jpg");}
    77%{background-image: url("imgs/Photo11.jpg");}
}
    
@-keyframes diapo1{
    0%{background-image: url("imgs/Photo1.jpg");}
    19%{background-image: url("imgs/Photo1.jpg");}
    26%{background-image: url("imgs/Photo10.jpg");}
    48%{background-image: url("imgs/Photo10.jpg");}
    55%{background-image: url("imgs/Photo11.jpg");}
    77%{background-image: url("imgs/Photo11.jpg");}
}
.diaporama2rubriqueVTT{
    margin: 0 auto;
    width: 600px;
    height: 450px;
    border: 15px solid #FFFFFF;
    box-shadow: 0px 0px 50px #000000;
    background-image: url("imgs/VTT assemble t5.jpg");
    
    webkit-animation-name: diapo2;
    webkit-animation-duration: 210s;
    webkit-animation-timing-function: linear;
    webkit-animation-iteration-count: infinite;
    webkit-animation-direction: normal;
    
    moz-animation-name: diapo2;
    moz-animation-duration: 210s;
    moz-animation-timing-function: linear;
    moz-animation-iteration-count: infinite;
    moz-animation-direction: normal;
    
    animation-name: diapo2;
    animation-duration: 210s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@-webkit-keyframes diapo2{
    0%{background-position: 0px 0px;}
    2%{background-position: 0px 0px;}
    3%{background-position: -600px 0px;}
    4%{background-position: -600px 0px;}
    5%{background-position: -1200px 0px;}
    7%{background-position: -1200px 0px;}
    8%{background-position: -1800px 0px;}
    9%{background-position: -1800px 0px;}
    10%{background-position: -2400px 0px;}
    12%{background-position: -2400px 0px;}
    13%{background-position: -3000px 0px;}
    15%{background-position: -3000px 0px;}
    16%{background-position: -3600px 0px;}
    17%{background-position: -3600px 0px;}
    18%{background-position: -4200px 0px;}
    19%{background-position: -4200px 0px;}
    20%{background-position: -4800px 0px;}
    21%{background-position: -4800px 0px;}
    22%{background-position: -5400px 0px;}
    24%{background-position: -5400px 0px;}
    25%{background-position: -6000px 0px;}
    27%{background-position: -6000px 0px;}
    28%{background-position: -6600px 0px;}
    30%{background-position: -6600px 0px;}
    31%{background-position: -7200px 0px;}
    32%{background-position: -7200px 0px;}
    33%{background-position: -7800px 0px;}
    35%{background-position: -7800px 0px;}
    36%{background-position: -8400px 0px;}
    37%{background-position: -8400px 0px;}
    38%{background-position: -9000px 0px;}
    40%{background-position: -9000px 0px;}
    41%{background-position: -9600px 0px;}
    43%{background-position: -9600px 0px;}
    44%{background-position: -10200px 0px;}
    46%{background-position: -10200px 0px;}
    47%{background-position: -10800px 0px;}
    49%{background-position: -10800px 0px;}
    50%{background-position: -11400px 0px;}
    52%{background-position: -11400px 0px;}
    53%{background-position: -12000px 0px;}
    55%{background-position: -12000px 0px;}
    56%{background-position: -12600px 0px;}
    58%{background-position: -12600px 0px;}
    59%{background-position: -13200px 0px;}
    61%{background-position: -13200px 0px;}
    62%{background-position: -13800px 0px;}
    64%{background-position: -13800px 0px;}
    65%{background-position: -14400px 0px;}
    67%{background-position: -14400px 0px;}
    68%{background-position: -15000px 0px;}
    70%{background-position: -15000px 0px;}
    71%{background-position: -15600px 0px;}
    73%{background-position: -15600px 0px;}
    74%{background-position: -16200px 0px;}
    76%{background-position: -16200px 0px;}
    77%{background-position: -16800px 0px;}
    79%{background-position: -16800px 0px;}
    80%{background-position: -17400px 0px;}
    82%{background-position: -17400px 0px;}
    83%{background-position: -18000px 0px;}
    84%{background-position: -18000px 0px;}
    85%{background-position: -18600px 0px;}
    86%{background-position: -18600px 0px;}
    87%{background-position: -19200px 0px;}
    89%{background-position: -19200px 0px;}
    90%{background-position: -19800px 0px;}
    92%{background-position: -19800px 0px;}
    93%{background-position: -20400px 0px;}
    95%{background-position: -20400px 0px;}
    96%{background-position: -21000px 0px;}
    97%{background-position: -21000px 0px;}
    98%{background-position: -21600px 0px;}
    100%{background-position: -21600px 0px;}
}
0%{background-position: 0px 0px;}
    2%{background-position: 0px 0px;}
    3%{background-position: -600px 0px;}
    4%{background-position: -600px 0px;}
    5%{background-position: -1200px 0px;}
    7%{background-position: -1200px 0px;}
    8%{background-position: -1800px 0px;}
    9%{background-position: -1800px 0px;}
    10%{background-position: -2400px 0px;}
    12%{background-position: -2400px 0px;}
    13%{background-position: -3000px 0px;}
    15%{background-position: -3000px 0px;}
    16%{background-position: -3600px 0px;}
    17%{background-position: -3600px 0px;}
    18%{background-position: -4200px 0px;}
    19%{background-position: -4200px 0px;}
    20%{background-position: -4800px 0px;}
    21%{background-position: -4800px 0px;}
    22%{background-position: -5400px 0px;}
    24%{background-position: -5400px 0px;}
    25%{background-position: -6000px 0px;}
    27%{background-position: -6000px 0px;}
    28%{background-position: -6600px 0px;}
    30%{background-position: -6600px 0px;}
    31%{background-position: -7200px 0px;}
    32%{background-position: -7200px 0px;}
    33%{background-position: -7800px 0px;}
    35%{background-position: -7800px 0px;}
    36%{background-position: -8400px 0px;}
    37%{background-position: -8400px 0px;}
    38%{background-position: -9000px 0px;}
    40%{background-position: -9000px 0px;}
    41%{background-position: -9600px 0px;}
    43%{background-position: -9600px 0px;}
    44%{background-position: -10200px 0px;}
    46%{background-position: -10200px 0px;}
    47%{background-position: -10800px 0px;}
    49%{background-position: -10800px 0px;}
    50%{background-position: -11400px 0px;}
    52%{background-position: -11400px 0px;}
    53%{background-position: -12000px 0px;}
    55%{background-position: -12000px 0px;}
    56%{background-position: -12600px 0px;}
    58%{background-position: -12600px 0px;}
    59%{background-position: -13200px 0px;}
    61%{background-position: -13200px 0px;}
    62%{background-position: -13800px 0px;}
    64%{background-position: -13800px 0px;}
    65%{background-position: -14400px 0px;}
    67%{background-position: -14400px 0px;}
    68%{background-position: -15000px 0px;}
    70%{background-position: -15000px 0px;}
    71%{background-position: -15600px 0px;}
    73%{background-position: -15600px 0px;}
    74%{background-position: -16200px 0px;}
    76%{background-position: -16200px 0px;}
    77%{background-position: -16800px 0px;}
    79%{background-position: -16800px 0px;}
    80%{background-position: -17400px 0px;}
    82%{background-position: -17400px 0px;}
    83%{background-position: -18000px 0px;}
    84%{background-position: -18000px 0px;}
    85%{background-position: -18600px 0px;}
    86%{background-position: -18600px 0px;}
    87%{background-position: -19200px 0px;}
    89%{background-position: -19200px 0px;}
    90%{background-position: -19800px 0px;}
    92%{background-position: -19800px 0px;}
    93%{background-position: -20400px 0px;}
    95%{background-position: -20400px 0px;}
    96%{background-position: -21000px 0px;}
    97%{background-position: -21000px 0px;}
    98%{background-position: -21600px 0px;}
    100%{background-position: -21600px 0px;}
    
0%{background-position: 0px 0px;}
    2%{background-position: 0px 0px;}
    3%{background-position: -600px 0px;}
    4%{background-position: -600px 0px;}
    5%{background-position: -1200px 0px;}
    7%{background-position: -1200px 0px;}
    8%{background-position: -1800px 0px;}
    9%{background-position: -1800px 0px;}
    10%{background-position: -2400px 0px;}
    12%{background-position: -2400px 0px;}
    13%{background-position: -3000px 0px;}
    15%{background-position: -3000px 0px;}
    16%{background-position: -3600px 0px;}
    17%{background-position: -3600px 0px;}
    18%{background-position: -4200px 0px;}
    19%{background-position: -4200px 0px;}
    20%{background-position: -4800px 0px;}
    21%{background-position: -4800px 0px;}
    22%{background-position: -5400px 0px;}
    24%{background-position: -5400px 0px;}
    25%{background-position: -6000px 0px;}
    27%{background-position: -6000px 0px;}
    28%{background-position: -6600px 0px;}
    30%{background-position: -6600px 0px;}
    31%{background-position: -7200px 0px;}
    32%{background-position: -7200px 0px;}
    33%{background-position: -7800px 0px;}
    35%{background-position: -7800px 0px;}
    36%{background-position: -8400px 0px;}
    37%{background-position: -8400px 0px;}
    38%{background-position: -9000px 0px;}
    40%{background-position: -9000px 0px;}
    41%{background-position: -9600px 0px;}
    43%{background-position: -9600px 0px;}
    44%{background-position: -10200px 0px;}
    46%{background-position: -10200px 0px;}
    47%{background-position: -10800px 0px;}
    49%{background-position: -10800px 0px;}
    50%{background-position: -11400px 0px;}
    52%{background-position: -11400px 0px;}
    53%{background-position: -12000px 0px;}
    55%{background-position: -12000px 0px;}
    56%{background-position: -12600px 0px;}
    58%{background-position: -12600px 0px;}
    59%{background-position: -13200px 0px;}
    61%{background-position: -13200px 0px;}
    62%{background-position: -13800px 0px;}
    64%{background-position: -13800px 0px;}
    65%{background-position: -14400px 0px;}
    67%{background-position: -14400px 0px;}
    68%{background-position: -15000px 0px;}
    70%{background-position: -15000px 0px;}
    71%{background-position: -15600px 0px;}
    73%{background-position: -15600px 0px;}
    74%{background-position: -16200px 0px;}
    76%{background-position: -16200px 0px;}
    77%{background-position: -16800px 0px;}
    79%{background-position: -16800px 0px;}
    80%{background-position: -17400px 0px;}
    82%{background-position: -17400px 0px;}
    83%{background-position: -18000px 0px;}
    84%{background-position: -18000px 0px;}
    85%{background-position: -18600px 0px;}
    86%{background-position: -18600px 0px;}
    87%{background-position: -19200px 0px;}
    89%{background-position: -19200px 0px;}
    90%{background-position: -19800px 0px;}
    92%{background-position: -19800px 0px;}
    93%{background-position: -20400px 0px;}
    95%{background-position: -20400px 0px;}
    96%{background-position: -21000px 0px;}
    97%{background-position: -21000px 0px;}
    98%{background-position: -21600px 0px;}
    100%{background-position: -21600px 0px;}
    
.video{
    widht: 100%
    max-widht: 400px;
    padding: 20px;
    border: 2px solid #FFFFFF;
    box-shadow: 0px 8px 40px #000000;
}
    
}
@media screen and (max-width: 780px){
    header{
        height: 50px;
    }
    h1{
        font-size: 28px;
        margin: 20px 0px 0px 0px;
    }
    nav li a{
        font-size: 12px;
        padding: 10px;
    }
    nav li:hover a{
        padding: 5px 10px 10px 10px;
    }
}