/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300|Roboto|Oswald:300);
 @import url(http://fonts.googleapis.com/css?family=Raleway+Dots);
@import url(http://fonts.googleapis.com/css?family=Advent+Pro:400,200,700);
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://weloveiconfonts.com/api/?family=brandico);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

/* brandico */
[class*="brandico-"]:before {
  font-family: 'brandico', sans-serif;
}
/*Css resets

*
examples resume
https://www.freshdesignweb.com/creative-resume-templates/

http://tympanus.net/codrops/2011/04/22/animated-skills-diagram/ - animated skills bar

http://codepen.io/tamak/pen/hzEer

/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*Reset ends*/
body {
	font-family: "Open Sans", sans-serif; /* "Roboto Slab"*/
    font-size: 1.9em;
   /* text-align: justify;*/
	/*font-weight: 400;*/
	color: rgba(51, 51, 51, 0.86);
	font-size: 1.7em;
	position: relative;
	transition: all ease-in-out .3s;
	/*padding-top: 50px;*/
}


section #services {
  text-align: center;
  transform: translatez(0);
  text-align: center;
  transform: translatez(0);
  padding-top: 16px;
  padding-left: 0px;
}
section #services h2 {
  margin: 80px 0px 40px;
  color: #fff;
  font-size: 2.4em;
  font-family: 'Raleway Dots', sans-serif;
  text-transform: uppercase;
  text-align: center;
}
section #services li {
	width: 22px;
	height: 22px;
	display: inline-block;
	/* margin: 20px; */
	margin: 0px 14px;
	list-style: none;
	font-size: .8em;
}
section #services li div {
  width: 40px;
  height: 40px;
  color: rgba(102, 204, 255, 0.89);
  border-radius: 4px;
  font-size: 1.9em;
  text-align: center;
  line-height: 40px;
 	background-color: rgba(255, 254, 252, 0.8);
  transition: all 0.5s ease;
}
section #services li div:hover {
  transform: rotate(360deg);
  border-radius: 100px;
  box-shadow: 0 0 10px rgba(191, 211, 224, 0.57);
}
ul#services li a{
  text-decoration: none;
}


/* Page headings */
.page h2{
	font-family: "Open Sans";
	font-weight: 300;
	font-size: 3em;
	text-align: center;
	padding: 30px 0px;
    color: #0085b3;
	color: #a47762;
	text-shadow: 0 3px 4px rgba(0, 0, 0, 0.13);
    text-transform: uppercase;
}
/* navigation */
.navbar{
	border-radius: 0px;
}

nav.navbar.navbar-default.navbar-fixed-top{
	background: transparent;
	border: none;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.77);
	/*height: 72px;*/
}

nav.navbar.navbar-default.navbar-fixed-top .navbar-brand{
	width: 70px;	
}

nav.navbar.navbar-default.navbar-fixed-top.inBody .navbar-brand{
	width: 46px;	
/*	transition: all ease-in-out .3s !important;*/
}

header .navbar{
	transition: all .6s ease;
} 

.inBody{
	text-shadow: none !important;
	background-color: rgba(164, 119, 98, .98) !important;
	border-bottom: 2px solid #CEA28D !important;
	box-shadow: 0 2px 5px rgba(0,0,0, .4);
	/*height: 52px !important;*/
}

.navbar-default .navbar-nav>li>a{
	color: #EFF3F2;
	font-size: 1em;
  font-family: "Advent Pro";
  font-weight: bold;
  padding-right: 32px;
  text-transform: uppercase;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover{
	background-color: transparent;
}

.navbar-default .navbar-nav>.active>a{
	text-decoration: underline;
	color: #66ccff;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #1ab2ff;
}

.navbar-default .navbar-nav>.active>a:hover{
    color: #CABBBB;
}


.navbar-default .navbar-brand{
    padding: 0px;
    padding-top: 2px;
    width: 46px;
    transition: all ease-in-out .4s;
}

.navbar-brand > img{
width: 100%;

}

.navbar-default .navbar-brand:hover{
	color: #62C0EF;
}
/* full background */
#bg {	
	display: block;
	width: 100%;
	height: auto;
}

/* fullImage */

.fullImage{
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	background-size: cover;
}

#imageOverlay{
	height: inherit;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	/*background-color: rgba(23, 22, 22, 0.23);*/
    background-color: rgba(2, 77, 97, 0.5);
}

#introBox{
	width: 43%;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
	color: white;
	border-radius: 4px;
   /* background-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 16px rgba(26, 20, 20, 0.15);*/
	text-align: center;
	/*margin: 18% auto 0px;*/
	position: absolute;
	top: 30px;
	left: 30%;
}

#introBox h2{
	/*text-transform: uppercase;*/
	font-size: 2em;
	color: #EFF3F2;
	font-family: "oswald";
	/*font-weight: bold;*/
	display: inline-block;
	border-bottom: 2px solid;
	padding-bottom: 4px;
	border-radius: 4px;	
}

#introBox h1{
	font-family: "roboto";
    font-size: 1.5em;
    color: #CE8383;
    text-transform: uppercase;
}
.page i{
padding-right: 10px;
/* color: #00a2cc; */
/* font-size: .8em; */
}


.page{
	padding-bottom: 26px;
    margin-bottom: 20px;
}
/* aboutMe */
#about{
	background-image: linear-gradient(to bottom, #e8d7c9, #DABDA7);
	/*padding-bottom: 26px; */
	border-top: 8px solid #A47762;
}

#about h2{
    padding-bottom: 18px;
}
#works .container{
    padding-bottom: 30px;
}
.workHolder{
	background-size: cover !important;
	width: 32%;
    margin-right: 1.3%;
    margin-bottom: 2%;
    padding: 0px;
    border: 1px solid #0085b3;
    height: 180px;
    opacity: .2;
}
#works .info h3{
	margin-top: 0px;
	border-bottom: 1px solid #EFF3F2;
	display: block;
	padding-bottom: 4px;
	color: white;
	font-weight: bold;
}

#works p{
	color:#EFF3F2;
	
}

#works .workHolder .info{
    height: 100%;
    opacity: 0;
    padding: 10px;
    text-align: center;	
	background-color: rgba(0,0,0, .8);
	color: white;	
	box-shadow: inset 0 0 2px rgba(255,255,255,.5);
	transition: all ease-in-out .5s;

}

#Resume{
	overflow-x: hidden;
}

#displayMe{
	height: auto;
	min-height: 400px;
	/*width: 800px;*/
	padding: 0% 2%;
	background-color: rgba(218, 189, 167, 0.99);
	box-shadow: 0 0 6px rgba(4, 4, 4, 0.48);
	display: none;
	/*opacity: 0;*/
	border: 2px solid grey;
	border-radius: 4px;
	transition: opacity ease-in-out .4s;
	z-index: 99999;
	overflow: auto;
}

div#displayMe h3{
	margin-top: 3%;
	border-bottom: 1px solid grey;
	text-align: center;
	padding-bottom: 6px;
	font-size: 2em;
}

#displayMe .showHideMe{
	display: none;
}

#displayMe img{
	width: 100%;
}

#hideMe{
	position: absolute;
	right: 26px;
	top: 4px;
	cursor: pointer;
	transition: all ease-in-out .3s;
	margin-left: 2px; 
	color: #B74E4E;
}

#hideMe:hover{
	color: rgba(222, 14, 14, 0.83);
	cursor: pointer;
	font-size: 1.1em; 
	margin-left: 2px; 
	/*background-color: red;*/
}

#works .workHolder:hover > .info{
    opacity: 1;
}

#bdc{
	background: url(../Images/butler.png) no-repeat;
}

#php{
	background: url(../Images/php.PNG) no-repeat;
}
#database{
	background: url(../Images/movie.png) no-repeat;
}

#zika{
	background: url(../Images/zika.png) no-repeat;
}

#sl{
	background: url(../Images/sl.png) no-repeat;
}

#asp{
	background: url(../Images/asp.png) no-repeat;
}

#vp{
	background: url(../Images/jb.png) no-repeat;
}


.disSkills{
	color: rgb(0, 0, 0);
	/*font-family: "Roboto Slab", sans-serif;*/
}

    /*========== Bootstrap 3, Non-Mobile First Method  ==========*/

    /* multiple small Screens */
   @media only screen and (max-width : 992px), and (max-width : 768px), and (max-width : 480px), and (max-width : 320px) {
   /*	body{
   		background-color: red;
   	}*/
   }

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
    	.workHolder{
		background-size: cover !important;
		width: 66%;
		margin-right: 1.3%;
	}

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
    	.workHolder{
		background-size: cover !important;
		width: 66%;
		margin-right: 1.3%;
	}

	#introBox p {
		font-size: 1.6em;
	}

	#introBox h2 {
		font-size: 1.8em;
	}
/*
	body{
		background-color: red;
	}*/

		#moblPic{
		width: 26%;
	    float: left;
		}

		#contactImg {
			width: 54px !important;
		}

		#Resume .header #moblInfo{
			float: right;
		    width: 66%;
		    font-size: .6em;
		}

		#Resume .header #moblInfo h3{
			font-size: 2em;
			display: block;
			text-align: center;
			/*color: red !important;*/
		}

		#Resume .header #moblInfo h4{
			font-size: 1.3em;
			text-align: center;
		}

		  

		.contactInfo #resumeButtn{
			padding: 3px 7px;
			font-size: 14px;
			display: none;
		}

		div#email{
			float: right;
			margin-right: 2%;
		}

		div#phone{
			float: right;
		    margin-right: 10%;
		}

		#Resume .header #moblInfo .contactInfo{
			margin-top: 8px;
		} 
		/*Resume header format*/

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px){
    	.workHolder{
		background-size: cover !important;
		width: 66%;
		margin-right: 1.3%;
		height: inherit;

	}

	body{
		font-size: 1.5em;		
	}

	.page h3 {
		font-size: 2em;
	}

	#introBox p {
		font-size: 1.3em;
	}

	#introBox h3 {
		font-size: 1.6em;
	}

	#works .info h3 {
	font-weight: normal;
    font-size: 1.4em;
	}

	#moblPic{
	width: 26%;
    float: left;
	}

	#contactImg {
		width: 50px !important;
	}

	#Resume .header #moblInfo{
		float: right;
	    width: 66%;
	    font-size: .6em;
	}

	#Resume .header #moblInfo h3{
		font-size: 2em;
		display: block;
		text-align: center;
		/*color: red !important;*/
	}

	#Resume .header #moblInfo h4{
		font-size: 1.3em;
		text-align: center;
	}

	.contactInfo #resumeButtn{
		padding: 3px 7px;
		font-size: 14px;
		display: none;
	}

	div#email{
		float: right;
		margin-right: 2%;
	}

	div#phone{
		/*float: right;
	    margin-right: 10%;*/
		display: none;
	}

	#Resume .header #moblInfo .contactInfo{
		margin-top: 8px;
	}

	#works .workHolder .info {
	    opacity: 1;
	}

	div#displayMe h3 {
	    font-size: 1.3em;
	}

    } /*Small devices end*/

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
    	.workHolder{
		background-size: cover !important;
		width: 66%;
		margin-right-right: 1.3%;
		height: inherit;
	}

	#introBox p {
		font-size: 1.3em;
	}

	#introBox h3 {
		font-size: 1.6em;
	}

        
    }


/* Resume styles */
#Resume .container{
   /* background-color: #F5F9FA;
    border-radius: 4px;
    border-bottom: 6px solid #c5d3cf;
    border-top: 4px solid #c5d3cf;*/
	padding: 0px;
}

#Resume{

	padding:0px;
}

#Resume > div{
	background-color: #F7F7F7;
	border-top: 4px solid #7B5D5D;	
}

#Resume h3{
    color: #A47762;
    display: inline-block;
   	text-transform: uppercase;
   	font-size: 1.3em;
    letter-spacing: 2px;
}

.header, .education, .acaHornors, .ResumeSkills, .ResumeCourses, .experience, .leadership{
	border-top: solid 2px #f2f2f2;
    border-bottom: solid 2px #FAFAFA;
	padding-bottom: 20px;
	padding: 0 25px 20px 25px;
	/*border-radius: 20px;*/
}
.experience .row, .leadership .row{
	padding-bottom: 16px; 
}
.header{
	padding: 20px 22px;
	border: 0px;
	/*background-color: #DABDA7;
	border-radius: 0px;*/
}

.header h3, h4{
	margin-bottom: 0px;
}

#Resume .header h3{
	color: #7B5D5D;
    font-size: 2em;
    letter-spacing: 2px;
    margin-top: 5px;
}

#resumeButtn{
	display: inline-block;
	padding: 4px 29px;
	background-color: #7B5D5D;
	color: #EFF3F2;
	border-radius: 4px;
}

#resumeButtn a{
	color: #EFF3F2;
}
#resumeButtn a:hover{
	color: #66ccff;
	text-decoration: none;
}


.ResumeSkills{
	line-height: 2;
}

.ResumeCourses .row{
	padding-bottom: 16px;
}

.education{
	/*border-top: none;*/
}

i.fa-check{
	/*padding-left: 22px;*/
	color: grey;
}

#Resume div.summary div h3{
	margin-left: 20px;		
}

div.experience.resumeSec span{
	font-weight: bold;
}

.summaryItem{
    padding-bottom: 6px;
    padding-left: 36px;
}

.leadership{
	border-bottom: none;
}

.resumeDate{
	/*text-align: right;*/
}

.resumeDate i{
    color: rgba(0, 162, 204, 0.59);
}
.resumeHolder{
	border-top: none;
}
#contactImg{
	width: 94%;
}
.contactInfo{
    /*margin-top: 40%;*/	
	}
/* contactForm */
input, textarea{
	width: 100%;
	height: 30px;
	border: 1px solid #DABDA7;
	border-radius: 2px;	
	padding: 2px 4px;
	box-shadow: inset 0 0 1px rgba(218, 189, 167, 0.75);
	font-size: .9em;
	transition: all ease-in-out .4s;
	margin-bottom: 8px;
}

input:focus, textarea:focus{
	border-radius: 4px;
	outline: none;
	box-shadow: inset 0 0 6px rgba(0, 162, 204, 0.3);
/*	padding: 2px 4px;*/
}

.myButton{
	width: 120px;    
	color: black;
	transition: all ease .5s;
	background-color: #66ccff;
	border: 1px solid rgba(164, 119, 98, .98);
	text-decoration: none;
	padding: 4px 8px;
	border-radius: 4px;
}
.myButton:hover{
	background-color: #80D5FF;
	/*box-shadow: 0 0 6px rgba(0,0,0, .3);*/
    box-shadow: 0 0 8px rgba(6, 6, 6, 0.31);
    text-decoration: none;
    border: 1px solid white;
	/*transition: border linear .2s;*/
	/*color: white;*/
}

input[type="submit"]{	
	padding-bottom: 30px;
	font-size: 1em;
	padding: 0px;
}

#submitBtn{
	background-color: #7B5D5D;
	color: #EFF3F2;
	border: 1px solid rgba(101, 38, 6, 0.98);

}

#submitBtn:hover{
	color: #66ccff;
	border: 1px solid rgb(110, 142, 134);
}


/*#slide{
	position: absolute;
	width: 90px;
	height: 29px;
	background-color: grey;
	transition: all ease-in-out .5s;
}

#slide:hover{
	margin-left: 6px;
	border:2px solid red;
}
*/
textarea{
    height: 188px;
    max-width: 100%;
}

#contactImg{
    width: 86%;
    border-radius: 2px;
    border: 2.5px solid #0085b3;
    border: 3.5px solid #DABDA7;
}

#map{
	height: 340px;
	border: 1px solid #DABDA7;
	margin-bottom: 8px;
	padding: 0px;
}


#map iframe{
	width: 100%;
	height: 338px;
}


/* footer */
footer{
	background-color: #DABDA7;
	padding: 60px 0px !important;
    margin-bottom: 0px !important;
}

footer p {
    margin-bottom: 0px;
    text-align: center;
}
#loader{
	height: 100%;
	background-color: rgba(27, 145, 169, 0.84);
	position: relative;
	z-index: 99999;
}

.accordion{
	/*color: red;*/
	/*background-color: #eee;
	color: #444;*/
	cursor: pointer;
		/*width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
transition: 0.4s;*/
}

.resumeSec{
	transition: all ease-in .5s;	
}

.resumeSec:hover{
	background-color: #e9eaec;
	box-shadow: 0px 0px 8px #e2e0e0;
}

.accorIcons{
	float: right;
	padding-top: 20px;
	display: none;
}


.accordion.active, .accordion {
    
}

.accordion:after {
  /*  content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;*/
}



.accordion.active:after {
    /*content: "\2796";*/
}

.panel{
	/*padding: 0 18px;*/
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

.panel.show {
    opacity: 1;
    max-height: 500px;
}


/*skills bars*/

.wraper{
	width:470px;
	margin:50px auto;
}

.wraper:before,
.wraper:after {
  display: table;
  content: " ";
}

.wraper:after{
  clear: both;
}

/* Skills Style 4 */

.skillst4 .skillbar{
	width: 100%;
	height: 25px;
	border-radius: 12px;
	background-clip: padding-box;
	background-color: #fff;
    box-shadow: inset 0 0 5px rgba(0,0,0,.4);
	position:relative;
}
.skillst4 .skillbar{
	color:#4c4c4c;
	padding:1px;
	margin-bottom:30px;
	box-sizing:border-box;
}
.skillst4 .count-bar{
	height: 23px;
	position:relative;
	width:0px;
	border-radius: 10px;
	background-clip: padding-box;
	background-color: #59b3e5;
	box-shadow: -1px 0 7px rgba(0,0,0,.1), inset 0 0 13px rgba(0,0,0,.48);
}
.skillst4 .count-bar.color-1{
	background-image: linear-gradient(to left, #2DB557 0%, #C8DA37 44.95%, #ef553b 100%);
}


.skillst4 .count-bar.color-2{
	background-image: linear-gradient(to left, #48BC52 0%, #C8DA37 44.95%, #ef553b 100%);
}

.skillst4 .count-bar.color-3{
    background-image: linear-gradient(to left, rgb(171, 209, 81) 2%, #C8DA37 17.95%, #ef553b 100%);
}
.skillst4 .count-bar.color-4{
	background-image: linear-gradient(to left, rgb(121, 198, 71) 6%, #C8DA37 27.95%, #ef553b 100%);
}
.skillst4 .count-bar.color-5{
	background-image: linear-gradient(to left, rgb(170, 207, 59) 2%, #C8DA37 17.95%, #ef553b 100%);
}

.skillst4 .count-bar.color-6{
	background-image: linear-gradient(to left, rgb(109, 196, 73) 2%, #C8DA37 17.95%, #ef553b 100%);
}

.skillst4 .count-bar.color-7{
	background-image: linear-gradient(to left, rgb(204, 204, 55) 2%, #C8DA37 17.95%, #ef553b 100%);
}


/*.color-5, .color-4, .color-3, .color-2, .color-1{
background-image: linear-gradient(to left, rgba(0, 76, 128, 0.72) 0%, rgba(218, 189, 167, 0.49) 45.95%, #0085b3 100%);
}*/
.skillst4 .title{
	position:absolute;
	line-height:25px;
	top:-25px;
	left:0;
	padding-left:10px;
	font-weight: bold;
	font-size: .9em;
}
.skillst4 .count-bar .count{
	position:absolute;
	line-height:25px;
	top:-25px;
	right:0;
	font-weight: bold;
	font-size: .9em;
}


/* Skills bar ends */

/*loader styles and functionality*/

.cssload-container * {
	box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
}
.cssload-container {
	margin: 0 auto;
	/*max-width: 391px;*/
}

.cssload-container ul li{
	list-style: none;
}

.cssload-flex-container {
	display: flex;
		display: -o-flex;
		display: -ms-flex;
		display: -webkit-flex;
		display: -moz-flex;
	flex-direction: row;
		-o-flex-direction: row;
		-ms-flex-direction: row;
		-webkit-flex-direction: row;
		-moz-flex-direction: row;
	flex-wrap: wrap;
		-o-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
	justify-content: space-around;
}
.cssload-flex-container li {
	padding: 7px;
	height: 70px;
	width: 70px;
	margin: 21px 14px;
	position: relative;
	text-align: center;
}

.cssload-loading-center {
	display: inline-block;
	position: absolute;
	background: rgba(0,0,0,0.87);
	height: 21px;
	width: 21px;
	left: 25px;
	top: 26px;
	transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
	border-radius: 2px;
		-o-border-radius: 2px;
		-ms-border-radius: 2px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
	animation: pulse 0.95s ease infinite;
		-o-animation: pulse 0.95s ease infinite;
		-ms-animation: pulse 0.95s ease infinite;
		-webkit-animation: pulse 0.95s ease infinite;
		-moz-animation: pulse 0.95s ease infinite;
}

.cssload-loading {
	display: inline-block;
	position: relative;
	width: 52px;
	height: 52px;
	margin-top: 2px;
	transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
}
.cssload-loading:after, .cssload-loading:before {
	position: absolute;
	content: '';
	height: 7px;
	width: 7px;
	display: block;
	top: 0;
	background: rgb(0,0,0);
	border-radius: 2px;
		-o-border-radius: 2px;
		-ms-border-radius: 2px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
	animation-delay: -.4.75s;
		-o-animation-delay: -.4.75s;
		-ms-animation-delay: -.4.75s;
		-webkit-animation-delay: -.4.75s;
		-moz-animation-delay: -.4.75s;
}
.cssload-loading:after {
	right: 0;
	animation: square-tr 1.9s ease infinite;
		-o-animation: square-tr 1.9s ease infinite;
		-ms-animation: square-tr 1.9s ease infinite;
		-webkit-animation: square-tr 1.9s ease infinite;
		-moz-animation: square-tr 1.9s ease infinite;
	animation-delay: .118.75s;
		-o-animation-delay: .118.75s;
		-ms-animation-delay: .118.75s;
		-webkit-animation-delay: .118.75s;
		-moz-animation-delay: .118.75s;
}
.cssload-loading:before {
	animation: square-tl 1.9s ease infinite;
		-o-animation: square-tl 1.9s ease infinite;
		-ms-animation: square-tl 1.9s ease infinite;
		-webkit-animation: square-tl 1.9s ease infinite;
		-moz-animation: square-tl 1.9s ease infinite;
	animation-delay: .118.75s;
		-o-animation-delay: .118.75s;
		-ms-animation-delay: .118.75s;
		-webkit-animation-delay: .118.75s;
		-moz-animation-delay: .118.75s;
}

.cssload-loading.cssload-two {
	position: relative;
	top: -56px;
}
.cssload-loading.cssload-two:after, .cssload-loading.cssload-two:before {
	bottom: 0;
	top: initial;
}
.cssload-loading.cssload-two:after {
	animation: square-br 1.9s ease infinite;
		-o-animation: square-br 1.9s ease infinite;
		-ms-animation: square-br 1.9s ease infinite;
		-webkit-animation: square-br 1.9s ease infinite;
		-moz-animation: square-br 1.9s ease infinite;
	animation-direction: reverse;
		-o-animation-direction: reverse;
		-ms-animation-direction: reverse;
		-webkit-animation-direction: reverse;
		-moz-animation-direction: reverse;
}
.cssload-loading.cssload-two:before {
	animation: square-bl 1.9s ease infinite;
		-o-animation: square-bl 1.9s ease infinite;
		-ms-animation: square-bl 1.9s ease infinite;
		-webkit-animation: square-bl 1.9s ease infinite;
		-moz-animation: square-bl 1.9s ease infinite;
	animation-direction: reverse;
		-o-animation-direction: reverse;
		-ms-animation-direction: reverse;
		-webkit-animation-direction: reverse;
		-moz-animation-direction: reverse;
}








@keyframes square-tl {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(0, 43.5px);
	}
	50% {
		transform: translate(43.5px, 43.5px);
	}
	75% {
		transform: translate(43.5px, 0);
	}
}

@-o-keyframes square-tl {
	0% {
		-o-transform: translate(0, 0);
	}
	25% {
		-o-transform: translate(0, 43.5px);
	}
	50% {
		-o-transform: translate(43.5px, 43.5px);
	}
	75% {
		-o-transform: translate(43.5px, 0);
	}
}

@-ms-keyframes square-tl {
	0% {
		-ms-transform: translate(0, 0);
	}
	25% {
		-ms-transform: translate(0, 43.5px);
	}
	50% {
		-ms-transform: translate(43.5px, 43.5px);
	}
	75% {
		-ms-transform: translate(43.5px, 0);
	}
}

@-webkit-keyframes square-tl {
	0% {
		-webkit-transform: translate(0, 0);
	}
	25% {
		-webkit-transform: translate(0, 43.5px);
	}
	50% {
		-webkit-transform: translate(43.5px, 43.5px);
	}
	75% {
		-webkit-transform: translate(43.5px, 0);
	}
}

@-moz-keyframes square-tl {
	0% {
		-moz-transform: translate(0, 0);
	}
	25% {
		-moz-transform: translate(0, 43.5px);
	}
	50% {
		-moz-transform: translate(43.5px, 43.5px);
	}
	75% {
		-moz-transform: translate(43.5px, 0);
	}
}

@keyframes square-bl {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(0, -43.5px);
	}
	50% {
		transform: translate(43.5px, -43.5px);
	}
	75% {
		transform: translate(43.5px, 0);
	}
}

@-o-keyframes square-bl {
	0% {
		-o-transform: translate(0, 0);
	}
	25% {
		-o-transform: translate(0, -43.5px);
	}
	50% {
		-o-transform: translate(43.5px, -43.5px);
	}
	75% {
		-o-transform: translate(43.5px, 0);
	}
}

@-ms-keyframes square-bl {
	0% {
		-ms-transform: translate(0, 0);
	}
	25% {
		-ms-transform: translate(0, -43.5px);
	}
	50% {
		-ms-transform: translate(43.5px, -43.5px);
	}
	75% {
		-ms-transform: translate(43.5px, 0);
	}
}

@-webkit-keyframes square-bl {
	0% {
		-webkit-transform: translate(0, 0);
	}
	25% {
		-webkit-transform: translate(0, -43.5px);
	}
	50% {
		-webkit-transform: translate(43.5px, -43.5px);
	}
	75% {
		-webkit-transform: translate(43.5px, 0);
	}
}

@-moz-keyframes square-bl {
	0% {
		-moz-transform: translate(0, 0);
	}
	25% {
		-moz-transform: translate(0, -43.5px);
	}
	50% {
		-moz-transform: translate(43.5px, -43.5px);
	}
	75% {
		-moz-transform: translate(43.5px, 0);
	}
}

@keyframes square-tr {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(-43.5px, 0);
	}
	50% {
		transform: translate(-43.5px, 43.5px);
	}
	75% {
		transform: translate(0, 43.5px);
	}
}

@-o-keyframes square-tr {
	0% {
		-o-transform: translate(0, 0);
	}
	25% {
		-o-transform: translate(-43.5px, 0);
	}
	50% {
		-o-transform: translate(-43.5px, 43.5px);
	}
	75% {
		-o-transform: translate(0, 43.5px);
	}
}

@-ms-keyframes square-tr {
	0% {
		-ms-transform: translate(0, 0);
	}
	25% {
		-ms-transform: translate(-43.5px, 0);
	}
	50% {
		-ms-transform: translate(-43.5px, 43.5px);
	}
	75% {
		-ms-transform: translate(0, 43.5px);
	}
}

@-webkit-keyframes square-tr {
	0% {
		-webkit-transform: translate(0, 0);
	}
	25% {
		-webkit-transform: translate(-43.5px, 0);
	}
	50% {
		-webkit-transform: translate(-43.5px, 43.5px);
	}
	75% {
		-webkit-transform: translate(0, 43.5px);
	}
}

@-moz-keyframes square-tr {
	0% {
		-moz-transform: translate(0, 0);
	}
	25% {
		-moz-transform: translate(-43.5px, 0);
	}
	50% {
		-moz-transform: translate(-43.5px, 43.5px);
	}
	75% {
		-moz-transform: translate(0, 43.5px);
	}
}

@keyframes square-br {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(-43.5px, 0);
	}
	50% {
		transform: translate(-43.5px, -43.5px);
	}
	75% {
		transform: translate(0, -43.5px);
	}
}

@-o-keyframes square-br {
	0% {
		-o-transform: translate(0, 0);
	}
	25% {
		-o-transform: translate(-43.5px, 0);
	}
	50% {
		-o-transform: translate(-43.5px, -43.5px);
	}
	75% {
		-o-transform: translate(0, -43.5px);
	}
}

@-ms-keyframes square-br {
	0% {
		-ms-transform: translate(0, 0);
	}
	25% {
		-ms-transform: translate(-43.5px, 0);
	}
	50% {
		-ms-transform: translate(-43.5px, -43.5px);
	}
	75% {
		-ms-transform: translate(0, -43.5px);
	}
}

@-webkit-keyframes square-br {
	0% {
		-webkit-transform: translate(0, 0);
	}
	25% {
		-webkit-transform: translate(-43.5px, 0);
	}
	50% {
		-webkit-transform: translate(-43.5px, -43.5px);
	}
	75% {
		-webkit-transform: translate(0, -43.5px);
	}
}

@-moz-keyframes square-br {
	0% {
		-moz-transform: translate(0, 0);
	}
	25% {
		-moz-transform: translate(-43.5px, 0);
	}
	50% {
		-moz-transform: translate(-43.5px, -43.5px);
	}
	75% {
		-moz-transform: translate(0, -43.5px);
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@-o-keyframes rotate {
	from {
		-o-transform: rotate(0deg);
	}
	to {
		-o-transform: rotate(360deg);
	}
}

@-ms-keyframes rotate {
	from {
		-ms-transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
	}
}

@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes rotate {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}

@keyframes pulse {
	0%, 100% {
		transform: scale(inherit) rotate(45deg);
	}
	75% {
		transform: scale(0.25) rotate(45deg);
	}
}

@-o-keyframes pulse {
	0%, 100% {
		-o-transform: scale(inherit) rotate(45deg);
	}
	75% {
		-o-transform: scale(0.25) rotate(45deg);
	}
}

@-ms-keyframes pulse {
	0%, 100% {
		-ms-transform: scale(inherit) rotate(45deg);
	}
	75% {
		-ms-transform: scale(0.25) rotate(45deg);
	}
}

@-webkit-keyframes pulse {
	0%, 100% {
		-webkit-transform: scale(inherit) rotate(45deg);
	}
	75% {
		-webkit-transform: scale(0.25) rotate(45deg);
	}
}

@-moz-keyframes pulse {
	0%, 100% {
		-moz-transform: scale(inherit) rotate(45deg);
	}
	75% {
		-moz-transform: scale(0.25) rotate(45deg);
	}
}

/*loader ends*/