/*
Theme Name: TWD Theme
Theme URI: https://github.com/thomaswasilewski/twd-theme
Author: Thomas Wasilewski
Author URI: http://thomaswasilewski.com/
Description: A little theme to power my site.
Version: 0.02
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: twd
Text Domain: twd-theme
*/

/* --- OVERALL STYLING --- */

html {
	font-size: 10px;

}

body {   
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size:2rem;
	margin: 0;

}

a {
	text-decoration: none;
}

h1 {
	font-size: 4rem;
		letter-spacing: 0.2rem;

}

/* --- OVERALL STYLING END--- */

/* --- HEADER and MENU STYLING --- */

header {
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	background-color: rgba(255,255,255,0.9);	
	padding: 20px; 
	color: rgba(255, 255, 255, 1);
	height: 144px;
	transition: 2.5s all;
}

.changecolor header {
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	background-color: rgba(0, 139, 186, 0.9);	
	height: 88px;	
}


.sticky-header {
	position: fixed;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	display: flex;
	justify-content : center;
}

.menu-container {
	width: 1080px;
	display: flex;
	justify-content : space-between;
	text-transform: uppercase;
	font-size: 2rem;
	letter-spacing: 0.3rem;
}

.left-menu {
	background: rgba(0, 200, 0, 0.5); 
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.header-logo {
	background: rgba(0, 0, 0, 1); 
	width: 60px;
	height: 60px;
	//margin: 20px;
}

.menu {
	background: rgba(200, 0, 0, 0.1);
	display: flex; 	
	justify-content: center;
	flex-direction: column;
 	width: calc(100%);
}

.main-menu {
	display: flex; 	
	justify-content : space-between;
	padding: 0; 


}

.main-menu li {
	padding: 10px 20px;
	//background: rgba(200, 200, 0, 0.2);
	margin: 0 10px;
	transition: background-color 2.4s ease-out;
}

.menu-item a{
	background: rgba(200, 200, 20, 0.2);
	margin: 0 10px;
	transition: background-color 2.4s ease-out;
	width: 100px;
	height: 100px;
}

.travellerbox {
width: 1px;
height: 2px;
background-color: rgba(0, 139, 186, 1);
z-index: -1;
position: absolute;
transition: 1s;
//transform: translateX(calc(755px - 50px));
transform: translate(calc(100px - 50px),13px);
}

ul {
  	list-style-type: none;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

li a, .changecolor .current_page_item a  {
	color: rgba(0, 139, 186, 1);	
}

.changecolor li a, .current_page_item a {
	color: rgba(255, 255, 255, 1);	
}

.current_page_item {
	background-color: rgba(0, 139, 186, 1);
}

.changecolor .current_page_item {
	background-color: rgba(255, 255, 255, 1);
}

.changecolor .current_page_item {
	background-color: rgba(255, 255, 255, 1);
}



/* --- HEADER and MENU STYLING END--- */

.container {
	display: flex;
  	flex-direction: column;
 	height: 100vh;

}

/* --- CONTENT STYLING --- */

#content {
	//background: rgb(200,0,0); 
	padding: 144px 0 0 0; 
	color: rgb(119, 119, 119);
	display: flex;
	justify-content : center;
	width: 100%;
	flex: 1 0 auto; 
	              animation: fadein 2s;


}

.width-wrapper {
	width: 1080px;
}

/* --- CONTENT STYLING END --- */


/* --- FOOTER STYLING --- */

footer {
	background-color: rgba(29, 29, 29, 0.9);
	position: relative;
	bottom: 0;
	left: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 110px;
	display: flex;
	flex-direction:column;
	justify-content : space-around;
	color: rgba(255,255,255, 1);
	flex-shrink: 0;
	font-size: 1.5rem;

}

footer p {
	margin: 0px;
}

.footer-up {
		padding: 5px;
		margin: 10px 0 0 0;
		display: flex;
		justify-content : center;
}

.footer-up .f1, .footer-up .f2, .footer-up .f3, .footer-up .f4  {
			margin: 0 10px 0 10px;
			letter-spacing: 0.2rem;
			text-transform: uppercase;
}

.footer-down {
		padding: 0px; 
		display: flex;
		justify-content : center;
		font-size: 2.2rem;
		Xmargin: 0 0 10px 0;
}

.poweredby {
		padding: 0px; 
		display: flex;
		justify-content : center;
		margin: 0 0 10px 0;
		opacity: 0.3;
		font-size: 1rem;

}

.poweredby a:link, .poweredby a:visited {
	  	color: rgba(255, 255, 255, 1);
}

footer a {  
		-o-transition:color .2s ease-out, background 2s ease-in;
		-ms-transition:color .2s ease-out, background 2s ease-in;
		-moz-transition:color .2s ease-out, background 2s ease-in;
		-webkit-transition:color .2s ease-out, background 2s ease-in;
		  /* ...and now for the proper property */
		transition:color .2s ease-out, background 2s ease-in;
}

footer a:link, footer a:visited {
	  	color: rgba(200, 200, 200, 1);
}

footer a:hover {
	  	color: rgba(0, 139, 186, 1);
}

footer a:active {
	  	color: rgba(255, 255, 255, 1);
}

.footer-down .f1, .footer-down .f2, .footer-down .f3, .footer-down .f4, .footer-down .f5, .footer-down .f6, .footer-down .f7, .footer-down .f8, .footer-down .f9 {
			margin: 0 2px 0 2px;
			padding: 0 5px 0 5px;
}

/* --- FOOTER STYLING END --- */

/* --- AJAX STYLING --- */

body.loading{   
	//font-weight: 900;
	background: rgba(00, 40, 0, 1); 
	transition: background-color 2.4s ease-out;

}

/* --- AJAX STYLING END--- */