﻿@media only screen and (max-width: 480px) {
    /* header */
    header {
        width: 100%;
    }

        header img {
            max-width: 100%;
        }

        header .container {
            width: 100%;
            text-align: center;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

            header .container img {
                width: 100%;
                padding: 15px;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }

            header .container p {
                margin: 0;
            }

            header .container .contact {
                display: none;
            }

    .masthead .container img {
        max-width: 100%;
        height: auto;
    }

    #agentLogo {
        float: none;
        margin: 0;
    }

    /* nav */
    nav {
        height: auto;
        background-image: url(../img/4ac-menu.png);
        padding: 15px 0;
    }

        nav a {
            border: none;
            padding: 0 !important;
            margin: 0 0 0 20px !important;
        }

        nav .container {
            width: 100%;
            padding: 0;
        }

        nav .socialMedia {
            display: none;
        }

        nav ul {
            display: none;
            margin-top: 15px;
            width: 100%;
        }

        nav li {
            display: block;
            width: 100%;
            margin: 0;
            padding: 0 0 0 0;
            line-height: 2;
            background-position: 0 -375px;
            background-repeat: repeat-x;
        }

            nav li li {
                display: block;
                width: 100%;
                margin: 0;
                padding: 0 0 0 0;
                line-height: 2;
            }

            nav li ul li a {
                padding-left: 30px;
                padding: 7px 10px !important;
            }

        nav ul ul {
            position: inherit;
            width: 100%;
            top: 0px;
        }

        nav li:hover ul {
            left: 0px;
        }

        nav li ul {
            left: 0px;
            margin-top: 0;
        }

        nav a {
            padding: 0 0 0 15px;
        }

    #navButton {
        display: inline-block;
        height: 20px;
        padding: 0 0 0 20px !important;
        margin: 0 0 0 19px !important;
        background: url('../../global/img/mobile-sprite.png') no-repeat 0 0;
        background-position-y: 1px;
        text-decoration: none;
        color: #fff;
        text-shadow: rgba(0,0,0,0.5) 0px 0px 8px;
    }

    .subnavContainer {
        display: inline !important;
    }

    .subnavButton {
        position: relative;
        top: 8px;
        display: inline-block;
        width: 20px;
        height: 17px;
        margin: 0 20px 0 0;
        background: url('../../global/img/mobile-sprite.png') no-repeat 0px -19px;
        order: none;
    }

        .subnavButton.down {
            background-position-y: -35px;
        }

    /* hide the hero */
    #hero {
        display: none;
    }

    /* content  */
    body {
        margin: 0;
    }

    #content {
        min-height: 0;
        padding: 0;
    }

        #content img {
            max-width: 100%;
        }

        #content .container {
            width: 100%;
            padding: 0;
            background-size: contain;
        }

            #content .container > * {
                padding: 20px 15px 0 15px;
            }

    .container {
        width: auto;
        margin: 0;
        position: relative;
        padding: 0 15px;
    }

    #subContent .right, #subContent .left {
        width: auto;
    }

    #subContent textarea, #subContent input {
        width: 100%;
    }

    #subContent .right .textfield {
        float: none;
    }

    article {
        width: auto;
        padding: 10px 0 0 0;
        float: none;
    }

        article img {
            float: none;
            max-width: 100%;
        }

        article h1 {
            margin: 0;
        }

        article h2 {
            margin: 15px 0 10px 0;
        }

        article section {
            margin: 0;
        }

    .subpage #content article {
        width: auto;
    }

    .subpage #content aside {
        display: none;
        width: auto;
    }

    aside {
        width: auto;
        margin: 0;
        margin-left: 0;
    }

    #learningContent .matter {
        width: 100%;
        float: none;
        margin: 0;
    }

    #agentContent img {
        float: none;
        margin: 0;
        max-width: 100%;
    }

    #suggested {
        padding: 0;
    }

        #suggested .content {
            width: 100%;
            float: none;
            margin: 0;
            padding: 0;
            min-height: 150px;
        }

            #suggested .content img {
                float: none;
                max-width: 100%;
            }

    #articleContent img {
        margin: 0px;
        float: none;
        max-width: 100%;
        height: auto;
    }

    #presentationShell h2 {
        position: absolute;
        bottom: 130px;
        right: 0px;
        background: #000;
        background: hsla(0,5%,5%,0.85);
        padding: 20px 0;
        font-size: 15px;
        text-align: center;
        color: #fff;
        width: 100%;
    }

    #presentationShell img {
        margin-left: 0px;
        float: none;
        max-width: 100%;
        height: auto;
    }

    .rule {
        background-size: contain;
        margin: 10px 0;
    }

    aside .rule {
        width: auto;
        height: auto;
        background-size: contain;
    }

        aside .rule:first-child {
            display: block;
        }

    .right {
        float: none;
        margin: 0;
    }

    #articleContent .tip {
        display: none;
    }

    #articleContent .fastFact {
        display: none;
    }

    #articleContent .focusBox {
        width: auto;
        padding: 0;
        margin: 0;
    }

    #additional {
        display: none;
        padding-bottom: 20px;
    }

        #additional .wrapper {
            padding: 0;
        }

        #additional nav li {
            padding: 0;
            display: block;
            border: none;
            text-align: left;
            margin: 0;
        }

            #additional nav li:first-child {
                border-left: 1px solid #012D5F;
            }

            #additional nav li a {
                padding: 0 5px;
            }

        #additional .content {
            width: 100%;
            margin: 0;
            float: none;
        }

    #eventContent .info {
        margin: 0;
        width: 100%;
    }

    #eventContent .description {
        margin: 0;
    }

    #matterContent img {
        margin: 0;
        max-width: 100%;
        float: none;
        background-repeat: no-repeat;
    }

    #teamContent .agent .info {
        width: 100%;
        margin-right: 0;
    }

    #teamContent .info img {
        float: none;
        margin: 0 0 10px 0;
        max-width: 100%;
    }

    iframe {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .wrapper {
        padding: 0;
    }

    #agentPhoto {
        float: none;
        margin: 0;
    }

        #agentPhoto img {
            margin-left: 0;
            max-width: 100%;
        }

    #allVideoContent .videoContent {
        float: none;
        width: auto;
        margin-left: 0;
        padding-bottom: 20px;
    }

    #videoContent > div > a > img {
        max-width: 100%;
        height: auto;
    }


    #glossaryContent p a {
        margin-right: 3px;
        font-size: 12px;
    }

            /*CUSTOM SECTIONS*/
    /*.section .section_Boxes {overflow:initial !important;}*/
    .section_Boxes .cardiff-3box {
        width: 100%;
        margin-bottom: 25px;
    }

        .section_Boxes .cardiff-3box.Image img {
            width: 100%;
        }

    .section_SideBySide .SideBySide {
        text-align: center;
    }
	
	.section_Boxes.boxCount-2 .cardiff-3box,
    .section_Boxes.boxCount-4 .cardiff-3box {
        width: 100%;
        margin-bottom: 25px;
    }
	
    .section_Boxes.boxCount-2 .cardiff-3box{
        width:100%;
        margin-right:0;
    }
	
    .section_Boxes.boxCount-2 .cardiff-3box:first-child{
        margin-left:0;
    }
	
    .section_SideBySide .Circle,
    .section_SideBySide .Square,
    .section_SideBySide .Rectangle {
        float: none;
    }

    .section_SideBySide .Circle,
    .section_SideBySide .Square {
        width: 280px;
        height: 280px;
    }

    .section_SideBySide .Rectangle .crop {
        text-align: center;
    }

    .section_SideBySide .Rectangle .crop img {
        max-width: 100%;
        margin-bottom: 25px;
    }

    .section_SideBySid .boxside,
    .section_SideBySide.Left .boxside,
    .section_SideBySide.Right .boxside {
        float: none;
        width: 100%;
        margin-top: 25px;
        text-align: left;
    }


    /* footer */
    footer .container {
        width: 100%;
        padding: 10px 0 0 0;
        margin: 0;
    }

        footer .container > * {
            padding: 0 15px;
        }

    footer .note {
        width: auto;
        float: none;
    }

        footer .note .globalDisclosure {
            padding: 0;
        }

        footer .note .globalCopyright {
            padding: 0;
        }

        footer .note .globalDisclaimer {
            padding: 0;
        }

    footer aside {
        margin: 0;
        width: auto;
    }

        footer aside .wrapper {
            margin: 0;
            padding: 0;
        }

    footer .contact {
        width: auto;
        float: none;
    }

    footer .quickLinks {
        width: auto;
        margin: 0;
        margin-left: 0;
        padding-top: 15px;
    }

        footer .quickLinks ul {
            padding: 0;
        }

        /*PRESENTATION*/
    .presentation.subpage .fancybox-close,
    .page-resource-center-presentations .fancybox-close {
        background: rgba(255,255,255,.35);
        width: 40px;
        top: 0;
        right: 0;
 }

        .page-resource-center-presentations .fancybox-close:before,
        .presentation.subpage .fancybox-close:before {
            content: '';
            display: inline-block;
            width: 100%;
            height: 3px;
            right: 0;
            top: 16px;
            background: #000;
            position: absolute;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
 }

        .page-resource-center-presentations .fancybox-close:after,
        .presentation.subpage .fancybox-close:after {
            content: '';
            display: inline-block;
            width: 100%;
            height: 3px;
            right: 0;
            top: 16px;
            background: #000;
            position: absolute;
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
 }

    #presentationContainer {
        height: 100%;
  }

    #presentationShell img {
        margin-left: 0;
 }

    #presentationShell h2 {
        width: 94%;
        font-size: 1em;
        padding: 15px 12px;
        bottom: 0;
        margin-bottom: 0;
 }

    #presentation span.slide {
        width: auto;
        height: auto;
        padding: 10px;
        display: block;
 }

    #presentationContainer #presentation {
        width: 100%;
        height: 100%;
        overflow-y: auto;
 }

        #presentationContainer #presentation a.selected {
            display: block;
            width: 100%;
        }

    #presentation a.selected img {
        display: block;
        margin-bottom: 20px;
        max-width: 610px;
        margin-left: auto;
        margin-right: auto;
    }

    #presentation .aside {
        margin-left: 0;
        width: 100%;
    }

    #presentation .slide {
        width: 100%;
        height: 100%;
        float: none;
    }

 #presentation .forwardArrow,
    #presentation .backArrow {
        top: 100px;
        display: inline-block;
 }

    #presentation .forwardArrow {
        right: 0;
        left: auto;
 }

    #presentation .slideText {
        width: 100%;
        padding-right: 0;
 }

    #presentation .wrapper {
        display: none;
 }

        #presentation .wrapper.selected {
            display: block;
  }

    #presentation span.slide {
        padding: 5px;
        margin-bottom: 20px;
  }

    .slide embed {
        width: auto;
        height: auto;
  }

    #presentation video {
        width: 100%;
        height: auto;
  }

    #presentation .slideText {
        height: auto;
  }

  /*BROKER CHECK*/
    header .broker-check {
        width: 100%;
        height: auto;
        background: #F6F6F6;
        text-align: center;
        margin-bottom: 20px;
        border: solid 1px #E4E4E4;
  }

        header .broker-check img {
            width: auto;
  }

        header .broker-check .container {
            padding: 9px 0 0 0;
  }

    header.masthead {
        margin: 0 !important;
  }

    .floating-broker-check {
        position: static;
        width: auto;
        height: 40px;
        background: #F6F6F6;
        text-align: center;
        border-bottom: solid 1px #E4E4E4;
       }

        .floating-broker-check a {
            display: block;
            width: 100%;
            height: 40px;
   }

    .broker-check-description {
        font-size: 13px;
        margin-bottom: 10px !important;
    }
}

/* This is for the video-scroll-play script */
.js-video-autoplay {
  width: 100%;
  margin-bottom: 40px;
}

/*TEAM SECTIONS*/
.c-team-search__inner {
    width: 90%;
}

.section_TeamList .c-team-section__container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column nowrap;
    align-content: flex-start;
}

.section_TeamList .c-team-section__container > .c-team-section__member {
        width: 90%;
        margin: 0 auto 25px auto;
}

.section_TeamList .c-team-section__container > .c-team-section__member:nth-child(3n+3) {
            margin-right: auto;
}
