@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600;800&family=Noto+Sans&family=Oswald:wght@500;600;700&family=Source+Serif+Pro:ital,wght@0,200;0,300;0,400;1,300&display=swap");


/*
	Massively by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul, dl {
	list-style: none;
}



body {
	-webkit-text-size-adjust: none;
}



input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}



/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

	@media screen and (max-width: 480px) {

		html, body {
			min-width: 320px;
		}

	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background-color: black;
	}


/* Type */

	html {
		font-size: 16pt;
	}

		@media screen and (max-width: 1680px) {

			html {
				font-size: 12pt;
			}

		}

		@media screen and (max-width: 1280px) {

			html {
				font-size: 11pt;
			}

		}

		@media screen and (max-width: 360px) {

			html {
				font-size: 10pt;
			}

		}

	body {
		color: black;
	}



    a:hover {
        text-decoration: underline;
        color: rgb(221, 167, 176)!important;
    }

	strong, b {
		font-weight: 600;
	}



	h1, h2, h3, h4, h5, h6 {
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-weight: 900;
		line-height: 1.5;
		letter-spacing: 0.075em;
		text-transform: uppercase;
		margin: 0 0 1rem 0;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			border-bottom: 0;
			color: inherit;
			text-decoration: none;
		}

	h1 {
		font-size: 4rem;
		line-height: 1.1;
		margin: 0 0 2rem 0;
	}

	h2 {
		font-size: 1.75rem;
		line-height: 1.3;
		margin: 0 0 1.5rem 0;
	}

	h3 {
		font-size: 1.25rem;
		margin: 0 0 1.5rem 0;
	}

	h4 {
		font-size: 1rem;
	}

	h5 {
		font-size: 0.9rem;
	}

	h6 {
		font-size: 0.8rem;
	}






/* Wrapper */



    #wrapper  {
        z-index: 1;
        background: white;
        width: 100%;
        height: 100%;
        background-color: #212931;
       /* background-image:  url("https://hotelsuitevillamaria.bikepointtenerife.com/assets/img/splash-hotelsuitevillamaria.jpg") ;*/
        background-size: 100% auto;
        background-position: top center;
        background-repeat:no-repeat;
        background-attachment:fixed;
        z-index: -1;
        background-blend-mode:initial;
        
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
    }


/* Intro */

	#intro {
		color: #ffffff;
		padding: 8rem 2rem 0rem 2rem ;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-justify-content: -moz-flex-end;
		-webkit-justify-content: -webkit-flex-end;
		-ms-justify-content: -ms-flex-end;
		justify-content: flex-end;
		-moz-transition: opacity 1s ease, -moz-transform 1s ease;
		-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
		-ms-transition: opacity 1s ease, -ms-transform 1s ease;
		transition: opacity 1s ease, transform 1s ease;
		position: relative;
		cursor: default;
		text-align: center;
		z-index: 1;
		min-height: 50vh;
        margin-bottom: 4rem;
	}


		#intro h1, #intro h2, #intro h3, #intro h4, #intro h5, #intro h6 {
			color: #ffffff;
		}


        #intro p {
            font-size: 1.5rem;
            margin-top: 0rem;
        }


		@media screen and (max-width: 980px) {
			#intro {
				padding: 4rem 4rem 2rem 4rem ;
				min-height: 90vh;
			}
		}

		@media screen and (max-width: 736px) {

			#intro {
				padding: 0rem 2rem 1rem 2rem ;
				min-height: 50vh;
			}

				#intro h1 {
					font-size: 3.25rem;
					line-height: 1.1;
					margin-bottom: 1rem;
				}

				#intro p {
					font-size: 1.5rem;
					margin-top: 0rem;
				}

		}



        #collection-point-txt {
            padding-bottom: 2rem;
        }
        #collection-point-txt h3 {
            font-size: 1.4rem;
        }
        #collection-point-txt .location-mesg {
            font-size: 1rem;
            font-weight: bold;
            color: #e6284a;
            margin-bottom: 10px;
        }
        #collection-point-txt .important-info {
            margin-bottom: 10px;
        }

        .extra-service{
            display:none;
            width: 70%;
        }
        .extra-service span{
            color:rgb(207, 50, 50);
            font-weight: 600;
            line-height: 1.2rem;
        }

/* Booking Engine */
#booking-engine{
    padding:2rem 2rem; 
    background: white;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}



/* Main */

	#main {
		background-color: #ffffff;
		position: relative;
		margin: 0 auto;
		width: calc(100% - 4rem);
		max-width: 100%;
		z-index: 2;

	}

		#main > * {
			padding: 4rem 4rem 2rem 4rem ;
			border-top: solid 2px #eeeeee;
			margin: 0;
		}

			#main > *:first-child {
				border-top: 0;
			}



		#main > .post {
			padding: 8rem 8rem 6rem 8rem ;
		}

			#main > .post header.major > .date {
				margin-top: -2rem;
			}

			#main > .post header.major > h1, #main > .post header.major h2 {
				font-size: 4rem;
				line-height: 1.1;
				margin: 0 0 2rem 0;
			}



			@media screen and (max-width: 1280px) {

				#main > .post {
					padding: 6rem 4rem 4rem 4rem ;
				}

			}

			@media screen and (max-width: 736px) {

				#main > .post {
					padding: 4rem 2rem 2rem 2rem ;
				}

					#main > .post header.major > .date {
						margin-top: -1rem;
						margin-bottom: 2rem;
					}

					#main > .post header.major > h1, #main > .post header.major h2 {
						font-size: 2.5rem;
						line-height: 1.2;
						margin: 0 0 1.5rem 0;
					}

			}

		#main > .posts {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-moz-align-items: -moz-stretch;
			-webkit-align-items: -webkit-stretch;
			-ms-align-items: -ms-stretch;
			align-items: stretch;
			text-align: center;
			width: 100%;
			padding: 0;
		}

			#main > .posts > * {
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				-moz-flex-grow: 0;
				-webkit-flex-grow: 0;
				-ms-flex-grow: 0;
				flex-grow: 0;
			}

			#main > .posts > * {
				width: 50%;
			}

			#main > .posts > * {
				padding: 4rem;
				width: 100%;
			}

				#main > .posts > article > :last-child {
					margin-bottom: 0;
				}

				#main > .posts > article:nth-child(2n - 1) {
					border-left-width: 0;
				}

				#main > .posts > article:nth-child(-n + 2) {
					border-top-width: 0;
				}

			@media screen and (max-width: 980px) {

				#main > .posts > * {
					width: 50%;
				}

				#main > .posts > * {
					padding: 2.5rem;
					width: 50%;
				}

			}

			@media screen and (max-width: 736px) {

				#main > .posts > * {
					width: 100%;
				}

				#main > .posts > * {
					padding: 2rem;
					width: 100%;
				}

				#main > .posts > article:nth-child(2n - 1) {
					border-left-width: 2px;
				}

				#main > .posts > article:nth-child(-n + 2) {
					border-top-width: 2px;
				}

				#main > .posts > article:nth-child(n) {
					border-left-width: 0;
				}

				#main > .posts > article:nth-child(-n + 1) {
					border-top-width: 0;
				}

				#main > .posts > article .image {
					max-width: 25rem;
					margin-left: auto;
					margin-right: auto;
				}

			}

		@media screen and (max-width: 736px) {

			#main > * {
				padding: 2rem 2rem 0.1rem 2rem ;
			}

		}

		@media screen and (max-width: 480px) {

			#main {
				width: 100%;
			}

		}

/* Footer */

	#shop {
		width: 100%;
		z-index: 2;
        background-color:#E7E7E7;
        min-height: 100px; 
        margin-bottom: 0rem;
	}

	#footer {
		width: black;
		z-index: 2;
        background-color:black;
        min-height: 100px; 
	}







	
/*Bike Rentals Bikes*/
 #client-mesg {
	background: white;
	position: fixed;
	display: none;
	bottom: 15%;
	padding: 1rem 2rem 1rem 1.7rem;
	width: 350px;
	color: black;
	border: 2px solid black;
	font-family: "Roboto Mono", monospace;
	z-index: 100;
    font-size: 1rem; 
    line-height: 1.3rem;
  }
#client-mesg .close {
	position: absolute;
	top: -0.1rem;
	right: -0.1rem;
	background: rgb(218, 20, 20);
	border-radius: 0%;
	padding: 5px 10px;
  }
#client-mesg .close a {
	color: white;
  }
  

  
/* Popup box BEGIN */
.hover_bkgr_fricc {
	background: rgba(0, 0, 0, 0.4);
	cursor: pointer;
	display: none;
	left: 0;
	height: 100%;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 10000;
  }
  .hover_bkgr_fricc h4 {
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	font-weight: 900;
	font-size: 1.2rem;
  }
  
  .hover_bkgr_fricc .helper {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
  }
  
  .hover_bkgr_fricc > div {
	background-color: #fff;
	-webkit-box-shadow: 10px 10px 60px #555;
			box-shadow: 10px 10px 60px #555;
	display: inline-block;
	height: auto;
	max-width: 551px;
	min-height: 100px;
	vertical-align: middle;
	width: 60%;
	position: relative;
	border-radius: 8px;
	padding: 15px 5%;
  }
  .hover_bkgr_fricc > div p:last-child {
	margin-bottom: 1rem !important;
  }
  .hover_bkgr_fricc > div .bttn-default {
	padding: 1rem 2rem;
  }
  .hover_bkgr_fricc > div .text {
	margin-bottom: 2rem;
  }
  
  .popupCloseButton {
	background-color: #fff;
	border: 3px solid #999;
	border-radius: 50px;
	cursor: pointer;
	display: inline-block;
	font-family: arial;
	font-weight: bold;
	position: absolute;
	top: -20px;
	right: -20px;
	font-size: 25px;
	line-height: 30px;
	width: 30px;
	height: 30px;
	text-align: center;
  }
  
  .popupCloseButton:hover {
	background-color: #ccc;
  }
  
  .trigger_popup_fricc {
	cursor: pointer;
	font-size: 20px;
	margin: 20px;
	display: inline-block;
	font-weight: bold;
  }



  article h3 {
    text-align: left;
    margin-bottom: 0;
}
h1,
h2,
h3,
.h1,
.h2,
.h3 {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
}
p,
ul,
li,
span,
i,
em,
div {
    font-family: "Noto Sans", sans-serif;
    font-size: 0.8rem;
    color: black;
}
h4 {
    font-family: "Noto Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
}
h5 {
    font-family: "Noto Sans", sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
}

  section > article{
    padding-bottom:0px!important;
    margin-bottom: -30px!important;
  }

  #intro p {
		font-family: "Source Serif Pro", Helvetica, sans-serif;
		font-weight: 900;
    font-style: italic!important;
    color: white; 
  }


  #footer-shop_address{
    background: #E7E7E7;
    padding: 2rem;
  }

  #footer-shop_address .address > h4{
    font-family: "Noto Sans", sans-serif;
    font-size:0.9rem!important;
    letter-spacing: 0;
  }
  #footer-shop_address ul > li{

    font-family: "Noto Sans", sans-serif;
    font-size: 0.75rem;
    color: black;
    line-height: 1.1rem;  
    padding-bottom: 5px;
  }


  #footer{
    padding: 2rem;
  }
  #footer a {
    color: #ccc7c7;
}
#footer .title {
    color: white;
    text-transform: uppercase;
}
#footer li {
    margin-bottom: 8px;
}
#footer #icon-image {
    align-content: right;
    text-align: right;
}
#footer #icon-image img {
    width: 13%;
}
.links,#icon-image{
    margin-bottom: 3rem; 
}

#organisations {
    margin-bottom: 3rem;
}
#organisations img {
    margin-left: -20px;
}
.page-info-text p,
.rights-reserved p {
    color: #afafaf;
    line-height: 25px
}


#language ul {
    margin-bottom: 2rem;
}
#language li {
    display: inline;
    color: transparent;
}