@import url('https://fonts.googleapis.com/css2?family=Muli:ital@1&display=swap');
body{margin:0px}
h1,h3,h4,p,input,label{font-family:Muli,sans-serif}
h4{font-size:1.5em}

#header .container {display:flex; align-items:center; padding:0 10%;}
#logoimage{padding:10px 0;}
.partner {margin-left:auto;}
.partner > div {margin-top:10px;}
.partner > div img {height:75px;}
.partner h1 {margin:0px;}

#main-banner {position:relative;}
#main-banner .object-fit {object-fit:cover;height:600px;width:100%;}
.mob-bnr{display:none;}
#main-banner .bnr-content-area {position:absolute; top:0px; left:0px; right:0px; bottom:0px; padding-left:10%;padding-right:10%;display:grid;grid-template-columns:50% 50%;align-items: center;}
#introText h1{font-size:3em;color:white}
#introText p{font-size:2em;color:white;line-height:1.5em;padding-right:20px}
#form{background-color:rgba(26,41,62,0.8); height:100%;}

#topBanner{background-image:url('../images/cityscape.webp');background-size:cover;padding-left:10%;padding-right:10%;height:600px;display:grid;grid-template-columns:50% 50%}
label{color:white;}
input{width:100%;min-width:300px;padding:10px;margin:10px;margin-left:0px;border:0px;border-radius:3px;-webkit-appearance: none;}

form {height:100%}
fieldset{border:0px;margin-left:auto;margin-right:auto;width:70%}
input[type=submit],input[type=button]{background-color:#5db3ff;border:0px;border-radius: 3px;font-size:1.5em;font-weight:800}
footer{background-color:black}
a{text-decoration:none;color:rgb(178, 178, 220)}
#features{display:grid;grid-template-columns:25% 25% 25% 25%}
.afeature{margin:15px; padding:25px;border:1px solid gray;border-radius:7px;box-shadow: 2px 2px 8px 0 rgba(0,0,0,0.3);}
h3 {font-weight:normal;font-size:1.8em;line-height:0.2em;margin-bottom:3px}
#partner p, #bingpartner p {font-size:12px}
#bingpartner {text-align: right; padding-right: 15px;}
i {margin-right:4px}
#proof{padding:10px;background-color:#ccc;grid-template-columns:5% 30% 60% 5%;display:none;}
#proofd2{padding:5% 0; text-align:center;}
.callout{font-size:1.3em}
.pricebox{background-color:#e89e15;padding:2px;border:1px solid white}

#reviews{background-image:url('../images/op-girlphone-183kb.webp'); background-attachment:fixed; background-repeat:no-repeat; background-position:center top; background-size:cover; margin:auto; width:100%; position:relative;}
#reviewsboxes{padding:20px; display:grid;grid-template-columns:30% 30% 30%; justify-content: center; grid-gap: 50px;}
.areview{background:rgba(230,195,129,0.65); border:1px solid #ccc;  width:auto; height:auto; padding:20px}
/*.areview p {font-size:1.5em}*/
#reviewshead{background:rgba(255,255,255,0.5);display:grid;grid-template-columns:20% 80%}
#reviewshead div {padding:20px}
#excellent{font-size:31px;line-height:87px}
#takemetop{display:none;}

.quote-button {background-color: #5db3ff; display:none; border: 0; border-radius: 3px; font-size: 1em; font-weight: 800; cursor: pointer; width: 200px; margin:auto; color: #000; text-align:center; padding:10px;}

.Overlay {
    background: rgba(0,0,0,0.5) url(../images/loading.gif) center center no-repeat;
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 9999;
}

.loading {
    min-height: 200px;
    background: url(../images/loading.gif) center center no-repeat;
}

.bootstrap-dialog .loading {
    min-height: 200px;
    background: url(../images/loading.gif) center center no-repeat;
}


.bootstrap-dialog .bootstrap-dialog-message{
	text-align: left;
}

@media only screen and (max-width:1024px) 
{
	header img {max-width: 70%; height:auto;}
    input{min-width:200px;}
    #proof{padding:10px;background-color:#ccc;display:none;grid-template-columns:100%}
    #proofd2{padding-top:10px;padding-left:0; margin:auto;}
	#reviewshead {grid-template-columns: 25% 75%;}
	.afeature {padding: 15px;}
	#reviewsboxes{grid-gap: 25px;}
}
@media only screen and (max-width:991px) 
{
	
	#logoimage {width: 48%; height: auto;}
	
	#topBanner {height: auto !important;}
	#reviewshead {grid-template-columns: 30% 70%;}
	#introText {padding-top: 0%;}
	.areview {width: auto; height: auto;}
	#features {grid-template-columns: 50% 50%;}
}
@media only screen and (max-width:767px) 
{
	#header .container {display:block; text-align:center; padding:0 5%;}
	#logoimage {width: auto; max-width:100%;}
	.partner {margin:0px;}
	
	#main-banner {background:#000;}
	#main-banner .bnr-content-area {grid-template-columns:100%; position:static; padding-left:5%; padding-right:5%;}
	#introText {position:absolute; top:53%;}
	#main-banner .object-fit {display:none;}
	.mob-bnr {display:block; width:100%; height:auto;}
	
	#introText {height: auto !important;}
	#topBanner{background-image:url('../images/cityscape_m.webp');grid-template-columns:100%}
	#bingpartner {text-align: left; padding-left: 43px;}
	#partner {position: absolute; right: 80px; top: 58px;}
	#introText{height:600px;padding-left:10px;padding-right:10px}
	#topBanner{padding:0px;height:1200px}
	#features{display:grid;grid-template-columns:100%}
	#reviews{background-image:url('../images/op-girlphone-mob.webp');}
	#reviewshead{grid-template-columns:100%}
	#reviewshead div {padding:0px;padding-left:20px;padding-bottom: 20px;}
	#reviewshead div span {clear:both;display:block}
	#reviewsboxes{grid-template-columns:100%;}
	.areview{height:auto;width:auto; padding:20px; text-align:center}
	#excellent{line-height:35px}
	#takemetop {display:block;margin-left:auto;margin-right:auto;padding-bottom:20px;width:200px}
	#takemetopbutton {background-color:#5db3ff;border:0px;border-radius: 3px;font-size:1.5em;font-weight:800;cursor:pointer;width:200px;}
	
	#reviews {background-position: 75% 0; background-attachment: unset;}
	.quote-button {display:block;}
}
@media only screen and (max-width:579px)
{ 
	#partner {top: 50px;}
	#introText {top:37%;}
}

@media only screen and (max-width:479px)
{
	#introText {top:29%;}
	
	#bingpartner {padding-left: 4px;}
	#partner {right: 30px; top: 46px;}
}
@media only screen and (max-width:399px){
	#introText {top:26%;}
}
@media only screen and (max-width:379px){
	#introText {top:20%;}
}

@media only screen and (max-width:359px)
{
	#introText {top:0%;}
	.partner > div img {height: 55px;}
	#bingpartner {width: 64%;}
	#partner {top: 36px;}
}