html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
/*----------------------    MAIN   -----------------*/
html, body {
  color:black;
  font-family:sans-serif;
}
/* -----------     NAVIGATION    -------------- */
.attop {
    overflow: hidden;
    margin:0px;
    position: fixed;
    width:90%;
    padding:4vh 5% 2vh 5%;
    z-index:1;  
}

.topnav a {
    float: right;
    color: white;
    text-align: center;
    margin: 0px 16px;
    padding: 10px 0px 5px 0px;
    text-decoration: none;
    font-size: 20px;
    letter-spacing: 5px;
    border-bottom: 2px solid rgba(255, 255, 255, 0);
    position:relative;
    animation-name: appeartop;
    animation-duration: 2.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: none;
    animation-play-state: running;    
}

.topnav span {
    float: right;
    color: white;
    text-align: center;
    margin: 0px 16px;
    padding: 0px 0px 5px 0px;
    font-size: 30px;
    position:relative;
    display:none !important;
    animation-name: appeartop;
    animation-duration: 2.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: none;
    animation-play-state: running;    
}
/* -----------     NAVIGATION ANIMATION - WHEN SCROOLLED   -------------- */
@keyframes appeartop {
    0% { 
        top:-100px;
        opacity:0;
    }
    100% {
        top:0px;
        opacity:1;
    }
}

.scrolled {
    background-color: black;
    padding: 10px 5% 5px 5%;
    overflow: hidden;
    margin:0px;
    position: fixed;
    width:90%;
    z-index:1;  
    animation-name: appeartop2;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: none;
    animation-play-state: running;    
}

@keyframes appeartop2 {
      0% { 
        background:rgba(255, 255, 255, 0.0);
        padding:4vh 5% 2vh 5%;
    }
    100% {
        background-color:black;
        padding: 10px 5% 5px 5%;
    }
}

.scrolledback {
    animation-name: backtotop;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: none;
    animation-play-state: running;    
    overflow: hidden;
    margin:0px;
    position: fixed;
    width:90%;
    z-index:1;  
    background:rgba(255, 255, 255, 0.0);
    padding:4vh 5% 2vh 5%;
}

@keyframes backtotop {
    0% {
        background-color:black;
        padding: 10px 5% 5px 5%;
    }
    
    100% { 
        background:rgba(255, 255, 255, 0.0);
        padding:4vh 5% 2vh 5%;
    }
}
/* -----------     NAVIGATION ANIMATION - HOVER LINE   -------------- */
.topnav a:after {
  display:block;
  content: '';
  border-bottom: solid 2px #019fb6;
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  padding-top:5px;
  position:relative;
  left:-3px;
}

.topnav a:hover:after {
    transform: scaleX(1.1);
}
/* -----------     SMALL NAVIGATION ANIMATION - OVERLAY   -------------- */
#close {
    display:none;
}

.topnav span:hover {
    color: teal;
}

.overlay-menu {
    background-color:black;
    width:80%;
    height:100vh;
    display:none;
    padding:5vh 10%;
    text-align:center;
    position:fixed;
    z-index: 2;
}

.overlay-menu span {
    font-size: 35px;
    text-align: right;
    color:white;
    margin-bottom:10vh;
}

.overlay-menu span:hover {
    color:#019fb6;
}

.overlay-menu a {
    width:100%;
    display:block;
    height:10vh;
    font-size:35px;
    text-decoration: none;
    color:white;
    margin-bottom:10vh;
    min-height:50px; 
}


.overlay-menu a:after {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  padding-top:10px;
  position:relative;
  left:-3px;
}

.overlay-menu a:hover:after {
    transform: scaleX(.55);
}

/* -----------     LANDING    -------------- */

.span1 {
    position: relative;
    animation-name: fromtop;
    animation-duration: 1s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: none;
    animation-play-state: running;
}

.span2 {
    position: relative;
    animation-name: frombottom;
    animation-duration: 1s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes fromtop {
    0% { 
        opacity:0;
        color:#019fb6;
        left:-100px;
    }
    
    100% {
        opacity:1;
        left:0px;
    }
}

@keyframes frombottom {
    0% { 
        opacity:0;
        color:#019fb6;
        right:-100px;
    }
    100% {
        opacity:1;
        right:0px;
    }
}

.span1:hover, .span2:hover {
    animation-name: grow;
    animation-duration: 1s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: none;
    animation-play-state: running;
    opacity: 0;
    color:#019fb6;
}

@keyframes grow {
    0% { 
        opacity:1;       
    }
    
    100% {
        opacity:0;
    }
}

.top-text {
    text-align:center;
    height:100vh;
    min-height: 700px;
    background: url("photos/background2.jpg") center;
    background-repeat: no-repeat;
    background-size: cover;
}

.testhead {
    padding-top:40vh;
    font-size:70px;
    letter-spacing: 15px;
    font-weight: bold;
    color:white;
    background:rgba(0, 0, 0, 0.5);   
}

.intro2 {
    font-size: 20px;
    letter-spacing: 5px;
    color:#b2e2e9;
    font-weight: bold;
    padding:25px;
     opacity:1;
     background:rgba(0, 0, 0, 0.5);
    padding-bottom: 50vh; 
}

.h2-1 {
    animation-name: appear1;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: none;
    animation-play-state: running;
}

.h2-2 {
    animation-name: appear1;
    animation-duration: 2s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: none;
    animation-play-state: running;
}

.h2-3 {
    animation-name: appear1;
    animation-duration: 2.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: none;
    animation-play-state: running;
}

.h2-4 {
    animation-name: appear1;
    animation-duration: 3s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: none;
    animation-play-state: running;
}

.h2-5 {
    animation-name: appear1;
    animation-duration: 3.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes appear1 {
  0% {
    opacity:0;   
    }
    75% {
        opacity:0;
        color:white;
    }
  100% {
    opacity:1;
    color:#b2e2e9;  
  }
}
/* -----------     ABOUT    -------------- */
.about-me {
    background-color:white;
    overflow: auto;
    padding-bottom:50px;
}

.about-title {
    font-size:25px;
    letter-spacing: 20px;
    padding: 60px 0;
    text-align:center;
    font-weight: bold;
}

.about {   
    font-size: 14px;
    width:900px;
    margin:auto;
    overflow: auto;
}

.about h4 {
    text-align:center;
    padding:20px;
}

.about img {
    margin-top:50px;
    width:300px;
    float:left;
    border-radius: 50%;    
}

.about p {
    padding-left:350px;
    line-height: 32px;
    letter-spacing: 3px;
}
/* -----------     SKILLS    -------------- */
.skills-something {
    background-color:#f2f2f2;
    overflow: auto;
}

.skills {
    width:50%;
    float:left;
     padding: 30px 0;
}

.skills-title {
    text-align:center;
    font-size:20px;
    letter-spacing: 16px;
    padding:30px 0;
    opacity:1;
}

table {
    width:90%;
    max-width:450px;
    margin:auto;
    border-collapse: collapse; 
    margin-bottom:5px;
}

tr {
    border-bottom: 5px solid #f2f2f2;
}

.lang-td {
    width:100px;
}

.lang {
    background-color:#019FB6;
    padding:6px;
    width:180px;
    text-align:center;
    font-size: 14px;
    letter-spacing: 3px;
    border-radius: 25px 0px 0px 25px;
}

.wholebar {
    font-size: 14px;
    letter-spacing: 3px;
}

.wholebar div {
    padding:6px;
    text-align:right;
    color:black;
    background-color:#b2e2e9;
    border-radius: 0px 25px 25px 0px;
    min-width:35px;
}

.percent1 { width:95%; }
.percent2 { width:95%; }
.percent3 { width:90%; }
.percent4 { width:85%; }
.percent5 { width:75%; }
.percent6 { width:70%; }
.percent7 { width:70%; }
.percent8 { width:65%; }
.percent9 { width:55%; }
.percent10 { width:50%; }
.percent11 { width:30%; }
.percent12 { width:25%; }
.percent13 { width:15%; }
/*--------------------- QUALITIES --------------------*/
.something {
    padding: 30px 0;
    width:50%;
    float:right;
}

.something-title {
    text-align:center;
    font-size:20px;
    letter-spacing: 16px;
    padding:30px 0;
    opacity:1;
}

.something table {
    font-size: 14px;
    line-height: 32px;
    letter-spacing: 3px;
    margin:auto;   
}

.something td, .something tr {
    border: none;
}

.emptyrow {
        height: 15px;
}

.something .middle {
    font-weight: bold;
    color:teal;
    width:32px;
    border-radius: 50%;
    text-align: center;
    background-color: #b2e2e9;
}

.something .left {
    text-align: right;
}

.something .right {
    text-align: left;
    padding-left:4px;
}

.coursework {
    width:100%;
    /*float:right;*/
    background-color:#e5f5f7;
    clear: both;
    padding: 30px 0;
}

.coursework-title {
    text-align:center;
    font-size:20px;
    letter-spacing: 16px;
    padding:30px 0;
    opacity:1;
}

.coursework p {
    width:90%;
    margin:auto;
    text-align: center;
    padding-bottom:20px;
    font-size: 14px;
    line-height: 32px;
    letter-spacing: 3px;
}

.coursework ul {
    columns:3;
  list-style: none;
    font-size: 14px;
    line-height: 32px;
    letter-spacing: 3px;
    width:90%;
    margin:auto;
}

.coursework li {
    width:317px;
    margin:auto;
}

.symbol {
    font-size: 20px;
    color:teal;
}
/* -----------     PORTFOLIO    -------------- */
.portfolio {
    overflow: auto;
    clear: both;
    width:80%;
    margin:auto;
    padding-bottom:40px;
}

.portfolio-title  {
    font-size:25px;
    letter-spacing: 20px;
    padding: 60px 0;
    text-align:center;
    font-weight: bold;
}

.portfoliodiv {
    position: relative;
    width: 31.33333333333%;
    float:left;
    padding:1%;    
}

.portfolioimg {
  opacity: 1;
  display: block;
  width:100%;
  height: 17vw;
  transition: .8s ease;
  backface-visibility: hidden;
}

.portfoliomiddle {
  transition: .8s ease;
  opacity: 0;
  position: absolute;
  top: 15%;  
  text-align: center;
  width: 96%;
  margin:auto;  
}

.portfoliotext p {
    padding: 10% 2%;
    font-size:26px;
    letter-spacing: 3px;
    font-weight: bold;
}

.portfoliotext span {
    background-color:#019FB6;
    padding:10px 20px;
    font-size:14px;
    letter-spacing: 3px;
    font-weight: bold;
}

.portfoliodiv:hover .portfolioimg {
  opacity: 0.3;
}

.portfoliodiv:hover .portfoliomiddle {
  opacity: 1;
}

.portfoliotext {
  color: black;
  font-size: 16px;
}
/* -----------     PORTFOLIO - OVERLAY   -------------- */
.overlay {
    position: fixed; 
   overflow-y: scroll;
   top: 0; right: 0; bottom: 0; left: 0; 
    background:  rgba(40,40,40, .85);
    display:none;
    z-index:2;
}

.overlay-content {
   margin: 15vh auto;
   width: 90%;
   max-width: 850px;
   padding: 10px;
    padding-bottom: 30px;
   background-color:white;
}

.overlay-content img {
    width:100%;
}

.one-row {
    width:90%;
    margin:auto;
}

.overlay-content h2 {    
  width:100%;
    text-align: center;
    padding:20px 0;
    font-size:25px;
    letter-spacing: 12px;
}

.overlay-content p {
    padding:20px 0;
    font-size:14px;
    line-height: 25px;
    letter-spacing: 3px;
}

.overlay-skills {
    background-color: #e5f5f7;
    padding-bottom: 20px;
    margin: 20px 0;
}

.overlay-content h3 {
    padding:20px 0;
    font-size:22px;
    text-align: center;
    letter-spacing: 12px;
}

.overlay-content ul {
    columns:2;
    list-style: none;
    font-size: 14px;
    line-height: 32px;
    letter-spacing: 3px;
    width:90%;
    margin:auto;
}

.overlay-content li {
    width:80%;
    margin:auto;
    list-style: none;
    padding-left:20%;
}

.symbol {
    font-size: 20px;
    color:teal;
}

.overlay-features {
    background-color:#f2f2f2;
    padding-bottom: 20px;
}

.overlay-features p {
    text-align: center;
    width:90%;
    margin:auto;
}

.overlay-features ul {
    columns:3;
    text-align: center;    
}

.overlay-features li {
    padding-left:0;
}

.overlay-features li:hover {
    color:teal;
    font-weight: bold;
    cursor: pointer;
}

.overlay-content a {
    background-color:#e5f5f7;    
    text-decoration: none;
    letter-spacing: 3px;
    text-align: center;
    width:100px;
    text-align: center;
    margin:auto;
    padding:10px 20px;
    display:block;
}

.overlay-content a:visited, .overlay-content a:active {
    color:black;
}

.visit:visited , .visit:active {
    color:black;
}

.overlay-content a:after {
  display:block;
  content: '';
  border-bottom: solid 3px #b1e1e7;
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  position:relative;
  top:10px;
  left:20px;
  text-align: left;
  transform-origin: right;
}

.overlay-content a:before {
      display:block;
  content: '';
  border-bottom: solid 3px #b1e1e7;
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  position:relative;
  bottom:10px;
    right:20px;
    transform-origin: left;
    }

.overlay-content a:hover:after, .overlay-content a:hover:before {
    transform: scaleX(1.4);
}

.overlay-features .overlay-description {
    text-align: left;
    width:90%;
    margin:auto;    
}

.overlay-pages {
    background-color:#f2f2f2;
    margin-top:20px;
    display:none;
    padding:20px 0;
}

.overlay-pages2 {
    background-color:#f2f2f2;
    margin-top:20px;
    padding:20px 0; 
}

.overlay-pages h4 {
    padding:20px 0;
    font-size:20px;
    text-align: center;
    letter-spacing: 10px;
}

.overlay-pages p {
    width:90%;
    margin:auto;
    font-size:14px;
    line-height: 25px;
    letter-spacing: 3px;
}

.overlay-pages img {
    width:90%;
    margin: 0 5%;
    border: .5px solid black;
}

.overlay-pages2 img {
    width:90%;
    margin: 0 5%;
    border: .5px solid black;
}

.overlay-features .adoption  {
    columns:2;
}

.overlay-features .adoptionh {
    font-weight: bold;
}

.overlay-features .adoptionh {
    border-bottom: 2px solid black;
    padding-bottom:1px;
    width:250px;
    background-color:#b1e1e7;
}

.adoption li {
    width:250px;
}

.overlay-features .adoptionh:hover {
    color:black;
    cursor:auto;
}
/* -----------     PORTFOLIO - OVERLAY CLOSR BTN  -------------- */
.overlay .closebtn {
    padding: 8px;
    text-decoration: none;
    color: #019FB6;
    display: block;
    transition: 0.3s;    
    z-index: 3;
    position: fixed;
    top: 15px;
    right: 45px;
    font-size: 60px;
}

.overlay .closebtn:hover, .overlay .closebtn:focus {
    color: #b1e1e7;
}

.slider {
    text-align: center;
    margin-bottom:20px;
}

.answer {
    text-align: center;
    width:200px;
    padding:10px;
    display: inline-block;
}

.slider span:nth-child(odd) {
    background-color:#b1e1e7;
    padding:5px 10px;
    border-radius: 50%;
    cursor: pointer;
}

.whyhire {
    overflow: auto;
    background-color:#f2f2f2;
    padding:20px 5%;
}

.whyhire-title {    
    text-align:center;
    font-size:20px;
    letter-spacing: 16px;
    padding: 30px 0;    
}

.whyhire h4 {
    text-align:center;
    font-size:20px;
    letter-spacing: 3px;
    padding:20px 0px;
}

.whyhire div {
    width:30.25%;
    float:left;
    color:black;
    margin:1.5%;
    font-size: 14px;
    text-align: center;
    line-height: 32px;
    letter-spacing: 3px;
}

.whyhire img {
    width:110px;
}

.contact {
   overflow: auto;
    background-color:#e5f5f7;
    padding-bottom:50px;
    width:100%;
}

.contact-title {
    font-size:25px;
    letter-spacing: 20px;
    padding: 50px 0;
    text-align:center;
    font-weight: bold;
}

.contactsection {
    padding-top:50px;
    width:400px;
    margin:auto;
    float:right;
}

.mycontactinfo {
    float:left;
    width:50%;
    margin:auto;
}

.mycontactinfo p {
    margin:auto;
    font-size: 16px;
    letter-spacing: 3px;
    padding:0px 0;
    text-align: center;
}

.mycontactinfo a, .mycontactinfo a:visited {
    color:#019FB6;
    text-decoration: none;
}

/*a[href^="tel"]{ 
    color:inherit; text-decoration:none; 
}*/

.symbol2 {
    font-size: 70px;
    color:teal;
}

.mycontactinfo p:nth-child(even) {
    padding-bottom:20px;
}

.map {
    width:50%;
    float:right;
}

#map {
    height: 400px;  
    width: 400px;
    background-color: grey;
    margin: auto;
    float:left;
}

.footer p {
    text-align: center;
    padding:30px 0;
    font-size: 14px;
    line-height: 28px;
    letter-spacing: 3px;
}
/*MEDIUM DESKTOP----------------------------------------------------*/
@media (max-width:1150px) {
  /*---------------------------COURSES--------------------------------*/    
.coursework ul {
    columns:2;
    width:70%;
    min-width:620px;
    letter-spacing: 2px;
}

.coursework li {
    width:290px;
    margin:auto;
}
        
.portfoliodiv {
    width: 48%;
}
    
.portfolioimg {    
    height:25vw;
}
        
.topnav span {
    display:none !important;
}
    
.overlay-menu {
    display:none;
}   
}
/*SMALLER DESKTOP----------------------------------------------------*/
@media (max-width:950px) {
.overlay-skills li {
    width:100%;   
}

.overlay-skills ul {
    columns:2;    
}    
    
.overlay-features li {
    width:160px;
}

.overlay-features .adoptionh {
    width:230px;
}

.adoption li {
    width:230px;
}

.topnav span {
    display:none !important;
}
    /*-----------------------------ABOUT---------------------------*/
.about {
    width:100%;
}    
    
.about img {
    padding:0 30px 5px 30px;
    width:250px;
    border-radius: 50%;
    margin-top:0;
}

.about p {
    padding:0 30px 0px 30px;
}
    /*------------------------WHY HIRE-----------------------*/
.whyhire div {
    width:350px;
    margin:auto;
    float:none;
    padding-bottom:20px;
}
    
  .whyhire h4 {
    padding:0px;
}

.portfolio {
    width:95%;
}
        
.portfolioimg {
    height:30vw;
}

.form {
    width:100%;
    padding-bottom:60px;   
}
    
.contact form {
    width:50%;
    min-width:400px;    
}
        
.btn-div {
    width:100px;
    margin:auto;
}
        
.map {
    width:100%;   
}
    
#map {
    height: 300px;  
    width: 50%;
    min-width:400px;    
}

.mycontactinfo {
    width:100%;
    padding-top:0;
    padding-bottom:50px;
}
    
.contactsection {
    float:none;
    padding-top:0px;
    width:300px;
}
    
.mycontactinfo p{
    padding:0px 0;    
}
    
#map {
    float:none;
}
}
/*Very SMALL DESKTOP----------------------------------------------------*/
@media (max-width:660px) {    
.overlay-skills ul {
    columns:1;
}

.overlay-skills li {
    width:250px;
    margin: auto;
    padding-left:0;
}
    
 .overlay-features ul {
    columns:1;    
}   
    
 .overlay-features .adoptionh  {
    columns:1;
}

.overlay-features .adoption  {
    columns:1;    
}
   
.topnav a {
    display: none;
}
    
.topnav span {
    display:block !important;
}

.about {
    width:100%;
}    
    
.about img {
    float:none;
    padding:0 25% 0 25%;
    width:50%;
    border-radius: 50%;
}

.about p {
    padding:30px 30px 0px 30px;
}
     /*----------------------SKILLS-------------------*/    
.skills {
    width:100%;
    float:left;
    background-color:#f2f2f2;
     padding: 30px 0;
}    
    
.something {
    width:100%;
}
  
table {
    width:80%;
}
    /*----------------------COURSES---------------------*/
.coursework-title {
    letter-spacing: 15px;
}
    
.coursework ul {
    columns:1;
    width:100%;
    min-width:0px;
}
    
.coursework li {
    width:290px;
    margin:auto;
}
        
.portfolio {
    width:100%;
}
        
.portfoliodiv {
    width: 85%;
    margin:auto;
    float:none;
}
    
.portfolioimg {
    height:55vw;
}   
}
/*TABLET--------------------------------------------------------------*/
@media only screen and (orientation:portrait) and (max-device-width: 800px){
    /*----------------------NAVIGATION-------------------------*/
.topnav a {
    float: right;
    color: white;
    text-align: center;
    margin: 0px 16px;
    padding: 10px 0px 5px 0px;
    font-size: 30px;
}
        
.scrolled {
    padding: 20px 5% 10px 5%;
}
        
@keyframes appeartop2 {
      0% { 
        background:rgba(255, 255, 255, 0.0);
        padding:4vh 5% 2vh 5%;
    }
    100% {
        background-color:black;
        padding: 20px 5% 10px 5%;
    }
}

.intro2 {
    font-size: 40px;
}
      /*------------------------------ABOUT-----------------------*/
.about {
    width:100%;
}        
    
.about-title {
    font-size: 30px;
}
        
.about img {
    float:none;
    padding:0 30% 0 30%;
    width:40%;
    border-radius: 50%;
    margin-top:0;
}

.about p {
    font-size:24px;
    padding:30px 60px 20px 60px;
    line-height: 46px;
}
        
.skills-title {
    font-size: 30px;
}
        
.wholebar {
    font-size: 24px;
}
        
.skills {
    width:100%;
    padding: 30px 0;
}
    
table {
    width:80%;
    max-width:none;    
}
    
.lang-td {
    width:180px;
}

.lang {
    padding:6px;
    width:280px;
    font-size: 24px;
}
    
.percent13 {
    margin-right:110px;
}
        
.something {
    width:100%;
}
        
.something-title {
    font-size: 30px;
}
    
.something table {
    font-size: 28px;
    line-height: 46px;
}
    
.something .middle {
    width:45px;
}
    
.coursework-title {
    font-size:30px;
}
    
.coursework p {
    font-size: 24px;
    width:75%;
}
        
.coursework ul {    
    font-size: 24px;
    width:95%;
    margin:auto;
}

.coursework li {
    width:450px;
}

.symbol {
    font-size: 30px;
    color:teal;
}
        
.portfolio-title {
    font-size:30px;
}

.portfolioimg {
  transition: .01s ease;
}

.portfoliomiddle {
  transition: .01s ease;
}

.portfoliodiv:hover .portfolioimg, .portfoliodiv:active .portfolioimg {
  opacity: 0.3;
}

.portfoliodiv:hover .portfoliomiddle, .portfoliodiv:active .portfoliomiddle {
  opacity: 1;
}
        
.portfoliotext span {
    font-size:24px;
    font-weight:normal;    
}
        
.portfoliotext p {
    font-size:28px;    
}
            
.portfolio {
    width:95%;
}
        
.portfolioimg {
    height:30vw;
}
    
.overlay-content {
    margin: 10vh auto;
}
        
.overlay-content a {
    font-size:22px;
    width:200px;
    color:black;
} 
       
.overlay-content h2 {    
    font-size:34px;
}

.overlay-content p {    
    font-size:22px;
    line-height:40px;
}

.overlay-content h3, .overlay-content h4 {    
    font-size:30px;
}

.overlay-content ul {    
    font-size:22px;
    line-height:40px;
}
    
.overlay-skills li {
    width:400px;
    padding-left:0;
}

.overlay-skills ul {
    padding-left:13%;
}   
    
.overlay-features ul {
    columns:2;
}
    
.overlay-features li {
    width:350px;
}

.overlay-features .adoptionh {
    width:300px;
}

.adoption li {
    width:300px;
}    
        
.overlay-content .slider {
    font-size:22px;
    letter-spacing: 3px;
}
    
.overlay-content .answer {
    width:40%;
}
    
.slider span:nth-child(odd) {
    padding:5px 10px 8px 12px;
}
    
.overlay .closebtn {
    font-size: 100px;
}
    /*---------------------------WHY HIRE-----------------------------*/
.whyhire-title {
    font-size:30px;
    }

.whyhire div {
    width:500px;
    margin:auto;
    padding-bottom:20px;
    float:none;
}
    
.whyhire h4 {
    font-size:26px;
    font-weight:bold;
}
     
.whyhire p {
    font-size:24px;
}
  
.contact-title {
    font-size:30px;
}
        
.mycontactinfo {
    width:100%;
    padding-top:0;
    padding-bottom:50px;
}
    
.contactsection {
    float:none;
    padding-top:0;
}
        
.mycontactinfo p {
    margin:auto;
    font-size: 26px;
    padding:0px 0;
}

.symbol2 {
    font-size: 90px;
    color:teal;
}
    
#map {
    float:none;
}
        
.map {
    width:100%;   
}
    
#map {
    height: 400px;  
    width: 70%;
}

.footer p {
    padding:40px 0;
    font-size: 24px;
}    
}

@media only screen and (orientation:landscape) and (max-device-width: 800px){    
.topnav a {
    float: right;
    color: white;
    text-align: center;
    margin: 0px 16px;
    padding: 10px 0px 5px 0px;
    font-size: 22px;
}
        
.scrolled {
    padding: 10px 5% 5px 5%;
}
        
@keyframes appeartop2 {
      0% { 
        background:rgba(255, 255, 255, 0.0);
        padding:4vh 5% 2vh 5%;
    }
    100% {
        background-color:black;
        padding: 10px 5% 5px 5%;
    }
}
    
.intro2 {
    font-size: 30px;
    padding:20px 100px;
    padding-bottom:300px;
}
     /*--------------------------ABOUT----------------------*/
    
.about {
    width:100%;
}    
    
.about-title {
    font-size: 24px;
}
        
.about img {
    float:none;
    padding:0 35% 0 35%;
    width:30%;
    border-radius: 50%;
    margin-top:0;
}

.about p {
    font-size:18px;
    padding:30px 60px 20px 60px;
    line-height:36px;
}
        
.skills-title {
    font-size: 24px;
}
        
.wholebar {
    font-size: 18px;
}
        
.skills {
    width:100%;
    padding: 30px 0;
}
    
table {
    width:70%;
    max-width:none;    
}
    
.lang-td {
    width:180px;
}

.lang {
    padding:6px;
    width:250px;
    font-size: 18px;
}
    
.something {
    width:100%;
}
    
.something-title {
    font-size: 24px;
}
    
.something table {
    font-size: 20px;
    line-height: 36px;
}
    
.something .middle {
    width:35px;
}

.coursework-title {
    font-size:24px;
}
    
.coursework p {
    font-size: 18px;
    width:90%;
}
        
.coursework ul {    
    font-size: 18px;
    width:80%;
    margin:auto;
}

.coursework li {
    width:450px;
}

.symbol {
    font-size: 24px;
    color:teal;
}
        
.portfolio-title {
    font-size:24px;    
}
        
.portfoliotext span {
    background-color:#019FB6;
    padding:10px 20px;
    font-size:18px;
    letter-spacing: 3px;
    font-weight:normal;   
}
    
.portfoliotext p {
    font-size:22px;    
}
            
.portfolio {
    width:95%;
}
        
.portfolioimg {   
    height:30vw;
}    
    
.portfolioimg {
  transition: .01s ease;
}

.portfoliomiddle {
  transition: .01s ease;
}

.portfoliodiv:hover .portfolioimg, .portfoliodiv:active .portfolioimg {
  opacity: 0.3;
}

.portfoliodiv:hover .portfoliomiddle, .portfoliodiv:active .portfoliomiddle {
    opacity: 1;
}

.overlay-content a {
    font-size:20px;
    width:200px;
    color:black;
} 
        
.overlay-content h2 {    
    font-size:28px;
}

.overlay-content p {    
    font-size:18px;
    line-height:30px;
}

.overlay-content h3, .overlay-content h4 {    
    font-size:24px;
}

.overlay-content ul {    
    font-size:18px;
    line-height:40px;
}
    
.overlay-skills li {
    width:400px;
    padding-left:0;
}

.overlay-skills ul {
    padding-left:15%;
}
    
.overlay-features ul {
    columns:2;
}
    
.overlay-features li {
    width:300px;
}

.overlay-features .adoptionh {
    width:300px;
}

.adoption li {
    width:350px;
}    
        
.overlay-content .slider {
    font-size:18px;
    letter-spacing: 3px;
}
    
.overlay-content .answer {
    width:40%;
}
    
.slider span:nth-child(odd) {
    padding:5px 10px 8px 12px;
}
            
.overlay .closebtn {
    font-size: 70px;
}
    /*-----------------------WHY HIRE---------------------*/    
.whyhire {
    padding-left:5%;
    padding-right:5%;
}
    
.whyhire-title {
    font-size:24px;
}
    
.whyhire h4 {
    font-size:20px;
    font-weight:bold;
}
     
.whyhire p {
    font-size:18px;
}
        
.whyhire div {
    width:30.1%;
    float:left;
    color:black;
    margin:1.6%;    
}
    
.contact-title {
    font-size:24px;
}
        
.mycontactinfo {
    width:50%;
    padding-top:0;
    padding-bottom:50px;
}
    
.contactsection {
    float:none;
    padding-top:0;
}
    
.mycontactinfo p {
    margin:auto;
    font-size: 20px;
    padding:0px 0;
}

.symbol2 {
    font-size: 90px;
    color:teal;
}
    
#map {
    float:none;
}
        
.map {
    width:50%;   
}
    
#map {
    height: 400px;  
    width: 90%;
    float:left;
}
    
.footer p {
    padding:40px 0;
    font-size: 18px;
}   
}
/*---------------------------PHONE--------------------------------------------------------------*/
@media only screen and (orientation:portrait) and (max-device-width: 500px){   
.topnav a {
    float: right;
    color: white;
    text-align: center;
    margin: 0px 16px;
    padding: 10px 0px 5px 0px;
    font-weight:bold;    
}
        
.topnav a {
    display:none;
}
    
.topnav span {
    display:block !important;
    font-size: 80px;
}
        
.overlay-menu a {
    font-size:80px;
}
    
.overlay-menu span {
    font-size: 100px;
}

.top-text {
    height:90vh;
}

.testhead {
    padding-top:30vh;
    font-size:125px;
}

.intro2 {
    font-size: 50px;
    line-height: 80px;
    padding:50px;
    padding-bottom: 50vh;  
}
   
.about {
    width:100%;
}    
    
.about-title {
    font-size:60px;
    padding:120px 0;
}
    
.about img {
    float:none;
    padding:0 20% 0 20%;
    width:60%;
}

.about p {
    padding:30px 60px 0px 60px;
    font-size: 45px;
    line-height: 75px;
}
     /*------------------SKILLS----------------*/    
.skills {
    width:100%;
    float:left;
    background-color:#f2f2f2;
    padding: 30px 0;
}
        
.skills-title {
    padding:120px 0;
    font-size: 60px;
}
        
table {
    width:90%;
}
 
.wholebar {
    font-size: 45px;
}
    
.wholebar div {
    min-width:100px;    
}
    
tr {
    border-bottom: 20px solid #f2f2f2;
} 
        
.lang-td {
    width:280px;
}

.lang {
    padding:6px;
    width:450px;
    font-size: 45px;
}
    
.something {
    width:100%;
}
        
.something-title {
    padding:120px 0;
    font-size: 60px;    
}
    
.something table {
    font-size: 50px;
    line-height: 90px;
}
    
.something .middle {
    width:90px;
}

.emptyrow {
    height:50px;
}
    
.coursework p {
    font-size: 45px;
    line-height: 75px;
    width:95%;
    padding-bottom: 50px;
}
    /*------------------COURSES---------------*/    
.coursework-title {
    letter-spacing: 15px;
    font-size: 60px;
    padding:120px 0;
}

.coursework ul {
    columns:1;
    width:100%;
    min-width:0px;
}
    
.coursework li {   
    width:80%;
    margin:auto;
    font-size:45px;
    line-height: 75px;
}
    
.symbol {
    font-size:60px;
}    
 
.portfolio {
    width:100%;
}
    
.portfolio-title {
    font-size: 60px;
    padding:120px 0;
}
        
.portfoliodiv {
    width: 90%;
    margin:auto;
    float:none;
}
    
.portfolioimg {
    height:60vw;
}
 
.portfoliotext span {
    padding:20px 40px;
    font-size:50px;
    letter-spacing: 3px;
    font-weight:normal;
}
        
.portfoliotext p {
    font-size:60px;    
}
    
.overlay-content a {
    font-size:45px;
    width:300px;
    color:black;
} 
       
.overlay-content h2 {    
    font-size:50px;
    padding: 50px 0;
    font-weight: bold;
}

.overlay-content p {    
    font-size:45px;
    line-height:70px;
    padding-bottom:40px;
}

.overlay-content h3, .overlay-content h4 {   
    font-weight: bold;
    font-size:50px;
    padding:50px 0;
}

.overlay-content ul {   
    columns:1;
    font-size:45px;
    line-height:70px;
    padding-bottom:30px;
}
    
.overlay-skills li {
    width:600px;
    padding-left:0;
}

.overlay-skills ul {
    padding-left:5%;    
}    

.overlay-features li {
    width:100%;
}

.overlay-features .adoptionh {
    width:90%;
}

 .overlay-features .adoption  {
    columns:1;
} 
    
.adoption li {
    width:90%;
}    
        
.overlay-content .slider {
    font-size:45px;
    letter-spacing: 3px;
    padding-bottom:30px;
}
    
.overlay-content .answer {
    width:70%;
}
    
.slider span:nth-child(odd) {
    padding:5px 17px 8px 19px;
}
        
.overlay .closebtn {
    font-size: 160px;
}

.whyhire-title {
    padding:120px 0;
    font-size:60px;
}
    
.whyhire div {
    width:80%;
    margin:auto;
    padding-bottom:50px;
    float:none;  
}
    
.whyhire img {
    width:30%;
}
        
.whyhire h4 {
    font-size:50px;
    font-weight:bold;
}
     
.whyhire p {
    font-size:45px;
    line-height:75px;
}
  
.contact {
    width:100%;
}
        
.contact-title {
    padding:120px 0;
    font-size:60px;
}
    
.mycontactinfo {
    width:100%;
    padding-top:0;
    padding-bottom:50px;
}
    
.contactsection {
    float:none;
    padding-top:0;
    width:90%;
}
        
.mycontactinfo p {
    margin:auto;
    font-size: 50px;
    padding:0px 0;
}

.symbol2 {
    font-size: 200px;
    color:teal;
}
    
.mycontactinfo a {
    color:#019FB6;
}
        
#map {
    float:none;
}
        
.map {
    width:100%;   
}
    
#map {
    height: 800px;  
    width: 90%;
}

.footer p {
    padding:60px 60px;
    font-size: 45px;
    line-height:75px;
}    
}

@media only screen and (orientation:landscape) and (max-device-width: 500px){
.topnav a {
    float: right;
    color: white;
    text-align: center;
    margin: 0px 16px;
    padding: 10px 0px 5px 0px;
    font-size: 25px;
    font-weight:bold;    
}

.top-text {
    height:100vh;
    min-height:100px;    
}

.testhead {
    padding-top:30vh;
    font-size:65px;
}

.intro2 {
    font-size: 30px;
    line-height: 40px;
    padding:30px 100px;
    padding-bottom: 50vh;  
}

.about {
    width:100%;
}    
    
.about-title {
    font-size:30px;
    padding:40px 0;
}
    
.about img {
    float:none;
    padding:0 30% 0 30%;
    width:40%;
}

.about p {
    padding:30px 60px 0px 60px;
    font-size: 24px;
    line-height: 40px;
}
     /*---------------------SKILLS---------------------*/    
.skills {
     padding: 0px;
}
        
.skills-title {
    font-size:30px;
    padding:40px 0;
}
 
table {
    width:70%;
}
   
.wholebar {
    font-size: 24px;
}
        
tr {
    border-bottom: 10px solid #f2f2f2;
} 
        
.lang-td {
    width:175px;
}

.lang {
    padding:6px;
    width:270px;
    font-size: 24px;
}
        
.something {
    width:100%;
}
        
.something-title {
    font-size: 30px;
}
    
.something table {
    font-size: 24px;
    line-height: 45px;
}
    
.something .middle {
    width:45px;
}

.emptyrow {
    height:20px;
}
    /* --------------COURSES---------------*/
.coursework {
    padding:0px;
    padding-bottom: 50px;
}
    
.coursework-title {
    font-size:30px;
    padding:40px 0;
}
    
.coursework ul {
    columns:2;
    width:95%;
    min-width:0px;
}
    
.coursework li {   
    width:100%;
    margin:auto;
    font-size:24px;
    line-height: 40px;
}
    
.symbol {
    font-size:30px;
}    
    
.coursework p {
    width:75%;
    font-size: 24px;
}
        
.portfolio {
    width:100%;
}
    
.portfolio-title {
    font-size:30px;
    padding:40px 0;
}
        
.portfoliodiv {
    width: 48%;
    margin:auto;
    float:left;
}
    
.portfolioimg {    
    height:30vw;
}
        
.portfoliotext span {
    padding:10px 20px;
    font-size:24px;
    letter-spacing: 3px;
    font-weight:normal;
}
        
.portfoliotext p {
    font-size:28px;
}
        
.overlay-content a {
    font-size:24px;
    width:200px;
    color:black;
} 
        
.overlay-content h2 {    
    font-size:30px;
    padding: 30px 0;
    font-weight: bold;
}

.overlay-content p {    
    font-size:24px;
    line-height:40px;
    padding-bottom:20px;
}

.overlay-content h3, .overlay-content h4 {   
    font-weight: bold;
    font-size:30px;
    padding:30px 0;
}

.overlay-content ul {   
    columns:2;
    font-size:24px;
    line-height:40px;
    padding-bottom:15px;
}
 
.overlay-skills li {
    width:600px;
    padding-left:0;
}

.overlay-skills ul {
    padding-left:15%;    
}    

.overlay-features li {
    width:100%;
}

.overlay-features p {
    padding-top:0;
}
    
.overlay-pages p {
    padding-top:0;
}
    
.overlay-features .adoptionh {
    width:100%;
}

.overlay-features .adoption  {
    columns:2;
} 
    
.adoption li {
    width:100%;
}    
        
.overlay-content .slider {
    font-size:24px;
    letter-spacing: 3px;
    padding-bottom:15px;
}
    
.overlay-content .answer {
    width:50%;
}
    
.slider span:nth-child(odd) {
    padding:5px 12px 8px 14px;
}
        
.overlay .closebtn {
    font-size: 100px;
}
    
.whyhire-title {
    font-size:30px;
    padding:40px 0;
}
    
.whyhire div {
    width:100%;
    margin:auto;
    padding-bottom:30px;
    clear: both;
    margin:0px;  
}
    
.whyhire img {
    width:18%;
    float:left;
    margin-left:10%;
    padding-top:20px;
}
    
.whyhire h4 {
    font-size:26px;
    font-weight:bold;
    margin-left:40%;
    width:50%;
}
     
.whyhire p {
    font-size:24px;
    line-height:40px;
    width:50%;
    margin-left:40%;
}
    
.contact {
    width:100%;
}
        
.contact-title {
    font-size:30px;
    padding:40px 0;
}
        
.mycontactinfo {
    width:100%;
    padding-top:0;
    padding-bottom:50px;
}
    
.contactsection {
    float:none;
    padding-top:0;
    width:70%;
    overflow: auto;
}
    
.mycontactinfo p {
    width:80%;
    margin:auto;
    font-size: 26px;
    padding:0px 0;
    height:70px;
    text-align: left;
}
    
.mycontactinfo p:nth-child(odd) {
    height:35px;
}
    
.mycontactinfo p:nth-child(even) {
    width:50%;
    padding: 0px 10%;
}
    
.symbol2 {
    font-size: 75px;
    float:left;
    color:teal;    
}
    
#map {
    float:none;
}
    
.map {
    width:100%;
}
    
#map {
    height: 350px;  
    width: 70%;
}

.footer p {
    padding:30px 60px;
    font-size: 24px;
    line-height:75px;
}
    

}