@charset "utf-8";
/*
Company Name: KYK
*/



@font-face {
    font-family: 'RalewayRegular';
    src: url('raleway-regular-webfont.eot');
    src: url('raleway-regular-webfont.eot') format('embedded-opentype'),
         url('raleway-regular-webfont.woff2') format('woff2'),
         url('raleway-regular-webfont.woff') format('woff'),
         url('raleway-regular-webfont.ttf') format('truetype'),
         url('raleway-regular-webfont.svg#RalewayRegular') format('svg');
}


@font-face {
    font-family: 'RalewayBold';
    src: url('raleway-bold.eot');
    src: url('raleway-bold.eot') format('embedded-opentype'),
         url('raleway-bold.woff2') format('woff2'),
         url('raleway-bold.woff') format('woff'),
         url('raleway-bold.ttf') format('truetype'),
         url('raleway-bold.svg#RalewayBold') format('svg');
}




/*************************/





body {
	font-family: 'RalewayRegular';
	margin:0;
	padding:0;
	-webkit-font-smoothing: antialiased;
	line-height:normal;
	color:#fff;
	font-size:0.813em;
	line-height:20px;
	
}



#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#017AC3; /* change if the mask should have another color then white */
	z-index:999999; /* makes sure it stays on top */
	
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(../images/loader.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}

::selection {
        background: #782B2B; /* Safari */
		color:#fff;
        }
::-moz-selection {
        background: #782B2B; /* Firefox */
		color:#fff;
}


a {
	color:#ccc;
	text-decoration: none;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
	}
	
a:hover {
	color: #fff;

	}
p {
	margin:0 0 25px 0;
	clear:left;
	padding:0;
	}
	
	
h1, h2, h3, h4 {
	margin:0 0 30px 0;
	padding:0;
	font-weight:normal;
	
}	

hr {
	margin:50px 0;
	height:0;
	border:0;
	clear:both;
	border-top:1px solid #DBDBDB;
}	
.heading{
	
	font-family: 'RalewayBold';
	font-size:1.575em;
}

.subheading {
	font-family: 'RalewayBold';
	font-size:1.875em;
	font-size:30px;
	
}

   
img{
	border:0;
}	

a img {
	border: 0;
	}




.list{
	margin:0 0 20px 0;
	padding:0;
	list-style:none;

}
.list li{
	margin:0 0 0 15px;
	padding:0;
	list-style-image: url(../images/bullet.png);
	list-style-type: none;
	
}

.link{}
.link a{
	border:2px solid #fff;
	padding:10px;
	color:#FFF;
	font-family: 'RalewayBold';
	display:block;
	
}

.link a:hover {

	color:#96C93B;
	
}
header{
	width:100%;
	z-index:100;
	position:fixed;
	top:0;
	left:0;
	padding:20px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	color:#ccc;
	z-index:100;
}

.kyk-logo{
	float:left;
}
.header{
	
	width:100%;
	float:left;
	position:relative;
	padding:20px;
	-moz-box-sizing: border-box;
  box-sizing: border-box;
	
}
footer, .footer{
	width:100%;
	z-index:100;
	padding:20px;
	position:fixed;
	bottom:0;
	left:0;
	color:#ccc;
	font-size:10px;
	text-transform:uppercase;
	padding:10px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	background: rgba(237, 28, 36, 0.7);
	font-family:Arial, Helvetica, sans-serif;
}
.footer{
	position:relative;
	float:left;
	margin:20px 0 0 0;
}
.copy{
	float:left;
}
.bottom-caption{
	float:right;
	text-align:right;
	font-size:14px;
	  font-family: 'RalewayBold';
}
.distributor{
	position:absolute;
	top:70%;
	right:-89px;
	z-index:109;
	width:auto;
	height:auto;
	-webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
	overflow:hidden;
  writing-mode: lr-bt ;
}
.distributor a{
	
	
	color:#fff;
	padding:10px 20px;  
	text-decoration:none;
	font-size:14px;
	display:inline-block;
	/*background: rgba(237, 28, 36, 0.9);*/
	background-color:rgba(1, 1, 1, 1);
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

.distributor a:hover{
	background-color:#ED1C24;
	color:#fff;
	margin-bottom:3px;
}
/******************inner style*********************/


.about, .business,.technology, .products, .contact{
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-image: url(../images/about-bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	}
	
.technology{
	background-image: url(../images/technology-bg.jpg);
	}
	
	
.products{
	background-image: url(../images/products-bg.jpg);
	}
	
		
.contact{
	background-image: url(../images/contact-bg.jpg);
	}
	

	
.content{
	width:70%;
	background-color:rgba(0, 0, 0, 0.5);
	float:left;
	margin:25px 0 0 15%;
	-moz-box-sizing: border-box;
  	box-sizing: border-box;
	padding:25px;
	border-top:4px solid #838383;
	border-bottom:4px solid #838383;
}
.banner{
	width:100%;
	float:left;
	margin:0 0 25px 0;
}
.banner img{
	width:100%;
	display:block;
}
.page-title{
	font-family: 'RalewayBold';
	color:#fff;
	padding:0 0 25px 0;
	margin:0 0 25px 0;
	border-bottom:1px solid rgba(255, 255, 255, 0.1);
	font-size:20px;
	text-transform:uppercase;

}
.page-title a{
	font-family: 'RalewayRegular';
	font-size:14px;
	color:#fff;
	
}
.page-title a:hover{
	color:#ED1B23;
	
}
/*************03-12-2014***************/

.center{
	text-align:center;
}
.image-left{
	float:left;
	margin:0 20px 20px 0;
}
.two-col{
	width:50%;
	float:left;
	overflow:hidden;
}
.fullwidth{
	width:100%;
	display:block;
	
}




.bg-red, .bg-gray{
	background-color:#ED1B23;
	color:#fff;
	float:left;
	margin:0 0 10px 0;
	width:100%;
	float:left;
}
.bg-gray{
	background-color:#525252;
}
.border{
border-right:1px solid #fff;
}
.inset{
	padding:50px 20px 30px 20px;
}

.inset a{
	border:1px solid #fff;
	padding:10px 15px;
	font-size:14px;
	}

.inset a:hover{
	border:1px solid #4C4E50;
	background-color:#4C4E50
	}


.column {
      float: left; 
      padding:0;
	  }
	 
	 
.column img, .fullwidth{
	width:100%;
	display:block;
	 transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}





.column img:hover, .fullwidth:hover {
    /*opacity: 0.2;*/
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-o-transform:scale(1.1);
	-ms-transform:scale(1.1);
	transform:scale(1.1)
}	 
	 
	 
	 
	 
	 
	 
#col1 {
      width: 30.33333333333333%;
      margin:7px 1.5%;
      background-color: #ED1C24;
	  color:#fff;
	  overflow:hidden;
}
.pad{
	padding:20px;
	text-align:center;
}
.pad a{
	border:1px solid #fff;
	padding:10px 15px;
	font-size:14px;
	}

.pad a:hover{
	border:1px solid #4C4E50;
	background-color:#4C4E50
	}

/***********end *03-12-2014***************/

/*--------------------------desktop and laptop------------------------------------*/






/*********medea query 1000**************************************/



@media only screen and (max-width: 1170px) {



}

/***********************800px *************************************/

@media only screen and (max-width: 980px) {
.copy, .bottom-caption{
	
	width:100%;
	text-align:center;
}

}

/***********************800px *************************************/



@media only screen and (max-width: 800px) {
.two-col{
	width:100%;
}

#col1 {
      width: 48%;
      margin:7px 1%;
   
}
.border{
border-right:0;
}
}






/***********************767px *************************************/
@media only screen and (max-width: 768px) {

}

/***********************640px *************************************/
@media only screen and (max-width: 640px) {

.distributor{
	position:absolute;
	top:25%;
	right:0;
	-webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
}

.distributor a{
	
	

	-moz-border-radius:5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;
}
.footer{
	position:relative;
	left:0;
	float:left;

}
}




/***********************480 px *************************************/

@media only screen and (max-width: 480px) {
.content{
	width:80%;
	margin:25px 0 0 10%;
}

#col1 {
      width: 100%;
      margin:10px 0;
   
}
}

/***********************320 px *************************************/
@media only screen and (max-width: 320px) {

}


/***********************240 px *************************************/
@media only screen and (max-width: 240px) {



}