/*
Theme Name: Reydeo
Theme URI: http://tanshcreative.com/reydeo-lp-previw/index.html
Description: Reydeo 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
2.2 Slider
2.3 Footer

3. Media queries

/*============================================================*/
/*---------- 1. TEMPLATE SETUP ----------*/
/*============================================================*/
/*----------------------------------------*/
/*----- 1.1 General styles -----*/
/*----------------------------------------*/
body {
	background: #fff;
	font-size: 14px;
	color: #71787c;
	font-weight: 300;
	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, .mybtn em, .features h2 span, input[type="text"], textarea {
	font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6, .mybtn, .submit {
	font-family: 'Montserrat', sans-serif;
}
/*Other typography*/
h1, h2, h3, h4, h5, h6 {
	color: #000;
	font-weight: 700;
	line-height: 1.3em;
	margin-bottom: 15px;
}
h1 {
	font-size: 26px;
	line-height: 1.1em;
}
h2 {
	font-size: 22px;
}
h3 {
	font-size: 20px;
}
h4 {
	font-size: 18px;
}
h5 {
	font-size: 16px;
}
h6 {
	font-size: 14px;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: #000;
}
a:link {
	color: #0086cf;
	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: #0086cf;
}
a:hover {
	color: #71787c;
	text-decoration: none;
}
.color {
	color: #0086cf !important;
	font-size: inherit !important;
	line-height: inherit !important;
	font-weight: inherit !important;
	text-transform: inherit !important;
	display: inline !important;
}
.text-big {
	font-size: 18px !important;
}
/*----------------------------------------*/
/*----- 1.3 Divider and Spacers -----*/
/*----------------------------------------*/
/*use suitable height spacer for vertical spacing*/
.spacer-10px, .spacer-20px, .spacer-30px {
	width: 100%;
	height: 10px;
	display: block;
	clear: both;
}
.spacer-20px {
	height: 20px !important;
}
.spacer-30px {
	height: 30px !important;
}
.divider {
	background: url(../img/divider.png) no-repeat center top;
	width: 940px;
	height: 8px;
	margin: 30px auto;
	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 0;
	padding-left: 30px;
	margin-bottom: 10px;
	font-size: 12px;
	color: #0086cf;
	font-weight: 600;
}
/*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;
}
/*----- 3, 4, column list -----*/
.list-3col, .list-4col {
	margin-left: -20px;
}
.list-3col li, .list-4col li {
	margin-left: 20px;
	list-style-type: none;
	float: left;
}
.list-3col li {
	width: 300px;
}
.list-4col li {
	width: 220px;
}
/*----------------------------------------*/
/*----- 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 {
	background: #1e1e1e; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e1e1e', endColorstr='#525252');
	background: -webkit-gradient(linear, left top, left bottom, from(#1e1e1e), to(#525252));
	background: -moz-linear-gradient(top, #1e1e1e, #525252);
	background:  -o-linear-gradient(top, #1e1e1e, #525252);
	background-image: linear-gradient(to top, #1e1e1e, #525252);
	padding: 12px 15px;
	margin: 10px 0;
	font-size: 19px;
	color: #fff !important;
	text-shadow: 0 1px 0 #000;
	line-height: 1em;
	font-weight: 700;
	border: 1px solid #272727;
	cursor: pointer;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 1) inset;
	-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 1) inset;
	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 1) inset;
	display: inline-block;
}
.mybtn:hover {
	background: #525252; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#525252', endColorstr='#1e1e1e');
	background: -webkit-gradient(linear, left top, left bottom, from(#525252), to(#1e1e1e));
	background: -moz-linear-gradient(top, #525252, #1e1e1e);
	background:  -o-linear-gradient(top, #525252, #1e1e1e);
	background-image: linear-gradient(to top, #525252, #1e1e1e);
}
.mybtn em {
	margin-bottom: 2px;
	font-size: 11px;
	font-style: normal;
	line-height: 1em;
	display: block;
}
.icon-app, .icon-android, .icon-gplay, .icon-bberry, .icon-windows {
	margin-right: 20px;
	float: left;
}
/*app button*/
.icon-app {
	background: url(../img/icons/btn-iPhone-img.png) no-repeat top left;
	width: 20px;
	height: 35px;
}
.mybtn-app {
	min-width: 135px;
}
/*android button*/
.icon-android {
	background: url(../img/icons/btn-android-img.png) no-repeat top left;
	width: 25px;
	height: 32px;
}
.mybtn-android {
	min-width: 135px;
}
/*googleplay button*/
.icon-gplay {
	background: url(../img/icons/btn-googleplay-img.png) no-repeat top left;
	width: 30px;
	height: 34px;
}
.mybtn-gplay {
	min-width: 165px;
}
/*blackberry button*/
.icon-bberry {
	background: url(../img/icons/btn-blackberry-img.png) no-repeat top left;
	width: 29px;
	height: 25px;
}
.mybtn-bberry {
	min-width: 155px;
}
/*windows button*/
.icon-windows {
	background: url(../img/icons/btn-windows-img.png) no-repeat top left;
	width: 29px;
	height: 28px;
}
.mybtn-windows {
	min-width: 145px;
}
/*============================================================*/
/*---------- 2. TEMPLATE STRUCTURE ----------*/
/*============================================================*/
/*----------------------------------------*/
/*----- 2.1 Commons / Content -----*/
/*----------------------------------------*/
/*----- header -----*/
#header {
	padding: 150px 0 20px 0;
}
/*----- header-btm -----*/
#header-btm {
	padding: 30px 0 30px 0;
}
/*----- content -----*/
#content {
	padding-top: 50px;
}
/*----- row-color -----*/
.row-color {
	background: #058ed8;
	padding: 60px 0;
	color: #fff;
	font-size: 18px;
	line-height: 1.5em;
	z-index: 9;
	position: relative;
}
.row-color h1, .row-color h2, .row-color h3, .row-color h4, .row-color h5, .row-color h6 {
	color: #fff;
}
/*----- features -----*/
.features img {
	margin-right: 15px;
	margin-bottom: 10px;
	float: left;
}
.features h2 {
	margin-bottom: 0;
}
.features h2 span {
	font-size: 18px;
	color: #0086cf;
	display: block;
	font-weight: 300;
	line-height: 1em;
	margin-bottom: 20px;
}
/*----- gallery and video on zoom -----*/
.zoom-wrapper {
	position: relative;
}
.icon-myplay, .icon-myzoom {
	background: url(../img/play.png) no-repeat;
	width: 58px;
	height: 58px;
	position: absolute;
	top: 50%;
	left: 27%;
	margin-top: -29px;
	margin-left: -29px;
	opacity: 1;
}
.icon-myzoom {
	background: url(../img/shots.png) no-repeat;
}
.icon-myplay:hover, .icon-myzoom:hover {
	opacity: .7;
}
/*----- social links -----*/
.social li {
	margin-right: 20px;
	float: left;
}
.social li img {
	margin-right: 5px;
}
.social li a {
	color: #71787c;
}
.social li a:hover {
	color: #0086cf;
}


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/*----------------------------------------*/
/*----- 2.2 Slider  -----*/
/*----------------------------------------*/
#slider-wrapper {
	position: relative;
}
#slider-bg.samsung_white{
	background: url(../img/samsung_white.png) no-repeat left top;
	width: 460px;
	height: 788px;
	position: absolute;
	top: -330px;
	left: 0;
}


#slider-bg.samsung{
	background: url(../img/samsung.png) no-repeat left top;
	width: 460px;
	height: 788px;
	position: absolute;
	top: -330px;
	left: 0;
}

#slider-bg.htc{
	background: url(../img/htc.png) no-repeat left top;
	width: 460px;
	height: 788px;
	position: absolute;
	top: -330px;
	left: 0;
}
#slider-bg.htc2{
	background: url(../img/htc_market.png) no-repeat left top;
	width: 292px;
	height: 500px;
	position: absolute;
	top: -330px;
	left: 0;
}

#slider-bg .image-slider {
	width: 332px;
	height: 589px;
	margin-top: 82px;
	margin-left: 62px;
	z-index: 9999;
}
/*----------------------------------------*/
/*----- 2.3 Footer  -----*/
/*----------------------------------------*/
#footer {
	padding: 20px 0;
	font-size: 12px;
	text-align: center;
}
#footer a {
	color: #71787c;
}
#footer a:hover {
	color: #0086cf;
}
/*footer logo*/
.footer-logo {
	position: relative;
	margin: 30px 0;
	border-top: 1px solid #e5e5e5;
}
.footer-logo img {
	background: #fff;
	position: absolute;
	top: -33px; /* ~ equal to 'height of your logo + 2px' */
	left: 50%;
	margin-left: -21px; /*half of the width of your logo*/
}
/*----------------------------------------*/
/*----- 2.7 Forms -----*/
/*----------------------------------------*/
form {
	margin: 0;
	padding: 0;
	z-index: 0;
}
form p {
	margin-bottom: 5px;
	padding: 0;
}
/*errors*/
form label.error {
	display: none !important;
}
form input.error, form textarea.error {
	border-color: #d50d0b !important;
	box-shadow: none;
}
/*label and inputs*/
label {
}
input[type="text"], textarea {
	background-color: #fff;
	width: 74%;
	height: 28px;
	padding: 5px 3%;
	margin-bottom: 0px;
	font-size: 12px;
	color: #71787c;
	line-height: 2em;
	display: inline-block;
	border: 1px solid #272727;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	box-shadow: none;
}
textarea {
	height: auto;
}
textarea:focus, input[type="text"]:focus {
	box-shadow: none;
	border-color: #fff !important;
}
:-moz-placeholder {
font-size: 12px;
color: #71787c;
}
:-ms-input-placeholder {
font-size: 12px;
color: #71787c;
}
::-webkit-input-placeholder {
font-size: 12px;
color: #71787c;
}
/*results*/
#subresult {
	width: 100%;
	display: block;
	margin-top: 10px;
	font-size: 14px;
}
/*submit button*/
.submit {
	background: #1e1e1e; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e1e1e', endColorstr='#525252');
	background: -webkit-gradient(linear, left top, left bottom, from(#1e1e1e), to(#525252));
	background: -moz-linear-gradient(top, #1e1e1e, #525252);
	background:  -o-linear-gradient(top, #1e1e1e, #525252);
	background-image: linear-gradient(to top, #1e1e1e, #525252);
	width: 80% !important;
	height: 40px;
	padding: 0;
	margin-bottom: 10px;
	font-size: 16px;
	color: #fff !important;
	text-shadow: 0 1px 0 #000;
	line-height: 1em;
	font-weight: 700;
	border: 1px solid #272727;
	cursor: pointer;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 1) inset;
	-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 1) inset;
	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 1) inset;
	display: block;
}
.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 {
 padding: 30px 0 30px 0;
}
#header-btm {
 padding: 15px 0 15px 0;
}
#content {
 padding-top: 15px;
}
.row-color {
 padding: 30px 0;
}
.list-3col, .list-4col {
margin-left: 0;
}
.list-3col li, .list-4col li {
width: 100%;
margin-left: 0px;
margin-bottom: 30px !important;
display: block;
}
/*slider*/

#slider-bg.samsung{
 background: none;
 width: 100%;
 height: 100%;
 position: relative;
 top: 0;
 left: 0;
}

#slider-bg.htc{
 background: none;
 width: 100%;
 height: 100%;
 position: relative;
 top: 0;
 left: 0;
}

#slider-bg.htc2{
 background: none;
 width: 100%;
 height: 100%;
 position: relative;
 top: 0;
 left: 0;
}

#slider-bg.samsung_white{
 background: none;
 width: 100%;
 height: 100%;
 position: relative;
 top: 0;
 left: 0;
}

#slider-bg .image-slider {
 background: none;
 width: 100%;
 height: 100%;
 position: relative;
 top: 0;
 left: 0;
}


#slider-bg .image-slider {
 width: 100%;
 height: auto;
 margin-top: 0px;
 margin-left: 0px;
 margin-bottom: 30px;
 z-index: 9999;
}
.divider {
background: none;
width: 100%;
margin: 10px auto;
}
}

/*----------------------------------------*/
/*----- 3.2 Mobile (Landscape) / Design for a width of 480px -----*/
/*----------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
#slider-bg.samsung{
 background: url(../img/samsung.png) no-repeat left top;
 width: 460px;
 height: 788px;
 position: relative;
 top: 0;
 left: 0;
}
#slider-bg.htc{
 background: url(../img/htc.png) no-repeat left top;
 width: 460px;
 height: 788px;
 position: relative;
 top: 0;
 left: 0;
}

#slider-bg.htc2{
 background: url(../img/htc_market.png) no-repeat left top;
 width: 292px;
 height: 500px;
 position: relative;
 top: 0;
 left: 0;
}

#slider-bg.samsung_white {
 background: url(../img/samsung_white.png) no-repeat left top;
 width: 460px;
 height: 788px;
 position: relative;
 top: 0;
 left: 0;
}


#slider-bg .image-slider {
 width: 320px;
 height: 480px;
 position: absolute;
 margin-top: 92px;
 margin-left: 67px;
 z-index: 9999;
}
/*Others 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) {
.list-3col, .list-4col {
 margin-left: 5%px;
}
.list-3col li, .list-4col li {
 margin-left: 5%;
 list-style-type: none;
 float: left;
}
.list-3col li {
 width: 28%;
}
.list-4col li {
 width: 20%;
}
.divider {
background: none;
width: 100%;
margin: 10px auto;
}
}