@import "lib.less";
body {
	
	font-family: "proxima-nova";
	font-size: @fontbase;
	background: @bgcolor;

	a {
		
		text-decoration: none;
		color: @linkcolor;
		
		&.black {

			color: @blacklinkcolor;

		} //black

		&.white {

			color: @whitelinkcolor;

		} //white

		&:hover {
			
			color: @linkhover;
			text-decoration: underline;
			
		} //Hover
		
	} // a
	
	#mobile {

		display: none;
		background-color: @bgheader;
		position: fixed;
		top: 9.688em;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 1;

		&.open {

			display: none;

		}
			
		nav {
			
			position: relative;
			top: 1em;
			text-align: left;
			
			a {
				
				display: block;
				color: @menulinkcolor;
				text-transform: uppercase;
				line-height: 3em;
				margin-left: 3em;
				margin-right: 2em;
				border-bottom: 1px solid @menulinkcolor;

				&.current {

					font-weight: 700;

				} // current
				
				&.title {
			
					font-size: 1.875em;
					line-height: 1.067em;
					text-align: center;
					margin: 0;
					padding: 0;
					border: 0;

					img {
		
						height: 3em;
						border: 0;
						margin-top: 0.5em;
		
					}
		
				}//title

			} //a
		 	
		} //nav
		
	} //mobile

	#header {

		background-color: @bgheader;
		height: 9.688em;
		position: relative;
		z-index: 0;
		
		.title {
			
			font-size: 1.875em;
			line-height: 1.067em;
			font-weight: 700;
			font-family: "Urbane";
			text-align: left;
			text-decoration: none;
			display: block;
			margin-top: 0.5em;

			img {

				height: 3em;
				border: 0;
				margin-top: 0.5em;

			}

		}//title
		
		.mobile { 

			display: none; 

			#menu-icon {
				top: 24px;
				right: 33px;
				display: inline-block;
				cursor: pointer;
				position: absolute;
				z-index: 3;
				
				div {
				    width: 28px;
				    height: 3px;
					background-color: @menulinkcolor;
				    margin: 4px 0;
				    transition: 0.4s;
				}
				&.change {
				     .bar1 {
					    -webkit-transform: rotate(-45deg) translate(-6px, 3px) ;
					    transform: rotate(-45deg) translate(-6px, 3px) ;
					    background-color: @menulinkcolor;
					}
					.bar2 {
					    opacity: 0;
					}
					.bar3 {
					    -webkit-transform: rotate(45deg) translate(-6px, -4px) ;
					    transform: rotate(45deg) translate(-6px, -4px) ;
					    background-color: @menulinkcolor;
					}
				}
			}

		}

		nav {
			
			position: relative;
			top: 1em;
			text-align: right;
			
			&.menu {

				top: 5em;

			}
			
			a {
				
				display: inline-block;
				margin-left: 1.813em;
				color: @menulinkcolor;
				text-transform: uppercase;

				&.current {

					font-weight: 700;

				} // current
				
			} //a
			
		} //nav
		
	} //header

	#content {

		background-color: @bgcontent;
		font-family: "proxima-nova";
		font-weight: 100;
		font-size: 1em;
		line-height: 1.667em;

		.container {

			padding-top: 3em;
			padding-bottom: 3em;

		}
		

	} // #content


	#home {

		background-color: @bghome;
		background-image: url(../images/headerbg.jpeg);
		background-size: cover;
		background-position: center 5%;
		background-repeat: no-repeat;
		text-align: center;

		.container {

			.row {

				height: 12em;
		
				h1 {

					font-size: 3em;
					line-height: 1.2;
					color: #FFF;
					text-transform: uppercase;
					font-family:"urbane";
					height: 2.4em;
					overflow: hidden;

					.black {

						color: black;

					} // black

				} // h1 

			
			} // row

		} // container

	} // home

	#research {
		padding-top: 2em;
		padding-bottom: 3em;
	}

	#research, #content {
		
		background-color: @bgresearch;
		margin-bottom: 3em;

		.image {

			width: 100%;
			display: inline-block;

			img {

				width: 100%;
				border: 1px solid #222;
			}

		}

		.description {

			margin-top: 0;

		}
		
		form {
			
			text-align: center;
			font-family: "proxima-nova";
			margin-bottom: 2.450em;
			font-size: 0.813em;
			
			input {
				
				&[type=text] {
					
					text-align: left;
					width: 100%;
					line-height: 2.360em;
					font-size: 1.563em;
					padding-left: 1.18em; 
					padding-right: 1.18em; 
					font-weight: 300;
					border: 0;
					border-radius: 100px;
					margin-bottom: 1em;

					&:focus {
						
						outline: none;
						background-color: lighten(@linkhover, 20%);
						
					}
					
				}//[type=text]

				&[type=checkbox] {
					
					display:none;
										
					& + label {
				    	display:inline-block;
    					margin: 1.450em 1.300em 2.450em 0.450em;
						padding-left: 2em;
						height: 1.750em;
						line-height: 1.400em;
						font-size: 1.250em;
						background: url('../images/checkbox-off.png') left top no-repeat;
						cursor:pointer;
						
					}
						
					&:checked + label {
						
						background: url('../images/checkbox-on.png') left top no-repeat;							
					}

				
				} //[type=checkbox]

				&[type=button] {
					
					font-size: 1.250em;
					line-height: 2.600em;
					padding-left: 1.400em;
					padding-right: 1.400em;
					border-radius: 0.250em;
					background-color: #000;
					color: #FFF;
					border: 0;
					text-transform: uppercase;
					
				}//[type=button]
				
			} //input

			.custom-select {

				text-align: left;
				width: 100%;
				font-weight: 300;
				border: 0;
				border-radius: 100px;
				margin-bottom: 1.6em;
				position: relative;
				display: block;
				background-color: #FFF;
				z-index: 10;

				  select {

					border: none;
					outline: none;
					background: transparent;
					-webkit-appearance: none;
					-moz-appearance: none;
					appearance: none;
					border-radius: 0;
					margin: 0;
					width: 100%;
					text-align: left;
					line-height: 2.360em;
					font-size: 1.563em;
					padding-left: 1.18em; 
					padding-right: 1.18em; 
					font-weight: 300;
					border: 0;
					color: #AAA;

				} // select
				
				&:after {
				
					position: absolute;
					right: 0;
					top: 0;
					width: 50px;
					height: 100%;
					line-height: 2.360em;
					content: "∨";
					text-align: center;
					color: #DDD;
					font-size: 24px;
					border-left: 1px solid #DDD;
					z-index: -1;
				
				} // ::after
			  
			}// .custom-select

		} //form

		&.HOME {

			.container {

				&:first-of-type {

					padding: 1em 0 0 0;

				}

				form {

					input {

						&[type=text] {

							background-color: lighten(@linkhover, 40%);

							&:focus {
								
								outline: none;
								background-color: lighten(@linkhover, 20%);
								
							}

						}

						&[type=submit] {
					
							font-size: 1.250em;
							line-height: 2.600em;
							padding-left: 1.400em;
							padding-right: 1.400em;
							border-radius: 0.250em;
							background-color: #000;
							color: #FFF;
							border: 0;
							text-transform: uppercase;
							
						}// submit
					}

				}

			} //.container

		} //&.HOME
		
	} //research, content

	#result {
		
		background-color: #E6E6E6;

	}

	#footer {

		background-color: #000;
		color: #FFF;

		p {

			line-height: 3em;
			font-size: 0.938em;
			text-align: center;
			width: 100%;

			a {

				img {

					height: 2em;
					border: 0;
					margin: 0.5em 1em;

				} //img

			} // a

		} //p

	} //footer

} // body


@media (max-width: 576px) {

	body {
		
		#header {

			.mobile { 

				display: inline-block;

			}

			.col-min {

				width: 100%;
				margin: 0;

				a {

					text-align: center;

				}

			}

			nav {

				display: none;

				&.home {

					top: 1.5em;

				}

				a {

					margin-left: 0em;
					font-size: 0.8em;

				} // a

			} //nav

		} // header

		#mobile {

			&.open {

				display: block;

			}

		}
		
		#home {
	
			.container {
	
				.row {
	
			
					h1 {
	
						font-size: 2.5em;
						line-height: 1em;
						height: 2em;
	
					} // h1 
	
				
				} // row
	
			} // container
	
		} // home		
		
	} // body
	
} // 576px

@media (max-width: 768px)  {
	
	body {
		
		#header {
			
			nav {
				
				a {
					
					margin-left: 0em;
					font-size: 0.8em;
					
				} // a
				
			} //nav
			
		} // header
		
		#content {
		
			.container {
		
		
				.note-video-clip {
		
					width: 100%;
					height: auto;
					height: fit-content;
		
		
				}
		
			}
		
		} // #content

	} // body
	
} // 768px

@media (max-width: 992px) {

	body {
		
		#header {

			nav {

				a {

					margin-left: 1em;

				} // a

			} //nav

		} // header


	} // body
	
} // 992px

// @media (min-width: 1200px) {

// 	body {
		
	
// 	} // body
	
// } // 1200px