//	=================
//    	Imports
//	=================

@import '../../base/color_variables';   	// Color Variables
@import '../../base/fonticons';   			// Fonticons Variables
@import '../../base/urls';   				// URLS Variables
@import '../../base/utilities_variables';  // Utilities Variables

/* clear float */

.clear {
	clear: both;
}
.main-info {
	width: 50%;
	margin: 5em auto;
	background: $additional-color-2;
	background: -webkit-$additional-gradient-color-39;
	background: -o-$additional-gradient-color-39;
	background: -moz-$additional-gradient-color-39;
	background-image: $additional-gradient-color-39;
	padding: 2em;
	border-radius: 5px;
}
.weather-grids {
	float: $align-left;
	width: 33%;
	&:nth-child(3) {
		text-align: $align-right;
	}
	h3 {
		font-size: 1.5em;
		color: $white;
		font-weight: 100;
	}
	h3.fri {
		color: $color_496;
		margin-top: 0.7em;
		line-height: 1.4;
	}
	h2 {
		font-size: 3em;
		font-weight: 300;
		color: $white;
	}
	h4 {
		font-size: 1em;
		color: $white;
	}
}
.weather-grids.weather-mdl {
	text-align: $align-center;
}
.weather-bottom {
	text-align: $align-center;
	margin-top: 2em;
	ul {
		padding-left: $p-0;
		li {
			display: inline-block;
			padding: 1em $p-0;
			float: $align-left;
			width: 14%;
		}
		li.bg {
			background: $color_497;
		}
	}
	h4 {
		font-size: 1em;
		color: $white;
		font-weight: 100;
	}
	h5 {
		font-size: 1.2em;
		color: $white;
		font-weight: 600;
	}
	h6 {
		font-size: 1em;
		color: $color_112;
		margin-top: 0.5em;
	}
}
figure.icons {
	margin: 0.5em $m-0;
}

/*-- main --*/
.main {
	h1 {
		font-size: 1.2em;
		color: $color_56;
		text-align: $align-right;
		margin-right: 2em;
	}
	a.lightbox {
		display: block;
	}
}
.main-agileits {
	padding: 2em $p-0 $p-0;
}
.main-wthree-row {
	width: 36%;
	margin: 2em auto;
	background: $color_164;
	background-size: cover;
	padding: $p-0;
}
.date {
	font-size: 1.4em;
	color: $white;
	font-weight: 400;
	line-height: 1.8em;
}

/*-- agileinfo-text --*/
.agileinfo-text {
	text-align: $align-center;
	h3 {
		font-size: 2em;
		color: $white;
	}
	h5 {
		font-size: 0.9em;
		color: $color_92;
		font-weight: 100;
		margin-top: 0.5em;
	}
	h2 {
		font-size: 8em;
		font-weight: 900;
		color: $color_88;
		span {
			font-weight: 100;
			font-size: 0.5em;
			vertical-align: $v-align-text-top;
		}
	}
	h4 {
		font-size: 2em;
		color: $white;
		letter-spacing: 3px;
	}
	h6 {
		font-size: .9em;
		color: $white;
		font-weight: 300;
		letter-spacing: 1px;
		margin-top: 1em;
	}
}
.w3layouts-slider {
	width: 70%;
	margin: 3em auto $m-0;
}
.item.agile-item {
	text-align: $align-center;
}
.agile-item {
	h6 {
		font-size: 0.9em;
		color: $white;
		font-weight: 300;
	}
}

/*-- agileits-top --*/
.agileits-top {
	background-size: cover;
	min-height: 310px;
	background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
}
.agileinfo-top-row {
	position: $pos-rel;
	padding: $p-0 3em;
	h3 {
		font-size: 4em;
		color: $color_496;
		padding-top: 0.2em;
		text-align: $align-right;
		span {
			font-size: .5em;
			color: $white;
		}
	}
	p {
		margin: $m-0;
		color: $white;
		font-size: 1.5em;
		text-align: $align-right;
		font-weight: 600;
	}
}
.agileinfo-top-img {
	span {
		background: url(images/5.png) no-repeat 0px 0px;
		display: block;
		height: 139px;
		width: 150px;
		position: $pos-abs;
		top: -15%;
		left: -1%;
	}
}
.agileinfo-top-time {
	padding: 2.5em $p-0 $p-0;
}
div#txt {
	color: $white;
	font-size: 2em;
	font-weight: 200;
	letter-spacing: 3px;
}
.w3ls-bottom {
	background: url(images/a.png) no-repeat -1px 0px;
	background-size: 103%;
	padding: 3em 1em $p-0;
	margin-top: -4em;
}
.biseller-column {
	p {
		font-size: 0.9em;
		color: $color_299;
		font-weight: 400;
	}
	&:hover {
		p {
			color: $color_495;
		}
	}
}

/*-- carousel --*/
#owl-demo2 {
	.item {
		padding: 15px $p-0;
		margin: 1em 1em;
		color: $white;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-o-border-radius: 3px;
		-ms-border-radius: 3px;
		border-radius: 3px;
		text-align: $align-center;
	}
}
.customNavigation {
	text-align: $align-center;
}
.w3ls-bottom2 {
	padding: $p-0 2em 2em;
}
.wthree-grids {
	ul {
		padding: 0.8em $p-0 $p-0;
		border-top: $b-width-1 $dash $light-gray;
		li {
			display: inline-block;
			float: $align-left;
			width: 32%;
			line-height: 2em;
			font-size: .9em;
			color: $color_57;
		}
		li.wthree-img {
			text-align: $align-center;
			img {
				width: 35px;
				height: 35px;
				margin-top: -3px;
				font-size: 32px;
			}
		}
		li.wthree-temp {
			width: 17%;
			text-align: $align-right;
		}
	}
	ul.top {
		border: none;
	}
}
.ac-container {
	label {
		padding-right: $p-40;
		position: $pos-rel;
		z-index: 20;
		display: inline-block;
		cursor: pointer;
		color: $additional-color-2;
		line-height: 33px;
		font-size: 1em;
		font-weight: 600;
		&:hover {
			color: $additional-color-5;
		}
		&:after {
			content: '';
			position: $pos-abs;
			width: 15px;
			height: 11px;
			right: 13px;
			top: 15px;
			background: url(images/arrow_up.png) no-repeat -4px -5px;
			-webkit-transition: .5s all;
			-moz-transition: .5s all;
			-o-transition: .5s all;
			-ms-transition: .5s all;
			transition: .5s all;
		}
	}
	input {
		&:checked {
			&+label {
				color: $additional-color-5;
				&:hover {
					color: $additional-color-5;
					&:after {
						content: '';
						position: $pos-abs;
						width: 15px;
						height: 11px;
						right: 13px;
						top: 15px;
						background: url(images/arrow_up.png) no-repeat -4px -5px;
						-webkit-transition: .5s all;
						-moz-transition: .5s all;
						-o-transition: .5s all;
						-ms-transition: .5s all;
						transition: .5s all;
						color: $black;
						-webkit-transform: $rotate-180deg;
						-moz-transform: $rotate-180deg;
						-o-transform: $rotate-180deg;
						-ms-transform: $rotate-180deg;
						transform: $rotate-180deg;
						top: 10px;
					}
				}
				&:after {
					color: $black;
					-webkit-transform: $rotate-180deg;
					-moz-transform: $rotate-180deg;
					-o-transform: $rotate-180deg;
					-ms-transform: $rotate-180deg;
					transform: $rotate-180deg;
					top: 10px;
				}
			}
			&~article {
				-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
				-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
				-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
				-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
				transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
				background-color: $color_494;
			}
			&~article.ac-small {
				height: 20.5em;
				background: $white;
			}
		}
		display: none;
	}
	article {
		background: $white;
		margin-top: -1px;
		overflow: hidden;
		height: 0px;
		position: $pos-rel;
		z-index: 10;
		-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
		-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
		-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
		-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
		transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
		p {
			line-height: 21px;
			font-size: 0.9em;
			padding: $p-10 24px;
			color: $white;
			background-color: $color_493;
		}
	}
}

/*---- responsive-design -----*/
@media (max-width:900px) {
	.main-info {
		width: 100%;
	}
	.w3ls-bottom2 {
		padding: $p-0 1.5em 1.5em;
	}
	.agileinfo-top-row {
		h3 {
			font-size: 3.5em;
		}
		p {
			font-size: 1.3em;
		}
	}
	.agileits-top {
		min-height: 275px;
	}
	div#txt {
		font-size: 1.8em;
	}
	.w3ls-bottom {
		padding: 3em 1em $p-0 0.5em;
	}
	.main {
		h2 {
			margin-right: 1em;
		}
		padding: 1.5em $p-0 $p-0;
	}
	.agileinfo-top-img {
		span {
			height: 120px;
			width: 130px;
			top: -19%;
			left: -2%;
			background-size: 100%;
		}
	}
	.main-wthree-row {
		width: 90%;
		margin: 3em auto 2em;
	}
}
@media (max-width:480px) {
	.main-info {
		width: 100%;
		margin: 3em auto;
	}
	.weather-grids {
		h3 {
			font-size: 1.3em;
		}
		h2 {
			font-size: 2.5em;
		}
		h4 {
			font-size: 0.8em;
		}
	}
	.weather-bottom {
		h5 {
			font-size: 1.1em;
		}
		h6 {
			font-size: 0.9em;
		}
	}
	.main {
		padding: 3em 0 0;
		h2 {
			margin-right: 0.5em;
			font-size: 1.1em;
		}
	}
	.main-wthree-row {
		width: 57%;
		width: 90%;
	}
	.date {
		font-size: 1.2em;
	}
	.w3layouts-slider {
		width: 75%;
	}
	.agileinfo-top-row {
		h3 {
			font-size: 2.5em;
		}
		p {
			font-size: 0.9em;
		}
	}
	.w3ls-bottom2 {
		padding: 0 1.2em 1em;
	}
	#owl-demo2 {
		.item {
			margin: 1em 1em 0;
		}
	}
}
@media (max-width:414px) {
	.main-info {
		padding: 1.5em 1em;
	}
	.weather-bottom {
		h4 {
			font-size: 0.9em;
		}
		canvas {
			width: 30px;
			height: 30px;
		}
		margin-top: 1.5em;
	}
	canvas#clear-day {
		width: 60px;
		height: 60px;
	}
	.agileinfo-text {
		h2 {
			font-size: 6em;
		}
		h4 {
			font-size: 1.8em;
			letter-spacing: 1px;
		}
	}
	.w3layouts-slider {
		width: 85%;
	}
	.main-wthree-row {
		padding: 1.5em;
		width: 100%;
		margin: 2em auto 1em;
	}
	.copy-rights {
		p {
			font-size: 0.9em;
			padding: 0 1em;
		}
	}
	.main {
		padding: 1em 0 0;
	}
	.agileinfo-top-row {
		h3 {
			font-size: 2.2em;
		}
	}
	.agileinfo-top-img {
		span {
			height: 83px;
			width: 90px;
			left: 0%;
		}
	}
	.agileits-top {
		min-height: 220px;
	}
	div#txt {
		font-size: 1.5em;
	}
	.wthree-grids {
		ul {
			li.wthree-img {
				img {
					width: 30px;
					height: 29px;
					margin-top: 1px;
				}
			}
			padding: 0.6em 0 0;
		}
	}
	.ac-container {
		input {
			&:checked {
				&~article.ac-small {
					height: 18.2em;
				}
			}
		}
	}
	.w3ls-bottom {
		padding: 3em 1em 0 0.5em;
	}
	#owl-demo2 {
		.item {
			margin: 0.5em 1em;
		}
	}
}
@media (max-width:320px) {
	.main-info {
		width: 100%;
		margin: 1.5em auto;
		padding: 0.5em;
	}
	.weather-grids {
		h2 {
			font-size: 2em;
		}
		h4 {
			font-size: 0.7em;
		}
		h3 {
			font-size: 0.9em;
		}
	}
	canvas#clear-day {
		width: 55px;
		height: 55px;
	}
	.weather-bottom {
		canvas {
			width: 20px;
			height: 20px;
		}
		ul {
			li {
				width: 14.2%;
				padding: 0.5em 0;
			}
		}
		h5 {
			font-size: 0.9em;
		}
		h6 {
			font-size: 0.8em;
		}
	}
	.main-wthree-row {
		width: 75%;
		padding: 0em;
	}
	.agileinfo-text {
		h2 {
			font-size: 5em;
		}
		h4 {
			font-size: 1.4em;
		}
	}
	.w3layouts-slider {
		width: 90%;
	}
	.agileinfo-top-img {
		span {
			height: 70px;
			width: 75px;
			left: 0%;
		}
	}
	.agileinfo-top-row {
		h3 {
			font-size: 1.8em;
		}
		p {
			font-size: 0.85em;
		}
		padding: 0 1.5em;
	}
	div#txt {
		font-size: 1.3em;
	}
	.agileits-top {
		min-height: 175px;
	}
	.w3ls-bottom {
		margin-top: -2em;
	}
	.w3ls-bottom2 {
		padding: 0 1em 1em;
	}
	.main {
		h2 {
			margin-right: 0;
			font-size: 1em;
		}
	}
}
@media (max-width:1440px) {
	.main-wthree-row {
		width: 27%;
	}
}
@media (max-width:1280px) {
	.main-wthree-row {
		width: 31%;
		width: 36%;
	}
	#owl-demo {
		.item {
			margin: 1em 1em 0.5em;
		}
	}
	.agileits-top {
		min-height: 290px;
	}
	.agileinfo-top-time {
		padding: 1.5em 0 0;
	}
}
@media (max-width:1080px) {
	.main-wthree-row {
		width: 35%;
	}
}
@media (max-width:991px) {
	.main-agileits {
		padding: 2em 0 0;
	}
	.agileinfo-text {
		h2 {
			font-size: 7em;
		}
	}
	.main-wthree-row {
		width: 40%;
	}
}
@media (max-width:768px) {
	.copy-rights {
		padding: 1em 0 2em;
	}
	.w3layouts-slider {
		margin: 2em auto 0;
	}
	.agileinfo-top-img {
		span {
			height: 99px;
			width: 108px;
			top: -17%;
			left: -1%;
		}
	}
	.agileinfo-top-row {
		h3 {
			font-size: 3em;
		}
		p {
			font-size: 1em;
		}
	}
	.agileits-top {
		min-height: 240px;
	}
	.w3ls-bottom {
		padding: 2em 1em 0 0.5em;
	}
}
@media (max-width:667px) {
	.main-wthree-row {
		width: 50%;
		width: 90%;
	}
}
@media (max-width:600px) {
	.main-agileits {
		padding: 1.5em 0 0;
	}
}
@media (max-width:384px) {
	.main-wthree-row {
		width: 70%;
	}
	.agileinfo-top-img {
		span {
			top: -14%;
		}
	}
	.biseller-column {
		p {
			font-size: 0.85em;
		}
	}
	#owl-demo2 {
		.item {
			margin: 0 1em;
		}
	}
	.w3ls-bottom {
		padding: 2.2em 1em 0 0.5em;
	}
	.ac-container {
		label {
			font-size: 0.9em;
		}
	}
}
@media (max-width:1024px) {
	.main-wthree-row {
		width: 46%;
	}
	.agileinfo-top-row {
		padding: 0 2em;
	}
}
@media (max-width:800px) {
	.main-wthree-row {
		width: 90%;
	}
	.ac-container {
		input {
			&:checked {
				&~article.ac-small {
					height: 20em;
				}
			}
		}
	}
}
@media (max-width:736px) {
	div#txt {
		font-size: 1.6em;
	}
}
@media (max-width:640px) {
	.main-wthree-row {
		width: 90%;
	}
}
@media (max-width:568px) {
	.main-wthree-row {
		width: 90%;
	}
}