* {box-sizing: border-box;}

/* Define width of col- */
.lg-col-xs-1 {width: 8.33%;}
.lg-col-xs-2 {width: 16.66%;}
.lg-col-xs-3 {width: 25%;}
.lg-col-xs-4 {width: 33.33%;}
.lg-col-xs-5 {width: 41.66%;}
.lg-col-xs-6 {width: 50%;}
.lg-col-xs-7 {width: 58.33%;}
.lg-col-xs-8 {width: 66.66%;}
.lg-col-xs-9 {width: 75%;}
.lg-col-xs-10 {width: 83.33%;}
.lg-col-xs-11 {width: 91.66%;}
.lg-col-xs-12 {width: 100%;}
.lg-container {
  width: 100%;
  margin: 0 auto;
}
.lg-container-full-size {
  width: 100%;
  margin: 0 auto;
}
.lg-img-responsive{
  width: 100%;
  max-width: 220px;
  height: auto;
}
h1 {font-size: 40px;}
h2 {font-size: 20px;}

@media (min-width: 576px) { 
  .lg-col-sm-1 {width: 8.33%;}
  .lg-col-sm-2 {width: 16.66%;}
  .lg-col-sm-3 {width: 25%;}
  .lg-col-sm-4 {width: 33.33%;}
  .lg-col-sm-5 {width: 41.66%;}
  .lg-col-sm-6 {width: 50%;}
  .lg-col-sm-7 {width: 58.33%;}
  .lg-col-sm-8 {width: 66.66%;}
  .lg-col-sm-9 {width: 75%;}
  .lg-col-sm-10 {width: 83.33%;}
  .lg-col-sm-11 {width: 91.66%;}
  .lg-col-sm-12 {width: 100%;}
  .lg-container {width: 100%;}
  .lg-img-responsive{max-width: 280px;}
  h1 {font-size: 40px;}
  h2 {font-size: 20px;}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
  .lg-col-md-1 {width: 8.33%;}
  .lg-col-md-2 {width: 16.66%;}
  .lg-col-md-3 {width: 25%;}
  .lg-col-md-4 {width: 33.33%;}
  .lg-col-md-5 {width: 41.66%;}
  .lg-col-md-6 {width: 50%;}
  .lg-col-md-7 {width: 58.33%;}
  .lg-col-md-8 {width: 66.66%;}
  .lg-col-md-9 {width: 75%;}
  .lg-col-md-10 {width: 83.33%;}
  .lg-col-md-11 {width: 91.66%;}
  .lg-col-md-12 {width: 100%;}
  .lg-container {width: 750px;}
  .lg-img-responsive{max-width: 330px;}
  h1 {font-size: 60px;}
  h2 {font-size: 30px;}
}

@media (min-width: 992px) { 
  .lg-col-lg-1 {width: 8.33%;}
  .lg-col-lg-2 {width: 16.66%;}
  .lg-col-lg-3 {width: 25%;}
  .lg-col-lg-4 {width: 33.33%;}
  .lg-col-lg-5 {width: 41.66%;}
  .lg-col-lg-6 {width: 50%;}
  .lg-col-lg-7 {width: 58.33%;}
  .lg-col-lg-8 {width: 66.66%;}
  .lg-col-lg-9 {width: 75%;}
  .lg-col-lg-10 {width: 83.33%;}
  .lg-col-lg-11 {width: 91.66%;}
  .lg-col-lg-12 {width: 100%;}
  .lg-container {width: 900px;}
  .lg-img-responsive{max-width: 330px;}
  h1 {font-size: 72px;}
  h2 {font-size: 36px;}
}
/* Extra large */
@media (min-width: 1200px) { 
  .lg-col-xl-1 {width: 8.33%;}
  .lg-col-xl-2 {width: 16.66%;}
  .lg-col-xl-3 {width: 25%;}
  .lg-col-xl-4 {width: 33.33%;}
  .lg-col-xl-5 {width: 41.66%;}
  .lg-col-xl-6 {width: 50%;}
  .lg-col-xl-7 {width: 58.33%;}
  .lg-col-xl-8 {width: 66.66%;}
  .lg-col-xl-9 {width: 75%;}
  .lg-col-xl-10 {width: 83.33%;}
  .lg-col-xl-11 {width: 91.66%;}
  .lg-col-xl-12 {width: 100%;}
  .lg-container {width: 1080px;}
  .lg-img-responsive{max-width: 350px;}
  h1 {font-size: 72px;}
  h2 {font-size: 36px;}
}

[class*="lg-col-"] {
  float: left;
  padding: 15px;
}

/* Define row */
.lg-row::after {
  content: "";
  clear: both;
  display: table;
}

* {font-family: 'Courier New', monospace, sans-serif;}
body {margin: 0;}
a{
  text-decoration: none;
  color: #34568B;
  transition: color .3s ease-in;
  -webkit-transition: color .3s ease-in;
  -moz-transition: color .3s ease-in;
}
a:hover {
  color: #34568B;
  transition: color .3s ease-out;
  -webkit-transition: color .3s ease-out;
  -moz-transition: color .3s ease-out;
}
.my-box-shadow{
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.line-horizontal{
  height: 1px;
  color:#ccc;
  background-color: #ccc;
  border: none;
}
/* Header */
.my-title {
  color: #111111;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.site-face {text-align: left;}
.site-face > .my-title { text-align: right;}
.my-description {color: rgb(103, 105, 107);}
.primary-color{color: #111111;}
.secondary-color{color: #F98639;}
.my-image{
  border-radius: 50%;
  margin: 15px;
}
.my-social{margin: 0;}
.my-social i {
  padding: 0 10px;
  transform: scale(1.25);
  transition: transform .3s ease-in;
  -webkit-transition: transform .3s ease-in;
  -moz-transition: transform .3s ease-in;
}
.my-social i:hover{
  transform: scale(1.75);
  transition: transform .3s ease-out;
  -webkit-transition: transform .3s ease-out;
  -moz-transition: transform .3s ease-out;
}
/* Section */
.my-section {
  color: #111111;
  text-transform: uppercase;
  text-align: center;
}
.my-section::after {
  content: "";
  display: block;
  border: 1px solid #CC3E3E;
  width: 150px;
  margin: 5px auto;
}
.child-section {
  text-transform: uppercase;
}
.child-section:not(:first-child) {padding-top: 12px;}
.child-section:first-child{margin-top: 0px;}
.child-section::after{
  content: "";
  display: block;
  border: 1px solid #C24E34;
  width: 100px;
  margin: 5px 0;
}
/* About me */
#about-me {
  background-color: #DDDDDD;
  padding: 50px;
}
.to-primary-color {
  background-color: #fafafa !important;
  transition: background-color .4s ease-out;
  -webkit-transition: background-color .4s ease-out;
  -moz-transition: background-color .4s ease-out;
}
#about-me li, p a {
  line-height: 22px;
  font-size: medium;
}
#about-me .p-last{margin-bottom: 0px;}

.code-snippet{
  margin-left: 50px;
}

/* Footer */
footer {
  background-color: #34568B;
  text-align: center;
  color: #ffffff;
}
footer p {margin: 0px;}
footer a {color: #ffffff;}

#page-two-footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

/* Navigation Bar */
.first-item {margin-top: 15px;}
.top-fixed {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}
.navbar {
  background-color: #34568B;
  overflow: hidden;
}
.navbar a {
  float: left;
  display: block;
  color: #ffffff;
  padding: 14px 16px;
  font-size: 17px;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  transition: background-color .45s ease-out;
  -webkit-transition: background-color .45s ease-out;
  -moz-transition: background-color .45s ease-out;
}
.navbar .active:hover {
  background-color: #111D36;
  transition: background-color .45s ease-out;
  -webkit-transition: background-color .45s ease-out;
  -moz-transition: background-color .45s ease-out;
}

.navbar .menu {float: left;;}

/* Mobile */
@media (max-width: 767px) {
  .navbar .menu {float: none;}
  .navbar .menu a {display: none;}
  .navbar a.icon {
    display: block;
    float: right;
    font-size: 15px;
  }
  .navbar.responsive {position: relative;}
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }


  #about-me{padding: 20px;}
}

button{
  cursor: pointer;
}

#btn-email{
  padding: 5px;
}