body
{
	font-family: 'Raleway', sans-serif;
	text-align:center;
	font-size:12px;
	overflow-x: hidden;
	
}
a:hover
{
		color:#fff;
}

h1
{
	color:#fff;
	font-size:40px;
	line-height:24px;
	font-weight:700;
	text-transform:uppercase;
}
.GeneralText
{
	line-height:24px;
	color:#616161;
	text-align:center;
	font-size:16px;
}
.blueTxt
{
	color:#009ADA;
}
.SubLine
{
	margin:auto;
	margin-top:25px;
	margin-bottom:40px;
	background:#fff;
	width:110px;
	height:4px;
	line-height:24px;
	text-align:center;
	display:block;

}
.DarkCol
{
	color:#444649;
}
.DarkLine
{
	background:#444649;
	margin-bottom:50px;
}

.HomeBanner
{
	background-color:#252934;
	height:100vh;
}
.HomeBanContent
{
 position: absolute; /* or absolute */
  top: 50%;
  left: 50%;
transform: translate(-50%, -50%);	
width:100%;
}
.HomeBanTxt
{

	display:block;
	font-size:42.6px;
	line-height:48px;
	color:#fff;
	margin-bottom:20px;
	pointer-events:none;
}
.PinkTxt
{
	color:#E31B6D;
	font-weight:500;
}
.MarginBottom
{
	margin-bottom:35px;
}
.homebtn
{
	padding:12px 20px 12px 20px;
	margin-bottom:53px;
	border:2px solid #fff;
	display:inline-block;
	cursor:pointer;
	transition:all .5s;
	font-size:21.3px;
	color:#fff;
	line-height:24px;
}
.iconBtn
{
		font-size:21.3px;
	color:#fff;
	line-height:24px;
	margin-left:15px;
		transition:all .5s;
}
.homebtn:hover
{
	background-color:#04c2c9;
	border-color:#04c2c9;
}

.homebtn:hover > .iconBtn
{
  transform: rotate(90deg);
  	transition:all .5s;
}
.AboutContainer
{
	padding:100px 0px 130px 0px;
	position:relative;
}
.AboutMeImg
{
	width:100%;
}
.AboutMeGraphContainer
{
	margin:50px 0px 0px 0px;
}
.Header
{
	font-weight:700;
	font-size:24px;
	margin-bottom:15px;
	display:block;
}
.GraphOverall
{

}

.SkillName
{
	width:110px;
	background-color:#04C2C9;
	height:28px;
	color:#fff;
	font-size:14.6px;
	text-align:center;
	line-height:28px;
	font-weight:700;
	display:block;
	position:absolute;
	z-index:2;
}
.SkillContainer
{
background-color:#eee;
width:100%;
position:relative;
height:28px;
margin-bottom:15px;
overflow:hidden;
}
.skillPercentBar
{
	height:28px;
	background-color:#00A1A7;
	width:80%;
	display:block;
	position:absolute;
	z-index:1;
	left:110px;
	animation: BarSlideIn 3s ease-in-out;
	animation-play-state: paused;
}
@keyframes BarSlideIn{
  0%{
    left: -100%;
  }
  100%{
    left: 110px;
  }
}

.skillPercentTxt
{
	padding:0 15px 0 0;
	font-size:14.6px;
	height:28px;
	color:#666;
	position:absolute;
	z-index:2;
	right:0;
	line-height:28px;
}
.White
{
	color:#fff;
}
.Pink
{
	color:#E31B6D;
}
@keyframes CodeView{
  0%{

	opacity:0;
  }
 
  100%{
opacity:1;
  }
}
.AboutMeCodeContainer
{
display:none;
padding:40px 0px;
background-color:#f5f5f5;
margin-bottom:-130px;
width:100%;
box-sizing:border-box;
animation:CodeView 1.2s ease;
}
.AboutMeCode
{
	background-color:#383737;
	width:100%;
	height:100%;
	padding:40px !important;
	box-sizing:border-box;
	border-top:15px solid #E31B6D;
	border-radius:5px;
}
.AboutMeCode a
{
	color:#04C2C9;
}
.AboutMeCode a:hover
{
	text-decoration:underline;
}
.AboutCodeSubTitle,.AboutCodeTxt,.AboutCodeSubTxt
{
	color:#ccc;
	text-align:left;
	font-size:15px;
	display:block;
	width:100%;
}
.AboutCodeSubTitle
{
	color:#f5f5f5;
}
.AboutCodeTxt,.AboutCodeSubTxt
{
	margin-bottom:19px;
	padding-left:10px;
}
.AboutCodeSubTxt
{
	padding-left:60px;
}
.TitleContainer,.TitleContainer2
{
	width:52%;
	float:left;
	
}
.TitleContainer img
{
	float:left;
	margin-left:10px;
}
.TitleContainer2 img
{
	float:right;
	margin-right:10px;
}
.AboutMeBreakdown
{
	display:none;
}
.AboutMeBreakdownSectionContainer
{
overflow:hidden;	
}
.AboutMeBreakdownTitle,.AboutMeBreakdownTitle2
{
	font-size:18.6px;
	text-align:left;
	display:block;
	color:#e1164b;
	float:right;
	line-height:64px;
	font-weight:600;
	margin-right:24px;
}
.AboutMeBreakdownTitle2
{
	float:left;
	color:#10D173;
	margin-left:24px;
}

.BarOverall,.BarOverallGreen
{
	border:2px solid #ff3d5e;
	height:41px;
	width:48%;
	float:left;
	margin-top:13px;


}


@keyframes barInLeft{
  0%{
  left:-100%;
	
  }
  100%{
left:0px;
overflow:auto;
  }
}
@keyframes barInRight{
  0%{
  right:-100%;
	
  }
  100%{
right:0px;
overflow:auto;
  }
}


.BreakdownTopic
{
	width:100%;
	margin:11px 0px;
}
.BreakdownTopicDesc,.BreakdownTopicDesc2
{
	width:52%;
	float:right;

}
.BreakdownTxtCont,.BreakdownTxtCont2
{
	float:left;
	width:calc(70% - 10px);
	margin-top:12px;
	margin-right:10px;
	text-align:right;
}
.BreakdownTxtCont
{
	margin-right:0px;
	margin-left:10px;
	text-align:left;
}
.BreakDownSubTitleLeft,.BreakDownSubTitleRight
{
	color:#e1164b;
	font-size:15px;
	font-weight:600;
	position:relative;
	animation: TitleLeft 4s ease;
	background-color:#fff;
	z-index:99;
transition:all 2s ease-in-out;
}
.BreakDownSubTitleRight
{
	animation: TitleRight 4s ease;	
}
.Green
{
	color:#10D173;	
	
}
.BreakDownSubTitle,.BreakDownSubTxt
{
	display:block;
	width:100%;
	
}
@keyframes TitleLeft{
  0%{
	right:calc(-100% - 180px);
	opacity:0;
  }
  49%{
	  opacity:0;
  }
  50%
  {
right:calc(-100% - 180px);
opacity:0.1;		
  }
  100%{
right:0;
opacity:1;
  }
}
@keyframes TitleRight{
  0%{
	left:calc(-100% - 161px);
	opacity:0;
  }
  49%{
	  opacity:0;
  }
  50%
  {
left:calc(-100% - 161px);
opacity:0.1;		
  }
  100%{
left:0;
opacity:1;
  }
}
@keyframes SubText{
  0%{
	top:-26px;
	opacity:0;
  }
  85%{
	  opacity:0;
  }
  86%
  {
	top:-26px;
opacity:0.1;		
  }
  100%{
top:0;
opacity:1;
  }
}

@keyframes BreakdownImage{
  0%{

	opacity:0;
  }
  64%{
	  opacity:0;
  }
 
  100%{
opacity:1;
  }
}

.BreakDownSubTxt
{
	line-height:25px;
	position:relative;

		animation: SubText 5s ease;
		
}
.BreakdownTopicDesc2
{
	float:left;
}
.BreakdownTopicDesc2 img
{
	float:right;
	margin-right:10px;
	width:24%;
	max-width:64px;
	animation: BreakdownImage 7s ease;
}
.BreakdownTopicDesc img
{
	float:left;
	margin-left:10px;
	width:24%;
	max-width:64px;
		animation: BreakdownImage 7s ease;
}
.BarOverallGreen
{
border:2px solid #10D173;	
}
.BarFill,.BarFillGreen
{
	background-color:#ff3d5e;
	float:left;
	height:100%;
	position:relative;
	animation: barInRight 2s ease;
transition:top 2s ease-in-out;
transition-delay:2s;
top:0;
	
}
.BarFillGreen
{
	animation: barInLeft 2s ease;	
}
.BarFillGreen
{
background-color:#10D173;	
}
.BarFill
{
	float:right;
}

.MarginBottomCode
{
margin-bottom:0px;	
}

.PnwContainer
{
	background-color:#04C2C9;
	padding:112px 0px;
	overflow:hidden;
    height:336px;
}
.PWComptxtContainer
{
	width:100%;
	position:relative;
}
.PnwTxt
{
	color:#fff;
	display:block;
	max-width:370px;
	font-size:25px;
	line-height:28px;
	text-align:left;
	margin-left:70px;
	margin-top:11px;
}
.SpanHeight
{
	height:112px;
}
.PWComptxt
{
	display:block;
	width:100%;
	color:#00A1A7;
	font-size:75px;
	letter-spacing:-3px;
	position:absolute;
	text-align:left;
	font-weight:600;
	height:112px;
 	transition:top 2s ease-in-out; 
}
.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}
.current
{
	color:#fff;
}




.PortfolioContainer
{
	background-color:#f5f5f5;
	padding-bottom:130px;
	padding-top:100px;
}
.ContactContainer
{
background-color:#252934;	
padding-top:175px;
padding-bottom:130px;
}
.ButtonOptionContainer
{
	margin:20px 0px;
	
}
.filter,.filter2,.filter1
{
	display:inline-block;
	padding:0px 40px;
	margin:0px 25px;
	font-size:17.3px;
	color:#fff;
	cursor:pointer;
	line-height:34px;
	text-transform:uppercase;
	height:34px;
	border-radius:1px;
	font-weight:600;

}
.filter1
{
	min-width:150px;
}
.filter2,.filter1
{
margin:0px 3px;
background-color:#04C2C9;
margin-bottom:8px;
 -webkit-transition: ease-out 1s;
  -moz-transition: ease-out 1s;
  transition: ease-out 1s;
   box-shadow: inset 0 0 0 0 #E31B6D;
}

.filter2:hover,.filter1:hover {

   box-shadow: inset 0 0 0 50px #E31B6D;

}
.active
{
	background-color:#E31B6D;
	color:#fff;
}
.ProjectContainer
{
	margin:20px 0px;
}
.ProjectFilterCont,.ProjectFilterCont2
{
overflow:hidden;
}
.portfolioTextImageContainer
{
	margin-bottom:34px;
	/* border:1px solid red; */
}
.switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.switch input {
  display:none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
}

input:checked + .slider {
  background-color: #66bb6a;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.BotMargin
{
	margin-bottom:30px;
}
.lessMargin
{
	margin-bottom:20px !important;
}
.SwitchContainer
{
	 width: 233px;
    margin: auto;
	transform:translate(-15px);
}
.SwitchRightLabel,.SwitchLeftLabel
{
	display: block;
    float: right;
    margin-top: 7px;
    font-size: 14px;
	margin-left:8px;
  
}
.SwitchLeftLabel
{
	float:left;
	margin-right:8px;
	margin-left:0px;
}
#ProjectFilterCont2
{
	overflow:hidden;
}
.PortfolioImage
{
	width:33.9%;
background-color:#f5f5f5;
position:relative;
z-index:99;
/* border:1px solid black; */
}
.PortfolioText
{
	width:65.9%;

	min-height:302px;
padding:15px;
padding-top:18px;
}

.floatRight,.floatRightImg
{
	float:right;
}
.floatLeft,.floatLeftImg
{
float:left;	
}
.floatLeftImg,.floatRightImg
{
	margin-left:15px;
	width:calc(100% - 15px);
	top:50%;
	left:0;
	transform:translateY(-50%);
	position:absolute;
}
.floatRightImg
{
	margin-left:0px;
	margin-right:15px;
}
.portfolio,.portfolioTextImage
{
	
	height:300px;
	width:33%;
	float:left;
	position:relative;


}
.portfolioTextImage
{
	overflow:hidden;
}
.portfolioTextImage
{
	width:100%;
}
.portfolioTextImage
{
	float:none;

}
.portfolioRight
{
/* 	right:calc(-100% + 332px) !important; */
	
}
.ProjectDescOverlay
{
	background-color:#f5f5f5;	
	text-align:center;
	opacity:0;
	height:100%;
	width:100%;
	position:absolute;
	z-index:1;
	top:0;
	transition:opacity 1s;
	transition:all 0.3s ease-in-out;
	overflow:hidden;
}
.textContainer
{
	position:absolute;
	z-index:2;
	width:100%;
top:-100%;
transition:all 0.3s ease-in-out;
}
.portfolio img
{
width:100%;
height:100%;	
}
.portfolio:hover .ProjectDescOverlay
{
opacity:1;
transition:all 0.3s ease-in-out;
}
.portfolio:hover .ProjectDescOverlay .textContainer
{
	transition:all 0.3s ease-in-out;
	top:23%;
}
.portfolio:hover .ProjectDescOverlay .buttonContainer
{
	transition:all 0.3s ease-in-out;
	bottom:24%;
}

.PortfolioHeader
{
font-size:21.3px;	
text-align:center;
color:#1B242F;
font-weight:700;
transition:all 0.3s ease-in-out;
width:100%;
display:block;
}
.PortfolioSubHeader
{
color:#E31B6D;
text-align:center;	
transition:all 0.3s ease-in-out;
font-size:16px;
line-height:24px;
width:100%;
display:block;
}
.portfolioButton
{
border:2px solid #E31B6D;
width:170px;
margin:0 auto;
padding:7px 0;	
font-size:17.3px;
line-height:24px;
transition:all 0.3s ease-in-out;
}
.portfolioButton:hover
{
color:#fff;	
background-color:#E31B6D;
}

.ProjectOverlayContainer
{
	height:100%;
	position:fixed;
	width:100%;
	z-index:99;
	background-color:rgba(0, 0, 0, 0.5);
	top:0;
	left:0;
	display:none;
}
.ProjectBoxContainer
{
	max-width:700px;
	width:100%;
	box-shadow:0 0 10px rgba(0, 0, 0, 0.4);
	background:#fff;

	position:relative;
	top:12vh;
	z-index:999999;
	transition:all .3s;
	margin:0 auto;
	margin-top:auto;

}
.ProjectBoxInfo
{
	padding:35px 60px 90px 25px;
	color:#444;
}
.ProjectBoxInfoHeader
{
	font-size:29.3px;
	line-height:40px;
	font-weight:700;
	text-align:left;
	display:block;
	width:100%;
	
}
.ProjectBoxInfoSubHeader
{
	font-size:14.6px;
	font-weight:700;
	border-bottom:1px solid rgba(0, 0, 0, 0.1);
	padding-bottom:15px;
	text-align:left;
	display:block;
	width:100%;
	text-transform:uppercase;
	color:#c0c0c0;
}
.ProjectBoxInfoTxt
{
	text-align:left;
	display:block;
	width:100%;
	font-size:14.5px;
	line-height:24px;
	margin-top:15px;
}
.ProjectBoxLinkBtn,.ProjectBoxDocBtn,.ProjectBoxLinkBtn2,.ProjectBoxDocBtn2
{
	padding:11px 30px;
	font-size:13.3px;
	left:25px;
	cursor:pointer;
	background:#E31B6D;
	color:#fff;
	font-weight:700;
	border:0;
	position:absolute;
	bottom:20px;
	transition:all .5s;
	text-transform:uppercase;
}
.ProjectBoxLinkBtn2,.ProjectBoxDocBtn2
{
	position:unset;
	bottom:unset;
	float:left;
	margin-top:10px;
}
.ProjectBoxDocBtn,.ProjectBoxDocBtn2
{
background:#04C2C9;
display:none;
}
.ProjectBoxDocBtn2
{
	display:block;
}
.ProjectBoxLinkBtnIcon
{
	font-size:14.6px;
	position:relative;
	left:-10px;
}
.ProjectBoxLinkBtn:hover
{
	color:#E31B6D;	
	background:#fff;
}
.ProjectBoxDocBtn:hover
{
	color:#04C2C9;	
	background:#fff;
}
.ProjectBoxCross
{
	right:28px;
	position:absolute;
	bottom:18px;
	color:#bbb;
	font-size:26.6px !important;
	font-weight:800;
	cursor:pointer;
}
.buttonContainer
{
	text-align:center;
	width:100%;
	position:absolute;
z-index:2;
bottom:-100%;
transition:all 0.3s ease-in-out;
}
.ContactSubtxt,.ContactSubtxt2
{
	font-weight:600;
	color:#04C2C9;
	line-height:24px;
	font-size:16px;
	
}
.ContactSubtxt2
{
	color:#fff;
}
.ContactFormStyle
{
	margin-top:40px;
}

.ContactFormStyle input[type=text],.textarea
{
	display: block;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    border: 0;
    padding: 10px 15px;
    background: #1E242C;
    font-size: 16px;
    margin-bottom: 3px;
    color: #fff;
	min-width:100%;
	max-width:100%;
}
.textarea
{
	min-height: 150px;
    margin-bottom: 5px;
}

.ContactFormStyle input[type=submit],.SubmitBtn
{
	float: right;
    margin: 5px 0 0 0;
    font-size: 16px;
    padding: 10px 30px;
    color: #fff;
    background: transparent;
    outline: 0;
	border:2px solid #fff;
	transition:all .5s;
	cursor:pointer;
}	

.ContactFormStyle input[type=submit]:hover,.SubmitBtn:hover
{
background-color:#04C2C9;	
border-color:#04C2C9;
}
#FormSubmitTxt
{
	display:none;
	color:#fff;
}

.footerContainer
{
padding:70px 0 50px 0;
background:#1B242F;	
}
.ScrollUp
{
    background: #E31B6D;
    font-size: 40px;
    width: 47px;
    height: 50px;
    line-height: 53.3px;

    cursor: pointer;
    transition: background .5s;
	position: absolute;
    z-index:9;
	margin-top:-25px;
	margin-left:-23px;
}	
.ScrollUp:hover
{
	background-color:#fb1f79;
}
.ScrollUpIcon
{
color:#fff;	
}
.SocialIcon
{
	transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
    cursor: pointer;
    width: 55px;
    height: 55px;
	display:inline-block;
    position: relative;
    text-align: center;
    margin: 0 15px;
    background: #262F38;
  overflow:hidden;
	text-align:center;
}
.SocialIconStyle
{
	color:#fff;
	font-size: 23px !important;
	margin-top:16px;
	position:relative;
	
}


@keyframes IconDown{
  0%{
    top: -100%;
  }
  100%{
    top: 0px;
  }
}
.SocialIcon:hover
{
	background-color:#04C2C9;
	
}
.SocialIcon:hover > .SocialIconStyle
{
animation: IconDown 0.4s ease;
}

.FooterTxt
{
	opacity:0.6;
	margin-top:35px;
	display:block;
	font-size:13.3px;
	text-align:center;
	color:#8F9AA7;
	text-transform:uppercase;
}
.PinkTxt2
{
	color:#E31B6D;
}
@media(max-width:1040px)
{
	.AboutMeBreakdownTitle,.AboutMeBreakdownTitle2,.BreakDownSubTxt
	{
		display:none;
	}
	
	.BreakdownTopic
	{
		height:64px;
	}
	.BreakdownTxtCont, .BreakdownTxtCont2
	{
		width:calc(100% - 80px);
		margin-top:22px;
	}
	.BreakdownTopicDesc2 img,.BreakdownTopicDesc img
	{
		width:60px;
	}
	


}
@media(max-width:1024px)
{
	.AboutMeImg img
	{
		width:60%;
		margin-bottom:15px;
		transition:all 0.3s ease-in-out;
	}
}
@media(max-width:960px)
{
	.homebtn
	{
		padding:12px 20px 12px 20px;
		font-size:17.3px;
		transition:all 0.3s ease-in-out;
	}
}

@media(max-width:830px)
{
	.PWComptxt
	{
		font-size:55px;
		line-height:98px;
		
	}
	.PnwTxt
	{
	font-size:19px;	
	}
	
	.portfolio
	{
		width:49%;
	}
}
@media(max-width:640px)
{
	.filter2,.filter1
	{
		padding:0px 10px;
		  
	}
	
}
@media(max-width:640px)
{
	.PortfolioText,.PortfolioImage
	{
		width:100%;
	}
	.floatLeftImg, .floatRightImg
	{
	margin:auto;
	display: block;
    margin-left: auto;
    margin-right: auto;
	position:unset;
	transform:none;
	width:auto;
	float:none;
	}
	.PortfolioText
	{
		min-height:auto;
		
	}
}
@media(max-width:620px)
{
	
	.BreakdownTxtCont, .BreakdownTxtCont2
	{
		display:none;
	}
}

@media(max-width:600px)
{
	.HomeBanTxt
	{
		font-size:29.3px;
		line-height:32.6px;
	}
	
	.AboutContainer
	{
		padding-bottom:80px;
	}
	
	.AboutMeImg img
	{
		width:100%;
		transition:all 0.3s ease-in-out;
	}
	
	.ScrollTxtCont,.PWComptxtContainer
	{
		width:100% !important;
	}

	.PnwContainer
	{
		padding:88px 0px 60px;
		height:100%;
	}
	.PWComptxtContainer
	{
		height:224px;
		overflow:hidden;
	}
	.SpanHeight
	{
		height:auto;
	}
	.PnwTxt
	{
	text-align:center;
	max-width:61%;
	margin:auto;
	}
	.PWComptxt
	{
		text-align:center;
		width: calc(100% - 20px);
	}
	.PortfolioContainer
	{
		padding-bottom:80px;
	}
	
	.portfolio
	{
		width:70%;
		float:none;
		margin:auto;
		height:auto;
	}
	
}

@media only screen and (max-device-width:640px)
{
/* 	body{background-color:red;} */
	.PortfolioText,.PortfolioImage
	{
		width:100%;
	}
	.floatLeftImg, .floatRightImg
	{
	margin:auto;
	display: block;
    margin-left: auto;
    margin-right: auto;
	position:unset;
	transform:none;
	width:auto;
	float:none;
	}
	.PortfolioText
	{
		min-height:auto;
		
	}
	.SwitchContainer,.portfolioStandardOverall
	{
		display:none;
	}

	.portfolioTextImageOverall
	{
		display:block !important;
	}
	#mobileCheck
	{
		display:none;
	}
	
}
@media(max-width:399px)
{
	.portfolio
	{
		width:95%;
	}
	.PortfolioSubHeader
	{
		
	}
}
@media(max-width:350px)
{
	
		.filter1
	{
		min-width:calc(100% - 20px);
	}
	
	.PnwTxt
	{
	max-width:74%;
	font-size:16px;	
	}

	.PWComptxt
	{
		font-size:42px;
		line-height:134px;
	}
	
	.PortfolioHeader
	{
		font-size:16.3px;
	}
	.PortfolioSubHeader
	{
		font-size:14px;
	}
	.portfolioButton
	{
		padding:2px 0px;
		font-size:14.3px;
	}
	
	
	.portfolio:hover .ProjectDescOverlay .textContainer
{
	top:15%;
}
.portfolio:hover .ProjectDescOverlay .buttonContainer
{
	bottom:15%;
}
}