/* 2018 SEESTEVE.ME - By Steve Villanueva 05.04.18 */

/*
* Colors:
* Dark blue: #4a89d9

* Table of Contents:
* BODY
* HEADER
* HOME *?
* BOX
* CONTENT
* FOOTER
*/

// BODY //

@import url('https://fonts.googleapis.com/css?family=Lato');

html, body
{
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: 0;
}

body
{
	margin:0 !important;
	font-family:'Lato';
	text-rendering: optimizeLegibility;
	line-height:22px;
	font-weight:normal;
	background-image:url('../images/bg.png');
	background-repeat:no-repeat;
	background-position:bottom right;
        background-color:#f4f4f4;
}

table, th, td 
{
   
}

h1, h2, h3, h4
{
        font-weight:bold;
}

h1, h2, h3, h4, div
{
	font-family:'Lato';
	letter-spacing:1.4px;
	color:#555;
}

.nav
{
	position: absolute;
	width: 50%;
	top: 40px;
	left: 100px;
}

.success
{
	color:#3c763d;
	border: 1px solid #b2dba1;
	font-weight:bold;
	font-size:18px;
	font-family:'Lato';
 //	background-image:url('../images/success.png');
        background-repeat:no-repeat;
        background-position:18px 18px;
        background: linear-gradient(#e6f3e1, #c8e5bc);
	border-radius:8px;
	padding:10px;
        text-align:left;
        margin:20px;
}

.warning
{
        color:#fff;
        border: 1px solid #d78b04;
        font-weight:bold;
        font-size:18px;
        font-family:'Lato';
 //     background-image:url('../images/success.png');
        background-repeat:no-repeat;
        background-position:18px 18px;
        background: linear-gradient(#ffc155, #ffa506);
        border-radius:8px;
        padding:15px;
        text-align:left;
        margin-bottom:20px;
}

#PageWrap 
{
	width:100%;
        max-width: 1012px;
        margin: auto;
	padding:10px;
}

.content
{
        height: 692px;
}

// HEADER //

.header2 
{
        background-color: #fff;
        width: 100%;
        position: fixed;
        top: 0;
        bottom: auto;
        height:80px;
        z-index:4;
        opacity:0.9;
        box-shadow: 0 15px 15px rgba(0,0,0,0.05);
}

.outer
{
        background-color: #fff;
        position: relative;
        height: 260px;
}

.outer .banner
{
        font-size: 46px;
}

.outer .header1
{
        position: absolute;
        bottom: 0;
        z-index: 2;
        top: auto;
}

.header1
{
        background-color: #fff;
        width: 100%;
        position: fixed;
        top: 0;
        bottom: auto;
        height:260px;
        z-index:5 !important;
        box-shadow: 0 15px 15px rgba(0,0,0,0.05);
}

.header1-inner
{
        width:100%;
        height:123px;
        display:inline-block;
}

.header1-left
{
        width:50%;
        float:left;
        height:50%;
}

.header1-right
{
        width:50%;
        float:right;
        height:50%;
}

.header1-left-set
{
        padding:20px;
	opacity:1;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        transition: all .3s ease-out;
}

.header1-left-set:hover
{
        padding:20px;
        opacity:0.9;
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        transition: all .3s ease-in;
}

.header1-right-set
{
        padding:20px;
        text-align:right;
        font-family:'Open Sans', sans-serif;
}

.header1-slogan
{
        width:100%;
        display:inline-block;
}

.header1-slogan-inner
{
        padding:16px 16px 16px 18px;
        font-family:'Lato', sans-serif;
        font-size:20px;
        color:#aaa;
}

.header1-capture
{
        width:100%;
//        display:inline-block;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:left;
}

.header1-input
{
        padding-left:10px;
        outline:none;
        height:40px;
        border:1px solid #ccc;
        width:90%;
        display:inline-block;
}


.header2
{
        background-color: #fff;
        width: 100%;
        position: fixed;
        top: 0;
        bottom: auto;
        height:80px;
        z-index:4;
        opacity:0.9;
        box-shadow: 0 15px 15px rgba(0,0,0,0.05);
}

.header2-inner
{
        height:100%;
        width:100%;
}

.header2-logo
{
        width:15%;
        float:left;
        display:inline-block;
        height:100%;
}

.header2-logo-inner
{
        padding:10px;
        float:left;
}

.header2-form
{
        text-align:center;
        width:50%;
        float:left;
        display:inline-block;
        height:100%;
}

.header2-form-inner
{
        padding-left:10px;
        height:100%;
        display:flex;
        align-items:center;
        justify-content:left;
}

.header2-form-set
{
        width:100%;
        padding:20px;
        display:inline-block;
        display:flex;
        align-items:center;
        justify-content:left;
}

.header2-input
{
        height:40px;
        border:1px solid #ccc;
        width:90%;
        display:inline-block;
        padding-left:10px;
        outline:none;
}

.header2-links
{
        width:35%;
        float:left;
        height:100%;
        display:inline-block;
}

.header2-links-inner
{
        padding:10px;
        float:right;
}

.header2-links-set
{
        padding:10px;
        text-align:right;
        font-family:'Open Sans', sans-serif;
}

.contact-input
{
        height:60px;
        border:1px solid #ccc;
        width:100%;
        display:inline-block;
        padding-left:10px;
        outline:none;
}


input[type=submit]#submitter {
        background-color: #4a89d9;
        text-align: center;
	height:40px;
	width:auto;
        display: inline-block;
        font-size: 15px;
        color: #fff;
	text-transform:uppercase;
	border-radius:3px;
        border:1px solid #4a89d9;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        transition: all .3s ease-out;
        outline:none;
        display:flex;
        align-items:center;
        justify-content:center;
	text-align:center;
	display: -webkit-box
}

input[type=submit]#submitter:hover {
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        transition: all .3s ease-in;
        outline:none;
	opacity:0.9;
	cursor:pointer;
}

.FooterMain
{
        background-color:#4a89d9;
        width:100%;
        height:60px;
        display:inline-block;
        display:flex;
        align-items:center;
        justify-content:left;
        letter-spacing:1.5px;
        bottom:0;
        font-size:12px;
        padding-left:10px;
        color:#fff;
}

.FooterMobile
{
	display:none;
}

a.headerLink
{
        text-decoration:none;
        padding-right:10px;
        font-family: 'Titillium Web', sans-serif;
        font-weight:600;
        sans-serif;
        color:#666;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        transition: all .3s ease-out;
}

a.headerLink:hover
{
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        transition: all .3s ease-in;
        color:#81be41;
}

.dropdown
{
        position: relative;
        display: inline-block;
        cursor: pointer;
        color:gray;
        -moz-transition:color .3s ease-out;
        -o-transition:color .3s ease-out;
        -webkit-transition:color .3s ease-out;
        transition: all .3s ease-out;
        text-transform:uppercase;
        padding-top:5px;
}

.dropdown-content
{
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 240px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        right:0;
        text-transform:capitalize;
}

.dropdown-link
{
        padding:13px;
        -moz-transition:color .3s ease-out;
        -o-transition:color .3s ease-out;
        -webkit-transition:color .3s ease-out;
        transition: all .3s ease-out;
        color:gray;
	font-size:14px;
}

.dropdown-link:hover
{
        background-color:#4a89d9;
        -moz-transition:color .2s ease-in;
        -o-transition:color .2s ease-in;
        -webkit-transition:color .2s ease-in;
        transition: all .2s ease-in;
        color:#fff;
}

.dropdown-content a
{
        text-decoration:none;
}

.dropdown:hover .dropdown-content
{
        display: block;
}

.dropdown:hover
{
        -moz-transition:color .2s ease-in;
        -o-transition:color .2s ease-in;
        -webkit-transition:color .2s ease-in;
        transition: all .2s ease-in;
	color:#4a89d9;
}

// HOME //

.HomeWrapper
{
	width:100%;
	height:auto;
	text-align:center;
//	background-color:magenta;
}

.HomeInner
{
	width:100%;
	max-width:1475px;
	margin:0 auto;
	height:auto;
//	background-color:orange;
}

.HomeSidebarTop
{
	border-top-left-radius:4px;
	border-top-right-radius:4px;
}

.HomeSidebarBottom
{
        border-bottom-left-radius:4px;
        border-bottom-right-radius:4px;
}

.HomeSidebar
{
	width:425px;
//	height:auto;
	float:left;
	text-align:center;
	display:inline-block;
	padding:38px; 
//	background-color:red;
}

.HomeSocialButton
{
        display:flex;
        align-items:center;
        justify-content:center;
        height:30px;
	width:30px;
        background-color:#4a89d9;
        color:#fff;
        border-radius:4px;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        transition: all .3s ease-out;
	float:left;
	margin-right:20px;
}

.HomeSocialButton:hover
{
        cursor:pointer;
	opacity:0.9;
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        transition: all .3s ease-in;
}

.HomeButtonContainer
{
	padding-top:20px;
	width:100%;
	text-align:center;
}

.HomeButton
{
	display:none;
}

.HomeSidebarInner
{
        width:325px;
	background-color:white;
        box-shadow: 0 3px 3px rgba(0,0,0,0.1);
	height:auto;
	display:inline-block;
	height:auto;
	padding-bottom:20px;
	margin-bottom:2px;
}

.HomeContent
{
	width:auto;
	height:auto;
	display:flex;
}


// BOX //

.wrap {
        overflow: hidden;
     // margin: 10px;
        padding-bottom:70px;
}

.box {
	display:inline-block;
        float: left;
        position: relative;
//        width: 33.3333%;
	width:25%;
        padding-bottom: 40%;
        overflow:hidden;
	opacity:1;


/*
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
*/
}

.box a
{
        text-decoration:none;
}

.box:hover .boxDevice
{
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        opacity:0.9;
}

.box:hover .boxDeviceTitle, .box:hover .boxDeviceInfo
{
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
	color:#4a89d9;
}

.boxInner {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow: hidden;
}
.boxInner img {
        width: 100%;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        opacity:1;
}

.boxInner .titleBox
{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-size:cover;
        color: #FFF;
        font-size:14px;
        padding: 20px;
        text-align: center;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        opacity:1;
}

.boxInner:hover .titleBox
{
        opacity:1;
}

.boxInner:hover img
{
        -webkit-transition: all 0.3s ease-in;
        -moz-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
}

.boxContainer
{
	text-align:center;
	width:100%;
	display:inline-block;
}

.boxContainerSub
{
	margin:0 auto;
	width:100%;
	max-width:1000px;
	display:inline-block;
}

.boxDevice
{
	display:inline-block;
	height:auto;
	text-align:center;
}

.boxDeviceTitle
{
	padding-left:35px;
	text-align:left;
	font-weight:bold;
	font-size:14px;
	font-family:'Lato';
}

.boxDeviceInfo
{
	padding-left:35px;
	padding-top:5px;
	text-align:left;
	font-size:12.5px;
	font-family:'Lato';
}

// CONTENT //


.AboutBig
{
	display:inline-block;
}


.AboutSmall
{
	display:none;
}
// FOOTER //


.break
{
	display:none;
}


body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
        margin-bottom: 0;
}

.mobile-padding
{
	display:none;
}