/* Hello! Welcome to Phase 1: pseudo-elements! */
		
        @keyframes fadeIn {
            from { color: #e1e1e1; }
            to { color: #675559; }
        }

		@font-face {
			font-family: 'Ostrich Light'; src: url('../fonts/ostrich-light-webfont.eot');
    src: url('../fonts/ostrich-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ostrich-light-webfont.woff2') format('woff2'),
         url('../fonts/ostrich-light-webfont.woff') format('woff'),
         url('../fonts/ostrich-light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
		}
		@font-face {
			font-family: 'Ostrich Regular';
    src: url('../fonts/ostrich-regular-webfont.eot');
    src: url('../fonts/ostrich-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ostrich-regular-webfont.woff2') format('woff2'),
         url('../fonts/ostrich-regular-webfont.woff') format('woff'),
         url('../fonts/ostrich-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
		}
		@font-face {
			font-family: 'Ostrich Rounded';
    src: url('../fonts/ostrich-rounded-webfont.eot');
    src: url('../fonts/ostrich-rounded-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ostrich-rounded-webfont.woff2') format('woff2'),
         url('../fonts/ostrich-rounded-webfont.woff') format('woff'),
         url('../fonts/ostrich-rounded-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;


		}
		@font-face {
			font-family: 'Ostrich Bold'; 
    src: url('../fonts/ostrich-bold-webfont.eot');
    src: url('../fonts/ostrich-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ostrich-bold-webfont.woff2') format('woff2'),
         url('../fonts/ostrich-bold-webfont.woff') format('woff'),
         url('../fonts/ostrich-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;


		}
		
		body { background-color: #e1e1e1; margin: 0; padding: 0; }

		*::selection { color: #fff; background-color: #222; }
		h1 { padding: 0 38px 0 25px; font-size: 13vw; line-height: 1em; letter-spacing: 1px; font-family: 'Ostrich Light', Arial, sans serif; color: #675559; }
		h2 { margin: 0 0 0.22em; padding: 15px 0 0; font-size: 50px; font-family: 'Ostrich Bold', Arial, sans serif; }
		h1 span { display: block; }
		h1 span.desktop { margin-right: -38px; }
		@media screen and (min-width: 950px) {
            h1 span { color: #e1e1e1; }
            h1 .mobile { animation: 0.7s linear 0.5s fadeIn 1; animation-fill-mode: forwards; }
            h1 .tablet { animation: 0.7s linear 2s fadeIn 1; animation-fill-mode: forwards; }
            h1 .desktop { animation: 0.7s linear 3.5s fadeIn 1; animation-fill-mode: forwards; }
            .ltIe9 h1 span, .ie9 h1 span { color: #675559; }
        }

        ul, li, a { display: block; }

		nav { visibility: hidden; }
		header { position: relative; margin: 2em auto 0; max-width: 450px; }
		#container { position: relative; margin: 320px auto 0; max-width: 450px; }
		nav, #about { padding: 0 15px 0 25px; }
		body *:before, body *:after { content: " "; display: block; position: absolute; top: 0; left: 0; width: 10%; height: 0; padding-top: 10%; background-color: #fafafa; border-radius: 50%; visibility: visible; transition: 1s all ease; }
		#ib-profile { font-size: 27.5px; word-spacing: 0.05em; letter-spacing: 0.5px; font-family: 'Ostrich Rounded', Arial, sans serif; }
		#ib-profile p { font-size: 1.1em; line-height: 0.85em; margin: 0 0 2vh; }
		#ib-profile em { font-style: normal; }
		#ib-profile span[itemprop=jobTitle] { display: block; }
		#ib-connections { margin: 2.5em auto; min-height: 40px; text-align: left; }
		#ib-connections .li-connect-text { display: inline-block; width: 0; text-indent: -999em; overflow: hidden; }

		nav a[href*=twitter]:before, nav a[href*=twitter]:after,
		#ib-profile em:before, #ib-profile em:after ,
		#ib-connections *:before, #ib-connections *:after { content: none; }

		
		/* Five rows */
		header { height: 220px; }
		#container:before, #about:before, #ib-profile:before, #ib-connections:before,
		#container:after, #about:after, #ib-profile:after, #ib-connections:after { top: -66vw; }
		#ib-profile h2:before, #ib-profile p:before, #ib-profile p span:before,
		#ib-profile h2:after, #ib-profile p:after, #ib-profile p span:after	{ top: -53.7vw; }
		header:before, h1:before, nav:before, nav ul:before,
		header:after, h1:after, nav:after, nav ul:after { top: 100%; margin-top: 18.7vw; }
		header h1 span:before, header nav > ul > li:first-child:before,
		header h1 span:after, header nav > ul > li:first-child:after { top: 100%; margin-top: 31vw; }
		header ul ul:before, header ul ul li:before, header ul ul li:first-child a:before,
		header ul ul:after, header ul ul li:after, header ul ul li:first-child a:after { top: 100%; margin-top: 43.1vw; }
		
		/* Eight columns */
		#about:before, #ib-profile p:before, h1:before, header nav > ul > li:first-child:before, header ul ul li:first-child:before { left: 7.5%; }
		#ib-profile:before, #ib-profile p span:first-child:before, nav:before, header h1 span:nth-child(3):before, header ul ul li:first-child a:before { left: 26.5%; }
		#ib-connections:before, #ib-profile p span:nth-child(2):before, nav ul:before, header h1 span:nth-child(2):before, header ul ul li:nth-child(2):before { left: 45.5%; }
		#container:after, #ib-profile h2:after, header:after, h1:after, header h1 span:first-child:after, header ul ul:after { left: 64.5%; }
		#about:after, #ib-profile p:after, h1:after, header nav > ul > li:first-child:after, header ul ul li:first-child:after { left: 83.5%; }
				
		body *:hover:before, body *:hover:after { box-shadow: inset 10% 10% 100%; outline-width: 1em; }
		body *:before, body *:after { box-shadow: inset 10% 10% 100% #743f1c; }
		body * *:hover:before, body * *:hover:after { box-shadow: inset 0 0 10em 0 rgba(6,93,255,0.4); }
		body * * *:hover:before, body * * *:hover:after { box-shadow: inset 0 0 10em 0 rgba(76,29,120,0.7); }
		body * * *:nth-child(2) *:hover:before, body * * * *:hover:after { box-shadow: inset 0 0 10em 0 rgba(222,255,94,0.8); }
		body *:first-child:hover:before,
		body *:first-child:hover:after { background-color: #5c022a; }
		body *:nth-child(2):hover:before,
		body *:nth-child(2):hover:after { background-color: #dff390; }
		body *:nth-child(3):hover:before,
		body *:nth-child(3):hover:after { background-color: #43528f; }

		@media screen and (max-width: 950px) {
		/* Tablet shape */
		#container:before, #ib-profile h2:before, header:before, header h1 span:first-child:before, header ul ul:before,
		#ib-connections:after, #ib-profile p span:nth-child(2):after, nav > ul:after, header h1 span:nth-child(3):after, header ul ul li:first-child a:after {
			transform: scale(0.4);
			background-color: #ccc !important;
			box-shadow: none !important;
		}
		}
		@media screen and (max-width: 850px) and (orientation: portrait) {
		#about:before, #ib-profile p:before, header h1:before, header nav > ul > li:first-child:before, header ul ul li:first-child:before,
		#ib-profile:after, #ib-profile p span:first-child:after, nav:after, header h1 span:nth-child(2):after, header ul ul li:nth-child(2):after {
			transform: scale(0.4);
			background-color: #ccc !important;
			box-shadow: none !important;
		}
		}
		
		@media screen and (max-width: 950px) and (orientation: landscape) {
		header ul ul:before, header ul ul li:before, header ul ul li:first-child a:before,
		header ul ul:after, header ul ul li:after, header ul ul li:first-child a:after {
			transform: scale(0.4);
			background-color: #ccc !important;
			box-shadow: none !important;
		}
		}
		
		@media screen and (max-width: 520px) and (orientation: portrait) {
		#container:before, #ib-profile h2:before, header:before, header h1 span:first-child:before, header ul ul:before,
		#ib-connections:after, #ib-profile p span:nth-child(2):after, nav > ul:after, header h1 span:nth-child(3):after, header ul ul li:first-child a:after,
		#ib-profile:after, #ib-profile p span:first-child:after, nav:after, header h1 span:nth-child(2):after, header ul ul li:nth-child(2):after {
			display:none;
		}
		
		
		#about:after, #ib-profile p:after, header h1:after, header nav > ul > li:first-child:after, header ul ul li:first-child:after {
			transform: scale(0.5);
			background-color: #ccc !important;
			box-shadow: none !important;
		}
		body *:before, body *:after { transform: scale(1.2); }
		}

		
			
			header { height: auto; }
			#ib-profile { font-size: 30px; }
			h2 { font-size: 55px; }
			
		/* Five rows */
		#container:before, #about:before, #ib-profile:before, #ib-connections:before,
		#container:after, #about:after, #ib-profile:after, #ib-connections:after { top: -350px; }
		#ib-profile h2:before, #ib-profile p:before, #ib-profile p span:before,
		#ib-profile h2:after, #ib-profile p:after, #ib-profile p span:after	{ top: -285px; }
		header:before, h1:before, nav:before, nav ul:before,
		header:after, h1:after, nav:after, nav ul:after { top: 100%; margin-top: 100px; }
		header h1 span:before, header nav > ul > li:first-child:before,
		header h1 span:after, header nav > ul > li:first-child:after { top: 100%; margin-top: 165px; }
		header ul ul:before, header ul ul li:before, header ul ul li:first-child a:before,
		header ul ul:after, header ul ul li:after, header ul ul li:first-child a:after { top: 100%; margin-top: 230px; }

		@media screen and (min-width: 410px) { 
		
		h1 { font-size: 50px; }
		h1 span.desktop { margin-right: 0; }
		#ib-connections { padding: 1em; text-align: center; }
		
		/* Eight columns */
		#container:before, #ib-profile h2:before, header:before, header h1 span:first-child:before, header ul ul:before { left: -7.5%; }
		#about:before, #ib-profile p:before, h1:before, header nav > ul > li:first-child:before, header ul ul li:first-child:before { left: 7.5%; }
		#ib-profile:before, #ib-profile p span:first-child:before, nav:before, header h1 span:nth-child(3):before, header ul ul li:first-child a:before { left: 22.5%; }
		#ib-connections:before, #ib-profile p span:nth-child(2):before, nav ul:before, header h1 span:nth-child(2):before, header ul ul li:nth-child(2):before { left: 37.5%; }
		#container:after, #ib-profile h2:after, header:after, h1:after, header h1 span:first-child:after, header ul ul:after { left: 52.5%; }
		#about:after, #ib-profile p:after, h1:after, header nav > ul > li:first-child:after, header ul ul li:first-child:after { left: 67.5%; }
		#ib-profile:after, #ib-profile p span:first-child:after, nav:after, header h1 span:nth-child(2):after, header ul ul li:nth-child(2):after { left: 82.5%; }
		#ib-connections:after, #ib-profile p span:nth-child(2):after, nav ul:after, header h1 span:nth-child(3):after, header ul ul li:first-child a:after { left: 97.5%; }
		
		}
		@media screen and (min-width: 450px) {
			#ib-profile span[itemprop=jobTitle] { display: inline; }
			
		}
		@media screen and (min-height: 735px) and (min-width: 50em) {
			h1 { margin: 0 -165px 0 -60px; margin: 0 -11vh 0 -6vh; font-size: 111px; font-size: 10.5vh; letter-spacing: 4px; line-height: 1.1em; font-family: 'Ostrich Light', Arial, sans serif; }
            h1 span.tablet { margin: 0 -2vh 0 0; }
			h1 span.desktop { margin: 0 -106px 0 0; margin: 0 -9vh 0 0; text-indent: -85px; }
			
		}