/**
 * CSS bylt
 *
 * @author D. Amaya Rojas (diana-at-dennistiems-dot-com)
 * @author D. Tiems (info-at-dennistiems-dot-com)
 * @version 4.17.0.0 - 2020-03-27
 * @copyright Copyright BigBase
 */

/*
 * *********************************************************************************************************************
 * General style
 * For full page, like fonts, colors and body background
 * *********************************************************************************************************************
 */

  @import url('https://fonts.googleapis.com/css?family=Play:400,700&display=swap');

  :root{
 	--main-color: rgb(62, 95, 138);
  }

  h1, h1 span,
  h2, h2 span,
  h3, h3 span,
  h4, h4 span,
  h5, h5 span,
  h6, h6 span,
  small,
  body, table {  
    font-family: 'Play', sans-serif !important;
  }

 

 /*
 * *********************************************************************************************************************
 * Animations
 * General animations for everywhere
 * *********************************************************************************************************************
 */
 


/*
 * *********************************************************************************************************************
 * Location specific style
 * Paddings and backgrounds of specific locations
 * *********************************************************************************************************************
 */
      @media (max-width: 919px){
            .loc-s-6 {
                  padding: 4px 0px !important;
            }
       }

        .loc-s-2{
            padding-top:70px;
        }

        .loc-s-2:after{           
            content: "";
            background: url(/file/bg-header.jpg);
            background-size: cover;
            background-position: center;
            opacity: 0.6;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
           position: absolute;
           z-index: -1;  
        }
	.loc-h-1 {
		display: block !important;
	        width: 100% !important;
	       padding: 0px !important;
	       right: 0px !important;
	       background: rgb(43, 69, 94) !important;
	       top: 0px !important;
               min-height:70px;
	}

	.loc-h-1 .container > .row > div{
	    display: flex ;
	    align-items: center;
	    justify-content: center;
	}

	.loc-h-1 .container > .row > div:last-child {
	    justify-content: flex-end;
	}

	.loc-h-1 .container > .row > div:first-child {
	    justify-content: flex-start;   
	}

	/*.loc-h-1 .block-foreground > .container > .row > div{
	    width: inherit !important;
	}*/

       .loc-h-1 .block-background img{
               max-height: 100%;
               max-width: 100%;
               min-width: 100%;
               min-height: 100%;
               object-fit: cover;
       }
     @media(max-width:920px){
          .loc-h-1-d  > .row{
	     width:100vw;
	  }
       }
      @media(min-width:1024px){
           .loc-h-1-e{
               min-height:70px;
           }
      }
       .loc-h-1-e > .row {
            min-height: inherit;
            display: flex;
            align-items: center;
       }

       @media(max-width:1023px){
           .loc-h-1-e, 
           .loc-h-1-f{
             min-height: 0px !important;
           }
       }

	.loc-h-3 {
		background: var(--text-color-in-dark) !important;
		margin: 10px 0px !important;
	}

	.loc-h-3 .block-foreground > .container > .row > div {
		min-height: 73px;
        display: flex;
        align-items: center;
	}

	@media(min-width: 1024px){
		.loc-h-3-e{
			justify-content: flex-end;
		}	
	}
	

	.loc-h-3-e > .row,
	.loc-h-3-e > .row > div {
		width: 100%;
	}

	@media(max-width: 1023px){
		.loc-h-3-e,
		.loc-h-3-e > .row,
		.loc-h-3-e > .row >div{
			padding-right: 0px; 
		}	
	}

	.loc-h-6{
	  	background: var(--text-color-in-dark);
		transform: none !important;
		padding: 0px !important;
		padding-top: 70px !important;
    }


	.loc-h-6 .block-foreground > .container > .row > div > .row > div{
	    padding: 20 !important;
	}

	.loc-h-6 .block-background > div {
		padding: 0px;
	}

	.loc-h-6-d,
	.loc-h-6-e,
	.loc-h-6-f{
	    background:  transparent !important;
	}

	.loc-h-6-e > .row > div:last-child,
	.loc-h-6-f{
	    background: transparent !important;
	}

	@media (min-width: 920px){
	 	.loc-h-6-e > .row > div {
	 		justify-content: center;	
	 	}
	} 

	main > .loc-container {
	 	background: rgb(255, 255, 255);
	  	
	}

	.loc-m-1.block, 
	.loc-m-3.block {
	  	margin-bottom: 0px !important;
	  	margin-top: 0px !important;
	  	padding-top:30px; 
	  	padding-bottom:30px; 
	}
       footer{
           margin-bottom:0px !important;
       }

	footer .container-fixed-bottom{
	  	z-index: 10 !important;
	}

	  
	.loc-f-3,
	.loc-f-4 {
	  	background : rgb(43, 69, 94) !important;  	
	}

       .loc-f-4 .block-background img,
       .loc-f-3 .block-background img{
               max-height: 100%;
               max-width: 100%;
               min-width: 100%;
               min-height: 100%;
               object-fit: cover;
       }

	.loc-f-3-e > .row > div {
	  	padding: 30px 20px;
	  	border-left: 0.5px solid rgb(188, 195, 202);
	}

	.loc-f-3-e > .row > div:first-child{
		border-left: none;
	}
	

	@media(max-width: 919px){
	  	.loc-f-3-e > .row > div {
			border:none;
	  	}
	}

	.loc-f-4{
	  	border-top: 1px solid rgb(188, 195, 202);
	  	padding: 20px;
    }



/*
 * *********************************************************************************************************************
 * Element specific style
 * How do global wells, forms, panels, etc. look like
 * *********************************************************************************************************************
 */
  
  .btn-primary{
  	color: var(--text-color-in-dark) !important;
        background-image:url('/file/bg-header2.jpg');
        background-position:center;
  }

  .btn.btn-scrolltop {
  	width: 50px;
  	height: 50px;
  	border-radius: 30px;
  }

   .btn.block-overlay-toggle{
      top:12px;
   }

  .dropdown-menu li.active > a span{
  	color: var(--main-color) !important;
  }

  select,
  input,
  textarea {
  	border: 1px solid rgba(0, 0, 0, 0.7) !important;
  	border-radius: 5px !important;
  }
  form .btn.fileinput-button:hover,
  form .btn.fileinput-button:focus,
  form .btn.fileinput-button {
  	background: none;
    border: none;
  }

  .form-group legend {
        font-size: 2.3125rem !important;
        line-height: 2.625rem;
        font-weight: 700;
        padding-bottom: 10px;
  }

  .well *:not(.btn){
  	color: var(--text-color-in-dark) !important;
  }

  .thumbnail h4 {
    word-wrap: break-word;
  }

  .carousel .carousel-control .icon:before{
      top:-9px;
  }
  .carousel .icon-chevron-thin-left:before {
    content: "←";    
  }
  .carousel .icon-chevron-thin-right:before {
    content: "→";
  }

 /*
 * *********************************************************************************************************************
 * Element on location specific style
 * How do global wells, forms, panels, etc. look like on a specific location
 * *********************************************************************************************************************
 */
 	
 	.loc-s-6 .btn{
 		padding-top: 4px !important;
        padding-bottom: 4px !important
 	}

      .loc-s-2 ul {
              text-align:center;
      }

      .loc-s-2 ul  ul{
             padding-right:20px;
             padding-left:20px;
      }

 	.loc-s-2 .list li.active > a{
 		text-decoration: underline !important;
 	}
        .loc-s-2 .list li >a span,
       .loc-s-2 .list li.active >a span,
       .loc-s-2 .list li > a,
       .loc-s-2 li a,
       .loc-s-2 li a span{
              color: #fff !important;
       }

     .loc-s-2 ul li > a{ 
         font-size: 24px;
         padding: 12px;
         font-weight: 600;
     }

 	header .nav > li, 
 	header nav > ul > li {
 		min-height: auto;
 		border-bottom: 1px solid transparent;
 	}

        header .nav > li > a, 
        header nav > ul > li > a, 
        header .nav > li, 
        header nav > ul > li{
           min-height: auto;
           height:auto;
        }

 	
 	.loc-h-1 .btn-default {
 		background: var(--secondary-color);
 	}

 	.loc-h-1 a:not(.btn),
	.loc-h-1 .btn-link{
		color: var(--text-color-in-dark) !important;
	}


	.loc-h-3 img{
		max-width: 130px !important;
		max-height: 73px !important;
	}

	.loc-h-3 .nav > li a span{
 		color: var(--main-text-color) !important;
 	}

 	.loc-h-3 .dropdown-menu > li.active > a span{
 		color: var(--main-color) !important;
 	}

 	
 	@media(min-width: 1024px){
 		.loc-h-3 .nav > li:hover > a,
 		.loc-h-3 .nav > li > a{
	 		font-weight: 700 !important;
	 	}

	 	.loc-h-3 .nav > li > a:before {
	 		bottom: -10px;
		    content: "";
		    height: 2px;
		    left: 50%;
		    padding: 0;
		    position: absolute;
		    right: 50%;
		    z-index: 1;
		    width: 0px;
		    background: var(--main-color);
		    transition: all 0.3s ease-out;
	 	}

	 	.loc-h-3 .nav > li:hover > a:before{
	 		width: 100%;
	 		left: 0px;
	 		right: 0px;
	 	}
 	}
 	

 	.loc-h-3 .nav > li:hover > a span,
 	.loc-h-3 .nav > li.active > a span{
 		color: var(--main-color) !important;
 	}

 	.loc-h-6 {
 		z-index: 11 !important;
 	}

 	.loc-h-6 h1,
 	.loc-h-6 h2,
 	.loc-h-6 h3,
 	.loc-h-6 h4,
 	.loc-h-6 h5,
 	.loc-h-6 h6 {
 		position: relative;
	    margin-bottom: 20px;
	    width: max-content;
	    margin-left: auto;
	    margin-right: auto;
 	}
    

 	.loc-h-6 h1:before,
 	.loc-h-6 h2:before,
 	.loc-h-6 h3:before,
 	.loc-h-6 h4:before,
 	.loc-h-6 h5:before,
 	.loc-h-6 h6:before{
 		content: "";
 		position: absolute;
 		width: 80%;
 		height: 5px;
 		background: var(--main-color);
 		bottom: -8px;
 		left: 50%;
 		transform: translateX(-50%);
 	}



	@supports (-ms-ime-align:auto) {
	    .loc-h-6 h1:before,
	 	.loc-h-6 h2:before,
	 	.loc-h-6 h3:before,
	 	.loc-h-6 h4:before,
	 	.loc-h-6 h5:before,
	 	.loc-h-6 h6:before{
	 		width: 0px;
	 		height: 0px;
	 	}
	}

	.loc-h-6 .block-background img {
		min-height: 400px;
	}

	header .loc-h-6 .carousel-inner > .item > img,
	header .loc-h-6 .carousel-inner > .item > a > img {
		height:auto !important;
	}
	header .loc-h-6 .carousel-control,
	header .loc-h-6 .carousel-indicators,
	header .loc-h-6 .carousel-caption {
            display:none;
        }

 	main .carousel-control {
	    display: block !important;
	}

	footer a:not(.btn),
	footer .btn-link{
		color: var(--text-color-in-dark) !important;
	}

/*
 * *********************************************************************************************************************
 * Entity specific style
 * How do specific wells, forms, panels, etc. in specific entities look like
 * *********************************************************************************************************************
 */

 	.entity-article ul{
 		list-style-type: disc;
 	}

      .entity-article .btn {
         padding-top:2px !important;
      }

 	.entity-imagelist.entity-imagelist-thumbnails .caption {
 		padding: 0px;
   		margin: 0px;
    	text-align: center;
 	}

 	.entity-menu.entity-menu-navbar .navbar-transparent .navbar-toggle {
 		border: none;
 		padding-right: 0px;
 	}

 	@media (min-width: 1024px){
                .entity-menu.entity-menu-navbar img {
                      max-height: 11px !important;
                }
 		.entity-menu.entity-menu-navbar .nav > li + li:before {
		    content: "";
		    position: absolute;
		    width: 5px;
		    height: 2px;
		    background: var(--text-color-disable);
		    top: 12px;
		    left: -3px;
 		}
 	}

 	 @media (max-width: 1023px){               
               
 		.entity-menu.entity-menu-navbar,
	 	.entity-menu.entity-menu-navbar .navbar.navbar-transparent {
	 		width: inherit;
	 	}

	 	.entity-menu.entity-menu-navbar .nav {
	 		width: 100%;
	 		padding-bottom: 20px;
	 	}
	 	.entity-menu.entity-menu-navbar .nav > li:hover > a ,
	 	.entity-menu.entity-menu-navbar .nav > li > a {
	 		border-bottom: 1px solid rgb(238, 238, 238) !important;
	 	}

	 	.entity-menu.entity-menu-navbar .nav > li:last-child:hover > a ,
	 	.entity-menu.entity-menu-navbar .nav > li:last-child > a {
	 		border-bottom: none !important;
	 	}

	 	.entity-menu.entity-menu-navbar .dropdown-menu{
	 		background: rgb(250, 250, 250) !important;
	 		margin: 0px !important;
	 	}
 	}

 	.entity-catalogview .button-container, 
 	.entity-catalogview .caption {
 		border: none !important;
 	}
 	

 	.entity-catalogview-master-main .thumbnail{
 		position: relative;
 	}

        .entity-catalogview-master-main .thumbnail .code {
            display:none;
        }
 	.entity-catalogview-master-main .thumbnail .caption{
            display:none;
        }
 	.entity-catalogview-master-main .thumbnail h3{
            padding-top:6px;
        }
/*
 	.entity-catalogview-master-main .thumbnail .caption{
 		cursor: pointer;
 		position: absolute;
	    width: 100%;
	    height: 100%;
	    background: var(--main-color);
	    visibility: hidden;
	    opacity: 0;
	    z-index: 1;
	    transition: opacity .4s ease-out;
 	}

 	.entity-catalogview-master-main .thumbnail:hover .caption{
 		visibility: visible;
 		opacity: 0.7;
 	}


 	.entity-catalogview-master-main .button-container,
 	.entity-catalogview-master-main .caption,
 	.entity-catalogview-master-main .image-container{
 		margin: 0px !important;
 		padding: 0px !important;
 	}
 	.entity-catalogview-master-main .caption span,
 	.entity-catalogview-master-main .thumbnail > h3 {
 		position: absolute;
 		max-width: 90%;
 		overflow: hidden;
 		color: var(--text-color-in-dark); 		
 	}

 	.entity-catalogview-master-main .caption span {
 		left: 50%;
	    top: 85%;
	    max-height: 30px;	   
		transition: left .3s ease-out;		        
 	}

 	.entity-catalogview-master-main .thumbnail > h3 {
	    top: 65%;
	    left: -100%;
	    max-height: 45px;
	    transition: left .5s ease-out;	    
	    z-index: 3;
 	}

 	.entity-catalogview-master-main .thumbnail:hover > h3,
 	.entity-catalogview-master-main .thumbnail:hover .caption span{
 		left: 20px;
 	}
*/
 	.entity-catalogview .code {
            display:none;
        }

        .entity-catalogview-project-detail-photofolio h1 {
          margin-top:0px;
        }

       @media(min-width:1024px){
           .entity-catalogview-project-detail-photofolio .catalogview-video,
           .entity-catalogview-project-detail-photofolio .catalogview-images{
                padding: 0vw 10vw;
            }
       }
        .entity-catalogview-project-detail-photofolio .catalogview-video > div {
          padding-bottom:6px;
       }
        .entity-catalogview-project-detail-photofolio .catalogview-images .col-xs-12 {
          padding-bottom:12px;
        }

      .entity-catalogview-project-detail-photofolio .catalogview-images > div:first-child {
          display:none;
       }

      .entity-catalogview-project-detail-photofolio .catalogview-images img{
            width: 100%;
      }

 	.entity-catalogview.entity-catalogview-project-detail-default .tab-content {
 		background: rgb(250, 250, 250);
 	}

 	.entity-catalogview.entity-catalogview-project-detail-default .catalogview-related {
 		background: rgb(243, 243, 243);
    	padding: 30px;
 	}
 	.entity-catalogview.entity-catalogview-project-detail-default .thumbnail > .image-container{
 		order: 1;
 	}

 	.entity-catalogview.entity-catalogview-project-detail-default .thumbnail > .image-container img{
 		margin-bottom: 25px;
 		transition: all .5s ease-out;
 	}

 	.entity-catalogview.entity-catalogview-project-detail-default .thumbnail > .image-container img:hover{
 		-webkit-filter: brightness(70%);
		filter: brightness(70%);
 	}
 	.entity-catalogview.entity-catalogview-project-detail-default .thumbnail > .caption{
 		order: 3;
 		text-align: center;
 		margin-top: 10px;
 	}
 	.entity-catalogview.entity-catalogview-project-detail-default .thumbnail > h3{
 		order: 2;
 		text-align: center;
 	}

 	.entity-catalogview.entity-catalogview-project-detail-default .catalogview-related > h4 {
 		text-transform: uppercase;
    	margin-bottom: 45px;
    	position: relative;
    	font-weight: 500;
        font-size: 2.5rem !important;
 	}

 	.entity-catalogview.entity-catalogview-project-detail-default .catalogview-related > h4:before {
 		content: "";
	    position: absolute;
	    bottom: -18px;
	    left: 0px;
	    width: 30px;
	    height: 2px;
	    background: var(--main-text-color);
 	}

 	.entity-imagelist-thumbnails-carousel img{
 		min-width: 100% !important;
   		object-fit: cover;
 	}

 	.entity-imagelist-thumbnails-carousel .caption{
 		margin-left: 0px !important;
	    padding-right: 0px !important;
 	}

@media(max-width: 1279px) and (min-width:1023px) {
          .entity-imagelist-thumbnails-carousel h4{
            font-size:1.4rem !important;
 	  }
}
@media(min-width:1280px) {
          .entity-imagelist-thumbnails-carousel h4{
            font-size:1.8rem !important;
 	  }
}

.entity-imagelist.entity-imagelist-thumbnails-carousel-slide  {
	margin-bottom:20px;
}
.entity-imagelist.entity-imagelist-thumbnails-carousel-slide .flickity-page-dots .dot {
   background: var(--main-color);
} 	

.entity-imagelist.entity-imagelist-thumbnails-carousel-slide .flickity-button{
   color: var(--main-color);
}

.entity-imagelist.entity-imagelist-thumbnails-carousel-slide .gallery{
  background:transparent;
}
 	

/*
 * *********************************************************************************************************************
 * Element and entity specific style for specific locations
 * How do specific wells, forms, panels, etc. in specific entities on specific locations look like
 * *********************************************************************************************************************
 */

  .loc-s-2 .entity-menu {
     background:transparent;
  }
  .loc-s-2 .entity-menu.entity-menu-list-vertical a[href="javascript:;"] ,
   .loc-s-2 .entity-menu.entity-menu-list-vertical a[href="javascript:;"] span{
            color: #ccc !important;
   }
 /* .loc-s-2 .entity-menu.entity-menu-list-vertical img{
     -webkit-filter:invert(0.6);
      filter: invert(0.6);
  }*/
    .loc-s-6 .entity-article .btn {
	    padding-top: 3px !important;
    }

  
   @media(max-width:919px){
       header .entity-article{
          text-align: center;
       }
    }



	.loc-h-1 .entity-article {
	 	padding: 5px 0px;
	}

       .loc-h-1 .entity-article img{
	     width: auto !important;
	}

       @media(max-width:920px){
          .loc-h-1 .entity-article img{
	     margin-left:auto;
             margin-right:auto;
	  }
       }

	.loc-h-6 .entity-article  p{
 		padding-bottom: 5px;
 	}


     .container-fixed-bottom .entity-article .btn + .btn {
        margin-left:0px;
     }