.controller {
	display: grid;
    grid-template-columns:min-content 1fr min-content;
	width: 100%;
    height: 100%;
    background: transparent !important;
    mix-blend-mode: difference;
}

#daytime .icon{
    display: none!important;
}

.controller::before {
	content: '';
	background-image: url(../img/icons/moon.svg);
	background-size: 100%;
    background-repeat: no-repeat;
	width: 20rem;
	height: 20rem;
}

.controller::after {
	content: '';
	background-image: url(../img/icons/sun.svg);
	background-size: 100%;
    background-repeat: no-repeat;
	width: 20rem;
	height: 20rem;
}

.controller .box {
	width: 30rem;
	height: 15rem;
	border-radius: 20rem;
    position: relative;
    border: 2.2rem solid white;
    margin:0 0.2em;
}

.controller .check {
	top: 2rem;
	bottom: 2rem;
	position: absolute;
	border-radius: 100%;
    transition: 300ms;
    background: white;
}

.controller.light .check {
	right: 2rem;
	left: 60%;
}

.controller.dark .check {
	right: 60%;
	left: 2rem;
}

/** Backlight */
.dark .sections .section {
    background: black;
}

.light .sections .section {
    background: white;
}

.light {
	color: black;
    background: white;
    transition: 800ms;
    transition-property: color, background, -webkit-text-stroke, border;
    border-color: black !important;
}


.dark {
	color: white;
    background: black;
    transition: 800ms;
    transition-property: color, background, -webkit-text-stroke, border;
    border-color: white !important;
}



.sections.dark .more-content, 
main>.menu.dark{
    background: rgba(0, 0, 0, 0.9);
}
.sections.light .more-content, 
main>.menu.light{
    background: rgba(255, 255, 255, 0.9);
}

@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .sections.dark .more-content, 
  main>.menu.dark {
    background-color: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
  }
  .sections.light .more-content, 
  main>.menu.light {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
  }
}



.light .feedback-element {
    color: black;
    border-color: black !important;
    transition: 800ms;
    transition-property: color, background, border;
}

.dark .feedback-element {
    color: white;
    border-color: white !important;
    transition: 800ms;
    transition-property: color, background, border;
}

.light a {
    color: black;
    transition: 800ms;
    transition-property: color;
}

.dark a {
    color: white;
    transition: 800ms;
    transition-property: color;
}
.light .services path{
    fill: black;
    transition: 0.6s ease;
}
.dark .services path{
    fill: white;
    transition: 0.6s ease;
}

.light .navigation a {
    color:black;
}

.dark .navigation a {
    color:white;
}

.light section#home .slider .slide[slide-type="one"] .header.title,
.light section#home .slider .slide[slide-type="one"] .header.title .item,  
.light section#home .slider .slide[slide-type="two"] .header .title,
.light section#home .slider .slide[slide-type="two"] .header.title .item  {
    -webkit-text-stroke: 0.009em black!important;
}

.dark section#home .slider .slide[slide-type="one"] .header.title,
.dark section#home .slider .slide[slide-type="one"] .header.title .item, 
.dark section#home .slider .slide[slide-type="two"] .header .title,
.dark section#home .slider .slide[slide-type="two"] .header.title .item  {
    -webkit-text-stroke: 0.009em white!important;
}

/** Popup */


.popup-container {
    color: white;
    background: rgba(0, 0, 0, 0.9);
}

.light .popup-container {
	color: black;
	background: rgba(255, 255, 255, 0.9);
}


@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .popup-container {
    background-color: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
  }
  .light .popup-container {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
  }
}



.light .archive-header .next-button {
    border: 1rem solid black;
}

.dark .archive-header .next-button {
    border: 1rem solid white;
}

.light .archive-header .next-button svg line {
    stroke: black;
}
.light .archive-header .next-button:hover svg line {
    stroke: white;
}

.dark .archive-header .next-button svg line {
    stroke: white;
}
.dark .archive-header .next-button:hover svg line {
    stroke: black;
}

/** Slider */
.light .portfolio .navigation-slides .item:hover,
.light .portfolio .navigation-slides .item.active {
    color: black;
    
}

.dark .portfolio .navigation-slides .item:hover,
.dark .portfolio .navigation-slides .item.active {
    color: white;
    
}

.dark .portfolio .box .see-project {
    color: black;
    background: white;
}

.dark .portfolio .box .see-project:hover {
    color: white;
    background: black;
}

.light .portfolio .box .see-project {
    color: white;
    background: black;
}

.light .portfolio .box .see-project:hover {
    color: black;
    background: white;
}

.light .seeProgect {
    color: white;
    background: black;
}

.dark .seeProgect {
    color: black;
    background: white;
}

.light .portfolio .navigation-slides .next-button{
    color: black;
    border-color: black;
    /*font-weight: 600;*/
}
.light .portfolio .navigation-slides .next-button line{
    stroke: black;
}

.light .portfolio .navigation-slides .item {
    /*font-weight: 600;*/
}

/** Menu */
.light main>.menu button {
	color: white;
    background-color: black;
    border: 1px solid black;
}

.dark main>.menu button {
	color: black;
    background-color: white;
    border: 1px solid white;
}

.light main>.menu button:hover {
	color: black;
    background-color: transparent;
    border: 1px solid black;
}

.dark main>.menu button:hover {
	color: white;
    background-color: transparent;
    border: 1px solid white;
}

.light main>.menu .sub-navigation a {
	color: #646464 !important;
}

.dark main>.menu .sub-navigation a {
	color: #9B9B9B !important;
}

.light main>.menu .sub-navigation a:hover {
	color:black !important;
}

.dark main>.menu .sub-navigation a:hover {
	color: white !important;
}

/** Cursor  */
/*.light .cursor {
    border-color: black;
}

.dark .cursor {
    border-color: white;
}

.light, .light a, .light *{
    cursor: url(../img/cursor-black.png) 6.3 6.3, auto !important;
}
.dark, .dark a, .right *{
    cursor: url(../img/cursor-white.png) 6.3 6.3, auto !important;
}
*/

#myburger{
    position:fixed;
    top:0; right: 0.9%;
    top: 0.9%;
    z-index:9999;
    width:2%; height:auto;
}
.light #myburger path{
    fill:black;
}
.dark #myburger path{
    fill:white;
}



.dark .go-area .go{
    color: black;
    background: white;
}

.dark .next-button:hover, 
.dark .go-area .go:hover{
    color: black!important;
    background: white!important;

}
.dark .go-area .go:hover{
    color: white!important;
    background: black!important;
}
.dark .next-button:hover svg line{
    stroke: black;
    
}
.light .next-button:hover svg line{
    stroke: white!important;
    
}

.dark .go svg line {
    stroke: white;
    stroke: black;
}
.dark .go:hover svg line {
    stroke: black;
    stroke: white;
}

.light .next-button:hover, 
.light .go-area .go:hover, 
.dark .go:hover .go-area .go{
    color: white!important;
    background: black!important;
}
.light .go:hover .go-area .go, 
.light .go-area .go:hover{
    color: black!important;
    background: white!important;
}
.light .go svg line {
    stroke: black;
    stroke: white;
}
.light .go:hover svg line {
    stroke: white;
    stroke: black;
}




.light #daytime{
    filter: invert(100%);
}


/*
.light .aaa .triangle, 
.light .aaa .triangle:before{
    color: black;
}
.light .aaa .triangle:before{    
    border-bottom: solid 1.08253em black;
}*/
/*.light .aaa{
    filter: invert(100%);
    color: black;
}*/
.light .povered_by_aaa_logo{
    filter: invert(100%);
}