/* ==========================================================================
   Grid Layout
   ========================================================================== */

#wrapper {
	width: 100%;
	position: relative;
	box-sizing: border-box;
	padding: 105px 0 20px;
}

.login-bg {
	background: url('../../images/design/customer-care/login-bg.jpg') no-repeat left top;
	background-size: cover;
	position: relative;
	height: 100%;
}

.spacer {
	padding: 10px 0;
	clear: both;
}

.hide {
	display: none;
}

header {
	height: 85px;
	background: #fff;
	width: 100%;
	position: fixed;
	box-shadow: 0px 1px 2px 0px #E3E5E6;
	z-index: 5;
}

.logo {
    position: absolute;
    left: 20px;
    top: 5px;
}

@media (min-width: 1180px) {
    .inner-header {
        width: 1180px;
        left: 50%;
        margin-left: -590px;
        position: relative;
    }
    .logo {
    left: 15px;
}
}

div[class*='width-'] {
	width: 90%;
}

.col-1 {
	position: relative;
	left: 5%;
	margin-bottom: 20px;
}

.col-2 {
	position: relative;
	left: 5%;
	margin-bottom: 20px;
}

.col-3 {
	position: relative;
	left: 5%;
	margin-bottom: 20px;
}

.col-4 {
	position: relative;
	left: 5%;
	margin-bottom: 20px;
}


.height-1, .height-2, .height-3, .height-4 {
	height: auto;
}

@media (min-width: 500px) {

div[class*='width-'] {
	width: 80%;
}

.col-1 {
	left: 10%;
}

.col-2 {
	left: 10%;
}

.col-3 {
	left: 10%;
}

.col-4 {
	left: 10%;
}	
}

@media (min-width: 600px) {

div[class*='width-'] {
	width: 70%;
}

.col-1 {
	left: 15%;
}

.col-2 {
	left: 15%;
}

.col-3 {
	left: 15%;
}

.col-4 {
	left: 15%;
}	
}

@media (min-width: 800px) {

#wrapper {
	max-width: 1180px;
	padding: 0;
}

.spacer {
	padding: 10px 0;
}

.col-1 {
	left: calc(20px);
}

.col-2 {
	left: 25.75%;
	left: calc(25% + 15px);
}

.col-3 {
	left: 50.25%;
	left: calc(50% + 10px);
}

.col-4 {
	left: 74.75%;
	left: calc(75% + 5px);
}

.col-1, .col-2, .col-3, .col-4 {
	position: absolute;
}

div[class*='width-1'] {
	width: 24%;
	width: calc(25% - 25px);
}

div[class*='width-2'] {
	width: 48.75%;
	width: calc(50% - 30px);
}

div[class*='width-3'] {
	width: 73.25%;
	width: calc(75% - 35px);
}

div[class*='width-4'] {
	width: 97.5%;
	width: calc(100% - 40px);
}

.height-1 {
	height: 270px;
}

.height-2 {
	height: 560px;
}

.height-3 {
	height: 850px;
}

.height-4 {
	height: 1140px;
}

.row-1  {
	top: 105px;
}

.row-2 {
	top: 395px;
}

.row-3 {
	top: 685px;
}

.row-4 {
	top: 975px;
}

}

@media (min-width: 1180px) {

#wrapper {
	width: 1180px;
	left: 50%;
	margin-left: -590px;
}

}