/*
Theme Name:	Michael Lavarch
*/


.category-articles .page-nav,
.category-articles .speeches,
.category-speeches .articles,
.category-articles .test,
.category-speeches .test,
.category-speeches .page-nav,
.home .speeches{
    display: none;
}

input{
-webkit-appearance: none;
-moz-appearance: none;
	border-radius: 0;
}

*{
    margin:0;
    padding:0;
}
body{
    background-color:#ededed;
    font-family:"Montserrat";
}
h3, h2{
    font-family:'forza';
}
.bold-text{
    font-weight:700;
}
/*top mobile stuff*/
.mobile-content{
    position:fixed;
    user-select:none;
    z-index:12;
    display:none;
}
.ml-square{
    background:url(images/ml-logo-mob.svg) center no-repeat;
    background-size:40px;
    width:40px;
    height:40px;
    background-color:#88d6f8;
    padding:13px;
}
.open-mob-menu,
.close-mob-menu{
    color:#fff;
    background-color:#2d3c59;
    padding:15.3px;
    font-size:25px;
    cursor:pointer;
    height:35px;
    width:35px;
    line-height:37px!important;
    text-align:center;
}
.close-mob-menu{
    position:fixed;
    z-index:15;
}
.mob-icon-pos{
    float:left;
}
/*navigation header*/
.navigation-header{
    width:100%;
    height:80px;
    background-color:#88d6f8;
    position:relative;
}
.navigation-header img{
    width:125px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.main-nav{
    width:280px;
    height:100%;
    background-color:#2d3c59;
    position:fixed;
    font-size:16px;
}
.main-nav ul{
    border-bottom:1px solid #344666;
/*     padding-top:60px; */
}
.main-nav li{
    margin:2px 0;
}
.main-nav li a{
    font-family: "Montserrat";
}
.current_page_item > a,
.current-menu-item > a{
    background-color: #26324a;
    color: #88d6f8!important;
}

.current_page_item > a::before,
.current-menu-item > a::before{
    opacity:1!important;
}

.main-nav i{
    font-size:35px;
    vertical-align:middle;
    padding-right:15px;
}
#menu-menu a:not(.button1){
    padding:13px;
    color:#546ea1;
    transition:.2s;
    position:relative;
    text-decoration:none;
/*    transform:translatex(-55px);*/
    display:block;
    text-transform: uppercase
}
#menu-menu a:not(.button1)::before{
    content:'';
    background-color:#88d6f8;
    width:3px;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    opacity:0;
    transition:.2s;
}
#menu-menu a:not(.button1):hover{
    background-color:#26324a;
    color:#88d6f8;
/*    transform:translatex(0);*/
}
#menu-menu a:not(.button1):hover:before{
    opacity:1;
}
#menu-menu li:nth-child(2){
    display:none;
}
.gform_button{
    position:static!important;
    width:180px!important;
    text-transform:uppercase;
    padding:15px!important;
    float:left;
}
.button1,
.gform_button{
    width:calc(100% - 30%);
    color:#fff;
    margin:0 auto;
    text-align:center;
    position:absolute;
    bottom:70px;
    right:-50%;
    left:-50%;
    padding:15px;
    background-color:#88d6f8;
    border-radius:3px;
    box-shadow:0 10px 15px 0 rgba(0,0,0, .05);
    cursor:pointer;
    transition:.2s;
    text-decoration:none;
}
.button1:hover{
    box-shadow:0 15px 20px 0 rgba(0,0,0, .13);
}
.gform_button:hover{
    box-shadow:0 15px 20px 0 rgba(0,0,0, .05);
}
.button2{
    display:block;
    padding:15px;
    width:calc(100% - 20%);
    margin:10px auto;
    border:1px solid #546ea1;
    font-size:16px;
    border-radius:3px;
    transition:.2s;
    color:#546ea1;
    text-decoration:none;
}
.button2:hover{
    background-color:#344666;
    border:1px solid transparent;
}
/*bio section & content*/
.bio-section{
    width:380px;
    height:100%;
    background-color:#26324a;
    text-align:center;
    color:#546ea1;
    position:fixed;
    margin-left:280px;
}
.bio-section p{
    padding:20px;
    font-size:16px;
    font-weight:400;
    line-height:32px;
}
.bio-section h3{
    padding:5px;
    font-size:20px;
    font-weight:700;
    letter-spacing:1px;
}
.bio-image{
    background:url(images/IMG_0232.JPG) center no-repeat;
    background-size:cover;
    width:130px;
    height:130px;
    border-radius:50%;
    margin:80px auto 20px auto;
    border:2px solid #fff;
}


/*page content*/
#content{
    width:calc(100% - 660px);
    margin-left:660px;
    position:absolute;
}
.bio-section-page{
    display:none;
}
.page-title{
    color:#a7a9ac;
    font-size:14px;
    margin:0 0 0 20px;
    text-transform:uppercase;
    letter-spacing:1px;
}
.page-nav{
    width:calc(100% - 660px);
    height:60px;
    background-color:#fff;
    position:fixed;
    bottom:0;
    right:0;
    text-align:center;
    line-height:60px;
    font-size:16px;
    font-weight:600;
    border-top:1px solid #d1d3d4;
    color:#808285;
    overflow-x:scroll;
    -webkit-overflow-scrolling:touch;
    z-index:10;
}
.page-nav ul{
    margin:0 auto;
    user-select:none;
    width:1000px;
}
.page-nav::-webkit-scrollbar{
    height:0;
}

.page-nav li{
    display:inline-block;
    margin:0 20px;
}
.page-item{
    display:block;
    cursor:pointer;
    position:relative;
    transition:.2s;
}
.page-item::before{
    content:'';
    position:absolute;
    width:100%;
    height:0;
    background-color:#88d6f8;
    padding:0 15px;
    right:-50%;
    left:-50%;
    margin:0 auto;
}
.active-link::before{
    content:'';
    position:absolute;
    width:100%;
    height:2px;
    background-color:#88d6f8;
    padding:0 15px;
    right:-50%;
    left:-50%;
    margin:0 auto;
}
.active-link{
    color:#88d6f8!important;
}
.page-item::after{
    content:'';
    position:absolute;
    border:5px solid transparent;
    border-top:5px solid #88d6f8;
    margin:0 auto;
    left:45%;
    top:2px;
    opacity:0;
}
.active-link::after{
    content:'';
    position:absolute;
    border:5px solid transparent;
    border-top:5px solid #88d6f8;
    margin:0 auto;
    opacity:1;
    left:45%;
    top:2px;
}
/*
on-page navigation for the CV
*/
@media(hover){
    .page-item{
        display:block;
        cursor:pointer;
        position:relative;
        transition:.2s;
    }
    .page-item::before{
        content:'';
        position:absolute;
        width:100%;
        height:0;
        background-color:#88d6f8;
        padding:0 15px;
        right:-50%;
        left:-50%;
        margin:0 auto;
    }
    .active-link::before{
        content:'';
        position:absolute;
        width:100%;
        height:2px;
        background-color:#88d6f8;
        padding:0 15px;
        right:-50%;
        left:-50%;
        margin:0 auto;
    }
    .page-item::after{
        content:'';
        position:absolute;
        border:5px solid transparent;
        border-top:5px solid #88d6f8;
        margin:0 auto;
        left:45%;
        top:2px;
        opacity:0;
    }
    .active-link::after{
        content:'';
        position:absolute;
        border:5px solid transparent;
        border-top:5px solid #88d6f8;
        margin:0 auto;
        opacity:1;
        left:45%;
        top:2px;
    }
    .page-item:hover:before{
        height:2px;
    }
    .page-item:hover:after{
        opacity:1;
    }
    .page-item:hover{
        color:#88d6f8;
    }
}
.page-main{
    max-width:800px;
    margin:0 auto 50px auto;
    position:relative;
}
.page-main p{
   padding:20px 0 0;
   color:#a7a9ac;
   line-height:28px;
}
.page-id-90 .page-main p{
	padding: 20px 2.5% 10px
}
.page-main .timeline-container p{
	margin-left:-30px
}
.page-bio-buffer{
    width:calc(100% - 40px);
}
/*
.category-articles .cv-content,
.page-id-10 .cv-content{
    display:none;
}
*/
/*
CV tab structures
used for governmental boards & community service
*/
.summary-tab{
/*    margin:30px 20px;  */
    margin:30px auto;
    height:100px;
    width:calc(100% - 40px);
    max-height:120px;
    background-color:#fff;
    position:relative;
    display:table;
}
.date{
    width:110px;
    height:100%;
    display:table-cell;
    vertical-align:middle;
    background-color:#88d6f8;
    position:relative;
    left:0;
}
.date-position{
    position:absolute;
}
.date p{
    color:#fff;
    text-align:right;
    padding:10px 5px 10px 10px;
    font-size:16px;
    font-weight:700;
    line-height:32px;
}
.summary{
    width:calc(100% - 110px);
    position:relative;
    height:100%;
    float:right;
    background-color:#fff;
}
.summary p{
    padding:10px;
    font-size:16px;
    font-weight:400;
    color:#a7a9ac;
    line-height:32px;
}


/*
employment timeline 
The timeline pieces come together on their own just by 
adding another summary-tab to the HTML

these are modifications of the code above
*/
.timeline-tab{
/*    margin:30px 20px;  */
    margin:30px auto;
    height:100px;
    width:100%;
    max-height:120px;
    position:relative;
    display:table;
}
.timeline-container{
    padding:25px;
    margin-left:30px;
}
.timeline-container h3{
    color:#a7a9ac;
}
.timeline{
    margin:40px 0;
}
.timeline::before{
    content:'';
    width:8px;
    height:150%;
    position:absolute;
    background-color:#88d6f8;
    left:-10px;
    border-radius:10px;
}
/*
ensures that the last node in the timeline will not have a blue 
line extending past it
*/
.timeline-container > .timeline:last-of-type::before{
    content:'';
    height:50%;
}
.timeline-date{
    width:118px;
    height:100%;
    display:table-cell;
    vertical-align:middle;
    position:absolute;
    left:-15px;
    line-height:32px;
}
.timeline-date p{
    color:#a7a9ac;
    text-align:right;
    padding:35px 10px 10px 30px;
    font-size:16px;
    font-weight:700;
    left:15px;
    line-height:32px;
}
/*circular node*/
.timeline-date p::before{
    content:'';
    position:absolute;
    width:40px;
    height:40px;
    background-color:#88d6f8;
    left:-10px;
    border-radius:50%;
}
.timeline-date p::after{
    content:'';
    position:absolute;
    width:20px;
    height:20px;
    background-color:#ededed;
    left:0;
    top:45px;
    border-radius:50%;
}
/*text next to the date*/
.timeline-summary{
    width:calc(100% - 120px);
    position:relative;
    height:100%;
    float:right;
}
.timeline-summary p{
    padding:10px;
    font-size:16px;
    font-weight:400;
    color:#a7a9ac;
    padding-top:33px;
    padding-bottom:33px;
    line-height:32px;
}
.employment, .gov-boards, .community-serv{
    display:none;
}

/*
Article modifications
-modifications of the CV tabs (not the employment timeline)
*/
.home .articles,
.page-id-53 .articles{
    display:none;
}
.article-summary p{
    padding:0;
    padding-left:10px;
    padding-bottom:10px;
    font-size:15px;
    float:left
}
.article-summary{
    float:none;
    margin-left:10px;
    width:calc(100% - 25%);
    display:inline-block;
}
.article-tab{
    background-color:#fab074;
    width:10px;
}
.feature-img{
    height:inherit;
    width:20%;
    float:right;
    object-fit:cover;
    object-position:center;
}
.article-content{
    box-shadow:0 5px 10px 0 rgba(0,0,0,.05);
    transition:.2s;
}
.article-content:hover{
    box-shadow:0 7px 20px 0 rgba(0,0,0,.07);
}
.article-button{
    font-weight:400;
    font-size:16px;
    color:#fab074;
    text-decoration:none;
    position:absolute;
    display:flex;
    bottom:10px;
    left:10px;
    margin-left:10px;
}
.article-link{
    position:absolute;
    width:100%;
    height:100%;
    z-index:2;
    transition:.2s;
}
.article-link:hover ~ .article-button,
.article-link:focus ~ .article-button{
    text-decoration:underline;
}

/*contact page*/
.gfield_label{
    display:none;
}
.contact li{
    list-style:none;
}
.contact li:nth-child(-n+4){
    display:inline-block;
}
.contact{
    text-align:center;
    margin:0 auto;
    content:'';
    display:table;
    clear:both;
    width:100%;
}
.contact .gform_wrapper {
    margin: 20px 0 0;
}
.contact input{
    padding:8px;
    width:363px;
    margin:10px;
    outline:none;
    border:none;
    font-size:16px;
	font-family:"montserrat";
}
.contact textarea{
    width:770px;
    height:300px;
    resize:none;
    outline:none;
    border:none;
    margin:10px;
    padding:8px 5px;
    white-space:normal;
    font-family:"montserrat";
    font-size:16px;
}
.contact textarea::placeholder,
.contact input::placeholder{
    color:#a7a9ac;
}
.gform_validation_error textarea{
    background-color:#ffd1d8;
    border:1px solid red;
}
.gform_validation_error input:not(.gform_button){
    border:1px solid red;
}
.gform_validation_error input:not(.gform_button)::placeholder,
.gform_validation_error textarea::placeholder{
    color:red;
    position:relative;
}
.validation_error{
    font-size:14px;
    color:red;
    padding:10px;
}
.validation_message{
    display:none;
}

/*speeches page */
.page-id-90 .bio-section-page h3, .page-id-90 .bio-section-page p{
	display: none;
}
.mejs-container {
	max-width: 95% !important;
    margin: 0 2.5% !important;
}
.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
    background: #2d3c59 !important;
}

/*media page*/
.page-id-92 .bio-section-page h3, .page-id-92 .bio-section-page p{
	display: none;
}

.page-id-92 .page-main p{
	padding: 20px 2.5% 0
}

/*responsive stuff*/
@media (max-width:1460px){
    #content{
        width:calc(100% - 280px);
        margin-left:280px;
        position:absolute;
    }
    .short-bio{
        display:none;
    }
    .bio-section{
        display:none;
    }
    .page-nav{
        left:280px;
        width:calc(100% - 280px);
    }
     .bio-section-page{
        display:block;
    }
    .bio-section-page p,
    .bio-section-page h3{
        padding:10px;
        text-align:center;
        color:#939598;
    }
	.bio-section-page h3{
		display:none
	}
    .bio-section-page p{
        font-size:16px;
        line-height:32px;
    }
    .bio-page{
        display:none;
    }
}
@media (max-width:1100px){
    .contact{
        width:590px;
    }
    .contact textarea{
        width:560px;
    }
    .contact input{
        width:258px;
    }
}
@media (max-width:920px){
    .contact{
        width:400px;
    }
    .contact textarea{
        width:445px;
    }
    .contact input{
        width:200px;
    }
}
@media (max-width:800px){
    .main-nav{
        width:100%;
        height:calc(100% + 60px);
        z-index:11;
        display:none;
    }
    .page-title{
        margin-top:0;
    }
	.page-id-53 .page-title-output{
		display:block;
	}
 	.page-id-8 .page-title-output{ 
		margin-top: -50px
	}
    .mobile-content{
        display:block;
    }
    .home .page-nav,
    .page-id-53 .bio-section-page,
    .category-articles .bio-section-page,
    .page-id-10 .bio-section-page,
	.page-id-90 .bio-section-page,
	.page-id-92 .bio-section-page{
        display:none;
    }
    .button1{
        bottom:100px;
    }
    .navigation-header{
        display:none;
    }
    .main-nav ul{
        border-bottom:none;
        margin-top:68px;
    }
    #content{
        width:100%;
        margin-left:0;
        position:absolute;
        margin-bottom:50px;
    }
    .page-main{
        margin: 105px auto 0 auto;
    }
    .page-nav{
        left:0;
        width:100%;
    }
    .page-nav > ul > li:nth-child(1){
        display:none;
    }
    .page-nav ul{
        margin-left:-70px;
    }
    #menu-menu li:nth-child(2){
        display:block;
    }
    /*.main-nav li{
        margin:30px 0;
    }*/
    .contact{
        width:385px;
    }
    .contact textarea{
        width:355px;
    }
    .contact input{
        width:350px;
    }
    .contact li:nth-child(-n+4){
        display:block;
    }
}
@media (max-width:600px){
.mejs-container {
    max-width: 90% !important;
    margin: 0 5% !important;
}
	.page-id-90 .page-main p, .page-id-92 .page-main p {
    padding: 20px 5% 10px;
}
}
@media (max-width:450px){
    .article-summary p{
        padding:10px;
    }
    .speeches-layout{
        padding-top:0!important;
		background: none
    }
    .speeches-tab{
        position:relative;
        display:table-cell!important;
    }
    .article-summary{
        margin-left:0;
        width:100%;
        padding-top:205px;
        padding-bottom:35px;
        position:relative;
    }
    .article-tab{
        display:none;
    }
    .feature-img{
        height:200px;
        width:100%;
        position:absolute;
        top:0;
        left:0;
    }
    .contact{
        width:300px;
    }
    .contact textarea{
        width:300px;
    }
    .contact input{
        width:300px;
    }
}
@media (max-width:410px){
    .timeline::before{
        height:140%;
    }
}