/* RESET

   http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/



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%;

	font: inherit;

	vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

	display: block;

}

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;

}



/**** Isotope filtering ****/



.isotope-item {

  z-index: 2;

}



.isotope-hidden.isotope-item {

  pointer-events: none;

  z-index: 1;

}



.isotope,

.isotope .isotope-item {

/* change duration value to whatever you like */

  -webkit-transition-duration: 0.8s;

     -moz-transition-duration: 0.8s;

          transition-duration: 0.8s;

}



.isotope {

  -webkit-transition-property: height, width;

     -moz-transition-property: height, width;

          transition-property: height, width;

}



.isotope .isotope-item {

  -webkit-transition-property: -webkit-transform, opacity;

     -moz-transition-property:    -moz-transform, opacity;

          transition-property:         transform, opacity;

}



/*==============================

	MY STYLES

==============================*/

body {

    /*background: url("/?originalUrl=https%3A%2F%2Fwp8619.github.io%2Fimg%2Flayout%2Fmain_bg.jpg");

	background-repeat: repeat-x;

	background-color: #fefbf6;*/

    font-size: 15px;

    line-height: 28px;

    font-family: Arial, sans-serif;

}



#home-header {

    width: 100%;

    margin: 0px auto;

	padding-top: 50px;

}



#aboutme a {

    text-decoration: none;

    color: #aaaaaa;

}



#main {

  background: #fff;

	width: 990px;

	margin: 40px auto 0px;

	box-shadow: 0 0 10px #bfbeba;

	-moz-box-shadow: 0 0 10px #bfbeba;

	-webkit-box-shadow: 0 0 10px #bfbeba;

	-o-box-shadow: 0 0 10px #bfbeba;

	-ktml-box-shadow: 0 0 10px #bfbeba;

	-ms-box-shadow: 0 0 10px #bfbeba;

}





#footer {

    clear:both;

    width: 990px;

	height: 100px;

	padding-top: 10px;

	font-size: 12px;

	background: #f5f5f5;

    margin: 0px auto;

    color: #6d6d6d;

	font-family: Arial, sans-serif;

	border-top: 7px solid #ececec;

}



.footer-col {

	float: left;

	margin-left: 20px;

}



.footer-col h1 {

    font-weight: bold;

    line-height: 20px;

}



.footer-col p {

    line-height: 16px;

}



.footer-col a{

	text-decoration: none;

	color: #0088ff;

}



.footer-col a:hover{

  text-decoration: underline;

}



.box {

    color: #4d4d4d;

    float: left;

    margin: 10px;

    width: 220px;

    height: auto;

	position: relative;

    box-shadow: 2px 2px 6px #aaaaaa;

}



.box img {

    width: 92%;

    height: auto;

    margin: 4%;

    margin-bottom: 0px;

}



.box h1 {

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 16px;

    margin: 0px 10px;

    border-bottom: 1px solid #b3b3b3;

}



.box h1 a{

    text-decoration: none;

    color: #00ccff;

}



.box p {

    color: #888888;

    font-family: Arial, sans-serif;

    width: 95%;

    margin: 0px 10px 5px;

    font-size: 12px;

    line-height: 14px;

    line-height: 20px;

}







.p_content h1{

    font-family: Arial, sans-serif;

    color: #00ccff;

    font-size: 24px;

    margin: 10px 0px;

}



.p_content p{

    color: #888888;

    font-family: Arial, sans-serif;

    width: 820px;

    margin: 5px 0px 20px;

    font-size: 16px;

    line-height: 20px;

    height: auto;

}



.p_content p img{

    float: right;

    margin: 0px 10px 5px;

}



a{

  color: #0088ff;

  /*color: #ff8f00;*/

  text-decoration: none;

}



#match-citation-text {

  font-size: 12px;

  font-family: "Courier New",monospace;

  line-height: 18px;

  background-color: #eeeeee;

  border: 1px solid #aaaaaa;

  padding: 10px;

}



#match-nav-wrapper {

  width: 100%;

  height: 60px;

  position: fixed;

  background-color: #333333;

  top: 0px;

  left: 0px;

  box-shadow: 0 0 10px #bfbeba;

  -moz-box-shadow: 0 0 10px #bfbeba;

  -webkit-box-shadow: 0 0 10px #bfbeba;

  -o-box-shadow: 0 0 10px #bfbeba;

  -ktml-box-shadow: 0 0 10px #bfbeba;

  -ms-box-shadow: 0 0 10px #bfbeba;

}



#match-nav-bar {

  width: 1000px;

  margin: 5px auto;

  background-color: #333333;

  font-size: 16px;

  line-height: 50px;



}





#match-nav-bar table {

  width: 1000px;

  margin-left: 0px;

  vertical-align:bottom;

}



#match-nav-bar a:hover {

  background-color: #444444;

}



#match-nav-bar table thead tr th a {

  display: block;

  text-decoration: none;

  color: #dddddd;

}





/*#header-title {

    margin-left: auto;

    margin-right: auto;

    width: 1000px;

    padding-top: 10px;

    padding-bottom: 10px;

    color: #ccc;

    font-weight: 500;

    font-size: 1.4rem;

    white-space: nowrap;

}*/





#main-wrapper{

  background: #fff;

  width: 1000px;

  /*height: 1200px;*/

  margin: 90px auto 0px;

  bottom: 5px;

}



/*#suncg-main-wrapper2{

  background: #fff;

  width: 1000px;

  height: 1200px;

  margin: 0px auto 0px;



  bottom: 5px;

}*/



#suncg-wrapper h1 {

  font-weight: 700;

  font-size: 23px;

  border-bottom: 1px solid #e5e5e5;

  margin-top: 10px;

  margin-bottom: 5px;

}



#suncg-wrapper h3 {

  float:left;

  font-size:16px;

  width: 860px;

  margin-top:2px;

  margin-left:10px;

  margin-bottom: 2px;

  height:24px;

  color:#333333;

}



#suncg-wrapper h2 {

  font-weight: 700;

  font-size: 14px;

  margin-top: 10px;

  margin-bottom: 5px;

}





#match-wrapper {

    font-family: Arial, sans-serif;

    width: 880px;

    margin-left:55px;

    height: 9440px;

    text-align:left;



    color: #333333;

    font-size: 16px;

    /*line-height: 18px;*/

}





#portfolio {

  background: #ffffff;

  width: 980px;

  margin: 20px auto 0px;

  font-family: 'Roboto', Arial, sans-serif;

  font-size: 14px;

  line-height: 20px;

}



#portfolio a {

  color: #0088ff;

  /*color: #ff8f00;*/

  text-decoration: none;

}



#portfolio a:hover {

  text-decoration: underline;

}



#portfolio-bio {

  width: 650px;

  padding-left: 20px;

  float: right;

}



#portfolio-bio h1 {

  font-size: 36px;

  margin-bottom: 10px;

  text-align: center;

}



#portfolio-bio h2 {

  text-align: center;

}



#portfolio-photo {

  float: left;

}



#portfolio-photo img {

  width: 220px;

  margin-top: 20px;

  border-radius: 5%;

}



#portfolio-info {

  float: right;

  width: 980px;

  margin-top: 20px;

}



#portfolio-info h1 {

  font-size: 24px;

  line-height: 30px;

  font-weight: 700;

  /*color: #ff8f00;*/

}





#portfolio-projects  tr td:last-child{

  padding-left: 20px;

}







/*

#portfolio-info tr td img{

  max-width: 120px !important;

  max-height: 100px !important; 

}*/





#portfolio-projects img {

  width: 130px;

  margin-right: 30px;

  text-align: center;

}





/*#portfolio-projects tr td:first-child{

  width: 120px;

  height: 80px;

  text-align: center;

}*/



#portfolio-projects table {

  float: left;

  margin-top: 20px;

}



#portfolio-projects table img {

  margin-top: -10px;

}



#portfolio-projects table b {

  font-weight: 700;

}





.video-medium

    {

        width: 400px;

        height: 230px;

        padding: 0;

        margin: 0;

        border: none;

        margin-right: 2em;

    }



.row {

    /*display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;*/

  height: 240px;



}



.video-list{

  float:left;

}

.video-text{

  float:right;

  width: 55%

  /*height: 230px;*/

}