@charset "utf-8";
/* CSS Document */
/* css/kelikeli */@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,800,700,600,800);
	@import url(http://fonts.googleapis.com/css?family=Bevan);

*{
	margin:0;
	padding:0;
	font-family: Open Sans, Helvetica, serif;
    border:none;
}	

html,body{
	height:100%;
} 

body{
  font-family: Open sans, sans-serif;
}

a{text-decoration:none;}
.bold{font-weight:bold}
.uppercase{text-transform:uppercase}
.alignCenter{text-align:center}
.alignRight{text-align:right}
.clearFloat{clear:both;}


::-webkit-input-placeholder {
   color: #2b2b2b;
} 

:-moz-placeholder { /* Firefox 18- */
   color: #2b2b2b;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #2b2b2b;  
}

:-ms-input-placeholder {  
   color: #2b2b2b;  
}

.transition_bg{
	-webkit-transition: background  0.6s ease;
	-moz-transition: background  0.6s ease;
	-ms-transition: background  0.6s ease;
	-o-transition: background  0.6s ease;
	transition: background  0.6s ease;
}

.bg_white{
	/*background:#FFFFFF;*/
	background: rgba(255, 255, 255, 0.85);
	border: 3px solid #fff;
	border-radius: 5px;
	margin-bottom: 20px;
}

.fix_ul{
	list-style:none;
	
}

header{

}

#logo{
  width: 220px;
  display: block;
  position: absolute;
  top: -10px;
  left: 35px;
  z-index: 999;
  border-radius: 88px 88px 0 0;
  padding-top: 23px;
}

#banner{
	height: 450px;
	z-index: 99;
}

.arrowNav{
  background: #F2227D;
  position: absolute;
  color: #FFFFFF;
  top: 50%;
  font-size: 30px !important;
  padding: 15px;
  height: 34px;
  border-radius: 12px;
  width: 34px;
  text-align: center;
  cursor: pointer;
  -webkit-box-shadow: 0 1px 2px 0 #000000;
  box-shadow: 0 1px 4px 0 #000000;
}

.arrowNav_l{right: -10px;}
.arrowNav_r{left: -10px;}

#bgRotatorNav{
	bottom:30px !important;
	width:100% !important;
	text-align: center;
}

.bulletBanner{
  background-color: #F2227D;
  width: 14px;
  list-style: none;
  height: 14px;
  bottom: 65px;
  display: inline-block;
  border-radius: 20px;
  border: 3px solid #FFFFFF;
  margin: 0 4px;
  cursor;pointer;
			
}

.callout{
  position: absolute;
  background: rgba(0, 0, 0, 0.45);
  left: 0;
  bottom: 40px;
  border-top: 2px solid #fff;
  padding: 10px 0;
  width: 100%;
  color: #FFFFFF;
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  border-bottom: 2px solid #fff;
  text-shadow: 0 1px 2px #000000;
}

#langs{
  background: url(../themes/kelikeli/images/keli_balloons.png) 0 0 no-repeat;
  position: absolute;
  right: -75px;
  top: -38px;
  width: 235px;
  height: 257px;
  z-index: 999;
}

#langs ul {
  position: absolute;
  top: 140px;
  left: 143px;
}

#langs ul li a{
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}
.navigation{
	 margin-top: 100px;
	 margin-bottom: 5px;
	
}

.nav_style{	
	padding-right: 140px;
	background-color: #1793ff;
	padding: 12px 140px 12px 0;
}

.nav_style li{
  display: inline-block;
  margin-left: -4px;
  border-right: 1px solid #FFFFFF;
}

.nav_style li:last-of-type{
	border-right:none;
}


.nav_style li a{
  font-weight: 600;
  font-size: 14px;
  color: #FFFFFF;
  display: block;
  text-transform: uppercase;
  padding: 0 20px;
    -webkit-transition: background 0.6s ease;
  -moz-transition: background 0.6s ease;
  -ms-transition: background 0.6s ease;
  -o-transition: background 0.6s ease;
  transition: background 0.6s ease;
}

.nav_style li a:hover{
  background: rgba(255, 255, 255, 0.26);
}

.trngl{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 25px 46px 0;
	border-color: transparent #1793ff transparent transparent;
}

.social_net{
	margin: 2px 10px;
}

.social_net  a{	
	color: #1793ff;
	display: inline-block;
	font-size: 30px;
}

.text_stl{
  line-height: 160%;
  font-size: 14px;
  color: #000000;
}

.title_stl{
	color: #F2227D;
	line-height: 30px;
	font-weight: 400;
	font-size: 24px;
	margin: 10px 0;
}

.home_content{
  padding: 30px 30px 30px 0;
}

.scroll_container{
	overflow: hidden;
	height: 400px;
}

.scroll_wrapper{
	height:340px;
	overflow: hidden;
	position: relative;
	padding-right: 15px;
}

.link_flash{
	font-weight: 600;
	color:#F2227D;
}


.section_title{
	background:#1793ff;
	color: #fff;
	display: inline-block;
	font-size: 21px;
	font-weight: 400;
	padding: 5px 15px 5px 45px;
	margin-left: -10px;
	vertical-align: middle;
}

.trngl_title{
  width: 0;
  display: inline-block;
  margin-left: -5px;
  vertical-align: middle;
  height: 0;
  border-style: solid;
  border-width: 38px 25px 0 0;
  border-color: #1793ff transparent transparent transparent;
	
}

.prod_box{
	display:block;
	padding: 0 15px;
	margin-bottom:25px;
}

.subtitle_stl{
  color:#FFFFFF;
    background-color:  #F2227D;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 400;
}

.prod_img{
	max-height: 225px;
	overflow: hidden;
}

.section_features{
	padding: 30px;
	border-bottom: 1px solid #5D4946;
}

.product_section{
	margin-top:40px
}

.descr{	
	border-left: 3px dotted #F2227D;
	font-size: 13px;
	line-height: 130%;
	margin-bottom: 10px;
	padding-left: 20px;
}

.scroll_images{
	height: 300px;
	overflow: hidden;
	margin: 5px 5px 0 0;
	position: relative;	
}

.scroll_container_gallery{
	 overflow: hidden;
	   height: 100%;
}

.gallery_wrapper{
	padding: 0 30px 30px 30px;
	border-left: 1px dotted #BCBCBC;
	margin-left: 30px;
	overflow: hidden;
	height: 545px;
}

.gallery_img{
  width: 110px;
  height: 100px;
  display: inline-block;
  overflow: hidden;
  margin: 3px;
}

.gallery_img img{
  width: 100%;
  margin: auto;
  display: block;
}

.colorNav{
	background-color: #1793ff;
	color: #FFFFFF;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	padding: 10px;
	font-size: 20px !important; 
	
}

.embed{
	  margin: 15px 0;
  width: 100%;
	
}

.embed iframe,
.embed div{
	width: 100% !important;
	margin: auto;
}


.fill_form {
  background: none repeat scroll 0 0 #FFF;
  font-size: 13px;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  padding: 12px 15px;
  width: calc(100% - 30px);
  font-family: Open sans, sans-serif;
  border-radius: 0;
  border: 1px solid rgba(47, 98, 141, 0.37);
}

.prm_btn {
  padding: 10px 15px;
  border-radius: 8px;
  margin: 8px auto;
  cursor: pointer;
  font-size: 16px;
  background: #F2227D;
  color: #FFFFFF;
  display: inline-block;
  min-width: 140px;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  -webkit-transition: opacity 0.6s ease;
  -moz-transition: opacity 0.6s ease;
  -ms-transition: opacity 0.6s ease;
  -o-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}

.prm_btn:hover{
	 opacity:0.85;
}

.location_info {
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 18px;
}

.location_info li {
  padding-left: 25px;
  margin-bottom: 5px;
  letter-spacing: 0.02em;
  position:relative;
}

.location_info i {
  color: #1793ff;
  margin-right: 10px;
  position: absolute;
  left: 0;
  top: 3px;
  text-align: center;
  width: 20px;
  display: block;
  font-size: 14px;
}

.com_title{
	color:#F2227D;
	  margin: 10px 0;
  font-weight: 600;
}

.fb_iframe_widget{
	background-color: #fff;
	margin-bottom: 10px !important;
}

.twitter-timeline{
	  height: 300px;
  width: 100% !important;
	
}

.footer_style{
  background-color: #222222;
  color: #A4A4A4;
  font-size: 12px;
  font-weight: 300;
  margin-top: 55px;
  text-align: center;
}

.footer_style a{
	color: #A4A4A4;
}

.sp_lang_mob{
	display:none !important;	
	
}

.menu_mob{
	display:none;
	background-color: #1793FF;
	color: #fff;
	width: 44px;
	height: 30px;
	float: right;
	text-align: center;
	padding: 8px;
	font-size: 21px !important;
	cursor:pointer;
}

/* ColorBox*/
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:rgba(255, 255, 255, 0.81); opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:25px; height:25px; background:url(/themes/kelikeli/images/border1.png) no-repeat 0 0;}
    #cboxTopCenter{height:25px; background:url(/themes/kelikeli/images/border1.png) repeat-x 0 -50px;}
    #cboxTopRight{width:25px; height:25px; background:url(/themes/kelikeli/images/border1.png) no-repeat -25px 0;}
    #cboxBottomLeft{width:25px; height:25px; background:url(/themes/kelikeli/images/border1.png) no-repeat 0 -25px;}
    #cboxBottomCenter{height:25px; background:url(/themes/kelikeli/images/border1.png) repeat-x 0 -75px;}
    #cboxBottomRight{width:25px; height:25px; background:url(/themes/kelikeli/images/border1.png) no-repeat -25px -25px;}
    #cboxMiddleLeft{width:25px; background:url(/themes/kelikeli/images/border2.png) repeat-y 0 0;}
    #cboxMiddleRight{width:25px; background:url(/themes/kelikeli/images/border2.png) repeat-y -25px 0;}
    #cboxContent{background:#fff; border: 10px solid #fff;  -webkit-box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.58);  box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.58);}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:20px;}
        #cboxTitle{position:absolute; bottom:-5px; left:0; text-align:center; width:100%; color:#000;}
        #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
        #cboxLoadingOverlay{background:#fff url(/themes/kelikeli/images/loading.gif) no-repeat 5px 5px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
        #cboxPrevious{position:absolute; bottom:-15px; right:20px; color:#444;}
        #cboxNext{position:absolute; bottom:-15px; right:-25px; color:#444;}
        #cboxClose{position:absolute; top: -27px; right: -27px;display:block; color:#444;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

@media (max-width:1350px){
	
	#langs{
		display:none;	
	}
	
	.sp_lang_mob{
		display:block !important;	
	}
	
	.arrowNav_l {
	  right: 10px;
	}
	.arrowNav_r {
	  left: 10px;
	}
	
}

@media (max-width:1150px){
	.nav_style{
		  padding: 12px 0px 12px 0;
	}
	
	
}


@media (max-width:1024px){

	.trngl{
		display:none;
	}
	
	.nav_style{
		display:none;
		position: absolute;
		top: 46px;
		right:0;
		z-index: 9999;
		width: 300px;
	}
	
	.menu_mob{
		display:block
	}
	
	.nav_style li{
		display: block;
		border-right: none;
		margin: 0;
		border-bottom: 1px solid #FFFFFF;
		margin: 0 20px;
	}
	
	.nav_style li:last-of-type{
		border-bottom:none !important;
	}	
	
	.nav_style li a{
		  padding: 9px 20px;
	}
	
	.scroll_wrapper{
		height:300px;
	}
	
	.scroll_container {
		height: 100%;
	}
	
	
}

@media (max-width:820px){
	
	.prod_img{
		height:200px;
		
	}
	
	.callout{
		  font-size: 21px;
		
	}

	
}

@media (max-width:640px){
	
	.scroll_wrapper{
		overflow:initial;
		height:100%;
	}
	
	#logo{
		  width: 190px;
		  z-index: 9999999;
		    left: 0;
	}
	
	.home_content {
		padding:30px
	}
	#banner {
		height: 240px;
	}
	
	.arrowNav{
		padding: 5px 12px;
		height: 31px;
		border-radius: 12px;
		width: 12px;
		top:35%;
		
	}

	.callout {
	  font-size: 16px;
	}
	
}