﻿
button:focus {
    outline: none;
}

.layout-mainwrapper { display:flex; flex-direction:column; height:100%; }

.layout-main-header { position:fixed; width:100%; z-index:5000;}
.layout-main-header-top { height:50px; background-color:#151C47; color:#ffffff; display:flex; flex-direction:row-reverse;  align-items:center; padding:0 15% 0 5px;}
.layout-main-header-bottom { height:100px; background-color:#ffffff; display:flex; flex-direction:row; padding:0 15%; }
.layout-main-header-bottom.scroll-adjusted { height:50px; }
.layout-main-header-bottom-menu { display:flex; flex-direction:column-reverse; margin-bottom:10px; }
.layout-main-body { flex-grow:1; margin-top:150px; background-image: url(/Images/img_construction2.jpg); background-attachment:fixed; background-repeat: no-repeat; background-size: cover; }

.layout-main-footer {  background-color: #151C47; color:#ffffff;}
.layout-main-footer-wrapper { display:flex; flex-direction:column; padding: 10px 15% 5px 15%; font-size:0.8rem;}
.layout-main-footer-r1 { display:flex; flex-direction:row; flex-grow:1; }
.layout-main-footer-r1>div { margin-right:50px; }
.layout-main-footer-r1-logo { height:150px; }
.layout-main-footer-r2 { margin-bottom:20px; }

.layout-contentwrapper-outerblock-style-1 { background-color:#ffffff; position:relative; }
.layout-contentwrapper-outerblock-style-2 { background-color:RGBA(255,255,255,0.7); color: #222222; font-weight:400; position:relative; }
.layout-contentwrapper-outerblock-overlay-style-1 { }

.layout-contentwrapper-innerblock-style-1 { padding: 50px 15%; font-size:1.2rem; text-align:justify; }
.layout-contentwrapper-innerblock-overlay-style-1 {  }

.layout-contentwrapper-content-style-1 { padding: 0; }
.layout-contentwrapper-content-style-2 { margin: -150px 10% -100px 10%; background-color: #ffffff;z-index: 2000; padding: 50px; border-radius: 100px;  }
.layout-contentwrapper-content-style-3 { margin: -150px 10% 0 10%; background:linear-gradient(180deg, rgba(255,255,255,0.1046393557422969) 0%, rgba(255,255,255,1) 11%); z-index: 2000; padding: 50px; }

.layout-quote { font-size:3rem; font-style:italic; color: #151C47; text-align:left !important; font-weight:bold; }

.layout-action-button { background-color: #151C47; color: #ffffff; padding:15px 25px; text-align:center; font-weight:bold; font-size: 1.2rem; cursor:pointer; opacity:1; 
                       transition: all 0.5s; border:0; text-decoration:none; }
.layout-action-button:hover { box-shadow: inset 20rem 0 0 0 #eeeeee; color: #000000; opacity:1;}

.layout-mobile-menu-icon { display:none; cursor:pointer; z-index:5001;}
.layout-mobile-menu-icon div { width:30px; height:3px; background:#ffffff; margin:5px; transition:all 0.3s ease; }
.layout-mobile-menu-icon-toggle .layout-mobile-menu-icon-l1 { transform: rotate(-45deg) translate(-5px,6px); }
.layout-mobile-menu-icon-toggle .layout-mobile-menu-icon-l2 { transition: all 0.7s ease; opacity: 0; }
.layout-mobile-menu-icon-toggle .layout-mobile-menu-icon-l3 { transform: rotate(45deg) translate(-5px,-6px); }

.layout-mobile-menu { display:flex; position:fixed; left:-100%; opacity:0; top:50px; height:calc(100vh - 50px); width:100%; overflow-y: auto; background-color: #151C47; color: #ffffff; 
                      flex-direction:column; transition: 0.3s all ease-in; z-index:5000;}
.layout-mobile-menu-active { left:0; transition: 0.3s all ease-in; opacity:1;}

.outerOverlay {
    top: 0px;
    left: 0px;
    width: 100%;
    position: absolute;
    background-color: black;
    z-index: 15000;
    opacity: 0.4;
}
        
.innerOverlay
{
    position:fixed; width:120px; height:120px; left:50%; top:50%;
    margin-left:-60px; margin-top:-60px; z-index:25000;
}
.innerOverlay>img { width:32px; height:32px; }

@media all and (max-width:1450px) {
    .layout-main-header-top { padding:0 5% 0 5px;}
    .layout-main-header-bottom { padding:0 5%; }
    .layout-contentwrapper-innerblock-style-1 { padding: 50px 5%; }
}

@media all and (max-width:1100px) {
    html { font-size:90%; }
    .layout-contentwrapper-content-style-2 { margin: -150px 7% -100px 7%; padding: 40px;  }
    .layout-contentwrapper-content-style-3 { margin: -150px 7% 0 7%; padding: 40px; }

    .layout-main-header-bottom-menu { display:none; }
    .layout-mobile-menu-icon { display:block; }
    .layout-mobile-menu { display:flex; }
}

@media all and (max-width:900px) {
    html { font-size:80%; }
    .layout-main-header-bottom { height:50px; }
    .layout-main-body { margin-top:50px; }
    .layout-quote { font-size: 2.4rem; }

    .layout-contentwrapper-innerblock-style-1 { padding: 50px 2%; }
    .layout-contentwrapper-content-style-2 { margin: -150px 4% -100px 4%; padding: 30px;  }
    .layout-contentwrapper-content-style-3 { margin: -150px 4% 0 4%; padding: 30px; }

    .layout-main-footer-wrapper { padding: 10px 5% 5px 5%; }
    .layout-main-footer-r1-logo { height:100px; }
    .layout-main-footer-r1 { flex-direction:column;  }
    .layout-main-footer-r1>div { margin-right:0; }

}