/*-- Performance Publishing Mobile CSS Document --*/

/*--////////// MEDIA //////////--*/

body {
    -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
    from {
        padding: 0;
    }

    to {
        padding: 0;
    }
}

#toggle, .toggle {
    display: none;
}

.menu > li {
    list-style: none;
    float: left;
}

/*-- Smartphones (Portrait to iPads) --*/
@media only screen and (min-width : 320px) and (max-width : 768px) {
    .memberBox,
    .memberInformation,
    #servicesPane {
		width: 100% !important;
    }
    
    	.memberBox .highlightBox {
    		
    	}
    	
    	.memberBox .highlightBox.right
    	{
    	float: none;
    	}
    	
    	.memberBox .highlightBox img
    	{
    	width: 100% !important;
    	}
    	
    	.memberBox.highlightMember .memberInformation {
    		width: 100%;
    	}
    	
    	.memberBox.highlightMember .highlightBox.right {
    		width: 100% !important;
    
	}

.SearchWrap
{
padding: .2em;
}

.SearchWrap > div:nth-child(1) input {
    height: 22px;
    width: 90%;
}
}

/*-- Smartphones (portrait) --*/
@media only screen and (max-width : 320px) {
    #servicesPane td a {
        width: 150px;
        text-overflow: ellipsis;
        word-wrap: break-word;
    }

    #servicesPane td,
    .serviceList td {
        width: 70%;
    }

    #content {
        width: 99% !important;
        overflow: hidden;
    }
}

/*-- Smartphones (portrait and landscape) --*/
@media only screen and (min-width : 320px) and (max-width : 568px) {
	
		.memberBox .highlightBox img {
	   width: 80%;
	   height: 80%;
	   float: right;
       clear: both;
	}

    #servicesPane {
        width: 99%;
    }

        #servicesPane td a {
            float: left;
            margin: 0;
            padding: 0;
        }

        #servicesPane h2 {
            padding: 10px 0;
        }

    a:visited, body input.a:visited, a:link, body input.a:link {
    }

    h1 {
        font-size: 1.5em;
    }

    #user, #login {
        top: 0;
        margin: 0 !important;
        opacity: 1;
    }

        #user a, #user span, #login a {
            padding: .125em .625em;
            margin: 0;
        }

            #login a:hover, #user a:hover {
            }

    .placeholder .loginRegion input[type="text"], .placeholder .loginRegion input[type="password"], .loginRegion input[type="text"], .loginRegion input[type="password"], .AccWrapper input[type="text"], .AccWrapper input[type="password"] {
        width: 90% !important;
        padding: .625em .3125em !important;
    }

    .loginRegion, .AccWrapper {
        width: 80%;
        margin: 0 auto;
    }

    #navigation, #navigation ul {
        background: #999;
        display: none;
    }

        #navigation ul li {
            border-top: none;
        }

        #navigation li:hover {
            background: #dedede;
        }

        #navigation > li {
            float: none;
        }

            #navigation > li a, #navigation > li span, #user a, #user span, #login a {
                text-align: left;
                border-bottom: 1px solid black;
                font-size: 1.3em;
            }

            #navigation > li a, #navigation > li span {
                text-align: left;
                border-bottom: 1px solid black;
                font-size: 1.5em;
            }

    #wrapper,
    #homeLink {
        width: 100% !important;
    }

    .AccWrapper {
        width: 90%;
    }

    #btnSubmit {
        margin-top: .625em;
    }

    .content_image {
        width: 320px;
        height: 191px;
    }

        .content_image img {
            width: 25%;
            height: 25%;
        }

    .contactWrapper {
        padding: 2px 4px;
		width: 100%;
    }

    .memberBox, #contentPane {
        width: 96% !important;
        height: auto !important;
        border: 1px solid #dedede;
        box-shadow: none;
        padding: .125em 4px;
        margin: .125em 0;
    }

    #banner {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }

    /*- Rad Tab --*/

    .RadTabStrip .rtsLevel1 .rtsTxt, .RadTabStripVertical .rtsLevel1 .rtsTxt {
        padding: 0 .9375em !important;
    }

    .RadTabStrip .rtsLevel {
        width: 1350px !important;
    }

    .TSFilter.RadTabStrip .rtsLink {
        padding: 0;
        margin-right: .125em;
    }

    .TSFilter.RadTabStrip {
        margin-top: 0;
    }

    .RadTabStrip .rtsLevel1 .rtsTxt, .RadTabStripVertical .rtsLevel1 .rtsTxt {
        padding: 0 .9375em !important;
    }

    /*-- End of Rad Tab --*/

    .after {
        border: none;
    }

    .serviceList {
        margin: 0;
    }

        .serviceList > tbody > tr > td,
        #servicesPane > tbody > tr > td {
            width: 50% !important;
        }

    .nav {
        display: block;
    }

    .nav, .menu, .menu > li, .menu > li > a {
        height: 100%;
    }

        .menu > li > a {
            display: block;
            text-decoration: none;
            font-weight: normal;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: all 0.25s linear;
            -moz-transition: all 0.25s linear;
            -o-transition: all 0.25s linear;
            transition: all 0.25s linear;
        }

    .toggle {
        z-index: 0;
    }
}

/*-- Smartphones (landscape) --*/
@media only screen and (max-width: 479px) {
    .toggle:after {
        text-align: center;
        width: 100%;
    }
}

/*-- Smartphones (landscape only) --*/
@media only screen and (min-width : 479px) and (max-width : 620px) {
    /*--
    h1,
	.toggle:after {
        font-size: 70% !important;
    }
	--*/
}

/*-- iPads (landscape) --*/
@media only screen and (min-width : 768px) {
    .content_image {
        width: 768px;
        height: 458px;
    }

    div.nav {
        display: none;
    }

    .scrollhide a.scrollup {
        display: none !important;
    }
}

/*-- iPads (portrait) --*/
@media only screen and (max-width: 768px) {

    .menu {
        display: none;
        opacity: 0;
        width: 100%;
        position: absolute;
        right: 0;
    }

        .menu > li {
            display: block;
            width: 100%;
            margin: 0;
            border-bottom: 1px solid #444;
            background: #f2f2f2;
        }

            .menu > li:hover {
                color: #fff;
                background: #AEAEAE;
            }

            .menu > li > a {
                display: block;
                width: 90%;
                font-size: 1.5em;
                text-decoration: none;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

    .toggle {
        display: block;
        position: relative;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    #toggle:checked ~ .menu {
        display: block;
        opacity: 1;
    }

    .menu {
        position: relative;
        z-index: 0;
    }

        .menu, .menu > li, .menu > li > a {
            height: auto;
        }

            .menu > li > a {
                padding: .625em;
            }

                .menu > li > a:hover, .menu > li > a:focus {
                }

    .toggle:after {
        content: 'Main Menu';
        display: block;
        margin: 0;
        padding: .625em 3.125em;
        background: #5D5D5D;
        text-align: center;
        font-size: 1.5em;
        color: #FFFFFF;
        -webkit-transition: all 0.5s linear;
        -moz-transition: all 0.5s linear;
        -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .toggle:hover:after {
        background: #717171;
    }

    #toggle:checked + .toggle:after {
        content: 'Close Menu';
    }

    .scrollup {
        width: 40px;
        height: 40px;
        text-indent: -9999px;
        position: fixed;
        bottom: 30px;
        right: 5px;
        display: none;
        background: url(../Images/Scoller.png) no-repeat;
    }

        .scrollup:hover {
            background: url(../Images/Scoller.png) no-repeat;
            opacity: .8;
        }

    .MobileLogout li:nth-child(-n+4),
    #user span {
        display: none !important;
    }

    #user li {
        float: right;
    }

    .loginRegion {
        margin: 2em auto;
    }

        .placeholder .loginRegion input[type="text"], .placeholder .loginRegion input[type="password"], .loginRegion input[type="text"], .loginRegion input[type="password"], .AccWrapper input[type="text"], .AccWrapper input[type="password"] {
            width: 90% !important;
            padding: 10px 5px !important;
        }

    #btnLogin {
        padding: .3125em .625em;
        font-size: 1.25em;
    }

    #servicesPane td {
        border: 1px solid #dedede;
        padding: .625em .3125em;
    }

        #servicesPane td a {
            padding: 0;
        }

    #navigation {
        height: .625em;
        display: none;
    }

    #content {
        padding: 1em 0;
    }

    #loginRegister {
        display: none !important;
    }
}

/*-- Desktop (image) --*/
@media only screen and (min-width : 800px) {
    .content_image {
        width: 800px;
        height: 477px;
    }
}

/*-- Desktop --*/
@media only screen and (max-width: 972px) {
    #wrapper {
        width: 100%;
    }
}

/*-- iPads (portrait and landscape) --*/
@media only screen and (min-width : 768px) and (max-width : 1024px) {
    #wrapper {
        width: 100%;
    }

    .content_image {
        width: 1024px;
        height: 611px;
    }
}