/*! 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.
 
 Thin			"ff-enzo-web"	100	normal	
 
Thin Italic		"ff-enzo-web"	100	italic	
 
Light			"ff-enzo-web"	300	normal	
 
Light Italic	"ff-enzo-web"	300	italic	
 
Medium			"ff-enzo-web"	600	normal	
 
Medium Italic	"ff-enzo-web"	600	italic	
 
Bold			"ff-enzo-web"	700	normal	
 
Bold Italic		"ff-enzo-web"	700	italic	
 
Black			"ff-enzo-web"	900	normal	
 
Black Italic	"ff-enzo-web"	900	italic	
 
 */

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

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
	font-family: "ff-enzo-web",sans-serif;
}

/*
 * 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,
svg,
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
   ========================================================================== */
body {
	/*max-width: 1700px;*/
	width: 100%;
	margin: auto;	
}
header {
	width: 100%;	
}
.logo {
	float: left;
	width: 140px;
	margin-bottom: 10px;	
	margin-top: 5px;
}
.phone {
	float: right;
	margin-right: 20px;
	font-size: 2em;
}	
.big-img {
	/*width: 1700px;*/
	width: 100%;
	max-width: 1700px;
	float: left;
	margin: auto;
	background-color: #476c99;
	background-image:url(../img/clouds2.jpg);
	height: 718px;		
}
.big-img-text {
	width: 600px;
	float: right;
	margin-right: 10%;	
	margin-top: 40px;
}
.big-img h1 {
	font-size: 5.5em;
	font-weight:100;
	color: #ffffff;
	text-align:center;
	border-bottom: thin solid #ffffff;
	padding-bottom: 20px;
}
.big-img h2 {
	color: #ffffff;
	font-weight: 800;
	font-size: 1.5em;
	text-align: center;	
	margin-top: -14px;
}
.logon {
	font-size:.5em;	
	text-align: right;
}
.logon a:link, .logon a:visited {
	text-decoration: none;
	color: rgba(100,98,98,1.00);
	-webkit-transition: all 0.5s ease-out 0s;
	-moz-transition: all 0.5s ease-out 0s;
	-ms-transition: all 0.5s ease-out 0s;
	-o-transition: all 0.5s ease-out 0s;
	transition: all 0.5s ease-out 0s;
}	
.logon a:hover {
	text-decoration: none;
	color: rgba(0,133,217,1.00);	
}
.products {
	float: left;
	width: 600px;
	margin-left: 40%;
	margin-top: 20px;	
}
.button {
	border: thin solid #ffffff;
	padding: 10px;
	font-weight: 100;
	font-size: 1.5em;
	color: #ffffff;
	text-align: center;
}
.button a:link, .button a:visited {
	color: #ffffff;
	text-decoration: none;
	-webkit-transition: all 0.5s ease-out 0s;
	-moz-transition: all 0.5s ease-out 0s;
	-ms-transition: all 0.5s ease-out 0s;
	-o-transition: all 0.5s ease-out 0s;
	transition: all 0.5s ease-out 0s;
}
.button a:hover{
	color: #F5B2B3;
	text-decoration:none;
}
.menu-outer {
	width: 100%;	
}
.menu {
	width: 1110px;
	margin: auto;
	font-size: 1em;
	font-weight: 300;
	color: #3E3C3C;
}
.menu-item {
	width: 115px;
	height: 180px;	
	padding-left: 10px;
	padding-right: 10px;
	display: block;
	float: left;
	text-align: center;
}
.menu-item a:link, .menu-item a:visited {
	text-decoration: none;
	color: rgba(100,98,98,1.00);
	-webkit-transition: all 0.5s ease-out 0s;
	-moz-transition: all 0.5s ease-out 0s;
	-ms-transition: all 0.5s ease-out 0s;
	-o-transition: all 0.5s ease-out 0s;
	transition: all 0.5s ease-out 0s;
}
.menu-item a:hover {
	text-decoration: none;
	color: rgba(0,133,217,1.00);
}
.menu-item-border {
	border-left: thin solid #E5E4E4;
	width: 2px;	
	float: left;
	height: 140px;
	margin-top: 10px
}

/*menu inner pages*/
.menu1 {
	width: 1110px;
	margin: auto;
	font-size: 1em;
	font-weight: 300;
	color: #3E3C3C;
}
.menu-item1 {
	width: 115px;
	height: 40px;	
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 20px;
	display: block;
	float: left;
	text-align: center;
}
.menu-item1 a:link, .menu-item1 a:visited {
	text-decoration: none;
	color: rgba(100,98,98,1.00);
	-webkit-transition: all 0.5s ease-out 0s;
	-moz-transition: all 0.5s ease-out 0s;
	-ms-transition: all 0.5s ease-out 0s;
	-o-transition: all 0.5s ease-out 0s;
	transition: all 0.5s ease-out 0s;
}
.menu-item1 a:hover {
	text-decoration: none;
	color: rgba(0,133,217,1.00);
}
.menu-item-border1 {
	border-left: thin solid #E5E4E4;
	width: 2px;	
	float: left;
	height: 30px;
	margin-top: 25px
}

.about {
	margin-bottom: 40px;
}
.about-inner {
	width: 1110px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.2em;
	color: #333333;	
}
.about-inner h1 {
	font-weight: 100;
	font-size: 3em;
	text-align:center;
	/*color: #494848;*/
	color:#0348B3;
}
.about-inner h2 {
	font-weight: 600;
	font-size: 1.8em;
	text-align:center;	
	color:#494848;	
}
.about-inner h3 {
	color: #676666;	
}
.contact {
	margin-bottom:40px;	
}
.contact-inner {
	width: 1110px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.2em;
	color: #333333;
	text-align:center;
}
.contact-inner-box {
	width: 505px;
	float: left;
	padding: 20px;	
}
.contact-inner h1 {
	font-weight: 100;
	font-size: 3em;
	text-align:center;
	/*color: #494848;*/
	color:#0348B3;
}
.contact-inner h2 {
	font-weight: 600;
	font-size: 1.8em;
	text-align:center;	
	color:#494848;	
}
.contact-label {
	color: #0348B3;	
}
.contact-detail {
	color: #333333;	
}
.contact-detail a:link, .contact-detail a:link {
	color: #333333;
	text-decoration:underline;
	-webkit-transition: all 0.5s ease-out 0s;
	-moz-transition: all 0.5s ease-out 0s;
	-ms-transition: all 0.5s ease-out 0s;
	-o-transition: all 0.5s ease-out 0s;
	transition: all 0.5s ease-out 0s;
}
.contact-detail a:hover {
	color: #00ABFF;
	text-decoration:underline;
}
.description {
	height: 220px;
	padding-bottom: 20px;
	border-bottom: thin solid #E3E3E3;
	margin-bottom: 20px;	
}
.description img {
	float: left;
	width: 115px;
	height: 90px;	
}
.description p {
	float: left;
	height: 90px;
	width: 750px;
	margin-left: 10px;
	margin-right: 10px;	
}
.read-more {
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 6px;
	height: 30px;		
	width: 115px;
	background-color:rgba(0,145,237,0.2);
	margin-top: 29px;
	margin-bottom: 10px;
	text-align: center;
}
.read-more a:link, .read-more a:visited {
	color: rgb(51, 51, 51);
	text-decoration:none;
	-webkit-transition: all 0.5s ease-out 0s;
	-moz-transition: all 0.5s ease-out 0s;
	-ms-transition: all 0.5s ease-out 0s;
	-o-transition: all 0.5s ease-out 0s;
	transition: all 0.5s ease-out 0s;
}
.read-more a:hover {
	color:rgba(0,81,225,1.00);
	text-decoration:none;
}	
.buy-now {
	float: left;
	background-color:rgba(0,145,237,0.5);
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 6px;
	height: 30px;
	width: 115px;
	margin-bottom: 10px;
	text-align: center;
}
.buy-now a:link, .buy-now a:visited {
	color: rgb(51, 51, 51);
	text-decoration:none;
	-webkit-transition: all 0.5s ease-out 0s;
	-moz-transition: all 0.5s ease-out 0s;
	-ms-transition: all 0.5s ease-out 0s;
	-o-transition: all 0.5s ease-out 0s;
	transition: all 0.5s ease-out 0s;
}
.buy-now a:hover {
	color:rgba(77,92,251,1.00);
	text-decoration:none;
}
.page-btm {
	float: right;
	width: 115px;	
}

.buy-now1 {
	float: left;
	background-color:rgba(0,145,237,0.5);
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 6px;
	height: 30px;
	width: 115px;
	margin-top: 29px;
	margin-bottom: 10px;
	text-align: center;
}
.buy-now1 a:link, .buy-now1 a:visited {
	color: rgb(51, 51, 51);
	text-decoration:none;
	-webkit-transition: all 0.5s ease-out 0s;
	-moz-transition: all 0.5s ease-out 0s;
	-ms-transition: all 0.5s ease-out 0s;
	-o-transition: all 0.5s ease-out 0s;
	transition: all 0.5s ease-out 0s;
}
.buy-now1 a:hover {
	color:rgba(77,92,251,1.00);
	text-decoration:none;
}

.top {
	float: right;
	background-color:#FFFFFF;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 6px;
	height: 30px;
	width: 115px;
	margin-top: 29px;
	margin-bottom: 10px;
	text-align: center;
	border: thin darkgrey solid;
	margin-right: -20px;
	
}
.top a:link, .top a:visited {
	color: #000000;
	text-decoration:none;
	-webkit-transition: all 0.5s ease-out 0s;
	-moz-transition: all 0.5s ease-out 0s;
	-ms-transition: all 0.5s ease-out 0s;
	-o-transition: all 0.5s ease-out 0s;
	transition: all 0.5s ease-out 0s;
}
.top a:hover {
	color:#666666;;
	text-decoration:none;
}
.about-inner-img {
	width: 115px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -20px;	
}
.buttons {
	width: 850px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 160px;
}
.button-item {
	width: 115px;
	float: left;
	margin-left: 40px;
	margin-right: 40px;
}

.price {
	height: 40px;
	border-bottom: thin solid lightgrey;
	padding: 10px;
}
.price-long {
	height: 230px;
	border-bottom: thin solid lightgrey;
	padding: 10px;
}
.price-item {
	float: left;
	width: 700px;
	color: #4F4F4F;
	font-weight: 300;
	font-size: 1.1em;
	text-align: left;
	padding-left:40px;	
}
.price-amount {
	float: left;
	min-width: 300px;
	color: #0348B3;
	font-weight: 300;
	font-size: 1.1em;
	text-align: right;	
}
.side-menu {
	position: fixed;
	width: 90px;
	height: 200px;
	top: 350px;
	z-index: 100;
	right: -10px;
	font-size: 1.2em;
}
.item a {
	writing-mode:tb-rl;
    -webkit-transform:rotate(-270deg);
    -moz-transform:rotate(-270deg);
    -o-transform: rotate(-270deg);
    white-space:nowrap;
    display:block;	
	height: 40px;
	background-color: #5d6e7e;
	text-align: center;
	border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
	padding-top: 20px;
}
.item a:link, .item a:visited {
	color: #ffffff;
	text-decoration: none;
	background-color: #5d6e7e;
	-webkit-transition: all 0.5s ease-out 0s;
	-moz-transition: all 0.5s ease-out 0s;
	-ms-transition: all 0.5s ease-out 0s;
	-o-transition: all 0.5s ease-out 0s;
	transition: all 0.5s ease-out 0s; 
	width: 100px;
	margin-bottom:45px;
}
.item a:hover {
	width: 95px;
	background-color:#2d3e50;
}

footer {
	width: 100%;
	padding-top: 30px;
	padding-bottom: 50px;
	background-color: #000000;
	margin-top: 40px;
}	
footer p {
	font-size: .9em;
	color: #ffffff;
	font-weight: 300;
	text-align:center;	
}
footer p a:link, footer p a:visited {
	color: #D3E9F4;
	text-decoration:none;
	-webkit-transition: all 0.5s ease-out 0s;
	-moz-transition: all 0.5s ease-out 0s;
	-ms-transition: all 0.5s ease-out 0s;
	-o-transition: all 0.5s ease-out 0s;
	transition: all 0.5s ease-out 0s;	
}
footer p a:hover {
	color: #ECECEC;
	text-decoration:none;	
}

.comp_table {
	
}
.comp_table th {
	background: #DEF4FC;
	padding-top:10px;
	padding-bottom: 10px;
	border-top: thin solid #C5C5C5;	
	border-bottom: thin solid #C5C5C5;	
	margin-top: 15px;
	margin-bottom: 5px;
}
.comp_table tr th {
	margin-top: 100px;	
}
.col1 {
	width: 500px;	
}
.r2 {
	margin-bottom:15px;	
}
.note {
	color: #939292;
	font-size: .9em;
	font-style: italic;		
}
.require {
	font-size: .8em;
	color: #7B7B7B;
	margin-top:15px;
	margin-bottom:15px;
}
.exch_right {
	width: 600px;
	padding-top: 20px;
	padding-left: 80px;
	padding-bottom: 40px;
	background: #E4E4E4;
	border: thin solid 9#676666;
	font-weight: 600;	
	margin:auto;
	margin-top: 45px;
	margin-bottom: 15px;
}
.be_feat {
	
}
.be_feat img {
	width: 17px;
	float: left;
	margin-right: 20px;	
}
.be_feat p {
	float: left;
	width: 500px;	
}
.be_h2 {
	padding-top: 30px;
	padding-bottom: 5px;
	border-top: thin solid #424141;
	margin-top: 100px;
	font-size: 1.2em;
}

.more-centre-white {
	background: #fff;
	padding: 10px;
	float: none;
	width: 980px;
	color: #323131;
	margin-right: auto;
	margin-left: auto;
	text-align: right;
}
.more-centre-white p {
	font-weight: 300;
	color: #878585;	
	text-align:left;
}
.more-centre-white img {
	margin-top: -30px;
	margin-right: 15px;
	float:left;
	background-image: url(../img/computer.png);
	background-repeat:no-repeat;
	padding-top: 53px;
	padding-left: 18px;
	padding-right: 20px;
	padding-bottom: 100px;
	width:266px;
}
.more-centre-white a:link, .more-centre-white a:visited {
	cursor:url(../img/hand-icon.png),auto;	
	color: #283A2E;
}
.more-centre h1 {
	font-size: 4em;
	font-weight:900;
}
.imageleft {
	float: left;
	margin-left: 200px;
	width: 300px;
	margin-top: -150px;	
}
.about-section-1 {
	width: 100%;
	height: 333px;	
	background-color:  #e99914;
}
.about-section-2 {
	width: 100%;
	height: 333px;	
	background-color: #c1392d;
}
.about-section-3 {
	width: 100%;
	height: 333px;	
	background-color: #974db1;
}
.about-section-4 {
	width: 100%;
	height: 333px;	
	background-color: #4179b4;
}
.about-image-left {
	float: left;
	width: 30%;
	margin-right: 10px;
}
.about-image-left img{
	width: 100%;
	max-width: 500px;
	max-height: 333px;	
}
.about-image-right {
	float: right;
	width: 30%;		
	margin-left: 10px;
}
.about-image-right img{
	width: 100%;
	max-width: 500px;
	max-height: 333px;	
}
.about-section-text {
	font-size: 1.5em;
	color: #ffffff;	
	padding: 10px;
}
.about-section-text h3 {
	font-size: 1.5em;
	color: #ffffff;	
	padding: 10px;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screen readers: 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 screen readers, 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;
}

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

@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 the additional HTTP request: 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 that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]: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;
    }

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

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

@media 
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and (   min--moz-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and (   -o-min-device-pixel-ratio: 2/1) and (min-device-width: 1025px),
only screen and (        min-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and (           min-resolution: 192dpi) and (min-device-width: 1025px),
only screen and (            min-resolution: 2dppx) and (min-device-width: 1025px) {

    /* MacBook-Retina-specific stuff here */
.big-img-text {
	width: 600px;
	float: right;
	margin-right: 5%;	
	margin-top: 10px;
}	
	
}