﻿  /* #RESET MENU
================================================== */

    @media only screen and (min-width: 960px) {
	
	ul#nav				{display:block !important;}
	

	
	}


  /* #ALL
================================================== */

    @media only screen and (min-width: 320px) and (max-width: 959px) {
		
    


		.responsive_menu		{display:block;}

		.responsive-clear_both	{ clear:both;}
		
		.fullHeight_spacer			{height:0}

		
		/* ------------------------ MENU ------------------------ */

		ul#nav					{display:none; position:relative;float:inherit;margin-top:20px;right:inherit !important; width:100%}
		ul#nav > li 				{position:relative; clear:inherit; margin:0; padding:0; width:100%; -webkit-transition: all 0.3s ease;-moz-transition: all 03s ease;-o-transition: all 0.3s ease;-ms-transition: all 0.3s ease;transition: all 0.3s ease;}
		ul#nav > li a 				{display:block;padding:10px; margin:0;width:100%; text-decoration:none; outline-style:none; float:left}
		ul#nav > li a span.nav_arrow {margin-left:10px}
		ul#nav > li:hover,	 
		ul#nav > li.nav_active 	{border-bottom:none;}


		/* ------------------------ SOUS MENU ------------------------ */

		ul#nav ul  				{position:relative;top:0;width:100%}
		ul#nav li ul 				{float:inherit;width:100%; overflow:hidden}
		ul#nav ul li 				{float:inherit;width:100%;border-left:none; border-bottom:none}
		ul#nav ul li a 				{padding:10px;}
		
		.container_style		{margin-top:20px; min-height:400px;}
		.bottom_nav				{display:inherit;float:inherit; width:100% !important}

		

 
    }
	
  /* #Portable
================================================== */

    @media only screen and (min-width: 960px) and (max-width: 1280px) {
    
		/* ------------------------ CONTAINER ------------------------ */
		.content_width			{width:920px; margin-left:auto; margin-right:auto; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
		.content_menu			{position:relative; width:920px; margin:0 auto;}
		
		.api-pos-right		 	{width:400px;}
		.api-pos-left		 	{width:400px; }
		
		.api-imgWidth			{width:400px;}
		.api-imgHeight			{height:250px;}
		

		
    }

/* #Tablet (Portrait)
================================================== */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
     
		/* ------------------------ CONTAINER ------------------------ */
		.content_width			{width:720px; margin-left:auto; margin-right:auto; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
		.content_menu			{position:relative; width:720px; margin:0 auto;}
		
		.api-fourcol			{width:33.33%;padding-bottom:33.33%;}
		.api-fivecol			{width:25%;padding-bottom:25%;}
		.api-product-fourcol	{width:33.33%;}
		
		.api-pos-right		 	{width:300px;}
		.api-pos-left		 	{width:300px; }
		
		.api-imgWidth			{width:300px;}
		.api-imgHeight			{height:200px;}

		.logo_enter img			{width:360px}
		
		
		.api-popupWidth			{max-width:700px}
		.api-popupHeight		{max-height:500px}


    }


/* #Mobile (Landscape)
================================================== */

    @media only screen and (min-width: 480px) and (max-width: 767px) {

		/* ------------------------ CONTAINER ------------------------ */
		.content_small			{width:400px;}

		.content_width			{width:100%; margin-left:auto; margin-right:auto; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
		.content_menu			{position:relative; width:100%; margin:0 auto;}
		
		.logo_menu,
		.title_menu				{padding-left:10px}
		.responsive_menu		{margin-right:10px}
		
		.api-pos-right		 	{width:100%; float:inherit; margin:0  !important}
		.api-pos-left		 	{width:100%; float:inherit; margin:0  !important}
		
		.api-imgWidth			{width:100%;}
		.api-imgHeight			{height:300px;}
		
		.api-fourcol			{width:50%;padding-bottom:50%;}
		.api-fivecol			{width:33.33%;padding-bottom:33.33%;}
		.api-product-fourcol	{width:50%;}
		

		
		
		.logo_enter img			{width:350px}
	
	
		
		
		.api-popupWidth			{max-width:460px}
		.api-popupHeight		{max-width:460px}
			
	}
	

/* #Mobile (Portrait)
================================================== */

    @media only screen and (min-width: 320px) and (max-width: 479px) {

		/* ------------------------ CONTAINER ------------------------ */
		.scrollSquare			{width:280px; margin-left:-140px;margin-top:-50px}
		.content_small			{width:100%;}
		.content_width			{width:100%; margin-left:auto; margin-right:auto; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
		.content_menu			{position:relative; width:100%; margin:0 auto;}		
		
		.api-fourcol			{width:100%;padding-bottom:100%;}
		.api-fivecol			{width:50%;padding-bottom:50%;}
		.api-product-fourcol	{width:100%;}
		.api-input_50			{float:inherit; width:100%}
		.api-responsive-margin-top_10	{margin-top:10px}
		
		.logo_menu,
		.title_menu				{padding-left:10px}
		.responsive_menu		{margin-right:10px}


		
		.enter-title			{width:100%;left:inherit; margin-left:inherit; padding:5px}
		.logo_enter img			{width:300px}
		.logo_maintenance img	{width:300px}

		.api-pos-right		 	{width:100%; float:inherit; margin:0  !important}
		.api-pos-left		 	{width:100%; float:inherit; margin:0  !important}	
		
		.api-imgWidth			{width:100%;}
		.api-imgHeight			{height:300px;}
				
		.api-popupWidth			{max-width:300px;}
		.api-popupHeight		{max-width:300px;}

		
	}






/* #SMALL HEIGHT
================================================== */

    @media only screen and (max-height: 520px) {

		.scrollSquare			{display:none !important}
		a.scrolldown			{padding:10px;}
		a.arrowdown				{display:block}

		
	}
	

/*  too small
================================================== */

    /* Note: Design for a width < 320px */
    @media only screen and (max-width: 319px) {
	
	body						{overflow:hidden; background:#fff !important}
	
	#wrapper,
	#fullHeight,	
	#top,
	#menu,	
	#footer,
	#bottom,
	#toggle,						
	#header,
	#popup_content,
	#fade,
	#supersized					{display:none !important}
	
	#intro,
	#rev_slider_20_1_wrapper,
	.enter-logo,
	.enter-title			{display:none !important}
	
	#toosmall					{display:block; color:#000}
    }
    

    
    


    
    
