/* ELECTA */
/* BRANDING */
.site-description {
    font-weight: bold;
    color: #a40c35;
}

.site-branding {
    position: relative;
    max-height: 16em;
    padding: 0;
}

.site-branding img {
    width: auto;
    margin: 0 auto;
}

/* tightens top nav area by logo */
.site-description {
    display: none;
}

/* NAVIGATION */
.site-header {
    width: 200px;
    background:    -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,.59) 82%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,.59) 82%,rgba(255,255,255,0) 100%);
    background:         linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,.59) 82%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}

.site-header-inner {
    background-color: transparent;
    box-shadow: none;
    /* tighten top logo area */
    padding: 0 0 50px;
}

/* page posts nav */
.site-main .comment-navigation, .site-main .paging-navigation, .site-main .post-navigation {
    margin: 30px 0 0;
    width: 100%;
}

/* typography */
h1, h1 a, .electa-blocks-post-a {
    font-weight: 600; 
}

.electa-blocks-post .entry-header h3 {
    font-size: 20px;
}

/* more white space around the menu */
#main-menu {
    padding: 1em 0;
}

/* center the nav links*/
.main-navigation a {
    text-align: center;
    border: none;
}

/* split the menu */
.menu:before, #menu-item-3011:before, #menu-item-2128:before {
    font-size: 1.3em;
    font-weight: bold;
    display: block;
    text-align: center;
    color: #a40c35;
}

li#menu-item-3011, #menu-item-2128 {
    padding-top: 3em;
}

.menu:before {
    content: 'SPECIALIZATION';
}

/*#menu-item-3011:before {
    content: 'LOCATION';
}

#menu-item-2128:before {
    content: 'CLASSES';
}*/

#menu-item-3011:before {
    content: 'LOCATION';
}

#menu-item-2128:before {
    content: 'CLASSES';
}

#menu-item-2128 .menu-dropdown-btn {
    margin-top: 4.5em;
}

/* meta on pages */
.entry-meta {
    display: none;
}

/* PAGES */
/* main landing page*/
.blocks-wrap.masonry {
    display: flex;
    height: auto !important;
}

/*.electa-blocks-post-a:first-of-type {
    cursor: none;
}*/

/* sets the first message to just an arrow */
article#post-1350 a:hover {
    cursor: initial;
}

.site-content {
    margin-left: 225px;
}

.home .site-content {
    margin-left: 200px;
}

/* 4 column */
.blocks-wrap.masonry article {
    width: calc(100%/4);
    height: 32vh;
}

.home-loop-columns-four .electa-blocks-post {
    width: calc(100%/4);
}

/* welcome message */
#post-1350 a.electa-blocks-post-a {
    background: transparent;
}

.blocks-wrap .post:first-child:hover {
    background-size: auto 110%;
}

.electa-blocks-post-a {
    background-color: rgba(0, 0, 0, 0.88);
}

/*.home article:hover {
    background: #222 !important;
}*/

.electa-blocks-post .entry-header h3 {
    font-weight: 600;
}

/* archives/specialization page and single page */
.content-area, .widget-area {
    padding: 35px 25px;
    box-shadow: none;
}

.archive .page-header {
    padding: 0;
}

.archive .page-header h1,
.archive .jet-port-title,
.archive .jetpack-portfolio-shortcode,
#secondary {
    display: none;
}

.archive article {
    max-width: 48.2%;
    height: 20rem;
}

.archive .content-area {
    width: 100%;
}

.archive #main {
    display: flex;
    flex-wrap: wrap;
}

.archive .not-found {
    width: 75%;
}

#main article:nth-of-type(2n) {
    margin-left: 3.1em;
}

/* styling search page */
.search #main article:nth-of-type(2n) {
    margin-left: 0;
}

.page-title, .entry-title {
    font-size: 20px;
}

/* styling on page*/
.page .entry-header {
    display: none;
}

/* styling fpr placeholder section pages */
.page .content-area {
    width: 100%;
}

.page-id-167 .site-content, 
.page-id-251 .site-content {
    margin-left: 200px;
    background: #020202;
}

.page-id-167 .content-area,
.page-id-251 .content-area {
    max-width: 1500px;
    padding: 0;
}

.page-id-167  img.aligncenter,
.page-id-251  img.aligncenter {
    zoom: 2.5;
}

/* styling on single project pages */
.page-header,
.page-title {
    text-transform: uppercase;
}

.page-header,
.entry-header,
.entry-header.pc-text {
    border-bottom: none;
}

.entry-header {
    margin: 0;
}

.student {
    display: flex;
    justify-content: space-between;
}

.desc {
    display: flex;
    padding-right: 1.5em;
    flex-flow: column;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.desc p:last-child {
    margin-top: auto;
}

.student img {
    position: relative;
    bottom: 3.3em;
    max-width: initial;
}

/* related grads via jetpack */
.entry-content h3 {
    font-size: 1.5em;
    margin-top: 3em;
    font-weight: 600;
}

.single .portfolio-entry-title {
    display: none;
}

.jetpack-portfolio-shortcode {
    display: flex;
    justify-content: space-between;
}

/* related posts from theme? */
#jp-relatedposts {
    display: none !important;
}

/* FOOTER */
.site-info {
    display: none;
}

/* widgets */
.widget-area .widget .widget-title {
    margin: 0;
}

@media screen and (min-width: 1663px) {
    .content-area {
        width: 100%;
    }

    .archive .content-area {
        max-width: 1415px;
    }

    .page-id-167  img.aligncenter,
    .page-id-251  img.aligncenter {
        -moz-transform: scale(1.8);
        height: 70vh;
    }
    
        .electa-blocks-post .entry-header h3 {
    font-size: 26px;
}

}

@media screen and (max-width: 1366px) {
    .electa-blocks-post .entry-header h3 {
        font-size: 27px;
    }

    .archive article {
        max-width: 47.2%;
    }
}

@media screen and (max-width: 1024px) {
    /* 3 column */
    .blocks-wrap.masonry article {
        width: calc(100%/3);
        height: 34vh;
    }

    .home-loop-columns-four .electa-blocks-post {
        width: calc(100%/3);
    }

    .electa-blocks-post .entry-header h3 {
        font-size: 22px;
    }

    .archive article {
        width: 46.5%;
        height: 23em;
    }

    .single .content-area {
        width: 100%;
        max-width: 97%;
    }

    .desc {
        width: 50%;
    }
}

@media screen and (max-width: 812px) {
    .electa-blocks-post .entry-header h3 {
        font-size: 11px;
    }

    #main article:nth-of-type(2n) {
        margin-left: 0;
    }

    .archive article {
        width: 100%;
        max-width: 100%;
        height: 18em;
    }

    .archive article img {
        width: initial;
    }

    .desc {
        width: 70%;
    }
}

@media screen and (max-width: 782px) {
    .site-header {
        width: 100%;
    }

    .site-branding img {
        bottom: 0;
        transform: scale(.9);
    }

    .site-description {
        bottom: .5em;
    }

    .site-header-inner {
        padding: 0 0 10px;
    }

    /* hide the classes */
    li#menu-item-2128,
    li#menu-item-2129 {
        display: none;
    }

    .home .site-content,
    .archive .site-content, 
    .single .site-content,
    .search .site-content {
        margin-left: 0;
    }

    /* 3 column */
    .blocks-wrap.masonry article {
        width: calc(100%/2);
        height: 34vh;
    }

    .home-loop-columns-four .electa-blocks-post {
        width: calc(100%/2);
    }

    .electa-blocks-post .entry-header h3 {
        font-size: 28px;
    }

/*    .blocks-wrap .post:first-child {
        zoom: 0.85;
        background-size: cover;
        top: 32px !important;
    }*/

    .page-id-167 .site-content, 
    .page-id-251 .site-content {
        margin-left: 0;
        padding: 0;
    }

    .single .content-area {
        max-width: 100%;
    }

    .portfolio-entry-mobile-first-item-row,
    .portfolio-entry-mobile-last-item-row {
        margin-right: 1%;
    }
	  .electa-blocks-post .entry-header h3 {
        display:none;
    }

    .electa-blocks-post-a {
    background-color:rgba(0,0,0,0) !important;
    background-repeat: no-repeat;
    background-position:center;
    }
}

@media screen and (max-width: 736px) {
    .blocks-wrap.masonry article {
        width: calc(100%/3);
        height: 35vh;
    }

    .electa-blocks-post .entry-header h3 {
        margin: -10px 0 0;
        font-size: 12px;
    }
}

@media screen and (max-width: 600px) {
    .archive article {
        height: 45em;
    }

    .desc {
        width: 150%;
    }

    .single .student img {
        width: 100%;
    }
}

@media only screen and (max-width: 560px) {
    .archive article {
        display: flex;
        height: initial;
        padding-bottom: 2em;
        flex-flow: column wrap;
    }

    .post-left {
        padding: 20px 0 20px;
    }
    
    .post-right {
        order: -1;
        text-align: center;
    }

    .jetpack-portfolio-shortcode {
        display: block;
    }
}

@media only screen and (max-width: 414px) {
    .site-branding {
        max-height: 12em;
    }

    .site-branding img {
        visibility: hidden;
    }

    .site-branding a {
        background: url(http://vfsdigitaldesign.com/portfolio/wp-content/uploads/2018/04/vfs-dd-mobile2018.png);
        background-repeat: no-repeat;
        height: 16em;
        width: 49%;
        margin: 0 auto;
        transform: scale(0.75);
        position: relative;
        bottom: 2em;
    }

    .electa-blocks-post .entry-header h3 {
        font-size: 21px;
    }
	.electa-blocks-post {
		background-size:cover;
	}
    .archive article {
        width: 100%;
        max-width: 100%;
    }

    #main article:nth-of-type(2n) {
        margin-left: 0;
    }

    .single .student {
        flex-direction: column;
    }

    .single .entry-title {
        padding: 0 0 3em 0;
    }

    .single .desc {
        width: 100%;
        order: 1;
        padding-right: 0;
    }

    .student img {
        width: 100%;
    }

    .portfolio-entry {
        margin: 0 0 0.2em !important;
    }

    .portfolio-entry-mobile-last-item-row {
        margin-left: 0.8em !important;
    }

    .site-main .comment-navigation, .site-main .paging-navigation, .site-main .post-navigation {
        margin: 60px 0 0 !important;
    }
}

@media only screen and (max-width: 360px) {
    .site-branding a {
        width: 56%;
    }

    .electa-blocks-post .entry-header h3 {
        font-size: 19px;
    }
}

@media only screen and (max-width: 320px) {
    .site-branding a {
        width: 64%;
    }

    .electa-blocks-post .entry-header h3 {
        font-size: 17px;
    }

    .student img {
        max-width: 100%;
    }

    .portfolio-entry-mobile-last-item-row {
        margin-left: 0.7em !important;
    }
}

/* for mega menu plugin */
/* tighten space after logo area */
.main-navigation {
    margin: 0;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    display: flex;
    justify-content: center;
}

/* condonse the vertical space between each vertical nav */
#mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    height: 28px !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-post-ancestor > a.mega-menu-link {
    display: flex;
    justify-content: center;
    width: 100%;
    background: transparent;
    color: #a40f34 !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus {
    display: flex;
    justify-content: center;
    width: 100%;
    background: transparent;
    color: #a40f34 !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    color: #a40f34 !important;
    font-weight: 700;
}

/* label the main primary menu */
#mega-menu-primary > .mega-menu-item:nth-of-type(1) .mega-menu-link,
#mega-menu-primary >.mega-menu-item:nth-of-type(7) .mega-menu-link,
#mega-menu-primary >.mega-menu-item:nth-of-type(12) .mega-menu-link {
    color: #a40f34 !important;
    font-weight: bold !important;
/*    border-bottom: 1px solid #a40f34 !important;*/
}

/* Separate space between the two menus*/
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:nth-of-type(6),
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:nth-of-type(11) {
    margin-bottom: 2.5em;
}

/* move the top menu down when hovered on grid mega menu */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
    margin-top: 2.4em;
}

/* move the top menu down when hovered on flyout mega menu */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu {
    left: 14.32em;
    top: 0.15em;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover, 
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus, 
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus {
    background: transparent;
    color: #a40e34 !important;
}

/*#mega-menu-primary > li.mega-menu-item ul.mega-sub-menu .mega-current-menu-item {
    display: flex;
    justify-content: center;
}*/

#mega-menu-primary > li.mega-menu-item ul.mega-sub-menu .mega-current-menu-item a {
    color: #a40f34 !important;
    font-weight: bold !important;
}

/* megamenu grid layout */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
    margin-top: 0.5em;
    margin-left: 25.7em;;
}

@media screen and (max-width: 782px) {
    #mega-menu-wrap-primary {
        background: transparent;
    }

    /* classes not displayed */
    #mega-menu-primary > .mega-menu-item:nth-of-type(12) .mega-menu-link,
    #mega-menu-primary > .mega-menu-item:nth-of-type(13) .mega-menu-link,
    #mega-menu-primary > .mega-menu-item:nth-of-type(14) .mega-menu-link,
    #mega-menu-primary > .mega-menu-item:nth-of-type(15) .mega-menu-link,
    #mega-menu-primary > .mega-menu-item:nth-of-type(16) .mega-menu-link {
        display: none !important;
    }
}

.header-social > a,
.search-btn, 
.search-button .fa-search {
    color: #a31d36;
}

.electa-blocks-post .entry-header h3 {
    margin-top:-11%;
}

.electa-blocks-post {
	background-size: cover;
}

.search-form {
	position:relative;
	padding:15px 50px 15px 15px;
}
.search-field {
	filter: grayscale(1);
	border-radius:0 !important;
}
.search-submit {
	position: absolute;
	right: 17px;
	top: 18px;
  background:url('https://vfsdigitaldesign.com/portfolio/wp-content/uploads/2020/09/search-icon.png') center no-repeat;
	background-size: contain;
	opacity:0.8;
	border:none !important;
	outline:none !important;
	box-shadow: none !important;
}
.search-submit:hover {
	background-color:#F5F5F5;
}