
@-webkit-keyframes downarrow {
  0% { 
  	-webkit-transform: translateY(0);
  	 opacity: 0.4 
  	}
  100% { -webkit-transform: translateY(0.4em);
   opacity: 0.9 }
}

.arrow {
  border-color:transparent;
  border-style:solid;
  border-width:0 1.5em;
  display:block;
  height:0;
  opacity:0.4;
  text-indent:-9999px;
  transform-origin: 50% 50%;
  width:0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7.5em;
}


.down {
  -webkit-animation: downarrow 0.6s infinite alternate ease-in-out;
  border-top:1.5em solid #00b6f1;
}

.down2{
	-webkit-animation: downarrow 0.6s infinite alternate ease-in-out;
  border-top:1.5em solid #00b6f1;
  margin-bottom: -10em;
}

body{
margin: 0;
padding: 0;
width: 100%;
}
h1 {
font-family:"Arvo";
font-weight:normal;
font-size: 55px;
text-align: center;
color: #fff;
margin: 0;
padding: 0;
}
h2 {
font-family:"Arvo";
font-weight: normal;
font-size: 40px;
text-align: center;
color: #fff;
margin: 0;
padding: 0;
}
h3 {
font-family: Oswald;
font-weight: normal;
font-size: 16px;
text-align: center;
margin: 5px 0;
padding: 0;
z-index: 1;
position: relative;
}


.center { margin: 0 auto; }
.content{ margin: 0 auto; width: 960px; }
.clear { clear: both; }

#header {
width: 100%;
background: url('../img/header-bg.png');
height: 80px;
position: fixed;
margin-top: 30px;
}
#nav { width: 410px; float: right;
 margin-top: 20px;
 margin-right: 40px;
  }
#logo a { color: #fff; text-decoration: none;
 float: left; font-size: 30px; margin-top: 20px;
 margin-left: 40px;
  color: #fff;
   font-family: 'Raleway', sans-serif;
    font-weight: bold;
}
#nav ul{
list-style: none;
display: block;
margin: 0 auto;
list-style: none;
}
#nav li{
margin-top: 9px;
float: left;
padding-left: 21px;
}
#nav li a { color: #fff; opacity:0.6;
 font-size: 16px; text-decoration: none; font-family: 'Wellfleet'; }
#nav li a.active { color: #fff; opacity:1; border-bottom: 2px solid #fff; }
#nav li a:hover { color: #fff; opacity:1; }

.quotes {
font-family: 'Goudy Bookletter 1911', serif;
font-weight: normal;
font-size: 30px;
text-align: center;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
margin: 20px auto;
}

p {
	text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);	
}

img.displayed {
	position: relative;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

img.img-circle {
        border-radius: 50%;
        position: relative;
        bottom: -40px;
        margin-right: 20px;
        margin-left: -50px; 
    }

.quotes_container img.ontop {
	position: absolute;
	margin-left: 300px;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	top: 1670px;
}

h2 p {
	font-size: 40px;
}

h3 p {
	margin-top: 40px;
}

h3 li {
	font-size: 20px;
}

h4.quotes{
	margin-bottom: 100px;
}

p.blocktext {
	display: none;
}

.quotes_container h2:hover {
	text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);	
}

section:hover .blocktext {
	display: block;
	font-family: 'Goudy Bookletter 1911', serif;
	font-weight: normal;
	font-size: 20px;
	margin-left: auto;
    margin-right: auto;
    width: 35em ;
    text-align: center;
}

 .author_name_white { font-family:"Wellfleet"; margin: 70px 0 0 75px; color: #fff; font-size: 20px; } 
 .author_name_gray { font-family:"Wellfleet"; margin: 70px 0 0 75px; color: #94a4a4; font-size: 20px; } 
 .quotes_container { width: 800px; margin: 0 auto; }

 .title {
 	margin-right: auto;
 	margin-left: auto;
 	margin-top: -1em;
 	margin-bottom: 1em;
}

#greetings {
	margin-top: -88px;
	margin-bottom: 50px;
}

#christmas_tree { 
	background: url('../img/christmas-tree.png')no-repeat;
	 width: 48px; height: 77px; 
	 margin-top: 0;
	 margin-bottom: -25px;
	 margin-right: auto;
	 margin-left: auto;
	  position: relative;
	   bottom: 80px;}
#divider { background: url('../img/divider.png')no-repeat;
 width: 300px; height: 35px; margin: 0px auto 27px auto;  }
#ribbon { background: url('../img/ribbon.png')no-repeat;
 width: 251px; height: 48px; 
	margin-top: 0;
 margin-bottom: -30px;
 margin-right: auto;
 margin-left: auto;
  display: block; position: relative; top: -38px;}
#snowflakes1 { background: url('../img/snowflakes.png')no-repeat;
 width: 24px; height: 21px; 
	margin-top: 0;
 margin-bottom: -80px;
 margin-right: auto;
 margin-left: auto;
  display: block; position: relative; bottom: 24px; left: -102px; }
#snowflakes2 { background: url('../img/snowflakes.png')no-repeat;
 width: 24px; height: 21px; 
 	margin-top: 0;
 margin-bottom: -80;
 margin-right: auto;
 margin-left: auto;
  display: block; position: relative; bottom: -36px; right: -100px; }

#snowflakes2 h2, #snowflakes2 h1 {
	position: relative;
	margin-bottom: 50px;
}

#slide1, #slide2, #start{ width: 100%; }
#slide1{
background:url('../img/slide1-1.jpg') 50% 0 no-repeat fixed;
color: #fff;
height: 600px;
margin: 0;
padding: 200px 0 260px 0;
background-size: cover;
}
#slide2{
background-color: #fff;
color: #333333;
height: 650px;
margin: 0 auto;
overflow: hidden;
padding: 200px 0;
}
#slide3{
background: url(../img/slide1.jpg) 50% 0 no-repeat fixed;
color: #fff;
height: 1550px;
padding: 170px 0 0 0;
background-size: cover;
}
#slide4{
background-color: #fff;
color: #333333;
height: 300px;
padding: 200px 0;
}
#slide5{
background: url(../img/slide5.jpg) 50% 0 no-repeat fixed;
height: 200px;
margin: 0 auto;
padding: 250px 0;
color: #fff;
background-size: cover;
}

#skip {
	margin-bottom: 50px;
}

#copyright { color: #fff; font-family:"Wellfleet"; font-size: 14px; margin-top: 100px; text-align: center; }
#copyright a { text-decoration: none; color: #fff; }


@import 'https://fonts.googleapis.com/css?family=Comfortaa:300,400,700&subset=cyrillic,cyrillic-ext,latin-ext';

button {color:#454545;background:transparent;border-width:2px;
	border-style: solid;border-color: #454545;position:relative;
	margin:1em;display:inline-block;padding:0.5em 1em;transition:all 0.3s ease-in-out;text-align:center;
font-family:comfortaa;font-weight:bold}
button:before, button:after {content:'';display:block;position:absolute;border-color:#454545;box-sizing:border-box;border-style:solid;width:1em;height:1em;transition:all 0.3s ease-in-out}
button:before {top:-6px;left:-6px;border-width:2px 0 0 2px;z-index:5;}
button:after {bottom:-6px;right:-6px;border-width:0 2px 2px 0;}
button:hover:before, button:hover:after {width:calc(100% + 12px);
  height:calc(100% + 12px);border-color:#fff}
button:hover {color:#353535;background-color:#fff;border-color:#fff}
.panel {max-width:960px;text-align:center;position:relative;margin:auto;}


.pink button {color:#eb1777;border-color:#eb1777}
.pink button:before, .pink button:after  {border-color:#eb1777}
.pink button:hover:before, .pink button:hover:after {border-color:#eb1777;}
.pink button:hover {color:#fff;background-color:#eb1777;border-color:#eb1777;}
.pink .panel {max-width:960px;text-align:center;position:relative;margin:auto;}


.blue button {color:#3bb4e5;border-color:#3bb4e5}
.blue button:before, .blue button:after  {border-color:#3bb4e5}
.blue button:hover:before, .blue button:hover:after {width:calc(100% + 12px);
  height:calc(100% + 12px);border-color:#3bb4e5;transform:rotateY(180deg)}
.blue button:hover {color:#3bb4e5;background-color:transparent;border-color:#3bb4e5}
.blue .panel {max-width:960px;text-align:center;position:relative;margin:auto;}

.borderless button {border-color:rgba(0,0,0,0);color:#999}
.borderless button:hover {border-color:#353535;background-color:transparent;color:#353535}
.borderless button:before, .borderless button:after {border-color:transparent;}
.borderless button:hover:before, .borderless button:hover:after {width:calc(100% + 12px); height:calc(100% + 12px);border-color:#353535}

.bw button {color:#fff;border-color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.1);
box-shadow:0 1px 3px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1) inset
}
.bw button:before, .bw button:after  {border-color:#fff}
.bw button:hover:before, .bw button:hover:after {width:calc(100% + 12px);
  height:calc(100% + 12px);border-color:#353535;}
.bw button:hover {color:#fff;background-color:#353535;border-color:#353535}
.blue .panel {max-width:960px;text-align:center;position:relative;margin:auto;}

{
	margin-top: 100px;
	margin-bottom: 300px;
}

