/* ==============
MAIN
 ============== */

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust:100%
}

body {
    -moz-font-feature-settings: 'kern';
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

body {
    margin:0;
    padding:0;
    height:100%;
}


body {
    font-family: "Avenir Next", sans-serif, Helvetica-Neue, Helvetica, Arial;
   font-weight: normal;
    line-height: 26px;
    background-color:white;
    font-size: 16px;
}

address, article, aside, div, footer, header, hgroup, layer, main, nav, section
    {
        display: block;
        margin: 0;
        padding:0;
    }


/* ==========================================================================
 Styles
 ========================================================================== */
ul, li, h1, h2, h3, h4  {
    margin: 0;
    padding: 0;
}


h1, h2, h3, h4  {
    line-height: 1.5em;
    font-weight: 600;
}


h1  {
    font-size: 64px;
}   /*evt 54 px, iets bescheidener*/

h2  {
    font-size: 32px;
}

h3  {
    
}


h2, h4  {
    color: #4A4A4A;
/*    font-weight: 400;*/
}

p   {
    font-size: 18px;
    line-height: 28px;
    
}


a, a:link,
a:visited  {
    text-decoration: none;
    color:#0580ff;
}

a:hover {
   color:#0580ff;
}

.press {
    color: #666;
}

.bg_grey    {
    background-color: #ddd;
}



.weblink    {
    color: grey;
    margin-top:-20px;
}

 .burgundy {
    color: #BB001F;
/*    margin-top: 0;*/
}

/* ==============
 Containers
 ============== */
#container  {
    min-height:100%;
    position:relative;/*footer absolute for bottom stick*/
}


.postercontainer, .bannercontainer  {
    width: 100%;
    height: 550px;
    overflow: hidden;
    background-color: #999;
}

 .bannercontainer  {
     height: 560px;
 }
#welcome    {
    background: url(images/devart-posterq.jpg) center/cover no-repeat;
 }
@media only screen and (max-width: 480px) {
    #holidays {
        background:
        url(images/poster-holidays.png) center/cover no-repeat,
        linear-gradient(rgba(58,145,225,1.0 ), #86D0F2);
    }
}
@media only screen and (min-width: 481px) {
    #holidays {
        background:
        url(images/poster-holidays@2x.png) center/cover no-repeat,
        linear-gradient(rgba(58,145,225,1.0 ), #86D0F2);
    }
}
#calendars  {
    background: linear-gradient(to bottom,  rgb(0,124,255), rgb(226,42,36) 100%) ;
 /*     background-color: #9C8266;*/
}
@media only screen  and (max-width: 480px)  {
   #clictric {
        background: radial-gradient( rgba(0,0,0,0.15) ,  rgba(0,0,0,0) 80%),  url(images/poster-clictric-s3.jpg) center/cover  no-repeat   ;
    }
}
@media only screen  and (min-width: 481px) {
    #clictric {
        background: radial-gradient( rgba(0,0,0,0.1) ,  rgba(0,0,0,0) 80%),  url(images/poster-clictric.jpg) center/cover  no-repeat  ;
    }
}
#wines {
    
    background: radial-gradient( rgba(0,0,0,0.1) ,  rgba(0,0,0,0) 60%),  url(images/poster-wines.jpg) center/cover no-repeat;
}
#noto {
    background:  radial-gradient( rgba(0,0,0,0.1) ,  rgba(0,0,0,0) 60%),  linear-gradient(6deg, rgba(44,164,221,0.1) 55%, rgba(36,145,197,0.4) ),     url(images/poster-noto.jpg)  50% 90% no-repeat ;
    background-color: rgba(44,164,221,1);
}
#cook {
      background:
/*      radial-gradient( rgba(0,0,0,0.1) ,  rgba(0,0,0,0) 60%),*/
/*      linear-gradient(9deg, rgba(86,178,59,0.85) 10%, rgba(3,136,43,0.9) ),*/
    linear-gradient(to top, rgba(0,169,3,0.85) 10%, rgba(0,123,0,0.9) ),
       url(images/poster-cook.jpg) center/cover no-repeat ;
}

#facemix {
    background:   radial-gradient( rgba(0,0,0,0) ,  rgba(0,0,0,0) 80%),  linear-gradient(-170deg, rgba(0,0,0,0.2 ), rgba(0,0,0,0 )),  url(images/poster-facemix.jpg) center/contain no-repeat ;
    background-color: #FF9541;
}

#floatingmemory {
    background:  radial-gradient( rgba(0,0,0,0.15) ,  rgba(0,0,0,0)100%), url(images/poster-floating.png) center/contain no-repeat ,  linear-gradient(#36bbff, #0178ff )   ;
}

#navigation-container   {
    margin-top: 16px;
}


#contactcontainer   {
    background-color: #e0e0e0;
}






/* ==============
 Lay-Out Classes
 ============== */
/*tot 1100*/
.wrapper {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    max-width: 1140px;
  
}

.wrap   {
    padding: 100px 0 100px;
}

.bottom {
    margin-bottom: 40px;
}
.productcontainer    {
    display: block;
    margin: auto;
    margin-top:120px;
    margin-bottom:120px;
    width:90%;
    max-width: 1140px;
}

.clear    {
    clear:both;
    height: 0;
}

.floatleft   {
    float:left;
}

.floatright   {
    float: right;
}

.center  {
    text-align: center;
}


.linebreak  {
    padding-top: 40px;
    padding-bottom: 40px;
    border-bottom:1px solid #a3a4a5;
}

.last  {
    padding-top: 40px;
    padding-bottom: 40px;
}

.headerleft   {
    float:left;
    width:45%;
    padding-right: 5%;
}

.postertekst-box, .bannertekst-box {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 45%;
    transform: translateY(-55%);
    color:white;
    text-align: center;
}

/*.postertekst-box {*/
/*    top: 40%;*/
/*    transform: translateY(-60%);*/
/*}*/

.heading    {
    margin-bottom: 60px;
}

#about  {
    background-color: #F0F0F0;
}
.blokhead   {
    background-color: #e6b800;
    height: 100px;
    color: white;
    text-align: center;
    }


.products_row {
     width: 90%;
     max-width: 1140px;
     margin: auto;
    margin-top: 120px;
    margin-bottom: 120px;
    display: flex;
    justify-content: center;
}

.products_row > div {
    font-size: 18px;
    width: 20%;
    text-align: center;
}


.product_caption {
     margin: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 50px;
}

.colum2_2, .colum2_3   {
    width: 50%;
    float: left;
}

.colum2_1, .colum2_4    {

    float: right;
    width: 50%;
}

.colum2_5 {
   width: 45%;
   margin-right: 5%;
     float: left
}

.colum2_6 {
    width: 45%;
    margin-left: 5%;
    float: right;
}


.seperator  {
    background-color: #666;
    height: 1px;
}


.product_photo-box {
    position: relative;
    width: 102px;
    height: 102px;
    margin: auto;
}

.app-icon-box, .app-icon-box-last {
    float: left;
    position: relative;
    margin-top: 5px;
    margin-right: 40px;
    width: 100px;
    height: 100px;
}

.app-icon-box-last {
     margin-right: 0px;
}

.app-icon-box img, .product_photo-box img, .app-icon-box-last img  {
    position: absolute;
    left: 0px;
    top: 0px;
/*   -webkit-mask: url(images/icon_appmask.svg) center/cover no-repeat;*/
    width:100%;
    height:100%;
  /*
        border-radius: 22.5%;
           border: 1px solid rgba(0,0,0,0.1);
         
    */
}


.app-icon-border    {
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    background: url(images/icon_app-border20.svg) center/cover no-repeat;

}
/*
.appicon, .product_icon {
    border-radius: 22.5%;
    border: 1px solid rgba(0,0,0,0.1);
    width: 100px;
    height: 100px;
}
*/
/* ==============
Navigation
 ============== */
#logobox    {
    float: left;
    margin-left: 30px;
    width: 106px;
}


#logobox  img {
    vertical-align: middle;
    width: 100%;
  
}



#logobox  a:link,
#logobox  a:visited {
    color: #242424;
}

#logobox  a:hover {
     text-decoration: none;
}

#main-navigation {
    float: right;
}

#nav {
    padding:0;
    margin:0;
}


#nav li {
    display: inline-block;
    line-height: 16px;
}


nav a:link,
nav a:visited {
    color:  #CFFC2F;
    text-decoration: none;
    font-weight: normal;
}


nav  .current a,  nav .language-active, nav a:hover   {
     color: white;
}



nav li.lang-item     {
       padding-right: 15px;
       border-right: 1px solid #fff;
}

nav li.menu-item, nav li.lang-itemlast {
    padding-right: 30px;
    padding-left: 15px;
}




.hidebutton {
    display: none;
}



/* ==============
 Products
 background: radial-gradient(   rgba(0,0,0,0.1) 70%, rgba(255,0,0,0)  10%);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .8);
 ============== */



.prod-content-block, .prod-title-block {
    margin-top: 32px;
    margin-bottom: 32px;
 
}



.video     {
    width: 400px;
}

.iphone-imgbox, .iphone11-imgbox  {
   width: 330px;
/*   height: 671px;*/
/*   background: url(images/iPhone-8-Space-Gray.jpg)  center/cover no-repeat;*/
/*   background-color: pink;*/
   position: relative;
}

.iphone-s-imgbox  {
    width: 278px;
/*    height: 514px;*/
}

.iphone-imgbox-silver {
    width: 330px;
/*    height: 671px;*/
/*    background: url(images/iPhone-8-Silver.jpg)  center/cover no-repeat;*/
    position: relative;
}

.iphone-img {
    width: 100%;
    height: auto;
}

.prod-links-block   {
     margin-top: 20px;
     float: left;
}

.appbadge   {
    width:150px;
    margin-right: 40px;
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: #f2f2f2;
    display: inline-block;
 
}

.prod-navi-block    {
    height: 100px;
    width: 100%;
}




/* ==========================================================================
 footer
 ========================================================================== */
#footer {
    clear:both;
    text-align: left;
    color: white;
    background-color: #333;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    padding-top: 40px;
    padding-bottom: 40px;
    overflow: hidden;
    font-size: 16px;
}


.footerspace    {
    height: 150px;
}/*moet groter zijn dan footer height*/




.footer_item1, .footer_item2, .footer_item3 {
    width: 33%;
    float: left;
}

.footer_item1 , .footer_item2{
    float: right;
    text-align: right;
}



.footer_item2 {
    text-align: center;
}

 #footer a:link, #footer a:visited {
    color: white;
}

#footer  a:hover   {
    color: #0580ff;
}




/* ==========================================================================
Animations
 ========================================================================== */

.iphone-imgbox .ani, .iphone-imgbox-silver .ani {
    position: absolute;
    width: 284px;
    height: 505px;
    left: 24px;
    top: 83px;
}

.iphone-imgbox-silver .ani {
     width: 288px;
     height: 512px;
     left: 21px;
     top: 76px;
}



 .iphone-imgbox-silver .ani-clictric   {
    animation-name: clictric-animation;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-delay: 4s;
}

.iphone-imgbox-silver .ani-s-1   {
    animation-name: ani-img1;
}

.iphone-imgbox-silver .ani-s-2   {
    animation-name: ani-img2;
}

.iphone-imgbox-silver .ani-s-3   {
    animation-name: ani-img3;
}

.iphone-imgbox-silver  .ani-s-4   {
    animation-name: ani-img4;
}

.iphone-imgbox-silver  .ani-s-5   {
    animation-name: ani-img5;
}

.iphone-imgbox-silver  .ani-s-6   {
    animation-name: ani-img6;
}

@keyframes ani-img1 {
    0% , 100% {opacity:1;}
}

@keyframes ani-img2 {
    0% , 14% {opacity:0;}
    15% ,100% {opacity:1;}
}

@keyframes ani-img3 {
    0% , 31% {opacity:0;}
   32% , 100% {opacity:1;}
}

@keyframes ani-img4 {
    0% , 47% {opacity:0;}
    48% , 100% {opacity:1;}
}

@keyframes ani-img5 {
    0% , 63% {opacity:0;}
    64% , 100% {opacity:1;}
}

@keyframes ani-img6 {
    0% , 79% {opacity:0;}
   80% , 100% {opacity:1;}
}



.ani-cook  {
    animation-name: cook-animation;
    animation-duration: 15s;
    animation-iteration-count: infinite;
}

@keyframes cook-animation {
    0% {opacity:0;}
    47% {opacity:0;}
    50% {opacity:1;}
    97% {opacity:1;}
    100% {opacity:0;}
}