/***************************/
/****** import fonts *******/
/***************************/
@media screen and (min-width: 1px)
{
    /* montserrat-300 - latin -> condensed */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 300;
      src: url('../Fonts/montserrat-v14-latin-300.eot'); /* IE9 Compat Modes */
      src: local('Montserrat Light'), local('Montserrat-Light'),
           url('../Fonts/montserrat-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../Fonts/montserrat-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
           url('../Fonts/montserrat-v14-latin-300.woff') format('woff'), /* Modern Browsers */
           url('../Fonts/montserrat-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../Fonts/montserrat-v14-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
    }

    /* montserrat-400 - latin -> regular */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      src: url('../Fonts/montserrat-v14-latin-400.eot'); /* IE9 Compat Modes */
      src: local('Montserrat Regular'), local('Montserrat-Regular'),
           url('../Fonts/montserrat-v14-latin-400.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../Fonts/montserrat-v14-latin-400.woff2') format('woff2'), /* Super Modern Browsers */
           url('../Fonts/montserrat-v14-latin-400.woff') format('woff'), /* Modern Browsers */
           url('../Fonts/montserrat-v14-latin-400.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../Fonts/montserrat-v14-latin-400.svg#Montserrat') format('svg'); /* Legacy iOS */
    }

    /* montserrat-500 - latin */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 500;
      src: url('../Fonts/montserrat-v14-latin-500.eot'); /* IE9 Compat Modes */
      src: local('Montserrat Medium'), local('Montserrat-Medium'),
           url('../Fonts/montserrat-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../Fonts/montserrat-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
           url('../Fonts/montserrat-v14-latin-500.woff') format('woff'), /* Modern Browsers */
           url('../Fonts/montserrat-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../Fonts/montserrat-v14-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
    }

    /* montserrat-600 - latin */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 600;
      src: url('../Fonts/montserrat-v14-latin-600.eot'); /* IE9 Compat Modes */
      src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
           url('../Fonts/montserrat-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../Fonts/montserrat-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
           url('../Fonts/montserrat-v14-latin-600.woff') format('woff'), /* Modern Browsers */
           url('../Fonts/montserrat-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../Fonts/montserrat-v14-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
    }

    /* montserrat-700 - latin -> bold */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 700;
      src: url('../Fonts/montserrat-v14-latin-700.eot'); /* IE9 Compat Modes */
      src: local('Montserrat Bold'), local('Montserrat-Bold'),
           url('../Fonts/montserrat-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../Fonts/montserrat-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
           url('../Fonts/montserrat-v14-latin-700.woff') format('woff'), /* Modern Browsers */
           url('../Fonts/montserrat-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../Fonts/montserrat-v14-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
    }

    /* montserrat-800 - latin -> bold fat */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 800;
      src: url('../Fonts/montserrat-v14-latin-800.eot'); /* IE9 Compat Modes */
      src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'),
           url('../Fonts/montserrat-v14-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../Fonts/montserrat-v14-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
           url('../Fonts/montserrat-v14-latin-800.woff') format('woff'), /* Modern Browsers */
           url('../Fonts/montserrat-v14-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../Fonts/montserrat-v14-latin-800.svg#Montserrat') format('svg'); /* Legacy iOS */
    }

    /* <link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300" rel="stylesheet"> */
}

/***************************/
/******** DOCUMENT *********/
/***************************/
html, body {width:100%;height:100vh;overflow-x:hidden;
            padding:0;margin:0;}
body {background-image:url('/Images/Backgrounds/Classic-45-degree-seamless-pattern-for-website-background.jpg');
      background-repeat:repeat;
      font-family:'Montserrat', Verdana, sans-serif;font-weight:400;text-shadow:rgba(0,0,0,.01) 0 0 1px;} 

/***************************/
/****** Text styles ********/
/***************************/
@media screen and (min-width: 1px)
{
    /* set hyphenation for only all paragraphs */
    p { overflow-wrap: break-word;
       word-wrap: break-word;
       -webkit-hyphens:auto;
       -webkit-hyphenate-limit-before:3;
       -webkit-hyphenate-limit-after:2;
       -webkit-hyphenate-limit-chars:6 3 2;
       -webkit-hyphenate-limit-lines:2;
       -webkit-hyphenate-limit-last:always;
       -webkit-hyphenate-limit-zone:8%;   
     
       -moz-hyphens:auto;
       -moz-hyphenate-limit-chars:6 3 2;
       -moz-hyphenate-limit-lines:2;
       -moz-hyphenate-limit-last:always;
       -moz-hyphenate-limit-zone:8%;  
     
       -ms-hyphens:auto;
       -ms-hyphenate-limit-chars:6 3 2;
       -ms-hyphenate-limit-lines:2;
       -ms-hyphenate-limit-last:always;
       -ms-hyphenate-limit-zone:8%;     
     

       hyphens:auto;
       hyphenate-limit-chars:6 3 2;
       hyphenate-limit-lines:2;
       hyphenate-limit-last:always;
       hyphenate-limit-zone:8%;}

    /* link in normal text */
    a.txtLink:link {color:black;font-weight:600;font-style:italic;}
        a.txtLink:visited {color:green;} /* visited link -> not sticking deu to updatepanel! */
        a.txtLink:hover, a.txtLink:active {font-style:normal;}
}
@media screen and (max-width: 480px)
{
    h1 { float:left;
         margin:0 0 15px 3%;
         font-size:calc(16px + (24 - 16) * ((100vw - 230px) / (480 - 230)));font-weight:700;}
    h2 { width:94%;clear:both;
         margin:-5px 0 0 3%;
         font-size:calc(13px + (24 - 16) * ((100vw - 230px) / (480 - 230)));font-weight:700;text-decoration:none;}
    h3 { width:100%;
         margin:0 0 0 3%;
         font-size:0.93em;font-weight:700;text-decoration:none;}
    p,ul {padding:0 3% 10px 3%;
       font-size:0.85em;line-height:1.45em;letter-spacing:0.02em;}
    a {text-decoration:none;color:black;}
    li {margin-left:3%;}
}
@media screen and (min-width: 481px) and (max-width: 650px)
{
    h1 { width:100%;clear:both;
         margin:0 0 2% 0;
         font-size:1.2em;font-weight:700;text-decoration:none;}
    h2 { width:100%;
         margin-top:-5px;
         font-size:1em;font-weight:700;text-decoration:none;}
    h3 { width:100%;float:left;
         margin:0.3em 0 0.5em 0;
         font-size:0.9em;}
    p, ul {margin:0.5em 0 10px 0;
           font-size:0.85em;line-height:1.5em;letter-spacing:0.02em;}
    a {text-decoration:none;color:black;}
}
@media screen and (min-width: 651px)
{
    h1 { width:100%;clear:both;
         display:inline-block;font-size:1.35em;font-weight:800;text-decoration:none;
         margin:-0.2em 0 0 0;}
    h2 { width:100%;
         margin:0;
         font-size:1.2em;font-weight:600;text-decoration:none;}
    h3 { width:100%;
         margin:15px 0 -0.5em 0;
         font-size:1em;font-weight:600;text-decoration:none;}
    p,ul {margin:0.5em 0 10px 0;
          font-size:0.85em;line-height:1.55em;letter-spacing:0.02em;}
    a {text-decoration:none;color:black;}
}

/***************************/
/********* Header **********/
/***************************/
@media screen and (min-width: 1px) 
{
    /* social media buttons */ 
    img.btn_social {width:30px;height:30px;
                    padding:0;margin:0;
                    background-image: url('/Images/Buttons/btn_social_4x2.png');}
    img[title="Mail"]            {background-position: 0 0;}
    img[title="Facebook"]        {background-position: 90px 0;}
    img[title="Pinterest"]       {background-position: 60px 0;}
    img[title="Instagram"]       {background-position: 30px 0;}    
    img[title="Mail"]:hover      {background-position: 0 30px;}
    img[title="Facebook"]:hover  {background-position: 90px 30px;}
    img[title="Pinterest"]:hover {background-position: 60px 30px;}
    img[title="Instagram"]:hover {background-position: 30px 30px;}
}
@media screen and (max-width: 500px) {
    /* header container + wrapper */
    [class*="Header_"] {position:relative;width:94%;}
        .Header_Home {text-align:center;}
        .Header_Else {left:3%;text-align:left;}
            [class*="Header_"] > div {}

    /* name and title */
    .Naam {position:relative;display:inline-block;margin-top:10px;
           line-height:1.5em;font-size:1.6em;font-weight:800;letter-spacing:0.1em;}
    .Titel {position:relative;display:block;width:100%;
            font-size:0.8em;letter-spacing:0.1em;}

    /* menu */
    .menuContainerElse{position:relative;display:block;left:0.05em;width:94%;
                       padding:0 0 30px 0;
                       font-weight:500;}
        .menuContainerElse > a {position:relative;display:inline-block;
                                margin:0 3% 4px 0;
                                font-size:0.75em;
                                border-bottom:1px solid transparent;}
            .menuContainerElse > a:hover,
            .menuContainerElse > a:focus,
            .menuContainerElse > a:active {border-bottom: 1px solid black;}

    /* social media buttons */
    .socialMediaHome{position:relative;display:inline-block;width:108px;
                     margin:15px auto 15px auto;}
        socialMediaHome > a {float:left;
                             margin:0 3px 0 3px;}

    /* back button for small screen */
    .head_Back {position:absolute;display:inline-block;top:20px;right:5px;width:auto;
                font-size:2em;}
}
@media screen and (min-width: 501px)
{
    /* header container + wrapper */
    [class*="Header_"] {position:relative;display:inline-block;width:100%;
                       margin:0 auto;}
        .Header_Home {}
        .Header_Else {}
            [class*="Header_"] > div {position:relative;display:block;width:96%;max-width:1024px;height:90px;
                                      margin:0 auto;}

    /* name and title */
    .Naam {position:absolute;top:10px;left:0;
           line-height:1.5em;font-size:1.8em;font-weight:800;letter-spacing:0.1em;}
    .Titel {position:absolute;top:47px;left:0.05em;
            margin-top:4px;
            font-size:0.8em;font-weight:500;letter-spacing:0.15em;}

    /* menu */
    .menuContainerElse{position:absolute;display:inline-block;top:47px;left:0.05em;}
        .menuContainerElse > a {position:relative;display:inline-block;
                                margin:3px 15px 0 0;
                                line-height:1.5em;font-size:0.8em;}
            .menuContainerElse > a:hover,
            .menuContainerElse > a:focus,
            .menuContainerElse > a:active {border-bottom: 1px solid black;}

    /* social media buttons */
    .socialMediaHome{position:absolute;display:inline-block;top:20px;right:-5px;width:108px;}
        .socialMediaHome > a {float:left;
                              margin:0 3px;}

    /* back button for small screen */
    .head_Back {display:none;}
}

/***************************/
/********** Main ***********/
/***************************/
@media screen and (min-width: 1px) 
{
}
@media screen and (max-width: 480px)
{
    /* main container */
    #mainContainer{position:relative;display:block;width:100%;height:auto;}
}
@media screen and (min-width: 481px) and (max-width: 650px)
{
    /* main container */
    #mainContainer{position:relative;display:block;width:96%;left:2%;}
}
@media screen and (min-width: 651px)
{
    /* main container */
    #mainContainer{position:relative;display:block;left:0;right:0;width:96%;max-width:1024px;top:0;
                   margin:0 auto;}
}

/***************************/
/******** Homepage *********/
/***************************/
@media screen and (min-width: 1px) 
{
    .home_Img_Container {display:block;}
        .home_Img_Svg_Clipped {display:block;width:100%;height:100%;
                               vertical-align:middle;
                               -webkit-clip-path:url(#home_Img_Svg_Path);
                               clip-path:url(#home_Img_Svg_Path);}  

        .home_Img_Svg {position:absolute;width:100%;height:100%;top:0;}
}
@media screen and (max-width: 480px)
{
    /* poster image */
    .home_Img_Container {position:relative;display:block;width:100%;}

    /* materiaal */
    .home_Img_Materiaal {display:none;}
    .home_Img_Materiaal2 {position:relative;display:block;width:100%;height:auto;z-index:100;}

    /* footer aka mission statement */
    .home_Div_Footer {display:block;max-width:100%;
                      font-weight:400;}
        .home_Div_Footer > p {width:calc(100% - 6%);}
}
@media screen and (min-width: 481px) 
{
      /* poster image */
    .home_Img_Container {position:absolute;width:60%;
                         padding-bottom:15px;}

    /* materiaal */   
    .home_Img_Materiaal {position:relative;top:0;right:0;float:right;z-index:0;width:50%;}
    .home_Img_Materiaal2 {display:none;}

    /* mission statement */
    .home_Div_Footer {position:relative;display:inline-block;float:right;width:38%;
                      margin-left:20%;}
}

/***************************/
/****** Homepage menu ******/
/***************************/
@media screen and (min-width: 1px) {
    .menuWrap { }
    .menuContainerHome {position:absolute;z-index:100;}
        .menuContainerHome > a {display:inline-block;width:auto;float:left;clear:both;
                                margin:calc(0.1em + 0.1vw) 0 0 0;padding:0;
                                font-weight:800;color:#000;}
            .menuContainerHome > a:hover,
            .menuContainerHome > a:focus,
            .menuContainerHome > a:active {font-weight:800;text-shadow:-1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;color:#fcdd20;}
}
@media screen and (max-width: 480px) 
{
    .menuWrap {}
    .menuContainerHome {top:10px;}
        .menuContainerHome > a {margin-left:5%;
                                font-size:calc(0.3em + 7vw);}
}
@media screen and (min-width: 481px) and (max-width: 650px) 
{   
    .menuWrap {}
        .menuContainerHome {left:10px;top:10px;}
            .menuContainerHome > a {font-size:calc(0.5em + 4vw);}
}
@media screen and (min-width: 651px) and (max-width: 900px) 
{
    .menuWrap {}
        .menuContainerHome {left:15px;top:10px;}
            .menuContainerHome > a {font-size:calc(0.5em + 4vw);}
}
@media screen and (min-width: 901px)
{
    .menuWrap {position:absolute;top:0;right:0;width:38%;padding-bottom:58%;}
        .menuContainerHome {bottom:0;right:0;width:100%;}
            .menuContainerHome > a {font-size:calc(1.8em + 1vw);}
}

/***************************/
/********** About **********/
/***************************/
@media screen and (min-width: 1px) 
{
    /* images + object */
    .about_ImgBox_Container {position:absolute;top:0;z-index:1;}

        [class*="about_svgWrapper"] {position:absolute;display:block;
                                     vertical-align:middle;}

            [class*="about_Img_Svg_Clipped"] {position:absolute;display:block;width:100%;}

            .about_Img_Svg {width:100%;height:100%;}

     /* updatepanel + text */
    .about_Txt_Container {position:absolute;top:0;left:0;}
}
@media screen and (max-width: 480px)  
{
    /* images + object */
    .about_ImgBox_Container {width:100%;padding-top:80%;}

        .about_svgWrapper1 {width:80%;top:0;left:0;}
        .about_svgWrapper2 {width:40%;top:75%;right:0;}

            .about_Img_Svg_Clipped1 {-webkit-clip-path:url(#about_Img_Svg_Path1_2);
                                     clip-path:url(#about_Img_Svg_Path1_2);}
            .about_Img_Svg_Clipped2 {-webkit-clip-path:url(#about_Img_Svg_Path2_2);
                                     clip-path:url(#about_Img_Svg_Path2_2);}

    /* updatepanel + text */
    .about_Txt_Container {margin:0 0 2em 0;}
        .about_Txt_Container > div:nth-child(1) {width:86%;
                                                 padding-top:86%;}
        .about_Txt_Container > div:nth-child(2) {position:relative;width:47%;left:1.5%;}
        .about_Txt_Container > div:nth-child(3) {position:absolute;top:0;width:96%;
                                                 padding-bottom:96%;
                                                 border-bottom:1px solid #000;}
        .about_Txt_Container > div:nth-child(4) {padding-top:15%;}            
}
@media screen and (min-width: 481px)
{
    /* images + object */
    .about_ImgBox_Container {position:absolute;right:0;width:60%;padding-top:60%;}

        [class*="about_svgWrapper"] {width:60%;height:60%;}
        .about_svgWrapper1 {top:0;left:0;}
        .about_svgWrapper2 {bottom:0;right:0;}

            .about_Img_Svg_Clipped1 {-webkit-clip-path:url(#about_Img_Svg_Path1_1);
                                     clip-path:url(#about_Img_Svg_Path1_1);}
            .about_Img_Svg_Clipped2 {-webkit-clip-path:url(#about_Img_Svg_Path2_1);
                                     clip-path:url(#about_Img_Svg_Path2_1);}

     /* updatepanel + text */
    .about_Txt_Container {position:absolute;width:61%;
                          padding-bottom:10px;}
        .about_Txt_Container > div:nth-child(1) {float:right;width:34.3%;
                                                 padding-bottom:59%;margin:0 0 0.8em 1.2em;}
        .about_Txt_Container > div:nth-child(2) {position:absolute;top:5px;}
        .about_Txt_Container > div:nth-child(3) {position:absolute;width:164%;top:2.3em;
                                                 border-bottom:1px solid #000;}
        .about_Txt_Container > div:nth-child(4) {min-height:575px;
                                                 margin-top:3em;}
}

/***************************/
/******** Overview *********/
/***************************/
@media screen and (min-width: 1px)
{
    /* polkaDot_triangle */
    .polkaDot {position:absolute;
               pointer-events:none;
               background:none !important;}

    /* main shape css + shadow intensity 
    [class*="shadowBase"] {
                           transform:perspective(1px) translateZ(0);transition-duration:0.15s;transition-property:box-shadow;}
        .shadowBase_01:hover, .shadowBase_01:focus, .shadowBase_01:active{box-shadow:0 0 0.7em #F5F5F5;}
        .shadowBase_02:hover, .shadowBase_02:focus, .shadowBase_02:active{box-shadow:0 0 0.7em #E8E8E8;}
        .shadowBase_03:hover, .shadowBase_03:focus, .shadowBase_03:active{box-shadow:0 0 0.7em #DCDCDC;}
        .shadowBase_04:hover, .shadowBase_04:focus, .shadowBase_04:active{box-shadow:0 0 0.7em #D0D0D0;}
        .shadowBase_05:hover, .shadowBase_05:focus, .shadowBase_05:active{box-shadow:0 0 0.7em #C0C0C0;}
        .shadowBase_06:hover, .shadowBase_06:focus, .shadowBase_06:active{box-shadow:0 0 0.7em #A9A9A9;}
        .shadowBase_07:hover, .shadowBase_07:focus, .shadowBase_07:active{box-shadow:0 0 0.7em #808080;}
        .shadowBase_08:hover, .shadowBase_08:focus, .shadowBase_08:active{box-shadow:0 0 0.7em #505050;}
        .shadowBase_09:hover, .shadowBase_09:focus, .shadowBase_09:active{box-shadow:0 0 0.7em #383838;}
        .shadowBase_10:hover, .shadowBase_10:focus, .shadowBase_10:active{box-shadow:0 0 0.7em #000000;}*/

    /* circle */
    .circleBase {border-radius:50%;}
}
@media screen and (max-width: 650px) {
    /* links */
    .itemLinkContainer { display: none; }
    .itemLinkTxt { }

    /* shapes */
    .shape_Container {position:relative;overflow-x:hidden;}
        .shape_Container > div:first-child {vertical-align:middle;}

            [class*='shapeOuter'] {position:absolute;}
                [class*='shapeOuter']:hover {z-index:99 !important;}

            [class*='shapeOuter']::after, 
            [class*='shapeOuter']::before {position:absolute;
                                           opacity:0;
                                           transition:all 1s;-webkit-transition:all 1s;}

            [class*='shapeOuter']::after {content:'\A';
                                          width:100%;height:100%;top:0;left:0;
                                          background:rgba(0,0,0,0.6);}
                .shapeOuter_Circle::after {border-radius:50%;}
          
            /* */
            [class*='shapeOuter']::before {content:attr(data-content);
                                           width:100%;top:50%;transform:translateY(-50%);z-index:1;
                                           padding:4px 10px;
                                           color:#fff;text-align:center;
                                           font-size:0.8em;font-weight:600;
                                           /*background-color:#f00;*/
                                           box-sizing:border-box;-moz-box-sizing:border-box;}
            [class*='shapeOuter']:hover::after, 
            [class*='shapeOuter']:hover::before {opacity:1;}

                .shapeImg {position:absolute;width:100%;height:100%;}
}
@media screen and (min-width: 651px) 
{
    /* links */
    .itemLinkContainer{position:absolute;width:40%;left:0;}
        .itemLinkContainer > a {float:left;clear:both;
                                margin:0 auto 4px auto;
                                font-size:0.8em;color:black;letter-spacing:0.05em;line-height:1.5em;
                                border-bottom: 1px solid transparent;}
            .itemLinkContainer > a:hover, 
            .itemLinkContainer > a:focus, 
            .itemLinkContainer > a:active {border-bottom: 1px solid black;}

    /* shapes */
    .shape_Container {position:relative;width:70%;float:right;}
        .shape_Container > div:first-child {vertical-align:middle;}

            [class*='shapeOuter'] {position:absolute;}
                [class*='shapeOuter']:hover {z-index:99 !important;}

            [class*='shapeOuter']::after, 
            [class*='shapeOuter']::before {position:absolute;
                                           opacity:0;
                                           transition:all 1s;-webkit-transition:all 1s;}

            [class*='shapeOuter']::after {content:'\A';
                                          width:100%;height:100%;top:0;left:0;
                                          background:rgba(0,0,0,0.6);}
                .shapeOuter_Circle::after {border-radius:50%;}
          
            /* */
            [class*='shapeOuter']::before {content:attr(data-content);
                                           width:100%;top:50%;transform:translateY(-50%);z-index:1;
                                           padding:4px 10px;
                                           color:#fff;text-align:center;
                                           font-size:0.8em;font-weight:600;
                                           /*background-color:#f00;*/
                                           box-sizing:border-box;-moz-box-sizing:border-box;}
            [class*='shapeOuter']:hover::after, 
            [class*='shapeOuter']:hover::before {opacity:1;}

                .shapeImg {position:absolute;width:100%;height:100%;}
}

/***************************/
/********** vCard **********/
/***************************/
@media screen and (min-width: 1px) 
{
    /* adres */
    [class*=vcard] {width:100%;float:left;
                    margin-bottom:2em;
                    font-size:0.8em;line-height:1.5em;}
        [class*=vcard] > a {width:auto;float:left;clear:both;
                            color:black;}
               .vcard  > a:last-child {position:fixed;bottom:0;}
            [class*=vcard] > a > span:hover,
            [class*=vcard] > a > span:focus,
            [class*=vcard] > a > span:active {border-bottom:1px solid #000;}

     .socialMediaContact{display:inline-block;position:relative;width:100%;float:left;clear:both;
                         padding-top:0.7em;margin-bottom:0.3em;}
        .socialMediaContact > a {vertical-align:middle;}
            .socialMediaContact > a:first-child > img {margin-left:-8px;}
}
@media screen and (max-width: 480px)
{
    [class*=vcard] {width:94%;
                    padding:5% 0 0 0;margin:0 3%;
                    text-align:left;}
        [class*=vcard] > a {padding-bottom:0.8em;}
               .vcard  > a:last-child {left:3%;}
}
@media screen and (min-width: 481px) and (max-width: 650px)
{
    [class*=vcard] {width:100%;
                    padding:2% 0 0 0;}
        [class*=vcard] > a {padding-bottom:0.6em;}
               .vcard  > a:last-child {left:2%;}
}
@media screen and (min-width: 651px)
{
    [class*=vcard] {width:100%;
                    padding:3% 0 0 0;}
        [class*=vcard] > a {padding-bottom:0.6em;}
}

/***************************/
/********* txtPage *********/
/***************************/
@media screen and (min-width: 1px) 
{
}
@media screen and (max-width: 480px)
{
    /* text + image */
    .column1 {width:97%;float:left;}
    .column2 {display:block;width:97%;}
    .meTxt {margin:5px 10px 10px 0;}
    .meImg {display:block;width:100%;max-width:350px;height:auto;
            margin:0 auto 10px auto;}

    /* unorderd list markup */
    ul.abuList {width:90%;
                padding-left:15px;margin:10px 0 20px 0;}
        ul.abuList > li {padding:0 0 5px 10px;}
}
@media screen and (min-width: 481px) and (max-width: 650px)
{
    /* text + image */
    .column1 {width:65%;float:left;}
    .column2 {display:block;width:100%;}
    .meTxt {margin:5px 10px 10px 0;}
    .meImg {float:right;width:30%;max-width:350px;height:auto;
            padding:0 0 10px 10px;}

    /* unorderd list markup */
    ul.abuList {width:90%;
                padding-left:15px;}
        ul.abuList > li {padding:0 0 5px 10px;}
}
@media screen and (min-width: 651px)
{
    /* text + image */
    .column1 {width:65%;float:left;}
    .column2 {display:block;width:100%;}
    .meTxt {margin:13px 10px 10px 0;}
    .meImg {float:right;width:30%;max-width:350px;height:auto;
            padding:0 0 10px 10px;}

    /* unorderd list markup */
    ul.abuList {width:90%;
                padding-left:15px;}
        ul.abuList > li {padding:0 0 5px 10px;}
}

/***************************/
/*** Ind.Proj. Img + Txt ***/
/***************************/
@media screen and (min-width: 1px) 
{
    /*******************/
    /* image + buttons */
    /*******************/
    .main_Img_Svg_Clipped {display:block;width:100%;height:100%;
                           vertical-align:middle;
                           -webkit-clip-path:url(#main_Img_Svg_Path);
                           clip-path:url(#main_Img_Svg_Path);}
    .main_Img_Svg {position:absolute;width:100%;height:100%;top:0;left:0;}

    /*******************/
    /******* txt *******/
    /*******************/
    [class*="main_Txt_Wrapper_"] {position:relative;float:right;z-index:-1;}

        /* line under title + numberof (01/03) */
        header {position:relative;display:table;
                font-size:0.5em;}
            header div {display:table-row;
                        line-height:1.5em;font-size:2em;white-space:nowrap;}
            header span.hTxt {display:table-cell;table-layout:fixed;width:1px;
                              padding:0 5px;
                              vertical-align:middle;overflow:hidden;}

            .bigNoOf   {font-size:1em;
                        padding-right:2px;}
            .smallNoOf {font-size:0.7em;
                        padding-left:1px;}

            header span.spacerr {display:table-cell;}
            header span.spacerr:after {position:relative;display:inline-block;width:100%;height:1px;top:-1px;vertical-align:middle;
                                       content:".";
                                       font-size:0;color:transparent;
                                       background:#000;}

        /* just a line */
        .line {position:relative;display:inline-block;
                border-bottom:1px solid #000;}

        /* text */
        .blokTxt {position:relative;top:10px;width:100%;}
}
@media screen and (max-width: 650px) 
{
    .main_Container {}
        
        /*******************/
        /* image + buttons */
        /*******************/

        [class*=main_Img_Wrapper_]{position:relative;
                                   margin-bottom:10px;}

        .main_Img_Wrapper_Portrait{position:relative;width:75%;}
            .main_Img_Wrapper_Portrait > img:first-child {width:100%;height:auto;
                                                          vertical-align:middle;}

        .main_Img_Wrapper_Landscape{}
            .main_Img_Wrapper_Landscape > img:first-child {height:auto;width:100%;
                                                           vertical-align:middle;}

            /* buttons */
            .btnFrBa{position:absolute;width:30%;height:100%;top:0;}
                .btn_Transparent{position:relative;display:block;width:100%;height:100%;z-index:2;}
                .btnFrBa:hover > div > .arrow-right{border-left:10px solid lightgray;}
                .btnFrBa:hover > div > .arrow-left{border-right:10px solid lightgray;}
            div[class*=arrow]{position:absolute;width:0;height:0;top:calc(50% - 10px);
                              background-color:transparent;
                              transform:translate(-50%,-50%);
                              border-top:10px solid transparent;border-bottom:10px solid transparent;
                              line-height:100%;}
                .arrow-right{left:calc(85% - 5px);
                             border-left:10px solid white;}
                .arrow-left{left:calc(15% + 5px);
                            border-right:10px solid white;}

                /* adjustment for arrow which is too close to object/material */
                .main_Img_Wrapper_Portrait > div:nth-child(4) > div > div {left:70%;}

        /*******************/
        /******* txt *******/
        /*******************/
        .main_Txt_Wrapper_Portrait {top:10px;}
        .main_Txt_Wrapper_Landscape {margin-top:20%;}

            /* line under title + numberof (01/03) */
            header {width:100%;}
                
            /* just a line */
            .line {width:100%;height:1.3em;top:-3px;z-index:-1;}

}
@media screen and (min-width: 651px) 
{
    .main_Container {display:inline-block;width:100%;}

        /*******************/
        /* image + buttons */
        /*******************/

        [class*=main_Img_Wrapper_]  {position:relative;display:inline-block;
                                     vertical-align:middle;}
        .main_Img_Wrapper_Portrait  {width:calc(40% - 10px);
                                     margin-left:10%;}
        .main_Img_Wrapper_Landscape {width:calc(60% - 10px);} /*59.0234375%*/

            /* front & back buttons */
            .btnFrBa{position:absolute;width:30%;height:100%;top:0;}
                .btn_Transparent {position:relative;display:block;width:100%;height:100%;z-index:2;}
                .btnFrBa:hover > div > .arrow-right {border-left:10px solid lightgray;}
                .btnFrBa:hover > div > .arrow-left  {border-right:10px solid lightgray;}
            div[class*=arrow] {position:absolute;width:0;height:0;top:calc(50% - 10px);line-height:100%;
                               background-color:transparent;
                               transform:translate(-50%,-50%);
                               border-top:10px solid transparent;border-bottom:10px solid transparent;}
                .arrow-right  {left:calc(85% - 5px);
                               border-left:10px solid white;}
                .arrow-left   {left:calc(15% + 5px);
                               border-right:10px solid white;}

                /* adjustment for arrow which is too close to object/material */
                .main_Img_Wrapper_Portrait > div:nth-child(3) > div > div {left:calc(15% + 10px);}

        /*******************/
        /******* txt *******/
        /*******************/
        .main_Txt_Wrapper_Portrait {width:calc(50% - 10px);}
        .main_Txt_Wrapper_Landscape {width:39.0234375%;}

            /* line under title + numberof (01/03) */
            header {width:calc(100% + 20px);left:-20px;top:10px;}

            /* just a line */
            .line {height:1.3em;width:calc(100% + 20px);left:-20px;}

            /* text */
            .blokTxt {}
                .main_Txt_Wrapper_Portrait  > div:nth-child(3) > p:nth-last-child(1) {margin-bottom:100px;}
                .main_Txt_Wrapper_Landscape > div:nth-child(3) > p:nth-last-child(1) {}
}   

/***************************/
/****** Ind.Proj. Obj ******/
/***************************/
@media screen and (min-width: 1px) 
{
    /* PORTRAIT */
    .main_Obj_Wrapper_Portrait {position:absolute;top:0;}
        .main_Obj_Wrapper_Portrait > div:first-child {position:absolute;
                                                      vertical-align:middle;}

    /* LANDSCAPE */
    .main_Obj_Wrapper_Landscape {position:absolute;top:0;left:0;}
        .main_Obj_Wrapper_Landscape > div:first-child {position:absolute;width:80%;right:0;
                                                       padding-bottom:15px;
                                                       vertical-align:middle;}

    /* image */
    .main_Obj_Svg_Clipped,
    .main_Img_Svg_Clipped {display:block;width:100%;height:100%;
                           vertical-align:middle;}
    .main_Obj_Svg_Clipped {-webkit-clip-path:url(#main_Obj_Svg_Path);
                           clip-path:url(#main_Obj_Svg_Path);}

    /* svg */
    .main_Obj_Svg,
    .main_Img_Svg  {position:absolute;width:100%;height:100%;top:0;left:0;}
}
@media screen and (max-width: 650px)
{ 
    /* PORTRAIT */
    .main_Obj_Wrapper_Portrait {width:100%;}
        .main_Obj_Wrapper_Portrait > div:first-child {width:28%;right:0;}

    /* LANDSCAPE */
    .main_Obj_Wrapper_Landscape {width:100%;
                                 padding-bottom:90%;}
        .main_Obj_Wrapper_Landscape > div:first-child {bottom:-14px;}

    /* image */
    .main_Img_Svg_Clipped {-webkit-clip-path:url(#main_Img_Svg_Path2);
                           clip-path:url(#main_Img_Svg_Path2);}
}
@media screen and (min-width: 651px) 
{
    /* PORTRAIT */
    .main_Obj_Wrapper_Portrait {width:calc(60% - 10px);}
        .main_Obj_Wrapper_Portrait > div:first-child {width:20%;left:0;}

    /* LANDSCAPE */
    .main_Obj_Wrapper_Landscape {width:calc(60% - 10px);
                                 padding-bottom:39.1578125%;}
        .main_Obj_Wrapper_Landscape > div:first-child {bottom:calc(-36% - 10px);}

    /* image */
    .main_Img_Svg_Clipped {-webkit-clip-path:url(#main_Img_Svg_Path1);
                           clip-path:url(#main_Img_Svg_Path1);}
}

/**************************/
/** Ind.Proj. xtraImgBox **/
/**************************/
@media screen and (min-width: 1px) 
{
    /* xtraImgBox container */
    [class*='xtraImgBox_IndPag'] {position:relative;float:right;height:55px;
                                  margin-top:30px;
                                  border-right:1px solid gray;}

        /* thumbnail images -> css for all */
        [class*='xtraImgBox_IndPag'] > input[type=image] {position:relative;float:left;top:5px;}
            [class*='xtraImgBox_IndPag']> input[type=image]:hover,
            [class*='xtraImgBox_IndPag'] > input[type=image]:focus,
            [class*='xtraImgBox_IndPag'] > input[type=image]:active {border:1px solid red;}

        /* thumbnail images (except last image) */
        [class*='xtraImgBox_IndPag'] > input[type=image]:not(:nth-last-child(2)) {margin:5px;}
                [class*='xtraImgBox_IndPag'] > input[type=image]:not(:nth-last-child(2)):hover,
                [class*='xtraImgBox_IndPag'] > input[type=image]:not(:nth-last-child(2)):focus,
                [class*='xtraImgBox_IndPag'] > input[type=image]:not(:nth-last-child(2)):active {margin:4px;}

        /* last thumbnail image */
        [class*='xtraImgBox_IndPag'] > input[type=image]:nth-last-child(2) {margin:5px 0 5px 5px;}
            [class*='xtraImgBox_IndPag'] > input[type=image]:nth-last-child(2):hover,
            [class*='xtraImgBox_IndPag']> input[type=image]:nth-last-child(2):focus,
            [class*='xtraImgBox_IndPag'] > input[type=image]:nth-last-child(2):active {margin:4px 0 4px 4px;
                                                                                       border-width:1px 0 1px 1px;}

        /* see all link */
        [class*='xtraImgBox_IndPag'] > input[type=submit] {position:absolute;top:55px;right:10px;
                                                           padding-bottom:15px;
                                                           font-size:0.8em;color:black;font-style:italic;
                                                           background-color:transparent;}
            [class*='xtraImgBox_IndPag'] > input[type=submit]:hover,
            [class*='xtraImgBox_IndPag'] > input[type=submit]:focus,
            [class*='xtraImgBox_IndPag'] > input[type=submit]:active {font-style:normal;}
}
@media screen and (max-width: 650px)
{
    .xtraImgBox_IndPag_Portrait  {}
    .xtraImgBox_IndPag_Landscape {}
}
@media screen and (min-width: 651px) 
{
    .xtraImgBox_IndPag_Portrait  {margin-top:-70px;}
    .xtraImgBox_IndPag_Landscape {}
}

/***************************/
/********** Popup **********/
/***************************/
@media screen and (min-width: 1px) 
{
     #popUp_Outer {position:relative;width:100%;height:100vh;z-index:1;
                   overflow:auto;}
        #popUp_Outer > div:nth-child(3) {vertical-align:middle;}

            /* close button background */
            .closeBtn {position:fixed;top:0;left:0;height:100vh;width:100vw;min-height:100% !important;
                       background-image:url('/Images/Backgrounds/Classic-45-degree-seamless-pattern-for-website-background_gray.jpg');
                       background-repeat:repeat;}

            /* Image + btns back/front & close */
            #popUp_Outer > div:nth-child(3) > div:nth-child(2) {position:relative;display:inline-block;height:auto;z-index:1;
                                                                vertical-align:middle;}

                .popUp_Img {position:relative;display:block;}
                .popUp_BackFront {position:absolute;width:35%;}
                .popUp_Txt {position:absolute;bottom:20px;left:20px;height:30px;}
                .popUp_Close {height:29px;width:29px;bottom:20px;right:20px;
                              background-position:59px 0;background-image: url('/Images/Buttons/popup_sprite.png');}
                    .popUp_Close:hover {background-position:29px 0px;}
}
@media screen and (max-width: 480px) 
{
    #popUp_Outer {text-align:left;}

            /* Image + btns back/front & close */
            #popUp_Outer > div:nth-child(3) > div:nth-child(2) {margin-top:10px;}

                .popUp_Img {max-width:94%;max-height:calc(100vh - 70px);left:3%;}
                .popUp_BackFront {height:100%;top:0;}
                .popUp_Close {position:fixed;}
}
@media screen and (min-width: 480px) and (max-width: 651px) 
{
    #popUp_Outer {text-align:center;}

            /* Image + btns back/front & close */
            #popUp_Outer > div:nth-child(3) > div:nth-child(2) {margin-top:10px;}

                .popUp_Img {max-width:90vw;max-height:calc(100vh - 70px);}
                .popUp_BackFront {height:100%;top:0;}
                .popUp_Close {position:fixed;}
}
@media screen and (min-width: 651px) and (max-width: 851px)
{
    #popUp_Outer {display:table;}
        #popUp_Outer > div:nth-child(3) {display:table-cell;
                                         text-align:center;}

            /* Image + btns back/front & close */
            #popUp_Outer > div:nth-child(3) > div:nth-child(2) {margin-top:10px;}

                .popUp_Img {max-width:75vw;max-height:calc(100vh - 20px);}
                .popUp_BackFront {height:100%;top:0;}
                .popUp_Close {position:fixed;}
}
@media screen and (min-width: 851px) 
{
    #popUp_Outer {display:table;}
        #popUp_Outer > div:nth-child(3) {display:table-cell;
                                         text-align:center;}

            /* Image + btns back/front & close */
            #popUp_Outer > div:nth-child(3) > div:nth-child(2) {max-width:97vmin;max-height:calc(99vmin - 100px);
                                                                padding:1vmax 1vmax calc(4vmax + 29px) 1vmax;
                                                                background-color:white;}

                .popUp_Img {max-width:97vmin;max-height:calc(100vmin - 100px);}
                .popUp_BackFront {height:calc(99% - (4vmax + 35px));top:1vmax;}
                .popUp_Close {position:absolute;}
}

/**************************/
/**** PopUp xtraImgBox ****/
/**************************/
@media screen and (min-width: 1px) 
{
    .xtraImgBox_PopUp{z-index:1;}
        .xtraImgBox_PopUp > input[type=image] {position:relative;display:inline-block;
                                               margin:5px;}    
            .xtraImgBox_PopUp > input[type=image]:hover {margin:4px;
                                                         border:1px solid transparent;}
        .xtraImgBox_PopUp > input[type=image]:disabled {margin:4px;
                                                        border:1px solid red;}
}
@media screen and (max-width: 651px) 
{
    .xtraImgBox_PopUp {position:relative;width:98%;top:5px;left:1%;overflow:auto;
                       vertical-align:middle;}
        .xtraImgBox_PopUp > input[type=image] {}    
}
@media screen and (min-width: 651px)
{
    .xtraImgBox_PopUp {position:fixed;width:35px;height:calc(100% - 100px);top:20px;right:20px;}
        .xtraImgBox_PopUp > input[type=image] {float:right;} 
}