.nav-tabs .nav-link {
   --mdb-nav-tabs-link-active-border-color: #0190ff;
   --mdb-nav-tabs-link: 0190ff;
   --mdb-nav-tabs-link-active-color: 0190ff;
}

body {
    background-color: #f5f5f5
}

html {
    scroll-behavior: smooth;
}

@media (min-width: 1200px) {
    .container {
        max-width: 90%;
    }
}

body,
p,
li,
a {
    font-family: 'Faustina',  'Times New Roman', verdana, arial, serif;
    font-weight: 400;
    color: #333333;
}

h1,
h2,
h3,
h4, 
h5,
h6 {
    font-family: 'Yeseva One',  'Times New Roman', verdana, arial, serif;
    font-weight: 700
}

h2 {
    font-size: 36px
}

h3 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px
}

h5 {
    line-height: 1.4rem;
}
h5.card-title {
    font-size: 32px;
    margin-bottom: 1.7rem;
    line-height: 2.4rem;
}
.card-body .btn {margin-top: 1rem;}

p, li {
    font-size: 22px;
    line-height: 1.7rem;
    letter-spacing: .5px;
}
p strong {font-family: 'Yeseva One',  'Times New Roman', verdana, arial, serif;letter-spacing: normal; font-weight: 800;}
a {
    color: #4b9bd2
}

a:active,
.active,
.active a {
    color: #666666
}

a, i, li {
    transition: all ease 500ms!important;
}
p a {text-decoration: underline;}

.lead-in {
    background-color: #666666;
    padding: 15px 30px;
    border-radius: 15px;
    margin-bottom: 55px;
}
    .lead-in p {
        font-weight: 500;
        color: #fff;
        font-style: italic;
        line-height: 1.3;
        margin-bottom: 0;
    }

button, .btn {
    font-family: 'Josefin Sans', helvetica, arial,verdana, sans-serif;
    font-weight: bold;
    border-radius: 25px;
}
.btn-lg {padding-top: 17px;}
.text-link {cursor: pointer;}

.list li a {
    color: #4b9bd2
}

.bold {
    font-weight: 600
}

.italic {
    font-style: italic
}

.text-white {
    color: #ffffff
}

.text-white a:hover {
    color: #cccccc
}

.text-small {
    font-size: 14px;
    line-height: 1.2rem;
}

.stack-right {
    float: right
}

.stack-left {
    float: left
}

@media (max-width: 767px) {
    .stack-right,
    .stack-left {
        float: none
    }
}

.center {
    margin: 0 auto;
    text-align: center
}

@media (max-width: 767px) {
    button {
        width: 100%
    }
    .btn {
        margin: 0;
        margin-top: 20px;
        width: 100%;
    }
}

.modal {z-index: 999999;}
.modal-backdrop.show {z-index: 99999;}
@media (min-width: 767px) { 
.modal-xl {min-width: 80%; max-width: 80%; width: 80%;}
}
#scroll {
    position: fixed;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: #4b9bd2;
    text-indent: -9999px;
    display: none;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    z-index: 99999;
}
    #scroll:hover {
        background-color: #1a5c99;
    }

#scroll span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-bottom-color: #ffffff;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    transition: box-shadow .3s ease-in;
}

.site-title {
    display: none;
}

.site-title .header-banner {
    height: 80px;
    padding-top: 5px;
    z-index: 999999;
}
.site-title h5 {
    display: inline;
    color: #ffffff;
}
.site-title .header-banner img {
    height: 100px;
    width: auto;
    display: inline;
}
@media (max-width: 500px) {
    .site-title .header-banner img {
        height: 60px;
        margin-top: 6px;
    }
        .site-title h5 {
            position: relative;
            top: 6px;
        }
}

.margin-none {
    margin: 0
}

.padding-none {
    padding: 0
}

.card .img-fluid {
    width: 100%
}

@media (max-width: 767px) {
    .card {
        margin-bottom: 40px
    }
}

.btn-primary {
    background-color:#0190ff;
}
.btn-primary:hover {
    background-color: #59c1f2;
}

.btn-gray {
    background-color: #999999
}

.nav-tabs li .btn {
    padding-bottom: 0.5rem
}

.breadcrumb-item.active {
    font-weight:bold;
}
.navbar .breadcrumb .breadcrumb-item a {
    color: #4b9bd2 !important;
}

.border-bottom {
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 20px
}

.card {
    -webkit-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    transition: all 250ms ease
}

.card:hover {
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
    z-index: 2;
    -webkit-transition: all 200ms ease;
    -webkit-transform: translateY(-5px);
    -ms-transition: all 200ms ease;
    -ms-transform: translateY(-5px);
    -moz-transition: all 200ms ease;
    -moz-transform: translateY(-5px);
    transition: all 200ms ease;
    transform: translateY(-5px)
}

.header-banner {
    background: url(../img/bg-nav.jpg)top center;
    background-size: cover;
    display: block;
    height: 150px;
    width: 100%;
    position: relative;
    background-position-y: bottom;
}

.header-banner-text {
    color: #ffffff;
    font-size: 45px;
    line-height: 47px;
    position: relative;
    vertical-align: middle;
    text-shadow: #000000 1px 0 10px;
}

.header-banner-subtext {
    color: #ffffff;
    font-size: 24px;
    line-height: 30px;
    font-weight: 300;
    position: relative;
    text-shadow: #000000 1px 0 10px;
}
.header-banner h5 {
    text-shadow: #000000 1px 0 10px;
}

@media (max-width: 464px) {
    .header-banner-text {
        font-size: 36px;
        line-height: 38px
    }
}

.logo {
    background: url(../img/v-logo.png) top center;
    background-size: cover;
    display: inline-block;
    height: 100px;
    margin-top: 20px;
    width: 100px
}

@media (max-width: 464px) {
    .logo {
        height: 70px;
        margin-top: 30px;
        width: 70px
    }
}

.banner-text {
    display: inline-block;
    position: absolute;
    top: 30px;
    padding-left: 20px
}

/* sticky nav */
.header {
    background: #fafafa;
    transition: position .3s ease-in;
    z-index: 99999;
}

#nav-section.fixed-nav {
    position: fixed;
    top: 0;
    width: 100%;
}

.nav-tabs {
    border-bottom: 3px solid #eaeaea;
}

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
    width: auto;
    text-transform: inherit;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: -2px;
    border-bottom-width: 4px;
}

.nav-tabs .nav-link:hover {
    background-color: var(--mdb-nav-tabs-link-hover-bgc);
    border-color: transparent;
    background: none;
    color: #4b9bd2;
    border-bottom: 4px solid;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background-color: #ffffff;
    cursor: inherit;
    pointer-events: none;
}

.footer-logo {
    background: url(../img/v-logo.png) top center;
    background-size: cover;
    display: block;
    height: 75px;
    width: 75px;
    position: relative;
    margin: 0 auto
}

.bottom-tabs {
    padding: 40px 0
}

.bottom-tabs li {
    padding-right: 5%;
    padding-left: 5%;
    display: inline
}

.icon-tabs li {
    padding-top: 20px
}

.icon-tabs .active {
    border-top: 2px solid #666666;
    border-bottom: 0
}

.icon-tabs .active a {
    border-bottom: 0
}

.content-title-headline {
    padding-top: 45px
}

.page-headline {
    font-size: 24px;
    line-height: 26px;
    margin-bottom: 20px
}

.content {
    display: block;
    margin-top: 30px
}

.content-row {
    margin-top: 20px
}

.featured {
    display: block;
    height: 490px;
    width: 100%
}

.thumbnail {
    display: block;
    height: 310px;
    width: 100%
}

.content-button {
    margin-top: 40px
}

.content-extras {
    margin-top: 40px
}

.list {
    padding-left: 20px
}

.list li {
    font-size: 14px;
    line-height: 18px;
    list-style: disc;
    padding-bottom: 10px
}

.go-back {
    margin-top: 40px;
    margin-bottom: 40px
}



.footer {
    background: url(../img/bg-footer.jpg)top center;
    background-size: cover;
    margin-top: 40px;
    background-position-y: bottom;
}

.footer h5, .footer p,.footer a {
    text-shadow: #000000 1px 0 10px;
}

.footer h5 {font-size: 24px;}

.footer a:hover i {
    color: #4b9bd2!important;
}

.footer ul {padding-left:0;}

@media (max-width: 767px) {
    .m-contact {
        padding-bottom: 20px
    }
}

footer.page-footer .footer-copyright {
    height: auto;
    padding-top: 10px;
    overflow: visible;
    text-align: left
}

.footer-copyright .container-fluid {
    font-size: 12px;
    line-height: 15px
}

@media (min-width: 767px) {
    .home .row {
        display: flex;
        justify-content: center;
    }
}

/* Sidebar */


.home-etsy {
    background: url(../img/main_thumbnails/design-home-etsy.jpg) top center;
    background-size: cover
}

.home-threadless {
    background: url(../img/main_thumbnails/design-home-threadless.jpg) top center;
    background-size: cover
}

.home-Web Portfolio {
    background: url('../img/main_thumbnails/design-home-Web Portfolio.jpg') top center;
    background-size: cover
}

.home-reporting {
    background: url(../img/main_thumbnails/design-featured-dmreportingsystem.jpg) top center;
    background-size: cover
}

.design-pacer {
    background: url(../img/main_thumbnails/design-featured-pacer.jpg) top center;
    background-size: cover
}

.design-humrro {
    background: url(../img/main_thumbnails/design-featured-humrro.jpg) top center;
    background-size: cover
}

.design-officialasvab {
    background: url(../img/main_thumbnails/design-featured-officialasvab.jpg) top center;
    background-size: cover
}

.design-dm_reporting {
    background: url(../img/main_thumbnails/design-featured-dm_reporting.jpg) top center;
    background-size: cover
}


.design-uky_project_website  {
    background: url(../img/main_thumbnails/design-featured-uky_project_website.jpg) top center;
    background-size: cover
}

.design-flight_plan  {
    background: url(../img/main_thumbnails/design-featured-flightplan.jpg) top center;
    background-size: cover
}


.design-humrro_surveys {
    background: url(../img/main_thumbnails/design-featured-humrro_surveys.jpg) top center;
    background-size: cover
}

.design-reporting {
    background: url(../img/main_thumbnails/design-featured-dmreportingsystem.jpg) top center;
    background-size: cover
}

.design-ifsocial {
    background: url(../img/main_thumbnails/design-featured-dmifsocial.jpg) top center;
    background-size: cover
}

.design-hiscppc {
    background: url(../img/main_thumbnails/design-featured-dmhiscppc.jpg) top center;
    background-size: cover
}

.design-cleanalaska {
    background: url(../img/main_thumbnails/design-featured-dmcleanalaska.jpg) top center;
    background-size: cover
}

.design-dm_icons {
    background: url(../img/main_thumbnails/design-featured-dm-icons.jpg) top center;
    background-size: cover
}

.design-haikuza {
    background: url(../img/main_thumbnails/design-featured-flhaikuza.jpg) top center;
    background-size: cover
}

.design-sqmcurrentevents {
    background: url(../img/main_thumbnails/design-featured-sqmcurrentevents.png) top center;
    background-size: cover
}

.design-sqmaccounts {
    background: url(../img/main_thumbnails/design-featured-sqm_accounts.png) top center;
    background-size: cover
}

.design-sqmreskin {
    background: url(../img/main_thumbnails/design-featured-reskin_sqm.jpg) top center;
    background-size: cover
}

.design-sqmcam {
    background: url(../img/main_thumbnails/design-featured-pier_cam.jpg) top center;
    background-size: cover
}

.design-vbadware {
    background: url(../img/main_thumbnails/design-featured-badware.png) top center;
    background-size: cover
}

.design-battleburg {
    background: url(../img/main_thumbnails/design-featured-battle_of_burgers.jpg) top center;
    background-size: cover
}

.design-invader {
    background: url(../img/main_thumbnails/design-invader_game.png) top center;
    background-size: cover
}

.design-grohesweeps {
    background: url(../img/main_thumbnails/design-grohe_sweeps.jpg) top center;
    background-size: cover
}

.design-vcloud {
    background: url(../img/main_thumbnails/design-vcloud.png) top center;
    background-size: cover
}

.art-sloth {
    background: url(../img/main_thumbnails/art-featured-sloth.jpg) top center;
    background-size: cover
}

.art-mixtape {
    background: url(../img/main_thumbnails/art-featured-mixtape.jpg) top center;
    background-size: cover
}

.art-spaceballs {
    background: url(../img/main_thumbnails/art-featured-spaceballs.jpg) top center;
    background-size: cover
}

.art-herreflections {
    background: url(../img/main_thumbnails/art-featured-herreflections.jpg) top center;
    background-size: cover
}

.art-bike {
    background: url(../img/main_thumbnails/art-bike.jpg) top center;
    background-size: cover
}

.art-sailormoon {
    background: url(../img/main_thumbnails/art-sailormoon.jpg) top center;
    background-size: cover
}

.art-bromine {
    background: url(../img/main_thumbnails/art-bromine.jpg) top center;
    background-size: cover
}

.art-exaltboards {
    background: url(../img/main_thumbnails/art-exaltboards.jpg) top center;
    background-size: cover
}

.art-wildbeast {
    background: url(../img/main_thumbnails/art-zoe.jpg) top center;
    background-size: cover
}

.art-inmotion {
    background: url(../img/main_thumbnails/art-inmotion.jpg) top center;
    background-size: cover
}

.motion-scenedeck {
    background: url(../img/main_thumbnails/motion-featured-scendeck.png) top center;
    background-size: cover
}

.motion-tbshine {
    background: url(../img/main_thumbnails/motion-featured-tbshine.png) top center;
    background-size: cover
}

.motion-trailer {
    background: url(../img/main_thumbnails/motion-trailer.png) top center;
    background-size: cover
}

.motion-filmleader {
    background: url(../img/main_thumbnails/motion-filmleader.png) top center;
    background-size: cover
}

.motion-logos {
    background: url(../img/main_thumbnails/motion-logos.png) top center;
    background-size: cover
}

/* Page */
.hero img {width: 100%; border-radius:15px;}

.hero-pacer {
    background: url(../img/design/page-design-pacer_light.png) top center;
        background-size: cover;
   
        height: 800px;
        width: 100%;

}

.card-body.swatch {
    padding: 0;
    margin: 0;
    height:150px;
    transition: background-color .3s ease-in;
}
    .pacer-logo,
    .officialasvab-logo {
        transition: background-color .3s ease-in;
        border: 1px solid #ffffff;
    }
    .pacer-logo:hover,
    .officialasvab-logo:hover {
        background-color: #303030;
    }
    .swatch.pacer-primary {
        background-color:#a7ffeb;
        border: 2px solid #75ccb9;
    }
        .swatch.pacer-primary:hover {
            background-color:#75ccb9;
        }
    .swatch.pacer-secondary {
        background-color:#aa00ff;
        border: 2px solid #7200ca
    }
        .swatch.pacer-secondary:hover {
            background-color:#7200ca;
        }

.page-clean_alaska {
    background: url(../img/main_thumbnails/design-featured-dmcleanalaska.jpg) top center;
    background-size: cover;
   
    height: 340px;
        width:100%;
}

.page-dm_reporting {
    background: url(../img/main_thumbnails/design-featured-dm_reporting.jpg) top center;
    background-size: cover;

    height: 340px;
    width:100%;
}

.page-ca_logo {
    background: url(../img/design/page-design-c_eanalaska_logo.jpg) top center;
    background-size: cover;

    height: 340px;
    width:100%;
}

.page-ca_identity {
    background: url(../img/design/page-design-c_eanalaska_identity.jpg) top center;
    background-size: cover;

    height: 340px;
    width:100%;
}

.page-ca_web {
    background: url(../img/design/page-design-cleanalaska-page.jpg) top center;
    background-size: cover;

    height: 340px;
    width:100%;
}

.page-dm_icons {
    background: url(../img/design/page-design-dmicons_full.jpg) top center;
    background-size: cover;

    height: 404px;
        width:100%;
}

.page-ppc_hisc_senior {
    background: url(../img/design/page-design-discppc-seniorcare.jpg) top center;
    background-size: cover;
 
    height: 340px;
        width:100%;
}

.page-ppc_hisc_home {
    background: url(../img/design/page-design-discppc-homecare.jpg) top center;
    background-size: cover;
 
    height: 340px;
        width:100%;
}

.page-dm_ppc-hisc {
    background: url(../img/main_thumbnails/design-featured-dmhiscppc.jpg) top center;
    background-size: cover;

    height: 340px;
        width:100%;
}

.page-haikuza {
     background: url(../img/design/page-design-haikuza-prototype.jpg) top center;
    background-size: cover;

    height: 340px;
        width:100%;
}

.page-ifsocial_feature {
     background: url(../img/main_thumbnails/design-featured-dmifsocial.jpg) top center;
    background-size: cover;

    height: 340px;
        width:100%;
}

.page-ifsocial_before {
     background: url(../img/design/page-design-ifsocial_original.jpg) top center;
    background-size: cover;

    height: 340px;
        width:100%;
}

.page-ifsocial_after {
     background: url(../img/design/page-design-ifsocial_scheduler.jpg) top center;
    background-size: cover;

    height: 340px;
        width:100%;
}

.page-sqmce_reskin {
    background: url(../img/design/page-design-sqm_currentevents.png) top left;
    background-size: cover;
    display: block;
    height: 350px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%
}

.page-sqmce_original {
    background: url(../img/design/page-design-currentevents_original.png) top center;
    background-size: cover;

    height: 340px
}

.page-sqmce_reskin {
    background: url(../img/design/page-design-currentevents_reskin.png) top center;
    background-size: cover;

    height: 340px
}

.page-sqm_accounts {
    background: url(../img/design/page-design-sqm_accounts.png) top center;
    background-size: cover;
    display: block;
    height: 350px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%
}

.page-sqm_reskin {
    background: url(../img/design/page-design-sqm_reskin.png) top center;
    background-size: cover;
    display: block;
    height: 350px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%
}

.page-sqm_before {
    background: url(../img/design/page-design-sqmreskin_original.png) top center;
    background-size: cover;
    cursor: pointer
}

.page-sqm_after {
    background: url(../img/design/page-design-sqmreskin_after.png) top center;
    background-size: cover;
    cursor: pointer
}

.page-piercam_main {
    background: url(../img/design/page-design-piercam_main.png) top center;
    background-size: cover;
    display: block;
    height: 350px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%
}

.page-piercam_original {
    background: url(../img/design/page-design-piercam_original.png) top center;
    background-size: cover;

}

.page-piercam_reskin {
    background: url(../img/design/page-design-piercam_reskin.png) top center;
    background-size: cover;
 
}

.page-badware_select {
    background: url(../img/design/page-design-badware_select.png) top center;
    background-size: cover;
    display: block;
    height: 604px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%
}

.page-badware_gameplay {
    background: url(../img/design/page-design-badware_gameplay.png) top center;
    background-size: cover;
    display: block;
    height: 566px;
    width: 100%
}

.page-badware_winner {
    background: url(../img/design/page-design-badware_winner.png) top center;
    background-size: cover;
    display: block;
    height: 566px;
    width: 100%
}

.page-battle_burger {
    background: url(../img/design/page-design-logo_battleburg.png) top center;
    background-size: cover;
    display: block;
    height: 338px;
    margin-bottom: 20px;
    width: 100%
}

.page-battleburg_example1 {
    background: url(../img/design/page-design-battleburg_example1.png) top center;
    background-size: cover;
    display: block;
    height: 146px;
    width: 100%;
    margin-bottom: 20px
}

.page-battleburg_example2 {
    background: url(../img/design/page-design-battleburg_example2.png) top center;
    background-size: cover;
    display: block;
    height: 176px;
    width: 100%;
    margin-bottom: 20px
}

.page-battleburg_example3 {
    background: url(../img/design/page-design-battleburg_example3.png) top center;
    background-size: cover;
    display: block;
    height: 237px;
    width: 100%;
    margin-bottom: 20px
}

.page-battleburg_example4 {
    background: url(../img/design/page-design-battleburg_example4.png) top center;
    background-size: cover;
    display: block;
    height: 348px;
    width: 100%;
    margin-bottom: 20px
}

.page-grohe_sweeps {
    background: url(../img/design/page-design-grohe_sweeps.png) top center;
    background-size: cover;
    display: block;
    height: 415px;
    width: 100%;
    margin-bottom: 20px
}

.page-grohe_newsletter {
    background: url(../img/design/page-design-grohe_newsletter.png);
    background-size: cover;
    display: block;
    height: 1451px;
    width: 100%
}

.page-invader_main {
    background: url(../img/design/page-design-invader_main.gif) top center;
    background-size: cover;
    display: block;
    height: 408px;
    margin-bottom: 20px;
}

.page-invader_characters {
    background: url(../img/design/page-design-invader_characters.png) top center;
    background-size: cover;
    display: block;
    height: 270px;
    margin-top: 65px;
    width: 100%
}

@media (max-width: 767px) {
    .page-invader_characters {
        margin-top: 20px
    }
}

.page-invader_planets {
    background: url(../img/design/page-design-invader_planets.png) top center;
    background-size: cover;
    display: block;
    height: 409px;
    width: 100%
}

.page-invader_levels {
    background: url(../img/design/page-design-invader_levels.png) top center;
    background-size: cover;
    display: block;
    height: 349px;
    width: 100%;
    margin-top: 20px
}

.page-invader_comic {
    background: url(../img/design/page-design-invader_comic.png) top center;
    background-size: cover;
    display: block;
    height: 306px;
    margin-bottom: 20px;
    width: 100%
}

.page-cloud_select {
    background: url(../img/design/page-design-vcloud_main.png) top center;
    background-size: cover;
    display: block;
    height: 603px;
    width: 100%;
    margin-bottom: 20px
}

.page-cloud_robot {
    background: url(../img/design/page-design-vcloud_robot.png) top center;
    background-size: cover;
    display: block;
    height: 603px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px
}

.page-cloud_gameplay {
    background: url(../img/design/page-design-vcloud_gameplay.png) top center;
    background-size: cover;
    display: block;
    height: 603px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px
}

.videoWrapper {
    height: 0;
    margin-bottom: 20px;
    padding-bottom: 56.25%;
    padding-top: 25px;
    position: relative
}

.videoWrapper iframe {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%
}

.page-sloths_main {
    background: url(../img/art/page-sloths_main.png) top center;
    background-size: cover;
    display: block;
    height: 651px;
    width: 100%;
    margin-bottom: 20px
}

.page-mixtape_main {
    background: url(../img/art/page-mixtape_main.jpg) top center;
    background-size: cover;
    display: block;
    height: 349px;
    width: 100%;
    margin-bottom: 20px
}

.page-spaceballs_main {
    background: url(../img/art/page-spaceballs_main.png) top center;
    background-size: cover;
    display: block;
    height: 349px;
    width: 100%;
    margin-bottom: 20px
}

.page-herreflections_main {
    background: url(../img/art/page-herreflections_main.png) top center;
    background-size: cover;
    display: block;
    height: 538px;
    width: 100%;
    margin-bottom: 20px
}

.page-antiportrait_main {
    background: url(../img/art/page-anti_portrait_main.png) top center;
    background-size: cover;
    display: block;
    height: 538px;
    width: 100%;
    margin-bottom: 20px
}

.page-sailormoon_main {
    background: url(../img/art/page-sailormoon_main.png) top center;
    background-size: cover;
    display: block;
    height: 360px;
    width: 100%;
    margin-bottom: 20px
}

.page-bromine_main {
    background: url(../img/art/page-bromine_main.png) top center;
    background-size: cover;
    display: block;
    height: 540px;
    width: 100%;
    margin-bottom: 20px
}

.page-exaltboards_main {
    background: url(../img/art/page-exaltboards_main.png) top center;
    background-size: cover;
    display: block;
    height: 472px;
    width: 100%;
    margin-bottom: 20px
}

.page-wildbeast_main {
    background: url(../img/art/page-wild_beast_main.png) top center;
    background-size: cover;
    display: block;
    height: 544px;
    width: 100%;
    margin-bottom: 20px
}

.page-inmotion_main {
    background: url(../img/art/page-inmotion_main.png) top center;
    background-size: cover;
    display: block;
    height: 645px;
    width: 100%;
    margin-bottom: 20px
}

/* from codepen: Eugene Sobon*/

.cbody {
    margin: auto;
    display: inline-block;
    height: 500px;
    width: 500px;
    text-align: center;
    margin-bottom: -55px;
}

.cmain {
    height: 300px;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    background-color: black;
}

.ctop {
    display: inline-block;
    width: 100%;
}

.ccontentwrap {
    display: inline-block;
    margin-top: 25px;
    width: 460px;
    height: 250px;
    background-color: rgba(76, 76, 76, 0.42);
    text-align: center;
}

.ccontent {
    width: 2560px;
    height: 1400px;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    transform: scale(.18);
    overflow-y:scroll;

}
 .ccontent img {
    width: 100%;
    overflow-y: scroll;
 }

.ccont {
    height: 100%;
    width: 100%;
}

.cbottom {
    height: 50px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    background: linear-gradient(35deg, rgb(114, 114, 114), rgb(197, 197, 197), rgb(218, 218, 218));
    border-bottom: 1px solid rgb(92, 91, 91);

}

.cleg {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    height: 50px;
    background: linear-gradient(0deg, rgb(114, 114, 114), rgb(255, 255, 255), rgb(197, 197, 197), rgb(114, 114, 114));
    -webkit-clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}



.cfoot {
    display: inline-block;
    vertical-align: top;
    width: 130px;
    height: 20px;
    background: linear-gradient(0deg, rgb(197, 197, 197), rgb(197, 197, 197), rgb(114, 114, 114));
    -webkit-clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%);
    border-bottom-right-radius: 45px;
    border-bottom-left-radius: 55px;
    border-bottom: 2px solid rgb(114, 114, 114);
}

@media (max-width: 500px) {
    .cbody {
        margin: auto;
        display: inline-block;
        height: 375px;
        width: 300px;
        text-align: center;
        margin-bottom: -55px;
    }
    .cmain {
        height: 190px;
        width: 300px;
    }
    .ccontentwrap {
        display: inline-block;
        margin-top: 25px;
        width: 100%;
        height: 150px;
    }
    .ccontent {
        transform: scale(.105);
        position: relative;
        left: 16px;
        top: -1px;
    }
}

/* ART PAGE */
.eui-widget-title.es-widget-title.eapps-instagram-feed-title {
    display: none !important;
}
.eapps-instagram-feed {
    max-height: min-content!important;
}

.full-art img {
    max-height: 750px;
}

/* Magnify */
.magnify {position: relative;}

/*Lets create the magnifying glass*/
.large {
	width: 375px; height: 375px;
	position: absolute;
	border-radius: 100%;
	
	/*Multiple box shadows to achieve the glass effect*/
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
	0 0 7px 7px rgba(0, 0, 0, 0.25), 
	inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
	
	/*hide the glass by default*/
	display: none;
}

/*To solve overlap bug at the edges during magnification*/
.small { display: block; }

.large-traveler {
	/*Lets load up the large image first*/
	background: url('../img/art/full-art/VanessaCulver-Traveler.jpg') no-repeat;
}

.large-tryptich {
	/*Lets load up the large image first*/
	background: url('../img/art/full-art/Tryptich-Autumn-Dreams-web.jpg') no-repeat;
}

.large-inbetween {
	/*Lets load up the large image first*/
	background: url('../img/art/full-art/TheInBetween_VanessaCulver.jpg') no-repeat;
}

.large-theshow {
	/*Lets load up the large image first*/
	background: url('../img/art/full-art/TheShow-VanessaCulver.jpg') no-repeat;
}

.large-fountainvalley {
	/*Lets load up the large image first*/
	background: url('../img/art/full-art/FountainValley-VanessaCulver.jpg') no-repeat;
}

.large-travelingspaces {
	/*Lets load up the large image first*/
	background: url('../img/art/full-art/TravelingSpaces.jpg') no-repeat;
}

.large-alltogethernow {
	/*Lets load up the large image first*/
	background: url('../img/art/full-art/Together-signed.jpg') no-repeat;
}

.large-bmo {
	/*Lets load up the large image first*/
	background: url('../img/art/full-art/BMOVideoGames.jpg') no-repeat;
}