.social-media{
  align-self: center;
  text-align: center;
}


.sidepanel {
  height:100vh; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: white; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 75px; /* Place content 60px from the top */
  transition: 0.6s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* The sidepanel links */
.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 20px;
  color: #737373;
  display: block;
  transition: 0.3s;
}

.sidepanel .gram {
  padding: 8px 8px 8px 43px;
  text-decoration: none;
  font-size: 20px;
  color: #737373;
  display: block;
  transition: 0.3s;
}

.sidepanel .mail {
  padding: 8px 8px 8px 10px;
  text-decoration: none;
  font-size: 20px;
  color: #737373;
  display: block;
  transition: 0.3s;
}


/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
  color: black;
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 0;
  left: 0px;
  font-size: 60px;
  margin-right: 50px;
}


.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: white;
}

.overlay:hover{
  opacity: 1;
}

.rowpic {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 33.333%;
  max-width: 33.333%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 33.333%;
    max-width: 33.333%;
  }
  .menuoptions{
    display:inline-block;
  }
}

/* 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: 50%;
    max-width: 50%;
  }
  .menuoptions{
    display:inline-block;
  }
}

input[type="text"]{
  position: relative;
  display: block;
  margin : 0 auto;
  border-color:white;
  border-width:1px;
  background-color:#0d0d0d;
  color:white;
  width:75%;
  height:15%;
  padding:20px 50px 20px 10px;
  margin-bottom:10px;
}

textarea{
  position: relative;
  display: block;
  margin : 0 auto;
  padding-left:30px;
  border-color:white;
  border-width:1px;
  background-color:#0d0d0d;
  color:white;
  width:75%;
  padding-left:10px;
  padding-top:10px;
  height:125px;
}

/*THIS IS FOR ALL THE BACKGROUND*/
.crossfade > figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}
/*THIS IS FOR THE BACKGROUND PICTURESSSSSSSSSSSSSSSSSSSSSSSSSS*/
.crossfade > figure:nth-child(1) {
 background-image: url("portraits/sophie3.jpg");
  z-index:-99; 
}

.crossfade > figure:nth-child(2) {
  animation-delay: 6s;
background-image: url('interiors/metro1.jpg');
z-index:-99;
}

.crossfade > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('portraits/andrea1.jpg');
   z-index:-99;
}

.crossfade > figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url("interiors/cafe5.jpg");
   z-index:-99;
}

.crossfade > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url('portraits/katya6.jpg');
   z-index:-99;
}

@keyframes 
imageAnimation {  0% {
 animation-timing-function: ease-in;
 opacity: 0;
}
 8% {
 animation-timing-function: ease-out;
 opacity: 1;
}
 17% {
 opacity: 1
}
 25% {
 opacity: 0
}
 100% {
 opacity: 0
}
}

@media screen and (max-width: 800px){

  .col-md-2
  {
  display: flex;
  flex-wrap: wrap;
  text-justify:center;
  margin-left:10px;
  margin-right:10px;
  margin-bottom:10px;
  height:10vh;
  }

  .card-deck{
  display: flex;
  flex-wrap: wrap;
  margin-left:10px;
  width:100vw;
  }
  .card{
    max-width:50%;
    padding-left:5px;
  }

  .socialmediamenu{
    display:none;
  }

  .socialmediamenusmall{
    position: absolute;
    top: 30px;
    right: 0px;
    margin-right: 50px;

  }

  .index-title{
     padding:10px;
  }

  .index-title span{
    display:none;
  }

}


@media screen and (min-width: 800px) {

.index-title{
   position:fixed;
   bottom:0;
   left:0;
   padding:8vh;
   text-shadow: 2px 2px 4px 2px #000000;
}

.index-btn{
  position:absolute;
  bottom:0;
  right:0;
  padding:9vh;
}

.social-index{
  display:none;
}

.socialmediamenusmall{
  display:none;
}

}