/* Tablet */
@media screen and (max-width:1000px) {


}
   


/* Mobile */
@media screen and (max-width : 868px ){

nav label{
display:block;
cursor:pointer;
text-align: left;
font-size: 8vw;
border-bottom:.75vw solid rgb(40,40,40);
padding-left:2%;
}

#MobileNav a{
font-size:7vw;
text-align: center;
border-bottom:.75vw solid rgb(40,40,40);
width:100%;
margin: 0 auto;
padding: 2% 0;
}
#MobileNav{
display:none;
}
nav{
padding: 0;
display:block;
width:100%;
margin:0;
}
#MobileNav a:hover{
color:white;
background:rgb(40,40,40);
}

#toggle:checked + #MobileNav {
display:block;
}
footer{
padding:1% 0px;
}
footer h3{
font-size:5vw;
}   
#FooterLinks{
width:100%;
margin:1% auto;
}
#FooterLinks a{
display:inline-block;
margin: 0;
width:23%;
text-align: center;
padding: 0;
}
#FooterLinks img{
height:10vw;
margin: 0;
padding: 0;
}

    
/*Mobile Home Page*/    
.container{
width:92%;
}
#Title {
width:100%;
padding-bottom:177.77%;
background-image: url(../img/MobileTitle.jpg);
background-size:100% auto;
background-repeat: no-repeat;
}    
#Summary{
width:100%;
background:rgb(40,40,40);
border-radius: 3vw;
box-shadow: 5px 5px 15px rgb(40,40,40);
}
#Summary p{
width:97%;
color:white;
font-size:4vw;
float:none;
margin: 1% .5% 1% .5%;
background:none;
box-shadow: none;
}
#Summary p:nth-child(even){
margin: 0% .5% 3% .5%;
}
#Summary p img{
width:100%;
}
    
#Feature{
width:100%;
background: rgb(100, 100, 100);
padding: 2% 0;
}
.ratiofix {
padding: 0 0 56.25% 0;
box-shadow: none;
width:100%;
float:none;
background: rgb(0, 0, 0);
}
.ratiofix iframe {
box-shadow: none;
float:none;
}
#FeatureContent{
width:94%;
padding:3%;
}
#FeatureWords{
float:none;
width:99%;
margin-top:0%;
box-shadow: none;
border-radius: 0px 0vw 5vw 5vw;
border-bottom: 0vw solid rgb(170,70,70);
border: .5vw solid rgb(170,70,70);
}
#FeatureWords h1{
font-family:Rubik;
font-size:6vw;
border-bottom: 1vw solid rgb(170,70,70);
}
#FeatureWords h1:hover{
color:rgb(170,70,70);
transition: all 0.25s ease-in-out;
}
#FeatureWords h2{
font-size:3.5vw; 
padding: 0 3% 1%;
}
.Portfolio{
width:100%;
background:rgb(220,220,220);
padding-bottom:1%;
clear:both;
}
.Portfolio article{
padding:2% 1%;
margin:4% auto;
width:98%;
float:none;
opacity: 1;
background:rgb(220,220,220);
border-radius: 5px;
border: .25vw solid rgba(40, 4, 41, 0.25);
color:black;
}
.Portfolio article:hover{
background:rgb(40,40,40);
color:rgb(170,70,70);
transition: all 0.25s ease-in-out;
}
.Portfolio img{
width:100%;  
}
.Portfolio img:hover{
width:100%;  
}
.Portfolio h1{
color:black;
font-size:8vw;
text-align: center;
padding: 2% 0 0 0;
    line-height: 8vw;
}
.PortfolioSound h1{
color:white;
font-size:8vw;
text-align: center;
padding: 2% 0 0 0;
}
.Portfolio h2{
text-align:center;
color:black;
font-family:Rubik;
font-size: 6vw;
margin-top:0;
}
.Portfolio article:hover h2{
color:rgb(170,70,70);
transition: all 0.1s ease-in-out;
}

    
/** MOBILE ABOUT PAGE START **/
#AboutTitle{
width:100%;
padding:0;
margin:0;
}
#GlueContainer{
width:100%;
padding:0;
margin:0;
}
#AboutImg{
width:100%;
margin: 0 auto;
background:url(../img/AboutGif.gif);
padding-bottom: 141%;
background-size: 100% auto;
background-repeat: no-repeat;
float:none;
}
#GlueContainer img{
width:100%;
display: block;
float:none;
padding:0;
margin:0;
}
#GlueContainer div{
width:100%;
float: none;
padding:2% 0;
margin:0;
background: rgb(40,40,40);
    
}
#GlueContainer div h1{
width:100%;
float: none;
padding: 1% 0%;
font-size:17vw;
line-height:15vw;
border-radius: 0vw 0vw 0vw 0vw;
text-align: center;
margin:0;
    
}
#GlueContainer div h3{
width:96%;
padding: 2%;
font-size:3vw;
padding-top:1%;
text-align: center;
border-radius: 0vw 0vw 2vw 0vw;
float: none;
margin:0 auto;
}

#AboutSummary {
width:98%;
padding:1%;
}  
#AboutSummary p{
font-size:5vw;
}   
    
#AboutCon{
padding-bottom:1%;
clear:both;
}
#AboutCon article{
padding: 2% 1%;
margin: 4% auto;
width:98%;
float:none;
opacity: 1;
border-radius: 5px;
border: .25vw solid rgba(40, 4, 41, 0.25);
}
#AboutCon article:hover{
background:rgb(40,40,40);
color:rgb(170,70,70);
transition: all 0.25s ease-in-out;
}

#AboutCon h1{
font-size:8vw;
padding: 2% 0 0 0;
line-height: 8vw;
}

#AboutCon h2{
text-align:center;
font-size: 6vw;
}
#AboutCon h3{
font-size: 5vw;
}
#AboutCon h4{
font-size: 4vw;
}

#AboutCon article:hover h2{
color:rgb(170,70,70);
transition: all 0.1s ease-in-out;
}

/** MOBILE CONTACT PAGE START **/
#Contact{
background:rgb(220,220,220);
padding: 1% 0;
margin:0 auto;
width:100%;
}

#ContactSummary {
width:90%;
color:white;
background:rgb(40,40,40);
margin: 3% auto;
background:rgb(40,40,40);
padding: 1%;
overflow:hidden;
border-radius: 3vw;
box-shadow: 1vw 1vw 3vw rgb(40,40,40);
display:block;
}
#ContactSummary h1{
font-size:7vw;
margin: 1% auto;
width:100%;
}

#top{
margin-top:1%;
padding-top:0.5%;
}
form label,form input,form textarea,form select{
display:block;
margin: 0 auto 1% auto;
border-radius:1vw;
text-align:center;
font-size:5vw;
color:white;
padding:0;
margin: auto;
}
    form{
        width:90%;
        margin:0 auto;
    }
textarea{
width:80%;
height:20vw;
resize:none;
font-size:3vw;
padding:0.25%;
border-radius:1vw 1vw 0vw 0vw;
margin-bottom:0%;
}
input[type="text"]{
width:80%;
padding:0.25%;
}
form input,form textarea,form select{
color:rgb(0, 0, 0);
font-size:5vw;
}
select{
font-size:3vw;
padding:0.5%;
}
input[type="submit"]{
color:rgb(255, 255, 255);
background:rgb(170,70,70);
font-size:5vw;
width:80.5%;
text-align:center;
transition: all 0.5s ease-in-out;
font-family:'Bungee';
border-radius:0vw 0vw 1vw 1vw;
margin-bottom:2%;
}
input[type="submit"]:hover{
background:rgb(40,40,40);
transition: all 0.5s ease-in-out;
}
#thankyou{
text-align:center;
width:100%;
padding:5% 0;
}
    
/* SlideShow Styles */

#Pics h1{
    text-align: center;
    font-size:7vw;
}
#Pics{
    background: rgb(40,40,40);
    
}
.gallery{
    margin:1% auto;
    width:99%;
 
}
.gallery img{
    transition: 1s;
    float: left;
    width: 49.3%;
    padding:;
    margin:.1% auto;
    display: block;
    box-sizing: content-box;
    border:0.25vw solid rgb(220,220,220);
    
}
    .gallery iframe{
    transition: 1s;
    float: none;
    width: 99%;
    padding:;
    margin:.1% auto;
    display: block;
    box-sizing: content-box;
    border:0.25vw solid rgb(220,220,220);
    
}
.gallery img:hover{
    filter:grayscale(100%)
}
    
    /* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

    
/**BLOGS PAGE START**/

.BlogBody{ 
    width:100%;
    background:white;
}
.BlogContainer{ 
    width:100%;
    margin:1% auto;
    background:none;
    box-shadow: .0vw 0px 0px rgb(40,40,40);
    border-radius: 0vw;
    background-size: 0% auto;

}

#BlogImg{
    float:none;
    display:none;

}


#BlogContent{
    width:90%;
    float:none;
    padding:1% auto;
    margin: 1% auto;
}

#BlogContent h3{
    font-size:4vw;
    line-height: 1vw
}

.BlogTitle {
    font-size:7vw;
    line-height:6.5vw;
    color:rgb(40,40,40);
}

.BlogTitle span{
    color:rgb(170,70,70);

    font-size:6.5vw;
}

.Share{
    color:rgb(0, 177, 255);
    font-size:6vw;
    line-height: 3vw;
}

.Share img{
    display:inline;
    height:3.5vw;
    margin:0;
    padding:0;
}

#BlogSummary{

}


#BlogContent p{
    margin-top:6%;
    font-size:3.5vw;
}
#Stuff{
    clear:both; 
   
}    
    
}