/* ******************************************************************************* */ /* Typografi filen. */ /* ******************************************************************************* */ .ax { background-color: #f7f6cd; color: black; border: 2px solid green; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; width: 200px; } .ax:hover { background-color: green; color: white; width: 200px; } body { color: #fff; background: #8991a1; } .top-mellemrum { margin-top: 10px; } @media (max-width: 48em) { .top-mellemrum { margin-top: 15px; } } .free { background:red; padding:5px; } /* ******************************************************************************* */ /* Benyttes til fotos */ /* ******************************************************************************* */ .pure-img-responsive { max-width: 100%; height: auto; } .responsivefotos { width: 100%; height: auto; } /* ******************************************************************************** */ /* Sænker hastigheden på links, når der f.eks scrolles tilbage til TOP */ /* ******************************************************************************* */ html { scroll-behavior: smooth; } /* ******************************************************************************** */ /* Laver en rigtig fed Link knappe. */ /* ******************************************************************************* */ .etlink { cursor: pointer; margin: 0.5rem; border-bottom-width: 3px; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; min-width: 110px; margin-left: auto; margin-right: auto; border-radius: 12px; border: 3px outset #888; position: relative; display: inline-block; padding: 15px 30px; color: #eee; letter-spacing: 4px; overflow: hidden; box-shadow: 0 0 10px rgb(0, 0, 0, 1); font-family: verdana; font-size: 28px; font-weight: bolder; text-decoration: none; background:linear-gradient(160deg, #666, #444); text-shadow: 0px 0px 2px rgba(0, 0, 0, .5); transition: 0.2s; } /* ******************************************************************************* */ /* Benyttes i Menuen med links aller nederst på alle siderne - START */ /* ******************************************************************************* */ .links { padding: 14px 25px; text-align: left; text-decoration: none; font-size: 1.5em; font-weight: bold; color: hotpink; } @import url(http://weloveiconfonts.com/api/?family=zocial); * { margin: 0; padding: 0; } @font-face { font-family: 'zocial', sans-serif; } [data-icon]:before { font-family: 'zocial'; content: attr(data-icon); -webkit-font-smoothing: antialiased; } body { font-family: 'Verdana', sans-serif; } a { text-decoration: none; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -ms-transition: all .2s linear; -o-transition: all .2s linear; transition: all .2s linear; } .clear { clear: both; } /* ******************************************************************************* */ /* Benyttes i Menuen med links aller nederst på alle siderne - SLUT */ /* ******************************************************************************* */ /* # # # # # # # # # # TRANSPORTMANDENS LINK KNAPPE - START # # # # # # # # # # */ @import url(font-awesome.min.css); @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700"); /* Denne fil benyttes til Transportmandens Link knappe. Linket til denne fil skal placeres nederst i sektionen som du vil have link knappen i. */ /* TEKSTEN OVER FOTOET */ .overtekst { font-size: 36px; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } /* LINK KNAPPEN */ .translink { position: relative; width: 100%; max-width: 400px; margin-left:auto; margin-right:auto; display: block; } .translink img { width: 100%; height: auto; border-radius: 0.375em; border: 0; } .translink .knappe { position: absolute; top: 20%; // Knappen sættes 20% fra toppen af fotoet. left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #f1f1f1; color: black; font-size: 16px; padding: 16px 30px; border: none; cursor: pointer; border-radius: 5px; text-align: center; } .translink .knappe:hover { background-color: black; color: white; } /* FOTOET */ .foto { border-radius: 0.375em; border: 0; display: inline-block; position: relative; } .foto img { border-radius: 0.375em; display: block; } .foto.left, .foto.right { max-width: 40%; } .foto.left img, .foto.right img { width: 100%; } .foto.left { float: left; padding: 0 1.5em 1em 0; top: 0.25em; } .foto.right { float: right; padding: 0 0 1em 1.5em; top: 0.25em; } .foto.fit { display: block; margin: 0 0 2em 0; width: 100%; } .foto.fit img { width: 100%; } .foto.main { display: block; margin: 0 0 3em 0; width: 100%; } .foto.main img { width: 100%; } a.foto { overflow: hidden; } a.foto img { -moz-transition: -moz-transform 0.2s ease; -webkit-transition: -webkit-transform 0.2s ease; -ms-transition: -ms-transform 0.2s ease; transition: transform 0.2s ease; } a.foto:hover img { -moz-transform: scale(1.075); -webkit-transform: scale(1.075); -ms-transform: scale(1.075); transform: scale(1.075); } @media screen and (max-width: 480px) { .overtekst { font-size: 36px; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } .translink { position: relative; width: 100%; max-width: 300px; margin-left:auto; margin-right:auto; } } /* # # # # # # # # # # TRANSPORTMANDENS LINK KNAPPE - SLUT # # # # # # # # # # */ /* */ /* Responsiv layout - COMPUTER SKÆRM */ @media screen and (min-width: 960px) { /* body { background-color: #eef9df; } BENYTTES IKKE */ .synesgodtom { transform: scale(2.4); -ms-transform: scale(2.4); -webkit-transform: scale(2.4); -o-transform: scale(2.4); -moz-transform: scale(2.4); margin-left: 10px; margin-right: 10px; margin-top: 105px; margin-bottom: 50px; } .clear {clear: both;} } /* Responsiv layout - TABLET*/ @media screen and (max-width: 960px) and (min-width: 480px) { /* body { background-color: pink; } BENYTTES IKKE */ .synesgodtom { transform: scale(1.5); -ms-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -moz-transform: scale(1.5); margin-left: 10px; margin-right: 10px; margin-top: 55px; margin-bottom: 50px; } .clear {clear: both;} } /* Responsiv layout - SMARTPHONE */ @media screen and (max-width: 480px) { /* body { background-color: lightyellow; } BENYTTES IKKE */ .synesgodtom { transform: scale(2.1); -ms-transform: scale(2.1); -webkit-transform: scale(2.1); -o-transform: scale(2.1); -moz-transform: scale(2.1); margin-left: 10px; margin-right: 10px; margin-top: 75px; margin-bottom: 50px; width: 50%; } .clear {clear: both;} } /* */ /* */ /* Create four equal columns that floats next to each other */ .kollonne { float: left; width: 25%; padding: 10px; height: 300px; /* Should be removed. Only for demonstration */ } .kollonnetop { float: left; width: 100%; padding: 10px; } /* Clear floats after the columns */ .raekke:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the four columns stack on top of each other instead of next to each other */ @media screen and (max-width: 480px) { .kollonne { width: 100%; height: 100%; } } /* height: 0px; skal ændres til f.eks 1px, eller mere for at kunne se stregen under hver post */ @media screen and (max-width: 480px) { .posts article:after { background: rgba(210, 215, 217, 0.75); bottom: -3em; content: ''; display: block; height: 0px; position: absolute; right: 0; width: calc(100% + 6em); } /* Fjerner stregen under Firmaets navn & adresse i bunden af siden, lige oven over Besøg os på: */ /* Hvis man ønsker at lave en fætter
andre steder på siden, under max-width:480, så undlad class=major */ hr.major { display: none; } } /* */ /* ******************************************************************************* */ /* Posts - benyttes til adskille kollonnerne i midten */ /* ******************************************************************************* */ .posts { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 2em -6em; width: calc(100% + 6em); } .posts article { -moz-flex-grow: 0; -webkit-flex-grow: 0; -ms-flex-grow: 0; flex-grow: 0; -moz-flex-shrink: 1; -webkit-flex-shrink: 1; -ms-flex-shrink: 1; flex-shrink: 1; margin: 0 0 6em 6em; position: relative; width: calc(33.33333% - 6em); } /* width: 1px; skal ændres til 0px, for at fjerne stregen mellem poster på den samme linie */ /* Stregen kan kun ses på COMPUTER / TABLET - ikke på SMARTPHONE */ .posts article:before { background: rgba(210, 215, 217, 0.75); content: ''; display: block; height: calc(100% + 6em); left: -3em; position: absolute; top: 0; width: 0px; } /* height: 0px; skal ændres til f.eks 1px, eller mere for at kunne se stregen under hver post */ .posts article:after { background: rgba(210, 215, 217, 0.75); bottom: -3em; content: ''; display: block; height: 0px; position: absolute; right: 0; width: calc(100% + 6em); } .posts article > :last-child { margin-bottom: 0; } .posts article .image { display: block; margin: 0 0 2em 0; } .posts article .image img { display: block; width: 100%; } @media screen and (min-width: 1681px) { .posts article:nth-child(3n + 1):before { display: none; } .posts article:nth-child(3n + 1):after { width: 100%; } .posts article:nth-last-child(1), .posts article:nth-last-child(2), .posts article:nth-last-child(3) { margin-bottom: 0; } .posts article:nth-last-child(1):before, .posts article:nth-last-child(2):before, .posts article:nth-last-child(3):before { height: 100%; } .posts article:nth-last-child(1):after, .posts article:nth-last-child(2):after, .posts article:nth-last-child(3):after { display: none; } } @media screen and (max-width: 1680px) { .posts article { width: calc(50% - 6em); } .posts article:nth-last-child(3) { margin-bottom: 6em; } } @media screen and (min-width: 481px) and (max-width: 1680px) { .posts article:nth-child(2n + 1):before { display: none; } .posts article:nth-child(2n + 1):after { width: 100%; } .posts article:nth-last-child(1), .posts article:nth-last-child(2) { margin-bottom: 0; } .posts article:nth-last-child(1):before, .posts article:nth-last-child(2):before { height: 100%; } .posts article:nth-last-child(1):after, .posts article:nth-last-child(2):after { display: none; } } @media screen and (max-width: 736px) { .posts { margin: 0 0 2em -4.5em; width: calc(100% + 4.5em); } .posts article { margin: 0 0 4.5em 4.5em; width: calc(50% - 4.5em); } .posts article:before { height: calc(100% + 4.5em); left: -2.25em; } .posts article:after { bottom: -2.25em; width: calc(100% + 4.5em); } .posts article:nth-last-child(3) { margin-bottom: 4.5em; } } @media screen and (max-width: 480px) { .posts { margin: 0 0 2em 0; width: 100%; } .posts article { margin: 0 0 4.5em 0; width: 100%; } .posts article:before { display: none; } .posts article:after { width: 100%; } .posts article:last-child { margin-bottom: 0; } .posts article:last-child:after { display: none; } } /* ******************************************************************************* */ /* Benyttes til en vandret streg */ /* ******************************************************************************* */ hr { border-top: 3px double #8c8b8b; } /* ******************************************************************************* */ /* Benyttes til felterne i en formular, f.eks til at modtage email */ /* ******************************************************************************* */ textarea { width: 100%; height: 10em; } input { width: 100%; height: 3em; } /* ******************************************************************************* */ /* Benyttes til fotos */ /* ******************************************************************************* */ .responsivefotos { width: 100%; height: auto; } /* ******************************************************************************* */ /* Benyttes til GOOGLE MAPS */ /* ******************************************************************************* */ .map-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .map-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; } /* ******************************************************************************* */ /* Benyttes til FACEBOOK KOMMENTARER */ /* ******************************************************************************* */ #fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span { width: 100% !important; } /* ******************************************************************************* */ /* Benyttes til FACEBOOK LIKE */ /* ******************************************************************************* */ .fb-like { transform: scale(1.0); -ms-transform: scale(1.0); -webkit-transform: scale(1.0); -o-transform: scale(1.0); -moz-transform: scale(1.0); margin-left: 10px; margin-right: 10px; margin-top: 5px; margin-bottom: 20px; } /* ******************************************************************************* */ .linkstekst { font-size: 24px; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } hr { border: 0; height: 0; /* Firefox... */ box-shadow: 0 0 10px 1px black; } hr:after { /* Not really supposed to work, but does */ content: "\00a0"; /* Prevent margin collapse */ } /* ******************************************************************************* */ /* ###=###=### ********** SHOWTIME ROTATOR ********** ###=###=### */ @media (max-width: 48em) { .thingen { display:none; } } @media (min-width: 48em) { .thingen { position: absolute; visibility: visible; top: 30px; left: 170px; z-index:100; } } /* ###=###=### ********** SHOWTIME ROTATOR ********** ###=###=### */ /* ###=###=### ********** TWITTER & FACEBOOK IKONER PÅ INDEX.PHP ********** ###=###=### */ .text-primary { color: #689478; } /* ###=###=### ********** TWITTER & FACEBOOK IKONER PÅ INDEX.PHP ********** ###=###=### */ /* TILHØRER SCROLL TIL TOPPEN - START */ #myBtn { display: none; /* Som standard er Tilbage knappen skjult */ position: fixed; /* Fixed/sticky position */ bottom: 80px; /* Placerer knappen i bunden af siden */ right: 30px; /* Placerer knappen 30px fra højre side */ z-index: 99; /* Sørger for at knappen ikke overlapper andre ting */ border: none; /* Fjerner borders */ outline: none; /* Fjerner outline */ background-color: #689478; /* Baggrunds farven */ color: white; /* Tekst farve */ cursor: pointer; /* Tilføjer en Muse pointer når musen holdes over knappen */ padding: 15px; /* Nogle padding, ovenover, underneden, til højre og venstre */ border-radius: 10px; /* Runde hjørner */ font-size: 18px; /* Font / Skrift størrelse */ } #myBtn:hover { background-color: #555; /* Tilføjer en mørke-grå baggrund, når musen holdes over knappen */ } /* TILHØRER SCROLL TIL TOPPEN - SLUT */ body { font-size: 17px; } .pure-menu-item { border-bottom:2px dotted; } .videoWrapperOuter { max-width:640px; margin-left:auto; margin-right:auto; } .videoWrapperInner { float: none; clear: both; width: 100%; position: relative; padding-bottom: 50%; padding-top: 25px; height: 0; } .videoWrapperInner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }