/*
Theme Name: Platypus
Theme URI: https://ispbilling.com
Author: Tucows Inc.
Author URI: https://tucows.com
Description: A child theme of Pindol for ispbilling.com 
Template: pindol
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: one-column, two-columns, left-sidebar, right-sidebar, fixed-width, custom-background, custom-header, custom-menu, editor-style, featured-image-header, featured-images, post-formats, theme-options, translation-ready
Version: 1.0
*/

@import url("../pindol/style.css");


@font-face {
  font-family: "WavehausBold";
  src: url('/wp-content/themes/platypus/fonts/Wavehaus-128Bold.eot');
  src: url('/wp-content/themes/platypus/fonts/Wavehaus-128Bold.eot') format('embedded-opentype'),
       url('/wp-content/themes/platypus/fonts/wavehaus-128bold-webfont.woff2') format('woff2'),
       url('/wp-content/themes/platypus/fonts/wavehaus-128bold-webfont.woff') format('woff'),
       url('/wp-content/themes/platypus/fonts/Wavehaus-128Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}



.banner {
	background: #532F63 url("/wp-content/themes/platypus/images/Wavelo_icon.png") no-repeat;
	background-size: 95%;
    background-position: 85px -125px;
	padding: 20px 34px;
	color: #FFF;
	text-align: center;
}

.banner h3,
.banner p,
.banner button {
	font-family: "WavehausBold", Raleway, Arial, Tahoma, sans-serif;
}

.banner h3 {
	color: #FFF;
	font-size: 27px;
	line-height: 27px;
	font-weight: 700;
}

.banner p {
	font-size: 16px;
	line-height: 16px;
	font-weight: 700;
}

.banner .button {
	background-color: #FFF;
    border: none;
    color: #532F63;
	box-shadow: none;
	Padding: 8px 12px;
	cursor: pointer;
	text-transform: initial;
}

.banner .button:hover {
	background-color: #FFF;
    color: #532F63;
}

.banner .wavelo-logo {
	width: 118px;
}

.call-to-action-container {
	display: flex;
    flex-direction: column;
    align-items: center;
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	.banner {
		background-size: 80%;
    	background-position: 150px -170px;
		display: flex;
		align-items: center;
		text-align: left;
	}
	
	.banner h3 {
		color: #FFF;
		font-size: 25px;
		line-height: 25px;
	}
	
	.banner p {
		font-size: 18px;
		line-height: 18px;
	}
	
	.banner .wavelo-logo {
		width: 122px;
	}
	
	.description-container {
    	margin-left: 65px;
		margin-right: 50px;
		width: 395px;
	}

}

@media only screen and (min-width: 960px) {
	
	.banner {
		display: flex;
		align-items: center;
		text-align: left;
		background-size: 60%;
    	background-position: 375px -160px;
	}
	
	.banner .button {
		margin: 0;
		Padding: 12px 16px;
	}
	
	.banner .wavelo-logo {
		width: 213px;
	}
	
	.button-container {
    	margin-right: 60px;
	}
	
	.call-to-action-container {
    	flex-direction: row;
	}
	
	.description-container {
    	margin-left: 75px;
    	width: 280px;
    	margin-right: 60px;
	}
	
}