/*
.enclosure-box {
    box-shadow: 5px 5px 4px grey;
    border-color: grey;
    background: lightskyblue;
    background: -webkit-linear-gradient(left, lightskyblue, white, lightskyblue); 
    background: -o-linear-gradient(right, lightskyblue, white, lightskyblue); 
    background: -moz-linear-gradient(right, lightskyblue, white, lightskyblue);
    background: linear-gradient(to right, lightskyblue, white, lightskyblue); 
}

.enclosure-box h4 {
    margin: 0px;
    color: white;
    text-shadow: 2px 2px 2px black,
             -2px -2px 2px black,
             -2px 2px 2px black,
              2px -2px 2px black;
}
*/

/* new why channel j showcase */
#why-channel-j {
    margin: 0px 0px;
    border: 0px;
    border-style: solid;
    border-color: yellow;
}

#image1 .sub-image-phrase {
    -ms-transform: rotate(-15deg); 
    -webkit-transform: rotate(-15deg); 
    transform: rotate(-15deg);
}
#image2 {display: none;}
#image3 {display: none;}
#image4 {display: none;}

#why-navs {
    border: 1px;
    border-style: solid;
    border-color: black;
    font-size: 22px;
    text-align: center;

}
.why-nav {
    border: 1px;
    border-style: solid;
    border-color: black;
    padding: 5px;
}

.why-nav-ja {
    padding: 5px 2px; 
}
/*
.why-nav:hover {
    background: deeppink;
}*/
#why1 {
    background: deeppink;
}

#desc2 {display:none;}
#desc3 {display:none;}
#desc4 {display:none;}


/* stuff from channel j website */

.sub-image-holder {
    overflow: hidden;
    /*padding: 20px 15px;*/
    position: relative;
    padding: 0px;
}

.sub-image {
    width: 100%;
    overflow: hidden;
    margin: 0px 0px;
}

.sub-image {
    -webkit-transition: transform 10s;
    transition: transform 20s;
}

.sub-image-holder:hover .sub-image {
    -ms-transform: scale(1.4,1.4); /* IE 9 */
    -webkit-transform: scale(1.4,1.4); /* Safari */
    transform: scale(1.4,1.4); /* Standard syntax */
}
 
.sub-image-phrase {
    position: absolute;
    text-align: center;
    /*color: seashell;*/
    color: deeppink;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 126px;
    top: 25%;
    text-shadow: 2px 2px 3px black, 1px 1px 2px black;
    font-weight: bold;
    /* -ms-transform: rotate(-8deg); 
    -webkit-transform: rotate(-8deg); 
    transform: rotate(-8deg); */
    margin: auto;
    left: 0;
    right: 0;
}

.sub-image-phrase-ja {
    font-size: 88px;
}


.description {
    color: black;
    text-shadow: 1px 1px 2px white;
    font-size: 16px;
    font-family: arial, Helvetica, sans-serif;
    background: rgba(250,250,250,.7);
    font-weight: bold;
    padding: 20px 30px 220px;
}

.description-heading {
    margin: 0px 0px;
    padding: 4px 20px;
    background-color: #0055ff;
    text-shadow: 1px 1px black;
    color: white;   
    font-family: kirvy;
}



/*
#blarun-text {
    margin: 20px;
    padding: 10px 20px;
    text-shadow: 0px 0px 3px white, 0px 0px 18px rgb(255,40,180);
    text-align: center;
}

#blarun-img-holder {
    transform: translateY(-22%);
}

#blarun-img-older img {
    max-width:80%;
    margin-left:18%;
    margin-right:10%;
}*/



/* large size */ 
@media (min-width: 1080px) {
    .description {font-size: 18px;}
}

/* medium size */
@media (max-width: 922px) {
    .sub-image-phrase {font-size: 102px;}
    .sub-image-phrase-ja {font-size: 72px;}
}

/* small screens */
@media (max-width: 768px) {
    .revealed {font-size:14px;}
    
    .main-container {margin:auto; padding:0px;}  /*smaller screens should have smaller padding*/

    .sub-image-phrase {font-size: 80px;}
    .sub-image-phrase-ja {font-size: 68px;}
    
    #why-navs {font-size: 18px;}
    
    .description {padding: 20px 25px 240px;}
}

/* tiny screens */
@media (max-width: 560px) {
    .sub-image-phrase {font-size: 52px;}
    .sub-image-phrase-ja {font-size: 48px;}
    
    .button-holder-revealer {position:relative; padding-top: 15px;}
    
    #why-navs {font-size: 12px;}
    #why-navs > div {padding: 3px 0px;}
}

/* very tiny screens */
@media (max-width: 420px) {
    .sub-image-phrase {font-size: 34px;}
    .sub-image-phrase-ja {font-size: 26px;}
    
    #why-navs {font-size: 10px;}
    .why-nav {padding: 3px 0px;}
    
    .description {padding: 20px 10px 320px;}
}