/**
 * Theme Name:     zatran GmbH
 * Theme URI:      http://www.zatran.com
 * Description:    Theme für Seite der zatran GmbH
 * Author:         valimotion
 * Author URI:     http://www.valimotion.com
 * Version:        2.0
*/

body {
       background-color:             rgb(255, 255, 255);
       color:                        rgb(80, 80, 80);
       font-family:                  'Open Sans', sans-serif;
       font-size:                    1vw;
       margin:                       0px; /* for images */
       padding:                      0px; /* for images */
}

@media screen and (max-width: 1280px) {
body{
       font-size:                    1.35vw;
}   
}

@media screen and (max-width: 800px) {
body{
       font-size:                    2.5vw;
}   
}

@media screen and (max-width: 450px) {
body{
       font-size:                    2.5vh;
}   
}

html {
       -webkit-text-size-adjust:     100%;
}

strong, b {
       font-weight:                  bold;
}

em, i {
       font-style:                   italic;
}

p {
       /*line-height:                  130%;*/
       margin:                       1vw 0 1vw 0;
}

@media screen and (max-width: 800px) {
p {
     /* line-height:                  130%; */
      margin:                       2vw 0 2vw 0;
}
}

@media screen and (max-width: 450px) {
p {
    /*  line-height:                  130%; */
      margin:                       2vh 0 2vh 0;
}
}

.clear {
       clear:                       both;
}

*:focus {
       outline:                     none;
}

a, a:link, a:visited {
       color:                       rgb(27, 170, 57);
       text-decoration:             none;
}

a:hover {
       color:                       rgb(73, 187, 97);
       text-decoration:             underline;    
}

.alignright {
       float:                       right;
}

.alignleft {
       float:                       left;
}

.aligncenter {
       display:                     block;
       margin-left:                 auto;
       margin-right:                auto;
       width:                       60%;
       height:                      auto;
       margin-top:                  2vw;
}

@media screen and (max-width: 450px) {
aligncenter {
       width:                       90%;
}
}

.wp-caption {
      text-align:                   left;
      background-color:             #f3f3f3;
}

.wp-caption img {
      margin:                       0;
      padding:                      0;
      border:                       0 none;
}

.wp-caption p.wp-caption-text {
     font-size:                     88%;
     line-height:                   1vw;
     padding:                       0 4px 5px;
     margin:                        0;
}



/* styles for layout parts */

div#page {
       background-color:            rgb(255, 255, 255);
       position:                    relative;
       width:                       70vw;
       margin:                      0 auto;
}

@media screen and (max-width: 1280px) {
div#page {
       width:                       90vw;
}   
}

@media screen and (max-width: 800px) {
div#page {
       width:                       100vw;
       overflow:                    hidden;
}   
}

div#header {
       background-color:            rgb(255, 255, 255);
       z-index:                     -5;
}

@media screen and (max-width: 800px) {
div#header {
       height:                      10vw;
}   
}

@media screen and (max-width: 450px) {
div#header {
       height:                      11vh;
}   
}

.media-container{
     width:                         100%;
     height:                        auto;
     z-index:                       -10;
     float:                         left;
}

/*style for metaslider */


.layer {
     position:                      absolute !important;
     width:                         100% !important;
     height:                        100% !important;
     inset:                         0 !important;
}

.content {
     position:                      relative !important;
     width:                         100% !important;
     height:                        100% !important;
}


.content a:hover{
     text-decoration:               none;
}



.button a{
     background-color:              rgba(27, 170, 57, 0.7) !important;
     color:                         rgb(255, 255, 255);
     border-width:                  2px;
     border-style:                  solid;
     border-color:                  rgb(237, 237, 237);
     border-radius:                 1vw;
     font-size:                     166% !important;
     line-height:                   100% !important;
     padding:                       0.8vw 1.2vw 0.8vw 1.2vw !important;
     font-weight:                   bold;
     text-decoration:               none;
     display:                       inline-block;
     position:                      relative;
     top:                           50%;
     left:                          50%;
     transform:                     translate(-50%, -50%);
     z-index:                       99;
}

.button a:hover{
     color:                         rgb(27, 170, 57);
     background-color:              rgb(255, 255, 255) !important;
}

@media screen and (max-width: 450px) {
.button a{
     border-width:                  1px;
     font-size:                     110% !important;
     padding:                       0.5vh 0.75vh 0.5vh 0.75vh !important;
}
}

.slogan-styling{
     color:                         rgb(27, 170, 57);
     font-family:                   'Open Sans',sans-serif;
     font-weight:                   bold;
     background:                    rgba(237, 237, 237, 0.75);
     padding:                       0.1vw 0.8vw 0.1vw 0.8vw !important;
     
}

@media screen and (max-width: 450px) {
.slogan-styling{
     display:                       none;
}
}

.slogan1 {
     font-size:                     1.8vw !important;
     position:                      relative;
     top:                           21%;
     left:                          5%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan1{
     font-size:                     2.2vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan1{
     font-size:                     1.8vh !important;
}
}

.slogan2{
     font-size:                     1.8vw !important;
     position:                      relative;
     top:                           12%;
     left:                          44%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan2{
     font-size:                     2.2vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan2{
     font-size:                     1.8vh !important;
}
}

.slogan3{
     font-size:                     1.3vw !important;
     position:                      relative;
     top:                           9%;
     left:                          24%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan3{
     font-size:                     1.7vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan3{
     font-size:                     1.3vh !important;
}
}

.slogan4{
     font-size:                     1.3vw !important;
     position:                      relative;
     top:                           30%;
     left:                          83%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan4{
     font-size:                     1.7vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan4{
     font-size:                     1.3vh !important;
}
}

.slogan5{
     font-size:                     1.1vw !important;
     position:                      relative;
     top:                           28%;
     left:                          32%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan5{
     font-size:                     1.5vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan5{
     font-size:                     1.1vh !important;
}
}

.slogan6{
     font-size:                     1.1vw !important;
     position:                      relative;
     top:                           12%;
     left:                          82%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan6{
     font-size:                     1.5vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan6{
     font-size:                     1.1vh !important;
}
}

.slogan1b{
     font-size:                     1.8vw !important;
     position:                      relative;
     top:                           15%;
     left:                          5%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan1b{
     font-size:                     2.2vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan1b{
     font-size:                     1.8vh !important;
}
}

.slogan2b{
     font-size:                     1.8vw !important;
     position:                      relative;
     top:                           72%;
     left:                          50%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan2b{
     font-size:                     2.2vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan2b{
     font-size:                     1.8vh !important;
}
}

.slogan3b{
     font-size:                     1.3vw !important;
     position:                      relative;
     top:                           42%;
     left:                          2%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan3b{
     font-size:                     1.7vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan3b{
     font-size:                     1.3vh !important;
}
}

.slogan4b{
     font-size:                     1.3vw !important;
     position:                      relative;
     top:                           80%;
     left:                          12%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan4b{
     font-size:                     1.7vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan4b{
     font-size:                     1.3vh !important;
}
}

.slogan5b{
     font-size:                     1.1vw !important;
     position:                      relative;
     top:                           7%;
     left:                          55%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan5b{
     font-size:                     1.5vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan5b{
     font-size:                     1.1vh !important;
}
}

.slogan6b{
     font-size:                     1.1vw !important;
     position:                      relative;
     top:                           8%;
     left:                          78%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan6b{
     font-size:                     1.5vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan6b{
     font-size:                     1.1vh !important;
}
}

.slogan1c{
     font-size:                     1.3vw !important;
     position:                      relative;
     top:                           15%;
     left:                          5%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan1c{
     font-size:                     2.2vw !important;
}
}
    
@media screen and (max-width: 450px) {
.slogan1c{
     font-size:                     1.8vh !important;
}
}

.slogan2c{
     font-size:                     1.8vw !important;
     position:                      relative;
     top:                           72%;
     left:                          65%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan2c{
     font-size:                     2.2vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan2c{
     font-size:                     1.8vh !important;
}
}

.slogan3c{
     font-size:                     1.3vw !important;
     position:                      relative;
     top:                           38%;
     left:                          7%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan3c{
     font-size:                     1.7vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan3c{
     font-size:                     1.3vh !important;
}
}

.slogan4c{
     font-size:                     1.3vw !important;
     position:                      relative;
     top:                           5%;
     left:                          65%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan4c{
     font-size:                     1.7vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan4c{
     font-size:                     1.3vh !important;
}
}

.slogan5c{
     font-size:                     1.1vw !important;
     position:                      relative;
     top:                           60%;
     left:                          3%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800x) {
.slogan5c{
     font-size:                     1.5vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan5c{
     font-size:                     1.1vh !important;
}
}

.slogan6c{
     font-size:                     1.1vw !important;
     position:                      relative;
     top:                           20%;
     left:                          75%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan6c{
     font-size:                     1.5vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan6c{
     font-size:                     1.1vh !important;
}
}

.slogan7c{
     font-size:                     1.1vw !important;
     position:                      relative;
     top:                           80%;
     left:                          6%;
     transform:                     translate(-50%, -50%);
}

@media screen and (max-width: 800px) {
.slogan7c{
     font-size:                     1.5vw !important;
}
}

@media screen and (max-width: 450px) {
.slogan7c{
     font-size:                     1.1vh !important;
}
}
    
@media screen and (max-width: 450px) {
.flex-control-nav{
     display:                       none;
}
.metaslider{
     margin-bottom:                 -8vh;
}
}

/*style for metaslider englisch */

div#metaslider_2903{
     margin-top:                    -2.3vw;
}

@media screen and (max-width: 450px) {
div#metaslider_2903{
     margin-top:                     7.8vh;
     padding-bottom:                 0.1vh;
}
}

/*style for metaslider spanisch */

div#metaslider_2907{
     margin-top:                    -2.3vw;
}

@media screen and (max-width: 450px) {
div#metaslider_2907{
     margin-top:                     7.8vh;
     padding-bottom:                 0.1vh;
}
}

/* style for featured image */

.size-post-thumbnail {
     width:                         100%;
     height:                        auto;
     z-index:                       -10;
}

/* styles for desktop menu */

#hauptmenue {
    position:                       relative;
    float:                          right;
    padding-top:                    3.9vw;
	padding-right:                  2vw;
    background-color:               rgb(255, 255, 255);
    z-index:                        5;
    display:                        block;
}

@media screen and (max-width: 800px) {
#hauptmenue {
    position:                       fixed;
    display:                        none;
}
}

@media screen and (min-width: 800px) {

.menu ul{
    background-color:               rgb(255, 255, 255);
    
}

.menu a {
    font-size:                      100%;
    font-weight:                    400;
    color:                          rgb(80, 80, 80);
    text-decoration:                none;
}

.menu li a:hover {
    color:                          rgb(27, 170, 57);
}

.menu li {
    position:                       relative;
    padding:                        0.25vw 1.2vw 0.25vw 0.5vw;
    display:                        inline-block;
}

.menu ul {
    display:                        none;
    position:                       absolute;
    margin-top:                     0.2vw;
    padding:                        0.5vw 0vw 0.5vw 0vw;
    background:                     rgba(255, 255, 255, 0.9);
    border-left-style:              solid;
    border-left-width:              1px;
    border-left-color:              rgb(27, 170, 57);
}

.menu li li {
    display:                        block;
    white-space:                    nowrap;
}

.menu li:hover > ul {
    display:                        block;
}

.menu > li.current_page_item > a {
    color:                          rgb(27, 170, 57);
}

.menu li ul li.current_page_item a {
    color:                          rgb(27, 170, 57);
}

.menu li.current_page_item a:hover {
    color:                          rgb(73, 187, 97);
}

.menu > li.current-menu-ancestor > a {
    color:                          rgb(27, 170, 57);
}
    
.menu > li.current-page-ancestor > a {
    color:                          rgb(27, 170, 57);
} 
    
.menu-hauptmenue-englisch-container {
    margin-right:                   2vw;
}

.menu-hauptmenue-spanisch-container {
    margin-right:                   6vw;
}
    
}

/* styles for desktop menu end */


/* styles for mobilemenu */

/*800*/

@media screen and (max-width: 800px) {
    
#mobilemenu .menu-hauptmenue-container, #mobilemenu .menu-hauptmenue-englisch-container, #mobilemenu .menu-hauptmenue-spanisch-container {
    background:                     rgba(255, 255, 255, 1);
}

#mobilemenu .menu-hauptmenue-container:focus, #mobilemenu .menu-hauptmenue-englisch-container:focus, #mobilemenu .menu-hauptmenue-spanisch-container:focus {
    outline:                        none;
}
    
.menu-hauptmenue-container ul, .menu-hauptmenue-englisch-container ul, .menu-hauptmenue-spanisch-container ul {
    margin:                         0;
    padding:                        0;
    list-style:                     none;
}
                   
.menu-hauptmenue-container ul li a, .menu-hauptmenue-englisch-container ul li a, .menu-hauptmenue-spanisch-container ul li a {
    color:                          rgb(80, 80, 80);
    display:                        block;
    font-size:                      120%;
    padding:                        3.15vw 3vw;
    margin:                         -3px 0 -3px 0;
    text-decoration:                none;
}
    
.menu-hauptmenue-container ul li a:hover, .menu-hauptmenue-englisch-container ul li a:hover, .menu-hauptmenue-spanisch-container ul li a:hover {
    color:                          rgb(73, 187, 97);
    text-decoration:                none;
}
    
.menu-hauptmenue-container ul ul li, .menu-hauptmenue-englisch-container ul ul li, .menu-hauptmenue-spanisch-container ul ul li {
    background:                     rgba(237, 237, 237, 1);
}
    
.menu-hauptmenue-container ul ul li a, .menu-hauptmenue-englisch-container ul ul li a, .menu-hauptmenue-spanisch-container ul ul li a {
    color:                          rgb(80, 80, 80);
    display:                        block;
    font-size:                      120%;
    padding:                        1.8vw 1vw 1.8vw 5vw;
}   

.menu-hauptmenue-container ul ul li a:hover, .menu-hauptmenue-englisch-container ul ul li a:hover, .menu-hauptmenue-spanisch-container ul ul li a:hover {
    color:                          rgb(73, 187, 97);
}
    
.menu > li.current_page_item > a {
    color:                          rgb(27, 170, 57);
}

.menu > li.current_page_ancestor > a {
    color:                          rgb(27, 170, 57);
} 
    
.menu ul li.current_page_item a {
    color:                          rgb(27, 170, 57);
}

.menu ul ul li.current_page_item a {
    color:                          rgb(27, 170, 57);
}

.menu ul li.current_page_item a:hover {
    color:                          rgb(73, 187, 97);
}

.menu li.current-menu-ancestor > a {
    color:                          rgb(27, 170, 57);
}
    
.menu li.current-page-ancestor > a {
    color:                          rgb(27, 170, 57);
} 
    
ul li.has-subnav .accordion-btn {
    color:                          rgb(80, 80, 80); 
    background:                     rgba(237, 237, 237, 1);
    font-size:                      200%;
    margin-right:                   0;
    padding:                        0;
}

.accordion-btn-wrap{
    width:                          12vw !important;
}
    
.accordion-active{
    width:                          12vw !important;
}
    
}

/*800 end*/

/*450*/

@media screen and (max-width: 450px) {
    
.menu-hauptmenue-container ul li a, .menu-hauptmenue-englisch-container ul li a, .menu-hauptmenue-spanisch-container ul li a {
    font-size:                      120%;
    padding:                        3vh 3vh;
    margin:                         -1px 0 -1px 0;
}
    
.menu-hauptmenue-container ul ul li a, .menu-hauptmenue-englisch-container ul ul li a, .menu-hauptmenue-spanisch-container ul ul li a {
    font-size:                      120%;
    line-height:                    normal;
    padding:                        1.5vh 1vh 1.5vh 5vh;
}        
			
ul li.has-subnav .accordion-btn {
    font-size:                      200%;
    margin-right:                   -0.5vh;
    padding:                        0;
}
    
.accordion-btn-wrap{
    width:                          12vh !important;
}
    
.accordion-active{
    width:                          12vh !important;
}
		
}

/*450 end*/

/* styles for mobilemenu end */


/* offcanvas-menu-function and hamburger */

#mobilemenu {
    display:                        none;
    overflow:                       hidden;
}

@media screen and (max-width: 800px) {
#mobilemenu {
    width:                          50vw;
    position:                       relative;
    z-index:                        10;
}
}

@media screen and (max-width: 450px) {
#mobilemenu {
    width:                          75vw;
    position:                       relative;
    z-index:                        10;
}
}

@media screen and (max-width: 800px) {
#mobilemenu {
    display:                        block;
}
}

#mobilemenu ul {
    height:                         100%;
    display:                        flex;
    flex-direction:                 column;
}

#mobilemenu li a {
    display:                        block;
    transition:                     color .1s;
}

@media screen and (max-width: 800px) {
#offcanvas-sidebar {
    width:                          50vw;
    position:                       absolute;
    top:                            12.5vw;
    background:                     rgba(255, 255, 255, 0);
    overflow-x:                     hidden;
    overflow-y:                     auto;
    transition:                     all 800ms ease;
    z-index:                        99;
    overflow:                       hidden;
}
}

@media screen and (max-width: 450px) {
#offcanvas-sidebar {
    width:                          75vw;
    position:                       absolute;
    top:                            13.5vh;
    background:                     rgba(255, 255, 255, 0);
    overflow-x:                     hidden;
    overflow-y:                     auto;
    transition:                     all 800ms ease;
    z-index:                        99;
}
}

@media screen and (max-width: 800px) {
#offcanvas-sidebar {
    box-shadow:                     1px 1px 2px 1px rgba(0, 0, 0, 0.2);
}
}

#page-wrap {
       background:                  #fff;
       transition:                  all 800ms ease;
}


@media screen and (max-width: 800px) {
#offcanvas-navicon {
       position:                    absolute;
       top:                         4vw;
       z-index:                     110;
       height:                      7.3vw;
       width:                       7.9vw;
       padding:                     0.45vw 0.90vw 0.45vw 0.40vw;
       margin-right:                1.8vw;
       -webkit-transition:          0.2s ease-in-out;
       -moz-transition:             0.2s ease-in-out;
       -o-transition:               0.2s ease-in-out;
       transition:                  0.2s ease-in-out;
       background:                  rgb(255,255,255);
       -moz-box-sizing:             border-box;
       -webkit-box-sizing:          border-box;
       box-sizing:                  border-box;
       transition:                  all 800ms ease;
       display:                     none;
}
}

@media screen and (max-width: 450px) {
#offcanvas-navicon {
       position:                    absolute;
       top:                         3vh;
       z-index:                     110;
       height:                      7.3vh;
       width:                       7.9vh;
       padding:                     0.45vh 0.90vh 0.45vh 0.40vh;
       margin-right:                1.3vh;
}
}


@media screen and (max-width: 800px) {
#offcanvas-navicon:after,#offcanvas-navicon:before,#offcanvas-navicon span {
       display:                     block;
       content:                     '';
       display:                     block;
       height:                      0.3vw;
       margin:                      0.98vw;
       background:                  rgb(0,0,0);
       transition:                  all 800ms ease;
}
}

@media screen and (max-width: 450px) {
#offcanvas-navicon:after,#offcanvas-navicon:before,#offcanvas-navicon span {
       display:                     block;
       content:                     '';
       display:                     block;
       height:                      0.3vh;
       margin:                      0.98vh;
       background:                  rgb(0,0,0);
       transition:                  all 800ms ease;
}
}

#offcanvas-navicon:hover {
       cursor:                      pointer;
}


@media screen and (max-width: 800px) {
.offcanvas-open #offcanvas-navicon:before {
       transform:                  translate3d(0, 1.2vw, 0) rotate(135deg);
}

.offcanvas-open #offcanvas-navicon:after {
       transform:                  translate3d(0, -1.2vw, 0) rotate(-135deg);
}
}


@media screen and (max-width: 450px) {
.offcanvas-open #offcanvas-navicon:before {
       transform:                  translate3d(0, 1.2vh, 0) rotate(135deg);
}

.offcanvas-open #offcanvas-navicon:after {
       transform:                  translate3d(0, -1.2vh, 0) rotate(-135deg);
}
}

.offcanvas-open #offcanvas-navicon span {
       transform:                  scale(0);
}


@media screen and (max-width: 800px) {
#offcanvas-sidebar a.tab {
       padding-left:               2.8vw;
       font-weight:                400;
}
}

@media screen and (max-width: 450px) {
#offcanvas-sidebar a.tab {
       padding-left:               2.8vh;
       font-weight:                400;
}
}

#offcanvas-sidebar div {
       transition:                 all 800ms ease;
}

body #offcanvas-navicon {
       right:                      0px;
}

@media screen and (max-width: 800px) {
body #offcanvas-sidebar {
       right:                      0;
       z-index:                    80;                
       margin-right:               -60vw;
}
}

@media screen and (max-width: 450px) {
body #offcanvas-sidebar {
       right:                      0;
       z-index:                    80;                
       margin-right:               -75vw;
}
}

body.offcanvas-open #page-wrap {
       margin-left:                0;
       margin-right:               0;
}

body.offcanvas-open #offcanvas-sidebar {
       margin-right:               0;
}

@media screen and (max-width: 800px) {
#offcanvas-navicon {
        display:                   block;
}    
} 

/* offcanvas-menu-function and hamburger end */


ul#logo {
       position:                    relative;
       float:                       left;
       list-style-type:             none;
       margin:                      1.7vw 0vw 0vw 2vw;
}

@media screen and (max-width: 800px) {
ul#logo {
       margin:                      1.7vw 0vw 0vw 3vw;
}
}

@media screen and (max-width: 450px) {
ul#logo {
       margin:                      1.7vh 0vh 0vh 2vh;
}
}

ul#logo li a {
       width:                       12vw;
       height:                      calc(12vw/260*110);
       display:                     block;
       letter-spacing:              -9999px;
       text-indent:                 -9999px;
}

@media screen and (max-width: 1280px) {
ul#logo li a{
       width:                       15vw;
       height:                      calc(15vw/260*110);
}   
}

@media screen and (max-width: 800px) {
ul#logo li a{
       width:                       25vw;
       height:                      calc(25vw/260*110);
}   
}

@media screen and (max-width: 450px) {
ul#logo li a{
       width:                       21vh;
       height:                      calc(21vh/260*110);
}   
}


div#main {
       background:                  rgb(255, 255, 255);
}

div#contenttop {
       position:                    relative;
       margin:                      1vw 2vw 2vw 2vw;
}

@media screen and (max-width: 450px) {
div#contenttop {
       margin:                      1vh 2.5vh 2.5vh 2.5vh;
}
}

div#breadcrumb {
       color:                       rgb(27, 170, 57);
       font-size:                   88%;
       float:                       left;
       margin-top:                  3vw;
       margin-bottom:               2.4vw;
}

@media screen and (max-width: 450px) {
div#breadcrumb {
       color:                       rgb(27, 170, 57);
       font-size:                   88%;
       float:                       left;
       margin-top:                  4vh;
       margin-bottom:               3vh;
}    
}

div#sprachen {
       position:                    relative;
       margin:                      -12px -17px;
       font-size:                   88%;
       float:                       right;
}

div#sprachen a:hover {
       color:                       rgb(27, 170, 57);
}

.wpml-ls-display {
       color:                       rgb(80, 80, 80);
}

.wpml-ls-display:hover {
       color:                       rgb(73, 187, 97);
}

.wpml-ls-native {
       color:                       rgb(27, 170, 57);
}

.wpml-ls-native:hover {
       color:                       rgb(73, 187, 97);
}


@media screen and (max-width: 800px) {
div#sprachen {
       display:                     none;
}
}
    
div#sprachen-mobile {
       position:                    relative;
       background:                  rgba(255, 255, 255, 1);
       width:                       100%;
       float:                       left;
       font-size:                   100%;
       color:                       rgb(80, 80, 80);
       display:                     none;
}

@media screen and (max-width: 800px) {
div#sprachen-mobile {
       display:                     inline;
       padding:                     1.5vw 5vw 1.5vw 0vw;
}
}

@media screen and (max-width: 450px) {
div#sprachen-mobile a {
       padding:                     1.5vh 3vh 1.5vh 1.5vh;
}
}

    
h1 {
       font-size:                   166%;
       font-weight:                 700;
       color:                       rgb(80, 80, 80);
       margin:                      0vw 0vw 2.5vw 0vw;
       line-height:                 140%;
       text-align:                  left;
}

h1 span {
       box-shadow:                  inset 0px -0.75vw rgb(237,237,237);
}

@media screen and (max-width: 1280px) {
h1 span {
       box-shadow:                  inset 0px -1.2vw rgb(237,237,237);
}
}

@media screen and (max-width: 800px) {
h1{    
       font-size:                   140%;
       margin:                      0vw 0vw 2.5vw 0vw;
}
    
h1 span{    
       box-shadow:                  inset 0px -2vw rgb(237,237,237);
}    
}

@media screen and (max-width: 450px) {
h1{    
       font-size:                   130%;
       margin:                      0vh 0vh 3vh 0vh;
}
    
h1 span{    
       box-shadow:                  inset 0px -2vh rgb(237,237,237);
} 
}

h2 {
       font-size:                   115%;
       color:                       rgb(27, 170, 57);
       margin:                      0vw 0vw 2vw 0vw;
       line-height:                 140%;
}

@media screen and (max-width: 800px) {
h2 {
       font-size:                   110%;
       margin:                      0vw 0vw 3vw 0vw;
}
}

@media screen and (max-width: 450px) {
h2 {
       margin:                      3vh 0vh 3vh 0vh;
       -moz-hyphens: 				auto;
       -o-hyphens: 					auto;
       -webkit-hyphens: 			auto;
       -ms-hyphens: 				auto;
       hyphens: 					auto;
}   
}

h3 {
       font-size:                   100%;
       font-weight: 				bold;
	   color:                       rgb(27, 170, 57);
       margin:                      2vw 0vw 1vw 0vw;
       line-height:                 140%;
       text-align:                  left;
}
@media screen and (max-width: 800px) {
h3{
	   margin:                      3vw 0vw 2vw 0vw;
}   
}

@media screen and (max-width: 450px) {
h3{
	   margin:                      3vh 0vh 1vh 0vh;
}   
}

h4 {
       font-size:                   140%;
       color:                       rgb(27, 170, 57);
       font-style:                  italic;
       line-height:                 120%;
       margin:                      2vw 7vw 2vw 7vw;
       text-align:                  left;
}

@media screen and (max-width: 450px) {
h4{
       margin:                      3vh 0vh 3vh 0vh;
}   
}

h5 {
       font-size:                   115%;
       color:                       rgb(27, 170, 57);
       margin:                      0vw 0vw 1vw 0vw;
       line-height:                 120%;
}

@media screen and (max-width: 800px) {
h5{
       font-size:                   110%;
       margin:                      0vw 0vw 2vw 0vw;
}
}

@media screen and (max-width: 450px) {
h5{
       margin:                      3vh 0vh 3vh 0vh;
       -moz-hyphens: 				auto;
       -o-hyphens: 					auto;
       -webkit-hyphens: 			auto;
       -ms-hyphens: 				auto;
       hyphens: 					auto;
}   
}

h6 {
       font-size:                   100%;
       font-weight: 				bold;
	   color:                       rgb(27, 170, 57);
       margin:                      2vw 0vw 0vw 0vw;
       line-height:                 140%;
       text-align:                  left;
}
@media screen and (max-width: 800px) {
h6{
	   margin:                      2vw 0vw 0vw 0vw;
}   
}

@media screen and (max-width: 450px) {
h6{
	   margin:                      2vh 0vh 0vh 0vh;
}   
}

.center-text {
       text-align:                  center !important;
       width:                       85%;
       margin:                      auto;
}

.center-text h1 {
       font-size:                   200%;
       text-align:                  center !important;
       margin:                      0vw 0vh 3vw 0vw;
}

@media screen and (max-width: 800px) {
.center-text h1 {
       font-size:                   150%;
       margin:                      0vw 0vw 1.8vw 0vw;
}
}

@media screen and (max-width: 450px) {
.center-text h1 {
       font-size:                   130%;
       margin:                      0vh 0vh 3vh 0vh;
}
}
    
.center-text h2 {
       text-align:                  center !important;
       margin:                      2vw 0vw 2vw 0vw;
}

@media screen and (max-width: 800px) {
.center-text h2 {
       margin:                      0vw 0vw 2vw 0vw;
}
}

@media screen and (max-width: 450px) {
.center-text h2 {
       margin:                      3vh 0vh 3vh 0vh;
}
}
    
.start-text {
       margin:                      0vw 0vw 6vw 0vw;
}

@media screen and (max-width: 450px) {
.start-text {
       margin:                      0vh 0vh 6vh 0vh;
       -moz-hyphens: 				auto;
       -o-hyphens: 					auto;
       -webkit-hyphens: 			auto;
       -ms-hyphens: 				auto;
       hyphens: 					auto;
}
}

.start-text2 {
       margin:                      0vw 0vw 4vw 0vw;
}

@media screen and (max-width: 450px) {
.start-text2 {
       margin:                      0vh 0vh 4vh 0vh;
       -moz-hyphens: 				auto;
       -o-hyphens: 					auto;
       -webkit-hyphens: 			auto;
       -ms-hyphens: 				auto;
       hyphens: 					auto;
}
}

.start-text3 {
       margin:                      -2vw 0vw 4vw 0vw;
}

@media screen and (max-width: 450px) {
.start-text3 {
       margin:                      -2vh 0vh 4vh 0vh;
}
}

.start-text4 {
       margin:                      0vw 0vw 3vw 0vw;
}

@media screen and (max-width: 450px) {
.start-text4 {
       margin:                      0vh 0vh 3vh 0vh;
       -moz-hyphens: 				auto;
       -o-hyphens: 					auto;
       -webkit-hyphens: 			auto;
       -ms-hyphens: 				auto;
       hyphens: 					auto;
}
}

.start-text5 {
       margin:                      0vw 0vw 3vw 0vw;
}

@media screen and (max-width: 800px) {
.start-text5 {
       margin:                      0vw 0vw 6vw 0vw;
}
}

@media screen and (max-width: 450px) {
.start-text5 {
       margin:                      0vh 0vh 8vh 0vh;
}
}

.line {
      width:                        10%;
      display:                      block;
      height:                       1px;
      border:                       0;
      border-top:                   1px solid rgb(27, 170, 57);
      margin:                       7vw auto 6vw auto;
}

@media screen and (max-width: 450px) {
.line {
      width:                        20%;
      margin:                       10vh auto 9vh auto;
      margin:                       10vh auto 9vh auto;
}
}

.start-button {
       margin:                      4vw 0vw 0vw 0vw;
}

@media screen and (max-width: 800px) {
.start-button {
       margin:                      3vw 0vw 8vw 0vw;
}
}

@media screen and (max-width: 450px) {
.start-button {
       margin:                      6vh 0vh 10vh 0vh;
}
}

.start-button a{
       background-color:            rgb(27, 170, 57);
       color:                       rgb(255, 255, 255) !important;
       border-width:                2px;
       border-style:                solid;
       border-color:                rgb(237, 237, 237);
       border-radius:               1vw;
       font-size:                   115%;
       line-height:                 100%;
       padding:                     0.8vw 1.2vw 0.8vw 1.2vw !important;
       font-weight:                 bold;
       text-decoration:             none;
       display:                     inline-block;
       position:                    relative;
       left:                        50%;
       transform:                   translate(-50%, 0);
       z-index:                     99;
       text-decoration:             none !important;
}

@media screen and (max-width: 450px) {
.start-button a{
       padding:                     1vh 1.5vh 1vh 1.5vh !important;
       border-radius:               1vh;
}
}

.start-button a:hover{
       color:                       rgb(27, 170, 57) !important;
       background-color:            rgb(255, 255, 255) !important;
       text-decoration:             none;
}

@media screen and (max-width: 450x) {
.start-button a{
       border-width:                1px;
       padding:                     0.5vh 0.75vh 0.5vh 0.75vh !important;
}
}

.richediting {
       float:                       left;
       margin:                      1vw 2vw 2vw 2vw;
       text-align:                  justify;
       line-height:                 150%;
       overflow:                    hidden;
}

@media screen and (max-width: 800px) {
.richediting {
       text-align:                  justify;
       margin:                      1vw 2vw 2vw 2vw;
}
}

@media screen and (max-width: 450px) {
.richediting {
       text-align:                  justify;
       margin:                      1vh 2.5vh 2vh 2.5vh;
}
}

@media screen and (max-width: 450px) {
.richediting p {
       -moz-hyphens: 				auto;
       -o-hyphens: 					auto;
       -webkit-hyphens: 			auto;
       -ms-hyphens: 				auto;
       hyphens: 					auto;
}
}

.richediting a {
       color:                       rgb(27, 170, 57);
       text-decoration:             none;
       margin:                      0;
       padding:                     0;
}

.richediting a:hover {
       color:                       rgb(73, 187, 97);
       text-decoration:             underline;
}

.richediting ul {
       padding-left:                3vw;
       padding-bottom:              0vw;
       list-style:                  disc;
       line-height:                 150%;
       list-style-position:         outside;
	   text-align:     				left;
}

@media screen and (max-width: 800px) {
.richediting ul {
       padding-left:                4vw;
       padding-bottom:              0vw;
	   padding-top:                 1vw;
}
}

@media screen and (max-width: 450px) {
.richediting ul {
	   padding-left:                4vh;
       padding-bottom:              0vh;
	   padding-top:                 1vh;
}
}

.richediting ol {
       padding-left:                60px;
       list-style:                  decimal;
       margin-bottom:               20px;
       line-height:                 150%;
}

.richediting blockquote {
       border-left:                 1px solid rgb(27, 170, 57);
       margin:                      15px 30px 15px 0px;
       padding-left:                30px;
       font-style:                  italic;
       color:                       rgb(27, 170, 57);
}

.richediting strong {
       box-shadow:                  inset 0px -0.4vw rgb(237,237,237);
       display:                     inline;
       font-weight:                 bold;
}

@media screen and (max-width: 800px) {
.richediting strong {
       box-shadow:                   inset 0px -1.5vw rgb(237,237,237);
}
}

@media screen and (max-width: 450px) {
.richediting strong {
       box-shadow:                   inset 0px -1vh rgb(237,237,237);
}
}

.richediting strong2 {
       color:                       rgb(27, 170, 57);
       font-weight:                 bold;
}

.richediting strong3 {
       color:                       rgb(80, 80, 80);
       box-shadow:                  inset 0px -0.4vw rgb(237,237,237);
       display:                     inline;
}

@media screen and (max-width: 800px) {
.richediting strong3 {
       box-shadow:                   inset 0px -1.5vw rgb(237,237,237);
}
}

@media screen and (max-width: 450px) {
.richediting strong3 {
       box-shadow:                   inset 0px -1vh rgb(237,237,237);
       margin:                       0vh 0vh 10vh 0vh;
}
}

.description {
       text-align:                   left;
       line-height:                  150%;
       margin:                       0 0 2.5vw 0;
}

@media screen and (max-width: 450px) {
.description {
       margin:                       3vh 0vh 3vh 0vh;
}
}

.flex-container {
      display:                      flex;
      flex-flow:                    row wrap;
      justify-content:              center;
      margin:                       0vw 0vw 2vw 0vw;
}

@media screen and (max-width: 450px) {
.flex-container {
      margin:                       0vh 0vh 0vh 0vh;
}
}

.flex-container2 {
      display:                      flex;
      flex-flow:                    row wrap;
      justify-content:              center;
      margin:                       0vw 0vw 6vw 4vw;
}

@media screen and (max-width: 450px) {
.flex-container2 {
      margin:                       0vh 0vh 2vh 0vh;
}
}

.flex-item-2 {
      width:                        30%;
      height:                       auto;
      margin-left:                  2vw;
      text-align:                   left;
}

@media screen and (max-width: 800px) {
.flex-item-2 {
      width:                        48%;
      margin-left:                  0;
}
}

@media screen and (max-width: 450px) {
.flex-item-2 {
      width:                        100%;
      margin:                       0vh 0vh 0vh 0vh;
}
}

.flex-item-2 ul {
      margin:                       0;
}

@media screen and (max-width: 450px) {
.flex-item-2 ul {
      margin:                       0vh 0vh 2vh 0vh;
}
}

.flex-item-2 li {
      list-style-position:          outside;
	  line-height:                  150%;
}

@media screen and (max-width: 450px) {
.flex-item-2 li {
       padding-left:                0vh;
       padding-top:                 0vh;
       list-style-position:         outside;
       text-align:                  left;
}
}


.flex-item-3 {
      width:                        30%;
      height:                       auto;
      text-align:                   center;
      margin:                       1vw;
}

.flex-item-3 img {
      width:                        100%;
      height:                       auto;
}

@media screen and (max-width: 450px) {
.flex-item-3 {
      width:                        100%;
}
}

.flex-container-center {
      display:                      flex;
      flex-flow:                    row wrap;
      justify-content:              center;
      align-items:                  center;
      margin:                       0vw 0vw 4vw 0vw;
}

@media screen and (max-width: 800px) {
.flex-container-center {
      margin:                       5vw 0vw 5vw 0vw;
}
}

@media screen and (max-width: 450px) {
.flex-container-center {
      margin:                       0vh 0vw 2vh 0vh;
}
}

.flex-item-50 {
      width:                        45%;
      height:                       auto;
      text-align:                   center;
      margin:                       1vw;
}

@media screen and (max-width: 450px) {
.flex-item-50 {
      width:                        45%;
      height:                       auto;
      text-align:                   center;
      margin:                       1vh 1vh 5vh 1vh;
}
}

.flex-item-50 img {
      width:                        100%;
      height:                       auto;
}

@media screen and (max-width: 450px) {
.flex-item-50 {
      width:                        100%;
}
}
    
img {
       border:                      0px;
       margin:                      0px;
       padding:                     0px;
}

img.alignleft {
       position:                    relative;
       float:                       left;
       margin:                      0.3vw 1.5vw 1vw 0;
}

@media screen and (max-width: 1280px) {
img.alignleft {
       margin:                      0.3vw 1.5vw 1vw 0;
}
}

@media screen and (max-width: 450px) {
img.alignleft {
       margin:                      0 0 2.5vh 0;
       width:                       100%;
       height:                      auto;
}
}

img.alignright {
       position:                    relative;
       float:                       right;
       margin:                      0.3vw 0 1vw 1.5vw;
}

@media screen and (max-width: 1280px) {
img.alignright {
       margin:                      0.3vw 0 1vw 1.5vw;
}
}

@media screen and (max-width: 450px) {
img.alignright {
       margin:                      0 0 2.5vh 0;
       width:                       100%;
       height:                      auto;
}
}

img.aligncenter {
       display:                     block;
       margin-left:                 auto;
       margin-right:                auto;
       width:                       60%;
       height:                      auto;
       margin-top:                  3vw;
}

@media screen and (max-width: 450px) {
img.aligncenter {
       width:                       90%;
       margin-top:                  3vh;
}
}

.img100 {
      width:                        100%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 1% 0;
}

@media screen and (max-width: 450px) {
.img100 {
      width:                        100%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 2% 0;
}
}

.img90-left {
      width:                        89%;
      height:                       auto;
      float:                        left;
      margin:                       0 1% 1% 0;
}

.img90-right {
      width:                        89%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 1% 0;
}

@media screen and (max-width: 450px) {
    
.img90-left {
      width:                        88%;
      height:                       auto;
      float:                        left;
      margin:                       0 2% 2% 0;
}

.img90-right {
      width:                        88%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 2% 0;
}
}

.img80-left {
      width:                        79%;
      height:                       auto;
      float:                        left;
      margin:                       0 1% 1% 0;
}

.img80-right {
      width:                        79%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 1% 0;
}

@media screen and (max-width: 450px) {
.img80-left {
      width:                        78%;
      height:                       auto;
      float:                        left;
      margin:                       0 2% 2% 0;
}

.img80-right {
      width:                        78%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 2% 0;
}
}
    
.img70-left {
      width:                        69%;
      height:                       auto;
      float:                        left;
      margin:                       0 1% 1% 0;
}

.img70-right {
      width:                        69%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 1% 0;
}

@media screen and (max-width: 450px) {
    
.img70-left {
      width:                        68%;
      height:                       auto;
      float:                        left;
      margin:                       0 2% 2% 0;
}

.img70-right {
      width:                        68%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 2% 0;
}
}

.img60-left {
      width:                        59%;
      height:                       auto;
      float:                        left;
      margin:                       0 1% 1% 0;
}

.img60-right {
      width:                        59%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 1% 0;
}

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

.img60-left {
      width:                        58%;
      height:                       auto;
      float:                        left;
      margin:                       0 2% 2% 0;
}

.img60-right {
      width:                        58%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 2% 0;
}
}

.img50-left {
      width:                        49.5%;
      height:                       auto;
      float:                        left;
      margin:                       0 1% 1% 0;
}

.img50-right {
      width:                        49.5%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 1% 0;
}

@media screen and (max-width: 450px) {
.img50-left {
      width:                        49%;
      height:                       auto;
      float:                        left;
      margin:                       0 2% 2% 0;
}
    
.img50-right {
      width:                        49%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 2% 0;
}
}

.img40-left {
      width:                        49%;
      height:                       auto;
      float:                        left;
      margin:                       0 1% 1% 0;
}

.img40-right {
      width:                        49%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 1% 0;
}

@media screen and (max-width: 450px) {
.img40-left {
      width:                        39%;
      height:                       auto;
      float:                        left;
      margin:                       0 2% 2% 0;
}

.img40-right {
      width:                        39%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 2% 0;
}
}

.img33-left {
      width:                        32.666%;
      height:                       auto;
      float:                        left;
      margin:                       0 1% 1% 0;
}

.img33-right {
      width:                        32.666%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 1% 0;
}

@media screen and (max-width: 450px) {
.img33-left {
      width:                        32%;
      height:                       auto;
      float:                        left;
      margin:                       0 2% 2% 0;
}

.img33-right {
      width:                        32%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 2% 0;
}
}

.img25-left {
      width:                        24.25%;
      height:                       auto;
      float:                        left;
      margin:                       0 1% 1% 0;
}

.img25-right {
      width:                        24.25%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 1% 0;
}

@media screen and (max-width: 450px) {
    
.img25-left {
      width:                        23.5%;
      height:                       auto;
      float:                        left;
      margin:                       0 2% 2% 0;
}

.img25-right {
      width:                        23.5%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 2% 0;
}
}

.img20-left {
      width:                        19.2%;
      height:                       auto;
      float:                        left;
      margin:                       0 1% 1% 0;
}

.img20-right {
      width:                        19.2%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 1% 0;
}

@media screen and (max-width: 450px) {
    
.img20-left {
      width:                        18.4%;
      height:                       auto;
      float:                        left;
      margin:                       0 2% 2% 0;
}

.img20-right {
      width:                        18.4%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 2% 0;
}
}

.img10-left {
      width:                        9.1%;
      height:                       auto;
      float:                        left;
      margin:                       0 1% 1% 0;
}

.img10-right {
      width:                        9.1%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 1% 0;
}

@media screen and (max-width: 450px) {
.img10-left {
      width:                        8.2%;
      height:                       auto;
      float:                        left;
      margin:                       0 2% 2% 0;
}

.img10-right {
      width:                        8.2%;
      height:                       auto;
      float:                        left;
      margin:                       0 0 2% 0;
}
}

.map-wrapper {
      width:                        66vw;
      height:                       33vw;
}

@media screen and (max-width: 1280px) {
.map-wrapper {
      width:                        86vw;
      height:                       43vw;
}
}

@media screen and (max-width: 450px) {
.map-wrapper {
      width:                        90vw;
      height:                       90vw;
}
}
  
div#footer-wrapper {
       width:                       70vw;
       height:                      8vw;
       overflow:                    hidden;
       margin:                      2vh auto;
       border-top-style:            solid;
       border-top-width:            1px;
       border-top-color:            rgb(27, 170, 57);
       padding-bottom:              1vw;
}

@media screen and (max-width: 1280px) {
div#footer-wrapper{
       width:                       90vw;
}   
}

@media screen and (max-width: 800px) {
div#footer-wrapper{
       width:                       96vw;
       margin:                      0 2vw 0 2vw;
       height:                      15vw;
}   
}    
    
@media screen and (max-width: 450px) {
div#footer-wrapper{
       width:                       92vw;
       margin:                      0 4vw 0 4vw;
       height:                      20vh;
}   
}

div#footer {
       position:                    relative;
       font-size:                   88%;
       margin:                      0.8vw 2vw 2vw 2vw;
       line-height:                 1.3;
       color:                       rgb(80, 80, 80);
}

@media screen and (max-width: 800px) {
div#footer {
       margin:                      2vw 2vw 2.5vw 2vw;
}
}

@media screen and (max-width: 450px) {
div#footer {
       margin:                      1vh 0vh 2.5vh 0vh;
}
}

div#footer a {
       color:                       rgb(80, 80, 80);
       text-decoration:             none;
       display:                     inline-block;
}

div#footer a:hover {
       color:                       rgb(73, 187, 97);
       text-decoration:             none;
}

div#footer strong {
       box-shadow:                  inset 0px -0.3vw rgb(237,237,237);
       display:                     inline-block;
       color:                       rgb(80, 80, 80);
       margin-bottom:               0.3vh;
       font-size:                   100%;
}

@media screen and (max-width: 800px) {
div#footer strong {
      box-shadow:                   inset 0px -1.3vw rgb(237,237,237);
}
}

@media screen and (max-width: 450px) {
div#footer strong {
       font-size:                   2.5vh;
       box-shadow:                  inset 0px -1vh rgb(237,237,237);
}
}

div#footerleft {
       float:                       left;
}
@media screen and (max-width: 800px) {
div#footerleft {
       float:                       none;
       text-align:                  center;
       color:                       rgb(80, 80, 80);
}
}

@media screen and (max-width: 450px) {
div#footerleft a {
       color:                       rgb(80, 80, 80);
}
}

div#footerright {
       float:                       right;
}

@media screen and (max-width: 800px) {
div#footerright {
       display:                     none;
}
}


div#footerright a {
       text-decoration:             none;
       float:                       left;
}

div#footerright a:hover {
       color:                       rgb(73, 187, 97);
}


/* hide lightbox description*/

div#slb_viewer_wrap .slb_theme_slb_default .slb_details {
      display:                      none;
}

/*hide lightbox border*/

#slb_viewer_wrap .slb_theme_slb_default .slb_container {
      box-shadow:                   0 0 0 0 #000000 !important;
}

#slb_viewer_wrap .slb_theme_slb_baseline .slb_container {
      padding:                      0 !important;
}



/*lightbox-background*/

.pswp__bg{
      opacity:                      0.7 !important;
}
    
/*styles for essential grid*/



@media screen and (max-width: 450px) {
.myportfolio-container{
       margin-top:                  3vh;
}
}

.eg-search-wrapper{
      padding-left:                 3vw;
}

@media screen and (max-width: 450px) {
.eg-search-wrapper{
      padding-left:                 0vw;
}
}

.eg-search-submit {
     width:                         200px;
     margin-top:                    0.25vw !important;
}

@media screen and (max-width: 800px) {
.eg-search-submit {
    margin-top:                     5px !important;
}
}

@media screen and (max-width: 450px) {
.eg-search-submit {
    margin-top:                     7px !important;
}
}
    
.eg-search-clean {
    margin-top:                     0.25vw !important;
}

@media screen and (max-width: 800px) {
.eg-search-clean {
    margin-top:                     5px !important;
}
}

@media screen and (max-width: 450px) {
.eg-search-clean {
    margin-top:                     7px !important;
}
}

.esg-sortbutton-order {
        margin-top:                 7px;
}

 @media screen and (max-width: 450px) {
.esg-sortbutton-order {
        margin-right:               3px;
        margin-bottom:              25px;
}
}

.esg-grid {
        font-size:                  0.9vw !important;
        line-height:                1.1vw !important;
}

a.eg-herbert-hoover-element-0 {
        font-size:                  1.2vw !important;
        line-height:                1.4vw !important;
        font-weight:                700 !important;
}

@media screen and (max-width: 1280px) {
a.eg-herbert-hoover-element-0 {
        font-size:                  1.4vw !important;
        line-height:                1.4vw !important;
}
}

@media screen and (max-width: 800px) {
a.eg-herbert-hoover-element-0 {
        font-size:                  3vw !important;
        line-height:                3vw !important;
}
}

@media screen and (max-width: 450px) {
a.eg-herbert-hoover-element-0 {
        font-size:                  3vh !important;
        line-height:                3vh !important;
}
}

.eg-herbert-hoover-element-1 {
        font-size:                  0.9vw !important;
        line-height:                120%!important;
}

@media screen and (max-width: 1280px) {
.eg-herbert-hoover-element-1 {
        font-size:                  1.15vw !important;
}
}

@media screen and (max-width: 800px) {
.eg-herbert-hoover-element-1 {
        font-size:                  2.5vw !important;
}
}
@media screen and (max-width: 450px) {
.eg-herbert-hoover-element-1 {
        font-size:                  2.5vh !important;
}
}

.eg-herbert-hoover-element-6 {
        font-size:                  0.9vw !important;
        line-height:                120%!important;
}

@media screen and (max-width: 1280px) {
.eg-herbert-hoover-element-6 {
        font-size:                  1.35vw !important;
}
}

@media screen and (max-width: 800px) {
.eg-herbert-hoover-element-6 {
        font-size:                  2.5vw !important;
}
}
@media screen and (max-width: 450px) {
.eg-herbert-hoover-element-6 {
        font-size:                  2.5vh !important;
        -moz-hyphens: 				auto;
        -o-hyphens: 				auto;
        -webkit-hyphens: 			auto;
        -ms-hyphens: 				auto;
        hyphens: 					auto;
}
}

@media (max-width: 1280px) {
.esg-grid {
        font-size:                  1.35vw !important;
        line-height:                1.55vw !important;
}

@media (max-width: 450px) {
    .esg-grid {
        font-size:                  2.5vh !important;
        line-height:                2.5vh !important;
    }
  }