home.css

body{
  font-family: 'FiraSans-Bold', 'Fira Sans Bold', 'Fira Sans', sans-serif !important;
  color: #333333;  
}

div.headerBar {
    position: fixed;
    width: 100%;
    height: 80px;
    background-color: rgba(242, 242, 242, 1);
    z-index: 1001;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    margin: 0px;
}

div#navbarToggleExternalContent{
   position: fixed;
   width: 100%;
   top:80px;
   background-color: rgba(255, 255, 255, 1);
   padding: 10px 50px 20px 0px;
   margin: 0px 0px !important;
   z-index: 1001;
}

div#navbarToggleExternalContent .row{
  margin-top: 10px;
}

.logo, .logo:hover {    
    font-size: 20px;
    color: #000000;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}


#btnKonsulter:hover{
  background: white;
  color: rgba(230, 89, 57, 1);  
}

#btnKonsulter .d-img {
  border : 0px;
  background: url("./../images/left_arrow_white.svg");  
  background-size: 100% 100%;
}

#btnKonsulter:hover .d-img {
  background: url("./../images/left_arrow_red.svg");  
  background-size: 100% 100%;
}

#btnUppdrag:hover{
  background: white;
  color: rgba(61, 152, 172, 1);  
}

#btnUppdrag .d-img {
  border : 0px;
  background: url("./../images/left_arrow_white.svg");  
  background-size: 100% 100%;
}

#btnUppdrag:hover .d-img {
  background: url("./../images/left_arrow.svg");  
  background-size: 100% 100%;
}

.a-normal, .a-custom, .a-custom:hover{
  cursor: pointer;
  text-decoration: none;
  color: #000000;
}

.a-normal:hover {
  cursor: pointer;
}

textarea {
  width: 100%;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  padding: 0px 5px;
  border-color: rgba(45, 45, 45, 1);
  border-radius: 8px;
  height: 100%;
}

input[type=text], input[type=password] {
  width: 100%;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  padding: 0px 5px;
  border-color: rgba(45, 45, 45, 1);
  border-radius: 8px;
  height: 35px;
}

.d-button {
  background: inherit;
  background-color: rgba(61, 152, 172, 1);
  border: none;
  border-radius: 8px;
  height: 40px;
  padding: 2px 20px;
  text-align: center;
}

.d-button:hover{
  opacity: 0.8;
}

.f-s-11{
  font-style: normal;
  font-weight: 200;
  font-size: 11px;
  letter-spacing: 1.2px;
}

.f-s-14{
  font-style: normal;
  font-weight: 200;
  font-size: 14px;
  letter-spacing: 1.2px;
}

.f-s-12{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
}

.f-s-15{
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
}

.f-s-18{
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
}


.f-s-20{
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
}

.f-s-16{
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
}

.f-s-24{
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
}

.f-s-32{
  font-weight: 700;
  font-style: normal;
  font-size: 32px;
}

.f-s-55{
  font-weight: 700;
  font-style: normal;
  font-size: 55px;
}

.f-w-200{
  font-weight: 200;
}

.f-w-400{
  font-weight: 400;
}

.f-w-600{
  font-weight: 600;
}

.f-w-800{
  font-weight: 800;
}

.f-c-normal{
  color: #333333;
}

.f-c-secondary{
  color: #3D98AC;
}

.f-c-red{
  color: #E65939;
}

.f-c-white{
  color: #FFFFFF;
}

.f-c-black{
  color: #000000;
}

.d-backcolor-button{
   background-color: rgba(61, 152, 172, 1);
}

.d-backcolor-secondary{
  background: rgb(242,242,242) !important;
}

.d-backcolor-white{
  background: rgb(255,255,255);
}

.d-backcolor-red{
  background: rgba(230, 89, 57, 1);
}

.d-border-black{
  border: 1px;
  border-color: black;
  border-style: solid;
}

.d-radius {
  border-radius: 8px;
}

.d-radius-top{
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

.d-radius-left{
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
}

.d-radius-bottom{
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.d-line-black{
  width: 100%;
  height: 1px;
  background: black;
}

.d-block{
  border-radius: 8px;
  overflow: hidden;
}

.d-block-secondary{
  border-radius: 8px;
  overflow: hidden;
  background: rgb(242,242,242);
}

.d-form-normal{
  background-color: rgba(255, 255, 255, 0.8); 
  width: 100%; 
  padding: 60px 70px 40px 70px;
  border-radius: 8px;
}

.d-grid-block {
  padding: 10px;
  overflow: hidden;
  height: 100%;
}

.d-form-block {
  border-radius: 8px;
  padding: 10px;
}

.d-flex{
  display: flex !important;  
}

.d-flex-column{
  display: flex !important;
  flex-direction: column;
}

.d-flex-center{
 justify-content: center;
}

.d-flex-between{
  justify-content: space-between;
}

.d-flex-around{
  justify-content: space-around;
}

.d-flex-end{
 justify-content: flex-end;
}

.d-align-item-center{
  align-items: center;
}

.d-align-item-flex-end{
  align-items: flex-end;
}

.d-position-relative{
  position: relative;
}

.d-position-absolute{
  position: absolute;
}

.d-transform-50{
  position: absolute;
  display: inline-block;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  z-index: 999;
}

.d-padding-20{
  padding: 20px !important;
}

.d-padding-30-0{
  padding: 30px 0px !important;
}

.d-margin-30{
  margin: 30px !important;
}

.d-margin-0-30{
  margin: 0px 30px !important;
}

.d-margin-top-80 {
  margin-top: 80px !important;
}

.d-margin-top-20 {
  margin-top: 20px !important;
}

.d-margin-top-10 {
  margin-top: 10px !important;
}


.carousel-item div img{
  width:100%;
  height:auto;
}

body .carousel-indicators li{
  background-color:red;
}
body .carousel-indicators{
  bottom: 0;
}
body .carousel-control-prev-icon,
body .carousel-control-next-icon{
  background-color:red;
}
body .no-padding{
  padding-left: 0;
  padding-right: 0;
}

.d-carousel-item{
  padding:50px 20px; 
  background: rgb(242,242,242); 
  border-radius: 8px;
  height: 100%;
}

.footerBar{
  width: 100%;
  background-color: rgba(242, 242, 242, 1);
  padding: 50px 0px;
  margin: 0px 0px !important;
}

.footerBar .row{
  margin-top: 10px;
}

.d-page-content{
  background: #FFFFFF !important;
  padding: 120px 0px;
}

div#navbarKonsulter{
  background-color: rgba(242, 242, 242, 1);
  position: relative;
  padding: 20px;
  z-index: 1001;
}

.d-skill{
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(45, 45, 45, 1);
  border-radius: 8px;
  height: 35px;
  display: inline-flex;
  padding: 0 5px;
  margin: 10px 10px 10px 0px;
  align-items: center;
}

.d-rotate-90 {
  transform: rotate(90deg);
}

.d-rotate-180 {
  transform: rotate(180deg);
}

.d-rotate-270 {
  transform: rotate(270deg);
}

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  color: #3D98AC;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.nav-item {
  background: #3D98AC;
  padding: 0px 0px !important;
}

.nav-item a {
  color: white;
  text-align: center;
  height: 100%;
}

.nav-item a.active {
  border : 1px;
  border-radius: 0px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: rgb(242,242,242) !important;
  color: black !important;
}

.playpause {
  top : 100px;
}

.col-md-1 {
  display: none !important;
}

.d-model-content{
  width: 800px !important;
}

@media screen and (min-width: 992px) {
  .mdShowOnly {
    display: none !important;
  }

  .mdHideOnly {
    display: inline-block !important;
  }

  .smShowOnly {
    display: none !important;
  }

  .smHideOnly {
    display: inline-block !important;
  }

  .f-s-55{
    font-size: 55px !important;
  }

  .d-model-content{
  width: 800px !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .mdShowOnly {
    display: inline-block !important;
  }

  .mdHideOnly {
    display: none !important;
  }

  .smShowOnly {
    display: none !important;
  }

  .smHideOnly {
    display: inline-block !important;
  }

  .f-s-55{
    font-size: 55px !important;
  }

  .d-form-normal {
    padding: 50px 20px !important;
  }

  .d-model-content{
    width: 700px !important;
  }
}

@media screen and (max-width: 767px) {
  .smShowOnly {
    display: inline-block !important;
  }

  .smHideOnly {
    display: none !important;
  }

  .mdShowOnly {
    display: inline-block !important;
  }

  .mdHideOnly {
    display: none !important;
  }

  .f-s-55{
    font-size: 24px !important;
  }

  .d-form-normal {
    padding: 40px 10px !important;
  }

  .d-model-content{
    width: 100% !important;
  }
}