body {
	background: white;    
}

	

@media screen  and (max-width: 979px) /* blue */ {

	
  .header{
		margin-left: 0%;
		width:100%;
		top: 0px;
	}
	.header a{
		color:#fff;
		font-size: 1.5em;
		padding: 5px;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	.logo {
		position: absolute;
		top: 0px;
		width: 100%;
	}
	
	.logo a{
		position: absolute;
		top: -10px;
		left: 10px;
		padding-top: 0px;
		font-size:1.5em;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	
	.logo p{
		font-size:1em;
		position: absolute;
		top: 70px;
		left: 5px;
    }
	
	.rslides {
  		height:150px;
	}
	
	.caption{
		width: 100%;
		height: auto;
		position: absolute;
		top: 12%;
		left: 16%;
	}
	
	.caption h2{
		position: absolute;
		font-size: 22px;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	.caption h3{	
		position: absolute;
		font-size: 20px;
		margin-top: 27px;
		margin-left: 100px;
		padding:0.6em 1em;
		text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
	}
	
	.tel{
		margin-top:93px;
	}
	
	ul.soup-receips li span{
		font-size:1.1em;
	}
	
	figure.effect-duke{
		/*height: 200px;*/
	}
	
	figure.effect-duke-size {
		height: 130px;
	}
	
	@keyframes example {
		0%   {font-size:30px;}
		5%   {font-size:30px;}
		10%  {font-size:30px;}
		15%  {font-size:30px;}
		20%  {font-size:30px;}
		25%  {font-size:30px;}
		30%  {font-size:30px;}
		32%  {font-size:30px;}
		40%  {font-size:30px;}
		45%  {font-size:30px;}
		50%  {font-size:30px;}
		55%  {font-size:30px;}
		60%  {font-size:30px;}
		65%  {font-size:30px;}
		70%  {font-size:30px;}
		75%  {font-size:30px;}
		80%  {font-size:30px;}
		85%  {font-size:30px;}
		90%  {font-size:30px;}
		95%  {font-size:30px;}
		100% {font-size:30px;}
    }
	
	.top-nav{
		position: absolute;
		left:400px;
		top: -10px;
	}
	
	.top-nav ul li a{
		font-size:1.2em;
		border-radius: 10px;
		box-shadow: #000 0 3px 2px, rgba(0, 0, 0, 0.3) 0 2px 2px;
		padding: 0.2em 0.2em;
	}
	
	i.fbk, i.ggl {
	    width: 28px;
	    height: 28px;
		background-size: 28px 28px;
	}
	
	
}

@media screen and (max-width: 640px) /* Mobile blueviolet*/ {
 

  .header{
		margin-left: 0%;
		width:100%;
		top: 0px;
	}
	.header a{
		color:#fff;
		font-size: 1.5em;
		padding: 5px;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	.logo {
		position: absolute;
		top: 0px;
		width: 100%;
	}
	
	.logo a{
		position: absolute;
		top: -10px;
		left: 10px;
		padding-top: 0px;
		font-size:1.5em;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	
	.logo p{
		font-size:1em;
		position: absolute;
		top: 70px;
		left: 5px;
    }
	
	.rslides {
  		height:150px;
	}
	
	.caption{
		width: 100%;
		height: auto;
		position: absolute;
		top: 12%;
		left: 16%;
	}
	
	.caption h2{
		position: absolute;
		font-size: 20px;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	.caption h3{	
		position: absolute;
		font-size: 18px;
		margin-top: 27px;
		margin-left: 100px;
		padding:0.6em 1em;
		text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
	}
	
	.tel{
		margin-top:75px;
	}
	
	ul.soup-receips li span{
		font-size:0.9em;
	}
	
	figure.effect-duke{
		/*height: 200px;*/
	}
	
	figure.effect-duke-size {
		height: 130px;
	}
	
	@keyframes example {
		0%   {font-size:30px;}
		5%   {font-size:30px;}
		10%  {font-size:30px;}
		15%  {font-size:30px;}
		20%  {font-size:30px;}
		25%  {font-size:30px;}
		30%  {font-size:30px;}
		32%  {font-size:30px;}
		40%  {font-size:30px;}
		45%  {font-size:30px;}
		50%  {font-size:30px;}
		55%  {font-size:30px;}
		60%  {font-size:30px;}
		65%  {font-size:30px;}
		70%  {font-size:30px;}
		75%  {font-size:30px;}
		80%  {font-size:30px;}
		85%  {font-size:30px;}
		90%  {font-size:30px;}
		95%  {font-size:30px;}
		100% {font-size:30px;}
    }
	
	.top-nav{
		position: absolute;
		left:320px;
		top: -10px;
	}
	
	.top-nav ul li a{
		font-size:1.0em;
		border-radius: 10px;
		box-shadow: #000 0 3px 2px, rgba(0, 0, 0, 0.3) 0 2px 2px;
		padding: 0.2em 0.2em;
	}
	
	i.fbk, i.ggl {
	    width: 22px;
	    height: 22px;
		background-size: 22px 22px;
	}
	
	
}

@media screen and (max-width: 520px) /* Mobile fuchsia*/ {
 
	
  .header{
		margin-left: 0%;
		width:100%;
		top: 0px;
	}
	.header a{
		color:#fff;
		font-size: 1.26em;
		padding: 5px;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	.logo {
		position: absolute;
		top: 0px;
		width: 100%;
	}
	
	.logo a{
		position: absolute;
		top: -10px;
		left: 5px;
		padding-top: 0px;
		font-size:1.2em;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	
	.logo p{
		font-size:0.8em;
		position: absolute;
		top: 45px;
		left: 0px;
    }
	
	.rslides {
  		height:140px;
	}
	
	.caption{
		width: 100%;
		height: auto;
		position: absolute;
		top: 12%;
		left: 15%;
	}
	
	.caption h2{
		position: absolute;
		font-size: 15px;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	.caption h3{	
		position: absolute;
		font-size: 13px;
		margin-top: 27px;
		margin-left: 100px;
		padding:0.6em 1em;
		text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
	}
	
	.tel{
		margin-top:65px;
	}
	
	ul.soup-receips li span{
		font-size:0.9em;
	}
	
	figure.effect-duke{
		/*height: 200px;*/
	}
	
	figure.effect-duke-size {
		height: 130px;
	}
	
	@keyframes example {
		0%   {font-size:30px;}
		5%   {font-size:30px;}
		10%  {font-size:30px;}
		15%  {font-size:30px;}
		20%  {font-size:30px;}
		25%  {font-size:30px;}
		30%  {font-size:30px;}
		32%  {font-size:30px;}
		40%  {font-size:30px;}
		45%  {font-size:30px;}
		50%  {font-size:30px;}
		55%  {font-size:30px;}
		60%  {font-size:30px;}
		65%  {font-size:30px;}
		70%  {font-size:30px;}
		75%  {font-size:30px;}
		80%  {font-size:30px;}
		85%  {font-size:30px;}
		90%  {font-size:30px;}
		95%  {font-size:30px;}
		100% {font-size:30px;}
    }
	
	.top-nav{
		position: absolute;
		left:210px;
		top: -10px;
	}
	
	.top-nav ul li a{
		font-size:1em;
		border-radius: 10px;
		box-shadow: #000 0 3px 2px, rgba(0, 0, 0, 0.3) 0 2px 2px;
		padding: 0.2em 0.2em;
	}
	
	i.fbk, i.ggl {
	    width: 22px;
	    height: 22px;
		background-size: 22px 22px;
	}
	
	
}

@media screen and (max-width: 410px) /* Mobile aqua*/ {
  
  
  
  .header{
		margin-left: 0%;
		width:100%;
		top: 0px;
	}
	.header a{
		color:#fff;
		font-size: 1.26em;
		padding: 5px;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	.logo {
		position: absolute;
		top: 0px;
		width: 100%;
	}
	
	.logo a{
		position: absolute;
		top: -10px;
		left: 5px;
		padding-top: 0px;
		font-size:1.0em;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	
	.logo p{
		font-size:0.5em;
		position: absolute;
		top: 35px;
		left: 15px;
    }
	
	.rslides {
  		height:140px;
	}
	
	.caption{
		width: 100%;
		height: auto;
		position: absolute;
		top: 12%;
		left: 0%;
	}
	
	.caption h2{
		position: absolute;
		font-size: 16px;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	.caption h3{	
		position: absolute;
		font-size: 10px;
		margin-top: 27px;
		margin-left: 100px;
		padding:0.6em 1em;
		text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
	}
	
	.tel{
		margin-top:70px;
	}
	
	ul.soup-receips li span{
		font-size:0.9em;
	}
	
	figure.effect-duke{
		/*height: 200px;*/
	}
	
	figure.effect-duke-size {
		height: 130px;
	}
	
	@keyframes example {
		0%   {font-size:30px;}
		5%   {font-size:30px;}
		10%  {font-size:30px;}
		15%  {font-size:30px;}
		20%  {font-size:30px;}
		25%  {font-size:30px;}
		30%  {font-size:30px;}
		32%  {font-size:30px;}
		40%  {font-size:30px;}
		45%  {font-size:30px;}
		50%  {font-size:30px;}
		55%  {font-size:30px;}
		60%  {font-size:30px;}
		65%  {font-size:30px;}
		70%  {font-size:30px;}
		75%  {font-size:30px;}
		80%  {font-size:30px;}
		85%  {font-size:30px;}
		90%  {font-size:30px;}
		95%  {font-size:30px;}
		100% {font-size:30px;}
    }
	
	.top-nav{
		position: absolute;
		left:135px;
		top: -10px;
	}
	
	.top-nav ul li a{
		font-size:0.8em;
		border-radius: 10px;
		box-shadow: #000 0 3px 2px, rgba(0, 0, 0, 0.3) 0 2px 2px;
		padding: 0.2em 0.2em;
	}
	
	i.fbk, i.ggl {
	    width: 18px;
	    height: 18px;
		background-size: 18px 18px;
	}
	
	
}

@media screen and (max-width: 375px) /* Mobile green*/ {
  
  .header{
		margin-left: 0%;
		width:100%;
		top: 0px;
	}
	.header a{
		color:#fff;
		font-size: 1.26em;
		padding: 5px;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	.logo {
		position: absolute;
		top: 0px;
		width: 100%;
	}
	
	.logo a{
		position: absolute;
		top: -10px;
		left: 5px;
		padding-top: 0px;
		font-size:1.0em;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	
	.logo p{
		font-size:0.5em;
		position: absolute;
		top: 35px;
		left: 12px;
    }
	
	.rslides {
  		height:110px;
	}
	
	.caption{
		width: 100%;
		height: auto;
		position: absolute;
		top: 12%;
		left: 0%;
	}
	
	.caption h2{
		position: absolute;
		font-size: 16px;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	.caption h3{	
		position: absolute;
		font-size: 10px;
		margin-top: 27px;
		margin-left: 100px;
		padding:0.6em 1em;
		text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
	}
	
	.tel{
		margin-top:55px;
	}
	
	ul.soup-receips li span{
		font-size:0.9em;
	}
	
	figure.effect-duke{
		/*height: 200px;*/
	}
	
	figure.effect-duke-size {
		height: 130px;
	}
	
	@keyframes example {
		0%   {font-size:30px;}
		5%   {font-size:30px;}
		10%  {font-size:30px;}
		15%  {font-size:30px;}
		20%  {font-size:30px;}
		25%  {font-size:30px;}
		30%  {font-size:30px;}
		32%  {font-size:30px;}
		40%  {font-size:30px;}
		45%  {font-size:30px;}
		50%  {font-size:30px;}
		55%  {font-size:30px;}
		60%  {font-size:30px;}
		65%  {font-size:30px;}
		70%  {font-size:30px;}
		75%  {font-size:30px;}
		80%  {font-size:30px;}
		85%  {font-size:30px;}
		90%  {font-size:30px;}
		95%  {font-size:30px;}
		100% {font-size:30px;}
    }
	
	.top-nav{
		position: absolute;
		left:135px;
		top: -10px;
	}
	
	.top-nav ul li a{
		font-size:0.8em;
		border-radius: 10px;
		box-shadow: #000 0 3px 2px, rgba(0, 0, 0, 0.3) 0 2px 2px;
		padding: 0.2em 0.2em;
	}
	
	i.fbk, i.ggl {
	    width: 18px;
	    height: 18px;
		background-size: 18px 18px;
	}
	
}

@media screen and (max-width: 320px) /* Mobile */ {
 

	
  .header{
		margin-left: 0%;
		width:100%;
		top: 0px;
	}
	.header a{
		color:#fff;
		font-size: 1.26em;
		padding: 5px;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	.logo {
		position: absolute;
		top: 0px;
		width: 100%;
	}
	
	.logo a{
		position: absolute;
		top: -10px;
		left: 5px;
		padding-top: 0px;
		font-size:1.0em;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	
	.logo p{
		font-size:0.5em;
		position: absolute;
		top: 30px;
		left: 5px;
    }
	
	.rslides {
  		height:140px;
	}
	
	.caption{
		width: 100%;
		height: auto;
		position: absolute;
		top: 12%;
		left: 0%;
	}
	
	.caption h2{
		position: absolute;
		font-size: 16px;
		text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	}
	.caption h3{	
		position: absolute;
		font-size: 10px;
		margin-top: 27px;
		margin-left: 100px;
		padding:0.6em 1em;
		text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
	}
	
	.tel{
		margin-top:70px;
	}
	
	ul.soup-receips li span{
		font-size:0.9em;
	}
	
	figure.effect-duke{
		/*height: 200px;*/
	}
	
	figure.effect-duke-size {
		height: 130px;
	}
	
	@keyframes example {
		0%   {font-size:30px;}
		5%   {font-size:30px;}
		10%  {font-size:30px;}
		15%  {font-size:30px;}
		20%  {font-size:30px;}
		25%  {font-size:30px;}
		30%  {font-size:30px;}
		32%  {font-size:30px;}
		40%  {font-size:30px;}
		45%  {font-size:30px;}
		50%  {font-size:30px;}
		55%  {font-size:30px;}
		60%  {font-size:30px;}
		65%  {font-size:30px;}
		70%  {font-size:30px;}
		75%  {font-size:30px;}
		80%  {font-size:30px;}
		85%  {font-size:30px;}
		90%  {font-size:30px;}
		95%  {font-size:30px;}
		100% {font-size:30px;}
    }
	
	.top-nav{
		position: absolute;
		left:135px;
		top: -10px;
	}
	
	.top-nav ul li a{
		font-size:0.8em;
		border-radius: 10px;
		box-shadow: #000 0 3px 2px, rgba(0, 0, 0, 0.3) 0 2px 2px;
		padding: 0.2em 0.2em;
	}
	
	i.fbk, i.ggl {
	    width: 18px;
	    height: 18px;
		background-size: 18px 18px;
	}
	
  
	
}