@import "reset";
@import "fonts";
@import "swiper";
@import "swiperbox";
@import "fancybox";

$screen-lg: 1400px;

@import "stylesheets/bootstrap";

@import "adjusts";

@import "mixins/clearfix";
@import "mixins/calc";
@import "mixins/grid";
@import "mixins/vertical-align";

$white      : #FFFFFF;
$border     : #DDDDDD;
$black      : #000000;
$blue       : #3F7FE9;
$title      : #333333;
$subtitle	: #a9b0b6;
$green		: #33a04f;

body{
	font-family: 'Avenir Next LT Pro Regular', Sans-Serif, Verdana, Arial;
	.header{
		.navbar{
			&.navbar-default{
				margin: 0;
				border: none;
				border-radius: 0;
				background-color: $white;
				height: 90px;
				@media (min-width: 2500px){
					height: 12vh;
				}
				.container-fluid{
					&.container{
						@media screen and (max-width: 991px){
							width: 100%;
						}
					}
					.navbar-header{
						height: 90px;
						@media (min-width: 2500px){
							height: 12vh;
						}
						.navbar-brand{
							position: relative;
							padding: 0 15px;
							height: 90px;
							@media (min-width: 2500px){
								height: 12vh;
							}
							img{
								@include vertical-align();
								width: 200px;
								@media (min-width: 2500px){
									width: auto;
								}
							}
						}
						.navbar-toggle{
							background-color: transparent;
							margin-top: 27px;
							border: none;
							.icon-bar {
								background-color: $blue;
								width: 26px;
								height: 3px;
							}
							&:hover{
								background-color: transparent;
							}
							&:focus{
								background-color: transparent;
							}
						}
					}
					.navbar-collapse{
						position: relative;
						@media screen and (max-width: 991px){
							z-index: 200;
							background-color: $white;
						}
						.nav{
							&.navbar-nav{
								float: none;
								text-align: center;
								height: 90px;
								@media (min-width: 992px){
									position: absolute;
									width: 100%;
								}
								@media (min-width: 2500px){
									height: 12vh;
								}
								@media screen and (max-width: 991px){
									height: auto;
								}
								li{
									@media screen and (min-width: 992px){
										margin-top: 45px;
										float: none;
										display: inline-block;
									}
									@media (min-width: 2500px){
										margin-top: 5vh;
									}
									a{
										background-color: transparent;
										color: $blue;
										font-size: 20px;
										text-align: center;
										border: none;
										padding: 5px 0px;
										border-bottom: 2px solid transparent;
										margin: 0 10px;
										@media screen and (min-width: 992px){
											&:hover {
												color: $blue;
											}
											&:focus, &.current-menu-item{
												color: $blue;
											}
										}
										@media (min-width: 2500px){
											font-size: 1vw;
										}
									}
									@media screen and (min-width: 992px){
										&.current-menu-item{
											a{
												color: $blue;
											}
										}
									}
								}
							}
						}
					}
				}
				&.blog{
					height: auto;
					@media screen and (min-width: 992px){
						height: 90px;
					}
					.container-fluid{
						background-color: $blue;
						padding: 0;
						&.container{
							@media screen and (max-width: 991px){
								width: 100%;
							}
						}
						.navbar-header{
							height: auto;
							position: relative;
							@media screen and (min-width: 992px){
								height: 90px;
							}

							@media (min-width: 2500px){
								height: 12vh;
							}
							.navbar-toggle{
								background-color: transparent;
								margin-top: 8px;
								border: none;
								.icon-bar {
									background-color: $white;
									width: 26px;
									height: 3px;
								}
								&:hover{
									background-color: transparent;
								}
								&:focus{
									background-color: transparent;
								}
							}

							.texto{
								position: absolute;
								left: 30px;
								height: 100%;
								p{
									@include vertical-align();
									font-size: 18px;
									font-weight: 700;
									color: $white;
								}
							}
						}
						.navbar-collapse{
							position: relative;
							@media screen and (max-width: 991px){
								z-index: 200;
								position: absolute;
								width: 100%;
								margin: 0;
								background-color: $blue;
							}
							.nav{
								&.navbar-nav{
									float: none;
									text-align: center;
									height: auto;
									background-color: $blue;
									@media (min-width: 992px){
										position: absolute;
										width: 100%;
										height: 90px;
									}
									@media (min-width: 2500px){
										height: 12vh;
									}
									@media screen and (max-width: 991px){
										height: auto;
									}
									li{
										margin: 0;
										@media screen and (min-width: 992px){
											margin-top: 25px;
											float: none;
											display: inline-block;
										}
										@media (min-width: 2500px){
											margin-top: 5vh;
										}
										a{
											background-color: transparent;
											font-size: 20px;
											text-align: center;
											color: $white;
											border: 1px solid transparent;
											padding: 8px;
											margin: 0;
											@media screen and (min-width: 992px){
												&:hover {
													color: $white;
													border: 1px solid $white;
													padding: 8px;
													margin: 0;
												}
												&:focus, &.current-menu-item{
													color: $white;
												}
											}
											@media (min-width: 2500px){
												font-size: 1vw;
											}
										}
										@media screen and (min-width: 992px){
											&.current-menu-item{
												a{
													color: $white;
													border: 1px solid $white;
													padding: 8px;
													margin: 0;
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.first-block{
		.title{
			text-align: center;
			padding: 15px;
			h1{
				font-size: 50px;
				color: $title;
				@media screen and (max-width: 1300px){
					font-size: 40px;
				}
				@media screen and (max-width: 991px){
					font-size: 30px;
				}
				@media screen and (min-width: 2500px){
					font-size: 5vw;
				}
			}
			h3{
				font-size: 20px;
				color: $subtitle;
				@media screen and (max-width: 1300px){
					font-size: 18px;
				}
				@media screen and (max-width: 991px){
					font-size: 16px;
				}
				@media screen and (min-width: 2500px){
					font-size: 1.3vw;
				}
			}
		}
		.blue-bg{
			position: relative;
			overflow: hidden;

			&:before {
				content: "";
				position: absolute;
				width: 140%;
				height: 75%;
				top: 15%;
				left: -20%;
				z-index: -1;
				background: image-url('faixa-bg-image.jpg') repeat-x;
				background-size: cover;
				-webkit-transform: rotate(-3deg);
				-moz-transform: rotate(-3deg);
				-ms-transform: rotate(-3deg);
				-o-transform: rotate(-3deg);
				transform: rotate(-3deg);
			}

			margin-top: 30px;
			@media screen and (min-width: 2500px){
				margin-top: 1vh;
			}
			img{
				width: 100%;
				height: auto;
			}
			iframe{
				width: 100%;
				min-height: 300px;
				@media screen and (min-width: 680px){
					min-height: 600px;
					min-height: 80vh;
				}
			}
		}
		.buttons{
			display: block;
			text-align: center;
			.apple{
				margin-bottom: 40px;
				width: 160px;
				display: inline-block;
				// margin: 0 auto;
				a{
					img{
						width: 160px;
					}
				}
				@media screen and (min-width: 2500px){
					padding-bottom: 1vw;
					width: auto;
					a{
						img{
							width: auto;
						}
					}
				}
			}

			.trial_button{
				// width: 165px;
				display: inline-block;
				margin-bottom: 40px;
				.btn{
					background-color: $green;
					color: $white;
					text-decoration: none;
					padding: 16px 15px;
				}
			}
		}
	}

	.error-page{
		height: calc(100vh - 90px);
		@media (min-width: 2500px){
			height: calc(100vh - 12vh);
		}
		.title{
			@include vertical-align();
			text-align: center;
			padding: 15px;
			h1{
				font-size: 50px;
				color: $title;
				font-weight: 700;
				@media screen and (min-width: 2500px){
					font-size: 5vw;
				}
			}
			h3{
				font-size: 20px;
				color: $subtitle;
				font-weight: 700;
				@media screen and (min-width: 2500px){
					font-size: 1.3vw;
				}
			}
		}
		.blue-bg{
			position: relative;
			overflow: hidden;

			&:before {
				content: "";
				position: absolute;
				width: 140%;
				height: 75%;
				top: 15%;
				left: -20%;
				z-index: -1;
				background: image-url('faixa-bg-image.jpg') repeat-x;
				background-size: cover;
				-webkit-transform: rotate(-3deg);
				-moz-transform: rotate(-3deg);
				-ms-transform: rotate(-3deg);
				-o-transform: rotate(-3deg);
				transform: rotate(-3deg);
			}

			margin-top: 30px;
			@media screen and (min-width: 2500px){
				margin-top: 1vh;
			}
			img{
				width: 100%;
				height: auto;
			}
			iframe{
				width: 100%;
				min-height: 600px;
				min-height: 80vh;
			}
		}
		.buttons{
			display: block;
			text-align: center;
			.apple{
				margin-bottom: 40px;
				width: 160px;
				display: inline-block;
				// margin: 0 auto;
				a{
					img{
						width: 160px;
					}
				}
				@media screen and (min-width: 2500px){
					padding-bottom: 1vw;
					width: auto;
					a{
						img{
							width: auto;
						}
					}
				}
			}

			.trial_button{
				// width: 165px;
				display: inline-block;
				margin-bottom: 40px;
				.btn{
					background-color: $green;
					color: $white;
					text-decoration: none;
					padding: 16px 15px;
				}
			}
		}
	}

	.tools{
		margin-top: 30px;
		padding-bottom: 80px;
		background: image-url('border.png') no-repeat bottom center;
		background-size: contain;
		@media screen and (min-width: 2500px){
			margin-top: 1vh;
			padding-bottom: 12vh;
		}
		.title{
			text-align: center;
			padding: 15px;
			h1{
				font-size: 32px;
				color: $blue;
				@media screen and (max-width: 1300px){
					font-size: 28px;
				}
				@media screen and (max-width: 991px){
					font-size: 22px;
				}
				@media screen and (min-width: 2500px){
					font-size: 3vw;
				}
			}
			h3{
				font-size: 20px;
				color: $subtitle;
				@media screen and (max-width: 1300px){
					font-size: 18px;
				}
				@media screen and (max-width: 991px){
					font-size: 16px;
				}
				@media screen and (min-width: 2500px){
					font-size: 0.8vw;
				}
			}
		}
		.box-tools{
			height: 290px;
			img{
				margin: 15px auto;
				display: block;
				@media (min-width: 2500px){
					margin: 1vw auto;
					width: 5vw;
				}
			}
			h1{
				font-size: 20px;
				text-align: center;
				@media (min-width: 2500px){
					font-size: 1.4vw;
				}
			}
			p{
				font-size: 14px;
				text-align: center;
				@media (min-width: 2500px){
					font-size: 0.8vw;
				}
			}
		}
		.coming{
			width: 115px;
			margin: 0 auto;
			margin-top: 30px;
			@media screen and (min-width: 2500px){
				width: 10vw;
			}
			.btn{
				width: 100%;
				color: $blue;
				font-weight: 700;
				border: 1px solid $border;
				@media screen and (min-width: 2500px){
					border: 0.7vw solid $border;
					font-size: 1vw;
				}
			}
		}
	}

	.feedback{
		margin-top: 80px;
		margin-bottom: 30px;
		@media screen and (min-width: 2500px){
			margin-top: 2vh;
			margin-bottom: 1.5vh;
		}
		.title{
			text-align: center;
			padding: 15px;
			h1{
				font-size: 32px;
				color: $blue;
				@media screen and (max-width: 1300px){
					font-size: 28px;
				}
				@media screen and (max-width: 991px){
					font-size: 22px;
				}
				@media screen and (min-width: 2500px){
					font-size: 3vw;
				}
			}
			h3{
				font-size: 18px;
				color: $subtitle;
				@media screen and (max-width: 991px){
					font-size: 16px;
				}
				@media screen and (min-width: 2500px){
					font-size: 0.8vw;
					padding-bottom: 1vw;
				}
			}
		}
		.swiper-wrapper{
			padding-top: 30px;
		}
		.swiper-container {
			width: 100%;
			height: 100%;
			margin-left: auto;
			margin-right: auto;
			p{
				font-size: 14px;
				color: $blue;
				text-align: center;
				font-weight: 700;
				padding-top: 15px;
				@media screen and (min-width: 2500px){
					font-size: 1vw;
					padding-top: 1vw;
				}
			}
			h1{
				font-size: 30px;
				text-align: center;
				@media screen and (min-width: 2500px){
					font-size: 2vw;
				}
			}
			.image{
				width: 350px;
				height: 300px;
				border-radius: 50%;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
				margin: 20px auto;
				display: block;
				@media screen and (max-width: 767px){
					width: 200px;
					height: 150px;
				}
			}
			h2{
				font-size: 14px;
				color: $subtitle;
				margin: 0;
				text-align: center;
				@media screen and (min-width: 2500px){
					font-size: 1vw;
				}
			}
			.swiper-pagination{
				bottom: inherit;
				top: 0;
				.swiper-pagination-bullet {
					margin: 0;
					width: 55px;
					height: 3px;
					display: inline-block;
					border-radius: 0;
				}
			}
			
			.swiper-button-prev, .swiper-button-next {
				width: 47px;
				height: 64px;
				margin-top: -70px;
				background-color: $white;
				border-radius: 10px;
				box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6);
			}
		}
	}

	.download{
		background: image-url('bg-rounded.png') no-repeat top center;
		background-size: cover;
		padding-top: 30px;
		.title{
			text-align: center;
			padding: 15px;
			h1{
				font-size: 32px;
				color: $white;
				@media screen and (max-width: 1300px){
					font-size: 28px;
				}
				@media screen and (max-width: 991px){
					font-size: 22px;
				}
				@media screen and (min-width: 2500px){
					font-size: 3vw;
				}
			}
			h3{
				font-size: 18px;
				color: $white;
				padding-bottom: 20px;
				@media screen and (max-width: 991px){
					font-size: 16px;
				}
				@media screen and (min-width: 2500px){
					font-size: 0.8vw;
					padding-bottom: 1vw;
				}
			}
		}

		img{
			display: block;
			margin: 0 auto;
			max-width: 100%;
		}

		.apple{
			padding-bottom: 40px;
			width: 160px;
			margin: 0 auto;
			a{
				img{
					width: 160px;
				}
			}
			@media screen and (min-width: 2500px){
				padding-bottom: 1vw;
				width: auto;
				a{
					img{
						width: auto;
					}
				}
			}
		}
	}

	.trial{
		padding: 30px 0;
		.title{
			text-align: center;
			padding: 15px;
			h1{
				font-size: 32px;
				color: $blue;
				@media screen and (max-width: 1300px){
					font-size: 28px;
				}
				@media screen and (max-width: 991px){
					font-size: 22px;
				}
				@media screen and (min-width: 2500px){
					font-size: 3vw;
				}
			}
			h3{
				font-size: 18px;
				color: $subtitle;
				@media screen and (max-width: 991px){
					font-size: 16px;
				}
				@media screen and (min-width: 2500px){
					font-size: 0.8vw;
					padding-bottom: 1vw;
				}
			}
		}
		.trial_button{
			width: 165px;
			display: block;
			margin: 0 auto;
			margin-bottom: 30px;
			.btn{
				background-color: $green;
				color: $white;
				text-decoration: none;
			}
		}
	}

	.gallery{
		padding: 30px 20px;
		background-color: $blue;
		.title{
			text-align: center;
			padding: 15px;
			h1{
				font-size: 32px;
				color: $white;
				@media screen and (max-width: 1300px){
					font-size: 28px;
				}
				@media screen and (max-width: 991px){
					font-size: 22px;
				}
				@media screen and (min-width: 2500px){
					font-size: 3vw;
				}
			}
			h3{
				font-size: 18px;
				color: $white;
				@media screen and (max-width: 991px){
					font-size: 16px;
				}
				@media screen and (min-width: 2500px){
					font-size: 0.8vw;
					padding-bottom: 1vw;
				}
			}
		}
		.swiper-container {
			width: 100% !important;
			height: 100% !important;
			.swiper-wrapper{
				padding-bottom: 50px;
				.swiper-slide {
					position: relative;
					width: 100%;
					height: 100%;
					a{
						text-decoration: none;
						&:focus{
							text-decoration: none;
						}
					}
					a > img{
						margin: 20px;
						max-width: 100%;
						margin: 0 auto;
						display: block;
					}
					p{
						color: #FFF;
						font-weight: 700;
						padding-top: 10px;
					}
				}
			}
			.swiper-pagination{
				bottom: 20px;
				.swiper-pagination-bullet {
					margin: 0 2.5px;
					width: 55px;
					height: 3px;
					@media screen and (max-width: 600px){
						width: 25px;
					}
					display: inline-block;
					border-radius: 0;

					&.swiper-pagination-bullet-active{
						background-color: $white;
					}
				}
			}
			.swiper-button-prev, .swiper-button-next {
				width: 47px;
				height: 64px;
				margin-top: -70px;
				background-color: $white;
				border-radius: 10px;
				box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6);
			}

		}
	}

	.tlf{
		background-color: $blue;
		padding: 20px 0;
		padding-bottom: 50px;

		h1{
			font-size: 18px;
			color: $white;
			font-weight: 700;
			text-align: center;
			padding-bottom: 20px;
			@media screen and (max-width: 991px){
				font-size: 16px;
			}
			@media screen and (min-width: 2500px){
				font-size: 0.8vw;
				padding-bottom: 1vw;
			}
		}
		.tlf-sender{
			float: none;
			display: block;
			margin: 0 auto;

			input{
				font-size: 14px;
				background-color: $white;
				box-shadow: none;
				height: 50px;
				padding: 10px 12px;
				border: 2px solid $subtitle;
				font-weight: 700;
				color: $title;
			}

			.btn{
				margin-bottom: 0;
				border: 2px solid $subtitle;
				border-left: 1px solid $subtitle;
				background-color: $white;
				color: $blue;
				height: 50px;
				font-weight: 700;
				white-space: nowrap;
				padding: 6px 12px;
				font-size: 14px;
			}
		}
	}

	.kunder{
		padding: 30px 0;
		.title{
			text-align: center;
			padding: 15px;
			h1{
				font-size: 32px;
				color: $blue;
				@media screen and (max-width: 1300px){
					font-size: 28px;
				}
				@media screen and (max-width: 991px){
					font-size: 22px;
				}
				@media screen and (min-width: 2500px){
					font-size: 3vw;
				}
			}
			h3{
				font-size: 18px;
				color: $subtitle;
				@media screen and (max-width: 991px){
					font-size: 16px;
				}
				@media screen and (min-width: 2500px){
					font-size: 0.8vw;
					padding-bottom: 1vw;
				}
			}
		}
		.logos{
			.items{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				div{
					padding: 15px;
					@media  screen and (max-width: 767px){
						width: 100%;
					}
					img {
						max-width: 200px;
						-webkit-filter: grayscale(1);
						filter: grayscale(1);
						@media  screen and (min-width: $screen-lg){
							@include vertical-align();
						}
						@media  screen and (max-width: 767px){
							margin: 0 auto;
							display: block;
						}
						&:hover {
							-webkit-filter: grayscale(0);
							filter: grayscale(0);
						}
					}
					
					@media  screen and (min-width: $screen-lg){
						padding: 15px 20px;
						height: 230px;
					}
				}
			}
		}
	}

	.page{
		.title{
			text-align: center;
			padding: 15px;
			h1{
				font-size: 50px;
				color: $title;
				@media screen and (max-width: 1300px){
					font-size: 40px;
				}
				@media screen and (max-width: 991px){
					font-size: 30px;
				}
				@media screen and (min-width: 2500px){
					font-size: 5vw;
				}
			}
			h3{
				font-size: 20px;
				color: $subtitle;
				@media screen and (max-width: 1300px){
					font-size: 18px;
				}
				@media screen and (max-width: 991px){
					font-size: 16px;
				}
				@media screen and (min-width: 2500px){
					font-size: 1.3vw;
				}
			}
		}
		
		.page-iframe{
			background: image-url('bg-rounded.png') no-repeat top 40vh center;
			background-size: cover;
			padding-top: 30px;
			height: 1500px;

			.title{
				text-align: center;
				padding: 15px;
				h1{
					font-size: 50px;
					color: $title;
					@media screen and (max-width: 1300px){
						font-size: 40px;
					}
					@media screen and (max-width: 991px){
						font-size: 30px;
					}
					@media screen and (min-width: 2500px){
						font-size: 5vw;
					}
				}
				h3{
					font-size: 20px;
					color: $subtitle;
					@media screen and (max-width: 1300px){
						font-size: 18px;
					}
					@media screen and (max-width: 991px){
						font-size: 16px;
					}
					@media screen and (min-width: 2500px){
						font-size: 1.3vw;
					}
				}
			}

			iframe{
				margin: 0 auto;
				display: block;
			}
		}

		.page-feedback{
			background-color: #F8F8F8;
			min-height: 700px; 
			.panel-group{
				.panel.panel-default{
					border-radius: 0;
					.panel-heading{
						padding: 0;
						border-radius: 0;
						background-color: $white;
						.panel-title{
							padding: 20px 15px;
							color: $blue;
							font-weight: 700;
							text-align: center;
							&:hover{
								color: $blue;
							}
							&.collapsed{
								color: $black;
							}
						}
					}
					.panel-collapse{
						.panel-body{
							text-align: center;
							padding: 20px 15px;
							p{
								padding: 0;
								margin: 0;
							}
						}
					}
				}
			}
			.contact-form-feedback{
				background-color: $white;
				.form{
					padding: 30px;
					@include clearfix;

					input{
						margin: 0;
						font-size: 14px;
						background-color: $white;
						box-shadow: none;
						height: 50px;
						padding: 10px 12px;
						border: 2px solid $subtitle;
						margin-bottom: 15px;
						font-weight: 700;
						color: $title;
						@media (min-width: 2500px){
							height: 3vw;
							font-size: 1.1vw;
						}
					}
					textarea{
						margin: 0;
						font-size: 14px;
						background-color: $white;
						box-shadow: none;
						padding: 10px 12px;
						border: 2px solid $subtitle;
						margin-bottom: 15px;
						font-weight: 700;
						color: $title;
						height: 200px;
						@media screen and (max-width: 767px){
							height: 120px;
						}
						@media (min-width: 2500px){
							height: 15vw;
							font-size: 1.1vw;
						}
					}
					.enviar{
						float: right;
						border: 2px solid $blue;
						background-color: $white;
						width: 170px;
						color: $blue;
						margin: 0;
						@media (min-width: 2500px){
							width: 10vw;
							font-size: 1.1vw;
						}
					}
				}
			}
		}

		.plans-page{
			background: image-url('bg-rounded.png') no-repeat top 40vh center;
			background-size: cover;
			padding-top: 30px;
			min-height: 1500px;
			@media screen and (max-width: 767px){
				height: auto;
			}

			.plans{
				margin-top: 50px;
				.plan{
					p,h1,h2,h3{ padding: 0; margin: 0;}
					
					background-color: $white;
					border: 1px solid $border;
					border-radius: 5px;
					text-align: center;
					margin-bottom: 30px;
					.plan_about{
						border-bottom: 1px solid $border;
						padding: 40px 15px;
						.name_plan{
							color: $blue;
							font-size: 20px;
							padding-bottom: 10px;
						}
						.description_plan{
							color: $subtitle;
							font-size: 16px;
						}
						.price_plan{
							margin-top: 25px;
							color: $green;
							font-size: 68px;
							font-weight: 700;
						}
						.paymment_plan{
							color: $green;
							font-size: 20px;
						}
					}
					.plan_items{
						padding: 40px 15px;
						p{
							padding-bottom: 12px;
							color: $black;
							font-size: 16px;
							&.dont_has{
								color: $subtitle;
							}
						}
					}
					.plan_button{
						margin-top: 15px;
						.btn{
							background-color: $blue;
							color: $white;
							text-decoration: none;
							font-size: 18px;
							padding: 12px 35px;
						}
					}
				}
			}
		}

		.single{
			background: image-url('bg-rounded.png') no-repeat top 40vh center;
			background-size: cover;
			padding-top: 30px;
			.text{
				background-color: #FFF;
				min-height: 80vh;
				border: 5px solid #DDD;
				border-radius: 8px;
				padding: 30px;
				margin-bottom: 30px;
				ul{
					padding-left: 30px;
					li{
						list-style-position: inside;
					}
				}
				ol{
					padding-left: 30px;
					li{
						list-style-position: inside;
						ol{
							padding-left: 60px;
						}
					}
				}
				img{
					max-width: 100%;
					height: auto;
					&.thumb{
						margin: 0 auto;
						display: block;
					}
				}
				.aligncenter{
					margin: 15px auto;
					display: block;
					width: auto;
					@media screen and (max-width: 767px){
						width: 100%;
					}
				}
				.alignleft{
					float: left;
					width: auto;
					margin: 15px 0;
					margin-right: 15px;
					@media screen and (max-width: 767px){
						float: none;
						width: 100%;
					}
				}
				.alignright{
					float: right;
					width: auto;
					margin: 15px 0;
					margin-left: 15px;
					@media screen and (max-width: 767px){
						float: none;
						width: 100%;
					}
				}
				@media (min-width: 2500px){
					padding: 2.2vw;
					margin-bottom: 2.2vw;
					border: 0.7vw solid $border;
					h1{
						font-size: 2.4vw;
					}
					h2{
						font-size: 2.2vw;
					}
					h3{
						font-size: 2vw;
					}
					h4{
						font-size: 1.8vw;
					}
					h5{
						font-size: 1.4vw;
					}
					h6{
						font-size: 1.2vw;
					}
					p, ol, li{
						font-size: 1vw;
					}
					ul{
						padding-left: 2.2vw;
					}
					ol{
						padding-left: 2.2vw;
						li{
							ol{
								padding-left: 4vw;
							}
						}
					}
				}
			}
		}

		.single-post{
			padding-top: 30px;
			padding-bottom: 30px;
			.post-title{
				h2{
					text-align: center;
					margin: 20px 0;
				}
			}
			.post-date{
				p{
					text-align: center;
					font-style: italic;
					strong{
						text-transform: capitalize;
					}
				}
			}
			.author{
				@include clearfix;
				margin-top: 20px;
				margin-bottom: 20px;
			}
			.social{
				@include clearfix;
				margin-top: 20px;
				width: 170px;
				p{
					text-align: center;
					font-weight: 700;
					margin-top: 5px;
					margin-right: 5px;
				}
				a:first-of-type{
					.icon{
						margin: 0;
					}
				}
				.icon{
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
					width: 30px;
					height: 30px;
					margin-left: 5px;
					float: left;
					-webkit-filter: grayscale(1);
					filter: grayscale(1);

					&:hover {
						-webkit-filter: grayscale(0);
						filter: grayscale(0);
					}
				}
			}
			ul{
				padding-left: 30px;
				li{
					list-style-position: inside;
				}
			}
			ol{
				padding-left: 30px;
				li{
					list-style-position: inside;
					ol{
						padding-left: 60px;
					}
				}
			}
			img{
				max-width: 100%;
				height: auto;
				&.thumb{
					margin: 15px auto;
					display: block;
				}
			}
			.aligncenter{
				margin: 15px auto;
				display: block;
				width: auto;
				@media screen and (max-width: 767px){
					width: 100%;
				}
			}
			.alignleft{
				float: left;
				width: auto;
				margin: 15px 0;
				margin-right: 15px;
				@media screen and (max-width: 767px){
					float: none;
					width: 100%;
				}
			}
			.alignright{
				float: right;
				width: auto;
				margin: 15px 0;
				margin-left: 15px;
				@media screen and (max-width: 767px){
					float: none;
					width: 100%;
				}
			}
			@media (min-width: 2500px){
				padding: 2.2vw;
				margin-bottom: 2.2vw;
				border: 0.7vw solid $border;
				h1{
					font-size: 2.4vw;
				}
				h2{
					font-size: 2.2vw;
				}
				h3{
					font-size: 2vw;
				}
				h4{
					font-size: 1.8vw;
				}
				h5{
					font-size: 1.4vw;
				}
				h6{
					font-size: 1.2vw;
				}
				p, ol, li{
					font-size: 1vw;
				}
				ul{
					padding-left: 2.2vw;
				}
				ol{
					padding-left: 2.2vw;
					li{
						ol{
							padding-left: 4vw;
						}
					}
				}
			}
		}

			.trial-single{
				padding: 60px 0;
				background-color: $blue;
				.title{
					text-align: center;
					padding: 15px;
					h1{
						font-size: 32px;
						color: $white;
						@media screen and (max-width: 1300px){
							font-size: 28px;
						}
						@media screen and (max-width: 991px){
							font-size: 22px;
						}
						@media screen and (min-width: 2500px){
							font-size: 3vw;
						}
					}
					h3{
						font-size: 18px;
						color: $white;
						@media screen and (max-width: 991px){
							font-size: 16px;
						}
						@media screen and (min-width: 2500px){
							font-size: 0.8vw;
							padding-bottom: 1vw;
						}
					}
				}
				.trial_button{
					width: 165px;
					display: block;
					margin: 0 auto;
					margin-bottom: 30px;
					.btn{
						background-color: $black;
						border: 3px solid $white;
						border-radius: 5px;
						color: $white;
						text-decoration: none;
					}
				}
			}

		.omoss{
			.blue-bg{
				padding: 40px 0;
				margin-bottom: 100px;
				margin-top: 30px;
				@media screen and (min-width: 2500px){
					margin-top: 1vh;
				}
				img{
					width: 100%;
					height: auto;
				}
			}
			.text{
				img{
					max-width: 100%;
					border: 5px solid $white;
					height: auto;
					margin-bottom: 20px;
					// @media screen and (min-width: 768px){
					// 	@include vertical-align();
					// }
					&.thumbnail{
						max-width: 100%;
						width: auto;
						margin: 0;
						margin: 15px 0;
						@media screen and (min-width: 768px){
							border: none;
							margin: 0;
							margin-right: 15px;
							margin-bottom: 15px;
							float: left;
							max-width: 500px;
						}
					}
				}
				.aligncenter{
					margin: 15px auto;
					display: block;
					width: auto;
					@media screen and (max-width: 767px){
						width: 100%;
					}
				}
				.alignleft{
					float: left;
					width: auto;
					margin: 0;
					margin-right: 15px;
					margin-top: 0;
					@media screen and (max-width: 767px){
						float: none;
						width: 100%;
					}
				}
				.alignright{
					float: right;
					width: auto;
					margin: 15px 0;
					margin-left: 15px;
					@media screen and (max-width: 767px){
						float: none;
						width: 100%;
					}
				}
				p{
					font-size: 16px;
				}
				ul{
					padding-left: 30px;
					li{
						list-style-position: inside;
					}
				}
				ol{
					padding-left: 30px;
					li{
						list-style-position: inside;
						ol{
							padding-left: 60px;
						}
					}
				}
				@media (min-width: 2500px){
					padding: 2.2vw;
					margin-bottom: 2.2vw;
					border: 0.7vw solid $border;
					h1{
						font-size: 2.4vw;
					}
					h2{
						font-size: 2.2vw;
					}
					h3{
						font-size: 2vw;
					}
					h4{
						font-size: 1.8vw;
					}
					h5{
						font-size: 1.4vw;
					}
					h6{
						font-size: 1.2vw;
					}
					p, ol, li{
						font-size: 1vw;
					}
					ul{
						padding-left: 2.2vw;
					}
					ol{
						padding-left: 2.2vw;
						li{
							ol{
								padding-left: 4vw;
							}
						}
					}
				}
			}

			.team{
				margin: 25px 0;
				.img{
					height: 160px;
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
					margin: 0;
					border: none;
					margin-bottom: 10px;
				}
				.box-team{
					h1{
						margin: 0;
						padding: 0;
						margin-bottom: 10px;
						color: $blue;
						font-weight: 700;
						font-size: 18px;
					}
					p{
						margin: 0;
						padding: 0;
						margin-bottom: 5px;
						font-size: 14px;
						a{
							color: $black;
						}
					}
				}
			}
		}

		.page-blog{
			.slider-posts{
				height: 400px;
				margin-bottom: 50px;
				.swiper-container {
					width: 100%;
					height: 100%;
					.swiper-slide{
						position: relative;
						width: 100%;
						height: 100%;
						background-size: cover;
						background-position: center;
						background-repeat: no-repeat;
						.caption{
							position: absolute;
							bottom: 30px;
							left: 0;
							background-color: $blue;
							.title{
								text-align: left;
								color: $white;
								font-size: 24px;
								font-weight: 700;
							}
						}
					}
				}
				.swiper-button-next, .swiper-button-prev{
					@media (min-width: 2500px){
						width: 10vh;
						height: 10vh;
						margin-top: -3vw;
					}
				}
				.swiper-button-prev{
					background-image: image-url('prev.png');
					background-size: 100%;
					@media (min-width: 2500px){
						left: 1vw;
					}
				}
				.swiper-button-next{
					background-image: image-url('next.png');
					background-size: 100%;
					@media (min-width: 2500px){
						right: 1vw;
					}
				}
			}

			.posts{
				.post{
					margin-bottom: 30px;
					border: 1px solid $border;
					.img{
						width: 100%;
						height: 150px;
						background-size: cover;
						background-position: center;
						background-repeat: no-repeat;
					}
					.center{
						padding: 0 15px;
						h1{
							font-size: 18px;
							color: $black;
							height: 38px;
							overflow: hidden;
						}
						p{
							font-size: 14px;
							height: 57px;
							overflow: hidden;
						}
					}
				}
			}

			.pagination{
				float: none;
				text-align: center;
				width: 100%;
				background-color: $white;
				li{
					padding-bottom: 0;
					float: none;
					display: inline-block;
					@media screen and (max-width: 767px){
						display: block;
					}
					span{
						border: none;
						color: $black;
						font-weight: 700;
						background-color: transparent;
						&:hover{
							background-color: transparent;
						}
						&.current{
							color: $blue;
						}
					}
				}
			}
			.error{
				height: 80vh;

				.center{
					@include vertical-align();
					h1{
						margin-top: 0;
						font-size: 50px;
						color: $blue;
						text-align: center;
						padding-bottom: 10px;
						@media screen and (max-width: 1300px){
							font-size: 40px;
						}
						@media screen and (max-width: 991px){
							font-size: 30px;
						}
						@media screen and (min-width: 2500px){
							font-size: 5vw;
						}
					}
					p{
						font-size: 20px;
						color: $subtitle;
						text-align: center;
						padding-bottom: 10px;
						@media screen and (max-width: 1300px){
							font-size: 18px;
						}
						@media screen and (max-width: 991px){
							font-size: 16px;
						}
						@media screen and (min-width: 2500px){
							font-size: 1.3vw;
						}
						a{
							color: $subtitle;
							font-weight: 700;
						}
					}
				}
			}
		}
	}

	.contact-page{
		.container{
			position: relative;
		}
		.desk{
			display: block;
			@media screen and (max-width: 991px){
				display: none;
			}
		}
		.contact{
			@include vertical-align();
			position: absolute;
			width: calc(100% - 30px);
			padding: 75px 90px;
			@media screen and (max-width: 767px){
				top: 0%;
				-webkit-transform: translateY(0%);
				-ms-transform: translateY(0%);
				transform: translateY(0%);
				position: inherit;
				width: 100%;
				padding: 0px;
				iframe{
					display: none;
				}
			}
			@media (min-width: 2500px){
				padding: 75px 7vw;
			}
			.contact-form{
				.form{
					@include clearfix;
					@media screen and (max-width: 767px){
						padding: 15px;
						background-color: $white;
						border: 5px solid $border;
						margin-bottom: 30px;
					}
					input{
						margin: 0;
						font-size: 14px;
						background-color: $white;
						box-shadow: none;
						height: 50px;
						padding: 10px 12px;
						border: 2px solid $subtitle;
						margin-bottom: 15px;
						font-weight: 700;
						color: $title;
						@media (min-width: 2500px){
							height: 3vw;
							font-size: 1.1vw;
						}
					}
					textarea{
						margin: 0;
						font-size: 14px;
						background-color: $white;
						box-shadow: none;
						padding: 10px 12px;
						border: 2px solid $subtitle;
						margin-bottom: 15px;
						font-weight: 700;
						color: $title;
						height: 200px;
						@media screen and (max-width: 767px){
							height: 120px;
						}
						@media (min-width: 2500px){
							height: 15vw;
							font-size: 1.1vw;
						}
					}
					.enviar{
						float: right;
						border: 2px solid $blue;
						background-color: $white;
						width: 170px;
						color: $blue;
						margin-bottom: 0;
						@media (min-width: 2500px){
							width: 10vw;
							font-size: 1.1vw;
						}
					}
				}
			}
		}
		.title{
			text-align: center;
			padding: 15px;
			h1{
				font-size: 50px;
				color: $title;
				@media screen and (max-width: 1300px){
					font-size: 40px;
				}
				@media screen and (max-width: 991px){
					font-size: 30px;
				}
				@media screen and (min-width: 2500px){
					font-size: 5vw;
				}
			}
			h3{
				font-size: 20px;
				color: $subtitle;
				@media screen and (max-width: 1300px){
					font-size: 18px;
				}
				@media screen and (max-width: 991px){
					font-size: 16px;
				}
				@media screen and (min-width: 2500px){
					font-size: 1.3vw;
				}
			}
		}
		.blue-bg{
			position: relative;
			overflow: hidden;

			&:before {
				content: "";
				position: absolute;
				width: 140%;
				height: 75%;
				top: 15%;
				left: -20%;
				z-index: -1;
				background: image-url('faixa-bg-image.jpg') repeat-x;
				background-size: cover;
				-webkit-transform: rotate(-3deg);
				-moz-transform: rotate(-3deg);
				-ms-transform: rotate(-3deg);
				-o-transform: rotate(-3deg);
				transform: rotate(-3deg);
			}

			margin-top: 30px;
			@media screen and (min-width: 2500px){
				margin-top: 1vh;
			}
			img{
				width: 100%;
				height: auto;
			}
		}
	}

	.footer{
		background-color: $title;
		.lang{
			width: 150px;
			display: block;
			margin: 0 auto;
			padding-top: 1%;
		}
		.nav{
			&.navbar-nav{
				float: none;
				text-align: center;
				padding-top: 1%;
				padding-bottom: 1%;
				margin: 0px;
				&.social{
					padding: 0;
					padding-bottom: 1%;
					li{
						a{
							img{
								width: 40px;
								height: 40px;
							}
							@media (min-width: 2500px){
								img{
									width: auto;
									height: auto;
								}
							}
						}
					}
				}
				li{
					float: none;
					display: inline-block;
					a{
						background-color: transparent;
						color: $white;
						font-size: 16px;
						text-align: center;
						border: none;
						padding: 5px 0px;
						border-bottom: 2px solid transparent;
						margin: 0 10px;
						@media screen and (min-width: 992px){
							&:hover {
								color: $white;
							}
							&:focus, &.current-menu-item{
								color: $white;
							}
						}
						@media (min-width: 2500px){
							font-size: 1vw;
							img{
								width: auto;
								height: auto;
							}
						}
					}
				}
			}
		}
		p{
			color: $white;
			font-size: 14px;
			text-align: center;
			border: none;
			margin: 0;
			padding-bottom: 2%;
			@media (min-width: 2500px){
				font-size: 0.9vw;
			}
		}
	}
}

object{
	display:none;
}