/* 
=========================================================
P) PHONE - 0 to 499
*/

@media only screen and (max-width : 499px) {

/* 
P) General 
*/

body { background-color: #fff; }

p { font-size: 16px; }
hr { width: 100%; }
h1 { text-align: center; background-color: #f1f2f6; padding: 30px 30px 30px 30px; }
h1.intro { color: #1578a4; text-align: center; margin: 0px auto 30px; letter-spacing: -0.4px; font-weight: normal; font-size: 26px; line-height: 30px; }
.wrapper { width: 90%; margin: 0 auto; }
h2 { font-size: 23px; line-height: 28px; margin: 30px 0px 36px 0px; }

/* 
P) Header
*/

header { width: 100%; border-bottom: 0; height: 70px; position: relative; z-index: 1000; }
header .logo { float: left; display: block; margin: 0px 0px 0px 5%; }
header a { font-size: 18px; text-transform: uppercase; font-family: "RobotoMedium", Arial, Helvetica; }
header a#pull { display: block; background-color: #fff; float: right; width: 50px; height: 50px; position: relative; clear: both; margin: 0px 0px 0px 0px; }  
header a#pull:after { content:""; background: url(../img/nav-icon.png) no-repeat 7px 5px; background-size: 20px 20px; width: 30px; height: 30px; display: inline-block; position: relative; right: 15px; top: 18px; } 
header ul { width:100%; background-color: #f1f2f6; display: none; height: auto; margin: 20px 0px 50px 0px; letter-spacing: 1px; }
header ul li { margin: 0; padding: 16px 20px 16px 30px; float: none; border-bottom: 1px solid #fff; }
header ul li:nth-child(5) { padding-top: 16px; margin-right: 0px; }
header ul li.login { padding: 16px 20px 16px 30px; }
header ul li.login a { background-color: #f1f2f6; padding: 0px 0px 0px 0px; color:#666; font-family: "RobotoMedium", Arial, Helvetica; font-size: 18px; letter-spacing: 1px; }
header ul li.login a:hover { background-color: #f1f2f6; color: #0d8fc8; }

/* 
P) Content
*/

.content-2col { width: 100%; padding: 0px 0px 0px 0px; margin-right: 0px; }
.content-2col h3 { font-size: 20px; line-height: 25px; }
.content-2col p { margin: 0px 15px 15px 0px; }
.inner-wider { width: 90%; padding-left: 0px; }
.box-content { width: 100%; }
.overview-box { float: none; margin: 0px auto; position: inherit; width: 100%; overflow: auto; padding: 0px 0px 0px 0px; }
.overview-box h3 { font-size: 20px; line-height: 25px; }
.overview-box .box-content { width: 80%; float: left; margin-left: 6px; margin-top: 5px; }
.pricing_table { width: 90%; text-align: center; }
.price_block { width: 46%; border: 1px solid #cfcfcf; }
.price_block:nth-child(odd) { border: 1px solid #cfcfcf; }
.price_block:nth-child(3) { clear: both;}
.price_block:nth-child(odd):hover { border: 1px solid #cfcfcf; }
.content-pullout { margin: 0px 0px 40px 0px; clear: both; }
.content-pullout li { line-height: 36px; float: none; clear: both; width: 45%; text-align: left; font-size: 16px; font-family: "RobotoLight", Arial, Helvetica; }
.content-pullout li:before { content:"•"; font-size:16px; padding: 1px 10px 1px 0px; float: none; clear: both; }
#content-slider .bx-viewport { height: auto !important; }
#content-slider .slider-text { font-size: 16px; padding: 20px 40px 0px 40px; line-height: 20px; font-family: "RobotoLight", Arial, Helvetica; }
#content-slider .slider-text span { font-size: 16px; padding: 20px 40px 0px 40px; line-height: 20px; }
#content-slider .bx-controls-direction { padding-top: 200px; }
.two-col-break { display: none; }
.three-col-break { display: none; }
.two-col-break-desktop { display: none; }
.content-overview { float: none; margin: 0px auto 10px; width: 100%; overflow: auto; padding: 0 0 0 0; position: relative; }
.content-overview h3 { margin: 16px 0px 15px 60px; }
.content-overview p { margin: 0px 20px 0px 60px; }

.pricing_table { width: 100%; text-align: center; padding: 0px 0px 34px 0px; margin: 0px 0px 0px 0px; overflow: hidden; max-width: 100%; }
.price_block { width: 50%; border: 1px solid #cfcfcf; padding: 0 0 0 0; margin: 0 0 0 0; }
.price_block:nth-child(3) { clear: none;}

/* 
P) Positioning for Icons
*/ 

.icon-custom { background: url("../img/icon-sprites@2x.png"); background-size: 750px 50px; height: 50px; width: 50px; float: left; }
.icon-content { background: url("../img/icon-sprites@2x.png"); background-size: 750px 50px; height: 50px; width: 50px; float: left; margin-top: 6px; }

.icon-custom-web-development 	{ background-position:    0px -5px; }
.icon-quality-graphic-design 	{ background-position:  -50px -5px; }
.icon-osx-desktop-support 		{ background-position: -100px -5px; }
.icon-wordpress-cms 			{ background-position: -150px -5px; }
.icon-web-hosting 				{ background-position: -200px -5px; }
.icon-osx-linux-servers 		{ background-position: -250px -5px; }
.icon-internet-monitoring 		{ background-position: -300px -5px; }
.icon-offsite-backups 			{ background-position: -350px -5px; }
.icon-network-monitoring 		{ background-position: -400px -5px; }
.icon-firewalls-security		{ background-position: -450px -5px; }
.icon-flexible-service			{ background-position: -500px -5px; }
.icon-domain-registration		{ background-position: -550px -5px; }
.icon-custom-solutions			{ background-position: -600px -5px; }
.icon-unlimited-data			{ background-position: -650px -5px; }
.icon-cloud-hosting				{ background-position: -700px -5px; }

/* 
P) Header and Banner
*/

#top { top: 70px; height: 310px; }

.bx-viewport { height: 310px; }
.bx-wrapper .bx-controls-direction a { margin-top: 0px !important; }
.front-box { display: none; }

/* 
P) Sliders
*/

.slider-heading { font-size: 28px; margin: 44px 0px 20px 0px; font-family: "RobotoLight", Arial, Helvetica; }
.slider-text { font-size: 19px; line-height: 25px; padding: 0px 44px 20px 44px; font-family: "RobotoLight", Arial, Helvetica; }
.bxslider .icon { width: 20px; height: 20px; }

/* 
P) Headers
*/

#fullwidth { height: 300px; background: url("../img/background.jpg") no-repeat center center  #333030; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  /* For IE, remove if having link or scroll bar issues */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod='scale');  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; }
.fullwidth-header { background-color: #333030; background-image: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
.fullwidth-header h1 { color: #fff; font-family: "RobotoThin", Arial, Helvetica; font-size: 30px; line-height: 60px; margin: 0px 0px 0px 0px; padding: 20px 0px 0px 60px; text-align: left; }

#fullwidth-content { height: 330px;  }

#fullwidth-content-webdev { background-image: none; margin: 0px 0px 0px 0px; height: 100px; overflow: hidden; }
#fullwidth-content-webdev h1 { background: url(../img/slider-icon-cog-up.png) 5% 40px no-repeat; background-size: 25px; }

#fullwidth-content-itsupport { background-image: none; margin: 0px 0px 0px 0px; height: 100px; overflow: hidden; }
#fullwidth-content-itsupport h1 { background: url(../img/slider-icon-display-up.png) 5% 40px no-repeat; background-size: 25px; }

#fullwidth-content-webhosting { background-image: none; margin: 0px 0px 0px 0px; height: 100px; overflow: hidden; }
#fullwidth-content-webhosting h1 { background: url(../img/slider-icon-shop-up.png) 5% 40px no-repeat; background-size: 25px; }

#fullwidth-content-monitoring { background-image: none; margin: 0px 0px 0px 0px; height: 100px; overflow: hidden; }
#fullwidth-content-monitoring h1 { background: url(../img/slider-icon-monitoring-up.png) 5% 40px no-repeat; background-size: 25px; }

#fullwidth-content-404 { background-image: none; margin: 0px 0px 0px 0px; height: 100px; overflow: hidden; }
#fullwidth-content-404 h1 { background: url(../img/slider-icon-error-up.png) 5% 40px no-repeat; background-size: 25px; }

#fullwidth-content-legal { background-image: none; margin: 0px 0px 0px 0px; height: 100px; overflow: hidden; }
#fullwidth-content-legal h1 { background: url(../img/slider-icon-legal-up.png) 5% 40px no-repeat; background-size: 25px; }

#fullwidth-content-contactus { background-image: none; margin: 0px 0px 0px 0px; height: 100px; overflow: hidden; }
#fullwidth-content-contactus h1 { background: url(../img/slider-icon-contact-up.png) 5% 40px no-repeat; background-size: 25px; }

/* 
P) Footer
*/

footer ul { width: 100%; }

/* 
P) Contact Form 
*/

.contact-box-small { background-color: #e5e5e5; height: auto; width: 100%; padding: 0 0 0 0; vertical-align: middle; -moz-border-radius: 4px; border-radius: 4px; margin-bottom: 20px; margin-right: 0px; }
.contact-box-small h5 { margin: 8% 0% 4% 4%; }
.contact-box-small h5 a { font-size: 20px; line-height: 10px; font-family: "RobotoMedium", Arial, Helvetica; letter-spacing: -0.2px; color: #14949a; padding: 40px 0px 0px 0px; text-decoration: none; -moz-transition: all 0.3s ease-out;  /* FF4+ */ -ms-transition: all 0.3s ease-out;  /* IE10 */ -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */ transition: all 0.3s ease-out; }
.contact-box-small h5 a:hover { color: #095d61; }
.contact-box-small p { margin: 0% 0% 6% 4%; line-height: 25px; }
.contact-box-small a { color: #14949a; font-size: 16px; }
.contact-box-large { background-color: #e5e5e5; width: 100%; padding: 0 0 0 0; height: auto; font-size: 15px; line-height: 18px; overflow: visible; -moz-border-radius: 4px; border-radius: 4px; margin-right: 0px; margin-bottom: 40px; }
.contact-name { border: none; background-color: #fff; width: 92%; margin: 5% 4% 3% 4%; padding-left: 0px; padding-right: 0px; height: 36px; font-family: "RobotoRegular", Arial, Helvetica; font-style: italic; float: left; }
.contact-email { border: none; background-color: #fff; width: 92%; margin: 1% 4% 3% 4%; padding-left: 0px; padding-right: 0px; height: 36px; font-family: "RobotoRegular", Arial, Helvetica; font-style: italic; float: left; } 
.contact-message { border: none; background-color: #fff; width: 92%; margin: 1% 4% 3% 4%; padding-left: 0px; padding-right: 0px; height: 50px; padding-top: 10px; font-family: "RobotoRegular", Arial, Helvetica; font-style: italic; } 
.contact-button { border: none; background-color: #14949a; margin: 4% 4% 8% 4%; color: #fff; display: block; -moz-border-radius: 4px; border-radius: 4px; padding: 10px 30px; font-family: "RobotoBold", Arial, Helvetica; font-size: 11px; letter-spacing: 2px; -moz-transition: all 0.3s ease-out;  /* FF4+ */ -ms-transition: all 0.3s ease-out;  /* IE10 */ -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */ transition: all 0.3s ease-out; }
.contact-button:hover { background-color: #095d61; outline: none; }

}

/* 
=========================================================
T) TABLET - 500 to 999
*/

@media only screen and (min-width : 500px) and (max-width : 999px) {

/* 
T) General 
*/

body { background-color: #fff; }

p { font-size: 16px; margin: 0 0 14px 0; }
hr { width: 100%; }
h1 { text-align: center; background-color: #fff; padding: 30px 30px 30px 30px; }
h1.intro { color: #1578a4; text-align: center; margin: 90px auto 30px; line-height: 40px; letter-spacing: -0.4px; font-weight: normal; font-size: 30px; }
h2 { margin: 50px 0 30px 0; font-size: 26px; }
.wrapper { width: 90%; margin: 0 auto; }

/* 
T) Header 
*/

header { width: 100%; border-bottom: 0; height: 70px; position: relative; z-index: 1000; }
header .logo { float: left; display: block; margin: 0px 0px 0px 30px; }
header a { font-size: 18px; text-transform: uppercase; font-family: "RobotoMedium", Arial, Helvetica; }
header a#pull { display: block; background-color: #fff; float: right; width: 50px; height: 50px; position: relative; clear: both; margin: 0px 0px 0px 0px; }  
header a#pull:after { content:""; background: url(../img/nav-icon.png) no-repeat 7px 5px; background-size: 20px 20px; width: 30px; height: 30px; display: inline-block; position: relative; right: 15px; top: 18px; } 
header ul { width:100%; background-color: #f1f2f6; display: none; height: auto; margin: 20px 0px 50px 0px; letter-spacing: 1px; }
header ul li { margin: 0; padding: 20px 20px 20px 30px; float: none; border-bottom: 1px solid #fff; }
header ul li:nth-child(5) { padding-top: 20px; margin-right: 0px; }
header ul li.login { padding: 20px 20px 20px 30px; }
header ul li.login a { background-color: #f1f2f6; padding: 0px 0px 0px 0px; color:#666; font-family: "RobotoMedium", Arial, Helvetica; font-size: 18px; letter-spacing: 1px; }
header ul li.login a:hover { background-color: #f1f2f6; color: #0d8fc8; }

/* 
T) Content 
*/

.content-2col { width: 50%; padding: 0px 0px 0px 0px; margin-right: 0px; }
.content-2col h3 { margin: 0px 15px 15px 0px; line-height: 26px; }
.content-2col p { margin: 0px 15px 15px 0px; }
.inner-wider { width: 90%; padding-left: 0px; }
.box-content { width: 100%; }
.overview-box { float: left; margin: 0px auto 10px; position: inherit; width: 50%; overflow: auto; padding: 0 0 0 0; }
.overview-box h3 { font-size: 22px; padding-bottom: 10px; }
.overview-box .box-content { width: 80%; float: left; margin-left: 6px; margin-top: 5px; }
.content-pullout { margin: 0px 0px 40px 0px; clear: both; }
.content-pullout li { line-height: 36px; }
.two-col-break { clear: both; position: relative; display: block; overflow: hidden; height: 1px; }
.three-col-break { display: none; }
.two-col-break-desktop { display: none; }
.content-overview { float: left; margin: 0px auto 10px; width: 50%; overflow: auto; padding: 0 0 0 0; position: relative; }
.content-overview h3 { margin: 16px 0px 15px 60px; }
.content-overview p { margin: 0px 20px 0px 60px; }
#content-slider .bx-viewport { height: auto !important; }

.pricing_table { width: 100%; text-align: center; padding: 0px 0px 34px 0px; margin: 0px 0px 0px 0px; overflow: hidden; max-width: 100%; }
.price_block { width: 25%; border: 1px solid #cfcfcf; padding: 0 0 0 0; margin: 0 0 0 0; }
.price_block:nth-child(3) { clear: none;}

/* 
T) Positioning for Icons
*/ 

.icon-custom { background: url("../img/icon-sprites@2x.png"); background-size: 750px 50px; height: 50px; width: 50px; float: left; }
.icon-content { background: url("../img/icon-sprites@2x.png"); background-size: 750px 50px; height: 50px; width: 50px; float: left; margin-top: 6px; }

.icon-custom-web-development 	{ background-position:    0px -5px; }
.icon-quality-graphic-design 	{ background-position:  -50px -5px; }
.icon-osx-desktop-support 		{ background-position: -100px -5px; }
.icon-wordpress-cms 			{ background-position: -150px -5px; }
.icon-web-hosting 				{ background-position: -200px -5px; }
.icon-osx-linux-servers 		{ background-position: -250px -5px; }
.icon-internet-monitoring 		{ background-position: -300px -5px; }
.icon-offsite-backups 			{ background-position: -350px -5px; }
.icon-network-monitoring 		{ background-position: -400px -5px; }
.icon-firewalls-security		{ background-position: -450px -5px; }
.icon-flexible-service			{ background-position: -500px -5px; }
.icon-domain-registration		{ background-position: -550px -5px; }
.icon-custom-solutions			{ background-position: -600px -5px; }
.icon-unlimited-data			{ background-position: -650px -5px; }
.icon-cloud-hosting				{ background-position: -700px -5px; }

/* 
T) Header and Banner
*/

.front-box { width: 32%; margin-left: 0%; margin-right: 0%; padding: 0; overflow: visible; height:280px; position:relative; }
.front-box.first { margin-left: 0%; margin-right: 2%; }
.front-box.last { margin-left: 2%; margin-right: 0%; }
.front-box .button { position: absolute; bottom: 20px; left: 0px; right:0px; width: 80%; height: 25px; font-size: 12px; font-family: "RobotoBold", Arial, Helvetica; padding-top: 10px; text-transform: uppercase; letter-spacing: 1.8px; display: block; text-decoration: none; background-color: #fff; background-image: none; -moz-border-radius: 4px; border-radius: 4px; color: #194b8d; -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */ -moz-transition: all 0.3s ease-out;  /* FF4+ */ -ms-transition: all 0.3s ease-out;  /* IE10 */ -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */ transition: all 0.3s ease-out; }
.front-box h2 { font-size: 32px; font-family: "RobotoLight", Arial, Helvetica; padding-top: 10px; }
.front-box p { padding: 0 10% 0 10%; }

/* 
T) Slider
*/

.bx-viewport { height: 330px !important; }
.slider-heading { margin: 50px 0px 50px 0px; }
.slider-text { font-size: 27px; padding: 0px 50px 22px 50px; font-family: "RobotoLight", Arial, Helvetica; }
#content-slider .slider-text { padding: 20px 40px 40px 40px; }


/* 
T) Headers
*/

#fullwidth { height: 580px; background: url("../img/background.jpg") no-repeat center center  #333030; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  /* For IE, remove if having link or scroll bar issues */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod='scale');  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; }
.fullwidth-header { background-color: #333030; background-image: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
.fullwidth-header h1 { color: #fff; font-family: "RobotoThin", Arial, Helvetica; font-size: 52px; margin: 0px 0px 0px 0px; padding: 40px 0px 0px 95px; text-align: left; }

#fullwidth-content { height: 330px;  }

#fullwidth-content-webdev { background-image: none; margin: 0px 0px 0px 0px; height: 150px; overflow: hidden; }
#fullwidth-content-webdev h1 { background: url(../img/slider-icon-cog-up.png) 33px 60px no-repeat; }

#fullwidth-content-itsupport { background-image: none; margin: 0px 0px 0px 0px; height: 150px; overflow: hidden; }
#fullwidth-content-itsupport h1 { background: url(../img/slider-icon-display-up.png) 33px 60px no-repeat; }

#fullwidth-content-webhosting { background-image: none; margin: 0px 0px 0px 0px; height: 150px; overflow: hidden; }
#fullwidth-content-webhosting h1 { background: url(../img/slider-icon-shop-up.png) 33px 60px no-repeat; }

#fullwidth-content-monitoring { background-image: none; margin: 0px 0px 0px 0px; height: 150px; overflow: hidden; }
#fullwidth-content-monitoring h1 { background: url(../img/slider-icon-monitoring-up.png) 33px 60px no-repeat; }

#fullwidth-content-404 { background-image: none; margin: 0px 0px 0px 0px; height: 150px; overflow: hidden; }
#fullwidth-content-404 h1 { background: url(../img/slider-icon-error-up.png) 33px 60px no-repeat; }

#fullwidth-content-legal { background-image: none; margin: 0px 0px 0px 0px; height: 150px; overflow: hidden; }
#fullwidth-content-legal h1 { background: url(../img/slider-icon-legal-up.png) 33px 60px no-repeat; }

#fullwidth-content-contactus { background-image: none; margin: 0px 0px 0px 0px; height: 150px; overflow: hidden; }
#fullwidth-content-contactus h1 { background: url(../img/slider-icon-contact-up.png) 33px 60px no-repeat; }

/* 
T) Footer 
*/

footer ul { width: 100%; }

/* 
T) Contact Form 
*/

.contact-box-small { background-color: #e5e5e5; height: auto; width: 100%; padding: 0 0 0 0; vertical-align: middle; -moz-border-radius: 4px; border-radius: 4px; margin-bottom: 20px; margin-right: 0px; }
.contact-box-small h5 { margin: 5% 0% 2% 4%; }
.contact-box-small h5 a { font-size: 20px; line-height: 10px; font-family: "RobotoMedium", Arial, Helvetica; letter-spacing: -0.2px; color: #14949a; padding: 40px 0px 0px 0px; text-decoration: none; -moz-transition: all 0.3s ease-out;  /* FF4+ */ -ms-transition: all 0.3s ease-out;  /* IE10 */ -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */ transition: all 0.3s ease-out; }
.contact-box-small h5 a:hover { color: #095d61; }
.contact-box-small p { margin: 0% 0% 3% 4%; line-height: 25px; }
.contact-box-small a { color: #14949a; font-size: 16px; }
.contact-box-large { background-color: #e5e5e5; width: 100%; padding: 0 0 0 0; height: auto; font-size: 15px; line-height: 18px; overflow: visible; -moz-border-radius: 4px; border-radius: 4px; margin-right: 0px; }
.contact-name { border: none; background-color: #fff; width: 92%; margin: 5% 4% 3% 4%; padding-left: 0px; padding-right: 0px; height: 36px; font-family: "RobotoRegular", Arial, Helvetica; font-style: italic; float: left; }
.contact-email { border: none; background-color: #fff; width: 92%; margin: 1% 4% 3% 4%; padding-left: 0px; padding-right: 0px; height: 36px; font-family: "RobotoRegular", Arial, Helvetica; font-style: italic; float: left; } 
.contact-message { border: none; background-color: #fff; width: 92%; margin: 1% 4% 3% 4%; padding-left: 0px; padding-right: 0px; height: 50px; padding-top: 10px; font-family: "RobotoRegular", Arial, Helvetica; font-style: italic; } 
.contact-button { border: none; background-color: #14949a; margin: 0% 4% 4.5% 4%; color: #fff; display: block; -moz-border-radius: 4px; border-radius: 4px; padding: 10px 30px; font-family: "RobotoBold", Arial, Helvetica; font-size: 11px; letter-spacing: 2px; -moz-transition: all 0.3s ease-out;  /* FF4+ */ -ms-transition: all 0.3s ease-out;  /* IE10 */ -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */ transition: all 0.3s ease-out; }
.contact-button:hover { background-color: #095d61; outline: none; }

}

/* 
=========================================================
D) DESKTOP - 1000 and over
*/

@media only screen and (min-width : 1000px) {

.price_block { width: 25%;}
.price_block { border: 1px solid #cfcfcf; }
.price_block:last-child { border: 1px solid #cfcfcf; }
.price_block:hover { border: 1px solid #cfcfcf; }

.content-2col h3 { padding-top: 20px; }

.content-overview p { padding-right: 20px; }

.front-box { width: 32%; margin-left: 0%; margin-right: 0%; padding: 0; overflow: visible; height:260px; position: relative; margin: 80px 0px 0px 0px; }
.front-box.first { margin-left: 0%; margin-right: 2%; }
.front-box.last { margin-left: 2%; margin-right: 0%; }
.front-box .button { position: absolute; bottom: 20px; left: 0px; right:0px; width: 80%; height: 25px; font-size: 12px; font-family: "RobotoBold", Arial, Helvetica; padding-top: 10px; text-transform: uppercase; letter-spacing: 1.8px; display: block; text-decoration: none; background-color: #fff; background-image: none; -moz-border-radius: 4px; border-radius: 4px; color: #194b8d; -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */ -moz-transition: all 0.3s ease-out;  /* FF4+ */ -ms-transition: all 0.3s ease-out;  /* IE10 */ -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */ transition: all 0.3s ease-out; }
.front-box p { padding: 0 10% 0 10%; }

h1.intro { margin: 80px auto 30px; }

header a#pull { display: none; }

.three-col-break { clear: both; position: relative; display: block; overflow: hidden; height: 1px; }
.two-col-break { display: none; }
.two-col-break-desktop { clear: both; position: relative; display: block; overflow: hidden; height: 1px; }

/* === Positioning for Icons === */ 

.icon-custom { background: url("../img/icon-sprites.png") no-repeat 0 0;  width: 50px; height: 50px; float: left; }
.icon-content { background: url("../img/icon-sprites.png") no-repeat 0 0;  width: 50px; height: 50px; position: absolute; top: 5px; left: -5px; }

.icon-custom-web-development 	{ background-position: 0 -5px; }
.icon-quality-graphic-design 	{ background-position: -50px  -5px; width: 50px; }
.icon-osx-desktop-support 		{ background-position: -100px -5px; width: 50px; }
.icon-wordpress-cms 			{ background-position: -150px -5px; width: 50px; }
.icon-web-hosting 				{ background-position: -200px -5px; width: 50px; }
.icon-osx-linux-servers 		{ background-position: -250px -5px; width: 50px; }
.icon-internet-monitoring 		{ background-position: -300px -5px; width: 50px; }
.icon-offsite-backups 			{ background-position: -350px -5px; width: 50px; }
.icon-network-monitoring 		{ background-position: -400px -5px; width: 50px; }
.icon-firewalls-security		{ background-position: -450px -5px; width: 50px; }
.icon-flexible-service			{ background-position: -500px -5px; width: 50px; }
.icon-domain-registration		{ background-position: -550px -5px; width: 50px; }
.icon-custom-solutions			{ background-position: -600px -5px; width: 50px; }
.icon-unlimited-data			{ background-position: -650px -5px; width: 50px; }
.icon-cloud-hosting				{ background-position: -700px -5px; width: 50px; }


/* === Full Width Background === */


.fullwidth-header { width: 100%;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 200px; background: url("../img/background-web-hosting.jpg") no-repeat center center  #333030; /* For IE, remove if having link or scroll bar issues */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod='scale');  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";}
.fullwidth-header h1 { width: 960px; margin: 0 auto; color: #f3f3f3; text-align: left; padding: 56px 0px 0px 123px; font-family: "RobotoThin", Arial, Helvetica; font-size: 60px; font-weight: normal; }

#fullwidth { height: 634px; background: url("../img/background.jpg") no-repeat center center  #333030; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  /* For IE, remove if having link or scroll bar issues */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod='scale');  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; }
#fullwidth-content { height: 200px; background: url("../img/background.jpg") no-repeat center center  #333030; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  /* For IE, remove if having link or scroll bar issues */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod='scale');  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; }

#fullwidth-content-webdev { height: 200px; background: url("../img/background-web-development.jpg") no-repeat center center  #333030; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  /* For IE, remove if having link or scroll bar issues */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod='scale');  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; }
#fullwidth-content-webdev h1 { background: url(../img/slider-icon-cog-up.png) 63px 87px no-repeat; }

#fullwidth-content-itsupport { height: 200px; background: url("../img/background-it-support.jpg") no-repeat center center  #333030; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  /* For IE, remove if having link or scroll bar issues */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod='scale');  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; }
#fullwidth-content-itsupport h1 { background: url(../img/slider-icon-display-up.png) 63px 87px no-repeat; }

#fullwidth-content-webhosting { height: 200px; background: url("../img/background-web-hosting.jpg") no-repeat center center  #333030; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  /* For IE, remove if having link or scroll bar issues */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod='scale');  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; }
#fullwidth-content-webhosting h1 { background: url(../img/slider-icon-shop-up.png) 63px 87px no-repeat; }

#fullwidth-content-monitoring { height: 200px; background: url("../img/background-monitoring.jpg") no-repeat center center  #333030; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  /* For IE, remove if having link or scroll bar issues */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod='scale');  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; }
#fullwidth-content-monitoring h1 { background: url(../img/slider-icon-monitoring-up.png) 63px 87px no-repeat; }

#fullwidth-content-404 { height: 200px; background: url("../img/background-general.jpg") no-repeat center center  #333030; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  /* For IE, remove if having link or scroll bar issues */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod='scale');  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; }
#fullwidth-content-404 h1 { padding: 59px 0 0 123px; background: url(../img/slider-icon-error-up.png) 63px 87px no-repeat; }

#fullwidth-content-legal { height: 200px; background: url("../img/background-general.jpg") no-repeat center center  #333030; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  /* For IE, remove if having link or scroll bar issues */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod='scale');  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; }
#fullwidth-content-legal h1 { padding: 59px 0 0 123px; background: url(../img/slider-icon-legal-up.png) 63px 87px no-repeat; }

#fullwidth-content-contactus { height: 200px; background: url("../img/background-general.jpg") no-repeat center center  #333030; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  /* For IE, remove if having link or scroll bar issues */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod='scale');  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; }
#fullwidth-content-contactus h1 { background: url(../img/slider-icon-contact-up.png) 63px 87px no-repeat; }

}