/*
Theme Name: Eduka
Theme URI: http://tanshcreative.com/eduka-lp-previw/index.html
Description: Eduka is a landing page designed and developed by Tansh.
Author: Tansh
*/

/* 
For easy CUSTOMIZATION AND UPDATION WHEN NEW VERSIONS ARE RELEASED - do not edit this file!

Instead, it is better practice to use the custom.css file to add your desired styles. 
Link 'custom.css' after style.css.
Copy a style from 'style.css' file, paste it in 'custom.css' and make changes there. 
This will override default styles specified in 'style.css' file. 
*/

/*============================================================*/
/*---------- Import Bootstrap override ----------*/
/*============================================================*/
@import url('bootstrap-override.css');
/*============================================================*/
/*---------- Searching for particular element? ----------*/
/*============================================================*/
/*
Here is CSS structure...

1. TEMPLATE SETUP
1.1 General styles
1.2 Typography 
1.3 Divider and spacers
1.4 List styles
1.5 Image styles
1.6 Button styles 


2. TEMPLATE STRUCTURE
2.1 Commons & Content section
2.2 Header
2.3 Slider
2.4 Pricing
2.5 Galley (screenshots)
2.6 Footer & copyright
2.7 Forms


3. Media queries
		Note - Media queries for slider, prettyPhoto are in their own stylesheets.

/*============================================================*/
/*---------- 1. TEMPLATE SETUP ----------*/
/*============================================================*/
/*----------------------------------------*/
/*----- 1.1 General styles -----*/
/*----------------------------------------*/
body {
	background: #fff;
	font-size: 16px;
	color: #747678;
	font-weight: normal;
	line-height: 1.6em;
}
img, embed, object, video {
	max-width: 100%;
	height: auto;
}
video {
	width: 100% !important;
	height: auto !important;
}
iframe {
	border: none !important;
}
/*----------------------------------------*/
/*----- 1.2 Typography -----*/
/*----------------------------------------*/
/*only font families are specified here - font sizes and weights are in respective section*/
body {
	font-family: Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', sans-serif;
}
/*Other typography*/
h1, h2, h3, h4, h5, h6 {
	color: #232528;
	font-weight: 700;
	line-height: 1.3em;
	margin-bottom: 15px;
}
h1 {
	font-size: 48px;
	margin-bottom: 5px;
	line-height: 1.1em;
}
h2 {
	font-size: 30px;
}
h3 {
	font-size: 26px;
}
h4 {
	font-size: 20px;
}
h5 {
	font-size: 18px;
}
h6 {
	font-size: 16px;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: #232528;
}
a:link {
	color: #4f82b6;
	text-decoration: none;
	cursor: pointer;
	font-style: normal;
	outline: none;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
a:visited {
	color: #747678;
}
a:hover {
	color: #747678;
	text-decoration: none;
}
.color {
	color: #4f82b6 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	font-weight: inherit !important;
	text-transform: inherit !important;
	display: inline !important;
}
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-small {
	font-size: 14px;
}
/*----------------------------------------*/
/*----- 1.3 Divider and Spacers -----*/
/*----------------------------------------*/
/*use suitable height spacer for vertical spacing*/
.spacer-10px, .spacer-20px, .spacer-30px, .spacer-70px {
	width: 100%;
	height: 10px;
	display: block;
	clear: both;
}
.spacer-20px {
	height: 20px !important;
}
.spacer-30px {
	height: 30px !important;
}
.spacer-70px {
	height: 70px !important;
}
.divider {
	width: 100%;
	margin: 30px auto;
	border-top: 1px solid #e5e6e7;
	display: inline-block;
	clear: both;
}
/*----------------------------------------*/
/*----- 1.4 List styles -----*/
/*----------------------------------------*/
.list-checkmark li, .list-unstyled li {
	background: none;
	display: block;
	overflow:hidden;
}
/*checkmark list*/
.list-checkmark li {
	background: url(../img/bullet-checkmark.png) no-repeat 0 7px;
	padding-left: 25px;
	margin-bottom: 10px;
}
/*unstyled list*/
.list-unstyled li {
	margin-bottom: 20px;
	float: none;
}
/*unordered list*/
.list-unordered {
	list-style-type: disc;
	list-style-position: inside;
}
.list-unordered li {
	margin-bottom: 5px;
}
.list-unordered li ul {
	list-style-type: circle;
	margin-left: 25px;
}
/*ordered list*/
.list-ordered {
	list-style-type: decimal;
	list-style-position: inside;
}
.list-ordered li {
	margin-bottom: 5px;
}
.list-ordered li ul {
	list-style-type: lower-roman;
	margin-left: 25px;
}
/*----- 2, 3 column list -----*/
.list-2col, .list-3col {
	margin-left: -1px;
}
.list-2col li, .list-3col li {
	width: 49.7%;
	margin-left:1px;
	margin-bottom: 1px;
	float: left;
}
.list-3col li {
	width: 33%;
}
/*----------------------------------------*/
/*----- 1.5 Image styles -----*/
/*----------------------------------------*/
.img-left {
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
}
.img-right {
	float: right;
	margin-left: 20px;
	margin-bottom: 10px;
}
/*----------------------------------------*/
/*----- 1.6 Button styles -----*/
/*----------------------------------------*/
.mybtn, .mybtn-green {
	background: #232528;
	width: auto;
	padding: 15px 30px;
	margin: 10px 0px;
	font-size: 16px;
	color: #fff !important;
	line-height: 16px;
	cursor: pointer;
	display: inline-block;
}
.mybtn-green {
	background: #59ba2e;
}
.mybtn-big-green, .mybtn-big-blue {
	background: #59ba2e;
	width: auto;
	padding: 20px 70px;
	margin: 10px 0px;
	font-size: 20px;
	color: #fff !important;
	line-height: 20px;
	cursor: pointer;
	display: inline-block;
	-moz-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
}
.mybtn-big-blue {
	background: #4f82b6;
}
.mybtn-green:hover, .mybtn-big-green:hover {
	background: #232528;
}
.mybtn:hover, .mybtn-big-blue:hover {
	background: #59ba2e;
}
/*============================================================*/
/*---------- 2. TEMPLATE STRUCTURE ----------*/
/*============================================================*/
/*----------------------------------------*/
/*----- 2.1 Commons / Content -----*/
/*----------------------------------------*/
#content {
	background: url(../img/content-top-grad.png) repeat-x top;
	padding: 60px 0px;
	border-top: 1px solid #fff;
}
.row-dark {
	background: #232528;
	padding: 30px 0px;
}
.row-dark h1, .row-dark h2, .row-dark h3, .row-dark h4, .row-dark h5, .row-dark h6 {
	color: #f6f7f8;
}
.boxed-features li, .social li, .submit {
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
/*----- boxed features -----*/
.boxed-features li {
	background: #f6f7f8;
}
.boxed-features li:hover {
	background-color: #a0a1a2;
}
.boxed-features .box {
	padding: 20px;
	color: #cecfd1;
}
.boxed-features p {
	float: right;
	margin-bottom: 0px;
}
/*----- review / testimonial -----*/
.review-img {
	position: relative;
	min-height: 240px;
}
.review-img img {
	position: absolute;
	top: -40px;
	left: 0px;
}
.review-slider span {
	margin-top: 20px;
	font-size: 14px;
	color: #4f82b6;
	display: block;
}
/*----- list for big icons with background -----*/
.icon-big {
	width: auto;
}
.icon-big li {
	background: #232528;
	margin-right: 1px;
	-webkit-border-radius: 140px;
	-moz-border-radius: 140px;
	border-radius: 140px;
	display: inline;
	float: left;
}
/*----------------------------------------*/
/*----- 2.2 Header  -----*/
/*----------------------------------------*/
#header {
	padding: 30px 0px;
}
.phone {
	background: url(../img/icons/icon-phone.png) no-repeat left;
	padding-left: 35px;
	font-size: 18px;
	color: #4f82b6;
	line-height: 1.6em;
	float: right;
}
/*----------------------------------------*/
/*----- 2.3 Slider  -----*/
/*----------------------------------------*/
#slider-wrapper {
	background: url(../img/preview/slider-bg-img.jpg) no-repeat center top;
	padding-top: 40px;
	color: #fff;
	text-align: center;
}
#slider-wrapper h1, #slider-wrapper h2, #slider-wrapper h3, #slider-wrapper h4, #slider-wrapper h5, #slider-wrapper h6 {
	color: #fff;
}
/*----------------------------------------*/
/*----- 2.4 Pricing -----*/
/*----------------------------------------*/
.pricing {
	position: relative;
	border: 1px solid #d1d3d4;
	margin-bottom: 20px !important;
}
.pricing table {
	background: #f8fbfd;
	width: 100%;
	text-align: center;
	border-collapse: separate;
}
.pricing table thead th {
	width: auto;
	background: #fff;
	padding: 20px;
	font-size: 18px;
	color: #4f82b6;
	font-weight: bold;
	border-bottom: 2px solid #d1d3d4;
}
.pricing table thead th p {
	font-size: 28px;
	color: #232528;
	margin-bottom: 5px;
}
.pricing table thead th p span {
	font-weight: 400;
}
.pricing table td {
	width: auto;
	padding: 5px;
}
.pricing table tbody tr td {
	border-top: 4px solid #dcdee0;
}
.pricing table ul li {
	margin-bottom: 10px;
	background: none;
	display: block;
}
.pricing table ul li:last-child {
	margin-bottom: 0px;
}
.ribbon {
	background: url(../img/ribbon.png) no-repeat;
	width: 38px;
	height: 122px;
	position: absolute;
	top: -15px;
	right: 15px;
}
/*----------------------------------------*/
/*----- 2.5 Gallery (Screenshots) -----*/
/*----------------------------------------*/
.folio-thumb {
	position: relative;
	overflow: visible;
	height: auto;
}
.folio-thumb .zoom {
	background: url(../img/zoom.png) 0 0 no-repeat transparent;
	width: 42px;
	height: 42px;
	position:absolute;
	z-index: 99;
	outline: none;
	display: none;
	opacity: 1;
	left: 50%;
	top: 50%;
	margin-left: -21px;
	margin-top: -21px;
}
.img-overlay {
	background-color: #4f82b6;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	display: none;
	opacity: 0.75;
	color: #fff;
	text-align: center;
}
/*----------------------------------------*/
/*----- 2.6 Footer  -----*/
/*----------------------------------------*/
/*----- footer -----*/
#footer {
	background:#191a1c;
	padding: 30px 0px;
	color: #747678;
}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
	color: #f6f7f8;
}
/*----- twitter -----*/
#twitter {
	margin-bottom: 20px;
}
.twitter-link {
	background: url(../img/icons/icon-twitter.png) no-repeat left 2px;
	padding-left: 25px;
	font-size: 12px;
}
.timestamp {
	font-size: 12px;
}
/*----- social -----*/
.social li {
	background: #232528;
	margin-right: 1px;
	-webkit-border-radius: 48px;
	-moz-border-radius: 48px;
	border-radius: 48px;
	cursor: pointer;
	float: left;
}
.social li:hover {
	background: #191a1c;
}
/*----- copyright -----*/
#copyright {
	background: #f6f7f8;
	padding: 20px 0px;
	font-size: 12px;
	color: #b9babc;
	text-align: center;
}
#copyright a {
	color: #b9babc;
}
#copyright a:hover {
	color: #747678;
}
#copyright ul li {
	margin: 0px 5px;
	display: inline;
	background: none;
}
/*----------------------------------------*/
/*----- 2.7 Forms -----*/
/*----------------------------------------*/
form {
	margin: 0;
	padding: 0;
	z-index: 0;
}
form p {
	margin-bottom: 1px;
	padding: 0;
}
/*errors*/
form label.error {
	color: #b94a48;
	font-size: 10px;
	margin-top: 3px;
}
form input.error, form textarea.error, form password.error {
	border-color: #b94a48 !important;
	box-shadow: none;
}
/*label and inputs*/
label {
	font-size: 12px;
	color: #303030;
	line-height: 1em;
}
input[type="text"], input[type="password"], select, textarea {
	background-color: #232528;
	width: 97%;
	height: 28px;
	padding: 5px;
	margin-bottom: 0px;
	font-size: 12px;
	color: #999;
	line-height: 2em;
	display: inline-block;
	border: 1px solid #232528;
	border-radius: 0px;
	box-shadow: none;
	-webkit-transition: border linear 0.2s;
	-moz-transition: border linear 0.2s;
	-ms-transition: border linear 0.2s;
	-o-transition: border linear 0.2s;
	transition: border linear 0.2s;
}
textarea {
	height: auto;
}
select {
	height: 35px;
	width: 99%;
}
textarea:focus, input[type="text"]:focus {
	box-shadow: none;
	border-color: rgba(82, 168, 236, 0.8) !important;
}
:-moz-placeholder {
font-size: 12px;
color: #999;
}
:-ms-input-placeholder {
font-size: 12px;
color: #999;
}
::-webkit-input-placeholder {
font-size: 12px;
color: #999;
}
/*results*/
#result, #subresult {
	width: 100%;
	display: block;
	color: #4f82b6;
	margin-top: 10px;
}
/*submit button*/
.submit {
	background: #59ba2e;
	width: 99.6% !important;
	height: 38px;
	font-size: 16px;
	color: #fff !important;
	line-height: 16px;
	font-weight: 400;
	cursor: pointer;
	border: 1px solid #59ba2e;
	margin-top: 1px;
	display: block;
	border-radius: 0px;
}
.antispam {
	display:none;
}
/*============================================================*/
/*---------- 3. Media queries ----------*/
/*============================================================*/
/*----------------------------------------*/
/*----- 3.1 Mobile (Portrait) / Design for a width of 320px -----*/
/*----------------------------------------*/

@media only screen and (max-width: 767px) {
body {
padding: 0;
}
.container {
margin-left: 20px;
margin-right: 20px;
}
#header {
text-align: center;
}
.logo {
text-align: center;
margin-bottom: 20px;
}
.phone {
 padding: 5px 35px 5px 35px;
 float: none;
}
.modal.fade.in {
 top: 15%;
}
.modal-body input {
z-index: 9999;
}
.submit {
width: 100% !important;
}
h1 {
font-size: 35px;
}
form {
margin-bottom: 20px;
}
.spacer-70px {
height: 20px !important;
}
}

/*----------------------------------------*/
/*----- 3.2 Mobile (Landscape) / Design for a width of 480px -----*/
/*----------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
/*All are same as Portrait*/
}

/*----------------------------------------*/
/*----- 3.3 Tablet-ipad (Portrait & Landscape) / Design for a width of 768px -----*/
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
body {
font-size: 15px;
}
.submit {
width: 100% !important;
}
h1 {
font-size: 40px;
}
.icon-big li {
 -webkit-border-radius: 115px;
 -moz-border-radius: 115px;
 border-radius: 115px;
}
.icon-big li img {
 width: 115px;
height: 115px;
}
.spacer-70px {
height: 0px !important;
}
.boxed-features p {
 margin-bottom: 10px;
}
}