/* Responsive Web Design */

* {
box-sizing:border-box
}

html {
  scroll-behavior: smooth;
}

.row0:after{
content: "";
clear: both;
display: block;
}

.row1:after{
content: "";
clear: both;
display: block;
}

.row1{ 

position:relative;

}



.row2:after{
content: "";
clear: both;
display: block;
}

.row3:after{
content: "";
clear: both;
display: block;
}

.row4:after{
content: "";
clear: both;
display: block;
}

.row5:after{
content: "";
clear: both;
display: block;
}

.row6:after{
content: "";
clear: both;
display: block;
}

.row7:after{
content: "";
clear: both;
display: block;
}


[class*="col-"]{
float: left;
padding: 15px;
width:100%;

}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
   
}

@media only screen and (max-width: 600px) {
   /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}

    #gif{
    position:relative;
    margin:auto;
    justify-content: center;
    align-content: center;
}
    


.wipImage{
height:350px;
background-image:url("media/pics/designs/skate2.png");
background-size:cover;
}

.wipImage1{
height:350px;
background-image:url("media/pics/illustrations/mang.png");
background-size:cover;
}

.wipImage2{
height:350px;
background-image:url("media/pics/lia.png");
background-size:cover;
}



}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    



/* Desktop Navigation */

#check{
display:none;
}

.nav{
display:none;
}

.menu{
display:none;
}

.subMenu{
display:none;
}

.mobTitle{
display:none;
}

.deskDropDown{
}

div.deskSubContainer{

text-align:center;
}

#gif{
    position:relative;
    margin:auto;
    justify-content: center;
    align-content: center;
    margin-top:8%;
    
}

.title{
background-color:#323236;
font-family:"corbel", Arial, Verdana;
color:white;
vertical-align:middle;
border-left:4px solid white;
border-right:4px solid white;
text-align: left;
}

.deskMenu{
font-size:1.2em;
z-index:2;
width:100%;
background-color:#111111;
height:60px;
margin-top:0px;
border-left:5px solid #cc2322;
//border-right:5px solid #cc2322;

//text-align:right;
}

p.deskMenu{
font-size: 2em;
}

.deskSubMenu{
padding-left:0px;
padding-top:15px;
border-left:2px solid #cc2322;
//border-right:2px solid #cc2322;
color:white;
height:60px;
display:inline-block;
position:relative;
width:104px;
text-align:center;
margin-left:0px;
margin-right:0px;

}

.deskSubMenu:hover{
background-color:#cc2322;
border-left:2px solid #232323;
border-right:2px solid #232323;
border-bottom:1px solid white;
color:white;
}

.deskSubMenu:hover span{
color:white;

}

.deskMenuContent div{
width:100px;
height:60px;
padding-top:15px;
padding-bottom:10px;

background-color:#232323;
z-index:1;
border-bottom: 1px solid white;
}

.deskMenuContent div:hover{
color:#cc2322;
}

#dropDown{
display:none;
position:absolute;
top:60px;
left:0px;
z-index:1;

}

span{
color:#cc2322;
}

.deskSubMenu:hover #dropDown{
display:block;
}


#bodyLayout{
display:block;
/*margin-left:9%;*/
min-width:800px;
width:100%;
margin-top:0px;
}


/* Desktop Navigation End */

.greeting{
    width:100%; 
    float:left; 
    color:white; 
    text-align:center; 
    height:180px; 
    margin-top:0px; 
    color:rgba(255,255,255,0.8); 
    margin-bottom:10px;
}

/* Desktop Home Gallery Change */

.galleryContainer{
/*overflow:auto;*/
height:100%;
margin:0px;
padding:0px;
background-color:black;
position:relative;
}


.homeg{
display:block;
margin:auto;
position:relative;
/*min-width:700px; */
width:100%;
height:100%;
background-image:url("media/pics/me2.jpg");
background-size:cover;
}

.homeg2{
display:block;
margin:auto;
position:relative;
/*min-width:700px; */
width:100%;
height:100%;
background-image:url("media/pics/still.png");
background-size:cover;
}

.homeg3{
display:block;
margin:auto;
position:relative;
/*min-width:700px; */
width:100%;
height:100%;
background-image:url("media/pics/illustrations/4_letter_tree.jpg");
background-size:cover;
}

.homeg4{
display:block;
margin:auto;
position:relative;
/*min-width:700px; */
width:100%;
height:100%;
background-image:url("media/pics/canti.png");
background-size:cover;
}

ul{
    width:100%;
}

/* Desktop Home Gallery Change End */

.biopic{
position:relative;
}
.biotext{
padding:10px;
position:absolute;
top:60px;
left:60%;
background-color:#444444;
opacity:0.9;
color:white;
width:300px;
height:400px;
border-left:2px solid white;
font-size:1.1em;
overflow:auto;
}

/* 2d 3d Gallery Modal Links */

.rel-load{
position:relative;
display:block;
width:25%;
padding:1px;
}

.rel{
position:relative;
display:block;
width:100%;
padding:1px;
}

@keyframes slide-up{
    from {top:60px; opacity:0;}
    to {top:0px; opacity:1.0;}  
}

.rel1{
position:relative;
display:block;
width:100%;
padding:1px;
animation-name: slide-up;
animation-duration: 0.5s;
opacity:1;
}
.rel2{
position:relative;
display:block;
width:100%;
padding:1px;
animation-name: slide-up;
animation-duration: 0.5s;
opacity:1;
}
.rel3{
position:relative;
display:block;
width:100%;
padding:1px;
animation-name: slide-up;
animation-duration: 0.5s;
}
.rel4{
position:relative;
display:block;
width:100%;
height:100%;
padding:1px;
animation-name: slide-up;
animation-duration: 0.5s;
}
.rel5{
position:relative;
display:block;
width:25%;
padding:1px;
animation-name: slide-up;
animation-duration: 0.5s;
}
.rel6{
position:relative;
display:block;
width:100%;
height:100%;
padding:1px;
animation-name: slide-up;
animation-duration: 0.5s;
}
.rel7{
position:relative;
display:block;
width:25%;
padding:1px;
animation-name: slide-up;
animation-duration: 0.5s;
}

.hide{
    display:none;
}

.class{
    color: white;
}

.hide 
{
    display:hidden;
}

a.enlarge{
cursor:pointer;
top:0px;
left:0px;
padding:5px;
position:absolute;
width:100%;
height:100%;
}

a.enlarge:hover{
background-color:rgba(255,255,255,0.5);
}
/*
.picHolder{
    margin-top:0px;
margin:auto;
padding:0px;
width:90%;
border-bottom:2px solid #555555;
padding-bottom:25px;
height:100%;
content: "";
clear: both;
display:flex;
flex-wrap: wrap;
}
*/

.picHolder{
    margin-bottom: 10px;
    /*padding-bottom: 80px;*/
    max-width:1200px;
    width:95%;
    margin:auto;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-auto-rows: 6px;
    border-bottom:2px solid #555555;
    padding-bottom: 20px;

    /*grid-template-rows: repeat(10, 10px);*/
    /*grid-template-rows: max-content;*/
    grid-auto-flow: row dense;
    background-color: black;
   max-height: 30000px;
}

.picHolder-load{
margin-top:0px;
margin:auto;
padding:0px;
transform: translateX(-5000px);
 max-width:1200px;
width:95%;
position:absolute;
border-bottom:2px solid #555555;
padding-bottom:25px;
height:100%;
content: "";
clear: both;
display:flex;
flex-wrap: wrap;
}


body{
margin:0px;
}

.galleryTitle{
display:block;
width:95%;
margin:0px;
/*
background-color:#323236;
*/
font-family:"corbel", Arial, Verdana;
color:rgba(255,255,255,0.9);
margin:auto;
/*
border-left:4px solid white;*/
/*
border-right:4px solid #dddddd;*/
}

.galleryTitle h1{
font-weight:100;
width:100%;
}

.section{
position:relative;
float:left;
top:100px;
height:100%;
width:45%;
overflow:hidden;
padding-left:30px;
background-image: -webkit-gradient(linear, left top, left bottom, from(start-color), to(end-color));
background-image: -webkit-linear-gradient(top, start-color, end-color);
background-image: -moz-linear-gradient(top, start-color, end-color);
color:rgba(255,255,255,0.9);
}

.section-right{
position:relative;
float:right;
top:100px;
height:100%;
width:45%;
overflow:hidden;
padding-left:30px;
background-image: -webkit-gradient(linear, left top, left bottom, from(start-color), to(end-color));
background-image: -webkit-linear-gradient(top, start-color, end-color);
background-image: -moz-linear-gradient(top, start-color, end-color);
color:rgba(255,255,255,0.9);
}

.section-cover{
position:relative;
float:left;
top:0px;
height:100%;
width:100%;
overflow:hidden;
background-image: -webkit-gradient(linear, left top, left bottom, from(start-color), to(end-color));
background-image: -webkit-linear-gradient(top, start-color, end-color);
background-image: -moz-linear-gradient(top, start-color, end-color);
background-image: linear-gradient(to right, rgba(0,0,0,0.9) 25%, rgba(50,50,50,0.3));
border-top:3px solid rgba(255,255,255,0.05);
border-bottom:3px solid rgba(255,255,255,0.05);
}

.section-cover-right{
position:relative;
float:left;
top:0px;
height:100%;
width:100%;
overflow:hidden;
left:0px;
background-image: linear-gradient(to left, rgba(0,0,0,0.9) 25%, rgba(50,50,50,0.3));
border-top:3px solid rgba(255,255,255,0.05);
border-bottom:3px solid rgba(255,255,255,0.05);
}

/* Hero */

.hero-container{
  height:450px; 
  background-color:black; 
}

.hero-container-img{
background-color:rgba(0,0,0,0.6); 
height:450px; 
color:white;
}

.hero-title{
text-align:center; 
padding-top:120px; 
padding-right:20%;
position:relative; 
font-size:6.5em; 
font-weight:150;
opacity:0.8;
}

.hero-sub{
text-align:center; 
padding-left:40%; 
position:relative; 
font-size:1.3em; 
font-weight:1; 
letter-spacing:3px;
opacity:0.8;
}

.hero-divide{
border-bottom:2px solid white; 
height:2px; 
position:relative; 
bottom:10px;
opacity:0.8;
}

.hero-place{
display:flex;
justify-content:center;
height:60px;
vertical-align:middle;
align-items: center;
position:absolute;
top:450px;
z-index:1;
}

.hero-control{
background-color:rgba(0,0,0,0.2);
width:16px;
height:16px;
border:2px solid white;
margin:10px;
border-radius: 10px;
opacity:0.7; 
}

.hero-arrow{
position:relative; 
width:35px; 
height:100px; 
background-color:rgba(0,0,0,0.3); 
top:0px; 
right:0px; 
display:flex; 
justify-content:center; 
color:white; 
position:absolute; 
height:450px; 
z-index:1;
font-size:2.8em;
font-weight:1;
opacity:0.8;
align-items: center;
}

.hero-arrow div{
opacity:0.3;
}

.hero-arrow:hover div{
opacity:1;
cursor:pointer;
}

/* Hero */

.wip-title{
padding-top:6px;
padding-bottom:15px;
/*border-top: 2px solid rgba(230,230,230,0.1);*/
/*border-right: 2px solid rgba(230,230,230,0.1);*/
/*padding-left:15px;*/
/*background-image: linear-gradient(to left, #343333 0%, rgba(0,0,0,0.5));*/
text-align:left;
font-size:1.5em;
color:rgba(255,255,255,0.8);
font-weight:250;
/*box-shadow:0px 5px 5px 0px rgba(0,0,0,0.2);*/
}

.wip-genre{
    width:25%; 
    float:left; 
    color:white; 
    text-align:center; 
    height:350px; 
    margin-bottom:45px; 
    color:rgba(255,255,255,0.8);
}

.wip-genre-right{
    width:25%; 
    float:right; 
    color:white; 
    text-align:center; 
    height:350px; 
    margin-bottom:45px; 
    color:rgba(255,255,255,0.8);
}


.wip-genre-cover{
/*background-color:rgba(0,0,0,0.2);*/
height:350px;
width:24%;
position:absolute;
border-top:2px solid rgba(55,55,55,0.04);
background-image: linear-gradient(to bottom, rgba(255,255,255,0.08) 25%, rgba(30,5,0,0.9));
box-shadow:8px 0px 60px 17px rgba(0,0,0,1);
}

.wip-genre-cover-right{
/*background-color:rgba(0,0,0,0.2);*/
height:350px;
width:23.4%;
position:absolute;
border-top:2px solid rgba(55,55,55,0.04);
background-image: linear-gradient(to bottom, rgba(255,255,255,0.08) 25%, rgba(30,5,0,0.9));
box-shadow:8px 0px 60px 17px rgba(0,0,0,1);
}

.wip-project{
margin-bottom:45px;
width:75%;
float:left;
}

.wip-project-right{
margin-bottom:45px;
width:75%;
float:right;
}

.top{
font-size:2.0em;
text-align:left;
margin:0px;
padding-bottom:4px;
border-bottom:1px solid white;
font-weight:300;
}
/* modal gallery */

.modal{
display:none;
left:0px;
top:0px;
position:fixed;
background-color:#222222;
opacity:1;
width:100%;
height:100%;
z-index:2;
color:white;
padding:0px;
margin-top:0px;


}
.modalPic{
display:none;
padding-top:0px;
left:0px;
position:fixed;
z-index:1;
width:100%;
text-align:right;
padding-right:20px;
margin-top:0px;
}

.close{
z-index:1;
color:white;
font-size:1.5em;
width:50px;
position:absolute;
right:5vw;
}

.close:hover,
.close:focus {
cursor:pointer;
}

#naviL{
color:white;
font-size:2em;
cursor:pointer;
height:auto;
border:2px solid #cc2322;
border-radius:5px;
text-align:center;
background-color:rgba(0,0,0,0.3);
width:100px;
}

#naviR{
color:white;
font-size:2em;
cursor:pointer;
height:auto;
border:2px solid #cc2322;
border-radius:5px;
text-align:center;
background-color:rgba(0,0,0,0.3);
width:100px;
}

.navigation{
text-align:left;
position:absolute;
top:0px;
left:0px;
padding-left:1%;
}

#pageGalleries{
display:block;
margin:auto;
max-width:800px; 
max-height:650px;
overflow-y:auto;
margin-top:0px;
position:relative;
}

/* modal gallery */

}

@media only screen and (max-width: 768px) {
/*Mobile Devices*/

/*.rel{
display:block;
width:49%;
padding:1%;
float:left;
clear:right;
}
.rel1{
display:block;
width:49%;
padding:0.5%;
float:left;
clear:right;
}
.rel2{
display:inline-block;
width:49%;
padding:0.5%;
}
.rel3{
display:inline-block;
width:49%;
padding:0.5%;
}
.rel4{
display:inline-block;
width:49%;
padding:0.5%;
}
.rel5{
display:inline-block;
width:49%;
padding:0.5%;
}*/

#gif{
    position:relative;
    margin:auto;
    justify-content: center;
    align-content: center;
}

/* Modal Style */

#pageGalleries{
display:block;
margin:auto;
max-width:100%; 
max-height:auto;
overflow-y:auto;
margin-top:0px;
position:relative;
}

.navigation{
text-align:right;
width:100%;
margin:auto;
position:absolute;
top:30px;
height:100%;
display:flex;
}

#naviL{
color:white;
font-size:4vw;
cursor:pointer;
text-align:center;
background-color:rgba(0,0,0,0.4);
width:5%;
height:90%;
margin:auto;
position:absolute;
right:0px;
display:flex;
align-items: center;
text-align:center;
}

#naviR{
color:white;
font-size:4vw;
cursor:pointer;
text-align:center;
background-color:rgba(0,0,0,0.4);
width:5%;
height:90%;
margin:auto;
position:absolute;
left:0px;
display:flex;
align-items: center;
text-align:center;
}

.pGContainer img{
overflow:hidden;
height:auto;
max-width:100%;
max-height:610px;
padding-left:0vw;
position:fixed;
top:10px;
}

.modal{
display:none;
left:0px;
top:0px;
position:fixed;
background-color:#222222;
opacity:1;
width:100%;
height:100%;
z-index:2;
color:white;
padding:0px;
margin:auto;
flex-direction:column;

}
.modalPic{
position:relative;
display:none;
padding:0px;
left:0px;
z-index:1;
width:100%;
margin:auto;
flex-direction:column;
height:100%;

}

.close{
z-index:1;
color:white;
font-size:1.5em;
width:50px;
position:fixed;
right:5vw;
top:2px;

}

.close:hover,
.close:focus {
cursor:pointer;
}
/* Modal Style End */

@keyframes slide-up{
    from {top:60px; opacity:0;}
    to {top:0px; opacity:1.0;}  
}

.rel{
position:relative;
display:block;
width:100%;
padding:1px;
animation-name: slide-up;
animation-duration: 0.5s;
opacity:1;

}
.rel1{
position:relative;
display:block;
width:100%;
padding:1px;
border-radius:20px;
animation-name: slide-up;
animation-duration: 0.5s;
opacity:1;
}
.rel2{
position:relative;
display:block;
width:100%;
padding:1px;
animation-name: slide-up;
animation-duration: 0.5s;
opacity:1;
}
.rel3{
position:relative;
display:block;
width:100%;
padding:1px;
animation-name: slide-up;
animation-duration: 0.5s;
opacity:1;
}
.rel4{
position:relative;
display:block;
width:100%;
height:100%;
padding:1px;
animation-name: slide-up;
animation-duration: 0.5s;
opacity:1;
}
.rel5{
position:relative;
display:block;
width:100%;
padding:1px;
animation-name: slide-up;
animation-duration: 0.5s;
opacity:1;
}
.rel6{
position:relative;
display:block;
width:100%;
padding:1px;
animation-name: slide-up;
animation-duration: 0.5s;
opacity:1;
}
.rel7{
position:relative;
display:block;
width:100%;
padding:1px;
animation-name: slide-up;
animation-duration: 0.5s;
opacity:1;
}

.hero-arrow{
display:none; 
}

.greeting{
    width:100%; 
    float:left; 
    color:white; 
    text-align:center; 
    height:225px; 
    margin-top:0px; 
    color:rgba(255,255,255,0.8); 
    margin-bottom:15px;
    padding-top:35px;
    }

.wip-title{
padding:5px;
/*border-top: 2px solid rgba(230,230,230,0.1);*/
/*border-right: 2px solid rgba(230,230,230,0.1);*/
/*padding-left:15px;*/
/*background-image: linear-gradient(to left, #343333 0%, rgba(0,0,0,0.5));*/
text-align:left;
font-size:1.3em;
color:rgba(255,255,255,0.8);
font-weight:250;
/*box-shadow:0px 5px 5px 0px rgba(0,0,0,0.2);*/
}

/* Hero */
.hero-container{
  height:450px; 
  background-color:black; 
}

.hero-container-img{
background-color:rgba(0,0,0,0.6); 
height:450px; 
color:white;
width:100%;
}

.hero-title{
text-align:center; 
padding-top:220px; 
padding-right:20%;
position:relative; 
font-size:3.5em; 
font-weight:150;
opacity:0.8;
}

.hero-sub{
text-align:center; 
padding-left:40%; 
position:relative; 
font-size:0.8em; 
font-weight:1; 
letter-spacing:3px;
opacity:0.8;
}

.hero-divide{
border-bottom:2px solid white; 
height:2px; 
position:relative; 
bottom:10px;
opacity:0.8;
}

.hero-place{
    display:flex;
    justify-content:center;
    height:60px;
    vertical-align:middle;
    align-items: center;
    position:absolute;
    top:500px;
    z-index:1;
}

.hero-control{
    background-color:rgba(0,0,0,0.2);
    width:16px;
    height:16px;
    border:2px solid white;
    margin:10px;
    border-radius: 10px;
    opacity:0.7; 
}

.galleryContainer{
/*overflow:auto;*/
height:100%;
margin:0px;
padding:0px;
background-color:black;
position:relative;
}

/* Hero */

.homeg{
display:block;
margin:auto;
position:relative;
/*min-width:700px; */
width:100%;
height:100%;
background-image:url("media/pics/me2.jpg");
background-size:cover;
}

.homeg2{
display:block;
margin:auto;
position:relative;
/*min-width:700px; */
width:100%;
height:100%;
background-image:url("media/pics/still.png");
background-size:cover;
}

.homeg3{
display:block;
margin:auto;
position:relative;
/*min-width:700px; */
width:100%;
height:100%;
background-image:url("media/pics/illustrations/4_letter_tree.jpg");
background-size:cover;
}

.homeg4{
display:block;
margin:auto;
position:relative;
/*min-width:700px; */
width:100%;
height:100%;
background-image:url("media/pics/canti.png");
background-size:cover;
}

.wip-genre{
    display:none;
}

.wip-genre-right{
    display:none;
}

.wip-project{
margin-bottom:45px;
width:100%;
float:left;
}

.wip-project-right{
margin-bottom:45px;
width:100%;
float:left;
}

.section{
position:relative;
top:225px;
z-index:1;
height:125px;
overflow:auto;
background-image: -webkit-gradient(linear, left top, left bottom, from(start-color), to(end-color));
background-image: -webkit-linear-gradient(top, start-color, end-color);
background-image: -moz-linear-gradient(top, start-color, end-color);
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,1));
color:rgba(255,255,255,0.8);
padding:10px;
}

.section-right{
position:relative;
top:225px;
z-index:1;
height:125px;
overflow:auto;
background-image: -webkit-gradient(linear, left top, left bottom, from(start-color), to(end-color));
background-image: -webkit-linear-gradient(top, start-color, end-color);
background-image: -moz-linear-gradient(top, start-color, end-color);
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,1));
color:rgba(255,255,255,0.8);
padding:10px;
}

.top{
font-size:1.7em;
text-align:left;
margin:0px;
padding-bottom:4px;
border-bottom:1px solid white;
font-weight:300;
}


.graph{
display:none;
}

#sidebar1{
display:none;
}

.deskMenu{
display:none;
}


#bodyLayout{
margin-left:0;
padding:0px;
}

#bodyColumn{
margin-left:0;
padding:0px;
}


.title{
display:none;
}


.mobTitle{
height:80px;
width:100%;
border-left:4px solid #cc2322;
border-right:4px solid #cc2322;
background:url("media/pics/eyes.png") no-repeat
center;
}

.biopic{
position:relative;
}

.biotext{
display:none;
padding:10px;
position:absolute;
top:0px;
background-color:#444444;
opacity:0.9;
color:white;
width:100%;
height:100%;
border-left:2px solid white;
font-size:1.1em;
overflow:auto;
}

.biopic:hover .biotext{
display:block;
}

/*div.rel{
display:inline-block;
width:49%;
padding-left:0.5%;
}*/
a.enlarge{
cursor:pointer;
top:0px;
left:0px;
padding:5px;
position:absolute;
width:100%;
height:100%;
}

a.enlarge:hover{
background-color:rgba(255,255,255,0.5);
}


body{
margin:0px;
}

.galleryTitle{
display:block;
width:100%;
padding-bottom:30px;
height:40px;
font-family:"corbel", Arial, Verdana;
color:#eeeeee;
margin:0px;
text-align:center;
background-color:#323236;
margin-bottom:20px;
font-weight:100;

}

.galleryTitle h1{
font-weight:100;
}

/* original mobile gallery */
/*.picHolder{
margin-top:0px;
display:flex;
flex-direction: row;
flex-wrap:wrap;
margin:auto;
padding:0px;
width:95%;
border-bottom:2px solid #555555;
padding-bottom:25px;
align-items: center;
}*/

.picHolder{
    margin-bottom: 10px;
    /*padding-bottom: 80px;*/
    max-width:1200px;
    width:95%;
    margin:auto;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-rows: 6px;
    border-bottom:2px solid #555555;
    padding-bottom: 20px;

    /*grid-template-rows: repeat(10, 10px);*/
    /*grid-template-rows: max-content;*/
    grid-auto-flow: row dense;
    background-color: black;
   max-height: 30000px;
}

.picHolder-load{
margin-top:0px;
margin:auto;
padding:0px;
transform: translateX(-5000px);
 max-width:1200px;
width:95%;
position:absolute;
border-bottom:2px solid #555555;
padding-bottom:25px;
height:100%;
content: "";
clear: both;
display:flex;
flex-wrap: wrap;
}

.rel-load{
position:relative;
display:block;
width:50%;
padding:1px;
}

}



/* Responsive Web Design */



/* Body Content */

a{
color:white;
text-decoration:none;
}

#body{
border:1px #cc2322 solid;
top:250px;
position:relative;
}

#bodyLayout{
background-color:#080108;
height:auto;	
}

#bodyColumn{
line-height:1.4;
font-weight:bold;
background-color:black;
box-shadow:0px 4px 6px 0px rgba(0,0,0,0.2);
}

.section p{
color:#eeeeee;color:rgba(255,255,255,0.8);
line-height: 1.5em;
padding-top:0px; 
}


.wipImage{
height:350px;
background-image:url("media/pics/designs/skate2.png");
background-size:cover;
}

.wipImage1{
height:350px;
background-image:url("media/pics/illustrations/mang.png");
background-size:cover;
}

.wipImage2{
height:350px;
background-image:url("media/pics/lia.png");
background-size:cover;
}

.seq{
    position: relative;
    margin:auto;
    top:30%;
}



/* mobile menu style */

.nav{
height:50px;
width:100%;
background-color:#111111;
position:relative;
z-index:1;
}

.logo{
font-size:1.0em;
font-family:"century";
color:#cc2322;
display:block;
float:left;
margin-left:5px;

}

.logo2{
font-size:1.0em;
font-family:"corbel", Arial, Verdana;
color:white;
top:8px;
margin-left:10px;
float:left;
}

.mobMenu{
width:50px;
height:50px;
display:block;
position:relative;
background:url(media/graphics/mobileButton.png);
float:left;
}

.menu{
top:50px;
z-index:1;
display:none;
width:50%;
height:auto;
border:1px solid black;
background-color:grey;
position:absolute;
opacity:0.8;
}



.subMenu{
display:block;
background-color:#cc2322;
color:white;
font-size:1.4em;
height:60px;
width:auto;
text-align:center;
padding:10px;
border-bottom:2px solid black;
}

.menuContent div{
text-align:center;
font-size:1.4em;

border-bottom:1px solid black;
height:60px;
padding-top:20px;
color:white;
}

.menuContent{
display:none;
}

/*
.men:hover .menuContent div{
display:block;
}*/

.show{
display:block;
}

.change{
background:url(media/graphics/mobileButtonClose.png);
}

/* Menu window follow */

.stay{
position:fixed;
width:98.5%;
}

/* Menu window follow */

/* home Gallery */


.gallery{
}

.gallContain{
position:relative;
overflow:hidden;
height:300px;
}

.label{
text-align:left;
font-size:1.6em;
color:#eeeeee;
margin:0px;
}

.hideable {
display: none;
position:relative;
}


/* menu style */

/* 2d 3d gallery */


.picPlace{
width:50%;
}



#image{
width:45%;

}

#imgClose{
display:inline-block;
background-color:#cc2322;
}

.imgClose{
display:inline-block;
}

.pGContainer{
overflow:hidden;
height:auto;
}

/*#all{
display:flex;
flex-direction: row;
flex-wrap:wrap;
}*/

.more{
       padding:20px;
    position:relative;
    width:75%;
    margin:auto;
    text-align:center;
    color:white;
    font-weight:bold;
}

.more:hover{
    color :#cc2322;
    cursor:pointer;
    background-color:#232323;
    opacity:0.9;
}

.loading{
    height:100%;
    width:100%;
    background-color:black;
    z-index:3;
    color:white;
    position:fixed;
    top:0;
}

/* 2d 3d gallery End */

/* favorite Artists */

.graph{
/*border:1px solid #444444;*/
background-color:#232222;
margin-top:0px;
max-width:340px;
top:60px;
position:fixed;
float:right;
width:300px;
right:-300px;
box-shadow:8px 0px 15px 4px rgba(0,0,0,1);
/*display:none;*/
}

.graph-close{
/*border:1px solid #444444;*/
background-color:#232222;
margin-top:0px;
max-width:340px;
top:60px;
position:fixed;
float:right;
width:300px;
right:-300px;
box-shadow:8px 0px 15px 4px rgba(0,0,0,1);
display:none;
}



.welcome{
/*background-color:rgba(0,0,0,0.2);*/
height:200px;
width:100%;
left:0;
position:absolute;
background-image: linear-gradient(to bottom, rgba(50,50,50,0.4) 40%, rgba(20,5,0,0.0));

}

.fav{
padding-bottom:10px;
text-align:left;
font-family:"Corbel", Arial, Verdana;
font-size:1.3em;
font-weight:normal;
color:rgba(255,255,255,0.9);
padding-top:0px;
max-width:800px;
display:block;
border: 1px solid rgba(255,30,10,0.5);
background-image: linear-gradient(to right, rgba(204,35,34,0.4) 80%, rgba(30,10,10,0.9));
padding:3px;
padding-left:0px;
position:relative;
cursor:pointer;
/*border-left: 4px solid white;*/
}

.fav-button{
background-color: #323236;
padding-bottom:10px;
text-align:left;
font-family:"Corbel", Arial, Verdana;
font-size:1.3em;
font-weight:normal;
color:rgba(255,255,255,0.9);
padding-top:0px;
max-width:800px;
padding:3px;
padding-left:15px;
position:relative;
cursor:pointer;
}

.fav-button-close{
background-color:#323236;
padding-bottom:10px;
text-align:left;
font-family:"Corbel", Arial, Verdana;
font-size:1.3em;
font-weight:normal;
color:rgba(255,255,255,0.9);
padding-top:0px;
max-width:800px;
display:block;
border: 1px solid rgba(255,30,10,0.5);
border-right:0px solid white;
background-image: linear-gradient(to right, rgba(204,35,34,0.7) 80%, rgba(30,10,10,0.9));
padding:3px;
padding-left:15px;
position:relative;
cursor:pointer;
}

.favpic{
background-color:#323236;
height:70px;
max-width:800px;
display:block;
margin:auto;
margin-top:4px;
overflow:hidden;
position:relative;
text-align:center;
font-family:"corbel", Arial, Verdana;
font-size:1.2em;
color:white;
padding-top:40px;
//border-bottom:1px solid white;
}

#sidebar1{
background:url("media/pics/basquiat.png") no-repeat
center;
}
#sidebar2{
background:url("media/pics/takashi.png") no-repeat
center;
}
#sidebar3{
background:url("media/pics/todd.png") no-repeat
center;
}
#sidebar4{
background:url("media/pics/flcl.png") no-repeat
center;
}
#sidebar5{
background:url("media/pics/haans.png") no-repeat
center;
}
#sidebar6{
background:url("media/pics/banksee.png") no-repeat
center;
}
#sidebar7{
background:url("media/pics/andy.png") no-repeat
center;
}
#sidebar8{
background:url("media/pics/cowboy.png") no-repeat
center;
}

.overlay{
background-color:#323236;
position:absolute;
top:0px;
min-width:800px;
height:70px;
opacity:0.6;
}

#sidebar1:hover .overlay{
display:none;
}
#sidebar2:hover .overlay{
display:none;
}
#sidebar3:hover .overlay{
display:none;
}
#sidebar4:hover .overlay{
display:none;
}
#sidebar5:hover .overlay{
display:none;
}
#sidebar6:hover .overlay{
display:none;
}
#sidebar7:hover .overlay{
display:none;
}
#sidebar8:hover .overlay{
display:none;
}

/* Favorite Artists End */

header{ 

}

img{
display:block;
max-width:100%;

margin:auto;
}

Menu{
background-color:#cc2322;
position:absolute;
top:120px;
left:20px;
}

.biotext p{
line-height:1.8;
padding-top:0px;
}

div{
font-family:"corbel", Arial, Verdana;
}

/* Video */

video {
width:100%;
height:300px;
padding:0px 5% 50px 5%;
}

footer{
font-family:"arial", times, serif;
line-height:1.4;
font-weight:bold;
background-color:black;
/*height:100px;*/
color:white;
box-shadow:0px 4px 6px 0px rgba(0,0,0,0.2);
}

div footer{
text-align:right;
float:right;
}