/* ==========================================================================
	Global Settings
========================================================================== */

/*
* Boxsizing set to border box http://css-tricks.com/box-sizing/
*/

/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets 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;
}

/*
* Body settings, change it as required
*/

body { background:#f3f6f8; font-family: 'IMFELLGreatPrimerPRORegular', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size:19px; line-height:25px; color:#000000; letter-spacing:2px;}


/*
* Headings
*/

h1, h2, h3, h4, h5, h6 { font-family: 'IMFELLGreatPrimerPRORegular', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight:normal; text-rendering: optimizeLegibility; color:#000000; margin-top:0; }

h2 { font-size:25px; line-height:28px; text-transform:uppercase; margin-bottom:32px;}
h3 { font-size:21px; line-height:24px;}

/*
* Paragraphs
*/

p { font-size:19px; line-height:25px; font-weight:normal; color:#000000; margin-top:0; margin-bottom:20px; }


/*
* Links
*/

a { color: #010101; text-decoration: none; line-height: inherit; }
a:hover { color: #010101; }
a:focus { color: #010101; outline: none; }
p a, p a:visited { line-height: inherit; }


/*
* 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; max-width: 100%; height: auto; -ms-interpolation-mode: bicubic;
}


/*
* Remove default fieldset styles.
*/

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


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

textarea {
    resize: vertical;
}


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

/*
* Floats
*/

.left { float: left; }

.right { float: right; }


/*
* Text Alignment
*/

.text-left { text-align: left; }

.text-right { text-align: right; }

.text-center { text-align: center; }


/*
* Image Alignment
*/

img.alignleft { float:left; margin:0 10px 10px 0; display: inline;}

img.alignright { float:right; margin:0 0px 10px 10px; display: inline;}

img.aligncenter { display:block; margin-left:auto; margin-right:auto; margin-bottom:10px;}


/*
* 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
*/

/*
* More semantic version as described in http://css-tricks.com/snippets/css/clear-fix/
*/
.group:after {
  content: "";
  display: table;
  clear: both;
}

/*
* overflow method for clearing floats
*/
.floatbox { overflow:hidden; }

/*
* older method of adding empty tags for clearing
*/
.clear { clear: both; height:1px; line-height:1px; }


/*
* Chromeframe
*/
.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/*
* Post
*/
.post h2 { font-size:25px; line-height:28px; text-transform:uppercase; margin-bottom:32px;}
.post h3 { font-size:21px; line-height:24px;}
.post h4 { font-size:19px; line-height:22px;}
.post h5 { font-size:16px; line-height:19px;}

.post p { font-size:19px; line-height:25px; font-weight:normal; color:#000000; margin-top:0; margin-bottom:26px; }

/* ==========================================================================
	Layout
========================================================================== */
/*
* Wrapper
*/ 
.wrapper {max-width:1060px; margin:0 auto;}

/*
* Container
*/
#container{ min-width:320px; overflow:hidden; padding-bottom:36px;}

/*
* Header
*/
#header { background:#ffffff; padding:17px 0 16px; position:fixed; z-index:2; width:100%;}

/*
* Main-navigation
*/
#main-navigation {float:right;}

/*
* Main
*/
#main { margin-top:60px; padding-top:0;}


/*
* Footer
*/
#footer { background:#fdfdfe; padding:5px 0;}

/* ==========================================================================
	Common Functionalities & UI Elements
========================================================================== */

/*
* Logo
*/
.logo { float:left; position:relative; width:270px; padding:0;}
.logo h1 { margin:0;}
.logo h1 a { display: block; width:270px; height:27px; position:relative;}
.logo h1 a span { background:url(../images/theme/logo.png) no-repeat left top; display: block; height:0; padding-top:27px; overflow:hidden; width:100%; color:#fff;}

/*
* Main-navigation
*/
#main-navigation ul { margin:0; padding:0; list-style:none;}
#main-navigation ul li { display:inline-block; text-transform:uppercase; margin-right:12px; }
#main-navigation ul li.last { margin-right:0;}
#main-navigation ul li a { font-size:17px; line-height:20px;}


/*
* Welcome
*/
.welcome { background:url(../images/theme/welcome-bg.jpg) no-repeat  center top; text-align:center; color:#010101; padding:391px 45px 107px 0; letter-spacing:1px;}
.welcome h2 { color:#010101; margin-bottom:21px;}
.welcome p {font-size:21px; line-height:29px; margin-bottom:49px;}

/*
* sociables
*/
ul.sociables { margin:0 auto; padding:0; list-style:none; width:100%; max-width:196px;}
.sociables li { float:left; margin-right:13px;}

#contact  ul.sociables { margin:0; padding-left:15%;}

/*
* section
*/
.section { padding:103px 0 5px; margin-top:-60px; position:relative; z-index:1; text-align:center; border-top:1px solid #000000;}

#about { margin-top:-30px; padding-bottom:127px;}

/*
* column
*/
.column { margin-bottom:30px;}
.column p span { font-size:23px; line-height:31px;}

/* images */
.about-image { margin:30px 0 52px;}
.coffee-image{ margin:7px 0 0;}
.location-image { margin:0 0 81px;}

/* products */
#products { position:relative; padding-bottom:130px;}
#products ul { list-style:none; margin:0; padding:0;}
#products .arrow { position:absolute; top:50%; margin-top:-41px; background:url(../images/theme/arrow.png) top no-repeat; width:41px; height:41px; z-index:9999; }
#products .left { left:10%; background-position:left;}
#products .right { right:10%; background-position:right;}
#products .caroufredsel_wrapper { margin-bottom:48px; margin-left:0 !important;}

/* product-info */
.product-info { margin-bottom:15px; width:340px; float:left; text-align:center;}
.product-info .product-image { height:20%; margin-bottom:15px;}
.product-info h3 { line-height:29px; margin-bottom:25px;}
.product-info .price { font-size:21px; line-height:29px; margin-bottom:25px;}
.product-info p { font-size:18px; line-height:25px; letter-spacing:1px; padding-right:25px; }

p.note { font-size:17px; line-height:29px;}

/*
* buttons
*/
.button1 { background:url(../images/theme/button1.jpg) no-repeat left top; display:inline-block; line-height:43px; height:43px; max-width:229px; width:100%; margin-bottom:21px; font-size:21px;}
.button2 { background:url(../images/theme/button2.jpg) no-repeat left top; display:inline-block; line-height:43px; height:43px; width:100%;}
.button3 { background:url(../images/theme/button3.jpg) no-repeat left top; display:inline-block; line-height:43px; height:119px; width:100%;}

/*
* form
*/
.form1 ul { margin:0 auto 24px; padding:0; list-style:none; width:100%; max-width:298px;} 
.form1 ul li { margin-bottom:15px; font-size:19px; line-height:25px;}
.form1 ul li input { padding:0; border:0; text-align:center;}
.form1 ul li textarea { resize:none; border:0; text-align:center;}
.form1 ul li button.button2{ background:#030303; color:#ffffff; border:0;}

/* Contact */
#contact { padding-bottom:54px; padding-top:105px;}
#contact p { margin-bottom:20px;}
#contact p.address { margin-bottom:78px;}
#contact .form1 p.contact-no { margin-bottom:12px;}

/*
* Footer
*/
#footer .copyright { float:left; letter-spacing:0;}
#footer .copyright p { font-size:13px; line-height:30px; color:#121212; margin:0; text-transform:uppercase;}
#footer ul.sociables { float:right; max-width:132px;}
#footer ul.sociables li { margin-right:8px;}
/* ==========================================================================
	Page Specific
========================================================================== */

/*
* Home page
*/

/*---- Media Queries ----*/

@media (min-width:1200px) {
	#main .column { padding-right:50px; padding-left:10px;}
	#footer .copyright { padding-left:12px;}
	#products .right {}
}

@media (max-width:1333px) {
	#products .right { right:6%;}
	#products .left { left:6%;}
}

@media (max-width:1192px) {
	#products .right { right:2%;}
	#products .left { left:2%;}
}

@media (max-width:980px) {
	.welcome { background-size:contain; padding-top:45%;}
}

@media (max-width: 767px) {
	#contact  ul.sociables { margin:0 auto; padding-left:0;}

}

@media (max-width: 685px) {
	#main .welcome { padding-right:15px; margin-top:108px;}

}


@media (max-width: 650px) {
	
	.logo { float:none; width:auto; margin-bottom:15px;}
	.logo h1 a { width:auto;}
	.logo h1 a span { background-position:center top;}
	
	#main-navigation {float:none; width:auto; text-align:center;}
	
	.welcome h2 { font-size:21px;}
	.welcome p { font-size:17px;}

	.section { padding-top:158px;}

	#footer{ padding:5px 0 8px;}
	#footer .copyright { float:none; width:auto; margin-bottom:15px; text-align:center;}
	#footer ul.sociables { float:none; margin:0 auto;}

}

@media (max-width: 505px) {
	.welcome h2 { font-size:19px;}
	.welcome p { font-size:15px;}

}

@media (max-width: 356px) {
	#main-navigation ul li { margin-right:2px;}

}

@media (max-width: 336px) {
	#main-navigation ul li a { font-size:15px;}
	#contact .column { padding:0;}

}

/* ==========================================================================
	Cross Browser CSS
	Documentation: http://rafael.adm.br/css_browser_selector/
========================================================================== */

/*Use to make CSS 3 Rounded Corners , Text Shadows and Box Shadows for IE */
/* .ie .css3 { behavior: url("assets/javascripts/vendor/PIE.htc"); position:relative; } */