/* ==========================================================================
   Helper classes
   ========================================================================== */
.clearfix:before,
.clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

img { max-width: 100%; }
ul, li { list-style: none; padding: 0; margin: 0; }
p { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; margin: 0; line-height: 1em; padding: 0; }
a { text-decoration: none; color: #DC1928; }
input[type="text"], input[type="email"] {  border-radius:0; -webkit-appearance:none; -webkit-border-radius:0; }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit browsers */
	opacity:1;
    color: #babec5;
}
input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	opacity:1;
    color: #babec5;
}
input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
	opacity:1;
    color: #babec5;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
	opacity:1;
    color: #babec5;
}

/* ==========================================================================
   Responsive helpers
   ========================================================================== */

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.table{ display: table; width: 100%; height: 100%; }
.table-cell{ display: table-cell; vertical-align: middle; width: 100%; }

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* ==========================================================================
   General styles
   ========================================================================== */
/* html { } */
body { font-family: 'Magra', sans-serif; font-size: 14px; color: #000; }

/* ==========================================================================
   Header
   ========================================================================== */
header { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; padding-top: 45px; }
header .logo { float: left; }
header .logo img { float: left; margin-right: 10px; width: 54px; }
header .logo span { color: #fff; font-size: 38px; line-height: 52px; display: inline-block;}
header .head-right { float: right; margin-top: 15px; }
header .head-right a { margin-left: 40px; color: #fff; font-size: 16px; }
header .head-right a img { height: 14px; margin-right: 5px; }

/* ==========================================================================
   Section head
   ========================================================================== */
.section-head { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#163ba6+0,4587f7+100 */
background: #163ba6; /* Old browsers */
background: -moz-linear-gradient(left, #163ba6 0%, #4587f7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #163ba6 0%,#4587f7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #163ba6 0%,#4587f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#163ba6', endColorstr='#4587f7',GradientType=1 ); /* IE6-9 */ padding: 190px 0 280px; position: relative; }
.section-head h1 { color: #fff; font-size: 52px; line-height: 1.23; margin-bottom: 25px; margin-top: 35px; }
.section-head p { font-size: 22px; color: #fff; }

.form-wrapper { background: #fff; padding:45px 54px 30px; }
.form-wrapper h2 { color: #393a3d; font-size: 24px; font-weight: bold; margin-bottom: 35px; }
.form-wrapper input[type="text"], .form-wrapper input[type="tel"] , .form-wrapper input[type="email"]  { display: block; width: 100%; height: 40px; border: 0 none; border-radius: 0; font-size: 16px; color: #393a3d; border-bottom: 2px solid #e5e7ea; margin-bottom: 20px; outline: none; }
.form-wrapper textarea { display: block; resize: none; width: 100%; border-radius: 5px; padding: 10px; height: 80px; border: 1px solid #d8dbdf; margin-bottom: 30px; margin-top: 35px; font-size: 16px; color: #393a3d; outline: none; }
.form-wrapper input[type="submit"] { background: #4587f7; display: block; border-radius: 30px; display: block; width: 100%; height: 50px; border:0 none; font-size: 20px; font-weight: bold; font-family: 'Magra', sans-serif; color: #fff; cursor: pointer; }

.section-head:after {
 content: ""; position: absolute; width: 0;height: 0;border-style: solid;border-width: 0 0 300px 2560px; border-color: transparent transparent #fff transparent; bottom: 0; left: 50%; margin-left: -1280px;
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { overflow-x: hidden; position: relative; }
.section-text1 { background: #fff; padding: 0px 0 300px; position: relative; }
.section-text1 .section-big-img { padding-top: 70px; }
.section-big-img { max-width: 280px; }
.section-big-img img { display: block; width: 100%; margin-bottom: 40px; }
.section-text1 .text { padding-left: 100px; }
.section-text1:after {
 content: ""; position: absolute; width: 0;height: 0;border-style: solid;border-width: 300px 0 0 2560px; border-color: transparent transparent transparent #ebf9ff; bottom: 0; left: 50%; margin-left: -1280px;
}

/* .text { } */
.text h3 { font-size: 44px; margin-bottom: 25px; }
.text p { font-size: 20px; color: #8d9096; margin-bottom: 45px; }

.list-features { margin-bottom: 55px; }
.list-features li { display: block; margin-bottom: 38px; position: relative; padding-left: 77px; color: #8d9096; font-size: 18px; }
.list-features li span { display: block; font-size: 20px; color: #393a3d; }
.list-features li img { position: absolute; top: 3px; left: 0; width: 52px; }

.ctitle { color: #4587f7; font-size: 38px; line-height: 55px; vertical-align: middle; margin-bottom: 22px; }
.ctitle img { vertical-align: middle; float: left; margin-right: 10px; }

.button { line-height: 60px; background: #4587f7; max-width: 300px; width: 100%; display: inline-block; text-align: center; color: #fff; font-weight: bold; border-radius: 30px; font-size: 20px; transition: all 400ms ease; }
.button:hover { text-decoration: none; color: #fff; opacity: .7; }

.section-text2 { background: #ebf9ff; padding: 0px 0 300px; }
.section-text2 .text { padding-right: 100px; }
.section-text2 .section-big-img { padding-top: 55px; }
.section-text2:after {
 content: ""; position: absolute; width: 0;height: 0;border-style: solid;border-width: 0 0 300px 2560px; border-color: transparent transparent #fff transparent; bottom: 0; left: 50%; margin-left: -1280px;
}
.section-text3 { padding: 0px 0 220px; }
.section-text3 .section-big-img { padding-top:70px; }
.section-text3 .text { padding-left: 100px; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer { text-align: center; }
footer .logo { vertical-align: middle; display: inline-block; }
footer .logo img {  margin-right: 10px; vertical-align: middle; float: left; width: 54px; }
footer .logo span { color: #8d9096; font-size: 38px; display: inline-block; line-height: 50px;}
footer p { font-size: 18px; color: #8d9096; padding: 15px 0 35px; }

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (max-width: 1199.98px) {
    .section-head h1 { font-size: 46px; }
}

@media (max-width: 991.98px) {
    .section-head h1 { font-size: 40px; }

    .form-wrapper { padding-left: 30px; padding-right: 30px; }
    .form-wrapper h2 { font-size: 22px; }
    .section-text1 .text, .section-text3 .text { padding-left: 50px; }
    .section-text2 .text { padding-right: 50px; }
    .ctitle { font-size: 36px; }
    .text h3 { font-size: 36px; }
    .text p { font-size: 18px; }
}

@media (max-width: 767.98px) {
    header { text-align: center; padding-top: 30px; }
    header .logo { display: inline-block; float: none; }
    header .head-right { float: none; margin-top: 20px; }
    header .head-right a { margin: 0 10px; }

    .section-head { padding-top: 140px; text-align: center; padding-bottom:150px; }
    .section-head h1 { font-size: 30px; }
    .section-head p { font-size: 20px; margin-bottom: 40px; }
    .section-head:after { border-width: 0 0 150px 2560px; }

    .section-big-img { overflow: hidden; max-width: 100%; padding: 0; margin-bottom: 50px; }
    .section-big-img img { width: 50%; float: left; padding: 0 40px; margin-bottom: 0; }

    .section-text1 { padding-bottom: 150px; }
    .section-text1 .section-big-img, .section-text2 .section-big-img, .section-text3 .section-big-img { padding-top: 0; }

    .section-text1 .text, .section-text3 .text, .section-text2 .text { padding: 0; }

    .ctitle { font-size: 28px; line-height: 30px; }
    .ctitle img { width: 30px; }
    .text h3 { font-size: 34px; }

    .section-text1:after {border-width: 150px 0 0 2560px;}

    .section-text2 { padding-bottom: 150px; }
    .section-text2:after {border-width: 0 0 150px 2560px;}

    .section-text3 { padding-bottom: 130px; }
}

@media (max-width: 575.98px) {

    header .head-right a { margin: 0 5px; font-size: 14px; }
    header .logo span { font-size: 36px; }

    .section-head p { font-size: 16px; margin-bottom: 30px; }
    .form-wrapper { padding-left: 20px; padding-right: 20px; }

    .section-big-img img { padding: 0 20px; }

    footer .logo span { font-size: 36px; }

}