@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

@import url('https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css');



*, *:before, *:after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html, body {

  height: 100%;

}





h1 {

  padding: 50px 0;

  font-weight: 400;

  text-align: center;

}



p {

  margin: 0 0 20px;

  line-height: 1.5;

}



.tabs {

     min-width: 320px;

    max-width: 1000px;

    padding: 10px 50px;

    margin: 0 auto;

    background: #fff;

    font: 14px/1 'Open Sans', sans-serif;

    color: #555;

}



.tabs section {

  display: none;

  padding: 20px 0 0;

  border-top: 1px solid #ddd;

}



.tabs .hide {

  display: none;

}



.tabs .label {

  display: inline-block;

  margin: 0 0 -1px;

  padding: 15px 25px;

  font-weight: 600;

  font-size: 14px !important;

  text-align: center;

  color: #bbb;

  border: 1px solid transparent;

}



.tabs .label:before {

  font-family: fontawesome;

  font-weight: normal;

  margin-right: 10px;

}

/*

.tabs label[for*='1']:before { content: '\f1cb'; }

.tabs label[for*='2']:before { content: '\f17d'; }

.tabs label[for*='3']:before { content: '\f16b'; }

.tabs label[for*='4']:before { content: '\f1a9'; }

*/

.tabs .label:hover {

  color: #888;

  cursor: pointer;

}



.tabs input:checked + label {

  color: #555;

  border: 1px solid #ddd;

  border-top: 2px solid orange;

  border-bottom: 1px solid #fff;

}



#tab1:checked ~ #content1,

#tab2:checked ~ #content2,

#tab3:checked ~ #content3,

#tab4:checked ~ #content4 {

  display: block;

}



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

  .tabs .label {

    font-size: 0;

  }

  .tabs .label:before {

    margin: 0;

    font-size: 18px;

  }

}



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

  .tabs .label {

    padding: 15px;

  }

}