*{outline: none; margin: 0px; padding: 0px; box-sizing: border-box;}
body{font-size: 62.5%; font-family: "Alegreya", serif;}
.container-fluid{width: 100%;}
.container{width: 94%; max-width: 1240px; margin: 0 auto;}

/* Bof: Navigation Section */
.navigation{width: 100%; margin: 40px 0px 100px 0;}
.navigation .row{display: flex; justify-content: center; gap: 80px; transition: all .5s;}
.navigation .row ul{list-style: none; padding: 10px 0;}
.navigation .row ul li{width: auto; padding:8px 0;}
.navigation .row ul li a{text-decoration: none; font-size: 2em; color: #000000; transition: all .5s; position: relative; padding-left: 25px;}
.navigation .row ul li a::before{content: '>'; opacity: 0; position: absolute; left: 0px; font-size: 27px; top: -4px; transition: all .5s;}
.navigation .row ul li a:hover::before, .navigation ul li a.active::before{opacity: 9;}

.mobilelogo{display: none; width: 42px; height: auto;}
.navicon{width: 30px; height: 30px; position: absolute; right: 32px; top: 32px; display: none; z-index: 99;}
.navicon span{width: 100%; height: 2px; background-color: #000000; position: absolute; left: 0; top: 0px; transition: all .5s;}
.navicon span:nth-child(2){top: 12px;}
.navicon span:last-child{top: 24px;}
.logoname{display: none; align-items: center; border-bottom: 2px solid #ebebeb; padding-bottom: 15px; height:50px;}
.logoname a{font-size:2em; color: #000000; text-decoration: none; text-transform: uppercase; font-weight: 600;}

@media only screen and (max-width:767px){
    .navicon{display: block; right: 10px; top: 25px;}
    .navigation .row{width: 100%; left: 100%;  position: fixed; height: 100vh; display:block; display: block; top:0px; background-color: #ffffff; padding-top: 80px; z-index: 9;}
    .navigation .row ul{padding: 0;}
    .navicon.navopen + .row::after{content: ''; background-color: #ffffff; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1;}
    .navicon.navopen{position:fixed;}
    .navicon.navopen span{transform: rotate(45deg); top: 15px;}
    .navicon.navopen span:nth-child(2){display: none;}
    .navicon.navopen span:last-child{transform: rotate(-45deg); top: 15px;}
    .navigation .navicon.navopen + .row{ left: 5%; }
    .mobilelogo{display: block;}    
    .navigation{margin: 20px 0 50px 0;}
    .logoname{display: flex; align-items: center;}
}

/* Bof: Products Section */
.products{width: 100%; margin-top: 80px;}
.products .row{display: flex; flex-wrap: wrap;}
.products .row .col{flex:0 0 25%; padding: 30px 30px 100px 30px;}
.products .row .col .productbox{width: 100%;}
.products .row .col .productbox.productboxline .imgbox{border: 1px solid #363636; padding: 0 10px; height: 190px; width: 100%;}
.products .row .col .productbox.birdboxline .imgbox{border: 1px solid #363636; padding: 0 10px; height: 280px; width: 100%; overflow: hidden;}
.products .row .col .productbox.birdboxline .imgbox img{height: auto; width: 100%;}
.products .row .col .productbox .imgbox{width: 100%;}
.products .row .col .productbox .imgbox .borderimg{border: 1px solid #000000;}
.products .row .col .productbox .imgbox img{width: 100%; height: auto;}
.products .row .col .productbox .decriptionbox{width:100%; margin-top: 20px;}
.products .row .col .productbox .decriptionbox ul{list-style: none;}
.products .row .col .productbox .decriptionbox ul li{font-size: 1.2em; color: #000000; padding:2px 0;}
.products .row .col .productbox .decriptionbox ul li b{font-weight: normal;}

.products .row .col.colgrp2{flex: 0 0 48%;}
.products .row .col.colgrp2 .productbox .imgbox img.twogrp{width: 100%; display: inline-block;}
.products .row .col.birdspacing{flex: 0 0 33.33%; padding: 30px 5px 100px 30px;}
.products .row .col.colgrp3{flex: 0 0 33.33%; padding: 30px 5px 100px 30px;}
.products .row .col.colgrp10{flex: 0 0 100%;}
.products .row .col.colgrp10 .productbox .imgbox img.tengrp{width: auto; display: inline-block; padding:0 11px;}

@media only screen and (max-width:1200px){
    .products{margin:0;}
    .products .row .col{flex: 0 0 45%;}

.products .row .col.colgrp3{flex:0 0 100%;}
.products .row .col.colgrp10 .productbox .imgbox img.tengrp{max-width:49%;}
.products .row .col.colgrp2{flex: 0 0 100%;}

}

@media only screen and (max-width:767px){
    .products .row .col{flex: 0 0 100%;}
    .products .row .col.birdspacing {flex: 0 0 100%;  padding: 15px;  margin-bottom: 20px;}
}

/* Bof: Contact Section */
.contactsection{width: 100%;}
.contactsection ul{list-style: none;}
.contactsection ul li{margin: 20px 0; font-size: 1.8em; position: relative;}
.contactsection ul li img.contactlogo{width: 50px; height: auto;}
.contactsection ul li a{text-decoration: none; font-size: 1.1em; color: #000000; display: block; margin-top: -10px; text-decoration: underline;}

@media only screen and (max-width:767px){
    img.contactlogo{display: none;}
    .products .row .col.colgrp10 .productbox .imgbox img.tengrp{padding: 0 7px;}
}

/* Bof: Exihbition Section */
.exhibitionsection{width: 100%;}
.exhibitionsection strong.exihibitionheading{font-size: 2em; font-weight: normal; margin-bottom: 10px; display: block;}
.exhibitionsection p{font-size: 1.8em; margin-bottom: 50px;}
.exhibitionsection ul{list-style: none;}
.exhibitionsection ul li{font-size: 1.8em; margin: 20px 0;}

/* Bof: Introduction */
.intro{width: 100%; position: relative;}
.intro.mxwd60{max-width: 60%;}
h1.heading{font-size: 2.4em; font-weight: 500; color: #000000; margin-bottom: 30px;}
.parabox{width: 100%; margin-bottom: 30px;}
.parabox strong{font-size: 2em; font-weight: 500; margin-bottom: 8px; display: block;}
.parabox p{font-size: 1.8em; line-height: 28px; margin-bottom: 15px;}
.parabox p b{font-size: 1.1em; font-weight: 600;}
.backbtn{position: absolute; right: 0; top: 0;}
.backbtn a{display: flex; align-items: center; font-size: 1.8em; font-weight: 600; background-color: #000000; padding:6px 12px 6px 5px; color: #ffffff; text-decoration: none;}
/* Eof: Introduction */

#top{position: fixed; width: 35px; height: 35px; background-color: #565656; bottom: 20px; border-radius: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all .5s; right: 20px; transform:scale(0);}
#top > svg{width: 22px; transform: rotate(-90deg);}
#top:hover{background-color: #000000;}

.artistdom{display: block;}
.artistdom ul{list-style: none;}
.artistdom ul li{display: flex; align-items: center; margin: 5px 0;}
.artistdom ul li span{font-size: 1.8em;}
.artistdom ul li strong{font-size: 1.8em; margin: 0; padding-left: 15px;}

.artistdom2{display: block;}
.artistdom2 ul{list-style: none;}
.artistdom2 ul li{display: flex; align-items: center; margin: 5px 0;}
.artistdom2 ul li span{font-size: 1.8em;}
.artistdom2 ul li strong{font-size: 1.8em; margin: 0; padding-left: 15px;}

@media only screen and (max-width:1200px){
    .backbtn{top: -40px;}
    .artistdom ul li{align-items: flex-start; flex-direction: column; margin: 8px 0;}
    .artistdom ul li strong{padding: 0;}
}