/*
Theme Name: 
Theme URI: 
Author: Mark van der Meij
Author URI: 
Description: 
Version: 1.0
*/

/* Reset style */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{overflow-y:scroll}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

body{ font-family: 'PT Sans', sans-serif; }
img{ vertical-align: middle; max-width: 100%; }

.center{ text-align: center; }
.backgroundCover{ background-size: cover; background-position: center; background-repeat: no-repeat; }

.contentArea{ font-size: 16px; }
.contentArea h1{ font-size: 1.6em; color: #50a5dc; font-weight: bold; margin-bottom: 25px; line-height: 1.3; }
.contentArea h2{ font-size: 1.6em; color: #50a5dc; font-weight: bold; margin-bottom: 25px; line-height: 1.3; }
.contentArea h3{ font-size: 1.6em; color: #50a5dc; font-weight: bold; margin-bottom: 25px; line-height: 1.3; }
.contentArea h4{ font-size: 1.5em; color: #50a5dc; font-weight: bold; margin-bottom: 10px; line-height: 1.3; }
.contentArea h5{ font-size: 1.1em; color: #2f4d9a; font-weight: bold; line-height: 1.3;  }
.contentArea p{ font-size: 1em; color: #2f4d9a; margin-bottom: 30px; line-height: 1.5; }
.contentArea p:last-child{ margin-bottom: 0; }
.contentArea p a{ color: #50a5dc; font-weight: bold; }
.contentArea p a:hover{ }
.contentArea p em,
.contentArea p strong{ font-weight: bold; }
.contentArea .text-bigger{ font-size: 1.1em; }
.contentArea ul, .contentArea ol{ margin-bottom: 30px; color: #2f4d9a; }
.contentArea ol{ counter-reset: section; }
.contentArea ul li, .contentArea ol li{ line-height: 1.5; }
.contentArea ul li:before{ content: "● "; color: #50a5dc; }
.contentArea ol li:before{ counter-increment: section; content: counters(section, ".") ". "; color: #50a5dc; font-weight: bold; }
.contentArea img{  }
.contentArea img + p{ margin-top: 30px; } /*De paragraph na een img een aparte marge geven*/
.contentArea blockquote{  }
.contentArea blockquote:before{ content: '“';}

.button{ background: none; cursor: pointer; padding: 0 20px; width: auto; height: 40px; line-height: 40px; display: inline-block; outline: none; border: 0; text-decoration: none!important; border-radius: 5px; font-weight: bold; position: relative; }
.button span{ position: relative; z-index: 1; }
.buttonYellow{ background: #ffcc00; color: #363636 !important; }
.buttonYellow:hover{ color: #363636 !important;}
.buttonYellow:hover:after{ background: #ffb200; }
.buttonGrey{ background: #8d8c8c; color: #fff !important; }
.buttonGrey:hover{ color: #fff !important; } 
.buttonGrey:hover:after{ background: #696969; }

.button:after{ content: ''; left: 50%; right: 50%; top: 0; bottom: 0; position: absolute; transition: 0.2s ease; border-radius: 5px; }
.button:hover:after{ left: 0; right: 0; }

.header{ box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.15); position: fixed; background: #fff; width: 100%; z-index: 3; }
.header .headerBorder{ width: 100%; border-top: 5px solid #439fd9; border-bottom: 2px solid #32549e; height: 8px; }
.header .nav{ height: 102px; }
.header .nav .logo{ display: inline-block; line-height: 102px; float: left; }
.header .nav .menu{ float: right; }
.header .nav .menu li{ float: left; line-height: 102px; padding: 0 10px; }
.header .nav .menu li a{ text-decoration: none; font-weight: bold; color: #439fd9; display: inline-block; line-height: 40px; position: relative; }
.header .nav .menu li a:hover:before{ left: 0; right: 0; }
.header .nav .menu li .stores li{ padding: 0 5px; }
.header .nav .menu li .stores li a{ height: 28px; width: 28px; line-height: 28px; text-align: center; border-radius: 5px; }
.header .nav .menu li .stores li a.appStore{ background: #4b4b4b; }
.header .nav .menu li .stores li a.playStore{ border: 1px solid #ebebeb; background: #fff; }
.header .nav .menu li .stores li a.appStore img{ margin-top: -4px; }
.header .nav .menu li .stores li a.playStore img{ margin-top: -4px; margin-left: 3px; }
.header .nav .hamburger{ display: none; }

.content{ padding-top: 110px; }

.bigImpression{ height: 560px; line-height: 560px; background-image: url(assets/img/bigImpression.jpg); }
.bigImpression .loginBox{ vertical-align: middle; display: inline-block; float: none; text-align: center; line-height: 1; background: #fff; padding: 40px 25px; border-radius: 5px; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.15); }
.bigImpression .loginBox .row{ margin-right: -5px; margin-left: -5px; }
.bigImpression .loginBox .col-xs-6{ padding-right: 5px; padding-left: 5px; }
.bigImpression .loginBox input{ outline: none; width: 100%; background: #f6f6f6; border: 1px solid #e1e1e1; border-radius: 5px; height: 40px; padding: 0 20px; margin-bottom: 10px; }
.bigImpression .loginBox .button{ width: 100%; }

.smallImpression{ height: 250px; background-image: url(assets/img/smallImpression.jpg); overflow: hidden; }
.smallImpression .box{ background: rgba(67, 159, 217, 0.57); }
.smallImpression .box:before{ content: ''; background-image: url(assets/img/smallImpressionBox.png); right: 100%; height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; background-position: top right; position: absolute; }
.smallImpression .box:after{ content: ''; background: rgba(67, 159, 217, 0.57); height: 100%; width: 100%; left: 100%; position: absolute; top: 0; }
.smallImpression .box h4{ color: #fff; margin-top: 60px; }
.smallImpression .box .app{ position: relative; height: 250px; }
.smallImpression .box .app .appImage{ position: absolute; z-index: 2; max-height: 250px; bottom: 0; }
.smallImpression .box .app .flowerImage{ position: absolute; z-index: 1; bottom: 0; right: -130px; }


.breadcrumb{ color: #4c4c4c; padding: 20px 0 0; margin: 0; background: #fff; font-size: 0.9em; }
.breadcrumb a{ color: #4c4c4c; }

.pageContent{ padding: 75px 0 85px; }
.pageContent .main img{ margin: 5px 0; }
.pageContent .sidebar .sidebarBox{ background: #f2f7fc; padding: 30px 25px; margin-bottom: 30px; }
.pageContent .sidebar .sidebarBox table{ color: #2f4d9a; margin-bottom: 20px; }
.pageContent .sidebar .sidebarBox table td{ padding: 0 10px 10px 0; }

.appHighlight{ padding: 75px 0 50px; }
.appHighlight .app{ position: relative; margin-top: -185px; }
.appHighlight .app .appImage{ position: relative; z-index: 1; }
.appHighlight .app .flowerImage{ position: absolute; bottom: 0; right: calc(100% - 20px); }

.trendHighlight{ background-image: url(assets/img/background.jpg); padding: 50px 0; }
.trend{ position: relative; display: block; margin: 40px 0; color: #fff; height: 305px; border-radius: 5px; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.15); transition: 0.2s; }
.trend:hover{ box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5); }
.trend .text{ font-weight: bold; position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px 20px; background: rgba(67, 159, 217, 0.85); font-size: 1.2em; line-height: 1.4; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.trend.callToAction .text{ background: #ffcc00; color: #363636; }
.viewAllTrends{ text-align: center; }
.viewAllTrends a{ color: #439fd9; font-weight: bold; }

.contentBlock{ padding: 95px 0; }

.callMeBack{ background: #2f4d9a; text-align: center; padding: 50px 0; }
.callMeBack h4{ color: #fff; }
.callMeBack p{ color: #fff; font-weight: bold; }
.callMeBack form{ display: inline-block; border: 2px solid #fff; border-radius: 5px; width: 480px; }
.callMeBack form input{ float: left; outline: none; background: #ebebeb; height: 40px; width: calc(50% - 45px); border: 0; padding: 0 20px; }
.callMeBack form input:first-child{ border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 2px solid #fff; }
.callMeBack form .button{ float: left; width: 90px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 2px solid #fff; }

.footer{ overflow: hidden; }
.footer .mainFooter{ padding: 65px 0 0; }
.footer .mainFooter .row{ position: relative; }
.footer .mainFooter .col-md-3{ padding-bottom: 20px; }
.footer .mainFooter .flowers{ position: absolute; bottom: 0; left: -115px; max-width: calc(25% - 30px); }
.footer .mainFooter .logo{ width: 250px; margin-bottom: 25px; }
.footer .mainFooter p a{ color: #2f4d9a; font-weight: normal; }
.footer .bottomFooter{ background: #439fd9; padding: 10px 0; line-height: 1.4; height: initial; color: #fff; text-align: center; }
.footer .bottomFooter a{ color: #fff; font-weight: bold; }

@media (max-width: 1199px){

.bigImpression{ height: 450px; line-height: 450px; }

}

@media (min-width: 992px){

.header .nav .menu > li > a:before{ content: ''; height: 3px; bottom: 0; left: 50%; right: 50%; position: absolute; background: #429fd9; z-index: 1; transition: 0.2s ease; }

}

@media (max-width: 991px){

.header .nav{ height: 60px; }
.header .nav .logo{ line-height: 60px; }
.header .nav .logo img{ width: 200px; }
.header .nav .hamburger{ display: inline-block; line-height: 60px; float: right; }
.header .nav .hamburger a{ font-size: 21px; vertical-align: middle; color: #193f91; text-decoration: none!important; }
.header .nav .menu{ right: -300px; float: none; height: calc(100vh - 60px); position: fixed; top: 68px; z-index: 2; background: #193f91; transition: 0.4s ease; }
.header .nav .menu.active{ right: 0; }
.header .nav .menu li{ float: none; display: block; width: 300px; line-height: 45px; padding: 0 15px; }
.header .nav .menu li a{ color: #fff; display: block; line-height: 45px; }
.header .nav .menu li .stores li{ display: inline-block; width: auto; padding: 0 10px 0 0; }

.content{ padding-top: 68px; }

.appHighlight{ padding: 50px 0; }
.appHighlight .app{ margin-top: -100px; }
.appHighlight .app .flowerImage{ display: none; }
.appHighlight h3 br{ display: none; }

.trendHighlight .trend{ margin: 15px 0; }
.trendHighlight .viewAllTrends{ margin-top: 20px; }

.footer .mainFooter .col-logo{ text-align: center; }
.footer .mainFooter .flowers{ display: none; }

}

@media (max-width: 767px){

.appHighlight .app{ margin-top: -30px; }

.pageContent{ padding: 50px 0 40px; }
.contentBlock{ padding: 50px 0; }

.callMeBack form{ width: 100%; }
.callMeBack form input{ width: 100%; display: block; float: none; text-align: center; }
.callMeBack form input:first-child{ border-radius: 0; }
.callMeBack form .button{ width: 100%; border-radius: 0; }

.footer .mainFooter{ padding: 50px 0 0; }

}

@media (max-width: 500px){

.contentArea{ font-size: 14px; }

.bigImpression .col-button{ width: 100%; }
.bigImpression .col-button:first-child{ margin-bottom: 10px; }

.smallImpression h4{ margin-top: 35px; }
.smallImpression a{ display: block; margin-bottom: 5px; }

.appHighlight .app{ display: none; }
.appHighlight .text{ width: 100%; }

}