/** Generated by FG **/
@font-face {
	font-family: 'Conv_BEBAS__';
	src: url('fonts/BEBAS__.eot');
	src: local('?'), url('fonts/BEBAS__.woff') format('woff'), url('fonts/BEBAS__.ttf') format('truetype'), url('fonts/BEBAS__.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Conv_GothamBook';
	src: url('fonts/GothamBook.eot');
	src: local('?'), url('fonts/GothamBook.woff') format('woff'), url('fonts/GothamBook.ttf') format('truetype'), url('fonts/GothamBook.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

a{color:#000;text-decoration:none;}
a:hover{text-decoration:underline;}

body,form,h6,h5,h4,h3,h2,h1,ul{margin:0;padding:0;font-family:'Conv_GothamBook';font-size: 12px;}
.clear{clear: both;}
.fleft{float:left;}
.fright{float:right;}
	
#wrapper{width: 1000px;margin: 0 auto;overflow: hidden;}
.contact_wrapper{width: 1000px;margin: 0 auto;overflow: hidden;}
.footer_wrapper{width: 1000px;margin: 0 auto;overflow: hidden;}

/*Header*/
#header{height: 120px;width:1000px;}

/*Logo*/
#home{position: absolute;bottom: 0px;display:none;}
#home a{display:block;width: 211px;height: 89px;background-image: url('../images/home.png');background-size: 211px 89px;}

/*Menu*/
#menu{float:right;margin-top: 30px;}
#navigation ul{}
#navigation li{list-style: none;float: left;}
#navigation li a{font-family:arial, helvetica, sans-serif;text-decoration: none;padding-left: 20px;font-size: 12px;color: grey;font-weight: normal;letter-spacing: 2px;}
#navigation li a:hover{text-decoration: underline;}
/*Content*/
#content{padding: 30px 0 0px 0;}

.top_heading{color: #808285;font-size: 30px;float: right;margin-top: -58px;margin-right: 255px;position: relative;z-index: 99999999999;}

/******************* Contact Page *****************/
#contact_page{}
.cp_left{}
.cp_right{width:400px;margin-top:100px;}
.submit_btn{border:0;color:#6d6e70;background:#fff;border-radius:10px;cursor:pointer;padding:5px 8px;}
.textbox{width:389px;background:white;border:0px;height:20px;color:#6d6e70;margin-bottom:20px;padding:5px;font-family: 'Conv_GothamBook';}
.textarea{width:389px;background:white;border:0px;height:100px;color:#6d6e70;margin-bottom:20px;padding:5px;font-family: 'Conv_GothamBook';}
.error{border:1px solid red;}

/************* Footer **************/
#footer_top{height: 20px;margin-top:30px;border-top:1px dashed #77787b;border-bottom:1px dashed #77787b;font-size:16px;color:#231f20;padding-top:5px;padding-bottom:5px;display:none;}
.footer_top_left{width:340px;height: 20px;}
.footer_top_middle{width: 480px;height: 100px;font-size: 11px;text-align: center;}
.footer_top_right{width:175px;height: 20px;}
#footer{height: 80px;padding-top:20px;color:#6d6e71;font-size:12px;display:none;}
.footer_left{width:300px;height: 100px;padding-right:40px;}
.footer_middle{width: 480px;height: 100px;font-size: 11px;text-align: center;}
.footer_right{width:175px;height: 100px;}


/*Home Page*/
#homelinks{list-style: none;margin: 0 auto;width: auto;display: block;margin-right: -45px;float:left;margin-bottom: -45px;}
.viewport {width: 310px;height: 234px;float: left;margin: 0 45px 45px 0;position: relative;overflow:hidden;}
.viewport a {display: block;position: relative;overflow:hidden;overflow:hidden;width: 310px;height: 234px;}
.viewport a img {position: relative;left: -20px;top: -20px;width: 310px;height: 234px;}
.viewport a span {height: 100%;padding-top: 95px;display: none;width: 100%;position: absolute;text-align: center;text-decoration: none;z-index: 100;font-family:'Conv_BEBAS__';font-size: 33px;font-weight:normal;letter-spacing:4px;}
.dark-background {background-color: rgba(15, 15, 15, 0.6);color: #fff;text-shadow: #000 0px 0px 15px;}


			

/*
#homelinks li#print{background: url('../images/print.png');}
#homelinks li#logo{background: url('../images/logo.png');}
#homelinks li#packaging{background: url('../images/packaging.png');}
#homelinks li#branding{background: url('../images/branding.png');}
#homelinks li#illustration{background: url('../images/illustration.png');}
#homelinks li#digital{background: url('../images/digital.png');}


#homelinks li#print:hover{background: url('../images/print.png') 0 -275px;}
#homelinks li#logo:hover{background: url('../images/logo.png') 0 -275px;}
#homelinks li#packaging:hover{background: url('../images/packaging.png') 0 -275px;}
#homelinks li#branding:hover{background: url('../images/branding.png') 0 -275px;}
#homelinks li#illustration:hover{background: url('../images/illustration.png') 0 -275px;}
#homelinks li#digital:hover{background: url('../images/digital.png') 0 -275px;}
*/


/*Time to apply widths for accordian to work
Width of image = 640px | 875px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px; | 875+40*4 = 1035
default width = 800/5 = 160px;
*/

.accordian {
	width: 1000px; height: 426px;
	overflow: hidden;
	
	/*Time for some styling*/
	margin: 0 auto;
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
	width: 2000px;
	/*This will give ample space to the last item to move
	instead of falling down/flickering during hovers.*/
}

.accordian li {
	position: relative;
	display: block;
	width: 170px;
	float: left;	
	border-left: 1px solid #888;	
	box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	
	/*Transitions to give animation effect*/
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	/*If you hover on the images now you should be able to 
	see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 65px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 745px;}


.accordian li img {
	display: block;
}

.print_img{width:745px;height:426px;}

/*Image title styles*/
.image_title {
	position: absolute;
	left: 0; bottom: 0;	
	width: 745px;	
}
.image_title a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 20px;
	font-family:'Conv_BEBAS__';
	font-size: 20px;
	letter-spacing:3px;
	text-shadow: #000 0px 0px 15px;
}

/******** Measurement Page **************/
#measure{}
.measure_left{width:1000px;}
.img_container{width:1000px;clear:both;float:left;margin-bottom:50px;}
.img_container_left{width:750px;}
.img_container_right{width:210px;padding-left:40px;}
.description{color:#58595b;padding-top:150px;}
.desc_one{padding-bottom:5px;}
.desc_two{padding-bottom:7px;padding-top:7px;}
.desc_three{padding-bottom:5px;}
.bottom_content{padding-bottom:200px;}
.slide{height: 28px;width: 1000px;margin-bottom: 30px;clear: both;}
.slide_left{width:10px;height:28px;cursor:pointer;}
.slide_middle{width:980px;height:24px;text-align:center;margin-top:4px;}
.slide_right{width:10px;height:28px;cursor:pointer;}

/*************** Home page zoom *************/
#print {width: 300px;height:224px;-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-o-transition: all .1s ease-out;   transition: all .1s ease-out;background-image: url(../images/print.jpg);background-size:310px 234px;background-position: center; overflow:hidden;background-repeat: no-repeat;}
#print:hover {background-position:center;width: 300px;height:224px;background-image: url(../images/print.jpg);background-size:300px 224px;}
#logo {width: 300px;height:224px;-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-o-transition: all .1s ease-out;   transition: all .1s ease-out;background-image: url(../images/logo.jpg);background-size:310px 234px;background-position: center; overflow:hidden;background-repeat: no-repeat;}
#logo:hover {background-position:center;width: 300px;height:224px;background-image: url(../images/logo.jpg);background-size:300px 224px;}
#packaging {width: 300px;height:224px;-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-o-transition: all .1s ease-out;   transition: all .1s ease-out;background-image: url(../images/packaging.jpg);background-size:310px 234px;background-position: center; overflow:hidden;background-repeat: no-repeat;}
#packaging:hover {background-position:center;width: 300px;height:224px;background-image: url(../images/packaging.jpg);background-size:300px 224px;}
#branding {width: 300px;height:224px;-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-o-transition: all .1s ease-out;   transition: all .1s ease-out;background-image: url(../images/branding.jpg);background-size:310px 234px;background-position: center; overflow:hidden;background-repeat: no-repeat;}
#branding:hover {background-position:center;width: 300px;height:224px;background-image: url(../images/branding.jpg);background-size:300px 224px;}
#illustration {width: 300px;height:224px;-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-o-transition: all .1s ease-out;   transition: all .1s ease-out;background-image: url(../images/illustration.jpg);background-size:310px 234px;background-position: center; overflow:hidden;background-repeat: no-repeat;}
#illustration:hover {background-position:center;width: 300px;height:224px;background-image: url(../images/illustration.jpg);background-size:300px 224px;}
#digital {width: 300px;height:224px;-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-o-transition: all .1s ease-out;   transition: all .1s ease-out;background-image: url(../images/digital.jpg);background-size:310px 234px;background-position: center; overflow:hidden;background-repeat: no-repeat;}
#digital:hover {background-position:center;width: 300px;height:224px;background-image: url(../images/digital.jpg);background-size:300px 224px;}


/*************** About Page **********************/
#about{background:url(../images/about.jpg);width: 1000px;height: 629px;background-size: 1000px;}
#about_text{background: url(../images/about-text-bg.png);width: 310px;height: 401px;float: right;margin-right: 100px;padding: 10px 25px;}

.heading{color:#231f20;font-size:13px;padding-bottom: 5px;}
.content_text{color:#636466;font-size:12px;padding-bottom: 10px;line-height: 14px;}

.border_odysy{border: 1px solid #808285;padding: 10px;}

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2){
#header, .measure_left{padding: 35px;}
#header, .measure_left, .img_container, .img_container_left, .slide{ width: auto;}
.img_container_left img{width: 47%;}
.slide_middle{width: 95%;}
.description{padding-top:30px;}
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
#header, .measure_left{padding: 35px;}
#header, .measure_left, .img_container, .img_container_left, .slide{ width: auto;}
.img_container_left img{width: 550px;}
.slide_middle{width: 95%;}
 }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }