@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i');

html {
	overflow-x: hidden;
	font-size: 10px !important;
}

body {
	font-family: 'Lato', sans-serif;
	line-height: 1.7;
	font-size: 18px;
	font-weight: 400;
	background-color: #fff;
}

a {
	color: $link-color;
	text-decoration: none;

	&:hover,
	&:active {
		color: darken($link-color, 10%);
		text-decoration: none;
	}

	&.FTBBookmark {
		color: #333333;
	}

	&[href^='tel'] {
		color: inherit;
		text-decoration: none;
	}
}

.container {
	background-color: #fff;
}

#LoginLink {
	text-align: right !important;
	padding: 0px 5px;

	a {
		font-size: 11px;
		color: #666;
	}
}

.EditorPanel p {
	margin: 0 0 20px;
}

.wtp-article {
	clear: both;
}

.custom-container {
	padding-right: 0;
	padding-left: 0;

	body.userIsLogged.easymode & {
		margin-top: 20px;
	}
}

.flota_izq {
	@extend .pull-left;
}

.flota_der {
	@extend .pull-right;
}

.row.vertical-align.custom-header {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	display: flex;
	align-items: center;

	&.with-line {
		border-bottom: 2px solid $link-color;
	}

	.mean-container & {
	}
}

.mean-container #Menu_wrapper {
	display: none;
}

.mean-container #Logo_wrapper,
.mean-container #Header_wrapper {
	width: 50%;
}

.menu-container:after {
	content: '';
	display: table;
	clear: both;
}

body.mean-container .mean-bar {
	z-index: 1048;
}

#Logo_wrapper .EditorPanel,
#Menu_wrapper .EditorPanel,
#Header_wrapper .EditorPanel {
	overflow: hidden;
}

#Header_wrapper .EditorPanel {
	max-height: 100px;
}

#Menu_wrapper .EditorPanel {
	overflow: visible;
}

.TLGButton {
	border-radius: 0px;
	color: #fff;
	background-color: $link-color;
	padding: 10px 28px;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 1.5px;
	display: inline-block;
	text-align: center;
	margin: 0 10px;
	cursor: pointer;

	&:active,
	&:focus,
	&:hover {
		color: #fff;
		opacity: 0.8;
		text-decoration: none;
	}

	@media (max-width: $screen-lg - 1) {
		#Header_wrapper & {
			margin-top: 10px;
			margin-bottom: 10px;
			float: right;
			white-space: nowrap;
			overflow: hidden;
		}
	}

	@media (max-width: $screen-xs - 1) {
		#Header_wrapper & {
			padding: 10px 15px;
		}
	}
}

.TLGButtonInverted {
	border-radius: 0px;
	background-color: transparent;
	border: 3px solid $link-color;
	// color: #8dc467;
	padding: 9px 28px;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 1.5px;
	display: inline-block;
	text-align: center;
	margin: 0 10px;
	cursor: pointer;

	&:active,
	&:focus,
	&:hover {
		text-decoration: none;
		opacity: 0.5;
	}
}

body.easymode .EditorPanel {
	min-height: 20px;
}

#Slideshow_wrapper .EditorPanel {
}

#Subfooter_wrapper {
	background-color: #000;
	color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Lato', sans-serif;
}

h1 {
	font-size: 6.2rem;
}

h2 {
	font-size: 4.2rem;
}

h3 {
	font-size: 2.7rem;
	line-height: 1.2;
}

h4 {
	font-size: 2.35rem;
	line-height: 4.1rem;
}

h5 {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

h6 {
	font-size: 14px !important;
	line-height: 1.3;
}

.responsive-menu {
	display: none !important;
}

#PageContent {
	// float: left;
}

.EditorPanel p {
	margin-bottom: 20px;
}

.wtp-article {
	clear: both;
}

.menu-container:after {
	content: '';
	display: table;
	clear: both;
}

#Logo_wrapper {
	@extend .col-md-4;
	@extend .col-sm-5;
	@extend .col-xs-6;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 10px;

	.EditorPanel {
		p {
			margin-bottom: 0px;
		}

		.wtp-tlgsitelogo {
			padding-left: 25px;
			margin-top: 10px;
		}
	}

	input[type='image'] {
		max-width: 100%;
	}
}

#Menu_wrapper {
	// @extend .col-lg-7;
	@extend .col-md-5;
	@extend .col-sm-2;
	padding-right: 0px;
	padding-left: 0px;
	display: none;
}

#Header_wrapper {
	@extend .col-lg-2;
	@extend .col-md-3;
	@extend .col-sm-5;
	@extend .col-xs-6;
	padding-right: 0px;
	padding-left: 0px;
}

.see-more__wrapper {
	text-align: center;
}

.wtp-tlgfindatravelagent,
.agent-cards__wrapper {
	@extend .container;

	.TLGButtonInverted {
		&:active,
		&:focus,
		&:hover {
			opacity: 1;
		}
	}
}

.agent-cards {
	@extend .row;
	margin-bottom: 20px;

	&__header h1 {
		text-transform: uppercase;
	}

	@media (min-width: $screen-md) {
		display: flex;
		justify-content: center;
	}

	@media (min-width: $screen-lg) {
		padding: 0 140px;
	}
}

.agent-card {
	@extend .col-md-4;
	text-align: center;
	line-height: 1.2;
	margin-bottom: 20px;

	&__photo {
		padding: 40px 40px 20px 40px;

		img {
			height: 145px;
		}
	}

	&__name {
		@media (min-width: $screen-md) {
			height: 33px;
			display: flex;
			justify-content: center;
		}

		span {
			text-transform: uppercase;
			line-height: 1;
			white-space: nowrap;
			align-self: flex-end;

			@media (max-width: $screen-md - 1) {
				font-size: 1.5em !important;
				white-space: normal;
			}
		}
	}

	&__title {
		@media (min-width: $screen-md) {
			height: 22px;
			display: flex;
			justify-content: center;
		}

		span {
			text-transform: uppercase;
			font-weight: bold;
			white-space: nowrap;
			align-self: flex-end;

			@media (max-width: $screen-md - 1) {
				font-size: 1em !important;
				white-space: normal;
			}
		}
	}

	&__stars {
		padding: 10px 0;
	}

	&__buttons {
		margin-top: 10px;
		padding: 0 10px;

		&::after {
			content: '';
			display: table;
			clear: both;
		}
	}

	.TLGButtonInverted {
		padding: 9px 10px;
		margin: 0 0;
		min-width: 120px;
	}
}

.agent-card-b,
.agent-card-c {
	background-color: #f7f7f7;
	padding: 15px;
	text-align: center;
	margin-bottom: 10px;

	&__profile-image {
		font-size: 0.8em;
		line-height: 1.2;
		float: left;
		width: 35%;

		@media (min-width: $screen-md) {
			width: 20%;
		}

		i.fa {
			font-size: 1em;
		}
	}

	&__profile-content {
		padding: 0 10px 0 15px;
		float: left;
		text-align: left;
		width: 65%;

		@media (min-width: $screen-md) {
			width: 80%;
		}
	}

	&__agent-name {
		margin: 0px 0 0 0px;
		text-transform: uppercase;
		font-size: 1.5em;

		@media (min-width: $screen-md) {
			margin: 0px;
		}
	}

	&__agent-location {
		font-weight: bold;
		border-bottom: 2px solid #666666;
		font-size: 0.9em;
		margin-bottom: 25px;
	}

	&__buttons {
		margin-top: 25px;

		.TLGButton {
			margin-left: 0;
			font-size: 0.6em;
			padding: 8px 9px;
			margin-right: 6px;

			@media (min-width: $screen-lg) {
				padding: 8px 20px;
				font-size: 0.8em;
				margin-right: 10px;
			}
		}
	}

	&__stars {
		.fa {
			color: $link-color;
			margin: 6px 2px;
		}
	}

	.col-xs-5 {
		@media (max-width: $screen-md - 1) {
			width: 50%;
			left: 0px;
		}
	}
}

.agent-card-b {
	margin-top: 20px;
}

.agent-cards-c {
	padding: 10px 20px 0 10px;

	@media (min-width: $screen-sm) {
		padding: 10px 0px;
	}
}

.agent-card-c {
	font-size: 0.9em;
	line-height: 1.5;
	margin-bottom: 20px;
	width: 95%;

	@media (min-width: $screen-sm) {
		width: 46%;
		margin: 0 0.8% 20px;
	}

	@media (min-width: $screen-lg) {
		width: 45%;
		margin: 0 0.6% 20px;
	}

	a {
		text-decoration: underline;
	}

	.row {
		text-align: left;
	}

	&__profile-image {
		@media (min-width: $screen-md) {
			width: 30%;
		}
	}

	&__profile-content {
		@media (min-width: $screen-md) {
			width: 70%;
		}
	}

	&__view-profile {
		display: block;
		margin: 10px 0;
		font-size: 1.2em;
	}

	&__agent-name {
		line-height: 1.1;
		font-size: 1.8em;

		@media (min-width: $screen-sm) {
			padding-right: 50px;
		}

		@media (min-width: $screen-md) {
			font-size: 2em;
		}
	}

	&__buttons {
		margin-top: 0;

		a {
			text-decoration: none;
		}
	}

	&__agent-location {
		margin-bottom: 5px;
	}

	&__destinations {
		color: $link-color;
		padding: 10px 0;
	}

	&__subtitle {
		color: $link-color;
		text-transform: uppercase;
		border-bottom: 1px solid #bec0c3;
		margin-top: 10px;
		word-break: initial;
	}

	&__author {
		text-align: left;
		font-style: italic;
	}

	&__testimonial {
		text-align: left;
	}

	hr {
		margin-top: 15px;
		margin-bottom: 15px;
	}
}

.preferred-suppliers {
	text-align: center;
	@extend .container;

	&__body {
		// @extend .col-sm-9;
		// @extend .center-block;
		float: none;
		margin: 0 auto;
		background: #eaeaea;
		padding: 20px 20px;

		@media (min-width: $screen-md) {
			padding: 20px 0;
		}
	}

	&__title {
		background-color: #3b3a3f;
		color: #fff;
		text-transform: uppercase;
		margin: 0 -35px;
		font-weight: 300;
		font-size: 4rem;
		padding: 10px 20px;

		@media (min-width: $screen-sm) {
			padding: 10px;
		}
	}

	&__text {
		margin: auto;
		max-width: 600px;
		padding: 10px 0px;
		text-align: left;
	}

	&__logos {
		@extend .col-sm-10;
		display: flex;
		flex-wrap: wrap;
		float: none;
		margin: 0 auto;
		padding: 20px 0 20px;
		justify-content: center;
		align-items: center;
	}

	&__logo {
		flex-grow: 0;
		width: 92%;
		padding: 0% 4% 4%;

		@media (min-width: $screen-xs) {
			padding: 2%;
			width: 46%;
		}

		@media (min-width: $screen-sm) {
			width: 31%;
			padding: 1%;
		}
	}
}

.wtp-tlgshowcaseadmin {
	padding: 15px;
}

.wtp-tlgshowcaseadminv3 {
	@extend .container;
	margin-bottom: 20px;
}

.tabla04 {
	@extend .table;
	@extend .table-bordered;
	width: 100%;
	margin-bottom: 5px;
	font-size: 0.8em;

	th {
		padding: 3px;
		background-color: $link-color;
		color: #fff;
		border-style: inset;
		border-color: $link-color;
		overflow: hidden;
		white-space: nowrap;
	}

	td {
		border-width: 1px;
		padding: 1px;
		border-style: inset;
		border-color: gray;
		padding: 3px;
	}

	.celda01 {
		width: 20%;
	}

	.celda02 {
	}

	.celda03 {
		text-align: center;
		width: 10%;
		padding: 0;
	}

	td.celda04 {
		text-align: center;
		width: 60px;
		padding-left: 10px;

		a {
			margin: 0 2px 0 2px;
		}
	}

	a.button_edit,
	a.button_delete {
		line-height: 0;
		font-size: 0;
		color: transparent;

		&::before {
			content: '\f044';
			font: normal normal normal 15px/1 FontAwesome;
			color: $link-color;
		}
	}

	a.button_delete {
		&::before {
			content: '\f014';
			top: -1px;
			position: relative;
		}
	}

	input[type='checkbox'],
	input[type='radio'] {
		margin: 12px 0 0;
		line-height: normal;
	}
}

.tabla05 {
	width: 100%;
	border: 1px solid;
	border-color: #ccc;

	td {
		padding: 05px;

		input[type='radio'] {
			margin-right: 5px;
			margin-left: 0px;
		}

		span {
			margin-right: 10px;
		}
	}

	input[type='text'],
	textarea {
		background-repeat: repeat-x;
		background-color: #e2e2e2;
		width: 60%;
		@extend .form-control;
		border-radius: 0px;
		background-color: #fff;
		display: inline-block;
	}

	.celda01 {
		text-align: right;
		width: 20%;

		.RadioButton {
			float: right;
		}
	}

	.celda02 img {
		width: 150px;
		height: 80px;
	}

	.celda03 {
		text-align: center;
	}

	.RadioButton div {
		float: left;
		display: inline;
		padding-right: 10px;
	}
}

.tabla05 input[type='button'],
.tabla05 input[type='submit'],
input[type='submit'].button_pe {
	@extend .TLGButton;
	border: 0px;
	margin: 10px 10px 0px 0px;
	padding: 5px 20px;
}

.tabla05 input[type='button'],
.tabla05 input[type='submit'] {
	margin-top: 0;
}

.ShowcaseItemSelector {
	h3 {
		margin: 5px;
	}

	input[type='button'] {
		margin: 10px 5px;
	}

	td input[type='checkbox'] {
		margin-right: 5px;
	}
}

.modal-footer {
	background-color: #e6e5e5;
	border-top: 1px solid #d2d2d2;
	padding: 5px 10px 5px;

	img {
		box-shadow: none !important;
		border: 0px solid #fff !important;
		margin: 0px !important;
	}

	a.close {
		// background: url('img/bt_close.gif') no-repeat;
		font: normal normal normal 22px/1 FontAwesome;
		display: block;
		color: #000 !important;

		&::before {
			content: '\f00d';
		}

		span {
			display: none;
		}
	}
}

.modal-phone {
	text-align: center;

	.modal-header {
		background-color: #fff;
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
		border-bottom: 1px solid $link-color;
		padding: 5px;
	}

	.modal-content {
		border-radius: 0px;
		color: #59585a;
	}

	a.close {
		opacity: 1;
		position: absolute;
		right: 5px;
		top: 8px;

		svg {
			filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
			width: 20px;
			height: 20px;
			fill: $link-color;
		}
	}

	&__agent-name {
		text-transform: uppercase;
		margin-top: 15px !important;
		font-size: 1.6em !important;
	}

	&__text {
		font-size: 1.4em;
	}

	&__agent-phone,
	&__agent-phone a {
		font-size: 1.6em !important;
		line-height: 1;
		font-weight: bold;
		text-decoration: underline;
		color: $link-color;
	}

	&__agent-phone a {
		font-size: 1em !important;
	}
}

.block-what-makes-us-special {
	text-align: center;
	background-color: #eeeeee;
	padding-top: 35px;
	padding-bottom: 35px;

	@media (min-width: $screen-sm) {
		padding-right: 5%;
		padding-left: 5%;
	}

	&__title {
		text-transform: uppercase;
		margin-top: 0;
	}

	&__subtitle {
		text-transform: uppercase;
	}

	&__text {
		text-align: left;
	}

	.row {
		margin-right: 0px;
		margin-left: 0px;
	}

	.col-sm-4 {
		padding: 25px 50px;
	}
}

.block-intro-paragraph {
	&__title {
		word-break: break-word;
		font-size: 3.8rem;
	}
}

.showcaseWarning {
	@extend .label;
	@extend .label-warning;
	display: inline-block;
	margin-bottom: 10px;
}

.modal-header__title {
	margin: 0px;
	font-size: 0.9em;
}

.modal-header-success,
.modal-header-warning,
.modal-header-danger,
.modal-header-info,
.modal-header-primary {
	color: #fff;
	padding: 9px 15px;
	border-bottom: 1px solid #eee;
	background-color: #5cb85c;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.modal-header-warning {
	background-color: #f0ad4e;
}

.modal-header-danger {
	background-color: #d9534f;
}

.modal-header-info {
	background-color: #5bc0de;
}

.modal-header-primary {
	background-color: #428bca;
}

.modal-dialog {
	margin-top: 0;
	margin-bottom: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.modal.fade .modal-dialog {
	transform: translate(0, -100%);
}

.modal.in .modal-dialog {
	transform: translate(0, 0);
}

.modal-body {
	padding: 5px 15px;
}

.modal-backdrop.in {
	filter: alpha(opacity=75);
	opacity: 0.75;
}

#emailMeModal {
	@media (max-width: $screen-sm - 1) {
		.modal-dialog {
			justify-content: start;
			margin-top: 60px;
		}
	}
}

.modal-custom-width {
	@media (min-width: $screen-md) {
		width: 680px;
	}
}

select.ListBox {
	line-height: 1;
}

.ui-datepicker select {
	color: black;
}

.cc-window {
	background-color: rgba(0, 0, 0, 0.9);
	color: #fff;

	a.cc-link {
		color: $link-color;
	}

	a.cc-btn {
		color: #fff;
		background-color: $link-color;
		border: 0px;
		border-color: transparent;
		border-radius: 2px;
	}
}

.cc-window.cc-floating {
	max-width: 100%;
	flex-direction: row;
}

.wtp-pe-promotion-details .pure-g p {
	font-family: Lato, sans-serif !important;
	font-size: 16px;
	line-height: 20px;
}

.wtp-pe-promotion-details .pure-g ul li {
	padding: 5px 0;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
	select.form-control,
	textarea.form-control,
	input.form-control {
		font-size: 16px;
	}
}

@media (max-width: $screen-xs - 1) {
}

@media (max-width: $screen-xs) {
}

@media (min-width: $screen-sm) {
}

@media (min-width: $screen-md) {
	.vertical-align {
		display: flex;
		align-items: center;
	}

	#ModalPhotoAlbum {
		.modal-dialog {
			width: 1000px;
			margin: 0px auto;
		}

		.modal-body {
			min-height: 700px;
		}
	}
}

@media (min-width: $screen-lg) {
	#Logo_wrapper {
		width: 21%;
	}

	#Menu_wrapper {
		width: 62.33%;
	}
}
