/* ######################### responsive css  #################################### */

/* -- (c) 2017 D. McBeath, Enchanted Rainforest Cottages -- */




/* ----------- STVR IDs ----------------- */
/* ---                                --- */
/* ---            STVR                --- */
/* ---                                --- */
/* -------------------------------------- */

	#id_stvr, #id_ncud, #id_get, #id_tat {
		position: absolute;
		top:  30px;
		left: 40px;
		font-size: 15px;
		color: black;
		content: "window size"; 
		text-shadow: 0px 0px  3px rgba(255,255,255, 1),
	                 0px 0px  6px rgba(255,255,255, 1),
	                 0px 0px 12px rgba(255,255,255, 1);
	
		z-index: 99999;
	}

	#id_stvr {
		top:  10px;
	}

	#id_ncud {
		top:  30px;
	}

	#id_get {
		top:  50px;
	}

	#id_tat {
		top:  70px;
	}
















/* ------------- DESKTOP ---------------- */
/* ---                                --- */
/* ---            COMMON              --- */
/* ---                                --- */
/* -------------------------------------- */

@media (min-width: 601px) {


	#media_ID::after { content: "common : 610w +"; }
		
	.specials {
		padding: 0px;
		margin:	auto;
	}
	
		
	.mobile  { display:none;  }
	.desktop { display:inline; }

	body {
		background-color: black;
	}
	
	.section-bottom {
		margin-bottom: 150px;
	}

	.caption .btn-start,
	.bt-btn {
		color: rgb(127, 204, 86);
		font-size: 14px;
		letter-spacing: 2px;
		font-weight: 600;
		padding: 14px 40px;
		border: 1px solid #6e6d6c;
		border-radius: 4px;
		margin-top: 40px;
	}
	
	
	
	
	#home-slider .caption {
		position: absolute;
		bottom: 27vh;
		margin-top: -104px;
		left: 0;
		right: 0;
	
		font-family: 'Quicksand', sans-serif;
		text-align: center;
		/* text-transform: uppercase; */
		z-index: 15;
		font-size: 18px;
		font-weight: 300;
		color: #fff;
	}


	#home-slider .fa-angle-down {
		position: absolute;
		left: 50%;
		bottom: 20vh;
		color: #fff;
		display: inline-block;
		width: 24px;
		margin-left: -12px;
		font-size: 24px;
		line-height: 24px;
		z-index: 999;
		-webkit-animation: bounce 3000ms infinite;
		animation: bounce 3000ms infinite;
	}


	.bt-btn:hover {
		border-color: #028fcc;
		background-color: #028fcc;
		color: white;
	}

	
	.btn_volcano {
		position: relative;
		top: 0vh;
		padding-top: 15px;
	}




	section {
		padding: 0px 0px;
	}


	
	.media {
margin-top: 40px;
margin-bottom: 30px;
padding: 5px;
border: 2px solid grey;
width: 70%;
margin-left: auto;
margin-right: auto;
	}


	.wrapper {
		display: grid;
		margin-left: 5vw;
		margin-right: 5vw;
	}

	.fit {
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
		grid-gap: 7vw;
	}


	.cu-buttons {
		position: relative;
		width: 100%;
		/*outline: 1px dotted red;*/
	}
	
	.wrapper-buttons {
		display: grid;
		padding-top: 17px;
	}

	.fit-buttons {
		grid-template-columns: repeat(auto-fit, minmax(28%, 1fr));
		grid-gap: 2vw;
	}	

	.look-buttons {
		padding: 			14px 0px;

		color: 				rgb(159, 255, 108);
		font-size: 			14px;
		letter-spacing: 	2px;
		font-weight: 		600;
		text-align: 		center;
		
		border: 			1px solid #6e6d6c;
		border-radius: 		4px;
		background-color: 	transparent;
	}



	#hikers-slider .carousel-inner {
		/* image scroll fix ('coz inner was set by home slider) */
		/*height: calc(100vw * .6425) ;*/
		height: calc(100vw * .33) ;
	}




	#guesthouse-slider-L .carousel-inner .item {
		height: calc(29vw * .6425 );
	}

	#hikers-slider-L .carousel-inner .item {
		height: calc(29vw * .6425 );
	}

	#io-slider-L .carousel-inner .item {
		height: calc(29vw * .6425);
	}




    .slider-size {
        height: 100%;
		/*width: 27vw;*/
    }
    .slider-size > img {
        width: auto;
		height: 100%;
    }




	.dt-rooms {
		padding-bottom: 75px;
		padding-top:45px;
	}


	.dt-room-item {
		/*border: 2px solid grey;*/

	}
		
	.dt-room-container {
		/*width: 95%;*/
		padding: 10px;
		background-color: #262626;
		
		/*border: 2px solid green;*/
	}
	

	.dt-room_section {
		padding-top: 	20px;
		z-index: 		20;
		
		font-family: 	'Bad Script', cursive;
		font-size: 		2.5vw;
		letter-spacing: 1px;

		font-weight: 	300;
		text-align: 	center;
		color: 			rgb(127, 204, 86);
	}
	
	.dt-room_name {
		padding-top: 20px;
		z-index: 20;
		
		font-family: 'Bad Script', cursive;
		font-size: 2.5vw;
		letter-spacing: .5px;
		font-weight: 600;
		text-align: center;
		color: rgb(127, 204, 86);
	}
	
	.dt-room-cost {
		margin-top: 		25px;
		margin-bottom: 	25px;
		font-family: 	'Quicksand', sans-serif;
		font-size: 		1.7vw;
		font-weight: 	100;
		letter-spacing:	.5px;
		text-shadow: 	0 0 2px #200, 0 0 4px #f22, 0 0 12px #f22, 0 0 18px #f22;
		text-align: 	center;
		color: 			#fff;
	}

	.dt-room-text {
		font-family: 	'Quicksand', sans-serif;
		text-align: 	center;
		font-size: 		1.5vw;
		color: 			#c2c2c2;
	}
	






	.dt-bird-title {
margin: 0 0 0px;
color: rgb(99, 204, 81);
text-align: center;
font-size: 120%;
letter-spacing: 2px;
	}
	
	.dt-bird-say {
margin: 0 0 0px;
color: rgba(165, 165, 165, 1);
text-align: center;
font-size: 80%;
font-weight: 600;
	}
	
	.dt-bird-text {
margin: 5px 0 0 0;
color: rgb(194, 194, 194);
text-align: center;
	}


	.dt-contact-icons {
		position:relative;
		top: 7vw ;
	}

	.icon-phone:before {
		content: "\e942";
	}
	
	.dt_info_icon {
		font-size: calc(23px + 2vw);
		color: white;
		text-shadow: 0 0 2px #002, 0 0 4px #88f, 0 0 12px #88f, 0 0 24px #aaf;
	}
	
	.dt_phone_icon {
		position: relative;
		top: 1.4vw; 
		font-size: calc(18px + 2vw);
		color: white;
		text-shadow: 0 0 2px #020, 0 0 4px #8f8, 0 0 12px #8f8, 0 0 24px #afa;
	}

	.dt_email_icon {
		position: relative;
		top: 2px;
		font-size: calc(23px + 2vw);
		color: white;
		text-shadow: 0 0 2px #220, 0 0 4px #ff8, 0 0 12px #ff8, 0 0 24px #ffa;
	}



	.dt_end_of_section {
		margin-bottom: 10vw;
	}
	
	
	
	/* ===== DT common ============= BIRDS ================== */


	#birds {
  		background-color: black;
	}
	
	#birds h1 {
		color: white;
	}

	#birds h2 {
  		padding-left: 15px;
		color: #ccc;
	}
	
	#birds ul {
		padding-left: 20px;
		margin-top: 0;
		margin-bottom: 0px;
		color: #aaa;
	}
	
	#birds li {
		font-size: 1.7vh;
		letter-spacing: .5px;
	}

	
	.bird_t {
		font-weight: 800;
		color: rgb(225, 161, 91);
		font-size: 120%;
		letter-spacing: 2px;
		margin-right: 20px;
	}




/* --- birds --- */


	/* no grid support? */
/*
	.bird_wrapper {
	  display: flex;
	  flex-wrap: wrap;
	}
	
	.bird_wrapper {
		display: grid;
		margin: 0 20px;
		
		font-size: 100%;
	
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		grid-auto-rows: minmax(150px, auto);
		grid-gap: 10px;
	
	}
	
	.bird_wrapper > * {
		background-color: #444;
		border-radius: 5px;
		margin-bottom: 10px;
		padding: 20px;
	
		color: #fff;
		text-align: center;
	}
*/	


	
	
	.bird_panel {
	  /* needed for the flex layout*/
	  margin-left: 5px;
	  margin-right: 5px;
	  flex: 1 1 200px;
	}
	
	.bird_header,
	.bird_footer {
		flex: 0 1 100%;
		grid-column: 1 / -1;
	
		background-color: #444;
		margin-top: 60px;
	
		border-radius: 5px;
	
		margin-bottom: 10px;
		margin-left: 5px;
		margin-right: 5px;
		padding: 20px;
	
		font-size: 200%;
		color: #fff;
		text-align: center;
	
	}
	
	
	#bird-slider .fa-angle-down {
		bottom: 9vh;
	}


	.close_species {
		margin-left: 20px;
	}

	.close_species_row {
	
	}

	.close_species_count {
		minimum-width: 4em;
		font-weight: 600;
		text-align: center;
	}

	.close_species_text {
		font-weight: 300;
		text-align: left;
		padding-left: 15px;
	}




	#birding-text > .li {
		font-size: 100%;
		letter-spacing: .5px;
	}


	

	.view_rooms_btn {
		position: 		relative;
		z-index: 		15;
		left: 			0;
		right: 			0;
		height: 		200px;
		
		font-family: 'Quicksand', sans-serif;
		text-align: 	center;
	}

	
	


	
	
	/* ===== DT common ============= VOLCANO ================== */


		
	.v-buttons {
		width: 55vw;
		margin: auto
	}
	
	

	
	
	
	
	
	/* ===== DT common ============= WEATHER ================== */


	
	#weather {
  		background-color: white;
	}
	
	#weather h2 {
  		padding-left: 15px;
	}
	
	#weather ul {
		padding-left: 20px;
		margin-top: 0;
		margin-bottom: 0px;
	}

	#weather_test {
		padding-left: 		35px;
		padding-bottom: 	35px;
	}
	
	
	
	
	
	
	/* ===== DT common ============= MAPS ================== */


	
	#area-map {
		height: 100vh;
	}
	





	/* ===== DT common ============= WEATHER ================== */

	#weather {
		padding-top: 		40px;
		padding-bottom: 	100px;
		
		padding-left: 		65px;
	}





	/* ===== DT common ============= POLICIES ================== */

	#policies {
		padding-top: 		40px;
		padding-bottom: 	100px;
	}

	#policies h2 {
		color: #d1d1d1;
	}

	#policies li {
		color: #a9be76;
		letter-spacing: .5px;
		margin-bottom: 5px;
		margin-top: 20px;
	}






	/* ===== DT common ============= CONTACT US ================== */

	#contact-us {
		height: 100vh;
	}

	#contact .caption h1 {
		font-size: 3.5vw;
		font-weight: 200;
		padding-top: 3vh;
	}

	.cu-container {
		width: 90%;
		margin: auto;
	}
	
	
	.form-control {
		background-color: rgba(0, 0, 0, 0.38);
		border-color: rgba(200, 255, 200, 0.55);
		height: 50px;
		
		border-radius: 0;
		box-shadow: none;
	}
	
	.cu-room-container {
		display: grid;
		padding: 0px;
		
		margin-bottom: 0px;
		grid-gap: 10px;
		/*grid-template-rows: repeat(auto-fill, minmax(15.5vh, 1fr)) ;*/
	}

	.cu-box {
		width: 100%;
		padding: 20px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 40px);
		font-size: 140%;
		color: #fff;
	}


	.cu-room-title {
		font-family: 'Bad Script', cursive;
		font-size: 1.7vw;
		letter-spacing: 1px;
		color: rgb(127, 204, 86);
	}

	.cu-room-info {
		font-size: 1.2vw;
	}

	.cu-image {
		height: 10vw;
		float: left;
		margin-right: 0px;
	}


	.cu-box-opts {
		width: 100%;
		padding: 20px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 40px);
		color: #fff;
		margin: auto;
		text-align: left;
	}


	.io-box-opts {
		width: 60%;
		padding: 20px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 40px);
		color: #fff;
		margin: auto;
		text-align: left;
		font-size: 1.4vw;

	}


	/* - - - OPTIONS - - - */
	
	.cu-box-opts_L {
		position: relative;
		top: 10px;
		left: 2%;
	}

	.cu-box-opts_R {
		position: relative;
		top: -72px;
		left: 60%;
	}

	.cu-box-opts_SP {
		position: relative;
		top: -52px;
		left: 2%;
	}



	#contact-us .look-buttons {
		background-color: 	rgba(16, 116, 174, 0.42);
	}

	#contact-us .fit-buttons {
		grid-template-columns: repeat(auto-fit, minmax(28%, 1fr));
		grid-gap: 1vw;
	}	



}
/* --------- end of  Desktop   COMMON   ----------- */









/* ------------- DESKTOP ---------------- */
/* ---                                --- */
/* ---             WIDE               --- */
/* ---                                --- */
/* -------------------------------------- */

@media (min-width: 1340px)  {
	#media_ID::after { content: "WIDE : > 1340"; }
		
	
	
		
	.mobile  { display:none;  }
	.desktop { display:inline; }
	


	.fit {
		grid-template-columns: repeat(auto-fit, minmax(339px, 1fr));
		grid-gap: 3vw;
	}



	.dt-room_name {
		font-size: 		1.6vw;
	}
	
	.dt-room-cost {
		font-size: 		1.2vw;
	}

	.dt-room-text {
		font-size: 		 .9vw;
		letter-spacing:	 .6px;
		line-height: 	1.6vw;
	}
	
	.dt-bird-text {
		font-size: 		1.0vw;
	}





	/* ====== DT WIDE ===== BIRDS ===== */
	
	
	#bird-slider .caption h1 {
		font-size: 5vw;
	}
	
	#bird-slider .caption h1 span {
		font-size: 5vw;
		color: rgb(127, 204, 86);
	}
	
	
	#birds li {
		font-size: 		15px;
		letter-spacing: .5px;
	}

	#birds h1 {
		font-size: 24px;
	}
	
	.bird_header, .bird_footer {
		font-size: 150%;
	}







	/* ====== DT WIDE ===== CONTACT US ===== */

	.dt-room-text{
		font-size: 1.2vw;
		letter-spacing: .6px;
		line-height: 1.6vw;
	}


	.cu-room-container {
		display: grid;
		padding: 0px;
		
		margin-bottom: 0px;
		grid-gap: 10px;
		/*grid-template-rows: repeat(auto-fill, minmax(15.5vh, 1fr)) ;*/
	}

	.cu-box {
		width: 100%;
		padding: 20px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 40px);
		font-size: 140%;
		color: #fff;
	}


	.cu-room-title {
		font-family: 'Bad Script', cursive;
		font-size: 2.2vw;
		text-align: center;
		margin-bottom: 15px;
		letter-spacing: 1px;
		color: rgb(127, 204, 86);
	}


	.cu-room-descr {
		font-size: 1.9vw;
		font-family: 'Bad Script', cursive;
		letter-spacing: 1px;
		text-align: center;
		font-weight: 100;
		color: #ededed;
		line-height: 1em;
	}
	
	.cu-room-descr ul {
		margin: auto;
		text-align: left;
		font-size: 50%;
	}







	.cu-room-info {
		font-size: 1.2vw;
	}

	.cu-image {
		height: 10vw;
		float: left;
		margin-right: 0px;
	}


	.cu-box-opts {
		width: 100%;
		padding: 20px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 40px);
		color: #fff;
		margin: auto;
		text-align: left;
		font-size: 1.4vw;

	}

	.io-box-opts {
		width: 60%;
		padding: 20px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 40px);
		color: #fff;
		margin: auto;
		text-align: left;
		font-size: 1.1vw;
		line-height: 2.1em;
	}






	.form-control {
		border-color: rgba(200, 255, 200, 0.62);
	}
	
	#contact .caption h1 {
		font-size: 4.7vw;
	}
	





}
/* --------- end of  Desktop WIDE ----------- */












/* ------------- DESKTOP ---------------- */
/* ---                                --- */
/* ---            LARGE               --- */
/* ---                                --- */
/* -------------------------------------- */

@media (min-width: 1200px) and (max-width: 1339px) {
	#media_ID::after { content: "LARGE : 1200 - 1339"; }
		
	
	
		
	.mobile  { display:none;  }
	.desktop { display:inline; }
	

	
	.dt-room_name {
		font-size: 2.2vw;
	}
	
	.dt-room-cost {
		font-size: 		1.5vw;
	}

	.dt-room-text {
		font-size: 		1.2vw;
	}



	#guesthouse-slider-L .carousel-inner .item {
		height: calc(45vw * .6425 );
	}

	#hikers-slider-L .carousel-inner .item {
		height: calc(45vw * .6425 );
	}

	#io-slider-L .carousel-inner .item {
		height: calc(45vw * .6425 );
	}


	#birds li {
		font-size: 15px;
		letter-spacing: .5px;
	}

	#birds h1 {
		font-size: 28px;
	}
	
	.bird_header, .bird_footer {
		font-size: 160%;
	}






	.cu-box-opts {
		width: 60%;
		padding: 20px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 40px);
		color: #fff;
		margin: auto;
		text-align: left;
		font-size: 1.4vw;

	}




}
/* --------- end of  Desktop large ----------- */












/* ------------- DESKTOP ---------------- */
/* ---                                --- */
/* ---           MEDIUM               --- */
/* ---                                --- */
/* -------------------------------------- */


@media (min-width: 992px) and (max-width: 1199px) {

	#media_ID::after { content: "MEDIUM : 992 - 1199"; }
		
	.mobile  { display:none;  }
	.desktop { display:inline; }
	

	#hikers-slider .carousel-inner {
		/* image scroll fix ('coz inner was set by home slider) */
		/*height: calc(100vw * .6425) ;*/
		height: calc(100vw * .33) ;
	}



	#guesthouse-slider-L .carousel-inner .item {
		height: calc(45vw * .6425 );
	}

	#hikers-slider-L .carousel-inner .item {
		height: calc(45vw * .6425 );
	}

	#io-slider-L .carousel-inner .item {
		height: calc(45vw * .6425 );
	}






	/* ====== DT MEDIUM ===== BIRDS ===== */
	
	
	#bird-slider .caption h1 {
		font-size: 5vw;
	}
	
	#bird-slider .caption h1 span {
		font-size: 5vw;
		color: rgb(127, 204, 86);
	}
	
	
	#birds li {
		font-size: 		15px;
		letter-spacing: .5px;
	}

	#birds h1 {
		font-size: 24px;
	}
	
	.bird_header, .bird_footer {
		font-size: 150%;
	}




	/* ====== DT MEDIUM ===== CONTACT ===== */
	
	#contact .caption h1 {
		font-size: 3.9vw;
		font-weight: 200;
	}

	#contact .caption h2 {
		font-size: 2.4vw;
		font-weight: 100;
		color: #ededed;
	}
	#contact .caption p {
		color: #ededed;
	}
	
	.cu-room-title {
		font-size: 2.2vw;
		text-align: center;
		margin-bottom: 25px;
	}

	.cu-room-descr {
		font-size: 1.9vw;
		font-family: 'Bad Script', cursive;
		letter-spacing: 1px;
		text-align: center;
		font-weight: 100;
		color: #ededed;
	}
	
	.cu-room-descr ul {
		margin: auto;
		text-align: left;
		font-size: 50%;
	}


	.cu-box-opts {
		width: 100%;
		padding: 20px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 40px);
		color: #fff;
		margin: auto;
		text-align: left;
		font-size: 1.4vw;

	}


	.io-box-opts {
		width: 60%;
		padding: 20px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 40px);
		color: #fff;
		margin: auto;
		text-align: left;
		font-size: 1.4vw;

	}



	.col-sm-8 {
		padding-left: 5px;
	}

	.col-sm-4 {
		padding-left: 5px;
	}




	/* - - - OPTIONS - - - */
	
	.cu-box-opts_L {
		position: relative;
		top: 0px;
		left: 2%;
	}

	.cu-box-opts_R {
		position: relative;
		top: -82px;
		left: 60%;
	}

	.cu-box-opts_SP {
		position: relative;
		top: -72px;
		left: 2%;
	}






}
/* --------- end of  Desktop medium ----------- */












/* ------------- DESKTOP ---------------- */
/* ---                                --- */
/* ---       SMALL LANDSCAPE          --- */
/* ---                                --- */
/* -------------------------------------- */

/*
@media (min-width: 580px) and (max-width: 991px)  and (orientation: landscape) {


	#media_ID::after { content: "SMALL LANDSCAPE : 580 - 991"; }


	.mobile  { display:none;  }
	.desktop { display:inline; }



	body {
		font-size: 14px;
	}
	
	
	
	#home-slider  {
		top: 0px;
	}
	
	#home-slider .caption {
		bottom:  12vh;
	}
	
	#home-slider .caption h1 {
		font-size: 7vh;
	}
	
	#home-slider .caption p {
		position: relative;
		bottom: 2vh;
		font-size: 1.5vw;
	}
	
	.left-control, .right-control {
		font-size: 20px;
		height: 30px;
		line-height: 25px;
		width: 30px;
	}
	
	#home-slider:hover .right-control {
		right: 15px;
	}
	
	#home-slider:hover .left-control {
		left: 15px;
	}
	
	
	#home-slider .fa-angle-down  {
		bottom: 10px;
		left:  calc(50% + .1em);
	}
	
	
	

	.caption .btn-start {
		position: relative;
		bottom: calc(  -2vh );
		margin-top: 0px;
		font-size: 13px;
		padding: 10px 30px;
	}
	
	.btn_volcano {
		top: 2vh;
	}
	
	
	.btn_CU_fix {
position: relative ;
bottom: .5vh;
	}

	.fit {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		grid-gap: 7vw;
	}

}
*/
/* --------- end of  Desktop small landscape ----------- */







/* ------------- DESKTOP ---------------- */
/* ---                                --- */
/* ---       SMALL PORTRAIT           --- */
/* ---                                --- */
/* -------------------------------------- */


/* @media (min-width: 770px) and (max-width: 991px)  and (orientation: portrait) { */

@media (min-width: 770px) and (max-width: 991px)  {

	
	#media_ID::after { content: "SMALL PORTRAIT : 580-991 "; }
		

	.mobile  { display:none;  }
	.desktop { display:inline; }

	


	body {
		font-size: 14px;
	}
	
	#home-slider  {
		top: 0px;
	}
	
	#home-slider .caption {
		bottom:  27vh;
	}
	
	#home-slider .caption h1 {
		/*font-size: 5.5vh;*/
		font-size: 6vw;
	}
	
	#home-slider .caption p {
		position: relative;
		bottom: .6vw;
		/*font-size: 2.7vh;*/
		font-size: 2vw;
	}
	
	
	#home-slider:hover .right-control {
		right: 15px;
	}
	
	#home-slider:hover .left-control {
		left: 15px;
	}
	
	#home-slider .fa-angle-down  {
		bottom: 20vh;
		left:  calc(50% + .1em);
	}


	.caption .btn-start {
		position: relative;
		bottom: calc(  -2vh );
		margin-top: 0px;
		font-size: 13px;
		padding: 10px 30px;
	}
	
	.btn_volcano {
		top: 2vh;
	}


	/* ===== DT small portrait ============= ROOMS ================== */

	.fit {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		grid-gap: 7vw;
	}

	#hikers-slider .carousel-inner {
		/* image scroll fix ('coz inner was set by home slider) */
		/*height: calc(100vw * .6425) ;*/
		height: calc(100vw * .33) ;
	}



	#guesthouse-slider-L .carousel-inner .item {
		height: calc(45vw * .6425 );
	}

	#hikers-slider-L .carousel-inner .item {
		height: calc(45vw * .6425 );
	}

	#io-slider-L .carousel-inner .item {
		height: calc(45vw * .6425 );
	}









	/* ===== DT small portrait ============= BIRDS ================== */

	#bird-slider .caption h1 {
		font-size: 5vw;
		font-weight: 700;
	}
	
	
	#birds  li {
		font-size: 1.6vw;
		letter-spacing: .6px;
	}

	.bird_header, .bird_footer {
		font-size: 2.1vw;
	}
	
	#birds h1 {
		font-size: 2.5vw;
	}
	
	
	
	
	#vnp-title {
		font-size: 3.9vw;
	}
	
	
	#vv-title {
		font-size: 4.0vw;
	}
	
	
	
	
	/* ===== DT small portrait ============= CONTACT US ================== */


	.dt-room_name {
		padding-top: 20px;
		z-index: 20;
		
		font-family: 'Bad Script', cursive;
		font-size: 2.5vw;
		letter-spacing: .5px;
		font-weight: 600;
		text-align: center;
		color: rgb(127, 204, 86);
	}
	
	.dt-room-cost {
		margin-top: 		25px;
		margin-bottom: 	25px;
		font-family: 	'Quicksand', sans-serif;
		font-size: 		1.7vw;
		font-weight: 	100;
		letter-spacing:	.5px;
		text-shadow: 	0 0 2px #200, 0 0 4px #f22, 0 0 12px #f22, 0 0 18px #f22;
		text-align: 	center;
		color: 			#fff;
	}


	.dt-room-text {
		font-family: 	'Quicksand', sans-serif;
		text-align: 	center;
		font-size: 		2.0vw;
		color: 			#c2c2c2;
		width: 			80%;
		margin:			auto;
	}



	#contact .caption h1 {
		font-size: 3.9vw;
		font-weight: 200;
	}

	#contact .caption h2 {
		font-size: 2.4vw;
		font-weight: 100;
		color: #ededed;
	}
	#contact .caption p {
		color: #ededed;
	}
	
	
	




	.cu-room-container {
		display: grid;
		padding: 0px;
		
		margin-bottom: 0px;
		grid-gap: 10px;
		/*grid-template-rows: repeat(auto-fill, minmax(15.5vh, 1fr)) ;*/
	}

	.cu-box {
		width: 100%;
		padding: 20px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 40px);
		font-size: 140%;
		color: #fff;
	}


	.cu-room-title {
		font-family: 'Bad Script', cursive;
		font-size: 2.2vw;
		text-align: center;
		margin-bottom: 15px;
		letter-spacing: 1px;
		color: rgb(127, 204, 86);
	}


	.cu-room-descr {
		font-size: 1.9vw;
		font-family: 'Bad Script', cursive;
		letter-spacing: 1px;
		text-align: center;
		font-weight: 100;
		color: #ededed;
		line-height: 1em;
	}
	
	.cu-room-descr ul {
		margin: auto;
		text-align: left;
		font-size: 50%;
	}







	.cu-room-info {
		font-size: 1.2vw;
	}

	.cu-image {
		height: 10vw;
		float: left;
		margin-right: 0px;
	}


	.cu-box-opts {
		width: 100%;
		padding: 20px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 40px);
		color: #fff;
		margin: auto;
		text-align: left;
		font-size: 1.4vw;

	}


	.io-box-opts {
		width: 90%;
		padding: 20px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 55px);
		color: #fff;
		margin: auto;
		text-align: left;
		font-size: 1.6vw;
	}




	/* - - - OPTIONS - - - */
	
	.cu-box-opts_L {
		position: relative;
		top: -10px;
		left: 2%;
	}

	.cu-box-opts_R {
		position: relative;
		top: -92px;
		left: 60%;
	}

	.cu-box-opts_SP {
		position: relative;
		top: -92px;
		left: 2%;
	}











	.form-control {
		border-color: rgba(200, 255, 200, 0.62);
	}
	
	#contact .caption h1 {
		font-size: 4.7vw;
	}
	
		
}

/* --------- end of  Desktop small portrait ----------- */





















/* ------------- DESKTOP ---------------- */
/* ---                                --- */
/* ---       TINY PORTRAIT           --- */
/* ---                                --- */
/* -------------------------------------- */


/* @media (min-width: 580px) and (max-width: 769px)  and (orientation: portrait) { */

@media (min-width: 580px) and (max-width: 769px)  {

	
	#media_ID::after { content: "TINY PORTRAIT : 580-769 "; }
		

	.mobile  { display:none;  }
	.desktop { display:inline; }

	


	body {
		font-size: 14px;
	}
	
	#home-slider  {
		top: 0px;
	}
	
	#home-slider .caption {
		bottom:  27vh;
	}
	
	#home-slider .caption h1 {
		/*font-size: 5.5vh;*/
		font-size: 6vw;
	}
	
	#home-slider .caption p {
		position: relative;
		bottom: .6vw;
		/*font-size: 2.7vh;*/
		font-size: 2vw;
	}
	
	
	#home-slider:hover .right-control {
		right: 15px;
	}
	
	#home-slider:hover .left-control {
		left: 15px;
	}
	
	#home-slider .fa-angle-down  {
		bottom: 20vh;
		left:  calc(50% + .1em);
	}


	.caption .btn-start {
		position: relative;
		bottom: calc(  -2vh );
		margin-top: 0px;
		font-size: 13px;
		padding: 10px 30px;
	}
	
	.btn_volcano {
		top: 2vh;
	}


	/* ===== DT small portrait ============= ROOMS ================== */

	.fit {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		grid-gap: 7vw;
	}

	#hikers-slider .carousel-inner {
		/* image scroll fix ('coz inner was set by home slider) */
		/*height: calc(100vw * .6425) ;*/
		height: calc(100vw * .33) ;
	}



	#guesthouse-slider-L .carousel-inner .item {
		height: calc(45vw * .6425 );
	}

	#hikers-slider-L .carousel-inner .item {
		height: calc(45vw * .6425 );
	}

	#io-slider-L .carousel-inner .item {
		height: calc(45vw * .6425 );
	}









	/* ===== DT small portrait ============= BIRDS ================== */

	#bird-slider .caption h1 {
		font-size: 5vw;
		font-weight: 700;
	}
	
	
	#birds  li {
		font-size: 1.6vw;
		letter-spacing: .6px;
	}

	.bird_header, .bird_footer {
		font-size: 2.1vw;
	}
	
	#birds h1 {
		font-size: 2.5vw;
	}
	
	
	
	
	#vnp-title {
		font-size: 3.9vw;
	}
	
	
	#vv-title {
		font-size: 4.0vw;
	}
	
	
	
	
	/* ===== DT small portrait ============= CONTACT US ================== */


	.dt-room_name {
		padding-top: 20px;
		z-index: 20;
		
		font-family: 'Bad Script', cursive;
		font-size: 2.8vw;
		letter-spacing: .5px;
		font-weight: 600;
		text-align: center;
		color: rgb(127, 204, 86);
	}
	
	.dt-room-cost {
		margin-top: 		25px;
		margin-bottom: 	25px;
		font-family: 	'Quicksand', sans-serif;
		font-size: 		2vw;
		font-weight: 	100;
		letter-spacing:	.5px;
		text-shadow: 	0 0 2px #200, 0 0 4px #f22, 0 0 12px #f22, 0 0 18px #f22;
		text-align: 	center;
		color: 			#fff;
	}


	.dt-room-text {
		font-family: 	'Quicksand', sans-serif;
		text-align: 	center;
		font-size: 		2.2vw;
		color: 			#c2c2c2;
		width: 			90%;
		margin:			auto;
	}







	#contact .caption h1 {
		font-size: 3.9vw;
		font-weight: 200;
	}

	#contact .caption h2 {
		font-size: 2.4vw;
		font-weight: 100;
		color: #ededed;
	}
	#contact .caption p {
		color: #ededed;
	}
	
	
	




	.cu-room-container {
		display: grid;
		padding: 0px;
		
		margin-bottom: 0px;
		grid-gap: 10px;
		/*grid-template-rows: repeat(auto-fill, minmax(15.5vh, 1fr)) ;*/
	}

	.cu-box {
		width: 100%;
		padding: 20px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 40px);
		font-size: 140%;
		color: #fff;
	}


	.cu-room-title {
		font-family: 'Bad Script', cursive;
		font-size: 0.95em;
		text-align: center;
		margin-bottom: 15px;
		letter-spacing: 1px;
		color: rgb(127, 204, 86);
	}


	.cu-room-descr {
		font-size: 0.75em;
		font-family: 'Bad Script', cursive;
		letter-spacing: 1px;
		text-align: center;
		font-weight: 100;
		color: #ededed;
		line-height: 1em;
	}
	
	.cu-room-descr ul {
		margin: auto;
		text-align: left;
		font-size: 50%;
	}







	.cu-room-info {
		font-size: 1.2vw;
	}

	.cu-image {
		height: 10vw;
		float: left;
		margin-right: 0px;
	}


	.io-box-opts {
		width: 100%;
		padding: 10px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 40px);
		color: #fff;
		margin: auto;
		text-align: left;
		font-size: 1.8vw;

	}


	.col-sm-8 {
width: calc(100% * .6);
padding-left: 5px;
	}

	.col-sm-4 {
width: calc(100% * .3);
padding-left: 5px;
	}




	/* - - - OPTIONS - - - */
	

	.cu-box-opts {
		width: 100%;
		padding: 20px;
		background-color: rgba(94, 94, 94, 0.91);
		height: calc(10vw + 40px);
		color: #fff;
		margin: auto;
		text-align: left;
		font-size: 1.9vw;

	}
	
	.cu-box-opts_L {
		position: relative;
		top: -15px;
		left: 2%;
	}

	.cu-box-opts_R {
		position: relative;
		top: -97px;
		left: 60%;
	}

	.cu-box-opts_SP {
		position: relative;
		top: -102px;
		left: 2%;
	}









	.form-control {
		border-color: rgba(200, 255, 200, 0.62);
	}
	
	#contact .caption h1 {
		font-size: 4.7vw;
	}
	
		
}

/* --------- end of  Desktop tiny portrait ----------- */























/* =============================== SMALL MOBILE DEVICES (phones) ============================= */


/*
	NOTE:	IOS always reports min/max-device-width as if in portrait mode, 
			while most all other devices reports differently depending on 
			orientation.
	
	NOTE:	our site just won't work on small screen landscape mode with 
			safari's overlay bars occasionally appearing, so we're going 
			to just pop up a message in landscape mode on these devices
			asking to rotate to portrait.  
			
	NOTE:	min/max-width 			is of displayable area INSIDE browser window
			min-max-device-width 	is the display area of the device's screen.
			both MAY vary with orientation depending on user's OS.

*/




/* ----------------------------- */
/* ---                       --- */
/* ---    MOBILE landscape   --- */
/* ---                       --- */
/* ----------------------------- */


@media only screen and (orientation: landscape) and (max-height: 580px) {

	#media_ID::after { content: "iphone landscape"; }


	.mobile  { display:none;  }
	.desktop { display:none; }



	/*  
		our site just won't work on small screen landscape mode with 
		safari's overlay bars occasionally appearing, so we're going 
		to just pop up a message in landscape mode on these devices
		asking to rotate to portrait. 
	*/		
			
	#landscape_small_warning {
		display: block;
		font-size: 5em;
	}
	
	#lsw_phone_icon {
		display: block;
	}
		
	#lsw_rotate_icon {
		display: block;
	}
	
	#lsw_smile_icon {
		display: block;
	}
}  
/* --------- end of  MOBILE landscape ----------- */








/* ---------------------------- */
/* ---                      --- */
/* ---    MOBILE portrait   --- */
/* ---                      --- */
/* ---------------------------- */

@media only screen and (orientation: portrait) and (max-width: 580px) { 

	/* === test goodies === */

	#media_ID::after { content: "iphone portrait"; color: white;}



	.mobile  { display:block;  }
	.desktop { display:none; }


	/* ios safari shrinks top on upward scroll... WTF */
	#rooms_tall {
		padding: 19px 0;
	}
	
	#landscape_small_warning {
		display: none;;
	}
	
	#lsw_phone_icon {
		display: none;
	}
		
	#lsw_rotate_icon {
		display: none;
	}
	
	#lsw_smile_icon {
		display: none;
	}


	.showme { outline: 1px dotted yellow; }
	.showmeR { outline: 1px dotted red; }
	.showmeG { outline: 1px dotted green; }
	.showmeB { outline: 1px dotted blue; }
	.showmeC { outline: 1px dotted cyan; }


	
/*--->  do we need these ? should they move to main? will removing break #xxx .caption stuff ?  <------ */

	.caption .btn-start {
		position: relative;
		bottom: calc(  2.5vh - 5vw);
		margin-top: 0px;
		font-size: 13px;
		padding: 10px 30px;
	}
	
	


	/* === MOBILE portrait === basic ===== */

	body    {
        font: 12px/20px "Helvetica neue", Helvetica, Arial, sans-serif;
        font-weight: normal;
        overflow: hidden;
        overflow-y: auto;
    	overflow-x: hidden;
		background: black;
        }

	body {
		font-size: 14px;
	}
	

		
	hr.style8 {
		border-top: 1px solid #8c8b8b;
		border-bottom: 1px solid #fff;
	}
	hr.style8:after {
		content: '';
		display: block;
		margin-top: 2px;
		border-top: 1px solid #8c8b8b;
		border-bottom: 1px solid #fff;
	}



		
	#mobile  { display:block; }
	#desktop { display:none; }
	
	.mobile h2 {
		padding: 		0px 0px;
		margin-top:  	0px;
		margin-bottom:  0px;
		font-family: 'Bad Script', cursive;
		color: rgb(127, 204, 86);
	}

	#mobile .heading {
		padding-bottom:	15px;
		padding-top:	10px;
	}

	section#rooms {
		margin-top:  	 0px;
		padding-top:  	10px;
		padding-bottom:	 0px;
		background-color: black;
	}
	
	.carousel-fade .carousel-inner .item {
		height: 65vw;
	}
	
	
	
	#contact-us .look-buttons {
		background-color: 	rgba(16, 116, 174, 0.42);
	}

	.look-buttons {
		padding: 			14px 0px;

		color: 				rgb(159, 255, 108);
		font-size: 			14px;
		letter-spacing: 	2px;
		font-weight: 		600;
		text-align: 		center;
		
		border: 			1px solid #6e6d6c;
		border-radius: 		4px;
		background-color: 	transparent;
	}


	.button-container {
		width: 60%;
		margin: auto;
	}
	
	.wrapper-buttons {
		display: grid;
		padding-top: 17px;
	}

	.fit-buttons {
		grid-template-columns: repeat(auto-fit, minmax(28%, 1fr));
		grid-gap: 2vw;
	}	

	/* ------ MOBILE portrait --------------    H O M E    -------------------- */


	#home-slider  {
		top: 0px;
	}
	
	#home-slider .caption {
		bottom: 19vh;
		height: 20vh;
	}
	
	
	#home-slider .caption h1 {
		font-size: 9.8vw;
		margin-top: 0px;
		margin-bottom: 5vh;	
	}
	
	#home-slider .caption p {
		position: relative;
		bottom: 2vw;
		font-size: 4vw;
		padding-bottom: 1.8vh;
	}
	
	#home-slider:hover .right-control {
		right: 15px;
	}
	
	#home-slider:hover .left-control {
		left: 15px;
	}
	

	/*  bouncing down arrow  */
	
	#home-slider .fa-angle-down  {
		bottom: 2vh;
		left:  calc(50% + .1em);
	}
	
	
	#home-buttons {
		position: relative;
		top: -15px;
	}
	
	
	
	
	

	/* ------- MOBILE portrait -------------    R O O M S    -------------------- */
	
	.dt-rooms .col-sm-4 {
		margin-bottom: 35px;
	}

		
	
	#guesthouse-slider {
	    max-width: 100% !important;
        overflow-x: hidden !important;
		width: 100vh;
		/* images saved 800 x 514, 50k max */
		height: calc(100vw * .6425) ; 
	}
	
	#guesthouse-slider .carousel-inner {
		/* image scroll fix ('coz inner was set by home slider) */
		height: calc(100vw * .6425) ;
	}

	#guesthouse-slider .carousel-fade .carousel-inner .item:after {
		content: " ";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		
		background: rgba(0,0,0,.5); 
		background: -webkit-linear-gradient(transparent, rgba(0,0,0,.7)); 
		background: -o-linear-gradient(transparent, rgba(0,0,0,.7)); 
		background: -moz-linear-gradient(transparent, rgba(0,0,0,.7)); 
		background: linear-gradient(transparent, transparent, rgba(0,0,0,.7), rgba(0,0,0,.9)); 
	}

	
	
	
	#hikers-slider {
	    max-width: 100% !important;
        overflow-x: hidden !important;
		width: 100vh;
		/* images saved 800 x 514, 50k max */
		height: calc(100vw * .6425) ; 
	}
	
	
	
	
	#hikers-slider .carousel-inner {
		/* image scroll fix ('coz inner was set by home slider) */
		height: calc(100vw * .6425) ;
	}
	


	
	
	
	/* rentals + guestshouse */
	
	.m-contact-icons .row {
		margin-right: 0px !important;
		margin-left:  0px !important;
	}

	.m_info_offset {
		position: relative;
		padding-bottom: 15px;
	}
	
	.m_name {
		position: relative;
		top: 5vw;
		font-family: 'Bad Script', cursive;
		text-align: center;
		z-index: 20;
		font-size: calc( 15px + 2.5vw);
		font-weight: 400;
		color: rgb(127, 204, 86);
		}
	
	.m-descr {
		position: relative;
		top: 6.6vw ;
		font-family: 'Quicksand', sans-serif;
		text-align: center;
		z-index: 10;
		font-size: 3.8vw;
		font-weight: 100;
		color: #fff;
		text-shadow: 0 0 2px #200, 0 0 4px #f22, 0 0 12px #f22, 0 0 18px #f22;
		color: #fff;
	}
	
	
	
	
	
	
	
	

	/* ------- MOBILE portrait -------------    B I R D S    -------------------- */
	
	
	
	section#birds {
		padding: 0;
	}

		
	#bird-slider  {
		top: 0px;
		height: 100vh;
	}
	
	#bird-slider .caption {
		bottom: 23vh;
		height: 20vh;
	}
	
	
	#bird-slider .caption h1 {
		font-size: 9.0vw;
		margin-top: 0px;
		margin-bottom: 5vh;	
	}
	
	#bird-slider .caption p {
		position: relative;
		bottom: 2vw;
		font-size: 4vw;
		padding-bottom: 1.8vh;
	}
	
	#bird-slider:hover .right-control {
		right: 15px;
	}
	
	#bird-slider:hover .left-control {
		left: 15px;
	}
	
	
	#bird-slider .fa-angle-down {
		bottom: 75px;
	}
	
	
	
	
	/* ----- MOBILE portrait --------- BIRDS -------------- */
	
	#birds {
  		background-color: black;
	}
	
	
	
	#birds h2 {
  		padding-left: 15px;
		color: #ccc;
	}
	
	#birds ul {
		padding-left: 20px;
		margin-top: 0;
		margin-bottom: 0px;
		color: #aaa;
	}
	

	.close_species {
		margin-left: 20px;
	}

	.close_species_row {
	
	}

	.close_species_count {
			minimum-width: 4em;
			font-weight: 600;
			text-align: center;
	}

	.close_species_text {
			font-weight: 300;
			text-align: left;
			padding-left: 15px;
	}

	.view_rooms_btn {
		/* position: absolute; */
		z-index: 15;
		left: 0;
		right: 0;
		font-family: 'Quicksand', sans-serif;
		text-align: center;
		margin-bottom: 40px;
	}

	
	
	
	
	
	
	
	

	/* ------ MOBILE portrait --------------    W E A T H E R    -------------------- */
	
	
	
	#weather {
  		background-color: white;
	}
	
	#weather h2 {
  		padding-left: 15px;
	}
	
	#weather ul {
		padding-left: 20px;
		margin-top: 0;
		margin-bottom: 0px;
	}

	#weather_test {
		padding-left: 		35px;
		padding-bottom: 	35px;
	}
	
	
	
	
	
	
	
	

	/* ------- MOBILE portrait -------------    P O L I C I E S    -------------------- */
	
	
	
	#policies {
  		background-color: white;
	}
	
	#policies h2 {
  		padding-left: 15px;
	}
	
	#policies ul {
		padding-left: 20px;
		margin-top: 0;
		margin-bottom: 0px;
	}
	
	
	
	
	
	
	
	

	/* ------- MOBILE portrait -------------    C O N T A C T    -------------------- */
	
	.cu-room-container {
		display: none;
	}
	
	
	.m-contact-icons {
		position:relative;
		top: 7vw ;
	}

	.icon-phone:before {
		content: "\e942";
	}
	
	.m_info_icon {
		font-size: calc(23px + 2vw);
		color: white;
		text-shadow: 0 0 2px #002, 0 0 4px #88f, 0 0 12px #88f, 0 0 24px #aaf;
	}
	
	.m_phone_icon {
		position: relative;
		top: 1.4vw; 
		font-size: calc(18px + 2vw);
		color: white;
		text-shadow: 0 0 2px #020, 0 0 4px #8f8, 0 0 12px #8f8, 0 0 24px #afa;
	}

	.m_email_icon {
		position: relative;
		top: 2px;
		font-size: calc(23px + 2vw);
		color: white;
		text-shadow: 0 0 2px #220, 0 0 4px #ff8, 0 0 12px #ff8, 0 0 24px #ffa;
	}

	.m_more {
		position: relative;
		margin-top: 7vw;
		margin-bottom: 45px;
		text-align: center;
	}
	
	.m_last_room {
		height: 100px;
	}





	#contact {
	padding-top: 45px;
	padding-bottom: 0;
	padding-left: 10px;
	padding-right: 10px;
	}
		
	#contact-us {
		background-image:url(../4_images/contact_800.jpg);
		height: 100vh; 
		padding-bottom 0px;
	}
	
	#contact-us .heading {
		padding-top: 35px;
	}
	.contact-info {
		padding-left: 0;
	}
	
	
	#contact .caption {
		height: 23vh;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	
	#contact .caption h1 {
margin-top: 0px;
margin-bottom: 0px;
font-size: 5vw;
font-weight: 100;
line-height: 2;
padding-top: 1.5vh;
	}
	
	#contact .caption h2 {
font-family: 'Open Sans', sans-serif;
font-size: 4vw;
line-height: 1;
margin-top: .5vh;
margin-bottom: 0px;
	}
	
	#contact .caption p {
position: relative;
bottom: 0vh;
margin-top: 3vh;
margin-bottom: 0px;
font-family: 'Open Sans', sans-serif;
font-size: 2.9vw;
line-height: 1;
	}
	
	
	
	
	textarea.form-control {
		min-height: 20vh;
		resize:none;
	}


	.form-group {
		margin-bottom: 12px;
		
	}

	.form-control {
		height: 8vh;
		/* -- NOTE: if less than 10px, ios will ZOOM IN for typing, but will not zoom back out ! -- */
		font-size: 16px;
		
		background-color: rgba(3, 8, 4, 0.57);
		border-color: rgba(200, 255, 200, .3);
	}
	
	
	.btn-submit {
		background-color: rgb(110, 177, 75);
		width: 80%;
		border-color: 		rgba(200, 255, 200, .3);

margin: auto;
margin-top: 20px;

	}
	
	

	
	
	
	

	/* ------- MOBILE portrait -------------    M O D A L   (room info)    -------------------- */
	
	
	


	/* --- modal look and V alignment fix --- */
	

	/* -- vertical center fix -- */
	
	.modal {
	  text-align: center;
	  padding: 0!important;
	}
	
	.modal:before {
	  content: '';
	  display: inline-block;
	  height: 100%;
	  vertical-align: middle;
	  margin-right: -4px; /* Adjusts for spacing */
	}
	
	.modal-dialog {
	  display: inline-block;
	  text-align: left;
	  vertical-align: middle;
	}




	/* --- MOBILE portrait ---- modal look and feel --- */

	.modal-content {
		background-color: rgba(136, 188, 147, 0.93);	}
	}
	
	.modal-title {
		font-family: 'Bad Script', cursive;
		font-weight: 800;
		color: white;
		text-align:center;
		letter-spacing: 2px;
	}
	
	.modal-body {
		font-family: 'Open Sans', sans-serif;
		color: white;
		text-align:justify;
		font-weight: 600;
		font-size: 90%;
	}
	
	.modal_close {
		position: relative;
		top:-10px;
		font-size: 28px;
	}
	
	.modal-body-bottom {
		margin: 0 0 0px;
	}


	.modal-bird-title {
		margin: 0 0 0px;
		color: rgb(144, 3, 15);
		text-align: center;
		font-size: 120%;
		letter-spacing: 2px;
	}
	
	.modal-bird-say {
		margin: 0 0 0px;
		color: rgba(0, 0, 0, 0.72);
		text-align: center;
		font-size: 90%;
	}
	
	.modal-bird-text {
		margin: 5px 0 0 0;
		color: white;
		text-align:left;
	}
	

	
	
	
	
	
	
	
	

	/* ------ MOBILE portrait --------------    N A V   B A R    -------------------- */
	
	
	
	
	.navbar-brand {
		padding: 0 15px 15px;
	}
	.navbar-toggle {
	  border:1px solid #fff;
	}

	.navbar-toggle .icon-bar {
	  background-color: #fff;
	}
	.navbar-right li a {
		font-size: 13px;
		padding-bottom: 8px;
		padding-top: 10px;
	}




	
	
	
	
	
	
	
	

	/* ------- MOBILE portrait -------------    S E R V I C E S ??    -------------------- */
	
	
	
	
	section {
		/* padding: 45px 0; */
	}
	
	
	.heading {
		font-size: 14px;
		padding-bottom: 45px;
	}
	.heading h2 {
		font-size: 26px;
	}
	.service-info h3 {
		font-size: 20px;
	}
	.our-services .col-sm-4 {
		margin-bottom: 32px;
		padding-bottom: 20px;
	}
	.our-services .col-sm-4:nth-child(4), 
	.our-services .col-sm-4:nth-child(5), 
	.our-services .col-sm-4:nth-child(6) {
		padding-top: 0;
	}
	.service-icon {
		font-size: 30px;
		height: 65px;
		line-height: 62px;
		width: 65px;
	}
	.our-services .col-sm-4:hover .service-icon:before {
		height: 90px;
		width: 90px;
	}
	.about-info {
		text-align: center;
		margin-bottom: 50px;
	}
	.team-member {
		margin-bottom: 50px;
	}
	.team-members .col-sm-3, 
	.pricing-table .col-sm-3, 
	#portfolio .col-sm-3, 
	.blog-posts .col-sm-4  {
		width: 50%;
		float: left;
	}
	.social-icons ul li a {
		font-size: 14px;
		height: 30px;
		line-height: 30px;
		width: 30px;
	}	
	.count .col-xs-6 {
		margin-bottom: 35px;
	}
	#features {
		min-height: 330px;
	}
	#features i {
		font-size: 35px;
	}
	#features h3 {
		font-size: 25px;
	}
	.price span {
		font-size: 50px;
		margin-top: 25px;
	}
	.price {
		font-size: 18px;
		height: 110px;
		line-height: 35px;
		width: 130px;
	}
	.single-table ul {
		margin-top: 22px;
	}
	.single-table ul li {
		font-size: 14px;
		margin-top: 15px;
	}
	.btn-signup {
		font-size: 12px;
		margin-top: 25px;
		padding: 10px 35px;
	}
	.single-table{
		margin-bottom: 40px;
		padding: 20px;
	}
	#twitter {
		padding-bottom: 75px;
	}
	.twitter-left-control, 
	.twitter-right-control {
		top: inherit;
		bottom: 30px;
		height: 25px;
		width: 25px;
		line-height: 23px;
		font-size: 14px;
	}
	.twitter-left-control {
		left: 40%
	} 
	.twitter-right-control {
		right: 40%
	}
	#blog {
		overflow: hidden;
	}
	.entry-header h2 {
		line-height: 20px;
	}
	.blog-posts .col-sm-4 {
		margin-bottom: 35px;
	}
	.load-more {
		margin-top: 35px;
	}
	.btn-loadmore {
		font-size: 12px;
		padding: 15px 75px;
	}
	
	
	
	
	
	
	
	

	/* ------ MOBILE portrait --------------    F O O T E R    -------------------- */
	
	
	

	
	#footer .footer-bottom {
		text-align: center;
	}
	.footer-bottom p.pull-right {
		float: none !important;
	}
}
/* --------- end of  MOBILE portrait ----------- */