* { 
margin: 0; 
padding: 0; 
}
body {
width: 100%;
height: 100%
}
p{
margins: 0px;
padding: 0px;
}

@media screen and (max-width: 500px) {
#content{
width: 100%;
}
}
#content{
width: 70%;
position: relative;
margin: auto;
margin-top: .5%;
margin-bottom: .5%;
padding: 0;
border-style: solid;
border-width: 1px;
border-color: #A9138E;
}
header {
margin-bottom: 2%;
}
menu{
position: relative;
margin-left: 93.25%;
margin-top: -19.5%;
}
menu img{
width: 40%;
}
#title img{
margin-left: 58%;
margin-top: 4%;
width: 17%;
}
#columns{
border-style: solid;
border-radius: 10px;
border-width: 1px;
border-color: gray;
margin: -10px 10px 0px 10px;
height: 100%;
padding: 1% 2%;
}
#columns.portfolio{
column-width: 31%;
column-gap: 1%;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
 column-count: 3;
}
#columns.videos{

}
#columns ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#columns li{
padding: 0px;
border-style: solid;
border-width: 1px;
border-color: gray;
margin-bottom: 3%;
}
#columns li img{
width: 100%;
margin-bottom: -1.75%
}
.iframe{
position: relative;
}
#footer p{
color: gray;
font-style: italic;
text-align: right;
margin: 0% 3% 0% 0%;
}





.menuclosed{    
position: absolute;
z-index:1;
min-width: 170%;
transition: height 2s ease-out;
height: 0px;
overflow: hidden;   
right: 180%;
top: 162%;
background-color: #FCE9EC;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    
}
.menuopen{
position: absolute;
z-index:1;
min-width: 170%;
transition: height 2s ease-in;
height: 250%;
overflow: hidden;
cursor: pointer;
top: 162%;
right: 180%;
background-color: #FCE9EC;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.up{
transition: margin-top 2s ease-out;
margin-top: -160%;
}
.down{
transition: margin-top 2s ease-in;
margin-top: 0;
}
#scroll{
font-size: 100%;
height: 100%;
}

menu p{
text-align: center;

margin: 15% 10%;
}
a {
    text-decoration: none;
    color: gray;
    font-variant: small-caps;
    font-size: 105%;
    padding:1%;
}
span img{
	cursor: pointer;
}