/*
 Theme Name:   Earwig v005
 Theme URI:    N/A
 Description:  Theme for Earwig. Child theme based on magnus.
 Author:       Luca C. Wistendahl
 Author URI:   http://www.lucacw.com
 Template:     magnus
 Version:      5.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  magnus-child
*/

/*|||||||||| FONTS ||||||||||*/
@import url(https://fonts.googleapis.com/css?family=Monoton);
/*this is one of the closest fonts I could find to Earwig's preferred font*/

/*@font-face {
  font-family: "Phosphate";
  src: url("../../fonts/Phosphate.ttc");
} removing this until I find out if the license allows for online publication*/

.albumSVG{
    margin-top:40px;
}
#gumSVG{
    display: block;
    margin:0 auto;
    margin-bottom: 15px;
    max-width: 657px;
    margin-top: 90px;
}
#knSVG{
    display:block;
    margin:0 auto;
    margin-top: 90px;
    max-width:328px;
    margin-bottom: 15px;
}

#woySVG{
    display:block;
    margin:0 auto;
    max-width: 404px;
    margin-bottom: 15px;
}

/*|||||||||| GENERAL ||||||||||*/
body{
    height: 100vh;
    min-width: 300px;/*is this useful?*/
}

/*|||||||||| KEYFRAMES ||||||||||*/
@-webkit-keyframes image-pulse {
  0% {
    -webkit-transform: scale(1.01); }
  100% {
    -webkit-transform: scale(1.10); } }
@-moz-keyframes image-pulse {
  0% {
    -moz-transform: scale(1.01); }
  100% {
    -moz-transform: scale(1.10); } }
@keyframes image-pulse {
  0% {
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -o-transform: scale(1.01);
    transform: scale(1.01); }
  100% {
    -webkit-transform: scale(1.10);
    -moz-transform: scale(1.10);
    -ms-transform: scale(1.10);
    -o-transform: scale(1.10);
    transform: scale(1.10); } }


/*|||||||||| HEADER ||||||||||*/
#earwigSVGContainer{
    height: 80px;
}
#earwigSVG{
    width: 300px;
    transition: width ease .2s;
}
/*#earwigSVG:hover{
    width: 308px;*/
}
.site-header-image .section-image {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    -webkit-animation: fadein-images 1s ease-out backwards, image-pulse 20s ease-in-out infinite alternate;
    -moz-animation: fadein-images 1s ease-out backwards, image-pulse 20s ease-in-out infinite alternate;
    animation: fadein-images 1s ease-out backwards, image-pulse 20s ease-in-out infinite alternate;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}/*minor timing changes*/
 .blog-home-content article:first-child .section-image {
      -webkit-animation: fadein-images 1s ease-out backwards, image-pulse 20s ease-in-out infinite alternate;
      -moz-animation: fadein-images 1s ease-out backwards, image-pulse 20s ease-in-out infinite alternate;
      animation: fadein-images 1s ease-out backwards, image-pulse 20s ease-in-out infinite alternate;
}/*minor timing changes*/
.site-header{
    padding: 1em 1em .286em;
    background: none;
}/*made vertical padding smaller to decrease height*/

.site-branding{
    width: 100%;
    text-align: center;
}/*places .site-title in the horizontal center of the page*/

.site-branding h1{
    font-size: 50pt;
}/*targets .site-title*/

.site-title{
    font-family: 'Monoton';
}/*changes the site title to Monoton font*/

.site-description{
    display: none;
}/*removes the site description*/

/*|||||||||| NAVIGATION ||||||||||*/
.sidebar{
    background: #141414;
    text-align: center;
    max-width: 100%;/*this may or may not be necessary, but there's an issue of the social media widget aligning off-center on mobile*/
}/*changes sidebar background*/

.sidebar a:hover {
    color: #ffffff;
}/*this only took me 5ever to find...*/

#sidebar .widget{
    text-shadow: none;
}/*removes pale-grey text shadow on widget titles, menu items.*/

.sidebar-toggle {
    z-index: 9999;
    margin: -1em 10px 0;
    position: fixed;
    top: 27px;
    right: 10px;
}/*resolves issue of full-width .site-branding overlapping .sidebar-toggle. changes position.*/

.sidebar .main-navigation{
    font-size: 1em;
}/*makes the menu font just a lil' bigger*/

.sidebar-toggled .sidebar-toggle:hover span:before, .sidebar-toggled .sidebar-toggle:hover span:after {
    background: #FFFFFF;
}/*targets menu toggle "x" icon*/

.socialButtons{
    list-style: none;
    margin: 0 auto;
    max-width: 200px;
}
.socialButtons li a{
    float: left;
    width: 30px;
    height: 30px;
    fill:#ffffff;
    opacity: .5;
    transition: opacity ease .2s;
    margin: 7px 5px;
}
.socialButtons li a:hover{
    opacity: 1;
}
#sidebarSocial{
    margin: 0 auto;
}
#desktopSocial{
    max-width: none!important;
    position: absolute;
    top: -10px;
    right: -134px;
    width: 500px;
}

/*|||||||||| CONTENT ||||||||||*/
.entry-title{
    display: none;
}
.page-id-2{
    background: url("../../uploads/2015/10/Earwig-Leveque-BW-1.jpeg");
    background-size: cover;
    /*background-position: center -400px;*/
    background-repeat: no-repeat;
}/*targets 'about' page.*/

.page-id-28{
    background: url("../../uploads/2015/10/Earwig_Bass_Phone_Blade_EDIT_BW1.jpg");
    background-size: cover;
    /*background-position: center -250px;*/
    background-repeat: no-repeat;
}/*targets 'music' page.*/

.page-id-62{
    background: url("../../uploads/2015/10/IMG_7620.jpg");
    background-size: cover;
    /*background-position: center -250px;*/
    background-repeat: no-repeat;
}/*targets 'media' page.*/

.page-id-14 #content{
   -webkit-animation: fadein 2s ease-out backwards;
    -moz-animation: fadein 2s ease-out backwards;
    animation: fadein 2s ease-out backwards;
}/*fades in*/

.bandcamp{
    margin-bottom: 50px;
}

.site{
    min-height: 100vh;
    background: rgba(0,0,0,.7);
}/*allows #colophon stick-to-bottom fix (see below) to work. adds semi-opaque background over body background*/

.section-inner{
    display: none;
}/*removes link from first full-screen post on home page, effectively turning it into a full-screen background*/

.blog-home-content .site-main {
    overflow: hidden;
    background: #191919;
}/*stylizes color, effectively site's background color*/

#main article:first-child{
}/*targets first post on the home page*/

body, button, input, select, textarea {
    color: #FFFFFF;
    font-family: "Karla", sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.5;
}/*changes font color*/

h1, h2, h3, h4, h5, h6, form button, form input[type="button"], form input[type="reset"], form input[type="submit"], .comment-form label {
    font-family: "Montserrat", sans-serif;
    font-size: 1em;
    clear: both;
    text-transform: uppercase;
    line-height: 1;
    color: #FFFFFF;
}/*changes font color*/

::selection {
  /* WebKit/Blink Browsers */
  background: #a8d1ff;
  color: #fdf1f2;
  text-shadow: 0 1px 1px #FFFFFF;
}

.musicTitle{
    text-align: center;
}/*centers titles for albums on music page*/

#muinda{
    width: 400px;
    fill: white;
}


/*|||||||||| FOOTER ||||||||||*/
#colophon{
    position: absolute;
    bottom: -79px;
    width: 100%;
}/*upon making .featured-image .site-header-image 100px tall, the footer wouldn't stick to the bottom of the page. this fixes that.*/

.site-footer{
    margin: 0;
    background-color: #141414;
    color: #FFFFFF;
}/*removes an unecessary margin between the footer bar and the page's content; stylizes color*/

.cms-info{
    display: none!important;
}/*removes 'proudly developed with wordpress'*/
.theme-info{
    display: none!important;
}/*removes magnus credits*/

@media screen and (min-width: 800px){
    #desktopSocial{
        display: block;
    }
}

@media screen and (max-width: 800px){
     #desktopSocial{
        display: none;
    }
}

@media screen and (max-width: 600px){
    #earwigSVG{
        width: 250px;
        margin-top: 20px;
    }
    /*#earwigSVG:hover{
        width: 256px;
    }*/
    .featured-image .site-header-image {
        height: 100px;
    }/*makes the featured image on pages not 100vh*/
    .page-id-2{
        background: url("../../uploads/2015/10/Earwig-Leveque-BW-1.jpeg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }/*targets 'about' page.*/

    .page-id-28{
        background: url("../../uploads/2015/10/Earwig_Bass_Phone_Blade_EDIT_BW1.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }/*targets 'music' page.*/

    .page-id-62{
        background: url("../../uploads/2015/10/IMG_7620.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }/*targets 'media' page.*/
    #midSVG{
        display: block;
        margin:0 auto;
        margin-right: 17px;
    }
    .sidebar-toggle {
        z-index: 9999;
        margin: -1em 10px 0;
        position: fixed;
        top: 10px;
        right: 5px;
    }
    #gumSVG{
        display: block;
        margin:0 auto;
        margin-bottom: 15px;
        margin-right: 17px;
        max-width: 657px
    }
    #gumaSVG{
        display:block;
        margin:0 auto;
        margin-top: 40px;
        max-width:328px;
        margin-right: 17px;
        margin-bottom: 15px;
    }
    #knSVG{
        display:block;
        margin:0 auto;
        margin-top: 40px;
        max-width:328px;
        margin-right: 17px;
        margin-bottom: 15px;
    }

    #woySVG{
        display:block;
        margin:0 auto;
        margin-top: 40px;
        max-width: 404px;
        margin-right: 17px;
        margin-bottom: 15px;
    }
}

/*021918*/
.home #content{
    position: absolute;
    top: 0;
}

.itemName{
    float: right;
}

#splashRight ul{
    list-style: none;
}

#mainAlbum a img{
    display: block;
    margin: 0 auto;
}

.page-id-135{
    background-image: url("http://www.lizardfamily.com/wp-content/uploads/2015/10/IMG_7620.jpg");
    background-side: cover;
}

.page-id-135 h2{
    text-align: center;
}

.page-id-94{
    background-image: url("http://www.lizardfamily.com/wp-content/uploads/2015/10/Earwig-Leveque-BW-1-smaller-web-copy1.jpeg");
    background-side: cover;
}

@media (max-width: 550px){
    #splashRight ul{
        margin-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 1000px){
    /*021918*/
    .home #content{
        top: 10%;
    }
}

.page{
    background-size: cover!important;
}