@charset "UTF-8";

/* CSS Document */

/*
Theme Name: Strategic Cyber Partners
Theme URI: https://strategiccyberpartners.com/
Author: Consociate
Author URI: consociate.marketing
Text Domain: strategic-cyber-partners
*/

/* GENERAL 
#################################################### */

body { font-family: "elza-text", sans-serif; font-weight: 500; font-style: normal; font-size: 18px; background: #6D78B0 }

b, strong, .bold { font-weight: 700 }

h1, h2, h3, h4, h5 { font-family: "playfair-display", serif; font-weight: 700; line-height: 1.25em; margin-bottom: 1.25rem; letter-spacing: -.01em }
h1 { font-size: 60px }
h2 { font-size: 50px }
h3 { font-size: 40px }
h4 { font-size: 30px }
h5 { font-size: 26px }
h6 { font-size: 22px }

.left { text-align: left }
.right { text-align: right }
.center { text-align: center }

.norm { font-weight: 400 }
.bold { font-weight: 700 }
.extra {  }

.caps { text-transform: uppercase }
.small, small { font-size: .65em }

.serif { font-family: "playfair-display", serif; font-weight: 700; letter-spacing: -.01em }
.sans {  font-family: "elza-text", sans-serif; font-weight: 500; }

.txt-purple { color: #6D78B0 }
.txt-dark { color: #31375B }
.txt-gray { color: #828692 }
.txt-white { color: #fff }

.bg-purple { background-color: #6D78B0 }

hr { margin: 2rem 0 }

.m-show { display: none }

/* Nav */

.navbar { padding: 25px 0 }
.navbar-brand { width: 250px }
.nav-link { text-transform: uppercase; color: #fff !important; font-size: 15px; text-align: center;  }
.navbar-expand-lg .navbar-nav .nav-link { padding-left: 20px; padding-right: 20px }
.home .nav-link { text-transform: uppercase; color: #000 }
.navbar .logo { background: url("images/logo-scp-white.png") center center no-repeat; width: 300px; height: 50px; 
	background-size: contain; text-indent: -9999px; }

#intro { padding-top: 100px; padding-bottom: 100px; color: #fff; overflow-x: hidden;
	background-color: #181d47;
	background-image: url("images/bg-dark-angled-1920.jpg"), url("images/bg-dark-angled-rev-1920.jpg");
  	background-position: center top, center bottom;
  	background-repeat: no-repeat, no-repeat;
	background-size: contain, contain;
	}
.block { background: #EFEFEF;
	background: linear-gradient(180deg, rgba(239, 239, 239, 1) 0%, rgba(193, 193, 193, 1) 100%);
	border-radius: 10px; padding: 50px 25px; text-align: center; font-family: "playfair-display", serif; font-weight: 700; color: #31375B; letter-spacing: -.01em; min-height: 400px; line-height: 1.25; font-size: 30px;
	display: flex;
	flex-direction: column;       /* stack image and text vertically */
	align-items: center;          /* center horizontally */
	justify-content: center;      /* center vertically */
}
.block-bcp { font-size: 25px }
.block img { max-height: 125px }
.block a { color: #31375B !important }
.block a:hover { color: #6D78B0 }

#intro .flush-left { margin: 100px 25px 25px -35px }
#intro .flush-right {margin: 25px -35px 100px 25px }

.border-white { width: 300px; height: 20px; background: #fff; margin: -12px auto -12px auto; position: relative; z-index: 100 }

.headphones { padding: 25px }

footer { background: url("images/bg-purple-waves-1920.jpg") center center no-repeat; padding-top: 75px; padding-bottom: 75px; background-size: cover; 
	font-size: 45px; font-family: "playfair-display", serif; font-weight: 700; color: #fff }
footer .info { font-size: 25px }
footer a { color: #fff !important }
footer img { max-width: 250px }
footer .ada { font-family: "brisbane", sans-serif; font-weight: 500; font-size: 18px; color: #fff; margin-top: 50px }

footer div.wpforms-container-full .wpforms-field-label,
	footer div.wpforms-container-full .wpforms-field.wpforms-field-checkbox ul li input+label,
	footer div.wpforms-container-full .wpforms-field-sublabel { color: #fff }
footer .wpforms-container { text-align: left }
footer .wpforms-container .wpforms-form .wpforms-field-label { font-size: 22px }

footer #wpforms-44-field_4-container .wpforms-field-label { margin-bottom: 0 }
footer div.wpforms-container-full button[type=submit]:not(:hover):not(:active) { background-color: #31375B }


/* Page */

main { background: #fff url("images/bg-fade-angled-1920.jpg") center top no-repeat; background-size: contain; padding-top: 100px; padding-bottom: 100px; min-height: 500px }

/* floating effect */

.floating {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 25px); }
    100%   { transform: translate(0, -0px); }   
}
.floating.slow {
    animation-name: floating;
	animation-duration: 4s; 
}

/*
####################################################
C O M P O N E N T S
####################################################
*/

/* IMAGES */

img { max-width: 100%; height: auto; }


/* LINKS */

a { text-decoration: none; transition: 200ms; font-weight: 700; color: #6D78B0 !important }
a:hover { color: #969ec8 !important }

a img { transition: 200ms }
a img:hover { transform: scale(.97) }

/* BUTTONS */

a.btn { border: none; padding: 12px 20px 10px 20px; font-size: 17px; background: #6D78B0; color: #fff !important; text-transform: uppercase; font-weight: 400 }
a.btn:hover { background: #31375B; color: #fff  }

a.wp-block-button__link { transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; font-size: 18px; color: #fff !important; ; font-weight: 400 }
a.wp-block-button__link:hover { background-color: #31375B !important }

/* Shadows  / Rotations */

.shadowed img {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px !important;
}
.rotated img {
    rotate: 3deg;
    border: 8px solid #fff;
}
.rotated.alt img { rotate: -3deg }

.shadow-text { text-shadow: -1px -1px 1px #fff, 1px 1px 1px rgba(0,0,0,.50) }

/* Spacing */

.max-800, .max-1000, .max-1200, .max-w { margin-left: auto; margin-right: auto }
.max-800 { max-width: 800px }
.max-1000 { max-width: 1000px }
.max-1200 { max-width: 1000px }

.mar-0 { margin: 0 !important }
.mar-top-0 { margin-top: 0 !important }
.mar-btm-0 { margin-bottom: 0 !important }

.flush { padding-left: 0; padding-right: 0 }

/*
####################################################
E X T R A S
####################################################
*/

/* Anchor scroll sticky menu offset */
html {
  scroll-padding-top: 275px;
}

/* WP admin bar offset */
body.admin-bar .navbar {
    margin-top: 32px;
}

/* Nav scroll */

.navbar-fixed-top.scrolled .logo {
  height: 40px; 
  transition: height 200ms ease
}
.navbar.navbar-fixed-top.scrolled { 
	background: #31375B;
	transition: background 200ms ease
}
.home .navbar.navbar-fixed-top.scrolled .nav-link { 
	color: #fff;
	transition: color 200ms ease
}

/* Full-width in WP Block Editor (Cover block) */
.alignfull {
    width:  100vw;
    max-width:  100vw;
    margin-left:  calc(50% - 50vw);
}
.wp-block-cover.alignfull {
    padding-top: 100px; padding-bottom: 100px; margin-top: 50px; margin-bottom: 75px
}

.wp-block-cover__inner-container { max-width: 1300px }

#XXX { overflow-x: hidden } /* Fix for PC horizontal scroll bars with .alignfull */

/* Image Wraps */

.crop { height: 300px }
.crop img { 
	object-fit: cover;
    width: 100%;
    height: 100% !important;
}

/* Nav dropdown on hover */
.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}



/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* Custom */
@media (min-width: 1925px) {

}

/* Extra large devices (large desktops, 1200px and up)
 * No media query since this is the default in Bootstrap because it is "mobile first"
 */
@media (min-width: 1200px) {

}

/* Large devices (desktops, 992px and up) */
@media (max-width: 1199px) {
	
	.nav-link {  font-size: 15px }
	.navbar .logo { margin-left: 20px; margin-right: 20px }
	
	.block { font-size: 28px }
	.block-bcp { font-size: 24px }

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (max-width: 991px) {
	
	.m-hide { display: none }
	.m-show { display: block }
	
	/* Breaks WP BLOCK columns early w/ tweaks */
	.wp-block-columns { display:block } 
	.wp-block-column:nth-child(2n),
		.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2n) { margin-left: 0 }
	
	.navbar-toggler { background-color: #31375B; border-color: #fff; color: #fff; font-size: 25px }
	
	.offcanvas { background: #6D78B0;
		background: linear-gradient(180deg, rgba(109, 120, 176, 1) 0%, rgba(49, 55, 91, 1) 99%); }
	
	/*
	.offcanvas-title { color: #fff }
	.offcanvas-title img { max-width: 200px }
	.navbar-expand-lg .navbar-nav .nav-link { color: #0A6399; font-size: 22px; font-weight: 700 }
	.offcanvas .navbar-nav .nav-link.active { border-bottom: 0 }
	*/
	
	.offcanvas-body .nav-link { font-size: 20px; font-weight: 700; margin-bottom: 10px  }
	
	body { font-size: 16px }
	
	h1 { font-size: 50px }
	h2 { font-size: 40px }
	h3 { font-size: 30px }
	h4 { font-size: 26px }
	h5 { font-size: 22px }
	h6 { font-size: 20px }
	
	.block { font-size: 20px }
	
	footer { font-size: 35px }
	footer a { font-size: 20px }
	
	.wp-block-cover.alignfull { padding-top: 50px; padding-bottom: 50px;
    	margin-top: 50px; margin-bottom: 50px }
	
	main { padding-top: 50px; padding-bottom: 50px }


}

/* Small devices (landscape phones, 544px and up) */
@media (max-width: 767px) {
	
	.reverse-mobile { flex-direction: column-reverse }
	
	#intro .flush-right { margin-bottom: 50px }
	.block { font-size: 30px; min-height: 200px; margin-bottom: 25px }
	
	.floating img { max-width: 200px }
	.headphones { max-width: 300px }
	 
}

/* Extra small devices (portrait phones, less than 544px) */
@media (max-width: 543px) {

}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

/* Set width to make card deck cards 100% width */
@media (max-width: 950px) {

}