@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i');
@import url('https://rsms.me/inter/inter-ui.css');

/* Keep it clean

Stylesheet Index
|
|-- CSS Reset 					2b2b2b.
|-- Typeogrpahy 				100.
|	|-- Fonts             110.
|	|-- Header Tags 			120.
|	|-- Links 					  130.
|	|--
|
|
|-- Content (Mobile First)
| |- Declairing Grid Areas
| |-
|
| |-- Main Navigation
|
|
|-- Tablet
|
|
|-- Desktop
|
|

*/

/* Reset */

* {
  margin                      : 0;
  padding                     : 0;
  text-decoration             : none;
  text-transform              : none;
  font-family                 : "system-ui",
                                BlinkMacSystemFont,
                                "Segoe UI",
                                Roboto,
                                Helvetica,
                                Arial,
                                sans-serif,
                                "Apple Color Emoji",
                                "Segoe UI Emoji",
                                "Segoe UI Symbol";
}

input, select {
  vertical-align              : middle;
}


/* Typeogrpahy */


p, li, td,
.project-card-caption, figcaption  {
  font-weight                 : 300;
  font-size                   : 16px;
  color                       : #2b2b2b;
  margin-bottom               : 16px;
  line-height                 : 1.6;
  max-width                   : 650px;
}

h1 {font-size					        : 34px;}
h2 {font-size						      : 31px;}
h3 {font-size						      : 27px;}
h4 {font-size						      : 23px;}
h5 {font-size						      : 19px;}
h6 {
	text-transform					    : uppercase;
	font-size						        : 16px;
}

h1, h2, h3, h4, h5, h6, th,
.site-title, .lead, blockquote,
figcaption, ul, ol, span {
  color                       : #000;
  margin							        : 32px 0 32px 0;
}

h1, h2, h3, h4, h5, h6, th,
strong, .lead, #navigation-bar, .menu-toggle-button p,
nav ul a, a, .btn {
  font-weight                 : 400;
}

ul, ol {
  margin-left                 : 18px;
}

blockquote {
	font-size						        : 20px;
	margin							        : 32px 0 32px 0;
	border-left						      : solid 3px;
	padding      					      : 0 0 0 10px;
	width							          : 100%;
  max-width                   : 650px;
  line-height                 : 1.6;
}

.highlight {
	background-color			      : #3FFECA;
	padding-left					      : 4px;
	padding-right					      : 4px;
  border-radius               : 3px;
}


/* Links */


a {
  color                       : #2b2b2b;
  border-bottom               : 2px #2b2b2b solid;
}

a:hover {
  color                       : #2b2b2b;
  border-bottom               : 2px #3FFECA solid;
  position                    : relative;
  top                         : -2px;
  padding-bottom              : 2px;
}

.target-link {

}

.about-me-link {
  margin: 10% 20px 0 0;
  text-align: center;
}

.btn {
  border                      : 2px solid #000;
  padding                     : 10px;
  margin                      : 0 20px 0 0;
  display                     : inline-block;
  border-radius               : 4px;
}

.btn:hover {
 border                       : 2px solid #000;
 padding                      : 10px;
 display                      : inline-block;
 border-radius                : 4px;
}

.btn-filled-dark {
  background-color            : #000;
  color                       : #fff;
}

.btn-filled-dark:hover {
  color                       : #3FFECA;
}

nav ul a {
  color                       : #fff;
  line-height                 : 1.6;
  border-bottom               : 2px #3FFECA solid;
  text-transform: lowercase;
}

nav ul a:hover {
  color                       : #fff;
  border-bottom               : 2px #fff solid;
}

.menu-toggle-button p {
  color                       : #fff;
  border-bottom               : 2px solid #fff;
  margin-bottom               : 0;
}

.project-card-link {
  border                      : 0;
  transition                  : all 0.5s;
}
  .project-card-link:hover  {
  top                         : 0;
  padding-bottom              : 0;
  border                      : 0;
  transform                   : scale(1.1);
}

a:hover small {
  color                       : #fff;
}


/*  200. Content  */


main {
  margin                      : 20px 20px 200px 20px;
}

.history {
  text-align                  : center;
  display                     : flex;
  flex-wrap                   : wrap;
  justify-content             : center;
  padding                     : 0 10%;
}

.previous-projects {
  display                     : flex;
  flex-wrap                   : wrap;
  justify-content             : center;
}

.full-width-box {
  width                       : 100%;
  text-align                  : center;
  padding                     : 40px;
}

.projects-im-interested-in {
  display                     : flex;
  flex-wrap                   : wrap;
  justify-content             : center;
}

.testimonials {
  width                       : 100%;
  display                     : flex;
  flex-wrap                   : wrap;
  justify-content             : center;
  background-color            : #111;
  padding-bottom: 30px;
}

.testimonials h2 {
  color: #fff;
}

.testimonial-box {
  background-color            : #dedede;
  width                       : 300px;
  max-width                   : 630px;
  padding                     : 30px;
  border-radius               : 4px;
  margin                      : 20px 20px 60px 20px;
}

main .testimonial-box {
  background-color            : #111;
}

main .testimonial-box p {
  color: #fff;
}


.testimonial-credit {
  font-weight                 : 500;
}

.testimonial-profile-picture {
  width                       : 120px;
  height                      : 120px;
  border-radius               : 100%;
  float                       : right;
  margin-bottom               : -80px;
  margin-right                : -50px;
}

.clear {
  clear                       : both;
}


/* Main Navigation */


nav {
  position                    : fixed;
  bottom                      : -500px;
  width                       : 100%;
  height                      : 400px;
  color                       : #fff;
  background-color            : rgba(0, 0, 0, 0.95);
  z-index                     : 30;
  transition                  : all ease-in-out 400ms;
}

.menu-toggle-button {
  bottom                      : 0px;
  position                    : fixed;
  margin                      : 0 auto;
  padding                     : 20px 0;
  background-color            : rgba(0, 0, 0, 0.80);
  z-index                     : 130;
  text-align                  : center;
  color                       : #fff;
  font-size                   : 19px;
  width                       : 100%;
}

nav ul {
  margin                      : 40px;
  list-style                  : none;
  display                     : flex;
  flex-wrap                   : wrap;
  justify-content             : center;
}

nav li {
  display                     : inline-block;
  padding                     : 10px;
  font-size                   : 19px;
  text-transform              : lowercase;
}

nav p {
  color: #fff;
  text-align: center;
  font-size: 12px;
  margin: 100px auto;
}

.center {
	text-align                  : center;
	margin-left                 : auto;
	margin-right                : auto;
}

header li {
	display 						        : inline-block;
}

table {
	width 							        : 100%;
	margin-bottom 					    : 30px;
	text-align 						      : center;
}

th, td {
	padding 						        : 10px;
}

section {
	min-height 							    : 200px;
}

.hero-copy {
  margin                      : 100px 20px 100px 20px;
}

.my-name,
.hero p,
.hero .lead,
.attention .lead,
.attention p {
  margin                      : 12px 10px 0 0;
  max-width                   : 100%;
}

.history p,
.history .lead,
.future p,
.future .lead  {
  vertical-align 					    : middle;
  max-width                   : 100%;
  text-align                  : center;
}

.hero {
	height 						          : 750px;
	margin-top 						      : 0;
  width                       : 100%;
  background-repeat           : no-repeat;
  background-size             : cover;
  background-position         : center center;
}

.hero .left-screen {
 float                        : left;
 width                        : 100%;
 height                       : 100%;
 background-color             : rgba(0, 0, 0, 0.96);
}

.hero .right-screen {
  width                       : 100%;
  height                      : 100%;
  background-repeat           : no-repeat;
  background-size             : cover;
  background-position         : center center;
  border-top-right-radius     : 4px;
  border-bottom-right-radius  : 4px;
}

.attention {
  display                     : flex;
  flex-wrap                   : wrap;
  justify-content             : center;
  width                       : 100%;
}

.attention  .left-screen {
  width                       : 100%;
  padding                     : 10% 10%;
}

.attention-buttons {
  padding                     : 40px 0;
}

.attention .right-screen {
  width                       : 350px;
  height                      : 300px;
  background-repeat           : no-repeat;
  background-size             : 350px 200px;
  background-position         : center center;
}


.dark-section-white-text {
	color 							        : #fff;
	background-color 				    : rgba(0, 0, 0, 0.95);
}

.dark-section-white-text small,
.dark-section-white-text p,
.dark-section-white-text h2,
.dark-section-white-text h3,
.dark-section-white-text h4,
.dark-section-white-text h5,
.dark-section-white-text h6,
.dark-section-white-text a,
.dark-section-white-text ul,
.dark-section-white-text ol,
.dark-section-white-text li   {
	color 							        : #fff !important;
}

.section-container{
  display                     : inline-block;
  width                       : 100%;
  padding                     : 20px 0 20px 0;
}

.client-logos {
  padding                     : 80px 15% 0 15%;
  min-height                  : 100px;
  align-items                 :center;
  display: none;
}

.languages-frameworks {
  width                       : 100%;
  margin                      : 10px 0 0 -10px;
}

.languages-frameworks li {
  display                     : inline-block;
  padding                     : 10px;
}

.left {
	float 							        : left;
}

.right {
	float 							        : right;
}

.categories,
.article-share {
	display 						        : block;
	width 							        : 100%;
	border-left 					      : #2b2b2b;
	height 							        : 30px;
}

.categories ul,
.article-share ul {
	width 							        : 100%;
}

.previous-projects ul {
  margin-left                 : 0;
}

.code-languages-list li  {
  display                     : inline-block;
  margin-left                 : -10px;
}

.categories li,
.article-share li {
	float 							        : left;
	list-style-type 				    : none;
	margin-left                 : 0;
	margin-right                : 10px;
}

.call-to-action {
  padding                     : 10% 10% 15% 10%;
  margin                      : 100px 0 0 0;
}

.call-to-action p {
  font-size                   : 20px;
}

.call-to-action a {
    border-bottom             : 2px #3FFECA solid;
    font-size                 : 20px;
    margin                    : 8px;
}

.call-to-action a:hover {
    border-bottom             : 2px #fff solid;
  }

footer {
  padding                     : 100px 18px 40px 18px;
}

footer ul {
	width                       : fit-content;
	text-align                  : center;
}

footer ul li a {
	width                       : fit-content;
}

.background-card {
	max-width                   : 100%;
  padding                     : 10px;
  margin                      : 10px;
  float                       : left;
  text-align                  : center;
}


/* Project Cards */


.project-card {
  max-width                   : 550px;
  padding                     : 0;
  margin                      : 10px;
  float                       : left;
  background-color            : rgba(0, 0, 0, 0.95);
  border-radius               : 4px;
}

.previous-projects-card {
	max-width                   : 100%;
	margin                      : 10px;
	float                       : left;
  border-radius               : 4px;
  padding                     : 0;
  background-color            : rgba(0, 0, 0, 0.95);
}

.previous-projects-card li,
.project-card li {
	float                       : left;
	list-style                  : none;
	display                     : inline-block;
	margin-right                : 10px;
}

.previous-projects-card p,
.previous-projects-card h4,
.previous-projects-card h5,
.previous-projects-card h6,
.previous-projects-card small,
.previous-projects-card li {
  margin                      : 8px 16px 16px 16px;
  color                       : #fff;
}

.previous-projects-card img,
.project-card img {
	width                       : 100%;
  margin-top                  : 0;
}


/* Media */


img {
  max-width                   : 100%;
  border-radius               : 4px;
}


/* carousel */

.carousel {
  background-color            : #fafafa;
  border-radius               : 4px;
  padding                     : 0;
  width                       : 100%;
}

.slides {
  width                       : 100%;
  transition                  : all 2.75s ease;
  display                     : none;
  padding                     : 10px;
}

.slide-image {
  width                       : 100%;
  height                      : 400px;
  background-repeat           : no-repeat;
  background-size             : cover;
  background-position         : center center;
  border-top-left-radius      : 4px;
  border-top-right-radius     : 4px;
}

.slide-caption {
padding                       : 16px;
height                        : 240px;
}

.slide-caption h3,
.slide-caption p  {
 margin                       : 16px 0 0 0;
}

a:hover.slide-link  {
  position                    : relative;
  top                         : 0;
  padding-bottom              : 0;
}

.slider-buttons {
	float 							        : left;
	margin-right 					      : 0;
	text-decoration 				    : none;
	margin-left 					      : 0;
	margin-bottom 					    : 0;
	z-index 						        : 20;
  position                    : relative;
  top                         : 0;
  padding-bottom              : 0;
  background-color 				    : #fff;
  height                      : 100%;
  border-top-left-radius      : 4px;

}

.arrow-buttons {
	padding                     : 10px;
	font-size 						      : 80px;
	line-height 					      : 80px;
	text-decoration 				    : none;
	border-bottom 					    : none;
	color 							        : #2b2b2b;
}

 .dark-section-white-text
 .arrow-buttons {
 	color 							        : #2b2b2b;
	text-decoration 				    : none;
	border-bottom 					    : none;
}


/* ARTICLES */


.article-title h1 {
	font-size                   : 50px;
	line-height                 : 1;
	margin-bottom               : 20px;
}

article h2,
article h4 {
  padding-top                  : 16px;
}

article p {
	margin-top                  : 16px;
	margin-bottom               : 16px;
	max-width                   : 650px;
}

.article-nav {
	max-width                   : 650px;
}

.article-nav .btn {
  width                       : 150px;
  text-align                  : center;
}

.lead {
	font-size                   : 25px;
	line-height                 : 1.2;
}

article li {
	line-height                 : 1.6;
}

.img-full {
	width                       : 100%;
	max-width                   : 900px;
	height                      : auto;
	display                     : block;
	margin-bottom               : 15px;
	margin-top                  : 15px;
  padding-top: 1px;
  border-radius: 4px;
}

.img-center {
	width                       : 100%;
	max-width                   : 650px;
	height                      : auto;
	margin-bottom               : 15px;
	margin-top                  : 15px;
}

.img-left {
	width                       : 220px;
	height                      : auto;
	float                       : left;
	margin                      : 0 10px 5px 0;
}

.img-left {
  min-width: 350px;
}

figure {
	display                     : block;
	height                      : auto;
	padding                     : 0px 10px 8px 10px   ;
	z-index                     : 1;
  max-width                   : 650px;
  width                       : 95%;
  background-color            : #f2f2f2;
  border-radius               : 4px;

}

figcaption img {
	margin                      : 10px 0 0 0;
	z-index                     : 5;
  width                       : 90%;
  border-radius               : 4px;
}

figcaption {
  margin-top                  : -20px;
  color                       : #111;
	padding                     : 10px;
	z-index                     : 2;
	position                    : relative;
	line-height                 : 1.4;
	font-size                   : 14px;
	width                       : 100%;
  max-width                   : 630px;
  margin                      : 4px 0;
  font-weight: ;
}

main .testimonial-box {
  width                     : 80%;
  margin                    : 20px 20px 60px 0;
}

.pull-quote {
	display                     : block;
	background-color            : #2b2b2b;
	color                       : #fff;
	padding                     : 8px 16px;
	margin                      : 8px 0 8px 0;
	z-index                     : 100;
  border-radius               : 4px;
}

.article-meta {
	margin-top                  : 15px;
	margin-bottom               : 50px;
	display                     : block;
	width                       : 100%;
}

.articles-listing,
.article-excerpt, .article-footer {
	display                     : block;
	width                       : 100%;
  max-width                   : 650px;
  clear                       : both;
  padding-bottom              : 40px;
}


/* 230. Layout - Tablet */
@media screen and (min-width: 731px) {

  .hero .left-screen {
    float                     : left;
    width                     : 50%;
  }

  .hero .right-screen {
    float                     : right;
    width                     : 50%;
    background-repeat         : no-repeat;
    background-size           : cover;
    background-position       : center center;
    border-top-right-radius   : 4px;
    border-bottom-right-radius: 4px;
  }

  .attention  .left-screen {
    width                     : 100%;
  }

  .attention .right-screen {
    width                     : 100%;
    min-height                : 500px;
    background-repeat         : no-repeat;
    background-size           : 800px 500px;
    background-position       : center bottom;
  }

  main .previous-projects {
    width                     : 100%;
    justify-content           : left;
  }

  .img-left {
    min-width: 200px;
    width: 200px;
    max-width: 200px;
    margin-top: 5px;
  }

  .full-width-box {
    padding                   : 10%;
  }
  .previous-projects-card {
    max-width                 : 400px;
  }

  .previous-projects-text {
    width                     : 800px;
  }

  .client-logos {
    display: block;
  }

}


/* 240. Layout - Desktop */


@media screen and (min-width  : 1200px) {

	.container {
		margin-bottom 					  : 0;
	}

  main {
    margin                    : 20px 20px 250px 100px;
  }

  .hero .left-screen {
   float: left;
   width                      : 50%;
   height                     : 100%;
  }

  .hero-copy {
    margin                    : 200px 60px 100px 60px;
  }

  .hero .right-screen {
    float                     : right;
    width                     : 50%;
    background-repeat         : no-repeat;
    background-size           : cover;
    background-position       : center center;
    border-top-right-radius   : 4px;
    border-bottom-right-radius: 4px;
  }

  .attention {
    flex-wrap                   : nowrap;
  }

  .attention  .left-screen {
    padding                   : 10% 5%;
    width                     : 50%;
  }

  .attention .right-screen {
    height                    : 760px;
    float                     : right;
    width                     : 50%;
    background-repeat         : no-repeat;
    background-size           : 1200px 660px;
    background-position       : left bottom;
  }

  footer {
    padding                   : 20px 20px 20px 200px;
  }

  .img-right {
  	width                 : 600px;
  	height                    : auto;
  	float                     : right;
  	margin                    : 0 0 10px 680px;
  	z-index                   : 5;
  	position                  : absolute;
    padding-top               : 8px;
  }

	.previous-projects-card {
		max-width                 : 400px;
	}

  .previous-projects-card img {
    max-width                 : 520px;
    max-height                : 280px;
    border-radius             : 4px 4px 0 0;
  }

  .pull-quote {
  	width                     : 300px;
  	margin                    : 4px 0 5px 8px;
  	float                     : right;
  	z-index                   : 100;
  }

  .background-card {
    max-width                 : 350px;
    padding                   : 0;
    margin                    : 10px;
    float                     : left;
    text-align                : center;
  }

  .slide-image {
    height                    : 600px;
  }

  section {
    margin                    : 0 0 100px 0;
  }

  main .previous-projects {
    justify-content           : left;
  }

  .previous-projects {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .full-width-box {
    width                     : 100%;
    text-align                : center;
    padding                   : 40px 70px;
  }

  .previous-projects-text {
    float                     : left;
    text-align                : left;
    margin                    : 10px 0;
    width                     : 46%;
    padding                   : 20px;
  }

  .testimonial-box {
    background-color          : #f2f2f2;
    width                     : 400px;
    max-width                 : 630px;
    padding                   : 30px;
    margin                    : 20px 20px 60px 20px;
  }

}