/**
 *	Name: grid.css
 *
 *	T.O.C
 *	
 *	=Base Grid
 *	=Large Display
 *	=Tablet (Portrait)
 *	=Mobile (Portrait and Landscape )
 *	=Portrait and landscape
 *	=Landscape
 *	=Align
 *	=Responsive Images and Embeds
 *	=Clearing
 *	=ResponsiveFormInputs
 * 
 */
 

/* ==========================================================================
   =Base Grid
   ========================================================================== */



	.row { 
		position: relative; 
		width: 940px; 
		margin: 0 auto;
	}
	
	.row .row { 
		width: auto; 
		margin: 0;
	 }

 	.span1, 
	.span2, 
	.span3, 
	.span4, 
	.span5, 
	.span6, 
	.span7, 
	.span8, 
	.span9, 
	.span10, 
	.span11, 
	.span12 { float: left; }

	.span1 { 
		width: 60px;  
		margin-left: 20px; 
	}
	
	.span2 { 
		width: 140px; 
		margin-left: 20px; 
	}
	
	.span3 { 
		
		margin-left: 40px; 
	}
	
	.span4 { 
		width: 300px;
		margin-left: 20px; 
	}
	
	.span5 { 
		width: 380px; 
		margin-left: 20px; 
	}
	
	.span6 { 
		width: 460px; 
		margin-left: 20px; 
	}
	
	.span7 { 
		width: 540px; 
		margin-left: 20px; 
	}
	
	.span8 { 
		width: 620px; 
		margin-left: 20px; 
	}
	
	.span9 { 
		width: 900px; 
		margin-left: 20px; 
	    position:  fixed;
		
	}
	
	.span10 { 
		width: 780px; 
		margin-left: 20px; 
	}
	
	.span11 { 
		width: 860px; 
		margin-left: 20px; 
	}
	
	.span12 { 
		width: 940px; 
		margin-left: 20px; 
		
	}
	
	.span1:first-child, 
	.span2:first-child, 
	.span4:first-child, 
	.span5:first-child, 
	.span6:first-child, 
	.span7:first-child, 
	.span8:first-child, 
	.span10:first-child, 
	.span11:first-child, 
	.span12:first-child { margin-left: 0; }
 
	.visible-phone { display: none !important; }
	.visible-tablet { display: none !important; }
	.hidden-desktop { display: none !important; }
	.visible-desktop { display: inherit !important; } 

/* ==========================================================================
   =Large Display
   ========================================================================== */

#mybot { background:#fff; text-align:center; padding-top:20px; padding-bottom:20px; width:100%;}
		#mybot p {  text-align:center; width:100%;}


	@media (min-width: 1124px) {
		#mybot { background:#fff; text-align:center; padding-top:20px; padding-bottom:20px; width:100%;}
		#mybot p {  text-align:center; width:100%;}
		#megaholderica { width:100%;  height:115px;  background:#fff; }
   #header { background:#fff;}		
   .centrisi { width:1124px; height:114px;  margin:0px auto; }
   	.spaners { width:100%; height:80px; padding-top:5px; text-align:center;   }
   	 #lang {  width:100%; height:24px;  padding-bottom:4px; background:#dddde3; text-align:center; margin:0px auto; }
     #toper  { text-align:left; font-size:18px;  padding:2px 0px 2px 0px; background:#dddde3; }
	#sizica { width:100%; margin:0px auto; text-align:center; }

   #srb  { float:right; width:100px;  padding:2px; padding-right:12%; }
   #eng  { float:right; width:100px;  padding:2px;}
	
		.row { width: 1170px; }
	
	
		.span1 { 
			width: 70px;  
			margin-left: 30px; 
		}
		
		.span2 { 
			width: 170px; 
			margin-left: 30px; 
		}
		
		.span3 { 
			
			margin-left: 130px; 
		}
		.myrow { width:100%; text-align:center; background:#1a374c; min-height:200px; padding-top:10px;}
		#centrisi {  width:1000px; margin:0px auto; min-height:200px;  text-align:center; }
		.clear2 { clear:both;}
		.mspan33 { 
			padding-top:20px;
			width: 50%; 
			float:left;	
			position:relative;
			margin-left:5%;
			max-width:500px;
			margin:10px 0px 10px 0px;
			
			
		
		}
		.mspan33 img { width:80%; height:auto; height:auto;}
		.mspan33 p { 
			padding:0px!important;
			width: 80%; 
			margin:0px auto!important;
			text-align:left;
			font-size:14px;
			margin-bottom:0px!important;
			
		}
		
		.span4 { 
			width: 370px; 
			margin-left: 30px; 
		}
		
		.span5 { 
			width: 470px; 
			margin-left: 30px; 
		}
		
		.span6 { 
			width: 570px; 
			margin-left: 30px; 
		}
		
		.span7 { 
			width: 670px; 
			margin-left: 30px; 
		}
		
		.span8 { 
			width: 770px; 
			margin-left: 30px; 
		}
		
		.span9 { 
			
			width: 1124px; 
			
		}
		
		.span10 { 
			width: 970px;
			margin-left: 30px;
		}
		
		.span11 { 
			width: 1070px; 
			margin-left: 30px; 
		}
		
		.span12 { 
			width: 1170px;
			margin-left: 30px; 
		}
		a.menu-collaps {
		float: right;
		display: block;
		color: #fff;
		text-decoration: none;
		padding-right:20px;
	}
		
		
	}
 
/* ==========================================================================
   =Tablet (Portrait)
   ========================================================================== */


	@media (min-width: 768px) and (max-width: 1124px) {
		
			#megaholderica { width:100%;  height:115px;  background:#fff; }
   #header { background:#fff;}		
   .centrisi {  height:114px;  margin:0px auto; }
   	.spaners { width:100%; height:80px; padding-top:5px; text-align:center;   }
   	 #lang {  width:100%; height:24px;  padding-bottom:4px; background:#dddde3; text-align:center; margin:0px auto; }
     #toper  { text-align:left; font-size:18px;  padding:2px 0px 2px 0px; background:#dddde3; }
	#sizica { width:100%; margin:0px auto; text-align:center; }

   #srb  { float:right; width:100px;  padding:2px; padding-right:5%; }
   #eng  { float:right; width:100px;  padding:2px;}
   .mspan33 { 
			padding-top:20px;
			width: 50%; 
			float:left;	
			position:relative;
			margin-left:10%;
			max-width:500px;
			margin:10px 0px 10px 0px;
			
			
		
		}
		.mspan33 img { width:80%; height:auto; height:auto;}
		.mspan33 p { 
			padding:0px!important;
			width: 80%; 
			margin:0px auto!important;
			text-align:left;
			font-size:14px;
			margin-bottom:0px!important;
			
		}
   
   
		
		.row { width: 705px;  }
		
		
	
		.span1 { 
			width: 45px;  
			margin-left: 15px; 
		}
		
		.span2 { 
			width: 105px; 
			margin-left: 15px; 
		}
		
		.span3 { 
			width: 165px; 
			margin-left: 15px; 
		}
		
		.span4 { 
			width: 225px; 
			margin-left: 15px; 
		}
		
		.span5 { 
			width: 285px; 
			margin-left: 15px; 
		}
		
		.span6 { 
			width: 345px; 
			margin-left: 15px; 
		}
		
		.span7 { 
			width: 405px; 
			margin-left: 15px; 
		}
		
		.span8 { 
			width: 465px; 
			margin-left: 15px; 
		}
		
		.span9 { 
			width: 705px; 
			margin-left: 15px; 
		}
		
		.span10 { 
			width: 585px;
			margin-left: 15px; 
		}
		
		.span11 { 
			width: 645px; 
			margin-left: 15px; 
		}
		
		.span12 { 
			width: 705px;
			margin-left: 15px; 
		}
		
		.hidden-desktop { display: inherit !important; } 
		.visible-desktop { display: none !important; }
		.visible-tablet { display: inherit !important; } 
		.hidden-tablet { display: none !important; }
		a.menu-collaps {
		float: right;
		display: block;
		color: #fff;
		text-decoration: none;
		padding-right:20px;
	}
		
	}

/* ==========================================================================
   =Mobile (Portrait and Landscape )
   ========================================================================== */

/* =Portrait and landscape
   ========================================================================== */
   
	@media (max-width: 767px) {
		
   	#megaholderica { width:100%;  height:115px;  background:#fff; }
   #header { background:#fff;}		
   .centrisi {  height:114px;  margin:0px auto; }
   	.spaners { width:100%; height:80px; padding-top:5px; text-align:center;   }
   	 #lang {  width:100%; height:24px;  padding-bottom:4px; background:#dddde3; text-align:center; margin:0px auto; }
     #toper  { text-align:left; font-size:18px;  padding:2px 0px 2px 0px; background:#dddde3; }
	#sizica { width:100%; margin:0px auto; text-align:center; }

   #srb  { float:right; width:100px;  padding:2px; padding-right:5%; }
   #eng  { float:right; width:100px;  padding:2px;}
		.mspan33 img { width:80%; height:auto; height:auto;}
		.mspan33 p { 
			padding:0px!important;
			width: 80%; 
			margin:0px auto!important;
			text-align:left;
			font-size:14px;
			margin-bottom:0px!important;
			
		}
		
		.row { width: auto; }
		
		
		.row { padding: 0 20px; }
		
		.row .row { 
			width: auto; 
			padding: 0; 
			margin: 0; 
		}	
		
		.span1,
		.span2,
		.span3,
		.span4,
		.span5,
		.span6,
		.span7,
		.span8,
		.span9,
		.span10,
		.span11,
		.span12 { 
			float: none;
			display: block;
			width: 100%;
			-webkit-box-sizing: border-box;
			   -moz-box-sizing: border-box;
					box-sizing: border-box;
			margin-left: 0;
		}
		
		.hidden-desktop { display: inherit !important; }
		.visible-desktop { display: none !important; }
		.visible-phone { display: inherit !important; }
		.hidden-phone { display: none !important; }
		
	}
	
/* =Landscape
   ========================================================================== */
	
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
		.row { padding: 0 40px; }
		
		#megaholderica { width:100%;  height:115px;  background:#fff; }
   #header { background:#fff;}		
   .centrisi {  height:114px;  margin:0px auto; }
   	.spaners { width:100%; height:80px; padding-top:5px; text-align:center;   }
   	 #lang {  width:100%; height:24px;  padding-bottom:4px; background:#dddde3; text-align:center; margin:0px auto; }
     #toper  { text-align:left; font-size:18px;  padding:2px 0px 2px 0px; background:#dddde3; }
	#sizica { width:100%; margin:0px auto; text-align:center; }

   #srb  { float:right; width:100px;  padding:2px; padding-right:5%; }
   #eng  { float:right; width:100px;  padding:2px;}
		
	}	
	
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
		.row { padding: 0 40px; }
		#megaholderica { width:100%;  height:115px;  background:#fff; }
   #header { background:#fff;}		
   .centrisi {  height:114px;  margin:0px auto; }
   	.spaners { width:100%; height:80px; padding-top:5px; text-align:center;   }
   	 #lang {  width:100%; height:24px;  padding-bottom:4px; background:#dddde3; text-align:center; margin:0px auto; }
     #toper  { text-align:left; font-size:18px;  padding:2px 0px 2px 0px; background:#dddde3; }
	#sizica { width:100%; margin:0px auto; text-align:center; }

   #srb  { float:right; width:100px;  padding:2px; padding-right:5%; }
   #eng  { float:right; width:100px;  padding:2px;}
		
	}	
	@media only screen and (min-width: 220px) and (max-width: 480px) {
		
	.mspan33 p { 
			padding:0px!important;
			width: 80%; 
			margin:0px auto!important;
			text-align:left;
			font-size:12px;
			margin-bottom:0px!important;
			
		}
			#megaholderica { width:100%;  height:115px;  background:#fff; }
   #header { background:#fff;}		
   .centrisi {  height:114px;  margin:0px auto; }
   	.spaners { width:100%; height:80px; padding-top:5px; text-align:center;   }
   	 #lang {  width:100%; height:24px;  padding-bottom:4px; background:#dddde3; text-align:center; margin:0px auto; }
     #toper  { text-align:left; font-size:15px;  padding:2px 0px 2px 0px; background:#dddde3;  }
	#sizica { width:100%; margin:0px auto; text-align:center; }

   #srb  { float:right; width:80px;  padding:2px; text-align:center; font-size:12px; }
   #eng  { float:left; width:80px;  padding:2px; text-align:center; font-size:12px;}
		
		}
	
/* ==========================================================================
   =Align
   ========================================================================== */

	.float-left { float: left; }
	.float-right { float: right; }

/* ==========================================================================
   =Responsive Images and Embeds
   ========================================================================== */

	.responsive-img { 
		max-width: 100%; 
		height: auto; 
	}
	
	/**
 	 * 1. 16/9 ratio
 	 */
	 
	.responsive-embed {
		position: relative;
		overflow: hidden;
		height: 0;
		padding: 0;
		padding-bottom: 56.25%; /* 1 */	
		margin-bottom: 20px;
	}

	.responsive-embed iframe,
	.responsive-embed object,
	.responsive-embed embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

/* ==========================================================================
   =Clearing
   ========================================================================== */

	/**
 	 * Automatically Clear Fix rows
 	 */
	 
	.row:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}

	/**
 	 * Clear Fix hack
	 * Usage:  add  class="fixed"  to div's that have floated elements in them
 	 */
	 
	.fixed:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
	
	/**
 	 * Clear content
	 * Usage:  <br class="clear"> 
 	 */	
	 
	.clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
	} 
	
/* ==========================================================================
   =ResponsiveFormInputs
   ========================================================================== */
	
	/**
	 * 1. Reset float inherited from .span*	
 	 * 2. Reset margin-left inherited from .span*
 	 */
	 
	input.span1,
	textarea.span1,
	select.span1,
	input.span2,
	textarea.span2,
	select.span2,
	input.span3,
	textarea.span3,
	select.span3,
	input.span4,
	textarea.span4,
	select.span4,
	input.span5,
	textarea.span5,
	select.span5,
	input.span6,
	textarea.span6,
	select.span6,
	input.span7,
	textarea.span7,
	select.span7,
	input.span8,
	textarea.span8,
	select.span8,
	input.span9,
	textarea.span9,
	select.span9,
	input.span10,
	textarea.span10,
	select.span10,
	input.span11,
	textarea.span11,
	select.span11,
	input.span12,
	textarea.span12,
	select.span12 {
		float: none; 	/* 1 */
		margin-left: 0; /* 2 */
	}