/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

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

/* ===============
       FONTS
   =============== */

/* <uniquifier>: Use a unique and descriptive class name
 <weight>: Use a value from 100 to 900
*/

.raleway-reg, h2, h7, p {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.raleway-med, h3 {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.raleway-semi, h1, h5 {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.raleway-bold, h8 {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.raleway-black, h6 {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}


body {
    font: 16px/26px Helvetica, Helvetica Neue, Arial;
}


.role{
    text-align: right;
    font-size: 250%;
    line-height: 100%;
    margin: 4% 0;
    font-weight: 700;   

}

.hyper {
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    font-weight: 600;
    font-size: 200%;
    padding-bottom: 2%;
}

/* ===============
        Colors
   =============== */


.red {color:#8a171b;}
.white {color:#ffffff;}
.grey{color:#464646;}

.bullets {
    list-style-type: circle;
}

.orange{color:#f68b2d;}
.drkgrey{color:#232323;}
.brown{color:#1a1615;}


/* ===============
        Aside
   =============== */
aside {
    background-color: #1e2942;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: fixed;
    padding: 25px 0;
    border-radius: 0 50px 50px 0 ;
    width: 225px;
}

aside a{
    color: white;
    font-size: 1.4rem;
    padding: 15px 0;

}

.pdfbtn {
    color: white;
    text-align: center;
	border-radius: 50px;
    border-style: solid;
    border-width: 4px;
    border-color: #fff;
	border: 2px solid #fffff;
    padding: 4%;
    margin: 25% 0 15% 0;
}



a.sec1, a.sec2, a.sec3, a.sec4, a.sec5 {
    padding-left: 25px;
}

/* ===============
        Buttons
   =============== */

.btnwhite, .btnred, .btngrey {
    text-align: center;
	border-radius: 50px;
    border-style: solid;
    border-width: 5px;
    padding: 6%;
    margin: 4% 0 4% 0;
    font-size: 2rem;
}


.btnwhite {
    color: #fff;
    border-color: #fff;
    text-decoration: none;
}


.btnred {
    border-color: #8a171b;
	color: #8a171b;
}


.btngrey {
    color: #464646;
    border-color: #464646;
}


.btnred:hover {
    background-color: #fff;
    color: #fff;
}

.btnwhite:hover {
    background-color: #fff;
    color: #464646;
}
.btngrey:hover {
    background-color: #464646;
    color: #FFFFFF;
}





/* ===============
    Backgrounds
   =============== */

.chairmantitle, .chairmanlight, .chairmandark, .woodtitle, .wooddark, .wooddarkdetail, .woodlight1, .woodlight2 {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
}


.chairmantitle{
    background-image: url("/img/campaigns/chairman/background-title.png");
}

.chairmanlight{
    background-image: url("/img/campaigns/chairman/background-light.png");
}

.chairmandark {
    background-image: url("/img/campaigns/chairman/background-dark.png");
}

.woodtitle {
    background-image: url("/img/campaigns/wood/woodtitle.png");
} 
.wooddark {
    background-image: url("/img/campaigns/wood/wooddark.png");
} 

.wooddarkdetail {
    background-image: url("/img/campaigns/wood/wooddark2.png");
}

.woodlight1 {
    background-image: url("/img/campaigns/wood/woodlight1.png");
}
.woodlight2 {
    background-image: url("/img/campaigns/wood/woodligt2.png");
}

/* ===============
    blocks
   =============== */

.woodtitleblk {
    background-color: #1a1615;
    padding: 5%;
    max-width: 450px;
    margin-bottom: 5%;
}




.contentblock {
    width: 100%; 
}

.contentmargin{
    margin: 0% 6% 0% 275px;
    padding: 2% 0;
}

.content-opflow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding: 4% 0;
}
.content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	width: 100%;
}


.section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0 2%;
}

.sectiontitle {
    font-size: 14pt;
    
}

.single {
    width: 100%;
}


.twobysmall {
    width: 20%;
    height: 100%;
}

.twobylarge {

    height: 100%;
}


.section img {
    margin: 2% 0;
}

.title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.title>ul{
    padding-left: 30%;
}


.center{
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}

ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}



#hero, #herocontent, #digital, #photo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 4%;
}




#hero {
    margin-left: 30%;
}

#herodiv {
    width: 80%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}


.imgcorners {
    border-radius: 50px;
    height: 75%;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}

.right {
    padding-left: 5%;
}

.left {
    padding-right: 5%;
}

#herocontent h1{
    color: #554A92;
    height: 55px;
}


.block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

#hero img, #about img {
    max-width: 100%;
}


#herotitle {
    padding-bottom: 4%;
}
.socials, #herosocials{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;

}

#herosocials p {
    color: #ef5090;
    white-space: nowrap;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}




.title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 2%;
}
#abt, #case, #phototitle, #imaging {
    margin-bottom: 10%;
}

.title a{
    -ms-flex-line-pack: center;
        align-content: center;
    padding-left: 5%;
    margin-left: 2%;
    margin-top: 1%;
    min-width: 35px;
}






#imaging h5{
    color: #ef5090;
}


#photo h5 {
    color: #427CBF;
}


.thumbs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
    -ms-flex-wrap: no-wrap;
        flex-wrap: no-wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    
}
.thumbs img {
    width: 65%;
    -o-object-fit: cover;
       object-fit: cover;
    border: 4px solid #BFBFBF;
    border-radius: 50px;
    margin: 5% 0;
    aspect-ratio: 1 / 1;

}

.mainimg {
 margin: 2% 0;
}

.mainimg img {
    border-radius: 50px;
	max-height: 100vh;
}

#photomain, #digimgmain {
	max-width: 62vw;
}

#phototitle h5{
    color: #427cbf;
}

#digimgs>img:hover {
    border-color: #ef5090;
}
#photoimgs>img:hover {
    border-color: #427cbf;
}

#digimgs>img:active {
    border-color: #ef5090;
}
#photoimgs>img:active {
    border-color: #427cbf;
}





/* ===============
    Media Queries
   =============== */




@media all and (max-width:1610px) {

    .content, .content-opflow {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    
   

    .contentmargin{
    margin: 0% 2% 0% 275px;
    padding: 2% 0;
}
	   
    #herocontent {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    
    .fourx {
        width: 46%;
}
    


    
   
}

@media all and (max-width:1324px) {
   .content, .content-opflow {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
   

    
    
.contentmargin{
    margin: 0% 2% 0% 275px;
    padding: 1% 0;
}
	
   
    
    
    

    

    
    
}

@media all and (max-width:1230px) {

  
    h7{
        font-size: 200%;
    }
    
   .content, .content-opflow {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .content-opflow{
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }
  
	.thumbs {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
	}

    
    .contentmargin{
    margin: 0% 2% 0% 275px;
    padding: 2% 0;
}

    aside a{
        font-size: 1.4rem;
    }
	
    
#about, #cases, #digital, #contact, #photo{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
     #more {width: 100%;}
    .single, .dbl {
        width: 100%;
    }
    

    
    #herosocials {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    }
#herocontent {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    
    .fourx {
        width: 46%;
}
    .twospace, .onespace {
        width: 100%;
    }
    
    
    .right, .left {
        padding: 0;
    }
    .contactinfo {
        padding-left: 5%;
    }

	
}

@media all and (max-width:750px) {
 
        h7{
        font-size: 200%;
    }
    
   .content, .content-opflow {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
        .content-opflow{
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }
    
        .fourby {
    width: 95%;
    }
    
    .threeby{
       width: 95%;
    }
    
        .twoby{
        width:95%;
    }
    
    .contentmargin{
    margin: 0% 2% 0% 275px;
    padding: 2% 0;
}

    aside a{
        font-size: 1.4rem;
    }
	
    
    #herodiv {
        width: 100%;
        margin-top: 5%;
    }

    
#about, #cases, #digital, #contact, #hero, #photo{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
     #more {width: 100%;}
    .single, .dbl {
        width: 100%;
    }
   
    
    #herosocials {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    }
#herocontent {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    
    .fourx {
        width: 95%;
}
    .twospace, .onespace {
        width: 100%;
    }
    
    .right, .left {
        padding: 0;
    }
    .contactinfo {
        padding-left: 5%;
    }
    

	
	
	
}