html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:none}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

html {
  	position: relative;
	min-height: 100%;
}

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

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

body {
	font-size: 14px;
	line-height: 1.4444444447; /*line-height: 1.6666666667;*/ 
	color: #333333;	
}
body > .top { background: none;}

.xyzyzx {   	
	background: #f1f5ff; 
	margin-bottom: 251px; 
}
.xyzyzx > .top { background: #d6e0ff;}

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

.text-muted {
  margin: 30px 15px;
}


code {
  font-size: 80%;
}


*::-moz-selection {
    background-color: #d6e0ff;
    color: #79f;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

.top {
	position: fixed;
	z-index: 1030;
	min-height: 50px;
	top: 0;
	right: 0;
	left: 0;

}

.top > div {
	position: relative;
  	width: 1170px;
}

.top > div, .bottom > div {
	margin-right: auto;
	margin-left: auto;
}

.top > div > div > a > span {
	display: block;
	float: left;
	color: #fff;
	margin-top: 10px; margin-left: 15px; margin-right: 15px;
}


.yepp {
    	display: none;

  }


.page span {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 15px;
}
.page span {
	position: relative;
	display: block;
	height: 50px;
}

.eppy { float: left; }
.logo { position: absolute; left: 50%;}
.logo {
	margin-top: 10px; margin-right: 15px;
}

.page {

	float: left;

}

.pages {

	float: right;

}

.pages ul {
	list-style: none;
	margin: 0;

}
.pages ul li {

	float: left;

}

.pages ul li a {

    position: relative;
    display: block;
    height: 50px;

}

.pages ul li a {

	text-decoration: none;
	color: #333;
}

.pages ul li .active { color: #79f; }
.pages ul li a {
    	padding-top: 10px;
   	padding-bottom: 10px;    
	padding-right: 15px;

}

body > .middle {
	margin-top: 50px;	

}
.middle {
  	position: relative;
  	overflow: hidden;
	width: 100%;
	
}

.middle > div > div:nth-child(2) {
	margin-top: 50px;
	margin-bottom: 50px;

}


.middle > div > div:nth-child(3) {
	height: auto;
	border-top: 1px solid #79f;
	/*background: #d6e0ff;*/
}

.middle > div > div > div {
	margin-left: 15px;
	margin-right: 15px;

}


.v__sys {

  	position: relative;
  	overflow: hidden;
	width: 100%;
	height: 100vh;
}

.noise {
    -webkit-animation: grain 7s steps(10) infinite;
    -o-animation: grain 7s steps(10) infinite;
    animation: grain 7s steps(10) infinite;
    background-image: url(/wp-content/themes/composeit/dist/images/noise.png);
    height: 285%;
    left: -50%;
    opacity: .4;
    position: absolute;
    top: -100%;
    width: 300%;
}


.overlay {
	position: absolute;
	background: #79f;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -999;
	/*filter: alpha(opacity=80);
	-moz-opacity: .80;
	opacity: .80;*/

}

.v__sys > .giphy, .v__sys > .text, .v__sys > .giphy > .hello, .v__sys > .more {
	position:absolute;

}

.v__sys > .text {
	z-index: 1030;
	padding-left: 15px;
	padding-right: 15px;
	bottom: 20%;
	left: 30%;
	width: 25%;
	text-transform: uppercase;
  	color:#fff;
}

.v__sys > .giphy > .hello {
	z-index: 1030;
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 14px;
	margin-top: 14px;
	top: 50%;
	left: 25%;
	text-transform: uppercase;
  	color:#fff;
}

.v__sys > .giphy {
	top: 50%;
	left: 50%;
	width: 18%;
	transform: translate(-50%,-50%);

}
.v__sys > .more {	
	left: 80%;
  	bottom: 20%;
  	background: #fff;
	color: #79f;
}

.v__sys > .more > a {
	text-decoration: none;
	padding: 10px;
	display: block;
}

.s__sys {
	position: relative;
}

.s__sys .synopsis {
    	position: absolute;
	top: 0;
	left: 0;
    	width: 50%;
    	height: 50%;
    	z-index: 1;


 }

.s__sys .scope {

	position: relative;
	height: 100%;
	white-space: nowrap;
	overflow: hidden;



}


.s__sys .synopsis .text {
    	position: absolute;
	top: 15%;
    	left: 0;
    	width: 80%;
	padding: 0 5.5vw;
	z-index: -999;

}

.s__sys .scope .list, .s__sys .scope .type {

  height: 220px;
  float: left
}

.s__sys .scope .list.list, .s__sys .scope .type.list {
	padding-left: 50%;


}
.s__sys .scope .type .block:last-child, .s__sys .scope .list .block:last-child {
  margin: 0
}

.s__sys .scope .list .block, .s__sys .scope .type .block {
  	position: relative;
  	overflow: hidden;
	width: 100%;

}
.s__sys .scope .list .block, .s__sys .scope .type .block {
  	display: inline-block;
  	vertical-align: middle;

}

.s__sys .scope .list .block span, .s__sys .scope .type .block span {

	position:absolute;
	right: 15%;
	top: 15%;

}
.s__sys .scope .list .block .text, .s__sys .scope .type .block .text {
	position: absolute;
	max-width: 100%;
	color: #fff;
	white-space: normal;
	left: 2vw;
	z-index: 8


	}
.s__sys .scope .type .block .text p, .s__sys .scope .list .block .text p {
	color: #fff;
	-webkit-transition: opacity .3s cubic-bezier(.455, .03, .515, .955);
	transition: opacity .3s cubic-bezier(.455, .03, .515, .955)
}

.s__sys .scope .type .block:hover .text p, .s__sys .scope .list .block:hover .text p
	{
	opacity: .5
}
.s__sys .scope .type .block.wmweb .text, .s__sys .scope .list .block.wmweb .text {
	top: 15%;
}



.s__sys .scope .type .block.web .text, .s__sys .scope .list .block.web .text {
	top: 15%;
}



.s__sys .scope .type .block.sys .text, .s__sys .scope .list .block.sys .text {
	top: 15%
}


.s__sys .scope .list .block.wmweb, .s__sys .scope .type .block.wmweb {
	background: #4abcff;
}
.s__sys .scope .list .block.web, .s__sys .scope .type .block.web {
	background: #4ae0ff;
}
.s__sys .scope .list .block.sys, .s__sys .scope .type .block.sys {
  background: /*#4a98ff #fff;*/
}

.s__sys .scope .list .block.sole, .s__sys .scope .type .block.sole {
	height: 100%;
	width: 285px;
}

.s__sys .scope .list .block.wide, .s__sys .scope .type .block.wide {
	height: 100%;
	width: 570px;

}
.b__sys > div:nth-child(2) {
	display: block;
	overflow: hidden;
}

.b__sys > div:nth-child(2) > .giphy {
	position: relative;
	width: 15%;
	float: right;

}

.b__sys > div:nth-child(2) > .giphy > .overlay {
	position: absolute;
	z-index: 1;	
	background: #79f;
	top:0;
	width: 100%;
	height: 100%;  
	filter: alpha(opacity=80);
	-moz-opacity: .80;
	opacity: .80;

}

.b__sys > div:nth-child(2) > .giphy > .overlay > .text > div {
	position: absolute;		
	left:50%;
  	top: 50%;
}


.b__sys > div:nth-child(2) > .text > div:nth-child(1) {
	text-transform:uppercase;
}
.b__sys > div:nth-child(2) > .text > div:nth-child(1) {
	width:50%;
}

.marquee {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  	padding:12px 0;
	--marquee-width: 100vw;
	--offset: 20vw;
	--move-initial: calc(-25% + var(--offset));
	--move-final: calc(-50% + var(--offset));
	--item-font-size: 10vw;
	counter-reset: marquee;
	overflow: hidden;
 }
.marquee > div {
	position: absolute;

}  

      
.marquee > div > div {	

	width: fit-content;
	display: flex;
	position: relative;
	transform: translate3d(var(--move-initial), 0, 0);
	animation: bouncing-text 10s linear infinite;
	transition: opacity 0.1s;
	animation-play-state: running;
	transition-duration: 0.4s;	
}


.marquee > div > div > span {
	font-size: 12px;
	font-weight: 700;
    	font-stretch: normal;
    	font-style: normal;
    	line-height: normal;
    	letter-spacing: normal;
    	text-align: left;
    	color: #79f;
    	text-align: justify;
	white-space:nowrap;
	padding:0 30px;
  	text-transform:uppercase;	 	
}
       
@-moz-keyframes bouncing-text {
	0% {
		transform: translate3d(var(--move-initial), 0, 0);
	}

	100% {
		transform: translate3d(var(--move-final), 0, 0);
	}
}
        
@-webkit-keyframes bouncing-text {
	0% {
		transform: translate3d(var(--move-initial), 0, 0);
	}

	100% {
		transform: translate3d(var(--move-final), 0, 0);
	}
}
        
@keyframes bouncing-text {
	0% {
		transform: translate3d(var(--move-initial), 0, 0);
	}

	100% {
		transform: translate3d(var(--move-final), 0, 0);
	}
}

.extras > div {
	float: left;
}
.extras > div:nth-child(1) {
	font-size: 16px;
	width: 25%; 
}
.extras > div:nth-child(2) {
	margin-left: 25%;
	width: 50%; 
}

.xzxz {	
	position: fixed;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 5vw;
	height: 5vw;
	line-height: 2vw;
	text-align: center;
}

.p__sys {

	overflow: visible;
	position: relative;
	height: 100vh;
	padding: 0;
}


.p__sys .text {

    padding-left: 25px;
    vertical-align: middle;
}

.p__sys .text {
	width:50%;
}

.p__sys > div {
    	position: absolute;

}

.p__sys >  div {
	cursor: default;
}

.p__sys >  div .overlay {
    display: none;
}
.p__sys >  div > .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
}

.overlay > p {
    	position: absolute;
	left: 50%;
	top: 50%;
	
}


.p__sys >  div:hover .overlay {
	display: block;

}


.p__sys > div:nth-child(1) {
    	right: 15%;
    	top: 0;
	width: 25%;
}

.p__sys > div:nth-child(2) {

    	left: 5%;
    	top: 5%;
	width: 35%;
}

.p__sys > div:nth-child(3) {
	
    	left: 15%;
    	top: 30%;
	width: 15%;
}


.p__sys > div:nth-child(4) {
    	left: 50%;
    	top: 30%;
	width: 25%;
}

.c__sys {
	position: relative;
	display: block;
	overflow: hidden;
	height: 50vh;
}


.c__sys .text, .c__sys .sys {

	float: left;

}

.c__sys .text {
	position: absolute;
	width: 100%;
	height: auto;
	/*font-weight: 500;
	font-size: 5vw;*/

}
.c__sys .text > span, .c__sys .text > p {

	float: left;
}
.c__sys .text > span { width: 50%;}
.c__sys .text > p { position: absolute; left: 50%; margin: 0;}

.c__sys .sys {

	margin-top: 5%;

}

.bottom {
	position: absolute;
  	width: 100%;
	bottom: 0;
}

.xyzyzx > .bottom {
	position: absolute;
  	width: 100%;
	border-top: 1px solid #79f;
	bottom: 0;
}


.bottom .synopsis {
	position: absolute;
	width: 66.3333333333333%;
	height: 50%;

	}
.bottom .scope {
	padding-left: 66.3333333333333%;
}

.bottom .synopsis .overlay {
	width: 100%;
	overflow: hidden;
}
.bottom .synopsis .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: all 0.5s;
}
.bottom .synopsis .text {
	position: absolute;
	top: 50%;
	left: 10%;
	z-index: 1;

}

.bottom .scope {

	position: relative;
	height: 100%;
	overflow: hidden;

	}
.bottom .scope div {

}

.bottom .scope .block {
    display: block;
    width: 33.3333333333333%;

	}
.bottom .scope .block {
	float: left;

	}
.bottom .scope .block.strategies,
.scope .block.permalinks-1,
.scope .block.permalinks-2 {
	margin-top: 20px;

}

.bottom .scope .block ul {

    list-style: none;


}

.bottom .scope .block ul li a {

	text-decoration: none;
	color: #333;


}

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

}

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

}

@media only screen and (max-width: 767px) {
	.v__sys > .text {
		bottom: 15%;
		left: 0;
		width: 100%;
	}


	.v__sys > .giphy {
		width: 48%;

	}

	.v__sys > .giphy > .hello {
		width: 100%;
		left: 0;

	}

	.v__sys > .more {	
		left: 80%;
  		bottom: 80%;
	}

	.extras > div {
		float: none;
	}
	.extras > div:nth-child(1) {
		width: 100%; 
	}
	.extras > div:nth-child(2) {
		margin-left: 0;
		width: 100%; 
	}

	.xyzyzx { margin-bottom: 307px}

	.top > div, .bottom > div {
  		width: 100%;

	}
	
	.yepp {
		position: relative;		
		height: 16px;
		width: 32px;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 15px;
	
	}
  	.yepp {
		overflow:hidden;
    		display : block;
    		cursor : inherit;
  	}
	
  	.yepp::before {
		transform: translateY(5px)
	} 
	.yepp::after {
		transform: translateY(-5px)
	} 		

	.yepp::after, .yepp::before {	
		content : "";			
		position: absolute;
		left: 0;
		top: 50%;		
		width: 100%;
		height: 1px;
		background: #79f;
		transition: transform .3s;

	}
  	.open::before {
		transform: rotate(45deg);
  	}

	.open::after {
		transform: rotate(-45deg);
	}

	.eppy {

    		position: absolute;
   		width: 100%;		
		height: 100vh;
		overflow: hidden;
		z-index: -9999;

    	}
	.eppy {
		margin-top: 50px;
    		background: #f1f5ff;
    		display: none;

	}


	.page { /*position: absolute;*/ margin-left: 15px; }
	
	.page span {
		padding-left: 0;
	}
	.yepp {
		
		float: right;
	}

	.page {
		
		float: left;
	}

	.page, .pages {
		float: none; clear: both;
	}

	

	.pages ul {
		padding-left: 15px;
		
	}

	.pages ul li {

		float: none;

	}

	.pages ul li a {
    		padding-top: 10px;
    		padding-bottom: 10px;
	}
	.pages ul li a {

    		display: block;
    			
	}

	.s__sys {
		position: relative;
		height: 100%;
		overflow: hidden;
		display: block;
  	}


  	.s__sys .scope {
		position: relative;
		margin-left: -15px;
		margin-right: -15px;
		height: 100%;
		overflow: hidden;
		white-space: nowrap;

  	}

	.s__sys .overlay {
		margin-left: -15px;
		margin-right: -15px;

	}
   	.s__sys .synopsis {
     		position: relative;
		height: auto;
		margin-left: -15px;
		margin-right: -15px;
		width: 100%;

   	}
   	.s__sys .synopsis .text {
   		position: relative;
		bottom: auto;
     		padding: 15px;
     		width: 100%;
		white-space: normal;
     		left: 2vw;
  	 }
  	.s__sys .scope {
		position: relative;
		margin-left: -15px;
		margin-right: -15px;
		height: 100%;
		overflow: visible;
		white-space: normal;

  	}

  	.s__sys .scope .list, .s__sys .scope .type {
	 	height: auto;
	 	width: 100%;
	 	float: none;

  	}

  	.s__sys .scope .list.list, .s__sys .scope .type.list {
		padding-left: 0;

  	}

  	.s__sys .scope .list .block, .s__sys .scope .type .block {
    		float: left;;


  	}

  	.s__sys .scope .list .block .text, .s__sys .scope .type .block .text {
		position: absolute;
		white-space: normal;
		max-width:100%;
		padding: 15px;
		left: 2vw;
		z-index: 5

	}


  	.s__sys .scope .list .block.wide, .s__sys .scope .type .block.wide {
	  	margin-right: 0;
	  	margin-left: 0;
	  	width: 100%;
	  	height: 50vw;

  	}

	.s__sys .scope .list .block.sole, .s__sys .scope .type .block.sole {
	  	margin-right: 0;
	  	margin-left: 0;
	  	width: 100%;
	  	height: 50vw;

  	}
	.b__sys > div:nth-child(2) > .giphy {
		width: 100%;
		float:none;
	}
	.b__sys > div:nth-child(2) > .text > div:nth-child(1) {
    		position: relative;
    		width: 100%;

	}

	.middle > div > div:nth-child(3) {
		height: 100%;
	}

	.extra > div {
		width: 100%;	
		margin-left: 0;
	}
	.extra > figure {
		position: relative;
		margin: 0;
	}

	.extra > div > p {
		width: 100%;
	}

	.extra > figure > img {
		display: none;

	}
	
	.xzxz {	
		top: 60px;
		left: calc(100vw - 18px);
		transform: rotate(90deg);
		transform-origin: left top;
		height: initial;
		font-size: 18px;
		line-height: 1.5em;
		text-align: left;	
	}
	.p__sys {

		height: 100%;

	}

	.p__sys div { position: relative; }

	.p__sys div.giphy {  
    		left: 0;
    		top: auto;
		width: 100%;

	}

	.item-5 { margin-bottom: 15px;  }
	.item-5 .text {

		display: none;
	}


	.c__sys .text, .c__sys .sys {

		float: none;

	}

	.c__sys .text {
		position: relative;
		width: 100%;

	}


	.c__sys .sys {

		width: 100%;
		margin-left: 0;

	}


	.c__sys .text > span, .c__sys .text > p {

		float: none;
	}
	.c__sys .text > span { width: 100%;}
	.c__sys .text > p { left: 0;}

	
	.bottom .synopsis {
		position: relative;
		overflow: hidden;
		width: 100%;

		}
	.bottom .scope {
		position: relative;
		height: 100%;
		overflow: visible;
		white-space: normal;
	}
	.bottom .synopsis .text {
		position: relative;
		width: 100%;
		padding: 15px;


		}
	.bottom .synopsis .overlay {
		width: 100%;
	}
	.bottom .scope {

		padding-left: 0;

		}


	.bottom .scope .block {
	    display: block;
	    width: 100%;

	}
  	.bottom .scope .block {
		float: none;
		width: 100%;

	}

	.bottom .scope .block ul {

    		padding: 15px;

	}


}