#home {
 background: #154558;
 min-height: 100vh;
 src: url('../fonts/FiraSans-Light.eot');
 src: local('Fira Sans Light'),
 url('../fonts/FiraSans-Light.eot') format('embedded-opentype'),
 url('../fonts/FiraSans-Light.woff') format('woff'),
 url('../fonts/FiraSans-Light.ttf') format('truetype');
 font-weight: 300;
 font-style: normal;
}
@font-face {
 font-family: 'Fira Sans';
 src: url('../fonts/FiraSans-Regular.eot');
 src: local('Fira Sans Regular'),
 url('../fonts/FiraSans-Regular.eot') format('embedded-opentype'),
 url('../fonts/FiraSans-Regular.woff') format('woff'),
 url('../fonts/FiraSans-Regular.ttf') format('truetype');
 font-weight: 400;
 font-style: normal;
}
@font-face {
 font-family: 'Fira Sans';
 src: url('../fonts/FiraSans-Bold.eot');
 src: local('Fira Sans Bold'),
 url('../fonts/FiraSans-Bold.eot') format('embedded-opentype'),
 url('../fonts/FiraSans-Bold.woff') format('woff'),
 url('../fonts/FiraSans-Bold.ttf') format('truetype');
 font-weight: 700;
 font-style: normal;
}
html {
 overflow: fixed;
}
body {
 background: #455a64;
 overflow: auto;
 height: 100vh;
}

/***** Printing House *****/
body, p, a, th, td, li, dl, .form-control { font: normal normal 300 18px/2em 'Fira Sans';}
b, strong, dt { font-weight: 400;}
h1, h2, h3, h4, h5, h6 { line-height: 2em;}

/***** Animation Blob *****/
.fade-in {
 opacity: 0;
 transform: translateY(-20px);
 animation: css-animation-fadeInUp 0.6s ease-out forwards;
 animation-delay: 0.3s;
}
@keyframes css-animation-fadeInUp {
 to {
 opacity: 1;
 transform: translateY(0);
 }
}
.fade-in2 {
 opacity: 0;
 transform: translateY(20px);
 animation: css-animation-fadeInUp 0.6s ease-out forwards;
 animation-delay: 0.3s;
}
@keyframes css-animation-fadeInUp2 {
 to {
 opacity: 1;
 transform: translateY(0);
 }
}
.zoom-effect {
 transition: transform 0.3s ease;
}
.zoom-effect:hover {
 transform: scale(1.05);
}
@keyframes css-animation-float {
 0% {
 transform: translateY(0);
 }
 50% {
 transform: translateY(-10px);
 }
 100% {
 transform: translateY(0);
 }
}
.float {
 display: inline-block;
 animation: css-animation-float 3s ease-in-out infinite;
}
@keyframes css-animation-blink {
 0%, 100% {
 opacity: 1;
 }
 50% {
 opacity: 0;
 }
}
.blinking-text {
 animation: css-animation-blink 2s infinite;
}
.card {
 background: white;
 padding: 20px;
 border-radius: 8px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover {
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 transform: translateY(-5px);
}

/***** Spoiler *****/
input[id^="spoiler"]{
 display: none;
}
input[id^="spoiler"] + label {
 display: block;
 width: 500px;
 margin: 0 auto;
 padding: 10px 20px;
 background: #ffffff;
 color: #000000;
 text-align: center;
 font-weight: normal;
 font-size: 16px;
 border-radius: 5px;
 cursor: pointer;
 transition: all .6s;
}
input[id^="spoiler"]:checked + label {
 color: #333;
 background: #ccc;
}
input[id^="spoiler"] ~ .spoiler {
 width: 80%;
 height: 0;
 overflow: hidden;
 opacity: 0;
 margin: 10px auto 0; 
 padding: 10px; 
 border-radius: 8px;
 transition: all .6s;
}
input[id^="spoiler"]:checked + label + .spoiler{
 height: auto;
 opacity: 1;
 padding: 15px;
}

/***** Shadows *****/
.shadow-top-down {
 box-shadow: 0px 8px 8px -4px rgba(0,0,0,0.75);
 transition: all .5s;
}
.shadow-top-down:hover { box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);}

/***** Forms *****/
form {
 max-width: 500px;
 margin: 0 auto;
 margin-top: 30px;
}
form .form-group { margin-top: 30px;}
form input.form-control,
form button.form-control,
form textarea.form-control ,
form select.form-control {
 border: 0px;
 background-color: transparent;
 border-bottom: 3px solid #233842;
 border-radius: 5px;
 height: 45px;
}
form input.form-control:focus,
form button.form-control:focus,
form textarea.form-control:focus {
 border-bottom-color: #c0c0c0;
 box-shadow: none;
}
form button.form-control {
 background-color: #275267;
 transition: .5s;
}
form button.form-control[type=reset] { background-color: transparent;}
form button.form-control:hover,
form button.form-control:focus {
 border-bottom-color: #275267;
 background-color: #1c2d35;
}
form textarea.form-control { min-height: 120px;}
form .input-group-addon { 
 border: 0px;
 background-color: transparent;
 border-bottom: 3px solid #233842;
 vertical-align: top;
 border-radius: 0;
 color: white;
}
form .input-group-addon i { padding-top: 10px;color: #000;}
form .checkbox input[type=checkbox] { margin-top: 0px;}

/***** Images *****/
.img-rounded { border-radius: 4px;}
.img-n-pargaraph .pull-right {
 padding: 0;
 margin: 10px 0 15px 15px;
}
.img-n-pargaraph .pull-left {
 padding: 0;
 margin: 10px 15px 15px 0;
}
/***** Верхняя часть *****/
header.template_header h1 {
 font: normal normal 200 50px/80px 'Fira Sans', sans-serif;
 text-align: center;
 margin-top: 50px;
 color: #fff;
}
header.template_header h1 span {
 position: relative; 
 top: -15px;
}
/***** Меню *****/
nav.main-menu {
 top: 130px;
 right: 100px;
 z-index: 998;
 display: none;
 position: fixed;
 background: #fff;
 padding: 15px;
 border-radius: 5px;
 border: 1px solid rgba(37,58,68,.15);
}
nav.main-menu a:link, nav.main-menu a:hover, nav.main-menu a:focus, nav.main-menu a { 
 color: #455a64;
 text-align: left;
 font: normal normal 400 18px/30px 'Fira Sans', sans-serif;
 padding: 10px 50px 10px 30px;
 border-radius: 0;
}
.show-menu {
 position: fixed;
 z-index: 999;
 top: 50px;
 right: 100px;
 text-align: center;
}
.show-menu a:hover, .show-menu a {
 font: normal normal 100 100px/70px 'Fira Sans', sans-serif;
 border: 1px solid rgba(37,58,68,.15);
 text-decoration: none;
 border-radius: 50px;
 background: #fff;
 display: block;
 color: #455a64;
 width: 70px;
 height: 70px;
 padding: 0px;
 outline: none;
}

/***** Home *****/
#home {
 background: #154558 url(../images/pattern_main.webp) fixed;
 min-height: 100vh;
 padding-bottom: 130px;
 color: #fff;
}
#home .home_inner_wapper {
 width: 80%;
 max-width: 1000px;
 margin: 0 auto;
}
#home h1 {
 margin-top: 25vh;
 font: normal normal 550 41px/80px 'Fira Sans', sans-serif;
}
#home h2 {
 font: normal normal 100 26px/32px 'Fira Sans', sans-serif;
}
#home p {
 margin: 25px 0 25px 0;
 font: normal normal 100 18px/40px 'Fira Sans', sans-serif;
}
#home p a {
 background-color: rgba(255,255,255,.6);
 border-bottom: 1px dotted #000;
 text-decoration: none;
 padding: 5px;
 color: #000;
}
#home p a:hover {
 background-color: rgba(255,255,255,.75);
 border-bottom: 0px dotted #000;
}
#home a.btn_wapper {
 margin-bottom: 150px;
}
#home a.btn {
 font: normal normal 300 18px/60px 'Fira Sans', sans-serif;
 margin-bottom: 30px;
 border-radius: 5px;
 background: #fff;
 height: 63px;
 color: #000;
 padding: 0;
}

/***** Features *****/
#features {
 background: #455a64 url(../images/pattern_bg.png) fixed;
 padding-bottom: 80px;
}
#features p {
 padding-bottom: 30px;
 text-align: center;
}
#features .feature-box {
 transition: all .5s;
 background: transparent;
 padding: 40px 0 40px 0;
 margin-bottom: 0px;
 margin-top: 0px;
}
#features .feature-box: {
 padding: 0;
 color: #fff;
}
#features .feature-box .feature-box-inner {
 transition: all .5s;
 background: #fff;
 padding: 20px;
 margin: 5px;
 border-radius: 10px;
}
#features .feature-box p {
 max-width: 258px;
 min-height: 380px;
 line-height: 34px;
 padding-top: 20px;
 font-size: 18px;
 margin: auto;
}
#features .feature-box .feature-box-icon {
 border-radius: 0px;
 text-align: center;
 padding-top: 25px;
 font-size: 62px;
 color:#233842;
}

/***** Prices *****/
#prices { 
 background: url(../images/pattern_bg.png) fixed;
}
#prices h2 {
 font: normal normal 100 100px/150px 'Fira Sans', sans-serif;
 text-align: center;
 color: #fff;
}
#prices p {
 text-align: center;
 color: #fff;
}
#prices a {
 margin: 50px auto 100px auto;
 display: block;
 width: 260px;
}
#prices .reviews_text_wapper {
 width: 100%;
 max-width: 550px;
 margin: auto;
}

/***** Course *****/
#course { 
 background: #6e4201 url(../images/pattern_cou.webp) fixed;
 color: #fff;
}
#course h2 {
 font: normal normal 100 100px/150px 'Fira Sans', sans-serif;
 text-align: center;
 color: #fff;
}
#course p {
 text-align: center;
 color: #fff;
}
#course a {
 margin: 50px auto 100px auto;
 display: block;
 width: 260px;
}
#course .download_text_wapper {
 width: 100%;
 max-width: auto;
 margin: auto;
}

/***** Reviews *****/
#reviews { 
 background: url(../images/pattern_rev.webp) fixed;
 color: #fff;
}
#reviews h2 {
 font: normal normal 100 100px/150px 'Fira Sans', sans-serif;
 text-align: center;
 color: #fff;
}
#reviews p {
 text-align: center;
 color: #fff;
}
#reviews a {
 margin: 50px auto 100px auto;
 display: block;
 width: 260px;
}
#reviews .reviews_text_wapper {
 width: 100%;
 max-width: 550px;
 margin: auto;
}

/***** Slider Reviews *****/
/* carousel */
#quote-carousel
{
 padding: 0 10px 30px 10px;
 margin-top: 30px 0px 0px;
}

/* Control buttons */
#quote-carousel .carousel-control
{
background: none;
font-size: 0em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#quote-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
}
/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}

/***** Elements *****/
#element {
 padding: 0px 0 100px 0;
 background-color: #fff;
 float:left;
}
#element header h1 { color: #000;}
#element #element-icon-wapper {
 overflow: hidden;
 border-radius: 5px;
}
#element #element-icon-wapper > div {
 background-color: rgba(0,0,0,.05);
 padding-bottom: 5px;
 padding-top: 5px;
 text-align: center;
 line-height: 40px;
 font-size: 25px;
}
#element #element-icon-wapper > div:hover {
 transition: .5s;
 background-color: rgba(0,0,0,.2);
}
#element #element-icon-wapper a { color: #000;}
#element #img-grid-wapper > div { padding: 5px;}

/***** Contact *****/
#contact {
 background: #455a64 url(../images/pattern_bg.png) fixed;
 color: #fff;
}
#contact header h1 { color: #fff;}
#contact p, # contact a {
 line-height: 2.5em;
 color: #fff;
}
#contact form .form-group { margin-top: 30px;}
#contact form input.form-control,
#contact form button.form-control,
#contact form textarea.form-control ,
#contact form select.form-control { border-bottom: 3px solid #fff;color: #fff;}
#contact form input.form-control:focus,
#contact form button.form-control:focus,
#contact form textarea.form-control:focus { border-bottom-color: #275267;}
#contact form textarea.form-control { min-height: 120px;}
#contact form .input-group-addon { border-bottom: 3px solid #fff;}
#contact form .input-group-addon i { color: #fff;}
#contact .social {
 margin: 0px auto 40px auto;
 text-align: center;
 max-width: 500px;
 width: 100%;
}
#contact .social li {
 margin-left: 0;
 width: 25%;
}
#contact .social a {
 margin: 50px auto 4px auto;
 background-color: #fff;
 border-radius: 50px;
 padding-top: 15px;
 font-size: 40px;
 line-height: 40px;
 transition: .5s;
 display: block;
 height: 70px;
 color: #fff;
 width: 70px;
}
#contact .social a:hover {
 transform: rotate(360deg);
 color: #223741;
}
#contact .social .social-facebook { background: #4a6fb5;}
#contact .social .social-twitter { background: #28a9e0;}
#contact .social .social-youtube { background: #f86d70;}
#contact .social .social-instagram { background: #cab9a9;}
#contact .social .social-vkontakte { background: #597DA3;}
#contact .social .social-odnoklassniki { background: #cf6700;}

/***** Footer *****/
footer {
 padding: 16px 0 16px 0;
 text-align: center;
 background: #fff;
}
.footer-copyright p {
 margin:20px auto 20px auto;
 text-align: center;
 line-height: 32px;
 color: #666;
}
.footer-copyright a { 
 border-bottom: 1px dotted #fff;
 color: #666;
}
.footer-copyright a:hover {
 color: #000;
 border: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
 .show-menu {right: 50px;}
 nav.main-menu {right: 50px;}
}
@media (max-width: 991px) {
 .show-menu {right: 30px;}
 nav.main-menu {right: 30px;}
}
@media (max-width: 767px) {
 #download h2 {font-size: 70px;}
 #home h2 {font-size: 26px;}
}
@media (max-width: 400px) {
 nav.main-menu {right: 10px;}
 .show-menu {right: 10px;}
 #contact .social a {
 padding: 18px;
 font-size: 25px;
 line-height: 20px;
 height: 60px;
 width: 60px;
 }
}