/*.secondary-background { background-color: #3367D6; }*/
.secondary-background { background-color: #5197d2; }
/* class white: set font color white */
[class~="white"] { color: white !important; }
#page-header {margin-top: 50px; background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative; height: 300px;}

[class~="white"] { color: white !important; }
#page-header2 {margin-top: 50px; background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative; height: 500px;}

@media screen and (max-width: 480px) {
    #page-header { margin-top: 0px; }
}
#page-header.image:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #20292E; opacity: .4; }

#page-header .text { padding: 75px 50px 75px 50px; position: relative; z-index: 1; }
#page-header .text h1{ font-size: 36px; margin-top: 20px; margin-bottom: 10px; font-weight: 500; line-height: 1.1;}
#page-header .text:before { height: 284px; position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; background-image: url(../../images/page-header.png); background-repeat: no-repeat; background-position: right top; opacity: .6; }
#page-header .text.no-background:before { background: none; }

#page-header2 .text { padding: 160px 50px 75px 50px; position: relative; z-index: 1; }
#page-header2 .text h1{ font-size: 36px; margin-top: 20px; margin-bottom: 10px; font-weight: 500; line-height: 1.1;}
#page-header2 .text:before { height: 484px; position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; background-image: url(../../images/page-header.png); background-repeat: no-repeat; background-position: right top; opacity: .6; }
#page-header2 .text.no-background:before { background: none; }

#page-header .text2 { padding: 160px 50px 75px 50px; position: relative; z-index: 1; }
#page-header .text2 h1 { font-size: 36px; margin-top: 20px; margin-bottom: 10px; font-weight: 500; line-height: 1.1;}
#page-header .text2:before { height: 484px; position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0;  }
#page-header .text2.no-background:before { background: none; }

#page-header2 .text2 { padding: 160px 50px 75px 50px; position: relative; z-index: 1; }
#page-header2 .text2 h1 { font-size: 36px; margin-top: 20px; margin-bottom: 10px; font-weight: 500; line-height: 1.1;}
#page-header2 .text2:before { height: 484px; position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0;  }
#page-header2 .text2.no-background:before { background: none; }


#page-header .text3 { padding: 160px 50px 75px 50px; position: relative; z-index: 1; text-align: center;}
#page-header .text3 h1 { font-size: 36px; margin-top: 20px; margin-bottom: 10px; font-weight: 500; line-height: 1.1;}
#page-header .text3:before { height: 484px; position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; background-image: url(../../images/page-header.png); background-repeat: no-repeat; background-position: right top; opacity: .6; }
#page-header .text3.no-background:before { background: none; }

#page-header2 .text3 { padding: 160px 50px 75px 50px; position: relative; z-index: 1; text-align: center;}
#page-header2 .text3 h1 { font-size: 36px; margin-top: 20px; margin-bottom: 10px; font-weight: 500; line-height: 1.1;}
#page-header2 .text3:before { height: 484px; position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; background-image: url(../../images/page-header.png); background-repeat: no-repeat; background-position: right top; opacity: .6; }
#page-header2 .text3.no-background:before { background: none; }

#page-header ul.breadcrumb { padding: 0; margin-bottom: 0; list-style: none; background-color: transparent; border-radius: 0; }
#page-header ul.breadcrumb > li + li:before { color: #444444; }
#page-header ul.breadcrumb li { font-size: 16px; line-height: 30px; font-weight: 300; display: inline-block; }

#page-header2 ul.breadcrumb { padding: 0; margin-bottom: 0; list-style: none; background-color: transparent; border-radius: 0; }
#page-header2 ul.breadcrumb > li + li:before { color: #444444; }
#page-header2 ul.breadcrumb li { font-size: 16px; line-height: 30px; font-weight: 300; display: inline-block; }

#page-header ul.breadcrumb li a { font-size: 16px; line-height: 30px; color: #444444; }

#page-header ul.breadcrumb.white > li + li:before { color: white; }
#page-header ul.breadcrumb.white li a { color: white; }
#page-header ul.breadcrumb.white li a:hover { color: #20292E; }

#page-header2 ul.breadcrumb li a { font-size: 16px; line-height: 30px; color: #444444; }

#page-header2 ul.breadcrumb.white > li + li:before { color: white; }
#page-header2 ul.breadcrumb.white li a { color: white; }
#page-header2 ul.breadcrumb.white li a:hover { color: #20292E; }


@media screen and (max-width: 650px) {
    #page-header { height: 200px; margin-top: 50px;}
    #page-header .text { padding: 32px 26px 0px 26px; }
    #page-header .text h1 { font-size: 20px;  }
    #page-header .text:before { height: 200px;}
    #page-header .text2 { padding: 32px 20px 15px 26px; }
    #page-header .text2:before { height: 200px; position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0;  }
    #page-header .text2 h1 { font-size: 20px;  }

    #page-header ul.breadcrumb li { font-size: 14px; line-height: 25px;}

    #page-header .text3 { padding: 48px 20px 15px 26px; }
    #page-header .text3:before { height: 200px; position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0;  }
    #page-header .text3 h1 { font-size: 16px; text-align: center }
    #page-header .text3 ul.breadcrumb li a { font-size: 10px; line-height: 25px;}

    #page-header2 { height: 200px;}
    #page-header2 .text { padding: 32px 50px 75px 26px; }
    #page-header2 .text h1 { font-size: 30px;  }
    #page-header2 .text:before { height: 200px;}
    #page-header2 .text2 { padding: 32px 20px 15px 26px; }
    #page-header2 .text2:before { height: 200px; position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0;  }
    #page-header2 .text2 h1 { font-size: 20px;  }

    #page-header2 ul.breadcrumb li { font-size: 14px; line-height: 25px;}

    #page-header2 .text3 { padding: 18px 20px 15px 26px; }
    #page-header2 .text3:before { height: 200px; position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0;  }
    #page-header2 .text3 h1 { font-size: 16px; text-align: center }
    #page-header2 .text3 ul.breadcrumb li a { font-size: 10px; line-height: 25px;}


    #page-header ul.breadcrumb li a { font-size: 12px; line-height: 1;}
}