https://source.unsplash.com/950x800/?nature

                    

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">

<a  href="#"><span class='fa fa-facebook-square' aria-hidden='true'></span> </a>

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 230%;
    color: #3D619D;
}
.fa.fa-facebook-square {
    // for additional styling
}

inline-block	// allows adding margin and padding to inline elements
Use Ems and percentages
Border set to transparent to stop element shift
box-sizing: border-box

// CALC to break out of div container //
body {
    overflow-x: hidden;
    }
.img {
    width: 100vw;
    max-width:100vw;
    margin: 0 calc(-50vw + 50%);
    max-height: 450px;
    object-fit: cover;
    object-position: center;
    display: block;
    }

  // JUSTIFYING //
  
  display: flex
  justify-content: space-between (default is flex-start)

  // ALIGNING //
  
  display: flex;
  align-items: center; (default is stretch)

  // ADD flex-direction TO MAKE VERTICAL!! //
  flex-direction: column;

  // SPCE OUT VERTICALY (set on flexRow > div)///
  display: flex;
  flex-direction: column;
  justify-content: space-between;

display: flex	// set on parent
justify-content: space-between	// horizantal spacing
justify-content: space-around	// horizantal spacing
justify-content: center	// horizantal spacing
flex-wrap:wrap	// wrap items

justify-content: flex-start	// items

// Vertically align items
display: flex
align-items: centered

display: flex	// height:100vh
flex-direction: column	// vertical
align-items: center	// vertical

// IE Gotcha (think for flexing column sticky footer)
flex:1
flex:0

// Ipad gotch had to add below after running flex css through autoprefixer
display: -webkit-flex;
-webkit-justify-content: space-between;

scale, scaleX, scaleY, scaleZ
rotate()
translate, translateX, translateY, translateZ

.d1 {
  border: solid 2px transparent;
  background: red;
  transition: border .5s, background-color .5s;
}
.d1:hover {
  border-bottom: solid 2px red;
  background-color: yellow;
}

//// FADE PAGE IN ////
.wrapper {
   animation: fadein .6s;
}

@keyframes fadein {
   from {
   opacity:0;
}
to {
   opacity: 1;
}
} // end @keyframes section

//// FADE IN & UP ////
.flexRow > div {
    transform: translateY(14px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 1s ease;
	}
.fadeInUp {
    transform: translateY(0px) !important;
    opacity: 1 !important;
}

//// JQUERY FOR ABOVE (see jquery page for vanilla solution) ////
function fadeInUp(elem) {
        elem.each(function (i) {
            $(this).addClass('fadeElementOut')
            var e1 = $(this);
            setTimeout(function () {
                e1.addClass('fadeElementIn')
            }, i * 120)
        });
    };

//// CENTER AP HORIZANTALY ////
left: 0;
right: 0;
margin: 0 auto;

ul.test li:not(:first-child)	// dont select first child

.flexFooterCol > *:nth-child(-n+2)	// select first 2 Items

background: url(../images/img.png) no-repeat 0px 0px, url(../images/img2.png) no-repeat top center;  

background-color: #CCCCCC;
background: -webkit-linear-gradient(top, #FFFFFF 0%, #98B18E 100%) fixed;
background: -moz-linear-gradient(top, #FFFFFF 0%, #98B18E 100%) fixed;

border-left: 1px solid rgba(0, 0, 0, 0.4);
box-shadow: inset 1px 0px 1px rgba(255, 255, 255, 0.2);

border-bottom: 1px solid rgba(0, 0, 0, 0.4);
box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.2);

.btn {
    width: 120px;
    height: 36px;
    background-color: #9AAA3A;
    background-image: -webkit-linear-gradient(top, #9AAA3A 0%, #9AAA3A 100%);
    background-image: -moz-linear-gradient(top, #9AAA3A 0%, #9AAA3A 100%);
    border: 1px solid #9AAA3A;
    box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.8), 1px 1px 3px rgba(0, 0, 0, 0.2);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    line-height: 36px;
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
    font-size: 90%;
}
.btn:hover {
    background-image: none;
    box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.4), 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.shadowTwoSided {
box-shadow: 40px 0 50px -50px rgba(0, 0, 0, .3), -40px 0 50px -50px rgba(0, 0, 0, .3);
}
.shadowFull {
box-shadow: 0px 0px 30px rgba(0, 0, 0, .4);
}

hr {
    border: 0;
    height: 1px;
}
.hrMain {
    margin: 1em 0 1em 0;
    background-color: #bbb;
}
.hrFadeToWhite {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}
.hrFadeToBlack {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}
.dottedLineGrey {
    height: 1px;
    background-image: radial-gradient(#666 10%, transparent 40%), radial-gradient(#666 15%, transparent 15%);
    background-size: 4px 4px;
    background-position: .5em;
    width: 100%;
    margin: 1.5em auto;
}

$(function() {
    checkWindowSize();
    $(window).resize(checkWindowSize);

function checkWindowSize(){
    if ($(".sampleClass").css("float") == "none" ){
        // your code here
    }}
});

.sampleClass {float:left;}
@media only screen and (max-width: 800px){
    .sampleClass {float:none;}
}
        

// below add to page template to assign spacific CSS to page slug

<?php
$pageName = (return_page_slug());
$bordercss = "<style>
 .cmsOutput img {
 border: 1px solid #ccc;
 padding: 10px;
 display: block;
 margin: 0px auto;
 }
 </style>
 ";
if ($pageName=="cv") {
  echo $bordercss;
}
?>