body { 
  margin: 0; 
	background-color: #FFF;
  transition: 1s ease;
}
html {
  scroll-behavior: smooth;
}
*{
	margin: 0px auto 0px auto;    /*Responsitive for anydevice*/
	margin: 0;
	padding: 0;
/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'Montserrat', sans-serif;
	 scroll-behavior: smooth;
}
.container{
	background-color: transparent;
	max-width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	
} 
.contaner{
	background-color: transparent;
	max-width: 70%;
	margin-left: 15%;
	margin-right: 15%;
	
} 	
.div-flex{
	width: auto;
	height: auto;
	display: inline-flex;
}	
.div-grid{
	width: auto;
	height: auto;
	display: inline-grid;
	margin: 8px;
}
.contaner_top{
	background-color: transparent;
	max-width: 85%;
	margin-left: 15%;
	margin-right: 0%;
	
} 	

 	
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   GUI UX | UI   DESKTOP   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/ 
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   GUI UX | UI   DESKTOP   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/ 
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   GUI UX | UI   DESKTOP   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/ 
@media only screen and (max-width: 99999px){
	
/**********************************************************************************************
	0.0 top desktop
***********************************************************************************************/	
.backtop{
		width: 100%;
		height: 99px;
		background-color: white;
	}	
div#top_desktop{
	 height: auto;
	z-index: 999;
	background-image:linear-gradient(#fff,#fafafa);
	color: black;
	text-align: center; 
	font-weight: bold;
	position: fixed; 
	width: 100%;
	transition: 0.2s;
	border-bottom: 1px solid #ddd;
	}	 
.contaner_top{
	background-color: transparent;
	max-width: 85%;
	margin-left: 15%;
	margin-right: 0%;
	
} 	
.top_desktop_inside{ 
	width: 100%;
	height: 100%;
	}	
img#img-top{
	transition: linear 0.3s; 
	display: block;
	width:99px;
	height:99px;
	}	
.td_lateral_menu{
	width: auto;
	height: 100%;  
	float: right;
	display: inline-flex;
	margin-top: -99px; 
	background-color: #eee;
	border-bottom-left-radius: 33px;
	padding-top: 33px;
	}
.div-flex-menu-lateral img{
		width:21px;
		height:21px;
		margin: 8px;
	}	
.td_lateral_menu a{
		text-decoration: none;
	color: #008080;
	}		
.td_lateral_menu a:hover{
		text-decoration: none;
	color: #666;
	}	
.div-flex-menu-lateral{
	padding: 8px;
	width: auto;
	height: auto;
	display: inline-flex;
}
.div-flex-menu-lateral p{
margin-right: 9px;
}
.div-flex-menu-lateral a{
margin-right: 9px;
	
text-decoration: none;
font-weight: 900;
}
.div-flex-menu-lateral img{
	margin-top: -2px;
	width: 21px;;
	height: 21px;
}
.swicon img{
		height: 33px;
		width: 133px;
	padding: 0px 13px 0px 13px;
	}	
 
  
/**********************************************************************************************
	0.1 menu lateral mobile
***********************************************************************************************/	 	
span.header_mobileBtn{
	display: none;
	margin-top: -69px;
	cursor:pointer; 
	border-radius:8px;
	width: 39px;
	height:13px;
	text-align: center;  
	float: right;
	    -webkit-transform:scale(1.5,1); /* Safari and Chrome */
       -moz-transform:scale(1.5,1); /* Firefox */
       -ms-transform:scale(1.5,1); /* IE 9 */
       -o-transform:scale(1.5,1); /* Opera */
       transform:scale(1.5,1); /* W3C */
	
	} 	
/*   MENU LATERAL   */
.sidenav {   
	display:none; 
}
	 

/**********************************************************************************************
	1.0 DESKTOP
***********************************************************************************************/		
    .desktop{		
	width: 100%;
	height: 1200px;
	display: inline-flex;
	background-color: #eee;
	}
	/*   Menu lateral   */
	.desktop_left{
		width: 25%;
		height: 100%;
		background-color: #001111;
	}	
	.desktop_left h3{
		color: #008080;
		padding: 13px 33px 13px 33px;
		font-size: 17px;
		font-weight: 900;
		margin-left: 33px;
	}
	.desktop_left_item_first{
		margin-left: 33px;
		display: inline-flex;
		padding: 13px 33px 13px 33px;
		background-color: #008080;
		border-radius: 5px;
		width: 60%;
	}
	.desktop_left_item_first img{
		height: 33px;
		width: 33px;
	}
	.desktop_left_item_first a{
		color: white;
		padding: 5px 13px 5px 13px;
		font-size: 17px;
		font-weight: 600;
	}
	.desktop_left_item{
		margin-top: 5px;
		margin-left: 33px;
		display: inline-flex;
		padding: 13px 33px 13px 33px;
		background-color: transparent;
		border-radius: 5px;
	}
	.desktop_left_item img{
		height: 33px;
		width: 33px;
	}
	.desktop_left_item a{
		color: #008080;
		text-decoration: none;
		padding: 5px 13px 5px 13px;
		font-size: 17px;
		font-weight: 600;
	}
	.desktop_left_item :hover{
		transition: 1s ease;
		color: #fff;
		text-decoration: none;
		padding: 5px 13px 5px 13px;
		font-size: 17px;
		font-weight: 600;
	}
	/*  Menu inicial centro derecha  */
	.desktop_right{
		width: 75%;	
		height: 1200px;
	}
	.desktop_right_header{ 
		border-bottom: 1px solid #cecece;
		height: 170px;
	}
	.desktop_right_header h1{ 
		color: #666;
		font-size: 40px;
		padding: 33px 33px 10px 33px;
	}
	.desktop_right_header img{
		width: 33px;
		height: 33px;
	}
	.desktop_right_header p{
		font-size: 21px;
		font-weight: 700;
		padding: 0px 33px 33px 33px;
	}
	
	.desktop_right_inside{
		height: 300px; 
		width: 80%;
		margin-left: 10%;
		display: inline-flex; 
	}
	.desktop_right_inside img{
		width: 40%;	
		height: 266px;
		margin-top: 13px;
	}
	.desktop_right_inside_right{
		width: 50%;
		margin-left: 33px;
		margin-top: 13px;
		height: 80%;
		border-radius: 8px;
		border:1px solid #aaa;
		background-color: white;
	}
	.desktop_right_inside_right h2{
		padding: 13px 33px 13px 33px;
	}
	.desktop_right_inside_right h3{
		padding: 13px 33px 13px 33px;
	}
	.desktop_right_inside_right a{
		padding: 13px 33px 13px 33px;
		background-color: #008080;
		color: white;
		border-radius: 33px;
		font-size: 21px;
		font-family: 'rubik';
		text-decoration: none;
	}
	.desktop_right_inside_right a:hover{
		padding: 13px 33px 13px 33px;
		transition: ease 1s;
		border:solid 1px #008080;
		color: #008080;
		background-color: white;
		border-radius: 33px;
		font-size: 21px;
		font-family: 'rubik';
		text-decoration: none;
	}
	/*  social items  */
	.desktop_right_bottom {
		width: 100%;
		height: 60px;	
		background-color: white;
	}
	.desktop_right_bottom_social{
		width: 100%;
		height: auto;   
		align-content: center;
		align-items: center;
		border-top: 1px solid #aaa;
		border-bottom: 1px solid #aaa;
	}
	.desktop_right_bottom_social_items{
		display: inline-flex;
	}
	.desktop_right_bottom_social_items img{
		width: 33px;
		height: 33px;
		margin: 13px;;
	}
	/*   */
	.desktop_right_footer{
		height: 200px;
		width: 80%;
		margin-left: 10%;
		display: inline-flex;
		
	}
	.desktop_right_footer_item{
		margin-top: 33px;
		width: 30%;
		margin-right: 1.5%;
		margin-left: 1.5%;
		display:inline;
	}
	.desktop_right_footer_item a{
		text-decoration: none;
		color: #999;
		font-weight: 900; 
	}
	.desktop_right_lastfooter{
		height: 369px;
		width: 100%;
		margin-left: 0%;
		border-top: 1px solid #ccc; 
		position: relative;
	}
	.desktop_right_lastfooter img{
		height: 100px;
		width: 100px;
	}
	
	
	
/**********************************************************************************************
	2.0 Mobile 
***********************************************************************************************/	
.mobile{
	display: none;
	}

	
	
	
	
	
	
	
	
	
	 
	
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   GUI UX | UI   END desktop   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/ 	
}
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   GUI UX | UI   END desktop   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/ 		

 	
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   GUI UX | UI   MOBILE   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/ 
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   GUI UX | UI   MOBILE   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/ 
/*▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   GUI UX | UI   MOBILE   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓*/ 
@media only screen and (max-width: 1333px){
/**********************************************************************************************
	0.0 top desktop
***********************************************************************************************/	
.backtop{
		width: 100%;
		height: 99px;
		background-color: white;
	}		
div#top_desktop{
	 height: auto;
	z-index: 999;
	 color: black;
	text-align: center; 
	font-weight: bold;
	position: fixed; 
	width: 100%;
	transition: 0.2s;
	
	background-image:linear-gradient(#fff,#eee);
	border-bottom: 0px solid #ddd;
	}	 	
.contaner_top{
	background-color: transparent;
	max-width: 70%;
	margin-left: 15%;
	margin-right: 15%;
	
} 	
.top_desktop_inside{ 
	width: 100%;
	height: 100%;
	}	
img#img-top{
	transition: linear 0.3s; 
	display: block;
	width:99px;
	height:99px;
	}	
.td_lateral_menu{
	width: auto;
	height: 100%;
	border: 1px solid #aaa;
	 background-image: linear-gradient(45rad,rgba(248,252,189,0.90), rgba(167,253,255,0.30));
	float: right;
	display: none;
	margin-top: -69px; 
	}	

/**********************************************************************************************
	0.1 menu lateral mobile
***********************************************************************************************/	 	
span.header_mobileBtn{
	margin-top: -69px;
	cursor:pointer;
  background-color: #eee;
	transition: linear 0.3s ;
	border-radius:8px;
	width: 39px;
	height:13px;
	text-align: center;  
	display: table;
	float: right;
	    -webkit-transform:scale(1.5,1); /* Safari and Chrome */
       -moz-transform:scale(1.5,1); /* Firefox */
       -ms-transform:scale(1.5,1); /* IE 9 */
       -o-transform:scale(1.5,1); /* Opera */
       transform:scale(1.5,1); /* W3C */
	
	}
span.header_mobileBtn p{
	
	transition: linear 0.5s ;
		font-size:39px; 
		color:#008080;
		display: table-cell; 
		vertical-align: middle; 
	}	
/*   MENU LATERAL   */
.sidenav {  
	overflow-y:hidden;
    height: 100%;
	display:block;
    width: 80%;
	margin-right: -80%;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    background-color: #f6f6f6; 
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 14px;
	
}
.sidenav a {
    padding: 0px 0px 0px 0px;
    text-decoration: none;
    display: block;
    transition: 0.3s;
}
.sidenav a:hover {
    color: #f1f1f1;
} 
.sidenav .closebtn {
    position: absolute; 
    font-size: 66px;
    margin-left: 50px;
	color: #008080;
	right: 33px;
	top: 13px;
} 
.sidenav_menu{
	border-top-left-radius: 13px;
	border-top-right-radius: 13px;
	width: 100%;
	height: 100%;
	margin: 0%;   
	background-image: url(../materials1.jpg);
	background-size: cover;
	}
.sidenav_menu_option_first{ 
	width: 100%;
	height: auto; 
	 
	transition: linear 0.1s;
	} 
.sidenav_menu_option{ 
	width: 100%;
	height: auto; 
	transition: linear 0.1s; 
	}		
.sidenav_menu_option:hover{
	width: 100%;
	height: auto; 
	  
	} 
.sidenav_menu_option_first a{ 
	text-decoration: none;
	margin-left: 10%;
	width: 80%;
	margin-right: 10%;
	height: 100%;
	color:white;
	font-weight: 999;
	transition: linear 1s;
	} 
.sidenav_menu_option a{ 
	text-decoration: none;
	margin-left: 10%;
	width: 80%;
	padding-top: 8px;
	margin-right: 10%;
	height: 100%;
	color: #C4FFFF;
	font-weight: 900;
	transition: linear 1s;
	} 
.sidenav_menu_option a:hover{ 
	text-decoration: none;
	margin-left: 10%;
	width: 80%;
	margin-right: 10%;
	height: 100%;
	transition: linear 1s;
	} 
.div-flex-menu-lateral{
	padding: 8px;
	width: auto;
	height: auto;
	display: inline-flex;
}
.div-flex-menu-lateral img{
	margin-top: -2px;
	width: 21px;;
	height: 21px;
}
	


/**********************************************************************************************
	1.0 DESKTOP
***********************************************************************************************/	
.desktop{
		display: none;
}


/**********************************************************************************************
	2.0 Mobile 
***********************************************************************************************/	
.mobile{
	width: 100%;
	height: auto;
	display: block;
	}
	/*Name*/
	.mobile_name{
		width: 100%;
		height: 133px;
		background-color: #eee; 
	}	
	.mobile_name_inside{
		width: 80%;
		margin-left: 10%; 
		height: 133px;
		display: inline-flex;
	}
	.mobile_name_inside_left{
		height: 121px;
		margin-top: 6px;
		width: 28%;
		margin-right: 1%;
		background-color: rgba(25,255,255,0.30);
		border-radius: 13px;
	}
	.mobile_name_inside_left img{
		height: 69px;
		width: 69px;
		margin-top: 17px;
		margin-bottom: 17px;
	}
	.mobile_name_inside_right{
				height: 121px;
		margin-top: 6px;
			background-color: rgba(25,255,255,0.30);
		border-radius: 13px;
		width: 70%; 
	}
	.mobile_name_inside_right h2{
		margin-top: 17px;
		margin-left: 17px;
		margin-bottom: 17px;
		color: #008080;
	}
	.mobile_name_inside_right p{
		color: white;
		font-family: 'rubik';
		margin-left: 17px;
	}
	/* my trips */
	.mobile_trips{
		width: 100%;
		height: 133px;
		background-image: linear-gradient(180rad,#008080,#00cccc);
		border-bottom-left-radius: 13px;
		border-bottom-right-radius: 13px;
	}	
	.mobile_trips_inside{
		width: 80%;
		margin-left: 10%; 
		height: 133px;
		display: inline-flex;
	}
	.mobile_trips_inside_left{
		height: 121px;
		margin-top: 6px;
		width: 28%;
		margin-left: 1%;
		background-color: rgba(255,255,255,0.30);
		border-radius: 13px;
	}
	.mobile_trips_inside_left img{
		height: 69px;
		width: 69px;
		margin-top: 17px;
		margin-bottom: 17px;
	}
	.mobile_trips_inside_right{
				height: 121px;
		margin-top: 6px;
			background-color: rgba(255,255,255,0.30);
		border-radius: 13px;
		width: 70%; 
	}
	.mobile_trips_inside_right h2{
		margin-top: 17px;
		margin-left: 17px;
		margin-bottom: 17px;
		color: white;
	}
	.mobile_trips_inside_right p{
		color: white;
		font-family: 'rubik';
		margin-left: 17px;
	}
	/* next trips */
	.mobile_nextTrip{
		width: 100%;
		height: auto;
		background-color: white;;
	}
	.mobile_nextTrip img{
		width: 266px;
		height: 199px;
	}
	.mobile_nextTrip_box{
		width: 90%;
		margin-left: 5%;
		height: auto;
		border-radius: 8px;
		border:1px solid #aaa;
		background-color: #fbfbfb;
	}
	.mobile_nextTrip_box h1{
		padding: 13px 13px 13px 13px;
	}
	.mobile_nextTrip_box h3{
		padding: 13px 13px 13px 13px;
	}
	.mobile_nextTrip_box a{
		padding: 13px 33px 13px 33px;
		background-image: linear-gradient(180rad,#008080,#00cccc);
		border-radius: 13px;
		color: white;
		font-family: 'Rubik';
		margin: 13px 13px 13px 13px;
		text-decoration: none;
		transition: 1s ease;
	}
	.mobile_nextTrip_box a:hover{
		padding: 13px 33px 13px 33px;
		background-image: linear-gradient(180rad,#ddd,#fff);
		border-radius: 13px;
		color: #008080;border:1px solid #008080;
		font-family: 'Rubik';
		margin: 13px 13px 13px 13px;
		text-decoration: none;
		transition: 1s ease;
	}
	/* Buttons */
	.mobile_buttons{
		width: 100%;
		height: auto;
		background-color: white;
	}
	.mobile_buttons_inside{
		width: 90%;
		margin-left: 5%;
		display: inline-flex;
		height: auto; 
		margin-bottom: 4%;
	}
	.mobile_buttons_inside a{
		text-decoration: none;
		width: 46%;
		margin-left: 2%;
		margin-right: 2%;
		height:auto;
		border-radius: 8px;
		border:1px solid #aaa;
		background-color: white;	
	}
	.mobile_buttons_item img{
		width: 133px;
		height: 133px;
	}
	.mobile_buttons_item h3{
		color: #008080;
	}
	.desktop_right_footer{
		display: inline-grid;
		height: 333px;background-color: white;
	}
	.desktop_right_bottom_social{
		width: 100%;
		height: auto;   
		align-content: center;
		align-items: center;
		border-top: 1px solid #aaa;
		border-bottom: 1px solid #aaa;
		background-color: #fcfcfc;
	}

	.desktop_right_bottom_social_items{
		display: inline-flex;
	}
	.desktop_right_bottom_social_items img{
		width: 33px;
		height: 33px;
		margin: 13px;;
	}
	/*   */
	.desktop_right_footer{
		background-color: white;
		height: auto;
		width: 100%;
		margin-left: 0%;
		display: inline-grid;
		
	}
	.desktop_right_footer_item{
		margin-top: 33px;
		width: 30%;
		margin-right: 1.5%;
		margin-left: 1.5%;
		display:inline;
	}
	.desktop_right_footer_item a{
		text-decoration: none;
		color: #999;
		font-weight: 900; 
	}
	.desktop_right_lastfooter{
		height: 369px;
		background-color: white;
		width: 100%;
		margin-left: 0%;
		border-top: 1px solid #ccc; 
		position: relative;
	}
	.desktop_right_lastfooter img{
		height: 100px;
		width: 100px;
	}
	





 
	
	
	
}