/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    #rolloverpositioner {
        height: 220px;
        margin-top: 220px;
    }

    /*#stickytab {
        width: 220px;
        top: 95px;
    }
        #stickytab > .upright {*/
            /*rotate the div back the other way*/
            
            /*left: -10px;
            top: 40px;
            height: 220px;
            width: 230px;
        }*/


}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
   
  
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
   /* #topoverlayleft img {
        margin-left: 100px;
    }*/

   /* div#menuribbon {
        height:0px;
    }*/

        /*div#menuribbon > .menupositioner {
         position:absolute;
            top: -80px;
        }*/

    #rolloverpositioner {
        padding-top: 15px;
        margin-top: 45px;
        height: 135px;
    }

    .barristerlist h2 {

        font-size: 1.1em;

    }

    #stickytab {
        width: 220px;
        top: 45px;
    }

    .hoverdetails {
        height: 135px;
        overflow-y: hidden;
    }

    h2#h2title {
        font-size:1.4em;
    }

    #stickytab p {
       line-height:1.3;
    }

    .welcomebox p {
        font-size: 0.8rem;
    }

    .aowbox h3 {
        font-size: 1.3em;
        margin-bottom:0px;
    }

    section#ourwork .aowbox {
        min-height: 480px
    }

    #textslidewrapper {
        margin-top: 0px !important;
    }
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
   
}

/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {

   
}

/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
   
}

/* ----------- iPhone X, 12,  ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 896px) and (-webkit-min-device-pixel-ratio: 3) {
}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 896px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
}

/* Mobile phone Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 896px) and (orientation: landscape) {
    /*#topoverlayleft img {
        margin-left: 100px;
    }*/
    p {
        font-size: 14px;
    }

    h3 {
        font-size: 1.4rem;
    }

    div#menuribbon {
        height: 20px;
    }

        div#menuribbon > .menupositioner {
           
            margin-top:-30px;
        }

    div#welcome {
        position: absolute;
        top: 110px;
    }

    .welcomebox h1{
        font-size:1.6rem;
    }

    section#ourwork .aowbox p {
        font-size: 0.8em;
    }

    section#ourwork .aowbox{
        padding:15px;
    }

    #staticrollover {
        height: 70vh;
    }

    #rolloverpositioner {
        padding-top: 15px;
        margin-top: 65px;
        height: 135px;
    }

    #owstickytab {
        width: 220px;
        top: 45px;
    }

    .barristerlist h2 {
        font-size: 1.1em;
    }

    #stickytab {
        width: 220px;
        top: 45px;
    }
    #owstickytab > .upright,
    #stickytab > .upright {
        left: -18px;
    }
           
        .hoverdetails {
            height: 135px;
            overflow-y: hidden;
        }

    h2#h2title {
        font-size: 1.4em;
    }
    #owstickytab p,
    #stickytab p {
        line-height: 1.3;
    }

    .searchdiv input, .searchdiv input:focus {
        padding: 25px 20px;
        font-size: 0.8em;
    }

    .searchdiv select {
        height: 3.2rem;
        margin: 0 0 1rem;
        padding: 15px 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 1px solid rgba(112,32,139,0.65);
        border-radius: 3px;
        background-color: rgba(112,32,139,0.65);
        font-family: inherit;
        font-size: 0.8rem;
        font-weight: normal;
        line-height: 1;
        color: #FFFFFF;
        background-origin: content-box;
        background-position: right -1rem center;
        background-repeat: no-repeat;
        background-size: 9px 6px;
        /* padding-right: 1.5rem; */
        -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
        transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
        transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
        transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
    }

    .searchdiv > span, .searchdiv a, .searchdiv a:link, .searchdiv a:active, .searchdiv a:hover, .searchdiv a:visited {
        display: inline-block;
        width: 100%;
        /* padding: 35px; */
        background: rgba(112,32,139,0.65);
        color: white;
        font-size: 0.8em;
        border: none;
        padding: 15px 10px;
        border-radius: 3px;
    }

    #findbarrwrapper {
        padding-top: 0px
    }

    .searchdiv {

        margin-top: 7px;
    }

    #latestnews p {
        font-size: 0.8em;
    }

    #textslidewrapper {
        margin-top: 20px;
        padding: 0px 30px;
    }

    .directory-slick div.slick-slide p {
        font-size: 0.6em;
    }

    .footwrapper img {
        max-width: 40%;
    }

    #commentwrapper {
        padding-top: 0px;
    }
}

/* ----------- Galaxy S6 ----------- */

/* Portrait and Landscape */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {
}

/* Portrait */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {
}





    @media only screen and (max-width: 1023px) {

        div#menuribbon > .menupositioner {
            width: 60px;
            margin-left: 10px;
        }

        #topoverlayright h3 {
            font-size: 1.1em;
            margin-left: 100px;
        }
    }


    /*Medium*/
    @media only screen and (min-width: 640px) and (max-width: 1023.99px) {
	h3 {
          font-size: 1.4rem;
    	}

        nav {
            font-size: 1em;
        }
	
	#headerimg {

    	  height: 80vh;
    	}
	
	div#welcome {
        	position: absolute;
        	top: 180px;
    	}
	
	.welcomebox h1{
        	font-size:1.6rem;
    	}
	
	 div#menuribbon {
        height: 20px;
    }

        div#menuribbon > .menupositioner {
           
            margin-top:-30px;
        }
	
	section#ourwork .aowbox {

    	min-height: 630px
    	}

        .barristerbox {
            position: relative;
            height: 240px;
            overflow-y: hidden;
            overflow-x: hidden;
        }

        .aowlist h3.bname,
        .barristerlist h3 {
            font-size: 0.9em;
        }

        .barristerlist p {
            font-size: 14px;
        }

        #btnShortList {
            margin-left: 0;
            font-size:12px;
        }

        a.viewprofile, a.viewprofile:link, a.viewprofile:hover, a.viewprofile:visited, a.viewprofile:active, a.viewprofile:focus {
            font-size: 0.6em;
        }

        .barristerbox label {
            font-size: 0.6em;
            display: inline-block;
            margin-right: 3px;
        }

        h1.membername {
            margin-left: -3px;
        }
	
	#latestnews p {
        font-size: 0.8em;
    }
	
	 .searchdiv input, .searchdiv input:focus {
        padding: 25px 20px;
        font-size: 1em;
    }

    .searchdiv select {
        height: 3.2rem;
        margin: 0 0 1rem;
        padding: 15px 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 1px solid rgba(112,32,139,0.65);
        border-radius: 3px;
        background-color: rgba(112,32,139,0.65);
        font-family: inherit;
        font-size: 1rem;
        font-weight: normal;
        line-height: 1;
        color: #FFFFFF;
        background-origin: content-box;
        background-position: right -1rem center;
        background-repeat: no-repeat;
        background-size: 9px 6px;
        /* padding-right: 1.5rem; */
        -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
        transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
        transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
        transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
    }

    .searchdiv > span, .searchdiv a, .searchdiv a:link, .searchdiv a:active, .searchdiv a:hover, .searchdiv a:visited {
        display: inline-block;
        width: 100%;
        /* padding: 35px; */
        background: rgba(112,32,139,0.65);
        color: white;
        font-size: 1em;
        border: none;
        padding: 15px 10px;
        border-radius: 3px;
    }

    section#ourwork .aowbox p {
        font-size: 0.8em;
    }
    
     #textslidewrapper {
        margin-top: 20px;
        padding: 0px 30px;
    }

    .directory-slick div.slick-slide p {
        font-size: 0.6em;
    }

    .footwrapper img {
        max-width: 40%;
    }

    #commentwrapper {
        padding-top: 0px;
    }
        
    }

/*iPhone XR and Samsung Galaxy S20 landscape*/
@media only screen and (min-width: 896px) and (max-width:915px) and (orientation: landscape){
	p {
        font-size: 14px;
    }

    h3 {
        font-size: 1.4rem;
    }

    div#menuribbon {
        height: 20px;
    }

        div#menuribbon > .menupositioner {
           
            margin-top:-30px;
        }

    div#welcome {
        position: absolute;
        top: 110px;
    }

    .welcomebox h1{
        font-size:1.6rem;
    }

    section#ourwork .aowbox p {
        font-size: 0.8em;
    }

    section#ourwork .aowbox{
        padding:15px;
    }

    #staticrollover {
        height: 70vh;
    }

    #rolloverpositioner {
        padding-top: 15px;
        margin-top: 65px;
        height: 135px;
    }

    #owstickytab {
        width: 220px;
        top: 45px;
    }

    .barristerlist h2 {
        font-size: 1.1em;
    }

    #stickytab {
        width: 220px;
        top: 45px;
    }
    #owstickytab > .upright,
    #stickytab > .upright {
        left: -18px;
    }
           
        .hoverdetails {
            height: 135px;
            overflow-y: hidden;
        }

    h2#h2title {
        font-size: 1.4em;
    }
    #owstickytab p,
    #stickytab p {
        line-height: 1.3;
    }

    .searchdiv input, .searchdiv input:focus {
        padding: 25px 20px;
        font-size: 0.8em;
    }

    .searchdiv select {
        height: 3.2rem;
        margin: 0 0 1rem;
        padding: 15px 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 1px solid rgba(112,32,139,0.65);
        border-radius: 3px;
        background-color: rgba(112,32,139,0.65);
        font-family: inherit;
        font-size: 0.8rem;
        font-weight: normal;
        line-height: 1;
        color: #FFFFFF;
        background-origin: content-box;
        background-position: right -1rem center;
        background-repeat: no-repeat;
        background-size: 9px 6px;
        /* padding-right: 1.5rem; */
        -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
        transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
        transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
        transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
    }

    .searchdiv > span, .searchdiv a, .searchdiv a:link, .searchdiv a:active, .searchdiv a:hover, .searchdiv a:visited {
        display: inline-block;
        width: 100%;
        /* padding: 35px; */
        background: rgba(112,32,139,0.65);
        color: white;
        font-size: 0.8em;
        border: none;
        padding: 15px 10px;
        border-radius: 3px;
    }

    #findbarrwrapper {
        padding-top: 0px
    }

    .searchdiv {

        margin-top: 7px;
    }

    #latestnews p {
        font-size: 0.8em;
    }

    #textslidewrapper {
        margin-top: 20px;
        padding: 0px 30px;
    }

    .directory-slick div.slick-slide p {
        font-size: 0.6em;
    }

    .footwrapper img {
        max-width: 40%;
    }

    #commentwrapper {
        padding-top: 0px;
    }
}

    @media only screen and (min-width: 1024px) and (max-width:1220px) {
        nav {
            font-size: 1.1em;
        }
        
        #topoverlayleft img {
            margin-left: 0px;
        }
        
        section#ourwork .aowbox {
            min-height: 510px;
        }

        div#welcome {
            position: absolute;
            top: 350px;
        }

        .searchdiv input, .searchdiv input:focus {
          
            font-size: 1.6em;
           
        }

        .searchdiv > span,
        .searchdiv a,
        .searchdiv a:link,
        .searchdiv a:active,
        .searchdiv a:hover,
        .searchdiv a:visited {
           
            font-size: 1.6em;
           
        }

        .searchdiv select {
            font-size: 1.6em;
        }

        .aowlist h3.bname,
        .barristerlist h3 {
            font-size: 1.1em;
        }

        .barristerlist p {
            font-size:16px;
        }

        #btnShortList {
            margin-left: 3%;
        }
	
	section#ourwork .aowbox {
   
    		min-height: 850px;
    	}
    }



    @media only screen and (min-width: 1221px) and (max-width:1440px) {
        section#ourwork .aowbox {
            min-height: 600px;
        }

        .searchdiv input, .searchdiv input:focus {
            font-size: 1.6em;
        }

        .searchdiv > span,
        .searchdiv a,
        .searchdiv a:link,
        .searchdiv a:active,
        .searchdiv a:hover,
        .searchdiv a:visited {
            font-size: 1.6em;
            padding: 15px 35px;
        }

        .searchdiv select {
            font-size: 1.6em;
        }

        .aowlist h3.bname {
            font-size: 1.2em;
        }
    }

@media only screen and (min-width: 1220px) and (max-width:1320px) { /*//custom adjustment for AOW list*/
    .aowlist h3.bname,
    .barristerlist h3 {
        font-size: 1.1em;
    }
}

    @media only screen and (width: 1024px) { /*ipad landscape*/

    }


    @media only screen and (min-width: 640px) and (max-width:920px) {
    }


    @media only screen and (min-width: 1024px) {
        h1.membername {
            margin-left: -4px;
        }
    }

    @media only screen and (max-width: 1383px) {
    }

    @media only screen and (min-width: 1383px) {
    }

    /*small?*/

    @media only screen and (max-width: 639px) {
        div#menuribbon > .menupositioner {
            width: 100vw;
            margin-left: 0;
        }

        .cd-main-content.nav-is-visible, .cd-main-header.nav-is-visible {
            transform: none !important;
        }

        div#menuribbon > .menupositioner .cd-header-buttons {
            left: auto;
            right: 20px;
        }

        #menucontainer #topoverlayright,
        #menucontainer #topoverlayleft {
            margin: 0 !important;
            padding-left: 20px !important;
            padding-right: 20px !important;
            width: 50% !important;
        }

        #menucontainer #topoverlayright,
        #menucontainer #topoverlayleft,
        #menucontainer.scrollable #topoverlayright,
        #menucontainer.scrollable #topoverlayleft {
            height: 110px !important;
        }

        #menucontainer .header__logo {
            max-width: 100%;
        }

        #menucontainer .header__logo img {
            margin: 0 !important;
            width: auto;
        }

        #topoverlayright h3 {
            font-size: 0.8em;
            margin-left: 0px;
        }

        #topoverlayleft img {
            margin-left: 40px;
            margin-top: -15px;
        }

        .barristerlist h2 {
            font-size: 1.2em;
            margin-left: 8%;
        }

        .aowlist h3.bname,
        .barristerlist h3 {
            font-size: 1.0em;
            margin-left: 8%;
        }

        #btnShortList {
            display: inline;
            margin-left: -20px;
            font-size: 0.7em;
            width: 100px;
        }

        .barristerbox {
            position: relative;
            height: 180px;
            overflow-y: hidden;
            overflow-x: hidden;
        }

        .barristerlist p {
            margin-left: 8%;
            font-size: 0.8em;
        }

        h2#h2title {
            padding-left: 20px;
        }

        .baselinks {
            padding-left: 30px;
        }

        .hoverdetails {
            height: 220px;
            overflow-y: hidden;
            overflow-x: visible;
        }

        .clerkdetails #hoversub {
            font-size: 0.8em;
        }

        .directory-slick div.slick-slide {
            padding: 10px;
            font-size: 0.8em;
            text-align: center;
            line-height: 1;
        }
        
        div#topoverlayright {
         align-items: flex-start;
         height: 120px!important;
         margin-left: 40px;
        }
        

        .welcomebox p {
            font-size: 16px;
        }

        section#ourwork .aowbox {
            margin-bottom: 10px;
        }

        .searchdiv {
            max-width: 70%;
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
        }

            .searchdiv input, .searchdiv input:focus {
                padding: 25px 20px;
                font-size: 0.8em;
            }

            .searchdiv select {
                height: 3.2rem;
                margin: 0 0 1rem;
                padding: 15px 10px;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                border: 1px solid rgba(112,32,139,0.65);
                border-radius: 3px;
                background-color: rgba(112,32,139,0.65);
                font-family: inherit;
                font-size: 0.8rem;
                font-weight: normal;
                line-height: 1;
                color: #FFFFFF;
                background-origin: content-box;
                background-position: right -1rem center;
                background-repeat: no-repeat;
                background-size: 9px 6px;
                /*padding-right: 1.5rem;*/
                -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
                transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
                transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
                transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s;
            }

            .searchdiv > span, .searchdiv a, .searchdiv a:link, .searchdiv a:active, .searchdiv a:hover, .searchdiv a:visited {
                display: inline-block;
                width: 100%;
                /* padding: 35px; */
                background: rgba(112,32,139,0.65);
                color: white;
                font-size: 0.8em;
                border: none;
                padding: 15px 10px;
                border-radius: 3px;
            }

        #latestnews p {
            font-size: 1em;
        }

        section#ourwork .aowbox p {
            font-size: 1em;
        }

        .footwrapper h4 {
            font-size: 1rem;
            line-height: 1.4;
        }

        .footwrapper p {
            font-size: 0.8rem;
        }

        .footwrapper img {
            max-width: 60%;
        }

        .blackbar p {
            font-size: 0.6rem;
        }

        .menupositioner {
            position: absolute;
            top: -40px;
        }

        div#menuribbon {
            height: 10px;
        }

        .footwrapper img {
            max-width: 40%;
        }

        #textslidewrapper {
            margin-top: 20px;
            padding: 0px 30px;
        }

        .footer__logo {
            margin-bottom: 15px;
        }

        .iconbox .iconbox__link {
            margin-right: 20px;
        }

        .iconbox .iconbox__link:last-of-type {
            margin-right: 0;
        }

        .iconbox img {
            max-width: 100%;
            width: 40px;
        }

        #commentscroller {
            height: auto;
        }

        #commentscroller #commentwrapper {
            padding-bottom: 20px;
        }

        #commentscroller #commentwrapper #textslidewrapper .slick-dots li,
        #commentscroller #commentwrapper #textslidewrapper .slick-dots li button {
            width: 15px;
        }

        #findbarrister {
            height: auto;
        }

        #findbarrister #findbarrwrapper {
            padding-bottom: 80px;
        }

        section#ourwork .aowbox {
            min-height: 0;
        }

        section#ourwork .aowbox .morebtn {
            margin-top: 25px;
            text-align: center;
            width: 100%;
        }

        #headerimg {
            height: auto;
            padding: 180px 0 60px 0;
        }

        #staticrollover {
            height: auto;
            min-height: 340px;
            padding: 145px 0 30px 0;
        }

        #rolloverpositioner {
            height: auto;
            margin-top: 0;
            padding: 20px 0;
            width: 90%;
        }

        #rolloverpositioner .hoverdetails {
            height: auto;
        }

        #headerimg.barrister-header-img {
            height: 340px !important;
        }
    } 

    @media only screen and (min-width: 640px) and (max-width: 691px) {
    }

    @media only screen and (max-width: 280px) { /*galaxy fold*/

        #rolloverpositioner {
            height: 220px;
        }

        #stickytab {
            width: 220px;
            top: 95px;
        }

            #stickytab > .upright {
                /*rotate the div back the other way*/
                left: -10px;
                top: 40px;
                height: 220px;
                width: 230px;
            }

        .barristerlist h2 {
            font-size: 1.0em;
            margin-left: 8%;
        }

        .barristerlist h3 {
            font-size: 0.8em;
            margin-left: 8%;
        }
    }

    @media only screen and (min-width: 652px) and (max-width: 654px) and (orientation: landscape) { /*galaxy fold*/

    }

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

    }