body
{
    font-family:"Trebuchet MS";
    background-image:url('../img/bg.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
    text-align: left;
    margin:0px;
    margin-bottom:100px;   
    z-index : 1;
}
.buttons
{
    width:100%;
    height:70px;
    position:fixed;
    background-image:url('../img/coulures.png');
    background-size:auto 100%;
    background-repeat:repeat-x;
    z-index:1;
}
button
{
    text-decoration:none;
    font-size:20px;
    color:white;
    text-shadow:2px 2px 1px grey;
    line-height:25px;
    width:270px;
    height:40px;
    text-align:center;
    margin:5px auto;
    transform:rotate(-5deg);
    border:0px;
    background-color:transparent;
    -webkit-transition: all 1s ease; /* Safari et Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* Internet Explorer 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
button:hover
{
    color:white;
    text-shadow:2px 2px 1px black;
    font-size:25px;
    transform:rotate(-10deg);
    -webkit-transform:scale(1.2); /* Safari et Chrome */
    -moz-transform:scale(1.2); /* Firefox */
    -ms-transform:scale(1.2); /* Internet Explorer 9 */
    -o-transform:scale(1.2); /* Opera */
    transform:scale(1.2);
}
button:onclick
{
    border:0px;
}
.container
{
    padding:30px;
    border-radius:10px;
}
.gallery_box_single
{
    text-align:center;
}
h1,h2,h3
{
    font-size:40px;
    line-height:60px;
    color:white;
    margin:auto;
    width:50%;
    height:60px;
    text-align:center;  
    text-shadow:2px 2px 5px black;
}
h1{
    margin:50px auto;   
    background-image:url('../img/010.gif');
    background-size:auto 100%;
    background-repeat:repeat-x;
    box-shadow:3px 3px 6px black; 
    border-radius:10px;
    line-height:50px;
}
h2
{
    font-size:30px;
    line-height:50px;
}
h3
{
    font-size:20px;
    line-height:50px;
}
.container p
{
    padding:auto 20px;
    text-align:left;
    background-color:rgba(255,255,255,0.7);
    box-shadow:3px 3px 15px white;
}
gallery_box_single
{
    text-align:center;
}
.img
{
    box-shadow:3px 3px 5px black;
    background:linear-gradient(to top right, rgba(0,0,255,0.5), rgba(0,0,0,0.3)50%);
    border-radius:10px;
    border:1px solid black;  
    width:30%;
    margin:10px;
    display:inline-block;
    text-align:center;
    padding:auto;
}
.img p
{
    text-align:center;
    padding: 20px;   
    font-size:20px;
    background-color:transparent;
    box-shadow:0px 0px 0px;
}
img
{
    width:80%;
    margin-top:20px;
    border-radius:10px;
    border:5px white solid;
    box-shadow:3px 3px 10px black;
    -webkit-transition: all 1s ease; /* Safari et Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* Internet Explorer 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
img:hover
{
    -webkit-transform:scale(1.5); /* Safari et Chrome */
    -moz-transform:scale(1.5); /* Firefox */
    -ms-transform:scale(1.5); /* Internet Explorer 9 */
    -o-transform:scale(1.5); /* Opera */
    transform:scale(1.5);
}
.name  
{
    font-style: italic;
    font-weight:bold;
    padding-left:30px;
}
.quote p::before, .quote p::after
{
    content:'"';
    font-style:italic;
}
.quote
{
    width:80%;
    border:5px white solid;
    border-radius:20px;
    padding:30px;
    margin:10px;    
    background:linear-gradient(to bottom, yellow, rgba(255,255,255,0.5)90%);
    box-shadow:5px 5px 10px black;
}
ul li
{
    list-style-type: "\2192\ ";
    font-size:18px;
    /*padding-left:40px;*/    
    padding-left: 0.5em;
}
li
{
    padding-left:60px;

    background-color:rgba(255,255,255,0.7);
    box-shadow:3px 3px 15px white;
}
.form
{
    /*background:linear-gradient(to top right,rgba(255,0,0,0.9), rgba(255,0,0,0.2)90%);*/
    background-image:url('../img/parquet.jpg');
    background-size: auto auto;
    background-position:top right;
    width:50%;
    border-radius:10px;
    padding:20px;
    box-shadow:3px 3px 5px grey;
    border:5px solid grey;

}
.form input[type=text],
.form input[type=email], 
.form input[type=tel],
.form textarea
{
    width:90%;
    padding-left:20px;
    height:30px;
    font-size:25px;
    margin:5px;
    margin-left:20px;
    color:white;
    border-radius:10px;
    background-color:rgba(200,0,0,0.4);
}

.form textarea{
    padding-top:10px;
    height:150px;
}
.form input[type=submit]
{
    width:50%;
    height:40px;
    border-radius:10px;
    line-height:30px;
    box-shadow:3px 3px 5px grey;
    font-size:25px;
    color:white;
    margin:10px;
    text-align:center;
    background-color:grey;
    display:block;
}
.form input[type=submit]:hover
{
    background-color:yellowgreen;

}
.form label
{
    font-size:20px;
    color:white;
    text-shadow:2px 2px 3px black;
}
iframe
{
    border:5px grey solid;
    border-radius:15px;
    margin:60px 20px;
    height:400px;
    float:right;
    width:40%;
    box-shadow:3px 3px 5px black;
    transform: rotate(10deg);
    z-index:0;
}
#footer
{
    height:40px;
    bottom:0px;
    display:block;
    width:100%;
    position:fixed;
    background:rgba(255,69,0,0.4);
    background-image:url('../img/grillage.png');
    background-size:auto 100%;
    background-repeat:repeat-x;
    border-top:5px maroon groove;
    z-index:1;
    margin:auto;
    line-height:30px;
    color:white;
    padding:5px 30px;

}
.footer img
{
    height:30px;
    width:30px;
    border:3px solid white;
    box-shadow:3px 3px 5px black;
    margin:0px 5px 10px 5px;
    float:left;
}
.footer p
{
    line-height:30px;
    font-size:15px;
    margin:auto;
    color:white;
    float:right;
    padding-right:100px;
    text-shadow:1px 1px 3px black;
}
#footerButton
{
    width:50px;
    height:40px;
    background-color:black;
    color:white;
    text-align:center;
    display:block;
    margin:auto;
    bottom:0px;
    z-index:auto;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}
.modal {
    z-index : 0;
    position : absolute;
    top : 100px;
    left : 0px;
    width : 100%;
    height : 300px;
    display : none;
}
.modal actif{
    z-index: 2;
    display : inline-block;
}
.modal-container {
    margin-left : 25%;
    width : 50%;
    height : 100%;
    background : white;
    border: 7px outset #A42509;  
}
.modal-body{

    height : 80%;
}
.modal-foooter{
    height : 20%
}
.modal-btn {
    border: 7px outset #A42509;
}
/* Add a black background color to the top navigation */
.topnav {
    height:80px;
    padding-left:50px;
    text-align:center;
    background-image:url('../img/coulures.png');
    background-size:auto 100%;
    overflow: hidden;
    }
.topnavLogo img
{
    height:80px;
    width:80px;
    border:0px;
    box-shadow:0px 0px 0px;
    float:left;
    border-radius:0px;
    margin-top:0px;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: white;
    text-shadow:2px 2px 3px black;
    display: block;
    text-align: center;
    padding: 14px 30px;
    text-decoration: none;
    font-size: 20px;
    transform:rotate(-5deg);
    -webkit-transition: all 1s ease; /* Safari et Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* Internet Explorer 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

/* Change the color of links on hover */
.topnav a:hover {
    color: white;
    text-shadow:2px 2px 3px black;
    transform:rotate(0deg);
    -webkit-transform:scale(1.2); /* Safari et Chrome */
    -moz-transform:scale(1.2); /* Firefox */
    -ms-transform:scale(1.2); /* Internet Explorer 9 */
    -o-transform:scale(1.2); /* Opera */
    transform:scale(1.2);
}

/* Add an active class to highlight the current page */
.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
} 
.modal-container
{
    border-radius:10px;
    padding:20px;
    background:linear-gradient(to top left,rgba(255,0,0,0.8), rgba(0,0,0,0.8)90%);
    color:white;
    text-shadow:2px 2px 3px black;
    font-size:18px;
}
.modal-footer a
{
    font-size:40px;
    text-shadow:3px 3px 6px black;
    color:white;    
    border:3px solid red;
    border-radius:50%;
    text-decoration:none;
    text-align:center;
}
.modal-footer span
{
    text-align:center;
}