body {
  background-color: #000;
   font-family: 'Almarai', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
  margin: 0 auto;
  height:100%;
  overflow-x: hidden; /* This Fixes unintended body overflow */
}



::selection {
  background: #ec008c;
  color: white;
}
hr { border: 1px dotted #ccc; }

#siteWrapper {overflow-x: hidden; }
.hireMe { min-width: 275px !important; }

.jhd-logo { margin: 10px 0  0 30px; }
.jhd-logo:hover { opacity: 0.7;}

/* LOGO SVG  ANIMATIION  */
.logo-animation { 
  display: flex; 
  flex-direction:row; 
  align-items: center; 
  height: auto;
  margin-top: 10px;
}
.mylogo {  margin: 0; width: 50px;height:auto }
svg { margin: 0; width: 85px; z-index: 6; }
.james { background-color: black; z-index: 5; }
.client { width: 250px; height: 250px; border-radius: 50%; margin-left: 19%; }
.no-text-decoration { text-decoration: none; }
#display { 
  display: block; 
  width: 220px; 
  height: 20px; 
  background-color: black;
  color: #ccc;
  margin-top: 0;
  padding-left: 40px;
  letter-spacing: 3px;
font-family: 'Almarai', sans-serif;
  font-weight:100;
  font-size: 12px;
  z-index: -1;
    text-decoration: none;
}
.st1 {
  stroke-dasharray: 1297;
  stroke-dashoffset: 1297;
  animation: draw 1400ms ease-in-out 4ms forwards;
}
.fade-in-text {
  font-family: Arial;
  font-size: 14px;
  animation: fadeIn 1s;
  letter-spacing: 4;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -o-animation: fadeIn 1s;
  -ms-animation: fadeIn 1s;
}
@keyframes fadeIn {
  0% { opacity: 0; margin-left: -150px; }
  100% { opacity: 1; margin-left: 0px; }
}
@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes draw {
  from { stroke-dashoffset: 2400; }
  to { stroke-dashoffset: 0; }
}





/* NEW MENU */
.navigation__checkbox {
	 display: none;
}
 .navigation__button {
	 background-color: #000;
	 height: 4rem;
	 width: 4rem;
	 position: fixed;
	 top: 1.25rem;
	 right: 2rem;
	 border-radius: 50%;
	 z-index: 1500;
	 box-shadow: 0 1rem 3rem rgba(0, 0, 0, .1);
	 text-align: center;
	 cursor: pointer;
}
 @media (max-width: 56.25em) {
	 .navigation__button {
		 top: .5rem;
		 right: 2rem;
	}
}

 .navigation__background {
	 height: 3rem;
	 width: 3rem;
	 border-radius: 50%;
	 position: fixed;
	 top: 1.5rem;
	 right: 2.5rem;
   /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
   background: radial-gradient(#00B4DB,#0083B0);
   background-size: 200% 200%;
   animation: gradient 15s ease infinite;
	 z-index: 1000;
	 transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
@keyframes gradient {
0% {
    background-position: 0% 50%;
}
50% {
    background-position: 100% 50%;
}
100% {
    background-position: 0% 50%;
}
}
 @media (max-width: 56.25em) {
	 .navigation__background {
		 top: 1.5rem;
		 right: 2.5rem;
	}
}
 @media (max-width: 37.5em) {
	 .navigation__background {
		 top: 1rem;
		 right: 1.5rem;
	}
}
 .navigation__nav {
	 height: 100vh;
	 position: fixed;
	 top: 0;
	 right: 0;
	 z-index: 1200;
	 opacity: 0;
	 width: 0;
	 transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
 .navigation__list {
	 list-style: none;
	 text-align: center;
	 width: 100%;
}
 .navigation__list {
	 position: absolute;
	 top: 50%;
	 left: 45%;
	 transform: translate(-50%, -50%);
}
 .navigation__item {
	 margin: 1rem;
}
 .navigation__link:link, .navigation__link:visited {
	 display: inline-block;
    font-family: 'Almarai', sans-serif;
	 font-size: 3.5rem;
	 font-weight: 600;
	 color: #fff;
	 text-decoration: none;
	 text-transform: uppercase;
	 background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
	 padding: 1rem 2rem;
	 background-size: 250%;
	 transition: all 0.4s;
}
 .navigation__link:hover, .navigation__link:active {
	 background-position: 100%;
	 color: #00B4DB;
	 transform: translateX(1rem);
}
 .navigation__checkbox:checked ~ .navigation__background {
	 transform: scale(80);
}
 .navigation__checkbox:checked ~ .navigation__nav {
	 opacity: 1;
	 width: 100%;
}
 .navigation__icon {
	 position: relative;
	 margin-top: 2rem;
}
 .navigation__icon, .navigation__icon::before, .navigation__icon::after {
	 width: 2rem;
	 height: 2px;
	 background-color: #fff;
	 display: inline-block;
}
 .navigation__icon::before, .navigation__icon::after {
	 content: "";
	 position: absolute;
	 left: 0;
	 transition: all 0.2s;
}
 .navigation__icon::before {
	 top: -0.8rem;
}
 .navigation__icon::after {
	 top: 0.8rem;
}
 .navigation__button:hover .navigation__icon::before {
	 top: -1rem;
}
 .navigation__button:hover .navigation__icon::after {
	 top: 1rem;
}
 .navigation__checkbox:checked + .navigation__button .navigation__icon {
	 background-color: transparent;
}
 .navigation__checkbox:checked + .navigation__button .navigation__icon::before {
	 top: 0;
	 transform: rotate(135deg);
}
 .navigation__checkbox:checked + .navigation__button .navigation__icon::after {
	 top: 0;
	 transform: rotate(-135deg);
}
 
.hero { 
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
    background-image:url('images/hire-james-hooper.jpg');
    width: 100%;
    height: 100vh;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
     background-size: cover; 
}
.hero-title { 
    font-family: 'Almarai', sans-serif;
    font-size: 7rem;
    font-size: 7rem;
    margin-top: -12%;
    color: white;
    line-height: 1;
}
.hero-subhead {
    font-family: 'Almarai', sans-serif;
    font-size: 2rem;
    margin-top: 8px;
    color: white;
    padding: 0 5% 15px;
}

/* NEW TABLE */
#wrapper {
height: 420px;
left: 30%;
margin: -210px 0 0 -270px;
position: absolute;
margin-top: 50px;
width: 540px;
}
/* End of NEW TABLE  */

p {
font-weight: 400;
font-style: normal;
}

.arrow {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 200px;
height: 200px;
background: url(jameshooperlogo-sprite-nb.svg) no-repeat;
margin-left: -100px;
color: black;
}

.arrow span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(jameshooperlogo-sprite-nb.svg) no-repeat;
background-position: 100px 0;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
color: black;
}

.arrow:hover span {
opacity: 1;
}

.space {
display: block;
width: 100%;
height: 180px;
/*margin-top: 100px;*/
}

.topLine {
border-top: 1px solid black;
margin-top:100px;
/*position: relative;*/
top:100;
}

.jamesIntro {
margin-top: -80px;
font-size: 11.5em;
color: white;
text-align: left;
}

.jamesPortfolio {
margin-top: -50px;
font-size: 11.5em;
color: white;
}
.jamesBlog {
color: #fff;
font-size: 5.5em;
font-family: 'Almarai', sans-serif;
text-align: left;
margin-top: -50px;
}

.blog-container {
    margin: 0 20%;
}

.myPortfolio {
  font-size: 5.5em;
  font-family: 'Almarai', sans-serif;
  margin-top: -50px;
  padding-bottom: 25px;
  color: #fff;
 }

.jamesIntroDesign {
margin-top: -80px;
text-align: left;
font-size: 11.5em;
color: white;
}

.jamesIntro2 {
color: #828282;
margin-top:-115px;
text-align: left;
border-radius: 3%;
}

.center-img {
  display: block;
  width:500px;
  height: 650px;
  margin-left: auto;
  margin-right: auto;
  /*margin-top: 100px;*/
  padding-right: 90px;
  z-index: 1500;
}

#chartContainer {
width: 75%;
margin: 0 auto;
}

.videoWrapper {
display: block;
padding-top: 25px;
height: 500px;
padding-bottom: 20%;
margin-left: 3%;
margin-right: 3%;
margin-bottom: 285px;
}
.responsive {
  width: 100%;
height: auto;
}

.flame-logo {    
    
    margin-top: 18px;
    margin-left: 50px;
}

/* NEW MENU -----------------------  */
.topnav {
overflow: hidden;
background-color: #000;
width: 75%;
/*padding-top: 25px;*/
padding-right: 2.5%;
padding-left: 180px;
}

.header-right {
 float:right;
    margin-top: 30px;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 10px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
color: #989898;
}

.topnav a.active {
/* color: #742e2e; */
color: #989898;
}

.topnav .icon {
display: none;
}
/* END OF NEW MENU ----------------- */

.logo {
height: 70px;
}

.subHeadLogo{
color: #fff; 
font-size: 75%;
margin-top: -100px;
}

.mylogo {
margin-top: 1px;
/*background-image: url('images/james-hooper-logo-white.jpg');*/
/*background-size: 45px;*/
/*background-repeat: no-repeat;*/

}

/*.mylogo:hover {*/
/*    background-image: url('images/james-hooper-logo-purple.svg');*/
/*    background-size: 55px;*/
/*    background-repeat: no-repeat;*/
/*    margin-left: -2px;*/
/*    z-index: 999;*/
/*}*/


#myNav {
overflow: hidden;
} 

.sticky {
position: fixed;
top: 0;
width: 100%;
}

.sticky + #name {
padding-top: 10px;
}



.horizontalLine {
margin-top:10%;
margin-bottom:10%;
}

p {
color: #fff;
}

#stats {
font-size: 10em;
color: #fff;
margin-left: 15%;
padding-top: 12%;
}

#projects {
display:block;
float:right;
list-style-type: none;
font-weight: 100;
color: #ccc;
width: 300px; 
height: 110px; 
overflow: auto; 
text-align:justify; 
margin-top:-110px;
margin-right: 3%;
}

#projects:hover {
background: linear-gradient(to right,#ff8a00,#da1b60);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}

.repos {
margin-left: 13%;
font-weight: 900;
}
#myRepos {
display: flex;
flex-direction: column;
}

.todaysDiscount {
color: #fff;
font-size: 6.5em;
   font-weight: 900;
   font-family: 'Almarai', sans-serif;
margin: 153px 0 0 20%;
line-height:.9;
}

.todayOnly {
display:block;
width: 100%;
height: auto;
font-weight: bold;
margin-top: -170px;
margin-left: 15.5%;
font-size: 3vw;
color: #ef8d36;
}

.container-commits {
display: block;
}

#commits ul {
margin-left: 14.25%;
margin-top:-1.25%;
margin-bottom:5%;
font-size: 115%;
line-height: 26px;
}

#commits ul li a {
text-decoration: none;
color: #A8A8A8;
}

#commits a:hover {
color: #fff;
}

.myName {
display: block;
width: 100%;
   font-family: 'Almarai', sans-serif;
font-size: 5.5rem;
color: white;
background: linear-gradient(to right,#ff8a00,#da1b60);
-webkit-background-clip: text;
/* -webkit-text-fill-color: transparent; */
/* -webkit-text-fill-color: #da1b60; */
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
z-index: 1000;
}



#CTA {
width: 200px;
height: 100px;
float:left; /* was right */
margin-right: 18%;
/*margin-top: -18%; */
margin-left: 20.5%; /* This is new */
background: transparent;
}

#CTAabout {
width: 200px;
height: 100px;
float:left;
margin-right: 18%;
margin-top:-15%;
margin-left: 10%;
}


#CTA .hireMe {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
padding: 15px;
border-radius: 8px;
color: #000;
width: 190px;
margin-bottom: 8%;
font-family: 'Almarai', sans-serif;
font-weight: bold;
-webkit-box-shadow: 10px 10px 18px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 18px -2px rgba(0,0,0,0.75);
box-shadow: 10px 10px 18px -2px rgba(0,0,0,0.75);
}

#CTAabout .hireMeBtn {
background-color: #da3688;
padding: 15px;
border-radius: 8px;
color: #000;
width: 190px;
margin-bottom: 8%;
margin-top:205px;
margin-left: 40%;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
-webkit-box-shadow: 10px 10px 18px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 18px -2px rgba(0,0,0,0.75);
box-shadow: 10px 10px 18px -2px rgba(0,0,0,0.75);
}

#CTA .freeQuote {
background-color: #da3688;
padding: 15px;
border-radius: 8px;
color: #000;
width: 190px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
-webkit-box-shadow: 10px 10px 18px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 18px -2px rgba(0,0,0,0.75);
box-shadow: 10px 10px 18px -2px rgba(0,0,0,0.75);
}

#CTAabout .freeQuoteBtn {
background-color: #ef8d36;
padding: 15px;
border-radius: 8px;
color: #000;
width: 190px;
margin-left: 40%;
    font-family: 'Almarai', sans-serif;
font-weight: bold;
-webkit-box-shadow: 10px 10px 18px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 18px -2px rgba(0,0,0,0.75);
box-shadow: 10px 10px 18px -2px rgba(0,0,0,0.75);
}

.currentProjects {
text-shadow: 2px 2px #000;
margin-left: 20.5%;
margin-right: 2%;
margin-top:5px;
font-size: 2em;
font-weight: bold;
color: #fff;
width: 60%;
}

a.gitlink {
text-decoration: none;
color: gray;
}
a.gitlink:hover {
color: #fff;
}

#description {
font-size: .85em;
display: block;
width: 200px;
color: #ccc;
font-weight: 100;
float: right;
margin-top: 300px;
margin-right: 3%;
}


#profile {
display: block;
background-image:url('images/hire-james-hooper.jpg');
/*clip-path: polygon(0 0, 100% 0%, 100% 88%, 0 100%);*/
width: 100%;
height: 100vh;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
 background-size: cover; 
}

.home {
margin-left: 7%;
z-index: -10000;
width: 100%;
height: auto;
}

header { 
display: flex; 
flex-direction: row;
height: 100px;
background-color: #000;
position: fixed;
right: 0;
left: 0;
z-index: 9999;
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
}

.contact-header { 
display: flex; 
flex-direction: row;
height: 100px;
background-color: #000;
position: fixed;
right: 0;
left: 0;
z-index: 999;
/* margin-top:-200px;   */
}

.header {
display: flex; 
flex-direction: row;
height: 100px;
background-color: #000;
position: fixed;
right: 0;
left: 0;
z-index: 999;
}

#specifics {
clear: both;
}

.logo {
 margin-top: 1%;
 margin-left: 2%;
}

#profession {
 font-size:23px;
 font-weight: 100;
 line-height:50px;
 margin-top: -10px;
 margin-left: -10px;
 font-family: din-2014, sans-serif;
 font-weight: 400;
 font-style: normal;
 z-index: 9999;
}

#profession p {
color: #989898;
padding-bottom: 2px;
} 

#profession .subHeadLogo {
color: #fff;
width: 300px;
margin-left: 2px;
}

/* About Skills and Education  */
.totalSkills {
display: flex;
flex-direction: row;
margin-top: 200px;
width: 100%;
margin-left: -45px;
padding-bottom: 15px;
height: auto;
}

.education {
float: left;
border: 1px solid #fff;
border-radius: 10px;
width: 22%;
margin-left: 15%;
padding-right: 10px;
}

.education h2 {
margin-left: 13%;
   font-family: 'Almarai', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.75rem;
color: #fff;
}

.education ul { 
margin-top: -5px;
}

.education ul li {
list-style-type: none;
line-height: 1.4;
}

.education ul li:nth-child(1), ul li:nth-child(4) {
/*color: #989898;*/
}

   .goals { text-align: center;}

.aboutEdge {
   position: relative;
    top: -5px;
}

.mountains-1 { display: flex; justify-content: center; align-items: center; margin: 0 auto;   }
.mountains-2 { display: flex; justify-content: center; align-items: center; margin: 0 auto;  }

.gray-text {
  color: #c5c5c5;
}

.coding {
float: left;
width:30%; 
margin-left: 3%;
}

.coding h2 {
margin-left: 8%;

    font-family: 'Almarai', sans-serif;
font-weight: 400;
font-style: normal;
    font-size: 1.75rem;
color: #fff;
}

.coding ul {
margin-left: 0;
}

.coding ul li {
color: #c5c5c5; 
line-height: 1.4;
}

.design {
width:30%;
margin-left: -5%;
float: left;
}

.design h2 {
margin-left: 10%;
   font-family: 'Almarai', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.75rem;
color: #fff;
}

.design ul {
margin-left: 3%;
}

.design ul li {
color: #c5c5c5; 
line-height: 1.4;
}

.talents {
display:block;
width:auto;
margin-top: 100px;
margin-left: 15%;
/* padding-bottom: 15%; */
font-family: din-2014, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 5.5rem;
/* color: #ef8d36; */
background: linear-gradient(to right,#ff8a00,#da1b60);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
z-index: 1000;
}


.whyHireMe {
font-size: 10rem;
/*background: linear-gradient(to right,#ff8a00,#da1b60);*/
-webkit-background-clip: text;
/*-webkit-text-fill-color: transparent;*/
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
z-index: 1000;
}

.yourAnswer {
display:block;
width: 500px;
line-height: 1.75;
text-align: left;
background: #000;
margin: .25rem;
margin-bottom: 5%;
margin-left: 10%;
padding: .25rem;
font-size: 1.25em;
    font-weight: 300;
width: 80%;
}

.selfQuote {
display: block;
width: 45%;
    font-family: 'Almarai', sans-serif;
font-size: 250%;
font-style: italic;
text-align: left;
color: #fff;
margin-left: 48%;
margin-bottom: 10%;
margin-top: -17%;
}

.fixQuote {
    font-family: 'Almarai', sans-serif;
  font-size: 14vw;
  content: "\201C";
  margin-left: -60px;
  float: left;
  margin-top: -115px;
  margin-right: 15px;
  height: 300px;
}

.testimonialLink { 
text-decoration: none;
color: #F5F5F5;
}
.testimonialLink:hover {
color: #000;
} 

.james {
border-radius: 50%;
margin-left: 12%;
margin-top:-10%; 
}

.client {
border-radius: 50%;
margin-left: 20%;
margin-top:-10%; 
width: 250px;
height: 250px;
}


h1,h2,h3,h4,h5,h6 {
 color: #f2f2f2;
 font-family: 'Oswald', sans-serif;
}

h1 {
font-size: 11.5em;
margin-bottom: -80px;
margin-top:-50px;
margin: 0 auto;
}

#container {
 display: flex;
 flex-direction: row;
 width: 1200px;
 margin:0 auto;
 color: #fff;
}



/* HOMEFOOTER */

footer {
display: block;
width:100%;
}
.edge {
width: 100%;
margin-top: -10px;
}

.aboutEdge { }

.homeFtr {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: auto;
    margin-top: -2px;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.hurry {
display: block;
width: 100%;
font-size: 10.05vw;
font-weight: bold;
color: #000;
text-align: center;
margin-top:-190px;
}

.email-icon {
    width: 400px;
}

.callNow {
font-size: 3rem;
font-weight: bold;
color: #fff;
text-align: center;
padding-bottom: 15%;
margin-top: -70px;
margin-bottom: -2px;
}
.phone { 
  text-decoration: none;
  color: #fff;
}

.bottomFtr {
display: flex;
flex-direction: row;
height: 100px;
background-color: #fff;
color: #000;
    font-family: 'Almarai', sans-serif;
}

.socialIcons {
width:60%;
margin-top:25px;
margin-left: 43%;
}
.social { margin: 1px; }

.legal{
width: 725px;
margin-top: 33px;
    font-family: 'Almarai', sans-serif;
    font-size: 14px;
}

.bottomFtrContact {
width: 100%;
height: 100px;
background-color: #fff;
color: #000;
margin: 0 auto;
margin-top: -2px;
}

.bottomFtr p {
color: #000;
}

.bottomFtrContact p {
color: #000;
float: right;
margin-top: 2.5%;
margin-right: 3%;
}

.bottomFtrContact img {
margin-top: 1.55%;
margin-right: 1%;
}

.bottomFtrContact a:first-child {
margin-left: 45%;
}

.contact-info {   
        display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    width: 50%;  }

.chat,
.email { margin-top: 5px;}
a.email { text-decoration: none; color: white;font-size: 1.25rem;
}

a.email:hover { color: #ec008c; text-decoration: underline; }
.social  a img {
margin: 0;
}

#name {
 font-size: 1em;
 display: block;
 background: linear-gradient(to right,#ff8a00,#da1b60);
 background-clip: text;
 -webkit-background-clip: text;
 /* -webkit-text-fill-color: transparent; */
 -webkit-box-decoration-break: clone;
 box-decoration-break: clone;
 z-index: 1000;
     padding: 90px 0;
}
#name:hover {
 color: #fff;
}
 .home-blog {     padding: 0;  }

/* Portfolio */
.portfolio {
display: flex;
flex-wrap: wrap;
justify-content: center;
/*padding-left: 10%;*/
/*padding-bottom: 10%;*/
}

.portfolio a {
text-decoration: none;
}


.plus {
font-size: 800%;
font-weight: bold;
margin-top: -300px;
margin-left: 43%;
color: #fff; 
opacity: .5; 
}

.designWork {
display: block;
width: 400px;
height: 400px;
margin: 20px;
transition: all 0.3s ease;
border: 1px solid black;
border-radius: 10px;
transition: .5s ease;
}

.designWork:hover {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
transition: .5s ease;
}

.moreWork {
display: block;
width: 400px;
color: white;
font-size: 1.5rem;
margin: 25% 0 5% 5%;
}

.moreWork:hover {
/* color: #da1b60;  */
/*background: linear-gradient(to right,#ff8a00,#da1b60);*/
/*  -webkit-background-clip: text;*/
/*  -webkit-text-fill-color: transparent;*/
/*  -webkit-box-decoration-break: clone;*/
/*  box-decoration-break: clone;*/
/*  z-index: 1000;*/
color: #23a6d5;
}

.description {
margin: 0 auto;
margin-left: 5%;
margin-top: -2%;
margin-bottom: 5%;
font-size: 1.5rem;
}
.description:hover {
/*background: linear-gradient(to right,#ff8a00,#da1b60);*/
/*  -webkit-background-clip: text;*/
/*  -webkit-text-fill-color: transparent;*/
/*  -webkit-box-decoration-break: clone;*/
/*  box-decoration-break: clone;*/
/*  z-index: 1000;*/
color: #23a6d5;
}
.sub-desc {
margin-left: 5%;
margin-top: -15px;
display: flex;
width: 400px;
color: #f4f4f4;;
}

/* Contact Footer */
.contactFtr {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100%;
}

.mailIcon {
  width: 20%;
  height: auto;
  margin-left: 40%;
  margin-top: -150px;
  padding-bottom: 5%;

}

/* Responsive Menu */
.overlay {
 height: 100%;
 width: 0;
 position: fixed;
 z-index: 1;
 top: 0;
 right: 0;
 background-color: rgb(0,0,0);
 background-color: rgba(0,0,0, 0.9);
 overflow-x: hidden;
 transition: 0.3s;
}

.overlay-content {
 position: relative;
 top: 10%;
 width: 100%;
 text-align: center;
 margin-top: 30px;
}

.overlay a {
 padding: 8px;
 text-decoration: none;
 font-family: 'Oswald', sans-serif;
 font-size: 75px;
 color: #818181;
 display: block;
 transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
 color: #f1f1f1;
}

.overlay .closebtn {
 position: absolute;
 top: -2.75%;
 right: 2%;
 font-size: 60px;
}
/* Styling for Introduction to James Hooper  */
.box.flex {
 display: flex;
 flex-direction: row;
 justify-content: center;
 /*margin-top: 80px;*/
}

.box {
 color: #f0f0f0;
 background: #000;
}

.box p {
 width: 500px;
 line-height: 1.75;
 text-align: left;
 background: #000;
 margin-left:2%;
 padding: .25rem;
     font-family: 'Almarai', sans-serif;
 font-size: 1.25em;
 font-weight: 300;
 width: 44%;
}
.home-blog-img { width: 42%; }

.blog {
 padding: .5em;
 color: #f0f0f0;
 background: #000;
}


.blog p {
 line-height: 1.75;
 font-size: 1.25rem;
     font-weight: 300;
}

.blog p:nth-child(3) {
 margin-top: 5%;
}

/* Articles on Home Page */
.blog.flex {
 display: flex;
 flex-direction: column;
 justify-content: center;
 /*margin-left: 15%;*/
 /*margin-right:15%;*/
 margin-bottom: 8%;
 max-width: 750px;
}

.numberOfArticle {
  margin-left: 16%;
  margin-top: 9%;
  font-size: 200%;
}

.blogHeadOne {
  margin-top: 0;
    margin-left: 1%;
        margin-right: 0;
    font-size: 1.75rem;
    font-family: 'Almarai', sans-serif;
}

.blogTitle {
margin-left: 1%;
    /*margin-right: 20%;*/
    font-size: 1.75rem;
    font-family: 'Almarai', sans-serif;
margin-top: 50px;
    max-width: 750px;
}

.blogTitleSub {
margin-left: 1%;
margin-right: 0;
margin-top:0;
font-size: 150%;
color: #f4f4f4;
font-weight: 300;
font-family: 'Almarai', sans-serif;
font-style: italic;
max-width: 750px;
}

.blogAuthor {
margin-left: 1%;
margin-top: -23px;
    color: #00B4DB;
    font-family: 'Almarai', sans-serif;
}

.blogImg {
width: 95%;
height: auto;
max-width: 900px;
max-height: 509px;
}

.blogImg2 {
margin-top: 2%;
width: 95%;
height: auto;
max-width: 900px;
max-height: 215px;
}


.clearfix {
overflow: auto;
}

/* NEW TABLE  */
/* Variables
================================== */
.container {
background: linear-gradient(to right,#ff8a00,#da1b60);
-webkit-background-clip: text;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
z-index: 1000;
}

/* NEW SKILLS BUTTON */
.btn {
font-weight: 400;
font-style: normal;
border: none;
text-align:center;
cursor: pointer;
padding: 15px 60px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
min-width: 200px;
    max-width: 200px;
outline: none;
position: relative;
background: #ec008c; 
border: solid 1px transparent;
-webkit-font-smoothing: antialiased;
}
/*#nextBtn { margin-left: 10px; }*/

.social img:hover{
animation: rotation .5s linear;
}

@keyframes rotation {
from {
 transform: rotate(0deg);
}
to {
 transform: rotate(359deg);
}
}

.formButtons {
    overflow:hidden;display:flex;width:25%;flex-direction:column;align-items:center; padding-bottom: 100px;
}

.skills {
position: relative;
width: 350px;
margin: auto;
overflow: hidden;
color:#000;
height: 90%;
}

.skills a{
text-decoration: none;
color: #000;
}

/* Tables
================================== */
.Rtable {
display: flex;
flex-wrap: wrap;
margin: 0 0 3em 0;
padding: 0;
}
.Rtable-cell {
box-sizing: border-box;
flex-grow: 1;
width: 100%;  
padding: 0.8em 1.2em;
overflow: hidden; 
list-style: none;
border: solid @bw white;
background: fade(slategrey,20%);
> h1, > h2, > h3, > h4, > h5, > h6 { margin: 0; }
}

/* Table column sizing
================================== */
.Rtable--2cols > .Rtable-cell  { width: 50%; }
.Rtable--3cols > .Rtable-cell  { width: 33.33%; }
.Rtable--4cols > .Rtable-cell  { width: 25%; }
.Rtable--5cols > .Rtable-cell  { width: 20%; }
.Rtable--6cols > .Rtable-cell  { width: 16.6%; }


/* End of NEW TABLE */

/* Contact form */
#regForm {
    display:flex;
    flex-direction: column;
    align-items: center;
  margin: 150px auto 70px;
font-family: 'Almarai', sans-serif;
font-weight: 400;
font-style: normal;
padding: 40px;
width: 70%;
height: auto;
min-width: 300px;
overflow:hidden;
}

h1 {
text-align: center;  
}

input {
padding: 15px;
width: 100%;
font-size: 17px;
font-family: 'Almarai', sans-serif;
font-weight: 400;
font-style: normal;
border: 1px solid #aaaaaa;
border-radius: none !important;
}

textarea {
width:100%;
height: 150px;
margin-bottom: 5%;
font-family: 'Almarai', sans-serif;
font-size: 17px;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
display: none;
width: 50%;
font-size: 180%;
font-weight: 400;
font-style: normal;
}

.submitTab {
margin-bottom: 5%;
}

button {
background-color: #4CAF50;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
font-weight: 700;
font-style: normal;
cursor: pointer;
}

button:hover {
opacity: 0.8;
}

#prevBtn {
background-color: #bbbbbb;
margin-right: 3%;
color: #000;
}

/* Make circles that indicate the steps of the form: */
.step {
height: 5px;
width: 80px;
margin: 0 2px 50px;
background-color: #bbbbbb;
border: none;  
display: inline-block;
}

.step.active {
opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #ea1489;
}
/* End of Contact form */

@media screen and (min-width: 768px), screen and (max-width: 1024px) {
  .myName { margin-top:80px; }


}

@media screen and (max-width: 1024px) {   
    .legal{ width: 90%;}
    
}

@media screen and (max-width: 800px) {
    
.btn { width: 70%; }    
#nextBtn { margin-left: 0px; }
#prevBtn {
    margin-right: 0;
    margin-bottom: 25px;
}
input { width: 90%; border-radius: none; }
.hero-title { font-size: 4rem; padding: 0 5%; line-height: 1;color: white;}
.blog-container {
    margin: 0 3.5%;
}
.myName { font-size: 4.5rem;}
.hero { 
    /* Create the parallax scrolling effect */
background-attachment: unset;
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;
        height: 800px;
}
.hero-title { 
    margin-top: 0;
}
.home-blog-img {     
    margin: 0 auto;
    width: 66%;}
    
  
  
  .currentProjects {
width: 80%;
    font-size: 1.85em;
}

 .callNow {
  font-size: 1.25em;
  margin-top: -20px;
  /* padding-top:20px; */
 }
 .phone { 
     text-decoration: none;
     color: #fff;
 }

 .hurry {
   /* padding-top: 20px; */
 }

 .center-img {
  display: block;
  width:340px;
  height: 450px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  padding-bottom: 30px;
}

.todaysDiscount {
   text-shadow: 2px 2px #000;
   font-size: 7em;
   font-weight: 900;
   font-family: 'Almarai', sans-serif;
   padding-top: 120px;
   line-height:.9;
}

#CTA {
 margin: 0 auto;
 float:none;
 /* margin-top:12%; */
 /*margin-top: 20%;*/
}

 .bottomFtr {
   display: flex;
   flex-direction: column;
   margin-top: 1.55%;
   margin: 0 auto;
   height: auto;
   width:100%;
 }

 .socialIcons {
   /*width:100%;*/
   /*margin-top:25px;*/
   /*margin-left: 32.5%;*/
       display: flex;
    justify-content: center;
    margin: 0 auto;
    padding-top: 25px;
 }

 .legal{
   margin-left: 4%;
   margin-top:-10px;
   text-align: center;
   padding-bottom: 10px;
 }

 .edgeContact {
   width: 100%;
   height: 530px;
   margin-top: -125px;
 }

 .contactFtr {
   height: 500px;
 }
 .mailIcon {
  /* width: 35%;    */
  margin-left:40%;
  margin-top:-50px;
}

 .todayOnly {
   margin-top: -120px;
 }

 .jamesIntro {
   margin-top: -37px;
   font-size: 4.5em;
   margin-left: 14%;
 }

 .videoWrapper {
display: block;
padding-top: 25px;
height: 150px;
padding-bottom: 20%;
margin-left: 3%;
margin-bottom: 90px;
}
.responsive {
  width: 100%;
height: auto;
}

 .jamesPortfolio {
   padding-top: 100px;
       font-size: 4em;
 }

 .jamesBlog {
  margin-top: 100px;
  font-size: 4em;
  /*margin-left: 14%;*/
 }

 .jamesIntroDesign {
   margin-top: -34px;
   margin-left: 11%;
   font-size: 4em;
   color: white;
 }
 
 .jamesIntro2 {
   margin-top: -55px;
   font-size: 4em;
   margin-left: 11%;
 }


.totalSkills {
 display: flex;
 flex-direction: column;
 margin-top: 150px;
}

.education {
 width: 40%;
 padding-bottom: 5%;
 background-color: black;
 margin-left: 35%;
}

.education ul {
/*margin-left: 5.5%;*/
}

.coding {
width: 68%;
padding-top:10%;
margin-left: 35%;
}

.design {
width: 68%;
margin-left: 35%;
}

.myPortfolio {
  font-size: 5.75em;
  /*margin-top: -44px;*/
  margin-top: 90px;
  margin-left: 4.5%;
  color: #fff;
}

.whyHireMe {
margin-left:-30px;
color: #fff;
font-size: 4rem;
}

.talents {
display: none;
}

.james {
border-radius: 50%;
/*margin-left: 32.5%;*/
margin-bottom: 5%;
}

.selfQuote {
font-size: 150%;
font-style: italic;
margin-left: 13.5%;
margin-bottom: 15%;
margin-top: 5%;
width: 80%;
}

.fixQuote {
  font-size: 18vw;
  content: "\201C";
  margin-left: -20px;
  float: left;
  margin-top: -65px;
  height: 180px;
}

#CTA .hireMe { 
    width: 270px;
    margin-left: -35px;
}


#CTAabout .hireMeBtn {
margin-left: 18%;
}
#CTAabout .freeQuoteBtn {
margin-left: 18%;
}

#commits ul {
margin-left: 14.25%;
margin-top: -1.25%;
font-size: 115%;
line-height: 26px;
background-color: #000;
opacity: .7;
padding:20px;
border-radius: 10px;
padding-left: 8%;
margin-right: 15%;
color: #fff;
}

.box.flex {
display: flex;
flex-direction: column;
}

.box p {
width: 70%;
margin-bottom: 8%;
/* margin-top: 2%; */
margin-top: 10%;
margin-left: 16%;
}

.blogTitle {
width:80%;
}

.edge {
width: 103%;
/* margin-top: -50px; */
}

.edgeHome {
  width: 103%; 
  margin-top: -5px;
}

.edgeContact {
  width: 100%;
  margin-top: -160px;
}

.bottomFtrContact img {
margin-top: 3.55%;
margin-right: 1%;
}

button {
width: 100%;
margin: 5px 0;
}

textarea {
width: 99%;
}

.tab {
    width: 100%;
}
.btn { width: 100%; min-width: 100%;max-width:300px; }
}
.formButtons {
    overflow:hidden;display:flex;width:100%;flex-direction:column;  align-items: center;
}
}
}

/* Navigation */
@media only screen and (max-width: 800px)
{
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
  float: right;
  display: block;
  padding-right: 0;
  margin-right: -100px;
  margin-left: -10px;
}
}

@media only screen and (max-width: 800px)
{
    #display { display: none; }
.topnav.responsive {
  position: absolute;
  width: 100%;
  background-color: #000;
  opacity: .95;
  font-size: 200%;
  padding-left: 13%;
  padding-bottom: 100%;
}

.topnav.responsive .icon {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 54%;
  padding-right: 35%;
  margin-top: 5%;
}
.topnav.responsive a {
  float: none;
  display: block;
  text-align: left;
  font-size: 200%;
  font-weight: bold;
  margin-left: 25%;
}
.header-right {
    margin-right: 40%;
    margin-top: 25px;

}

.space {
  height: 50px;
}

    #profile {
display: block;
background-image:url('images/hire-james-hooper.jpg');
width: 100%;
height: 100vh;
margin-top:100px;
background-repeat: no-repeat;
 background-size: cover; 
}
	 .navigation__link:link, .navigation__link:visited {
	     font-size: 2.5rem;
	 }
	 a.email { font-size: 1rem; }
	 iframe { height: 310px !important; }

}

/* Smartphones ----------- */
@media only screen and (min-width : 320px ) and (max-width : 480px) {
    
        #profile {
display: block;
background-image:url('images/hire-james-hooper.jpg');
width: 100%;
height: 100vh;
margin-top:100px;
background-repeat: no-repeat;
 background-size: cover; 
     background-position: top;
}

.blog.flex {
    /*margin-left: 6%;*/
    margin-right: 6%;
}

.blog p {
    /*margin-right: 10%;*/
}

.blogAuthor {
    /*margin-left: 8%;*/
        padding-top: 5px;
}

.jamesBlog {
    padding-left: 0px;
}

.blogHeadOne {
    /*margin-left: 8%;*/
    /*    margin-right: 4%;*/
}

.blogTitleSub {
    margin-left: 8%;
}

/* Styles */
.myName {
  font-size: 2.75rem;
  margin-top: 150px;
  z-index: 9999;
}

.space {
  height: 50px;
}

.talents {
 margin-top: -150px;
 font-size: 3.25rem;
}

.whyHireMe {
  margin-left: -5px;
  font-size: 4rem;
  padding-bottom: 20px;
}

 .center-img {
  display: block;
  width:320px;
  height: 430px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  padding-bottom: 30px;
  padding-right: 45px;
}

.contact-header { 
  display: flex; 
  flex-direction: row;
  height: 100px;
  background-color: #000;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 999; 
  margin-top:0px;
 }

.totalSkills {
flex-direction: column;
font-size: 1.25em;
    margin-bottom: 20px;
}

.education {
float: left;
border: 1px solid #fff;
border-radius: 10px;
        width: 80%;
        margin-left: 20%;
}

.education ul {
margin-top: -15px;
margin-left: -2%;
margin-bottom: 50px;
}

#CTAabout .hireMeBtn {
margin-top: 75px;
margin-left: 30%;
}

#CTAabout .freeQuoteBtn {
margin-left: 30%;
}

#regForm {
  margin: 100px auto 200px;
          width: 82%;
}

.thankyou {
  display: flex;
  width: 75%;
  background-color: #000;

}
.msg {
  color: #fff;
  font-size:200%;
}

.james {
border-radius: 50%;
margin-left: 21%;
margin-bottom: 5%;
margin-top: 3%;
}

.selfQuote {
  margin-left: 14%;
  width: 75%;
}


.fixQuote {
  font-size: 18vw;
  content: "\201C";
  margin-left: -25px;
  float: left;
  margin-top: -35px;
  margin-right: 10px;
  height: 250px;
}

.coding {
float: left;
width: 70%;
margin-left: 27%;
}

.design {
width: 70%;
margin-left: 27%;
float: left;
}

.jamesPortfolio {
 font-size: 3em;
 margin-top: -34px;
 text-align: center;
}

.jamesBlog {
  font-size: 4em;
  margin-top: 0;
    /*margin-left: 6%;*/
  padding-top: 100px;
}

.myPortfolio {
  font-size: 4em;
  margin-left: 2%;
  color: #fff;
  
}

.designWork {
display: block;
width: 310px;
height: auto;
margin: 40px;
}


.description {
  margin: 0 auto;
  /* margin-left: 5%; */
  margin-left: 10%;
    margin-right: 5%;
  margin-top: -2%;
  margin-bottom: 5%;
  font-size: 1.5rem;
 }
 .description:hover {
   /*background: linear-gradient(to right,#ff8a00,#da1b60);*/
   /*  -webkit-background-clip: text;*/
   /*  -webkit-text-fill-color: transparent;*/
   /*  -webkit-box-decoration-break: clone;*/
   /*  box-decoration-break: clone;*/
   /*  z-index: 1000;*/
   color: #23a6d5;
 }
 .sub-desc {
   margin-left: 10%;
   margin-top: -15px;
   display: flex;
   width: 85%;
   color: gray;
 }
 
 .moreWork {
    margin-top: 10%;
    padding-bottom: 50px;
}
 


.todaysDiscount { 
margin: 65% 0 15px 18%;
  font-size: 4em;
     font-weight: 900;
   font-family: 'Almarai', sans-serif;
}

#commits {
 background-color: #000 0.3;
}

.box.flex {
 flex-direction: column;
 font-size: 1rem;
}
.box p {
 margin-left: 10%;
 width: 80%;
}

.blogTitle { 
 width: 80%;
     /*margin-left: 8%;*/
}

.blogImg, .blogImg2 {
 width: 100%;
}

#profession p {
  color: #989898;
  display: none;
}

.step {
  width: 45px;
}

#name {
  font-size: 1em;
  display: block;
      padding: 0;
}

}

@media screen and (min-width: 800px) {
    
    .formButtons{
           overflow:hidden;display:flex;width:50%;flex-direction:row;  align-items: center;
    }
     .home-blog {     padding:90px 0;  }
             
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */

/* Portfolio */
.portfolio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /*margin-left: 7%;*/
  /*padding-bottom: 10%;*/
  padding-left: 12%;
  padding-right: 12%;
 }
 
 .portfolio a {
  text-decoration: none;
 }
 


 .contact-header { 
  display: flex; 
  flex-direction: row;
  height: 100px;
  background-color: #000;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 999; 
  margin-top:0px;
 }

 #profession p {
  color: #989898;
  padding-bottom: 3px;
}

.edgeContact {
 margin-top:-50px;
}

.blogImg { 
 width: 85%;
}
.blogImg2 {
 width: 85%;
}

#blogArticle {
 font-size:.85em;
}

.blog p {
 font-size: 1em;
}

.todaysDiscount { 
 margin: 213px 0 0 18%;
    font-weight: 900;
   font-family: 'Almarai', sans-serif;
}

.myPortfolio {
font-size: 8em;
/*margin-top: -58px;*/
margin-left: -1%;
color: #fff;
}

.jamesPortfolio {
font-size: 6.5rem;
padding-top: 100px;
}

.jamesBlog {
  /*margin-top: -57px;*/
  font-size: 8em;
}
.videoWrapper { 
padding-bottom: 0;
}

.responsive {
width: 80%;
height: auto;
/* margin-left: 9.25%; */
}

.talents {
font-size: 4rem;
margin-top: 50px;
background-color: #000;
padding-bottom: 100px;
}

.whyHireMe {
/* margin-left: -7%; */
font-size: 7rem;
margin-top: 5%;
}

#CTAabout .hireMeBtn { 
margin-top: 175px;
margin-left: 30%;
}
#CTAabout .freeQuoteBtn {
margin-left: 30%;
}

.selfQuote { 
width: 50%;
margin-left: 43%;
font-size: 225%;
}

.fixQuote {
  font-size: 14vw;
  content: "\201C";
  margin-left: -60px;
  float: left;
  margin-top: -85px;
}

.myQuote {
  width: 50%;
  margin-left: 43%;
  font-size: 225%;
  padding-left: 5%;
  border-left: 5px solid #fff;
}

.mailIcon {
  margin-left:40%;
  margin-top:-125px;
  padding-bottom:5%;
}
}

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
.talents {
  /* margin-top: 200px; */
  margin-left: 20%;
  padding-bottom:150px;
}

.videoWrapper {
  display: block;
  padding-top: 25px;
  height: 150px;
  padding-bottom: 20%;
  margin-left: 3%;
  margin-bottom: 390px;
 }
 .responsive {
  width: 70%;
  height: auto;
  margin-left: 15%;
}
.yourAnswer {
    display:block;
    line-height: 1.75;
    text-align: left;
    background: #000;
    margin: .25rem;
    margin-bottom: 5%;
    margin-left: 27%;
    padding: .25rem;
    font-size: 1.25em;
    width: 48%;
}

}
/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
 /* Styles */
 .hero-title { font-size: 9rem; }
 
 .navigation__checkbox:checked ~ .navigation__background {
    transform: scale(200);
}
 
 
 .myName {
  display: block;
  width: 100%;
  margin-top: 10%;
  font-size: 9rem;
}
.blog p {
  margin-right: 0;
}

.education ul {     margin-left: 6.5% !important; }
.coding h2 { margin-left: 3%; }
.design h2 { margin-left: 3% !important; }


.jamesPortfolio {
  /*margin-left: 22.5%;*/
}
.jamesBlog {
  margin-top: -80px;
}

.myViews {
  width: 80%;
  margin-left: 10%;
}

.fixQuote { padding-right: 70px; }

.client {

margin-left: 22%;
margin-top:-20%; 
width: 400px;
height: 400px;
border-radius: 50%;
}

.selfQuote {
margin-left: 43%;
margin-top: -10%;
max-width: 30%;
}



.yourAnswer {
    display:block;
    line-height: 1.75;
    text-align: left;
    background: #000;
    margin: .25rem;
    margin-bottom: 5%;
    margin-left: 25.5%;
    padding: .25rem;
    font-size: 1.25em;
    /*width: 48%;*/
    max-width: 1000px;
}

.talents {
  margin-left: 22%;
  font-size: 6.5rem;
}

#CTAabout .hireMeBtn {
  margin-left: 55%;
}
#CTAabout .freeQuoteBtn {
  margin-left: 55%;
}

.videoWrapper {
  display: block;
  padding-top: 25px;
  height: 150px;
  padding-bottom: 20%;
  margin-left: 3%;
  margin-bottom: 390px;
 }
 .responsive {
  width: 50%;
  height: auto;
  margin-left: 25%;
}

}

/* NEW  */

.jamesBlog { font-size: 5.5rem; }
.blog-container {
  max-width: 700px;
  margin: auto;
}
.blogAuthor { color: #00B4DB; padding-bottom: 30px; padding-top: 1%;}
.blogHeadOne { font-size: 2rem;  color: #f4f4f4; padding: 90px 0 0; }
blockquote { padding-bottom: 30px;}
.blogTitle { margin-top: 80px; }
.blogTitleSub {
  margin-left: 0;
  font-size:1.75rem;
  font-style: italic;
  color: #BEBEBE;
}
.blogImg { width: 100%; height: auto; paddinig: 30px 0; }
.blogImg2 {width: 100%; height: auto; padding: 30px 0;}
.blog p { font-size: 1.25rem; font-weight: 300; color: #F0F0F0; line-height: 1.75; }
hr.article-split { border: 1px dotted #F0F0F0; }

.design ul {
margin-left: 0;
}

.design h2 {
    margin-left: 8%; }

/* END OF NEW */

@media screen and (min-width: 2000px) {
    .yourAnswer {
    margin-left: 30.5%;
}
}


@media screen and (min-width: 3000px) {
        
        .yourAnswer {
    margin-left: 35.5%;
}
}

 @media (max-width: 37.5em) {
     .client {display: block; position:relative; margin-left: auto; margin-right:auto;k width: 150px; }
	 .navigation__button {
		 top: 1rem;
		 right: 1rem;
	}
	.jhd-logo {
    margin: 10px 0 0 30px;
}


  /*  .blogAuthor { padding-left: 9%; }*/
  /*  .blogTitleSub { padding-left: 9%; width: 85%; }*/
  /*  .blog.flex {padding-left: 9%;*/
  /*  width: 100%;}*/
  /*    .jamesBlog { padding-left: 9%; }*/
  /*.blogHeadOne { padding: 15% 9% 0 9%; }*/
  /*.blog p { margin-right: 15%; }*/
  /*.blogImg { width: 83%; padding: 15px 0 30px 0; }*/
  /*.blogImg2 {width: 83%; padding: 15px 0 30px 0;}*/
  /*.blogTitle {    padding-left: 9%; }*/
}




@media screen and (max-width: 800px) {

    .blogAuthor { padding-left: 9%; }
    .blogTitleSub { padding-left: 9%; width: 85%; }
    .blog.flex {padding-left: 9%;
    width: 100%;}
      .jamesBlog { padding-left: 9%; font-size: 4.5rem; }

  .blogHeadOne { padding: 15% 9% 0 9%; }
  .blog p { margin-right: 15%; }
  .blogImg { width: 83%; padding: 15px 0 30px 0; }
  .blogImg2 {width: 83%; padding: 15px 0 30px 0;}
  .blogTitle {    padding-left: 9%; }
  .contact-info { width: 100%; }
}

@media screen and (max-width: 1050px) {
    .mountains-1 { margin: 0 5%; width: 90%;  }
.mountains-2 { margin: 0 5%; width: 90%;  }
}

@media screen and (min-width: 250px) and (max-width: 768px) {
               .goals { text-align: left; margin: 5%;}
}

/* NEW SNIPPET */

/*
.testimonial-slider {
  position: relative;
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
  min-height: 400px;
}

.testimonial-slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  text-align: center;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

.testimonial-slide.active {
  opacity: 1;
  transform: translateY(0);
  z-index: 1;
}

.client {
  width: 120px;
  border-radius: 50%;
  margin: 0 auto 1rem;
}

.selfQuote {
  font-size: 1.2rem;
  color: #fff;
  max-width: 600px;
  margin: 0 auto;
  font-style: italic;
}

.testimonial-credit {
  display: block;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #ccc;
}

.fixQuote {
  font-size: 3rem;
  vertical-align: top;
  line-height: 0;
}
*/

/* END OF NEW SNIPPET */

/* Safari Bug Fix */
/* This allows the title WEB DESIGNER to display white versus transparent
while allowing other browsers to show the gradient title */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) 
{
  /*
    Define here the CSS styles applied only to Safari browsers
    (any version and any device)
   */
   .myName {
      display: flex;
      justify-content: center;
      width: 100%;

      /*font-size: 3rem;*/
     /* background: linear-gradient(to right,#ff8a00,#da1b60); */
      -webkit-background-clip: text;
     /* -webkit-text-fill-color: transparent; */
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      z-index: 1000;
      line-height:1.2;
     }
}