@charset "utf-8";

body, html {
    display: block;
    position: static;
    padding: 0;
    width: 100%;
    height: 100%;
	}
/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
* { 
	color:   			#fff; 
	text-decoration: 	none;
	font-family: 		'Raleway', sans-serif; 		
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

.box {
	float:		 left;
	width: 		 100%;
	height:		 100%;
}
	
.box svg {
	width: 			100%;
	height: 		100%;
}

h1{
	font-family: 		'Raleway', sans-serif; 
	color: 				#1d1d1d;
	font-weight:			600;
	font-size:			50px;
	padding: 		    0 0 20px 0;
}

h2{
	color:      		#1d1d1d;
	font-size:			50px;
	font-weight:     	200;
	padding:			0 0 20px 0;		
	}
	
.portfolio h1{
	color:      		#1d1d1d;
	font-size:			50px;
	font-weight:     	200;
	padding:			0 0 20px 0;		
	}
	
p {
	font-family: 	'Open Sans', sans-serif;
	font-size:       14px;
	font-weight:     300;
	color:		     #1d1d1d;
	padding-bottom:  20px;
}

b, strong {
    font-weight: bold;
    color: #1d1d1d;
}
img{
	width: 100%;
}
.copy-container {
	padding-top:      15vw;
}

.section-content{
	display: 	block;
	position:   absolute;
	z-index:    1;
	padding-left: 8%;
	padding-right: 8%;
	width:      100%;
	height:     100%;
}


/*** box ***/
#top, #bottom, #left, #right {
	background: 	#5647a4;
	position: 		fixed;
	transform: 		translate3d(0px, 0px, 0px);
	z-index:		1;
	}
	#left, #right {
		top: 		30px; 
		bottom: 	30px;
		width: 		1px;
		}
		#left { left: 30px; }
		#right { right: 30px; }
		
	#top, #bottom {
		left: 		30px; 
		right: 		30px;
		height: 	1px;
		}
		#top { top: 30px; }
		#bottom { bottom: 30px; }


/*** Navbar ***/

.navbar-header .svg-wrapper {
	position: relative;
	float: right;
	height: 44px;
	width: 44px;
	margin: 10px;}

.navbar-header .svg-wrapper .shape {
    stroke: #ffffff;}

.nav-default, .navbar-fixed-top {
	background-color: transparent;
	border-color:     transparent;}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;}

.navbar-header {
    float: none;}

.navbar-toggle {
	position: absolute;
	top: 0;
	left: 0;
    display: block;
	background-color: #5647a4;
	border: none;
	border-radius:0px;
	height: 42px;
	width:42px;
	margin: 1px;}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
	background-color: #5647a4;
}
.navbar-default .navbar-toggle:focus{
	background-color: #5647a4;
}
.navbar-toggle .icon-bar {
	position: relative;
	height: 1px;
	margin: 5px 0;
}

.navbar-brand > img {
			display: block;
			margin:   0 -15px;
			width:32px; 
			height:32px; 
			background-color:#fff; 
			padding: 6px 4px;
		}	

     /* FULL SCREEN MODAL STYLES
    -------------------------------------------------- */
  .fullscreen .modal-dialog {
	  	position: absolute;
        margin: 0 0 0 0;
        width: 100%;
        height: 100%;
        min-height: 100%;
        padding: 0;
    }

    .fullscreen .modal-content {
        height: 100%;
        min-height: 100%;
        border-radius: 0;
        background-image: linear-gradient(to right,#5f55ce, #5647a4);
        background: rgba(255, 255, 255, 0.97);
        overflow:auto;
    }
	.modal-header {
		padding: 10px 15px;
		}
	
	.modal-header .close {
		margin-top: 0;
		}
	.modal-body {
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 100%;
		height: 400px;
		}
    .fullscreen .modal-body li {
        padding: 10px 0 10px 0 ;
    	}
    .fullscreen .modal-body a {
		position: absolute;
		margin: auto;
		height: 30px;
		width: 210px;
		display: block;
		top: 0;
		left: 0;
        color: #5647a4;
        font-size: 16px;
		text-decoration: none;
		line-height: 30px;
    }
	.fullscreen .modal-body a.active {
		text-decoration: line-through;
    }

	.fullscreen .modal-body .svg-wrapper {
		position:relative;
		display: block;
		margin: auto;
		height: 30px;
		width: 210px
	}
	.fullscreen .modal-body .shape {
		stroke: #5647a4;
		stroke-width: 1px;
	}
	
	.modal-header{
		border-bottom: none;
	}

	button.close {
		background: #ffffff;
		width: 		44px;
		height:     44px;
		border: 1px solid #5647a4;
		opacity: 1;
		padding:	 10px;}
		
	.icon-bar-left {
		display: block;
		position: absolute;
    	width: 22px;
    	height: 1px;
    	border-radius: 1px;
		margin: auto;
    	background-color: #5647a4;
		transform: rotate(-45deg);}
	.icon-bar-right {
		display: block;
		position: absolute;
    	width: 22px;
    	height: 1px;
    	border-radius: 1px;
		margin: auto;
    	background-color: #5647a4;
		transform: rotate(45deg);}



/**************/
/*** Head ***/
/**************/

.jumbotron{
	padding-top:       14vw;
	background-color:  #5647a4;
	color: 		   	   #fff;
}

.jumbotron h1 {
	padding-bottom: 		20px;
	font-weight: 			600;
}
.jumbotron p {
	font-family:	 'Open Sans', sans-serif;
	font-size:       14px;
	font-weight: 	 300px;
	color: 			 #fff;
}


/**************/
/*** Button***/	
/**************/

.svg-wrapper {
  height: 		44px;
  position: 		relative;
  width: 		200px;
  display:      inline-block;
}

.shape {
  fill: 					transparent;
  stroke-dasharray: 		201 540;
  stroke-dashoffset: 	-249;
  stroke-width: 			4px;
  stroke: 				#19f6e8;
}

.btn-link {
  position: 			absolute;
  color: 				#1d1d1d;
  font-size: 			14px;
  text-align: 			center;
  letter-spacing: 		5px;
  line-height: 			32px;
  top: 					2px;
  left:    0;
  width: 				200px;
}

.btn-link:hover, .btn-link:focus, .btn-link:active {
  color: 				#fff;
  text-decoration:      none;
}

.svg-wrapper:hover .shape {
  -webkit-animation: 	0.5s draw linear forwards;
  -moz-animation: 		0.5s draw linear forwards;
  
  animation: 			0.5s draw linear forwards;

}

.list-group-item {
	background-color: transparent;
	border: 			  none;
	padding: 		  0;
	color: 			  #ededed;
	margin:			  0  0 5px 0;
	font-size:        14px;
}

.list-group-item p{
	font-size:		14px;
}

.list-group-item span {
	color:        #00aeef;
	font-size:	  14px;
	padding:      0 10px 0 0;
	}


/******************/
/*** Portfolio ***/
/******************/
.portfolio {
	padding-top:		84vw;
	}	

.portfolio h1{
	color:      		#1d1d1d;
	font-size:		38px;
	font-weight:    200;
	padding:			0 0 20px 0;		
	}
	
.portfolio .svg-wrapper,
.copy-container .svg-wrapper {
  height: 		44px;
  margin:       10px 0;
  position:  	relative;
  /*top: 			50%;*/
  -webkit-transform: 	translateY(-50%);
  -moz-transform: 	translateY(-50%);
  -ms-transform: 	translateY(-50%);
  transform: 	translateY(-50%);
  width: 		200px;
  display:      inline-block;
}

.portfolio .shape,
.copy-container .shape {
  fill: 				transparent;
  stroke-dasharray: 	201 540;
  stroke-dashoffset: 	-249;
  stroke-width: 		3px;
  stroke: 				#5647a4;
}

/*.portfolio .btn-link,
.copy-container .btn-link {
  position: 			absolute;
  color: 				#1d1d1d;
  font-size: 			14px;
  text-align: 			center;
  letter-spacing: 		5px;
  line-height: 			32px;
  top: 					2px;
  width: 				200px;
}*/

.portfolio .btn-link:hover, .btn-link:focus, .btn-link:active,
.copy-container .btn-link:hover, .btn-link:focus, .btn-link:active {
  color: 				#1d1d1d;
  text-decoration:      none;
}

.portfolio .svg-wrapper:hover .shape,
.copy-container .svg-wrapper:hover .shape {
  -webkit-animation: 	0.5s draw linear forwards;
  -moz-animation: 		0.5s draw linear forwards;
  -ms-animation: 		0.5s draw linear forwards;
  animation: 			0.5s draw linear forwards;
}



/****************************************/
/*** calculator ***/
/****************************************/


#fadeInAnim h1{
	transition:			all 1s ease-in-out 0.5s;
	}
	
.portfolio-heading{
	opacity: 			0;
    -webkit-transform:  translateY(80px);
	-moz-transform:  translateY(80px);
	-ms-transform:  translateY(80px);
    transform: 			translateY(80px); 		
	}
	
.viewing-page-1 #fadeInAnim h1{
  	opacity: 			1;
    -webkit-transform:  translateY(0);
	-moz-transform:  translateY(0);
	-ms-transform:  translateY(0);
    transform: 			translateY(0); 	
}

#fadeInAnim p {
	transition:			all 1s ease-in-out 0.6s;
	}
	
.portfolio-brief{
	opacity: 			0;
    -webkit-transform:  translateY(80px);
	-moz-transform:  	translateY(80px);
	-ms-transform:  	translateY(80px);
    transform: 			translateY(80px);		
	}
	
.viewing-page-1 #fadeInAnim p{
  	opacity: 			1;
    -webkit-transform:  translateY(0);
	-moz-transform:  	translateY(0);
	-ms-transform:  	translateY(0);
    transform: 			translateY(0);}
				

/****************************************/
/*** Experience & Degree ***/
/****************************************/

#experiDegree{
	background:  #1D1D1D;
	}
  
.experience, .degree {
	padding-top: 10vw;
}

.box-shadow {
	box-shadow: 0 5px 50px 0 rgba(0,0,0,.20);
	border-radius: 5px;
}


/****************************************/
/*** animate& Degree ***/
/****************************************/

@keyframes draw {
  0% {
    stroke-dasharray: 	201 540;
    stroke-dashoffset:  -249;
    stroke-width: 		4px;
  }
  100% {
    stroke-dasharray:   500;
    stroke-dashoffset:  0;
    stroke-width: 		2px;
  }
}

@-ms-keyframes draw {
  0% {
    -ms-stroke-dasharray: 	201 540;
    -ms-stroke-dashoffset:  -249;
    -ms-stroke-width: 		4px;
  }
  100% {
    -ms-stroke-dasharray: 	 500;
    -ms-stroke-dashoffset: 	 0;
    -ms-stroke-width: 		 2px;
  }
}

@-moz-keyframes draw {
  0% {
    -moz-stroke-dasharray: 201 540;
    -moz-stroke-dashoffset: -249;
    -moz-stroke-width: 4px;
  }
  100% {
    -moz-stroke-dasharray:  500;
    -moz-stroke-dashoffset: 0;
    -moz-stroke-width: 2px;
  }
}

@-webkit-keyframes draw {
  0% {
    -webkit-stroke-dasharray: 	201 540;
    -webkit-stroke-dashoffset:  -249;
    -webkit-stroke-width: 		4px;
  }
  100% {
    -webkit-stroke-dasharray:  	500;
    -webkit-stroke-dashoffset: 	0;
    -webkit-stroke-width: 		2px;
  }
}
@keyframes fade{
 0% {
	opacity: 0;
	-ms-transform:  	    translate3d(300px, 0, 0);
	transform:  	    	translate3d(300px, 0, 0);}
 100% {
	opacity: 1;
	-ms-transform:  	    translate3d(0, 0, 0);
	transform:  	    	translate3d(0, 0, 0);}
}
@-ms-keyframes fade{
 0% {
	opacity: 0;
	-ms-transform:  	    translate3d(300px, 0, 0);
	transform:  	    	translate3d(300px, 0, 0);}
 100% {
	opacity: 1;
	-ms-transform:  	    translate3d(0, 0, 0);
	transform:  	    	translate3d(0, 0, 0);}
}
@-moz-keyframes fade{
 0% {
	opacity: 0;
	-moz-transform:  	translate3d(300px, 0, 0);
	transform:  		translate3d(300px, 0, 0);}
 100% {
	opacity: 1;
	-moz-transform:  	translate3d(0, 0, 0);
	transform:  	    translate3d(0, 0, 0);}
}
@-webkit-keyframes fade{
 0% {
	opacity: 0;
	-webkit-transform:  	translate3d(300px, 0, 0);
	transform:  			translate3d(300px, 0, 0);}
 100% {
	opacity: 1;
	-webkit-transform:  	translate3d(0, 0, 0);
	transform:  	    	translate3d(0, 0, 0);}
}
@keyframes merge{
 0% {
	opacity: 0;
	-ms-transform:  	    translate3d(0, -300px, 0);
	transform:  	    	translate3d(0, -300px, 0);}
 100% {
	opacity: 1;
	-ms-transform:  	    translate3d(0, 0, 0);
	transform:  	    	translate3d(0, 0, 0);}
	}
@-ms-keyframes merge{
 0% {
	opacity: 0;
	-ms-transform:  	    translate3d(0, -300px, 0);
	transform:  	    	translate3d(0, -300px, 0);}
 100% {
	opacity: 1;
	-ms-transform:  	    translate3d(0, 0, 0);
	transform:  	    	translate3d(0, 0, 0);}
	}
@-moz-keyframes merge{
 0% {
	opacity: 0;
	-moz-transform:  	translate3d(0, -300px, 0);
	transform:  		translate3d(0, -300px, 0);}
 100% {
	opacity: 1;
	-moz-transform:  	translate3d(0, 0, 0);
	transform:  		translate3d(0, 0, 0);}
	}
@-webkit-keyframes merge{
 0% {
	opacity: 0;
	-webkit-transform:  	translate3d(0, -300px, 0);
	transform:  			translate3d(0, -300px, 0);}
 100% {
	opacity: 1;
	-webkit-transform:  	translate3d(0, 0, 0);
	transform:  	    	translate3d(0, 0, 0);}
	}
@keyframes mergeSM{
 0% {
	opacity: 0;
	transform:  			translate3d(0, 80px, 0);}
 100% {
	opacity: 1;
	transform:  			translate3d(0, 0, 0);}
	}
@-ms-keyframes mergeSM{
 0% {
	opacity: 0;
	-ms-transform:  	    translate3d(0, 80px, 0);
	transform:  	    	translate3d(0, 80px, 0);}
 100% {
	opacity: 1;
	-ms-transform:  	    translate3d(0, 0, 0);
	transform:  	    	translate3d(0, 0, 0);}
	}
@-moz-keyframes mergeSM{
 0% {
	opacity: 0;
	-moz-transform:  	translate3d(0, 80px, 0);
	transform:  		translate3d(0, 80px, 0);}
 100% {
	opacity: 1;
	-moz-transform:  	translate3d(0, 0, 0);
	transform:  		translate3d(0, 0, 0);}
	}
@-webkit-keyframes mergeSM{
 0% {
	opacity: 0;
	-webkit-transform:  	translate3d(0, 80px, 0);
	transform:  			translate3d(0, 80px, 0);}
 100% {
	opacity: 1;
	-webkit-transform:  	translate3d(0, 0, 0);
	transform:  			translate3d(0, 0, 0);}
	}
@keyframes mergeUp{
		 0% {
			opacity: 0;
			-ms-transform:  	    translate3d(0, 300px, 0);
			transform:  	    	translate3d(0, 300px, 0);}
		100% {
			opacity: 1;
			-ms-transform:  	    translate3d(0, 0, 0);
			transform:  	    	translate3d(0, 0, 0);}
		}
@-ms-keyframes mergeUp{
		 0% {
			opacity: 0;
			-ms-transform:  	    translate3d(0, 300px, 0);
			transform:  	    	translate3d(0, 300px, 0);}
		100% {
			opacity: 1;
			-ms-transform:  	    translate3d(0, 0, 0);
			transform:  	    	translate3d(0, 0, 0);}
		}
@-moz-keyframes mergeUp{
		 0% {
			opacity: 0;
			-moz-transform:  	translate3d(0, 300px, 0);
			transform:  		translate3d(0, 300px, 0);}
		100% {
			opacity: 1;
			-moz-transform:  	translate3d(0, 0, 0);
			transform:  		translate3d(0, 0, 0);}
		}
@-webkit-keyframes mergeUp{
		 0% {
			opacity: 0;
			-webkit-transform:  	translate3d(0, 300px, 0);
			transform:  			translate3d(0, 300px, 0);}
		100% {
			opacity: 1;
			-webkit-transform:  	translate3d(0, 0, 0);
			transform:  			translate3d(0, 0, 0);}
		}

/********************/
/*responsive setting*/
/********************/

@media screen and (min-width: 767px) {
.navbar-toggle {
    margin-right: 0px;
  }
.container-fluid > .navbar-collapse {
	margin-right: -15px;
	margin-left: -15px;
	}

.navbar-header .svg-wrapper {
	margin: 10px 0px;}
 /* FULL SCREEN MODAL STYLES
 -------------------------------------------------- */
.fullscreen .modal-body a {
     font-size: 20px;
     }
	
.section-content{ 
	padding-left: 0px;
	padding-right: 0px;
	}
.portfolio h1{
	color:      		#1d1d1d;
	font-size:			40px;
	}
.portfolio .svg-wrapper,
.copy-container .svg-wrapper {
  margin:       30px 0;}

}
.searchIcon{
			display: none;
			
		}

.flood-right {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  -webkit-box-shadow: inset 0px 0 0 0 #ffffff;
  -moz-box-shadow: inset 0px 0 0 0 #ffffff;
  -ms-box-shadow: inset 0px 0 0 0 #ffffff;
  -o-box-shadow: inset 0px 0 0 0 #ffffff;
  box-shadow: inset 0px 0 0 0 #ffffff;
  color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.flood-right:hover {
  color: white;
  -webkit-box-shadow: inset 1200px 0 0 0 #ffffff;
  -moz-box-shadow: inset 1200px 0 0 0 #ffffff;
  -ms-box-shadow: inset 1200px 0 0 0 #ffffff;
  -o-box-shadow: inset 1200px 0 0 0 #ffffff;
  box-shadow: inset 1200px 0 0 0 #ffffff;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  transition: opacity 200ms;
  visibility: hidden;
  opacity: 0;
	z-index: 10000;
}

.overlay:target{
  visibility: visible;
  opacity: 1;
}
.popup {
  margin: 75px auto;
  padding: 0px;
  background: #fff;
  border: 0px solid #666;
  width: 70%;
  box-shadow: 0 0 50px rgba(0,0,0,0.5);
  position: relative;
  
 
}
.popup .mauticform_wrapper {
	padding-bottom: 50px;
}

.close {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #282828;
  top:  0px;
  right: 0px;
  opacity: 1;
  transition: all 200ms;
  font-size: 24px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  color: #fff;
	z-index: 100;
}


@media screen and (min-width: 1023px) {
	.searchIcon{
			display: block;
			
			
		}
	
}


@media screen and (max-width: 1023px) {

	.mt-xs-100{
		margin-top: 100px;
	}
}

@keyframes floating {
			0% {
				-webkit-transform: translateY(18px);
				transform: translateY(18px);
			}

			100% {
				-webkit-transform: translateY(-18px);
				transform: translateY(-18px);
			}
		}
@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(18px);
		transform: translateY(18px);
	}

	100% {
		-webkit-transform: translateY(-18px);
		transform: translateY(-18px);
	}
}