@charset "utf-8";

/* CSS Document */



html, body{

	margin:0;

	padding:0;

	background:#28546C;

	-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;	

	height:100%;	

	font-family: Arial, Helvetica, sans-serif;

	text-rendering: optimizeLegibility !important;

	webkit-font-smoothing: antialiased !important;

}



a {

	text-decoration:none;

    outline: 0;

}



#section1-bg{

	width:100%;

}



#section2-bg{

	background:#113B51;

	width:100%;

}



#title{

	margin-left:auto;

	margin-right:auto;

	min-width:1000px;

	max-width:1000px;

	text-align:center;

	color:#FFF;

	font-size:30px;

	position: relative;

}



.title-bg{

	z-index:5;

	box-shadow: 0px 5px 5px -3px #333, 0px -5px 5px -3px #333;

	border-bottom:thin solid #999;

	border-top:thin solid #999;

	background:url(images/7.jpg);

	width:100%;

	height:150px;

	position: relative;

	background-position: 50% 0;

	background-repeat: repeat;

	background-attachment: fixed;

}



#info-container-begin{

	margin-left:auto;

	margin-right:auto;

	background:#6F90A2;

	min-width:1000px;

	max-width:1000px;

	margin-top:95px;

	height:800px;

}



#info-container{

	position:relative;

	padding-bottom:20px;

	padding-top:20px;

	padding-left:10px;

	padding-right:10px;

	margin-left:auto;

	margin-right:auto;

	min-width:1000px;

	max-width:1000px;

	clear: both;

	height:auto;

	overflow:auto;

}



/*  NAVIGATION/MENU SECTION CSS  */

#nav{

	float:right;

	width:650px;

	height:80px;

	padding:0px;

	margin-right:125px;

}



#nav a:link{

	color:#FFF;

	text-decoration: none;

}



#nav a:visited{

	color:#FFF;

	text-decoration: none;

}



#nav a:hover{

	color:#FFF;

	text-decoration: none;

}



#nav a:active{

	color:#FFF;

	text-decoration: none;

}



#nav ul{

    display:table-row;

}



#nav ul li{

    display: table-cell;

    height: 80px;

    list-style-type: none;

    margin: 10px;

    vertical-align: middle;

	padding-right:50px;

	color:#FFF;

	font-size: 28px;

}



#nav ul li a {

    display:table-cell;

    vertical-align: middle;

    height:80px;

	width:100px;

}



#nav ul li.button a {

    height:50px;

}



#menu-container{

	padding:0;

	background:#477187;

	width:100%;

	height:80px;

	position:fixed;	

	top:0px;

	box-shadow: 0px 5px 5px -5px #333;

	z-index:99;

}



#menu{

	margin-top:0px;

	margin-left:auto;

	margin-right:auto;

	height:80px;

	min-width:1000px;

	max-width:1000px;

	background:#477187;

	z-index:99;

}



#menu-logo{

	margin-left:125px;

	height:80px;

	width:75px;

	padding:0px;

}



.menu-hover-underline{

	display: inline-block;

	position: relative;

	padding-bottom: 3px;

}



.menu-hover-underline:after {

	content: '';

	display: block;

	margin: auto;

	height: 3px;

	width: 0px;

	background: transparent;

	transition: width .2s ease, background-color .2s ease;

}



.menu-hover-underline:hover:after {

	width: 100%;

	background: #969DA2;

} 



#logo{

	

	float:right;

	padding-top:10px;	

}



.logo-hover {

    display: inline-block;

    -webkit-transition-duration: 0.3s;

    transition-duration: 0.3s;

    -webkit-transition-property: transform;

    transition-property: transform;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}



.logo-hover:hover, .logo-hover:focus, .logo-hover:active {

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

}



/*  HOME SECTION CSS  */

#fade-main{

	margin-left:30%; 

	font-size:70px; 

	color:#B5C7D5; 

	font-weight:bold;	

}



#fade-sub{

	font-style:italic;

	color:#FFF;	

}



.home_container{

	height:100vh; 

	margin-top:75px; 

	overflow:hidden; 

	padding-top:100px; 

	max-width:100%; 

	min-width:1000px;

	background-image:url(images/gallery2.jpg); 

	background-repeat:no-repeat; 

	background-size:cover;	

}

.home_child {

	 margin: 0 auto;

     width: 100px;

     height: 50px;

	max-width: 237px; 

	min-width: 237px;

}



/*  IMAGE SLIDER CSS (optional)  */

#wraper{

	width:100%;

	margin:0 auto;

}



#slider{

	width:100%;

	height:750px;

	overflow:hidden;

	margin-top:75px;

	margin-left:auto;

	margin-right:auto;	

}



#slider>img{

	width:100%;

	height:750px;

	float:left;

	display:none;	

}



#slider>p{

	width:100%;

	height:750px;

	float:left;

	display:none;	

}



#next-left{

	background-image:url(images/nav-left.png);

	background-position:center;

	background-repeat: no-repeat;

	background-size:contain;

	text-align:center;

	position:absolute;

	z-index:88;

	margin-top:-400px;

	padding:5px 10px;

	margin-bottom:30px;

	text-decoration:none;	

	color:#FFF;

	width:35px;

	height:35px;

}



#next-right{

	background-image:url(images/nav-right.png);

	background-position:center;

	background-repeat: no-repeat;

	background-size:contain;

	text-align:center;

	right:0;

	margin-top:-400px;

	position:absolute;

	z-index:88;

	padding:5px 10px;

	margin-bottom:30px;

	text-decoration:none;	

	color:#FFF;

	width:35px;

	height:35px;

}

	

.next-anim{

	-webkit-transition-duration: 0.3s;

    transition-duration: 0.3s;

    -webkit-transition-property: transform;

    transition-property: transform;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}



.next-anim:focus, .next-anim:active {

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

}



/*  ABOUT SECTION CSS  */

#info-container-about{

	position:relative;

	padding-bottom:10px;

	padding-top:40px;

	padding-left:10px;

	padding-right:10px;

	margin-left:auto;

	margin-right:auto;

	min-width:1000px;

	max-width:1000px;

	clear: both;

	height:auto;

	overflow:auto;

}



#about-sec{

	margin-bottom:30px;

	width:100%;

	height:325px;

	overflow:hidden;

}



#about-name{

	text-align:center;

	color:#FFF;

	font-size:30px;	

}



#about-image-1{

	visibility:hidden;

	display: inline-block;

	background:url(images/profile.png) no-repeat; /*  image by: Thomas Leuthard */

	background-size: contain;

	background-position:center;

	height: 300px;

	width:300px;

	border-radius:300px;

	margin-top:5px;

	margin-left:5px;

	box-shadow: 0 0 8px rgba(0, 0, 0, .8);

	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);

	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);

	clear: both;

}



#about-dsc-1{

	margin-top:20px;

	display: inline-block;

	float: right;

	width: 675px;

	color:#CCC;

	font-size: 25px;

	text-align: center;

	height: 300px;

	clear: both;

}



#about-dsc-1 > article{

	margin-top:20px;

	display: inline-block;

	float: right;

	width: 675px;

	color:#CCC;

	font-size: 25px;

	text-align: center;

	height: 300px;

	clear: both;

	margin-left:auto;

	margin-right:auto;

	margin-top:10px;

	font-size:20px;

}





#about-image-2{

	visibility:hidden;

	float: right;

	display: inline-block;

	background:url(images/person2.jpg) no-repeat;  /*  image by: Thomas Leuthard */

	background-size: contain;

	height: 300px;

	width:300px;

	border-radius:300px;

	box-shadow: 0 0 8px rgba(0, 0, 0, .8);

	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);

	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);

	clear: both;

}



#about-dsc-2{

	margin-top:20px;

	display: inline-block;

	width: 675px;

	bottom: 50%;

	color:#CCC;

	font-size: 25px;

	text-align: center;

	height: 300px;

	clear: both;

}



#about-dsc-2 > article{

	margin-top:20px;

	display: inline-block;

	width: 675px;

	bottom: 50%;

	color:#CCC;

	font-size: 25px;

	text-align: center;

	height: 300px;

	clear: both;

	margin-left:auto;

	margin-right:auto;

	margin-top:10px;

	font-size:20px;

}



#about-image-3{

	visibility:hidden;

	display: inline-block;

	background:url(images/person3.jpg) no-repeat center;  /* image by: Thomas Leuthard */

	background-size: contain;

	height: 300px;

	width:300px;

	border-radius:300px;

	box-shadow: 0 0 8px rgba(0, 0, 0, .8);

	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);

	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);

	clear: both;

}



#about-dsc-3{

	margin-top:20px;

	display: inline-block;

	float: right;

	width: 675px;

	color:#CCC;

	font-size: 25px;

	text-align: center;

	height: 300px;

	clear: both;

}



#about-dsc-3 > article{

	margin-top:20px;

	display: inline-block;

	float: right;

	width: 675px;

	color:#CCC;

	font-size: 25px;

	text-align: center;

	height: 300px;

	clear: both;

	margin-left:auto;

	margin-right:auto;

	margin-top:10px;

	font-size:20px;

}



#smedia{

	margin-top:-20px;

	margin-right:auto;

	margin-left:auto;

	vertical-align:middle;	

}



/*  SERVICES SECTION CSS  */

#service3{

	visibility:hidden;

	padding:18.5px;

	min-width:29.33%;

	max-width:29.33%;

	clear: both;

	display:inline-block;

}



#service3-image{

	background:url(images/implementation.png)no-repeat center;

	background-size: contain;

	width:100%;

	height:250px;

	clear: both;

	display:inline-block;

}



#service3-name{

	padding-top:20px;

	margin:0 auto;

	color:#FFF;

	font-size:30px;

	text-align:center;	

}



#service3-dsc{

	margin: 10px auto;

	padding:10px;

	text-align:center;

	height:100%;

	color:#CCC;

	font-size:18px;

	clear: both;

	display:inline-block;

}



#service2{

	visibility:hidden;

	padding:18.5px;

	min-width:29.33%;

	max-width:29.33%;

	clear: both;

	display:inline-block;

}



#service2-image{

	background:url(images/design.png)no-repeat center;

	background-size: contain;

	width:100%;

	height:250px;

	clear: both;

	display:inline-block;

}



#service2-name{

	padding-top:20px;

	margin:0 auto;

	color:#FFF;

	font-size:30px;

	text-align:center;	

}



#service2-dsc{

	margin: 10px auto;

	padding:10px;

	text-align:center;

	height:100%;

	color:#CCC;

	font-size:18px;

	clear: both;

	display:inline-block;

}



#service1{

	visibility:hidden;

	padding:18.5px;

	min-width:29.33%;

	max-width:29.33%;

	clear: both;

	display:inline-block;

}



#service1-image{

	background:url(images/inspiration.png)no-repeat center;

	background-size: contain;

	width:100%;

	height:250px;

	clear: both;

	display:inline-block;

}



#service1-name{

	padding-top:20px;

	margin:0 auto;

	color:#FFF;

	font-size:30px;

	text-align:center;	

}



#service1-dsc{

	margin: 10px auto;

	padding:10px;

	text-align:center;

	height:100%;

	color:#CCC;

	font-size:18px;

	clear: both;

	display:inline-block;

}



/*  SKILLS SECTION CSS  */

#info-container-skills{

	position:relative;

	padding-bottom:20px;

	padding-left:10px;

	padding-right:10px;

	margin-left:auto;

	margin-right:auto;

	min-width:1000px;

	max-width:1000px;

	clear: both;

	height:auto;

	overflow:auto;

	overflow-y:hidden;

}



#skills-title{

	margin-left:auto;

	margin-right:auto;

	width:300px;

	margin-top: 0px;

	color:#FFF;

	font-size:30px;

	text-align:center;

}



#skills-img-dw{

	margin-top: 30px;

	background-image:url(images/dw.png); /*  image by  RKay-x (Rosanne W) */

	background-position:center;

	background-repeat:no-repeat;

	background-size:contain;

	margin-left:auto;

	margin-right:auto;

	width:75px;

	height:75px;

}



#skills-img-ps{

	margin-top: 30px;

	background-image:url(images/ps.png); /*  image by  RKay-x (Rosanne W) */

	background-position:center;

	background-repeat:no-repeat;

	background-size:contain;

	margin-left:auto;

	margin-right:auto;

	width:75px;

	height:75px;

}



#skills-img-jm{

	margin-top: 30px;

	background-image:url(images/jm.png);

	background-position:center;

	background-repeat:no-repeat;

	background-size:contain;

	margin-left:auto;

	margin-right:auto;

	width:75px;

	height:75px;

}



#skills-img-go{

	margin-top: 30px;

	background-image:url(images/go.png);

	background-position:center;

	background-repeat:no-repeat;

	background-size:contain;

	margin-left:auto;

	margin-right:auto;

	width:75px;

	height:75px;

}



#skills-img-js{

	margin-top:30px;

	background-image:url(images/js.png); /*  image by  RKay-x (Rosanne W) */

	background-position:center;

	background-repeat:no-repeat;

	background-size:contain;

	margin-left:auto;

	margin-right:auto;

	width:75px;

	height:75px;

}



#skills-img-css{

	margin-top: 30px;

	background-image:url(images/css.png); /*  image by  RKay-x (Rosanne W) */

	background-position:center;

	background-repeat:no-repeat;

	background-size:contain;

	margin-left:auto;

	margin-right:auto;

	width:75px;

	height:75px;

}



#skills-img-hl{

	margin-top: 30px;

	background-image:url(images/hl.png); /*  image by  RKay-x (Rosanne W) */

	background-position:center;

	background-repeat:no-repeat;

	background-size:contain;

	margin-left:auto;

	margin-right:auto;

	width:75px;

	height:75px;

}



#skills-img-rwd{

	margin-top: 30px;

	background-image:url(images/rwd.png); /*  image by  RKay-x (Rosanne W) */

	background-position:center;

	background-repeat:no-repeat;

	background-size:contain;

	margin-left:auto;

	margin-right:auto;

	width:75px;

	height:75px;

}



#bar-left{
	position:relative;

	padding-left:10px;

	padding-right:10px;

	padding-bottom:10px;

	margin-top:0;

	width:500px;	

}



#bar-right{
	position:relative

	padding-left:10px;

	padding-right:10px;

	padding-bottom:10px;

	width:500px;

	float:right;	

}



/* SKILL BARS */

.bar-main-container {

	padding-right:15px;

    margin: 10px auto;

    width: 300px;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    border-radius: 4px;

    font-family: sans-serif;

    font-weight: normal;

    font-size: 0.8em;

    color: #FFF;

	font-weight:bold;

    height:34px;

}



.bar-percentage {

	text-align:center;

    float: left;

    background: rgba(0,0,0,0.13);

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    border-radius: 4px;

    padding: 9px 0px;

    width: 18%;

    height: 16px;

}



.bar-container {

    float: right;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;

    height: 10px;

    background: rgba(0,0,0,0.13);

    width: 78%;

    margin: 12px 0px;

    overflow: hidden;

}



.bar {

    float: left;

    background: #CCC;

    height: 100%;

    -webkit-border-radius: 10px 0px 0px 10px;

    -moz-border-radius: 10px 0px 0px 10px;

    border-radius: 10px 0px 0px 10px;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

    -moz-opacity: 1;

    -khtml-opacity: 1;

    opacity: 1;

}



/*  SKILL BAR COLORS  */

.blue1{

	background-image:url(images/blue1.jpg);

	background-repeat:repeat;

}



.blue2{

	background-image:url(images/blue2.jpg);

	background-repeat:repeat;

}



.blue3{

	background-image:url(images/blue3.jpg);

	background-repeat:repeat;

}



/*  PORFOLIO SECTION CSS  */

#info-container-portfolio{

	position:relative;

	margin-left:auto;

	margin-right:auto;

	min-width:1000px;

	max-width:100%;

	height:100%;

	clear: both;

	height:auto;

	overflow:auto;

	overflow-y:hidden;

	z-index:2;

}



#portfolio-section1{

	visibility:hidden;

}



#portfolio-section2{

	visibility:hidden;

}



#port-img{

	width:100%;

	min-width:250px;

	height:25%;

	min-height:62.5px;

	border: 0;

}



#port-desc{

	margin-left:auto;

	margin-right:auto;

	margin-top:25%;

	padding-left:30px;

	padding-right:30px;	

}



.port-img {

	display:inline-block;

    position: relative;

    float:right; 

	min-width:250px;

	width:25%;

	min-height:62.5px;

	border: 0;

}



.port-button{

	border-radius:5px;

	color:#113B51;

	font-weight:bolder;

	width:100px; 

	height:30px; 

	background:#BCBDBD; 

	margin-left:auto;  

	margin-right:auto;

}



.port-img > div {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    color: #fff;

	text-align:center;

	background:rgba(0,0,0,0.7);

    opacity: 0;

    transition: opacity linear 0.5s;

    -webkit-transition: opacity linear 0.5s;

}



.port-img > div:hover {

    opacity: 1;

}



/*  CONTACT SECTION CSS  */

#info-container-contact{

	position:relative;

	padding-bottom:20px;

	padding-top:20px;

	padding-left:10px;

	padding-right:10px;

	margin-left:auto;

	margin-right:auto;

	min-width:1000px;

	max-width:1000px;

	clear: both;

	height:auto;

	overflow:visible;

}



.contact-name{

	background:#476D75;

	padding-left:10px; 

	color:#FFF; 

	height:35px; 

	width:95%; 

	font-size:16px; 

	border:none; 

	border-radius:5px;

}



#contact-form{

	margin-top:20px;

	width:60%;

}



.contact-email{

	background:#476D75;

	color:#FFF;

	padding-left:10px; 

	height:35px; 

	width:95%; 

	font-size:16px; 

	border:none; 

	border-radius:5px;	

}



.contact-comment{

	background:#476D75;

	color:#FFF;

	padding-left:10px; 

	border:none; 

	border-radius:5px; 

	font-size:16px; 

	resize:vertical; 

	width:94.7%;	

}



.contact-submit{

	line-height:1.5;

	background:#B0D4B0;

	width:96.7%;

	height:35px; 

	border:none; 

	border-radius:5px; 

	cursor:pointer; 

	font-size:24px; 

	outline:none; 

	color:#FFF;

	-webkit-transition-duration: 0.3s;

    transition-duration: 0.3s;

    -webkit-transition-property: transform;

    transition-property: transform;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}



.contact-submit:active {

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

}



#contact-info{

	padding-left:20px;

	padding-right:20px;

	margin-top:20px;

	height:300px;

	width:36%; 

	float:right; 

	font-size:18px;

}



.map-frame {

	box-shadow: 0px -5px 5px -3px #333;

	border-top:thin solid #999;

	opacity: 0.8;

    filter: alpha(opacity=40);

    background-color: #000;

	margin-top:10px;

    width: 100%;

    height: 500px;

    position: relative;

}



.errors{

	position:absolute;

	z-index:5;

	padding:5px;

	color:#F00;

	font-size:18px;

	font-weight:bolder;

}



/*  FOOTER SECTION CSS  */

#info-footer-conatiner{

	position:relative;

	padding-bottom:20px;

	padding-top:20px;

	padding-left:10px;

	padding-right:10px;

	margin-left:auto;

	margin-right:auto;

	min-width:1000px;

	max-width:1000px;

	clear: both;

	height:25px;

	overflow:hidden;

	font-size:14px;	

	color:#CCC;

}



#info-footer-conatiner > a{

	float:right;

	padding-left:10px;

	margin:0 auto;

}



#info-footer-conatiner > p{

	position:absolute;

	top:12px;

}



#footer-bg{

	background:#18314F;

	width:100%;

} 





/*  ANIMATIONS  */

.animated {

	-webkit-animation-duration: 1.5s;

	animation-duration: 1.5s;

	-webkit-animation-fill-mode: both;

	animation-fill-mode: both;

}



@-webkit-keyframes fadeInDown {

  	0% {

    	opacity: 0;

    	-webkit-transform: translate3d(0, -100%, 0);

    	transform: translate3d(0, -100%, 0);

  	}

  	100% {

    	opacity: 1;

    	-webkit-transform: none;

    	transform: none;

  	}

}



@keyframes fadeInDown {

  	0% {

    	opacity: 0;

    	-webkit-transform: translate3d(0, -100%, 0);

    	-ms-transform: translate3d(0, -100%, 0);

    	transform: translate3d(0, -100%, 0);

  	}

  	100% {

    	opacity: 1;

    	-webkit-transform: none;

    	-ms-transform: none;

    	transform: none;

	}

}



.fadeInDown {

	-webkit-animation-name: fadeInDown;

	animation-name: fadeInDown;

	-webkit-animation-delay: 6s;

    animation-delay: 6s;

}



.fadeInDownOne {

	-webkit-animation-name: fadeInDown;

	animation-name: fadeInDown;

	-webkit-animation-delay: 1s;

    animation-delay: 1s;

}



@-webkit-keyframes fadeInLeft {

  	0% {

    	opacity: 0;

    	-webkit-transform: translate3d(-100%, 0, 0);

    	transform: translate3d(-100%, 0, 0);

  	}

  	100% {

    	opacity: 1;

    	-webkit-transform: none;

    	transform: none;

  	}

}



@keyframes fadeInLeft {

  	0% {

    	opacity: 0;

    	-webkit-transform: translate3d(-100%, 0, 0);

    	-ms-transform: translate3d(-100%, 0, 0);

    	transform: translate3d(-100%, 0, 0);

  	}

  	100% {

    	opacity: 1;

    	-webkit-transform: none;

    	-ms-transform: none;

    	transform: none;

	}

}



.fadeInLeft {

	-webkit-animation-name: fadeInLeft;

	animation-name: fadeInLeft;

	-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */

    animation-delay: 1s;

}



.fadeInLeftTwo {

	-webkit-animation-name: fadeInLeft;

	animation-name: fadeInLeft;

	-webkit-animation-delay: 3s; /* Chrome, Safari, Opera */

    animation-delay: 3s;

}



.fadeInLeftThree {

	-webkit-animation-name: fadeInLeft;

	animation-name: fadeInLeft;

	-webkit-animation-delay: 5s; /* Chrome, Safari, Opera */

    animation-delay: 5s;

}



@-webkit-keyframes fadeInRight {

	0% {

    	opacity: 0;

    	-webkit-transform: translate3d(100%, 0, 0);

    	transform: translate3d(100%, 0, 0);

  	}

  	100% {

    	opacity: 1;

    	-webkit-transform: none;

    	transform: none;

  	}

}



@keyframes fadeInRight {

	0% {

    	opacity: 0;

    	-webkit-transform: translate3d(100%, 0, 0);

    	-ms-transform: translate3d(100%, 0, 0);

    	transform: translate3d(100%, 0, 0);

  	}

	100% {

    	opacity: 1;

    	-webkit-transform: none;

    	-ms-transform: none;

    	transform: none;

  	}

}



.fadeInRight {

	-webkit-animation-name: fadeInRight;

	animation-name: fadeInRight;

    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */

    animation-delay: 2s;

}



.fadeInRightTwo {

	-webkit-animation-name: fadeInRight;

	animation-name: fadeInRight;

    -webkit-animation-delay: 4s; /* Chrome, Safari, Opera */

    animation-delay: 4s;

}



@-webkit-keyframes pop {

	50% {

    	-webkit-transform: scale(1.2);

    	transform: scale(1.2);

	}

	100% {

    	-webkit-transform: scale(1);

    	transform: scale(1);

	}

}



@keyframes pop {

  	50% {

    	-webkit-transform: scale(1.2);

    	transform: scale(1.2);

	}

	100% {

    	-webkit-transform: scale(1);

    	transform: scale(1);

	}

}



.pop {

	display: inline-block;

	-webkit-transform: translateZ(0);

	transform: translateZ(0);

	box-shadow: 0 0 1px rgba(0, 0, 0, 0);

	border:none;

}



.pop:hover, .pop:focus, .pop:active {

	-webkit-animation-name: pop;

	animation-name: pop;

	-webkit-animation-duration: 0.3s;

	animation-duration: 0.3s;

	-webkit-animation-timing-function: linear;

	animation-timing-function: linear;

	-webkit-animation-iteration-count: 1;

	animation-iteration-count: 1;

}





.expandUp{

	animation-name: expandUp;

	-webkit-animation-name: expandUp;	

	animation-duration: 0.7s;	

	-webkit-animation-duration: 0.7s;

	animation-timing-function: ease;	

	-webkit-animation-timing-function: ease;		

	visibility: visible !important;	

}



@keyframes expandUp {

	0% {transform: translateY(100%) scale(0.6) scaleY(0.5);}

	60%{transform: translateY(-7%) scaleY(0.9);}

	75%{transform: translateY(3%);}	

	100% {transform: translateY(0%) scale(1) scaleY(1);}	

}



@-webkit-keyframes expandUp {

	0% {-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);}

	60%{-webkit-transform: translateY(-7%) scaleY(0.9);}

	75%{-webkit-transform: translateY(3%);}	

	100% {-webkit-transform: translateY(0%) scale(1) scaleY(1);}	

}



.fadeIn{

	animation-name: fadeIn;

	-webkit-animation-name: fadeIn;	

	animation-duration: 1s;	

	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	

	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	

}



@keyframes fadeIn {

	0% {

		transform: scale(0);

		opacity: 0.0;		

	}

	60% {

		transform: scale(1);	

	}

	80% {

		transform: scale(0.9);

		opacity: 1;	

	}	

	100% {

		transform: scale(1);

		opacity: 1;	

	}		

}



@-webkit-keyframes fadeIn {

	0% {

		-webkit-transform: scale(0);

		opacity: 0.0;		

	}

	60% {

		-webkit-transform: scale(1);

	}

	80% {

		-webkit-transform: scale(0.9);

		opacity: 1;	

	}	

	100% {

		-webkit-transform: scale(1);

		opacity: 1;	

	}		

}



.slideLeft{

	animation-name: slideLeft;

	-webkit-animation-name: slideLeft;	

	animation-duration: 1s;	

	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	

	-webkit-animation-timing-function: ease-in-out;	

	visibility: visible !important;	

}



.pullUp{

	visibility: visible !important;	

	animation-name: pullUp;

	-webkit-animation-name: pullUp;	

	animation-duration: 1.1s;	

	-webkit-animation-duration: 1.1s;

	animation-timing-function: ease-out;	

	-webkit-animation-timing-function: ease-out;	

	transform-origin: 50% 100%;

	-ms-transform-origin: 50% 100%;

	-webkit-transform-origin: 50% 100%; 		

}



@keyframes pullUp {

	0% {transform: scaleY(0.1);}

	40% {transform: scaleY(1.02);}

	60% {transform: scaleY(0.98);}

	80% {transform: scaleY(1.01);}

	100% {transform: scaleY(0.98);}				

	80% {transform: scaleY(1.01);}

	100% {transform: scaleY(1);}							

}



@-webkit-keyframes pullUp {

	0% {-webkit-transform: scaleY(0.1);}

	40% {-webkit-transform: scaleY(1.02);}

	60% {-webkit-transform: scaleY(0.98);}

	80% {-webkit-transform: scaleY(1.01);}

	100% {-webkit-transform: scaleY(0.98);}				

	80% {-webkit-transform: scaleY(1.01);}

	100% {-webkit-transform: scaleY(1);}		

}



.pullDown{

	visibility: visible !important;	

	animation-name: pullDown;

	-webkit-animation-name: pullDown;	

	animation-duration: 1.1s;	

	-webkit-animation-duration: 1.1s;

	animation-timing-function: ease-out;	

	-webkit-animation-timing-function: ease-out;	

	transform-origin: 50% 0%;

	-ms-transform-origin: 50% 0%;

	-webkit-transform-origin: 50% 0%; 		

}



@keyframes pullDown {

	0% {transform: scaleY(0.1);}

	40% {transform: scaleY(1.02);}

	60% {transform: scaleY(0.98);}

	80% {transform: scaleY(1.01);}

	100% {transform: scaleY(0.98);}				

	80% {transform: scaleY(1.01);}

	100% {transform: scaleY(1);}							

}



@-webkit-keyframes pullDown {

	0% {-webkit-transform: scaleY(0.1);}

	40% {-webkit-transform: scaleY(1.02);}

	60% {-webkit-transform: scaleY(0.98);}

	80% {-webkit-transform: scaleY(1.01);}

	100% {-webkit-transform: scaleY(0.98)}				

	80% {-webkit-transform: scaleY(1.01);}

	100% {-webkit-transform: scaleY(1);}		

}



.slideDown{

	animation-name: slideDown;

	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	

	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	

	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						

}



@keyframes slideDown {

	0% {transform: translateY(-100%);}

	50%{transform: translateY(8%);}

	65%{transform: translateY(-4%);}

	80%{transform: translateY(4%);}

	95%{transform: translateY(-2%);}			

	100% {transform: translateY(0%);}		

}



@-webkit-keyframes slideDown {

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

	50%{-webkit-transform: translateY(8%);}

	65%{-webkit-transform: translateY(-4%);}

	80%{-webkit-transform: translateY(4%);}

	95%{-webkit-transform: translateY(-2%);}			

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

}



.stretchRight{

	animation-name: stretchRight;

	-webkit-animation-name: stretchRight;	

	animation-duration: 1.5s;	

	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease-out;	

	-webkit-animation-timing-function: ease-out;	

	transform-origin: 0% 0%;

	-ms-transform-origin: 0% 0%;

	-webkit-transform-origin: 0% 0%; 	

	visibility: visible !important;	

}



@keyframes stretchRight {

	0% {transform: scaleX(0.3);}

	40% {transform: scaleX(1.02);}

	60% {transform: scaleX(0.98);}

	80% {transform: scaleX(1.01);}

	100% {transform: scaleX(0.98);}				

	80% {transform: scaleX(1.01);}

	100% {transform: scaleX(1);}							

}



@-webkit-keyframes stretchRight {

	0% {-webkit-transform: scaleX(0.3);}

	40% {-webkit-transform: scaleX(1.02);}

	60% {-webkit-transform: scaleX(0.98);}

	80% {-webkit-transform: scaleX(1.01);}

	100% {-webkit-transform: scaleX(0.98);}				

	80% {-webkit-transform: scaleX(1.01);}

	100% {-webkit-transform: scaleX(1);}		

}