/* @override https://dev.glyphs.co/css/landing.css */

body#landing{padding-top:0px;}

#landing .container.toplanding{padding:0px;}

.container-fluid.desktop-email{
    height:350px;
    background-color:#3c3c41;
}
#landing #logo{
margin-top:85px;
}
#landing .svg-icons{
margin: 30px auto;
	width:150px;
	height:130px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

#landing .svg-icons svg{
	position:relative;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
#landing #slider{
	margin: 20px 60px 0px 60px;
}

#landing #slider.ui-slider{
border-radius:0px;
height: .16em;
border:0px;
background: #ababab;
}
#landing #slider .ui-slider-range{
background:#ca5bc0;
border:0px;
border-radius:0px;
}

#landing #slider .ui-slider-handle{
border-radius:100%;
background:#fafafa;
height: 1.3em;
width: 1.3em;
border:0px;
top:-.6em;
-webkit-box-shadow: 0px 1px 4px 1px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 1px 4px 1px rgba(0,0,0,0.15);
box-shadow: 0px 1px 4px 1px rgba(0,0,0,0.15);
}

#landing #slider .ui-slider-handle:focus{
outline:0 none !important;
}

#landing .pencil-icon{
display:block;
width: 115px;
height: 130px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 118px;
right: 0;
}

#landing #stylebox #slider{
margin-top: 220px;
}

#landing #colorbox #slider.ui-slider{
background: url('/img/colorbox-slider.png') center center no-repeat;
}
#landing #colorbox #slider .ui-slider-range{
display:none;
}

#fakebrowse{
position:relative;
max-width: 100% !important;
height: 160px;
border:0px solid #eee;
/* margin-left:auto; */
/* margin-right:auto; */
/* margin-bottom: 30px; */
margin: 20px auto 40px auto;
}

#landing .svg-icons.responsive{
position:absolute;
margin-top:0;
margin-left: auto;
margin-right: auto;
width: 55%;
left:0;
right:0;
top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.svg-icons.inline{
display:inline-block !important;
height:1.3em !important;
width:1.3em !important;
}

#landing .svg-icons.signia-play-button{
float:left;
margin-top:-8px;
margin-left:55px;
}
#landing .svg-icons.signia-replay{
float:right;
margin-top:-11px;
margin-right:52px;
}

#landing .svg-icons.signiaplay-button svg path,
#landing .svg-icons.signia-replay svg path{
fill:#ccc !important;
}

#playpause #landing #slider{
	margin:20px 88px 0px 88px;
}

#playpause .ui-state-disabled{
opacity:1;
}

/*
#landing{
background:url('../img/ag-header-3.jpg');
background-size:100%;
}
*/

#landing .topsquare h3{
font-size:1.7em;
color:#b94893;
margin-bottom:1px;
padding-bottom:0px;
margin-top: 12px;
}

#landing .topsquare p{
font-size: 1.4em;
color:#777;
/* padding-bottom: 0px; */
margin-bottom: 10px;
}

/* Begin Natalie's Styling */

#landing .image-overlay {
	background: #fff url(https://glyphs.co/d04edb96-2f34-4633-8be5-cd8fc20a2121.jpg) no-repeat center top fixed;
	color: #000;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	/* padding-bottom: 100px; */
	margin-bottom: 0px;
}

#landing img#icons-bunch, #landing img#rocket-code{
	width: 80%;
	margin-top: 35px;
}

#landing div.transparency {
	background-color: rgba(255,255,255,0.9);
	margin: 0px -15px;
	color: #000;
	padding-bottom: 100px;
}

#landing div.row.row-1 {
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	
	animation-duration: 64s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;		
	visibility: visible !important;	
}

#email-collect .container, #smartctr .container {
	padding: 100px 0px 200px;
}

#landing img.grey-border {
	border-radius: 5px;
	border: 2px solid rgba(0,0,0,0.05);
}

#landing img.landing-icon-grid {
	border-radius:4px;
}



/* Email Subscribe Box Styling */

#landing #email-collect.solid.grey-bg {
	background-color: #3b3d40;
}

#landing #email-collect.grey-bg p{
	color: #c9c9c9;
}
#landing form#email-list, div.social-follow {
	display: inline-block;
	margin-top: 1em;
    vertical-align:middle;
}
#landing div.social-follow {
	margin-left: 3em;
	height: 57px;
}

#landing form#email-list input {
	display: inline-block;
	background-color: #2d2f33;
	border-style: none;
	padding: 15px 20px;
	color: #646464;
	width: 400px;
	font-size: 18px;
	font-weight: 200;
	border-radius: 4px 4px 4px 4px;
	margin: 0px 2px 0px 0px;
}
#landing form#email-list input[type="submit"] {
	background-color: #bc56a1;
	width: auto;
	color: rgba(253,253,255,0.8);
	padding: 15px 35px;
	border-radius: 4px 4px 4px 4px;
	margin-left: 0px;
}
#landing form#email-list input[type="submit"]:hover {
	opacity: 0.8;
}

@media (max-width: 700px) {
	#landing div.social-follow {
		margin-left: 0em;
	}
}
@media (max-width: 500px) {
	#landing form#email-list input#email-submit, #landing form#email-list input {
		clear: both;
		width: 90%;
		margin-top: 1em;
	}
}

/* Animating Icons Styling */

#landing div#icon-animation {
	overflow: hidden;
	padding-bottom: 70px;
}
#landing #icon-animation .row {
	height: 160px;
	overflow: visible;
	position: relative;
}
#landing div#icon-animation div.row div {
	overflow: hidden;
	height: 150px;
	width: 2600px;
	margin: 10px 0px;
}
#landing div#icon-animation div.row div img {
	margin: 15px;
	background-color: rgba(34,17,17,0.1);
	border-radius:3px
}


@-webkit-keyframes anim-toRight{0%{left:-30%}25%{left: 0%;}50%{left: -30%;}100%{left: 0%;}}
@-moz-keyframes anim-toRight{0%{left:-30%}25%{left: 0%;}50%{left: -30%;}100%{left: 0%;}}
@-o-keyframes anim-toRight{0%{left:-30%}25%{left: 0%;}50%{left: -30%;}100%{left: 0%;}}
@keyframes anim-toRight{0%{left:-30%}25%{left: 0%;}50%{left: -30%;}100%{left: 0%;}}


#landing .anim-toRight{
	position: absolute;
	mergin-left: -75px;
	-webkit-animation:anim-toRight 120s linear infinite;
	-moz-animation:anim-toRight 120s linear infinite;
	-o-animation:anim-toRight 120s linear infinite;
	animation:anim-toRight 120s linear infinite;
}

@-webkit-keyframes anim-toLeft{0%{left:0%}25%{left: -30%;}50%{left: 0%;}100%{left: -30%;}}
@-moz-keyframes anim-toLeft{0%{left:0%}25%{left: -30%;}50%{left: 0%;}100%{left: -30%;}}
@-o-keyframes anim-toLeft{0%{left:0%}25%{left: -30%;}50%{left: 0%;}100%{left: -30%;}}
@keyframes anim-toLeft{0%{left:0%}25%{left: -30%;}50%{left: 0%;}100%{left: -30%;}}

#landing .anim-toLeft{
	position: absolute;
	-webkit-animation:anim-toLeft 120s linear infinite;
	-moz-animation:anim-toLeft 120s linear infinite;
	-o-animation:anim-toLeft 120s linear infinite;
	animation:anim-toLeft 120s linear infinite;
	text-align: right;
}


/* Referral Box - Modal-Specific Styling */
#referral-modal {
	padding: 5% 10%;
}
#referral-modal button.modal-close {
	top: 1em;
}

#landing #email::-webkit-input-placeholder {
   opacity:.5;
}

#landing #email:-moz-placeholder { /* Firefox 18- */
   opacity:.5;
}

#landing #email::-moz-placeholder {  /* Firefox 19+ */
   opacity:.5;
}

#landing #email:-ms-input-placeholder {  
   opacity:.5;
}

.beta-box h2{
margin-bottom: 10px;
}
.beta-box p{
padding-bottom: 20px;
}

#register button.modal-close {
	right: 0em;
}
#login button.modal-close {
	top: 1em;
}
#email-share button.modal-close {
	top: 1em;
}

.topsquare:first-child{
	/* border-left: 1px solid #FFF; */
}
.topsquare{
	border: 1px solid #DADADA;
	border-right:0px;
	/* border-bottom: 0px; */
	/* border-radius: 20px; */
	/*margin: 20px;*/
	/* border-top: 0; */
}


.topsquare{
    height:350px;
    text-align: center;
    padding-top:20px;
    /* background-color: rgba(253, 230, 251, 0.21); */
}

#landing #email-collect.solid.grey-bg{
	background-color:#fff;
}
#email-collect #glyphs *{
	fill:#555;
}

#email-collect .glyphsco{
	margin-bottom:50px;
	padding-top:0px;
}
#landing #email-collect.grey-bg p{
color: #777;
}

#landing #email-collect{/* padding-bottom: 100px; */}

#email-collect h2.top{
	color:#333;
}

.container-fluid.topsquares{
background-color:#333;
}

#landing form#email-list input{
background-color:#fff;
border:1px solid #bc56a1;
}

div.social-follow span.svg-icon svg{
background-color:#bc56a1;
fill:#fff;
}

/* ICON STYLING */
.translucent-image-one svg .line{
	stroke-width:1;
	stroke-linejoin:bevel;
	stroke-linecap:round;
	stroke-dasharray:160;
	stroke-dashoffset:0;
}

/* #colorbox #gem path, #colorbox #gem rect, #colorbox #gem polygon{
fill: #b94893;
fill: hsla(285,65%,55%,1)
} */
	
.translucent-image-one.animated svg .line{
 	-webkit-animation: dash 2s linear forwards;
	-moz-animation: dash 2s linear forwards;
	animation: dash 2s linear forwards;
}

@-webkit-keyframes dash {
  from {stroke-dashoffset:160;}
  to {stroke-dashoffset: 0;}
}
@-moz-keyframes dash {
  from {stroke-dashoffset:160;}
  to {stroke-dashoffset: 0;}
}
@keyframes dash {
  from {stroke-dashoffset:160;}
  to {stroke-dashoffset: 0;}
}


.translucent-image-one svg .fill{
opacity:0;
}

.translucent-image-one.animated svg .fill{
-webkit-animation: fill 1s linear forwards;
-moz-animation: fill 1s linear forwards;
animation: fill 1s linear forwards;
-webkit-animation-delay:1.75s;
-moz-animation-delay:1.75s;
animation-delay:1.75s;
}

@-webkit-keyframes fill {
  from{opacity:0;}
  to {opacity:0.25;}
}
@-moz-keyframes fill {
  from{opacity:0;}
  to {opacity:0.25;}
}
@keyframes fill {
  from{opacity:0;}
  to {opacity:0.25;}
}


.svg-icons svg .shutter{fill:#999;}
.svg-icons  svg .line{stroke-width:1;stroke:#999;}
.svg-icons svg .line.lg{stroke-width:3;stroke:#999;}
.svg-icons .fill{fill:#999;}

.magnifier-2 svg .line{
	stroke-width:2;
}
.magnifier-2 svg .line.small{
	stroke-width:1;
}
.svg-icons.camera-xs svg path{fill:#999;}

.svg-icons.diamond svg .fills{opacity:.7;}

.svg-icons.diamond svg .lines *{
	stroke:rgb(186,117,215);
}
.svg-icons.diamond svg .fills *{
	fill:rgb(161,44,211);
}

#crayons-thin .line{
	stroke:#999;;

}
#crayons-thin .fill{
	fill:#999;
}

.center-block.landing-feature{
  margin-bottom: 0px;
  margin-top: 0px;
  text-align: center;
  }
#multiset{
	margin-top:40px;
	margin-bottom:30px;
 
}
 
  #multiset .col-xs-2{
	height:150px;
	width:150px;
  background-color: #ffff;
  border:1px solid #eee;
  margin:10px;
  border-radius:4px;
  padding:22px;
  text-align:center;
}

#multiset .col-xs-2 img{
	height:60px;
	width:60px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#referral-modal p.text-center{
	margin-bottom:50px
}
#referral-modal p{
	margin-bottom:15px;
}
#referral-modal p.actions{
	margin-bottom: 35px;
}
@media (min-width: 768px){
#landing .modal-dialog.modal-md{
margin-top:250px;
}
}

#landing #register p.text-center{
  font-size: 25px;
  line-height: 29px;
 }
 
 a#login-button {
	position: absolute;
	top: 10px;
	right: 30px ;
}

/*
* DARK STYLES
*/

#landing #email-collect.solid.dark-bg{
	background-color:#333;
	background-image: url('https://glyphs.co/83d363f6-dc37-4995-877e-0fe9293ecd41.jpg');
	background-size: 100% 100%;
	overflow: visible;
}

#email-collect.dark-bg #glyphs path{fill:#fff}

#email-collect.dark-bg h2.top {
color:#fff;
}
#landing #email-collect.dark-bg p{color: #eee;}

#email-collect.dark-bg form#email-list input#email {
	background-color: #333;
	background-color: rgba(0,0,0,.2);

}
.dark-bg a#login-button{
	background:none;
	border:2px solid #fff;
	color:#fff;
	opacity:.4;
	padding:15px 30px;
	letter-spacing:.2px;
	top:15px;
	right:20px;
}
.dark-bg a#login-button:hover{
opacity:.6;
}

/* 
* END DARK STYLES
*/

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

.landing-photos{
	position: relative;
	background-color: white;
	text-align: center;
	margin:0;
	padding:0;
	margin-right:-1px;
	/* border-radius: 100px; */
	overflow: hidden;
}
.landing-photos img{
	margin:0px;
	padding-left:0px;
	margin: 1%;
	opacity: .8;
	width: 20%;
	height:10% !important;
	height:auto;
	transition:all .5s  ease;
}

.landing-photos img:hover{
	opacity:1;
}

.big-search{
	margin: 10px 0px 10px 15px;
	background: transparent;
	/*transition: all .4s ease;*/
}

#home-search .glyph{
	width: 32px;
	height: 32px;
	margin: -8px -50px 0px 8px;
	display:inline-block;
	opacity: .4;
}

#home-search .big-search-in{
	background-color: white;
	border:none;
	width: 90%;
	margin:0;
	padding: 20px;
	/* padding-left: 55px; */
	font-size: 24px;
	display: inline-block;
	border-radius: 0;
	text-align: center;
}

#home-search{
	position: relative;
	/* top: 57%; */
	/* left: 0%; */
	/* right:0%; */
	width: 98%;
	margin: 20px auto;
	padding:0;
	border: 2px solid #A0A0A0;
}

.particles-js-canvas-el{
	position:absolute;
	top:0;left:0;right:0;
}

.right-text{
	padding-left:50px;
	padding-top:150px
}

.left-text{
	padding-right:50px;
	padding-top:150px;
	text-align:right;
}

.container-fluid.photos{
	margin-bottom:100px;
}

.icon-boxes{
	/* border-radius:150px; */
	overflow:hidden;
	/* border: 10px solid #DFD1E6; */
	margin-bottom: 220px;
	margin-top: 30px;
}

.mid-h2{
	width:44%;
	padding:10px;
	position:absolute;
	background:white;
	height: auto;
	padding: 1% 5px 2%;
	top: 50%;
	transform: translateY(-50%);
	right:0;
	left:0;
	margin:auto;
}

.mid-h2 p{padding:0 5%;}

#landing #playpause #slider{
	margin-left:85px;
	margin-right:80px;
}

#animationbox{
	border-right:1px solid #ccc;
}

.toplanding{
	margin-top: 120px;
}

.glyph-compatible{
	margin-left: auto;
	margin-right: auto;
	height: 350px;
	width: 500px;
	position: relative;
	/* top: 0%; */
	margin-top: -70px;
	/* transform: translateY(-0%); */
}

.glyph-compatible svg {
	max-width: 100%;
	visibility: hidden;
	overflow: visible !important;
}

.compatible path {
	fill: #333;
}

#laptop,
#tablet,
#phone {
	visibility: hidden;
	opacity: 0;
}

#screen {
	position: absolute;
	left: 105px;
	top: 70px;
	width: 300px;
}

.lapscreen {
	position: absolute;
	width: 200px;
	height: 150px;
	background-color: white;
	top: 158px;
	left: 366px;
	visibility: hidden;
	opacity: 0;
}

.phonescreen {
	position: absolute;
	width: 71px;
	height: 100px;
	background-color: white;
	top: 205px;
	left: 125px;
	visibility: hidden;
	opacity: 0;
}

#landing #footer{
	margin-top:0;
}

.top-pad{
	padding-top:130px;
}

.optichart{
	padding-top:50px;
}

svg.main-image {
	max-width: 100%;
}

ol {
	color: #777;
	font-size: 20px;
	padding-left: 40px;
}

div.work-svg {
	width: 150px;
	max-width: 100%;
	height: 150px;
	margin: 0px auto 40px;
	padding: 30px;
	background-color: rgba(255,243,248,0.6208298);
	border-radius:2%;
	position: relative;
}

div.work-svg svg {
	height: 80px;
	width: 80px;
	display:inline-block;
  margin-left:auto;
  margin-right:auto;
	stroke-width: 1.2;
}

canvas#optiChart {
	max-width: 100%;
}

.full-height-number {
	font-size: 200px;
	line-height: 180px;
	font-weight: bold;
}

#landing #smartctr  p {
	color: #333;
}

a#try-it-out{
	display: block;
	background-color: rgba(198,71,143,0.6677576);
	border-style: none;
	padding: 30px 60px;
	border-radius:10px;
	margin: 0px auto 30px;
	min-width: 570px;
}
a#try-it-out span.left-button, a#try-it-out span.right-button {
	color: #692f68;
	display: block;
	float: left;
	width: 50%;
}
a#try-it-out span.left-button {
	font-size: 50px;
	width: 50%;
	text-align: right;
	font-weight: bold;
	padding-right: 20px;
}
a#try-it-out span.right-button {
	text-align: left;
	color: #000;
	margin-top: 16px;
}
a#try-it-out span.clear {
	display: block;
	clear: both;
}

#smartctr ul {
	color: #333;
	font-size: 20px;
}
img.medialoot-logo {
	width: 150px;
	display: inline-block;
	padding: 0px 0px 5px;
}
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Medium devices (desktops, 992px and up) */
@media (max-width: 992px) {
#multiset .col-xs-2{
	height:100px;
	width:100px;
  background-color: #pink;
}
}

/* Small devices (tablets, 768px and up) */

@media (max-width: 768px) { 
	#multiset .col-xs-2{
		height:80px;
		width:80px;
	}
	#multiset .col-xs-2 img{
		height:36px;
		width:36px;
	}
	.landing-photos img{
		width: 30%;
	}
	.mid-h2{
		width:80%;
	}
}

@media (max-width: 428px) { 
	.landing-photos img{
		width: 45%;
	}
 }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {  }