tabbit

Wed Aug 10 2016
Copied to clipboard! Copy reply
@themebase: <%= content_themebasecolor %>;
@link-color: #FF0000;
/*@copysectionblue: hsla(220, 50%, 50%, .75);*/
@copysectionblue: rgb(0, 128, 205);
@rsyellow: #ecc200;


@phone: ~"only screen and (max-width: 479px)";
//@ipad: ~"only screen and (min-width: 768px) and (max-width: 959px)";
@ipad: ~"only screen and (max-width: 768px)";

@1236: ~"only screen and (max-width: 1236px)";

.mixin {
	background-color: lighten(spin(@themebase, 0), 95%);
}

html, body{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

body{
	overflow-x: hidden;
	min-width: 768px;
	font-family: sans-serif; /* fallback default */
}



/*stop horizontal overflow on ipad*/
// body .page-wrap {
// 	overflow-x:hidden;
// }
//
/* This prevents any weird borders when images are in link tags */
img{border:none;}

.content {
	width: 90%;
	max-width: 1200px;

	margin: 0 auto;

}

#masthead {
	height: 350px;
	background: url(/assets/catalyst/header.jpg) no-repeat;
	background-size: cover;
	position:  relative;
}

.videos-wrapper {
	div.left, div.main-video {
		display: inline-block;
		vertical-align:  top;
		//@media only screen and (max-width : 768px) { display: block; }
		@media @1236 {
			display: block;
		}
	}

	div.left {
		width: 42%;

		// ipad
		//@media only screen and (max-width : 768px) {
		@media @1236 {
			width:  100%;
			// remove bttom two lines if video section gets wonky
			margin-bottom: -400px;
    	//margin-top: 273px;
		}
		div.text {
			width: 100%;
			font-family: GothamThin,sans-serif;
			//background: pink;
			margin-bottom: 20px;
			padding: 20px 0;
			@media @1236 {
				text-align:  center;
			}
			h3 {
				font-size: 1.65em;
				line-height: 32px;
				font-weight: bold;

			}
			p {
				font-size: 1.2em;
				padding-top: 10px;
				line-height: 28px;
				font-weight: 100;
			}
		}

		div.videos {
			text-align:  center;
			div.video {
				display: inline-block;
				float: left;
				width: 80px;
				height: 55px;
				margin: 0 20px 35px 0;
				vertical-align:  top;
				background-size: contain;
				background-repeat: no-repeat;
				font-size: 12px;
				&:nth-of-type(1) {
					background-image: url(/assets/catalyst/video-assessment.jpg)
				}
				&:nth-of-type(2) {
					background-image: url(/assets/catalyst/video-elearning.jpg)
				}
				&:nth-of-type(3) {
					background-image: url(/assets/catalyst/video-livetutoring.jpg)
				}
				&:nth-of-type(4) {
					background-image: url(/assets/catalyst/video-reporting.jpg)
				}
				&:last-of-type {
					margin-right: 0;
					background-image: url(/assets/catalyst/video-implementation.jpg)
				}
				@media @1236 {
					width: 115px;
					height: 70px;
					font-size: 1em;
					float: none;
					background-size: 100% 100%;

				}
				@media only screen and (max-width: 1411px) {
					// & {
					// 	width: 120px;
					// 	height: 65px;
					// }

				}
				a {
					display:  block;
					height: 100%;
				}
				span {
					display: block;
					color: #0798DB;
					text-align: center;
				}

			}
			@media @1236 {
				float: none;

			}
		}
	}

	div.main-video {
		width:  56%;
		height: 330px;
		background: url(/assets/catalyst/laptop-video.png) no-repeat center;
		background-size: contain;
		margin-left: 20px;
		position: relative;
		top: -80px;
		@media @1236 {
			top: 0;
			width: 100%;
			margin: -267px auto 365px; // remove if video sections get wonky
		}
		a {
			display:  block;
			width: 80%;
			height: 85%;
			margin: 6px 0 0 56px;
		}
	}
}

div#tab-icons {
	background-color: #0798DB;

	text-align:  center;
	& > div {
		display: inline-block;
		vertical-align:  top;
		a {
			height: 70px;
			display:  block;
			background: red;
			position: relative;
			padding: 0 10px;
			span {
				position: absolute;
				bottom: 0;
				left: 0;
				background: yellow;
				display: block;
			}
		}

	}
}


/********************************************************************************
Layout Mixins
********************************************************************************/
/* Mixin */
.transform (@t) {
    transform: @t;
    -webkit-transform: @t;
    -moz-transform: @t;
    -o-transform: @t;
    -ms-transform: @t;
}

.butterytext () {
	font-smooth: always;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-webkit-font-smoothing: subpixel-antialiased;
	text-rendering: optimizeLegibility;
	text-rendering: geometricPrecision;
}
/********************************************************************************
Theme Mixins
********************************************************************************/


.footer {
	display: block;
	background-color: #edeadf;
	padding-top: 2rem;
	.eandemenu {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		font-family: GothamMedium, sans-serif;
		li {
			margin: 0 2em;

			a {
				text-decoration: none;
				color: black;
			}
		}
	}

	.corpmenu {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		font-family: GothamLight, sans-serif;
		font-size: .8em;
		margin-top: 1rem;
		li {
			margin: 0 2em;
			color: black;
			a {
				text-decoration: none;
				color: black;
			}
		}
	}

	.bottomforms {

		display: flex;
		justify-content: center;
		padding: 2rem;
		li {
			min-width: 19em;
			form {
				display: flex;
				flex-flow: row wrap;
				max-width: 18em;
				label {
					font-family: GothamMedium, sans-serif;
					font-size: .85em;
					text-transform: uppercase;
					flex-basis: 100%;
					margin-bottom: .25em;
				}
				input {
					&[type="text"] {
						padding: .2em;
						flex: 3;
						flex-basis: 0;
					}
					&[type="submit"] {
						padding: .75em;
						text-transform: uppercase;
						font-family: GothamBold, sans-serif;
						font-size: .75em;
						background-color: #0098db;
						color: white;
						flex: 1;
						flex-basis: 0;
						letter-spacing: .05em;
						.butterytext();
					}
				}

			} /* /form */
		}

		li:nth-child(2) {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding-left: 5rem;
			text-align: center;
			justify-content: center;
			label {
				flex: 1 0 100%;
				font-family: GothamMedium, sans-serif;
				font-size: .85em;
				text-transform: uppercase;
				flex-basis: 100%;
				margin-bottom: .25em;
			}
			a {

				display: inline-block;
				width: 1.5em;
				height: 1.5em;
				margin: 0 .5em;
				background-size: contain;
				background-repeat: no-repeat;
				display: inline-block;


				&:nth-child(2) {
					background-image: url(../../assets/eande_facebook.svg);
				}
				&:nth-child(3) {
					background-image: url(../../assets/eande_twitter.png);
				}
				&:nth-child(4) {
					background-image: url(../../assets/eande_facebook.png);
				}
			}

		}
	} /* /.bottomforms */

	.bottomstripemenu {
		padding: 1em;
		background-color: darken(#4195d3, 5%);
		text-align: right;

		.copyright {
			float: left;
			color: white;
			font-family: GothamLight, sans-serif;
			&:before {
				content: '';
				display: inline-block;
				transform: translateY(0em);
				width: 3em;
				height: 1.5em;
				background-image: url(http://www.rosettastone.com/lp/navbar/RS_LOGO_BLACK.svg);
				background-size: contain;
				background-repeat: no-repeat;
				vertical-align: middle;
				margin-right: .5em;
				margin-left: 5rem;
				cursor: pointer;
			}
		}

		a {
			font-family: GothamLight, sans-serif;
			color: white;
			text-decoration: none;
			margin: 0 1em;

		}

	}  /* /.bottomstripemenu */
}/* /.footer */

.fixednav {


	justify-content: flex-end;
	background-color: hsla(180,50%,10%,.85);
	padding: 1em 0;
	color: white;
	font-family: GothamBook, sans-serif;
	text-transform: uppercase;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 98;
	display: none;
	transition-property: background-color;
	transition-duration: 0s;
	transition-timing-function: ease-out;

	@media screen and (max-width: 1600px) {
		font-size: .75em;
	}

	@media screen and (max-width: 1050px) {
		font-size: .55em;
	}

	&:hover {
		background-color: hsla(180,50%,10%,.95);
	}

	&.supportsfixed {
		display: flex;

	}

	.butterytext();

	& > .menu,.consult.call,.pricing,.support {
		margin-left: 2em;
		margin-right:2em;
		margin-top: auto;
		margin-bottom: auto;
	}



	& > .menu {
		flex: 1;
		position: relative;
		text-align: center;
		display: flex;

		label:after {
			position: relative;
			content: ">";
			margin: auto 0 auto .25em;
			display: inline-block;
			transform: rotate(90deg) translateX(-.05em);
			font-family: GothamThin;
		}

		label {


			flex: 1;
		}

		&:hover ul {
			display: block;
			opacity: 1;
			transform: translateY(0%);
		}

		&.clicked ul {
			display: block;
			opacity: 1;
			transform: translateY(0%);
		}

		ul:hover {
			display: block;
			opacity: 1;
			transform: translateY(0%);
		}

		ul {
			display: none;
			opacity: 0;
			transform: translateY(-20%);
			transition-property: opacity, transform;
			transition-duration: 333ms;
			padding: 15px 4px 4px 4px;
			line-height: 1.25;
			background-color: hsla(180,50%,10%,.95);;
			position: absolute;
			top: 2em;
			left: 0;
			width: auto;
			min-width: 21em;
			margin-top: -1em;
			li {
				background-color: hsla(0,0%,95%,0);
				width: auto;
				margin: 1px 0;
				a {
					display: block;
					padding: 10px;
					.butterytext();
				}
				&:hover {
					background-color: #2f89cb;
				}
			}

			.hd {
				text-align: left;
				font-size: larger;
				font-family: GothamBold;

			}
			.sub {
				padding-left: 1em;
				text-align: left;
			}

			a {
				color: white;
				text-decoration: none;
			}
		}
	}

	.support {
		color: white;
		text-decoration: none;
		flex: 1;
	}
	.consult {
		margin: auto 0;
		span {
			font-family: GothamMedium;
			font-size: 1.2em;
		}

	}
	.call {
		margin: auto 0;
		a {
			color: whitesmoke;
			transform: translateY(-1px);
			display: inline-block;
		}

		span {
			font-family: GothamMedium;
			font-size: 1.2em;
		}

		&::before {
			content: "|";
			margin-left: .25em;
			margin-right: .25em;
			display: inline-block;
			color: #EBC21D;
		}

	}
	.pricing {
		color: black;
		display: inline-block;
		padding: .5em 2.5em;
		border-radius: 3px;
		background-color: #EBC21D;
		margin: 0 1em 0 1em;
		cursor: pointer;
	}
} /* /.fixednav */

.__eande_langselectoverlay {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2000;
      background-color: rgba(0,0,0,.7);
      box-sizing: border-box;
      max-height: 100vh;
      height: 100vh;
      min-width: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
      padding: 5rem 0 5rem 0;
      cursor: pointer;

      .head {
      	display: block;
      	text-align: center;
      	color: white;

      	font-family: GothamLight;
      	font-size: 2em;
      }

      .demolangs {
      	color: white;
      	display: block;
      	margin-top: 3rem;
      	li {
      		font-family: GothamMedium, sans-serif;
      		font-size: 2.3em;
      		display: block;
      		width: 50%;
      		margin: .75em auto;
      		text-align: center;
      		padding: .35em;
      		outline: 1px solid hsla(0,0%,80%,1);
      		background: hsla(0,0%,80%,.1);
      		&:hover {
      			background: hsla(0,0%,80%,0);
      		}
      	}
      }
}