/*
Theme Name: Matt Meyer Site
Theme URI: mattmeyer.org
Author: Karl Stomberg
Author URI: none yet
Description: County Executive Matt Meyer
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: politics
Text Domain: meyer

*/


/*

Original blue: 04005F
2020 blue: 002546
Orignal secondary (green): 2b883c
2020: secondary (light blue): 2492d0

*/


html, body{
    margin: 0px;
    padding: 0px;
}


/* DESKTOP CSS */

@media (orientation: landscape){

/* DESKTOP MENU CSS */

header{
    
    height: 70px;
    width: 100%;
    position: fixed;
    left: 0%;
    top: 0%;
    z-index: 999;
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    background-color: #002546;
    
}
    
header #hamburger{

    display: none;
    
}
    
header a{
    width: auto;
    flex: 0 0 auto;
    color: #FFF;
    text-decoration: none;
}

header img{
    
    height: 40px;
    width: auto;
    margin-left: 36px;
    margin-top: 15px;
    cursor: pointer;
    display: inline-block;
    
}
    
header .menu-main-menu-container{
    
    display: flex;
    flex: 1;
    margin-right: 36px;
    
}

header ul{
    
    margin: 0px;
    width: 100%;
    text-align: right;
    
}

header li{
    
    list-style: none;
    font-size: 24px;
    display: inline-block;
    font-family: proxima-nova-condensed, sans-serif;
    font-weight: bold;
    margin-top: 20px;
    text-align: right;
    text-transform: uppercase;
    margin-left: 30px;
    
}
	
header li:last-of-type{

	background-color: #2492d0;
    padding: 7px 20px 7px 20px;
    margin-top: 10px;
    margin-left: 36px;

}

/* DESKTOP MAIN CSS */

div#main{
    
    width: 100%;
    margin-top: 70px;
    overflow-x: hidden;
    
}
    
#main #topimg img{
    
    width: 80%;
    height: auto;
    margin: auto;
    margin-top: 2vw;
    padding: 0px;
    display: block
    
}
    
/* DESKTOP HOME CSS */

div#home-content{

    width: 100%;
    background-size: auto 130%;
    background-position: bottom right;
    background-color: #2492d0;
    background-repeat: no-repeat;
	background-image: url('https://mattmeyer.org/wp-content/uploads/2020/08/walking2-square.jpg');
    
}
    
div#home-content #home-form{
    
    margin: 0px;
    padding: 72px;
    width: 40%;
    background-color: #2492d0;
    background-color: #2492d0;
    
}
    
#home-form h1{
    
    font-family: proxima-nova-condensed, sans-serif;
    font-family: proxima-nova, sans-serif;
    font-weight: 800;
	font-weight: 400;
    font-style: normal;
    font-size: 90px;
	line-height: 90px;
    color: #FFF;
    text-align: left;
    margin: 0 0 10 0px;
    padding: 0px;
    text-transform: uppercase;
	text-transform:none;
	margin-top: -5px;
    
}
    
#home-form h2{
    
    font-family: proxima-nova-condensed, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 40px;
	line-height: 40px;
    color: #FFF;
    text-align: left;
    margin: 0px;
    padding: 0px;
    text-transform: uppercase;
	margin-top: -5px;
    
}

#home-form form{
        
    margin-top: 36px;
    
}
    
#home-form form input{
        
    font-size: 40px;
    font-family: proxima-nova-condensed, sans-serif;
    
}
    
#home-form form #names{
        
    display: flex;
    margin-bottom: 20px;
    width: 100%;
    
}
    
#home-form form #mce-EMAIL{
        
    flex: 1;
    padding: 0px 5px;
    
}
    
#home-form form #mc-embedded-subscribe{
        
    display: block;
    font-size: 40px;
    font-family: proxima-nova-condensed, sans-serif;
    width: 100%;
    padding: 20px 10px;
    background-color: #002546;
    color: #FFF;
    text-transform: uppercase;
    border: #002546 2px inset;
    text-align:center;
	cursor:pointer;

}
    
/* DESKTOP PAGE CSS */

#main #page-content{
    
    min-height: 100vh;
    margin: 36px 72px 0px 72px;
    
}
    
#main .one-column{

    margin: auto !important;
    margin-top: 72px !important;
    max-width: 1344px;
	padding: 0px 72px 0px 72px;
    
}
	
#main .one-column .alignleft{

    float: left;
	margin-right: 72px;
	width: 40%;
	height: auto;
    
}
	
#main .one-column .alignright{

    float: right;
	margin-left: 72px;
	width: 40%;
	height: auto;
    
}
    
hr{
      
    width: 50%;
    margin: auto;
    border: 1px solid #2492d0;
    margin-top: 72px;
    margin-bottom: 72px;
    
}
	
#page-content .two-column{

    display: flex;
    align-items: top;
    justify-content: center;
    
}
    
#page-content .two-column .col-left, .col-right{
        
    flex: 1;
    vertical-align: middle;
    width: 50%;
    
}
    
#page-content .two-column .col-left{
    
    margin-right: 36px;
    
}
    
#page-content .two-column .col-right{
    
    margin-left: 36px;
    
}
    
#page-content .two-column img{

    max-width: 100%;
    height: auto;
    margin: auto;
    
}
	
	
/*-- QC THREE COL ADD --*/
	
#page-content .three-column{

    display: flex;
    align-items: top;
    justify-content: center;
    
}
    
#page-content .three-column .col-left, #page-content .three-column .col-right, #page-content .three-column .col-middle {
        
    flex: 1;
    vertical-align: middle;
    width: 33%;
    
}
    
#page-content .three-column .col-left{
    margin-right: 36px;
}

#page-content .three-column .col-middle{   
    margin-right: 36px;
}

#page-content .three-column .col-right{
    margin-left: 36px;
    
}
   
#page-content .three-column img{
    max-width: 100%;
    height: auto;
    margin: auto;
}

/*-- end of QC THREE COL ADD --*/

	
    
#page-content .wp-block-columns .wp-block-column:first-of-type{
    
    margin-right: 36px;
    
}
    
#page-content .wp-block-columns .wp-block-column:last-of-type{
    
    margin-left: 36px;
    
}
    
#page-content .wp-block-column img{

    max-width: 100%;
    height: auto;
    margin: auto;
    
}

#main #page-content h1{
    
    font-family: proxima-nova-condensed, sans-serif;
    font-weight: 700;
    color: #002546;
    font-size: 60px;
    margin-top: 0px;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    
}
    
#main #page-content .issue-item{
    
    background-color: #002546;
    cursor: pointer;
    transition: .2s linear all;
    margin-bottom: 36px;
	display:block;
	   
}
#main #page-content .issue-item h1 {
	font-family: proxima-nova, sans-serif;
    font-weight: 400;
    color: #002546;
    font-size: 45px;
    margin-top: 0px;
    margin-bottom: 10px;
    text-align: center;
    text-transform: none;
    
		
		
}		
    
#main #page-content .issue-item:hover{
    background-color:#2492d0;
    box-shadow: 0px 0px 20px #CCC;
    
}
    
#main #page-content a{
    text-decoration: none;
    cursor: pointer;
}  

#main #page-content button.inner-link{
    
    display: block;
    width: 100%;
    background-color: #2492d0;
    color: #FFF;
    font-family: proxima-nova-condensed, sans-serif;
    font-weight: 800;
    font-size: 48px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 16px 0px 10px 0px;
    transition: .2s linear all;
    
}
    
#main #page-content button.outer-link{
    
    display: block;
    width: 100%;
    background-color: #002546;
    color: #FFF;
    font-family: proxima-nova-condensed, sans-serif;
    font-weight: 800;
    font-size: 48px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 16px 0px 10px 0px;
    transition: .2s linear all;
    
}
    
#main #page-content button:hover{
    
    box-shadow: 0px 0px 20px #333;
    
}
    
#main #page-content h1.issue-header{
    
    display: block;
    width: 100%;
    background-color: #002546;
    color: #FFF;
    font-family: proxima-nova-condensed, sans-serif;
    font-weight: 800;
    font-size: 48px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 16px 0px 10px 0px;
    
}

#main #page-content .issue-item h1{
    
    color: #FFF;
    text-decoration: none !important;
    cursor: pointer;
    margin: 0px;
    padding: 12px 72px 12px 72px;
    
} 
    
#main #page-content .issue-item h1:first-of-type{
    
    margin-bottom: -36px;
    
}

#main #page-content li{
    
    line-height: 1.5em;
    font-size: 18px;
    font-family: Avenir, sans-serif;
    
}
    
#main #page-content li b, strong{
    
    color: #2492d0;
    
}

#main #page-content p{
    
    font-family: Avenir, sans-serif;
    font-size: 18px;
    padding: 10px 0px 10px 0px;
    line-height: 1.5em;
    text-align: justify;
    
}
	
.vlp-link-container{
		
	border-bottom: 2px solid #2492d0;
    padding-bottom: 32px;
    margin-bottom: 48px;
	
}
	
.vlp-link-image img{
	
	max-width: 40% !important;
	max-height: none !important;
	height: auto !important;
	float: left;
	padding-right: 48px;
	
}
	
.vlp-link-text-container .vlp-link-title{
	
	font-family: proxima-nova-condensed, sans-serif;
    font-weight: 800;
    color: #002546;
    font-size: 48px;
    margin-top: 0px;
    margin-bottom: 10px;
    text-align: left;
    text-transform: uppercase;
	line-height: 52px;
	
}
	
.vlp-link-text-container .vlp-link-summary{
	
	font-family: Avenir, sans-serif;
    font-size: 18px;
    padding: 10px 0px 10px 0px;
    line-height: 1.5em;
    text-align: justify;
	
}
    
#footer{
        
    width: 100%;
    background-color: #002546;
    margin-top: 72px;
    padding: 18px 0px 18px 0px;
    text-align: center;
        
}
    
#footer a{
    
    color: #FFF;
    
}
    
#footer #social-icons{
    
    display: inline-block;
    
}
    
#footer #social-icons img{
    
    display: inline-block;
    height: 32px;
    width: auto;
    margin-left: 5px;
    margin-right: 5px;
    
}
    
#footer span{
        
    font-family: proxima-nova-condensed, sans-serif;
    font-size: 24px;
    color: #FFF;
    text-transform: uppercase;
    vertical-align: bottom;
    margin-left: 32px;
        
}
    
.ui-dialog{
    
    left: 30% !important;
    width: 40% !important;
    height: auto !important;
    position: fixed !important;
    border-radius: 0px !important;
    border: none !important;
    z-index: 9999;
    padding: 0px !important;
    
}
    
.ui-widget-overlay{
    
    background: #000 !important;
    z-index: 998;
    position: fixed !important;
    opacity: .7 !important;
    
}
    
.ui-dialog-titlebar{
    
    background: none !important;
    background-color: (0, 0, 0, 0) !important;
    border: none !important;
    
}
    
.ui-dialog .ui-dialog-titlebar-close span{
    margin: 0px !important;
    margin-top: -8px !important;
    margin-left: -9px !important;
}
    
#dialog{
    
    background-color: #002546;
    padding: 0px;
        
}
    
#dialog p{

    font-family: Avenir, sans-serif;
    padding: 60px 60px 0px 60px;
    font-size: 24px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #FFF;

}
    
#dialog a{
    
    text-decoration: none;
    
}
    
#dialog a button{

    margin-top: 60px;
    display: block;
    width: 100%;
    background-color: #2492d0;
    color: #FFF;
    font-family: proxima-nova-condensed, sans-serif;
    font-weight: 800;
    font-size: 48px;
    text-transform: uppercase;
    text-align: center;
    padding: 16px 0px 10px 0px;
    border: none;

}
    
}



/* MOBILE CSS */




@media (orientation: portrait){

/* MOBILE MENU CSS */

header{
    
    width: 100%;
    height: 10vh;
    position: fixed;
    left: 0%;
    top: 0%;
    background-color: #002546;
    
}

header img{
    
    height: 6vh;
    width: auto;
    display: block;
    margin: auto;
    margin-top: 2vh;
    
}
    
header #hamburger{

    height: 6vh;
    width: 6vh;
    position: fixed;
    left: 2vh;
    top: 2vh;
    background-size: 100% 100%;
    
}

header ul{
    
    width: 100%;
    height: 90vh;
    position: fixed;
    left: 0%;
    top: 10vh;
    margin: 0px;
    border-top: 2px #FFF solid;
    display: none;
    overflow-y: scroll;
    padding: 0px;
    background-color: #002546;
	flex-direction: column;
    
}

header li{
    
    list-style: none;
    font-size: 8vw;
    font-family: proxima-nova-condensed, sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    width: 100%;
    text-align: center;
    border-top: 1px #FFF solid;
	flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
	
header li:last-of-type{

	background-color: #2492d0;

}
	
header li:last-of-type a{

	padding-top: 0px;

}

header li a{
    
    text-decoration: none;
    color: #FFF;
	padding-top: 5px;
    
}

header li ul{
    padding-left: 0px;
    width: auto;
    height: auto;
    position: static;
    border-top: none;
    display: block;
    overflow-y: hidden;
    padding-top: 30px;
}

header li ul li{
    
    font-size: 4vw;
    font-weight: 400;
    padding-top: 8px;
    padding-bottom: 8px;
    border-top: none;
    
}

/* MOBILE MAIN CSS */

div#main{
    
    width: 100%;
    margin-top: 10vh;
    overflow-x: hidden;
    
}
    
/* MOBILE HOME CSS */

div#home-content{

    width: 100%;
    background-size: auto 100vw;
    background-position: right top;
    background-repeat: no-repeat;
    padding-top: 100vw;
    margin-top: -10vh;
   background-attachment: fixed;    
	background-image: url('https://mattmeyer.org/wp-content/uploads/2020/08/walking2-square.jpg');
	}
    
div#home-content #home-form{
    
    margin: 0px;
    width: 100%;
    background-color: #2492d0;
    
}
    
#home-form h1{
    
    display: none;
    
}
    
#home-form h2{
    
    display: none;
    
}

#home-form form{
        
    padding: 18px;
    
}
    
#home-form form input{
        
    font-size: 20px;
    font-family: proxima-nova-condensed, sans-serif;
    
}
    
#home-form form #names{
        
    display: flex;
    margin-bottom: 18px;
    width: 100%;
    
}
    
#home-form form #mce-EMAIL{
        
    flex: 1;
    padding: 5px;
    
}
    
#home-form form #mc-embedded-subscribe{
        
    display: block;
    font-size: 20px;
    font-family: proxima-nova-condensed, sans-serif;
    width: 100%;
    padding: 10px;
    background-color: #002546;
    color: #FFF;
    text-transform: uppercase;
    border: #002546 2px inset;
    
}
    
/* MOBILE PAGE CSS */

#main #page-content{
    
    min-height: 100vh;
    margin: 18px 18px 0px 18px;
    
}
    
hr{
      
    width: 50%;
    margin: auto;
    border: 3px solid #2492d0;
    margin-top: 36px;
    margin-bottom: 36px;
    
}
    
#page-content .two-column, #page-content .three-column {

    display: block;
    
}
    
#page-content .two-column .col-left, .col-right {
        
    display: block;
    
}
	
#page-content .three-column .col-left, #page-content .three-column .col-right {        
    display: block;
    
}
    
#page-content .two-column img, #page-content .three-column img {

    max-width: 100%;
    height: auto;
    margin: auto;
    
}
	
	
	
	
	
.vlp-link-container{
		
	margin-top: 32px;
	margin-bottom: 32px;
	
}
	
.vlp-link-image img{
	
	max-width: 80% !important;
	max-height: none !important;
	height: auto !important;
	display: block;
	margin: auto;
	
}
	
.vlp-link-container{
		
	border-bottom: 2px solid #2492d0;
    padding-bottom: 32px;
    margin-bottom: 48px;
	z-index: -1;
	
}
	
.vlp-link-text-container .vlp-link-title{
	
	font-family: proxima-nova-condensed, sans-serif;
    font-weight: 800;
    color: #002546;
    font-size: 36px;
    margin-top: 18px;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
	line-height: 38px;
	
}
	
.vlp-link-text-container .vlp-link-summary{
	
	font-family: Avenir, sans-serif;
    font-size: 16px;
    padding: 5px 0px 5px 0px;
    line-height: 1.5em;
	text-align: center;
	
}

#main #page-content h1{
    
    font-family: proxima-nova-condensed, sans-serif;
    font-weight: 800;
    color: #002546;
    font-size: 48px;
    margin-top: 18px;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    
}
    
#main #page-content .issue-item{
    
    display: block;
    width: 100%;
    background-color: #002546;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 16px 0px 10px 0px;
    margin-top: 9px;
    margin-bottom: 9px;
    
}
    
#main #page-content .issue-item h1{
    
	font-family: proxima-nova, sans-serif;
    font-weight: 400;
    font-size: 48px;
    color: #FFF;
    text-decoration: none !important;
    cursor: pointer;
    margin: 0px;
    padding: 0px;
    font-size: 24px;
    text-align: center;
    text-transform: none;
	
	
}
    
#main #page-content a{
    text-decoration: none;
    cursor: pointer;
}  

#main #page-content button.inner-link{
    
    display: block;
    width: 100%;
    background-color: #2492d0;
    color: #FFF;
    font-family: proxima-nova-condensed, sans-serif;
    font-weight: 800;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 16px 0px 10px 0px;
    margin: 5px 0px 5px 0px;
    
}
    
#main #page-content button.outer-link{
    
    display: block;
    width: 100%;
    background-color: #002546;
    color: #FFF;
    font-family: proxima-nova-condensed, sans-serif;
    font-weight: 800;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 16px 0px 10px 0px;
    margin: 5px 0px 5px 0px;
    
}
    
#main #page-content h1.issue-header{
    
    display: block;
    width: 100%;
    background-color: #002546;
    color: #FFF;
    font-family: proxima-nova-condensed, sans-serif;
    font-weight: 800;
    font-size: 36px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 16px 0px 10px 0px;
    
}

#main #page-content li{
    
    line-height: 1.5em;
    font-size: 16px;
    font-family: Avenir, sans-serif;
    
}
    
#main #page-content li b{
    
    color: #2492d0;
    
}

#main #page-content p{
    
    font-family: Avenir, sans-serif;
    font-size: 16px;
    padding: 5px 0px 5px 0px;
    line-height: 1.5em;
    text-align: justify;
    
}
    
#footer{
        
    width: 100%;
    background-color: #002546;
    margin-top: 36px;
    padding: 18px 0px 18px 0px;
        
}
    
#footer a{
    
    color: #FFF;
    
}
    
#footer #social-icons{
    
    display: block;
    text-align: center;
    
}
    
#footer #social-icons img{
    
    display: inline-block;
    height: 32px;
    width: auto;
    margin-left: 5px;
    margin-right: 5px;
    
}
    
#footer span{
        
    display: block;
    font-family: proxima-nova-condensed, sans-serif;
    font-size: 24px;
    color: #FFF;
    text-transform: uppercase;
    margin-left: 16px;
    margin-top: 16px;
    text-align: center;    
    
}
    
.ui-dialog{
    
    left: 0% !important;
    width: 100% !important;
    height: auto !important;
    position: fixed !important;
    border-radius: 0px !important;
    border: none !important;
    z-index: 9999;
    padding: 0px !important;
    
}
    
.ui-widget-overlay{
    
    background: #000 !important;
    z-index: 998;
    position: fixed !important;
    opacity: .7 !important;
    
}
    
.ui-dialog-titlebar{
    
    background: none !important;
    background-color: (0, 0, 0, 0) !important;
    border: none !important;
    
}
    
.ui-dialog .ui-dialog-titlebar-close span{
    margin: 0px !important;
    margin-top: -8px !important;
    margin-left: -9px !important;
}
    
#dialog{
    
    background-color: #002546;
    padding: 0px;
        
}
    
#dialog p{

    font-family: Avenir, sans-serif;
    padding: 18px 18px 0px 18px;
    font-size: 16px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #FFF;

}
    
#dialog a{
    
    text-decoration: none;
    
}
    
#dialog a button{

    margin-top: 18px;
    display: block;
    width: 100%;
    background-color: #2492d0;
    color: #FFF;
    font-family: proxima-nova-condensed, sans-serif;
    font-weight: 800;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
    padding: 16px 0px 10px 0px;
    border: none;

}
    
}