f/* Copyright 2018 Google Inc. All Rights Reserved. */
 @import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic);
body{
    font-family:'Roboto',arial,sans-serif;
    font-weight:300;
    line-height:1.2em;
    margin:0;
    padding:0
}
.clear{
    clear:both
}
a,img{
    border:0
}
a,.on span,.button{
    color:#009cdc;
    text-decoration:none;
    cursor:pointer;
}
body{
    -webkit-animation-delay:0.1s;
    -webkit-animation-name:fontfix;
    -webkit-animation-duration:0.1s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-timing-function:linear
}
@-webkit-keyframes fontfix{
    from{
        opacity:1
    }
    to{
        opacity:1
    }
}
a:focus{
    outline:0
}
.title a{
    color:#000
}
a:hover,.on span:hover,.button:hover{
    color:#1465ff;
    text-decoration:none
}
.title a:hover{
    color:#000;
    text-decoration:underline
}
ul,li,dl,dd,dt{
    margin:0;
    padding:0
}
li{
    list-style:none
}
.moreinfo{
    background:no-repeat url('/doodles/static/sprites/sprites_v4.png') -203px -65px;
    height:16px;
    position:absolute;
    width:16px;
    z-index:4
}
li.cardlink a{
    display:list-item;
    line-height:1.3em;
    list-style-type:disc;
    list-style-position:inside;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
#logo{
    background:no-repeat url('/doodles/static/sprites/sprites_v4.png') -26px -86px;
    float:left;
    height:39px;
    margin-top:-11px;
    margin-right:30px;
    width:100px
}
#nav{
    background:#fbfbfb;
    border-bottom:1px solid #f1f1f1;
    left:0;
    right:0
}
#nav{
    position:fixed;
    top:0;
    z-index:100
}
#nav.maximize{
    border-color:#f1f1f1;
    padding-bottom:14px;
    padding-top:24px;
    transition:padding 0.25s ease;
    -moz-transition:padding 0.25s ease;
    -webkit-transition:padding 0.25s ease
}
#nav.minimize{
    border-color:#bbb;
    box-shadow:0 0 8px rgba(0,0,0,0.1);
    padding-bottom:0;
    padding-top:14px;
    transition:padding 0.25s ease;
    -moz-transition:padding 0.25s ease;
    -webkit-transition:padding 0.25s ease
}
#nav li{
    float:left;
}
#nav li:not(:last-child){
    padding:0 16px 0 0
}
#nav-wrap .off a{
    color:#000
}
#nav-wrap li a:hover{
    text-decoration:none
}

#nav-wrap,#content-wrap{
    margin:0 auto;
    padding:0 10px;
    max-width:1024px
}
#nav #search,#nav #language-menu{
    float:right;
    margin:-6px 0 0;
    padding:0 0 0 12px
}
#lang-icon{
    opacity:0.5;
    padding-top:4px;
    vertical-align:top
}
#lang-chooser{
    background:#fff;
    border:1px solid #ccc;
    border-radius:4px;
    height:29px
}
#search input{
    border:1px solid #ccc;
    border-radius:4px;
    height:27px;
    padding:0 25px 0 10px;
    width:160px
}
#search input.minimize{
    transition:width 0.15s ease;
    -moz-transition:width 0.15s ease;
    -webkit-transition:width 0.15s ease;
    width:160px
}
#search input.maximize{
    transition:width 0.25s ease;
    -moz-transition:width 0.25s ease;
    -webkit-transition:width 0.25s ease;
    width:260px
}
#searchform>div{
    position:relative
}
#searchbtn,.searchicon{
    background:no-repeat url('/doodles/static/sprites/sprites_v4.png') -203px -37px;
    cursor:pointer;
    height:25px;
    width:25px
}
#searchbtn{
    position:absolute;
    right:2px;
    top:2px
}
.searchicon{
    display:inline-block;
    vertical-align:middle
}
#content{
    float:left;
    width:100%
}
#homepage #content{
    background:repeat-x url('/doodles/static/sprites/sprites_v4.png') 0 -963px;
    height:838px
}
#doodle-detail #content{
    background:repeat-x url('/doodles/static/sprites/sprites_v4.png') 0 -125px;
    height:838px
}
#search #content{
    background:#fff
}
#content-wrap{
    padding-top:80px
}
#top-content{
    display:block
}
#search #top-content{
    display:none
}
#about-doodles{
    font-size:.9em;
    margin:10px 50px
}
#about #popular-doodles{
    float:left;
    margin:-14px 0 0 -10px;
    margin:0 0 0 -10px;
	margin:0;margin-right:10px;
}


@media (min-width: 1040px){
#about #popular-doodles{
    width:33%
}
#about-content-wrap{
    width:66%
}
}
@media (max-width: 1040px){
#about #popular-doodles{
    width:100%;
    float: none;
}
#about-content-wrap{
    max-width:800px;
    float: none !important;
    margin: 5px auto !important;
}
}

#about-content-wrap{
    float:right;
    margin:0 0 20px;
}
#about-content,#form-content,#popular-doodles>div{
    background:#fff;
    border:1px solid #ccc;
    box-shadow:0 0 5px #eee;
    padding:25px;
    margin-bottom:-1px;
}
#popular-doodles .ad{border-color:transparent;text-align:center;cursor:default;}
.button{text-transform:uppercase;}
#popular-doodles .ad:hover{border-color:deepskyblue;xborder-color:hotpink;z-index:10;position:relative;}
#about p{
    font-size:0.9em;
    line-height:1.7em;
}
p#about-intro{
    color:#888;
    font-size:1.3em;
    margin-top:10px
}
#policy{
    font-size:13px;
    margin-top:15px;
    text-align:center
}
#latest{
    height:330px;
    overflow-x:hidden;
    position:relative;
    max-width:1024px
}
#latest ul{
    position:absolute
}
.latest-doodle{
    cursor:pointer;
    display:none
}
.latest-doodle{
    padding:10px 0;
    position:absolute;
    width:1000px
}
.latest-doodle.on{
    display:block
}
#latest .moreinfo{
    cursor:default;
    margin:80px 0 0 610px;
    opacity:0.25;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
    filter:alpha(opacity=25)
}
#latest .large-img{
    float:left
}
#latest .container{
    display:table-cell;
    height:250px;
    vertical-align:middle;
    width:600px
}
#latest .card{
    border:1px solid #ccc;
    box-shadow:0 0 5px #eee;
    height:204px;
    margin-left:685px;
    padding:20px;
    position:absolute;
    width:296px
}
#latest .container img{
    display:block;
    margin:auto;
    max-height:250px;
    max-width:600px
}
#latest .bracket{
    background:no-repeat url('/doodles/static/sprites/sprites_v4.png') 0 -37px;
    height:39px;
    left:-23px;
    position:absolute;
    top:68px;
    width:24px
}
#latest .card div{
    clear:both;
    float:left
}
#latest .title{
    margin:20px 0 10px;
    overflow:hidden;
    padding-top:10px
}
#latest .title{
    height:100px;
    line-height:40px
}
#latest .title a{
    font-size:20px
}
.ribbon{
    background:no-repeat url('/doodles/static/sprites/sprites_v4.png') 0 0;
    color:#fff;
    font-size:.9em;
    height:10px;
    z-index:10
}
#latest .ribbon{
    left:-10px;
    padding:12px 9px;
    position:absolute;
    top:6px
}
#latest .links{
    left:20px;
    position:absolute;
    top:138px;
    width:296px
}
#latest .links ul{
    width:100%
}
#latest .cardlink{
    margin:5px 0;
    width:100%
}
#latest .cardlink a{
    width:270px
}
#latest .plusone{
    left:20px;
    position:absolute;
    top:198px
}
#latest-nav{
    height:30px
}
#latest-nav.s20nav{
    margin-top:-35px
}
#latest-nav li{
    cursor:pointer;
    float:left;
    height:5px;
    transition:opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
    -moz-transition:opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
    -webkit-transition:opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
    width:16.6%
}
#latest-nav li.on{
    height:10px;
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100)
}
#latest-nav li.off{
    height:5px;
    opacity:0.35;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
    filter:alpha(opacity=35)
}
#latest-nav li.on{
    border-top:10px solid #fff
}
#latest-nav li.off{
    border-top:15px solid #fff
}
#latest-nav li#latest-nav-0{
    background-color:#3875fc
}
#latest-nav li#latest-nav-1{
    background-color:#fa4842
}
#latest-nav li#latest-nav-2{
    background-color:#ff8809
}
#latest-nav li#latest-nav-3{
    background-color:#3c74f3
}
#latest-nav li#latest-nav-4{
    background-color:#19be29
}
#latest-nav li#latest-nav-5{
    background-color:#fa7268
}
#highlight{
    font-size:.8em;
    margin-top:20px;
    width:100%
}
#highlight{
    float:left
}
#highlight li{
    float:left;
    width:341px
}
#highlight div.news-container{
    background-color:#fff;
    border:1px solid #bbb;
    border-right-width:0;
    margin:10px;
    position:relative
}
#highlight div.news-container{
    height:320px
}
#highlight div.news-container-right{
    border-right-width:1px
}
#highlight div.news-card{
    left:0;
    position:absolute;
    top:165px
}
#highlight .news-thumb{
    display:table-cell;
    height:142px;
    overflow:hidden;
    vertical-align:middle;
    width:340px
}
*+html #highlight .news-thumb{
    position:absolute
}
#highlight .news-container-right .news-thumb{
    width:339px
}
#highlight .news-thumb img{
    cursor:pointer;
    display:inline-block;
    left:-5%;
    max-height:162px;
    position:relative;
    width:110%
}
#highlight .news-thumb img{
    top:-10px
}
*+html #highlight .news-thumb img{
    *display:inline;
    zoom:2
}
#highlight .ribbon,#highlight .title,#highlight .cardlink,#highlight .plusone{
    float:left;
    padding:0 20px;
    width:90%
}
#highlight .ribbon{
    left:-10px;
    padding:12px 9px;
    position:absolute;
    width:auto
}
#highlight .ribbon{
    top:-45px
}
#highlight .title{
    cursor:pointer;
    font-weight:400;
    margin:10px 0
}
#highlight .links{
    padding-left:25px
}
#highlight .cardlink{
    margin:2px 0
}
#highlight .cardlink a{
    width:270px
}
#highlight .plusone{
    margin:10px 0 0 5px
}
#highlight .plusone img{
    width:72px
}
#highlight .headline{
    cursor:pointer;
    font-size:2.0em;
    font-weight:100;
    line-height:1.3em;
    margin:10px 0;
    padding:0 20px
}
#archive{
    margin-top:45px
}
#archive{
    float:left;
    width:100%
}
#archive-list .doodle-thumb{
    margin-top:10px;
    position:relative
}
#archive-list .doodle-thumb{
    border-bottom:1px solid #eee;
    float:left;
    width:33.33%
}
#archive-list .thumb-container{
    float:left
}
#archive-list .thumb-container{
    overflow:hidden;
    padding:0
}
#archive-list .thumb-image{
    display:inline-block;
    height:100px;
    margin-left:10%;
    width:80%
}
#archive-list .thumb-image{
    margin-top:8px;
    vertical-align:middle
}
#archive-list .hide-card .thumb-image{
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100)
}
#archive-list .thumb-image{
    opacity:0.1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter:alpha(opacity=10)
}
#archive-list .thumb-image img{
    display:block;
    height:auto!important;
    margin:auto;
    width:100%
}
#archive-list .info{
    background:rgba(255,255,255,0.9);
    display:inline-block;
    font-size:.8em;
    height:72px;
    margin-bottom:-3px;
    overflow:hidden;
    padding:0 25px;
    position:relative;
    width:297px
}
#doodle-detail #archive-list .info{
    width:287px
}
#archive-list .info .title{
    display:block;
    font-weight:400
}
#archive-list .info .title{
    float:left;
    margin:10px 0 0;
    width:100%
}
#archive-list .moreinfo{
    cursor:default;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    left:270px;
    opacity:0.50;
    top:35px
}
#archive-list .hide-card .moreinfo{
    opacity:0.15;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter:alpha(opacity=15)
}
#archive-list .card-container{
    border:1px solid #999;
    box-shadow:0 0 15px rgba(0,0,0,0.2);
    height:178px;
    left:0;
    opacity:0.9;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter:alpha(opacity=90);
    position:absolute;
    top:0;
    transition:opacity 0.25s ease;
    -moz-transition:opacity 0.25s ease;
    -webkit-transition:opacity 0.25s ease;
    width:340px;
    z-index:5
}
#archive-list .hide-card .card-container{
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
    transition:opacity 0.25s ease;
    -moz-transition:opacity 0.25s ease;
    -webkit-transition:opacity 0.25s ease;
    z-index:-1
}
#archive-list .plusone{
    left:20px;
    position:absolute;
    top:15px
}
#archive-list .links{
    left:20px;
    position:absolute;
    top:50px
}
#archive-list .links{
    width:100%
}
#archive-list .cardlink a{
    width:280px
}
#archive-list .links .cardlink{
    margin:5px
}
#archive-list-backup{
    display:none
}
#archive #loading{
    margin:15px auto;
    text-align:center
}
#archive #loading.off{
    display:none
}
#archive #loading span{
    color:#888;
    display:inline-block;
    font-size:.9em;
    margin-top:20px
}
#archive #loading img{
    display:inline-block;
    height:12px;
    width:100px
}
#archive #error-msg{
    font-size:1.1em;
    font-weight:300;
    padding:0 30px 25px
}
#archive #bold-error-msg{
    font-weight:400
}
#doodle-newer,#doodle-older{
    cursor:default;
    height:46px;
    position:absolute
}
#doodle-newer.enabled,#doodle-older.enabled{
    cursor:pointer
}
#doodle-newer,#doodle-older{
    opacity:0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter:alpha(opacity=70);
    z-index:5
}
#doodle-newer.enabled:hover,#doodle-older.enabled:hover{
    opacity:1.0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100)
}
#doodle-older{
    background:no-repeat url('/doodles/static/sprites/sprites_v4.png') -154px -37px;
    height:46px;
    margin:129px 0 0;
    width:46px
}
#doodle-newer{
    background:no-repeat url('/doodles/static/sprites/sprites_v4.png') -53px -37px;
    height:46px;
    margin:129px 0 0 974px;
    width:46px
}
#doodle-hero{
    overflow:hidden;
    position:relative;
    text-align:center
}
#doodle-hero{
    height:304px;
    width:100%
}
#doodle-hero #plusone{
    position:absolute;
    right:0;
    z-index:5
}
#doodle-hero .large-img img{
    max-height:100%;
    vertical-align:middle
}
#doodle-hero .large-img img{
    max-width:916px
}
#doodle-hero #hplogo{
    position:relative
}
#doodle-hero #hplogo{
    height:304px;
    line-height:304px
}
#doodle-cards{
    margin-bottom:30px;
    margin-top:32px
}
#doodle-cards{
    float:right;
    width:66.66%
}
.doodle-card{
    background:#fff;
    border:1px solid #ccc;
    box-shadow:0 0 5px #eee;
    overflow:hidden
}
#doodle-cards .doodle-card{
    float:left;
    margin-bottom:20px;
    width:100%
}
#doodle-cards .card-wrap{
    padding:25px
}
#doodle-cards .time{
    color:#777
}
#doodle-cards h3,#doodle-cards h2{
    font-weight:300;
    line-height:1.5em
}
#related-doodles{
    background:#fff;
    border-left:1px solid #eee;
    margin-top:50px
}
#related-doodles{
    float:left;
    width:33%
}
#related-doodles h3,#popular-doodles h3{
    color:#777;
    font-size:.8em;
    font-weight:300;
    margin-left:25px
}
#related-doodles .doodle-thumb,#popular-doodles .doodle-thumb{
    border-bottom:1px solid #eee;
    margin-top:10px;
    width:100%
}
.history-card{
    float:left;
    height:100px;
    margin:10px 30px;
    width:240px
}
.history-card img{
    max-height:100px;
    max-width:240px
}
#history-card h3{
    font-size:1.5em;
    margin:0 0 20px
}
#geo-card h3{
    font-size:1.5em;
    margin:25px;
    position:absolute;
    z-index:5
}
#geo-card .card-wrap{
    padding:65px 25px 25px
}
.share{
    display:inline-block;
    height:23px;
    margin:2px;
    width:23px
}
.share{
    opacity:0.4;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter:alpha(opacity=40)
}
.share:hover{
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100)
}
.share-facebook,.share-linkedin,.share-pinterest,.share-twitter,.share-email{
    height:23px;
    width:23px
}
.share-facebook{
    background:no-repeat url('/doodles/static/sprites/sprites_v4.png') -129px -86px
}
.share-linkedin{
    background:no-repeat url('/doodles/static/sprites/sprites_v4.png') 0 -86px
}
.share-pinterest{
    background:no-repeat url('/doodles/static/sprites/sprites_v4.png') -27px -37px
}
.share-twitter{
    background:no-repeat url('/doodles/static/sprites/sprites_v4.png') -102px -37px
}
.share-email{
    background:no-repeat url('/doodles/static/sprites/sprites_v4.png') -128px -37px
}