*{
color:#282828;
font-family: 'BioRhyme', sans-serif;
margin:0px 0px;
transition: .5s all;
}
body{
background:rgb(170,70,70)
}
a{
text-decoration:none;
color:rgb(40,40,40)
}
a:hover{
color:rgb(170,70,70);
transition: all 0.5s ease-in-out;
}
hr{
height:0.3vw;
background:#AA4646;
border-left: 10vw solid rgb(220,220,220);
border-right: 5vw solid rgb(220,220,220);
text-decoration: none;
border-bottom: none;
border-top: none;
margin:0;
padding:0;
}
h1{
color:white;
font-family:"Bungee", Helvetica, sans-serif;
font-size:2.5vw;
}
h2{
color:white;
margin-top:10px;
font-size:30px;
}
h2 a{
color:rgba(188,188,188,1.00);
font-style:italic;
}
h2 a:hover{
color:rgba(254,0,0,1.00);
transition: all 0.5s ease-in-out;
}
p a{
color:rgba(146,0,0,1.00);
font-style:italic;
}
p a:hover{
color:rgba(254,0,0,1.00);
transition: all 0.5s ease-in-out;
}
h3{
font-size:1.2vw;
color:white;
}
nav{
padding: 1% 1%;

background: rgb(170,70,70);
display:flex;
justify-content:center;
width:98%;
box-shadow: 5px 5px 15px rgb(40,40,40);
margin: auto auto;
}
#MobileNav{
padding: 0;

display:flex;
justify-content:center;
width:100%;
}
nav label{
display:none;        
}
#toggle{
display: none;
}
#MobileNav a{
display:inline-block;
margin:auto auto;
font-size:1.5vw;

color:white;
text-align:center;
font-family: 'Rubik', sans-serif;
text-transform: uppercase;
}
#MobileNav a:hover{
color:black;
}

footer{
margin: auto auto;
background:#AA4646;
width:100%;
clear: both;
padding:1% 0px;
}
footer h3{
color: white;
font-family: 'Rubik', sans-serif;
text-transform: uppercase;
text-align: center;
font-size:2vw;
}
#FooterLinks{
width:30%;
margin:1% auto;
}
#FooterLinks a{
display:inline-block;
margin: 0;
width:22%;
text-align: center;
padding: 0;
}
#FooterLinks img{
height:4vw;
margin: 0;
padding: 0;
}

/*Home Page*/
#Content{
width:100%;
margin: 0px auto;
}
#Title {
width:100%;
padding-bottom:56.25%;
background-image: url(../img/HeaderLoop.gif);
background-size:100% auto;
background-repeat: no-repeat;
}

.container{
width:85%;
margin:0 auto;
}
#Promos{
	margin-bottom: 20vw;
}
#Summary{
width:100%;
}
#Summary p{
width:47%;
color:white;
font-size:2.28vw;
float:left;
background:rgb(40,40,40);
margin: 1% .5%;
border-radius: 5px;
box-shadow: 5px 5px 15px rgb(40,40,40);
padding:1% 1% 0% 1%;
overflow:hidden;
text-align: left;

}

#Summary p img{
width:100%;
 margin:0;
padding: 0;
}
#Feature{
width:100%;
background: rgba(74,74,74,1);
clear:both;
padding: 1% 0;
padding-bottom:32%;
}
.ratiofix {
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 39.375%;
box-shadow: 5px 5px 15px rgb(40,40,40);
margin: 0;
width:70%;
float:left;
background: rgba(74,74,74,1);
}
.ratiofix iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 5px 5px 15px rgb(40,40,40);
float:left;
}
#FeatureContent{
width:75%;
margin:auto auto;
padding:1%;
}
#FeatureWords{
float:right;
width:30%;
margin-top:1%;
background:rgb(40,40,40);
box-shadow: .3vw 5px 15px rgb(40,40,40);
border-radius: 0px .5vw .5vw 0vw;
border-top: .2vw solid rgb(170,70,70);
border-bottom: .5vw solid rgb(170,70,70);
}
#FeatureWords h1{
font-family:Rubik;
font-size:2vw;
text-align: center;
border-bottom: 2px solid rgb(170,70,70);
margin:1%;
text-transform: uppercase;
}
#FeatureWords h1:hover{
color:rgb(170,70,70);
    transition: all 0.25s ease-in-out;
}
#FeatureWords h2{
font-size:1.4vw; 
padding:1% 3%;
}
.Portfolio{
width:100%;
background:rgb(220,220,220);
clear:both;
padding-bottom:25%;
}
.Portfolio:nth-child(even){
width:100%;
background:rgb(40,40,40);
clear:both;
padding-bottom:25%;
}
.Portfolio:nth-child(even).Portfolio h1{
color:white;
margin-top:1%;
}
.Portfolio article{
padding:1%;
margin:1%;
width:29%;
float:left;
opacity: 1;
background:rgb(220,220,220);
border-radius: 5px;
box-shadow: 5px 5px 15px rgb(40,40,40);
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;
margin-top:1%;
}

.Portfolio h2{
text-align:center;
color:black;
font-family:Rubik;
font-size: 2vw;
}
.Portfolio article:hover h2{
color:rgb(170,70,70);
transition: all 0.1s ease-in-out;
}


/*PORTFOLIO PAGE*/
#PortfolioSound iframe{
display:flex;
justify-content:center;
padding-bottom: 42.1875%;
width: 100%;
height: 100%;
}
.ratiofixSound {
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 29%;
box-shadow: 5px 5px 15px rgb(40,40,40);
margin-bottom: 3%;
width:100%;
background: rgba(74,74,74,1);

}
.ratiofixSound iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 5px 5px 15px rgb(40,40,40);
float:left;
}

/* ABOUT PAGE */
#AboutTitle{
margin:0 auto;
clear: both;
width:100%;
background:rgb(40,40,40);
padding-bottom:42.5%;
}
#GlueContainer{
width:85%;
display: block;
margin: 0 auto;
    
}

#AboutImg{
width:50%;
display: block;
float:left;
background:url(../img/AboutGif.gif);
background-size:100% auto;
background-repeat: no-repeat;
padding-bottom: 70%;
margin: 1.75% 0;
}
#GlueContainer div{
width:50%;
float: left;
}
#GlueContainer div h1{
width:95%;
float: none;
padding:2%;
font-size:7.5vw;
line-height:7vw;
text-align: center;;
background: rgb(170,70,70);
margin-top:3.5%;
border-radius: 0vw 2vw 2vw 0vw;
}
#GlueContainer div h3{
width:100%;
padding:2%;
font-size:1vw;
background: rgb(220,220,220);
color:black;
margin-top:1%;
border-radius: 0vw 2vw 2vw 0vw;
}
#AboutSummary {
width:98%;
color:white;
font-size:1vw;
margin: 0 auto;
padding: 1%;
overflow:hidden;
}
#AboutSummary p{
width:100%;
color:white;
font-size:1vw;
margin: 0 auto;
padding: 0;
overflow:hidden;
}
#AboutCon{
margin: 0 auto;
clear: both;
width:85%;
background:rgb(40,40,40);
padding: 2% 7.5%;
clear:both;
padding-bottom:45%;
}

#AboutCon article{
padding:1%;
margin:1%;
width:29%;
float:left;
opacity: 1;
background:rgb(220,220,220);
border-radius: 5px;
box-shadow: 5px 5px 15px rgb(40,40,40);
color:black;
}
#AboutCon article:hover{
background:rgb(40,40,40);
color:rgb(170,70,70);
transition: all 0.25s ease-in-out;
}

#AboutCon img{
width:100%;  
}
#AboutCon img:hover{
width:100%; 
opacity:0.5;
}
#AboutCon h2{
text-align:center;
color:black;
font-family:Rubik;
font-size: 2vw;
}
#AboutCon h3{
text-align:center;
color:rgb(170,70,70);
font-family:Rubik;
font-size: 1.2vw;
}
#AboutCon h4{
text-align:center;
color:rgb(40,40,40);
font-family:Rubik;
font-size: 1vw;
}
#AboutCon article:hover h2{
color:rgb(170,70,70);
transition: all 0.1s ease-in-out;
}
#AboutCon h1{
font-size: 4vw;
line-height: 5vw;
text-align: center;
}
#pdf{
margin-top: 4%;
background: rgb(40,40,40);
display:flex;
justify-content:center;
margin: 0 3%;
}
#pdf img{
width:10%;
display:inline-block;
}
#pdf h1{
font-size:3vw;
color:white;
display:inline-block;
}
#pdf:hover h1{
color:rgb(170,70,70);
transition: all 0.25s ease-in-out;
}
#pdf:hover img{
opacity:0.5;
transition: all 0.25s ease-in-out;
}

/**CONTACT PAGE START**/

#Contact{
width:100%;
}
#ContactSummary {
width:100%;
color:white;
font-size:1vw;
background:rgb(40,40,40);
margin: 0 auto;
padding: 0;
overflow:hidden;
}
#ContactSummary h1{
text-align:center;
font-size:5vw;
border-bottom: 1vw solid rgb(170,70,70);
}

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




/* SlideShow Styles */

#Pics h1{
    text-align: center;
    font-size:3vw;
    
}
#Pics{
    background: rgb(40,40,40);
    
}
.gallery{
    margin:1% auto;
    width:96%;
    background: white;
 
}
.gallery img{
    transition: 1s;
    float: left;
    width: 24.8%;
    padding:;
    margin:.1%;
    display: inline-block;
    box-sizing: border-box;
    border:0.25vw solid rgb(220,220,220);
    box-shadow: .3vw 5px 15px rgb(40,40,40);
    
}
.gallery iframe{
    transition: 1s;
    float: left;
    width: 24.8%;
    padding:;
    margin:.1%;
    display: inline-block;
    box-sizing: border-box;
    border:0.25vw solid rgb(220,220,220);
    box-shadow: .3vw 5px 15px rgb(40,40,40);
    
}
.gallery img:hover{
    filter:grayscale(100%)
}

.row {
display: flex;
flex-wrap: wrap;
padding: 0 1%;
background:rgb(40,40,40);
padding-top:1%;
}


.column {
  flex: 24.5%;
  max-width: 24.5%;
  margin:0 auto;
  margin-bottom: 100px;
}

.column img {
    width:97%;
    margin: 2% 0;
    vertical-align: middle;
    border:0.25vw solid rgb(220,220,220);
    box-shadow: .3vw 5px 15px rgb(40,40,40);
}
.column img:hove{
    filter: grayscale(100%)
}

	
.
/**BLOGS PAGE START**/

.BlogBody{ 
    width:100%;
    background:rgb(220, 220, 220);
    padding:.2% 0;
}
.BlogContainer{ 
    width:70%;
    margin:1% auto;
    background-image:url(../Blog/BlogBG.jpg);
    box-shadow: .3vw 5px 15px rgb(40,40,40);
    border-radius: .1vw;
    background-size: 23.5% auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 19.5% 4%;
}

#BlogImg{
    width:32%;
    padding-bottom:50%;
    float:left;
    margin-left:1%;
    
}
#BlogImg h1{
    font-size:3vw;
    line-height:2.5vw;
    padding: 3% 1%;
    
}

#BlogContent{
    width:65%;
    float:right;
    padding:0 1% 2% 1%;
    border-top: 1vw solid rgb(170,70,70);
    border-bottom: 1vw solid rgb(170,70,70);
    background:white;
}

#BlogContent h3{
    display:inline;
}

.BlogType{ 
    color:rgb(170,70,70);
}

.Slash{ 
    color:black;
}

.BlogInfo{ 
    color:rgb(39, 39, 39);
}

.BlogTitle {
    color:white;
    font-family:"Bungee", Helvetica, sans-serif;
    font-size:3vw;
    line-height:2.5vw;
    color:rgb(40,40,40);
}

.BlogTitle span{
    color:rgb(170,70,70);
    font-family:"Bungee", Helvetica, sans-serif;
    font-size:3vw;
}

.Share{
    color:rgb(0, 177, 255);
    font-size:1.5vw;
}

.Share img{
    height:1.5vw;
}

#BlogSummary{
    font-size: 1.5vw;
    color:rgb(100,100,100);
}

#BlogContent p{
    margin-top:2%;
    font-size:1.2vw;
}

.bloglink{
	color:rgb(170,70,70);
}
.bloglink:hover{
	text-decoration: underline;
}
#Stuff{
    clear:both; 
   
}

.threeD{
  provider_url: "https://sketchfab.com";
  thumbnail_url: "https://d35krx4ujqgbcr.cloudfront.net/urls/dGUrytaktlDeNudCEGKk31oTJY/thumbnails/0d51317e30f84af69ff37091f50bf41c/640.jpeg";
  thumbnail_width: 640;
  thumbnail_height: 360;
  height: 360;
  width: 640;  
  author_name: "Klaas Nienhuis";
  title: "Maison d'artiste",
  html: "<iframe width="640" height="360" src="https://sketchfab.com/models/dGUrytaktlDeNudCEGKk31oTJY/embed" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/models/dGUrytaktlDeNudCEGKk31oTJY?utm_source=oembed&utm_medium=embed&utm_campaign=dGUrytaktlDeNudCEGKk31oTJY" target="_blank" style="font-weight: bold; color: #1CAAD9;">Maison d&#39;artiste</a> by <a href="https://sketchfab.com/klaasnienhuis?utm_source=oembed&utm_medium=embed&utm_campaign=dGUrytaktlDeNudCEGKk31oTJY" target="_blank" style="font-weight: bold; color: #1CAAD9;">Klaas Nienhuis</a> on <a href="https://sketchfab.com?utm_source=oembed&utm_medium=embed&utm_campaign=dGUrytaktlDeNudCEGKk31oTJY" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a> </p>",
  version: "1.0",
  author_url: "https://sketchfab.com/klaasnienhuis",
  provider_name: "Sketchfab",
  type: "rich"
}