/*   
Theme Name: Della Conroy Art
Theme URI: 
Description: Custom Header for Della Conroy Art
Author Name: Susan Belanger
Author URI: https://creativelyewe.com
Version: 2
 */
 

:root {
  --primary-color: #2f5061;
  --secondary-color: #1b206e;
  --hover-color: #e6d092;
 
}


/* BASE STYLES */
* {
  /*box-sizing: border-box;*/
  margin: 0;
  padding: 0;
}



/*  Navigation */


/* TOGGLE */
.toggle, .toggle.reverse {
	position: absolute;
  	top: 32px;
  	right: 25px;
	width: 60px;
    height: 60px;
	background: url(../images/menu.svg);
    background-size: 35px;
	background-position: center;
	background-repeat: no-repeat;
 	z-index: 1590;
	cursor: pointer;
    
}


.toggle.reverse {
	
	background: url(../images/menu_white.png);
   background-size: 35px;
	background-position: center;
	background-repeat: no-repeat;
  
}

.toggle.active {
  background: var(--primary-color) url(../images/xmark_reverse.svg);
    background-size: 25px;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    top: 50px;
    right: 55px;
}



/* NAVIGATION */
.navigation {
	
  position: fixed;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index:1500;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigation.active {
  	left: 0;
	
}

.navigation ul {
  position: relative;
  top: 5%;
}

.navigation ul li {
  position: relative;
  list-style: none;
  text-align: center;
}


 
.navigation ul li a, .navigation ul li {
    font-size: 2.2rem;
    font-family: 'McLaren', cursive;
    color: #2f5061;
    text-decoration: none;
    font-weight: 300;
    text-transform: uppercase;
}



.navigation ul.highlight li, .navigation ul.highlight li a {
      font-size: 1.4rem;
    font-weight: bold;
    
  
}


.navigation ul.highlight li   {
    font-size: 1.4rem;
    padding-bottom: 10px;
    margin-bottom: 1rem;
}

.navigation.active ul.highlight li a:hover, .navigation .social-bar a:hover {
  color: var(--hover-color);
}

.navigation ul li.contactLink, .navigation ul li.aboutLink, .navigation ul li.artLink, .navigation ul li.cardLink, .navigation ul li.tourLink, .navigation ul li.videoLink, .navigation ul li.homeLink {
    color: #c1684c;
    font-style: normal;
    font-weight: bold;
}


.navigation .social-bar {
  position: absolute;
  top: 0;
  left: 3%;
  width: 60px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigation .social-bar a {
  display: inline-block;
  margin-bottom: 2rem;
  transform: scale(.9);
}

.navigation .social-bar a:hover   {
     color: #c1684c;
}

  
.navigation .social-bar ul li a .fa-brands.fa-facebook-f, .navigation .social-bar ul li a .fa-chisel.fa-regular.fa-at {
    font-size: 2.5rem;
}


.navigation .email-icon {
  
  transform: scale(0.5);
}

.navigation ul::after, .navigation ul.highlight::after  {
  content:'';
  display: block;
  clear: both;
  
}


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

.toggle, .toggle.reverse {
    position: absolute;
    width: 45px;
    height: 45px;
    top: 10px;
    left: 50%;
    margin-left: -22px;
    background: #000 url(../images/menu_reverse.svg);
    background-repeat: no-repeat;
    background-size: 55%;
    background-position: center;
    z-index: 1590;
    cursor: pointer;


}
  
}