/*
Theme Name: 360TypeR
Version: 1.2
Theme URI: http://optimized360.com
Author: Rodrigo Leon
Author URI: https://github.com/rodrigoleon
License: GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Description: 360TypeR is Business Review Central's core theme.
Tags: white, blue, light
Text Domain: typer
*/

/*
	To Do:
	Minify CSS, Uglify JS, Strengh Test, Cleanup.
*/

/*Adding Raleway 400 and 300*/
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300);

/*======== WP Core =========*/

.sticky{

}

.gallery-caption{

}

.bypostauthor{

}

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/*======== Overall Styles =========*/
body{
	background-color: #eee;
}

h1 {
	font-size: 30px;
}
h1, h2, h3{
	color: #2980b9;
	font-weight: normal;
}

/*======== NAV Styles =========*/

/*Global Nav Styles*/
.navbar-brand{
	color: white;
	font-weight: bold;
	font-family: arial;
	text-shadow:
		0px 0px 1px rgba(000, 000, 000, 0.8),
		0px 0px 2px rgba(000, 000, 000, 0.4),
		0px 0px 3px rgba(000, 000, 000, 0.4),
		0px 0px 4px rgba(000, 000, 000, 0.4),
		0px 0px 4px rgba(000, 000, 000, 0.4),
		0px 0px 4px rgba(000, 000, 000, 0.4);
}

.navbar{
	border: none;
}

.navbar-default .navbar-brand{
	color: white;
}

.navbar-brand:focus, .navbar-brand:hover{
	color: white;
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover{
	color: white;
}

.navbar svg.logo{
	width: 26px;
	height: 26px;
	margin: 10px 0 0 -12px;
	float: left;
}

/* Default Nav Styles */
nav.navbar.navbar-default{
	background: #2980b9;
	border-radius: 0;
	border: 0;
	margin: 0;
	box-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

.navbar-default .navbar-nav>li>a{
	color: white;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{
	color: white;
}

.navbar-default .nav>li:hover{
	background: #2475ab;
}

/* Home Nav Styles */
nav.navbar.navbar-home{
	background: transparent;
	position: absolute;
	right: 0;
	left: 0;
	box-shadow: none;
	font-family: 'Raleway', sans-serif;
	z-index: 99999;
}

.navbar-home .navbar-nav>li>a{
	color: white;
}

.navbar-home .nav>li>a:focus, .navbar-home .nav>li>a:hover{
	background: transparent;
	color: #eee;
}

/*======== Hero Styles =========*/

.hero{
	position: relative;
	margin-bottom: 40px;
	min-height: 420px;
}

.hero iframe{
	height: 420px;
}

.map{
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

/*======== Practice Summary/Aside/Sidebar Styles =========*/

.summary{
	-webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background: #fff;
    height: 100%;
    position: relative;
    text-decoration: none;
    vertical-align: top;
    margin: 5px -15px 20px -15px;
    padding: 15px;
}

.practicesummary h1{
	font-family: 'Raleway', sans-serif;
}

.practicefields h2{
	background: #fafafa;
	margin: -10px -15px 10px -15px;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.practiceinfo, .practicephotos, .practicevideo, .practicewebsite, .practicesocial{
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background: #fff;
    height: 100%;
    position: relative;
    text-decoration: none;
    vertical-align: top;
    padding: 10px 15px;
    margin: 20px -15px;
    overflow: hidden;
}

.practicephotos img{
	margin-bottom: 20px;
}

.practicesocial a{
	font-size: 30px;
	display: block;
	margin-left: 20px;
	height: 40px;
	width: 40px;
	float: left;
}

.practicevideo iframe{
	width: 115%;
	height: 240px;
    margin: -10px -15px -15px -15px;
}

.practicewebsite img{
    max-width: 120%;
    margin: -10px -15px -15px -15px;
}

/*======== Comments Styles =========*/

#comments .comment-list p{
	font-size: 16px;
	opacity: 0.8;
}

.commentlist-displayname{
	background: #fafafa;
	margin: -10px -15px 10px -15px;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    opacity: 0.8;
    font-size: 18px;
}

.comment-star{
	position: absolute;
    top: 0;
    right: 0;
    padding: 6px;
}

.comment-star img{
	height: 28px;
}

#comments .reply{
	background-color: #2980b9;
	border-radius: 999em;
	width: 56px;
	height: 56px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	line-height: 3;
	font-size: 14px;
	position: relative;
	cursor: pointer;
	display: inline-block;
    text-transform: uppercase;
    position: absolute;
    bottom: -12px;
    right: 10px;
}

a.comment-reply-link {
	position: absolute;
	left: 0;
	top: 50%;
	height: 100%;
	width: 100%;
	text-align: center;
	margin-top: -22px;
	color: #FFF;
}

a.comment-reply-link:hover {
	text-decoration: none;
}

.comment-date{
	opacity: 0.54;
	margin-bottom: 10px;
}

.comment-form-star{
	margin: 30px 0 30px 0;
}

#title{
	height: 80px;
	width: 100%;
	margin-bottom: 30px;
    border: 2px solid #ccc;
    padding: 15px;
    margin: 5px 0px;
    font-size: 20pt;
}

#comment{
	height: 120px;
	width: 100%;
	margin-bottom: 30px;
    border: 2px solid #ccc;
    padding: 25px;
    margin: 5px 0px;
    font-size: 20pt;
}

.comment-respond{
	margin-bottom: 60px;
}

.comments-area .comment{
	-webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background: #fff;
    height: 100%;
    position: relative;
    text-decoration: none;
    vertical-align: top;
    padding: 10px 15px;
    margin: 20px 0;
}

.submit {
  position: relative;
  vertical-align: top;
  width: 100%;
  padding: 18px;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #2980b9;
  border: 0;
  border-bottom: 2px solid #2475ab;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #2475ab;
  box-shadow: inset 0 -2px #2475ab;
  display: block;
  margin-bottom: 15px;
}

.submit:hover, .submit:focus, submit:visited {
	color: white;
	text-decoration: none;

}

.submit:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: white;
}

em.comment-awaiting-moderation {
    height: 30px;
    display: block;
    background: transparent;
}

.comment-pagination{
	display: block;
	width: 100%;
	text-align: center;
	font-size: 28px;
	padding: 20px 0;
}


/* == Stars == */

form .stars {
  background: url("inc/images/stars.svg") repeat-x 0 0;
  width: 150px;
}

form .stars input[type="radio"] {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
}
form .stars input[type="radio"].star-5:checked ~ span {
  width: 100%;
}
form .stars input[type="radio"].star-4:checked ~ span {
  width: 80%;
}
form .stars input[type="radio"].star-3:checked ~ span {
  width: 60%;
}
form .stars input[type="radio"].star-2:checked ~ span {
  width: 40%;
}
form .stars input[type="radio"].star-1:checked ~ span {
  width: 20%;
}
form .stars label {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0!important;
  padding: 0!important;
  text-indent: -999em;
  float: left;
  position: relative;
  z-index: 10;
  background: transparent!important;
  cursor: pointer;
}
form .stars label:hover ~ span {
  background-position: 0 -33px;
}
form .stars label.star-5:hover ~ span {
  width: 100% !important;
}
form .stars label.star-4:hover ~ span {
  width: 80% !important;
}
form .stars label.star-3:hover ~ span {
  width: 60% !important;
}
form .stars label.star-2:hover ~ span {
  width: 40% !important;
}
form .stars label.star-1:hover ~ span {
  width: 20% !important;
}
form .stars span {
  display: block;
  width: 0;
  position: relative;
  top: 0;
  left: 0;
  height: 30px;
  background: url("inc/images/stars.svg") repeat-x 0 -65px;
  -webkit-transition: -webkit-width 0.5s;
  -moz-transition: -moz-width 0.5s;
  -ms-transition: -ms-width 0.5s;
  -o-transition: -o-width 0.5s;
  transition: width 0.5s;
}

.comment-notes{
	display: none;
}

.comment-form-author{
	display: none;
}

.comment-form-email{
	display: none;
}

.summary img{
	max-height: 180px;
	max-width: 60%;
}

/*Comment Styling*/

.comment-form .comment-form-title, .comment-form .comment-form-comment, .comment-form label{
	display: block;
    width: 0;
    height: 0;
    margin: 0!important;
    padding: 0!important;
    text-indent: -999em;
    float: left;

}

.comment-list{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.vcard{
	display: none;
}

.commentmetadata{
	display: none;
}

#comments .reply{
	display: none;
}

.commentlist-displayname{
	font-size: 16px;
	font-weight: bold;
}

/*======== Mainsite Homepage Styles =========*/

.stage-wrap{
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	width: 100%;
}

.stage {
  background: #414141;
  overflow: hidden;
  height: 100%;
  width: 200%;
}

.stage.is-pushed .sectionone {
  opacity: 0.2;
  z-index: 1;
  -webkit-transform: scale3d(0.7, 0.7, 0.7);
  -moz-transform: scale3d(0.7, 0.7, 0.7);
  -ms-transform: scale3d(0.7, 0.7, 0.7);
  -o-transform: scale3d(0.7, 0.7, 0.7);
  transform: scale3d(0.7, 0.7, 0.7);
}

.stage.is-pushed .sectiontwo {
	margin-left: -50%;
	opacity: 1;
	display: block;
	z-index: 2;
	height: 100%;
}

.sectionone, .sectiontwo {
  background: #fff;
  display: block;
  height: 100%;
  width: 50%;
  float: left;
  position: relative;
}

.sectionone {
  -webkit-transition: all 0.85s ease;
  -moz-transition: all 0.85s ease;
  transition: all 0.85s ease;
  z-index: 2;
}

.sectiontwo {
  -webkit-transition: all 0.85s ease;
  -moz-transition: all 0.85s ease;
  transition: all 0.85s ease;
  overflow: hidden;
  z-index: 1;
  background: #262F36;
  color: white;
  height: 100px;
}

.jumbotron{
	padding-top: 120px;
	margin-bottom: 0;
    background: #663fb5 url("inc/images/mainpagehero.png") no-repeat center bottom;
    background-size: cover;
    border-radius: 0;
    min-height: 100vh;
    text-align: center;
    color: white;
    font-family: 'Raleway', sans-serif;
}

.jumbotron h1{
	font-family: 'Raleway', sans-serif;
	font-size: 40px;
}

.jumbotron h2{
	color: white;
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	font-size: 22px;
}

.btn-secondary-outline{
    background-color: transparent;
    border-color: #ccc;
    padding: 20px 80px;
    margin: 20px 0;
    border-radius: 50px;
    color: white;
    transition: all 0.2s ease-in-out;
    margin-bottom: 60px;
}

.btn-secondary-outline:hover{
	background-color: rgba(255,255,255,0.5);
    border-color: transparent;
    color: white;
}

.btn-close{
	position: absolute;
	top: 70px;
	right: 8%;
}

.btn-close .glyphicon-remove{
	font-size: 40px;
}

.sectiontwo .jumbotron{
	background: transparent;
}

/*===== Registration Form =====*/

.r360signup{
	width: 90%;
	height: 100%;
	margin: 0 auto;
	-webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background: #fff;
    height: 100%;
    position: relative;
    text-decoration: none;
    vertical-align: top;
    margin-top: 40px;
    padding: 40px;
    color: #262F36;
}

.r360signup .form-cover{
	display: none;
}

.stage.is-pushed .r360signup .form-cover{
	display: block;
}

.r360signup h2{
    color: #262F36;
    margin-bottom: 40px;
}

.page-id-7 .r360signup{
	margin: 100px auto;
}

.page-id-7 .r360signup .form-cover{
	display: block;
}

/*======== Footer Styles =========*/

footer{
	padding: 20px 0;
	background: #262F36;
	text-align: center;
	color: white;
}

footer a{
	color: white;
}

/*======== WP Sign Up =========*/

.widecolumn{
	width: 600px;
	margin: 0 auto;
	padding: 180px 0;
}

#setupform #signupblog, #setupform label.checkbox, #setupform input#signupuser, #setupform #privacy{
	display: none;
}

/*======== Logo SVG =========*/

svg.logo{
	width: 80px;
  height: 80px;
}

svg.logotype{
	height: 100%;
}

.summary img.svgstars {
    height: 20px;
}

/*======== Mobile Size =========*/

/*Hamburger Menu General*/
.navbar-default .navbar-toggle{
	border: none;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
	background: transparent;
}

.navbar-default .navbar-toggle .icon-bar{
	background: #fff;
}

/*Hamburger Menu Home*/
.navbar-header .navbar-toggle .icon-bar{
	background: #fff;
}

/*======== Media Queries =========*/

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

	.r360signup{
		width: 60%;
	}

	.jumbotron{
		padding-top: 14rem;
	}

	.jumbotron h1{
		font-size: 62px;
	}

	.jumbotron h2{
		font-size: 18px;
	}

	.map{
		display: block;
	}

	.mapoverlay {
    	background: transparent;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

	.jumbotron{
		padding-top: 20rem;
	}

	.btn-close .glyphicon-remove{
		font-size: 80px;
	}

	.sectiontwo .jumbotron{
		padding: 140px;
	}

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

	.jumbotron{
		padding-top: 24rem;
	}


}
