/*
Theme Name: GMSP
Theme URI: https://gm-sp.com/
Author: Patryk Rozanski
Author URI: https://wordpress.org/
*/

/*Fonts*/

@font-face {
    font-family: 'CocoSharp Light';
    src: url('./fonts/CocoSharp-Light.woff2') format('woff2'),
        url('./fonts/CocoSharp-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CocoSharp Bold';
    src: url('./fonts/CocoSharp-Bold.woff2') format('woff2'),
        url('./fonts/CocoSharp-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CocoSharp Black';
    src: url('./fonts/CocoSharp-Extrabold.woff2') format('woff2'),
        url('./fonts/CocoSharp-Extrabold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



@font-face {
	font-family: 'gothic';
	src: url('./fonts/gothic.woff') format('woff');
}

@font-face {
	font-family: 'century-gothic-bold';
	src: url('./fonts/gothicb.ttf') format('woff');
}

@-webkit-keyframes pulse {
 0% {
	 -webkit-transform: translate(0, 0);
	 transform: translate(0, 0);
 }
 50% {
	 -webkit-transform: translate(0, 10px);
	 transform: translate(0, 10px);
 }
 100% {
	 -webkit-transform: translate(0, 0);
	 transform: translate(0, 0);
 }
}

@keyframes pulse {
 0% {
	 -webkit-transform: translate(0, 0);
	 transform: translate(0, 0);
 }
 50% {
	 -webkit-transform: translate(0, 10px);
	 transform: translate(0, 10px);
 }
 100% {
	 -webkit-transform: translate(0, 0);
	 transform: translate(0, 0);
 }
}


html,
body {
 padding:0;
 margin:0;
 font-family:gt america regular,Arial;
 color:#283e2c;
		 background-color:#fbf6ef;
	overflow-x: hidden;
}
main {
 position:relative
}

.post-template-default main {
  position: relative;
  padding: 300px 0px;
}

* {
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 outline:0;
 -webkit-tap-highlight-color:transparent;
 box-sizing:border-box
}
.clear:after {
 content:".";
 visibility:hidden;
 display:block;
 height:0;
 clear:both
}
input[type=text],
input[type=submit],
input[type=button],
input[type=email],
input[type=password] {
 -webkit-appearance:none;
 -moz-appearance:none;
 appearance:none;
 border-radius:0
}
input[type=text],
input[type=email],
input[type=password] {
 font-family:gt america bold
}
.container {
 margin:0 auto;
padding: 0 100px;
 position:relative;
 z-index:99;
 line-height:0
}

.width_1200 {
 max-width:1200px
}
.width_1140 {
 max-width:1140px
}

h1,
h2,
h3,
h4,
h5,
h6 {
 font-family:gt america bold,Arial;
 font-weight:400
}

	 h2 {
 line-height: normal;
font-size: 30pt;
 font-family: 'CocoSharp Bold';
	 margin-top:0px;
}

h3 {
 line-height: normal;
font-size: 25pt;
 font-family: 'CocoSharp Bold';
}

a {
 outline:none;
 text-decoration:none
}
a:focus,
a:hover {
 text-decoration:underline
}
hr {
margin: 100px 0;
 border:0;
 border-top:1px solid rgba(0,0,0,.1)
}
button {
 font-family:gt america bold;
 text-transform:uppercase;
 border:0;
 padding:5px 25px;
 font-size:12px;
 font-weight:400
}
button:focus,
button:hover {
 text-decoration:underline;
 cursor:pointer
}
[role=button],
a,
area,
button,
input:not([type=range]),
label,
select,
summary,
textarea {
 -ms-touch-action:manipulation;
 touch-action:manipulation
}
.m0 {
 margin:0!important
}
ul {
 padding:0;
 margin:0;
 list-style:none
}
ul li {
 padding:0;
 margin:0;
 list-style:none
}
p {
 margin-top: 0;
 margin-bottom: 20px;
 line-height: 22pt;
 font-family: 'CocoSharp Light';
 font-size: 15pt;
}
 p strong {
		font-family: 'CocoSharp Bold';
	 }

		 p strong.active {
	 color: #ec5b9f;
	 }


 header {
 position: absolute;
 top: 100px;
 width: 100%;
}

section.top {
 height: 100vh;
 }

	 .area .cont {
	 max-height: 0px;
	 overflow: hidden;
	 -webkit-transition: .2s ease;
	 transition: .2s ease;
}

.area.active .cont {
	 max-height: 2000px;
	 overflow: hidden;
}

			 .area h3 {position:relative;}

	 .area.active h3 .icon {
 display: none;
}

 .left {
 float: left;
}

 .right {
 float: right;
}

	 section.top {position:relative;}

canvas {
 position: absolute;
 top: 0;
 left: 0;
 /* all four are needed to support the most browsers */
 image-rendering: -moz-crisp-edges;
 image-rendering: -webkit-crisp-edges;
 image-rendering: pixelated;
 image-rendering: crisp-edges;
	 pointer-events: none;
}

#myCanvas2 {
 top: 10px;
 left: 50%;
 margin-left: -150px;
 border-radius: 50%;
}

.content .column {
 display: inline-block;
 position: relative;
 width: 100%;
}

.content .column .left {
 width: 50%;
 padding-right: 25px;
}

.content .column .right {
 width: 50%;
 padding-left: 25px;
}

.middle {
 position: absolute;
 z-index: 1;
 width: 100%;
 transform: translate(0%,-50%);
 top: 50%;
 left: 0px;
	 padding: 0px 100px;
}

	 svg.arrow_down {
 width: 35px !important;
 position: absolute !important;
 bottom: 22px;
 left: 50%;
 -webkit-animation: pulse 2s infinite;
 animation: pulse 2s infinite;
 opacity: 1;
 z-index: 1;
 margin: 0px 0px 0px -14px !important;
 height: 35px !important;
	 transition: transform 400ms ease-out;

}

	 .img3 {
		 background-image:url('./images/GMSP_img3.png');
		 background-repeat: no-repeat;
			 background-size: cover;
			 background-position: center;
	 position: relative;
	 margin: 75px 0px;
	 }

	 .pink {
					 padding: 75px 0px;
	 background-color: #ec5b9f;
	 color:#fff;
	 }

.green {
  padding: 75px 0px;
  background-color: #283e2c;
  color: #fff;
}

.green {
  color: #fff;
}

	 .dropdown {
			 margin: 75px 0px;
	 }

#myCanvas3 {
 z-index: 1;
 right: 0px;
 left: auto;
 top: 50%;
 transform: translate(0%,-50%);
 mix-blend-mode: multiply;
}

	 #myCanvas4 {
 left: auto;
 right: 0px;
 z-index: 99999;
 mix-blend-mode: multiply;
}

	 .members {
 display: inline-block;
	 margin:0px -15px;
}

	 .member_wrap {
 float: left;
 width: calc(100%/8);
	 padding: 0px 15px;
}

.member {
background-color:#283e2c;
	 border-radius: 50%;
 overflow: hidden;
-webkit-transition: all .25s ease;
 transition: all .25s ease;
}

.member:hover {
	 background-color:#ec5b9f;
	 cursor: pointer;
	 }

.member img {
 width: 100%;
	 opacity: 0.5;
 pointer-events: none;

}

	 .name {
margin-top: 75px;
}

	 .name p {
 margin-bottom: 5px;
}

	 footer {
	 background-color:#283e2c;
	 padding:75px 0px;
	 text-align:center;
	 }

	 .people {
			 padding:75px 0px;
	 }

	 .imgs {
	 position:relative;
	 right:-30px;
	 opacity:0;
	 -webkit-transition: all .5s ease;
 transition: all .5s ease;
	 }

	 .imgs.active {
	 right:0px;
	 opacity:1;
	 }

	 .icon {
	 position: absolute;
	 width: 24px;
	 height: 24px;
	 display: block;
	 right: 40px;
	 top: 50%;
	 margin-top: -12px;
}

.icon::before {
	 content: '';
	 background: #283e2c;
	 position: absolute;
	 top: 0px;
	 left: 50%;
	 margin-left: -3px;
	 width: 6px;
	 height: 24px;
 -webkit-transition: .2s ease;
transition: .2s ease;
}

.icon::after {
	 content: '';
	 background: #283e2c;
	 position: absolute;
	 top: 50%;
	 left: 0px;
	 margin-top: -3px;
	 width: 24px;
	 height: 6px;
}


	 .dropdown {position:relative}

	 .unions {width:65%; display:block; margin:0px auto}
	 
	 .wpcf7-form input
{
  border: 1px solid #fbf6ef;
  background-color: transparent;
  line-height: 22pt;
  font-family: 'CocoSharp Light';
  font-size: 15pt;
  color: #fbf6ef;
  width: 100%;
  padding: 5px 10px;
}
.wpcf7-textarea
{
  border: 1px solid #fbf6ef;
  background-color: transparent;
  line-height: 22pt;
  font-family: 'CocoSharp Light';
  font-size: 15pt;
  color: #fbf6ef;
  width: 100%;
height: 232px;
  margin-bottom: 10px;
}

.wpcf7-form input.wpcf7-submit
{
  font-family: 'CocoSharp Bold';
  color: #fbf6ef;
  padding: 9px 0px;
}

.wpcf7-form input.wpcf7-submit:hover {
      background-color: #fbf6ef;
      color: #283e2c;
}

a.button {
  border: 1px solid #fbf6ef;
  background-color: transparent;
  line-height: 22pt;
  font-family: 'CocoSharp Bold';
  font-size: 15pt;
  color: #fbf6ef;
  width: auto;
  padding: 5px 10px;
	display:inline-block;
	text-decoration:none;
}

a.button:hover {
  background-color: #fbf6ef;
  color: #283e2c;
}

/*News*/

 .gnews {
    line-height: normal;
    margin: 0px -15px 0px -15px;
    overflow: hidden;
}

.gnews .gnews_wrap {
    width: 25%;
    padding: 0px 15px;
    float: left;
}

.gnews .gnews_img {
    height: 240px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0px auto;
}

.gnews .gnews_title {
    padding: 10px 0px 0px 0px;
    font-size: 22px;
    line-height: 30px;
    font-family: 'CocoSharp Bold';
  color: #fff;
}

.image_top {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  opacity: 60%;
}

.gnews .gnews_date {
    display: block;
    font-family: 'CocoSharp Bold';
    font-size: 13px;
  text-transform: uppercase;
  color: #fff;
}
     .gnews_article {
  margin-bottom: 30px;
}
    
.gnews_widget h2 {
    position:relative;
    margin: 0px 0px 30px 0px;
    text-transform: initial;
    }
  

footer .content .column .left
{
  padding-right: 5px;
}

.wpcf7-form
{
  text-align: left;
}

.wpcf7-form-control-wrap
{
  display: block;
  margin-top: 5px;
}

footer h3
{
  color: #fbf6ef;
  text-align: left;
}

footer a {
  font-family: 'CocoSharp Bold';
  color: #fbf6ef;
  display: block;
  margin-top: 18px;
}

label
{
  font-family: 'CocoSharp Bold';
  color: #fbf6ef;
}

.wpcf7 form.sent .wpcf7-response-output
{
  border-color: #46b450;
  border: none;
  color: #46b450;
  margin: 0px;
  text-align: center;
  line-height: normal;
  position: relative;
  top: -30px;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output
{
    border-color: #ffb900;
  border: none;
  color: #ffb900;
  margin: 0px;
  text-align: center;
  line-height: normal;
  position: relative;
  top: -30px;
}

.message {
  padding: 50px 0px;
  background: #283e2c;
  color: #fbf6ef;
  overflow: auto;
  z-index: 9999;
  position: relative;
	margin-bottom: 100px;
}

.message .left {
  width: 80%;
}


		@media only screen and (min-width:1px) and (max-width:950px){

	 header {
 top: 50px;
	 }

	 .left {
 float: none;
}
.right {
 float: none;
}

	 .container {
padding: 0 30px;
	 }

	 .content .column .left {
 width: 100%;
 padding-right: 0px;
}

.content .column .right {
 width: 100%;
 padding-left: 0px;
}

	 .middle {
 padding: 0px 30px;
}

	 header .right svg {
 width: 100% !important;
}

	 header .right svg {
 width: 100% !important;
	 margin-top:30px;
}

	 }

				@media only screen and (min-width:1px) and (max-width:750px){


					.gnews .gnews_wrap {
    width: 50%;
}
					
		.unions {width:100%;}
	 h2 {
 line-height: normal;
 font-size: 20pt;
	 }

	 h3 {
 line-height: normal;
 font-size: 16pt;
	 }

	 p {
 line-height: 18pt;
 font-size: 12pt;
}

	 .imgs {
		 right: 0px;
 opacity: 1;
 margin: 0px !important;
 width: 100% !important;
}
	 .members {
 margin: 0px -10px;
}
	 .member_wrap {
 width: calc(100%/4);
 padding: 0px 10px;
 margin-bottom: 20px;
}

	 .name {
 margin-top: 30px;
}
					a.button {
    line-height: 18pt;
    font-size: 12pt;
  }

	 }