/*
 Theme Name:   Dasma Shqiptare
 Theme URI:    http://DasmaShqiptare.net/
 Description:  custom theme for dasmashqiptare.net
 Author:       VMpage
 Author URI:   https://vmpage.com
 Template:     vmpage
 Version:      1.0.0
 Tags:         black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated
 Text Domain:  VMpage
*/
@import url('https://fonts.googleapis.com/css2?family=Saira+Stencil+One&display=swap');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');

.logotitel {
  color: #b3af91;
  font-family: Helvetica;
  font-weight: 600;
  font-size: 13px;
}


.titelbox{
    width: 350px;
    height: 50px;
    margin: 0 auto;
    background:#b3af91;
    background-size: 300px;
    margin-top: -5px;
    font-family: Helvetica;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    color: #000;
    text-align: center;
    padding-top: 15px;
    margin-bottom: 18px;
}

.boxi{
background-image: linear-gradient(130deg, #f5f5f5 35.71%, #fafafa 35.71%, #fafafa 50%, #f5f5f5 50%, #f5f5f5 85.71%, #fafafa 85.71%, #fafafa 100%);
background-size: 9.14px 10.89px;
 display: table;
}

span.ofertatitel{
    padding: 3px ;
    color: #fff;
    text-align: center;
    width: 140px;
    display: table;
    float: left;
}

.silver{
    background: rgb(117,220,251);
    background: linear-gradient(23deg, rgba(117,220,251,1) 0%, rgba(26,136,172,1) 46%, rgba(109,208,237,1) 100%);
}

.ultra{
    background: rgb(42,163,206);
background: linear-gradient(23deg, rgba(42,163,206,1) 0%, rgba(6,86,113,1) 46%, rgba(42,163,206,1) 100%);
}
.premium{
    background: rgb(59,180,237);
background: linear-gradient(23deg, rgba(59,180,237,1) 0%, rgba(23,75,93,1) 46%, rgba(59,180,237,1) 100%);
}
.premium2{
    background: rgb(55,148,189);
    background: linear-gradient(23deg, rgba(55,148,189,1) 0%, rgba(23,75,93,1) 46%, rgba(55,148,189,1) 100%); 
}
.allinklusiv{
    background: rgb(0,107,154);
    background: linear-gradient(23deg, rgba(0,107,154,1) 0%, rgba(26,21,58,1) 46%, rgba(0,107,154,1) 100%); 
}


span.extra{
    font-size: 11px!important;
    list-style-position: inside;
    display: flex;
}

body {
	margin: 0px;
	padding: 0px;
}

#stripes{
z-index: -10;
width:100%;
height: 100%;
overflow: hidden;
transform-origin: 0;
transform: skewY(-12deg);
background: -webkit-linear-gradient(300deg,#1d34b8 15%,#174676 70%,#2b779b 94%);
background: linear-gradient(150deg,#425be6 15%,#174676 70%,#2b779b 94%);
}

#stripes, #stripes span{
z-index: -10;
  position: absolute;
  top: 0;
}

#stripes span{
z-index: -10;
height: 0px;
}

#stripes :nth-child(1){
  z-index: -10;
  width: 50%;
  left: 50%;
  top:40px;
  background:#286b8a;
}

.copyright{
    display: table;
    width: 100%;
    margin-top: 5px;
    font-size: 12px;
    padding: 45px 30px;
    background: #333;
    color: #fff;
    height: 50px;
}
#stripes :nth-child(2){
    z-index: -10;
  width: 14%;
  right: 0;
  bottom:40px;
  background: #1a8796;
}

#stripes :nth-child(3){
    z-index: -10;
  width: 25%;
  bottom: 0;
  right: 0;
  background: #a1ffc8;
}

#button {
    display: inline-block;
    background-color: #b3af91;;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, 
      opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
  }
  #button::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
  }
  #button:hover {
    cursor: pointer;
    background-color: #333;
  }
  #button:active {
    background-color: #555;
  }
  #button.show {
    opacity: 1;
    visibility: visible;
  }


@media (min-width:670px){
  #stripes span{
    height:150px;
  }
  #stripes :nth-child(1){
    top: 0;
  }
  #stripes :nth-child(2){
    width: 16.66667%;
    top: 300px;
    bottom: auto;
    background: #0dcfff;
  }
  #stripes :nth-child(3){
    width: 33.33333%;
    right: auto;
    background: #11bdff;
  }
  span.ofertatitel{
    width: 140px;
}
}

@media (min-width: 880px){
  #stripes span{
    height: 190px;
  }

  #stripes :nth-child(1){
    width: 33.33333%;
    left: -16.66666%;
    background: #53f;
  }

  #stripes :nth-child(2){
    width: 33.33333%;
    top: 0;
    left: 16.66666%;
    right: auto;
    background: #4553ff;
  }

  #stripes :nth-child(3){
    width: 33.33333%;
    left: 49.99999%;
    bottom: auto;
    background: #4f40ff;
  }

  #stripes :nth-child(4){
    width: 33.33333%;
    top: 380px;
    right: -16.66666%;
    background-color: rgba(255, 255, 255, 0.34);
  }

  #stripes :nth-child(5){
    width: 33.33333%;
    bottom: 0;
    background: #3c7faf;
  }
}


@media screen and (max-width: 600px){
    span.ofertatitel{
        width: 100px;
    }

    .titelbox{
        width: 280px;
        height: 38px;
        margin: 0 auto;
        background: #b3af91;
        background-size: 200px;
        margin-top: -5px;
        font-family: Helvetica;
        font-weight: 600;
        font-size: 15px;
        text-transform: uppercase;
        color: #000;
        text-align: center;
        padding-top: 8px;
        margin-bottom: 18px;
    }
}