/*
Custom CSS for...
'Modern Business' HTML Theme by Start Bootstrap
All Start Bootstrap themes are licensed under Apache 2.0.
For more info and more free Bootstrap 3 HTML themes, visit http://startbootstrap.com!
*/
/* Global Styles */
@import url(bootstrap.css);
@import url(bootstrap-theme.css);
@import url(fontawesome.css);
@import url(/js/pongstagr.am.css);
@import url(carousel.css);
@font-face {
font-family: 'Conv_Bitter-Regular';
src: url('/fonts/Bitter-Regular.eot');
src: local('☺'), url('/fonts/Bitter-Regular.woff') format('woff'), url('/fonts/Bitter-Regular.ttf') format('truetype'), url('/fonts/Bitter-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font-family: "HelveticaNeueBlackCondensed", "HelveticaNeue-Black-Condensed", "Helvetica Neue Black Condensed", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif;
font-weight:300;
font-stretch:condensed;
}
h1,h2,h3, .team_header, .navbar-nav>li>a{
font-family: "Conv_Bitter-Regular", sans-serif;
font-weight:300;
font-stretch:condensed;
}
.modal-body p{
margin-left:10px;
margin-right:10px;
}
.modal-body h1{
margin-left:10px;
}
.divider{
color:#000;
margin:20px;
overflow:hidden;
text-align: center;
line-height: 1.2em;
}
.divider:before, .divider:after {
content: "";
vertical-align: top;
display: inline-block;
width: 50%;
height: 0.65em;
border-bottom: 1px solid #333;
margin: 0 2% 0 -55%;
}
.divider:after{
margin:0 -55% 0 2%;
}
.madera-nav{
background:#395f94;
height: 120px;
}
.navbar-inverse{
border-color:#395f94;
}
footer .navbar-inverse{
border-color:#080808;
}
.navbar-brand img{
height:120px;
}
.navbar-brand{
padding:0px;
}
.center {
text-align: center;
}
.bgimage {
text-align:right;
color:white;
background-size:cover;
height: 100%;
background-position: center center;
}
ul[rn-carousel] {
width:400px;
height:200px;
margin: 0 auto;
}
.carousel5 li {
width:100%;
height:100%;
font-size:30px;
background-color: #ccc;
}
.carousel-demo {
margin-top:20px;
display:inline-block;
text-align: center;
}
.carousel-demo-fullscreen {
width:100%;
height:100%;
}
.carousel-demo-fullscreen ul[rn-carousel] {
width:100%;
height:100%;
}
input.tiny {
width:50px;
text-align:center;
}
.carousel-demo ul[rn-carousel-transition="hexagon"] {
margin-left:100px;
}
.custom-indicator span {
transition: all 0.3s ease-in;
}
.custom-indicator span.active {
color:yellow !important;
}
.webvids iframe, .webvids object, .webvids embed {
max-width: 100%;
}
.madera-btn {
background: #395f94;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.madera-btn-home {
background: rgba(0,0,0,0.7);
border-radius: 0px;
color: #ffffff;
font-size: 30px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.madera-btn:hover {
opacity:0.7;
text-decoration: none;
}
html, body {
height: 100%;
font-family: 'Conv_Economica-Regular-OTF';
}
body {
padding-top: 50px;
background:white;
font-size: 22px;
}
.item li{
list-style: none;
}
.modal-body p{
padding-left:10px;
}
.modal-body p:first-child{
padding-top:10px;
}
.maderaHeader{
font-size: 70px;
color:black;
text-align: center;
text-transform: uppercase;
}
.maderaStuff{
font-size: 20px;
color:black;
text-align: center;
}
.dropdown {
cursor:pointer;
}
.navbar-inverse .navbar-nav>li>a{
margin-top:75px;
border-right:1px solid white;
color:white;
}
.navbar-inverse .navbar-nav>li>a.last-link{
border-right:none;
}
.noin{
display: none!important;
}
.img-home-portfolio,
.img-customer,
.portfolio-item {
margin-bottom: 30px;
}
.tab-pane {
margin-top: 15px;
}
/* Page Sections */
.section,
.section-colored {
padding: 50px 0;
}
.section-colored {
background-color: #e1e1e1;
/* change this to change the background color of a colored section */
}
.sidebar {
margin-top: 40px;
}
.sidebar ul {
border-radius: 5px;
padding: 5px;
border: 1px solid #cccccc;
}
/* Half Page Height Carousel Customization */
/* Social Icons Styles */
.list-social-icons {
margin-bottom: 45px;
}
.tooltip-social a {
text-decoration: none;
color: inherit;
}
.facebook-link a:hover {
color: #3b5998;
}
.linkedin-link a:hover {
color: #007fb1;
}
.twitter-link a:hover {
color: #39a9e0;
}
.google-plus-link a:hover {
color: #d14836;
}
/* Service Page Styles */
.service-icon {
font-size: 50px;
}
/* 404 Page Styles */
.error-404 {
font-size: 8em;
}
/* Pricing Page Styles */
.price {
font-size: 4em;
}
.price-cents {
vertical-align: super;
font-size: 50%;
}
.price-month {
font-size: 35%;
font-style: italic;
}
/* Footer Styles */
footer {
}
footer .container{
text-align: center;
}
footer .container a{
text-decoration: none;
color:white;
}
footer .container i{
font-size: 30px;
margin-right: 10px;
margin-left: 10px;
padding-top:10px;
}
footer .navbar{
margin-bottom: 0px;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -50px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 50px;
}
.team_header{
position:absolute;
bottom:8%;
left:4%;
font-size:30px;
color:white;
background:rgba(0,0,0,0.7);
padding-left:10px;
padding-right:10px;
}
.media-comment{
display: none;
}
.modal-body > .close{
right:19%;
}
.thumbnail > a > img{
width:100%;
}
.img-home-portfolio:hover{
cursor:pointer;
box-shadow: 10px 10px 5px #888888;
}
.home-desktop .img-home-portfolio{
border:none;
}
.madera-M{
display:none;
}
.home-mobile{
display:none;
}
.container .insta_btn{
text-align: center;
}
.col-lg-6 .col-lg-3{
padding-left:1px;
padding-right:1px;
}
.home-desktop .col-lg-12 .col-lg-6{
padding-left:0px;
padding-right:0px;
}
.section{
padding:100px 0;
}
.carousel-inner{
height: auto;
}
.carousel-inner img.img-responsive{
margin:0 auto;
height: 100vh;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right{
font-size: 50px;
top:88%;
}
.navbar-nav>li>a{
padding-top:2px;
padding-bottom: 2px;
}.navbar-nav.navbar-right:last-child{
margin-right: 20px;
}
.section-home{
padding:70px 0px;
}
.modal-body img{
text-align: center;
margin:0 auto;
}
@media only screen and (min-device-width : 521px) and (max-device-width : 1025px) {
.navbar-inverse .navbar-nav>li>a {
margin-top: 45px;
border-right: 1px solid white;
color: white;
}
.navbar-brand img{
height:80px;
}
.madera-nav{
height: 80px;
}
.carousel-inner{
height: auto;
}
.home-mobile{
display: block;
}
.home-desktop{
display: none;
}
.navbar-inverse .navbar-nav>li>a{
font-size:12px;
padding-left:8px;
padding-right:8px;
}
.team_header{
font-size:22px;
left: 6%;
bottom:10%;
}
.img-home-portfolio{
border:none;
border-radius: 0px;
}
.madera-M{
display:block;
}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 520px) {
.navbar-nav.navbar-right:last-child{
margin-right:-15px;
}
.img-home-portfolio{
border:none;
border-radius: 0px;
}
.carousel-inner{
height: auto;
}
.section{
padding:50px 0px;
}
.team_header{
font-size: 16px;
bottom:16.5%;
left:8%;
border-radius: 0px;
}
.navbar-nav{
margin-top:0px;
}
.navbar-inverse .navbar-nav>li>a{
margin-top:0px;
background:rgba(0,0,0,0.9);
}
.navbar-brand img{
height:50px;
}
.madera-nav{
height: 50px;
}
.maderaStuff{
font-size:13px;
}
.madera-M{
display:block;
}
.home-mobile{
display:block;
}
.home-desktop{
display:none;
}
.col-xs-4,.col-xs-6{
padding-left:7px;
padding-right:7px;
}
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Responsive Styles */
@media (max-width: 767px) {
.carousel {
height: 70%;
/* increases the carousel height so it looks good on phones */
}
}