﻿/*** Generic  ***/
#mainContent .standardbox .contentsectionwraper {
    margin: 0 0 15px 0;
    padding: 30px 0 0 0;
    width: 100%;
}

/*** Page intro */
.pageIntroBox{
  color: #000;
  padding: 40px 40px 75px 40px;
  margin-bottom: 20px;
  border-radius:3px;
}

@media screen and (max-width: 630px) {
    .pageIntroBox{
      color: #000;
      padding: 20px 20px 20px 20px;
      margin-bottom: 20px;
      border-radius:3px;
    }
}

.pageIntroBox.noBottomGutter{
  margin-bottom:0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.pageIntroBox h2 {
  font-size: 22px;
  margin-bottom: 40px;
  text-transform: uppercase;
}
.pageIntroBox .pageIntroImage{
  float:left;
  margin-right: 40px;
}

@media screen and (max-width: 630px) {
    .pageIntroBox .pageIntroImage{
      margin-right: 0;
    }

    .pageIntroBox .pageIntroImage img {
      width: 100%;
      height: inherit;
        margin-bottom: 20px;
    }
}

.pageIntroBox .pageIntroQuote{
  float:left;
  width: 300px;
  margin: 80px 0 0 0;
}
.pageIntroBox .pageIntroQuote .quoteText{
  margin-top:8px;
  font-size:18px;
}
.pageIntroBox .textContainer{
  float:left;
  clear: both;
}
.pageIntroBox .textContainer.noQuote {
  width:100%;
  clear:none;
  float: none;
  margin-top:90px;
}
#mainContent .pageIntroBox .textContainer h3 {
  margin: 20px 0 10px;
  font-size: 22px;
  color: #32b2e3;
}
.pageIntroBox .textContainer .twoColumnText{
  margin: 0 -40px 0 0;
  font-size:13px;
}

.pageIntroBox .textContainer .twoColumnText .columns{
  padding-right: 40px;
}
.pageIntroBox .textContainer .twoColumnText .last .columns {
}
/*** Image and text box ***/
#mainContent .imageAndTextBox {
  background-color: #eee;
  padding: 40px;
  border-radius: 3px;
  color: #000;
}
#mainContent .imageAndTextBox h2{
  margin-bottom: 40px;
}
#mainContent .imageAndTextBox .leftColumn{
  float:left;
  width: 529px;
  margin: 0;
}
#mainContent .imageAndTextBox .rightColumn{
  float:right;
  width: 509px;
  margin: 0;
  padding: 50px 20px 0 0;
}

#mainContent .imageAndTextBox .rightColumn h3 {
  font-size: 22px;
  margin-bottom: 20px;
}

/*** Call to action text and buttons ***/
#mainContent .ctaTextAndButtons {
  height: 168px;
  padding: 0 40px;
  font-size: 30px;
  border-radius: 3px;
  color: #fff;
}
#mainContent .ctaTextAndButtons .outerText{
  height:168px;
  display:table;
}

@media screen and (max-width: 950px) {
    #mainContent .ctaTextAndButtons .outerText {
        display: none;
    }
}

#mainContent .ctaTextAndButtons .outerText .text {
  display:table-cell;
  vertical-align:middle;
}
#mainContent .ctaTextAndButtons .buttons{
  position:absolute;
  right:60px;
  top:65px;
}

@media screen and (max-width: 554px) {
    #mainContent .ctaTextAndButtons .buttons {
        top: 30px;
    }
}

#mainContent .ctaTextAndButtons .buttons .ctaButton {
  height: 28px;
  margin: 0 0 0 30px;
  padding: 10px 15px 4px 15px;
  width:auto;
  border-radius: 3px;
  text-transform: uppercase;
}

@media screen and (max-width: 950px) {
    #mainContent .ctaTextAndButtons .buttons .ctaButton {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 554px) {
    #mainContent .ctaTextAndButtons .buttons .ctaButton {
        font-size: 13px;
        width: 90%;
    }
}

#mainContent .ctaTextAndButtons .buttons .ctaButton .leftText {
  float: left;
}
#mainContent .ctaTextAndButtons .buttons .ctaButton.withRightText .leftText {
   margin-right: 20px;
}
#mainContent .ctaTextAndButtons .buttons .ctaButton .rightText{
  float: right;
}

/*** Call to action camera support ***/
#mainContent .cameraSupportCTA {
  background-color: #fff;
  font-size: 30px;
  border-radius: 3px;
}
#mainContent .cameraSupportCTA .top{
  padding: 70px 35px 0 35px;
}
#mainContent .cameraSupportCTA ul {
  float:left;
  margin: 20px 0 70px 0;
  list-style: none;
}
#mainContent .cameraSupportCTA ul li {
  float: left;
  margin-right: 20px;
}
#mainContent .cameraSupportCTA .bottom {
  padding: 20px 60px 20px 40px;
  background-color: #ddd;
  text-align: right;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
#mainContent .cameraSupportCTA .bottom a{
  font-size: 20px;
    color: #373737;
}
#mainContent .cameraSupportCTA .bottom a:hover{
  text-decoration: none;
}

/*** Other resources box ***/
#mainContent .standardbox .contentsectionwraper .otherresourcelink {
    display: inline-block;
    vertical-align: top;
    width: 223px;
    margin: 0 10px 0 0;
    background-color: #eee;
    color: #373737;
    text-decoration: none;
    padding: 30px 15px;
}
#mainContent .standardbox .contentsectionwraper .otherresourcelink:last-child {
    margin: 0;
}

#mainContent .standardbox .contentsectionwraper .otherresourcelink .otherresourcesimage {
    min-height: 70px;
    text-align: center;
}

#mainContent .standardbox .contentsectionwraper .otherresourcelink h2 {
    margin-top: 20px;
}

/*** Testimonial and review list ***/
#mainContent .testimonialList,
#mainContent .reviewList {
  margin-bottom:20px;
  padding: 60px 40px 75px;
  background-color: #fff;
  color:#000;
  border-radius:3px;
}
#mainContent .reviewList {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  
}
#mainContent .reviewListCTA .top {
  padding: 40px;
  border-radius: 3px 3px 0 0;
  margin-bottom: 0;
  color: #000;
}
#mainContent .reviewListCTA .top h2{
  margin-bottom: 20px;
}
#mainContent .testimonialList .testimonialListFeatureItem,
#mainContent .testimonialList .testimonialListFeatureItemAlt {
  clear: both;
  padding-bottom: 40px;
  border-bottom: solid 1px #eee;
  margin-bottom: 40px;
}
.testimonialList .textColumn {
  float:left;
  width:509px;
}
#mainContent .testimonialList .textColumn a {
  color: #000;
}
#mainContent .testimonialList .textColumn .author {
  font-size: 16px;
  margin-bottom:3px;
}
#mainContent .testimonialList .textColumn h3{
  font-size: 26px;
  margin-top:8px;
 }
#mainContent .testimonialList .textColumn h3 a {
 color: #32b2e3;
}

.testimonialList .testimonialListFeatureItem .imageColumn{
  float:right;
}
.testimonialList .testimonialListFeatureItemAlt .textColumn {
  float: right;
}
.testimonialList .testimonialListFeatureItemAlt .imageColumn {
  float: left;
}
a.swipebox-video{
  display:block;
  position:relative;
}
#mainContent span.playIcon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: url(/images/PhaseOneInternal/play-icon.png) no-repeat center center;
}

#mainContent .testimonialList .testimonials h2 {
  font-size:26px;
  text-transform: uppercase;
  margin: 60px 0 50px;
}
#mainContent .testimonialList .testimonials .testimonialListItem h3 {
  font-size: 22px;
  color:#32b2e3;
}

#mainContent .testimonialList a:hover,
#mainContent .reviewList a:hover,
#mainContent .reviewListCTA a:hover {
  text-decoration: none;
}
#mainContent .testimonialList .testimonialListItem,
#mainContent .reviewList .reviewListItem,
#mainContent .reviewListCTA .reviewListItem {
  float:left;
  width: 509px;
  margin-bottom:30px;
}
  
#mainContent .testimonialList .testimonialListItem.first,
#mainContent .reviewList .reviewListItem.first {
  margin-right: 40px;
}

#mainContent .testimonialList .testimonialListItem h3,
#mainContent .reviewList .reviewListItem h3,
#mainContent .reviewListCTA .reviewListItem h3 {
  margin-bottom: 10px;
}
#mainContent .reviewList .reviewListItem h2,
#mainContent .reviewListCTA .reviewListItem h2 {
  margin-bottom: 4px;
  font-size:16px;
  color:#000;
}
#mainContent .reviewList .reviewListItem h3,
#mainContent .reviewListCTA .reviewListItem h3 {
 font-size:22px;
}

#mainContent .testimonialList .testimonialListItem .abstract,
#mainContent .reviewList .reviewListItem .abstract,
#mainContent .reviewListCTA .reviewListItem .abstract {
  color: #000;
}
#mainContent .reviewListCTA .bottom{
  padding:25px 40px;
  
  text-align: right;
  border-radius: 0 0 3px 3px;
}
#mainContent .reviewListCTA .bottom a{
  color: #000;
  font-size:20px;
}


/*** Testimonial intro ***/
.testimonialIntro{
  background-color: #fff;
  color: #000;
  padding: 40px;
}
.testimonialIntro .leftColumn {
  width:479px;
  float:left;
}
.testimonialIntro .rightColumn {
  width: 509px;
  float:right;
}
.testimonialIntro .leftColumn .author {
  font-size:18px;
  text-transform:uppercase;
}
.testimonialIntro .leftColumn h2 {
  margin-top:12px;
  font-size:28px;
}

/*** Testimonial gallery ***/
.testimonialGallery{
  background-color:#eee;
  padding:40px;
  position: relative;
}
.testimonialGallery .leftColumn{
  float:left;
  width: 509px;
  margin:0;
}
.testimonialGallery a {
  display: block;
  margin-bottom: 40px;
  position:relative;
}
.testimonialGallery .rightColumn{
  float:right;
  width: 509px;
  margin:0;
}
.testimonialGallery img.smallImage {
  width: 509px;
}
.testimonialGallery img.enlargementIcon {
  position: absolute;
  bottom:10px;
  left:10px;
}
.testimonialGallery span.playIcon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: url(/images/PhaseOneInternal/play-icon.png) no-repeat center center;
}
.testimonialGallery a.moreLink {
  margin: 0;
  position: absolute;
  bottom: 22px;
  right: 36px;
}

/*** Testimonial content ***/
.testimonialContent {
  background-color:#fff;
  padding: 40px;
  color:#000;
}
#mainContent .testimonialContent .quote {
  display:block;
  padding-top: 32px;
  padding-left: inherit;
  background: url(/images/PhaseOneInternal/Icons/quote-black.gif) no-repeat;
  color: #029ef1;
  margin: 30px 0;
  font-size:18px;
  width: inherit;
}
#mainContent .testimonialContent .quote::before {
  content: '';
}
.testimonialContent .columns{
  /*width:480px;*/
  padding-right: 40px;
}
.testimonialContent .twoColumnText{
  margin: 25px -40px 0 0;
}
.testimonialContent .twoColumnText .last.column .columns  {
 padding-right: 40px;


}
.testimonialContent .columns .about{
  margin-top:40px;
  padding:40px;
  font-size:18px;
  background-color:#eee;
}

#mainContent .testimonialContent a {
  color: #029ef1;
}

/*** Testimonial social bar ***/
.testimonialSocialBar{
  background-color:#c8c8c8;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius:3px;
  padding: 60px 40px;
}
.testimonialSocialBar .social{
  float:left;
}

.testimonialSocialBar .social .at-share-btn{
  margin-right:10px;
}

.testimonialSocialBar .download{
  float:right;
  padding:0;
}
#mainContent .testimonialSocialBar .download a{
  color: #000;
  font-size: 24px;
}
#mainContent .testimonialSocialBar .download a:hover {
  text-decoration: none;
}

/*** Related testimonials ***/
.relatedTestimonials{
  background-color:#fff;
  border-radius:3px;
  margin:30px 0;
  padding: 40px;
  color:#000;
}
#mainContent .relatedTestimonials h2 {
  font-size:26px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
#mainContent .relatedTestimonials a {
  color: #029ef1;
}
#mainContent .relatedTestimonials a:hover {
  text-decoration: none;
}
.relatedTestimonials .testimonialListItem {
  float:left;
  width: 500px;
  margin-bottom:30px;
}
  
.relatedTestimonials .testimonialListItem.first{
  margin-right: 50px;
}
.relatedTestimonials .testimonialListItem h3 {
  margin-bottom: 4px;
  font-size: 22px;
}
.relatedTestimonials .testimonialListItem .abstract{
  color: #000;
}

.testimonialCTA{
  background-color: #fff;
  border-radius:3px;
  color: #000;
}
.testimonialCTA .testimonialCTAContent{
  padding:40px;
}

.testimonialCTA .testimonialCTAContent .testimonialCTATextColumn{
  float: left;
  width: 450px;
}

@media screen and (max-width: 630px) {
    .testimonialCTA .testimonialCTAContent {
        padding: 0 10px 0 30px;
    }

    .testimonialCTA .testimonialCTAContent .testimonialCTATextColumn{
      width: 100%;
    }
}

.testimonialCTA .testimonialCTAContent .testimonialCTATextColumn h2{
  text-transform: uppercase;
  margin-bottom: 40px;
}
#mainContent .testimonialCTA .testimonialCTAContent .testimonialCTATextColumn .author{
  font-size: 18px;
  margin-bottom:0;
}
.testimonialCTA .testimonialCTAContent .testimonialCTATextColumn h3{
  font-size: 24px;
  margin-bottom: 20px;
}
.testimonialCTA .testimonialCTAContent .testimonialCTATextColumn .abstract{
  margin-bottom: 20px;
}
.testimonialCTA .testimonialCTAContent .testimonialCTATextColumn a.testimonialLink{
  font-size: 20px;
  color: #000;
}
.testimonialCTA .testimonialCTAContent .testimonialCTATextColumn a.testimonialLink:hover {
  text-decoration: none;
}
.testimonialCTA .testimonialCTAContent .testimonialCTAImageColumn{
  float: right;
  width: 509px;
}

@media screen and (max-width: 630px) {
    .testimonialCTA .testimonialCTAContent .testimonialCTAImageColumn {
        float: left;
    }

    .testimonialCTA .testimonialCTAContent .testimonialCTAImageColumn img {
        width: 82% !important;
        height: inherit !important;
    }
}

@media screen and (max-width: 480px) {
    .testimonialCTA .testimonialCTAContent .testimonialCTAImageColumn img {
        width: 70% !important;
    }
}

@media screen and (max-width: 360px) {
    .testimonialCTA .testimonialCTAContent .testimonialCTAImageColumn img {
        width: 55% !important;
        margin: 20px 0;
    }
}

.testimonialCTA .testimonialCTAFooter{
  padding: 25px 40px;
  text-align: right;
  border-bottom-left-radius:3px;
  border-bottom-right-radius:3px;
}
.testimonialCTA .testimonialCTAFooter a {
  
  color: #000;
  font-size: 20px;
}
.testimonialCTA .testimonialCTAFooter a:hover{
  text-decoration: none;
}

#mainContent .blogbox {
    border-radius: 3px;
}

#mainContent .blogbox,
#mainContent .blogbox a {
    color: #fff;
}

.blogbox img {
    border: 0;
}

.blogbox .blogboxcontent {
    padding: 40px;
}

@media screen and (max-width: 630px) {
    .blogbox .blogboxcontent {
        padding-left: 20px;
    }
}

.blogbox .blogboxcontent h2 {
    margin: 0 0 30px 0;
    text-transform: uppercase;
}

.blogbox .blogdetails .blogevencolumn {
    display: inline-block;
    vertical-align: top;
    margin: 0 3px 0 0;
    height: 100%;
}

@media screen and (max-width: 1138px) {
    .blogbox .blogboxcontent .blogdetails .blogdetailsmiddlecolumn {
        display: none;
    }
}

@media screen and (max-width: 697px) {
    .blogbox .blogboxcontent .blogdetails .blogdetailsleftcolumn {
        display: none;
    }
}

.blogbox .blogboxcontent .blogdetails .blogdetailsleftcolumn div,
.blogbox .blogboxcontent .blogdetails .blogdetailsleftcolumn img {
    display: block;
}

.blogbox .blogboxcontent .blogdetails .blogdetailsleftcolumn .blogdetailsleftouter,
.blogbox .blogboxcontent .blogdetails .blogdetailsrightcolumn {
    background-color: #1189b7;
}

.blogbox .blogboxcontent .blogdetails .blogdetailsleftcolumn .blogdetailsleftouter {
    padding: 18px 0;
}

.blogbox .blogboxcontent .blogdetails .blogdetailsleftcolumn .blogdetailsleftouter div {
    font-size: 1.4em;
    width: 145px;
    margin: 0 20px;
}

.blogbox .blogboxcontent .blogdetails .blogdetailsmiddlecolumn img {
    max-width: 451px;
}

.blogbox .blogboxcontent .blogdetails .blogdetailsleftcolumn img {
    width: 190px;
}

.blogbox .blogboxcontent .blogdetails .blogdetailsrightcolumn {
    width: 369px;
    padding: 0 15px;
    height: 300px;
}

@media screen and (max-width: 630px) {
    .blogbox .blogboxcontent .blogdetails .blogdetailsrightcolumn {
        width: 95%;
        height: inherit;
    }
}

.blogbox .blogboxcontent .blogdetails .blogdetailsrightcolumn .blogdetailsrightcolumncontent {
    margin: 18px 0 0 0;
}

.blogbox .blogboxcontent .blogdetails .blogdetailsrightcolumn .blogdetailsrightcolumncontent span,
.blogbox .blogboxcontent .blogdetails .blogdetailsrightcolumn .blogdetailsrightcolumncontent  a {
    margin: 0 0 20px 0;
    display: block;
}

.blogbox .blogboxcontent h2, .blogbox a,
.blogbox .blogboxcontent .blogdetails .blogdetailsrightcolumn .blogdetailsrightcolumncontent .blogdetailstitle {
    font-size: 1.6em;
}

.blogbox .bottom {
    height: 26px;
    padding: 25px 45px 25px 40px;
    text-align: right;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

@media screen and (max-width: 630px) {
    .blogbox .bottom {
        padding: 20px 20px 20px 0;
        font-size: 0.85em
    }
}

.blogbox a {
    text-decoration: none;
}

.hidesectionwhensmall {
    display: inherit;
}

@media screen and (max-width: 1138px) {
    .hidesectionwhensmall {
        display: none;
    }
}