/*
	Theme Name: Blue Union Invest
	Theme URI: https://www.blueunioninvest.com
	Description: Blue Union Invest Theme
	Version: 1
	Author: Azim Qadar
	Author URI: https://www.azim.design
	Tags: Blank, HTML5, CSS3
	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/*------------------------------------*\
    HTML
\*------------------------------------*/

:root{
--main: #00247D;
--main2: #FF004F;
--main3: #999999;
}

html{
background-color: #ffffff;
color: #000;
background-position: center center;
}

html,body{
width: 100%;
overflow-x: hidden;
font-size: 100%;
display: block;
min-height: 100vh;
margin: 0;
padding: 0;
line-height: 0;
border: 0;
outline: 0;
}

body{
font-family: 'Roboto', sans-serif; 
font-size: 14px;
font-weight: 400;
line-height: 2;
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-color: #fff;
}

p{
margin-bottom: 20px;
padding-top: 0;
padding-bottom: 0;
font-size: 100%;
}

/*------------------------------------*\
    CLEAR
\*------------------------------------*/

.clear:before,
.clear:after {
content:' ';
display:table;
}

.clear:after {
clear:both;
}
.clear {
*zoom:1;
}
img {
vertical-align:bottom;
line-height: 0;
padding: 0;
margin: 0;
margin-bottom: 0;
line-height: 0;
display: inline-block;
}

img.full{
width: 100%;
}

img.fixed{
position: fixed;
}

iframe{
margin:0;
padding: 0;
margin-bottom: 0;
line-height: 0;
}
a img{
padding: 0;
line-height: 0;
margin: 0;
}
a {
color: inherit;
text-decoration:none;
font-weight: inherit;
padding: 0;
margin: 0;
cursor: pointer;
}
a:focus {
outline:0;
}
a:hover,
a:active {
outline:0;
color: auto;
text-decoration: none;
}

input{
background:#fff;
outline:0;
border: 1px solid var(--main5);
color: #000;
padding: 14px;
}

form.search{
    display: none;
}

.contact-form{
    color: #000;
    text-align: center;
}

.contact-form input:focus, input:focus, .contact textarea:focus, textarea:focus{
outline:0;
}

.contact-form input, .contact-form textarea{
background:#fff;
padding: 18px;
display: inline-block;
margin-bottom: 20px;
outline:0;
color: #000;
width: 100%;
float: left;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border: none;
}

input.full, textarea.full{
   width: 100%; 
}

.contact-form .heading{
padding-bottom: 15px;
display: inline-block;
}

.contact-form select{
padding: 13px;
width: 100%;
display: inline-block;
border: none;
border-radius: 2px;
background: #fff;
}

div,a,img, a img, ul li a img, ul, li{
margin: 0;
padding: 0;
vertical-align: top;
margin-left: 0;
margin-bottom: 0;
}

ul, li{
list-style: none;
}

/*------------------------------------*\
    BUTTONS
\*------------------------------------*/

.button, .button-2, .button-white, .contact-form button{
padding: 16px 20px;
margin-top: 20px;
display: inline-block;
cursor: pointer;
color: var(--main);
font-family: 'Roboto', sans-serif;
line-height: 1.2;
transition: all 0.3s ease;
text-transform: capitalize;
border-radius: 3px; 
text-align: center;
border: none;
outline: none;
font-size: 125%;
}

.button-large{
padding: 12px 28px;
margin-top: 15px;
display: inline-block;
border: 5px solid var(--main);
cursor: pointer;
color: var(--main);
border-radius: 10px;
font-size: 80%;
transition: all 0.05s ease-out;
font-weight: 400;
line-height: 1.8;
   background: none;
}

.button{
    background: var(--main);
    color: #fff;
}

.button-2{
    background: var(--main2);
    color: #fff;
}


.button-2:hover{
    background: #fff;
    color: #000;
}


.button-white{
    background: #fff;
    color: var(--main);
}

.button:hover{
    background: #fff;
    color: var(--main);
}

.button-white:hover{
background: var(--main);
color: #fff;
}

.contact-form button{
   margin-top: 0 !important; 
   background: #000;
   color: #fff;
}

.contact-form button:hover{

}

input[type="search"]{
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid var(--main5);
color: #000;
border-radius: 3px;
line-height: 1;
}

.button-large{
    padding: 16px 30px;
    font-size: 150%;
}

.button-large:hover{
border: 5px solid var(--main2);
color: var(--main2);
}

.slab-button-light, .slab-button-dark{
    padding: 30px;
    width: 100%;
    transition: all 0.3s ease;
    cursor: pointer;
    color: #fff;
    font-family: 'Avenir', sans-serif;
letter-spacing: 2px;
line-height: 1;
}

.slab-button-light{
    background: rgba(238,166,97,0.9);
}

.slab-button-light:hover{
    background: rgba(238,166,97,1);
}

.slab-button-dark{
    background: rgba(0,36,125,0.9);
}

.slab-button-dark:hover{
    background: rgba(0,36,125,1);
}

.pill{
border-radius: 100px;
padding: 5px 10px;
background: #ccc;
margin-right: 5px;
margin-bottom: 5px;
color: #fff;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/


#loading {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    background-color: var(--main2);
}


.blackout{
Height: 100vh;
Width: 100%;
Display: none;
background-color: rgba(23,43,56,0.5);
z-index: 9999;
Position: fixed;
Top: 0;
Left: 0;
}

.ring1{
    background-image: url("icons/ring1.svg");
    background-size: cover;
    width: 80px;
    height: 80px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
        z-index: 101;
        display: inline-block;
            -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}

.ring2{
        background-image: url("https://www.rosews.co.uk/wp-content/themes/rosews/icons/rose-icon.svg");
        background-size: cover;
        width: 60px;
        height: 60px;
            top: 50%;
    left: 50%;
    margin-left: -30px;
    margin-top: -30px;
        z-index: 102;
            position: fixed;
                    display: inline-block;
                        -webkit-animation:spin2 3s linear infinite;
    -moz-animation:spin2 3s linear infinite;
    animation:spin2 3s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@-moz-keyframes spin2 { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin2 { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin2 { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

/* wrapper */
.wrapper {
width:100%;
min-height: 100vh;
position:relative;
Overflow: hidden;
text-align: center;
display: block;
background-image: none;
}

.rev_slider_wrapper{
    overflow: hidden !important;
}

.rev_slider{
min-height: auto;
max-height: 100vh !important;
height: 100vh !important;
}

.fullscreen{
height: 100vh;
min-height: 800px;
max-height: 1080px;
width: 100%;
display: inline-block;
background-size: cover;
background-position: center center;
vertical-align: middle;
position: relative;
}

.buildings{
    background-image: url(https://www.blueunioninvest.com/wp-content/uploads/2019/07/buildings.png); background-position: bottom center; background-repeat: no-repeat; background-size: contain;
}

.halfscreen{
min-height: 50vh;
width: 100%;
display: inline-block;
overflow: hidden;
}

.fixed{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: -1;
}

.blur{
-webkit-filter: blur(10px);
-moz-filter: blur(5px);
-o-filter: blur(10px);
-ms-filter: blur(5px);
}

.xxs{
font-size: 25%;
}

.xs{
font-size: 50%;
}

.small{
font-size: 75%;
}

.medium{
font-size: 135%;
}

.large{
font-size: 200%;
line-height: 1.2;
}

.xl{
font-size: 300%;
line-height: 1.2;

}

.xxl{
font-size: 400%;
line-height: 1.2;
}

.padding{
padding: 80px 60px !important;
display: inline-block;
}

.margin{
padding-left: 15px;
padding-right: 15px;
}

.line{
background: #fff;
height: 1px;
display: block;
margin: 50px 0px;
}

ul.bullet li{
list-style: circle;
margin-left: 15px;
margin-bottom: 10px;
}

.main{
background-color: var(--main);
color: #fff;
width: 100%;
height: 100%;
position: relative;
}

.main h1, .main h2, .main h3{
    color: #fff;
}

.main2{
background-color: var(--main2);
color: #fff;
width: 100%;
height: 100%;
position: relative;
}

.main2 h1, .main2 h2, .main2 h3{
color: #fff;
}

.main3{
background-color: var(--main3);
color: #ffffff;
width: 100%;
height: 100%;
position: relative;
}

.gradient{
background-image: url(img/gradient.jpg);
background-size: contain;
background-position: center center;
background-repeat: repeat-y;
color: #fff;
width: 100%;
height: 100%;
position: relative;
}

.gradient2{
background-image: url(img/gradient2.png);
background-size: contain;
background-position: center center;
background-repeat: repeat-y;
color: #fff;
display: inline-block;
width: 100%;
height: 100%;
position: relative;
}

.gradient2 h2{
color: #fff;
}

.white{
background-color: rgba(255,255,255,1);
color: #252525;
}

a.white:hover{
background-color: rgba(255,255,255,1);
}

.black{
background-color: #000;
color: #fff;
}

.black-solid{
background-color: rgba(0,0,0,1);
color: #fff;
}

a.black:hover{
background: rgba(0,0,0,1);
}

.red{
background: rgba(204, 36, 65, 0.8);
color: #fff;
}

.blue{
background-color: rgba(0,172,188,1);
color: #fff;
}

.dim{
background: rgba(0, 0, 0, 0.2);
color: #fff;
}

.orange{
background: #f7bb2e;
color: #fff;
}

.hero{
position: relative;
margin-top: 230px;
margin-bottom: 200px;
width: 100%;
color: #fff;
}

.hero-image{
position: absolute; width: 45%; max-width: 850px; right: 10%; top: 150px;
}

.hero .container{
text-align: left;
}

.hero h1{
    color: #fff;
}

.subhero{
letter-spacing: 2px;
position: absolute;
top: 50%;
height: 0;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed !important;
  top: 0 !important;
  width: 100%;
  z-index: 9999;
  background: var(--main2) !important;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 101px;
}

.home .sticky + .content {
  padding-top: 0px;
}

/* header */
.header {
width: 100%;
display: block;
color: #fff;
text-align: center;
padding: 20px 0px;
letter-spacing: 1px;
background: var(--main);
transition: all 0.5s ease;
}

.header-number{
margin-left: 20px; float: right; font-size: 200%;
}

.header-scroll{
box-shadow: 0 0 20px rgba(0,0,0,0.2);
background: var(--main) !important;
}

.header .container-wide{
    padding: 0 30px;
    max-width: 100%;
}

.header-top span{
    vertical-align: bottom;
}

.header-top{
    display: inline-block;
    width: 100%;
    background: var(--main2);
    color: #fff;
    font-size: 70%;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Avenir', sans-serif;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}

.header-top .container{
    padding: 10px 30px;
    text-align: left;
}

.home .header{
position: fixed;
left: 0;
top: 0;
z-index: 9999;
background: none;
}

.icon-small{
    height: 14px;
    vertical-align: middle;
}

.icon{
    height: 30px;
    line-height: 0;
    margin-right: 10px;
    vertical-align: middle;
}

.icon-medium{
    height: 40px;
    vertical-align: middle;
}

.icon-large{
    height: 60px;
    vertical-align: middle;
}

.icon-xl{
    height: 80px;
    vertical-align: middle;
}

.header-fix{
display: block;
height: 100px;
}

/* logo */
.logo {
width: 250px;
display: inline-block;
float: left;
}

.tagline{
text-align: center;
width: 50%;
float: right;
font-size: 30px;
margin-top: 50px;
}

.open{
display: none;
cursor: pointer;
Position: absolute;
Top: 45px;
Right: 30px;
Z-index: 11;
}

/*------------------------------------*\
    DESKTOP NAVIGATION
\*------------------------------------*/

.mobile{
display: none;
}

.mobile-tablet{
display: none;
}

.mobile-only{
display: none;
}

.mobilenav{
display: none !important;
}


.desktop{
display: block;
}

.desktop-tablet{
display: block;
}

.desktop-only{
display: block;
}

.nav {
text-align: left;
transition: all 0.5s ease-out;
text-transform: capitalize;
font-size: 16px;
display: inline-block;
z-index: 99999999;
font-family: 'Open Sans', sans-serif;
opacity: 1;
display: inline-block;
float: left;
margin-top: 5px;
}

.nav ul{
display: inline-block;
background: none;
float: right;
overflow: hidden;
margin: 0;
padding: 0;
vertical-align: top;
margin-left: 0;
margin-bottom: 0;
}
.nav ul li{
display: inline-block;
padding: 0;
float: left;
margin: 0px 5px;
}
.nav ul li a{
color: #fff !important;
display: block;
padding: 8px 12px;
width: 100%;
border-radius: 3px;
border: 1px solid rgba(255,255,255,0);
}

.nav ul li a:hover{
border: 1px solid rgba(255,255,255,1);
}

li.current-menu-item a {
border: 1px solid #fff !important;
}

/*------------------------------------*\
    MENU BUTTON
\*------------------------------------*/

#menu-toggle{
display: none;
padding: 5px 10px;
cursor: pointer;
Top: 16px;
Right: 30px;
Z-index: 11;
width: 50px;
height: 50px;
text-align: right;
position: absolute;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 2px;
}

#menu-toggle img{
transition: all 0.05s linear;
width: 100%;
}

#menu-toggle:hover > .nav{
display: inline-block;
}

#phone-mobile{
display: none;
padding: 5px;
text-align: center;
cursor: pointer;
Top: 16px;
Right: 100px;
Z-index: 11;
width: 50px;
height: 50px;
position: absolute;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 2px;
font-size: 20px;
}

.bar1, .bar2, .bar3 {
    height: 2px;
    background-color: #fff;
    margin: 8px 0;
    transition: 0.5s;
    width: 28px;
}

.change .bar1 {
        width: 23px;
        margin-left: 5px;
}

.change .bar2 {
        width: 18px;   
        margin-left: 10px;
}

.change .bar3 {
        width: 13px;
        margin-left: 15px;
}

/* sidebar */
.sidebar {

}
/* footer */

.back-to-top{
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 9999;
    cursor: pointer;
    background-color: rgba(0,0,0,0.8);
    border-radius: 2px;
    vertical-align: middle;
    line-height: 2.5;
}

.back-to-top:hover{
        background-color: rgba(0,0,0,1);
}

footer{
margin: 0;
padding: 0;
}

.footer {
padding-top: 30px;
padding-bottom: 40px;
width: 100%;
display: inline-block;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-family: 'Lato', sans-serif;
}

.footer a:hover{
    color: var(--main);
}

.leaf-container{
    margin-right: 15px;
    float: left;
}

.leaf{
    width: 40px;
}

.copyright{
display: inline-block;
float: left;
margin-top: 2px;
width: 50%;
text-align: left;
}

.social{
display: inline-block;
width: 100%;
}

.author{
display: inline-block;
width: 100px;
}

/*------------------------------------*\
    MODULES
\*------------------------------------*/

.features{
border-radius: 15px; box-shadow: 0 0 30px rgba(0,0,0,0.2); color: var(--main); padding: 50px 0;
width: 100%;
display: inline-block;
}

.property, .image-container, .image-overlay{
    width: 100%;
}

.property{
    border-radius: 15px;
    position: relative;
    transition: all 0.1s ease;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    background: #fff;
    overflow: hidden;
}

.image-container{
    background-size: cover;
    transition: all 1s ease;
    z-index: 0;
    background-position: center right;
    height: 250px;
}

.property:hover > .image-container{
    transform: scale(1.05);
}

.property:hover > .service-content{
    bottom: 0;
}

.property:hover > .image-overlay{
    background: rgba(23,43,56,0.5);
}

.image-overlay{
    display: inline-block;
    background: rgba(23,43,56,0.0);
    position: absolute;
    z-index: 0;
    transition: all 0.3s ease;
}

.property .content{
    padding: 30px;
}

.property .content h4{

}

.property .content .button{
    border: 1px solid var(--main);
    margin-top: 30px;
}


/*------------------------------------*\
    PARALLAX
\*------------------------------------*/


.parallax-container {
  position: relative;
  overflow: hidden;
}

.parallax-container .parallax {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.parallax-container .parallax img {
opacity: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}




/*------------------------------------*\
    HOME PAGE
\*------------------------------------*/

.down-arrow{
    border-radius: 100px;
    width: 50px;
    height: 50px;
    background-color: #000;
    margin: 0 auto;
    background-image: url(icons/down-arrow.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.1s ease-out;
}

.down-arrow:hover{
background-color: var(--main);
transform: scale(1.05);
}

.home-icons{
    border-top: 1px solid var(--main2);
    border-bottom: 1px solid var(--main2);
border-right: 1px solid var(--main2);
}

.home-icons:last-child{
border-right: 1px solid var(--main);
}

a.home-icons{
    display: inline-block;
    overflow: hidden;
    transition: transform .2s; /* Animation */
}

a.home-icons img{

    transition: transform .2s; /* Animation */
}

a.home-icons:hover{
background: var(--main2);    
}

a.home-icons:hover > img{
transform: scale(1.1); 
}

/*------------------------------------*\
    SERVICES PAGE
\*------------------------------------*/

.block{
    display: inline-block;
    overflow: hidden;
    width: 100%;
}

.grow{
    transition: all 0.2s ease;
    width: 100%;
}


.grow:hover{
    transform: scale(1.05); 
}

/*------------------------------------*\
    ANIMATED CONTENT
\*------------------------------------*/
 
.slide-in {
  transform: translateY(30px);
  animation: slide-in 0.8s ease forwards;
}

.already-visible {
  transform: translateY(0);
  transform: translateX(0);
  animation: none;
}

@keyframes slide-in {
  to { transform: translateY(0); opacity: 1;}
}


.right-in {
  transform: translateX(50px);
  animation: right-in 0.6s ease forwards;
}

@keyframes right-in {
  to { transform: translateX(0); opacity: 1;}
}


.left-in {
  transform: translateX(-50px);
  animation: right-in 0.6s ease forwards;
}

@keyframes left-in {
  to { transform: translateX(0); opacity: 1;}
}


.animate, .animate-right, .animate-left{
opacity: 0;
}

.space{
height: 80px;
width: 100%;
display: inline-block;
}

.space:after{
clear: both;
}

.space:before{
clear: both;
    
}

.break{
height: 40px;
width: 100%;
}

.container, .container-wide, .container-small{
    max-width: 90%;
    display: inline-block;
    margin: 0 auto;
    padding: 0;
}

.container{
width: 1400px;
}

.container-wide{
width: 100%; 
}

.container-small{
width: 720px;
}


.center{
text-align: center;
}

.left{
float: left;
}

.right{
float: right;
}

.left-align{
text-align: left;
}

.right-align{
text-align: right;
}

.row{
display: inline-block;
width: 100%;
height: 100%;
position: relative;
background-size: cover;
background-position: center center;
margin-left: 0;
margin-right: 0;
}

.section{
display: inline-block;
width: 100%;
height: 100%;
position: relative;
background-size: cover;
background-position: center center;
padding-top: 60px;
padding-bottom: 60px;
}

.map{
display: block;
width: 100%;
height: 400px;
position: relative;
background-size: cover;
background-position: center center;
}

.inline-block{
display: inline-block;
}

.none{
display: none;
}


.image-right{
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
background-size: cover;
background-position: center center;
transition: all 0.1s ease-in;
}

.image-left{
    height: 100%;
    width: 50%;
    position: absolute;
    left: 0;
    top: 0;
background-size: cover;
background-position: center center;
transition: all 0.1s ease-in;
}

.image-left:hover, .image-right:hover{
   background-size: 105%;
}

.col-1-s, .col-2-s, .col-fifth-s, .col-3-s, .col-4-s, .col-5-s, .col-6-s, .col-7-s, .col-8-s, .col-9-s, .col-10-s, .col-11-s, .col-1, .col-2, .col-fifth, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11{
float: left;
}

.col-1-right, .col-2-right, .col-fifth-right, .col-3-right, .col-4-right, .col-5-right, .col-6-right, .col-7-right, .col-8-right, .col-9-right, .col-10-right, .col-11-right{
float: right;
}

.col-1-s, .col-2-s, .col-fifth-s, .col-3-s, .col-4-s, .col-5-s, .col-6-s, .col-7-s, .col-8-s, .col-9-s, .col-10-s, .col-11-s, .col-1, .col-2, .col-fifth, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-1-right, .col-2-right, .col-fifth-right, .col-3-right, .col-4-right, .col-5-right, .col-6-right, .col-7-right, .col-8-right, .col-9-right, .col-10-right, .col-11-right{
display: inline-block;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-top: 15px;
height: 100%;
} 


.col-1-s, .col-1, .col-1-right{max-width:8.3333%;}

.col-2-s, .col-2, .col-2-right{max-width:16.6666%;}

.col-2:nth-child(6n+1){
	clear: left;
}

.col-fifth-s, .col-fifth, .col-fifth-right{max-width:20%;}

.col-3-s, .col-3, .col-3-right{max-width:25%;}

.col-3:nth-child(4n+1){
	clear: left;
}

.col-4-s, .col-4, .col-4-right{max-width:33.33%;}

.col-4:nth-child(3n+1){
	clear: left;
}

.col-5-s, .col-5, .col-5-right{max-width:41.6666%;}

.col-6-s, .col-6, .col-6-right{max-width:50%;}

.col-7-s, .col-7, .col-7-right{max-width:58.3333%;}

.col-8-s, .col-8, .col-8-right{max-width:66.66%;}

.col-9-s, .col-9, .col-9-right{max-width:75%;}

.col-10-s, .col-10, .col-10-right{max-width:83.3333%;}

.col-11-s, .col-11, .col-11-right{max-width:91.6666%;}
.right-padding{
padding-right: 10px;
}

.left-padding{
padding-left: 10px;
}

/*------------------------------------*\
    IMAGES
\*------------------------------------*/


.categories{
padding: 10px 15px;
border-radius: 5px;
display: inline-block;
margin: 0 auto;
margin-top: 10px;
}



/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

@font-face {
	font-family:'Font-Name';
	src:url('fonts/font-name.eot');
	src:url('fonts/font-name.eot?#iefix') format('embedded-opentype'),
		url('fonts/font-name.woff') format('woff'),
		url('fonts/font-name.ttf') format('truetype'),
		url('fonts/font-name.svg#font-name') format('svg');
    font-weight:normal;
    font-style:normal;
}


@font-face {
	font-family: 'Avenir';
	src:url('fonts/Avenir.otf');
}

@font-face {
	font-family: 'Avenir-Light';
	src:url('fonts/Avenir-Light.otf');
}

@font-face {
	font-family: 'Avenir-Medium';
	src:url('fonts/Avenir-Medium.otf');
}

@font-face {
	font-family: 'Avenir-Bold';
	src:url('fonts/Avenir-Bold.otf');
}

.montserrat{
    font-family: 'Montserrat', sans-serif;
}

.cinzel{
    font-family: 'Cinzel', sans-serif;
}

.roboto{
    font-family: 'Roboto', sans-serif;
}

sup{
    font-size: 50%;
}


.heading{
    text-align: left;
}

p, span{
    vertical-align: middle;
}


h1,h2,h3,h4,h5{
padding: 0;
color: inherit;
font-family: 'Roboto', sans-serif;
}

h1:after{
    content: ""; 
	display: block; 
	height: 3px; 
	background: var(--main);
	width: 100px;
	margin: 20px auto;
}
h1{
font-size: 45px;
font-weight: 300;
margin-top: 0;
margin-bottom: 35px;
line-height: 1.2;
}
h2{
font-size: 35px;
margin-top: 15px;
margin-bottom: 20px;
font-weight: 400;
line-height: 1.2;
}
h3{
font-size: 20px;
margin-top: 15px;
margin-bottom: 15px;
font-weight: 400;
line-height: 1.2;
}
h4{
font-size: 20px;
margin-top: 20px;
margin-bottom: 15px;
line-height: 1.2;
font-weight: 400;
padding-bottom: 20px;
border-bottom: 2px solid rgba(0,0,0,0.2);
}
h5{
font-size: 16px;
margin-top: 15px;
margin-bottom: 15px;
color: var(--main);
letter-spacing: 3px;
text-transform: uppercase;
}
h6{
font-size: 10px;
font-weight: 200;
}
.highlight{
    background: var(--main);
    color: #fff;
    padding: 20px;
    border-radius: 3px;
    display: inline-block;
    margin: 0 auto;
}

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/


/*------------------------------------*\
    MOBILE X-SMALL
\*------------------------------------*/

@media only screen and (max-width:320px) {


.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-6-s, .col-7, .col-8, .col-9, .col-10, .col-11, .col-1-right, .col-2-right, .col-3-right, .col-4-right, .col-5-right, .col-6-right, .col-7-right, .col-8-right, .col-9-right, .col-10-right, .col-11-right{
padding-left: 0px;
padding-right: 0px;
} 

.col-3{
max-width: 100%;
float: none;
}

.padding{
padding: 40px 30px !important;
}

.margin{
padding: 0;
}

}

/*------------------------------------*\
    MOBILE
\*------------------------------------*/

@media only screen and (max-width:480px) {
    
.heading{
    text-align: center;
}

.hero{
margin-top: 100px;
margin-bottom: 0;
}

.hero-image{
display: none;
}

.hero .container{
    text-align: center;
}

.wrapper{
padding-bottom: 0;
}

.button:before, .button-light:before{
    content: '';
 text-align: center;
}

.button, .button-2, .button-white, .contact-form button{
    font-size: 100%;
}

.margin{
padding: 0;
}

.right-padding{
padding-right: 0px;
}

.left-padding{
padding-left: 0px;
}

.padding{
padding: 40px 30px !important;
}

.space{
height: 45px;
}

.break{
height: 30px;
}

body{
font-size: 14px;
background-attachment: scroll;
background-size: contain;
background-position: top center;
}

.fullscreen{
display: inline-block;
width: 100%;
min-height: auto;
max-height: initial;
height: auto;
position: relative;
background-size: cover;
background-position: center center;
overflow: hidden;
}


/*------------------------------------*\
    TYPOGRAPHY
\*------------------------------------*/

h1{
font-size: 30px;
}

h2{
font-size: 25px;
margin-top: 15px;
margin-bottom: 25px;
}

h3{
font-size: 18px;
margin-bottom: 10px;
}

h4{
font-size: 16px;
}

h5{
font-size: 12px;
}

.medium{
font-size: 100%;
}

.large{
font-size: 160%;
}

.xl{
font-size: 180%;
}


/*------------------------------------*\
    MOBILE HEADER
\*------------------------------------*/

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 87px;
}

.header-fix{
height: 100px;
}

.header{
    position: relative;
 padding: 20px 0;
}

.header-number{
display: none;
}

.header .container-wide{
padding: 0 0px;
max-width: 90%;
}

.header-right{
display: none;
}

/*------------------------------------*\
    MOBILE LOGO
\*------------------------------------*/

.logo{
width: 200px;
margin: 0 auto;
}

#menu-toggle{
display: inline-block;
top: 17px;
right: 20px;
}

#phone-mobile{
display: inline-block;
top: 17px;
right: 80px;
}

.mobile{
display: block;
}

.mobilenav{
display: inline-block !important;
}

.mobile-only{
display: inline-block;
}

.mobile-tablet{
display: inline-block;
}

.desktop-tablet{
display: none !important;
}

.desktop{
display: none;
}

.desktop-only{
display: none !important;
}

.tablet{
display: none !important;
}

.buildings{
  background-image: none;
}

.rev_slider{
height: 100vh !important;
max-height: 100vh !important;
max-height: calc(var(--vh, 1vh) * 100) !important;
}

/*------------------------------------*\
    MOBILE NAVIGATION
\*------------------------------------*/

.nav{
top: 0;
left: -250px;
width: 250px;
position: fixed;
height: 100vh;
background: var(--main);
margin-top: 0px;
font-size: 16px;
padding: 20px;
padding-top: 100px;
z-index: 99999;
}

.nav ul{
width: 100%;
}

.nav ul li{
    float: right;
    width: 100%;
    margin: 0 0;
    margin-bottom: 20px;
}

.nav ul li a{
padding: 8px 30px;
border-left: 0;
color: #fff !important;
text-align: left;
margin: 0px;
text-align: center;
width: 100%;
}

/*------------------------------------*\
    MOBILE STRUCTURE
\*------------------------------------*/

.col-1-s, .col-2-s, .col-fifth-s, .col-3-s, .col-4-s, .col-5-s, .col-6-s, .col-7-s, .col-8-s, .col-9-s, .col-10-s, .col-11-s{
padding: 15px 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-6-s, .col-7, .col-8, .col-9, .col-10, .col-11, .col-1-right, .col-2-right, .col-3-right, .col-4-right, .col-5-right, .col-6-right, .col-7-right, .col-8-right, .col-9-right, .col-10-right, .col-11-right, .col-fifth{
padding-left: 0;
padding-right: 0;
padding-top: 15px;
padding-bottom: 15px;
} 


.section{
    padding-top: 30px;
    padding-bottom: 30px;
}

.col-fifth{
max-width: 100%;
float: none;
display: inline-block;
}

.col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-4-right, .col-5-right, .col-6-right, .col-7-right, .col-8-right, .col-9-right, .col-10-right,
 .col-11-right{
max-width:100%;
float: none;
}

.col-1{
max-width: 25%;
}

.col-2{
max-Width: 33.33%;
}

/*------------------------------------*\
    MOBILE FOOTER
\*------------------------------------*/

.social{
width: 100%;
text-align: center;
float: none;
}

.author{
text-align: center;
float: none;
}

.copyright{
width: 100%;
text-align: center;
margin-bottom: 20px;
}

.footer{
font-size: 80%;
}

.footer .left-align, .footer .right-align{
    text-align: center;
}

/*------------------------------------*\
    HOME PAGE
\*------------------------------------*/

.home-icons{
width: 50% !important;
float: left !important;
border-bottom: none;
}

.image-container, .image-overlay{
    height: 300px;
    width: 100%;
}

}

@media only screen and (min-width:481px) and (max-width:768px) {
    
body{
font-size: 14px;
}

.right-padding{
padding-right: 0;
}

.left-padding{
padding-left: 0px;
}

.space{
height: 45px;
}

.break{
height: 30px;
}

.hero{
margin-top: 120px;
margin-bottom: 0;
}

.tagline{
display: none;
}

.mobile{
display: inline-block;
}

.mobile-tablet{
display: inline-block;
}

.mobilenav{
display: inline-block !important;
}

.desktop-only{
display: none !important;
}

.desktop-tablet{
display: inline-block;
}

.desktop{
display: none;
}

.tablet{
    display: inline-block !important;
}

.rev_slider{
min-height: auto;
max-height: 650px !important;
height: 650px !important;
}

.hero-image{
display: none;
}

.buildings{
    background-image: none;
}

/*------------------------------------*\
    TYPOGRAPHY TABLET
\*------------------------------------*/

h1{
    font-size: 35px;
}

h2{
    font-size: 30px;
}

h3{
    font-size: 25px;
}


.large{
font-size: 180%;
}


.xl{
font-size: 250%;
}


/*------------------------------------*\
    TABLET HEADER
\*------------------------------------*/

#menu-toggle{
display: inline-block;
}

#phone-mobile{
display: inline-block;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 87px;
}

.header{
    font-size: 10px;
}

.header-number{
display: none;
}

.header-line{
  margin-top: 100px;
}

.header-right{
    margin-right: 80px;
    top: 20px;
}

.logo{
    width: 200px;
}

.open{
display: inline-block;
top: 20px;
}

.woocommerce .woocommerce-breadcrumb, .woocommerce-page .woocommerce-breadcrumb, .woocommerce-breadcrumb{
    margin: 20px 15px;
    text-align: left;
}

.fullscreen{
    max-height: initial;
    height: auto;
}

/*------------------------------------*\
    TABLET NAVIGATION
\*------------------------------------*/

.nav{
top: 0;
left: -250px;
width: 250px;
position: fixed;
height: 100vh;
background: var(--main);
margin-top: 0;
font-size: 12px;
text-align: right;
padding: 20px;
}

.nav ul{
width: 100%;
}

.nav ul li{
    float: right;
    width: 100%;
        margin: 0 0;
        margin-bottom: 20px;
}

.nav ul li a{
padding: 12px 30px;
border-left: 0;
text-align: left;
margin: 0px;
}

/*------------------------------------*\
    TABLET FOOTER
\*------------------------------------*/

.header-fix{
height: 100px;
}

.subhero{
font-size: 25px;
}

.image-right, .image-left{
position: relative;
height: 300px;
Width: 100%;
}

.col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-4-right, .col-5-right, .col-6-right, .col-7-right, .col-8-right, .col-9-right, .col-10-right, .col-11-right{
max-width: 100%;
float: none;
padding-top: 15px;
padding-bottom: 15px;
}

.col-3, .col-3-right{
max-width: 50%; 
}

.col-3:nth-child(2n+1){
	clear: left;
}

.col-1, .col-1-right{
max-width: 25%;
}


/*------------------------------------*\
    PAGES
\*------------------------------------*/

/*------------------------------------*\
    HOME PAGE
\*------------------------------------*/

}

@media only screen and (min-width:769px) and (max-width:1140px) {
    
/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

body{
font-size: 15px;    
}

.hero{
    margin-top: 120px;
    margin-bottom: 100px;
}

.col-3, .col-3-right{
max-width: 50%; 
}

.col-3:nth-child(2n+1){
	clear: left;
}

.fullscreen{
min-height: 700px;
max-height: 700px;
}

.hero-image{
    right: 5%;
}

/*------------------------------------*\
     NAVIGATION
\*------------------------------------*/

.nav {
font-size: 12px;
}

.nav ul li{
margin: 0 2px;
}

.nav ul li a{
padding: 6px 10px;
}

/*------------------------------------*\
    HEADER
\*------------------------------------*/

.header-number{
font-size: 130%;
margin-top: 5px;
margin-left: 5px;
}

.logo{
    width: 200px;
}

/*------------------------------------*\
    TYPOGRAPHY
\*------------------------------------*/

.medium{
    font-size: 125%;
}

.large{
    font-size: 180%;
}

.xl{
    font-size: 260%;
}

}
@media only screen and (min-width:1140px) and (max-width:1600px) {


.fullscreen{
min-height: 700px;
max-height: 800px;
}

.hero-image{
    right: 7.5%;
}

}

@media only screen and (-webkit-min-device-pixel-ratio:1.5),
	   only screen and (min-resolution:144dpi) {

}


/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.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%;
	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 .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}

.bypostauthor {

}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}