/* =============================================================================
   Site Styles
   ========================================================================== */

body {
	
	#cabinetbuttoncontainer {
		
		text-align: right;
		
		
		#cabinetbutton {
			
			background-color: #3C4767;
			color: #FFF;
			font-size: 0.9em;
			line-height: 1.889em;
			display: inline-block;
			text-decoration: none;
			padding: 0 0.7em;
			border-radius: 0.35em;
			text-transform: uppercase;
			font-weight: 700;
			vertical-align: bottom;
			margin-top: 3.4em;
			cursor: pointer;
			text-align: right;
		}
	}
		
	#cabinetchoice {
		
		display: none;
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: rgba(60,71,103,0.7);
		z-index: 100;

		#modal {
			
			position: absolute;
			width: 42.500em;
			height: 100vh;
			right: 0;
			top: 0;
			background-color: #FAF9F8;
			overflow-y: scroll;
			
			#title {
				
				width: 42.500em;
				height: 3.125em;
				background-color: #3C4767;
				text-align: center;
				position: fixed;
				
				.title {
					
					width: 100%;
					line-height: 2.273em;
					font-size: 1.375em;
					color: #FFF;
					font-weight: 500;
					text-transform: uppercase;
											
				} //.title

				.reset, .close {
					
					position: absolute;
					line-height: 1.667em;
					font-size: 1.125em;
					color: #FFF;
					font-weight: 300;
					text-transform: uppercase;
					top: 10px;
					display: block;
					cursor: pointer;

					img {
						
						margin-top: -0.333em;
						width: auto;

					}
										
				} //.reset, .close
				
				.reset {
					
					left: 1em;
					
					img {
						
						margin-right: 1em;

					}
				} // reset
				
				.close {
					
					right: 1em;
					

					img {

						
						margin-left: 0.5em;

					}

				} //close
				
			} // title
			
			#content {
				
				margin-left: 1em;
				margin-right: 1em;
				padding-top: 3.125em;
				
				h2 {
					
					text-align: center;
					font-weight: 700;
					font-size: 2.375em;
					color: #9AA5CB;
					margin-top: 1em;
					
				}
				
				.question {
					
					text-align: center;
					font-size: 1.313em;
					color: #3C4767;
					
				} //question
				
				.answer {
				
					display: flex;
					justify-content: space-around;
					
					.answer_left, .answer_right {
						
						width: 11.818em;
						color: #9AA5CB;
						font-size: 1.375em;
						text-align: center;
						
						.button {
							
							cursor: pointer;
							width: 100%;
							background-color: #FFF;
							border: 2px solid #9AA5CB;
							border-radius: 0.3em;
							line-height: 3em;
							font-size: 1.364em;
							font-weight: 700;
							margin-top: 1em;
							
						} //button
						
						.description {

							.info {
								
								cursor: pointer;
								font-size: 0.5em;
								top: -0.2em;
								background-color: #3C4767;
								padding: 0.1em 0.4em 0.3em 0.2em;
								color: #fff;
								font-style: italic;
								height: 0.75em;
								width: 0.75em;
								border-radius: 1.2em;
								display: inline-block;
								line-height: 0.75em;
																
							} // info
					
						} // p
	
					} //.answer_left, .answer_right
					
				} //.answer

			} //content
			
			#products {
				
				margin-left: 1em;
				margin-right: 1em;
				display: flex;
				justify-content: center;
				
				div {
				
					width: 30%;
					display: inline-block;
					text-align: center;
				
					img {
						
						width: 10.000em;
						margin-bottom: 1em;
						
					} //img
					
				
					a {
						
						&.button {
							
							border: 2px solid #9DA9CD;
							font-size: 1em;
							
						} //button	
					
					} // a
					
					div {
						
						&.description {

							text-align: left;
							margin: 0 0.5em;
							padding: 1em 0.5em;
							width: auto;
							font-size: 0.8em;
							line-height: 1.2em;
							
							p {
								
								margin: 0;
								padding: 0;
								
							} // p
							
							a {
								
								&.button {
	
									background-color: #6385BA;
									font-size: 0.8em;
									line-height: 1.364em;
									color: #FFF;
									margin: 0;
									padding: 0.3em 0.8em;
									border: 1px solid #6385BA;
									display: inline-block;
									margin-top: 0.25em;
									
								} // .button
	
							} // a
							
						} // description
						
					} // div

				} //div
				
			} // products
			
		} // modal


	} //cabinetchoice	
	
	#mrw-tooltip {
		
		display: none;
		position: fixed;
		z-index: 999;
		background: #3C4767;
		padding: 0.7em 1em;
		margin-right: 2em;
		max-width: 20em;
		box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.56);
		
		span {
			color: #FFF;
			font-size: 0.75em;
			line-height: 140%;
		}
		
		i {

		  display: block;
		  position: absolute;
		  top: -5px;
		  left: 5px;
		  width: 0;
		  height: 0;
		  border-left: 7px solid transparent;
		  border-right: 7px solid transparent;
		  border-bottom: 7px solid #333;  
		}
	}
	
} // body


/* =============================================================================
   From 1200 to 970
   ========================================================================== */

@media only screen and (max-width: 1195px) and (min-width: 970px) {

	body {
	
	} // body

}


/* =============================================================================
   From 970 to 736px
   ========================================================================== */
   
@media only screen and (max-width: 969px) and (min-width: 736px) {

	body {
			
		#cabinetbuttoncontainer {

			
			#cabinetbutton {

				font-size: 0.7em;
				line-height: 1.889em;
				margin-top: 4.4em;

			}
		}
		
	
	} // body

}
/* =============================================================================
   From 736px to 600px
   ========================================================================== */

@media only screen and (max-width: 736px) and (min-width: 600px) {

	body {
			
		#cabinetbuttoncontainer {

			
			#cabinetbutton {

				font-size: 0.7em;
				line-height: 1.889em;
				margin-top: 0.4em;
				margin-bottom: 0.4em;

			}
		}
			
	} // body

}


/* =============================================================================
   From 600 to 480
   ========================================================================== */

@media only screen and (max-width: 600px) and (min-width: 480px) {
	
	body {
		
		#cabinetbuttoncontainer {

			
			#cabinetbutton {

				font-size: 0.7em;
				line-height: 1.889em;
				margin-top: 0.4em;
				margin-bottom: 0.4em;

			}
		}
	
	} // body

}

/* =============================================================================
   Less than 480px
   ========================================================================== */
@media only screen and (max-width: 479px) {

	body {
		
		#cabinetbuttoncontainer {

			
			#cabinetbutton {

				font-size: 0.7em;
				line-height: 1.889em;
				margin-top: 0.4em;
				margin-bottom: 0.4em;

			}
		}
		#cabinetchoice {
			
			display: none;
			position: fixed;
			width: 100vw;
			height: 100vh;
			background-color: rgba(60,71,103,0.7);
			z-index: 100;
			font-size: 10px;
	
			#modal {
				
				position: absolute;
				width: 100vw;;
				height: 100vh;
				right: 0;
				top: 0;
				background-color: #FAF9F8;
				
				#title {
		
					.reset, .close {
	
						img {
							
							height: 1.2em;
	
						}
											
					} //.reset, .close
				} // #title
			
				#content {
					
					
					.answer {
						
						
						flex-direction: column;					
						justify-content: space-around;
						
						.answer_left, .answer_right {
														
							margin: 0 auto;
							
							.button {
								
								
							} //button
	
						} //.answer_left, .answer_right
						
						
					} //.answer
	
				} //content

			} // modal
			
		}
	} // body

}