/* ############################ General ###################################### */

small {
   color: gray;
}

h1 {  
   @media (max-width: 650px) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
   }
}

body {
   /*opacity: 0;  hide page at the beginning */
   transition: opacity 1s ease;
}

/* The App icon left on the caption of the page */
.appicon {
   background-size: 100% 100%;
   border-radius: 17.544%;
   box-shadow: 0px 0px 5px #888888;
   width : 40px;
   height: 40px;
   margin: 10px;
}

/* colored bold texts */
b.orange {
   color: #ff4400;
}
b.green {
   color: green;
}

.myrow {
   width: 100%;
}
.mycolumn {
   /*background-color: red;*/
   float: left;
   padding: 20px;
   box-sizing: border-box;
   text-align: left;
   margin-bottom: 50px;
}
/* Row with single column only: */
.mycolumn-single {
   /*background-color: pink;*/
   padding: 20px;
   box-sizing: border-box;
   text-align: left;
   margin-bottom: 50px;
}
/*First part bigger that 2. column: */
.mycolumn:first-child {
   margin-top: 20px;
   width: 65%;
}
/* The smartphone image column: */
.mycolumn:nth-child(2) {
   width: 35%;
   /*background-color: yellow;*/
   text-align: center;
}
/*Switch left and right layout on every new row */
.myrow:nth-of-type(even) .mycolumn {
   float: right;
}
.myrow:nth-of-type(odd) .mycolumn {
   float: left;
}

/*Restrict size of the images in column to 200px max*/
.mycolumn img {
   max-width: 210px;
}
img.bigimage {
   max-width: 550px;
}

/*The footer on the bottom */
.footer {
   margin-top: 50px;
   text-align : center;
}

.navbar-inner {
   opacity: 0.95;
}

.reset {
   width: 100% !important;
   clear: both;
   margin-bottom: 0px;
}

/* ----- iPhone Framing stuff start ------ */
* {
   box-sizing:border-box;
}
.screen-partial {
   width: 300px;
}
.device--holder {
   overflow:hidden;
   position:relative;
   text-align:left;
   margin-top: 20px;
   margin-bottom: 20px;
}
.device--holder .device {
   background-repeat:no-repeat;
   background-size:100% auto;
   bottom:0;
   left:0;
   pointer-events:none;
   position:absolute;
   right:0;
   top:0;
   z-index:1
}
.device--holder img.screen {
   margin: 0 0;
   height:100%;
   pointer-events:none;
   position:absolute;
   -webkit-user-select:none;
   -moz-user-select:none;
   user-select:none;
   width:100%
}
.device--holder.device--iphone {
   aspect-ratio: 727/1471;
   max-width:80vw;
   width: 300px;
}
/* Old browser support for "aspect-ratio" */
@supports not (aspect-ratio: 727 / 1471) { 
   .device--holder.device--iphone::before {
     float: left;
     padding-top: calc(100% / (727 / 1471));
     content: "";
   }
   .device--holder.device--iphone::after {
     display: block;
     content: "";
     clear: both;
   }
}
.device--holder.device--iphone .device {
   background-image:url(../images/v19/device-iphone.png);
   opacity:100%;
}
.device--holder.device--iphone img.screen {
   padding:4.9% 5.3% 4.8% 5.33%
} 
/* ------- iPhone Framing stuff end ------- */

@media only screen and (max-width: 650px) {
    .mycolumn {
        width: 100% !important; /* => remove column restriction */
        clear: both;
        margin-bottom: 0px;
    }
    .mycolumn:nth-child(even) {
     text-align: center;
    }
    .mycolumn img {
      max-width: 250px;
    }
}


/* ---------------------- For the caption menu ------------------------------ */

.menu {
   display: block;
   margin-left: 50px;
   float: right;
}

#headline div {
   float: left;
}

.menu a {
   float: right;
   color: white;
   font-size: 80%;
   margin-left: 5px;
   margin-right: 5px;
}

.menu a img {
   margin: 0px;
}