/* gFonts - put local in later stage */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap');

*{
    font-family: 'Raleway', sans-serif;
}

body{
        display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main{
        flex: 1 0 auto;

}

/*.menu {
  display: flex;
  justify-content: center;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}*/

/* contact icons block */
div.contact-icons{
    margin-left:16px;
    position: absolute;
    right: 0;
    top: 42px;
}

div.contact-icons a{
    display: inline-block;
    padding: 0 4px
}

div.contact-icons>a>img{
    height:36px;
}
/* e/o contact icons block */

.menu li {
  position: relative;
  display:inline-block;
  float:none;
}

nav.menu{
    height:192px;
    line-height: 24px;
    background-color:transparent;
    box-shadow:none;
    text-align:center;
    margin:auto;
}

.menu ul{
    float:none!important;
}

.menu a {
  text-align: right;
  display: block;
  text-decoration: none;
  color: #333;
}

.menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
}

.menu .submenu li {
  width: 100%;
  line-height:18px;
}

#nav-mobile>li{
  padding-top:48px;
}

.menu .submenu a {
  display: block;
  text-decoration: none;
  color: #888;
  font-size:13px;
}

ol{
    list-style:disc;
}

.submenu li, .menu li{
    border-bottom:2px solid #fff;
}
nav ul a:hover{
    background: transparent;
}

.menu li:hover{
    background-color:transparent;
    border-bottom:2px solid #fd9c3c;
}

.menu li, .submenu li{
    transition:0.4s border ease;
}

.submenu li:hover{
    border-bottom:none;
    text-decoration: underline;
    text-decoration-color:#fd9c3c;
    text-decoration-thickness: 2px;
}

.menu li.subitems:hover{
    border-bottom:2px solid #fff;
}

.menu li:hover > .submenu {
  display: block;
}

/* sections */
div.section{
    margin-left: 48px;
    position: relative;
    display:inline-block;
    width: calc(100% - 48px);
}

/* client colors */
.wingyp-blue{
    color:#0f52b5;
}
.wingyp-blue-bg{
    background-color:#0f52b5;
}
.wingyp-orange{
    color:#fd9c3c;
}
.wingyp-orange-bg{
    background-color:#fd9c3c;
}
/* e/o client colors */

.auto-margin{
    margin:auto;
}

.subtitle{
    position: relative;
    display: inline-block;
}

.subtitle::before{
    content: "";
    width: 24px;
    position: absolute;
    height: 3px;
    /* background: limegreen; */
    left: 0;
    /* border-bottom: 3px solid orange; */
    border-right: 3px solid orange;
    height: 28px;
    border-top: 3px solid orange;
    bottom: 0;
}
h2{
    font-size: 1.64rem;
/*       font-style:italic;
       margin-left: 24px;
    border-bottom: 3px solid #fd9c3c;
    padding-left: 16px;
    padding-right: 36px;
    padding-bottom: 8px;
    margin-bottom: 0;*/
    /* font-style: italic; */
/*    color: #0f52b5;
    font-weight: 500;*/
}

.subtitle h2{
    font-size: 1.64rem;
    font-style:italic;
    margin-left: 24px;
    border-bottom: 3px solid #fd9c3c;
    padding-left: 16px;
    padding-right: 36px;
    padding-bottom: 8px;
    margin-bottom: 0;
    /* font-style: italic; */
    color: #0f52b5;
    font-weight: 500;
}

.subtitle h5{
       font-style:italic;
       margin-left: 24px;
    border-bottom: 3px solid #fd9c3c;
    padding-left: 16px;
    padding-right: 36px;
    padding-bottom: 8px;
    margin-bottom: 0;
    /* font-style: italic; */
    color: #0f52b5;
    font-weight: 500;
}

/* articles */
div.article-container{
    position: relative;
    height: auto;
    margin-left:48px;
    width: calc(100% - 48px);
    margin-top:64px;
    margin-bottom:48px;
}
div.contact-container{
    min-height: 40vh;
    position: relative;
    display:block;
    text-align:center;
}
div.contact-textblock{
    width:80%;
}
div.article-textblock{
    position: absolute;
    min-height: 100%;
    background-color: #fdfaf1;
    width: 70%;
    display: block;
/*    opacity: 0; */
    left: 0;
    top: -32px;
    top: 0;
    border-bottom: 2px solid #fd9c3c;
    /* color: red; */
    margin-top: -32px;
    padding: 16px;
    padding-left: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: calc(20% + 32px);
    /* article flexing */
    display: flex;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.article-container.left div.article-textblock{
    left: auto;
    right: 0;
    padding-right: 32px;

    padding-left: calc(20% + 32px);
}
.form-group.captcha-element{
    display:inline-block;
}

.article-container.special div.article-textblock{
    border-left: 2px solid #0f52b5;
    border-bottom: 2px solid #0f52b5;  
    background: none;
}

.article-textblock.centered{
   justify-content: center;
}

div.big-spacer{
    width: 100%;
    display: block;
    height: 64px;
}
div.article-photo{
   position: relative;
    display: inline-block;
    /* float: right; */
    width: 100%;
    z-index: 9;
}

div.article-textblock p{
    z-index: 10;
}

.menu a{
    float:right;
}

div.article-photo>img{
    width: 50%;
    float: right;
    box-shadow: 3px 3px 11px 1px #999;
}

.article-container.left div.article-photo>img{
    float: left;
}

.article-container.special div.article-photo>img{
    border-top: 2px solid #0f52b5;
    box-shadow:none;
}

.contact-btn{
    z-index:12;
}

/* e/o articles */

/* animations */
.contact-icons a img{
    opacity: 0;
}

.fixedHeader{
    top:0;
    position: fixed;
}




/* e/o animations */

/* push pinning */
/*
.pin-top {
  position: relative;
}

.pin-bottom {
  position: relative;
}

.pinned {
  position: fixed !important;
}

  html, body {
    height: 100%;
  }*/
/* E/O push pinning */

div.big-spacer{
    height:16px;
}

div.logo-row img.responsive-img{
        width: 100%;
}

div.logo-row div.col{
        margin: auto;
}

/* media queries */
@media only screen and (min-width: 993px){
    .container {
        width: 80%;
    }
}

@media only screen and (max-width: 992px){
    div.contact-icons{
        top:108px;  
    }
    a.sidenav-trigger{
        margin-top: 24px;
        margin-right: 0px;
    }
    .article-textblock{
        width: 100%;
        padding: 12px;
        display: inline-block;
        height: auto;
        position: relative;
    }
    div.article-photo>img{
        width:100%;
    }
    div.article-textblock{
        width:100%;
        position:relative;
        padding:12px;
    }
    div.article-container{
        margin-left: auto;
        width: 96%;
    }
    nav .brand-logo{
        left: 0;
    }
    .article-container.left div.article-textblock{
        padding:12px;
    }
    div.article-container{
        margin: auto;
        width: 96%;
        margin-top: 64px;
        margin-bottom: 48px;
    }
    div.section{
        margin-left: auto;
        width: 96%;
    }
    div.logo-row{
        display:block;
    }
}