/* =Reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
ol,
ul {
	list-style: none;
}
blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption,
th,
td {
	font-weight: normal;
	text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}
html {
	overflow-y: scroll;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
a:focus {
	outline: thin dotted;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}
audio,
canvas,
video {
	display: inline-block;
}
audio:not([controls]) {
	display: none;
}
del {
	color: #333;
}
ins {
	background: #fff9c0;
	text-decoration: none;
}
hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin: 24px;
	margin-bottom: 1.714285714rem;
}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
small {
	font-size: smaller;
}
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
}

/* Clearing floats */
.clr,
.clear:after,
.wrapper:after,
.format-status .entry-header:after {
	clear: both;
}
.clear:before,
.clear:after,
.wrapper:before,
.wrapper:after,
.format-status .entry-header:before,
.format-status .entry-header:after {
	display: table;
	content: "";
}


body {
  
	-webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  
  position:absolute;
left:0; top:0;
min-height:100%;
width:100%;
padding:0!important;
background:#f9f9f9;
}

body, input { 
font-family: 'Open Sans', sans-serif;


}

#top-menu-wrap {
 padding:5px 10px 0;
 
 /*background: #bababa;
background: -moz-linear-gradient(top,  #bababa 0%, #a0a0a0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#a0a0a0));
background: -webkit-linear-gradient(top,  #bababa 0%,#a0a0a0 100%);
background: -o-linear-gradient(top,  #bababa 0%,#a0a0a0 100%);
background: -ms-linear-gradient(top,  #bababa 0%,#a0a0a0 100%);
background: linear-gradient(to bottom,  #bababa 0%,#a0a0a0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#a0a0a0',GradientType=0 );
*/
border-bottom:2px solid #49494b;

}

#top-menu { position:relative; max-width:1200px; margin:0 auto; }

#logo { display:inline-block; width:55px; height:48px;
background: url(images/logo.png) no-repeat;
float:left;
}


#main-menu { float:left; margin-top:25px;}

h1 {font-family: 'Gudea', sans-serif;}

#main-menu a { 
color:#fff; 
text-decoration:none;
text-shadow:1px 0px 2px rgba(0,0,0,1);
display:inline-block;
margin-left:20px;
line-height:1em;
font-family: 'Gudea', sans-serif;
text-transform:uppercase;
font-size:15px;
float:left;
position:relative;
background:#49494b;
padding:4px 10px;
}

.beta-label { position:absolute; font-size:12px; color:#f00; right:0; top:-14px;
text-shadow:none;          
text-transform:none;
}

h1 { font-size:14px; text-transform:uppercase;}
#site-content { margin:20px 20px 80px;}
#main { max-width:1200px; margin:0 auto;}

#main-menu a.active , #main-menu a:hover { color:#FFA500;}


#logo:hover
/*#main-menu a:hover*/  { opacity:0.9;}

.plant-roof { position:absolute; left:8px; top:-22px; width:45px; height:22px; background: url(images/plantroof.png) no-repeat; 
display:none;
}

#main-menu a:hover .plant-roof { display:block;}

footer { position:absolute; bottom:10px; left:0; width:100%;
text-align:center;

}

#footer-content { margin:0 auto; max-width:1200px;}

footer a, footer {font-size:12px;
color:#999;
}

#footer-copy { display:inline-block; margin-right:20px; }

#footer-menu { text-align:center; display:inline-block; margin-right:80px; }
#footer-menu a {font-size:13px; color:#333; display:inline-block; margin-right:10px;}

#socials { display:inline-block; margin-left:20px; vertical-align:middle;}

#code-results { margin-top:30px;}
.code-result { float:left; margin-right:30px;}

.tool-row { margin-bottom:10px;}

#side-tools-panel { position:absolute; right:0; width:190px; top:55px;
background:#29292b;
padding:10px;
color:#fff;
}

#side-tools-panel h1 { text-align:center;}


#side-tools-panel a { color:#fff; text-decoration:none;}

#top-tools-panel {margin-bottom:20px;}

/* ======= CLIP PATH =============== */
.tt-button { 
outline:none;
display:inline-block;
width:32px;
height:32px;
padding:4px;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;

	border:1px solid #dcdcdc;
	text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	color:#777777;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
  margin-right:6px;
  vertical-align:top;
}


.tt-button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}

.tt-button.active {
  background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #cfcfcf) );
  -webkit-box-shadow:inset 0px 0px 0px 1px #fff;
 	-moz-box-shadow:inset 0px 0px 0px 1px #fff;
 	box-shadow:inset 0px 0px 0px 1px #fff;
  border:1px solid #FFA500;
}

#next-marker-lnk:before,
#prev-marker-lnk:before,
#remove-marker-lnk:before,
#help-btn:before,
#use-bg-color-btn:before,
#apply-mask-btn:before,
#show-markers-btn:before,
#reset-lnk:before,
#pen-selection-lnk:before  ,
#lines-selection-lnk:before

{
opacity:0.8;
display:inline-block;
width:32px;
height:32px;
}

#pen-selection-lnk:before{ content:"";  background:url(images/lasso-btn.png) no-repeat center center;}
#lines-selection-lnk:before{ content:""; background:url(images/polygonal-btn.png) no-repeat center center;}
#reset-lnk:before { content:""; background:url(images/reset-btn.png) no-repeat center center; }
#show-markers-btn:before { content:""; background:url(images/markers-btn.png) no-repeat center center; }
#apply-mask-btn:before { content:""; background:url(images/cut-btn.png) no-repeat center center; }
#use-bg-color-btn:before {content:""; background:url(images/image-btn.png) no-repeat center center; }
#help-btn:before {content:""; background:url(images/help-btn.png) no-repeat center center; }
#remove-marker-lnk:before  {content:""; background:url(images/remove-marker.png) no-repeat center center; }
#next-marker-lnk:before {content:""; background:url(images/next-btn.png) no-repeat center center;}
#prev-marker-lnk:before {content:""; background:url(images/prev-btn.png) no-repeat center center;}

.drop-down-item { position:relative; width:auto; cursor:pointer;padding-left:10px; padding-right:10px;}
.drop-down-menu { position:absolute; top:0px; margin-top:32px; left:0; display:none; background:#49494b; z-index:3;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.drop-down-menu a { display:block; padding:8px 14px; text-decoration:none; color:#fff; font-size:13px;}
.drop-down-menu a:hover {color:#FFA500;  background:#29292b; }
#clip-example { width:100%;}

.ddi-label { position:relative; top:8px; color:#333;}
.drop-down-item:hover .drop-down-menu{ display:block; }

div.sp-replacer { padding:9px 5px; vertical-align:top;}

#fancy-help { width:700px; font-size:15px; line-height:20px;}
#fancy-help li { margin-bottom:10px;}
#fancy-help h2 { font-size:22px; margin-bottom:15px;}


.generator-face { background:#49494b;  border:1px solid #ddd; 
  transition: all 0.3s;
}
.generator-face:hover {  background:#29292b;  
  transform: scale(1.025);
  border:1px solid #FFA500; 
}

.gci-link { display:block; }
.generator-face img { width:100%; height:auto; display:block;}

#generator-faces { 
    display:grid;
    grid-column-gap: 20px;
    grid-template-columns:25% 25% 25% 25%; 
 
 }
.generator-face { width:auto; }
.generator-face h2 { text-align:center; font-family:'Gudea', sans-serif; font-weight:normal;

}
.generator-face h2 a { 
text-decoration:none; color:#fff; text-shadow:1px 0px 2px rgba(0,0,0,1);
font-size:14px;
text-transform:uppercase;
padding:10px 0; display:block;
}
.generator-face:hover a {color:#FFA500;}

.input-label {
display: inline-block;
width: 80px;
}

#page-title {
font-size: 38px;
margin-bottom: 20px;
}

#page { font-size:15px; line-height:20px; color:#222;}
#page p { margin-bottom:15px;}
.form-row { margin-bottom:10px;}