@import'fonts.css';

body {
	font-family: 'Open Sans';
	background: white;
}
ul, li {
	display: block;
	margin: 0;
	padding: 0;
}
.section {
	color: #212121;
	text-align: center;
	padding-top: 120px;
	padding-bottom: 125px;
}
.title {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 20px;
}
.text {
	font-size: 15px;
	margin-bottom: 95px;
	color: #212121;
}

/*GitHub*/
.github {
	position: fixed;
	right: 0;
	top: 100px;
	z-index: 10000;
}
.github-link {
	display: block;
	padding: 7px 10px 5px 10px;
	background-color: #000;
	border-radius: 10px 0 0 10px;
	text-align: right;
	cursor: pointer;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.fa-github {
	font-size: 2.5rem;
	color: #fff;
}
.github-link:hover {
	padding-right: 40px;
}

/*To top*/
#to-top {
	z-index: 999;
	width: 60px;
	height: 50px;
	border: none;
	font-size: 50px;
	background: transparent;
	text-align: center;
	position: fixed;
	bottom: 20px;
	right: 20px;
	cursor: pointer;
	display: none;
	color: #00897b;
}
#to-top i {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}

/*Menu-bar*/
.menu-bar {
	background: white;
	color: #212121;
	padding: 20px 0;
}
.logo {
	font-size: 30px;
	font-weight: bold;
	color: #00897b;
}
.logo:hover {
	text-decoration: none;
	color: #00897b;
}
.menu-burger {
	display: none;
}
.menu__item {
	margin-left: 37px;
	cursor: pointer;
}
.menu__item a {
	font-family: 'Open Sans Semibold';
	font-size: 20px;
	color: #212121;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.menu__item a:hover {
	text-decoration: none;
	color: #00897b !important;
}
.fa-search {
	vertical-align: bottom;
}
.fa-search:hover {
	color: #00897b !important;
}

/*Header*/
.header {
	background-image: url(../img/header.png);
	background-size: cover;
	background-position: 0 100%;
}
.header > div {
	padding: 180px 0;
	text-align: center;
	color: white;
}
.header__title {
	font-size: 55px;
	margin-bottom: 20px;
}
.header__text {
	font-size: 20px;
	margin-bottom: 105px;
}
.button {
	padding: 15px 35px;
	margin: 0 10px;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	text-transform: uppercase;
}
.header__button {
	background: #00897b;
	border: 1px solid #00897b;
	color: white;
}
.header__button:hover {
	background: transparent;
	border: 1px solid white;
	color: white;
}

/*About*/
.about {
	background: white;
}
.title {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 20px;
}
.about-item__title {
	font-family: 'Open Sans Semibold';
	font-size: 20px;
	margin-top: 30px;
	margin-bottom: 20px;
}
.about-item__text {
	font-size: 15px;
	color: #212121;
}

/*Services*/
.services {
	background: #e4fdf9;
}
.services-card {
	background: white;
	padding: 50px 40px 40px;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	margin-bottom: 30px;
}
.services-card:hover {
	background: #00897b;
	color: white;
	box-shadow:         0px 5px 18px 0px rgba(50, 50, 50, 0.35);
}
.services-card:hover .icon,
.services-card:hover .services-card__text {
	-webkit-transition: 0.3s;
	transition: 0.3s;
	color: white;
}
.services-card:hover .services-card__button {
	border: 1px solid white;
	color: white;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.icon {
	font-size: 60px;
	color: #212121;
}
.services-card__title {
	font-family: 'Open Sans Semibold';
	font-size: 20px;
	margin-top: 30px;
	margin-bottom: 20px;
}
.services-card__text {
	font-size: 15px;
	color: #212121;
}
.services-card__button {
	border: 1px solid #212121;
	background: transparent;
	font-family: 'Open Sans Semibold';
	margin-top: 24px;
	color: #212121;
}

/*Portfolio*/
.portfolio {
	background: white;
}
.portfolio-menu .portfolio__button {
	margin-top: 0 !important;
}
.portfolio__button {
	background: #00897b;
	border: 1px solid #00897b;
	color: white;
	margin-top: 95px;
}
.portfolio__button:hover,
.focused {
	background: transparent; 
	border: 1px solid #00897b;
	color: #00897b;
}
.portfolio__list {
	padding-top: 95px;
}
.portfolio__item {
	margin-bottom: 30px;
}
.portfolio__item img {
	width: 100%;
}
div[filter]:hover img {
	-webkit-filter: brightness(20%);
	        filter: brightness(20%);
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.portfolio-item__text {
	display: none;
}
div[filter]:hover .portfolio-item__text{
	display: block;
	width: 100%;
	color: white;
	position: absolute;
	top: 130px;
	left: 0;
	z-index: 3;
	text-align: center;
}

/*Pricing*/
.pricing {
	background: #f0f1f1;
}
.pricing-card {
	background: white;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.pricing-card:hover {
	box-shadow:         0px 5px 18px 0px rgba(50, 50, 50, 0.35);
}
.pricing-card__title {
	background-image: url(../img/rectangle.png);
	padding-top: 10px;
	padding-bottom: 65px;
	background-size: cover;
	background-repeat: no-repeat;
	max-height: 211px;
	color: white;
	font-size: 50px;
}
.pricing-card__title span,
.pricing-card__title sup {
	font-size: 25px;
}
.pricing-card__title sub {
	font-size: 17px;
}
.pricing-card__list {
	font-size: 17px;
}
.pricing-card__item {
	width: 175px;
	margin: 0 auto;
	padding-top: 37px;
	padding-bottom: 10px;
	border-bottom: 1px solid #bfbfbf;
}
.pricing-card__button {
	text-transform: none;
	padding: auto;
	width: 180px;
	height: 60px;
	margin: 63px auto;
	color: black;
	border: 1px solid black;
	background: white;
}
.pricing-card__button:hover {
	text-transform: uppercase;
	color: white;
	border: 1px solid #00897b;
	background: #00897b;
}

/*Team*/
.multiple-items {
	display: -ms-grid;
	display: grid;
}
.team-member {
	max-width: 350px;
	width: 100%;
}
.team-member img {
	width: 100%;
}
.team-member h5 {
	font-family: 'Open Sans Semibold';
	margin-top: 30px;
}
.team-member p {
	font-size: 15px;
	margin-bottom: 30px;
}
.team-member__icons li{
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}
.team-member__icons li a:focus {
	outline: none;
}
.team-member__icons span {
	width: 70px;
}
.team-member__icons a i {
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.team-member__icons i:nth-child(1) {
	color: #f0f1f1;
}
.team-member__icons i:nth-child(2) {
	color: #00897b;
}
.team-member__icons a:hover i:nth-child(1) {
	color: #3949ab;
}
.team-member__icons a:hover i:nth-child(2) {
	color: white;
}
.dots-style {
	margin-top: 115px;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.dots-style button {
	background: #00897b;
	border: none;
	border-radius: 50%;
	font-size: 0;
	height: 15px;
	width: 15px;
	margin: 5px;
}
.dots-style button:focus {
	outline: none;
}
.dots-style li[class="slick-active"] button {
	background: #3949ab;
}

/*Blog*/
.blog {
	background: #e4fdf9;
}
.blog__item {
	text-align: left;
}
.left > div:first-child {
	-webkit-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
}
.left > div:last-child {
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
}
.right > div:first-child {
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
}
.right > div:last-child {
	-webkit-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
}
.blog__item img {
	width: 100%;
}
.blog__item a {
	font-family: 'Open Sans Semibold';
	font-size: 25px;
	display: block;
	margin-top: 60px;
	margin-bottom: 15px;
	color: #212121;
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.blog__item a:hover {
	text-decoration: none;
	color: #00897b;
}
.blog__item span {
	font-family: 'Open Sans Semibold';
	margin-right: 35px;
}
.blog__item p {
	margin-top: 15px;
	margin-bottom: 60px;
}
.blog__item .far {
	margin-right: 10px;
}
.blog__button {
	background: #00897b;
	border: 1px solid #00897b;
	color: white;
	margin-top: 125px;
}
.blog__button:hover,
.focused {
	background: transparent; 
	border: 1px solid #00897b;
	color: #00897b;
}

/*Contact*/
.footer {
	text-align: center;
	padding-top: 120px;
	padding-bottom: 100px;
	color: white;
	background-image: url(../img/contact.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.footer p {
	color: white;
}
.circle {
	background: #3949ab;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-align-items: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin: 0 auto 40px;
}
.fa-map-marker-alt,
.fa-phone-alt,
.fa-envelope {
	font-size: 50px;
	
}
.footer a {
	font-family: 'Open Sans Semibold';
	font-size: 20px;
	color: white;
	text-decoration: none;
	display: block;
}
.form {
	margin-top: 70px;
}
.form-group {
	/*width: 100%;*/
	margin-top: 10px;
	margin-bottom: 20px;
}
.form-control {
	padding: 30px;
	border-radius: 7px;
	resize: none;
}
.form__button {
	padding: 15px 83px;
	margin: 0;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	text-transform: uppercase;
	border: none;
	border-radius: 7px;
	background-color: white;
}
.form__button:hover {
	background-color: #d4d4d4;
}
.form__button:focus {
	outline: none;
}
.rules {
	padding: 20px 0;
	text-align: center;
	font-family: 'Open Sans Semibold';
}