.process {
  padding: 20px 10px;
}

.process__section {
  display: none;
  padding: 20px 0 0;
  border-top: 2px solid #ddd;
}

.process__iconInput,
.process__input {
  display: none;
}

.process__tab {
  display: inline-block;
  margin: 0 0 -2px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 2px solid transparent;
  width: 50%;
  box-sizing: border-box;
}

.process__tab:hover {
  color: #888;
  cursor: pointer;
}

.process__input:checked + .process__tab  {
  color: #555;
  border: 2px solid #ddd;
  border-bottom: 2px solid #fff;
}

.process__tab--first {
  float: left;
}

#agenciesTab:checked ~ #agencies,
#brandTab:checked ~ #brand {
  display: block;
}

.process__icon {
  display: inline-block;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #aaa no-repeat center;
  background-size: contain;
  background-size: 60%;
}

.process__icon.scope {
  background-image: url('/wp-content/themes/epical/images/process/magnifying-glass.png');
}
.process__icon.creative {
  background-image: url(/wp-content/themes/epical/images/process/design-tools.png);
}
.process__icon.project {
  background-image: url(/wp-content/themes/epical/images/process/work-together.png);
}
.process__icon.design {
  background-image: url(/wp-content/themes/epical/images/process/paint-brush.png);
}
.process__icon.qa {
  background-image: url(/wp-content/themes/epical/images/process/sliders.png);
}
.process__icon.launch {
  background-image: url(/wp-content/themes/epical/images/process/rocket.png);
}
.process__icon.development {
  background-image: url(/wp-content/themes/epical/images/process/development.png);
}
.process__icon.discovery {
  background-image: url(/wp-content/themes/epical/images/process/discovery.png);
}
.process__icon.support {
  background-image: url(/wp-content/themes/epical/images/process/support.png);
}

.process__icon--mobile {
  cursor: pointer;
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
}

.process__icon--desktop {
  cursor: pointer;
  display: none;
}

.process__icon--mobile:hover,
.process__icon--desktop:hover {
  background-color: #bbb;
}

#scopeIcon:checked ~ #scope,
#creativeIcon:checked ~ #creative,
#projectIcon:checked ~ #project,
#designIcon:checked ~ #design,
#qaIcon:checked ~ #qa ,
#launchIcon:checked ~ #launch,
#brandDiscoveryIcon:checked ~ #brandDiscovery,
#brandDevelopmentIcon:checked ~ #brandDevelopment,
#brandQaIcon:checked ~ #brandQa,
#brandLaunchIcon:checked ~ #brandLaunch,
#brandSupportIcon:checked ~ #brandSupport
{
  display: flex;
}

.process__iconInput:checked ~ .process__details  {
  display: block;
}

.process__iconInput:checked + .process__icon  {
  background-color: #222;
}

.process__item {
  display: flex;
  margin: 30px 0px;
  align-items: center;
  flex-direction: column;
}

.process__details {
  display: none;
  flex: 1;
  margin: 0px 15px;
  text-align: center;
}

.process__container {
  margin: 20px 0px;
}

@media only screen and (min-width: 768px) {
  .process {
    padding: 20px 0px;
  }

  .process__details {
    display: block;
  }

  .process__icon--mobile {
    display: none;
  }

  .process__icons {
    display: flex;
    justify-content: space-between;
  }

  .process__item {
    display: none;
  }

  .process__icon--desktop {
    display: inline-block;
    margin: 0px 7.7px;
  }

  .process__section--brand .process__icon--desktop {
    margin: 20px 21.5px;
  }

  .process__icon--desktop:first-of-type {
    margin-left: 0px;
  }

  .process__icon--desktop:last-of-type {
    margin-right: 0px;
  }
}

@media only screen and (min-width: 960px) {
  .process {
    padding: 20px;
  }

  .process__icon--desktop {
    margin: 20px 33.7px;
  }

  .process__section--brand .process__icon--desktop {
    margin: 20px 54px;
  }

  .process__icon--desktop:first-of-type {
    margin-left: 0px;
  }

  .process__icon--desktop:last-of-type {
    margin-right: 0px;
  }
}