/*
 Theme Name:   SaaSpot Child
 Theme URI:    http://themeforest.net/user/VictorThemes
 Description:  SaaSpot Child Theme
 Author:       VictorThemes
 Author URI:   http://themeforest.net/user/VictorThemes/portfolio
 Template:     saaspot
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         one-column, two-columns, left-sidebar, right-sidebar, custom-menu, featured-images, post-formats, theme-options, translation-ready
 Text Domain:  saaspot-child
*/

/* Write Custom CSS */

.trysec{
	width:100%;
	background-color:#fff;
	margin-bottom:50px;
	display:flex;
}

input#ip {
    width: 60%;
    height: 40px;
    background-color: #fff;
    border: 2px solid #ccc;
    padding: 5px;
}

input#email {
    width: 60%;
    height: 40px;
    background-color: #fff;
    border: 2px solid #ccc;
    padding: 5px;
}


button.ipbtn {
    height: 40px;
    width: 100px;
    background-color: #4776e6;
    border: none;
    color: #fff;
    font-weight: 700;
    margin-left: 10px;
}

.messagearea{
	width:100%;
	height:60px;
	display:block;
	color:red;
	padding:10px;
}

.reshead{
	width:100%;
	display:block;
}
.ressuba{
	width: 45%;
    float: left;
	font-size:17px;
	color:#fff;
	padding:10px;
	background-color: #4776e6;
	text-align:center;
}

.ressubb{
	width: 47%;
    float: right;
	font-size:17px;
	color:#fff;
	padding:10px;
	text-align:center;
	background-color: #4776e6;
}

.datafetch {
    width: 47%;
    height: auto;
    border: 2px solid #000;
    padding: 20px;
    float: right;
}

.iptype {
    width: 45%;
    float: left;
	padding:10px;
    border: 2px solid #000;
    height: auto;
}

.iptype ul li {
    list-style-type: none;
}

.iptype .collection .collection-item {
    background-color: #fff;
    line-height: 1.5rem;
    padding: 10px 20px;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
}

.iptype .retrna {
    color: #fff;
    background-color: #05863a;
    float: right;
    padding: 2px 8px;
    text-transform: uppercase;
}

.iptype .retrnb {
    color: #fff;
    background-color: #d82304;
    float: right;
    padding: 2px 8px;
    text-transform: uppercase;
}

@media (max-width: 550px) {
	.ressuba{
		width:100%;
	}
	.ressubb{
		width:100%;
	}
	.datafetch {
		width:100%;
	}
	.iptype {
		width:100%;
	}
	input#ip {
		width:90%;
	}
	input#email {
		width:90%;
	}
}


.myplancontainer{	
		padding:100px;
		height: auto;
	}

	.myplanmain{
		width: 100%;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

	.cardplan{
		width: 30%;
		height: auto;
		border: 1px solid #5AACCF;
		padding-top: 20px;
		margin: 2%;
	}

	.planhead{
		font-size: 2.5rem;
		color: #5AACCF;
		font-family: "Muli", Arial, sans-serif;
    	font-style: normal;
		font-weight: 600;
		text-align: center;
	}

	.plansub{
		font-size: 14px;
		font-family: "Noto Sans", Arial, sans-serif;
		font-weight: 400;
    	font-style: normal;
		font-weight: bold;
		text-align: center;
	}

	.planperiod{
		font-size: 1rem;
		color: #5AACCF;
		font-family: "Muli", Arial, sans-serif;
    	font-style: normal;
		font-weight: 600;
		text-align: center;
		padding: 10px 0;
		border-bottom: 2px solid #5AACCF;
	}

	.planspec{
		font-size: 15px;
		text-align: center;
		font-weight: 400;
    	padding: 14px;
	}

	.planbtn{
		width:auto;
		height: auto;
		font-size: 15px;
		color: #fff;
		background-color: #5AACCF;
		text-align: center;
		padding: 15px;
	}


@media(max-width:991px){
    .myplancontainer {
        padding:100px 50px
    }
}

@media(max-width:767px){
    .myplancontainer {
        padding:30px 20px
    }
    .myplanmain{
        flex-direction:column;
    }
    .cardplan{
        width:100%;
    }
}

	@media(max-width: 500px){

		.myplancontainer{
		padding:10px;
	}

	.cardplan{
		width: 100%;
	}

	}