@import 'mixins.less';

.contact-page, .concierge-page, .covid-19-page {
    h1 {
        border-bottom: solid 1px #e1e1e1;
        color: @blue;
        font-size: 22px;
        margin-top: 25px;
        padding-bottom: 5px;
        text-align: center;
        .medium-font;
    }

    form {
        padding: 40px 55px;
        position: relative;
    
        .contact-details {
            color: black;
            font-size: 14px;
            left: 345px;
            line-height: 25px;
            position: absolute;
            text-align: center;
            top: 40px;
            width: 250px;
            .regular-font;
        }
    }

    @media only screen and (max-width : @max-mobile-resolution) {
    	form {
    		padding: 10px 0;
    	}
    }

    .row {
        clear: both;

        label {
            float: left;
            margin-bottom: 20px;
            width: 100px;
            .font(Medium, 16px);
        }

        input, textarea {
            border: solid 1px #e1e1e1;
            float: left;
            margin-bottom: 20px;
            padding: 4px;
            .font(Regular, 16px);
            box-sizing: border-box;
            width: 220px;
        }

        textarea {
            width: 430px;
        }

        @media only screen and (max-width : @max-mobile-resolution) {
        	textarea {
        		box-sizing: border-box;
	            width: 320px;
	        }
        }

        select {
            font-size: 16px;
            .regular-font;
        }

        button {
            background-color: @blue;
            border: none;
            color: white;
            float: right;
            height: 30px;
            padding: 0 10px;
            text-transform: uppercase;
            .font(Bold, 14px);
            &:hover {
                background-color: @yellow;
            }

            i {
                margin-left: 10px;
            }
        }
    }

    .status-message {
        font-size: 16px;
        margin-top: 25px;
        text-align: center;
        .regular-font;
    }
}

@media only screen and (max-width : @max-mobile-resolution) {
	.contact-page {
		margin-bottom: 25px;
	}
}

.not-found-page {

	h2 {
		border-bottom: solid 1px #e1e1e1;
		color: @blue;
		margin-bottom: 25px;
		padding-bottom: 5px;
		text-align: center;
		.font(Medium, 22px);
	}

	p {
		color: black;
		text-align: center;
		.font(Regular, 16px);
	}

	ol {
		float: left;
		list-style: none;
		padding: 0;
		width: 162px;

		li {
			text-align: center;
		
			a {
				color: @blue;
				.font(Regular, 16px);
			}
		}
	}

	@media only screen and (min-width: @max-resolution) {
		ol {
			width: 210px;
		}
	}

	@media only screen and (max-width : @max-mobile-resolution) {
		ol {
			width: 320px;
		}
	}
}

.about-page {
	.font(Regular, 16px);

	h1 {
        border-bottom: solid 1px #e1e1e1;
        color: @blue;
        margin-top: 25px;
        padding-bottom: 5px;
        text-align: center;
        .font(Medium, 22px);
    }

    #office-map {
    	height: 360px;
    	margin-top: 25px;
    	width: 650px;
    }
}


.info-page {

	.small-font {
		font-size: .9em !important;
	}

	.smaller-font {
		font-size: .8em !important;
	}

	h1 {
        border-bottom: solid 1px #e1e1e1;
        margin-top: 0px;
        padding-bottom: 5px;
        text-align: center;
    
        a {
        	color: @blue;
        	.font(Medium, 22px);
        }
    }
    
    &.internal h1 {
    	text-align: left;
    	
    	span {
    		font-size: 20px;
    	}
    }
    
    
    &.internal h1 span.last a,
    &.home a {
		color: #01386c;
    }

    

    article {
    	color: black;
    	.font(Regular, 16px);

    	img {
    		margin: 0;
    		width: 207px;
    		&.top-image {
    			float: left;
    			margin: 0 15px 9px 0;
				width: 300px;
    		}
    		
    	}
    	
    	
    	.images-container {
    		margin: 12px 0;
    		
    		a:nth-child(2) img {
	    		margin: 0 12px;
	    	}
    	}

    	a {
    		color: @blue;
    		&.visited {
    			color: @blue;
    		}
    	}

    	@media only screen and (min-width: @max-resolution) {
			img {				
				width: 270px;
				&.top-image {
	    			float: left;
	    			margin: 0 15px 9px 0;
					width: 420px;
	    		}
			}
		}
    }

    .list-header {
    	color: @blue;
    	border-bottom: solid 1px #e1e1e1;
        margin-top: 25px;
        padding-bottom: 5px;
        text-align: center;
        .font(Medium, 22px);
    }

    #info-tab {
	    background-color: #fff;
	    .font(Regular, 16px);

	  	#other-info {
	    	float: left;
	    	width: 100%;
	    	margin: 30px 0;

	    	h2 {
	    		font-size: 16px;
	    	}

	    	h3 {
	    		float: left;
	    		width: 25%;
	    	}
	    }

		a {
			color: @blue;
	    }

		h2 {
			color: #f9b123;
			line-height: 15px;
			padding-bottom: 15px;
	    	border-bottom: 1px solid #4082b7;
	    	text-transform: uppercase;
	  
			a {
				font-size: 18px;
				text-transform: uppercase;
				color: #f9b123;
			}
		}
	  
		.col {
			float: left;
			margin-right: 8px;
			width: 125px;
			&:nth-child(4) {
				width: 286px;
				float: left;
				margin-right: 20px;
			}
			&.last {
				margin-right: 0;
			}
	  	}

	  	@media only screen and (min-width: @max-resolution) {
	  		.col {
	  			margin-right: 30px;
	  			width: 150px;
	  		}
	  	}

		.double-col {
			float: left;
			margin-right: 8px;
			width: 250px;
		}

		@media only screen and (min-width: @max-resolution) {
	  		.double-col {
	  			margin-right: 20px;
	  			width: 300px;
	  		}
	  	}

		h3 {
			color: @blue;
			line-height: 39px;
			border-bottom: 1px solid #4082b7;
			margin: 0 0 5px 0;
			font-size: 18px;
			.medium-font;

			a {
				color:  @blue;
				&:hover {
					color: #f9b123;
				}
			}

			.right-arrow {

			}
		
			a:hover .right-arrow {
			
			}
		}

		h4 {
			color: #fff;
			font-size: 13px;
			margin: 0;

			a {
				color: @blue;
				font-size: 16px;
				&:hover {
					color: #f9b123;
				}
			}
		}

		ul {
			border-bottom: 1px solid #4082b7;
			float: none;
			list-style: none;
			margin: 0 0 5px 0;
			padding: 0 0 5px 0;

			li {
				float: none;
				padding: 0;
				margin: 0;

				a {
					color: @blue;
					font-size: 16px;
					line-height: 20px;
					&:hover {
						color: @dark-blue;
					}
				}
			}
		}

		ul.last, ul:last-child {
			border: none;
			margin: 0px;
			padding: 0px;
		}

		ul.inline li {
			display: inline;
		}
	}
}



@media only screen and (max-width : @max-mobile-resolution) {
	.about-page {

		#office-map {
			height: 180px;
			width: 320px;
		}
	}
	
	
	.info-page,
	.text-page {
	
	    article {

	    	img {
	    		width: 270px;
	    		&.top-image {
					width: 300px;
	    		}
	    		
	    	}
	    	
	    	
			.images-container {
				margin: 0 25px;
				
				&.top-image-wrap {
					margin: 16px 0 0;
					
					img {
						margin: 0 15px 12px 0;
						width: 300px;
					}

				}

				a:nth-child(2) img,
				img {
					margin: 12px 0 0;
					width: 270px;
					&.portrait {							
						width: 129px;							
						&:nth-child(2n+1) {
							margin-right: 12px;
						}
					}
				}
			}
		}
	}
}


.concierge-page, .covid-19-page {
	.font(Regular, 16px);

	a {
		color: @blue;
		&.visited {
			color: @blue;
		}
	}
}

footer.portal {
	background-color: #004C89;
	color: #fff;
	min-width: 960px;
	padding: 50px 0 40px 0;
	width: 100%;

	.inner {
		margin: 0 auto;
		width: 960px;

		a, a:visited, .telephone-cell {
			color: #fff;
			.font(Regular, 16px);
		}

		a:hover {
			color: #00b2ff;
		}

		.col {
			border-right: 1px solid #4079a7;
			float: left;
			height: 255px;
			
			h3 {
				font-size: 20px;
				margin: 0 0 20px 0;
				.medium-font;
			}
			&.last-child {
				border: none;
			}
		}

		.mobile.row {
			display: none;
		}

		ul {
			list-style: none;

			li {
				line-height: 26px;
			}
		}

		.first.col {
			padding-right: 15px;
	  		text-align: center;
			width: 140px;
		
			.copyright {
				font-size: 11px;
				.medium-font;
			}

			.sprite.thehotel {
				height: 85px;
				margin: 0 0 6px 10px;
				width: 120px;
    			background-image: url('/img/footer-logo.png');
			}

			.sprite.eot {
				height: 54px;
				margin: 0 0 6px 42px;
				width: 55px;
				.sprite(-220px, -70px);
			}

			.trust-seal {				
				height: 40px;
				margin: 10px 9px 13px 9px;
				width: 103px;
				.sprite(0, -140px);
			}
		}

		.second.col {
			padding-left: 29px;
			width: 158px;
			@media(max-width:767px){
		        width: 143px;
		    }
		}

		.third.col {
			padding-left : 29px;
			width: 118px;
		}

		.second.col {
			ul {			
				.sprite {
					display: inline-block;
					margin-right: 7px;
					vertical-align: middle;

					
					&.email {
                        height: 18px;
                        width: 18px;
                        .sprite(-290px, -139px);
                    }
                    &.telephone {
                        height: 18px;
                        width: 18px;
                        .sprite(-290px, -121px);
                    }
				}
			}
		}

		.fourth.col {
	  		padding-left : 29px;
	  		width : 216px;

	  		.footer-social {
	  			margin-bottom: 10px;

	  			.fb-like {
		    		background-color: #fff;
		    		float: left;
		    		padding: 1px 3px 6px;
				}

				.google-plus {
					background-color: #fff !important;
					float: left;
					overflow: hidden;
					padding: 3px 0 0;
					width: 72px;
				}	
	  		}

			ul {
				clear: both;
			
				.sprite {
					display: inline-block;
					margin-right: 7px;
					vertical-align: middle;

					&.facebook {
						height: 18px;
						width: 18px;
						.sprite(-290px, -35px);
					}
					&.instagram {
						height: 18px;
						width: 18px;
						.sprite(-63px, -35px);
					}
					&.twitter {
						height: 15px;
						width: 18px;
						.sprite(-290px, -53px);
					}
					&.google-pls {
						height: 17px;
						width: 18px;
						.sprite(-290px, -68px);
					}
					&.pinterest {
						height: 18px;
						width: 18px;
						.sprite(-290px, -85px);
					}
					&.skype {
						height: 18px;
						width: 18px;
						.sprite(-290px, -103px);
					}
					&.email {
                        height: 18px;
                        width: 18px;
                        .sprite(-290px, -139px);
                    }
                    &.telephone {
                        height: 18px;
                        width: 18px;
                        .sprite(-290px, -121px);
                    }
				}
			}
		}

		.fifth.col {
			float: left;
	  		padding-left: 25px;
	  		width: 195px;

	  		p {
	  			font-size: 16px;
	  			.regular-font;

	  			a {
	  				float: left;
	  				width: 180px;
	  			}

	  			i {
	  				float: left;
	  				line-height: 45px;
	  			}
	  		}

	  		input {
	  			border: none;
	  			color: #999;
	  			float: left;
	  			height: 16px;
	  			padding: 6px 10px;
	  			width: 130px;
	  			.font(Regular, 14px);
	  		}

	  		button {
	  			background-color: @dark-blue;
	  			border: none;
	  			color: #fff;
	  			float: left;
	  			height: 28px;
	  			padding: 0;
	  			width: 39px;
	  			.font(Bold, 14px);
	  			&:hover {
	  				background-color: @yellow;
	  				color: @dark-blue;
	  			}
	  		}
		}
	}
}

@media only screen and (max-width : @max-mobile-resolution) {
	footer.portal {
		min-width: 320px;

		.inner {
			width: 320px;

			.col {
				border-right: none;
				height: auto;
				&.first {
					display: none;
				}
				&.fourth {
					margin-top: 20px;
				}
				&.fifth {
					margin-top: 20px;
					margin-bottom: 50px;
				}
			}

			.mobile.row {
				clear: both;
				display: block;
				text-align: center;

				.copyright {
					font-size: 11px;
					.medium-font;
				}

				.sprite {
					display: inline-block;
					line-height: 95px;

					&.thehotel {
						height: 93px;
						margin: 0;
						width: 120px;
						.sprite(-110px, -140px);
					}
					&.eot {
						height: 54px;
						margin: 0;
						position: relative;
						top: -39px;
						width: 55px;
						.sprite(-220px, -70px);
					}
				}
				
				.trust-seal {
					height: 40px;
					margin: 0 0 0 15px;
					position: relative;
					top: -41px;
					width: 103px;
				}

			}
		}
	}
}