/* CSS Document */
.main{
    padding: 1%;
    border: 0.5px solid lightgray;
    float: left;
    width: 98%;
    }
.heading{text-align: center;float: left;width: 100%;font-family: 'Roboto',arial,sans-serif;}
.textField{
   float: left;
   width: 96%;
   height: 7em;
   padding: 1%;
   background: #fdf9f9;
   margin: 1%;
   border: 0.5px solid lightgray;
   }
.links{color: blue;font-size: 25px;text-decoration: none;font-weight: bold;font-family: 'Roboto',arial,sans-serif;text-decoration:underline;}
.links:hover{ color:red; }
.links:visited{ color:purple; }
.social-image{width: 30px;
    height: 30px;
    margin-left:1%
    }  
.socials{text-align:center;padding-bottom:2%;float: left;width: 100%;} 
.description{font-size:109%;font-family: 'Roboto',arial,sans-serif;}
.left{
    float: left;
    width: 15%;
    }
.right{
    float: left;
    width: 84%;
    padding-left: 1%;
    }
.image{width: 100%;
    height: 100%;}
.left-arrow {
  animation: jiggy .75s ease-in-out infinite alternate;
  float: left;
  width: 50%;
  margin-left: 4%;
  height: 3em;
  margin-top: 1%;
}


.backto-link{
    font-size: 18px;
    text-decoration: none;
    color: teal;
    }
 .backto-index{
   height: 100%;
   background: transparent;
   position: relative;
   -moz-border-radius:    10px;
   border: 1px solid teal;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
.backto-index:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 11px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid teal;
   border-bottom: 13px solid transparent;
}
@keyframes jiggy {
  0% { transform: translate(-10px); }
  100% { transform: translate(10px); }
}
@media only screen and (max-width:700px){.textField{height: unset;}.image{
    width: 100%;
    height: 100px;
}.left{
    width: 100%;
}.left-arrow {
    margin-left: 10%;
}}