/**

Colors
------------
 brown: #986665;
 green: #98cb00;
 orange: #cc6733;
 blue: #3398cc;
 dark-gray: #777;
 light-gray: #aaa;
 text-gray: #777;

*/

@font-face {
    font-family: ArialBlackFont;
    src: url(../fonts/ariblk.ttf);
}

@font-face {
    font-family: OpenSansFont;
    src: url(../fonts/OpenSans-Light.ttf);
}


html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  font-family: OpenSansFont, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #2f2f2f;
  overflow-x: hidden;
}
body.darkmode {
    color: #fefefe;
    background-color: #222;
}

body {
    webkit-tap-highlight-color: rgba(98, 114, 102, 0.12);
}
::-moz-selection {
    background: rgba(98, 114, 102, 0.12);
}
::selection {
    background: rgba(98, 114, 102, 0.12);
}
img::selection {
    background: transparent;
}
img::-moz-selection {
    background: transparent;
}

p {
  line-height: 1.8;
}

big {
  font-size: 290%;
  line-height: .9;
  font-family: ArialBlackFont;
}
big.normal {
  font-size: 160%;
  line-height: 1.2;
    font-family: OpenSansFont;
}

a,
button {
  transition: all 0.3s ease;
}

a:hover {
  text-decoration: none;
}

a.numbers {
    text-decoration: underline;
}

a.numbers:hover,
a.numbers:active {
  text-decoration: none;
}

a.inline-link {
    text-decoration: underline;
    margin-left: 10px;
    color: #cc5633;
}
a.inline-link:hover,
a.inline-link:active {
  text-decoration: none;
    color: #fc7952;
}

.darkmode a.inline-link {
    color: #cecece;
}
.darkmode a.inline-link:hover,
.darkmode a.inline-link:active {
    color: #eaeaea;
}

.darkmode a {
    color: #cecece;
}
.darkmode a:hover,
.darkmode a:active {
    color: #888888;
}

h4.small-text {
    font-size: 1.3em;
}

.nav-item a {
    color: #000;
}
.darkmode .nav-item a {
    color: #ddd;
}

footer.col-12 {
    width: 100%;
    max-width: 100%;
}


.row.footer {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
}


.darkmode .form-control::-webkit-input-placeholder{color:#e0edf8;opacity:1}
.darkmode .form-control::-moz-placeholder{color:#e0edf8;opacity:1}
.darkmode .form-control:-ms-input-placeholder{color:#e0edf8;opacity:1}
.darkmode .form-control::-ms-input-placeholder{color:#e0edf8;opacity:1}
.darkmode .form-control::placeholder{color:#e0edf8;opacity:1}

.darkmode .form-control:focus{color:#e0edf8;background-color:#484848}


.darkmode .btn-primary {
    background-color: #484848;
    outline: none;
    border-color: #222;
    cursor: pointer;
}
.darkmode .btn-primary:hover,
.darkmode .btn-primary:active,
.darkmode .btn-primary:focus {
    background-color: #555555;
}




header nav {
    background: rgba(255, 255, 255, 0.9);
    margin: 0 auto;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 3;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.75);
}
.darkmode header nav {
    background: rgba(29, 29, 29, 0.9);
}
header nav ul {
    display: block;
    padding: 0;
    text-align: right;
}
header nav ul li {
    display: block;
    margin: 0;
    padding: .5rem 1rem;
}
header nav ul li:first-of-type {
    padding: 2rem 1rem .5rem;
}
header nav ul li:last-of-type {
    padding: .5rem 1rem .75rem;
}
header nav ul li a:link, 
header nav ul li a:visited {
    color: #000000;
    display: block;
    font-size: .9em;
    padding: 0 8px;
    text-decoration: none;
    transition: all .3s ease;
}
header nav ul li a:active, 
header nav ul li a:hover, 
header nav ul li a:focus {
    color: #05a1f2;
    transition: all .3s ease;
}
header nav ul li:first-of-type a:active, 
header nav ul li:first-of-type a:hover, 
header nav ul li:first-of-type a:focus {
    color: #8dbc00;
}
header nav ul li:nth-of-type(2) a:active, 
header nav ul li:nth-of-type(2) a:hover, 
header nav ul li:nth-of-type(2) a:focus {
    color: #fa7b3a;
}
header nav ul li:last-of-type a:active, 
header nav ul li:last-of-type a:hover, 
header nav ul li:last-of-type a:focus {
    color: #888;
}

.darkmode header nav ul li a:link, 
.darkmode header nav ul li a:visited {
    color: #fff;
}
.darkmode header nav ul li a:active, 
.darkmode header nav ul li a:hover, 
.darkmode header nav ul li a:focus {
    color: #38bbff;
}
.darkmode header nav ul li:first-of-type a:active, 
.darkmode header nav ul li:first-of-type a:hover, 
.darkmode header nav ul li:first-of-type a:focus {
    color: #98cb00;
}
.darkmode header nav ul li:nth-of-type(2) a:active, 
.darkmode header nav ul li:nth-of-type(2) a:hover, 
.darkmode header nav ul li:nth-of-type(2) a:focus {
    color: #fa7b3a;
}
.darkmode header nav ul li:last-of-type a:active, 
.darkmode header nav ul li:last-of-type a:hover, 
.darkmode header nav ul li:last-of-type a:focus {
    color: #afafaf;
}
header nav .menu {
  clear: both;
  max-height: 0;
  transition: max-height .5s ease-out;
}
header nav .menu-icon {
  clear: both;
  cursor: pointer;
  display: inline-block;
  float: right;
  margin: 10px 5px 0 0;
  padding: 15px 10px 0px 10px;
  position: relative;
  z-index: 4;
    height: 28px;
}
header nav .menu-icon .navicon {
  background: #777;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}
header nav .menu-icon .navicon:before,
header nav .menu-icon .navicon:after {
  background: #777;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}
.darkmode header nav .menu-icon .navicon {
  background: #ddd;
}
.darkmode header nav .menu-icon .navicon:before,
.darkmode header nav .menu-icon .navicon:after {
  background: #ddd;
}
header nav .menu-icon .navicon:before {
  top: 5px;
}
header nav .menu-icon .navicon:after {
  top: -5px;
}
header nav .menu-btn {
  display: none;
}
header nav .menu-btn:checked ~ .menu {
  max-height: 280px;
}
header nav .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
header nav .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
header nav .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
header nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
header nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}



#nav-img {
    display: inline-block;
    position: fixed;
    top: 5px;
    width: 252px;
}


.avatar {
    margin-right: 10px;
    margin-left: 40px;
    vertical-align: text-bottom;
    padding-bottom: 3px;
    width: 80px;
}

.blue {
	color: #3398cc;
}

.btn-outline-light {
    color: #ccc;
    outline: 1px solid #ccc;
}

.contact-me-container {
    max-width: 680px;
    margin: 0;
}

.contact-me-img {
    width: 100%;
    max-width: 500px;
}

.header-brand-img {
    width: 100%;
    max-width: 500px;
    position: absolute;
      bottom: 0;
      left: 50%;
  transform: translateX(-50%);
}

.container-fluid {
    max-width: 1200px;
}

.ethereum-icon {
    margin-top: 8px;
    width: 100%;
    max-width: 220px;
}


.form-group {
  max-width: 355px;
}

.form-control {
  background: transparent;
  border-color: #aaa;
  padding: 15px 10px;
  font-size: 1.1rem;
  margin-bottom: 10px;
}


.green {
	color: #98cb00;
}

.logout-link {
    margin-top: -35px;
    margin-bottom: 35px;
    font-size: 85%;
    margin-left: 10px;
}

.match {
    margin-bottom: 7px;
}

.my-avatar {
    padding-right: 20px;
    margin-top: 25px;
    width: 100px;
}

.paypal-icon {
    margin-top: 3px;
    width: 160px;
}

.portfolio-city {
    font-size: 80%;
    margin: 0 0 1em 0;
    padding-left: .5em;
}

.portfolio-services {
    font-style: italic;
    font-size: 90%;
    color: #777;
    padding-left: .5em;
}

.small-text {
    font-size: .9em;
}

.submit-msg {
   display: block;
   color: #cc6733;
   font-size: .8em;
   padding-left: 2px;
   margin-top: -8px;
   margin-bottom: 8px;
}

.block-graphic {
    display: inline-block;
    margin: 0 auto;
}

.pwa-btn {
    position: absolute;
    top: 60px;
    right: 10px;
}

.parallax-window {
  min-height: 1880px;
  background: rgba(0, 0, 0, 0.15);
}

.darkmode .parallax-window {
    background: rgba(0, 0, 0, 0.75);
}

.tm-brand-container-inner {
  max-width: 500px;
  width: 100%;
	position: absolute;
	top: -400px;
	left: 18%;
}

.tm-brand-container {
	height: 400px
}

.tm-brand-description {
  font-size: 1.4rem;
}

.tm-brand-name {
  color: #cc6733;
  font-size: 3.8rem;
  position: absolute;
  top: 40%;
  left: 43.5%;
  transform: translateX(-50%) translateY(-50%);
  padding-bottom: 13px;
  font-family: ArialBlackFont;
}

.tm-brand-services {
  color: #000;
  font-size: 1.55rem;
  position: absolute;
  top: calc(35% + 230px);
  left: 45%;
  transform: translateX(-50%) translateY(-50%);
  width: 365px;
}

.darkmode .tm-brand-services {
  color: #fff;
}

.tm-welcome-container {
  min-height: 400px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: stretch;
}

.tm-welcome-title {
    font-size: 3em;
  margin-bottom: 40px;
}

.tm-welcome-left {
  padding-left: 20px;
  padding-right: 25px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.tm-welcome-left-col {
  display: flex;
  align-items: center;
}

.tm-welcome-icon {
  margin-bottom: 50px;
  display: block;
  text-align: center;
}




.tm-portfolio-item {
  display: flex;
  align-items: center;
  margin-bottom: 80px;
}

.tm-portfolio-name {
  margin-top: 1em;
  width: 330px;
  height: 300px;
  font-size: 2rem;
  padding: 70px 70px;
  display: flex;
  align-items: center;
  text-align: center;
}

.tm-portfolio-description {
  width: calc(100% - 330px);
  padding: 20px 45px;
}

.tm-portfolio-description h3 {
  margin-bottom: 20px;
}

.tm-text-red {
  color: #f24933;
}

.tm-text-green {
  color: #98cb00;
}

.tm-text-blue {
  color: #3398cc;
}
 
.tm-text-orange {
  color: #fad400;
}

.tm-text-dark-gray {
  color: #777;
}

.darkmode .tm-text-dark-gray {
  color: #a0a0a0;
}

.tm-title-small {
  font-size: 1.1rem;
    display: inline-block;
	margin-left: 20px
}

.tm-bg-black-transparent {
  background-color: rgba(0, 0, 0, 0.2);
}

.tm-bg-white-transparent {
  background-color: rgba(255, 255, 255, 0.85);
}
.darkmode .tm-bg-white-transparent {
  background-color: rgba(49, 49, 49, 0.9);
}

.tm-bg-red {
  background-color: #f24933;
}

.tm-bg-green {
    background-color: #98cb00;
}

.tm-bg-blue {
  background-color: #3398cc;
}

.tm-bg-orange {
  background-color: #fad400;
}

.tm-bg-dark-gray {
  background-color: #777;
}

.tm-bg-guru {
	background-image: url(../img/funnyguy.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;
}



.tm-contact-item {
  width: 33.3334%;
  max-width: 345px;
  height: auto;
  min-height: 300px;
  margin-right: 35px;
  background-color: white;
  padding: 24px 34px 44px;
	border-radius: 50%;
}

.tm-contact-item:last-child {
  margin-right: 0;
}

.tm-contact-items-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 130px;
}

.tm-contact-item-icon {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-btn-submit {
  background-color: #d0d0d0;
  padding: 12px 30px;
  font-size: 1.2rem;
}

.tm-btn-submit:hover,
.tm-btn-submit:active,
.tm-btn-submit:focus {
  background-color: #777;
  box-shadow: none;
}

.darkmode .tm-btn-submit {
  background-color: #717171;
  padding: 12px 30px;
  font-size: 1.2rem;
}

.darkmode .tm-btn-submit:hover,
.darkmode .tm-btn-submit:active,
.darkmode .tm-btn-submit:focus {
  background-color: #555555;
  box-shadow: none;
}

.tm-copyright-text {
  color: #888;
  font-size: 13px;
  margin-bottom: 20px;
}
.darkmode .tm-copyright-text {
  color: #dddddd;
}

.tm-link {
  color: #777;
}


.wider-screens {
    display: inline-block;
}


.img-fluid {
    width: 100%;
    max-width: 100%;
}



#areyousure-display {
    padding-left: 10px;
    display: none;
}

#response-msg,
#eth-response-msg {
    margin-bottom: 4px;
    font-size:80%;
    color: #cc6733
}


#tmContact {
  padding-top: 95px;
  height: 100vh;
  min-height: 1380px;
    position: relative
}

#tmContactForm {
  width: 100%;
  max-width: 680px;
  padding: 45px 5px 30px;
  margin-bottom: 95px;
}
#tmContactForm .form-control:focus {
  border: 0px solid black;
  border-bottom: 1px solid black;
  outline: 0px solid black;
  box-shadow: 0px 0px 0px black;
}

#tmAbout {
  padding-bottom: 60px;
}

#tmServices {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #fcfcfc;
}

.darkmode #tmServices {
  background-color: #1f1f1f;
}

#tmPortfolio {
  padding-top: 80px;
    margin-bottom: 180px;
}

#tmWelcome {
  height: 100vh;
  min-height: 570px;
  position: relative;
  display: flex;
  align-items: center;
}

#tmWelcome.parallax-window.bigger {
  min-height: 1380px;
  background: transparent;
}
.darkmode #tmWelcome.parallax-window.bigger {
    background: rgba(0, 0, 0, 0.5);
}

#tmWelcome.parallax-window.smaller {
  min-height: 1100px;
  background: transparent;
}
.darkmode #tmWelcome.parallax-window.smaller {
    background: rgba(0, 0, 0, 0.5);
}



@media (max-width: 1918px) {
    
  .tm-brand-container-inner {
	  left: 12%;
	}
    
}

@media (max-width: 1598px) {
    
    .tm-brand-container-inner {
	  left: 7%;
	}
    
}

@media (max-width: 1438px) {
    
    .tm-brand-container-inner {
	  left: 2%;
    }
    
}

@media (max-width: 1054px) {
    
    .tm-contact-item-icon {
      margin-bottom: 15px;
    }
    .tm-brand-container-inner {
	  left: 0;
	}
    
}
@media (max-width: 991px) {

    .tm-portfolio-item {
      flex-direction: column;
    }
    .tm-portfolio-name {
      justify-content: center;
      height: 260px;
    }
    .tm-portfolio-name,
    .tm-portfolio-description {
      width: 100%;
    }
    .tm-portfolio-description {
      padding: 20px 30px;
    }
	
    .contact-me-container {
      margin: 0 auto;
    }
    .tm-contact-items-container {
      flex-direction: column;
    }
    .tm-contact-item {
      width: 300px;
      max-width: 680px;
      min-height: 0;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 30px;
    }
    .tm-contact-item:last-child {
      margin-right: auto;
      margin-bottom: 0;
    }

    #tmContactForm {
      margin-left: auto;
      margin-right: auto;
    }
}

@media (max-width: 767.97px) {
    
    .tm-brand-name {
      font-size: 2.2rem;
      top: 40%;
      left: 44%;
    }

    .tm-brand-services {
      font-size: 1.2rem;
      top: calc(32% + 180px);
      left: 46%;
      width: 280px;
    }
    
}

@media (max-width: 730px) {

    h4.small-text {
      font-size: 1em;
    }
    .small-text {
      font-size: .8em;
    }
    
}

@media (max-width: 598px) {

    #tmWelcome.parallax-window.bigger {
      min-height: 1280px;
    }
    #tmWelcome.parallax-window.smaller {
      min-height: 980px;
    }
    .wider-screens {
      display: none;
    }
    
}


@media (min-width: 360px) {
    .no-break {
        display: inline-block;
    }
}


@media print { 
    #tmWelcome.no-print, .no-print { display: none; }
}