/*
Theme Name: Zinpho
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/**
 * Table of Contents:
 *
 * 1.0 - Reset
 * 2.0 - Repeatable Patterns
 * 3.0 - Basic Structure
 * 4.0 - Header
 *   4.1 - Site Header
 *   4.2 - Navigation
 * 5.0 - Content
 *   5.1 - Entry Header
 *   5.2 - Entry Meta
 *   5.3 - Entry Content
 *   5.4 - Galleries
 *   5.5 - Post Formats
 *   5.6 - Attachments
 *   5.7 - Post/Paging Navigation
 *   5.8 - Author Bio
 *   5.9 - Archives
 *   5.10 - Search Results/No posts
 *   5.11 - 404
 *   5.12 - Comments
 *   5.13 - Multisite
 * 6.0 - Sidebar
 *   6.1 - Widgets
 * 7.0 - Footer
 * 8.0 - Media Queries
 * 9.0 - Print
 * ----------------------------------------------------------------------------
 */


/**
 * 1.0 Reset
 *
 * Modified from Normalize.css to provide cross-browser consistency and a smart
 * default styling of HTML elements.
 *
 * @see http://git.io/normalize
 * ----------------------------------------------------------------------------
 */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
 	padding: 0;
 	border: 0;
 	font-size: 100%;
 	font: inherit;
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
 body {
 	line-height: 1;
 }
 ol, ul {
 	list-style: none;
 }
 blockquote, q {
 	quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
 	content: '';
 	content: none;
 }
 table {
 	/* border-collapse: collapse; */
 	border-spacing: 0;
 }
 
 
a:focus {
    outline: none;
}

html { 

  height:100%;
}


body{
font-family: 'Carme', 'sans-serif';
font-size:14px;
margin:0px;
padding:0px;
color:#787878;
line-height:22px;
height:100%;
background-color:#eeeeee;

}


/*
body#home{
  background: url(../images/bg/home.jpg) no-repeat center center fixed ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
*/


 

body#contact{
  background: url(../images/bg/sliver.jpg) no-repeat top center fixed ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
  
  
  
a{ color:#8e3031;text-decoration:none; }
a:link{ color:#8e3031;  }
a:visited{ color:#8e3031;  }
a:active{ color:#8e3031;  }
a:hover{ color:#8e3031; border-bottom:0px solid #8e3031; }

a.no-color{ color:#ffffff;text-decoration:none; }
a.no-color:link{ color:#ffffff;  }
a.no-color:visited{ color:#ffffff;  }
a.no-color:active{ color:#ffffff;  }
a.no-color:hover{ color:#8e3031; border-bottom:0px solid #787878; }

a.button{
background-color:#8e3031;
border:0px solid #dcdcdc;
display:inline-block;
color:#ffffff;
font-size:12px;
line-height:12px;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-align:center;
margin:0px;
padding:13px 30px; 
letter-spacing: 2px;
}

a.button:hover {
color:#8e3031;
background-color:#dedede;
}

.highlight{
font-size:18px;
font-weight:bold;
text-transform:uppercase;
}

h1{
font-size:26px;
margin:0px 0px 10px 0px;
padding:0px 0px 0px 0px;
color:#8e3031;
line-height:36px;
font-weight:400;
text-transform:uppercase;
letter-spacing:1px;
}





h2{
font-size:18px;
margin:0px 0px 0px 0px;
padding:0px 0px 14px 0px;
color:#8e3031;
line-height:18px;
font-weight:400;
text-transform:uppercase;
letter-spacing:1px;
border-bottom:1px solid #dedede;
text-align:center;
}


hr{
margin:20px 0px;
}



ul.bullet{
margin:0px 0px 0px 20px;
}

ul.bullet li { list-style-type: square; padding:3px 0px;}


.italics{
font-style:italic;
}



.gray{
color:#a1a1a1;
}

p{
margin:0px;
padding:7px 0px 7px 0px;
}

img{
border:0px;
margin:0px;
padding:0px;
}

.clear {clear:both;}

header{
width:100%;
height:100px;
background-color:#ffffff;
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.7);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.7);
margin:0px;
border-bottom:1px solid #dedede;
}


header .content{
width:1000px;
margin:0px auto;
text-align: center;
}


header .content #logo{
float:left;
margin:20px 0px 0px 0px;
}

header .content nav{
float:right;
}

nav.large{display:block;}
nav.small{display:none;    text-align:center;}

nav{
text-transform:uppercase;
font-size:16px;
    list-style:none;
    margin-bottom:10px;
    float:left; /* Clear floats */
    position:relative;
    z-index:5;
    text-align:left;
    margin-top:32px;
}


nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
nav a{
    display:block;
    padding:8px 10px 8px 10px;
    background:#ffffff;
    text-decoration:none;
    width:110px;
    text-align:center;
   color:#787878;
}

	
nav.large a:hover{
    color:#8e3031;
    border-bottom:0px solid #8e3031
    background:#ffffff;
    text-decoration:none;
}


nav.large a{
    color:#787878;
 border-bottom:0px solid #8e3031
    background:#ffffff;
    text-decoration:none;
}



/*--- DROPDOWN ---*/
nav ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
nav ul li{
font-size:11px;
line-height:15px;
    padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
    border-bottom:1px solid #dedede;
}
nav ul li:last-child{
    border-bottom:0px solid #dedede;
}
nav ul a{
    text-align:left;
}
nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}

nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background:#ffffff;
    text-decoration:none;
}
nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}
nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background:#f4f4f4;
}



nav.small{
width:100%;
background-color:#ffffff;
border-top:1px solid #dedede;
}
	


nav.small a{
display:inline;
float:left;
padding:8px 10px 8px 10px;
background:#ffffff;
text-decoration:none;
width:33.3%;
text-align:center;
border-left:1px solid #dedede;
border-bottom: 1px solid #dedede;
}

nav.small a:first-child{
border-left:0px solid #ff0000;
}


nav.small a:hover{
    text-decoration:none;
    background:#f4f4f4;
}
	
	
	
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-ms-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}

#hero{
width:100%;
padding:0px 0px 0px 0px;
background-image: url(../images/bg/hero.jpg);
background-color:#242424;
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 50s linear infinite;
-ms-animation: animatedBackground 50s linear infinite;
-moz-animation: animatedBackground 50s linear infinite;
-webkit-animation: animatedBackground 50s linear infinite;
}



#hero .content{
width:1000px;
margin:0px auto;
 }

/*
#hero .content img{
width:350px;
float:left;
}


#hero .content .text{
width:650px;
float:left;
font-size:30px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
color:#ffffff;
line-height:40px;
font-weight:400;
text-transform:uppercase;
letter-spacing:2px;
}


#hero .content .text h1{
font-size:60px;
color:#8e3031;
line-height:60px;
font-weight:400;
text-transform:uppercase;
letter-spacing:2px;
margin:120px 0px 20px 0px;
padding:0px 0px 0px 0px;
}


#hero .content .text .button{
margin:20px 0px 20px 0px;
}

*/


#features{
margin:0px 0px 0px 0px;
background-color:#ffffff;
padding:0px 0px 50px 0px;
}


#features .content{
width:1000px;
margin:0px auto;
}


#features .content .feature{
width:313px;
float:left;
margin: 20px 30px 0px 0px;
padding:20px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.5);
-moz-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.5);
box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.5);
border: 4px solid #f5f5f5;
background-color:#ffffff;
text-align:center;
}


#features .content .feature.last {
margin: 20px 0px 0px 0px;
}


#features .content .feature p {
margin: 10px 0px 10px 0px;
text-align:left;
}

 

#features .content .feature .button {
 margin:0px auto;
}
 






 

#main{
width:100%;
padding:0px 0px 0px 0px;
background-color:#ffffff;
text-align:left;
}

#main .content{
width:1000px;
margin:0px auto;
padding:50px 0px 50px 0px;
}

 
#main .content a:hover{ color:#8e3031; border-bottom:1px solid #8e3031; }

.img-right{
float:right;
margin:0px 0px 20px 50px;
border:8px solid #ffffff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(144,144,144,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(144,144,144,0.5);
box-shadow: 0px 0px 5px 0px rgba(144,144,144,0.5);
}

.img-left{
float:left;
margin:0px 50px 20px 0px;
border:8px solid #ffffff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(144,144,144,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(144,144,144,0.5);
box-shadow: 0px 0px 5px 0px rgba(144,144,144,0.5);
}

.section{
margin:50px 0px 0px 0px;

}

.section img{
float:left;
width:450px;
}

.section .text{
float:left;
width:500px;

}


.logos{
text-align:center;
margin:40px auto 0px auto;
width:100%;
}



.logos img{
margin:20px 10px 0px 10px;
height:50px;
}


.logos .no-logo{
color:#bebebe;
padding:0px;
display:inline-block;
margin-top:-20px;
}




#footer{
font-size:10px;
line-height:14px;
line-height:26px;
width:100%;
color:#808080;
position:relative;
padding:0px 0px 0px 0px;
background-color:#eeeeee;
border-top:1px solid #dedede;
}



#footer  .content{
width:1000px;
margin:0px auto;
padding:25px 0px 25px 0px;
text-align:center;
text-transform:uppercase;
}

 
 

@media all and (max-width: 1000px) {




	header{
	height:125px;
	border-bottom:0px solid #dedede;
	}


	header .content{
	width:100%;
	margin:0px auto;
	}


	
	header .content #logo{
	float:none;
	width:233px;
	height:61px;
	margin:10px 0px;
	}

	header .content nav{
	float:none;
	margin:0px auto;
	}
	
 
	
	nav.large{display:none;}
	nav.small{display:block;} 
	




	#hero{
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	width:100%;
	min-width:240px;
	}


	#hero .content{
	width:100%;
	margin:0px auto;
	}

/*
	#hero .content img{
	width:35%;
	height:35%;
	}



	#hero .content .text{
	width:60%;
	font-size:22px;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	line-height:26px;
	}

	#hero .content .text h1{
	font-size:36px;
	line-height:36px;
	margin:50px 0px 15px 0px;
	padding:0px 0px 0px 0px;
	}

	#hero .content .text .button{
	margin:15px 0px 0px 0px;
	}
*/





	#features{
	margin:0px 0px 0px 0px;
	background-color:#ffffff;
	padding:0px 0px 0px 0px;
	width:100%;
	min-width:240px;
	}


	#features .content{
	width:100%;
	margin:0px auto;
	}


	#features .content .feature{
	width:90%;
	display:block;
	margin:25px 5% 0px 5%;
	padding:20px;
	text-align:center;
	}


	#features .content .feature.last {
	margin:25px 5% 25px 5%;

	}





	
	
	#main{
	width:100%;
	min-width:240px;
	}

	#main .content
	{
	width:100%;
	margin:0px auto;
	padding:25px 25px 25px 25px;
	}
	
	
	
 



	#footer{
	width:100%;
	min-width:240px;
	}

	#footer  .content{
	width:100%;
	margin:0px auto;
	padding:25px 0px 25px 0px;
	}



}


@media all and (max-width: 860px) and (min-width: 761px) {





}

@media all and (max-width: 760px) {




}


@media all and (max-width: 600px) {



	header{
	height:104px;
	
	}


	header .content{
	width:100%;
	margin:0px auto;
	}


	
	header .content #logo{
	float:none;
	width:153px;
	height:40px;
	margin:10px 0px;
	}
	




	#hero .content .text{
	font-size:16px;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	line-height:20px;
	}

	#hero .content .text h1{
	font-size:24px;
	line-height:24px;
	margin:20px 0px 10px 0px;
	padding:0px 0px 0px 0px;
	}

	#hero .content .text .button{
	margin:10px 0px 0px 0px;
	}




	 


	
}


@media all and (max-width: 400px) {



	
}