html * {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
html, body { background-color: #fff;  transition: background-color 1s ease;  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; line-height: 1.5; font-size: 22px;}
input::-moz-focus-inner { border: 0; }
strong { font-weight: bold; }

h1 {color: #fff;font-size: 55px;font-weight: 600;text-align: center;max-width: 900px; margin:0 auto; line-height: 60px; margin-top: 40px}
h2 {color:#fff; font-size: 38px;font-weight: 600; max-width: 900px; margin:0 auto; line-height: 60px;}
h3 {font-size: 32px;font-weight: 600; max-width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; padding-top: 50px; }
h4 {font-size: 24px;font-weight: 600; max-width: 900px; margin-left: auto; margin-right: auto;margin-top: 30px; margin-bottom: 20px;}
p {font-size: 24px; color: #fff; max-width: 900px; margin: 0 auto; }
a {-webkit-transition: ease-out .2s;-moz-transition: ease-out .2s; -o-transition: ease-out .2s; transition: ease-out .2s; text-decoration: none;color: #fff; opacity: 1}

/* header */
.logo {float: left; font-size: 24px;}
.logo:hover {opacity: .7;}
.header {margin-bottom: 30px;font-weight: 500;}
.header-animation {height: 75px; margin-bottom: 30px; font-weight: 500}
.header a {color: #fff}
.nav {float: right; cursor: pointer;}
.nav div:nth-child(n+2):nth-child(-n+4) {margin-left: 30px}
.nav a:hover {opacity: .7}
.nav div {float: left; padding-bottom: 10px}

/* Companies */
.companies {background-color: #F8F8F8;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;}
.row1 .companies {width: 48%; float: left;margin-right: 2%;}
.row1 .companies img {width: 50%; margin: 0 auto; display: block;padding: 20%;}
.row2 .companies {width: 31.3%; float: left;margin-right: 2%; margin-top: 20px;}
.row2 .companies img {width: 50%; margin: 0 auto; display: block;padding: 12%;}
.row1 a:hover {background-color: #F1F1F1;}
.row2 a:hover {background-color: #F1F1F1;}
.recent-companies {margin-top: 100px; margin-bottom: 100px;}
.about {margin-bottom: 40px;}
.about h1 {color: #000;font-size: 55px;font-weight: 600; text-align: left;line-height: 63px; margin-top: 80px; max-width: none;}
.about img {width: 100%; margin-top: 15px;}

/* dropdown */
.dropdown {position: relative;display: inline-block;}
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9; min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);padding: 10px 20px;z-index: 1; margin-left: -13px; margin-top: 8px;}
.dropdown-content a {color: #000; margin: 0 !important; line-height: 48px}
.work-nav {color: #fff;}
.work-nav:hover .dropdown-content {display: block;}
.dropdown-content:hover .dropdown-content {display: block;}


/* panel styles */
.panel {align-items: center;padding: 60px 13%; max-width: 1600px; margin: 0 auto;}

.linkedin-home h1 {color: #000;}
.linkedin-home p {color: #000;}
.linkedin-home a {color: #000; border:1px solid #000 !important;}
.linkedin-home a:hover {background-color: #F0F0F0 !important;}

/*work */
.home {margin-bottom: 50px}
.home img {text-align: center; margin: 0 auto; display: block}
.home p {margin-top: 40px; text-align: center;}
.home a {display: block; width: 180px; padding-top: 10px; padding-bottom: 10px; border: 1px solid #fff; text-align: center; margin: 45px auto;}
.home a:hover {background-color: rgba(255, 255, 255, 0.1);}
.white h1 {color: #000}
.white a {color: #000; border: 1px solid #000 }
.white p {color: #000}
.home-logo {margin-top: 30px}
.main-img {width: 100%}
.dropbox-main-img {width: 70%; float: left; margin-right: 3%}
.dropbox-main-img img {border-radius: 8px;}
.dropbox-main-img2 {width: 21%; float: left}
.linkedin-main-img {width: 30%; float: left; margin-right: 3%}
.linkedin-main-img img {border-radius: 20px; border: 1px solid #F0F0F0;}
.linkedin-main-img2 {width: 21%; float: left}
.home-half {margin-bottom: 40px;float: left;}
.home-half-inside {width: 49%; float: left; text-align: center}
.home-half-inside img {width: 95%;}
.home-half-inside:nth-child(2) {margin-left: 2%}
.home-half-inside h3 {margin-top: 20px; color: #fff;  margin-top: 0px; padding-top: 20px}
.home-half-inside p {margin-top: 5px;font-size: 18px;    padding-left: 10px;padding-right: 10px;}
.home-half-inside a {text-decoration: none; border: none; width: 100%; margin-top: 10px; opacity: .8}
 

.white2 h1 {color: #000}
.white2 a {color: #000;}
.white2 .home a {color: #000; border: 1px solid #000 }
.white2 .home a:hover {background-color: #F8F8F8;}
.white2 p {color: #000}


/* project */
/*.project {margin-bottom: 30px}*/
.project {margin-top: 100px;}
.project p {text-align: left}
.project h2 {margin-bottom: 20px}
.project h3 {text-align: left; margin-bottom: 30px; color: #000}
.project-section p {color: #000}
.project-section img {text-align: center;margin: 0 auto;display: block; width: 100%;}
.project-info { max-width: 900px;  margin: 0 auto;}
.project-info div {float: left; margin-top: 40px; margin-bottom: 20px}
.project-info div:nth-child(-n+2) {margin-right: 60px}
.project-info p:nth-child(1) {opacity: .5}	
.tableofcontents {border-bottom: 1px solid #EBEBEB; padding-top: 40px;color: #000; padding-bottom: 40px; margin: 0 auto; text-align:center;}
.tableofcontents a {color: #000; margin-left: 10px; margin-right: 10px;}
.tableofcontents a:hover {opacity: .5}
.project-image {padding: 40px; margin-top: 30px;margin-bottom: 10px;}
.project-section a {color: #707070}

/* project details*/
.half img {width: 49% !important; float: left; margin-top: 0px}
.half img:nth-child(2) {margin-left: 2%}



/* colors */
.blue {background-color: #0F287C;}
.white{background-color: #fff;}
.white2 {background-color: #fff;border-top: 1px solid #F5F5F5;}
.gray {background-color: #F8F8F8}
.purple {background-color: #4141A2}
.black {background-color: #21242B; }
.green {background-color: #21B179}
.yellow {background-color: #FFF3D1}
.red {background-color: #C2362E}
.envoy-green {background-color: #DFFBE6}
.envoy-blue {background-color: #F0F4FF}

.yelp-orange {background-color: #F9E2D7}
.yelp-blue {background-color: #DBECFA}
.yelp-red {background-color: #F4D9D7}
.yelp-green {background-color: #E0EED7}
.yelp-gray {background-color: #F1F1F0}
.yelp-dark {background-color: #353535}

.exponent-purple {background-color: #4D34D7}
.exponent-gray {background-color: #F9F9F9}
.exponent-lightpurple {background-color: #F1F3FE}
.exponent-yellow {background-color: #FEFCF1}
.exponent-green {background-color: #F2FEF1}

.linkedin-gray {background-color: #F6F4F2;}
.linkedin-blue {background-color: #DDE7F1;}
.linkedin-green {background-color: #DAEBD1;}
.linkedin-purple {background-color: #EBE3F3;}
.linkedin-yellow {background-color: #FDE2BC;}
.linkedin-red {background-color: #FFDFD6;}
.linkedin-purple2 {background-color: #F3E1F2;}

.actual-black {color: #000000 !important;}

/* widths */ 
.thirty {width: 28% !important}
.fifty {width: 50% !important}
.fourty {width: 40% !important}

/* Animation */
.header-animation a {color: #000; font-weight: 500;}
.animation-title {}
.animation-title h2 {color: #000;font-size: 26px;font-weight: 400;text-align: center;}
.animation p {font-size: 14px;margin-top: 20px; font-size: 18px; width: 700px;}
.animation a {display: inline-block; vertical-align: top; font-weight: 500;}
.animation-actions {margin: 0 auto; text-align: center;}
.animation-main {width: 20px;}
.animation-secondary {border: 0px !important; width: 120px !important;}



/* Mobile */ 
@media (max-width: 800px) {
.logo {float: none; width: 100%}
/*.nav {float: none; width: 100%; margin-top: 10px}*/
.nav {display: none;}

.home-half-inside {width: 100%; margin-top: 20px}
.home a { font-size: 18px; margin: 30px auto;}

h1 {font-size: 26px; line-height: 35px;}
p {font-size: 18px;}

.about h1 {font-size: 26px; line-height: 35px;margin-top: 50px;}
.linkedin-home h1 {font-size: 40px; line-height: 50px;}
.recent-companies {margin-top: 40px; margin-bottom: 20px;}
.about {margin-bottom: 0;}

}