.error {
    border: 2px solid red;
}
body{
    height: 300px;
    width: 100%;
    font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
header{
    background-color: #173760;
    color: #fff;
    height: 48px;
    width: 100%;
}
    header div{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
.sub-header{
    height:143px;
}
    .sub-header h1{
        text-align: center;
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 20px;
        padding-bottom: 10px;
        font-size: 32px;
    }
    .sub-header input[type=radio]{
        display: none;
    }
    .sub-header .tab{
        display: flex;
        align-items: flex-end;
        margin-top: 28px;
        margin-left: 36px;
    }
    .sub-header .tab label{
        width: 245px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #cacad0;
        color: #fff;
        margin: 0 1px;
        cursor: pointer;
        border-top-right-radius: 7px;
        border-top-left-radius: 7px;
        float: left;
        font-weight: 600;
    }
    .sub-header .tab .selected{
        background-color: #E8E9EC;
        color: #24b1d2;
    }
.search{
    background-color: #E8E9EC;
    height: 109px;
}
    .search form{
        text-align: center;
        margin-left: 35px;
        position: relative;

    }
    .search form b{
        display: block;
        position: absolute;
        top: 32px;
        right: 0px;
        left: 325px;
        bottom: 0px;
        height: 30px;
        width: 30px;
        margin-left: 0;
        margin-top: 0;
        border: 0;
        color: #fff;
        background-color: #32b1d2;
        border-radius: 3px;
        pointer-events: none;
    }
    .search form b:before{
        line-height: 32px;
    }
    .search form select{
        cursor: pointer;
    }
    .search form select, .search form input[type=text]{
        height: 42px;
        width: 360px;
        margin-top: 26px;
        border: 1px solid #173760;
        float: left;
        padding: 5px;
    }
    .search form input[type=submit]{
        float: left;
        height: 42px;
        margin-left: 10px;
        margin-top: 26px;
        color: #fff;
        background-color: #24b1d2;
        border-color: #24b1d2;
        width: 210px;
    }
.first{
    border-right: none !important;
}
.small, small {
    font-size: 100%;
}
.large, .small, .xsmall{
    display: none !important;
}
.xlarge{
    display: block !important;
}
.search img{
   display:none;
}

.pac-container{
	height: 40px;
    overflow-y: scroll;
}

@media (min-width: 1200px){
    .container {
        width: 1020px;
    }
}

@media all and (max-height: 300px) and (max-width: 1201px) {
    .container{
        width: 100%;
        padding: 0;
        margin: 0;
    }
}

/******************
**1000x150 / large**
*******************/
@media all and (max-height: 299px) and (max-width: 1000px) {
    body {
        height: 150px;
    }
    header, .xlarge {
        display:none !important;
    }
    .large{
        display: block !important;
    }
    .sub-header h1{
        font-size: 24px;
        float: left;
        padding-top: 50px;
        width: 730px;
    }
    .sub-header a{
        float: right;
        height: 42px;
        margin-right: 30px;
        margin-top: 38px;
        color: #fff;
        background-color: #24b1d2;
        border-color: #24b1d2;
        width: 210px;
        padding: 10px 12px;
    }
    .sub-header p{
        display: inline-block;
        float: right;
        margin-top: 30px;
        margin-right: 30px;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .sub-header p img{
        height: 20px;
        padding-left: 10px;
        margin-bottom: 4px;
    }
}

/******************
**300x300 / small**
*******************/
@media all and (max-height: 300px) and (max-width: 300px) {
    body{
        height: 300px;
        width: 300px;
        font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    .large, .xsmall,.xlarge, header {
        display:none !important;
    }
    .small{
        display: block !important;
    }
    .sub-header {
        height: 110px;
    }
    .sub-header h1{
        padding: 11px 0 22px;
        font-size: 17px;
    }
    .sub-header h1 span{
        font-size: 27px;
    }
    .sub-header .tab{
        margin:0;
        margin-left: 12px;
    }
    .sub-header .tab label{
        float: left;
        width: 135px;
        text-align: center;
        height: 30px;
        font-weight: 600;
    }
    .search {
        height: 190px;
    }
    .search form {
        text-align: center;
        margin-left: 10px;
    }
    .search form b{
        top: 15px;
        left: 250px;
        height: 25px;
        width: 25px;
    }
    .search form b:before{
        line-height: 26px;
    }
    .search form select, .search form input[type=text]{
        width: 280px;
        margin: 10px 0 3px;
        height: 35px;
    }
    .search form input[type=submit]{
        margin-top: 10px;
        float: none;
        margin-left: 0px;
        margin-bottom: 5px;
    }
    .search form p{
        float: left;
        margin: 8px 0 0 0;
    }
    .search img{
        float: right;
        height: 20px;
        margin-right: 12px;
        margin-top: 10px;
    }
    .first {
        border-right: 1px solid #173760 !important;
    }
}

/******************
**334x223 / custom**
*******************/
@media all and (max-height: 224px) and (max-width: 335px) {
    body {
        height: 223px;
    }
    .small, .large, .xsmall,.xlarge, header {
        display:none !important;
    }
    .custom{
        display: block !important;
    }
    .sub-header {
        height: 93px;
    }
    .sub-header h1{
        padding: 7px 0;
        width: 100%;
        font-size: 17px;
    }
    .sub-header h1 span{
        font-size: 30px;
    }
    .sub-header .tab{
        margin:0;
        margin-left: 30px;
    }
    .sub-header .tab label{
        float: left;
        width: 135px;
        text-align: center;
        height: 30px;
        font-weight: 600;
    }
    .search {
        height: 130px;
        background-color: #E8E9EC;
    }
    .search form {
        text-align: center;
        margin-left: 10px;
    }
    .search form b{
        top: 13px;
        left: 284px;
        height: 25px;
        width: 25px;
    }
    .search form select, .search form input[type=text] {
        width: 314px;
        margin: 6px 0 1px;
        height: 35px;
    }
    .search form b:before {
        line-height: 27px;
    }
    .search form input[type=submit]{
        height: 32px;
        float: right;
        width: 150px;
        margin-left: 0px;
        margin-top: 5px;
        margin-right: 9px;
    }
    .search img{
        float: left;
        margin-left: 3px;
        margin-top: 8px;
        position: initial;
        height: 24px;
    }
    .first {
        border-right: 1px solid #173760 !important;
    }
}

/******************
**    300x250    **
*******************/
@media all and (max-height: 250px) and (max-width: 300px) {
    body {
        height: 250px;
    }
    .sub-header {
        height: 90px;
    }
    .sub-header h1{
        padding: 7px 0;
        width: 300px;
    }
    .sub-header h1 span {
        font-size: 27px;
    }
    .part{
    	display: none !important;
    }
    .search{
    	height: 160px;
    }
    .search form b{
        top: 16px;
    }
    .search img{
    	float: left;
    	margin-top: 20px;
    }
    .search form input[type=submit] {
	    float: right;
	    width: 140px;
	    margin-right: 10px;
	}
    
}


/******************
**300x200 / xsmall**
*******************/
@media all and (max-height: 200px) and (max-width: 300px) {
    body {
        height: 200px;
    }
    header, .large, .xlarge, .small  {
        display:none !important;
    }
    .xsmall{
        display: block !important;
    }
    .sub-header {
        height: 60px;
    }
    .sub-header h1{
        padding: 7px 0;
        width: 300px;
    }
    .sub-header h1 span {
        font-size: 27px;
    }
    .search {
        height: 140px;
        background-color: #fff;
    }
    .search form b{
        top: 16px;
        left: 250px;
        height: 25px;
        width: 25px;
    }
    .search form select, .search form input[type=text] {
        width: 280px;
        margin: 10px 0 3px;
        height: 35px;
    }
    .search form input[type=submit]{
        height: 32px;
        float: right;
        width: 150px;
        margin-left: 0px;
        margin-top: 5px;
    }
    .search img{
        float: left;
        margin-right: 12px;
        margin-top: 11px;
        position: initial;
        height: 20px;
        margin-left: 0;
    }
}

/******************
**    238x159    **
*******************/
@media all and (max-height: 159px) and (max-width: 238px) {
    body {
        height: 159px;
        width: 238px;
    }
    .sub-header {
	    height: 49px;
	}
    .sub-header h1{
        padding: 7px 0;
        width: 238px;
        font-size: 13px;
    }
    .sub-header h1 span {
	    font-size: 21px;
	}
	.search{
		height: 110px;
	}
	.search form select, .search form input[type=text] {
	    width: 218px;
	    margin: 0px 0 3px;
	    height: 30px;
	}
	.search form b {
        top: 7px;
	    left: 193px;
	    height: 20px;
	    width: 20px;
	}
	.search form b:before{
        line-height: 22px;
    }
	.search form input[type=submit] {
	    height: 32px;
	    float: right;
	    width: 105px;
	    margin-left: 0px;
	    margin-top: 3px;
	    margin-right: 10px;
	}
	.search img {
	    float: left;
	    margin-right: 12px;
	    margin-top: 11px;
	    position: initial;
	    height: 17px;
	    margin-left: 0;
	}
    
}