/*
Theme Name: Studio Incendium
Test Domain: Studio Incendium
Version: 0.1
Description: Theme for Studio Incendium
Author: Studio Incendium
*/

/*-------------------------General-------------------------*/

html { /*enable smooth scrolling when clicking on anchor links */
	scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", 'Roboto', sans-serif;
  font-weight: 400;
  color: #1a1a1a;
  max-width: 1920px;
  margin: auto;
}

h2, .wpforms-widget h3{
  font-weight: 300;
  max-width: 1140px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 1rem;
  color: #1a1a1a;
}

.si-shadow-box, .wp-block-image img{
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
}

/*-------------------------Columns-------------------------*/

.wp-block-columns{
  max-width: 1140px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

/*-------------------------Image Blocks-------------------------*/

.wp-block-image{
  max-width: 1140px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.wp-block-image img{
  height: auto;
  width: 100%;
}

          /*-------------Image Block simple-------------*/

.si-img-simple img{
  width: auto;
  box-shadow: none;
}


/*-------------------------Paragraphs-------------------------*/

p, .ulp{
  max-width: 1140px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.ulp li{
  list-style: circle !important;
  margin-left: 36px;
}

.si-double-height{
  font-size: 2rem;
  font-weight: 300;
  line-height: 1em;
}



/*-------------------------Links-------------------------*/

a {
  text-decoration: none;
}

a:link {
color: black;
}

/* visited link */
a:visited {
color: black;
text-decoration: none;
}

/* mouse over link */
a:hover {
color:red;
text-decoration: none;
}

/* selected link */
a:active {
color: gray;
} 



/*-------------------------button-------------------------*/

.si-button{
border: 1px solid #707070 !important;
border-radius: .5rem !important;
background-color: white;
}

.si-button:hover{
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23) !important;
border: 1px solid black !important;
}

.si-button:active {
color: gray;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
transform: translate(0px,1px);
} 

/*-------------------------header-------------------------*/

.navbar-brand {
display: flex;
justify-content: space-between;
align-items: center;   
margin-right: 0px;
}

.navbar-light .navbar-toggler {

}

.navbar-light img {
height: 42px;
}

.navbar-toggler-icon {
color: #1a1a1a;
}

.header-title {
margin: 0px 0px;
font-size: 1.25rem;
}

.si-header-item {
margin: .5rem;
display: flex;
align-items: center;
}

.si-header-item > * {
margin: 0px .5rem;
}

.si-navigation{
margin-top: 0px;
margin-bottom: 0px;
}

.si-navigation > ul{
display: flex;
align-items: center;
height: 100%;
padding-left: 0px;
margin-bottom: 0px;
flex-direction: column;
}

.si-navigation a{
font-size: 1.25rem;
font-weight: 300;
}

li{
list-style: none;
}

.si-social-list{
display: flex;
align-items: center;
height: 100%;
padding-left: 0px;
margin-bottom: 0px;
justify-content: center;
}

.si-social-list a{
font-size: 1.5rem;
font-weight: 300;
}

.header-right a{
  text-decoration: none;
  padding: .5rem;
  border-radius: .5rem;
  line-height: 3rem;
}

/* header buttons */
.header-right a:link {
color: #1a1a1a;
}

/* visited link */
.header-right a:visited {
color: #1a1a1a;
text-decoration: none;
}

/* mouse over link */
.header-right a:hover {
color: #1a1a1a;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
text-decoration: none;
}

/* selected link */
.header-right a:active {
color: gray;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transform: translate(0px,1px);
} 

/*--------------------Pannellum-------------------------*/
.panorama-container {
  max-width: 1140px;
  width: 100%;
  max-height: 641px;
  height: calc((100vw - 30px) * 9 / 16);
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}


/*--------------------si cover image-------------------------*/
.si_cover_image {
margin-bottom: 64px;
}

.si-cover-height {
  height: calc(100vh - 162px - 2rem) !important;
  min-height: 290px;
  }

.si_cover_image /*.wp-block-cover__inner-container */img{
width: auto;
filter: drop-shadow(0px 5px 4px #000);
}

.si_cover_image .wp-block-media-text {
grid-template-columns: none;
}

.si_cover_image .wp-block-cover__inner-container figure{
text-align: right;
}

.si_cover_image {
text-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.si_cover_image  .wp-block-media-text__content  {
padding-left: 16px;
}

.si_cover_image_title{
  position: absolute; 
  width: 100%; 
  height: 100%;
  bottom: 0px;
  background-image: linear-gradient(0deg, rgb(256, 256, 256) 0%, rgba(256, 256, 256, 0.5) 100%);
}

.si_cover_image_title div{
  position: absolute;
  bottom: 0px;
  width: 100%;
}

/*.si_cover_image_title p{
  color: white;
}*/

.si_text_cover_image {
font-weight: 100;
font-size: 3rem;
text-shadow: 2px 2px 4px #000000;
}


/*--------------------si cover image - carousel-------------------------*/

.si-cover-carousel {
position: relative;
margin-bottom: 64px;
}

.si-cover-carousel-title{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
display: flex;
flex-wrap: wrap;
z-index: 2;
justify-content: center;
align-self: center;
align-items: center;
}

.si-cover-carousel-title img{
width: auto;
filter: drop-shadow(0px 5px 4px #000);
display: none;
}

.si-cover-carousel-title p{
flex-grow: 0;
width: auto;
padding-right: 15px;
padding-left: 15px;
margin-right: 0px;
margin-left: 0px;
color: white;
}

.carousel-inner{

}

.si-carousel-color{
width: 100%;
height: 100%;
}

.carousel-item{
background-size: cover;
background-position: 50%, 50%;
height: 100%;
}

.carousel-item img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}

/*--------------------cover image - small-------------------------*/
.si-cover-image-small{
  width: auto;
  height: 90px;
  background-image: black;
  position: relative;
  margin-bottom: 32px;  
}

.si-cover-image-small img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.si_text_cover_image_small {
  font-size: 1.5rem;
  font-weight: 400;
  bottom: 0px;
  }

/*--------------------bucket button-------------------------*/

.si-bucketbutton-container{
  max-width: 1140px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  }

.si-bucketbutton-container .wp-block-group__inner-container{
display: flex;
flex-direction: column;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
}

.si-bucketbutton {
flex-grow: 1;
height: 200px;
position: relative;
background-size: cover;
background-position: center;
}

.si-bucketbutton img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}

.si-bucketbutton p {
margin: 0.5rem;
}

.si-bucketbutton:hover img{

}

.si-bucketbutton-title {
font-size: 2rem;
margin: 0rem;
transition: ease-out 0.1s;
padding: 0px;
position: absolute;
color: white;
line-height: 1;
z-index: 10;
font-weight: 200;
top:0px;
width: auto;
text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.si-bucketbutton-content{ /*list of information*/
transition-delay: 0s;
transition-duration: 0.5s;
color:white;
position: absolute;
opacity: 1;
top: 2rem;
line-height: 1.5em;
font-size: 1rem;
padding: 0px;
font-weight: 300 !important;
text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
width: auto;
margin: 1rem !important;
}

.si-bucketbutton:hover .si-bucketbutton-title {
transform: translateY(0px);
color: white;
top: 0px;
text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.si-bucketbutton:hover .si-bucketbutton-content {
opacity: 1;
}

.si-bucketbutton:hover .si-bucketbutton-color {
opacity: 1;
}

.si-bucketbutton:active .si-bucketbutton-color {
background-color: rgba(0,0,0,1);
transition: 0s;
}

.si-bucketbutton-color{
background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,1) 100%);
/*background-color: #00000080;*/
width: 100%;
height: 100%;
position: absolute;
top: 0px;
transition-duration: .5s;
opacity: 1;
}

.si-bucketbutton:hover .si-bucketbutton-color.yellow{
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, #ab872cff 100%) !important;
}

.si-bucketbutton:hover .si-bucketbutton-color.green{
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, #588E3FFF 100%) !important;
}

.si-bucketbutton:hover .si-bucketbutton-color.blue{
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, #2D919AFF 100%) !important;
}

.si-bucketbutton-color.yellow{
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, #ab872cff 100%);
}
.si-bucketbutton-color.green{
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, #588E3FFF 100%);
}

.si-bucketbutton-color.blue{
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, #2D919AFF 100%);
}

.si-bucketbutton:active .si-bucketbutton-color.yellow {
background-color: #DDAE39;
}

.si-bucketbutton:active .si-bucketbutton-color.green {
background-color: #588E3F;
}

.si-bucketbutton:active .si-bucketbutton-color.blue {
background-color: #2D919A;
}

/*-------------------- portfolio page list -------------------------*/

.page-list{
  max-width: 1140px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  }

.page-list strong{ /*compare to si-bucketbutton-container and inner container*/
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
}

.page-list-ext-item{
  height: 200px;
  position: relative;
  background: black;
  margin: 0px !important;

}

.page-list-ext-image{
  position: absolute;
  margin: 0px !important;
  width: 100%;
  height: 100%;
}

.page-list-ext-title /*this h3 carries the gradient information*/{
  position: absolute;
  z-index: 100;
  text-align: left;
  width: 100%;
  height: 100%;
  pointer-events:none; /*this element does not have a link associated with it, so it must not block being clicked on */ 
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);  
  opacity: 1; 
  transition: 0.25s;
}

.page-list-ext-item:hover .page-list-ext-title{
  opacity: 1;
}

.page-list-ext-title a{
  /*font-size: 2rem;*/
  font-size: 2rem;
  margin: 0.5rem;
  padding: 0px;
  position: absolute;
  color: white;
  line-height: 1;
  z-index: 10;
  font-weight: 200;
  top:0px;
  width: auto;
  text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);  
  text-align: left;
  transition: ease-out 0.1s;
  top:0px;
}

.page-list-ext-item:hover .page-list-ext-title a{
  top: 0px;
}

.page-list-ext-item-content{
  z-index: 100;
  position: relative;
  margin: 0.5rem;
  opacity: 0;
}

.page-list-ext-image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;  
}

.page-list-ext-item:hover img{
  opacity: 1;
  filter: grayscale(100%);
}

.page-list-ext-item:hover .page-list-ext-item-content{
  opacity: 1;
}

/*--------------------quote box-------------------------*/

.si-quote-container{
  margin: 0px 10px;
  }
  
  .si-quote-container-desktop{
  display: none;
  }
  
  .si-quote-container-mobile{
  
  }
  
  .si-quote{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 30px;
  border-bottom: 5px solid orangered;
  }
  
  .si-quote-desktop{
  width: 556px;
  min-height: 470px;
  margin: 0px 1rem;
  }
  
  .si-quote-mobile{
  padding-left: 25px;
  padding-right: 25px;
  }
  
  .si-quote i{/*big red quote at top*/
  color: orangered;
  font-size: 2rem;
  text-align: center;
  padding: 0px;
  }
  
  .si-quote h2{/*big red quote at top*/
  font-size: 1rem;
  }
  
  .si-quote-p{
  text-align: justify;
  margin: 30px 0px;
  }
  
  .si-quote-sig{
  text-align: right;
  color: #707070;
  margin-bottom: 0px;
  width: 100%;
  }
  
  .carousel-control-prev,
  .carousel-control-next {
  width: 40px;
  }
  
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  background-image: none;
  }
  
  .carousel-control-next-icon:after
  {
  content: '>';
  font-size: 25px;
  color: orangered;
  }
  
  .carousel-control-prev-icon:after {
  content: '<';
  font-size: 25px;
  color: orangered;
  }

/*--------------------footer-------------------------*/

.si-footer-widget {
width: 100%;
display: flex;
justify-content: center;
padding-top: 64px;
}

.si-footer-widget > aside {
max-width: 1140px;
width: 100%;
}

footer {
color: white;
background-color: #434343;
display: flex;
align-items: center;
justify-content: center;
}

footer p {
text-align: center;
margin: 0px;
line-height: 1.5rem;
font-size: 0.5rem;
}

/*--------------------wpforms-------------------------*/

.wpforms-widget{

}

.wpforms-form {
padding-right: 15px;
padding-left: 15px;
}

.wpforms-field {
display: flex;
}

.wpforms-container-full {
padding-right: 15px;
padding-left: 15px;
}

.wpforms-field-label {
color: #707070;
font-weight: 400 !important;
text-align: right !important;
width: 6em !important;
flex-shrink: 0;
margin-right: 15px !important;
}

.wpforms-field-medium {
border: 1px solid #707070 !important;
border-radius: .5rem !important;
flex-grow: 1 !important;
max-width: 100% !important;
}

.wpforms-submit{
margin-left: 110px !important;
}

.wpforms-description {
max-width: 1140px;
width: 100%;
margin-right: auto;
margin-left: auto;
}

.wpforms-required-label{
  /*hide annoying "*" for required fields*/
  display: none;
}

/*--------------------changes for wide windows-------------------------*/

@media only screen and (min-width: 390px) {
.header-title {
  font-size: 1.5rem;
}

.navbar-light img {
  height: 48px;
}

.si-quote i {/*big red quote at top*/
  font-size: 3rem;
}

.si-quote h2{/*big red quote at top*/
  font-size: 1.5rem;
}

}

@media only screen and (min-width: 470px) {
.header-title {
  font-size: 2rem;
}
.si-cover-carousel-title img{
  display: inline-block;
}

footer p {
  line-height: 2rem;
  font-size: 1rem;
}

.navbar-light img {
  height: 72px;
}

.si-bucketbutton, .page-list-ext-item{
  height: 270px;
}

.si-bucketbutton-title, .page-list-ext-title a{
  font-size: 3rem;
}

.si-bucketbutton-content { /*list of information*/
  top: 2.5rem;
  font-size: 1.5rem;
  margin: 1.5rem !important;
}

}

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

.si-cover-image-small{
  height: 180px;
}

.si_text_cover_image_small {
font-size: 3rem;
font-weight: 300;
}

.si-quote-container{
  margin: 0px 70px;
}

.si-quote i {/*big red quote at top*/
  font-size: 4rem;
}

.si-quote-container .carousel-control-next-icon:after {
  font-size: 55px;
}

.si-quote-container .carousel-control-prev-icon:after {
  font-size: 55px;
}

.si-quote-mobile {
  padding-left: 55px;
  padding-right: 55px;
}

.si-quote-container .carousel-control-prev,
.si-quote-container .carousel-control-next {
  width: 70px;
}

}

@media only screen and (min-width: 768px) {
.si-navigation > ul{
  flex-direction: row;
}

.si_text_cover_image {
  font-size: 5rem;
}

.si-cover-height {
  min-height: 360px;
}

.si-bucketbutton-container .wp-block-group__inner-container{
  
}

.si-quote h2{/*big red quote at top*/
  font-size: 2rem;
}

}

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

.si-bucketbutton-container .wp-block-group__inner-container, .page-list strong{
  flex-direction: row;
}

.si-bucketbutton, .page-list-ext-item{
  height: 365px;
}


.si-bucketbutton-title, .page-list-ext-title a{
  /*color: black;*/
  font-size: 2rem;
  top:calc(50% - 0.5em) /*calc(97.5% - 1.1em) or calc(100% - 1.25em)*/;

}

.si-bucketbutton-content { /*list of information*/
  opacity: 0;
  top: 2rem;
  font-size: 1rem;
  margin: 1rem !important;
}

.si-bucketbutton-color {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 50%) !important;
}

.page-list-ext-title{
  opacity: 0;
}

.page-list-ext-item{
width: calc((100%) / 3);
}

}

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

.si-bucketbutton-title, .page-list-ext-title a{
  font-size: 2.75rem;
}

.si-bucketbutton-content { /*list of information*/
  top: 2.5rem;
  font-size: 1.5rem;
  margin: 1.5rem !important;
}

.si-quote-container-desktop{
  display: flex;
}

.si-quote-container-mobile{
  display: none;
}
}