/* Default styles apply when width > 991px. Content is fixed width and centered. */

/**** Primary Responsive point ****/
/* Screen is still desktop size, but thinner than the fixed width of the default styles so we switch to % based sizing.
   2-column styles display columns as stacked, thin-columns and 3-columns display normally. */

@media screen and (max-width: 991px) {
    #header {
        width: initial;
        width: auto;
    }

    #secondary-nav {
        display: none;
    }

    #secondary-nav-icons {
        display: block;
        float: right;
        margin: 20px 20px 0 0;
    }

    #secondary-nav-icons li {
        display: inline-block;
        margin-left: 5px;
    }

    #main-logo {
        padding-left: 20px;
    }

    #mini-text {
        width: 90%;
        line-height: 1.1;
        display: inline-block;
        vertical-align: middle;
    }

    #mini-banner {
        display: none;
    }

    .banner-content {
        width: initial;
        width: auto;
    }

    .banner-content .tagline {
        display: block;
        float: none;
        margin: auto;
        width: 60%;
        padding: 50px 0 30px 0;
    }

    .banner-content .tagline h1 {
        font-size: 4em;
    }

    .banner-content .tagline h2 {
        font-size: 2.0em;
    }

    .row {
        width: auto;
        width: initial;
    }

    .row h2 {
        line-height: 30px;
    }

    .page-center {
        width: 95%;
    }

    .page-intro {
        width: 90%
    }

    .page-intro .column-two {
        padding-top: 0;
        width: 100%;
        text-align: center;
    }

    .segment {
        padding: 10px 0;
        display: block;
    }

    .segment p {
        margin-left: auto;
        margin-right: auto;
    }

    .segment-overview p {
        width: 100%;
    }

    .segment-areas {
        margin-left: 0;
    }

    .segment-areas .area {
        padding: 20px 0;
        display: block;
    }

    .row.securities h2 {
        font-size: 30px;
    }

    .image-panel .content .customer-quote {
        font-size: 22px;
        line-height: 35px;
        padding-bottom: 25px;
    }

    .quiz-wrapper {
         padding: 0 20px;
    }

    .quiz-wrapper p {
        margin: 20px;
        font-size: 18px;
        line-height: 22px;
    }

/* todo: remove when CORP-3402 goes live */
    #paragraph1, #paragraph2 {
        width: 100%;
    }

    .two-column .column-one {
        width: 100%;
        padding-right: 0;
    }

    .two-column .column-one .video img {
        padding: 20px 0;
    }

    .wide-only {
        display: none;
    }

    #compliance {
        padding-top: 0;
    }

    #compliance .two-column .column-one {
        display: none;
    }

    #compliance .two-column .column-two {
        display: block;
        width: 100%;
    }

    #oba-disclosure .two-column .column {
        display: block;
        width: 100%;
    }

    #oba-disclosure .two-column .column-one {
        width: 100%;
    }

    #card-1, #card-2, #card-3 {
        padding: 20px 0 0 10px;
    }

    #oba-disclosure #oba-video .column-one {
        margin-left: auto;
        margin-right: auto;
        float: none;
        width: 407px;
    }

     #oba-disclosure #oba-video .column-two img {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    #oba-video ol {
        width: initial;
    }

    #oba-disclosure #video-row-lg {
        display: none;
    }

    #video-row-sm {
        display: block;
        padding-bottom: 0;
    }

    #streamlined-row-sm {
        display: block;
    }

    #streamlined-row-lg {
        display: none;
    }

    .landing-page-columns .column {
        display: block;
        width: 100%;
    }

    .row-sm {
        display: block;
    }

    .row-lg {
        display: none;
    }

    .featured-description {
        margin-left: auto;
        margin-right: auto;
        float: none;
        width: 440px;
    }

    .featured-description h2 {
        text-align: center;
    }

    .featured-slide img {
        float: none;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .featured-video img {
        float: none;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .featured {
        margin-bottom: 40px;
    }

    .video-caption {
        margin-left: auto;
        margin-right: auto;
        float: none;
        width: 440px;
    }

    .video-caption h2 {
        text-align: center;
    }

    .about-video {
        width: 430px;
    }

    .resource .button-wrapper {
        width: 170px;
    }

    .webinars {
        padding: 15px 20px;
    }


    .past-webinars {
        padding-top: 40px;
    }

    .resource-categories {
        padding: 15px 20px;
    }

    .resource-categories .resource {
        width: 100%;
    }

    .partners-slider h2 {
        text-align: center;
    }

    .success-stories {
        text-align: center;
    }

    .success-stories .quote {
        float: none;
        margin: 0 auto;
        width: 400px;
        display: block;

    }

    .success-stories .quote p {
       padding: 0px 0px 40px 0px;
       margin: 0;
    }

    .success-stories .quote span {
        float: none;
        padding: 0;
    }

    .default-banner .page-heading {
        margin-left: 0;
        left: 0;
        width: 100%;
        position: initial;
    }

    .default-banner .page-heading h1 {
        margin-left: 0;
        left: 0;
        padding-left: 20px;
    }

    .page-heading {
        margin-left: 20px;
        width: 100%;
    }

    .product-overview p {
        width: 100%;
    }

    #premium-img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .product-actions {
        padding: 0 20px;
    }

    .product-resources .resource {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    .product-quote p {
        margin-bottom: 10px;
    }


    .product-resources .last {
        padding-top: 40px;
    }

    .product-quote span {
        text-align: left;
    }

    .action {
        float: none;
        padding-bottom: 30px;
        margin-right: auto;
        margin-left: auto;
        padding-right: 0;
    }

    .action .demo-button-caption {
        margin-bottom: 0;
    }

    .demo {
        padding-top: 30px;
    }

    .download h3 {
        padding-left: 0;
    }

    .download-preview {
        padding-left: 20px;
    }

    table {
        width: 100%;
    }

    .resource-library .resource .overlay {
        display: none;
    }

    .blog {
        padding: 20px 0;
        float: none;
        width: 100%;
    }

    .category hr {
        max-width: 780px;
    }

    .category select {
        display: block;
    }

    #banner h1 {
        font-size: 4.8em;
    }

    #banner h2 {
        font-size: 2.5em;
    }

    .post-preview, .post {
        max-width: 780px;
        width: 100%;
    }

    #sic #sic-sidebar {
        display: none;
    }

    img.state-img {
        display: none;
    }

    #blog-sidebar {
        display: none;
    }

    #content {
        width: 100%;
    }

    .help .sidebar {
        width: auto;
        height: auto;
        background: none;
        float: none;
        margin: 0;
    }

    .help .sidebar h1 {
        margin: 0;
        text-align: center;
    }

    .help .sidebar ul {
        display: block;
        text-align: center;
    }

     .help .sidebar ul li {
        display: inline-block;
        margin: 10px;
    }

    #contact-box-full {
        width: 95%;
    }

    #running-start .page-heading img {
        margin-left: 0;
        left: 0;
        padding-left: 20px
    }

    #running-start .page-heading h2 {
        margin-left: 0;
        left: 0;
        padding-left: 20px
    }

    .landing-page .two-column .column-two {
        display: block;
        width: 100%;
    }

    .landing-page .landing-heading p {
        width: 100%;
    }

    .register-form {
        width: 100%;
    }

    .speaker {
        display: block;
        margin-bottom: 20px;
    }

    .integration .column {
        width: 100%;
    }

    .integration .sidebar {
        display: none;
    }

    footer .full-row {
        padding: 0 20px;
    }

    #footer-navigation {
        width: 100%;
    }

    #footer-links {
        width: 100%;
    }

    #footer-navigation .column {
        padding-right: 9%;
    }

    #footer-row {
        width: 100%;
    }

    #modal-segments {
        margin-left: 30px;
    }

    #vertafore-flickr {
        margin: 0 auto;
        display: block;
    }
}

/* Applies only in the tablet to desktop size range */
@media (min-width: 769px) and (max-width: 991px) {
    #product-table .headings-row .table-title {
        padding: 0 89px 10px 0;
    }

    #product-table .product-row .fa-check {
        padding: 10px 10px 10px 50px;
    }

    .two-column .thin-column {
        width: 47% !important;
    }
}

@media screen and (max-width: 793px) {
    #contact .contact-button {
        margin-right: 0;
        margin-bottom: 15px;
    }

}

@media screen and (max-width: 784px) {
    .tab-links li {
        float: none;
        display: inline-block;
        width: 50%;
        padding-bottom: 40px;
    }

    .tab-links .last {
        padding-bottom: 0;
    }

}

@media screen and (min-width: 769px) {
    .navDropDown {
        display: none;
    }

}

/**** Primary Responsive point ****/
/* Screen is large mobile to small tablet size.
   Both 2-column styles display columns as stacked, 3-column styles stack the 3rd column. Sticks with % based widths. */

@media screen and (max-width: 768px) {

    .three-column {
        text-align: center;
    }

    .three-column .column {
        width: 40%;
    }

    .product-resources .resource .clear {
        display: none;
    }

    #main-logo {
        display: none;
    }

    #centered-logo {
        display: block;
        text-align: center;
        padding-top: 20px;
    }

    #menuIcon {
        display: block;
        margin: 15px 10px;
        float: left;
    }

    #main-navbar {
        display: none;
    }

    .navDropDown {
        top: 74px;
    }

    #tagline-lg {
        display: none;
    }

    #tagline-sm {
        display: block;
    }

    .page-heading h1 {
        font-size: 4.5em;
    }

    .page-heading h2 {
        font-size: 2em;
        width: 100%;
    }

    .page-heading p {
        width: 100%;
    }

    .segment-banner, .login-banner {
        background-image: none;
        height: inherit;
    }

    .segment-banner .page-heading, .login-banner .page-heading {
        padding: 0 5%;
        width: 90%;
        margin: 0;
    }

    .segment-banner .page-heading h1, .login-banner .page-heading h1{
        font-size: 3em;
        padding-top: 30px;
    }

    .segment-banner .page-heading p {
        padding-bottom: 30px;
        width:100%;
    }

    .banner-content .tagline h1 {
        font-size: 2.5em;
    }

    .banner-content .tagline h2 {
        font-size: 1.5em;
    }

    #banner h1 {
        font-size: 4.3em;
    }

    #banner h2 {
        font-size: 2em;
        line-height: 40px;
    }

    .pagination {
        width: 100%;
    }

    .container .row .wide-only {
        display: none;
    }

    #product-table {
        padding: 0;
    }

    #table-lg, #table-large {
        display: none;
    }

    .extra-space {
        display: none;
    }

    #table-sm, #table-small {
        display: table;
    }

    #form td {
        display: block;
    }

    .image-panel .image-content {
        display: block;
        float: none;
        width: inherit;
    }

    .image-panel .content {
        padding: 5%;
        display: block;
        width: inherit;
    }

    .image-panel .med-and-wide-only {
        display:none;
    }

    #holder-login {
        width: 100%;
    }

    #holder-login .login-fields {
        width: 100%;
    }

    #holder-login .login-fields:first-child,
    #holder-login .login-fields:last-child {
        border: none;
        margin: 0;
        padding: 0;
    }

    #holder-login .login-fields:first-child {
        margin-bottom: 1em;
        border-bottom: 2px solid #ccc;
        padding-bottom: 3em;
    }

    #holder-login #login-fields.boxshadow {
        padding: 3em;
    }

    #login .login-help-container {
        text-align: left;
    }

    .two-column .column-one .video img {
        max-width: 100%;
        height: auto;
    }

    #line {
        border-right: none;
        border-top: 1px solid #697376;
        height: auto;
        padding: 0;
        width: 90%;
        margin: 20px 5%;
    }

    #grid {
        width: 100%;
    }

    #grid .box {
        float: none;
        margin-left: auto;
        margin-right: auto;
        min-height: 115px;
    }

    #grid .top-right {
        border-top: 1px solid #E7ECED;
    }

    .resource-library .resource {
        float: none;
        display: inline-block;
        width: 49%;
        padding-bottom: 40px;
        vertical-align: top;
    }

    .resource-library .spacer {
        display: none;
    }

    .upcoming-webinars{
        width: initial;
        width: auto;
    }

    .past-webinars{
        width: initial;
        width: auto;
    }

    #upcoming .caption1 {
        display: none;
    }

    #upcoming img {
        max-width: 100%;
        height: auto;
    }

    #previous .webinar {
        float: none;
        display: inline-block;
        width: 49%;
        padding-bottom: 40px;
        vertical-align: top;
    }

    #previous .webinar h4 {
        width: 200px;
    }

    #previous .webinar p {
        width: 200px;
    }

    .upcoming-webinar p {
        width: initial;
        width: auto;
    }

    #featured-posts img, .post .image-main, .post .article-image-left, .post .article-image-right {
        max-width: 100%;
        height: auto;
    }

    .partners img {
        float: none;
    }

    #sic-map {
        display: none;
    }

    #sic-sm {
        display: block;
    }

    #sic-sidebar {
        display: none;
    }

    .services-summaries {
        display: none;
    }

    #contact-box-full h2 {
        display: block;
    }

    #footer-navigation {
        padding-bottom: 60px;
    }

    #footer-navigation .column {
        float: none;
    }

    #footer-navigation .column ul {
        padding-bottom: 0;
    }

    #footer-row p {
        float: none;
    }

    #footer-row ul {
        float: none;
    }

    #footer-row ul li {
        margin: 10px 0;
    }

    #modal-segments {
        margin-left: 0;
    }

    #modal-content .segment {
        display: block;
        float: none;
    }

}

@media screen and (min-width: 687px) {

    #contact-sales-form .two-column-cell {
        width: 290px;
        max-width: 100%;
        display: inline-block;
        padding-right: 24px;
    }

    #contact-sales-form .two {
        padding-right: 0px;
    }

    #contact-sales-form .form-row label {
        text-align: left;
    }

    #contact-sales-form .two-column-cell select {
        width: 308px;
        max-width: initial;
        padding: 3px 0;
        font-size: 14px;
    }

    #contact-sales-form .two input {
        width: 299px;
        max-width: initial;
        padding: 3px;
        font-size: 14px;
    }

    .two-column-cell {
        padding: 0 24px 15px 0;
        width: 522px;
    }

    .two-column-cell input {
        max-width: 96%;
        width: 522px;
    }

    .two-column-cell select {
        max-width: 98%;
        width: 522px;
    }

    .one-column-cell {
        width: 522px;
        max-width: 100%;
    }

    .one-column-cell textarea {
        width: 522px;
        max-width: 100%;
    }
}

@media screen and (max-width: 680px) {

    #map {
        max-width: 100%;
        height: auto;
    }

    #form-area {
        display: none;
    }
}

@media screen and (max-width: 620px) {

    .banner-content .tagline .button-wrapper {
        display: none;
    }

    .banner-content .tagline {
        width: 90%;
        padding: 25px 0 0 0;
    }

    .segment-overview table td, .overview table td {
        display: inline-block;
    }

    #example_wrapper table td {
        display: table-cell;
    }

    .integration .header-column {
        border-right: none;
    }

    td.header-column {
        width: 100%;
    }

    .overview .browser-table td {
        display: table-cell;
    }

    .post .mugshot {
        float: none;
    }

    .box .resource {
        text-align: center;
    }

    .box .resource img {
        float: none;
        padding: 0 0 30px 0;
    }

    #modal-content p {
        width: 100%;
    }
}

/**** Primary Responsive point ****/
/* Screen is small mobile.
   Columns are displayed as stacked. */

@media screen and (max-width: 520px) {

    .intro-cta {
        margin-top: 20px;
    }

    .featured-slide img {
        max-width: 100%;
        height: auto;
    }

    .featured-description {
        width: initial;
        width: auto;
        height: initial;
    }

    .featured-video img {
        max-width: 100%;
        height: auto;
    }

    .video-caption {
        width: initial;
        width: auto;
        height: initial;
    }

    .featured-description p {
        font-size: 14px;
    }

    .featured-description a {
        font-size: 14px;
    }

    .featured-heading {
        display: block;
    }

    .resources .resource p {
        width: 90%;
    }

     .success-stories img {
        max-width: 100%;
        height: auto;
    }

    .success-stories .quote {
        width: 100%
    }

    .success-stories .quote p {
        background: none;
        font-size: 18px;
        margin: 0;
        padding: 0px 0px 20px 0px;
    }

    .success-stories .quote span {
        float: none;
        padding: 0;
    }

    .action {
        width: 100%;
    }

    .action .demo-button p {
        padding: 10px 0px 10px 15px;
    }

    .segment-resources .resource, .product-resources .resource  {
        width: 100%;
    }

    .resource-library {
        text-align: center;
    }

    .resource-library .resource {
        width: 100%;
    }

    .resource-library h2 {
        text-align: center;
    }

    .resource-library .resource .wrapper {
        float: none;
    }

    .resource-library .resource h3, .resource-library .resource h4  {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    #upcoming h2 {
        text-align: center;
    }

    #upcoming, #previous {
        text-align: center;
    }

    #previous .webinar {
        width: 100%;
    }

    #previous .webinar h4, #previous .webinar p {
        margin-left: auto;
        margin-right: auto;
        padding: 0;
    }

    #upcoming p {
        width: 100%;
    }

    .resource-categories h2 {
        text-align: center;
    }

    .tabs {
        text-align: center;
    }

    .tab-links li {
        width: 100%;
    }

    .resource-categories .resource img {
       padding: 0 20px;
    }

    .resource-categories .resource {
        padding: 0 0 30px 0;
    }

    .product-quote p {
        background: none;
        font-size: 20px;
        padding: 0px 0px 10px 0;
    }

    .product-#quote span {
        padding-left: 0;
        float: none;
    }

    .case-study {
        float: none;
        padding-right: 0;
    }

    .case-abstract {
         width: 100%;
         float: none;
    }

    .case-abstract p {
        padding-top: 10px;
    }

    #banner {
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) ), url("/images/blog-banner-sircon-website.jpeg");
    }

    #banner h1 {
        font-size: 3.4em;
    }

    #table-sm thead tr th {
        font-size: 14px;
    }

    #table-small thead tr th {
        font-size: 14px;
    }

    .page-heading .sic-heading {
        padding-top: 10px;
    }

    #oversee .segment-overview p {
        width: 100%;
    }

     #oba-disclosure #oba-video .column-one {
        width: initial;
        width: auto;
        height: initial;
    }

    #footer-links .state-information-center {
        float: none;
    }

    #footer-links .state-information-center .clear {
        display: block;
    }

    #sic-dropdown {
        margin: 11px 0 0 0;
    }

    .two-column-cell {
        display: initial;
    }

    #footer-links .social {
        float: none;
        padding: 40px 0;
        margin: 0;
    }

    .default-banner .page-heading h1 {
        font-size: 34px;
    }

}

@media screen and (max-width: 490px) {

    #contact-box-full h2 {
        display: inline-block;
    }

    .home-quote h2 {
        line-height: 50px;
    }

    .home-quote p {
        width: 100%;
    }

   .default-banner .page-heading .two-lines {
       padding-top: 10px;
   }

    #modal-header img {
      width: 100%
    }

    .two-column .column-one .form {
        padding-bottom: 20px;
        width: 100%;
     }

    #mktoForm_2296, #mktoForm_2301 {
        width: 100% !important;
    }

    #mktoForm_2296 .mktoButtonRow, #mktoForm_2301 .mktoButtonRow  {
        padding-right: 0;
    }

    #running-start .page-heading img {
        padding-top: 68px;
    }


    .register-form form {
        padding: 15px 30px 30px 30px;
        text-align: center;
    }

    .register-form form .mktoButtonWrap   {
        margin-left: 0 !important;
    }

}