﻿/*
    #EE9236 / #ee9235 = #FFA500
    #005DAB = #007fec

*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,strong,sub,sup,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* dnn reset*/
a, a:focus, a:active, a:visited, .Normal, .Head { font-size: inherit; line-height: inherit; color: inherit; text-decoration: inherit; }
blockquote p { color: inherit; }

body, input, select, textarea, button { font-family: 'Open Sans'; font-size: 21px; }
a, a img { border: none; outline: none;}
b, strong { font-weight: 700; }
p a, p a:link, a:visited { color: #007fec; text-decoration: none; }
p a:hover { text-decoration: underline; }
button, .button { outline: none; cursor: pointer; background:none; display: inline-block; border: solid 1px #fff; text-transform: uppercase; padding: 3px 15px; color: white; text-decoration: none; font-size: 26px; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; }
.button:hover { text-decoration: none; }

.clear { clear: both; }
.wrapper { width: 980px; margin: 0 auto; position: relative; }

.top { background: white; }
.top .follow { float: right; margin: 10px 0 5px; }
.top .follow ul li { float: left; margin-left: 10px; }
.top .topnav { position: absolute; top: 28px; left: 0; z-index: 9; }
.top .topnav li { float: left; font-weight: bold; font-size: 9.5pt; }
.top .topnav li.sep { margin: 0 7px; }
.top .topnav li a { text-decoration: none; color: #000; }
.top .topnav li a:hover { text-decoration: underline; }

a.social { display: block; text-align: center; background: #bcc6cc; color: white; font-size: 24px; width: 29px; height: 27px; padding-top: 2px; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
a.social:hover { background-color: #007fec; }

header { background: #FFA500; position: relative; padding: 15px 0 50px; }
header .daantje { background: url(images/daantje-small2.png) no-repeat; width: 173px; height: 222px; position: absolute; bottom: -175px; left: 0; z-index: 8; }

header .text { text-align:center; color: white; margin: 0 auto 10px; width: 670px; }
header .text h2 { font-size: 29px; text-transform: uppercase; margin: 5px 0 7px; color: #fff; }
header .text h2 b { font-weight: 700; }
header .text p { font-size: 22px; line-height: 25px; color: #000; margin-bottom: 0; }
header .text .button { float: right; margin: 25px 0; font-weight: 300;  background-color: rgba(0,0,0,0.15); }

header .navbar { background: #007fec; color: #fff; position: absolute; width: 100%; top: auto; bottom: -50px; font-size: 24px; padding: 5px 0; text-align: right; }
header .navbar .logo { position: absolute; top: -50px; left: 50%; margin-left: -75px; z-index: 8; width: 151px; height: 155px; }
header .navbar .logo img { display: block; padding: 0; width: 100%; height: 100%; }
header .navbar .logo a { padding: 0; color: none; font-weight: normal; text-decoration: none; text-transform: none; position: static; vertical-align: auto; }
header .navbar .logo a div { position: absolute; }

header .navbar a { color: #fff; font-weight: 300; text-decoration: none; text-transform: uppercase; position: relative; vertical-align: middle; padding: 10px; }
header .navbar a.fa { font-size: 40px; vertical-align: middle; padding: 0; }

header .nav { position: absolute; width: 100%; z-index: 7; background: #024176; padding-top: 80px; top: 48px; display: none; }
header .nav ul li a { display: block; text-align: center; border-bottom: solid 1px #fff;padding: 10px 0; height: auto; }
header .nav ul li:last-child a { border: none; }

.blocks .DnnModule, .blocks li { float: left; width: 33.3%; }
.blocks.grid4 li { width: 25%; }
li h4, .li h4 { color: #007fec; text-transform: uppercase; font-size: 26px; margin-bottom: 5px; }
li p, .li p { margin-bottom: 15px; line-height: 22px !important; font-size: 16px; }
.blocks li .block, .blocks .li .block { margin: 0; }

.content { margin-top: 20px; }
.content .categories { margin: 20px 0 40px; }
.content .categories ul li { font-size: 28px; text-align: center; text-transform: uppercase; height: 200px; color: white; overflow: hidden; background: #FFA500 url(joy.svg) no-repeat top left; background-size: contain; }
.content .categories ul li .cat { margin: 40px 10px; line-height: 32px; }
.content .categories.archive ul li .cat { margin: 25px 5px; }
.content .categories ul li .cat .age { font-weight: 700; }
.content .categories ul li .cat a.button { font-weight: 700; display: inline-block; border: solid 1px #fff; padding: 2px 15px 4px; text-decoration: none; color: #fff; vertical-align: middle; margin: 20px 0; transition: all .25s ease-in-out; }
.content .categories ul li .cat a.button span { font-weight: normal; }
.content .categories ul li .cat a.button:hover { background-color: rgba(255,255,255,0.2); }

.content .categories ul li.img { height: 326px; }
.content .categories ul li.img .cat { margin: 10px; }
.content .categories ul li.img img { margin: 10px 0 0; height: 180px; }
.content .categories ul li.img .cat a.button { margin: 5px 0 0; }

.content .categories ul li.prepend { height: 326px; position: relative; }
.content .categories ul li.prepend .cat { margin: 10px; }
.content .categories ul li.prepend .cat .text { margin-top: 10px; font-size: 22px; text-transform: none; line-height: 40px; }
.content .categories ul li.prepend .cat .buttondiv { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; }
.content .categories ul li.prepend .cat .button { font-weight: normal; }

.content .categories.grid4 ul li { font-size: 20px; line-height: 24px; }
.content .categories.grid4 ul li.prepend { height: 300px; }
.content .categories.grid4 ul li.prepend .cat .text { line-height: 30px; font-size: 20px; }
.content .categories.grid4 ul li .cat { line-height: 26px; }
.content .categories.grid4 ul li.img { height: 300px; }
.content .categories.grid4 ul li.img img { height: 170px; margin: 0 0 10px 0; }
.content .categories.grid4 ul li .cat a.button { }

.content .category.selection { text-align: center; overflow: auto; }
.content .category.selection.blue { background: #007fec; color: #fff; }
.content .category.selection.red { background: #f1383e; color: #fff; }
.content .category.selection.home { display: none; }
.content .category.selection .wrapper { padding: 25px 10px; }
.content .category.selection h3 { text-transform: uppercase; font-size: 28px; margin-bottom: 5px; }
.content .category.selection p { font-size: 11pt; line-height: 18pt; margin: 0; }
.content .category.selection.blue h3, .content .category.selection.red h3 { color: #fff; }
.content .category.selection select { border: solid 1px #fff; text-align: center; padding: 5px 15px; width: 50%; color: #333; margin-top: 15px; text-align-last: center }
.content .category.selection .button { background-color: #5ea1da; text-transform: none; padding: 5px 40px; color: #fff; margin-top: 15px; }

.content .nominaties { margin: 25px 0; }
/*.content .nominaties.voting { float: right; width: 640px; }*/
.content .nominaties a { transition: all .2s ease-in-out; }
.content .nominaties ul li { float: left; width: 33.3333333%; color: #fff; font-size: 28px; text-transform: uppercase; position: relative; height: 250px; /*overflow: hidden;*/ background: #fff; }
.content .nominaties ul li .item { outline: solid 1px #fff; }
.content .nominaties ul li:first-child { text-align: center; }
/*.content .nominaties.voting > ul > li { width: 50%; }*/
.content .nominaties ul li .cat { margin-top: 75px; }
.content .nominaties ul li .age { font-weight: 800; }
.content .nominaties ul li .info { display: inline-block; color: white; fill: currentColor; width: 30px; height: 30px; margin: 15px 0;  }
.content .nominaties ul li .image { width: 100%; height: 200px; }
.content .nominaties ul li .text { position: absolute; top: auto; width: 100%;text-transform: none; line-height: 18px; transition: all .25s ease-in-out; bottom: 0; }
.content .nominaties ul li .text .text-title { background: rgba(0,0,0,0.6); padding: 1px 10px; border-bottom: solid 2px #000; } 
.content .nominaties.voting ul li .text { bottom: 0; }
.content .nominaties ul li:hover .text { bottom: 0; }
.content .nominaties ul li .text h5 { font-size: 18px;  font-weight: 700; margin: 3px 0 0; color: #fff; }
.content .nominaties ul li .text .brand { font-size: 14px; margin: 3px 0; }
.content .nominaties ul li .text .dovote { color: #fff; position: absolute; right: 7px; font-size: 15px; background: #FFA500; border: solid 2px #fff; box-shadow: 0 0 5px rgba(0,0,0,0.25); width: 55px; height: 37px; padding: 13px 5px; border-radius: 50%; text-align: center; top: -10px; transform: rotate(10deg); line-height: 17px;  }
.content .nominaties ul li .text .dovote:hover, .content .nominaties ul li .text .dovote:focus, .content .nominaties ul li .text .dovote.voted { text-decoration: none; color: #fff; background-color: #007fec; transform: rotate(370deg); }

.content .nominaties ul li .text .dovote.voted span:first-child, .content .nominaties ul li .text .dovote span:last-child { display: none; }
.content .nominaties ul li .text .dovote span:first-child, .content .nominaties ul li .text .dovote.voted span:last-child { display: block; }

.content .nominaties ul li .text .dovote.voted span:last-child { font-size: 13px; }
.content .nominaties ul li .text .dovote.voted span:last-child .fa { font-size: 28px; line-height: 14px; }

.content .nominaties .goodies { display: block; margin: 0; }
.content .nominaties .text .goodies { background: #f3f3f3; height: 51px; }

.content .nominaties .goodies li { float: left; background-color: transparent; height: auto; vertical-align: middle; width: 20%; }
.content .nominaties .goodies li a { color: #797979; fill: #797979; text-align: center; width: 100%; display: block; padding: 5px 0; }
.content .nominaties .text .goodies li a span { font-size: 11px; display: block; text-transform: none; }
.content .nominaties .goodies li a .svg { width: 30px; height: 30px; fill: #797979; }
.content .nominaties .text .goodies li a .svg { width: 20px; height: 20px; opacity: .5; }
.content .nominaties .text .button { display: none; margin: 0; border: none; background-color: #FFA500; padding: 13px 0 14px; font-weight: 800; color: #fff; }
.content .nominaties.voting .text .button { display: block; }

.content .nominaties .hiddeninfo { background: none; margin: 10px 0; height: auto; text-align: left; overflow: visible; color: #000; font-size: 18px; position: relative; width: 100% !important; text-transform: none; }
.content .nominaties .hiddeninfo .arrow { }
.content .nominaties .hiddeninfo .container { border: solid 1px #d4d4d4; background: #f2f2f2; position: relative; }
.content .nominaties .hiddeninfo .container .tabs { margin: 20px 15px; width: auto; }
.content .nominaties .hiddeninfo h4 { text-transform: none; font-weight: 800; color: #000; margin: 0; }
.content .nominaties .hiddeninfo h4, 
.content .nominaties .hiddeninfo .tab, 
.content .nominaties .hiddeninfo .tab p { font-size: 18px !important; line-height: 26px; }
.content .nominaties .hiddeninfo .tab p { margin-bottom: 20px; }
.content .nominaties .hiddeninfo .tabmenu { background: #fff; padding: 1px 0; font-size: 13px; }
.content .nominaties .hiddeninfo .tabmenu .wrapper { margin: 5px 15px; display: block; width: auto; }
.content .nominaties .hiddeninfo .tabmenu .supplier { position: absolute; width: 40%; margin: 0; bottom: 5px; line-height: 16px; }
.content .nominaties .hiddeninfo .tabmenu .supplier img { max-height: 50px; display: block; float: left; max-width: 100px; margin-right: 10px; }
.content .nominaties .hiddeninfo .tabmenu .goodies { width: 60%; float: right; margin: 0; }
.content .nominaties .hiddeninfo .tabmenu .goodies li { width: 20%; position: relative; }
.content .nominaties .hiddeninfo .tabmenu .goodies li.sep { width: 1%; color: #000; font-size: 14px; display: none; }
.content .nominaties .hiddeninfo .tabmenu .goodies li.sep span { display: block; margin-top: 42px; }
.content .nominaties .hiddeninfo .tabmenu .goodies li a { color: #000; font-size: 13px;  text-transform: none; }
.content .nominaties .hiddeninfo .tabmenu .goodies li a span { display: block; margin: 5px 0 0; }
.content .nominaties .hiddeninfo .tabmenu a:hover { text-decoration: underline; }
.content .nominaties .hiddeninfo a.close { position: absolute; top: 10px; right: 10px; color: #bbb; }

.content .stemform { color: #fff; margin: 25px 0; font-size: 16px; }
.content .stemform .title { padding: 8px 15px; margin: 0 0 2px; font-size: 18px; }
.content .stemform .title label { float: left; margin-top: 5px; }
.content .stemform .title select { float: right; background: none; border: solid 1px #fff; color: #fff; padding: 1px 3px; width: 180px; margin: 0; vertical-align: middle; font-size: 18px; }

.content .stemform .part { background: #FFA500; padding: 1px 0; line-height: 22px; float: left; width: 45%; margin: 1%; }
.content .stemform .part .wrapper { margin: 30px 15px 5px; width: auto; }
.content .stemform .part h4 { color: #2d2d2d; font-size: 22px; font-weight: 800; text-transform: uppercase; margin: 10px 0; }

.content .stemform .part .vote { border-bottom: solid 1px #fff; padding: 4px 0; }
.content .stemform .part .vote:last-child { border: none; }
.content .stemform .part .vote .value { font-weight: bold; white-space: nowrap; }
.content .stemform .part .vote .value.voted { color: #007fec; }
.content .stemform .part .vote .action { opacity: .5; text-decoration: none; font-weight: 600; font-size: 24px; float: right; color: #fff; display: block; line-height: 33px; position: relative; border-radius: 50%; border: solid 3px #fff; text-align: center; width: 33px; height: 33px; margin-top: 3px; transition: all .25s ease-in-out; }
.content .stemform .part .vote .action.close { background-color: #007fec; opacity: 1; }
.content .stemform .part .vote .action.close span:before { content: "\f00c"; }
.content .stemform .part p { margin-bottom: 15px; line-height: 22px; }
.content .stemform .part .field-group { font-weight: 700; }

.content .stemform .part .gender input { display: none; }
.content .stemform .part .gender .replace { display: inline-block; width: 15px; height: 15px; border: solid 2px #fff; border-radius: 50%; vertical-align: middle; }
.content .stemform .part .gender .replace.active { background: #007fec; }

.content .stemform .part .newsletter { margin-top: 5px; display: block; }
.content .stemform .part .newsletter input { display: none; }
.content .stemform .part .newsletter .replace { display: inline-block; width: 15px; height: 15px; border: solid 2px #fff; vertical-align: middle; padding: -10px; }
.content .stemform .part .newsletter .replace.active { background: #007fec; }
/*.content .stemform .part .newsletter .replace.active::before { content: 'v'; }*/

.content .stemform .part .form-group label { display: block;  margin: 6px 0 1px; font-weight: 700; }
.content .stemform .part input, 
.content .stemform .part select { border: solid 1px #fff; background: #fce9d7; padding: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.content .stemform .part .form-group input,
.content .stemform .part .form-group select { font-size: 14px; width: 100%; }
.content .stemform .part .button { width: 100%; font-weight: 800; font-size: 22px; margin: 15px 0; }
.content .stemform .part .button:hover { background-color: rgba(255,255,255,0.2); }
.content .stemform .part .form-group ::-webkit-input-placeholder { color: #000; }
.content .stemform .part .form-group :-moz-placeholder { color: #000; }
.content .stemform .part .form-group ::-moz-placeholder { color: #000; }
.content .stemform .part .form-group :-ms-input-placeholder { color: #000; }

.content .stemform input, .content .stemform textarea, .content .stemform select { color: #222; }

.content .content_left  { float: left; width: 49%; }
.content .content_right { float: right; width: 49%; }
.content .full { margin: 0 25px; }

.ending { background: #f2f2f2; }
.ending .blockspane { padding: 30px 0; float: left; }
.ending .blockspane.DNNEmptyPane { padding: 0; }

blockquote { background: url(images/quote.png) no-repeat; width: 311px; height: 390px; padding-top: 1px; color: #fff; }
.blocks ul li blockquote p, blockquote p { margin: 217px 0 0; text-align: center; font-size: 18px;  line-height: 23px; font-style: italic; }
.blocks ul li blockquote p a, blockquote p a, blockquote p a:link, blockquote p a:visited { text-decoration: underline; color: #fff; }

footer { background: #525252; padding: 20px 0; color: #fff; font-size: 14px; line-height: 18px; }
footer .logo { float: left; margin: 15px 10px 15px 0; }
footer a, footer a:link, footer a:visited { color: white; }
footer .follow { float: right; }
footer .follow ul li { float: left; margin: 5px 8px; }
footer .follow ul li a.social { width: 40px; font-size: 28px; padding: 7px 0 0; height: 33px;}
footer .credit { float: left; }
.mob { display: none; }
.tablet { display: none; }

.activate .scroll .topnav, .activate .scroll header .info { display: none; }
.activate .scroll header { min-height: 0; padding: 0; border-bottom: solid 7px #fff; }
.activate .scroll { box-shadow: 0 0 30px #000; position: fixed; top: 0;  z-index: 9; width: 100%; height: 117px; background: #fff; }
.activate .scroll .top .follow { margin: 10px 0; }
.activate { margin-top: 233px }

.content { background: url(images/bg-pattern.gif); padding: 80px 0 50px; }
.content .intro { font-size: 21px; }
.content h1 { font-size: 29px; text-transform: uppercase; margin: 25px 0 0; }
.content h1 b, .content h1 strong { font-weight: 800; }

/*.container_text { line-height: 26px; }*/
.container_text h1, .container_text h2, .container_text h3 { margin-bottom: 20px; line-height: 100%; } 
.content h2 { font-size: 28px; margin-bottom: 20px; font-weight: bold; }
/*.container_text h3 { font-size: 21pt; font-weight: bold; margin-bottom: 0; line-height: 26px; }*/
.content p, .intro p { line-height: 34px; margin-bottom: 20px; }
.container_text ul,
.container_text ol { padding-left: 20px; margin-bottom: 20px; line-height: 26px; } 
.container_text ul li { list-style: square; }
.container_text ol li { list-style: decimal; }
.container_text table { border-collapse: collapse; background-color: #fff }
.container_text td { border: solid 1px #ccc; padding: 7px; }
.container_text tr:hover td { background-color: #f5f5f5; }

.container.form { background: #FFA500; color: #fff; margin: 25px 0; }
.container.form .wrap { margin: 0 25px; padding-bottom: 20px; }
.container.form h3 { font-weight: 800; margin: 0; color: #000; text-transform: uppercase; }
.container.form p { margin: 0; font-size: 19px; line-height: 26px; }
.container.form .btn { background: none; border: solid 1px #fff; padding: 2px 30px !important; font-size: 18px; text-transform: uppercase; font-weight: 800; }

.openklap h4 { cursor: pointer; }
.openklap .container_text { display: none; }

.intro {  margin: 10px 0; }
#moreinfo { clear: both; margin-top: 30px; }
.edit { font-size: 10pt !important; }

.ModOnyakTechFormsC input[type=text],
.ModOnyakTechFormsC textarea,
.ModOnyakTechFormsC select { padding: 4px 8px; font-size: 16px !important; box-sizing: padding-box; width: 100%; }
.ModOnyakTechFormsC .btn { display: inline-block; background: #007fec; color: #fff; font-size: 21px !important; border-radius: 0 !important; padding: 7px 30px !important; }
.ModOnyakTechFormsC .btn:hover { color: #fff !important; background: #FFA500; }

.formmodule label { font-size: 16px; }
.formmodule .form-group p { font-size: 16px; line-height: 22px; }

.dnnLoginService { font-size: 11pt; margin-top: 35px; }
.dnnLoginService ul, .dnnLoginService ul li { list-style: none; padding: 0; }

@media (max-width: 1020px) {

    .notmob { display: none; }
    .wrapper { width: 700px; }
    .blocks .DnnModule, .blocks li { width: 50%; }
    header .text h2 { font-size: 28px; }
    header .text p { font-size: 20px; }
    header .daantje { left: -70px; }
    .tablet { display: inline-block; }

    .content .nominaties.voting { width: 100%; }
    .content .nominaties, .content .stemform { width: 100%; float: none; clear:both;}
    .content .stemform { margin-top: 25px; }
    .content .stemform .part { float: left; width: 50%; }
    .content .nominaties ul li, .blocks.grid4 li { width: 50%; }

}

@media (max-width: 800px) {
    .content .content_left, .content .content_right { float: none; width: 100%; }
    .content .category.selection select { width: 90%; }
}

@media (max-width: 750px) {

    .wrapper { width: 100%; }
    .blocks .DnnModule, .blocks li { width: 100%; }
    .blocks .DnnModule .block { margin: 10px 0; }
    .follow { margin: 0 20px; }
    .daantje { display: none; }
    
    header .text { width: auto; margin: 0 20px 10px; }
    .container { margin: 0 20px; }    
    .top .topnav { right: 20px; }
    footer { font-size: 12px; }

    .blocks .li img { width: 100%; height: auto; }
    footer .credit { margin: 0 20px; }

    .content .stemform { margin: 0; }
    .content .stemform .part { float: none; width: 100%; margin: 0; }

    .categories.voting { display: none; }
    .category.selection { display: block; }
    .content .category.selection.home { display: block; }
}

@media (max-width: 500px) {

    .content .nominaties ul li,
    .content .nominaties.voting > ul > li { width: 100%; }
    .content .nominaties ul li.title { height: 150px; margin-bottom: 25px; }
    .content .nominaties ul li .cat { margin-top: 25px; }
    .content .nominaties ul li.toy { margin: 10px 0; box-shadow: 0 0 10px #999; }
    header .text .button { margin: 0; }
}

@media (max-width: 450px) {

    .blocks .DnnModule, .blocks li, .blocks .li, .blocks.grid4 li { width: 100%; }
    .mob { display: inline-block; }
    .tablet { display: none; }

    .top .follow { display: none; }
    .topnav { display: none; }

    .activate .scroll { height: 56px; }

    header .text h2 { font-size: 22px; }
    header .text p { font-size: 14px;line-height: 18px; }    
    header .nav ul li a { font-size: 18px; }
    header .text .button { margin: 15px auto;display: block; float: none; text-align: center; font-size: 18px; }

    h1 span { display: block; }
    
    .blocks .li h4 { font-size: 22px; }
    .blocks .li p { font-size: 14px; }

    blockquote { background-size: contain; width: 311px; margin: 0 auto; }
    .blocks .li blockquote p, blockquote p { font-size: 16px; line-height: 20px; margin-top: 200px; }

    .content .intro h1 { font-size: 22px; }
    .content .intro { font-size: 14px; }
    .content .intro p { line-height: 21px; }

    footer .follow { float: none; clear: both; }

    .blocks .li img { width: 100% !important; height: auto !important; }

    #moreinfo { padding: 0 20px; }
    .content .nominaties .hiddeninfo .tabmenu .goodies li a span { display: none; }
    .content h1 b, .content h1 strong { display: block; } 

}

@media (max-width: 320px) {
    blockquote { width: 100%; }
}

.countdown {  }
.countdown .wrap { display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.countdown .wrap .item { flex-basis: 0; margin: 0 20px; text-align: center; font-weight: bolder; color: #FFA500; }
.countdown .wrap .item div:first-child { font-size: 80px; line-height: 70px; }
.countdown .wrap .item div { text-transform: uppercase; font-size: 14px; margin: 20px 0; }
.countdown .wrap .item:first-child div { color: #007fec; }
.countdown .wrap .item:last-child div { color: #f1383e; }

@media(max-width: 600px){
    .countdown .wrap .item { margin: 0 10px; }
    .countdown .wrap .item div:first-child { font-size: 40px; line-height: 35px; }
}