@charset "UTF-8";
html, body, header, nav, div, ol, ul, li, dl, dt, dd, heading, img, p, h1, h2, h3, h4, h5, h6, main, aside, article, section, footer, pre, form, fieldset, input, blockquote, textarea, table, th, td, embed, object {
margin: 0px;
padding: 0px;
}

/*desktop*/

body {
	background-color: #828089;
}
#container  {
	margin-right: auto;
	margin-left: auto;
	width: 1300px;
	background-color: #FFFFFF;
	position: relative;
}
#home_padding {
	padding: 50px;
	height: 1000px;
}

#top_padding {
	padding: 30px;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
}
#home_padding a:hover  {
	background-image: url(../_images/img_gem_logo_2.png);
}
#about_title h2   {
	font-family: 'Source Sans Pro', sans-serif;
	color: #867AB4;
	text-align: right;
	font-size: 3.5em;
	z-index: 900;
	margin-bottom: 10px;
}
header a {
	float: left;
	font-size: 45px;
	font-family: 'Source Sans Pro', sans-serif;
	color: #828089;
	font-weight: 600;
	width: auto;
	text-decoration: none;
}

nav {
	float: right;
	color: #828089;
	font-family: 'Source Sans Pro', sans-serif;
	margin-top: 25px;
	font-size: 20px;
	word-spacing: 20px;
}

nav a {
	color: #828089;
	text-decoration: none;
	cursor: pointer;
}
nav a:hover {
	color: #3F3568;
	cursor: pointer;
}

img {max-width:100%;}

footer {
	height: 50px;
	clear: both;
	padding-right: 30px;
	padding-left: 30px;
	background-image: url(../_images/ftr_stripes.png);
	z-index: 900;
	margin-top: 50px;
}

footer img {
	padding-top: 15px;
}

.min-max {
	max-width: 1000px;
	/* [disabled]min-width: 600px; */
}

.thin_portfolio_text {
	font-weight: 300;
	font-size: 33px;
}

.purple_text {
	color: #867AB4;
	margin-top: 20px;
	padding-top: 100px;
}

.quote_box {
	width: 730px;
	height: 730px;
	position: absolute;
	top: 100px;
	right: 100px;
	z-index:4;
}

.quote_box p {
	font-family: 'Source Sans Pro', sans-serif;
	color: #FFFFFF;
	text-align: center;
	padding-top: 280px;
	font-size: 1.75em;
}
.quote_box p #small_text {
	font-size: 0.75em;
}

.mySlides {
	/* [disabled]display: block; */
	margin-left: auto;
	margin-right: auto;
}

.icons_right_margin {
	margin-left: 30px;
	float: right;
}

#purple_circle {
	width: 730px;
	height: 730px;
	border-radius: 500px;
	background-color:
	rgba(132,121,178,0.40);
	position: absolute;
	top: 100px;
	right: 100px;
	z-index: 1;
}

#gray_circle {
	width: 533px;
	height: 533px;
	border-radius: 500px;
	background-color: rgba(128,129,132,0.10);
	position: absolute;
	top: 380px;
	left: 150px;
	z-index: 2;
}

#logo {
	position: absolute;
	top: 160px;
	float: left;
	z-index: 3;
}

#circle_border {
	border-bottom: 5px dotted #828089;
	width: 1240px;
	height: 10px;
	clear: both;
}





#artwork {
	margin: 0px 30px 50px;
	clear: both;
	height: 970px;
}

#artwork_title {
	width: 445px;
	float: left;
	padding-top: 560px;
	margin-right: 40px;
}

#artwork #artwork_title h2 {
	font-family: 'Source Sans Pro', sans-serif;
	color: #867AB4;
	text-align: right;
	font-size: 3.5em;
	z-index: 900;
	margin-bottom: 10px;
}

#artwork #artwork_title p {
	font-family: 'Source Sans Pro', sans-serif;
	color: #828089;
	text-align: right;
	font-size: 1.25em;
	font-weight: 100;
	line-height: 1.5em;
}


#title_grad {
	position: relative;
	top: 640px;
}

#folio {
	float: left;
	height: 720px;
	width: 514px;
}

#port_piece {
	float: left;
}

#port_piece .arrows {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	display: block;
	min-width: 50px;
	max-width: 92px;
	height: 722px;
	cursor: pointer;
}

#left_button {
	margin-right: 28px;
	float: left;
	padding-top: 290px;
}

#right_button {
	margin-left: 28px;
	padding-top: 290px;
	float: left;
}


.blck_outline {
	border-style: solid;
	border-width: 1px;
}





#artwork_hztl {
	margin: 0px 30px 50px;
	clear: both;
	height: 970px;
}

#artwork_hztl_title {
	width: 445px;
	padding-top: 560px;
	margin-right: 40px;
}

#artwork_hztl #artwork_hztl_title h2 {
	font-family: 'Source Sans Pro', sans-serif;
	color: #867AB4;
	text-align: right;
	font-size: 3.5em;
	z-index: 900;
	margin-bottom: 10px;
	cursor: pointer;
}

#artwork_hztl #artwork_hztl_title p {
	font-family: 'Source Sans Pro', sans-serif;
	color: #828089;
	text-align: right;
	font-size: 1.25em;
	font-weight: 100;
	line-height: 1.5em;
}

#title_grad_hztl {
	position: relative;
	top: 730px;
}

#folio_hztl {
	width: 1100px;
	margin-right: auto;
	margin-left: auto;
	float: left;
	height: 650px;
}

#port_piece_hztl {
	width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0px;
}

#left_button_hztl {
	margin-right: 135px;
	float: left;
	padding-top: 290px;
	width: 77px;
}

#right_button_hztl {
	margin-left: 28px;
	padding-top: 290px;
	width: 77px;
	float: right;
}





#about_title {
	width: 445px;
	margin-right: 40px;
	margin-left: 30px;
}
#about_title_grad {
	position: absolute;
	top: 200px;
}
#about_content {
	width: 1100px;
	padding-top: 50px;
	padding-left: 50px;
	padding-right: 50px;
	margin-left: auto;
	margin-right: auto;
	height: 800px;
}
#about_logo {
	/* [disabled]margin-top: 50px; */
	margin-right: 50px;
	/* [disabled]margin-bottom: 50px; */
	width: 401px;
	float: left;
	padding-left: 10px;
}
#about_text {
	font-family: 'Source Sans Pro', sans-serif;
	float: left;
	width: 600px;
	color: #828089;
	font-size: 2em;
	padding-top: 208px;
}
#contact_symbols {
	padding-top: 208px;
	float: left;
	width: 30px;
	margin-right: 10px;
}
#contact_text {
	font-family: 'Source Sans Pro', sans-serif;
	float: left;
	width: 540px;
	color: #828089;
	font-size: 2em;
	padding-top: 208px;
}
#contact_text a {
	text-decoration: none;
	color: #867AB4;
}
#contact_text a:hover  {
	text-decoration: none;
	color: #3F3568;
}
.contact_icon_one {
	float: left;
	margin-right: 5px;
	width: 30px;
	padding-top: 8px;
}
.contact_icon_two {
	float: left;
	margin-right: 5px;
	width: 30px;
	padding-top: 34px;
}
.text_padding {
	padding-top: 20px;
}
.hide_arrows {
	display: none;
}

@media only screen and (min-width: 769px) {
.dropbtn {
	display: none;
}
	
.dropdown-content {
	display: none;
}	
	
}
	
/*tablet*/
@media only screen and (max-width: 769px) {
	
#container  {
	margin-right: auto;
	margin-left: auto;
	width: 700px;
	background-color: ffffff;
}
	
#home_padding {
	padding: 0px;
}

#top_padding {
	padding: 30px 30px 0px;
	margin-bottom: 0px;
}	
	
header a {
	float: left;
	font-size: 35px;
	font-family: 'Source Sans Pro', sans-serif;
	color: #828089;
	font-weight: 600;
}
	
.thin_portfolio_text {
	font-weight: 300;
	font-size: 23px;
}

.purple_text {
	color: #867AB4;
	margin-top: 20px;
	padding-top: 100px;
}	

nav {
	display: none;
}	
	
.dropbtn {
    padding: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
	position: relative;
	display: inline-block;
	float: right;
	z-index: 1000;
}

.dropdown-content {
	display: none;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 20px;
	word-spacing: 20px;
	position: absolute;
	background-color: #828089;
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a {
	color: #FFFFFF;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown a:hover {
	background-color: #867AB4
}

.show {display:block;}	
	
#circle_border {
	border-bottom: 5px dotted #828089;
	width: 642px;
	height: 10px;
	clear: both;
	margin-bottom: 60px;
}	
	
#logo {
	width: 200px;
	z-index: 3;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	top: 100px;
	float: none;
	clear: both;
	padding-left: 245px;
	padding-right: 250px;
}	
	
#purple_circle {
	width: 500px;
	height: 500px;
	border-radius: 500px;
	background-color:
	rgba(132,121,178,0.10);
	position:absolute;
	top: 20px;
	left: 20px;
	z-index:1;

}
#purple_small_circle {
	width: 400px;
	height: 400px;
	border-radius: 500px;
	background-color:
	rgba(132,121,178,0.20);
	position:absolute;
	top: 290px;
	left: 275px;
	z-index:1;

}
#gray_circle {
	width: 400px;
	height: 400px;
	border-radius: 500px;
	position: absolute;
	top: 570px;
	left: 150px;
	z-index: 2;
}
		
.quote_box {
	width: 400px;
	height: 400px;
	position: absolute;
	top: 380px;
	left: 150px;
	z-index: 4;
}
.quote_box p {
	font-family: 'Source Sans Pro', sans-serif;
	color: #828089;
	text-align: center;
	padding-top: 320px;
	font-size: 1.5em;
}

	
	
	
	
#about_logo {
	margin-right: 50px;
	width: 200px;
	float: left;
	padding-left: 10px;
}

#about_text {
	float: left;
	width: 350px;
	padding-top: 100px;
	font-size: 1.5em;
}	

	
	
	
	
#contact_text {
	float: left;
	width: 350px;
	padding-top: 103px;
	font-size: 1.5em;
}	
	
#contact_symbols {
	padding-top: 105px;
	float: left;
	width: 30px;
	margin-right: 10px;
}

.contact_icon_one {
	float: left;
	margin-right: 5px;
	width: 30px;
	padding-top: 0px;
}
.contact_icon_two {
	float: left;
	margin-right: 5px;
	width: 30px;
	padding-top: 25px;
}	

	
	
	
	
#artwork {
	margin: 0px 30px 50px;
	height: 480px;
}
	
#artwork_title {
	width: 600px;
	float: none;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	padding-top: 760px;
}
	
#artwork #artwork_title h2 {
	margin-right: 330px;
	margin-bottom: -35px;
	text-align: right;
	font-size: 2em;	
}
	
#artwork #artwork_title p {
	margin-left: 300px;
	text-align: left;
	font-size: 1.25em;
	font-weight: 100;
	line-height: 1.5em;	
}
	
#title_grad {
	top: 810px;
	width: 320px;
	height: 22px;
	position: relative;
}
	
#folio {
	width: 500px;
	height: 1400px;
	margin-right: auto;
	margin-left: auto;
	float: left;
}	

#port_piece {
	float: left;	
}
	
#port_piece .arrows {
	max-width: 50px;
	height: 322px;
	cursor: pointer;
	z-index: 900;
}
	
#left_button {
	margin-right: 20px;
	padding-top: 290px;
	width: 50px;
	position: relative;
	z-index: 800;
}	

#right_button {
	margin-left: 20px;
	padding-top: 290px;
	width: 50px;
}	

	

	
	
#artwork_hztl {
	margin: 0px 10px 0px;
	clear: both;
	height: 800px;
}
	
#artwork_hztl_title {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 30px;
	
}
	
#artwork_hztl #artwork_hztl_title h2 {
	font-size: 2em;
	margin-bottom: -39px;
	margin-right: 330px;
}
	
#artwork_hztl #artwork_hztl_title p {
	font-size: 1.25em;
	font-weight: 100;
	line-height: 1.5em;
	text-align: left;
	margin-left: 300px;
}

#title_grad_hztl {
	width: 335px;
	height: 25px;
	position: relative;
	top: 420px;
}	
	
#folio_hztl {
	width: 455px;
	height: 370px;
	margin-right: auto;
	margin-left: auto;
	float: left;
}

#port_piece_hztl {
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0px;
}

#left_button_hztl {
	margin-right: 20px;
	padding-top: 100px;
	width: 50px;
}

#right_button_hztl {
	margin-left: 20px;
	padding-top: 100px;
	width: 50px;
}
#first_navigation {
	display: none;
}





}

/*mobile*/
@media only screen and (max-width: 479px) {

#container  {
	margin-right: auto;
	margin-left: auto;
	width: 440px;
}	

#top_padding {
	padding: 30px 30px 0px;
	margin-bottom: 0px;
}	
	
#circle_border {
	border-bottom: 5px dotted #828089;
	width: 367px;
	height: 10px;
	clear: both;
	margin-bottom: 30px;
}	

#about_logo {
	display: none;
}	
	
#about_title {
	width: 200px;
	margin-right: 10px;
	margin-left: 22px;
	font-size: 0.65em;
}
#about_title_grad {
	position: absolute;
	top: 157px;
	width: 55%;
	height: 2.25%;
}	
	
#about_text {
	width: 350px;
	padding-top: 0px;
}		
	
#logo {
	width: 170px;
	z-index: 3;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	top: 100px;
	float: none;
	clear: both;
	padding-left: 135px;
	padding-right: 135px;
}	
	
#purple_circle {
	width: 320px;
	height: 320px;
	border-radius: 500px;
	background-color:
	rgba(132,121,178,0.10);
	position:absolute;
	top: 20px;
	left: 10px;
	z-index:1;

}

#purple_small_circle {
	width: 225px;
	height: 225px;
	border-radius: 500px;
	background-color:
	rgba(132,121,178,0.20);
	position:absolute;
	top: 270px;
	left: 205px;
	z-index:1;

}

#gray_circle {
	width: 400px;
	height: 400px;
	border-radius: 500px;
	position: absolute;
	top: 420px;
	left: 20px;
	z-index: 2;
}

#contact_text {
	float: left;
	width: 350px;
	padding-top: 0px;
	font-size: 1.5em;
}	

#contact_symbols {
	padding-top: 0px;
	float: left;
	width: 30px;
	margin-right: 10px;
}

.contact_icon_one {
	float: left;
	margin-right: 5px;
	width: 30px;
	padding-top: 0px;
}

.contact_icon_two {
	float: left;
	margin-right: 5px;
	width: 30px;
	padding-top: 25px;
}	
	
.quote_box {
	width: 400px;
	height: 400px;
	position: absolute;
	top: 230px;
	left: 20px;
	z-index: 4;
}	

	
	
	
	
#artwork {
	margin: 0px 30px 50px;
	height: 480px;
}
	
#artwork_title {
	width: 390px;
	height: 80px;
	float: none;
	position: relative;
	padding-top: 0px;
	margin-bottom: 60px;
}
	
#artwork #artwork_title h2 {
	margin-right: 30px;
	margin-bottom: 10px;
	text-align: left;
	font-size: 1.75em;	
}
	
#artwork #artwork_title p {
	margin-left: 0px;
	text-align: left;
	font-size: 1em;
	position: absolute;
}
	
#title_grad {
	top: 44px;
	width: 300px;
	height: 18px;
	position: relative;
}
	
#folio {
	width: 250px;
	height: 300px;
	margin-right: auto;
	margin-left: auto;
	float: left;
}	

#port_piece {
	float: left;	
}
	
#port_piece .arrows {
	height: 200px;
	cursor: pointer;
	z-index: 900;
}
	
#left_button {
	margin-right: 10px;
	padding-top: 130px;
	width: 50px;
}	

#right_button {
	margin-left: 10px;
	padding-top: 130px;
	width: 50px;
}	

	
	
	
	
#artwork_hztl {
	margin: 0px 10px 0px;
	clear: both;
	height: 800px;
}
	
#artwork_hztl_title {
	width: 420px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0px;	
}
	
#artwork_hztl #artwork_hztl_title h2 {
	font-size: 1.25em;
	margin-bottom: -20px;
	margin-right: 235px;
}
	
#artwork_hztl #artwork_hztl_title p {
	font-size: 1em;
	font-weight: 100;
	line-height: 1.5em;
	text-align: left;
	margin-left: 205px;
}

#title_grad_hztl {
	width: 200px;
	height: 18px;
	position: relative;
	top: 318px;
}	
	
#folio_hztl {
	width: 280px;
	height: 280px;
	margin-right: auto;
	margin-left: auto;
	float: left;
}

#port_piece_hztl {
	width: 420px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0px;
}

#left_button_hztl {
	margin-right: 20px;
	padding-top: 100px;
	width: 50px;
}

#right_button_hztl {
	margin-left: 20px;
	padding-top: 100px;
	width: 50px;
}	
	
}