html, body{
font-family: 'Open Sans', sans-serif;
 font-size: 100%;
 background: #FFf;
}
body a {
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
a:hover{
 text-decoration:none;
}

hr {
 position:relative;
 width:100%;
 height:1px;
 border:0px;
 background-color:#49C6E5;

 }
.categories{
	margin-bottom:1em;
	margin-top:-30px;
}
.categories h4{
	color: #E74C3C;
	margin: 0;
	font-size: 28px;
	font-weight: 300;
}
.categories ul{
  margin: .6em 0 0 0;
  padding: 0;
}
.categories ul li{
  display: block;
  margin: .6em 0;
}
.categories ul li a{
  color: #000000;
  font-size: 14px;
  background: url(../images/ar.png) no-repeat 0px 5px;
  padding-left: 1em;
}
.categories ul li a:hover{
  color: #E74C3C;
  text-decoration: none;
  padding-left: 1.5em;
}




h1,h2,h3,h4,h5,h6{
	margin:0;			   
}	
p{
	margin:0;
}
ul{
	margin-left:30px;
	padding:0;
}
label{
	margin:0;
}
.logo {
	float:left;
	margin-top: -10px;
	
	 
}
.logo  a h1{
color: #53d0c6;
 font-size:4em;
 font-weight:400;
font-family: 'Poiret One', cursive;
}
.logo  a h1:hover{
 text-decoration:none;
}
.logo  a h1 span{
 color:#FCB2B2;
}

.border{
	background: #7189C9;
	height: 1px;
}

.top-menu {
	text-align: center;
    margin: 1.6em 0 1em 0;
	  position: relative;
}
.top-menu ul li{
	display: inline-block;
	margin: 0 18px;
	color: #fff;
	font-weight: 900;
	vertical-align: top;
}
/* Effect 16: fall down */
.cl-effect-16 a {
	color: #3eb5f1;
	text-shadow: 0 0 1px rgba(62,181,241,0.3);
}
.cl-effect-16 a::before {
	color:#202542;
	content: attr(data-hover);
	position: absolute;
	opacity: 0;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	-webkit-transform: scale(1) translateX(0px) translateY(-0px) rotate(0deg);
	-moz-transform: scale(1) translateX(1px) translateY(-0px) rotate(0deg);
	transform: scale(1.5) translateX(0px) translateY(-0px) rotate(0deg);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}

.cl-effect-16 a:hover::before,
.cl-effect-16 a:focus::before {
	-webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	-moz-transform: scale(1.5) translateX(0px) translateY(0px) rotate(0deg);
	transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	opacity: 1;
}

.top-menu ul li a{
  text-decoration: none;
 color: #202542;
  font-size: 0.98em;
  font-weight:400;
  text-transform: uppercase;
  padding:0;
  background:none;
  margin: 0 auto;
}
.top-menu ul li a:hover,.top-menu ul li a.active{
	color:#3eb5f1;
}
/*----- responsive-design -----*/
@media (max-width:640px){
	.logo {
	  float: left;
	  text-align: left;
	  margin-top: 6%;
	 margin-left:-45px;
	
	}
		span.menu {
			
	display:block;
	width: 35px;
	height: 35px;
	background: url(../images/nav.png) no-repeat 0px 0px;
	display: block;
	position: absolute;
	right: 5px;
	left: 87%;
	top: 40px;
	cursor: pointer;
	}
	.top-menu ul{
		display:none;
		margin-top:0em;
		border: 1px solid #eee;
	}
	.top-menu ul li {
	  display: block;
	  float: none;
	  margin: 0.5em 0;
	}
	.top-menu ul li a {
	  padding: 0;
	  width: 100%;
	  font-size: 0.93em;
	}
	.top-menu {
	float: left;
	  margin: 1em 0 0 0;
	width: 100%;
   }
   
}
/*--start-home--*/
.header-top {
    padding: 0.9em 0;
  background: #fff;
  position: relative;
}
.banner{
background: url(../images/banner.jpg) no-repeat center top;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -ms-background-size: 100% 100%;
  min-height: 700px;
  position:relative;
 
  
  
}

.bannerc{
background: url(../images/bannerc.jpg) no-repeat center top;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -ms-background-size: 100% 100%;
  min-height: 700px;
  position:relative;
  
  
}

.bannera{
background: url(../images/bannera.jpg) no-repeat center top;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -ms-background-size: 100% 100%;
  min-height: 700px;
  position:relative;
  
  
}

.bannerl{
background: url(../images/bannerl.jpg) no-repeat center top;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -ms-background-size: 100% 100%;
  min-height: 700px;
  position:relative;
  
  
}

.bannerp{
background: url(../images/bannerp.jpg) no-repeat center top;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -ms-background-size: 100% 100%;
  min-height: 700px;
  position:relative;
  
  
}


/*--header--*/

/*----about-----*/
h3.tittle {
  color: #53d0c6;
  font-size:3.3em;
  font-weight: 400;
  font-family: 'Poiret One', cursive;
  margin-bottom:0.5em;
}
.about {
  padding: 2em 0;
  background-color: rgba(63,78,128,0.2);
}
.about p {
  font-size: 0.95em;
  color: #000;
  line-height: 1.8em;
}
.about-top-left img {
  width: 100%;
}
.about-top-right p {
  color: #888;
  font-size: 0.9em;
  line-height: 1.8em;
  margin-top: 1em;
}
.about-top-right h4 {
 color: #53d0c6;
  font-size:1.8em;
  font-weight: 400;
  font-family: 'Poiret One', cursive;
  line-height: 1.35em;
  padding: 0
}
.about-top-right {
  padding-left: 0;
}

/* CSS3 STYLE GENERIC */
.view {
     width:270px;
   height:270px;
    margin: 0 7px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
}
.view .mask, .view .content {
 width: 270px;
  height: 270px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0px
}
.view img {
   display: block;
   position: relative;
}
.view a.info {
   background:url(../img/link.png) center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:20px;
   height:20px;
}
.view.fifth-effect {
  padding-left: 0;
}
/*----- footer ----*/
.footer {
   background: #3F4E80;
  padding: 1.5em 0 0em 0;
  text-align: left;
}
.footer-grids h3{
   color: #53D0C6;
  font-size: 2em;
  font-weight: 400;
  margin: 0.6em 0;
  font-family: 'Poiret One', cursive;

}
.footer-grids {
  padding-bottom: 3em;
}
.footer-grids p {
  font-size: 0.85em;
  color: #fff;
  line-height: 1.8em;
}
.footer-text {
  float: left;
}
.footer-info {
  float: right;
}
.flickr-grid {
  float: left;
  width: 25%;
  margin: 0 0.1em 0.1em;
}
.flickr-grid a img {
  width: 100%;
}
.copy {
   text-align: center;
  background: #3F4E80;
  padding: 1em;
  border-top: 1px ridge rgba(11, 12, 16, 0.16);
  width: 100%;
  
   }
.copy p {
  color: #fff;
  font-size: 0.9em;
  width: 100%;
}
.copy p a {
   color: #53D0C6;
}
.copy p a:hover{
	 text-decoration: underline;
}
/*--top-move--*/
#toTop {
  display: none;
  text-decoration: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  overflow: hidden;
  width: 40px;
  height: 22px;
  border: none;
  text-indent: 100%;
  background: url(../images/move-top.png) no-repeat 0px 0px;
}
@media (max-width:1440px){
		.banner {
	  background: url(../images/banner.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 675px;
	 
	}

	.bannera {
	  background: url(../images/bannera.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 675px;
	}

	.bannerl {
	  background: url(../images/bannerl.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 675px;
	}

	.bannerc {
	  background: url(../images/bannerc.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 675px;
	}

	.bannerp {
	  background: url(../images/bannerp.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 675px;
	}
	h3.tittle {
	  font-size: 3.1em
	}
	
}
@media (max-width:1366px){
	.callbacks_nav {
     bottom: 10%;
    }
		.banner {
	  background: url(../images/banner.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 607px;
	   
	}

	.bannerl {
	  background: url(../images/bannerl.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 607px;
	}

	.bannerc {
	  background: url(../images/bannerc.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 607px;
	}

	.bannerp {
	  background: url(../images/bannerp.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 607px;
	}

.bannera {
	  background: url(../images/bannera.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 607px;
	}


	h3.tittle {
	  font-size: 3em;
	  margin-bottom: 0.2em;
	}

}
@media (max-width:1280px){
	  .about {
	  padding: 3em 0;
  }
  .testi-text {
      width:80%;
  }
  .callbacks_tabs {
	  bottom: -12%;
	  left: 30%;
	}
	
}
@media (max-width:1024px){
		.banner {
	  background: url(../images/banner.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 535px;
	   
	}

.bannera {
	  background: url(../images/bannera.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 535px;
	}


.bannerc {
	  background: url(../images/bannerc.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 535px;
	}


.bannerl {
	  background: url(../images/bannerl.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 535px;
	}


.bannerp {
	  background: url(../images/bannerp.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 535px;
	}

	.about p,p.para1 {
      font-size: 0.85em;
    }
   	 .callbacks_tabs {
	  bottom: -10%;
	  left: 25%;
	}
	.view {
      width: 227px;
      height: 227px;
      margin: 0 4px;
	}
	.view .mask, .view .content {
	  width: 227px;
      height: 227px;
	}
	  .footer-grids p {
  font-size: 0.8em;
  }
  
	.footer-grids {
	  padding-bottom: 2em;
	}
		.footer-grids h3 {
	  font-size: 2em;
	  margin: 0.3em 0;
	}
		.callbacks_nav {
	  bottom:9%;
	}
}


@media (max-width:768px) and (orientation:landscape){
	.logo{
		
		margin-left:10%;
		padding-top:1%;
		
		
	}
}
	
@media (max-width:768px){
	
	.logo{
		
		padding-top:1%;
		
		
	}
	
	
	.banner {
	  background: url(../images/banner.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 411px;
	 
	  }

	.bannera {
	  background: url(../images/bannera.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 411px;
	}

	.bannerc {
	  background: url(../images/bannerc.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 411px;
	}

	.bannerl {
	  background: url(../images/bannerl.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 411px;
	}

	.bannerp {
	  background: url(../images/bannerp.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 411px;
	}




		.logo a h1 {
     font-size: 3.5em;
   }
			.header-top {
      padding: 0.7em 0;
    }
	h3.tittle {
	  font-size: 2.8em;
	  margin-bottom: 0em;
	}
		.callbacks_tabs {
	  bottom: -10%;
	  left: 41%;
	}
		.callbacks_nav {
	  bottom: 8%;
	}
	.footer-flickr {
	  margin-top: 0em;
	}
	.footer-grids h3 {
	  font-size: 2em;
	  padding: 0;
	    margin: 0 0 0.2em 0;
	}
	.footer-flickr {
	  padding: 0;
	}
	.view {
	  width: 270px;
	  height: 270px;
	  margin: 1em 2em 1em 0em;
	}
	.about-top-left {
	  padding: 0;
	  margin-top: 2em;
	}
	.view .mask, .view .content {
	  width: 270px;
	  height: 270px;
	}
	.footer-text {
	  float: none;
	  padding: 0;
	  margin-bottom: 1.2em;
	}
		.footer-grids h3 {
     font-size: 1.8em;
   }
   .footer-info {
	  float: none;
	  padding: 0;
	  margin-top: 1.2em;
	}
	
	.top-menu ul li a {
      font-size: 0.95em;
    }
	  .about-top-left img {
	  width: 70%;
  }
  .categories {
	  margin: 1em 0;
	  margin-top:-10px;
	}


span.menu {
	  display: block;
	   width: 35px;
	  height: 35px;
	  display: block;
	  position: absolute;
	    right: 47px;
       margin-top:10px;
	  cursor: pointer;
	}
	.top-menu {
	  float: left;
	  margin: 0.2em 0 0 0;
	  width: 100%;
	}


}
@media (max-width:640px){
		
	.logo {
		margin-top:10px;
		
	}
		.logo a h1 {
	  font-size: 3em;
	}
		.banner {
	  background: url(../images/banner.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 342px;
	}

.bannera {
	  background: url(../images/bannera.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 342px;
	}


.bannerc {
	  background: url(../images/bannerc.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 342px;
	}


.bannerl {
	  background: url(../images/bannerl.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 342px;
	}


.bannerp {
	  background: url(../images/bannerp.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 342px;
	}


		h3.tittle {
	  font-size: 2.5em;
	  margin-bottom: 0em;
	}
	.about-top-right h4 {
      font-size: 1.6em;
  }
  .view {
	  width: 270px;
	  height: 270px;
	  margin: 1em 1em 0em 0em;
	}
	
	
}
@media (max-width:480px){
   .logo {
	  float: none;
	  text-align: center;
  }
  .callbacks_tabs {
	  bottom: -10%;
	  left: 34%;
	}
  
	span.menu {
	  display: block;
	   width: 35px;
	  height: 35px;
	  background: url(../images/nav.png) no-repeat 0px 0px;
	  display: block;
	  position: absolute;
	    right: 47px;
       margin-top:40px;
	  cursor: pointer;
	}
	.top-menu {
	  float: left;
	  margin: 1.1em 0 0 0;
	  width: 100%;
	}
		.banner {
	  background: url(../images/banner.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 258px;
	}


.bannera {
	  background: url(../images/bannera.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 258px;
	}


.bannerc {
	  background: url(../images/bannerc.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 258px;
	}


.bannerl {
	  background: url(../images/bannerl.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 258px;
	}


.bannerp {
	  background: url(../images/bannerp.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 258px;
	}


	.callbacks_nav {
	  top: 57%;
	}
		h3.tittle {
	  font-size: 2.3em;
	  margin-bottom: 0em;
	}
	.about p{
	  font-size: 0.83em;
	}
		.about-top-right h4 {
	  font-size: 1.4em;
	}
	.view {
	  width: 270px;
	  height: 270px;
	  margin: 1em 1em 0em 5em;
	}
		ul.list {
	  padding-top: 1em;
	}
	
	.logo a h1 {
	  font-size: 2.5em;
	}
	.top-menu ul li a {
	  font-size: 0.9em;
	}
	   .about-top-left img {
    width: 100%;
   }
}
@media (max-width:320px){
		span.menu {
	  display: block;
	  width: 35px;
	  height: 35px;
	  background: url(../images/nav.png) no-repeat 0px 0px;
	  display: block;
	  position: absolute;
	  right: 31px;
	  margin-top:30px;
	  cursor: pointer;
	  background-size:80%;
}
	.logo a h1 {
	  font-size: 2.3em;
	}
		.header-top {
	  padding: 0.5em 0 0.2em 0;
	}
		h3.tittle {
	  font-size: 2em;
	  margin-bottom: 0em;
	}
		.callbacks_nav {
	  height: 40px;
      width: 20px;
      background: transparent url("../images/arrows.png") no-repeat left top;
      margin-top: 8%;
      background-size: 191%
	}
	.banner {
	  background: url(../images/banner.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 180px;
	}

.bannera {
	  background: url(../images/bannera.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 180px;
	}


.bannerc {
	  background: url(../images/bannerc.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 180px;
	}


.bannerl {
	  background: url(../images/bannerl.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 180px;
	}


.bannerp {
	  background: url(../images/bannerp.jpg) no-repeat center top;
	  background-size: cover;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  -ms-background-size: cover;
	  min-height: 180px;
	}

		.copy p {
	  color: #fff;
	  font-size: 0.83em;
	  line-height: 1.7em;
	}
	.view {
	  width: 220px;
	  height: 220px;
	  margin: 1em 1em 0em 2em;
	}
	.view .mask, .view .content {
	  width: 220px;
	  height: 220px;
	}
	.about-top-right h4 {
	  font-size: 1.2em;
	}
	.about-top-left {
     margin-top: 1.5em;
   }
   
}
