/* Global Rules Start */
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
body {font-family: 'Droid Sans', sans-serif}
/* Global Rules End */



/* Header Start */
.header {
    background: url('../images/header.jpg') no-repeat top center;
    min-height: 500px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    position: relative;
}
.header .overlay {
    background-color: rgba(124, 0, 225, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #FFF;
}
.header .overlay h1 {font-size: 60px; margin-top: 100px}
.header .overlay .plan {border: 4px solid #FFF; font-size: 24px; padding: 20px; margin-left: 1%; margin-right: 1%; width: 48%}
.header .overlay .order {border: 4px solid #FFF; font-size: 24px; padding: 20px; margin: 30px 1% 0}
@media (max-width: 420px){ /* Custom Media which doesn't exist in BOOTSTRAP */
    h1 {margin-top: 20px !important; font-size: 50px !important}
    .header .overlay .plan {float: none; margin: 0 auto 20px; font-size: 22px}
}
@media (max-width: 767px){
    h1 {margin-top: 40px !important}
    .header .overlay .plan {float: none; margin: 0 auto 20px; font-size: 22px}
}
/* Header End */



/* Features Start */
.features {padding: 30px 0}
.features .h1 {font-size: 50px; color: #555}
.features .feat {width: 33.3333%; color: #555; padding: 0 20px 0 0; margin-bottom: 30px}
.features .feat h2 {margin: 10px 0 8px}
.features .feat p {line-height: 1.6; margin: 0}
@media (max-width: 767px) {
    .features .feat {text-align: center; width: 100%}
}
@media (min-width: 768px) {
    .features .feat {width: 50%}
}
@media (min-width: 992px) {
    .features .feat {width: 33.3333%}
}
/* Features End */



/* About Us Start */
.about-us {background-color: #ECECEC; padding: 30px 0}
.about-us .h1 {font-size: 50px; color: #848484}
.about-us .responsive-paragraph {color: #848484}
/* About Us End */



/* Our Works Start */
@media (max-width: 767px) {
    .our-works .image {width: 100%}
}
@media (min-width: 768px) {
    .our-works .image {width: 50%}
}
@media (min-width: 992px) {
    .our-works .image {width: 33.3333%}
}
@media (min-width: 1200px) {
    .our-works .image {width: 25%}
}
/* Our Works End */



/* Pricing Table Start */
.pricing-table {background-color: #444; color: #FFF; padding: 50px 0}
.pricing-table .h1 {margin: 0 0 40px; font-size: 50px}
.pricing-table .pricing-plan {border: 3px solid #FFF; padding: 20px 0; position: relative}
.pricing-table .pricing-plan h3 {margin: 0 0 10px; font-size: 26px}
.pricing-table .pricing-plan .pricing {display: inline-block; margin: 0 0 10px; font-size: 22px; color: #BFBFBF}
.pricing-table .pricing-plan ul {line-height: 2; font-size: 18px}
@media (max-width: 767px) {
    .pricing-table .pricing-plan {width: 100%; margin-bottom: 20px}
}
@media (min-width: 768px) {
    .pricing-table .pricing-plan {width: 100%; margin-bottom: 20px}
}
@media (min-width: 992px) {
    .pricing-table .pricing-plan:not(.ultimate) {margin-right: 1%}
    .pricing-table .pricing-plan {width: 32.66666%; margin-bottom: 0}
    .pricing-table .pricing-plan.plus {left: 33.66666%}
    .pricing-table .pricing-plan.premium {right: 33.66666%}
}
/* Pricing Table End */



/* What They Say About Us Start */
.they-say {padding: 50px 0}
.they-say .h1 {font-size: 50px; margin: 0 0 30px; color: #555}
.they-say .person-say {background-color: #EEE; padding: 20px; margin: 0 0 20px; border: 1px solid #DDD; border-radius: 10px}
.they-say .person-say:first-of-type {width: 50%; margin-left: 25%}
.they-say .person-say:not(:first-of-type) {width: 50%}
@media (max-width: 767px) {
    .they-say .person-say .avatar {float: none; margin: auto}
    .they-say .person-say h3 {float: none; text-align: center}
    .they-say .person-say p {float: none; width: 100%}
}
@media (min-width: 768px) {
    .they-say .person-say:first-of-type {width: 100%}
    .they-say .person-say:not(:first-of-type) {width: 49%}
    .they-say .person-say:last-of-type {margin-left: 2%}
}
@media (min-width: 768px) and (max-width: 991px) {
    .they-say .person-say:not(:first-of-type) .avatar {float: none; margin: auto}
    .they-say .person-say:not(:first-of-type) h3 {float: none; text-align: center}
    .they-say .person-say:not(:first-of-type) p {float: none; width: 100%}
}
@media (min-width: 992px) {
    .they-say .person-say:first-of-type {width: 80%; margin-left: 10%}
    .they-say .person-say .avatar {width: 120px; margin-right: 20px}
    .they-say .person-say h3 {margin: 5px 0 10px}
    .they-say .person-say p {margin: 0; line-height: 1.7; width: calc(100% - 140px)}
}

/* What They Say About Us End */



/* Information Start */
.information {background-color: #ECECEC; padding: 30px 0; font-size: 18px}
.information .h1 {font-size: 50px; color: #848484}
.information .info-list li {display: inline-block; background-color: #DDD; padding: 15px; font-size: 22px; cursor: pointer}
.information .info-list li.selected {background-color: #FFF; color: #22a9bd}
.information .info-content {margin-bottom: 30px}
.information .info-content > div {padding: 20px; background-color: #FFF; line-height: 2}
.information .info-content > div:not(:first-of-type) {display: none}
@media (max-width: 767px) {
    .information .info-list li {display: block}
}
/* Information End */



/* Footer Start */
.footer {background-color: #333; color: #EEE}
.footer .copyright, .footer .design {padding: 20px; text-align: center}
@media (max-width: 767px) {
    .footer .copyright, .footer .design {width: 100%}
}
@media (min-width: 767px) {
    .footer .copyright, .footer .design {width: 50%}
}
/* Footer End */








/* Media and Responsive Design without frameworks Start */
@media (max-width: 767px)  { /* Mobiles and Tablets Rules */
    .visible-xs {display: block !important}
    .hidden-xs {display: none !Important}
    .responsive-paragraph {text-align: center; font-size: 20px !important}
}
@media (min-width: 768px) and (max-width: 991px)  { /* Small Screen Rules */
    .container {width: 750px}
    .visible-sm {display: block !important}
    .hidden-sm {display: none !Important}
}
@media (min-width: 992px) and (max-width: 1199px)  { /* Medium Screen Rules */
    .container {width: 970px}
    .visible-md {display: block !important}
    .hidden-md {display: none !Important}
}
@media (min-width: 1200px) { /* Large Screen Rules */
    .container {width: 1170px}
    .visible-lg {display: block !important}
    .hidden-lg {display: none !Important}
}
/* Media and Responsive Design without frameworks End */



/* My Framework Start */
.text-center {text-align: center}
.container {margin: auto; padding-left: 15px; padding-right: 15px}
.clearfix {clear: both}
.visible-xs, .visible-sm, .visible-md, .visible-lg {display: none}
.float-left {float: left}
.float-right {float: right}
.h1 {font-size: 2em}
.responsive-paragraph {line-height: 1.8; font-size: 22px}
.responsive-image {width: 100%}
.classic-list {list-style: none; margin: 0; padding: 0}
.img-circle {border-radius: 50%}
.img-thumbnail {padding: 3px; background-color: #FFF; border: 1px solid #CCC}
/* My Framework End */