*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }


em {
    font-style: italic;
}

strong {
    font-weight: bold;
}

.epi {
    font-style: italic;
    margin-bottom:20px;
    line-height: 150%;
}

.clickable {
    user-select: none;
    cursor: pointer;
}

.clickable:active {
    transform: translateY(2px);
}

.vertical-center {
    position: absolute;
    display: inline-block;
    top:50%;
    transform: translateY(-50%);
}

.center {
    position: absolute;
    display: inline-block;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}


.menu {
    display: none;
    width:300px;
    height:100vh;
    position:fixed;
    left:100vw;
    top:0;
    background-color: rgba(41,26,67, 1);
    border-left: solid 1px #d0d0d0;
    box-shadow: 0px 0px 18px 9px rgba(100,100,100,0.75);
    padding-top:60px;
    padding-left:10px;
    padding-right:10px;
    transform: translateX(-200px);
    opacity: 0;
    color:white;
}

a.menu--item {
    font-family: Montserrat;
}

a.menu--item:link {
    display: blocK;
    padding:10px;
    margin-bottom:5px;
    cursor:pointer;
    font-size: 1.0rem;
    line-height: 1.5;
    text-decoration: none;
    color: white;
}

a.menu--item:visited {
    text-decoration: none;
    color: white;
}


.main--menu-button {
    display: inline-block;
    position: absolute;
    right:25px;
    top:25px;
    height:50px;
    width:50px;
    text-align: center;
    font-size:20px;
    z-index: 2000;
    color:white;
    cursor: pointer;
}

.mbutt {
    vertical-align: middle;
}


.social-container-normal {
    padding:40px;
}

.social-header {
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 0px;
    /* or 0% */
    
    letter-spacing: 0.01em;
    
    color: #FFFCFC;
    margin-bottom:20px;
}

.social-links {
    white-space: nowrap;
}

.social-item {
    display: inline-block;
    margin-right:30px;
}

.main-section {
    max-width:900px;
    margin:auto;
}

.main-section h1 {
    margin-top:250px;
    margin-bottom:50px;
}

.main-section p, .main-section li {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: 17px;
    line-height: 1.3;
    /* identical to box height, or 0% */
    color:black;
    margin-bottom:20px;
    text-align: justify;
}

.main-section ol {
    list-style-type: decimal;
    margin-left:20px;
}

.main-section ul {
    list-style-type: circle;
    margin-left:20px;
}


.section-header {
    font-family: Montserrat;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.5;
    /* identical to box height, or 0% */
    color:black;
    margin-bottom:20px;
    text-align: justify;
}

.main-section pre {
    font-family: Montserrat;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.5;
    /* identical to box height, or 0% */
    color:black;
    margin-bottom:20px;
    text-align: justify;
    overflow-x: auto;
}

.hero img {
    max-width: 100%;
}

.hero {
    margin-bottom:20px;
    text-align:center;
}

.main-section-text {
    background: #FFFBFB;
    padding:20px;
}

.link-container {

    margin-bottom:20px;
}

.icon-block {
    white-space: nowrap;
    margin-bottom:20px;
}

.icon-block-image {
    display: inline-block;
    width:60px;
    height:60px;
}

.icon-block-image img {
    display: inline-block;
    width:60px;
    height:60px;
    vertical-align: top;
}

.icon-block-text {
    display: inline-block;
    width:calc(100% - 60px);
    white-space: normal;
    vertical-align: top;
    padding-left:10px;
}


.link-info {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
}

.link-date {
    display: inline-block;
    color:grey;
    margin-right:10px;

}

.link-author {
    display: inline-block;
    color: #6b47b5;
}

.link-header {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
}

.link-header a:link, .link-header a:visited {
    color: black;
    text-decoration: none;
}

.link-header a:hover {
    color: black;
    text-decoration: underline;
}

.article-meta {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    /* identical to box height, or 0% */
    color:black;
    margin-bottom:20px;

    text-align: right;
}

.cat h2, h2 {
    font-family: Montserrat;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.5;
    margin-top:40px;
    margin-bottom:20px;
}

h3 {
    font-family: Montserrat;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.5;
    margin-top:40px;
    margin-bottom:20px;
}

.video-link-container img {
    max-width:100%;
    cursor: pointer;
}

.crumb-container {
    display: block;
    margin-top:10px;
    margin-bottom:20px;

    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
}

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

.crumb-step {
    display: inline-block;
    white-space: nowrap;
}

.crumb-empty {
    display: inline-block;
    color:gray;
}

/* blockquotes */

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}

blockquote:after {
    content: close-quote;
    color: #ccc;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}

blockquote p {
    display: inline;
}

/* dl dt */

dl {
    display: block;
    margin-top: 1em;
    margin-bottom: 0.1em;
    margin-left: 0;
    margin-right: 0;
    font-family: Montserrat;
}

dl dt {
    display: block;
    font-weight: bold;
    font-family: Montserrat;
}

/* table */
table {
    border-collapse: collapse;
    border-spacing: 0;
    font-family: Montserrat;
    font-size: 14px;
    width: 100%;
}

tr:nth-child(even){
    background-color: #f2f2f2;
}

td, th {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    font-weight: bold;
    font-size: 16px;
}

/* table custom */

.tg {
	border-collapse: collapse;
	border-spacing: 0;
}

.tg td {
	border-color: black;
	border-style: solid;
	border-width:1px;
	font-family: Montserrat;
	font-size: 14px;
	overflow: hidden;
	padding: 10px 5px;
	word-break:normal;
}

.tg th {
	border-color: black;
	border-style: solid;
	border-width: 1px;
	font-family: Montserrat;
	font-size: 14px;
	font-weight: normal;
	overflow: hidden;
	padding: 10px 5px;
	word-break:normal;
}

/* table color */

.tg .tg-head {
	border-color: inherit;
	text-align: center;
	vertical-align: top
}

.tg .tg-intelect {
	background-color:#96fffb;
	border-color:inherit;
	text-align:left;
	vertical-align:top
}

.tg .tg-instinct {
	background-color:#9aff99;
	border-color:inherit;
	text-align:left;
	vertical-align:top
}

.tg .tg-emoc {
	background-color:#ffccc9;
	border-color:inherit;
	text-align:left;
	vertical-align:top
}

.tg .tg-dvigatel {
	background-color:#ffffc7;
	border-color:inherit;
	text-align:left;
	vertical-align:top
}

.tg .tg-sexual {
	background-color:#fd6864;
	border-color:inherit;
	text-align:left;
	vertical-align:top
}

.tg .tg-hyperemoc {
	background-color:#ff5f5b;
	border-color:inherit;
	text-align:left;
	vertical-align:middle
}

.tg .tg-hyperintel {
	background-color:#9698ed;
	border-color:inherit;
	text-align:left;
	vertical-align:middle
}

.tg .tg-hemoc {
	background-color:#ff5f5b;
	border-color:inherit;
	text-align:left;
	vertical-align:top
}

.tg .tg-hintel {
	background-color:#9698ed;
	border-color:inherit;
	text-align:left;
	vertical-align:top
}

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

    .top-picture {
        display: inline-block;
        position: absolute;
        width:100vw;
        height:150vw;
        left:0px;
        top:0px;

        background-image: url("https://4way.info/assets/images/fon-v.jpg");
        background-color: #291A43;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 10;
    }

    .main-section {
        z-index: 20;
    }

    .main-section h1 {
        font-family: Playfair Display;
        font-style: normal;
        font-weight: bold;
        font-size: 30px;
        line-height: 1.5;
        /* or 140% */
        
        
        color: #FBFAF8;
        background-color: rgba(41,26,67, 0.5);
        padding:20px;

    }

    .main-container {
        display: block;
        position: relative;
        background-color: #291A43;

        min-height:100vh;

        overflow-y: auto;

        background-image: url("https://4way.info/assets/images/fon-v.jpg");
        background-color: #291A43;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;        
    }

    .main-container2 {
        display: block;
        position: relative;
        background-image: none;
        background-color: #291A43;

        min-height:100vh;

        overflow-y: auto;

        background-image: url("https://4way.info/assets/images/fon-v.jpg");
        background-color: #291A43;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100vw;          
    }

    .logo {
        display: inline-block;
        position: absolute;
        left:25px;
        top:25px;
        width:61px;
        height:61px;
        vertical-align: middle;
    }

    .logo img{
        display: inline-block;
        width:61px;
        height:61px;
        vertical-align: middle;
    }


    .top-menu {
        display: none;
    }

    .left-menu {
        display:block;
        position: relative;
        text-align: left;
        padding-top: 25px;
        padding-left:40px;
        padding-right:40px;
        padding-bottom:40px;
        word-wrap: default;  
        background-color: rgba(41,26,67, 0.5);
    }

    .left-menu-top {
        height:350px;
    }


    .left-menu-header {
        font-family: Playfair Display;
        font-style: normal;
        font-weight: bold;
        font-size: 30px;
        line-height: 35px;
        /* or 140% */
        
        margin-bottom:40px;
        
        color: #FBFAF8;
    }

    .left-menu-item {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 20px;
        /* identical to box height, or 0% */
        
        display: block;
        text-align: left;    
        color: #FFFBFB;
        margin-bottom:15px;
    }

    .top-menu-item a:link, .top-menu-item a:visited, .left-menu-item a:link, .left-menu-item a:visited {
        text-decoration: none;
        color: #FFFBFB;
    }

    .social-container {
        display: block;
        margin-top:30px;
        padding:20px;

    }    

    .social-container-normal {
        background-image: url("https://4way.info/assets/images/fon-v.jpg");
        background-color: #291A43;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100vw;  
    }

    .main-section-text {
        min-height:50vh;
    }

    .video-link-container {
        margin-top:30px;
        display: block;
    }    


}


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

    .left-menu-top {
        display: none;
    }
    

    .main-container {
        position: relative;
        background-image: url("https://4way.info/assets/images/fon-s.jpg");
        background-color: #291A43;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        overflow-y: auto;
        overflow-x: hidden;
        min-height:100vh;
    }

    .main-container2 {
        position: relative;
        background-image: url("https://4way.info/assets/images/fon-s.jpg");
        background-color: #291A43;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        overflow-y: auto;
        overflow-x: hidden;
        min-height:100vh;
    }    

    .logo {
        display: inline-block;
        position: absolute;
        left:120px;
        top:25px;
        width:123px;
        height:123px;
        vertical-align: middle;
    }

    .logo img{
        display: inline-block;
        width:123px;
        height:123px;
        vertical-align: middle;
    }


    .top-menu {
        display: inline-block;
        position: absolute;
        right:120px;
        top:25px;
        white-space: nowrap;
    }

    .left-menu {
        display: inline-block;
        position: relative;
        margin-left: 120px;
        margin-top: 180px;
        margin-bottom: 30px;
        width: 500px;
        text-align: left;
    }

    .left-menu-back {
        display: none;
    }

    .left-menu-front {
        display: block;

    }

    .main-section h1 {
        font-family: Playfair Display;
        font-style: normal;
        font-weight: bold;
        font-size: 50px;
        line-height: 70px;
        /* or 140% */
        
        color: #FBFAF8;
        background-color: rgba(41,26,67, 0.5);
        padding:20px;
    }

    .left-menu-header {
        font-family: Playfair Display;
        font-style: normal;
        font-weight: bold;
        font-size: 50px;
        line-height: 70px;
        /* or 140% */
        
        color: #FBFAF8;
        margin-bottom:50px;
    }    

    .left-menu-item {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 500;
        font-size: 20px;
        line-height: 30px;
        /* identical to box height, or 0% */
        
        display: block;
        text-align: left;    
        color: #FFFBFB;
        margin-bottom:20px;
    }

    .top-menu-item {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 500;
        font-size: 25px;
        line-height: 35px;
        /* identical to box height, or 0% */
        
        display: inline-block;
        margin-left:50px;
        
        color: #FFFBFB;
    }

    .top-menu-item a:link, .top-menu-item a:visited, .left-menu-item a:link, .left-menu-item a:visited {
        text-decoration: none;
        color: #FFFBFB;
    }

    .social-container {
        display: inline-block;
        position: relative;
        margin-left: 120px;
        width:300px;
        height:100px;
    }    

    .video-link-container {
        display: inline-block;
        width: 50%;
        height:260px;
        padding-right:20px;
        vertical-align: top;
    }

}

.announcement {
    display: block;

    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    padding:10px;
    
    background: #E74C3C;    
}

a.announcement:link, a.announcement:visited {
    color: white;
    text-decoration: underline;
}


.action-button1 {
    background: #F39C12;
    color: black;
    text-decoration: none;
    display: inline-block;
    padding: 10px;
    border-radius: 3px;
    user-select: none;
    font-family: Montserrat;
    font-style: normal;    
    font-size: 18px;
    line-height: 1.5;    
}

.cta-block {
    margin-top:20px;
    margin-bottom:20px;
    text-align: center;
}

.cta-block a:link, .cta-block a:visited {
    color: black;
    text-decoration: none;
}

.cta-block a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: normal;
    line-height: 44px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 4px;
    display: inline-block;
    background: #2ECC71;
    color: black;
}

.cta-block a:hover {
    background: #00AC41;
    color: white;
}