@charset "utf-8";
/* CSS Document */
body {
    font-family: 'Source Sans Pro' !important;
}

html {
  scroll-behavior: smooth;
}


#gallery {
  
  img {
    height: 75vw;
    object-fit: cover;
	 
    
    @media (min-width: $bootstrap-sm) {
      height: 35vw;
    }
    
    @media (min-width: $bootstrap-lg) {
      height: 18vw;
    }
  }
}


// Crop images in lightbox.
.carousel-item {
  
  img {
    height: 10vw;
    object-fit: cover;
    text-align: center;
    @media (min-width: $bootstrap-sm) {
      height: 350px;
    }
  }
}

// --- END: crop images --- //


 

* {
  transition: 0.3s;
}

#gallery.custom {
  padding: 0 15px;
  
  img {
    display: block;
    margin: 15px 0 ;
    border-radius: 300px 30px 300px 300px; 
    
    &:hover {
      border-radius: 30px 90px 30px 30px;
    }
  }
}

#exampleModal.custom {
  .modal-content {
    background: none;
    border: none;
  }
  
  .modal-header {
    border:none;
    
    button {
      background: none;
      border-radius: 100px 100px 0 0;
      padding: 5px 10px;
      opacity: 1;
      position: relative;
      top: 3px;
      border: solid 2px white;
      
      @media (min-width: $bootstrap-lg) {
        top: 15px;
      }
      
      &:hover {
        top: 3px;
      }
    }
    
    span {
      color: white;
    }
  }
  
  .modal-body {
    padding: 0;
    border: none;
    position: relative;
    
    &::before, &::after {
      content: '';
      height: 50px;
      width: 50px;
      display: block;
      position: absolute;
      background: white;
      border-radius: 3px 10px;
      
      @media (min-width: $bootstrap-md) {
        border-radius: 3px 30px;
        height: 100px;
        width: 100px;
      }
    }
    
    &::before {
      top: -5px;
      left: -5px;
      
      @media (min-width: $bootstrap-md) {
        top: -15px;
        left: -15px;
      }
    }
    
    &::after {
      bottom: -5px;
      right: -5px;
      z-index: -1;
      
      @media (min-width: $bootstrap-md) {
        bottom: -15px;
        right: -15px;
      }
    }
  }
  
  .modal-footer {
    border: none;
    margin-top: 60px;
    
    @media (min-width: $bootstrap-lg) {
      margin-top: 40px;
    }
    
    .btn {
      margin: auto;
      border: solid 2px white;
      background: none;
      text-transform: uppercase;
      font-size: 0.8em;
      letter-spacing: 0.1em;
      font-weight: bold;
      padding: 0.2em 0.7em;
      
      &:hover {
        background: white;
        color: black;
      }
    }
  }
  
  .carousel-control-prev, .carousel-control-next {
    font-size: 2em;
    top: auto;
    opacity: 1;
    bottom: -52px;
    
    @media (min-width: $bootstrap-md) {
      top: 0;
      opacity: 0.5;
      bottom: 0;
    }
  }
  
  .carousel-control-next-icon,  .carousel-control-prev-icon {
    height: 30px;
    width: 30px;
  }
  
  .carousel-control-prev {
    @media (min-width: $bootstrap-md) {
      left: -10px;
    }
  }
  
  .carousel-control-next {
    @media (min-width: $bootstrap-md) {
      right: -10px;
    }
  }
  
  .carousel-indicators {
    bottom: -10px;
    
    @media (min-width: $bootstrap-lg) {
      bottom: -10px;
    }
    
    li {
      height: 30px;
      border-radius: 100px;
      background: none;
      border: solid 2px white;
      
      @media (min-width: $bootstrap-lg) {
        height: 10px;
      }
      
      &:hover {
        background: white;
      }
      
      &.active {
        background: white;
      }
    }
  }
}

// --- END: custom styling demo --- //


// --- BEGIN: style switch --- //
// This is just styling for the style toggle switch. Mostly copied from https://www.w3schools.com/howto/howto_css_switch.asp

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  
  @media (min-width: $bootstrap-sm) {
    margin: 0;
  }
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.switch-wrap {
  text-align: center;
  background-color: #b1fbc1;
  padding: 30px;
  border-radius: 3px;
  margin: 30px 0 0;
  
  @media (min-width: $bootstrap-sm) {
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 100%;
    justify-content: center;
    padding: 10px;
  }
}

.switch-text {
  display: block;
  margin: 0.5em;
  
  @media (min-width: $bootstrap-sm) {
    margin: 0 1em 0 0;
  }
}

// --- END: style switch --- //
	




















.navbar-light {background-color:white  !important; border-bottom: 2px solid  rgba(224,224,224,1.00)  ;}
.banner{background-image: url("../images/banner.jpg"); background-repeat: no-repeat; background-position: center; background-size: contain; height: 300px; padding: 100px 10px; margin: 100px 00px 30px 0px;  }

.banner-root-text{color: #2d2d2d; font-size:40px; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"; font-weight: lighter; }

.banner-imagination-text{color: #fbbe15; font-size:40px; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	  font-weight:lighter; line-height: 20px; }

.banner-text{ padding:20px 30px;}
.banner-image{  padding: 10px 40px 10px 60px; }

.banner-container{background: #fdfdfd; margin-top: 120px;}
/*.navbar-brand { 
	
	background: rgba(188,118,119,1.00);

}*/
.index-dark-brown
{
background-color: rgba(60,60,60,1.00);
	color: rgba(0,0,0,1.00);
	padding: 20px;
	background-image:url("../images/dark-brown-bg.png"); background-repeat: no-repeat; background-position: top center; background-size: cover; padding-bottom:50px;
}

#top-content{ padding:110px 0px 0px 0px; margin-top: -90px;  }

.darkbrown-text
{
	background-color: antiquewhite;
}

.darkbrown-text1
{
	background-color: aqua;
}

.darkbrown-text2
{
	background-color: rgba(164,47,49,1.00);padding: 40px;
}

.index-dark-yellow
{
background-color: rgba(250,190,20,1.00);
	color: rgba(0,0,0,1.00);
	padding: 40px 20px 50px 20px; z-index: 1;
	
}

.testimonial{padding:15px 0px;}
.pencil-img
{background-image: url("../images/1579806148005_inhouse-ui-landing-r1-2.png");
background-repeat: no-repeat;  background-size:contain; background-position: bottom right;


} 

#Media{padding:60px 0px 0px 0px; z-index: 0; margin-top: -20px; }

.portfoilio img{ margin: 20px 0px 0px 0px;}
.portfoilio img{ margin: 20px 0px 0px 0px;}
.portfoilio div div{    text-align: center; line-height: 50px; text-transform: uppercase; color: aliceblue; font-size: 20px; background: #3a3839;}
.portfoilio div img:hover {  filter: contrast(160%); cursor: pointer;  color:#fabd26;}
.portfoilio div:hover {  cursor: pointer;  color:#fabd26;}
#Clients{padding: 80px 0px 0px 0px; margin-top: -80px;}
.dark-yellow-text
{
	background-color: antiquewhite; 
}

.dark-yellow-text1
{
	background-color: aqua;
}

.dark-yellow-text2
{
	background-color: rgba(164,47,49,1.00);padding: 40px;
}

.branding-solution{ background-color: white;  padding: 00px 00px 50px 00px; border:rgba(58,56,56,1.00) thin;   }
.branding-solution-heading{font-size:13px; font-weight:bold; color: rgba(60,60,60,1.00); line-height:23px; padding: 5px 0px;}
#Portfolio{padding: 80px 0px 0px 0px; margin-top: -70px;}
#team{padding: 80px 0px 0px 0px; margin-top: -70px;}



.col-md-3{
  display: inline-block;
  margin-left:-8px; margin-top: 15px;
}
.col-md-3 img{
  width:100%;
  height:auto;
}
.carousel-indicators li{
  background-color:#fabd26;
	margin-top:160px!important;
}
.index-client img{background:white;}




.carousel-control-prev-icon,
.carousel-control-next-icon{
  background-color:#fabd26;
}
.no-padding{
  padding-left: 0;
  padding-right: 0;
}


.we-text-bold{color: white; font-size:15px; font-weight:lighter; line-height:26px; letter-spacing: 0.0625em;


}

.we-text-bold p{margin: 5px 0px; font-size: 19px; line-height:30px;   font-weight:lighter;}

.yellow-text-bold{color: white; font-size:16px; font-weight:lighter; line-height:26px;  }

.yellow-text-bold p{margin: 5px 0px;}


.tell-story-heading{font-size:18px; font-weight:lighter; color:white; line-height:26px;  }

.like-story-heading{font-size:25px; font-weight:lighter; color:#3c3c3c; line-height:33px; }

.like-story-bold{ font-weight:bold;  }


.branding-soliton-ulli{background-color: white;  padding: 10px 00px; margin-top: 5px;}

.branding-li{ margin: 00px; font-size:15px; font-weight:normal; color: black; line-height:25px; list-style:none; 
            padding-left:0;}

.branding-li li a{color:#3c3c3c;}

.branding-li :hover {color:#fabe14; cursor:pointer; text-decoration: underline;} 
.index-light-grey
{
background-color: rgba(230,230,230,1.00);

	color: rgba(102,102,102,1.00);
	padding: 40px 0px 60px 0px;
	
}

div.gallery {
  border: 1px solid rgba(230,230,230,1.00);
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto; padding:100px; margin: 5px 0px;
}



.responsive-index-thumbnail {
  padding: 10px 6px;
  float: left;
  width: 24.99999%;
}
.branding-solution-text{color: #3c3c3c; font-size: 16px; font-weight: 100; line-height:18px; }

.branding-solution-text-bold{color: #3c3c3c; font-size: 16px; font-weight:bold; line-height:18px; }

.branding-solution-li-heading{color: rgba(250,190,20,1.00); font-size: 20px; font-weight:lighter; line-height:35px; text-transform: uppercase;  }


.index-yellow{padding: 0px 20px;}
.index-client{
	background-color: #3C3C3C; 
	padding: 30px 30px 60px 30px;}

.map-container-4{
overflow:hidden;

position:relative;
height:300px;
}
.map-container-4 iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

.footer {padding: 0px 30px;; background-color:rgba(250,190,20,1.00); margin-top: 20px;}
.index-contact {font-size:30px;  }

.bar {
    position: relative;
    display: block;
    width: 100%;
}

#Contact{padding-top: 50px;}

    .bar:before, .bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 1px;
        position: absolute;
        background: #222222;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
    }

    .bar:before {
        left: 50%;
    }

    .bar:after {
        right: 50%;
    }

.group {
    position: relative;
    margin-bottom: 15px;
}

input {
    font-size: 11px;
    padding: 5px 10px 10px 5px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #222222;
    background: transparent;
}

    input:focus {
        outline: none;
    }

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
    width: 50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
    position: absolute;
    height:5%;
    width: 100px;
    top: 5%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

/* active state */
input:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}



.index-form-heading{font-size:14px; font-weight:bold; color: rgba(60,60,60,1.00);}


.heading-bracket{color: rgba(250,190,20,1.00); padding: 0px 5px; font-weight:300; font-size: 40px;}
.heading-bracket1{color: rgba(250,190,20,1.00); padding: 0px 5px; font-weight:bold; font-size: 40px;}

.heading-bracket2{color:white; padding: 0px 5px; font-weight:300; font-size: 40px;}
.index-heading{font-size:30px; font-weight: light; color: rgba(60,60,60,1.00);}

.index-heading1{font-size:30px; font-weight:lighter; color: white; }
.heading-bottom{padding: 00px 0px 30px 0px;}
.index-heading2{font-size:25px; font-weight: light; color:#fabe14; }

.index-semi-heading{font-size:15px; font-weight:bold; color: rgba(60,60,60,1.00);}

.index-contact-text{font-size:15px; font-weight:light; color: rgba(60,60,60,1.00); line-height: normal;}
.index-contact-text a{font-size:15px; font-weight:light; color: rgba(60,60,60,1.00);}

.index-contact-text a:hover{text-decoration: none; font-weight:bold; }

.index-contact-logo{ margin-top: 10px; }
.index-client-thumb div{background: #e0e0e0; padding:5px; margin: 20px 10px; }
.index-client-thumb div img {width:100%; height: 80px; 
  


}

/*.index-client-thumb div img:hover {
    filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.01);
    } */



.footer1{ padding-top: 15px;  }
.footer2{ padding-top: 15px; text-align: center; }

.footer12020{ font-weight:100; font-size: 12px; color: rgba(255,255,255,1.00); }
.footer1inhouse{font-weight:bold; font-size: 12px; color: rgba(255,255,255,1.00);}
.footer1inhouse:hover{color:rgba(35,35,35,1.00); text-decoration: none; }
.footerdesigned{ font-size: 12px; color: rgba(255,255,255,1.00); text-align: center; }
.footersocialmedia{ font-size: 12px; color: rgba(255,255,255,1.00); text-align: right; text-align-last: right; }

.footersocialmedia a{ font-size: 25px; color: white; padding: 10px 3px; 
}
.footersocialmedia a:hover{  color:rgba(35,35,35,1.00); text-decoration: none;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from {
        background: #fff;
    }

    to {
        width: 0;
        background: transparent;
    }
}

@-moz-keyframes inputHighlighter {
    from {
        background: #fff;
    }

    to {
        width: 0;
        background: transparent;
    }
}

@keyframes inputHighlighter {
    from {
        background: #fff;
    }

    to {
        width: 0;
        background: transparent;
    }
}

/* On screens that are 992px or less, set the background color to blue */
@media only screen and (max-width: 992px) {
  .branding-solution-li-heading{
	font-size:16px; line-height: 18px; }	
.csr-heading {margin: 00px 00px;}	
	
}


@media only screen and (max-width: 700px) {
  .responsive-index-thumbnail {
    width: 49.99999%;
    margin: 6px 0;
  }
	
.responsive-index-thumbnail { width: 100%;}
.banner-root-text{ font-size:30px; font-weight: normal ; 
	color :#616362;}
.banner-imagination-text{ line-height: 10px; font-size:30px; font-weight: normal ;}
.banner-text{ padding:5px 10px; text-align:center; font-weight: normal ;}
.banner-image{  padding: 5px;  text-align:center;
	height:100%; width:100%;
	}
	
.banner-image img { max-width:100% ;}
	
	.heading-bracket{ font-size: 40px;}
.heading-bracket1{font-size: 40px;}

.heading-bracket2{font-size: 40px;}
.index-heading{font-size:25px; }

.index-heading1{font-size:25px; }

.index-heading2{font-size:25px;}

.index-semi-heading{font-size:13px;   }

.index-contact-text{font-size:14px; }
.index-contact-text a{font-size:14px; }

.branding-padding {padding: 0px 20px;}	
	.branding-soliton-ulli{ padding: 0px 00px; margin-top: 0px;}
.branding-solution-li-heading{
	font-size:16px; line-height: 18px; margin-top: 20px; 
	line-height:25px;}	
.csr-heading {margin: 30px 0px;}	
.footer1{ padding:2px;  text-align: center;  }
.footer2{ padding:2px; text-align: center; }	
.footersocialmedia{ text-align:center; text-align-last:center;  }
	
}

@media only screen and (max-width: 500px) {
  
	
.responsive-index-thumbnail { width: 100%;}
.banner-root-text{ font-size:20px; text-align:center; font-weight: normal ; color :#616362;}
.banner-imagination-text{ line-height: 20px; font-size:20px;  text-align:center; font-weight: normal ;}
.banner-text{ padding:10px; font-size:20px; text-align:center; font-weight: normal ;}
.banner-image{  padding:35px 10px 10px 10px; font-size:20px; text-align:center;
	height:100%; width:100%;
	}
	
.banner-image img { max-width:100% ;}
	
.heading-bracket{ font-size: 30px;}
.heading-bracket1{font-size: 30px;}

.heading-bracket2{font-size: 30px;}
.index-heading{font-size:25px; }

.index-heading1{font-size:25px; }

.index-heading2{font-size:25px;}

.index-semi-heading{font-size:16px; text-align: center; }

.index-contact-text{font-size:14px;  line-height: 20px; 
	text-align: center;}
.index-contact-text a{font-size:14px; }
	.branding-padding {padding: 0px 20px;}
	
	.branding-soliton-ulli{ padding: 0px 00px; margin-top: 0px;}
.branding-solution-li-heading{
	margin-top: 20px; 
	line-height:25px; }
.csr-heading {margin: 30px 00px;}	
.footer1{ padding:2px;  text-align: center;  }
.footer2{ padding:2px; text-align: center; }	
.footersocialmedia{ text-align:center; text-align-last:center; }



}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}