/* Définition des polices personnalisées */

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

@font-face
{    
	font-family: 'Dayrom';    
	src: url('polices/dayrom.eot');    
	src: url('polices/dayrom.eot?#iefix') format('embedded- opentype'),         
		 url('polices/dayrom.woff') format('woff'),         
		 url('polices/dayrom.ttf') format('truetype'),         
		 url('polices/dayrom.svg#Dayrom') format('svg');    
	font-weight: normal;    
	font-style: normal;

}

/* code pour une largeur <680px */

@media (max-width : 679px)

{

h2 
    {
        text-align: center !important;
    }
.alignright
    {
        text-align: center !important;
    }
.section 
{
    width: 100%;
}
.body
{
    width: 100%;
}
nav 
{
    display: none !important;
}
.navigation 
{

        text-align: center;
        position: absolute;
        margin-top:0.4em;
        display:none !important;
        
}

table,tbody
{ 
    display:table-row; 
}
tr 
{ 
    display:inline-block; 
}
td 
{ 
    display:table-row; 
}   
    hr
    {
        margin-top: 70px;
        color: paleturquoise;
        border: 2px solid#f8f8ff ;
    }
   
.footer 
{ 
    width: 100%; 
} 

.dropbtn {
    background-color: #c0c0c0;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #c0c0c0;
    min-width: 100px !important;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  li
  {
      list-style: none !important;
      text-align: left !important;
  }
  .dropdown-content a {
    color: black;
    padding: 6px 6px !important;
    text-decoration: none;
    display: block;
    
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1;}
  .dropdown-contebt:hover a .active
  {
    background-color: transparent;    
   color: #ffdf00;
   text-decoration: underline;
   
   }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  .dropdown:hover .dropbtn {
    background-color: #ff4500;
  }
.logoflottant
{
    width: auto;
    height: auto;
}

}

/* code pour une largeur comprise entre 680 et 1310 px */

@media (min-width: 680px) and (max-width: 1310px)

{

h2 
{
    text-align: center !important;
}

.body
{
    width: auto;
}
.section 
{
     width :680px ;
}

.nav
{
    float: right !important;
    display: none !important;
}
 nav a:hover
 {
 background-color: transparent;
 color:#ff4500;
 }
 .navigation a .active
 {
 background-color: transparent;    
 color: #ffdf00;
 text-decoration: underline;
 
 }
 .navigation
 {
     position: relative;
     font-family: Dayrom, serif;  
     font-size: 1.4em;
     display: none!important;
     
 }

 hr
 {
     margin-top: 90px !important;
     color: paleturquoise;
     border: 2px solid#f8f8ff ;
 }
 
.footer { width: 100% ; } 

.dropbtn {
    background-color: #c0c0c0;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  .dropdown {
    position: relative;
    display: inline-block !important;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #c0c0c0;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1;}
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  .dropdown:hover .dropbtn {
    background-color: #ff4500;
  }

}


p
{
font-size: 1.4em ;
color:#f5f5dc;
text-align: justify;
}
ul
{
    font-size: 1.2em ;
    color: #f5f5dc;
    text-align: left;
}


li
{
    text-align: left;
    font-size: 1.1em;
    list-style: none !important;
}

/*logo crafty&skilled*/
.logoflottant
{
    float: left;
    height: 200px;
    align-items:center;
    margin-right: 10px ;
    
}

body
{   
	/* background: url('Ballons.jpg'); */
	font-family: 'Trebuchet MS', Arial, sans-serif;
    /* color: #FFFFFF; */
	/* color: #FFFFFF; */
}    
body
{

margin: 40px;
background-color: grey;
background-image: url(BallonsBW.jpg);
background-attachment: fixed;
background-repeat:no-repeat;
background-size: cover;
position: relative;
height: auto;
text-align: justify;
color: #f5f5dc;
width: auto;
z-index: 1;
}
header
{
    width: auto;
    text-align: center;
    position: sticky;
    background-attachment: scroll;
    z-index: 2;
    top: 0px;
}

section , footer , nav a li
{    
	font-family: Dayrom, serif;    
	font-weight: normal;
  /* text-transform: uppercase; 
*/	
} 

header h1
{    
	font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;    
	font-weight: normal;
	color: #f5f5dc;
	position: relative;
    display: inline-block; 
	
} 
h2
{
    
    font-family: Dayrom, serif;    
	font-size: 1.8em;    
	margin-top: 0px;    
	font-weight: normal;
	color:#f5f5dc;
} 
h3
{
    font-family: Dayrom, serif;    
	font-size: 1.6em;    
	margin-top: 0px;    
	font-weight: normal;
	color: #f5f5dc;
}

h4
{ 
font-size: 1.4em;
font-weight: normal;
color:#f5f5dc;
text-align: center;

}

h5
{
font-size: 1.1em;
}

table, th, td
 {
  border: 2px solid white;
 }
 
 table
 {
	border-collapse:collapse;
	width: 100%;
 }
 
 th
 {
 height:50px;
 text-align:center;
 }
 
 
 td
 {
	text-align:center;
	height:10px;
	vertical-align:bottom;
	padding:15px;
 }
img
{
    size-adjust: 50px;
}

.logo
{
    size: 300px;
}

a 
{
    display: inline;
    
}
/* Partie Navigation */

nav
{
    list-style: none;
	justify-content: center;
	position:relative;
	display:flex;
    text-align: center;
    height: 95px;

}
nav a
{
    overflow: visible;
	color: #f5f5dc;
	margin: 60px;
	font-size: 1.6em;
	
    text-decoration: none;
    display: flex;

}
nav a:link , a:visited
{
color:#f5f5dc;
text-align: center;
text-decoration: none;
display: flex;
background-color: transparent;
}

nav a:hover
{
background-color: transparent;
color:#ff4500;
}
.navigation a .active
{
 background-color: transparent;    
color: #ffdf00;
text-decoration: underline;

}
.navigation
{
    font-family: Dayrom, serif;  
    font-size: 1.4em;
    display: flex;
    display: none;
}
 

.titre_principal
{
    text-align: left;
    font-size: 1.8em;
    display: inline-block;
    color: #f5f5dc;
    height: 20px;;
    transform: translate(-20%, -80%);
    
}

/* Horizontal line */
hr
{
    margin-top: 50px;
    color: paleturquoise;
    border: 2px solid#f8f8ff ;
    
}

h2
{
    text-align: left;
    text-decoration: underline;
    color: #000080;
}

/* Corps */
.corps-du-text  p 
{
     
    font-size: 1.2em;
    display: inline-block;    
	vertical-align: top;    
	text-align: justify;
	color: #f5f5dc;
    margin-right: 15px;

}
#element1, #element3, #element2
{
    width: auto;
    box-sizing: border-box;

    
}

#element1 
{
    border-collapse: separate;
    display: table;
    overflow: hidden;
   float: left;
   width: 32%;
   margin-right: 10px;
   color: #f5f5dc;
   
}
#element3 
{
    border-collapse: separate;
    display: table;
    overflow: hidden;
   float: right;
   width: 32%;
   margin-left: 10px;
   color: #f5f5dc;
   
}
#element2 
{
    border-collapse: separate;
    display: table;
   overflow: hidden;
   padding-left: 10px;
  color: #f5f5dc;
   width: 32%;
   
}

#element1 h2 
{
   text-align:center;
   color: #f5f5dc;
}
#element3 h2 
{
   text-align: center;
   color: #f5f5dc;
}
#element2 h2 
{
   text-align:center;
   color: #f5f5dc;

}

 /* Clearfix (clear floats) */
.row::after 
{
    content: "";
    clear: both;
    display: table;
  }
/* Pictures side by side */

* {
    box-sizing: border-box;
     text-align: center;
     margin-left: 10px;
     margin-right: 10px;
    
}   
 /* Back to top button */
 #myBtn 
 {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: grey; /* Set a background color */
    color: black; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }
  
  #myBtn:hover 
  {
    background-color: #555; /* Add a dark-grey background on hover */
  }
 /* copiright text */ 
.alignleft 
{
	float: left;
	color: #f5f5dc;
    margin-left: 90px;
}
.alignright 
{
	float: right;
	color: #f5f5dc;
    margin-right: 90px;
}
/* Icons social media */ 
.icons 
{
    width: 100%;
	display: flex;
	border-radius: 50px;
    margin-left: 20px;
    margin-right: 20px;
    justify-content: center;
    text-align: center;
}


img
{
    
	border-radius: 30px;
    text-decoration: none;
    text-align: center;
    margin-left: 30px;
} 

.solo
{
    text-align: center;
}
.concours
{
    text-align: center;
}
.single2
{
    text-align: center;
}
.plusieurs
{
    text-align: center;
}

.dropdown
{
    position: relative;
    display: inline-block;
  }
/* taille menu hamburger */ 
.dropbtn {
    background-color: #c0c0c0;
    color: white;
    padding: 18px;
    font-size: 16px;
    border: none;
    cursor: pointer;
   
  }
.dropdown-content
{
    display: none;
    position: absolute;
    right: 0;
    background-color: #EFEFEF;
    min-width: 140px !important;
    box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    color: grey;
    padding: 2px 2px;
    text-decoration: none;
    display: block;
    text-decoration: underline;
    border-radius: 30%;
  }
  
  .dropdown-content a:hover 
  {
      background-color: gold; 
      transition: .8s;
  }
  
  .dropdown-content .active
  {
    background-color: gold;
    border-radius: 10%;
    
  }
  a:hover .active
  {
      text-decoration: none;
  }
  .dropdown:hover .dropdown-content {
    display: block;
    
  }
  
  .dropdown:hover .dropbtn {
    background-color: red;
  }