@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700,700italic,400italic&subset=latin,cyrillic);

/* reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address,
img, center, ol, ul, li, dl, dt, dd, form, fieldset, label, legend, input, select, button, textarea, table, tbody, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, nav, section, time, mark, audio, video {
	border: 0; font-size: 100%; font: inherit; vertical-align: baseline; padding: 0; margin: 0; }
header, footer, nav, section, article { display: block; }
ol, ul { list-style: none; }
table { border-spacing: 0; }
button::-moz-focus-inner, input[type=submit]::-moz-focus-inner, input[type=button]::-moz-focus-inner { padding:0; border:0; }

/* basic */

html, body { width: 100%; height: 100%; }
body { color: #000; font: 400 1em/1 'Noto Sans', Tahoma, Geneva, sans-serif; }
a { color: #e5007d; text-decoration: underline; outline: none; }
a:hover { text-decoration: none; }
input:focus { outline: none; }
input::-webkit-input-placeholder { color: #333; }
input::-moz-placeholder { color: #333; }
input::-ms-placeholder { color: #333; }
.nojs { background: #e94f3d; color: #fff; display: block; padding: 1em; }
.nowrap { white-space: nowrap; }
.center { text-align: center; margin: 0 auto; }
.red { color: #e94f3d; }

/* common */

body {
    background: url(../images/intro.jpg) center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

section {
    background: none;
    min-height: 100%;
}

.logo {
    display: block;
    position: absolute;
    top: 3em;
    left: 5%;
    transition: transform 0.3s linear;
}

.logo:hover {
    transform: rotate(710deg);
}

.logo:after {
    content: 'Events in English!';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    line-height: 1.5;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

@keyframes godown {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5), 0 0 0 0 rgba(255,255,255,0.5);}
    100% { box-shadow: 0 0 0 1.5em rgba(255,255,255,0), 0 0 0 0.75em rgba(255,255,255,0); }
}

.godown {
    background: url(../images/arrow_down.png) center no-repeat;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    right: 5%;
    bottom: 3em;
    width: 5em;
    height: 5em;
    cursor: pointer;
    transition: transform 0.2s ease-in;
    animation: godown 1s 1s ease-in infinite;
}

.godown:hover {
    transform: scale(1.1);
}

section[role=main] {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    background: rgba(0,0,0,0.5);
    overflow: hidden;
    padding: 0 5%;
}

h1 {
    line-height: 1.2;
    text-align: center;
    margin: 2em 0;
    font-size: 2rem;
    font-weight: 700;
}

h1 span {
    font-weight: 400;
    font-size: 1.5rem;
    color: #e5007d;
}

.features dl {
    width: 47.5%;
    float: left;
    position: relative;
    min-height: 10em;
    padding: 0 0 0 11.5em;
    margin: 0 0 2em 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.features dl:nth-child(odd) {
    clear: both;
    margin-right: 2.5%;
}

.features dl:nth-child(even) { margin-left: 2.5%; }

.features .img {
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10em;
    height: 10em;
    margin: auto;
    box-shadow: 0 0 0 0.5em rgba(255,255,255,0.2);
    transition: box-shadow 0.3s ease-in-out;
}

.features dl:hover .img { box-shadow: 0 0 0 1em rgba(255,255,255,0.2), 0 0 0 0.5em rgba(255,255,255,0.2); }

.features dt {
    line-height: 1.4;
    font-weight: 700;
    margin-top: 0.5em;
}

.features .eng {
    color: #aecb06;
    line-height: 1.4;
    margin-top: 1em;
}

.contacts {
    text-align: center;
    clear: both;
    padding: 2em 0;
}

.contacts li {
    font-size: 150%;
    line-height: 2;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2.5%;
}

.contacts li:before {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em;
}

.contacts .phone:before { content: url(../images/phone.png); }
.contacts .mail:before { content: url(../images/mail.png); }

.contacts li a { color: #fff; }

@media screen and (max-width: 64em) { /* 1024 */
     
    .features dl:nth-child(odd), .features dl:nth-child(even) { margin: 0; }
    
    .features dl {
        width: auto;
        float: none;
        margin-bottom: 2em !important;
    }
    
}

@media screen and (max-width: 32em) { /* 512 */
 
    .logo {
        text-align: center;
        top: 0.5em;
        left: 0;
        right: 0;
        margin: auto;
        -moz-transform: scale(0.75);
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }
    
    .features dl {
        padding: 11em 0 0 0;
        margin-bottom: 4em !important;
    }
    
    .features .img {
        right: 0;
        bottom: auto;
        margin: auto;
        
    }
    
}