/*
Theme Name: Bopgun
Theme URI: 
Author: bopgun
Author URI: http://www.bopgun.com
Description: 
Version: 1.0.0
Text Domain: 
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}

textarea:focus, input:focus{outline: none;}
*:focus {outline: none;}

body {
	width: 100%;
	font-family: Arial;
	-webkit-font-smoothing: antialiased;
	line-height: 1.1;
}

h1,h2,h3,h4,h5,h6 {
	margin: 0px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-style: normal; 
	line-height: 1.2;
	margin: 0 0 10px 0;
}

h1 {font-size: 52px;}
h2 {font-size: 32px;}
h3 {font-size: 24px;}
h4 {font-size: 16px;}
h5 {font-size: 14px;}
h6 {font-size: 12px;}

.normal {font-weight: 400;}
.semibold {font-weight: 600;}
.bold {font-weight: 700;}

.white {color: #FFFFFF;}
.blue {color: #36A9E1;}
.brown {color: #634E42;}
.pink {color: #ED1E79;}

p {margin: 0 0 10px 0;}
p, li {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	line-height: 1.3;
	font-size: 16px;
}

b, strong {font-weight: bold;}
i, .italic {font-style: italic;}
a {
	text-decoration: none;
	color: inherit;
}
ul {
	width: 100%;
	float: left;
	margin: 10px 0;
	list-style: none;
}
ul li {margin: 0 0 10px 20px;}
ul li::before {
	content: "\2022";
	width: 20px;
	display: inline-block; 
	margin: 0 0 0 -20px;
	color: #36A9E1;
	font-weight: bold;
}


.wrapper {
	width: 100%;
	float: left;
	overflow: hidden;
}

.full-width {
	width: 100%;
	float: left;
	box-sizing: border-box;
}
.fixed-width {
	width: 920px;
	margin: 0 auto;
	box-sizing: border-box;
}

.content {margin: 70px 0 0 0;}

.transition {
	-moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.wrapper-404 {
	padding: 80px 0;
	text-align: center;
}

.carousel ul.slick-dots {
    margin: 0 auto;
    text-align: center;
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
}
.carousel ul.slick-dots li {    
	width: 20px;
    height: 20px;
    display: inline-block;
    margin: 0 5px;
}
.carousel ul.slick-dots li::before {
	content: normal;
	width: 0px;
}
.carousel ul.slick-dots li button {
    width: 20px;
    height: 20px;
    padding: 0px;
    background: transparent;
    background: #E6E6E6;
    border: 1px solid #E6E6E6;
    color: transparent;
    border-radius: 100%;
}
.carousel ul.slick-dots li.slick-active button {
    background: #36A9E1;
    color: #36A9E1;
    border: 1px solid #36A9E1;
}



/* Header */

.header {
	height: 70px;
	background-color: #634E42;
	margin: 0 auto;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}
.header .fixed-width {
	position: relative;
	height: 100%;
}

.header .logo {
	width: 180px;
	float: left;
}
.header .logo img {
	width: 100%;
	max-width: 180px;
	height: auto;
	display: inline-block;
}

.header .menu {
	width: auto;
    float: left;
    padding: 25px 0 0 30px;
}
.header .menu .item {
    width: auto;
    float: left;
    padding: 0 15px;
    border-right: 1px solid #FFFFFF;
}
.header .menu .item:nth-last-child(1) {border-right: 0px;}
.header .menu .item:hover p,
.header .menu .item.active p {color: #36A9E1;}
.header .menu .item p {
	margin: 0 auto;
	font-size: 14px;
}

.header .contact {
	width: 180px;
	height: 100%;
	padding: 25px 0 0 0;
	text-align: center;
	background-color: #36A9E1;
	float: right;
	box-sizing: border-box;
}
.header .contact p {margin: 0 auto;}
.header .contact i {
	display: none;
	float: left;
	font-size: 25px;
	color: #FFFFFF;
}

.header .toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 15px 0 0 0;
    float: right;
    text-align: right;
    color: #F1F1F1;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.header .toggle i {
	font-size: 30px;
    float: right;
    position: relative;
    top: 5px;
}
.header .toggle.active .fa-bars,
.header .toggle .fa-times {display: none;}
.header .toggle.active .fa-times {display: block;}

/* /Header */


/* Footer */

.footer {
	background-color: #404041;
	padding: 10px 0;
	display: flex;
}
.footer .fixed-width {
	height: 100%;
	position: relative;
}

.footer .logo {
	width: 140px;
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
	left: 0;
}
.footer .logo img {
	width: 100%;
	max-width: 140px;
	height: auto;
	display: inline-block;
}

.footer .legal {
	width: 55%;
	float: left;
	padding: 10px 0 10px 30px;
	margin: 0 0 0 170px;
	border-left: 1px solid #FFFFFF;
}
.footer .legal p {font-size: 12px;}

.footer .rics {
	width: 180px;
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
	right: 0;
}
.footer .rics img {
	width: 100%;
	max-width: 300px;
	height: auto;
	display: inline-block;
}

/* /Footer */


/* Home */

.home-hero {
	height: 730px;
	padding: 240px 0 0 0;
	background-image: url(im/home-hero-bg.jpg);
	background-position: bottom center;
	background-size: cover;
	background-repeat: no-repeat;
}
.home-hero .logo {
	width: 40%;
	float: left;
	text-align: center;
}
.home-hero .logo img {
	width: 100%;
	max-width: 260px;
	height: auto;
	display: inline-block;
}
.home-hero .copy {
	width: 60%;
	float: right;
}
.home-hero .copy h1 {margin: 0 0 5px 0;}

.home-intro {padding: 120px 0;}
.home-intro .left {
	width: 45%;
	float: left;
}
.home-intro .left h3 {margin: 0 0 20px 0;}
.home-intro .right {
	width: 45%;
	float: right;
}

.home-about {
	padding: 0 0 40px 0;
	background-color: #F2F2F2;	
}
.home-about .left {
	width: 50%;
	float: left;
}
.home-about .left .inner {
	width: 480px;
    max-width: 100%;
    float: right;
    padding: 60px 40px 0 20px;
    box-sizing: border-box;
}

.home-about .right {
	width: 50%;
	float: right;
}
.home-about .right img {
	max-width: 100%;
	height: auto;
	margin: 0 0 10px 0;
}

/* /Home */


/* About us */

.aboutus-intro {	
	padding: 120px 0 40px 0;
	background-color: #F2F2F2;	
}
.aboutus-intro h1 {
	margin: 0 0 40px 0;
	text-align: center;
}

.aboutus-bio {
	background-color: #F2F2F2;
	padding: 0 0 40px 0;
}
.aboutus-bio .left {
	width: 50%;
	float: left;
}
.aboutus-bio .left .inner {
	width: 480px;
    max-width: 100%;
    float: right;
    padding: 0 40px 0 20px;
    box-sizing: border-box;
}
.aboutus-bio .left .inner .director {
	position: relative;
	padding: 20px 0 0 0;
}
.aboutus-bio .left .inner .director .headshot {
	width: 160px;
	height: 160px;
	float: left;
	margin: 0 20px 0 0;
	border-radius: 100%;
	background-image: url(im/headshot-chris.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.aboutus-bio .left .inner .director p {
	margin: 0 auto;
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
	left: 180px;
}
.aboutus-bio .right {
	width: 50%;
	float: right;
}
.aboutus-bio .right img {
	max-width: 100%;
	height: auto;
	margin: 0 0 10px 0;
}

.aboutus-statement {
	padding: 40px 0;
	background-image: url(im/aboutus-statement-bg.jpg);
	background-position: right center;
	background-size: auto;
	background-repeat: no-repeat;
}
.aboutus-statement h3 {
	width: 60%;
	float: left;
}

.aboutus-gallery img {
	width: 16.666%;
	height: auto;
	float: left;
}

/* /About us */


/* Services */

.services-intro {padding: 120px 0 60px 0;}
.services-intro .left {
	width: 45%;
	float: left;
	padding: 40px 0 0 0;
}
.services-intro .left h3 {
	margin: 0 0 20px 0;
	text-align: left;
}
.services-intro .right {
	width: 45%;
	float: right;
}

.services-list {padding: 0 0 20px 0;}
.services-list .item {padding: 0 0 20px 0;}
.services-list .item h3 {margin: 0 0 20px 0;}
.services-list .divider {
	text-align: center;
	padding: 10px 0 40px 0;
}
.services-list .divider .dot {
	width: 20px;
	height: 20px;
	margin: 0 auto;
	border-radius: 100%;
	background-color: #36A9E1;
}

/* /Services */


/* Case studies */

.casestudies-title {
	padding: 120px 0 60px 0;
	text-align: center;
}

.casestudies-list {padding: 0 0 20px 0;}
.casestudies-list .inner {
    width: 740px;
    max-width: 100%;
    padding: 0 20px;
    margin: 0 auto;
    box-sizing: border-box;
}
.casestudies-list .item {padding: 0 0 20px 0;}
.casestudies-list .item .copy h3 {margin: 20px 0;}
.casestudies-list .item .carousel {margin: 0 0 20px 0;}
.casestudies-list .item .carousel .slick-slide img {
	width: 100vw;
    max-width: 700px;
    height: auto;
}
.casestudies-list .divider {
	text-align: center;
	padding: 10px 0 40px 0;
}
.casestudies-list .divider .dot {
	width: 20px;
	height: 20px;
	margin: 0 auto;
	border-radius: 100%;
	background-color: #36A9E1;
}

.casestudies-other .item {
	width: 32%;
	float: left;
	margin: 0 2% 40px 0;
}
.casestudies-other .item:nth-child(3n+3) {margin: 0 0 40px 0;}
.casestudies-other .item img {
	width: 100%;
	height: auto;
	float: left;
	margin: 0 0 20px 0;
}

/* /Case studies */


/* Contact us */

.contactus-title {padding: 120px 0 60px 0;}

.contactus-intro {padding: 0 0 40px 0;}
.contactus-intro .left {
	width: 35%;
	float: left;
	padding: 20px 0 0 0;
}
.contactus-intro .left h3 {margin: 0 0 20px 0;}
.contactus-intro .right {
	width: 52%;
	float: right;
}
.contactus-intro .right .director .headshot {
	width: 160px;
	height: 160px;
	float: left;
	margin: 0 20px 0 0;
	border-radius: 100%;
	background-image: url(im/headshot-chris.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.contactus-intro .right .director .copy {
	float: left;
	padding: 20px 0 0 0;
}
.contactus-intro .right .director .copy img {
	width: 180px;
	margin: 20px 0 0 0;
	display: inline-block;
}

.contactus-hero img {
	width: 100%;
	max-width: 1960px;
	height: auto;
	float: right;
}

/* /Contact us */