@charset "UTF-8";
/* CSS Document */

/*-------------------CURVE PLACEMENT-----------------*/
        .red_curve {
            position: fixed;
            float: right;
            right: 0;
            top:0;
            clip-path: polygon(0% 0, 100% 100%, 100% 0);
            width: 40%;
            z-index: 2;
            }


        .blue_curve {
            position: fixed;
            float: right;
            left: 0;
            bottom:0;
            clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
            width: 40%;
            z-index: 2;            
            }

/*--------------END OF CURVE PLACEMENT------------*/

/*---------------GENERAL STYLING------------------*/
        body{
            margin: 0;
            color: #474747/*Very dark grey*/;
            font-size: 16px;
            font-family: Quicksand, Open Sans, Raleway, Helvetica Neue, Helvetica, Arial,sans-serif;
            background-color: #FFFFFF/*White*/;
        }

        p, br{
            margin-bottom: 0.5em;    
        }

        .trunk{
            max-width: 960px;
            margin: 0 auto;
        }


        /*Headlines */
        h1,h2,h3,h4,h5,h6 {
        font-family: Quicksand,Open Sans,</Question for Sandra - What are the back-up web-fonts?*/ sans-serif;
        font-variant: small-caps;
        color: #633795/*Purple*/;
    }

        h1 {
        font-size: 2.5em;
        }

        h2 {
        font-size: 2.0em;
        }

        h3 {
        font-size: 1.67em;
        }

/*----------END OF GENERAL STYLING----------------*/

/*---------HEADER-----------------*/
        header{
            position: fixed;
            height: 125px;
            background-color: white;
            border-bottom: 2px solid #e5e6e5;
            width: 100%;
            margin-bottom: 0px;
        }

        .logo{
            margin-left: 10px;
            object-fit: fill;
            float: left;
            max-width: 30%;
            height: 120px;
        }

        nav{            
            display: flex;
            justify-content: center;
            font-size: 20px;
            height: 120px;
            max-width: 60%;
        }

        nav ul{
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            align-content: center;
        }


        nav ul li {
            list-style: none;
            margin: 0;
            border-left: 1px solid #633795;
            display: inline-block;
            padding: 0px 30px;
            position: relative;
            text-align: center;
            font-family: Quicksand;
            font-variant: small-caps;
            }

        nav li:hover {
              cursor: context-menu;
            }

        nav ul li ul {
            display: none;
            position: absolute;
            padding-left: 0;
            }

        nav ul li:hover > ul,
        nav ul li ul:hover {
            visibility: visible;
            display: block;
            width: 400px;
            text-align: left;
            padding-top: 10px;
            box-shadow: 0px 3px 5px -1px #ccc;
            background-color: white;
            opacity: 98%;
            z-index: 1;
            }

        nav ul li ul li {
            clear: both;
            width: 100%;
            text-align: left;
            margin-bottom: 7.5px;
            border-style: none;
            }
          }
        }

         ul li ul li { transition: all 0.5s ease; }

/*---------END OF HEADER-----------------*/


/*---------------TRUNK-------------------*/
        .banner{
            background-image: linear-gradient(to top right, #2A2C77, #991B1E);
            min-height: 150px;
            left: 50%;               /* To expand across the screen */
            margin-top: 119px;
            margin-left: -50vw;      /* To expand across the screen */
            margin-right: -50vw;     /* To expand across the screen */
            max-width: 100vw;        /* To expand across the screen */
            position: relative;      /* To expand across the screen */
            right: 50%;              /* To expand across the screen */
            width: 100vw;            /* To expand across the screen */ 
            z-index:-1;
        }

        .banner_text{
            max-width: 960px;
            vertical-align: middle;
            text-align: center;
            color: white;
            font-size: 2.5em;
            margin: 0 auto;
            font-family: Quicksand, Open Sans, Raleway, Helvetica Neue, Helvetica, Arial,sans-serif;
            padding: 25px 0;               
        }

        .banner_text p{
            font-size: 0.5em;             
        }

        .outcomes{
            border-top: 2px solid #e5e6e5;
            border-bottom: 2px solid #e5e6e5;
            padding-bottom: 25px;
        }

        .outcome_items{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-column-gap: 20px;            
        }

        .outcome_item_1, .outcome_item_2, .outcome_item_3{
            border: 1px solid #633795;
        }


        .delivarables{
            margin: 35px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-column-gap: 20px;
        }

        .deliverables h2{grid-area: 1 / 1 / 2 / 2;}
        .what_is_involved{grid-area: 1 / 2 / 2 / 4;}

        .what_is_involved li{
            list-style: none;
            border: 1px solid #633795;
            margin-bottom: 10px;
            padding-left: 10px;
        }

        input {
            display: none;
        }

        .post_label::after {
            content: '\2304';
            font-weight: bold; 
            font-size: 22px;
            position: absolute;
            right: 30px;
            bottom: 6px;
        }

        .post_label {
            display: block;    
            padding: 8px 22px;
            margin: 0 0 7px 0;
            cursor: pointer;
            background: linear-gradient(to top right, #2A2C77, #991B1E);
            border-radius: 3px;
            color: white;
            transition: ease .5s;
            position: relative;
        }

        .post_label h2 {
            margin: 0;
            color: white;
            font-size: 1.5em;
        }


        .post_label:hover {
            background: linear-gradient(to top right, #d9daf2, #f7d4d4);
        }

        .post_label:hover h2 {
            color:#474747;
        }


        input:checked + .post_label::after {
            content: '\2303';
            color: #474747;
        }

        .post {
            border-left: 1px solid #474747;
            border-bottom:1px solid #474747;
            border-right:1px solid #474747;
            margin: 0 0 1px 0;
            border-radius: 0 0 3px 3px;
        }

        input + .post_label + .post {
            display: none;
        }

        input:checked + .post_label + .post {
            display: block;    
        }
  

/*---------END OF TRUNK-----------------*/


/*---------------FOOTER-------------------*/

        /*footer{ /* 2 columns, 2 rows: column widths = 1/3 and 2/3 of screen respectively. row2 rows (2nd rwo merged). */
        footer{
           display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2);
            grid-column-gap: 50px;
            grid-row-gap: 0px;
            background-color: rgb(24, 23, 74, 1);
            color: white;
        }

        #footer_left     {grid-area: 1/1/2/2;}
        #footer_right    {grid-area: 1/2/2/4;}
        #copyright       {grid-area: 2/1/3/4;}

        

        .footer_column{
            padding: 15px;
        }

        .footer_row{
            text-align: right;
            font-size: 0.75em;
            padding-right: 40px;
        }

        footer h2{
            color: white;
        }

        #Prodatum_phone{
            display: block;
            text-align: right;
            font-size: 1.75em;
        }

        fieldset{
            border: 0;
        }

        .form_fields{
            display: flex;
            flex-direction: column;
        }

        input, textarea{
            font-size: 1em;
            margin: 5px;
            border: 0px;
            border-radius: 1.5px;
        }

        input{
            width: 15em;
        }

        textarea{
            height: 7em;
        }

        input[type=submit]{
            background-color: #EABD1F;
            font-size: 0.8em;
            text-transform: uppercase;
            font-weight: bold;
            width: 15em;
            border: 0;
            border-radius: 1.5px;
        }



/*---------END OF FOOTER-----------------*/

.service_details{
    display: flex;
    flex-direction:column;
}


.pain_point, .outcomes, .deliverables{
    text-align: center;
}

/*Header & footer*/

footer {
    text-align: right;
    margin-top: 50px;
    font-size: 14px;}






/*set the line height of paragraphs and unordered lists */
p,ul   {
        line-height: 1.5em; /*ems are based on the fond-size*/}

img {
    /* Allow images to be no wider than their parent container */
    max-width: 100%; 
    /* Set height automatically in proportion iwht the width*/
    height: auto;
    display:block;}

/* link effects. Must be covered in this order (link, visited, hover, active), otherwise overrides will take over*/
a:link, a:visited {
    color: #3896D9;
    text-decoration: none;}

a:hover{
    font-weight: bold;}

a:active{
    color: #GF1010;}

/*Classes*/

/* apply to all elements that have the class eventdetails */
.menu {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: left;
    background-color: #E5E6E5;
    padding; 20px;
    display: block;}


.eventdetails {
    font-weight: bold;
    font-size: 14px;}

.highlight {
    font-weight: bold;
    color:#DA7018;}

.content {
    padding: 20px;}


/* Style the tab */
.tab {
  overflow: hidden;
}



/* Change background color of buttons on hover */
.tab button:hover {
  border-bottom: 1.5px solid gray;
}

/* Create an active/current tablink class 
.tab button.active {
  border-bottom: 1.5px solid gray;
}*/

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
/*  border: 1px solid #ccc;*/
  border-top: none;
}