/*

LITTLEHELPERS.CSS
--------------------------------------------------
CSS-hacks for Bootstrap-based websites
by Tim Rodenbröker
Version: 1.02

TABLE OF CONTENTS 
--------------------------------------------------

– Basics
– Spacings
– Positioning
– Flexbox
– Responsive embeds
– Grid
– Typography

BASICS
-------------------------------------------------- */

a, a:active, a:hover {text-decoration: none}

img {width: 100%; height: auto;}


/* On / Off */

.m0 {margin: 0}
.p0 {padding: 0}

.off {
  display: none; }

.on {display: block;}

/* Off on mobile devices */

@media (max-width: 992px) {
    .off-on-mobile, .offonmobile, .off-on-md {
        display: none;
    }
}

/* classes for centering */
.center-me {margin: 0 auto;}

.img-center {
    margin: 0 auto;
}

/* clearfix */

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

/* SPACINGS
-------------------------------------------------- */

/* margins – top */

.mtop150 {margin-top: 150px;}

.mtop125 {margin-top: 125px;}

.mtop100 {margin-top: 100px;}

.mtop80 {margin-top: 80px;}

.mtop75 {margin-top: 75px;}

.mtop50 {margin-top: 50px;}

.mtop40 {margin-top: 40px;}

.mtop30 {margin-top: 30px;}

.mtop25 {margin-top: 25px;}

.mtop10 {margin-top: 10px;}

.mtop0 {margin-top: 0;}


/* margins – bottom */

.mbot150 {margin-bottom: 150px;}

.mbot125 {margin-bottom: 125px;}

.mbot100 {margin-bottom: 100px;}

.mbot80 {margin-bottom: 80px;}

.mbot75 {margin-bottom: 75px;}

.mbot60 {margin-bottom: 60px;}

.mbot50 {margin-bottom: 50px;}

.mbot40 {margin-bottom: 40px;}

.mbot30 {margin-bottom: 30px;}

.mbot25 {margin-bottom: 25px;}

.mbot10 {margin-bottom: 10px;}

.mbot0 {margin-bottom: 0;}


/* margins – left */

.mleft150 {margin-left: 150px;}

.mleft125 {margin-left: 125px;}

.mleft100 {margin-left: 100px;}

.mleft75 {margin-left: 75px;}

.mleft50 {margin-left: 50px;}

.mleft40 {margin-left: 40px;}

.mleft30 {margin-left: 30px;}

.mleft25 {margin-left: 25px;}

.mleft10 {margin-left: 10px;}

.mleft0 {margin-left: 0;}


/* no margins at all */
.nomargin {margin: 0;}


/* paddings - top */

.ptop250 {padding-top: 250px;}

.ptop225 {padding-top: 225px;}

.ptop200 {padding-top: 200px;}

.ptop172 {padding-top: 175px;}

.ptop150 {padding-top: 150px;}

.ptop125 {padding-top: 125px;}

.ptop100 {padding-top: 100px;}

.ptop75 {padding-top: 75px;}

.ptop50 {padding-top: 50px;}

.ptop40 {padding-top: 40px;}

.ptop30 {padding-top: 30px;}

.ptop25 {padding-top: 25px;}

.ptop10 {padding-top: 10px;}

.ptop0 {padding-top: 0px;}


/* paddings - bottom */

.pbot250 {padding-bottom: 250px;}

.pbot150 {padding-bottom: 150px;}

.pbot125 {padding-bottom: 125px;}

.pbot100 {padding-bottom: 100px;}

.pbot75 {padding-bottom: 75px;}

.pbot50 {padding-bottom: 50px;}

.pbot25 {padding-bottom: 25px;}

  .pbot-100-xs-50 {padding-bottom: 100px;}
  .ptop-100-xs-50 {padding-top: 100px;}

  @media (max-width: 768px) {
  .pbot-100-xs-50 {padding-bottom: 50px;}
  .ptop-100-xs-50 {padding-top: 50px;}

 }


/* paddings on every corner */

.pad15 {padding: 15px;}
.pad30 {padding: 30px;}


/* POSITIONING 
-------------------------------------------------- */

/* div-stacks */

.parent, .child {width:100%;}

.parent {position: relative;}
.child {position: absolute;}

/* FLEXBOX 
-------------------------------------------------- */

.flex-center-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* RESPONSIVE EMBEDS 
-------------------------------------------------- */

/* 16:9 video embeds */

.vid {
    position: relative;
    padding-bottom: 55%;
    padding-top: 15px;
    height: 0;
    overflow: hidden;
}
.vid iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* 1:1 video embeds */

.squarevid {
    position: relative;
    padding-bottom: 98%;
    padding-top: 15px;
    height: 0;
    overflow: hidden;
}
.squarevid iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* GRID 
-------------------------------------------------- */

/* Nice Bootstrap-hack: No Gutters */

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}


/* TYPOGRAPHY 
-------------------------------------------------- */

/* Reset margin-top and padding-top on all text-elements for proper design */

h1,h2,h3,h4,h5 {
	margin-top: 0;
	padding-top: 0;
	}