img {
     width: 240px;/*set the width or max-width*/     
     height: auto;/*this makes sure to maintain the aspect ratio*/     
 }
 i {
     color: #E41A0F;
     animation-duration: 4.7s;
     animation-name: slidein;
 }
 i:hover {
     color: #E46F0F;
 }
 video,
 audio {
     display: block;
     margin-left: auto;
     margin-right: auto;
 }
 .logo {
     display: block;
     margin-left: auto;
     margin-right: auto;
     width: 100px;
     height: 100px;
     -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
     transition: width 2s, height 2s, transform 2s;
 }
 .logo:hover {
     width: 200px;
     height: 200px;
     -webkit-transform: rotate(1800deg);
     transform: rotate(1800deg);
 }
 
 h2,
 h3,
 h4,
 h5,
 a {
     font-family: 'Audiowide', cursive;
     text-align: center;
     text-decoration: none;
     color: inherit;
     animation-duration: 3.7s;
     animation-name: slidein;
 }
 h1 {
     background: url('https://c1.staticflickr.com/3/2863/10485288384_5d0f245bc3_b.jpg');
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-family: 'Audiowide', cursive;
     font-size: 100px;
     text-align: center;
     animation-duration: 4.22s;
     animation-name: slidein;
     text-shadow: #A6A4A4 0.1em 0.1em 0.2em
 }
 p,
 ul,
 small {
     font-family: 'Roboto Condensed', sans-serif;
     text-align: center;
     animation-duration: 3s;
     animation-name: slidein;
 }
 /*text slidein*/ 
 @keyframes slidein {
     from {
         margin-left: 100%;
         width: 300%;
     }
     75% {
         font-size: 300%;
         margin-left: 25%;
         width: 150%;
     }
     to {
         margin-left: 0%;
         width: 100%;
     }
 }
 
 /*images with rounded corners*/ 
 .figure {
     width: 250px;
     height: 163px;
     border-radius: 30px;
     overflow: hidden;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
     display: block;
     margin-left: auto;
     margin-right: auto;
 }

 /* Icons Grow for social media icons on contact.html*/ 
 .hvr-grow {
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: perspective(1px) translateZ(0);
     transform: perspective(1px) translateZ(0);
     box-shadow: 0 0 1px transparent;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-property: transform;
     transition-property: transform;
     font-size: 77px;
     padding: 19px;
 }
 .hvr-grow:hover,
 .hvr-grow:focus,
 .hvr-grow:active {
     -webkit-transform: scale(1.1);
     transform: scale(1.1);
 }

 /*nav menu start*/ 
 .active {
     color: #E41A0F;
 }
 #menuToggle {
     display: block;
     position: relative;
     top: 50px;
     left: 50px;
     z-index: 1;
 }
 #menuToggle input {
     display: block;
     width: 40px;
     height: 32px;
     position: absolute;
     top: -7px;
     left: -5px;
     cursor: pointer;
     opacity: 0;
     z-index: 2;
 }
 #menuToggle span {
     display: block;
     width: 33px;
     height: 4px;
     margin-bottom: 5px;
     position: relative;
     background: #E41A0F;
     border-radius: 3px;
     z-index: 1;
     transform-origin: 4px 0px;
     transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
 }
 #menuToggle span:first-child {
     transform-origin: 0% 0%;
 }
 #menuToggle span:nth-last-child(2) {
     transform-origin: 0% 100%;
 }
 /*  Transform all the slices of hamburger into a crossmark. */
 
 #menuToggle input:checked ~ span {
     opacity: 1;
     transform: rotate(45deg) translate(-2px, -1px);
     background: #232323;
 }
 #menuToggle input:checked ~ span:nth-last-child(3) {
     opacity: 0;
     transform: rotate(0deg) scale(0.2, 0.2);
 }
 #menuToggle input:checked ~ span:nth-last-child(2) {
     transform: rotate(-45deg) translate(0, -1px);
 }
 #menu {
     position: absolute;
     width: 300px;
     margin: -100px 0 0 -50px;
     padding: 50px;
     padding-top: 125px;
     background: white;
     list-style-type: none;
     transform-origin: 0% 0%;
     transform: translate(-100%, 0);
     transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
 }
 #menu li {
     padding: 10px 0;
     font-size: 13px;
 }
 #menuToggle input:checked ~ ul {
     transform: none;
 }

 /*sticky hamburger nav*/ 
 nav {
     position: fixed;
     top: 0;
 }
 /*nav menu end*/

 /*responsive grid start: thanks to http://www.responsivegridsystem.com*/
 /*  SECTIONS  */ 
 .section {
     clear: both;
     padding: 0px;
     margin: 0px;
 }
 /*  COLUMN SETUP  */
 
 .col {
     display: block;
     float: left;
     margin: 1% 0 1% 1.6%;
 }
 .col:first-child {
     margin-left: 0;
 }
 /*  GROUPING  */
 
 .group:before,
 .group:after {
     content: "";
     display: table;
 }
 .group:after {
     clear: both;
 }
  /*  GRID OF FOUR  */
 
 .span_4_of_4 {
     width: 100%;
 }
 .span_3_of_4 {
     width: 74.6%;
 }
 .span_2_of_4 {
     width: 49.2%;
 }
 .span_1_of_4 {
     width: 23.8%;
 }
 /*responsive grid end*/

 /*nonessential <div class='kevwebdev'> on bottom of contact.html*/ 
 * {
     -moz-box-sizing: border-box;
     -o-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
 li {
     position: relative;
     display: inline-block;
     width: 100px;
     height: 100px;
 }

 @keyframes rotate {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(-360deg);
     }
 }
 .round {
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     padding-top: 30px;
     text-decoration: none;
     text-align: center;
     font-size: 22px;
     text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
     letter-spacing: -.065em;
     font-family: "Hammersmith One", sans-serif;
     -webkit-transition: all .25s ease-in-out;
     -o-transition: all .25s ease-in-out;
     -moz-transition: all .25s ease-in-out;
     transition: all .25s ease-in-out;
     box-shadow: 2px 2px 7px rgba(0, 0, 0, .2);
     border-radius: 300px;
     z-index: 1;
     border-width: 4px;
     border-style: solid;
 }
 .round:hover {
     width: 130%;
     height: 130%;
     left: -15%;
     top: -15%;
     font-size: 33px;
     padding-top: 38px;
     -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
     -o-box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
     -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
     box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
     z-index: 2;
     -webkit-transform: rotate(-360deg);
     -moz-transform: rotate(-360deg);
     -o-transform: rotate(-360deg);
     transform: rotate(-360deg);
 }
 a.red {
     background-color: rgba(239, 57, 50, 1);
     color: rgba(133, 32, 28, 1);
     border-color: rgba(133, 32, 28, .2);
     margin-left: auto;
     margin-right: auto;
 }
 a.red:hover {
     color: rgba(239, 57, 50, 1);
 }
 .round span.round {
     display: block;
     opacity: 0;
     -webkit-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
     transition: all .5s ease-in-out;
     font-size: 1px;
     border: none;
     padding: 40% 20% 0 20%;
     color: #fff;
 }
 .round span:hover {
     opacity: .85;
     font-size: 16px;
     -webkit-text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
     -moz-text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
     -o-text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
     text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
 }
 .red span {
     background: rgba(133, 32, 28, .7);
 }
 .kevwebdev {
     margin: 30px auto;
     text-align: center;
 }
 /*<!-- Designed | Developed By Kev Web Dev -->*/