/*
font-family: 'Open Sans', sans-serif; 
400 Normal - 600 Semibold - 700 bold 

ecard landing page styles

*/


html {overflow-x: hidden;}
body {font-family: 'Open Sans', sans-serif; font-size: 0.9em;  line-height: 1.4em;  background-color: #ffffff; color:#36383c}
p { line-height:1.3em; margin-bottom:15px }

h1, h2, h3, h4 { font-family: 'Open Sans', sans-serif; }

::selection {background: #768ea5; color:#fff}
::-moz-selection {background: #768ea5; color:#fff}

.clearfix {  }

/* Typography */
a { color: #36383c; font-weight: 500;}
a:hover { text-decoration: none; color: #61aa11;}

/* Buttons */
.btn {border: none; cursor: pointer; padding: 13px 22px; display: inline-block; letter-spacing:0.35pt; text-align:center;
outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; border-radius:7px;}
.btn:active { border:none;}


#header { height: 120px; width: 100%; position:fixed; z-index:1000; background-color:#000; box-shadow:none; border-bottom:4px solid #ff9000; overflow:hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }

#header #logo { float:left;	overflow:hidden; background:url(../images/sonic-logo-ecards.png) left center no-repeat; width:300px; height:100px; display:block}

#logo h1 {
	font-family: 'Roboto', sans-serif;
	font-size:0.8em;
	text-decoration:none;
	}
	
#logo h1 a  {
	text-decoration:none;
	margin:0;
	display:block;
	color:#8d8d8e;
	padding:25px 0 0 73px;
	}	

#logo h1 span {
	letter-spacing:0.05em;
	display:block}


.intro {margin-top:150px }

.notice { 
	background:url(../images/notice.png) 0 10px no-repeat;
	width: 560px; height:349px;
	display:block;
	padding:64px 90px 0 96px;
	font-size:0.8em;
	line-height:1.2em;
	color:#fff; 
	}

.notice p { width:370px; color:#fff !important; text-align:center; padding-bottom:0; line-height:1.3em !important }
.notice p span {color:#ff9000; font-size:1.3em; font-weight:600; line-height:1.4em}
.notice p .img-left { float:left; margin-right:10px; margin-top:-4px}
.notice p .img-left1 { float:left; margin-right:30px; margin-left:62px; margin-top:-4px}

/* page background graphics */
.ecardbg-left { background:url(../images/ecardbg-left.jpg) top left no-repeat; margin-top:120px } 
.ecardbg-right { background:url(../images/ecardbg-right.jpg) top right no-repeat;  margin-top:120px  }

.intro-bg { margin-top:-120px; /*background:url(../images/bg-image.jpg) top left no-repeat; background-size:100% auto !important*/}

.intro h3 { font-family: 'Open Sans', sans-serif; font-size:2.8em; line-height:1.3em; font-weight:600; margin:0 0 10px 0; }
.intro p { font-size:1.2em; line-height:1.3em; color:#606672}
.intro h4 { font-family: 'Open Sans', sans-serif; font-size:1.4em; line-height:1.3em; font-weight:600; margin:0 0 25px 0; }
.heading h1 { font-family: 'Open Sans', sans-serif; font-size:2.1em; font-weight:600; text-transform:uppercase; padding:35px 0 0 0; color:#fff; float:right}
.intro2 h3 { font-family: 'Open Sans', sans-serif; font-size:1.9em; line-height:1.3em; font-weight:600; margin:0 0 20px 0; text-align:left }


.mleft0 { padding-left:0}
.form { background-color:#ff9000; min-height:400px; padding:30px 25px 20px 25px; border-radius:10px;}
.form input { padding:8px; border:1px solid #889494; margin-bottom:8px; width:93%; border-radius:5px}
.form textarea { padding:8px; border:1px solid #889494; margin-bottom:8px; width:93%; border-radius:5px}
.form span { font-size:1.8em; font-weight:600; color:#010204; text-transform:uppercase}
.form p 	{ font-size:1.1em; font-weight:600; padding:8px 0 5px 0; margin-bottom:10px; color:#010204}
.form .enq-btn {font-size:1.2em; font-weight:600; color:#010204; border:1px solid #010204 }
#enquiry .star { display: inline; font-size:1.2em }
	
.inclusions { text-align:left}
.inclusion1 p { font-size:1.2em; line-height:1.2em; font-weight:600; text-align:center !important; padding-top:90px; color: #36383c}
.icon1 { background:url(../images/icon1.png) 50% 0 no-repeat !important; }
.icon2 { background:url(../images/icon2.png) 50% 0 no-repeat !important; }	
.icon3 { background:url(../images/icon3.png) 50% 0 no-repeat !important; }
.icon4 { background:url(../images/icon4.png) 50% 0 no-repeat !important; }
.icon5 { background:url(../images/icon5.png) 50% 0 no-repeat !important; }
.icon6 { background:url(../images/icon6.png) 50% 0 no-repeat !important; }
.icon7 { background:url(../images/icon7.png) 50% 0 no-repeat !important; }
.icon8 { background:url(../images/icon8.png) 50% 0 no-repeat !important; }	

.space { width:30px;}
	
.line3 { margin:0 0 20px 0; border-bottom:1px dotted #707070}	

.ecards { margin:0 auto; text-align:center}
.ecards ul { margin:0; padding:0; margin-bottom:35px}
.ecards ul li { margin:0 20px 30px 20px; padding:0; list-style:none; display:inline-block; width:300px; vertical-align:top; text-align:center}


.ecards ul ul {  margin:0; padding:0}
.ecards ul ul li { margin:0; padding:0 0 0 0; list-style:disc !important; width:306px; vertical-align:top;}

.ecards ul li p { margin:10px 0 0 0; padding:0; text-align:center !important}
.ecards ul li p strong {text-align:center !important }

.ecard-subheading {
	text-align:center;
	font-size:2em;
	font-weight:600;
	color:#fff;
	padding:12px 10px;
	margin-bottom:12px;
	text-transform:uppercase;
	border-bottom:1px solid #010204;
	background-color:#010204 
	}
	
.ecards p { text-align:center; padding:10px 0 20px 0}	

.folio-heading {
	font-size:1em;
	font-weight:600;
	}
	
	
.ecards ul li a img { padding-bottom:0}
.ecards ul li a { 
	text-decoration:none;
	color:#ff9000;
	width:302px;
	height:154px;
	display:block;
	border:3px solid #fff;
	margin-bottom:8px;
	transition: top 0.3s ease-in-out;  overflow:hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;

	}


.ecards ul li a:hover {
	text-decoration:none;
	color:#090a12;
	border:3px solid #ff9000
	}


.subnav  { text-align:left;}
.subnav p { font-size:1.4em; font-weight:600}
.subnav ul { padding:0; width:100%; /*margin:0 auto */}
.subnav ul li {margin:0; padding:0; list-style:none; display:inline-block; text-align:center; font-weight:600;}
.subnav ul li a { display:inline-block; margin:0 70px 0 0; background-color:#ff9000;  }
.subnav ul li a.btn { font-size:1.6em; padding:15px 22px}
.subnav ul li a.btn:hover { background-color:#bfc0c0; }


.button2 { width:100%;  margin:0 auto; text-align:center !important; clear:both}

.btn2 {border: none; cursor: pointer; letter-spacing:0.35pt; text-align:center; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; border-radius:7px; background-color:#ff9000; font-size:1.6em; padding:20px 22px; width:75%; margin:0 auto; margin-bottom:30px}
.btn2:hover { border:none; background-color:#000; color:#fff }

.btn3 {border: none; cursor: pointer; letter-spacing:0.35pt; text-align:center; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; border-radius:7px; background-color:#cccccc; font-size:1.6em; padding:20px 22px; width:75%; margin:0 auto; margin-bottom:30px; display:block}
.btn3:hover { border:none; background-color:#000; color:#fff }




ol { margin-left:15px; margin-right:20px}

ol li { list-style-type: decimal; margin-bottom:5px; color:#4b515d}







/* Footer */
.footer { padding-top:25px; border-top:10px solid #bfc0c0; text-align:center }



.footerlinks p { text-align:center; padding:0 15px; color: #a5a5a6; font-size: 0.9em; line-height:1.3em}
.footerlinks p a { text-decoration:none; color: #a5a5a6;}
.footerlinks p a:hover { text-decoration:none;}




/* Back to top button */
#back-top { position: fixed; bottom: 30px; right: 15px; background: #3e4148; border-radius: 4px; 
border-bottom: none; }
#back-top a { color: #ffffff; padding: 5px 13px; line-height: 30px;}
#back-top:active { border-bottom: none;}


.skype { text-align:right; color:#fff; padding-top:16px}

.skypenum { font-size:1.6em; margin-top:7px}

.skypecall { margin-top:-8px}



/* Responsive styles */


/* Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {


} /* end Large devices (large desktops, 1200px and up) */



/* Large devices (large desktops, max 1400px ) */

@media (min-width: 1201px) and (max-width: 1400px) {


.ecardbg-left { background-size:351px 656px !important; } 
.ecardbg-right { background-size:351px 656px  !important  }
.intro { background-color: rgba(255, 255, 255, 0.6); padding-top:15px; margin-top:140px}

} /* end Large devices (large desktops, max 1400px ) */




/* Medium devices (desktops, 992px and up) incl IPAD PRO */

@media (min-width: 992px) and (max-width: 1200px) {
	
.ecardbg-left { background-size:234px 437px !important; } 
.ecardbg-right { background-size:234px 437px !important  }
.intro { background-color: rgba(255, 255, 255, 0.6); padding-top:15px; margin-top:140px}

.intro h3 { font-size:2.3em !important;  }
.heading h1 { font-size:1.8em; }

}



/* Small devices (tablets, 768px and up) *****************************************************************/

@media (min-width: 768px) and (max-width: 992px) { 

.ecardbg-left { background-size:234px 437px !important; } 
.ecardbg-right { background-size:234px 437px !important  }
.intro { background-color: rgba(255, 255, 255, 0.6); padding-top:15px; margin-top:130px}


}



/* Extra small devices (Phones) incl IPAD VERTICAL ****************************************************************/

/* Max Width 768px */

@media (max-width: 768px) {
	
.ecardbg-left { background-size:234px 437px !important; } 
.ecardbg-right { background-size:234px 437px !important  }
.intro { background-color: rgba(255, 255, 255, 0.6); padding-top:15px; margin-top:130px}

.intro h3 { font-size:2.1em !important;  }
.heading h1 {  display:none}

}





/* Small devices (iphone horiz ) *************************************************************/

@media (min-width: 321px) and (max-width: 767px) {

.ecardbg-left { background-size:117px 219px !important; } 
.ecardbg-right { background-size:117px 219px !important  }
.intro { background-color: rgba(255, 255, 255, 0.6); padding-top:15px; margin-top:120px}

.icon1,
.icon2,
.icon3,
.icon4,
.icon5,
.icon6,
.icon7,
.icon8 {  width: 50% !important; float: left; min-height:200px}


.intro h3 { font-size:2.1em !important;  }
.heading h1 {  display:none}


}




/* Small devices (iphone 4 horiz ) ************************************************************************************/

@media (min-width: 321px) and (max-width: 485px)  {
	
}





/* Samsung Galaxy S7 and S8 */
@media (min-width: 359px) and (max-width: 370px)  { 


}


/* Wide mobiles incl iphone 6+, 7+, 8+ portrait ) ****************************************************************/

@media (min-width: 359px) and (max-width: 415px)  { 

.ecardbg-left { background-size:187px 350px !important; } 
.ecardbg-right { background-size:187px 350px !important  }
.intro { background-color: rgba(255, 255, 255, 0.6); padding-top:15px; margin-top:120px}


.icon1,
.icon2,
.icon3,
.icon4,
.icon5,
.icon6,
.icon7,
.icon8 {  width: 50% !important; float: left; min-height:200px}




}



/* Max Width 320px MOBILE ONLY **************************************************************************/

@media (max-width: 320px) {
	
	
.ecardbg-left { background-size:117px 219px !important; } 
.ecardbg-right { background-size:117px 219px !important  }
.intro { background-color: rgba(255, 255, 255, 0.6); padding-top:15px; margin-top:120px}

.icon1,
.icon2,
.icon3,
.icon4,
.icon5,
.icon6,
.icon7,
.icon8 {  width: 50% !important; float: left; min-height:200px}


}