﻿
 /* PRO-ANA SEA landing page*/
 
.mySecTitle a.myPageNav:nth-of-type(2) {
    display: none!important;
}


#content * {
	box-sizing: border-box;
}


@viewport {
    width: device-width;
    zoom: .5;
  }


body {
        -moz-transform:scale(1);
        -webkit-transform:scale(1);
        -o-transform:scale(1);
        -ms-transform:scale(1);
    } 






@media handheld {
  #intro .img-cover, #intro2 .balances .myTextBox, #intro3 .balances .myTextBox, #intro4 .balances .myTextBox  {
    background: none;
  }
}

/*No breadcrumbs*/
#breadcrumb_layer {
	display: none;
}



.myMobileImage, h1.myMobileHeader {
			display: none;
}














/* /////////////////////////////////////////////////////////////////////// */

/* 		  	  					   Default design settings				   */

/* /////////////////////////////////////////////////////////////////////// */


h2.adHocTriage#myShopRainin { display: none; }



#intro, #intro2, #intro3, #intro22 {
	width: 100%;
	padding-top: 0px;
	position: relative;
	margin-bottom: 0px;
}


/*16:9 proportions*/
section#intro::after, section#intro2::after, section#intro22::after  {
	padding-top: 56.25%;
	display: block;
	content: "";
}



/* Background Images */

		/*block 1 - hero block*/	
			#intro .img-cover {
				width: 100%;
				/*min-height: 700px;*/
				position: absolute;

				/*position: absolute;*/
				top: 0;
				  bottom: 0;
				  right: 0;
				  left: 0;

				background: url('https://media.mt.com/dam/MTPRO/PRO_Landing_pg/METTLER-TOLEDO/sea/DO-hero8_update1.jpg') no-repeat right center;
				background-size: contain;
				-webkit-background-size: contain;
				-moz-background-size: contain;
				-o-background-size: contain;

				border-bottom: 3px solid #f0f0f0;

				z-index: 10;
				-webkit-box-shadow: 0px 10px 25px -4px rgba(0,0,0,0.49);
				-moz-box-shadow: 0px 10px 25px -4px rgba(0,0,0,0.49);
				box-shadow: 0px 10px 25px -4px rgba(0,0,0,0.49);
			}

		/*block 2 - video section*/	
			#intro2 .img-cover {
				width: 100%;
				/*min-height: 700px;*/
				position: absolute;

				/*position: absolute;*/
				top: 0;
				  bottom: 0;
				  right: 0;
				  left: 0;

				background: url('https://media.mt.com/dam/MTPRO/PRO_Landing_pg/METTLER-TOLEDO/sea/DO-hero9_update.jpg') no-repeat right center;
				background-size: contain;
				-webkit-background-size: contain;
				-moz-background-size: contain;
				-o-background-size: contain;

				border-bottom: 3px solid #f0f0f0;

				/*z-index: 9;*/
				-webkit-box-shadow: 0px 10px 25px -4px rgba(0,0,0,0.49);
				-moz-box-shadow: 0px 10px 25px -4px rgba(0,0,0,0.49);
				box-shadow: 0px 10px 25px -4px rgba(0,0,0,0.49);
			}

		/*block 3 - about Rainin footer */	
			 
			section#intro3 {
			    border: 1px solid #f0f0f0;
			    background: #ffffff;
			    background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%);
			    background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
			    background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
			    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
			}

			#intro22 .img-cover {
				width: 100%;
				/*min-height: 700px;*/
				position: absolute;

				/*position: absolute;*/
				top: 0;
				  bottom: 0;
				  right: 0;
				  left: 0;

				background: url('https://media.mt.com/dam/MTPRO/PRO_Landing_pg/METTLER-TOLEDO/sea/DO-update_hero10.jpg') no-repeat right center;
				background-size: contain;
				-webkit-background-size: contain;
				-moz-background-size: contain;
				-o-background-size: contain;

				border-bottom: 3px solid #f0f0f0;

				z-index: 9;
				-webkit-box-shadow: 0px 10px 25px -4px rgba(0,0,0,0.49);
				-moz-box-shadow: 0px 10px 25px -4px rgba(0,0,0,0.49);
				box-shadow: 0px 10px 25px -4px rgba(0,0,0,0.49);
			}

 


/* Embedded youtube video*/
				/*#intro2 .balances .myVideoWrapper {
					position: absolute;
					top: 11%;
					left: 4%;
					width: 700px;
				}

				#video {
					border: 10px solid #f8f8f8;
				}

				.myVideoShadow {
					margin: 0;
					position: relative;
					width: 100%; height: auto;
					top: -3px; left: 4px;
				}

				.myVideoWrapper h3 {
					position: relative;
					bottom: 30px;
					left: 20px;

					font-size: 1.5rem;
					line-height: 2rem;
					font-weight: normal;
				}*/




/*------------  fonts settings -------------*/

/*				h1 {
					font-size: 3rem; 
					line-height: 3.65rem;
					
					margin-bottom: 30px;
					display: block;
					font-weight: normal;
				}



				.img-cover h1 b{
				    font-size: 6rem;
				    line-height: 6rem;
				    font-weight: normal;
				    margin-bottom: 30px;
				    font-family: Arial, sans-serif;
				}*/

		
				/*Section 1 / Header */
				 	
				 	/*Rainin Pipette - h1 @ Section 1, .mySectionTitle @ Section 2,3, ...*/
						.img-cover *, .valueContent * {
							transition: color 0.5s ease;
						}

				 		.img-cover h1,
				 		.mySectionTitle {
				 			/*font-size: 30px;*/
				 			font-size: 1.5vw;
				 			font-weight: bold;
				 			margin-bottom: 0;
				 		}
				 		
				 		/*anchor links @ the top of the section*/
				 		.img-cover a.myPageNav {
				 			text-decoration: none;
				 			/*font-size: 18px;*/
				 			font-size: 1vw;
				 			cursor: pointer;
				 			display: inline-block;
				 			margin: 0 0 0 0;
				 		}

				 		.img-cover a.myPageNav.active {
				 			font-weight: bold;
				 		}

							/*add â€¢ before each link, except first in a row*/
					 		.img-cover a.myPageNav:before {
					 			display: inline-block;
					 			content: "•";
					 			text-decoration: none;
					 			/*font-size: 18px;*/
					 			font-size: 1vw;
					 			margin: 0 5px;
					 		}

					 		.img-cover h1 + a.myPageNav:before, .img-cover .mySectionTitle + a.myPageNav:before {
					 			display: none;
					 			margin-left: 0;
					 		}
 
				 	
				 	/*main triage links*/
				 		/*big ones - e.g. Electronic, Manual and Tips*/
				 		.img-cover h2 a, .img-cover h2 {
				 			text-decoration: none;
				 			/*font-size: 48px;*/
				 			font-size: 3vw;
				 			/*letter-spacing: -2px; */
				 			letter-spacing: -0.1vw;
				 			margin: 2rem 0 0 0;

				 		}

				 		/*smaller links */
				 		.img-cover h3 a, .img-cover h3 {
				 			display: inline-block;
				 			display: inline;
				 			text-decoration: none;
				 			/*font-size: 18px;*/
				 			font-size: 1vw;
				 			/*line-height: 24px;*/
				 			line-height: 1.5vw;
				 			font-weight: normal;
				 			cursor: pointer;
				 			transition: color 0.5s ease;

				 			margin:0;padding:0;
				 		}
				 			
				 			/*add â€¢ before each link, except first in a row*/
				 			.img-cover h3 a:before {
				 				display: inline-block;
				 				content: "•";
				 				text-decoration: none;
				 				/*font-size: 18px;*/
				 				font-size: 1vw;
				 				margin: 0 5px;
				 			}

				 			.img-cover h2 + h3>a:before {
				 				display: none;
				 				margin-left: 0;
				 			}


				 	/*adhoc triage links*/
				 	.myTriage h2.adHocTriage a,
				 	.myTriage h2.adHocTriage {
				 		/*font-size: 30px;*/
				 		font-size: 1.5vw;
				 		/*line-height: 35px;*/
				 		line-height: 1.8vw;
				 		font-weight: normal;
				 		/*letter-spacing: -1px; */
				 			letter-spacing: 0;
				 		margin: .5rem 0 0 0;
				 		
				 	}

										 	/*h3 + h2.adHocTriage {
										 		margin-top: 4rem;
										 	}

										 	h2.adHocTriage:first-of-type {
										 		margin-top: 4rem;
										 	}*/


					section#intro2 h2 {
						  font-weight: normal;
					}


					/*plain text*/
					.myTextBox p, .myTextBox ul li {
						font-size: 1vw;
						line-height: 1.3vw;
					}

					.myTextBox.myAboutTitle { width: 80% }
					.myTextBox.myAboutText {
						width: 30%;
						float: left;
						margin: 0 0 1vw 0;
						 
					}

					.myAboutText p, .myAboutText ul {
					    margin: 0 0 1vw 0;
					}

					.myTextBox.myAboutTitle h3, .myTextBox.myAboutText h3 {
						font-size: 1.2vw;
						line-height: 1.5vw;
						font-weight: bold;
						display: inline-block;
					    margin-bottom: 1vw;
					    margin-top: 1vw;
 
					}

					 
				/*links and pdfs*/
					a.my-pdf, a.mylink {
					    display: block;		     
					    font-size: 1vw;
					    line-height: 1.3vw;
					    margin: 1vw 0;
					    z-index: 10;
					    text-decoration: none;

					}
							a.my-pdf::before, a.mylink::before {
								content: "";
								display: inline-block;
								width: 1vw; height: 1vw;
								position: relative;
							    top: 0.1vw;
							    margin-right: 0.1vw;

								background-image: url(https://media.mt.com/dam/LabDiv/graphics/39507.gif);
								background-position: center center;
								background-repeat: no-repeat;

								background-size: contain;
								-webkit-background-size: contain;
								-moz-background-size: contain;
								-o-background-size: contain;
							}

							a.mylink::before {
							    background-image: url(https://media.mt.com/dam/LabDiv/graphics/triangle-blt2.png);
							}


/*------------  Text boxes  -------------*/


		/*section 1 and default*/
		.myTextBox {
			position: relative;
			width: 48%;
			/*top: 10%;*/
			left: 0%;



			margin: 0;
			box-sizing: border-box;
			padding-right: 40px;
			padding-top: 30px;
			padding-bottom: 20px;
			padding-left: 60px;

		}

		
		.mySecTitle {
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			margin: 0;
			padding: 30px 0 10px 60px;

		}

		.myTriage {
			position: relative;
			width: 48%;
			/*bottom: 1%;*/
			left: 0%;


			margin: 0;
			box-sizing: border-box;
			/*padding: 40px;*/
			padding: 4vw;
			padding-left: 60px;
		}

 
 




/*------------  part 3 - featured materials -------------*/
 
.valueContent#pip_library  .brochureThumb {
	display: none;
}

.valueContent#pip_library {
	background-color: #c7eafb!important;
}
 
/*--*/


.valueContent {
	display: inline-block;
	position: relative;
	width: 95%;
	vertical-align: top;
	/*min-height: 15vh;*/
	min-height: 900px;

	/*float: left;*/

	padding: 2rem 2rem;
	margin: 2rem 0 2rem 2rem;

	background-color: #f8f8f8;
}

	/*images*/
		.valueContent .imageBox {
			display: block;
			position: relative;
			width: 100%;
			height: auto;
			padding: 0;
			margin: 0rem 0 2rem 0;
		}

			.valueContent .imageBox img {
				width: 100%;
				height: auto;
			}

		.valueContent .brochureThumb {
			display: block;
			position: relative;
			width: 35%;
			height: auto;
			padding: 0;
			margin: 0rem 1.2rem 0.6rem 0rem;
			float: left;
		}

			.valueContent .brochureThumb img {
				width: 100%;
				height: auto;
				/*border: 1px solid #f0f0f0;*/
				box-shadow: 0px 1px 3px #979797;
			}









.valueContent h3 {
	display: block;
	/*font-size: 3rem;
	line-height: 3.5rem;*/
	font-size: 1.8vw;
	line-height: 2.3vw;
	font-weight: normal;
	padding:0;
	margin: 0 0 1rem 0;
}

.valueContent p {
	/*font-size: 1.5rem;
	line-height: 2rem;*/
	font-size: 1vw;
	line-height: 1.4vw;
	font-weight: normal;
	display: block;
	padding: 0 0 0 0;
	margin: 0 0 0.8rem 0;
}
 
#content .valueContent ul {
    font-size: 10pt;
    line-height: 1.4vw;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.valueContent a {
	display: block;
	margin: 1rem 0 0 0;
}
/*------------  part 3 - featured materials -------------*/








/*------------  Green buttons  -------------*/
	a.myGreenButton {
		font-size: 2rem;
		line-height: 3rem;

		color: #fff;
		display: inline-block;
		padding: 15px 10px;
		background-color: #66bc29;
		margin: 20px 0 15px 0;
		border: 3px solid #66bc29;
		border-radius: 6px;

	}

			a.myGreenButton:hover {
				text-decoration: underline;
			}
a, a:hover {

text-decoration: none;
			}


			.balances .myTextBox a.myGreenButton {
				float: left;
				/*margin: 15px 25px 25px 0;*/
				margin-right: 25px;

			}
/*------------  Green buttons  -------------*/



 










 



/* /////////////////////////////////////////////////////////////////////// */

/* 		  	  					   1350 px    		  					   */

/* /////////////////////////////////////////////////////////////////////// */


@media only screen and (max-width : 1350px) {
 
 	/*position adjustment*/
	.myTextBox {
		top: 0;
	}

	/*font size*/

		/* h3 main triage  links @ intro section*/
		.img-cover h3 a, .img-cover h3 {
		    font-size: 1.2vw;
			line-height: 1.6vw; 
		}

		/*p text inside of news*/
		.myTextBox p, .myTextBox ul li, a.my-pdf, a.mylink {
		    font-size: 1.2vw;
		    line-height: 1.6vw;
		}

					a.my-pdf::before, a.mylink::before {
					    height: 1.2vw;
				   	}


		/*Value content promo*/
		.valueContent h3 {
			font-size: 2vw;
			line-height: 3vw;
		}

		.valueContent p {
			font-size: 1.2vw;
			line-height: 1.6vw;
		}

		.valueContent .brochureThumb {
		    width: 35%;
		}

	/*other fixes*/
		a.my-pdf, a.mylink {
		     
		}

}

 
 

 
/* /////////////////////////////////////////////////////////////////////// */

/* 		  	  				900 /  1040 px    		  					   */

/* /////////////////////////////////////////////////////////////////////// */


@media only screen and (max-width : 900px) {


			/*sections and background images*/
			.img-cover {
				padding-bottom: 5%;
			}

			#intro .img-cover, #intro2 .img-cover, #intro22 .img-cover  {
				background-size: cover;
			    -webkit-background-size: cover;
			    -moz-background-size: cover;
			    -o-background-size: cover;

			    -webkit-box-shadow: 0px 2px 25px -4px rgba(0,0,0,0.49);
		        -moz-box-shadow: 0px 2px 25px -4px rgba(0,0,0,0.49);
		        box-shadow: 0px 2px 25px -4px rgba(0,0,0,0.49);
			}





	/*page navigation*/
			.mySecTitle {
			    padding: 1.5% 0 10px 3%;
			}

			.img-cover a.myPageNav {
			    font-size: 1.5vw;
			}


	/*main text box / navigation box */
			.myTextBox {
			    padding: 0;
			    padding-left: 3%;
			}

			

			section#intro3 .myTextBox p {
				background-color: transparent;
			}
			
			.myTextBox p, .myTextBox ul li, a.my-pdf, a.mylink, .myTextBox.myAboutTitle h3, .myTextBox.myAboutText h3 {
			    /*font-size: 1.8vw;
			    line-height: 2.4vw;*/
			    font-size: 13px;
			    line-height: 17px;
			    letter-spacing: 0.5px;
			}

						a.my-pdf::before, a.mylink::before {
						    height: 17px;
					   	}



					/*main triage links*/
					.img-cover h3 a, .img-cover h3 {
					    /*font-size: 1.7vw;
					    line-height: 2vw;*/
					    font-size: 13px;
					    line-height: 17px;
					    letter-spacing: 0.2px;
					}

					



	/*additional traige section*/
	.myTriage {
	    padding: 2% 2% 2% 3%;
	}
	
	.myTriage h2.adHocTriage a, .myTriage h2.adHocTriage {
		font-size: 11px;
		line-height: 11px;
		letter-spacing: 0.5px;
	}



	/*Value content - blocks alignment per line*/
			 .valueContent {
			 	width: 98%;
			 	padding: 1rem;
			 	margin: 0.5rem;
			 	min-height: 0;
			 }

			.valueContent .imageBox {display: none;}

			.valueContent .brochureThumb {
				width: 25%;
			}

			.valueContent p {
			     /*font-size: 2vw;
			     line-height: 2.8vw;*/
			     font-size: 13px;
			     line-height: 17px;
			     letter-spacing: 0.2px;
			     
			}

			.valueContent h3 {
			    font-size: 3vw;
			    line-height: 4vw;

			}

            #content .valueContent ul {
                font-size: 13px;
                line-height: 17px;
                margin-left: 1rem;
                margin-bottom: 1rem;
                display: inline-block;
            }



			/*value content - library*/
			.valueContent#pip_library .brochureThumb {
			    display: block; 
			     
			}

			/*links*/
			.myTextBox p, a.my-pdf, a.mylink {
			    /*font-size: 2vw;
			    line-height: 2.8vw;*/
			    font-size: 13px;
			    line-height: 17px;
			    letter-spacing: 0.5px;
			}

					a.my-pdf::before, a.mylink::before {
					    width: 20px;
					    height: 17px;
					    margin-right: 3px;
					    position: relative;
					    top: 3px;
					}





}





/* /////////////////////////////////////////////////////////////////////// */

/* 		  	  					  750 /  460 px    		  					   */

/* /////////////////////////////////////////////////////////////////////// */



@media only screen and (max-width : 750px) {

	/*images*/
			/*turn off 16:9 proportions;*/
			#intro .img-cover, #intro2 .img-cover, #intro22 .img-cover {
					 
					position: relative;

					background-size: 60%;
					background-position: top right;
			}
					section#intro::after, section#intro2::after, section#intro22::after {
						padding-top: 0;
					}


	
			/*replace with small images created for mobile phone*/
			/*put inside .img-cover*/
			/*.myMobileImage {
				display: block;
			}*/

			.myTextBox { width: 95%; }


            .img-cover .myTextBox { 
                width: 95%; 
                font-size: 12px; line-height: 16px;
            }

            #intro .img-cover, #intro2 .img-cover, #intro22 .img-cover {
                     
                    position: relative;

                    background-size: 90%;
                    background-position: top right;
                    padding-top: 35%;
            }


            



			/*onpage navigation*/
					.img-cover a.myPageNav {
					    /*font-size: 2vw;*/
					    font-size: 11px;
					}

					.img-cover h1, .mySectionTitle {
					    /*font-size: 2.5vw;*/
					    font-size: 14px;
					}

			/*main triage and text box*/
					.img-cover h2 a, .img-cover h2 { 
						font-size: 16px; line-height: 20px;
					}

					.img-cover h3 a, .img-cover h3 {
					    /*font-size: 2.5vw;
					    line-height: 2.8vw;*/
					    font-size: 13px; line-height: 20px;
					}

							.img-cover h3 a:before {
							    /*font-size: 2vw;*/
							    font-size: 11px;
							}

					.img-cover .myTextBox { 
						width: 75%; 
						font-size: 12px; line-height: 16px;
					}


			/*additional triage*/
					.myTriage h2.adHocTriage a, .myTriage h2.adHocTriage {
					    /*font-size: 2vw;
					    line-height: 2.8vw;*/
					    	font-size: 11px; line-height: 11px;
					    font-weight: normal;
					    letter-spacing: 0px;
					}

					.myTriage h2.adHocTriage a, .myTriage h2.adHocTriage {
					    letter-spacing: 0;
					}

					.myTriage {
					    position: relative;
					    width: 95%;
					}

			/*Value content - blocks alignment per line*/
					 .valueContent {
					 	width: 98%;
					 	padding: 1rem;
					 	margin: 0.5rem;
					 }

					.valueContent .imageBox {display: none;}

					.valueContent .brochureThumb {
						width: 25%;
					}

					.valueContent p {
					     /*font-size: 2vw;
					     line-height: 2.8vw;*/
					     		font-size: 12px; line-height: 16px;
					}

					.valueContent h3 {
					    /*font-size: 3vw;
					    line-height: 4vw;*/
					    		font-size: 16px; line-height: 20px;
					}

					/*links*/
					.myTextBox p, a.my-pdf, a.mylink {
					    /*font-size: 2vw;
					    line-height: 2.8vw;*/
					    		font-size: 12px; line-height: 16px;
					}


			/* About Rainin Footer */
					section#intro3 .myTextBox.myAboutText {
					    width: 90%;
					}



  
}














/* /////////////////////////////////////////////////////////////////////// */
/*                                                                         */
/*                            new mt page setup                            */
/*                                                                         */
/* /////////////////////////////////////////////////////////////////////// */

@media only screen and (min-width : 1020px) {

		#header_boxtop, #footer_boxbot, #title {

			display: none;
		}


		#main_layer {
			/*background-image: url(widgets/shared/css/images/repeating/main-layer-repeat-y-left.gif),url(widgets/shared/css/images/repeating/main-layer-repeat-y-right.gif);
			background-position: top left,top right;
			background-repeat: repeat-y;
			background-color: transparent;*/
			 
			background-image: url( );
			background-position: top left,top right;
			background-repeat: repeat-y;
			background-color: transparent;

			padding: 0;
		 
		} 

		.mt-stage {
			width: 100%;
		}

				/*no margins*/
				#main_layer {
					margin:0!important;
				}

		/*#header_layer {
			position: fixed;
			z-index: 1000;
			width: 100%;
		}*/

		/*shifting logo to the right*/
				#logo_layer {
					margin-left: 100px;
				}

		/*shifting main menu to the left*/
				#main_navi_layer div ul { 
					/*margin-right:170px; */
					margin-right:10%; 
				}

				ul li.last { 
					border-right: 1px solid #fff;
				}

		/*turn off login/registration*/
				.login_reg_info {
					display: none;
				}

		/*shifting country and search to the left*/
				.cnty_lang_search {
					margin: 10px 0px 0 0;
					 
				}

				div.search {
					margin-left: 50px;
				}

				.top_meta_layer { 
					margin-right:10%; 
					width:500px;
				} 
}


/*------------- new mt page setup ----------------- */


/*Limit by 1600px width*/

@media only screen and (min-width : 1700px) {
		.mt-stage {
			width: 1700px;
		}

}

div.parsys_column colCtrlBasic3-3_l {
margin-left:15px;

}

div.colCtrlBasic3-3-c0, div.colCtrlBasic3-3-c1, div.colCtrlBasic3-3-c2 {

width: 32%;

}

div.colCtrlBasic3-3-c0 {
margin-left: 20px;

}



@media only screen and (max-width: 550px) {
div.colCtrlBasic3-3-c0, div.colCtrlBasic3-3-c1, div.colCtrlBasic3-3-c2 {

width: 90%;
}
}

