/** MOBILE FIRST RESPONSIVE **/

/** HEADER **/

.jumbotron {
  background:url("../img/desk-image.jpg") no-repeat center top;
  background-size: cover;
  margin-top: 0%;
}

/*** nav section ***/

.color-accent {
  color:#ff0000;
}

#menu-container {
  list-style: none;
  margin: 2% 6%;
  font-family: 'Playfair Display', serif;
  font-size: 1em;
}

#menu-container li {
  display: inline;
  padding:1%;
}

#menu-container li a {
  color:#ffffff;
}

#menu-container li a:hover{
  color:#ff0066;
  text-decoration:underline;
}

/*** end of nav section ***/

/*** header banner ***/

#header-logo {
    margin:6% 2%;
    width:95%;
  }

.sub-header {
  color:#ffffff;
  font-family: 'Playfair Display', serif;
  font-size: 1em;
  margin:2% 0%;
  text-align:center;
 }

.color-font {
 color:#ff0000;
 font-family: 'Nothing You Could Do', cursive;
 font-size: 1.5em;
 }

 /*** end of header banner ***/
/*** END OF HEADER **/

/** SERVICES **/

#services-intro {
  font-family: 'Playfair Display', serif;
  text-align: center;
  margin: 0% 2%;
  width:98%;
}

#services-intro h3 {
  font-size: 2em;
}

#services-intro p {
  font-size: 1em;
}

.capital-accent {
  color:#ff0000;
  font-size:2em;
}

#services-script {
  font-family: 'Playfair Display', serif;
  text-align: center;
  width:98%;
}

#services-script h4 {
  font-size: 1.5em;
}

#icon-1, #email-icon, #books-icon {
  margin:0% 38%;
  width:25%;
}

#services-script p {
  font-size: 1em;
  padding:2%;
}

#port {
  cursor:pointer;
  font-family:'Nothing You Could Do', cursive;
  font-size: 2em;
  margin: 4% 8%;
}

/*** END OF SERVICES ***/

/*** ABOUT ME ***/

#about {
  background-color: #ff9999;
}

#aboutme-pic {
  border:1px solid #000000;
  margin-top:30%;
  width:100%;
}

#about-script {
  font-family: 'Playfair Display', serif;
  float:left;
}

#about-script h2 {
  font-size: 2em;
}

#about-script p {
  font-size: .9em;
  float:left;
  width:100%;
  margin-left:-2%;
}



/*** END OF ABOUT ME ***/

/*** CONTACT SECTION ***/

#contact {
  background-color:#cccccc;
  border-top: 1px solid #000000;
  text-align: center;
}

#contact-script {
  font-family: 'Playfair Display', serif;
}

#contact-script h2 {
  font-size:2em;
}

#contact-script p {
  font-size: 1em;
}

#contact-form {
  font-family: 'Playfair Display', serif;
  font-size: 1em;
  padding:4%;
}

textarea {
  border:1px solid #000000;
  width:65%;
}

input {
  background-color:#ff9999;
  border:1px solid #000000;
}

/**FOOTER AREA **/

  footer {
    background-color:#ff8080;
  }

  #social-media {
    border-top:1px solid #000000;
  }

  .icon-menu {
    list-style:none;
    margin-left:25%;
 }

 .icon-menu li {
   display:inline;
  }


 #github, #facebook, #linkedin {
  width:15%;
  float:left;
  padding:1%;
 }


  #copyright {
    margin-left:20%;
  }

  #sketchme {
    border:1px solid #000000;
    border-radius:100%;
    width:5%;
    float:left;
  }

  #copyright p {
    font-family: 'Nothing You Could Do', cursive;
    float:left;
    margin-left: 1%;
  }

/**END OF FOOTER AREA **/

/** END OF CONTACTS ***/

/********PORTFOLIO ************/

/*** header area ****/

#port-logo {
  width:98%;
  margin: 0% 2%;
}

#black-logo {
  width:95%;
}

.project-menu {
  background-color:#ff9999;
  border: 1px solid #000000;
  list-style:none;
  font-family: 'Playfair Display', serif;
  font-size: 1.25em;
  margin:2% 10%;
}

.project-menu li {
  display:inline;
  padding:4%;
}

.project-menu li a {
  color:#000000;
  cursor: pointer;
  text-decoration-color: #ff0000;
}

/*** main area ***/

#project1 {
  font-family: 'Playfair Display', serif;
  font-size: 1em;
  margin:0% 0%;
  padding:3% 0%;
  text-align: center;
  width:90%;
  margin:0% 4%;
}

#project1 a {
  text-decoration-color: #ff0000;
  color:#000000;
}

#crud1 {
  width:50%;
}

#project2 {
  font-family: 'Playfair Display', serif;
  font-size: 1em;
  padding:3% 0%;
  text-align: center;
  width:90%;
  margin:0% 4%;
}

#project2 a {
  text-decoration-color:#ff0000;
  color:#000000;
}

#rotoflow {
  width:92%
}

#project3 {
  font-family: 'Playfair Display', serif;
  font-size: 1em;
  padding:3% 0%;
  text-align: center;
  width:90%;
  margin:0% 4%;
}

#project3 a {
  text-decoration-color: #ff0000;
  color:#000000;
}

#skillsbox {
  width:65%;
  background-color:#ebebeb;
  margin-left:18%;
}

#skillsbox h2 {
  font-family:'Playfair Display', serif;
  text-align: center;
  font-size:1.5em;
  text-decoration: underline;
  text-decoration-color: #ff0000;
}

.skill-set {
  list-style: none;
}

.skill-set li img {
  display:inline;
}

#html, #css, #bootstrap, #javascript, #xd {
  width:20%;
  float:left;
  margin:2% 4%;
}

#bootstrap {
  width:50%;
  margin-left:-12%;
}

#xd {
  margin-left:-8%;
  margin-top:8%;
}

#figma {
  width:10%;
  margin-top:35%;
  margin-left:-18%;
}

#project4, #project5, #project6 {
  font-family: 'Playfair Display', serif;
  font-size: 1em;
  text-align: center;
  width:90%;
  margin:0% 4%;
}

#project4 a, #project5 a, #project6 a {
  text-decoration-color: #ff0000;
  color:#000000;
}

#b12-title {
  font-family: 'Playfair Display', serif;
  text-align: center;
}

#project7, #project8, #project9, #project10 {
  font-family: 'Playfair Display', serif;
  font-size: 1em;
  text-align: center;
  width:90%;
  margin:0% 4%;
}


#project7 a, #project8 a, #project9 a, #project10 a {
  text-decoration-color: #ff0000;
  color:#000000;
}

#codewoke {
  margin:4% 4%;
}




/********END OF PORTFOLIO *****/


/*** BIG SMARTPHONES/SMALL TABLETS ***/


@media only screen and (min-width:501px) and (max-width:767px) {
  #menu-container {
    font-size:1.25em;
    margin:2% 6%;
  }

  #header-logo {
    margin:6% 3%;
    width:90%;
  }

  .sub-header {
    margin-left:-5%;
  }

  #port {
    margin:4% 18%;
  }


/*** About Me ***/

  #aboutme-pic {
    margin-top:15%;
    width:80%;
  }

  #about-script p {
    font-size: 1em;
  }

  .icon-menu {
    margin-left:30%;
  }

 .icon-menu li {
   margin:0% -12%;
  }

  /*** portfolio area ***/
  .project-menu {
    margin:2% 20%;
  }

  /***Contacts/footer area ***/

   #copyright {
    margin-left:25%;
    padding:2%;
  }

  #copyright p {
    font-size: 1.25em;
  }

}

/*** TABLETS/SMALL LAPTOPS ***/
@media only screen and (max-width:900px) and (min-width:768px) {

  #menu-container {
   font-size:2em;
  }

  #header-logo {
    width:80%;
    margin:7% 7%;
  }

  .sub-header {
    font-size: 1.5em;
    margin-left:-14%;
  }

  /***services***/

  #services-script {
    width:30%;
    margin: 1% 1%;
  }

  #port {
    margin:4% 30%;
  }

/*** About Me ***/

 #aboutme-pic {
    margin-top:5%;
    width:70%;
  }

  #about-script p {
    font-size: 1.25em;
  }

  textarea {
  width:60%;
 }


 /*** contact area ***/

 .icon-menu {
    margin-left:30%;
  }


 #github, #facebook, #linkedin {
  width:15%;
 }

 #sketchme {
    width:4%;
 }

 #copyright {
  margin-left: 30%;
 }

 #copyright p {
  font-size:1.25em;
 }


/*** PORTFOLIO AREA ***/

  .project-menu {
    margin:2% 30%;
  }

  #black-logo {
    width:75%;
    margin:0% 10%;
  }

  #html, #css, #javascript, #xd  {
    width:15%;
  }

  #bootstrap {
    width:40%;
    margin-left:-12%;
    margin-top:-1%;
  }
  
  #figma {
    width:8%;
    margin-top:5%;
    margin-left:2%;
    
  }
  
  #xd {
    margin-left:-10%; 
    margin-top:4%;
  }

}

/*** LAPTOPS ***/
@media only screen and (min-width: 901px) and (max-width:1200px) {
#menu-container {
  font-size:1.5em;
  margin:-5% 20%;
  padding:5%;
}

#header-logo {
  width:65%;
  margin:4% 14%;
  }

  .sub-header {
    font-size: 1.5em;
    margin-top: 2%;
    margin-left:-10%;
  }

  /***services***/

  #services-script {
    width:30%;
    margin: 1% 1%;
  }

  #port {
    margin:4% 32%;
  }

  /*** About Me ***/
  #aboutme-pic {
    margin-top:1%;
    width:50%;
  }


  #about-script p, h2{
    font-size: 1.25em;
    margin-left:-10%;
  }

  /** contact area **/

  #contact-script h2 {
    margin-left:1%;
  }

 .icon-menu {
    margin-left:34%;
  }

 #github, #facebook, #linkedin {
  width:10%;
 }

 #sketchme {
    width:4%;
 }

 #copyright {
  margin-left:30%;
 }

 #copyright p {
  font-size:1.30em;
 }




/*** PORTFOLIO AREA ***/

#port-logo {
  width:38%;
  margin: 2% -2%;
  float: left;
}

.project-menu {
  margin-left:16%;
  width:70%;
}

.project-menu li {
  padding:4%;
  margin-left:-6%;
}

#second {
  margin-top:-60%;
}

#project1, #project2, #project3 {
  width:18%;
  margin-left:1%;
  margin-top: -24%;
  padding:2% 2%;
  font-size: .9em;
}

#skillsbox {
  width:25%;
  margin-top:2%;
  margin-left:5%;
  clear:both;
}

#skillsbox h2 {
  font-size: 1.5em;
}

.skill-set li img {
  display:inline;
}

#html, #css, #javascript, #xd  {
  width:32%;
}

#bootstrap {
  width:65%;
  margin-left:-12%;
}

#figma {
  width:15%;
  margin-top:-6%;
  margin-left:12%;
  
}

#xd {
  margin-left:2%; 
  margin-top:-8%;
}


#third {
  margin-top:-40%;
}

#project4 {
  width:18%;
  font-size:.9em;
  margin-left:4%;
  margin-top: -2%;
}

#project5 {
  width:18%;
  font-size:.9em;
  margin-left:-1%;
}

#project6 {
  width:18%;
  font-size:.9em;
  margin-left:-3%;
}

#replication, #newsletter, #template {
  width:90%;

}

#project7, #project8, #project9, #project10 {
  width:16%;
  font-size: .9em;
  padding:0% 1%;
  margin-top: 2%;
}





}


/*** DESKTOPS***/

@media only screen and (min-width:1201px) and (max-width:1500px) {

#menu-container {
  font-size:1.75em;
  margin:-5% 26%;
  padding:5%;
}

#header-logo {
  width:55%;
  margin:6% 20%;
  }

.sub-header {
  font-size: 1.75em;
  margin-top: 4%;
  margin-left:-10%;
  }

/***services***/

  #services-script {
    width:30%;
    margin: 1% 1%;
  }

  #services-intro p {
    font-size: 1.5em;
    padding:2%;
  }

  #services-script p {
  font-size: 1.5em;
}

  #port {
    margin:4% 34%;
  }

/*** About Me ***/
  #aboutme-pic {
    margin-top:0%;
    width:60%;
  }

  #about-script p {
    font-size: 1.5em;
  }

/***Contacts area ***/

.icon-menu {
    margin-left:38%;
  }

 #github, #facebook, #linkedin {
  width:8%;
 }

 #sketchme {
  width:3%;
 }

 #copyright {
  margin-left:34%;
 }

 #copyright p {
  font-size:1.50em;
 }




  /*** PORTFOLIO AREA ***/

#port-logo {
  width:40%;
  margin: 2% -2%;
}

.project-menu {
  margin:0% 16%;
  font-size: 1.5em;
}

#second {
  margin-top:-40%;
}

#project1, #project2, #project3 {
  width:16%;
  margin-left: 3%;
  margin-top: -20%;
  padding:1% 1%;
  font-size:1em;
}

#skillsbox {
  width:25%;
  margin-top: 2%;
  margin-left:5%;
  clear:both;
}

#skillsbox h2 {
  font-size: 1.75em;
  margin-left: -8%;
}

.skill-set li img {
  display:inline;
}

#html, #css, #javascript, #xd {
  width:20%;
}

#bootstrap {
  width:50%;
  margin-left:-15%;
}

#figma {
  width:10%;
  margin-top:35%;
  margin-left:-20%;
}

#xd {
  margin-left:-12%; 
  margin-top:8%;
}

#third {
  margin-top:-38%;
}

#project4 {
  width:18%;
  font-size:1em;
  margin-left:3%;
  margin-top: -1%;
}

#project5 {
  width:18%;
  font-size:1em;
  margin-left:-1%;
}

#project6 {
  width:18%;
  font-size:1em;
  margin-left:-1%;
  margin-top:-1%;
}

#replication, #newsletter, #template {
  width:90%;
 }


#project7, #project8,#project9, #project10 {
  width:16%;
  font-size: 1em;
  padding:0% 0%;
  margin-top:2%;
}

#codewoke {
  margin-left:-4%;
 }


}

/** LARGE DESKTOPS **/
@media only screen and (min-width:1501px) {

#header-logo {
  width:65%;
  margin:4% 14%;
}

#menu-container {
  font-size:1.75em;
  margin:-5% 28%;
  padding:5%;
}

.sub-header {
  font-size: 2em;
  margin-top: 2%;
  margin-left:0%;
}

#services-script {
    width:30%;
    margin-left:2%;
}

#services-script p {
  font-size: 1.5em;
}

#services-intro p {
  font-size: 1.5em;
  padding:2%;
}

#services-intro h3 {
  font-size: 2.75em;
}

#port{
  margin:4% 38%;
}

#aboutme-pic {
    margin-top:0%;
    width:60%;
  }

#about-script h2 {
  font-size: 3em;
}

#about-script p {
 font-size: 1.75em;
}

.icon-menu {
  margin-left:40%;
}

 #github, #facebook, #linkedin {
  width:8%;
 }

 #sketchme {
  width:3%;
 }

 #copyright {
  margin-left:38%;
 }

 #copyright p {
  font-size:1.50em;
 }

/** Portfolio Area **/

#port-logo {
  width:34%;
  margin: 2% -2%;
  float: left;
}

.project-menu {
  margin-left:16%;
  width:70%;
}

.project-menu li {
  padding:4%;
  margin-left:4%;
}

#second {
  margin-top:-40%;
}

#project1, #project2, #project3 {
  width:14%;
  margin-left:2%;
  margin-top: -20%;
  padding:2% 2%;
  font-size:1em;
}

#skillsbox {
  width:20%;
  margin-top: 2%;
  margin-left:4%;
  clear:both;
}

#skillsbox h2 {
  font-size: 1.75em;
  margin-left: -8%;
}

.skill-set li img {
  display:inline;
}

#html, #css, #javascript, #xd {
  width:30%;
}

#bootstrap {
  width:70%;
  margin-top:-3%;
}

#xd {
  margin-left:4%;
  margin-top:-2%;
}

#figma {
  width:12%;
  margin-top:1%;
  margin-left:20%;
}

#third {
  margin-top:-20%;
  margin-left:2%;
}

#project4 {
  width:14%;
  font-size:1em;
  margin-left:-38%;
  margin-top:6%;
}

#project5 {
  width:14%;
  font-size:1em;
  margin-left:-15%;
  margin-top:7%;
}

#project6 {
  width:14%;
  font-size:1em;
  margin-left:0%;
  margin-top:8%;
}

#replication, #newsletter, #template {
  width:85%;
 }

 #project7, #project8,#project9, #project10 {
  width:14%;
  font-size: 1em;
  padding:0% 0%;
  margin-top:1%;
}

#codewoke {
  margin-left:-4%;
 }

}