/*
Theme Name: IT Support
Theme URI: http://itsupport.net.nz
Author: Votre Arme
Author URI: http://votrearme.co.nz
Description: Custom theme for IT Support Website
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: it-services
Tags:


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.

IT Services is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.

/*	! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}
body {
	margin:0;
}
html {
    font-size: 1em;
    line-height: 1.4;
    
}

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

/*
 * 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, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

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

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

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* STRUCTURE */

#header-container {
    margin:0 auto;
    max-width:1000px;
}

#header-logo {
    width:20%;
    height:108px;

    background: url("img/its-web-logo.jpg") no-repeat center;
    
    float:left;
    margin-top:40px;
    
    
}

#header-services {
     width:80%;
     margin-top:10px;


    float:right;

}



#menu-container {
    position: relative;
    margin:0;
    width:100%;
    background-color: #ff3333;
    border-bottom:3px solid #333333;
    
    
    
}

#menu-content {
    margin:0 auto;
    max-width:1000px;
    
    height:100%;
      

    
}

#content-container {
    margin:0 auto;
    max-width:1000px;
    padding:20px 0px;

}






/*home*/

#home-about-feature {

    max-width:1000px;
    margin:0 auto;
    padding:0px 20px;

}


#home-slider-feature {
    display: block;
        float:right;
    width:65%;
    height:320px;    
    
  
}



#hr-container {
    position: relative;
    margin:0;
    width:100%;
    height:0px;
    background-color: #ff3333;
    border-bottom:3px solid #333333;
    
    
    
}


#home-services-feature {
    width:100%;
    margin:-10px 0px 10px 0px;
    

}

.home-services-boxes {
    width:31%;

    float:left;
    margin-left:20px;
    padding:10px 5px;
    
    
   
}

.home-services-boxes:first-child {
    margin-left:0px;
}

.home-services-icon {
    float:left;
    width:10%;
  
    padding:0px 9px;
    
    color:#ff3333;
    font-size:28px;
    

}

.home-services-text {
    float:left;
    width:81%;
  
}

/* services */


.services-boxes {
    width:27%;

    float:left;
    margin:0px 20px;
    padding:0px;
    
    
   
}


/* blog */

#blog-left-container {
	float:left;
	width:70%;
	
	border:1px solid red;
}

#blog-right-container {
	float:right;
	width:29%;
	
	border:1px solid green;
}





#footer-container {
    position: absolute;
    margin:0;
    width:100%;
    background-color: #333;
    
}

#footer-content {
    margin:0 auto;
    max-width:1000px;
    
    height:100%;
    

}

#footer-about {
    width:45%;
    height:100%;

    
    
    float:left;
}

#footer-clients {
    width:51%;
    height:100%;
 
    float:right;
}







/* HEADER */

#header-logo a {
    display: block;
    width:100%;
    height:100%;
    text-decoration: none;
}


/*----- services header ------*/



/*----- Menu Outline -----*/

#menu-content ul {
    margin:0px;
    
    margin-left:-22px;
      
 }
 
#menu-content li {
    margin:0px;
    list-style:none;
    
  
    

}
 
#menu-content a {
    transition:all linear 0.15s;
    color:#fff;
    font-size:19px;
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
}
 
#menu-content li:hover > a, .menu .current-item > a {
    
}
 
 
/*----- Top Level -----*/
#menu-content > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    
}
 
#menu-content > ul > li > a {
    padding:10px 25px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.0);
}
 
#menu-content > ul > li:hover > a {
   
     background:#333333;
}





#menu-content li > a:after {
	font-family: 'fontawesome', sans-serif;
     content: " \f107";
}

#menu-content li > a:hover:after {
	font-family: 'fontawesome', sans-serif;
    content: " \f107";
}

#menu-content li > a:only-child:after {
    content: '';
}

 
/*----- Bottom Level -----*/
#menu-content li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
 
.sub-menu {
    width:180%;
    padding:0px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#ff3333;
    border-bottom:3px solid #333333;
    
   
}
 
.sub-menu li {
    display:block;
    
}
 
.sub-menu li a {
    padding:10px 30px;
    display:block;

    line-height:16px;
     font-size:16px !important;
   
}
 
.sub-menu li a:hover {
    background:#333333;
}


current_page_parent

#menu-content ul li.current-menu-item > a,
#menu-content ul li.current-menu-parent > a,
#menu-content ul li.current_page_parent > a,
#menu-content ul li ul li.current-menu-item > a  {

	background:#333333;

}




/* CONTENT */

h1, h1 a {
    font-family: 'Open Sans';
    font-size:26px;
    color:#ff3333;
    font-weight: 500;
    line-height: 28px;
    text-decoration: none;
    
}

h2 {
    font-family: 'Open Sans';
    font-size:20px;
    color:#ff3333;
    font-weight: 600;
    line-height: 26px;
}

h3 {
    font-family: 'Open Sans';
    font-size:16px;
    color:#111;
    font-weight: 600;
    line-height: 26px;
}

h4 {
    font-family: 'Open Sans';
    font-size:20px;
    color:#ff3333;
    font-weight: 600;
    line-height: 28px;
}

p, li {
    font-family: 'Open Sans';
    font-size:15px;
    color:#111;
    line-height: 22px;
    letter-spacing:0.5px;
}

p.intro {

    font-family: 'Open Sans';
    font-size:16px;
    color:#333;
    font-weight: bold;
    line-height: 22px;
    letter-spacing:0.5px;

}

blockquote, blockquote p {

	border-left:2px solid #e10000;

        color:#e10000;

	padding-left:10px;

       font-family: 'Open Sans';

        font-size:16px;
}

 blockquote p {

	border:0;

 }

.home-services-text h4 {
    font-family: 'Open Sans';
    margin:0;
    color:#111111;
    font-size:20px;
    font-weight: 600;
    line-height: 20px;
    
}

.home-services-text p {
    font-family: 'Open Sans';
    margin:5px 0px;
    color:#111111;
    font-size:13px;
    font-weight: 200;
    
    line-height: 16px;
    letter-spacing: 0px;
    
}

.home-services-text .more {
    color:#ff3333;
    font-weight: 500;
    text-decoration: none;
}

.home-services-boxes:hover {
    background: #eee;
    cursor: pointer;
}

.home-services-boxes a {
    text-decoration: none;
}



/* NEWS PAGE */

article {

	margin-bottom:10px;

}

.news-thumb {

	float:left;

	width:22%;

	max-width:210px;

	margin-top:15px;

	margin-right:10px;

}

.news-snippet {

	float:left;

	width:76%;

	max-width:700px;

}



/* services page */

#breadcrumbs li {
    display: inline;
}
#breadcrumbs {
    font-family: 'Open Sans';
  right:0px;
  text-align:right;
  font-size:13px;
}
#breadcrumbs a {
  color:#015270;
  text-decoration:none;
  font-size:13px;
}
#breadcrumbs a:hover {
  color:#000000;
  text-decoration:none;
  font-size:13px;
}


.services-boxes {
   text-align: center;
  
   
   font-family: 'Open Sans', sans-serif;
   text-transform: uppercase;
   line-height: 16px;
   
}

.services-boxes a {
    font-size:14px;
   color:#111;
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: 300;


    display:block;
    
    padding:10px;
    
}

.services-boxes:hover {
  background: #eee;
  cursor: pointer;
   
}


/* FAQ PAGE */

#faq-block h4 {
	cursor: pointer;
}

#faq-block .faq-answer {
	border-left:2px solid #ff3333;
	margin-left:15px;
	padding-left:15px;
}




/* FOOTER */



#footer-content h2 {
    font-family: 'Open Sans';
    font-size:20px;
    font-weight:600;
    color:#fff;

}

#footer-content p {
    font-family: 'Open Sans';
    font-size:13px;
    color:#fff;
    font-weight:300;
    line-height: 18px;
    letter-spacing:0px;
}

#footer-content a {
    color:#fff;
}






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

/*
 * 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
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */




/* Smaller than 480 (mobile) */
@media screen and (max-width: 640px) {
	
	#header-container {
		
		margin-bottom:-20px;
		
	    }
	
	#header-logo {
	    width:100%;
	
	    background: url("img/its-logo-x2.jpg") no-repeat center;
	    background-size: 220px 110px;
	    
	    height:110px;
	    float:none;
	    
	    margin-top:30px;
	}
	
	#header-services {
	    width:100%;
	    float:none;
	
	    padding:10px 0px;
	   
	   
	
	}
	
	.icon-float {
	
		margin:5px;
	}
	
	
	#menu-container {
		position: absolute;
		top: 0;
		margin:0;
		width:100%;
		background:none;
		border-bottom:none;
		z-index: 2;

		
	}
	    
	 
	 #content-container {
		margin:0 auto;
		max-width:1000px;
		padding:5px 10px;
	    
	    
	    }
	 
	 
	 
	 
	 /*home*/

	#home-about-feature {
	    float:none;
	    width:100%;
	    
	    padding:0px;
	    margin:0;
	    
	    
	   
	
	}
	
	#home-slider-feature {
		float:none;
	    width:100%;
	    height:300px;
	    
	     
	}
	
	#home-services-feature {
	    width:100%;
	    margin:20px 0px 50px 0px;
	    
	    
	
	}
	
	.home-services-boxes {
	    width:100%;
	    float:none;
	    margin-left:0px;
	    padding:10px;

	   
	}
	
	.home-services-icon {
	    float:left;
	    width:10%;
	  
	    padding:0px 15px;
	    
	    color:#ff3333;
	    font-size:28px;
	}
	
	.home-services-text {
	    float:left;
	    width:70%;
	  
	}
	
	/* services */
	
	
	.services-boxes {
	    width:31%;
	
	    float:left;
	    margin:0px 5px 5px 0px;
	    padding:0px;
	    
	    
	    word-wrap: normal;
	    
	    
	   
	}
	
	.services-boxes img {
		width:100%;
		height:100%;
	}
	
	/* services page */

#breadcrumbs {
    font-family: 'Open Sans';
  left:0px;
  font-size:10px;
  
  position: relative;
  margin:0px;

}

#breadcrumbs a, #breadcrumbs li {
    font-size:10px;
    line-height: 14px;
}

#breadcrumbs ul {
    margin-left:-20px;
}

	.services-boxes {
	   text-align: center;
	  
	   
	   font-family: 'Open Sans', sans-serif;
	   text-transform: uppercase;
	   line-height: 14px;
	    padding:0px;
	   
	}
	
	.services-boxes a {
	    font-size:10px;
	   color:#111;
	    text-decoration: none;
	    letter-spacing: 0px;
	    font-weight: 300;
	
	
	    display:block;
	    
	    padding:2px;
	    
	}
	
	.services-boxes:hover {
	  background: #eee;
	  cursor: pointer;
	   
	}
	
	
	/* blog */
	
	#blog-left-container {
		float:left;
		width:70%;
		
		border:1px solid red;
	}
	
	#blog-right-container {
		float:right;
		width:29%;
		
		border:1px solid green;
	}
	
	
	
	
	
	#footer-container {
	    position: absolute;
	    margin:0;
	    width:100%;
	    background-color: #333;
	    
	}
	
	#footer-content {
	    margin:0 auto;
	    max-width:1000px;
	    
	    height:100%;
	    padding:10px;
	    
	
	}
	
	#footer-about {
	    width:100%;
	    float: none;
	}
	
	#footer-clients {
	     width:100%;
	    float: none;
	}
	
	#footer-clients img {
	    
	    width:100%;
	    height: auto;
	}


	
	
}



@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}