// Include the variables. @import “../../../partials/utility/variables/*”;

/*  ****  Front Page specific blocks and widgets       ****  */

        /*  ****  Front Page specific blocks and widgets       ****  */
.main-nav-blocks   {
        display:       -webkit-flex;
        display:           -ms-flexbox;
        display:            -o-flex;
        display:               flex;
        -webkit-justify-content: space-around;
            -ms-justify-content: justify;
        justify-content:        space-around;
        -webkit-flex-wrap:      wrap;
        -ms-flex-wrap:          wrap;
            flex-wrap:          wrap;
        padding:                                0;

        height:                         auto;
        margin:                 3.4rem auto 1em;

        section       {
                cursor:         pointer;
                padding:        0;
                margin:                 0 1em 1em 1em;

                max-width:              256px;                          // forcing sections to be circles
                min-width:              256px;                          // but not allowing them to get too distorted
                width:          256px;
                height:                 256px;                                  
                border-radius:  50%;
                text-align:             center;

                -webkit-flex:   1 1 0;
                -ms-flex:   1 1 0;
                    flex:   1 1 0;

                /* background-color: #80c251; */
                background-image: -webkit-linear-gradient(top, $color-masthead-bg-style 0,  $color-masthead-bg-style 62px, #fff 62px, #fff 100%);
                background-image:    -moz-linear-gradient(top, $color-masthead-bg-style 0,  $color-masthead-bg-style 62px, #fff 62px, #fff 100%);
                background-image:      -o-linear-gradient(top, $color-masthead-bg-style 0,  $color-masthead-bg-style 62px, #fff 62px, #fff 100%);
                background-image:         linear-gradient(top, $color-masthead-bg-style 0,  $color-masthead-bg-style 62px, #fff 62px, #fff 100%);
                border:           $color-card-border thin solid;
                background-repeat: no-repeat;
        }

        /*   each navigation box has different contrast color */
        section:nth-child(2)        {
                background-image: -webkit-linear-gradient(top, $color-masthead-bg-pattern 0,  $color-masthead-bg-pattern 62px, #fff 62px, #fff 100%);
                background-image:    -moz-linear-gradient(top, $color-masthead-bg-pattern 0,  $color-masthead-bg-pattern 62px, #fff 62px, #fff 100%);
                background-image:      -o-linear-gradient(top, $color-masthead-bg-pattern 0,  $color-masthead-bg-pattern 62px, #fff 62px, #fff 100%);
                background-image:         linear-gradient(top, $color-masthead-bg-pattern 0,  $color-masthead-bg-pattern 62px, #fff 62px, #fff 100%);
        }

        section:nth-child(3)        {
                background-image: -webkit-linear-gradient(top, $color-masthead-bg-design 0,  $color-masthead-bg-design 62px, #fff 62px, #fff 100%);
                background-image:    -moz-linear-gradient(top, $color-masthead-bg-design 0,  $color-masthead-bg-design 62px, #fff 62px, #fff 100%);
                background-image:      -o-linear-gradient(top, $color-masthead-bg-design 0,  $color-masthead-bg-design 62px, #fff 62px, #fff 100%);
                background-image:         linear-gradient(top, $color-masthead-bg-design 0,  $color-masthead-bg-design 62px, #fff 62px, #fff 100%);
        }

        /*   each Navigation has contrast color, so that means also on hover  */
        section:hover      {

                background-image: -webkit-linear-gradient(top, $color-masthead-bg-style 0,  $color-masthead-bg-style 62px, #edf8fc 62px, #edf8fc 100%);
                background-image:    -moz-linear-gradient(top, $color-masthead-bg-style 0,  $color-masthead-bg-style 62px, #edf8fc 62px, #edf8fc 100%);
                background-image:      -o-linear-gradient(top, $color-masthead-bg-style 0,  $color-masthead-bg-style 62px, #edf8fc 62px, #edf8fc 100%);
                background-image:         linear-gradient(top, $color-masthead-bg-style 0,  $color-masthead-bg-style 62px, #edf8fc 62px, #edf8fc 100%);
        }

        section:nth-child(2):hover      {
                background-image: -webkit-linear-gradient(top, $color-masthead-bg-pattern 0,  $color-masthead-bg-pattern 62px, #edf8fc 62px, #edf8fc 100%);  
                background-image:    -moz-linear-gradient(top, $color-masthead-bg-pattern 0,  $color-masthead-bg-pattern 62px, #edf8fc 62px, #edf8fc 100%);
                background-image:      -o-linear-gradient(top, $color-masthead-bg-pattern 0,  $color-masthead-bg-pattern 62px, #edf8fc 62px, #edf8fc 100%);
                background-image:         linear-gradient(top, $color-masthead-bg-pattern 0,  $color-masthead-bg-pattern 62px, #edf8fc 62px, #edf8fc 100%);
        }

        section:nth-child(3):hover      {
                background-image: -webkit-linear-gradient(top, $color-masthead-bg-design 0,  $color-masthead-bg-design 62px, #edf8fc 62px, #edf8fc 100%);
                background-image:    -moz-linear-gradient(top, $color-masthead-bg-design 0,  $color-masthead-bg-design 62px, #edf8fc 62px, #edf8fc 100%);
                background-image:      -o-linear-gradient(top, $color-masthead-bg-design 0,  $color-masthead-bg-design 62px, #edf8fc 62px, #edf8fc 100%);
                background-image:         linear-gradient(top, $color-masthead-bg-design 0,  $color-masthead-bg-design 62px, #edf8fc 62px, #edf8fc 100%);
        }

        section:active      {
                border:          $color-card-border thin solid;
        }

        section     h2  {
                color:           white;
    margin-bottom:   0.2em;
    font-size:           1.37em;
                margin-top:      1.4em;
                border:          none;
                pointer-events:  none;
        }
        section      p  {
                font-size:      0.93em;
                font-weight:    normal;
                font-family:    OpenSans-Regular, Helvetica, Arial, sans-serif;
                line-height:    1.2em;
                color:          $medium-grey-10;
                min-height:     1.2em;    // allows the icons below to align
                padding-top:    0.8em;
                pointer-events: none;
        }
        section      a  {
                font-size:      inherit;
                font-weight:    normal;
                color:          inherit;
        }
        section      img  {
                margin:         -0.9em auto 0 auto;
                padding:        0;
                width:          116px;
                height:         116px;
                display:                block;
                pointer-events: none;
        }

}

.hero-front h1 {

font-family:            $font-light;
font-size:                      4.33em;
font-weight:            100;
line-height:            1em;
color:                          $color-hero-title;
letter-spacing:         0.02em;
margin:                 2.0em 0 0 0;
border:                         none;
transition:         all 0.5s;

} .hero-front h3 {

font-family:            $font-light;
font-size:              1.8em;
font-weight:            100;
line-height:            1em;
color:                          $color-hero-subtext;
margin:                         0  0 0  1em;
padding-top:        0;
text-align:             right;
border:                         none;
text-decoration:        none;
max-width:                      763px;;

} @media only screen

and (max-width: 920px)  { 
      .hero-front  h3   {
              margin-left:   0;
              margin-right:  1em;
              text-align:    right;
      }
      .hero-front  h1 {
              letter-spacing: 0;
      }

} /* ******************* Media Queries ********************** */ @media only screen

and (max-width: 840px)  { 
      .main-nav-blocks   {
              display:       none;
      }

}

/* ******************** HERO area ********************** */ .hero-front h3 a:hover, a.inherit:hover {

color:                          $color-hover  !important;

}

.front {

#main-content-wrapper  h1  {
        display:         none;
}
#main-content-wrapper  article h1  {
        display:         block;
        clear:                   all;
}

.l-region--pre-content,
.l-region--post-content   {
        display:       -webkit-flex;
        display:           -ms-flexbox;
        display:            -o-flex;
        display:               flex;
        -webkit-flex-direction:  row;
            -ms-flex-direction:  row;
                flex-direction:  row;
        -webkit-justify-content: space-between;
            -ms-justify-content: justify;
                justify-content: space-between;
        margin-bottom:                   4em;

        p  {
                line-height:         1.3;   // RGS Nov2015 Rob Requested to tighten-up paragraphs
        }
}

.block--views {  
        max-width:                              30%;
        min-width:              270px;      
        padding:                        0.5em;
        max-width:                      31.5%;
        -webkit-flex:                   1 1 auto;
        -ms-flex:               1 1 auto;
            flex:               1 1 auto;

        .view-content {
                display:                block;
                width:                          100%;

                .item-list ul {
                        padding:                0;
                        margin:         0.8em 0 0 0;
                }
                .item-list ul  li {
                        padding:                0 1.66rem 1.1em;
                        margin-top:     1.3em;
                        margin-bottom:  1.4em;
                        border-bottom:  #e8e8e8 solid thin;
                        background-color:   white;
                        border:         $color-card-border thin solid;
                        cursor:                 pointer;
                }

        }

        h2.block-title {
                color:          $color-link-active;
                font-size:      1.33em;
                margin:                 0 0 0.8em 1.33em;
                padding:                0;
                border:                 none;
                font-family:    $font-regular;
        }

        .views-field-title {
                display:                block;
                font-family:    $font-semibold;
                padding-top:     1em;
        }
        .views-field-title a {
                color:          $color-block-title;
                font-size:      1.2em;
                border:                 none;
                font-family:    $font-semibold;
        }

        .views-field-title a:hover {
                color:          $color-hover;
        }

        .views-field-body     {
                color:          $color-block-text;
                font-family:    $font-secondary-text;
        }

        .tile-category     {
                font-size:      0.9em;
                font-family:    $font-secondary-text;
                color:                  $color-text-disabled;
        }

        ul {
                margin:                 0.4em;
        }

        li       {
                list-style:     none;
                padding:        0.4em 0.5em 1em;
        }
        .username {
                display:                block;
                font-style:     italic;
                //a {
                //      color:                  inherit;
                //}

                a:hover {
                        color:                  $color-hover;
                }
        }

        .views-more-link {
                font-size:      0.9em;
                font-style:     italic;
        }
}

#block-views-news-block-whats-new    .side-by-side,
#block-views-pages-block-basic-pages .side-by-side  {  // code to move the summary text for these tiles to be image right paragraph left  TEMPORARY
        p {
                display:                inline-block;
                width:                  50%;
                position:               relative;
                top:                    0;
                left:                   49%;
                padding:                0  0  0  1%;
        }
        img {
                display:                inline-block;
                max-width:              46%;
                position:               relative;
                top:                    0;
                left:                   -52%;
                vertical-align: top;
                padding:                1.38em 0 0.9em 0;
        }
}

}

/* ******************* UX Team navigation for front and other footers ********************** */ block-block-8 { // This is the block for UX Team footer

margin-top:                             4em;

} nav#ux-team-nav {

ul  {
        font-size:                          1.2em;
        font-family:                        $font-semibold;
        display:            -webkit-flex;
        display:            -ms-flexbox;
        display:                    flex;

                                   /* row column  */
        -webkit-flex-direction:     row;
            -ms-flex-direction:     row;
                flex-direction:     row;

                                   /* wrap nowrap wrap-reversse  */
        -webkit-flex-wrap:          nowrap;
            -ms-flex-wrap:          nowrap;
                flex-wrap:          nowrap;

                                   /* flex-start flex-end center 
                                      space-between space-around  (ms) justify*/
        -webkit-justify-content:    space-between;
            -ms-flex-pack:          justify;
                justify-content:    space-between;

        li {
                margin:                                     auto;
                list-style:                         none;
                text-align:                         center;
                -webkit-flex:           1 1 auto;
                    -ms-flex:           1 1 auto;
                        flex:           1 1 auto;
                -webkit-flex-grow:          6;
                    -ms-flex-grow:          6;
                        flex-grow:          6;

                img {
                        width:                              3rem;
                        height:                     3rem;
                        margin-right:               0.9em;
                        vertical-align:     middle;

                       -webkit-border-radius: 50%;
                          -moz-border-radius: 50%;
                           -ms-border-radius: 50%;
                            -o-border-radius: 50%;
                               border-radius: 50%;   
                        background:     rgba(0,0,0,0.25);
                }
                a  {
                        font-family:                inherit;
                        color:                      inherit;
                        line-height:                2.6em;
                        vertical-align:             middle;
                        width:                              auto;
                }
            &:first-child {
                    text-align:                             left;
                -webkit-flex-grow:          4;
                    -ms-flex-grow:          4;
                        flex-grow:          4;
                }

            &:last-child {
                    text-align:                             right;
                -webkit-flex-grow:          4;
                    -ms-flex-grow:          4;
                        flex-grow:          4;
                }
        }
    }

}