@font-face {
font-family: Montserrat;
src: url('../../fonts/Montserrat-Regular.ttf');
}
body {
font-family: 'Montserrat', sans-serif;
}
header {
background-color: #000140;
background-image: url('../../images/hd-bg-pattern.png');
height: auto;
}
.img-header {
width:330px;
vertical-align: bottom;
padding-top: 12px;
padding-bottom: 98px;
}
.navbar {
background: transparent;
-webkit-transition-duration: 0.3s; /* Safari */
transition-duration: 0.3s;
}
.navbar-default {
border: none;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
}
.navbar-brand {
padding: 5px 15px;
}
.display-please {
background: #3ECC33;
-webkit-transition-duration: 0.3s; /* Safari */
transition-duration: 0.3s;
}
.menu {
float: right;
}
.nav>li>a {
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
color: #dadada;
}
.navbar-default .navbar-nav>li>a:hover {
color: #000;
background: #fff;
}
.navbar-default .navbar-nav>li>a:focus {
color: #16A085;
}
.nav>li>a:focus, .nav>li>a:hover {
background-color: transparent;
color: #fff;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
}
.header-text {
color: #fff;
padding-top: 110px;
}
.header-buttons {
text-align: left;
padding-top: 55px;
}
.button-white {
background-color: #3ECC33;
padding: 8px 10px;
color: #fff;
font-size: 14px;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
}
.button-white:hover {
background-color: #000140;
text-decoration: none;
color: #1abc9c;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
}
.button-green {
background-color: #3ECC33;
padding: 15px 30px;
color: #fff;
font-size: 18px;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
border: none;
}
.button-green:hover {
background-color: #2C3E50;
text-decoration: none;
color: #fff;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
}
.section-three {
background-color: #2C3E50;
padding-bottom: 50px; 
}
.section-header {
padding-top: 60px;
}
.three-icon {
margin: 0 auto;
padding: 60px 0px 40px 0px;
}
.three-header {
font-size: 20px;
color: #f7ca99;
text-align: center;
}
.three-description {
font-size: 14px;
color: #fff;
text-align: center;
}
.section-why {
padding: 50px 0px 50px 0px;
background-color: #F4F5F9;
}
.section-why-2 {
padding: 50px 0px 0px 0px;
background-color: #fff;
}
.why-header {
font-size: 22px;
color: #000;
}
.why-description {
color: #7F7F80;
padding-top: 30px;
}
.why-content {
padding: 20px;
}
hr {
width: 50%;
height: 8px;
background-color:#3ECC33;
color:#FF0066;
border: 0 none;
margin: 5px auto;
float: left;
}
.section-button {
margin-top: 40px;
}
.why-text {
color: #7F7F80;
}
.top40 {
margin-top: 40px;
}
.top15 {
margin-top: 15px;
}
.section-comments {
background-color: #F4F5F9;
padding-bottom: 60px;
}
.text-comment {
color: #7F7F80;
font-size: 23px;
}
.box-comment-avatar {
background-color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 20px 20px 10px 20px;
}
.avatar {
max-width: 130px;
border-radius: 120px;
margin: 0 auto;
border: 0px solid #F4F5F9;
}
.avatar-name {
color: #fff;
margin-top: 30px;
text-align: center;
font-size: 15px;
}
.box-comment-description {
color: #fff;
background-color: #000140;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: 40px 20px 20px 20px;
margin-top: -25px;
}
.comments-header {
color: #3ECC33;
font-size: 36px;
text-align: center;
padding-top: 15px;
}
.comments-subheader {
color: #7F7F80;
font-size: 15px;
text-align: center;
padding-bottom: 40px;
}
.section-screens {
background-color: #fff;
padding-bottom: 40px;
}
.screen {
margin: 0 auto;
border: 1px solid #dadada;
max-width: 80%;
opacity: 6;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
margin-bottom: 10px;
}
.screen:hover {
opacity: 1;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
}
.screens-header {
color: #000033;
font-size: 33px;
text-align: center;
padding-top: 40px;
}
.screens-subheader {
color: #000;
font-size: 15px;
text-align: center;
margin-bottom: 30px;
}
.section-price {
padding: 60px 0px;
background-color: #F4F5F9;
}
.box-price {
margin: 20px 0px;
}
.box-price-name {
background-color: #fff;
padding: 20px 0px 10px 0px;
}
.price-name {
font-size: 22px;
text-align: center;
}
.box-price-value {
background-color: #000140;
padding: 30px 0px 10px 0px;
}
.price-value {
font-size: 22px;
color: #fff;
text-align: center;
}
.box-price-points {
background-color: #fff;
padding: 10px 0px 10px 0px;
}
.price-points {
font-size: 14px;
text-align: center;
line-height: 3;
}
.box-price-button {
background-color: #fff;
padding: 20px;
text-align: center;
}
.price-header {
color: #000140;
font-size: 32px;
text-align: center;
padding: 0px 0px 10px 0px;
}
.section-contact {
padding: 40px 0px;
}
.flat-control {
background: #F4F5F9;
border: none;
width: 90%;
padding: 10px;
margin-bottom: 6px;
color: #A9A9A9;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
}
.flat-control:focus {
background: #fbfbfd;
outline: none;
color: #000;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
}
textarea.flat-control {
height: 130px;
}
.contact-form {
text-align: center;
}
.btn-flat {
width: 90%;
padding: 20px;
background: #3ECC33;
color: #fff;
border: none;
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
}
.btn-flat:hover {
background: #10816B;
}
.contact-image {
max-width: 50px;
}
.contact-option {
font-size: 13px;
}
.contact-box {
margin-top: 0px;
margin-bottom: 10px;
}
.section-footer {
background: #2C3E50;
padding: 30px;
}
.copyright {
color: #fff;
margin-top: 10px;
}
.social {
max-width: 40px;
}
.shadow {
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
}
.shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
}
textarea {
resize:none;
}
.style-box-1 {
width:30px; 
height: 30px; 
background: #1ABC9C;
}
.style-box-2 {
width:30px; 
height: 30px; 
background: #FF931E;
}
.style-box-3 {
width:30px; 
height: 30px; 
background: #ADD79C;
}
.style-box-4 {
width:30px; 
height: 30px; 
background: #F1635A;
}
.style-box-5 {
width:30px; 
height: 30px; 
background: #FCB748;
}
.style-box-6{
width:30px; 
height: 30px; 
background: #60C2A5;
}
.switcher {
background: #2C3E50; 
position: fixed; 
top: 100px; 
padding: 15px; 
color: #fff;
}

@media screen and (max-width: 780px) {
.navbar-brand>img {
width: 90px;
padding-top: 12px;
}
}
@media screen and (max-width: 480px) {
.contact-option {
font-size: 14px;
}
.img-header {
padding-bottom: 0px;
}
.header-text {
padding-top: 20px;
}
.header-buttons {
padding-bottom: 55px;
}
.navbar-default .navbar-collapse {
width: 107%;
}
.navbar {
background: #2C3E50;
}
}
@media screen and (max-width: 240px) {
.contact-option {
font-size: 6px;
}
.contact-image {
max-width: 40px;
}
.price-value {
font-size: 22px;
color: #fff;
text-align: center;
}
}