@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,500,300,700);
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,600;1,500&display=swap');

:root {
    --background-color:rgb(152, 231, 182);;
    --primary-color: #a7929f;
    --secondary-color:  rgb(195, 202, 197);
    --title-color: rgb(255, 255, 255);
    --text-color: rgb(255, 255, 255);
    --highlight-color: rgb(223, 217, 37);

}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Raleway', sans-serif;
}
html{
    scroll-behavior: smooth;
    min-width: 100%;
}

.wrapper span{
    font-size: 1.9rem;
    color: var(--highlight-color);
}

a[href^=tel] {
text-decoration:inherit;
color: black;
}

body{
    background: var(--background-color);
    /* background: radial-gradient(circle, rgb(19,84,122) 20%, rgb(128,208,199) 100%); */ 
    background: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%);
}

section{
    min-height: 100vh;
    position: relative;
}
p{
    color: var(--text-color);
}
h1{color: var(--title-color);}
h2{
    color: var(--secondary-color);
}

.wrapper{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    min-height: 100%;
    height:100%; 
    width:100%;
    overflow:hidden;
   /* background: linear-gradient(140deg, #5d6b7c 5%, #4b8ba2 70%); */
}

.container{
    min-height: 100vh;
    min-width: 100%;
    padding: 0 0 0 0;
    max-width: 0 0 0 0;
}

.showcase{
    /* background-color: var(--primary-color); */
    height: 100vh;
    position: relative;

}

#sennenhund{
    background-image: url('../image/s_main.png');
    background-size: cover;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(3px);
    -webkit-filter: blur(3px),brightness(80%);
}

#mastiff{
    background-image: url('../image/m_main.png');
    background-size: cover;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(3px);    
    -webkit-filter: blur(3px),brightness(80%);;
}

.showcase:before {
    content:'';
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
}

.showcase .showcase-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    overflow-y:hidden;
    color: var(--title-color);
    background-color: grey;
}

.showcase .showcase-dimmer{
    height: 100%;
    width: 100%;
    color: var(--background-color);
    opacity: 50%;    
}

#gallery-info-area{
    display: grid;
    grid-template-columns:  0.05fr repeat(4,0.7fr) 0.05fr;
    grid-template-rows: 0.35fr;
    grid-gap: 45px;
    margin-top: 90px;
}

#gl1{
    grid-area: 1/2/2/3;
}
#gl2{
    grid-area: 1/3/2/4;
}
#gl3{
    grid-area: 1/4/2/5;
}
#gl4{
    grid-area: 1/5/2/6;
}

.gallery-info > p{
    font-size: 1.47rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.showcase h1{
    font-size: 4rem;
    z-index: 10;
}

.showcase h2{
    z-index: 10;
}


.showcase p{
    font-size: 1.3rem;
}

.op {
    /* display: grid; 
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px; */
    position: relative;
    min-height: 100vh;
    min-width: 100vw;
    /* background-color: #1fc8db;
	background-image: linear-gradient(40deg, #1a78d1 5%, #42a2da 70%); */
}


/* SCUW */
.scuw{
    min-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    grid-template-rows: 1fr;
    grid-column-gap: 5px;
    grid-row-gap: 0px;
}
.scuw_left{
    min-height: 100vh;
    position: relative;
    width:auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-container{
    width:100%;
    height:100%;
    position:relative;
}
.img-item {
    width:100%;
    height:100%;
    overflow:hidden;
}
.scuw_left .img-item img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position:50% 50%;
    cursor:pointer;
}
.scuw_right{
    min-height: 100vh;
    width: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
   /* background-color: wheat;
    */
}
#scuw_right_block{
    padding-top: 100px;
    width: 68%;
    display: inline-block;
    margin: 0 auto;
    align-self: center;
}
#scuw_right_block_title{
    font-size: 3.0rem;
    color:var(--title-color);
}
#scuw_right_block_desc > p {
    text-align:left;
    font-size: 2.0rem;
}
/* #scuw_right_block_desc > p:after {
   this adds an extra invisible line, so any other line is justified content:'';
    display:inline-block;
    width:100%;
    vertical-align:top;
}
*/
#scuw_right_block_desc > p > span{
    font-size: 2.3rem;
    color: var(--highlight-color);
}
/* BWUA */
.bwua{
    padding: 20px 20px 20px 20px;
    display:grid;
    grid-template-columns: repeat(6,1fr);
    grid-auto-rows:400px 300px;
    grid-gap:10px;
    grid-auto-flow: dense;
}
.bwua > h1{
    align-self: center;
    align-content: center;
    text-align: center;
    font-size: 6em;
}
.bwua_grid {
    min-height:100vh;
    min-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
#gallery-title{
    padding: 20px 10px 20px 10px;
    grid-row: 2 span;
    grid-column: 2 span;
}
#gallery-title h1{
    font-size: 2em;
    text-align: center;
    margin: 0 auto;
}
#gallery-title p{
    font-size: 1.56rem;
    padding-top: 50px;
    align-self: center;
}
#gallery-title div{
    align-self: center;
    display: contents;
}
#gallery-title span{
    color: var(--highlight-color);
}
.gallery-item{
    width:100%;
    height:100%;
    position:relative;
    overflow: hidden;
}
.gallery-item .image{
    width:100%;
    height:100%;
    overflow:hidden;
}
.gallery-item .image img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position:50% 50%;
    cursor:pointer;
    transition:.5s ease-in-out;
}
.gallery-item:hover .image img{
    transform:scale(1.025);
}
.w-1{
    grid-column: span 1;
}
.w-2{
    grid-column: span 2;
}
.w-3{
    grid-column: span 3;
}
.w-4{
    grid-column: span 4;
}
.w-5{
    grid-column: span 5;
}
.w-6{
    grid-column: span 6;
}
.h-1{
    grid-row: span 1;
}
.h-2{
    grid-row: span 2;
}
.h-3{
    grid-row: span 3;
}
.h-4{
    grid-row: span 4;
}
.h-5{
    grid-row: span 5;
}
.h-6{
    grid-row: span 6;
}

/* DMDW */
.dmdw{
    background: url('../img/simple.JPG') no-repeat center;
    background-size: cover;
    min-height:100vh;
    min-width: 100%;
}
.dmdw > div{
    position: absolute;
    right: 0;
    bottom: 0;
    height: auto;
    width: 500px;
    margin: 160px 140px 160px 140px;
   /* padding: 80px 180px 80px 180px;
    */
    border: 3px solid transparent;
    text-align: center;
}
.dmdw > div > span{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2em;
}


/* SUAA */


.suaa{
    min-height:100vh;
    min-width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.suaa > div{
    margin: 0 auto;
}
.suaa_showcase1 {
    padding-top: 100px;
    display: grid;
    grid-template-columns: 300px 550px;
    grid-template-rows: 300px;
    gap: 0px 59px;
    grid-template-areas:
      "v1 v1d";
  }
.suaa_showcase1 > a {
    height: 300px;
    width: 300px;
}

#showcaseabout {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1rem;
max-width: 1200px;
width: 100%;
} 

#showcaseabout > div {
height: 100%;
width: 100%;
display: flex;
align-content: center;
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
#showcaseabout > div > div {
width: 18em;
flex-direction: column;
font: inherit;
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
#showcaseabout > div > div div{
height: 100%;
width: 100%;
text-align: center;
font-style: italic;
margin-top: 40px;
}

.v1 { grid-area: v1; }
#v1d { 
    grid-area: v1d;

    margin: 0 auto;
}
#v1d h2{
    height: 300px;
    width: 400px;
    margin:10px;
    display:table-cell;
    color: var(--text-color);
    vertical-align:middle;
}

.v1 img{
    position: relative;
    max-width: 100%;
    max-height: 100%;
}
 .suaa_showcase2 > div > a > img{
    display: block;
    height: 250px;
}

#page-119 > #suaa > .suaa > div > .suaa_showcase1 > .v1{
    margin-top: 90px;;
}

.suaa_showcase2{
    display: grid;
    grid-template-columns: 250px 250px 250px;
    grid-template-rows: 250px;
    gap: 0px 80px;
    grid-template-areas:
      "w1 w2 w3";
  }
  .w1 { grid-area: w1; }
  .w2 { grid-area: w2; }
  .w3 { grid-area: w3; }


/* EXTRA */
@media screen and (max-width:1500px){
    .bwua{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 0.50fr;
        grid-column-gap: 20px;
        grid-row-gap: 20px; 
   }
   .w-1, .w-2,.w-3,.w-4,.w-5{
    grid-column: span 1;
    }

    .w-6{
        grid-column: span 3;
    }

    .h-1, .h-2,.h-3,.h-4,.h-5,.h-6{
    grid-row: span 1;
    }

    #gallery-info-area{
        margin-top: 0px;
        grid-template-columns: repeat(2,0.5fr);
        grid-template-rows: repeat(2,0.5fr);
        column-gap: 30px;
        row-gap: 30px;
    }
    #gallery-info-area p{
        font-size: 2.2rem;
        text-align: center;
    }
    #gallery-info-area span{
        font-size: 2.2rem;
    }
    #gl1{
        grid-area: 1/1/2/2;
    }
    #gl2{
        grid-area: 1/2/2/3;
    }
    #gl3{
        grid-area: 2/1/3/2;
    }
    #gl4{
        grid-area: 2/2/3/3;
    }
#showcaseabout {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width:1450px){   
   .gallery-info > p{
    font-size: 1.32rem;
    }
}

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

    .showcase h1{
        font-size: 2.5rem;
    }
       
    .showcase h2{
    font-size: 1.4rem;
    }


    .bwua{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 0.50fr;
        grid-column-gap: 20px;
        grid-row-gap: 20px; 
    }

   .gallery-info > p{
    font-size: 1.27rem;
}
}

@media screen and (max-width:980px){    
    .gallery-info > p{
     font-size:0.97rem;
 }
 }


@media screen and (max-width:800px){
    .bwua{
        grid-template-columns: repeat(1,1fr);
        grid-auto-rows: inherit;
   }
    .h-1,.h-2,.h-3,.h-4,.h-5,.h-6{
        grid-row:span 1;
   }
   .gallery-item .image{
    width:auto;
    height:auto;
    }
    .w-1, .w-2,.w-3,.w-4,.w-5{
    grid-column: span 1;
    }

    .w-6{
        grid-column: span 3;
    }

    .h-1, .h-2,.h-3,.h-4,.h-5,.h-6{
    grid-row: span 1;
    }

    #gallery-info-area{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4,0.25fr);
        column-gap: 30px;
        row-gap: 30px;
    }
    #gl1{
        grid-area: 1/1/2/2;
    }
    #gl2{
        grid-area: 2/1/3/2;
    }
    #gl3{
        grid-area: 3/1/4/2;
    }
    #gl4{
        grid-area: 4/1/5/2;
    }
    .gallery-info > p{
        text-align: center;
        margin-top: 30px;
        font-size:1.7rem;
    }

#showcaseabout {
grid-template-columns: repeat(1, 1fr);
} 
}

@media screen and (max-width:500px){
    .bwua{
        grid-template-columns: auto;
   }
    .w-1,.w-2,.w-3,.w-4,.w-5,.w-6{
        grid-column:span 1;
   }
}


@media (max-width: 1480px){
    .scuw{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
   }
}
@media (max-width: 1110px){
   .v1 img{
    height: 300px;
    width:300px;
    margin: 10px;
    left: 0;
    display: table-cell;
    vertical-align: middle;
   }
   #v1d h2{
    text-align: center;   }
   .suaa_showcase1{
    display: grid;
    grid-template-columns: 300px;
    grid-template-rows: 300px 300px;
    gap: 15px 0px;
    grid-template-areas:
      "v1"
      "v1d";
  }
   .suaa_showcase2 {
    display: grid;
    grid-template-columns: 250px;
    grid-template-rows: 250px 250px 250px;
    gap: 60px 0px;
    grid-template-areas:
      "w1"
      "w2"
      "w3";
  }
}
@media (max-width:800px){
    .div0{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
   }
}