/* http://meyerweb.com/eric/tools/css/reset/ 
        v2.0 | 20110126
        License: none (public domain) #0066CC
        */
@font-face {
  font-family: Tillium_Web;
  src: url(font/Titillium_Web/TitilliumWeb-Regular.ttf);
}

        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, sub, sup, tt, 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;
        }
        /* HTML5 display-role reset for older browsers */
        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;
        }


        html {
            background: #0066CC; 
            font-family: 'verdana', 'Arial', 'sans-serif';
            
        }
        body {
            font-size:1rem;
        }
        body * {
            box-sizing: border-box;
            
            line-height: 1.4375; 
        }
        h1,h2,h3,h4,h5,h6 {
            font-family: Georgia, 'Times New Roman', Times, serif; 
        }
        h1 {
            font-size:2rem; 
        }
        h2 { font-size:1.8rem; }
        h3 { font-size: 1.6rem;  margin: 1.8rem auto 0.9rem; }


        a {
            text-decoration:none;
            color: #47a2ea; 
            transition-duration:0.2s;
            transition-delay:0.1s;
            transition-timing-function: ease-out; 
        }
        a:active,
        a:focus,
        a:hover {
            color:#3a8bcb;
        }

        .wrapper {
            width:100%;
            margin:16px auto 32px;
            padding-bottom: 1px;
            border-radius:4px; 
            max-width:990px; 
            background: #fff; 
            box-shadow: 0 0 5px rgba(0,0,0,.1); 
        }
        .logo {
			text-align: center;
            padding:16px 0 8px; 
            position:relative;
        }
        .logo img {
            width:850px; 
        }

        .lang {
            position:absolute; 
            right: 4px;
            top: 24px;
        }
        .lang * {
            margin:0 2px; 
        }
        .lang img {
            width: 20px;
            filter: grayscale(100%);
            transition-duration:0.2s;
            transition-delay:0.1s;
            transition-timing-function: ease-out;  
        }
        .lang a:active,
        .lang a:hover,
        .lang a:focus,
        .lang *.active {

        }

        .lang a:active img,
        .lang a:hover img,
        .lang a:focus img,
        .lang *.active img {
            filter:none; 
        }


.stripe {
    text-align:center;
    margin: 8px 32px 16px;
    padding: 16px 6px;
    vertical-align: middle; 
    border:4px solid #000; border-radius: 2px;
}

.stripe .icon {
    font-size:2rem; 
    vertical-align: middle; 
    float:left; 
}
.stripe img {
    float:left;
    width:160px; 
}

.stripe:after {
    content:"";
    display:block;
    height:1px;
    clear:both; 
}

@media screen and (max-width:600px) {
    .stripe {
        text-align:center; 
    }
    .stripe img {
        float:none;
        display:block;
        clear:both;
        margin: 16px auto;
    }
}

        .hero { position:relative;}
        /*.hero img {
            width:100%; 
        }*/

        h1 {
			font-family: Tillium_Web;
            /* position:absolute; */
            bottom:0;
            left:0;
            right:0;
            /*background: rgba(255,255,255,0.3);*/
            text-align:center; 
            padding:8px 8px 4px; 

            text-shadow: 0 1px 1px rgba(255,255,255,0.9); 
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0.3+15,1+100 */
            background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 15%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 15%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 15%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
        }

        .title {
            padding:0px 4px 8px; 
            text-align:center; 
        }

		.info{
            text-align:center;
		}

        .info:after {
            content:"";
            clear:both;
            display:block;
            width:100%;
            height: 1px; 
        }
		.info-first-row, .info-second-row {
			text-align: center;
			margin: 0px;
		}
		.info-second-row #register{
			margin: auto;
			width: 500px;
		}
        .column {
            width:50%;
            padding:16px 32px;
            float:left;

        }
		video{
			border: 1px solid rgba(0,0,0,.1);
		}
        .col-2 {
            float:right;
        }

        @media screen and (max-width:600px) {
            .column {
                width:100%; 
                float:none; 
            }
        
        
        }

        .info-second-row .block {
            margin:16px 0; 
        }
		
        .link {

        }

        .btn {
            background:#47a2ea; 
            border-radius: 4px; 
            display:block;
            text-align:center;
            padding:16px 8px;
			font-family: Tillium_Web;
            font-size:1.2rem; 
            transition-duration:0.2s;
            transition-delay:0.1s;
            transition-timing-function: ease-out; 
        }

        .btn_dark_blue {
            background: #00264d; 
            color: #ffffff;
        }
        .btn_dark_blue:hover,
        .btn_dark_blue:active,
        .btn_dark_blue:focus {
			opacity: 0.80;
            color: #ffffff;
        }

        .btn_light_blue {
            background: #0066cc; 
            color: #ffffff;
        }
        .btn_light_blue:hover,
        .btn_light_blue:active,
        .btn_light_blue:focus {
            opacity: 0.80;
            color: #ffffff;
        }

        .btn_blue {
            background: #004e99; 
            color: #ffffff;
        }
        .btn_blue:hover,
        .btn_blue:active,
        .btn_blue:focus {
			opacity: 0.80;
            color: #ffffff;
        }

        .add-padding {
            /*border:4px solid #000; border-radius: 2px;*/
            position:relative;
            padding:0px 15px 15px;
            margin:0px 15px 15px;
            
        }
        .add-padding .bhead {
            position:absolute;
            background:#fff; 
            right:-27px;
            top:-42px; 
            width:180px;
            padding:0;
            
        }
        .add-padding .bhead img { width:100%;  display:block;  }
        
        @media screen and (max-width:600px) {
            .add-padding {
                margin:45px 0 16px 0; 
                
            }
        
        }
        .note {
            color:#666; 
            font-size:0.8rem; 
            padding: 8px 0; 
        }

		#qrCode{
			padding: 0px 50px 0px 25px;
			text-align: center;
			position: relative;
		}
		#qrCode div{
			margin: 0;
			position: relative;
			top: 50%;
			transform: translate(0%, -50%);
		}

        .sticker {
            width:200px;
            margin:64px auto 16px;
            display:block;  
        }

        .qrblock {

        }
        .qrblock p {
            
        }


        .overlay {
            position:fixed;
            z-index:500; 
            background:rgba(0,0,0,0.5);
            display:none;
            left:0;
            right:0;
            top:0;
            bottom:0;
        }
        .modal-container {
            position:absolute;
            top:50px; 
            z-index:501;
            left:0;
            width:100%; 
            display:none;
        }
        .modal {
            background:#fff;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0,0,0,0.7); 
            width:100%; 
            max-width:900px;
            margin:0 auto 32px; 
        }

        @media screen and (max-width:600px) {
            .modal-container {
                top:16px; 
            }
            .modal {
                margin: 0 3%;
                width: 94%;
            }
        }
        .modal .header {
            padding: 32px 32px 16px;
            border-bottom:1px solid #ccc;  
            position:relative; 
        }
        .modal .header {
            font-size:1.6rem;
            font-weight:bold;
        }

        .modal .body {
            padding: 16px 32px 32px; 
        }
        .modal p {
            margin-bottom: 16px;
            
        }
        ol { list-style: decimal; padding-left: 25px; }
        ol li {
            margin-bottom: 16px; 
        }

        .modal p,
        .modal ol li{
            font-size:0.8rem;
        }

        .modal .body h3 {
            margin-top: 1rem;
            border-top: 1px solid #ccc;
            padding-top: 1.8rem;
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 1.3rem;
        }

        .modal a.close {
            position:absolute;
            z-index:2;
            right:16px;
            top:16px;
            opacity:0.6;
            transition-duration:0.2s;
            transition-duration:0.1s;
            transition-timing-function: ease-out; 
        }
        .modal a.close:hover,
        .modal a.close:active,
        .modal a.close:focus {
            opacity:1; 
        }
        .modal .close img {
            width:20px;
        }