html,
body {
    height: 100%;
    width: 100%;
    background-color: #fff;
}

@font-face {
    font-family: mainFont;
    src: url(../fonts/moiser.ttf);
}

@font-face {
    font-family: secondFont;
    src: url(../fonts/RobotoCondensed-Light.ttf);
}

@font-face {
    font-family: thirdFont;
    src: url(../fonts/RobotoCondensed-Regular.ttf);
}

@font-face {
    font-family: fourthFont;
    src: url(../fonts/gillsansstd.otf);
}

a:hover {
    text-decoration: none;
}

p {
    color: #636363;
    line-height: 1.4;
    font-size: 18px;
}

h1,
h2,
h3 {
    color: #fff;
    font-family: secondFont;
}

h4 {
    color: #fff;
    font-weight: 400;
    font-size: 30px;
}

h5 {
    color: #fff;
    font-weight: 300;
    font-size: 20px;
}

.navbar-default {
    background-color: transparent;
    border-color: transparent;
}

.navbar-header {
    color: #fff;
    display: inline-block;
}

.nav {
    -webkit-transition: 2s ease;
	-moz-transition: 2s ease;
	-ms-transition: 2s ease;
	-o-transition: 2s ease;
    transition: 2s ease;
}

.top-ul-icons {
    background-color: rgba(41, 16, 74, 0.7);
    margin-top: 5px;
    -webkit-transition: 2s ease;
	-moz-transition: 2s ease;
	-ms-transition: 2s ease;
	-o-transition: 2s ease;
    transition: 2s ease;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
a:visited {
    background-color: none;
}

.pad-section {
    padding: 50px 0;
}

.pad-section-big {
    padding: 70px 0;
}

.pad-section-biggest {
    padding: 110px 0;
}

.pad-section img {
    width: 100%;
}

.text-vcenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: #fff;
}

.text-vcenter h1 {
    font-size: 180px;
    font-weight: 700;
    margin: 0;
    padding: 0;
    margin-top: 160px;
    -webkit-transition: font-size 2s ease;
	-moz-transition: font-size 2s ease;
	-ms-transition: font-size 2s ease;
	-o-transition: font-size 2s ease;
	transition: font-size 2s ease
}

.text-vcenter h2 {
    font-size: 90px;
    font-weight: 700;
    margin: 0;
    padding: 0;
    margin-top: 150px;
    -webkit-transition: font-size 2s ease;
	-moz-transition: font-size 2s ease;
	-ms-transition: font-size 2s ease;
	-o-transition: font-size 2s ease;
	transition: font-size 2s ease
}

.header-section {
    color: #9a9a9a;
    font-size: 60px;
}

@media screen and (max-width: 550px) {
    .text-vcenter h1 {
        font-size: 60px;
    }
    .left-service-divfirst h1 {
        font-size: 25px;
    }
    .left-service-behind h1 {
        font-size: 25px;
    }
    #header-top {
        font-size: 35px;
    }
}

@media screen and (min-width: 550px) and (max-width: 1800px) {
    .text-vcenter h1 {
        font-size: 110px;
    }
}

#home {
    display: block;
    height: 70%;
    position: relative;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
	-moz-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
	-ms-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
	-o-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
}

#layer {
    display: table;
    background-color: rgba(41, 16, 74, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#about {
    background-color: #fafaff;
    display: block;
    position: relative;
    width: 100%;
}

#background {
    background: url(../images/goteborg-1-purple.jpg) no-repeat center center fixed;
    background-color: #fff;
    display: block;
    position: relative;
    width: 100%;
    height: 500px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#clients {
    background: #fff;
    display: table;
    position: relative;
    width: 100%;
    height: 600px;
    padding-bottom: 150px;
    padding-top: 40px;
}

.logo-container {
    display: inline-block;
    background: rgba(255, 255, 255, 0.5);
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

#footer {
    background-color: rgba(41, 16, 74, 0.8);
    display: table;
    position: relative;
    width: 100%;
    height: 400px;
    padding: 100px 0;
}

#services {
    background-color: #fff;
    display: table;
    position: relative;
    width: 100%;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    background-color: rgba(41, 16, 74, 0.8);
    overflow-x: hidden;
    transition: .5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #fff;
    display: block;
    transition: .3s;
}

.sidenav a:hover,
.offcanvas a:focus {
    color: #f1f1f1!important;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
}

footer {
    background-color: rgba(41, 16, 74, 0.9);
    color: #fff;
    font-weight: 500;
}

/* For nested list in Allmanna Villkor */
ol { counter-reset: item }
li { display: block }
lix:before { content: counters(item, ".") " "; counter-increment: item }

.container-fluid>.navbar-header {
    margin-left: 0;
    margin-right: 0;
}

div.polaroid {
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background-color: #fff;
}

div.polaroid-sec {
    width: 100%;
    min-height: 300px;
    box-shadow: 0 4px 8px 0 rgba(8, 2, 2, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background-color: #593a97;
    padding-bottom: 20px;
}

div.container-service {
    padding: 10px;
}

.text-vcenter p {
    font-size: 20px;
}

.service-header {
    font-size: 20px;
}

/* LANDING PAGE CODE START */
#landing {
    display: block;
    height: 45%;
    position: relative;
    width: 100%;
    background: linear-gradient(-90deg,#ed5e98,#4b2b80);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
  	-moz-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
  	-ms-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
  	-o-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
}
#layer-landing {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* LANDING PAGE CODE END */

@media screen and (max-width: 1390px) {
    div.polaroid {
        width: 250px;
        margin-bottom: 20px;
    }
    .header-section {
        font-size: 40px;
    }
    .service-header {
        font-size: 18px;
    }
    .lead {
        font-size: 15px;
        padding: 5px;
    }
    .lead-services {
        font-size: 18px;
        padding: 5px;
        font-weight: lighter;
    }
    .about-us-header {
        font-size: 20px;
    }
    .text-vcenter p {
        font-size: 12px;
        padding-left: 20px;
        padding-right: 20px;
    }
    #background-header {
        padding-left: 5px;
        padding-right: 5px;
    }
    .pad-section-biggest {
        padding: 60px 0;
    }

}

#googleMap {
    border-radius: 50% !important;
    z-index: 10;
    width: 350px;
    height: 350px;
}

#googleMapSec {
    border-radius: 50% !important;
    z-index: 10;
    width: 350px;
    height: 350px;
}

@media screen and (max-width: 1200px) {
    div.polaroid {
        width: 200px;
        margin-bottom: 20px;
    }
    #googleMap {
        height: 300px;
        width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

}

@media screen and (max-width: 350px) {
    #googleMap {
        height: 250px;
        width: 250px;
        margin-left: auto;
        margin-right: auto;
    }
}

.navbar-collapse.collapse {
    display: block!important;
}

.navbar-nav>li,
.navbar-nav {
    float: left!important;
}

.navbar-nav.navbar-right:last-child {
    margin-right: -15px!important;
}

.navbar-right {
    float: right!important;
}

.navbar-default .navbar-nav>li>a:hover {
    background-color: transparent;
}

.footer-icon {
    color: #fff;
    font-size: 30px;
    padding-right: 5px;
}

@media screen and (max-width: 992px) {
    #footer {
        padding-top: 50px;
    }
    .mix {
        width: 80%;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
    }
    div.polaroid-sec {
        width: 80%;
    }
    div.polaroid {
        width: 80%;
    }

}

/* Clients slideshow */

.wrapper {
    width: 100%;
    margin: 0 auto;
}
.wrapper ul {
    padding: 0;
    margin: 0;
}
.wrapper li {
    display: inline-block;
    overflow: hidden;
    max-height: 270px;
    z-index: 1;
    margin: 10px;
    border-radius: 99em;
}
.wrapper li:hover {
    -webkit-box-shadow: 0px 0px 30px -7px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 30px -7px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 30px -7px rgba(0,0,0,0.75);
    border-radius: 99em;
    transform: scale(1.1);
}
.wrapper li {
    transition: all 1.5s;
}
.wrapper img {
    max-width: 270px;
    border-radius: 99em;
}
.wrapper .overlay-container {
    display: block;
    position: relative;
    font-size: 17px;
    font-family: secondFont;
}
.wrapper .overlay-container::before {
    content: attr(data-overlay-text);
    font: 1em/1.5em "Segoe UI","Source Sans Pro",Calibri,Candara,Arial,sans-serif;
    position: absolute;
    z-index: 1;
    /*On top of parent*/
    top: 30%;
    width: 100%;
    text-align: center;
    color: #fff;
    background: rgba(41, 16, 74, 0.8);
    opacity: 0;
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
    padding: 20px;
}
.wrapper .overlay-container:hover::before {
    opacity: 1;
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}

.text-vcenter.shrink h1 {
    font-size: 120px;
    -webkit-transition: font-size 2s ease;
	-moz-transition: font-size 2s ease;
	-ms-transition: font-size 2s ease;
	-o-transition: font-size 2s ease;
	transition: font-size 2s ease;
}

.text-vcenter.shrink-mobile h1 {
    font-size: 40px;
    -webkit-transition: font-size 2s ease;
	-moz-transition: font-size 2s ease;
	-ms-transition: font-size 2s ease;
	-o-transition: font-size 2s ease;
	transition: font-size 2s ease;
}

@media screen and (max-width: 500px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
    #background {
        background: url(../images/goteborg-1-purple.jpg) no-repeat center center;
        background-color: #fff;
        display: table;
        position: relative;
        width: 100%;
        height: 300px;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position: 50% 50%;

    }
    .wrapper img {
        max-width: 300px;
    }
    .text-vcenter h1 {
        margin-top: 150px;
    }
    .no-mobile-display {
        display:none;
    }

    img.resize {
      display: none;
    }

    /* BANNER STYLES MOBILE*/
    .bannerxxl {
        display:none;
      }

    .bannerxl {
        display:none;
      }

    .banner {
        display:none;
      }

    .about-us-header {
        padding-top: 50px;
      }

    .about-us-header2 {
        padding-top: 10px;
      }

    .about-us-header-size {
        font-size: 24px;
      }

    .under500 {
        display:none;
    }
    #logo-proqoda {
        display:none;
    }
    #proqoda-computer {
        width: 250px;
    }
    #background-header {
        font-size: 25px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .text-vcenter h2 {
        margin-top: 100px;
    }

    #landing {
      height: 40%;
    }

    #header-top-mobil {
        font-size: 18px;
    }

    #header-top-mobil-lg {
        font-size: 45px;
    }
}

@media screen and (min-width: 500px) {
    .over500 {
        display:none;
    }
}
/* Banner on sample page */

/* VARIABLES */
/* CUSTOM MIXINS */
/* BANNER STYLES */
.banner {
    position: relative;
    height: 60px;
    width: 310px;
    margin: 100px auto;
    background: rgba(41, 16, 74, 0.8);
    font-family: 'mainFont', sans-serif;
    font-weight: lighter;
    font-size: 25px;
    color: #fff;
}
.banner::before {
    content: "";
    position: absolute;
    top: -16px;
    right: 0;
    height: 60px;
    width: 90px;
    -ms-transform: skewY(20deg);
    -webkit-transform: skewY(20deg);
    transform: skewY(20deg);
    background: rgba(41, 16, 74, 0.9);
}
.banner::after {
    content: "";
    position: absolute;
    top: -32px;
    right: 20px;
    height: 60px;
    width: 70px;
    background: rgba(41, 16, 74, 0.8);
}
.banner span {
    display: block;
    padding-top: 10px;
}
.banner span::before {
    content: "";
    position: absolute;
    top: 50px;
    right: 180px;
    height: 60px;
    width: 170px;
    background: rgba(41, 16, 74, 0.8);
    z-index: -9;
}
.banner span::after {
    content: "";
    position: absolute;
    top: 60px;
    right: 180px;
    border-top: 0px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 130px solid rgba(41, 16, 74, 0.9);
}

/* BANNER STYLES WIDER*/
.bannerxl {
    position: relative;
    height: 60px;
    width: 380px;
    margin: 100px auto;
    background: rgba(41, 16, 74, 0.8);
    font-family: 'mainFont', sans-serif;
    font-weight: lighter;
    font-size: 25px;
    color: #fff;
}
.bannerxl::before {
    content: "";
    position: absolute;
    top: -12px;
    right: 0;
    height: 60px;
    width: 60px;
    -ms-transform: skewY(20deg);
    -webkit-transform: skewY(20deg);
    transform: skewY(20deg);
    background: rgba(41, 16, 74, 0.9);
}
.bannerxl::after {
    content: "";
    position: absolute;
    top: -24px;
    right: 20px;
    height: 60px;
    width: 40px;
    background: rgba(41, 16, 74, 0.8);
}
.bannerxl span {
    display: block;
    padding-top: 10px;
}
.bannerxl span::before {
    content: "";
    position: absolute;
    top: 50px;
    right: 180px;
    height: 60px;
    width: 170px;
    background: rgba(41, 16, 74, 0.8);
    z-index: -9;
}
.bannerxl span::after {
    content: "";
    position: absolute;
    top: 60px;
    right: 250px;
    border-top: 0px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 130px solid rgba(41, 16, 74, 0.9);
}

/* BANNER STYLES XXL WIDER*/
.bannerxxl {
    position: relative;
    height: 60px;
    width: 480px;
    margin: 100px auto;
    background: rgba(41, 16, 74, 0.8);
    font-family: 'mainFont', sans-serif;
    font-weight: lighter;
    font-size: 25px;
    color: #fff;
}
.bannerxxl::before {
    content: "";
    position: absolute;
    top: -12px;
    right: 0;
    height: 60px;
    width: 60px;
    -ms-transform: skewY(20deg);
    -webkit-transform: skewY(20deg);
    transform: skewY(20deg);
    background: rgba(41, 16, 74, 0.9);
}
.bannerxxl::after {
    content: "";
    position: absolute;
    top: -24px;
    right: 20px;
    height: 60px;
    width: 40px;
    background: rgba(41, 16, 74, 0.8);
}
.bannerxxl span {
    display: block;
    padding-top: 10px;
}
.bannerxxl span::before {
    content: "";
    position: absolute;
    top: 50px;
    right: 180px;
    height: 60px;
    width: 170px;
    background: rgba(41, 16, 74, 0.8);
    z-index: -9;
}
.bannerxxl span::after {
    content: "";
    position: absolute;
    top: 60px;
    right: 350px;
    border-top: 0px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 130px solid rgba(41, 16, 74, 0.9);
}

a.nodeco {
  text-decoration: none;
}

.modal-title {
    color: rgba(41, 16, 74, 0.9) !important;
    font-family: secondFont;
}