﻿/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {

    h3 {
        font-size:18px;
        line-height:18px;
    }
    p {
         font-size:15px;
         line-height:19px;
    }
   
    
    .btn {
        font-size:14px;
        line-height:14px;
        padding:10px 20px 10px 20px;
    }

    #footer {
        padding-top:10px;
    }

        #footer p {
            font-size:14px;
            line-height:14px;
        }
        #footer .social-icons {
            margin-top:20px;
            margin-bottom:20px;
        }
    #footer-links {
        font-size:12px;
        padding-bottom:25px;
    }
/*  Content Page Styles  */
    h1 {
        font-size:32px;
        line-height:32px;
    }
    .header {
        padding-left:20px;
        padding-right:20px;
    }
    .left-content {
        max-width:675px;
        padding-left:20px;
        padding-top:20px;
    }
    .right-content {
        max-width:300px;
        margin-left:30px;
        padding-right:20px;
        padding-top:20px;
    }
    .right-promo {
        max-width:100%;
        height:auto;
    }
        .right-promo img {
            max-width:100%;
            
        }
    #pchf-home-news-carousel {
        height:870px;
    }
        #pchf-home-news-carousel .news-content-cutoff {
            height:678px;
        }
   
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Tablet Portrait (768px) */
@media only screen and (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
    
    h3 {
        font-size:18px;
        line-height:18px;
    }
    p {
         font-size:15px;
         line-height:22px;
    }
    .feature-body-copy {
         font-size:18px;
         line-height:22px;
         margin-bottom:20px;
         padding-bottom:0px;
    }
    
    .btn {
        font-size:14px;
        line-height:14px;
        padding:10px 20px 10px 20px;
    }
  
    #footer {
        padding-top:10px;
    }
        #footer img {
            margin-bottom:15px;
        }
        #footer p {
            font-size:14px;
            line-height:14px;
        }
        #footer .social-icons {
            margin-top:20px;
            margin-bottom:20px;
        }
    #footer-links {
        font-size:12px;
        padding-bottom:25px;
    }
    .header {
        padding-left:20px;
        padding-right:20px;
    }
    #header-logo-text {
        font-size:18px;
    }
    .menu a {
        color: #fff;
        display: inline-block;
        font-family: "hurme_geometric_sans_2SBd";
        font-size: 13px;
        margin-right: 14px;
        padding: 15px 0;
        text-transform: uppercase;
    }
    .left-content {
        clear: left;
        display: inline-block;
        float: left;
        font-family: "hurmegeometricsans2_regularRg";
        font-size: 23px;
        line-height: 32px;
        max-width: 500px;
        padding-bottom: 30px;
        padding-top: 20px;
        padding-left:20px;
    }
    .right-content {
        clear: right;
        display: inline-block;
        float: right;
        margin-left: 35px;
        padding-bottom: 30px;
        padding-top: 20px;
        width: 220px;
        padding-right:20px;
    }
    .right-promo {
        margin-bottom:30px;
        width:100%;
        height:auto;
    }
    .right-promo img{
        width:100%;
    }
    .right-content .btn {
        margin-bottom:30px;
    }
    .header-sub-menu {
        /*width:150px;
        max-width:150px;
        min-width:150px;*/
    }
    .header-dropdown {
        /*width:200px;
        max-width:200px;
        min-width:200px;*/
        min-width:250px;
    }
    .header-dropdown a {
        padding-left:15px !important;
        display:block;
        width:250px;
    }
    #dropdown-about {
        margin-left: -20px;
    }
    #dropdown-supportus {
        margin-left: 50px;
    }
    #dropdown-whatwedoandwhy {
        margin-left:248px;
    }
    #dropdown-volunteering {
        margin-left:405px;
    }

    #dropdown-about-ourpeople {
        margin-left: 250px;
        margin-top: -303px;
    }
    #dropdown-about-partners {
        margin-left: 250px;
        margin-top: -204px;
    }
    #dropdown-supportus-events {
        margin-left: 250px;
        margin-top: -55px;
    }

}


/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Phone Landscape (480px) */
@media only screen and (min-width: 480px) and (max-width: 960px) and (orientation: landscape) {
    
    h3 {
        font-size:18px;
        line-height:18px;
    }
    p {
         font-size:15px;
         line-height:22px;
    }
    .feature-body-copy {
         font-size:18px;
         line-height:22px;
         margin-bottom:20px;
         padding-bottom:0px;
    }
    
    
    .btn {
        font-size:14px;
        line-height:14px;
        padding:15px 20px 15px 20px;
    }
    
        #footer p {
            font-size:9px;
            line-height:12px;
        }
    #footer-initiative {
        width:60%;
        margin-left:20%;
        margin-right:20%;
    }
        #footer .social-icons {
            margin-top:20px;
            margin-bottom:20px;
        }
    #footer-links {
        display:none;
    }

    .header {
        padding-left:5%;
        padding-right:5%;
    }
    #header-logo-text {
        font-size:20px;
        text-align:center;
        margin-top:15px;
        display:block;
        float:none;
    }
    #header-patronage {
        margin-left:auto;
        margin-right:auto;
        display:block;
        float:none;
        text-align:center;
    }
    #menu-left, #menu-right {
        display:none !important;
    }
    #menu-mobile {
        
    }
    #mobile-menu-toggle {
        display:block;
        width:32px;
        height:29px;
        background-image:url('../images/mobile-menu-icon.png');
        margin-top:7px;
        margin-bottom:7px;
        float:right;
        background-position:0px 0px;
    }
    .header > .open > .dropdown-menu {
        display:block !important;
    }

    .header > .open > #mobile-menu-toggle {
        background-position:0px -29px !important;
    }
    #mobile-menu-toggle[aria-expanded="true"] {
        background-position:0px -29px !important;
    }
    .dropdown-toggle:hover + .dropdown-menu {
		 display: none;
	}

    .header-dropdown-mobile {
        background-color: #006c99;
        color:#FFF;
        font-family: 'hurme_geometric_sans_2SBd';
        font-size:16px;
        margin-top:0px;
        border-radius:0px;
        min-width:100%;
        max-width:100%;
        width:100%;
        box-shadow:none;
        border:0px;
        outline:0;
        padding-top:0px;
        top:207px !important;
    
    }
        .header-dropdown-mobile a {
            background-color:#0087bf;
            color:#FFF !important;
            font-family: 'hurme_geometric_sans_2SBd';
            font-size:14px;
            display:block;
            padding:7px 15px 7px 15px;
            width:100%;
            border-bottom:1px #00aeef solid;
            text-transform:uppercase;
        }
    #home-feature-carousel {
        width:100%;
        max-width:100%;
        height:auto;
    }
        #home-feature-carousel img {
            width:100%;
            max-width:100%;
            height:auto;
        }
    .home-feature-slide {
        height:auto;
    }
    .left-content {
        width:100%;
        max-width:100%;
        display:block;
        clear:both;
        padding-left:5%;
        padding-right:5%;
        padding-top:20px;
        padding-bottom:0px;
    }
        .left-content p, .left-content h3 {
            margin-bottom:20px;
        }
        .left-content img {
            max-width:100%;
        }
    #content-header {
        height:120px;
        width:100%;
        max-width:100%;
        background-size:cover;
    }
    .content-header-overlay {
        padding-top:40px;
    }
    
    #content-header h1 {
        font-size:20px;
        line-height:20px;
    }
    .right-content {
        width:100%;
        max-width:100%;
        display:block;
        clear:both;
        padding-left:5%;
        padding-right:5%;
        padding-top:20px;
    }
    .news-date {
        font-size: 16px;
        line-height: 12px;
    }
    .news-content img {
        max-width:100%;
    }
    #pchf-home-news-carousel .news-readmore {
        width:100%;
        max-width:100%;
    }
    .btn {
        font-size: 12px;
        line-height: 14px;
        padding: 13px 7px;
    }
    .home-news-nav-text {
        font-size:14px;
    }
    #pchf-home-news-carousel .news-content-cutoff {
        height:250px;
    }
    #pchf-home-news-carousel {
        height:495px;
    }
    .right-content .btn {
        margin-bottom:20px;
    }
    .right-promo, .right-promo img {
        width:100%;
        max-width:100%;
        height:auto;
        
    }
    .right-promo {
        margin-bottom:20px;
    }
    .rh-menu-item {
        font-size:15px;
    }

   
}


/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Phone Portrait (320px) */
@media only screen and (max-width: 479px) {
    

    h3 {
        font-size:18px;
        line-height:18px;
    }
    p {
         font-size:15px;
         line-height:22px;
    }
    .feature-body-copy {
         font-size:18px;
         line-height:22px;
         margin-bottom:20px;
         padding-bottom:0px;
    }
    
    
    .btn {
        font-size:14px;
        line-height:14px;
        padding:15px 20px 15px 20px;
    }
    
        #footer p {
            font-size:9px;
            line-height:12px;
        }
    #footer-initiative {
        width:60%;
        margin-left:20%;
        margin-right:20%;
    }
        #footer .social-icons {
            margin-top:20px;
            margin-bottom:20px;
        }
    #footer-links {
        display:none;
    }

    .header {
        padding-left:5%;
        padding-right:5%;
    }
    #header-logo-text {
        font-size:20px;
        text-align:center;
        margin-top:15px;
        display:block;
        float:none;
    }
    #header-patronage {
        margin-left:auto;
        margin-right:auto;
        display:block;
        float:none;
        text-align:center;
    }
    #menu-left, #menu-right {
        display:none !important;
    }
    #menu-mobile {
        
    }
    #mobile-menu-toggle {
        display:block;
        width:32px;
        height:29px;
        background-image:url('../images/mobile-menu-icon.png');
        margin-top:7px;
        margin-bottom:7px;
        float:right;
        background-position:0px 0px;
    }
    .header > .open > .dropdown-menu {
        display:block !important;
    }

    .header > .open > #mobile-menu-toggle {
        background-position:0px -29px !important;
    }
    #mobile-menu-toggle[aria-expanded="true"] {
        background-position:0px -29px !important;
    }
    .dropdown-toggle:hover + .dropdown-menu {
		 display: none;
	}

    .header-dropdown-mobile {
        background-color: #006c99;
        color:#FFF;
        font-family: 'hurme_geometric_sans_2SBd';
        font-size:16px;
        margin-top:0px;
        border-radius:0px;
        min-width:100%;
        max-width:100%;
        width:100%;
        box-shadow:none;
        border:0px;
        outline:0;
        padding-top:0px;
        top:207px !important;
    
    }
        .header-dropdown-mobile a {
            background-color:#0087bf;
            color:#FFF !important;
            font-family: 'hurme_geometric_sans_2SBd';
            font-size:14px;
            display:block;
            padding:7px 15px 7px 15px;
            width:100%;
            border-bottom:1px #00aeef solid;
            text-transform:uppercase;
        }
    #home-feature-carousel {
        width:100%;
        max-width:100%;
        height:auto;
    }
        #home-feature-carousel img {
            width:100%;
            max-width:100%;
            height:auto;
        }
    .home-feature-slide {
        height:auto;
    }
    .left-content {
        width:100%;
        max-width:100%;
        display:block;
        clear:both;
        padding-left:5%;
        padding-right:5%;
        padding-top:20px;
        padding-bottom:0px;
    }
        .left-content p, .left-content h3 {
            margin-bottom:20px;
        }
        .left-content img {
            max-width:100%;
        }
    #content-header {
        height:120px;
        width:100%;
        max-width:100%;
        background-size:cover;
    }
    .content-header-overlay {
        padding-top:40px;
    }
    
    #content-header h1 {
        font-size:20px;
        line-height:20px;
    }
    .right-content {
        width:100%;
        max-width:100%;
        display:block;
        clear:both;
        padding-left:5%;
        padding-right:5%;
        padding-top:20px;
    }
    .news-date {
        font-size: 16px;
        line-height: 12px;
    }
    .news-content img {
        max-width:100%;
    }
    #pchf-home-news-carousel .news-readmore {
        width:100%;
        max-width:100%;
    }
    .btn {
        font-size: 12px;
        line-height: 14px;
        padding: 13px 7px;
    }
    .home-news-nav-text {
        font-size:14px;
    }
    #pchf-home-news-carousel .news-content-cutoff {
        height:250px;
    }
    #pchf-home-news-carousel {
        height:495px;
    }
    .right-content .btn {
        margin-bottom:20px;
    }
    .right-promo, .right-promo img {
        width:100%;
        max-width:100%;
        height:219px;
        
    }
    .right-promo {
        margin-bottom:20px;
    }
    .rh-menu-item {
        font-size:15px;
    }
    #shift-table{
        max-width:100%;
    }
    #shift-table td {
        padding: 10px 5px 10px 0px;
        font-size:12px;
        text-align:center;
    }
    #volunteering-form .btn{
        width:100%;
        margin-bottom:20px;
    }
    #volunteering-form .right-content{
        display:none;
    }
}


