/*
	www.prashantsani.com
	main.css
	HTML,CSS,Design Level JS Code developed by :
	Author:Prashant Sani,<saniprashant@gmail.com>
	Colour Codes:
	Pink : #c22085
	Green : #2d9687
	Golden : #e9b171
	Cream : #e2b8aa
	background : #0c0c0c ;
	base level Height : 800px
	base level Width : 1400px


	Clip path
	-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
*/

/* =============================================================================
	Index

	1) Global Styles,Resets,Global Links,Abstraction
	2) Header ,Main Navigation
	3) Content
	4) Footer
	5) Forms
	6) Library Styles
	7) Non-Symentic Class
	8) Print Styles
	==========================================================================  */

/* =============================================================================
	 Resets, Global Styles
	 ========================================================================== */

/* HTML 5 Resets */

@import url('https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans:300i,400,700');

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block;  }
audio:not([controls]) { display: none; }
/* Reset */
button, input, select, textarea { font: inherit;  }
body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, cite, code, del, dfn, em, img, ins, kbd, q, samp, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td,figure {
	vertical-align:baseline;
	background:transparent;
}
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}
a img, img {
	border: none;
}
img {
	max-width: 100%;
}
.wrap {
	margin: 0 auto;
	position: relative;
	width: 1300px;
	min-height: 100%;
	max-width: 75%;
	box-sizing:border-box;
}
.roundedImg {
	border-radius: 50%;
}
.fullWidthImg {
	width: 100%;
	display: block;
	margin: 20px 0
}
.leftImgAlign {
	float: left;
	margin: 0 20px 20px 0;
}
.rightImgAlign {
	float: right;
	margin: 0 0 20px 20px;
}
.separator{
	margin:20px 0;
	border-bottom: 1px solid white;
}
.js noscript{
	display: none;
}

html[data-section-active="projects"].js{
	overflow-y: auto;
	overflow-x: hidden;
}
#teleportAnim,
#nav,
#projectDetailsModal,
html{
	overflow-y: auto;
	overflow-x: hidden;
}
/* Grids */
.sec:before{
	top: 0;
}
.sec:after{
	bottom: 0;
}
.sec:before,
.sec:after{
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	background: red;
	height: 1px;
	opacity: 0.5
}
.sec{
	background-image: linear-gradient(180deg, transparent 15px , rgba(255,255,255,.5));
	background-size: 16px 16px;
	background-repeat: repeat;
}
/* Selection */
::-moz-selection { background: #c22085; color: #fff; text-shadow: none;opacity: 1 }
::selection { background: #c22085; color: #fff; text-shadow: none;opacity: 1 }
/*Links */
a, button {
	text-decoration: none;
	transition: all 0.3s ease-out;
}
a:link,a:visited{
	color: white;
	font-family: 'Inconsolata', monospace;
}
.no-toch a:hover,
.no-toch a:active{
	color: #e9b171
}
.currentLink {
	cursor: default;
}
button:not(:focus), button:hover {
	outline: none;
	border: none;
}
button{
	border-radius: 0
}
/* TYpography */
@font-face {
    font-family: 'league_gothicregular';
    src: url('webfonts/leaguegothic-regular-webfont.eot');
    src: url('webfonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/leaguegothic-regular-webfont.woff2') format('woff2'),
         url('webfonts/leaguegothic-regular-webfont.woff') format('woff'),
         url('webfonts/leaguegothic-regular-webfont.ttf') format('truetype'),
         url('webfonts/leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html{
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}
abbr[title] { border-bottom: 1px dotted; }
blockquote { font-style: normal;}
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
h1,h2,h3,h4,h5,h6,strong{
	font-weight: normal;
}
.alignCenter {
	text-align: center;
}
.alignRight {
	text-align: right
}
.alignLeft {
	text-align: left
}
.darkHighlightColor{
	color: #ba4732
}
.highlight{
	text-decoration: underline;
}

/* Lists  */
ul, ol {margin: 0;padding: 0;list-style: none;list-style-image: none;}
dd {margin: 0; }

.numberedList{
	padding-left: 2em;
}
.numberedList li{
	list-style: decimal;
}

/* Modal Windows  */
#teleportAnim,
#nav,
#projectDetailsModal{
	visibility: hidden;
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: #0c0c0c;
	background: rgba(12,12,12,1);
	-webkit-overflow-scrolling:touch;
}
#teleportAnim:focus,
#nav:focus,
#projectDetailsModal:focus,
#main:focus{
	outline: none !important;
	border: none !important;
}
#projectDetailsModal{
	z-index: 102;
	overflow: auto;
	overflow-x:hidden;
	overflow-y:auto;
}
#teleportAnim{
	z-index: 100;
	overflow: visible;
	pointer-events:none;
}
#teleportAnim div{
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
}
#teleportAnim :first-child{
	background:#c22085;
	z-index: 1;
}
#teleportAnim :nth-child(2){
	background:#2d9687;
	z-index: 2;
}
#teleportAnim :nth-child(3){
	background:#e9b171;
	z-index: 3;
}
#teleportAnim :nth-child(4){
	background:#e2b8aa;
	z-index: 4;
}
/* =============================================================================
	 Header, Main Nav
	 ========================================================================== */
header {
	width: 100%;
	position: fixed;
	height: 0;
	overflow: visible;
	pointer-events:none;
	z-index: 999;
	left: 0;
	top:0;
}
.logo,
#hamburger{
	cursor: pointer;
	pointer-events:auto;
	position: fixed;
	display: block;
	z-index: 999999;
	-webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	transform-origin: center center;
	top:30px;
}
.logo{
	left:2.5%
}
.logo sup{
	color: #e2b8aa;
    position: absolute;
    right: -20px;
    top: 5%;
    font-size: 16px;
}
.no-js .logo{
	top: 5rem;
}
#mainLogo{
	width: 60px;
	height: 50px;
	display: block;
	margin-top: -10%;
}
/* ------------
	Nav
------------ */
#nav {
	font-size: 9vmin;
	pointer-events:auto;
}
#nav ul{
	top: 16.6%;
}
/* Main Menu */
nav{
	font-family: 'Inconsolata', monospace;
}
html nav ul{
	position: absolute;
	width: 75%;
	left:12.5%;

}
nav li{
	color: white;
	position: relative;
}

#nav li{
	margin-bottom: 0.2em;
	color: white;
	overflow: hidden;
	position: relative;
}
#nav a{
	display: block;
	position: relative;
	overflow: visible;
	line-height: 1;
	position: relative;
	z-index: 10;
	transition: none;
	text-transform: uppercase;
}
nav a + span{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	/*will-change:transform;*/
	transition: all 1s ease-in-out;
	transform: translateX(-105%);
    height:100px;
    width: 400%;
  	background: linear-gradient(to right,
		#c22085 25%, #2d9687 0,
		#2d9687 50%, #e9b171 0,
		#e9b171 75%, #e2b8aa 0);

	background-size: 100% 100%;
}
nav a:hover + span,
nav a:focus + span{
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
	        transform: translateX(0);
}
nav a[href="#home"]:hover + span{
	/*background-color: rgba(255,255,255,0.5)*/
}
nav a[href="#projects"]:hover + span{
	/*background-color : #c22085;*/
}
nav a[href="#about"]:hover + span{
	/*background-color : #e9b171;*/
}
nav a[href="#training"]:hover + span{
	/*background-color : #e2b8aa;*/
}
nav a[href="#blog"]:hover + span{
	/*background-color : #2d9687;*/
}
nav a[href="#contact"]:hover + span{
	/*background-color : rgb(120,90,152);*/
}
/* ------------
	Hamburgar
------------ */

#hamburger {
  right: 2.5%;
  z-index: 999;
  height:32px;
  width:40px;
}
.no-js #hamburger{
	display: none
}
html #hamburger  span {
  width: 100%;
  height: 2px;
  display: block;
  transition: all 1s cubic-bezier(1,.02,0,.96);
}

#hamburger .first,
#hamburger .second,
#hamburger .third{
	position: absolute;
	left: 0;
}
#hamburger .first{
	top: 0
}
#hamburger .second{
	top: 50%;
	margin-top: -1px
}
#hamburger .third{
	bottom: 0
}
#hamburger .first,
#hamburger .second {

}
#hamburger.clicked{
	transform: rotate(-90deg)
}
#hamburger.clicked .first,
#hamburger.clicked .second{
	top: -3px;
}
#hamburger.clicked .first {
	transform: rotate(60deg) translateX(50%);
}
#hamburger.clicked .second{
	transform: rotate(-60deg) translateX(-50%);
}
#hamburger.clicked .third{
	bottom:-1px;
}
/* ------------
	Color Transition for Logo & Nav Close Button
------------ */
#hamburger span{
	background-color:#e2b8aa;
	transition: all .2s linear;
}
#mainLogo{
	stroke:	#e2b8aa;
	transition: all .2s linear;
}

@-keyframes changeFill {
   0% {
      fill:#c22085;
   }
   25% {
       fill:#2d9687;
   }
   50% {
      	fill:#e9b171;
   }
   75% {
      	fill:white;
   }
   100% {
      	fill:#e2b8aa;
   }
}
@keyframes changeBackgroundColor {
    0% {
		background-color:#c22085;
    }
    25% {
        background-color:#2d9687;
    }
    50% {
       	background-color:#e9b171;
    }
    75% {
       	background-color:white;
    }
    100% {
       	background-color:#e2b8aa;
    }
}
@keyframes changeStroke {
    0% {
		stroke:#c22085;
    }
    25% {
        stroke:#2d9687;
    }
    50% {
       	stroke:#e9b171;
    }
    75% {
       	stroke:white;
    }
    100% {
       	stroke:#e2b8aa;
    }
}

.no-touchevents .logo:hover polygon,
.no-touchevents .logo:hover path,
.no-touchevents .logo:hover rect{
	animation: changeFill 4s linear infinite alternate;
}
.no-touchevents #hamburger:hover span,
#hamburger:focus span{
	animation: changeBackgroundColor 4s linear infinite alternate;
}
/* =============================================================================
	 Content
	 ========================================================================== */
#main{
	/*will-change:-webkit-transform,transform;*/
	position: relative;
	z-index: 100;
	background-color: #0c0c0c
}

/* ------------
	Quote Pages
------------ */
/*#quote1top path, #quote1bottom  path{ fill:#c22085 }
#quote2top path,#quote2bottom  path{ fill:#2d9687}
#quote3top path,#quote3bottom  path{ fill:#e9b171}
#quote4top path, #quote4bottom path{ fill:#e2b8aa }*/

.quoteTextWrap{
	position: absolute;
	left: 0;
	right:0;
	top: 0;
	bottom: 0;
	z-index: 10;
	margin: auto;
	text-align: center;
}
.quoteTextWrap svg{
	width: 100%;
	height: 100%;
	overflow: visible;
}
.quoteText{
	/*background: #0c0c0c;*/
	padding: 0.5em;
	font-family:'league_gothicregular' !important; 
	font-size:65px;
	color: white;
	fill:white;
}
.quoteSec .wrap{

}
.quoteTop,
.quoteBottom{
	position: absolute;
	will-change: stroke-dashoffset;
}
.quoteTop{
	width: 16%;
	height: 27%;
}
.quoteBottom{
	width: 14%;
	height: 23.5%;
}
.quote1 .quoteTop,
.quote3 .quoteTop{
	right: 0%;
	top: 5%;
}
.quote1 .quoteBottom,
.quote3 .quoteBottom{
	left: 0%;
	bottom: 5%;
}

.quote2 .quoteTop,
.quote4 .quoteTop{
	left: 0%;
	top: 5%;
}
.quote2 .quoteBottom,
.quote4 .quoteBottom{
	right: 0%;
	bottom: 5%;
}

/* ------------
	Common Elements
------------ */
.secHead{
	font-family: 'Inconsolata', monospace;
	font-size: 2rem;
	line-height: 1;
	padding: 3.75rem 0 3.75rem 0;
	position: relative;
	left: -3rem;
}
.secHead:before,
.secHead:after{
	display: inline-block;
}
.secHead:before{
	content: "<";
}
.secHead:after{
	content: ">";
}
.secContent{
	font-family: 'Open Sans', sans-serif;
	font-size: 22px;
	font-size: 1.375rem;
}
.secContent p{
	margin: 30px 0;
	margin: 1em 0;
	line-height: 2rem;
}
.secContent p strong{
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	color: inherit;
}
.secContent p:nth-child(2n){
	position: relative;
	/*top: -0.5em;*/
	/*margin-bottom: -1em;*/
}
.secContent p:nth-child(3n){
	padding-top: 0.25rem;
}
.secContent ul{
	counter-reset: listItems;
	position: relative;
	padding-left: 0.5rem;
	line-height: 1.5rem;
	margin-bottom: 0.5rem;
	font-size: 1.5rem;
}
.secContent ul li{
	position: relative;
	counter-increment: listItems;
	padding-left: 2.1em;
}
.secContent ul li:before{
	content:"{ " counter(listItems) " }";
	position: absolute;
	left: 0;
	top: 0;
}
html .secContent > p:first-child{
	font-family: 'Open Sans';
	font-weight: 300;
	font-style: italic;
	font-size: 30px;
    font-size: 2rem;
    line-height: 40px;
    line-height: 2.5rem;
    padding-bottom: 0.25em;
	margin: 0 0 -0.25rem 0;
}
.secContent p:last-child{
	margin-bottom: 0;
}
#body .secContent a{
	font-family: 'Inconsolata', monospace;
	position: relative;
	color: white
}
#body .secContent a:after{
	content: '';
	position: absolute;
	top: 1.1em;
	height: 1px;
	width: 100%;
	background: white;
	left: 0;
}
.secEnd{
	position: relative;
	left: -3rem;
	margin-top: 3.75rem;
}

.secEnd:after{
	content: "</" attr(data-text) ">";
	display: inline-block;
	font-family: 'Inconsolata', monospace;
	font-size: 2rem;
	line-height: 1rem;
	margin-bottom: 3rem
}

/* ------------
	Home Page
------------ */
#home,
#home .wrap{
	min-height: 100vh;
	padding:0;

}
.home{
	color: white
}
#homeSVG{
	position: absolute;
	right: 0;
	top: 20%;
	height: 560px;
	width: 960px;
	max-width: 100%;
	max-height: 70%;
	z-index: 100;
	transform-style: preserve-3d;
	/*will-change:-webkit-transform,transform;*/
}

html[data-section-active="projects"] #body #mainLogo{
	opacity: 1
}
#homeSVG,
.home-purple polygon,
.home-purple-back polygon,
.home-green polygon,
.home-green-back polygon,
.home-yellow polygon,
.home-yellow-back polygon{
	fill:none;
	stroke-linejoin:bevel;stroke-miterlimit:10;
}

.home-purple polygon{
	stroke-width:3;
}
.home-green polygon,
.home-yellow polygon{
	stroke-width:2;
}


.home-purple polygon{stroke:#C22085; }
.home-purple-back polygon{stroke:#630043;stroke:#C22085; }

.home-green polygon{stroke:#2D9687; }
.home-green-back polygon{stroke:#003D35;stroke:#2D9687; }

.home-yellow polygon{stroke:#E9B171;}
.home-yellow-back polygon{stroke:#644D2B;stroke:#E9B171; }

.svgPolys{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: visible !important; 
}

#homeTextWrap{
	position: absolute;
	left: 0;
	top: 40%;
	z-index: 10000;
	font-size: 40px;
	font-size: 2.5rem;
	width: 60%;

}
#homeTextWrap h1{
	width: 100%;
	line-height: 1.3;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 2.6vw;
}

#scrollDown{
	position: absolute;
	bottom: 5%;
	left: 0;
	right: 0;
	width: 40px;
	margin: auto;
	pointer-events:none;
}
.no-js #introAnim{
	display: none
}
#scrollDown svg{
	width: 100%
}
#scrollDown path,
#scrollDown line{
	fill:none;stroke:#c22085;stroke-width: 3;
}
#prashant{
	cursor: pointer;
}
.mobile #prashant{
	text-decoration: none;
	pointer-events:none;
}
#helloGreetings span{
	display: block;
}
/* ------------
	Quote -1
------------ */
.quote1 .quoteTextWrap{
	/*width: 620px;*/
	width: 50%;
	height: 39%;
}
.quote1Heart{
	stroke-dashoffset:0;
	stroke-dasharray:1000;
	fill:none;
	stroke:#C32285;
	stroke-width:15;
}
/* ------------
	Projects Page
------------ */
.projects{
	color: #c22085
}
.projectsList{
	display: block;
}
.projectsList li{
	padding: 0;
	width: 100%;
	margin: 2rem 0;
	vertical-align: top;
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size: 22px;
	font-size: 1.375rem;
	position: relative;
}
.projectsList li:first-child{
	margin-top: 0
}
.projectsList li:last-child{
	margin-bottom: 0
}
.projectsList li:focus article {
	-webkit-transform: none !important;
	   -moz-transform: none !important;
	    -ms-transform: none !important;
	     -o-transform: none !important;
	        transform: none !important;
}
.projectsList li article{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	display: block;
	position: relative;
	overflow: hidden;
}
#projectsList a{
	font-family: inherit;
}
#projectsList a+a{
	margin-top: -0.75rem;
}
.projListName{
	font-size: 26px;
	font-size: 1.625rem;
	width: 100%;
	color: white;
	font-family: 'Inconsolata', monospace;
	padding: 1.5rem 1.5rem 0.75rem 1.5rem;
	line-height: 1;
	cursor: pointer;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.projectThumb{
	display: block;
	width: 100%;
	overflow: hidden;
}
.projListDesc{
	padding:0 1.5rem 0 1.5rem;
	font-size: inherit;
}
.projListDesc a{
	text-transform: uppercase;
	font-family: 'Inconsolata', monospace;
	display: block;
	margin: 1.75rem 0 1.5rem 0;
	line-height: 1rem;
}
#projectsList a{
	-webkit-backface-visibility:hidden;
	color: #c22085;
}
#projectsList a:hover{
	color:#e2b8aa
}
.projListDesc .projListLink{
	margin-top: 0;
	margin-bottom: 1.75rem
}
.reveler{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background: #c22085;
	-webkit-backface-visibility:hidden;
}
.no-js .reveler{
	display: none
}
.projectsList li{
	border:1px solid #c22085;
	overflow: hidden;
-webkit-backface-visibility:hidden;
}
.projectsList li article{
	border:none;
}
/* ------------
	Quote -2
------------ */
.quote2 .quoteTextWrap{
	/*width: 454px;*/
	/*	height: 412px;*/
	width: 47.29%;
	height: 51.5%;
}
.quote2 .quoteTextLn1{
	top: 64px;
	right: 0;
}
.quote2 .quoteTextLn2{
	top: 292px;
	left: 0;
}
#quotePositiveTop,
#quotePositiveBottom{
	stroke:#2D9687;
	stroke-width:15;
	fill:none;
	stroke-miterlimit:10;
	stroke-dashoffset:0;
	stroke-dasharray:1000;
}
/* ------------
	About Page
------------ */
.about{
	color: #2d9687
}
.training .secContent,
.about .secContent{
	width: 50%;
	width: 35rem;
	max-width: 60%;
}

.about .secContent p:nth-child(2),
.about .secContent p:nth-child(3){
	color: #e9b171
}
.btn-box{
	width: 100%;
	max-width: 30rem;
	text-align: center;
	display: block;
	margin-top: 5rem;
	overflow: visible;
	position: relative;
	display: block;
	font-size: 1.375rem;
	line-height: 2.4
}
.no-touchevents .btn-box:hover{
	background: white;
	color: #2d9687
}
.btn-box{
	border:1px solid #2d9687;
}
.aboutImg{
	position: absolute;
    right: 5%;
    top: 8em;
    width: 40%;
    overflow: visible;
}
#aboutWindow{fill:none;stroke:#2D9687;stroke-width:10;stroke-miterlimit:10;}
path.aboutThoughtCloud,
g.aboutThoughtCloud path,
g.aboutThoughtCloud polygon,
a.aboutThoughtCloud path,
a.aboutThoughtCloud polygon{
	fill:#E9B171;
	-webkit-transition: fill .25s cubic-bezier(.26,.09,.29,.85);
		 -moz-transition: fill .25s cubic-bezier(.26,.09,.29,.85);
					transition: fill .25s cubic-bezier(.26,.09,.29,.85);
}

.no-touchevents path.aboutThoughtCloud:hover ,
.no-touchevents g.aboutThoughtCloud:hover  path,
.no-touchevents g.aboutThoughtCloud:hover  polygon,
.no-touchevents a.aboutThoughtCloud:hover  path,
.no-touchevents a.aboutThoughtCloud:hover  polygon,
.no-touchevents #aboutImg .spiderLogo:hover polygon:first-child{
	fill:#c22085;
}

#aboutImg .spiderLogo path,
#aboutImg .spiderLogo polygon{
	fill:#0c0c0c
}
#aboutImg .spiderLogo polygon:first-child{
	fill:#E9B171
}
.no-touchevents
#aboutME {
	overflow:visible;
}
#aboutWindow,
#aboutWindow +image{
	pointer-events:none;
}
/* ------------
	Quote -3
------------ */
.quote3 .quoteTextWrap{
/*	width: 475px;
	height: 420px;*/
	width: 49.47%;
	height: 52.5%;
}
.quote3 .quoteTextLn1{
	top: 166px;
	left: 80px;
	padding: 0 0.1em;
}
#quote3Text{
	letter-spacing: 0.001em;
}
#quote3Poem{
	stroke:#E9B171;
	stroke-width:15;
	fill:none;
	stroke-miterlimit:10;
	stroke-dashoffset:0;
	stroke-dasharray:1200;
}
/* ------------
	Training Page
------------ */
.trainingIcosa0{fill:#C22085;}
.trainingIcosa1{fill:url(#icosaGrad1);}
.trainingIcosa2{fill:url(#icosaGrad2);}
.trainingIcosa3{fill:url(#icosaGrad3);}
.trainingIcosa4{fill:url(#icosaGrad4);}
.trainingIcosa5{fill:url(#icosaGrad5);}
.trainingIcosa6{fill:url(#icosaGrad6);}
.trainingIcosa7{fill:url(#icosaGrad7);}

.training{
	color: #E9B171
}

.training .secContent p:nth-child(2),
.training .secContent p:nth-child(3),
.training .secContent ul{
	color: #E2B8AA
}
#icosaTraining{
	position: absolute;
	right: 0;
	width: 47%;
	top: 50%;
	bottom: 0;
	overflow: visible;
	display: block;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	        transform: translateY(-50%);
}
.no-js #icosaTraining{
	display: none
}
/* ------------
	Quote -4
------------ */
#quote4Triangle{fill:none;stroke:#E2B8AB;stroke-width:15;stroke-miterlimit:10;
	stroke-dashoffset:0;
	stroke-dasharray:1000;
}
.quote4Text2{fill:#FFFFFF;}
.quote4Text3{font-family:'league_gothicregular';}
.quote4Text4{font-size:65px;}

.quote4 .quoteTextWrap{
/*	width: 520px;
	height: 315px;
*/
	width: 54.167%;
	height:40%;

}
.quote4 .quoteTextLn1{
	top: 93px;
	left: 0;
	width: 100%;
	text-align: center;
}
.quote4 .quoteTextLn2{
	top: 192px;
	left: 0;
	width: 100%;
	text-align: center;
}

/* ------------
	Blog Page
------------ */
#blog,
#blog .wrap{
	min-height: 10px;
}
.blog{
	color: #e2b8aa
}
#blogWrap{
	width: 100%;
	display: block;
	overflow: visible;
	display: block;
}
.no-js #blogWrap{
	display: none
}
.no-js #blogWrap + noscript{
	font-size: 2rem;
}
.expFrame{
	stroke:#e2b8aa;
	stroke-width:8;
	pointer-events:none;
	fill: none;
	will-change:transform;
}
/* ------------
	Contact
------------ */
#contact .secContent{
	min-height: 400px;
}
#contact,
#contact .wrap{
	min-height: 50vh;
}
.contact{
	color: white
}
#contact .secContent > p:first-child{
	margin-bottom: 0
}
.contactForm{
	font-family: 'Inconsolata', monospace;
	font-size: 25px;
	font-size: 1.5rem;
	width: 800px;
	max-width: 100%;
	margin-top: 2rem;
}
#contactForm .inputWrap:first-child{
	margin-top: 0
}
#contactForm .inputWrap{
	position: relative;
	margin-bottom: 30px;
	margin-bottom: 2rem;
	top:0;
}
.contactForm label{
	display: none
}
.contactForm .styledLabel{
	text-transform: uppercase;
	position: absolute;
	top: -0.2em;
	pointer-events:none;
	-webkit-transition: all .25s ease-in-out;
	   -moz-transition: all .25s ease-in-out;
	        transition: all .25s ease-in-out;
}
.contactForm .styledLabel:after{
	display: inline-block;
	content: attr(data-text);
	pointer-events:none;
}
#contact a[href*="contact@prashantsani.com"]{
	font-size: 0.8em;
}
input[type=text],
input[type=number],
input[type=email],
textarea{
	width: 100%;
	border:none;
	border-bottom: 1px solid #C22085;
	background: none;
	display: block;
	font-family: 'Inconsolata', monospace;
	font-size: 25px;
	font-size: 1.5rem;
	line-height: 2rem;
	color: white;
	border-radius: 0;
	-webkit-border-radius: 0;
}
input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
textarea:focus{
	animation: changeBorder 10s linear infinite alternate;
	transition: border .25s ease-in-out;
}
textarea{
	height: 3em
}
input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
#contactForm textarea:focus{
	border:none;
	border-bottom: 1px solid #C22085;
	outline: none;
}

/* Instead of using a adjacent sibling selector, use general sibling selector */
input:focus ~ .styledLabel,
#contactForm textarea:focus ~ .styledLabel,
.inputNotEmpty .styledLabel{
	top: -1.4em;
	font-size: 15px;
	font-size: 1rem;
	color:#c22085;
}

.submitWrap{
	width:48px;
	height:55px;
}
.submitWrap input{
	position: absolute;
	z-index: 99;
	width: 100%;
	height: 100%;
	opacity: 0;
	display: block;
}
.submitWrap svg path{
	animation: changeStroke 10s linear infinite alternate;
	webkit-animation: changeStroke 10s linear infinite alternate;
}
.contact .secEnd{
	margin-bottom: 60px;
}
#contact .textAreaWrap{
	/*top:-0.75rem; */
}
/* ------------
	Case Studies
------------ */
.caseStudyWrap{
	overflow-x: hidden;
}
.CS-Content{
	color: #FFF;
	position: relative;
	font-size: 1.25rem;
}
.CS-Content .gist{
	margin:2rem 0;
	text-decoration: none !important
}
.CS-Content .gist *{
	text-decoration: none !important
}
.CS-Content svg{
	max-width: 100%;
	margin: 0 auto;
	display: block;
}
.CS-Single,
.CS-Spacer,
.CS-MobileDevicesWrap,
.CS-MacBookWrap{
	position: relative;
	/*margin: 160px 0;
	margin: 10rem 0;*/
	margin: 12.5% 0;
}
.CS-Content .CS-Cover,
.CS-Content .CS-headSubQuote,
.CS-Content blockquote,
.CSSBrowserWrap,
.CS-MacBookWrap{
	/*margin-bottom: 180rem;
	margin-bottom: 10rem;*/
	margin-bottom: 12.5%;
	position: relative;
}
.CS-Content .CS-headQuote{
	font-family: 'Inconsolata', monospace;
	font-size: 45px;
	font-size: 2.28125rem;
	color: #C22085;
	width: 100%;
	text-align: center;
	margin-bottom: 8px;
	margin-bottom: 0.5rem;
}
.CS-Content .CS-headSubQuote{
	color: white;
	font-size: 30px;
	text-align: center;
	font-size: 1.875rem;
}
.CSSBrowserWrap{
	position: relative;
}
.CSSBrowserRevealer{
	position: absolute;
	left: 0;
	top: 0;bottom: 0;
	right: 0;
	z-index: 100;
	background: #c22085;
	pointer-events:none;
}
.CS-Content .CS-Cover{
	width: 100%;
	padding-bottom: 60%;
	height: 0;
	position: relative;
	overflow: hidden;
	-webkit-box-shadow: inset 0px 0px 0px 10px #0c0c0c;
	-moz-box-shadow: inset 0px 0px 0px 10px #0c0c0c;
	box-shadow: inset 0px 0px 0px 10px #0c0c0c;
}
.CS-Content .CS-CoverWide{
	padding-bottom: 50%;
}
.CS-Cover img{
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top:0%;
	width: 80%;
	max-width:80%;
	will-change: -webkit-transform;
	will-change: transform;
	-webkit-backface-visibility:hidden;
}
.CS-Cover .CS-Cover-front{
	-webkit-box-shadow: 0px -4px 87px 13px rgba(0,0,0,0.24);
	-moz-box-shadow: 0px -4px 87px 13px rgba(0,0,0,0.24);
	box-shadow: 0px -4px 87px 13px rgba(0,0,0,0.24);
}

img.CS-Cover-blurred{
	width: 110%;
	max-width: 110%;
	left: -5%;
	-webkit-filter: blur(4px);
	 -moz-filter: blur(5px);
	 -o-filter: blur(5px);
	 -ms-filter: blur(5px);
	 filter: blur(4px);
}
.no-cssfilters img.CS-Cover-blurred{
	display: none
}
.no-js .CS-Cover img{
	display: none
}
.CS-Content blockquote{
	font-size: 30px;
	line-height: 48px;
	font-size: 1.875rem;
	line-height: 3rem;
	max-width: 700px;
	width: 90%;
	color: #C22085;
	font-family: 'Inconsolata', monospace;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.CS-Single article{
	/*margin: 160px auto;
	margin: 10rem auto;*/
	margin: 12.5% auto;
	width: 770px;
	text-align: center;
	max-width: 100%;
	position: relative;
}
.CS-Single article article{
	max-width: 100%;
	text-align: center;
}
.CS-Single article h1{
	font-size: 35px;
	font-size: 2.1875rem;
	margin-bottom: 0.2em;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
}
.CS-Single article p{
	font-size: 20px;
	font-size: 1.25rem;
}
.CS-Single article h2,
.CS-Single article h3{
	color : #c22085;
	margin-top: 1.5em;
	font-size: 1.25rem;
}
.CS-Single article p+p{
	margin-top: 0.5em;
}
.CSSBrowser{
	position: relative;
	width: 880px;
	max-width: 75%;
	margin-left:auto;
	margin-right:auto;
	border:1px solid #c22085;
	overflow: hidden;
}
.CSSBrowser img,
.CSSBrowserHeader{
	min-width: 100%;
	position: relative;
	box-sizing: border-box;
}
.CSSBrowser img{
	display: block;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.CSSBrowserHeader{
	padding: 10px 20px;
	border-bottom:1px solid #c22085;
	position: relative;
}
.CSSBrowserBtn{
	float: left;
	width: 6px;
	height: 6px;
	border:2px solid #c22085;
	border-radius: 50%;
	margin-right: 5px
}
.CSSBrowserHamburgar{
	border-bottom: 1px solid #c22085;
	position: absolute;
	right: 20px;
	top:50%;
	margin-top: -1px;
	width: 18px;
}
.CSSBrowserHamburgar:before,
.CSSBrowserHamburgar:after{
	border-bottom: 1px solid #c22085;
	position: absolute;
	left: 0;
	content: '';
	display: block;
	width: 100%;
}
.CSSBrowserHamburgar:before{
	top: -6px;
}
.CSSBrowserHamburgar:after{
	top: 6px;
}
.CS-MobileDevicesWrap svg,
.CS-MacBookWrap svg{
	display: block;
}
.CS-MobileDevicesWrap .CS-iPad svg,
.CS-MacBookWrap svg{
	margin:0 auto;
}
.CS-FloatingiPhone{
	position: absolute;
	left:9.7%;
	top: 15%;
}
.CS-MobileDevicesWrap > .CS-MacBookWrap + .CS-FloatingiPhone{
	top: auto;
	bottom: -10%;
}
.CS-manyiPadsWrap .CS-iPad{
	/*margin: 160px auto;
	margin: 10rem auto;*/
	margin: 12.5% auto;
	position: relative;
}
.CS-manyiPadsWrap{
	position: relative;
}
.CS-manyiPadsWrap .CS-FloatingiPhone{
	bottom: -2.8%;
	top: auto
}

@-webkit-keyframes fadeInOut {
  0,
  10%,
  90%,
  100% {
    opacity: 0;
  }
  20%,
  80%{
  	opacity: 1
  }
}

@keyframes fadeInOut {
  0,
  10%,
  90%,
  100% {
    opacity: 0;
  }
  20%,
  80%{
  	opacity: 1
  }
}
.CS-TwoSliderAnimImg{
	-webkit-animation: 6s ease-out infinite reverse fadeInOut;
	animation: 6s ease-out infinite reverse fadeInOut;
	opacity: 0;
}
html body .CS-endLinks > a{
	display: block;
	border:1px solid;
	color: #c22085;
	line-height: 3rem;
	margin:0 auto;
	max-width: 80%;
	width: 35rem;
	font-size: 1.875rem;
	text-align: center;
}
.CS-endLinks > a:focus,
.no-touchevents .CS-endLinks > a:hover{
	color: white;
}
.CS-iPhone svg,
.CS-MacBookWrap svg,
.CS-iPad svg{
	display: block;
	width: 100%;
}
/* iPad */
.CS-iPad{
	position: relative;	
	width: 805px;
}
.CS-iPad,
.CS-MacBookWrap{
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.CS-MacBookWrap{
	width:1019.3px;
}
#ipad-outline path,
#ipad-outline rect,
#ipad-outline circle{fill:none;stroke:#C22085;stroke-width:2;stroke-miterlimit:10;}
#ipad-outline path{
	fill:#2B2B2B;
	stroke:#C22085;stroke-width:2;
}

/* MacBook */
#mbp-outline path{fill:none;stroke:#C22085;stroke-width:2;stroke-miterlimit:10;}
.CS-MacBookWrap{
	position: relative;
}
.CS-MacBookWrap iframe{
	position: absolute;
	left: 11.870%;
	top: 7%;
	max-width: 76.5%;
	overflow: hidden !important;
	width: 76.5%;
	height: 82%;
}
/* iPhone */
.CS-iPhone{
	width: 245px;
	max-width: 30%;
}
.CS-iPhone0{fill:#2B2B2B;stroke:#C22085;stroke-width:2;stroke-miterlimit:10;}
.CS-iPhone1{fill:none;stroke:#C22085;stroke-width:2;stroke-miterlimit:10;}
.CS-iPhone2{fill:#46B1BA;}
.CS-Single article iframe{
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* =============================================================================
	 Footer
	 ========================================================================== */

/* =============================================================================
	 Forms
	 ========================================================================== */
/* Form Resets */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"]
{ cursor: pointer; -webkit-appearance: button}
button[disabled], input[disabled] { cursor: default; }
button{
	background: transparent;
	border:none;
	outline:none;
}
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
textarea { overflow: auto; vertical-align: top; resize: vertical; }



/* Scrollbars */
::-webkit-scrollbar {
    width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
	width: 8px;
	background: black
}
/* Handle */
::-webkit-scrollbar-thumb {
	-webkit-border-radius: 10px;
    opacity:1;
    width: 8px;
}
.morning-time::-webkit-scrollbar-thumb,
.morning-time *::-webkit-scrollbar-thumb{
	  	background: #2d9687
}
.day-time::-webkit-scrollbar-thumb,
.day-time *::-webkit-scrollbar-thumb{
		background: #e9b171
}
.evening-time::-webkit-scrollbar-thumb,
.evening-time *::-webkit-scrollbar-thumb{
	  	background: #c22085
}
.late-evening-time::-webkit-scrollbar-thumb,
.late-evening-time *::-webkit-scrollbar-thumb{
	  	background: linear-gradient(to bottom,
		#c22085 25%, #2d9687 0,
		#2d9687 50%, #e9b171 0,
		#e9b171 75%, #e2b8aa 0);
}
.night-time::-webkit-scrollbar-thumb,
.night-time *::-webkit-scrollbar-thumb{
	  	background: #e2b8aa
}
::-webkit-scrollbar-thumb:window-inactive {
	opacity: 0.5
}
textarea::-webkit-scrollbar-thumb {
	background-color:#c22085;
}
/* =============================================================================
	 Library Styles
	 ========================================================================== */

/* =============================================================================
		Media Queries
	 ========================================================================== */

@media only screen and (min-width: 1900px) {
	html{
		font-size: 18px;
	}
	header{
		max-width: 1850px;
		margin-left: auto;
		margin-right: auto;
		right: 0;
	}
	header .wrap{
		width: 100%;
		max-width: 100%;
	}
	.logo,
	#hamburger{
		position: absolute;
	}
}

@media only screen and (max-width: 1900px) {
	html{
		font-size: 17px;
	}
}
@media only screen and (min-width: 1733px) {
	#homeTextWrap h1{
		font-size: 45px
	}
}
@media only screen and (max-width: 1733px) {
		/* 75% of x = 1300
		Thus, x = 1300/7.5 = 1733
		*/
		html{
			font-size: 16px;
		}

}
@media only screen and (max-width: 1430) {
	#nav ul{
		left: calc((100%-1300)/2)+"2px";
	}
}
@media only screen and (max-width: 1500px) {
	html{
		font-size: 15px;
	}
	.sec{
		background-image: linear-gradient(180deg, transparent 14px , rgba(255,255,255,.5));
		background-size: 15px 15px;
		background-repeat: repeat;
	}
}

@media only screen and (max-width: 1400px) {
	html{
		font-size: 14px;
	}


}
@media only screen and (max-width: 1300px) {
	html{
		font-size: 13px;
	}
	.training,
	.training .wrap{
		min-height: 80vh
	}
	.sec{
		background-image: linear-gradient(180deg, transparent 13px , rgba(255,255,255,.5));
		background-size: 14px 14px;
		background-repeat: repeat;
	}
	#mainLogo{
		width: 50px;
		height: 38px;
	}
}


@media only screen and (max-width: 1100px) {
	.sec{
		background-image: linear-gradient(180deg, transparent 12px , rgba(255,255,255,.5));
		background-size: 13px 13px;
		background-repeat: repeat;
	}
	.secHead,
	.secEnd{
		left: 0
	}
	#introAnim svg{
		width: 25%;height: 25%
	}
}
@media only screen and (min-width: 899px) and (max-width: 1300px){
	#icosaTraining{
		right: -5%;
	}
}
@media only screen and (min-width: 899px) and (max-width: 1260px){
	.aboutImg{
		right: -5%
	}

}
@media only screen and (max-width: 1072px) {
	html{
		font-size: 12px;
	}
	/* Case Studies */
	.CS-MobileDevicesWrap,
	.CS-manyiPadsWrap{
		max-width: 90%;
		margin: 0 auto;
	}
	html body .CS-FloatingiPhone,
	html .CS-manyiPadsWrap .CS-FloatingiPhone{
		left: -10%;
	}
	.CS-Spacer{
		display: none
	}
}
@media only screen and (max-width: 950px) {
	html{
		font-size: 11px;
	}
	.sec{
		background-image: linear-gradient(180deg, transparent 11px , rgba(255,255,255,.5));
		background-size: 12px 12px;
		background-repeat: repeat;
	}
	html .sec,html  .sec .wrap{
		min-height: 30rem;
	}

	.about .secContent,
	.training .secContent{
		width: 100%;
		max-width: 100%;
	}

	/* Home */
	#homeTextWrap{
		width: 100%;
	}
	#homeTextWrap h1{
		font-size: 4.4vw;
	}
	/* quotes */
	.quoteTop, .quoteBottom{
		display: none
	}
	.quote1 .quoteTextWrap{
		width: 100%;
		height: 80%;
	}
	.quote2 .quoteTextWrap{
		width: 80%;
		height: 100%;
	}
	.quote3 .quoteTextWrap{
		width: 100%;
		height: 100%
	}
	.quote4 .quoteTextWrap{
		width: 100%;
		height: 80%;
	}
	/* About */
	.aboutImg{
		position: relative;
		top: 0;
		right: 0;
		width: 100%;
		height: 30em;
		margin-bottom: 3em;
	}

	/* Case Study */
	.CS-Content blockquote{
		width: 80%
	}
	/* Training */
	#icosaTraining{
		position: relative;
		max-width: 300px;
		width: 100%;
		top: 0;
		margin:0 auto 4rem auto;
		right:0;
		-webkit-transform: none;
		   -moz-transform: none;
		        transform: none;
	}

}


@media only screen and (max-width: 700px) {
	html{

	}
	.sec{
		padding: 0
	}
	.sec{
		background-image: linear-gradient(180deg, transparent 10px , rgba(255,255,255,.5));
		background-size: 11px 11px;
		background-repeat: repeat;
	}
	/* Case Study */
	.CS-Content{
		padding: 5rem 0;	
	}
	.CS-Content blockquote{
		width: 100%
	}
	.CS-Content .CS-headSubQuote,
	.CS-Content .CS-headQuote,
	.CS-Content blockquote,
	.CS-Single article,
	.CS-Single article article{
		text-align: left
	}
	/*html body .wrap{
		margin: 0 0 0 5%;
	}*/
	#introAnim svg{
		width: 30%;height: 30%
	}
	#homeTextWrap{
		top: 35%
	}
	#homeSVG{
		max-width: 110%;
		width: 110%;
		left: -5%;
	    stroke-width: 3;
	    top: 0;
	    bottom: 0;
	    margin: auto;
	    height: 70%;
	}
	#homeTextWrap h1{
		font-size:6vw
	}

}
@media only screen and (max-width: 600px) {
	#nav{
		text-align: center;
	}
	/* Home */
	#homeTextWrap{
		width: 100%;
		text-align: center;
	}
	/* Case Studies */

	/* Header */
	header .wrap{
	    background: black;
	    background: rgba(0,0,0,0.7);
	    width: 100%;
	    max-width: 100%;
	    position: fixed;
	    height: 50px;
	    min-height: 40px;
	    z-index: 10000;
	}
	.logo{
		top: 12px;
		left: 7.5%
	}
	#mainLogo{
		width: 50px;
		height: 35px;
		opacity: 1 !important;
		-webkit-transform: none !important;
		   -moz-transform: none !important;
		        transform: none !important;
	}
	#hamburger{
		top: 12px;
		right: 7.5%;
	}
	.logo, #hamburger{
		pointer-events:auto;
	}
	#hamburger{
		z-index: 999999999999;
		width: 35px;
		height: 26px;
	}
	#hamburger.clicked .third{
		bottom: -4px
	}
	html body .quoteSec{
		padding: 0
	}
	.wrap{
		max-width: 85%;
	}
	html body .CS-endLinks > a{
		width: 100%;
		max-width: 100%		
	}
}
@media only screen and (max-width: 401px) {
	html{
		font-size: 10.5px
	}
}
@media only screen and (max-width: 350px) {

}
@media only screen and (min-aspect-ratio: 1/1) {

}
@media only screen and (max-aspect-ratio: 1/1) {

}
@media (-webkit-min-device-pixel-ratio: 1.5) { 
	#purpleFront{
		-webkit-transform: translateZ(200px) !important;
		transform: translateZ(200px)  !important;
	}
	#purpleBack{
		-webkit-transform: translateZ(10px) !important;
		transform: translateZ(10px)  !important;
	}
	#greenFront{
		-webkit-transform: translateZ(134px) !important;
		transform: translateZ(134px)  !important;
	}
	#greenBack{
		-webkit-transform: translateZ(40px) !important;
		transform: translateZ(40px)  !important;
	}
	#yellowFront{
		-webkit-transform: translateZ(137px) !important;
		transform: translateZ(137px)  !important;
	}
	#yellowBack{
		-webkit-transform: translateZ(20px) !important;
		transform: translateZ(20px)  !important;
	}
}

@media (min-resolution: 1.5dppx) {
	#purpleFront{
		transform: translateZ(200px)  !important;
	}
	#purpleBack{
		transform: translateZ(10px)  !important;
	}
	#greenFront{
		transform: translateZ(134px)  !important;
	}
	#greenBack{
		transform: translateZ(40px)  !important;
	}
	#yellowFront{
		transform: translateZ(137px)  !important;
	}
	#yellowBack{
		transform: translateZ(20px)  !important;
	}
}


/* =============================================================================
		Misc Styles and Non-Symentic Class/Hacks
	 ========================================================================== */

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {
	display: none !important;
	visibility: hidden;
}
/* Contain Floats */
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}


.sec{
	background-image: none !important
}
.sec:before,
.sec:after{
	display: none !important
}
.sec{
	padding: 2rem 0;
}


/*
	A Fancy "image not loaded" message
	http://codepen.io/Prashantsani/pen/JXNrpE
*/
img:before,
image:before{
  content:'';
  display: block;
  border:1px solid black;
  height:calc(100%+10px);
  background: rgb(230,230,230);
  position: absolute;
  top:-5px;
  left: 0;
  right:0;
  bottom: 0;

  border-radius:5px;
}

img:after,
image:after{
  content: 'Please wait Loading Image...';

  display:block;
  font-size:20px;
  line-height:1;
  font-family:sans-serif;
  width:100%;

  position: absolute;
  top:10px;
  left:0;
  width:100%;
  text-align:center;
}

.no-flick{-webkit-transform:translate3d(0,0,0);}
.no-js img[src=""],
.no-js image[xlink:href=""]{
	display: none
}
.js noscript img{
	display: none
}
/* No JS */
.No-jsWran{
	background: #e2b8aa;
	text-align: center;
	font-size: 20px;
	font-size: 2rem;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 1000;
	line-height: 1.5
}
.No-jsWran a{
	color: #0c0c0c !important;
}

.awardsLinks{
	width:60px;
	height:60px;
	position:absolute;
	opacity:0;
	right:0px;
	z-index:99999;
	text-indent:-9999px;
	display: block;
	background-repeat: no-repeat;
}
a[href*="cssnectar"]{
	top: 387px;
}
a[href*="awwwards"]{
	top: 255px;
	width: 80px;
	height: 120px;
	background-size: contain;
}
a[href*="designnominees"]{
	top:110px; width:70px;height:130px;
}
a[href*="csslight"]{
	width:84px;height:29px;top: 460px;
}
a[href*="cssreel"]{
	width:140px;height:46px;top: 520px;	
}
/* =============================================================================
		Print Styles
	 ========================================================================== */

@media print {
	#hamburger,
	#nav,
	#home,
	#quote1,
	#projects,
	#quote2,
	#quote3,
	#training,
	#quote4,
	#blog,
	#contact,
	#teleportAnim,
	#projectDetailsModal{
		display: none
	}
	#body .secHead,#body  .secEnd{
		padding: 2rem 0 2rem 0;
		margin:0;
	}
	.sec, .sec .wrap{
		min-height: 100px
	}
	#body .sec{
		padding: 0
	}

	#body header{
		position: relative;
	}
	body:before{
		display: block;
		font-size: 1.5rem;
		position: relative;
		left: 10%;
		top: 2rem;
		color: #c22085;
		content: 'Save Paper, Save Trees, Save Earth!'
	}
	#about .secContent{
		width: 100%;
		font-size: 1rem;
		max-width:80%;
	}
	.aboutImg{
		display: none !important
	}
	.resumeBtn{
		display: none !important
	}
}