/* XX-SMALL MOBILE: LIGHT BLUE; ************************************/

@media only screen and (min-width: 20em) {


	/****************************** NEW STUFF ************************************/

	#casa{
		/*border: 1px solid lightblue;*/
		width: 95%;
		margin: 1em 2.5% 0 2.5%;
		float: left;
	}

		/* logos*/
		.casa_box1{
			width: 100%;
			padding: 30px 30px 30px 30px;
			float: left;
		}
			.casa_box1 img{
				width: 100%;
				float: left;
			}
		/* flag*/
		.casa_box2{
			width: 100%;
			float: left;
			position: relative;
		}
			.casa_box2 img{
				width: 100%;
				float: left;
			}
		/* introduction*/
		.casa_box3{
			width: 100%;
			padding: 0;
			float: left;
			position: relative;
		}
			.casa_box3 img{
				width: 100%;
				float: left;
			}
		/* homepage: tooltip container*/
		.casa_box4{
			width: 100%;
			float: left;
			position: relative;
		}
			.casa_box4 img{
				width: 100%;
				float: left;
			}
			#stop1{
				position: absolute;
				top: 31%;
				left: 1.4%;
				z-index: 3;
			}
			#stop2{
				position: absolute;
				top: 31%;
				right: 36%;
				z-index: 3;
			}
			#stop3{
				position: absolute;
				top: 31%;
				right: 2%;
				z-index: 3;
			}
			#stop4{
				position: absolute;
				top: 61%;
				right: 2%;
				z-index: 3;
			}
			#stop5{
				position: absolute;
				top: 76%;
				right: 2%;
				z-index: 3;
			}

		/* daytrip landing pages: tooltip container*/
		.casa_box5{
			width: 50%;
			padding: 20px;
			float: left;
			position: relative;
		}
			.casa_box5 img{
				width: 100%;
				float: left;
			}
			#stop6{
				position: absolute;
				top: 51%;
				left: 0%;
			}
			#stop7{
				position: absolute;
				top: 72.3%;
				right: 0%;
			}

		/*daytrip profie template: tooltip container*/
		.casa_box6{
			width: 100%;
			padding: 0 0;
			float: left;
			position: relative;
		}
			.casa_box6 img{
				width: 100%;
				float: left;
			}

			#stop8{
				position: absolute;
				top: 3.6%;
				right: 0%;
			}
			#stop9{
				position: absolute;
				top: 23%;
				right: 0%;
			}
			#stop10{
				position: absolute;
				top: 51.2%;
				right: 0%;
			}
			#stop11{
				position: absolute;
				top: 71.3%;
				right: 0%;
			}
			#stop12{
				position: absolute;
				top: 82.1%;
				right: 0%;
			}
			#stop13{
				position: absolute;
				top: 91.1%;
				right: 0%;
			}

		/*tooltips*/
		.tooltip {
			cursor: pointer;
			font-family: "Roboto Slab", serif;
			font-weight: 1.25em;
			line-height: 1.5em;
			text-align: center;
			vertical-align: center;
			font-weight: 700;
			background-color: #F2DB68;
			width: 25px;
			height: 25px;
			position: relative;
			display: inline-block;
			z-index: 1;
		}
			.tooltip_text{
				text-align: left;
				padding: 0 20px;
			}
		.tooltip-content {
			display: none;
			position: absolute;
			margin-top: 5px;
			background-color: #f9f9f9;
			min-width: 300px;
			opacity: .9;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			z-index: 1;
		}
			#right{
				right: 0;
			}
			#left{
				left: 0;
			}
			#middle{
				left: -170px;
			}
		.tooltip:hover .tooltip-content {
			display: block;
		}


		/*span*/
		.bold{
			font-weight: 500;
		}
	

/** X-SMALL: SMARTPHONES LANDSCAPE: LIME *************************************/

@media only screen and (min-width: 30em) {

		#casa{
			/*border: 1px solid lime;*/
			width: 90%;
			margin: 0 5%;
			float: left;
		}
		.casa_box1{
			width: 100%;
			padding: 75px 75px 75px 75px;
			float: left;
		}
			#stop3{
				right: 0%;
			}
			#stop4{
				right: 0%;
			}
			#stop5{
				right: 0%;
			}
			#stop6{
				position: absolute;
				top: 53%;
				left: 0%;
			}
			#stop7{
				position: absolute;
				top: 75.3%;
				right: 0%;
			}
			#stop12{
				position: absolute;
				top: 87.5%;
				right: 0%;
			}
			#stop13{
				position: absolute;
				top: 94.5%;
				right: 0%;
			}
}

/** SMALL: TABLETS PORTRAIT: PINK; *************************************/

@media only screen and (min-width: 48em) {


		#casa{
			/*border: 1px solid pink;*/
			width: 90%;
			margin: 0 5%;
			float: left;
		}
		.casa_box1{
			width: 100%;
			padding: 50px 150px 50px 150px;
			float: left;
		}
		.tooltip {
			cursor: pointer;
			font-family: "Roboto Slab", serif;
			font-weight: 2em;
			line-height: 1.75em;
			width: 30px;
			height: 30px;
		}
			#stop6{
				position: absolute;
				top: 54%;
				left: 0%;
			}
			#stop7{
				position: absolute;
				top: 77.3%;
				right: 0%;
			}
			#stop12{
				position: absolute;
				top: 88%;
				right: 0%;
			}
			#stop13{
				position: absolute;
				top: 95%;
				right: 0%;
			}
}

/** MEDIUM: TABLET LANDSCAPE / DESKTOP: YELLOW; *************************************/

@media only screen and (min-width: 64em) {

		#casa{
			/*border: 1px solid yellow;*/
			width: 80%;
			margin: 0 10%;
			float: left;
		}
		.casa_box1{
			width: 50%;
			padding: 50px 50px 50px 50px;
			float: left;
		}

		.casa_box6{
			width: 100%;
			padding: 0 50px;
			float: left;
			position: relative;
		}
			.casa_box6 img{
				width: 100%;
				float: left;
			}
			#stop6{
				position: absolute;
				top: 54.5%;
				left: 0%;
			}
			#stop7{
				position: absolute;
				top: 78.1%;
				right: 0%;
			}
			#stop8{
				position: absolute;
				top: 3.6%;
				right: 13.5%;
			}
			#stop9{
				position: absolute;
				top: 23%;
				right: 13.5%;
			}
			#stop10{
				position: absolute;
				top: 51.2%;
				right: 13.5%;
			}
			#stop11{
				position: absolute;
				top: 71.3%;
				right: 13.5%;
			}
			#stop12{
				position: absolute;
				top: 82.1%;
				right: 14.5%;
			}
			#stop13{
				position: absolute;
				top: 91.1%;
				right: 14.5%;
			}


}

/* LARGE: DESKTOP: ORANGE; ************************************/

@media only screen and (min-width: 85.375em) {

		#casa{
			/*border: 1px solid orange;*/
			width: 70%;
			margin: 0 15%;
			float: left;
		}
		.casa_box1{
			width: 50%;
			padding: 100px 100px 100px 100px;
			float: left;
		}

}

/* X-LARGE: DESKTOP: CYAN; ************************************/

@media only screen and (min-width: 120em) {

		#casa{
			/*border: 1px solid cyan;*/
			width: 60%;
			margin: 0 20%;
			float: left;
		}

}

/* XX-LARGE: DESKTOP: RED; ************************************/

@media only screen and (min-width: 160em) {

		#casa{
			/*border: 1px solid red;*/
			width: 70%;
			margin: 0 15%;
			float: left;
		}

}