@font-face {
    font-family: 'phinsternormal';
    src: url('fonts/phinster-webfont.eot');
    src: url('fonts/phinster-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/phinster-webfont.woff') format('woff'),
         url('fonts/phinster-webfont.ttf') format('truetype'),
         url('fonts/phinster-webfont.svg#phinsternormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'phinster_finenormal';
    src: url('fonts/phinster_fine-webfont.eot');
    src: url('fonts/phinster_fine-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/phinster_fine-webfont.woff') format('woff'),
         url('fonts/phinster_fine-webfont.ttf') format('truetype'),
         url('fonts/phinster_fine-webfont.svg#phinster_finenormal') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'juraregular';
    src: url('fonts/jura-webfont.eot');
    src: url('fonts/jura-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/jura-webfont.woff') format('woff'),
         url('fonts/jura-webfont.ttf') format('truetype'),
         url('fonts/jura-webfont.svg#juraregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { font-family: 'phinsternormal';}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
a, img { outline: none; border:none; text-decoration:none;}
p { }
img { display: block;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
	}
input, textarea{outline:none; border:none;}	
/* common */
.clear{clear:both;}
.paddingTop10{ padding-top:10px !important;}
.paddingTop50{ padding-top:50px !important;}
.marginRight10{margin-right:10px;}
.textalignRight{ text-align:right;}
.paddingTop0{ padding-top:0 !important;}

.marginbottom0{ margin-bottom:0 !important;}
/* Structure */
header{border-bottom:2px solid #bfeff3;}
section {background:#dcd8d5;}
footer{ clear:both; font-family: 'juraregular';} 
#wrapper {	width: 100%;	max-width: 990px;	margin: auto;	padding:1.2% 0 1.8% 0;} 
		
/* Structure */
header {
	border-bottom: 2px solid #bfeff3;
}
section {
	background: #dcd8d5;
}
footer {
	clear: both;
	font-family: 'juraregular';
}

/* Logo H1 */
header h1 {
	float: left;
	display: block;
}
/* Nav */
header nav {
	float: right;
	margin-top: 10px;
}
header nav ul {
	padding-top: 22px;
}
header nav li {
	display: inline;
	padding-left: 12px;
}
header nav li a {
	color: #424242;
	text-transform: uppercase;
	font-size: 16px;
}
header nav li a.selected, header nav li a:hover {
	color: #0099bf
}
header nav li:first-child {
	padding-left: 0;
}
header nav .social {
	text-align: right;
	width: 100%;
}
header nav .social ul {/*min-width:105px;*/
	padding-top: 0;
}
header nav .social ul li {
	display: inline-block;
	padding-left: 1%;
	margin-left: 0;
}


/* Logo H1 */
.blogheader h1 {		float: left;	display: block;	}
		
/* Nav */
.blogheader .nav {	float: right;	margin-top: 10px; 	}
.blogheader .nav ul{ padding-top:22px;}	
.blogheader .nav li {		display: inline;		padding-left: 12px;}
.blogheader .nav li a{   color:#424242; text-transform:uppercase; font-size:16px;}
.blogheader .nav li a.selected, header nav li a:hover{color:#0099bf}
.blogheader .nav li:first-child{ padding-left:0;}

.blogheader .nav .social { text-align:right;}
.blogheader .nav .social ul{min-width:105px; padding-top:0;}
.blogheader .nav .social ul li{display:inline-block; padding-left:1%;  margin-left:0;}

/* Banner */			
#banner {	float: left;	width: 100%;	position:relative;}

#banner img {		/*width: 100%;	*/	}
#banner figure{ position:absolute; right:0px; top:0px;}


.blobcontainer { width:100%; background:#0097bf;}
.blobcontent { max-width:1000px; margin:0 auto; padding:0 0 50px;}

.contentleft { margin:48px 0 0 0; max-width:740px; float:left;  padding:0 20px 0 0;}
.contentleft h1{font:35px/40px 'phinster_finenormal'; color:#fff; margin:0 0 10px 0; text-transform: uppercase;}
.contentleft .aboutdragonfly p{font:16px/20px 'phinster_finenormal'; color:#fff; margin:0 0 15px 0;}
.aboutdragonfly{ border-bottom:1px dashed #fff; padding:0 0 25px 0; margin:0 0 25px 0;}

.headtext{ font:34px/37px 'phinster_finenormal'; color:#fff; text-transform:uppercase; padding:25px 0; text-align:center;}
.blogcontent {   float: left;    width: 360px;}
.blogsection h2{ color:#ffffff; font:35px/40px 'phinster_finenormal'; text-transform:uppercase;} 
.blog_block img{ float:left; margin:0 15px 15px 0;}
.blockdate { color:#84ecff; font:17px/20px 'phinster_finenormal'; text-align:right; padding:10px 0 5px 0; text-transform:uppercase; }
.readmore { color:#84ecff; float:right; margin:15px 0 0 0;}
.blog_post { border-bottom: 1px dashed #FFFFFF;
    float: left;
    margin: 18px 0 0;
    padding: 15px 0 25px;}


.blogcontentinner{ width:711px;}
.blog_block { float:left;margin:18px 0 0 0; border-bottom:1px dashed #fff; padding:15px 0 25px; }
.blogcontent p , .blogcontentinner p{font:14px/16px 'phinster_finenormal'; color:#fff;letter-spacing: .5px; }
.bloghead { color:#ffffff; font:25px/30px 'phinster_finenormal'; text-transform:uppercase;} 
.next { color:#84ecff; float:right; margin:15px 0 10px 0;}
.contentright { float:left; width: 188px; margin:48px 0 0 0; padding:0 25px 50px; border-left:1px solid #0bccff;}
.contentright h2 { margin:0 0 10px 0; color: #FFFFFF; text-transform:uppercase;
    font: 35px/40px 'phinster_finenormal'; }
.contentright ul { border-bottom:1px dashed #fff; float:left; padding:0 0 40px 0; margin:0 0 35px;}
.contentright ul li { margin:0 0 10px 0; float:left;   width: 87%;}
.contentright ul li a{ color: #FFFFFF; float:left; padding:0 0 0 11px;
background:url(../images/dashed.jpg) no-repeat left 8px;
    font: 16px/20px 'phinster_finenormal';}	
.rightnav { display:block;}	

/* ------ Pageing ------ */

.pageing { text-align:center; display:block; clear:both;}
.pageing a { display:inline; color:#84ecff; margin:0 7px 0 0;}

/* ------ LeaveComment ------ */
.leavecomment { clear:both; padding:30px 0 0;}
.leavecomment h2{ color: #FFFFFF; margin:0 0 10px 0;
    font: 25px/30px 'phinster_finenormal';
    text-transform: uppercase;}
	.textfield { display:block; margin:0 0 14px 0;}
		.textfield input[type='text'] { width:523px; padding:0 5px; height:33px; font:normal 20px/25px 'phinster_finenormal';}
		.textfield textarea { width:560px; height:172px; padding:5px; resize:none;}
.textfield input[type='submit']{ cursor:pointer; font:21px/27px 'phinster_finenormal'; text-transform:uppercase; padding:1px 8px; color:#0097bf;}
.commenttotal {  font:bold 19px/25px 'phinster_finenormal'; text-transform:uppercase; color:#fff; padding:10px 0 0 0; margin:0 0 5px; width:50%;float: left;}
.comment { background:#0bccff; padding:10px; margin:0 0 10px 0;}	
.userimage { float:left; width:71px; height:79px; background:#fff; margin:0 20px 0 12px;}
.usercomment { float:left; width:83%;}
.usercomment h2 { font:bold 15px/18px 'phinster_finenormal'; color:#000;}
.usercomment p{ font:11px/18px 'phinster_finenormal'; color:#000;}

/* ------ footer ------ */
#footer{clear:both; color:#0f0704; padding:1.3% 0 0.7% 0; text-align:center; background:#bfeff3;font:15px 'juraregular';}
#footer #footerLink{ padding-bottom:5px;}
#footer #footerLink a{ color:#0f0704; padding:0 5px; }
#footer #copyright{font-size:14px;}




@media screen and (min-width: 0px) and (max-width: 600px) {
	header h1 img {
	width: 100%;
}
header nav {
	float: left;
	clear: left;
	margin: 0 0 0px 0;
	width: 100%;
}
header nav ul {
}
header nav li {
	margin: 0;
	display: block;
	border-top: 1px solid #07a8d0;
	background: #0099bf;
	padding: 0;
}
header nav li a {
	margin-left: 15px;
	display: block;
	border-bottom: 1px solid #018db0;
	color: #fff;
	padding: 5px;
}
header nav li a.selected, header nav li a:hover {
	color: #fff;
}
header nav .social li {
	background: none;
	border: none;
}
header nav .social li a {
	border: none;
	margin: 0;
	padding: 0;
}
.social {
	position: absolute;
	right: 0;
	text-align: right;
	top: 60px;
	width: 90% !important;
}
header h1 {
    margin-left: 20px !important;
}
	.rightnav { float:left; width:45%; padding: 0 0 0 6%;}
	/*.contentright ul li { width:auto;} */
	.contentright ul { border:none;}
	.contentright{ width:90%; padding:0 5%; clear:both;}
	.leavecomment {border-bottom: 1px dashed #FFFFFF; padding: 30px 0 45px; margin:0 0 25px;}
	.contentright h2 { margin:20px 0 0 0;}
	.contentright > div:first-child { border-right:1px dashed #fff; padding: 0 2% 0 0;}
	.blogbanner img { width:100%;}
	.contentleft {  width:100%;}
	.usercomment { float:none; width:auto;}
	.blogcontentinner{ width:100%;}
	.textfield input[type='text'] { width:96%; padding:0 2%; height:33px; font:normal 20px/25px 'phinster_finenormal';}
		.textfield textarea { width:96%; height:172px; padding:5px 2%; resize:none;}
	.blogheader .nav{ clear: both;
    float: left;
    width: 100%;}
	.contentleft > img { width:100%;}
	.contentright h2 { font:28px/33px 'phinster_finenormal';}
	.contentright ul li a { font:13px/17px 'phinster_finenormal';}
	.contentleft{ border:none;}
	.blobcontent { padding:0 20px;}
	.blog_block img { width:100%;}
	.text{font-size:10px; top:10px;}
	#footer{ font-size:10px;}
	#footer #copyright{ font-size:10px;}
	
.headtext {
    
    font: 23px/27px 'phinster_finenormal';
   
}
.contentleft h1 {
   
    font: 23px/27px 'phinster_finenormal';
    
}
.blogcontent{ width:100%;}
.contentleft .aboutdragonfly p { font:11px/18px 'phinster_finenormal';}
	.contactUsForm input, .contactUsForm textarea {width: 165px;}
.contentright { float:none; display:block;}
	
	/*****  about us  **********/
	 article h2 {font: 26px 'phinsternormal';}
     article h4 {font: 16px 'phinsternormal';}
     article p {font: 14px/20px 'phinsternormal';}
     article p strong {font: bold 14px/30px 'phinsternormal';}
	 
	 article { width:238px;}
	 .blogheader .nav .social ul { 
    min-width: 129px;
    padding-top: 0;
}
.blogheader .nav > ul li{ display:block; padding:0; margin: 8px 0;}

	 .blogheader .nav ul {float:left;}
	.social {
    position: absolute;
    right: 0;
    text-align: right;
    top: 60px;
    width: 90% !important;
}
	

}

@media  screen and (min-width : 600px) and (max-width : 980px) {

 #banner	img{width:100%;}
 .contentleft { width:400px;  padding: 0 20px 0 10px; }
 .contentleft > img { width:100%;}
 .blogcontentinner { width:400px;}
 .usercomment { width:284px;}
 .textfield input[type="text"] { width:100%;}
 .contentright {  padding: 0 5px 50px; float:right;}
 .textfield textarea { width:100%;}
 /*******  about *************/
 article { width:575px;}
 .accord {}
 
 /****** contact us **********/
 .address {max-width: 162px;}
 .contactUsForm input, .contactUsForm textarea {width: 130px;}
 .contactUsForm p {max-width: 150px;}
 /**********  about us ************/
}