/*styles for resume editor and preview*/

/*resume render theme*/


#resume {
	color: #333131;
}
#resume .picture {
	border-radius: 50%;
	margin: 0 auto;
}
#resume a {
	color: #2980B9;
	text-decoration: none;
}
#resume a:visited {
	color: #2980B9;
}
#resume a:hover {
	color: #3498DB;
	text-decoration: none;
}
#resume section {
    margin-bottom: 2rem;
}		
#resume .header {
	text-align:center;
	font-size: 2rem;
	font-weight: bold;
	margin-top:1em;
	margin-left:5%;
	margin-right:5%;
}
#resume h1 {
	font-size: 4.5rem;
	font-weight: bolder;
	margin-bottom:0;
	text-transform: uppercase;
}
#resume .profile {
	font-size: 1.5rem;
	margin:0;
}

#resume .contact-header {
	font-weight:bold;
}
#resume .label {
	margin-top: 0;
	margin-bottom: 1em;
}
#resume .left {
	font-size: 1em;
}
#resume .main {
	margin 0 auto;
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 50px;
}
#resume h2 {
	font-size: 2.4rem;
	font-weight: 500;
	margin-top: 2.4rem;
}
#resume h3 {
	font-size:2rem;
	margin: 1rem 0 0.5rem;
}
#resume h4 {
	color: #4e4e4e;
	font-size:1.5rem;
	margin: 0.5rem 0 0.25rem;
}
#resume .skills {
	margin-bottom: 10px;
}
#resume p {
	font-size: 1.5rem;
}
#resume li {
	font-size: 1.5rem;
}
#resume .keywords {
	background-color: #333333;
	color:#fff;
	padding: 6px;
	font-size: 1.2rem;
	margin-bottom: 5px;
	display:inline-block;
}
#resume blockquote {
	margin: 2em 10px;
  	padding: 1em 10px;
	border-left: 10px solid #edf0f5;
	font-size: 1.5rem;
}
#resume blockquote .name {
	font-weight:bold;
}
#resume .responsive-show {
	display:none;
}
@media (max-width: 1000px) {
  	#resume .header {
    	font-size: 1.66rem;
  	}
  	#resume h2 {
  		font-size: 3rem;
  	}
}
@media (max-width: 500px) {
	#resume p {
		font-size:1.4rem;
	}
	#resume li {
		font-size:1.4rem;
	}
	#resume blockquote {
		font-size:1.4rem;
	}
	#resume h2 {
		font-size:2.4rem;
	}
	#resume .responsive-hidden {
		display:none;
		visibility: hidden;
	}
	#resume .responsive-show {
		display:inline;
		visibility: visible;
	}
}


/*JSON resume builder css*/

#ResumeEditor, #ResumeRender {
    box-sizing: border-box;
    max-height: 60rem;
    overflow-y: auto;
}

#ResumeEditor label {
	display: block;
	margin: 1em 0 0.5em;
	text-transform: capitalize;
}

#ResumeEditor input {
	display: block;
}

#ResumeEditor, #ResumeRender {
	border: 1px solid #efefef;
	border-radius:7px;
	padding: 1rem;
}

.json-builder input {
	border: 1px solid #ddd;
	border-radius: 5px;
	box-sizing: border-box;
	font-size: 13px;
	margin: 0;
	outline: none;
	padding: 6px;
	resize: none;
	width: 100%;
}
.json-builder button {
	/*font-size: 11px;
	margin: 0;
	outline: 0;
	padding: 4px 8px;*/
}
.json-builder button:hover {
	opacity: .8;
}
.json-builder .title {
	font-weight: bold;
	margin: 25px 0 15px;
	text-transform: uppercase;
}
.json-builder .content {
	padding: 10px;
}
.json-builder .array .array .title {
	/*font-size: 14px;*/
}
.json-builder .item {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 2px;
	margin-bottom: 10px;
	overflow: hidden;
	padding: 24px 10px 10px;
}
.json-builder .item .handle {
	background: #ececec;
	background-image: linear-gradient(#f4f4f4, #ececec);
	border-bottom: 1px solid #ddd;
	overflow: hidden;
	margin: -24px -10px 10px;
	min-height: 18px;
}
.json-builder .item > .string input {
	
}
.json-builder .item > .string .title {
	display: none;
}
.json-builder .placeholder {
	background: #f9f9f9;
	border: 1px dashed #ddd;
	border-radius: 2px;
	margin-bottom: 10px;
	padding: 20px 10px 10px;
}
.json-builder .string .title,
.json-builder .string .description {
	color: #333131;
	font-weight: bold;
	margin: 0;
}
.json-builder .string .description { font-style: italic; font-weight: normal; text-transform: none; }
.json-builder .string + .string,
.json-builder .string + .object {
	margin-top: 8px;
}
.json-builder .add {
	margin-left: 10px;
}
.json-builder .item .add {
	margin-left: 0px;
}