@media screen and (min-width: 601px) {
  .tool-form{
    max-width: 1200px;
    width: 90%;
    margin: 30px auto 55px auto !important;

  }

  #page-text-result{

    box-sizing: border-box;
    width: 100%;
    border: 1px #adadad solid;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 10px;

  }

  #results-heading{

    width: 100%;
    margin-left: auto;
    margin-right: auto;

  }
}

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

  #page-text-result{

    box-sizing: border-box;
    width: 100%;
    border: 1px #adadad solid;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 10px;

  }

  #results-heading{

    width: 100%;
    margin-left: auto;
    margin-right: auto;

  }
}

.button-container{

  text-align: center;
  width: 100%;
  margin: auto;

}

#results-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2em;
  overflow-wrap: break-word;

}

#google-meta-preview{

  min-width: 700px;
  border: 1px #adadad solid;
  border-radius: 8px;
  min-height: 180px;
}

#google-meta-preview-mobile{
  
  min-width: 460px;
  border: 1px #adadad solid;
  border-radius: 8px;  
  min-height: 180px;

}

#google-meta-preview > h3, #google-meta-preview-mobile > h3{

  font-family: "dunbar-text", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: orange;
  margin: 0;
  padding: 0.5em 1em;
  color: #f36d21;

}

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

  #google-meta-preview, #google-meta-preview-mobile{

    min-width: unset;
    width: 100% !important;
    border: 1px #adadad solid;
    border-radius: 8px;
    
  }

  #google-meta-preview{
    margin-bottom: 35px;
  }

}

@media screen and (min-width: 601px) {

  /*#google-meta-preview, #google-meta-preview-mobile{

    width: 100%;
    border: 1px #adadad solid;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    min-height: 10em;
    margin-top: 25px;
    margin-bottom: 35px;

  }*/

  div.resultHeading{

    width: 33%;
    float: left;
    font-weight: bold;
    font-size: 18px;
    color: #000;
    margin-top: 15px;

  }

  div.resultData, #phrases-container{

    width: 66%;
    float: left;
    font-size: 18px;

  }

  div.resultData{
    margin-top: 15px;
  }

  div#two-word-phrases-container, div#three-word-phrases-container{

    width:49%;
    float: left;

  }

  div#two-word-phrases-container{

    margin-right: 2%;
  }

  div.resultData.twoWordPhrases, div.resultHeading.twoWordPhrases{

    margin-right: 2%;

  }

  div.resultHeading.twoWordPhrases, div.resultHeading.threeWordPhrases{

    width: 100%;
    color: #f16e24 !important;    

  }

  div.resultData.twoWordPhrases, div.resultData.threeWordPhrases{

    width: 100%;

  }
}

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

  div.resultHeading{

    width: 100%;
    float: left;
    font-weight: bold;
    font-size: 18px;
    color: #000;
    margin-top: 15px;

  }

  div.resultData, #phrases-container{

    width: 100%;
    float: left;
    font-size: 18px;

  }

  div.resultData.twoWordPhrases, div.resultData.threeWordPhrases{

    width:100%;

  }

  div.resultHeading.twoWordPhrases, div.resultHeading.threeWordPhrases{

    width: 100%;
    color: #f16e24 !important;

  }

}

div.phrase-item:nth-child(even){

  background-color: #f1f1f1;

}

.error-item{

  color: red;
  float: none !important;
  background-image: url('/seo-tools/search-engine-simulator/images/error.png');
  background-repeat: no-repeat;
  background-size:contain;
  padding-left: 25px;
}

.resultHeading span{

  float: right;
  width: 20%;
  text-align: center;
}

div.resultData span{

  float: right;
  width: 20%;
  text-align: center;
}

.result-icon{
  width: 34px;
  padding-right: 10px;
}

.success{
  color: #008f51;
}

.failure{

  color: #ff0000;
}

#place-holder, #place-holder-mobile{
  margin: auto;
  text-align: center;
  font-family: dunbar-text,sans-serif;
  padding-top: 30px;
}

div.tool-form label {
  font-weight: bold;
}

#resultDescription, #resultDescription-mobile {
  white-space: pre-wrap;      /* CSS3 */
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: -pre-wrap;     /* Opera <7 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  word-wrap: break-word;      /* IE */
}

.ui--image.google-explanation {
    max-width: 70% !important;
}

/* CTA styles */

#cta-wrapper{
  font-family: dunbar-text,sans-serif;
  background-color: #f2af22;
  padding-top: 1em;


}

#cta-content{
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: center;

}

#cta-image{

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-basis: 35%;

}

#cta-image img{
  max-width: 100%;
  height: auto;
  width: auto;

}

#cta-text{

  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: center;
  max-width:600px;
  flex-basis: 65%;
  padding: 0 0 2em 2em;
  color: #fff;

}

#cta-text h1{
  margin: 0;
  padding-bottom: 0.25em;
  padding-top: 1em;
  font-size: 48px;
  line-height: 1.2em !important;
  color: #fff !important;
  font-weight: 600 !important;
}

#cta-text a{
  display: inline-block;
  transition: background-color 0.25s, border 1s;
  padding: 0.50em 2.25em;
  border: 2px #000 solid;
  color: #000 !important;
  text-decoration: none;
  margin-top: 1.0em;
  font-weight:600;

}

#cta-text a:hover{
  transition: background-color 0.25s, border 1s;

  border: 2px #fff solid;
  background-color: #fff;
}


#cta-heading-small h1{

  color: #fff !important;
  font-weight: 600 !important;
  padding: 0 1em;
}

#cta-heading-small{
  display:none;
  color: #fff !important;
  padding-top:1em;
}


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

  #cta-text h1{
    font-size: calc(2.5vw);

  }

}

@media screen and (max-width: 900px){
  #result, #result-mobile{
    padding: 1.0em 20px 0 20px !important;
  }
}

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

  #cta-content{
    width:90%;
  }

  #cta-text h1{
    font-size: calc(3.5vw);

  }

  #cta-heading-small{
    font-size: calc(2.5vw);
    color: #fff;
    width: 100%;
    display: block;
    text-align: center;
    display: block;
    padding-top: 1em;
  }

  #cta-text h1{
    display:none;

  }
}


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

  #cta-image{
    flex-basis: 45%
  }

  #cta-text{

    flex-basis: 55%
  }

}

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

  #cta-text h1{
    font-weight: 400;
    font-size: calc(4.5vw);
    line-height: 1.3em;
  }

}