/* ----------------------------------------------
 * Nuttify Custom CSS for child themes
 * 
 * http://nuttify.com/help/developer-manual/nuttify-champion-website-development/nuttify-default-custom-css-file/
 *
 * How to use this file:
 * This is a stub for you to create CSS style overrides for your child theme.
 * As a result it is generic. We work from small screens to large screens through
 * a series of @media breakpoints. You MUST investigate the parent them and it's break points 
 * and match them to the definitions below. Otherwise weirdness will follow. 
 *
 * Edit and change as required, add or remove sections as required
 * 
 * Document structure
 * 1. Generic Overrides 
 * 2. Header - small screens
 * 3. Post, page and custom post type specific overrides - small screen 
 * 4. Footer - small screens
 * 5. Gravity forms - small screen
 * 6. Woocommerce styles for small screens
 * 7. @media screen and (min-width: 460px)
 * 8. Follow same structure above - generic, header, posts, footer, gravity forms, woocommerce
 * 9. @media screen and (min-width: 768px)
 * 10. Follow same structure above - generic, header, posts, footer, gravity forms, woocommerce
 * 11. @media screen and (min-width: 1200px)
 * 12. Follow same structure above - generic, header, posts, footer, gravity forms
 * 13. Add extra breakpoints if needed - but we really want to keep the number of breakpoints to around 3
 * 14. Finish
 *
 * 
 * ----------------------------------------------
 */

/************************************************
 *
 * Begin GENERIC styles for small screens 
 *
 * Override generic site wide styles like 
 *  a
 *  p
 *  h1,h2,h3,h4,h5,h6
 *  etc
 *
 ***********************************************/
 h1, h2, h3, h4, h5, h6 { color: #007491; }
 
 h3 { font-size: 1.3em;}
 
body { font-family: 'Helvetica Neue'; }

a.button, .submit, input[type=submit], input.button { background: #007491; }

a.button:hover { background: rgb(255, 108, 32); }

#wrapper { overflow: hidden; }

h2 a:hover {
  text-decoration: none;
  color: #FF6C20;
}

a:link, a:visited { color: #006B8C; }
  
.entry { margin-top: 1em; }




/*  End GENERIC styles for small screens  */


/************************************************
 *
 * Begin HEADER styles for small screens 
 *
 ***********************************************/
 #logo h1 { font-size: 1em;}
 
 #header { padding: 10px 0 10px; }
 
/*  #header #logo .site-title { 
	display: inline-block; 
	float: right;
  	text-align: center;
  	position: absolute;
  	top: 3em;
} */

/* logo revisions */
#logo { text-align:center; }
	
#logo h1.site-title{
	
	display: block;
	float: none;
	text-align: center;
	position: relative;
	top: 0em;
	
}

#logo span.site-title{
	
	display: block;
	float: none;
	text-align: center;
	position: relative;
	top: 0em;
	
}

#header #logo .site-title a {
	color: #007491;
	font-size: 2em;
}

#header #logo .site-title a:hover { text-decoration: none;}

#header .nut-phone{
	font-size: 2.5em;
    text-align: center;
    margin-top: 0em;
}

/* seperate font-size in contact */
.nut-phone .nut-number-2 span+span{
	
}

#header .desktop, #footer-widgets .desktop { display: none; }

#header .small, #footer-widgets .small {
  font-size: 1.3em;
  margin: 0 .3em;
  color: rgb(0, 116, 145);
}


/* testimonials */

.home #main .widget_woothemes_testimonials .columns-3 .quote{width: 100%;}

.testimonials-list cite{	
	text-align:center;
	width:100%;
}

/***** Navigation *****/

.nav-toggle { background-image: linear-gradient(to right bottom,rgb(255, 108, 32), rgb(255, 108, 32)); }

/*  End HEADER styles for small screens  */


/************************************************
 *
 * Begin POST, PAGE and CPT styles for small screens 
 *
 ***********************************************/
 
 #main h1 { color: #006b8c; }
 
 .entry img, img.thumbnail { 
	border: none;
	margin: 1em 10%;
}
.home img, img.thumbnail { margin: 0 auto; }

.home .feature img { margin: 0;}

.page #content { padding: 20px 0 10px; }

.home .entry a:link, .home .entry a:visited { color: #0FABD2; }

.home .entry a.button {
  background: #FF6C20;
  font-size: 1.5em;
  margin: 1em;
}

.home section.entry {
  margin: 10px 0 2em;
  text-align: left;
  width:95%;
}

.home #content { padding: 0; }

.home .entry img { margin: 0 7% 1em; }

.home .testimonials { padding-top: 3em; }

.home .quote blockquote p{
	background: rgb(249, 249, 249);
	padding: 1em;
	border-radius: 5px;
	font-style: italic;
}

.home .quote { margin-right: 1em;}

.home .quote blockquote:after, 
.home .quote blockquote:before  {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.home .quote blockquote:after  {
	border-top-color: rgb(247, 248, 249);
	border-width: 10px;
	left: 50%;
	margin-left: -10px;
}

.home .quote blockquote:before {
	border-top-color: rgba(0,0,0,0.01);
	border-width: 11px;
	left: 65%;
	margin-left: -11px;
}

.home .quote blockquote{
	padding: 2em;
	font-size: 14px;
	line-height: 25px;
	color: #817E7E;
	position: relative;
	background-color: rgb(249, 249, 249);
	border-radius: 5px;
}

.home .quote:before {
	content: '\f10d';
	font-family: fontawesome;
	position: relative;
	font-size: 3em;
	float: left;
	display: block;
	z-index: 99;
	margin: 0.5em 0.5em 0 0.5em;
	color:rgb(186, 186, 186);;
}

.home .quote cite.author{
	font-weight: 700;
	font-size: 14px;
	color: rgba(119, 118, 117, 1);
}

.home #testimonials a.button.large { font-size: 1.1em; }

/****** Slider ******/
.home #loopedSlider { margin: 0; }

.home #loopedSlider.business-slider .content {
  background: none;
  bottom: 2.5em;
  height: 5em;
  padding: 2em;
  width: 100%;
}
.home #loopedSlider.business-slider .content { left: 16% }

.home #loopedSlider.business-slider .content  a.button { backgroundr: #FF6C20;}

.home #loopedSlider.business-slider .content h1 {
	color: #007491;
	font-size: 3em;
}

.home #loopedSlider.business-slider .content p {
	color: #fff;
	padding: 1em 0;
}

.home #loopedSlider.business-slider .content a.button {
	margin: 0;
    width: 80%;
    font-size: 1.5em;
}

/****** Testimonials ******/

.home #main .widget_woothemes_testimonials .columns-3 .quote{ width: 100%; }

.home #testimonials { margin-top: 2em; }

.single-testimonial header h2 { margin-top: 1em; }

/****** Features ******/

.home #benefits { 
	padding: 1em; 
	overflow: auto;
	background: rgb(252, 252, 252);
}

.home article.feature.type-feature {
  width: 100%;
  float: none;
}

.home article.feature.type-feature img{
	width: 100%;
	margin-bottom: 1em;
}

.home #benefits article h2 a{ 
	color: #007491;
	font-size: 0.8em;
} 



/*  End  POST, PAGE and CPT for small screens  */
 
/************************************************
 *
 * Begin SERVICES FORMS styles for small screens 
 *
 ***********************************************/
 
 .archive  header h2 { margin-bottom: 20px; }
 
 .page table {
 	border: 1px solid #007491;
 	width: 80%;
 }
 
 .page table tbody td { 
 	border-bottom: 1.5px solid #007491; 
	background-color: rgb(233, 247, 233);
}

 .page table tbody th { border-bottom: 1.5px solid #007491; }
 
.page table tr td:first-child { 
	border-right: 1.5px solid #007491;
	background-color: rgb(247, 209, 209);
}

.page table tr th:first-child { border-right: 1.5px solid #007491;}

.page .entry ul li:before {
  font-family: fontawesome;
  content: "\f14a";
  display: block;
  float: left;
  position: relative;
  color: #007491;
  padding-right: .5em;
  font-size: 1em;
}

.page .entry ul li { list-style-type: none; }

.page .entry h3 a:link { color: #007491; }

.page .entry h3 { line-height: 1em;}

archive_header { display: block; }

 .archive .archive_header {
 	color: #007491;
 	font-size: 2em;
 	border-bottom: none;
 	padding-top: 1em;
 }

.archive .entry { 
	margin-top: 1em;
	max-width: 90%;
}

article.service.type-service {
  width: 100%;
  float: none;
}

article.service.type-service .entry-title { padding-top: 1em;}

.home article.service.type-srvice .entry { padding-right: .5em;}

.entry a.button {
  font-size: 1.2em;
  background-color: rgb(255, 108, 32);
  padding: .5em 1em;
}

.archive .type-service h2 { margin-top: .5em; }

.page .entry td.call-us,
.page .entry td.review,
.page .entry td.complete-app { 
	padding: 1em 2em;
	font-size: 1em;
 }

.page .entry td.call-us:before,
.page .entry td.review:before,
.page .entry td.complete-app:before {
	content: '\f095';
	font-family: fontawesome;
	display: block;
	position: absolute;
	margin: 0 -1.2em;
}

.page .services-link { 
	text-align: center;
	font-size: 2em;
}

.page .entry td.review:before { content: '\f002'; }

.page .entry td.complete-app:before { content: '\f046'; }


	/*  End  SERVICES FORMS for small screens  */

 
/************************************************
 *
 * Begin FOOTER styles for small screens 
 *
 ***********************************************/
 #footer-widgets { border-top: none; }
 
/*  End FOOTER styles for small screens  */


/************************************************
 *
 * Begin GRAVITY FORMS styles for small screens 
 *
 ***********************************************/


/*  End  GRAVITY FORMS for small screens  */


/************************************************
 *
 * Begin WOOCOMMERCE styles for small screens 
 *
 ***********************************************/


/*  End  WOOCOMMERCE for small screens  */

/************************************************
 *
 * Begin @media styles 
 * @media screen and (min-width: 460px)
 *
 * Remember to match this to the parent theme
 * Follow same structure above - generic, header, posts, footer, gravity forms, woocommerce
 ***********************************************/

 /* 320px */
 
 @media screen and (min-width: 300px){
	 
	 /* contact */
	 .nut-phone-wrapper .small{
		display: block;
		font-size: 0.6em !important;
		text-align: center;
		margin: 0 !important;
	}
	
	.nut-phone-wrapper .nut-number-1{
		display: block;
		font-size: 0.8em;
		text-align: center;
		margin-top: 0.3em;
		
	}
	
	.nut-phone-wrapper .nut-number-2{
		display: block;
		font-size: 0.9em;
		text-align: center;
		margin-top: 1.3em;
		
	}
	 
 }
 
 /* end 320px */
 
 
 @media screen and (min-width: 460px) {
 
	/* contact details */
 	#header .desktop {
		display: none; 
		/* margin-top: -2.3em; */
	}
	
	#header .touch {
		display: block; 
		width: 100%; 
		/* margin-top: 2em; */
		float: none;
		text-align: center;
		/* margin-top: -2.3em; */
	}
	
	#header .touch img{ 
		display:block;
		text-align: center;
		margin: auto;
	}
	
	/* .nut-phone .touch{ line-height: 0.8em; } */
	
	.nut-phone-wrapper .small{
		display: block;
		font-size: 0.6em !important;
		text-align: center;
		margin: 0 !important;
	}
	
	.nut-phone-wrapper .nut-number-1{
		display: block;
		font-size: 0.8em;
		text-align: center;
		margin-top: 0.3em;
		
	}
	
	.nut-phone-wrapper .nut-number-2{
		display: block;
		font-size: 0.9em;
		text-align: center;
		margin-top: 1.3em;
		
	}
	
	
	
	
	/* logo revisions */
	#logo { text-align:center; }
	
	#logo h1.site-title{
	
	    display: block;
		float: none;
		text-align: center;
		position: relative;
		top: 0em;
	
	}
	
	#logo span.site-title{
	
	    display: block;
		float: none;
		text-align: center;
		position: relative;
		top: 0em;
	
	}
	
	/* testimonials */
	.home #main .widget_woothemes_testimonials .columns-3 .quote{width:100%;}
 	
 }
/*  End   @media screen and (min-width: 460px) */

/************************************************
 *
 * Begin @media styles 
 * @media screen and (min-width: 768px)
 * 
 * Remember to match this to the parent theme
 * Follow same structure above - generic, header, posts, footer, gravity forms, woocommerce
 ***********************************************/

 @media screen and (min-width: 768px) {
 
		/************************************************
	 *
	 * Begin HEADER styles for  @media screen and (min-width: 768px) 
	 *
	 ***********************************************/
	
	/* contact details */
 	#header .desktop {
		display: none; 
		/* margin-top: -2.3em; */
	}
	
	#header .touch {
		display: block; 
		width: 100%;
		margin-top: 2em;
		float: none;
		text-align: center;
		/* margin-top: -2.3em; */
	}
	
	#header .touch img{ display:block; }
	
	.nut-phone-wrapper .small{
		display: block;
		font-size: 0.6em !important;
		text-align: center;
		margin: 0 !important;
	}
	
	.nut-phone-wrapper .nut-number-1{
		display: block;
		font-size: 0.8em;
		text-align: center;
		margin-top: 0.3em;
		
	}
	
	.nut-phone-wrapper .nut-number-2{
		display: block;
		font-size: 0.9em;
		text-align: center;
		margin-top: 0.3em;
		
	}
	
	
	/* logo revisions */
	#logo { text-align:center; }
	
	#logo h1.site-title{
	
	    display: inline-block;
		float: none;
		text-align: center;
		position: relative;
		top: 0em;
	
	}
	
	
	#logo span.site-title{
	
	    display: inline-block !important;
		float: none;
		text-align: center;
		position: relative;
		top: 0em;
	
	}
	
	#header #logo { width: 100%; }
	 
	#header #logo .site-title { 
		float: none; 
		position: inherit;
		display:inline;
	}
	
	
	 
	#header #logo .site-title a { font-size: 2.5em;}
	
	/* testimonials */
	.home #main .widget_woothemes_testimonials .columns-3 .quote{width:30%;}

	/****** Navigation ******/

	#navigation {
		margin-bottom: 0;
		background-color: rgb(255, 108, 32);
	}
		
	#navigation #main-nav { font-size: 1.3em; }
	
	#navigation ul li a { color: #fff; }

	#navigation ul.nav > li a:hover {
	  background: #fff;
	  border-bottom: 2px solid rgb(252, 167, 11);
	  color: #007491;
	}

	#navigation ul.nav li.current-menu-item a{
	  color: #007491;
	  border-bottom: 2px solid rgb(252, 167, 11);
	  background: rgb(252, 249, 244);
	}
	
	#navigation ul.nav-search .widget {
	  border: 2px solid rgb(252, 167, 11);
	  background: #fff;
	}
	
	#navigation ul.nav-search li:hover a.search-contents { 
		background: #fff; 
		color: #007491;
	}
	
	
	/*  End HEADER styles for  @media screen and (min-width: 768px)  */


	/************************************************
	 *
	 * Begin POST, PAGE and CPT styles for  @media screen and (min-width: 768px) 
	 *
	 ***********************************************/
	 .entry img, img.thumbnail { margin: 0; }
	 
 	/****** Home ******/
 	
 	.home .entry a.button {
	  font-size: 1.7em;
	  margin: 1em 25%;
	  padding: 0.5em 5em;
	}
 	
 	.home #testimonials a.button.large { 
 		width: 80%;
 		margin: 0 10%;
 		font-size: 1.8em;
 	}
 	
 	/****** Slider ******/
 	.home #loopedSlider { margin-bottom: 2em; }
 	
 	.home #loopedSlider.business-slider .content { 
 		background: none;
 		width: 30%;
 		height: 10em;
 	}
 	
 	.home #loopedSlider.business-slider .content h1 { 
 		font-size: 3em;
 		text-align: center;
 		color: #F9FAFA;
 	 }
 	 
 	 .home #loopedSlider.business-slider .content a.button {
		margin: 1em 1.3em;
	    width: 100%;
	    font-size: 1.6em;
	}

 	/****** Features ******/
 	.home article.feature.type-feature {
	  width: 25%;
	  float: left;
	}
	
	.home article.feature.type-feature img {width: 95%; }
	
	
	
	/************************************************
	 *
	 * Begin SERVICES FORMS styles for for  @media screen and (min-width: 768px)
	 *
	 ***********************************************/
		.archive #main { width: 100%; }

		article.service.type-service {
		  width: 33%;
		  float: left;
		  min-height: 517px;
		}
		
		.page .entry a.button {
			font-size: 1.7em;
			margin: 1em 25% 0;
			padding: .5em 4em;
		}

	/*  End  SERVICES FORMS for for  @media screen and (min-width: 768px)  */


	/*  End  POST, PAGE and CPT for  @media screen and (min-width: 768px)  */
 
 
	/************************************************
	 *
	 * Begin FOOTER styles for  @media screen and (min-width: 768px) 
	 *
	 ***********************************************/

	#footer-widgets .desktop { display: block; }

	/*  End FOOTER styles for  @media screen and (min-width: 768px)  */


	/************************************************
	 *
	 * Begin GRAVITY FORMS styles for  @media screen and (min-width: 768px)
	 *
	 ***********************************************/


	/*  End  GRAVITY FORMS for  @media screen and (min-width: 768px)  */


	
	 }
	/*  End   @media screen and (min-width: 768px) */
	
	
/************************************************
 *
 * Begin @media styles 
 * @media only screen and (min-width: 980px)
 * 
 * Remember to match this to the parent theme
 * Follow same structure above - generic, header, posts, footer, gravity forms, woocommerce
 ***********************************************/

/* Update main container and sidebar sizes */
@media only screen and (min-width: 980px){

	#header .nut-phone {
	    float: right;
		font-size: 2.5em;
		text-align: left;
		margin-top: 0.2em;
	}
	
	.nut-phone .desktop fa{
		font-size: 0.9em !important;
	}
	
	.nut-phone .desktop .small{
		text-transform:uppercase;
	}
	
	#header .nut-phone img{ 
	    width: 4em;
		float:right;
	} /* contact phone image */

	#header .touch, #footer-widgets .touch { display: none; }

	.nut-phone .touch{ line-height: 0.8em; }
	
	#header .desktop {
	    display: block;
		margin-top: 0.5em;
	}
	
	.nut-phone-wrapper{
		display: inline-block;
		/* width: 60%; */
		float: right;
	}
	
	#header .small {
	  font-size: 1.5em;
	  /* margin: 0 -1em; */
	  color: rgb(0, 116, 145);
	}
	
	
	.nut-phone-wrapper .small{
		display: block;
		font-size: 0.6em !important;
		text-align: right;
		margin: 0 !important;
	}
	
	.nut-phone-wrapper .nut-number-1{
		display: block;
		font-size: 0.8em;
		text-align: right;
		margin-top: 0.3em;
		
	}
	
	.nut-phone-wrapper .nut-number-2{
		display: block;
		font-size: 0.8em;
		text-align: right;
		margin-top: 0.3em;
		
	}
	
	
	
	/* logo */
	#header #logo{ width:auto; }

}


/*  End   @media only screen and (min-width: 980px) */


	/************************************************

 *
 * Begin @media styles 
 * @media screen and (min-width: 1200px)
 * 
 * Remember to match this to the parent theme
 * Follow same structure above - generic, header, posts, footer, gravity forms, woocommerce
 ***********************************************/

 @media screen and (min-width: 1200px) {
 	
 	
 }
/*  End   @media screen and (min-width: 768px) */



/************************************************
 *
 * Begin @media styles for PRINT
 * @media print
 * 
 *
 ***********************************************/

 @media print {
 	#sidebar, #navigation, #connect, .post-utility, .post-entries, #comments, #footer-widgets, #respond, #post-author, .post-more, span.catrss , .nav-entries, object, .social-links, #searchform, .syo-print, h3.nav-toggle {display: none !important ; }
 	
	#wrapper {width:  210mm !important ; margin: 1.5cm ;}
	 /* Add other print specific styles here */	
 }

/* Define the page as A4 */
@page {
  size: 210mm 297mm;   /* auto is the initial value */
  margin: 10mm;
  orphans:4; widows:2;
}

/*  End  @media styles for PRINT */




/************************************************ 
 * End custom.css 
 *
 * The Supreme Squirrel thanks you for your diligence
 *
                                                   
                         `.,.`                    
                   ,;,.,@#@+'#+`                  
                 `##@;+###@`;.`'@@@@#`            
               `+@@;#'++###:+@``:`,:@##@#@`       
               @##'####'#####,@::':@##``,`#       
              `@##','.;##@#####@+@#@``@.,`@`      
               ,##;`'+##@```;@####@`@;,,,`@;      
         `,;#@@@###';@##.......+##`@;,,,,.@#+     
        ;######',,+@#####@@'`,;#@``@.,,,,:###+    
         :@'''''''@@,`.'#@@@@@#@`..+#,,,,@###''   
           `+#''######@#@@#++##'.`:@,,,,;###+##`  
             ,@#####@,`:......@.`@;,,,,:#####'`@  
          `:@######+.;:@@@@,...`.`@.,,+####@,..@` 
         ,@######@..`@'#+ @#@;.....,,@##`,@;;:`@` 
       .@######;@`.`:@'####@;`......,.@@`.;#.``@` 
     `@######+.@`.`@.:''''';.`:....,.@.@@``@.:@.  
    :#######.:...`#',,.'':`'#`.....,:.@+#;.+#@`   
  `@######',,........,:;';.`......:..@.@##@.`     
  ;`````..,,.....................,.@.:###+`       
  `@.,,,,.+`.....................,,'@,@##:        
   `#;..'#,`',`,................,.@,@####;        
     `@#.:,':..................,+'####@'@@`       
      `#;,,';,:,...............,'####,`,;#.       
        `'@,,,;'+...........,,.'@###@..,,#:       
           :@#.,........,,,,#@#:,'###@`.,#@`      
             `'@;,...,,,;@@+,:+''.@#+#,`###`      
             `@###','@@#:,'''''''+,##'@@;`        
            `@:.###@',;+''''''+'.'@#@:`           
           `@;#+,@',##+''''+:,+@@#,`              
          `@'+:;@@#,,.;#'.;@#@'`                  
           ,@#`@@`'@..:#@#@,`                     
            `;@@` `@@#@+.`                        
               `   ,:`                            
                                                  

 
 ************************************************/