h2.skills_h2 {
    width: 60%;
    margin: 2% auto 1% auto;
    font-size: 1.2em;  
}


.center_content_skills {
    margin: 1% auto 0 auto;
    width: 60%;
    height: auto;
    position: relative;
    border: 1px solid grey;
}

.skills_divider1 {
	padding: 1.5% 4%;
  width: 50%;
  height: 50%;
  float: left; 
  border-right: 1px solid grey; 
}

.skills_divider2 {
  padding: 2.5% 4%;
  width: 50%;
  height: 50%;
  float: left;
}

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

.skills_divider3 {
  padding: 1.5% 4%;
  border-right: 1px solid grey;
  width: 50%;
  height: 50%;
  float: left; 
}

.skills_divider4 {
  padding: 2.5% 4%;
  width: 50%;
  height: 50%;
  float: left; 
}

.hline {
  border-bottom: 1px solid grey;
  width: 100%;
}

.container {
  width: 100%;
  background-color: rgba(170,170,170,0.7);
  margin-bottom: 3%;
}

.skills {
  text-align: right;
  padding-right: 20px;
  line-height: 15px;
  color: #000;
}

.ps {width: 90%; background-color: #ddd;}
.an {width: 85%; background-color: #ddd;}
.pr {width: 85%; background-color: #ddd;}
.ai {width: 65%; background-color: #ddd;}
.id {width: 65%; background-color: #ddd;}

.html {width: 90%; background-color: #ddd;}
.css {width: 85%; background-color: #ddd;}
.php {width: 80%; background-color: #ddd;}
.jquery {width: 75%; background-color: #ddd;}
.js {width: 60%; background-color: #ddd;}

.materialize {width: 90%; background-color: #ddd;}
.wp {width: 85%; background-color: #ddd;}
.testagram {width: 65%; background-color: #ddd;}
.bootstrap {width: 65%; background-color: #ddd;}


/*========= tablet and mobile ==========*/

@media only screen and (max-width: 1200px) {
    
    .skills_divider2 p {
      font-size: 0.8em; 
    }
}


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

    h2.skills_h2 {
        width: 96%;
        margin: 6% auto 0 auto;   
    }
    
    .center_content_skills {
        padding: 1%;
        width: 96%;
    }

    .skills_divider1 {
      padding: 3%;
      width: 50%;
      min-height: 50%;
      float: left; 
      border-right: 1px solid grey; 
    }

    .skills_divider3 {
      padding: 3%;
      border-right: 1px solid grey;
      min-width: 50%;
      height: 50%;
      float: left; 
    }

    .skills_divider2 p {
      font-size: 0.7em; 
    }
}


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

    .center_content_skills {
        margin: 1% auto 0 auto;
        width: 100%;
        height: auto;
        position: relative;
        border: none  
    }
    
    .skills_divider1 {
      padding: 3%;
      width: 100%;
      min-height: 50%;
      float: none; 
      border: 1px solid grey;
      margin-bottom: 5%; 
    }

    .skills_divider2 {
      padding: 3%;
      width: 100%;
      height: 100%;
      float: none;
      border: 1px solid grey; 
      margin-bottom: 5%; 
    }

    .skills_divider3 {
      padding: 3%;
      width: 100%;
      min-height: 50%;
      float: none; 
      border: 1px solid grey; 
      margin-bottom: 5%;   
    }

    .skills_divider4 {
      padding: 3%;
      width: 100%;
      height: 100%;
      float: none;
      border: 1px solid grey;
      margin-bottom: 5%;   
    }

    .hline {
      display: none;
    }

}