/*
Theme Name: Rockfolio Child
Template: rockfolio
Author: Child Theme Configurator
Version: 1.0.1449680839
Updated: 2015-12-09 18:07:19
*/

@charset "UTF-8";

@font-face {
    font-family: BrandonBold;
    src: url("fonts/Brandon_bld.otf") format("opentype");
}

@font-face {
    font-family: BrandonLight;
    src: url("fonts/Brandon_light.otf") format("opentype");
}

@font-face {
    font-family: BrandonMedium;
    src: url("fonts/Brandon_med.otf") format("opentype");
}

@font-face {
    font-family: BrandonRegularItalic;
    src: url("fonts/Brandon_reg_it.otf") format("opentype");
}

@font-face {
    font-family: BrandonThin;
    src: url("fonts/Brandon_thin.otf") format("opentype");
}

a {
	color:#85c8a6 !important;
}

p,
.brands p {
	font-family: BrandonLight;
	font-size:22px;
	line-height: 28px;
}

h1,
a {
	font-family: BrandonMedium !important;
}

h3,
.text {
	font-family: BrandonBold;
}

.oi_header_menu > li.current-menu-item > a,
a:hover {
color:#7FCAA6 !important;
}

.page_holder .this_page {
	padding-top:0 !important;
}

html {
	margin-top:0 !important;
}

body {
	padding:0 0 40px 0 !important;
	margin:40px;
	background-color:#85c8a6 !important;
}

/* FRONT TOP */
.front-top,
.oi_head_holder {
	background-color:#272425 !important;
	left:0 !important;
	right:0 !important;
	width:100%;
	position: relative !important;
}

.front-top {
	padding:0 1% 0 1%;
	margin-top:-1px;
}

.main-title {
	font-size:32px;
	color:#ffffff;
	padding:54px 0;
}


/* MAIN CONTENT */

.main-content,
.brands {
	background-color: #272425 !important;
	width:98%;
	margin:20px 1% 20px 1%;
}

.main-content p {
	text-align: center;
	max-width: 1150px;
	color:white;
	margin:0 auto;
	padding:52px 0;
}

/* BOXES */

.boxes {
	display:flex;
	flex-direction: row;
	max-width: 1312px;
	margin:0 auto;
	justify-content: center;	
	padding:0 50px 40px 50px;
}

.subpage-heading h1 {
	padding-bottom:0;
	margin-left:11px;
}

.box-border {
	border:10px solid white;
	width:13.5vw;
	height:13.5vw;	
	position: relative;
	text-align: center;	
	margin-right: 	40px;
}

.box-border:last-child {
	margin-right: 0;
}

.box-border img {
	position: relative;	
	z-index: 1000;
}

.box-border::before {
	content: "";
	position: absolute;
	height: calc(100% + 20px);
	width: 50%;
	background-color: #272425;
	top: -10px;
	left: 25%;

}

.box-border::after {
	content: "";
	position: absolute;
	height: 50%;
	width: calc(100% + 20px);
	background-color: #272425;
	top: 25%;
	left: -10px;
}

.equals,
.plus {
	position: absolute;	
	top:42%;
	right: -53px;
	color:white;
	font-size:80px;
	z-index: 1000;
}

.plus {
	font-size: 60px;
	right:-48px;
}

.text {
	height: 25%;
	margin:auto;
	position: absolute;
	top:-6px;
	left:0;
	bottom:0;
	right:0;
	color:white;
	z-index: 10000;
	font-size: 2rem;
	text-shadow: 0 0 5px rgba(39, 36, 37, 0.8);
}

.brands {
	padding:30px 0;

}

.brands-list {
	margin:0 auto;
	text-align: center;
}

.brands-list img {
	margin:17px;
}

.brands-list img:last-child {
	margin-right: 0;
}

.brands p {
	text-align: center;
	margin:0 auto;
	color:white;
}

/* NAVIGATION */

.oi_header_menu > li.current-menu-item > a,
.oi_header_menu li:hover a,
.oi_header_menu > li.current-menu-parent > a {
	background-color: transparent !important;
	color:white !important;
}

.oi_header_menu li a,
.oi_header_menu .sub-menu li:hover a,
.oi_xs_menu,
.text-green,
.sub-green-h {
	color:#7FCAA6 !important;
}


.oi_header_menu > .sub-menu li.current-menu-item > a,
.oi_header_menu .sub-menu li a {
	color:black !important;
}

.oi_head_holder img {padding-top: 18px;}


.sub-green-h {
	font-weight: 300;
	padding-top:40px;
	padding-bottom:40px;
	font-family: BrandonLight !important;
	font-size:40px;
	line-height: 34px;
}

.contact .container {
	max-width: 1150px;
}

#map {
	height: 300px !important;
	margin:50px !important;
}

.contact p {
	padding:0 !important;
	text-align: left;
	margin:10px;
}

.contact h2 {
	margin:10px;
}

.contact .mt-25 {
	margin-top:25px;
}

.rev_slider_wrapper {
	background-color: transparent !important;
}

.bottom-container {
	max-width: 1312px;
	margin: 0 auto;
}

.bottom-container p {
	padding:0 10px 50px 10px;
}

.page_holder {
	position:relative;
}

.lightbox-icon {
	width:8vw;
	height:40px;
	background:#85c8a6;
	position: absolute;
	bottom:54px;
	right:0;
}

.logo-right-side img {
	height:30px;
	margin:5px;
}

.slick-slider img{
	width:100%;
}

.contact-info {
	margin-top:40px;
}

.brands-list {
	margin-top:15px;
}

.brands-list img {
	max-height:30px;
}
/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

    /*==========  Non-Mobile First Method  ==========*/

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

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
		.boxes {
			flex-direction: column;

		}

		.box-border {
			margin:40px auto 0 auto;
			width:25vw;
			height:25vw;
		}

		.box-border:last-child {
			margin:40px auto 0 auto;
		}

		.equals,
		.plus {
			position: absolute;	
			top:108%;
			right: 40%;
			color:white;
			font-size:80px;
			z-index: 1000;
		}

		.plus {
			font-size: 60px;
			right: 40%;
		}
		
		.subpage-heading {
			text-align: center;
			margin:0 auto;
		}

		.flex-title {
			text-align: center;
			margin-bottom:40px;
		}
    }

	@media only screen and (min-width : 992px) { 

		.subpage-heading {
			display:flex;
			flex-direction: row;
			max-width: 1312px;
			margin:0 auto;
			justify-content: center;	
			padding:0 50px 40px 50px;
		}

		.t1, .t2, .t3, .t4 { 
			width: 13.5vw;
			margin-right:40px;
			border:10px solid transparent;
		}

		.boxes {
			padding-bottom:60px;
		}

	}


    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
		.visible-xs {
			margin:20px 0 !important;
		}
		
		.oi_v_menu {
			background-color: transparent !important;
			width: 100%;
		}

		.boxes {
			flex-direction: column;

		}

		.box-border {
			margin:0 auto 40px auto;
			width:40vw;
			height:40vw;
		}

		.box-border:last-child {
			margin:0 auto;
		}

		html body {
			background-color: #85c8a6 !important;
		}

		.contact p, 
		.contact h2 {
			text-align: center;
		}

		.oi_head_holder .row {
			margin:0;
		}

		.bottom-container p {
			padding-bottom:25px;
		}

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
		.box-border {
			width:50vw;
			height:50vw;
		}

		.box-border:last-child {
			margin:0 auto;
		}
    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
        .box-border:last-child {
			margin:0 auto;
		}
    }



	@media only screen and (min-width:992px) and (max-width : 1200px) {
	 	.text {
			font-size: 	1.5rem;
			top:-29px;
	 	}
	}


	@media (min-width: 1400px) {

		.container {
			max-width:1150px !important;
		}
	   
	}