html{margin: 0; padding: 0;}
body{
    margin: 0; padding: 0;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    padding-top: 180px;
}
body.is_home{
    padding-top: 0;
}

body.theme1{
    background: #e74d2a;
}

body.theme2{
    background: #84f7d2;
}

h1, h2, h3, h4, h5 {font-family: "din-condensed", Arial, Helvetica, sans-serif; color: #151515; text-transform: uppercase; font-weight: 200; line-height: 1em; }
h1,h2{font-weight: 400;}

h1.title{
    font-size: 60px;
    padding: 0;
    margin: 0;
    display: block;
    position: relative;
}

.button{padding: 10px 20px; color: white; border: 2px solid white; display: inline-block; text-decoration: none; text-transform: uppercase; font-size: 11px;}
.button.white{border: 2px solid white; color: white;}
.button.dark{color: #151515; border: 2px solid #151515; }
.button.white:hover{filter: invert(100%); cursor: pointer;}
.button.dark:hover{background: #151515; color: white;}

.margintop10{margin-top: 10px;}
.margintop20{margin-top: 20px;}
.margintop30{margin-top: 30px;}
.margintop40{margin-top: 40px;}
.margintop50{margin-top: 50px;}
.margintop60{margin-top: 60px;}
.margintop70{margin-top: 70px;}
.margintop80{margin-top: 80px;}

.marginbottom10{margin-bottom: 10px;}
.marginbottom20{margin-bottom: 20px;}
.marginbottom30{margin-bottom: 30px;}
.marginbottom40{margin-bottom: 40px;}
.marginbottom50{margin-bottom: 50px;}
.marginbottom60{margin-bottom: 60px;}
.marginbottom70{margin-bottom: 70px;}
.marginbottom80{margin-bottom: 80px;}

.webwrapper{width: calc(100% - 240px); margin: 0 auto;}
body #pagewrapper, body .pagewrapper{width: 100%; position: relative;     transform: translateX(0px); transition: transform 1s;}
body.open #pagewrapper, body.open .pagewrapper{transform: translateX(360px);  transition: transform 1s;}

.w1400{width: calc(1400px); margin: 0 auto;}

.deck{display: block; position: relative; }
.topdeck{padding-top: 180px;}

body #masthead{height: 180px; position: fixed; top: 0; left: 0; width: 100%; display: block; z-index: 5; transform: translateX(0);
    transition: transform 1s;}

@media(max-width: 1650px){
    body #masthead{height: 130px;}
}    

body.open #masthead{
    transform: translateX(360px);
    transition: transform 1s;
}
#masthead .webwrapper{height: 100%; position: relative; }

body #masthead .logo{
    display: block;
    width: 400px; height: 50px;
    position: absolute; top: 57px; left: 120px;
    background: url(images/brand/logo-nd-short.png) no-repeat; background-size: contain; background-position: left;
}

body.is_home  #masthead .logo{
    top: 58px; left: 150px;
}

@media(max-width: 1890px){
    

    body.is_home #masthead .logo{
        left: 120px;

    }

    body #masthead .logo{
        left: 120px;
    }
}




body.dark #masthead .logo{
    background: url(images/brand/logo-nd-dark-short.png) no-repeat; background-size: contain; background-position: left;
}

body.dark #masthead .logo::before{display: none;}

/* #masthead .logo::before{
    content: "";
    width: 400px; height: 66px;
    position: absolute; top: -7px; left: 0;
    background: url(images/brand/logo-nd-short.png) no-repeat; background-size: contain; background-position: left;
    filter: blur(1px);
    opacity: 1;
} */


body #masthead .menu_toggle{width: 90px; height: 90px; border-radius: 90px; background: #84f7d2; position: absolute; top: 40px; left: calc(100 - 240px); display: block; transition: all 0.25s;}
body.is_home #masthead .menu_toggle{left: 0;}

#masthead.red .menu_toggle{background: #e74d2a; transition: all 0.25s;}
#masthead .menu_toggle .bar_center{
    width: 30px; height: 30px;
    position: absolute; top: 30px; left: 30px;
}

#masthead .masthead_bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; opacity: 0; transition: opacity 0.5s;}
#masthead.show .masthead_bg{opacity: 1; transition: opacity 0.5s;}

body.theme1 #masthead .masthead_bg{background: #e74d2a;}
body.theme2 #masthead .masthead_bg{background: #84f7d2;}

#masthead .menu_toggle .bar_center .bar{position: absolute; left: 0; width: 100%; height: 3px; background: #151515;}
#masthead .menu_toggle .bar_center .bar:nth-child(1){top: 3px; transition: all 0.25s;}
#masthead .menu_toggle .bar_center .bar:nth-child(2){top: 13px; transition: all 0.25s;}
#masthead .menu_toggle .bar_center .bar:nth-child(3){top: 23px; width: 50%; transition: all 0.25s;}

#masthead .menu_toggle:hover .bar_center .bar:nth-child(1), body.open #masthead .menu_toggle .bar_center .bar:nth-child(1){transform: rotate(-225deg); top: 13px; transition: all 0.25s;}
#masthead .menu_toggle:hover .bar_center .bar:nth-child(2), body.open #masthead .menu_toggle .bar_center .bar:nth-child(2){transform: rotate(225deg); transition: all 0.25s;}
#masthead .menu_toggle:hover .bar_center .bar:nth-child(3), body.open #masthead .menu_toggle .bar_center .bar:nth-child(3){width: 0px; opacity: 0; transition: all 0.25s;}

body #masthead .rightmenu{position: absolute;
    top: 57px; right: calc(50% - 700px);
    text-align: right;
}

body.is_home #masthead .rightmenu{
    right: -60px;
}

#masthead .rightmenu ul{padding: 0; margin: 0; text-indent: 0; display: inline-block;}
#masthead .rightmenu ul li{list-style:  none; margin: 0 0 0 20px; display: inline-block; }
#masthead .rightmenu ul li a{text-transform: uppercase; font-size: 11px; text-decoration: none; color: white; font-family: Arial, Helvetica, sans-serif;}
body.dark #masthead .rightmenu ul li a{color: #151515;}
#masthead .rightmenu ul li a:hover{border-bottom: 2px solid #FFF;}

#masthead .rightmenu #top_menu{display: inline-block; }
#masthead .rightmenu p.lang{display: inline-block; margin-left: 20px;}
#masthead .rightmenu p.lang a{text-transform: uppercase; font-size: 11px; text-decoration: none; color: white; font-family: Arial, Helvetica, sans-serif;}
body.dark #masthead .rightmenu p.lang a{color: #151515;}
body.dark #masthead .rightmenu ul li a:hover{border-bottom: 2px solid #151515;}
#masthead #left_menu{
    width: 360px;
    height: 100vh;
    position: fixed;
    left: -360px;
    top: 0;
    background: #84f7d2;
    transition: all 0.25s;
    overflow: hidden;
}

#masthead.red #left_menu{
    background: #e74d2a; transition: all 0.25s;
}

#masthead #left_menu .menu_content{
    position: relative;
    padding: 60px 80px;
    text-align: right;
}

#masthead #left_menu .menu_content ul{
    padding: 0; margin: 0; text-indent: 0;

}

#masthead #left_menu .menu_content ul li{
    padding: 20px 10px;
    position: relative;
    list-style: none;
}

#masthead #left_menu .menu_content ul li::after{
    content: "";
    display: inline-block;
    width: 20px; 
    position: absolute;
    border-top: 2px solid #151515;
    bottom: 0;
    right: 10px;
    
}
#masthead #left_menu .menu_content ul li:hover a{color: #CCC; position: relative;}
#masthead #left_menu .menu_content ul li::before{
    content: "";
    width: 1px; height: calc(100% -  4px);
    position: absolute;
    top: 1px; right: 0;
    background: #151515;
    opacity: 0;
    transition: all 0.5s;
}



#masthead #left_menu .menu_content ul li a{
    color: #151515; text-decoration: none;
    text-transform: uppercase;
    font-family: "din-condensed", Arial, Helvetica, sans-serif; 
}

#masthead #left_menu .menu_content ul li:hover::before{
    width: 100%;
    opacity: 1;
    transition: all 0.5s;
}

#masthead #left_menu .menu_content p.lang{
    text-transform: uppercase;
    font-family: "din-condensed", Arial, Helvetica, sans-serif; 
    padding: 20px 10px;
    margin: 0;
    position: relative;
    list-style: none;
}

#masthead #left_menu .menu_content p.lang a{
    color: #151515; text-decoration: none;
}

#masthead #left_menu .menu_content  .logo{
    background: url(images/brand/logo-simple-nd-dark.svg) no-repeat;
    position: relative; 
    width: 100px; height: 80px;
    display: inline-block;
    margin: 0 0 40px 0;
    top: initial; left: initial;

}

#masthead #left_menu .menu_content .logo::before{display: none;}

footer{
    display: none;
    margin-top: 0;
    padding: 40px 0;
    background: #151515;
    color: white;
}

@media(max-width: 1650px){
    body  #masthead .menu_toggle{left: 0px;}
    body #masthead .webwrapper{width: calc(100% - 40px);}
    body.is_home #masthead .webwrapper{width: 100%;}
    

    body.is_home #masthead .webwrapper{width: calc(100% - 240px);}

    body #masthead .menu_toggle{transform: scale(0.5); top: 40px; left: -20px;}
    body.is_home #masthead  .menu_toggle{transform: scale(0.5); top: 40px; left: -15px;}

    #masthead{height: 100%;}
    
    body #masthead .logo{
        transform: scale(0.75)  translateX(-30px);  left: 40px;
    }
    body.is_home #masthead .logo{left: 40px;}
    
}

@media(max-width: 1440px){
    .w1400{width: calc(100% - 40px); margin: 0 auto;}
    body #masthead .rightmenu{right: 0px;}
    body.is_home #masthead .rightmenu{right: 20px;}
    #masthead .menu_toggle{left: -20px;}
    
 }
 

@media(max-width: 1023px){
    body.is_home #masthead .webwrapper{width: calc(100% - 40px);}
}

@media(min-height: 840px){
    #home_wrapper .left .textslide{top: calc(50% - 200px);}
}

@media(max-width: 1240px){
    .webwrapper{width: calc(100% - 120px);  }
    

    body #masthead{height: 140px;}
    body #masthead .logo{left: 60px;}

    body{padding-top: 140px;}


}

@media(max-height: 940px){
    #masthead{height: 100px;}
    
    #masthead .menu_toggle{transform: scale(0.5) translateX(-30px); top: 40px;  }
    #masthead .logo{
        transform: scale(0.75); top: 52px; left: 30px;
    }

    body.is_home #masthead .logo{left: 40px;}

    #home_wrapper .right .bottombox{height: 250px; }

    

    
}

body.open #masthead .menu_toggle{
    left: -65px; 
    z-index: 10;
}

@media(max-width: 940px){
    
    #masthead .rightmenu{display: none;}

    h1.title{font-size: 40px;}
}

@media(max-width: 480px){
    body.open #masthead .menu_toggle{
        left: -130px;
    }

    body.dark #masthead .logo{
        left: 55px;
        top: 70px;
        width: 200px; height: 25px;
        
    }

    body.is_home #masthead .logo{
        transform: scale(0.5) translateX(-130px);


    }
}

@media(max-width: 360px){
    #masthead #left_menu{
        width: 100%;
        left: -100%;
    }
}

/*-------------------------------- FORMS -------------------------------------*/


.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]){
    width: calc(100% - 24px)!important;
    padding: 10px!important; 
    border: 2px solid #151515;
    color: #151515;
    background: none;
}

.gform_wrapper textarea.medium{
    width: calc(100% - 24px)!important;
    padding: 10px!important; 
    border: 2px solid #151515;
    color: #151515;
    background: none;
}

.gform_wrapper .top_label .gfield_label{font-family: "din-condensed", Arial, Helvetica, sans-serif; color: #151515; text-transform: uppercase; font-weight: 200; font-size: 14px;}

.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit], .gform_wrapper .gform_page_footer input.button, .gform_wrapper .gform_page_footer input[type=submit]{

    padding: 10px 20px; color: #151515; border: 2px solid #151515; display: inline-block; text-decoration: none; text-transform: uppercase; font-size: 11px; background: none;
    font-family: "din-condensed", Arial, Helvetica, sans-serif; color: #151515; text-transform: uppercase; font-weight: 200;
}

.gform_wrapper .gform_footer input.button:hover, .gform_wrapper .gform_footer input[type=submit]:hover, .gform_wrapper .gform_page_footer input.button:hover, .gform_wrapper .gform_page_footer input[type=submit]:hover{
    background: #151515; color: white;
}



/*-------------------------------- ANIMATIONS -------------------------------- */

.blink1{
	animation-name: blink;
	animation-duration: 250ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.blink2{
	animation-name: blink2;
	animation-duration: 1000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.blink3{
	animation-name: blink3;
	animation-duration: 1000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.softblink{
	animation-name: softblink;
	animation-duration: 2000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.appear1{
	animation-name: blink3;
	animation-duration: 250ms;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
	
}




@keyframes blink{
	0%{opacity: 0;}
	49%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 1;}
}


@keyframes blink1{
	0%{opacity: 0;}
	5%{opacity: 0;}
	6%{opacity: 1;}
	10%{opacity: 1;}
	11%{opacity: 0;}
	15%{opacity: 0;}
	26%{opacity: 1;}
	30%{opacity: 1;}
	31%{opacity: 0;}
	35%{opacity: 0;}
	36%{opacity: 1;}
	80%{opacity: 1;}
	81%{opacity: 0;}
	100%{opacity: 0;}
}

@keyframes blink2{
	0%{opacity: 0.3;}
	5%{opacity: 0.3;}
	6%{opacity: 0;}
	10%{opacity: 0;}
	11%{opacity: 0.3;}
	100%{opacity: 0.3;}
}

@keyframes blink3{
	0%{opacity: 1;}
	5%{opacity: 1;}
	6%{opacity: 0;}
	10%{opacity: 0;}
	11%{opacity: 1;}
	100%{opacity: 1;}
}

@keyframes softblink{
	0%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 1;}
}

@keyframes appear1{
	0%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 1;}
}

@keyframes loadbar{
    0%{width: 0%;}
    70%{width: 100%;}
    71%{width: 0%;}
    80%{width: 100%;}
    81%{width: 0%;}
    90%{width: 100%;}
    91%{width: 0%;}
    100%{width: 100%;}
}

@keyframes pulseanimate{
    0%{transform: scale(0.4); opacity: 1;}
    50%{transform: scale(0.7); opacity: 1;}
    100%{transform: scale(1); opacity: 0;}
}