/* WEB DEFINED :http://www.webdefined.biz Compiled by Srinath */

/* ==========================================================================
   Base styles:opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color:#222;
}
p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset,
figure {
	margin-bottom:10px;
}

/*
 * Remove text-shadow in selection highlight:h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background:#b3d4fc;
    text-shadow:none;
}

::selection {
    background:#b3d4fc;
    text-shadow:none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #ccc;
    margin:1em 0;
    padding:0;
}

/*
 * Remove the gap between images and the bottom of their containers:h5bp.com/i/440
 */

img {
    vertical-align:middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border:0;
    margin:0;
    padding:0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize:vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html, body {
	height:100%;
}
.bg_default {
  background: url(../images/cover_photos/default.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}
.bg_about {
  background: url(../images/cover_photos/about_us.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}
.bg_services {
  background: url(../images/cover_photos/our_services.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;		
}
.bg_technologies {
  background: url(../images/cover_photos/technologies.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;		
}
.plain_bg {
	background:url(../images/template/binding_light.png) repeat;
	_background:none;
	*background:none;	
}
.header_bg {
	position: fixed;
	width: 100%;
	height: 52px;
	top: 0;
	background: url(../images/template/binding_light.png) repeat;
	_background: none;
	*background: none;
	
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.5);
	-moz-box-shadow: 0 1px 5px rgba(0,0,0,.5);
	box-shadow: 0 1px 5px rgba(0,0,0,.5);

	opacity: 0.75; filter:alpha(opacity=75); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
	z-index: 10;
}
#header_container {
	position: fixed;
	width: 100%;
	height: 60px;
	top: 74px;
	left: 0;
	z-index: 3;
}
h1 {
	position: relative;
	top: 20px;
	height: 24px;
	text-align: center;
	z-index:3;
}
h2 {
	position: relative;
	top: -76px;
	width: 30%;
	padding:10px;
	margin: auto;

	-webkit-border-radius:0 0 0.8em 0.8em;
	-moz-border-radius:0 0 0.8em 0.8em;
	border-radius:0 0 0.8em 0.8em;
	
	background:url(../images/template/black-linen.png) repeat;
	opacity:0.85; filter:alpha(opacity=85); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";

	z-index:3;
}
h3 {
	margin-top:0;
	padding: 10px;

	-webkit-border-radius:0.2em;
	-moz-border-radius:0.2em;
	border-radius:0.2em;
}
h4 {
	margin: 0;
	padding: 10px;
}
#slogan {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
#hotline {
    position: fixed;
    left: 20px;
    bottom: 46px;
    background: rgba(0, 0, 0, 0) url("../images/template/hotline.png") no-repeat scroll 0 0;
    padding-top: 36px;
    height: 92px;
    width: 128px;
    z-index: 3;
}
#container {
	position: relative;
	width: 100%;
	max-width: 1200px;
	top: 0;
}
#logo {
	position: fixed;
	top: 32px;
	left: 32px;
	z-index: 20;
}
.navigation_bg {
	position: fixed;
	top: 10px;
	width: 100%;
	height: 32px;
	background: url(../images/template/menu_bg.png) repeat-x;
	_background: none;
	*background: none;
	text-align: center;

	z-index: 11;
}
#navigation_container {
	position: fixed;
	top: 10px;
	width: 100%;
	text-align: center;
	
	z-index: 12;
}
#mobile_home {
	display: none;
}
#main_navigation {
	position: absolute;
	top: 0;
	width: 100%;
	height: 30px;

	z-index:13;
}
#main_navigation ul {
	margin: 0;
	padding:0;
}
#main_navigation li {
	list-style:none;
	display: inline-block;
	margin: 4px 1%;
}
#main_navigation a {
	display: block;
	line-height: 22px;
	
	border-left: 2px transparent solid;
	border-right: 2px transparent solid;	
	padding: 0 5%;
}
#main_navigation a:hover {
	background: rgb(0, 0, 0);
	/* RGBa with 0.6 opacity */
	background: rgba(0, 0, 0, 0.6);
	/* For IE 5.5 - 7*/
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#9e0b0f, endColorstr=#9e0b0f);
	/* For IE 8*/
	-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr=#9e0b0f, endColorstr=#9e0b0f)";
	width:96%;

	border-left: 2px #fff solid;
	border-right: 2px #fff solid;	
}
#projects {
  /* Prevent vertical gaps */
  margin-top: 52px;
  line-height: 0;
   
  -webkit-column-count: 4;
  -webkit-column-gap:   0px;
  -moz-column-count:    4;
  -moz-column-gap:      0px;
  column-count:         4;
  column-gap:           0px;  
}
#projects img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}
.main_content {
	position:absolute;
	top:260px;
	right: 0;
	width: 30%;
	padding: 20px 40px;

	background:url(../images/template/wov.png) repeat;
	_background:none;
	*background:none;

	opacity:0.85; filter:alpha(opacity=80); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

	-webkit-border-radius: 2em 0 0 2em;
	-moz-border-radius: 2em 0 0 2em;
	border-radius: 2em 0 0 2em;

	border: #000 dashed 1px;

	z-index: 10;
}
.inner_container {
	max-width: 960px;
	margin: 180px auto 60px;
}
.main_content ul li {
	padding:0 0 0 24px;
	background:url(../images/bullet.gif) no-repeat left center;	
}
.cover_photo {
	position: absolute;
	width: 1200px;
	height: 900px;
	top: 0;
	text-align: center;
	overflow: hidden;

	z-index: 1;
}
.cover_photo::after {
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image */
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.7);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.7);                
    width: 70%; 
    left: 15%; /* one half of the remaining 30% */
    height: 30px;
    bottom: 0;
}
.new_arrival_content {
	position:absolute;
	top:180px;
	width: 100%;
}
#open,
#close {
	position:absolute;
	width:32px;
	height:32px;
	left: 10px;
	top: 10px;
}
#open {
	display:none;
}
.products {
	width:808px;
	margin:auto;
}
.photocradle {
	width:400px;
	height:400px;

	z-index:15;
}
.curtain_left {
	position:absolute;
	top:52px;
	left:0;
	width:248px;
	height:678px;

	background:url(../images/arrival_curtain.png) no-repeat;
	background-image:none\9;
	
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
	
	z-index:3;
}
.curtain_right {
	position:absolute;
	top:52px;
	right:0;
	width:248px;
	height:678px;
	
	background:url(../images/arrival_curtain.png) no-repeat;
	background-image:none\9;
	
	z-index:3;
}
.photocradle-box {
	z-index: 1 !important;
}
.fb {
	position: fixed;
	top: 60px;
	right: 10px;
	width: 64px;
	height: 64px;

	z-index: 3;
}
#copyright {
	position: fixed;
	width:100%;
	height:26px;
	bottom:0;
	background:url(../images/template/binding_dark.png) repeat;
	border-top: 3px #c52b1c solid;
	z-index:10;
}
#fotorama_container {
	margin-top: 52px;
}
.fotorama__wrap{
	margin: auto;
}
.fotorama__stage {
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.3);
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.3);
	box-shadow: 0px 0px 5px rgba(0,0,0,.3);

}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color:transparent;
    border:0;
    overflow:hidden;
    /* IE 6/7 fallback */
    *text-indent:-9999px;
}

.ir:before {
    content:"";
    display:block;
    width:0;
    height:150%;
}

/*
 * Hide from both screenreaders and browsers:h5bp.com/u
 */

.hidden {
    display:none !important;
    visibility:hidden;
}

/*
 * Hide only visually, but have it available for screenreaders:h5bp.com/v
 */

.visuallyhidden {
    border:0;
    clip:rect(0 0 0 0);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard:h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip:auto;
    height:auto;
    margin:0;
    overflow:visible;
    position:static;
    width:auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility:hidden;
}

/*
 * Clearfix:contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content:" "; /* 1 */
    display:table; /* 2 */
}

.clearfix:after {
	visibility:hidden;
    clear:both;
	height:0;
}
/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom:1;
}
.black_alpha {
	background:rgb(0, 0, 0);
	/* RGBa with 0.6 opacity */
	background:rgba(0, 0, 0, 0.70);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

.rotate {
	/* Safari */
	-webkit-transform:rotate(-90deg);
	/* Firefox */
	-moz-transform:rotate(-90deg);
	/* IE */
	-ms-transform:rotate(-90deg);
	/* Opera */
	-o-transform:rotate(-90deg);
	/* Internet Explorer */
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
	margin:0.5em 0;
	color:#FFFFFF;
	padding:1em;
	font-size:1.1em;
	background-color:#8a1122;
	text-align:center;
	border:3px solid #222222;
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {
		h2 {
			width: 40%;
		}
		#logo {
			left: 28px;
		}
		#main_navigation a {
			padding: 0 3%;
		}
    }
    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
		h1 {
			top: 72px;
		}
		h2 {
			width: 100%;
			top: -10px;
			padding: 0;
		}
		#header_container {
			position: relative;
			top: 120px;
		}
		#logo {
			position: relative;
			width: 100%;
			top: -80px;
			left: 0;
			text-align:center;
		}
		.header_bg	{
			position: relative;
			top: -90px;
		}
		.navigation_bg {
			position: relative;
			top: -130px;
		}
		#navigation_container {
			position: relative;
			top: -157px;
		}
		#mobile_home {
			display: block;
			cursor: pointer;
		}
		#main_navigation ul {
			display: none;
			background-color: #000;
			margin-top: 20px;
		}
		#main_navigation ul li {
			width: 100%;
		}
		.main_content {
			width:40%;
		}
		.fb {
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 30;
		}
		.inner_container {
			margin: -50px auto 60px;
		}
		#fotorama_container {
			margin-top: -52px;
		}		
		.fotorama__wrap{
			margin: 0 auto 30px;
		}
		.curtain_left,
		.curtain_right {
			display: none;
		}
		.new_arrival_content {
			top: 240px;
		}
	}

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
		.row {
			margin-bottom: 0!important
		}
		.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 {
			width: 100%;
			margin-right: 0;
			margin-left: 0;
			margin-bottom: 20px
		}
		h1,
		.fb {
			visibility: hidden;
		}
		.main_content {
			width: 60%;
		}
		#hotline {
			display: none;
		}
		.photocradle {
			width: 200px;
			height: 200px;
		}		
    }
@media print,
       (-o-min-device-pixel-ratio:5/4),
       (-webkit-min-device-pixel-ratio:1.25),
       (min-resolution:120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection:h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background:transparent !important;
        color:#000 !important; /* Black prints faster:h5bp.com/s */
        box-shadow:none !important;
        text-shadow:none !important;
    }

    a,
    a:visited {
        text-decoration:underline;
    }

    a[href]:after {
        content:" (" attr(href) ")";
    }

    abbr[title]:after {
        content:" (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content:"";
    }

    pre,
    blockquote {
        border:1px solid #999;
        page-break-inside:avoid;
    }

    thead {
        display:table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside:avoid;
    }

    img {
        max-width:100% !important;
    }

    @page {
        margin:0.5cm;
    }

    p,
    h2,
    h3 {
        orphans:3;
        widows:3;
    }

    h2,
    h3 {
        page-break-after:avoid;
    }
}