@font-face {
    font-family:"titilliumbold";
    src:url('../font/TitilliumWeb-Bold.ttf') format("truetype");
}

@font-face {
    font-family:"titilliumreg";
    src:url('../font/TitilliumWeb-Regular.ttf') format("truetype");
}


html {
    margin:0;
    padding:0;
    height:100%;
    overflow-x:hidden;    
}

body {
    overflow-x:hidden; 
    font-family:titilliumreg, sans-serif;
    width:95%;
    display:inline-block;
    background:url("../images/bg-2.png") repeat fixed center 100%;    
   
    
    text-align: center;   
}


.w-col-3{
	width: 50%;
	text-align: center;
  margin-left: 60px;
  margin-right: 60px;
}


.wrapper {
  display: flex;  
  flex-flow: row wrap;
  text-align: center;
  position: absolute;
    top: 10%;
    width: 100%;
}

.wrapper > * {  
  flex: 1 100%;
}

.main {
  text-align: left;
  display: inline-flex; 
  justify-content: center; 
  margin-bottom: 20px;
  max-width: 700px;
}

.aside-1 {
  flex: 1 0px;
  text-align: right;
}

.aside-2 {
  flex: 1 0px;
  text-align: left;
}

.footer {	
  margin-top: 30px;
	width: 100%;
	}
	img{
	height:70px;	
  margin-bottom: 20px;
}


#slogan {
	font-size: 16px;
    font-family: titilliumreg;
    color : #3c3935;
    text-decoration: none;
    margin: 0 auto;
    margin-bottom: 15px;
    height: 70px;
    vertical-align: middle;
}

.boutonOrange  {
    text-transform: uppercase; 
    font-size: 15px;
    color : #fff;
    background-color: #ec7802;  
    text-decoration: none;   
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;
}
    .boutonOrange:hover {
      background-color: #ffa951;
      box-shadow: 5px 5px 5px grey;
}

.boutonBleu {
	text-transform: uppercase; 
    font-size: 15px;
    color : #fff;
    background-color: #004d8a; 
    text-decoration: none;  
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;
}
    .boutonBleu:hover {
     background-color: #007be0;
      box-shadow: 5px 5px 5px grey;
    }

.hideme
{
    opacity:0;
}

#logo {
		margin-top: 20px;  
		height:150px;
		max-width: 300px;  	
	}

#pet {	
	height: 300px;
}


#separateur img{
  height: 300px;
}


@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

@media (max-width: 899px) {
  .main    { flex: 1 100%; }
  .aside-1 { order: 2; text-align: center;} 
  .main    { order: 1; }
  .aside-2 { order: 3; text-align: center;}
  .footer  { order: 4; }
}



@media (min-width: 900px) {
  .main    { flex: 1 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }  
}



/* smartphones */
@media only screen and (min-width: 0px) and (max-width: 520px) { 
body {margin: 0 auto;}
	#logo {
		margin-top: 0px;  
		height:100px;
		max-width: 200px;  	
	}

	#pet {	
		height: 200px;
	}	
	.wrapper {
	    top: 0%;
	}

  .w-col-3{
      margin-left: 0px;
      margin-right: 0px;
    }
}


/* tablettes ou smartphone paysage */
@media only screen and (min-width: 481px) and (max-width: 719px) { 


}

/* pc */
@media only screen and (min-width: 720px) { 	

}