/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
/*--start-body--*/

/* start icon styles */
.main {
    margin: 4% auto 1%;
    width: 90%;
    padding: 5em 4em;
    text-align: center;
    background-color: #00b2a9;
}
.skills-grid p{
	margin: 20px 0 0 0;
    color: #ffffff;
    font-size: 1.1em;
    font-weight: 400;
}
.effect5
{
  position: relative;
}
.effect5:before, .effect5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px rgba(17, 17, 17, 0.67);
  -moz-box-shadow: 0 35px 20px rgba(17, 17, 17, 0.67);
  box-shadow: 0 35px 20px rgba(17, 17, 17, 0.67);
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

/*==================================================
 * Effect 6
 * ===============================================*/
.effect6
{
  	position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.skills-grid.text-center {
    float: left;
    margin-right:4%;
	width:30%;
}
.skills-grid:nth-child(3){
  margin-right:0%;
}
.circle{
	color:#ffffff;
	font-size:25px;
}
span.circles-number {
  font-size:25px;
}
span.circles-text {
  font-size: 25px;
}
.circles-text-wrp {
  line-height:122px!important;
}
span.circles-text {
    font-size: 20px!important;
}

/*--copy-right--*/
.copy-right {
      margin: 11em 0px 2em 0;
}
.copy-right p {
color: #fff;
    font-size: 1em;
    font-weight: 400;
    margin: 0 auto;
    text-align: center
}
.copy-right p a {
	color:#00b2a9;
}
.copy-right p a:hover {
	text-decoration: underline;
}
/*--//copy-right--*/
/*--start-responsive-design--*/
@media (max-width:1600px){


}
@media (max-width:1440px){

}
@media (max-width:1366px){

}
@media (max-width:1280px){
	.main {
		margin: 4% auto 1%;
		width: 45%;
		padding: 5em 4em;
	}

}
@media (max-width:1024px){
	.main {
		margin: 4% auto 1%;
		width: 51%;
		padding: 5em 4em;
	}
}
@media (max-width:991px){
	.main {
		margin: 4% auto 1%;
		width: 69%;
		padding: 5em 4em;
	}
}
@media (max-width:800px){
	
}
@media (max-width:768px){
		.main {
		margin: 4% auto 1%;
		width: 69%;
		padding: 5em 4em;
	}
}
@media (max-width:736px){
	.main {
		margin: 4% auto 1%;
		width: 69%;
		padding: 5em 4em;
	}
	
}
@media (max-width:677px){
	.main {
		margin: 4% auto 1%;
		width:75%;
		padding: 5em 4em;
	}
	
}
@media (max-width:640px){

	
}
@media (max-width:480px){
	.skills-grid.text-center {
		float: left;
		margin-right: 0;
		width: 100%;
		margin-bottom: 6%;
	}
	.main {
		    margin: 4% auto 1%;
    width: 80%;
    padding: 3em 2em;
	}
	.copy-right {
		margin: 4em 0px 2em 0;
	}
	.copy-right p {
		font-size: 0.9em;
		margin: 0 auto;
		padding: 0 1em;
	}
}
@media (max-width:320px){
	.main {
		margin: 0% auto 1%;
		width: 93%;
		padding: 2em 0em;
	}
	body h1 {
		text-align: center;
		padding: 1em 0 1em 0;
		font-size: 2em;
		font-weight: 400;
		color: #fff;
	}
}