/**
 * Features Page CSS
 * @author Spencer Avinger <savinger@axxessconsult.com>
 */


/* General Page Styles 
 ======================================================= */
   
#features .icon-ok { 
    position: absolute; 
    left: 0; 
    top: 0; 
    color: #2287B9; /* #2287B9 #197bab #0a0 */
    font-size: 1.2em;
}
#features h1 {
    margin: 20px 0;
    font-size: 52px;
}
#features h3 {
    line-height: 1.3em;
}
#features .screen {
    height: 300px;
    text-align: center;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    padding-top: 50px;
    background-image: -webkit-linear-gradient(bottom, #eef, #fff 10%);
}
#features .screen img {
    position: relative;
    box-shadow: 0 5px 15px #bbb;
    display: inline-block;
    -webkit-transition: .50s;
       -moz-transition: .50s;
            transition: .50s;
}
#features .screen img:hover {
    top: -20px;
}

.feature { padding: 1em 1.5em; }
.feature:hover { background: #f8f8f8; }
.feature h4 { position:relative; font-size:1.5em; padding: .3em 0 .3em 30px; color: #333; }
.feature h4 i { position: absolute; top: 0; left: -.6em; font-size: 1.5em; color: #555; width: 40px; text-align: right; }
.feature ul { list-style: none; margin: 10px 0 10px 30px; }
.feature li { position: relative; padding: 0; margin: 0; color: #666; }
.feature .icon-ok { position: absolute; left: -30px !important; }

/* Sections
 ======================================================= */
 
/* Video
 ======================================================= */

#video {
    background:#f5f5f5;
    border-bottom:1px solid #ddd;
}
#video h1 { margin-top: 0; }
#video iframe {
    padding: 1em;
    background: white;
    border: 1px solid #ddd;
    margin: 0 auto;
    display: block;
}


/* Fully Integrated 
 ======================================================= */
.purchase{ background-color: #fff !important; border: 1px solid #b9243c !important; color: #b9243c !important; }   
#fully-integrated {
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #ccc;
}
#fully-integrated .ipad {
    background-image: url('../images/ipad.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    position: absolute;
    top: 0px;
    left: 50%;
    width: 530px;
    margin-left: -265px; /* half of width */
    height: 690px;
    overflow: hidden;
    z-index: 10;
    margin-top:20px;
}
#fully-integrated .module-screen {
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 12.318840579%; /* 85/960 */
    left: 9.433962264%; /* 50/530 */
    right: 9.433962264%; /* 50/530 */
    bottom: 11.304347826%; /* 78/690 */
    display: none;
    z-index: 20;
}
#fully-integrated .module-zoom {
    position: absolute;
    width: 320px;
    height: 320px;
    z-index: 21;
    display: none;

    opacity:0;
    -webkit-transform:scale(0.5);
       -moz-transform:scale(0.5);
    
    -webkit-transition:all 230ms cubic-bezier(0.7, 0, 0.1, 1);
    -webkit-transition:all 230ms cubic-bezier(0.7, -0.2, 0.1, 1.2);
       -moz-transition:all 230ms cubic-bezier(0.7, -0.2, 0.1, 1.2);
        -ms-transition:all 230ms cubic-bezier(0.7, -0.2, 0.1, 1.2);
         -o-transition:all 230ms cubic-bezier(0.7, -0.2, 0.1, 1.2);
            transition:all 230ms cubic-bezier(0.7, -0.2, 0.1, 1.2);
}
#fully-integrated .module-zoom.show {
    display: block;
    opacity: 1;
    -webkit-transform:scale(1);
       -moz-transform:scale(1);
}


#ms1.module-screen { background-image: url(../images/ipad-clinical.jpg); }
#ms2.module-screen { background-image: url(../images/ipad-pointofcare.jpg); }
#ms3.module-screen { background-image: url(../images/ipad-scheduling.jpg); }
#ms4.module-screen { background-image: url(../images/ipad-dashboard.jpg); }
#ms5.module-screen { background-image: url(../images/ipad-billing.jpg); }
#ms6.module-screen { background-image: url(../images/ipad-reporting.jpg); }

#ms1z.module-zoom { display: block; background-image: url(../images/ipad-clinical-zoom.png); top:0; left:0; }
#ms2z.module-zoom { display: block; background-image: url(../images/ipad-pointofcare-zoom.png); top:3%; left:10%; }
#ms3z.module-zoom { display: block; background-image: url(../images/ipad-scheduling-zoom.png); top: 5%; right: 5%; }
#ms4z.module-zoom { display: block; background-image: url(../images/ipad-dashboard-zoom.png); top: 11%; left: 15%; }
#ms5z.module-zoom { display: block; background-image: url(../images/ipad-billing-zoom.png); top: 4%; right: 0; }
#ms6z.module-zoom { display: block; background-image: url(../images/ipad-reporting-zoom.png); top: 3%; left: 15%; }

#fully-integrated .top-header { margin-bottom: 80px; }

.module {
    border: 1px solid #eaeaea;
    background: #fafafa;
    color: #666;
    background-image: linear-gradient(#fff, #fafafa);
    margin: 0 0 10px;
    border-radius: 3px;
    padding: 10px;
    position: relative;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

.module-left:before,
.module-left:after,
.module-right:before,
.module-right:after {
	content: '';
    display: block;
	position: absolute;
}

.module-left:before,
.module-right:before {
	top: 10px;
}

.module-left:after,
.module-right:after {
	top: 11px;
}

.module-left:before {
    right: -11px;
    border-left: 11px solid #eaeaea;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
}

.module-left:after {
    right: -10px;
    border-left: 10px solid #fcfcfc;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.module-right:before {
    left: -11px;
    border-right: 11px solid #eaeaea;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
}

.module-right:after {
    left: -10px;
    border-right: 10px solid #fcfcfc;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.module.active {
	background: #b8223b;
    background-image: linear-gradient(#DA3450, #b8223b); /* #DA2537, #af1e2d */
    border-color: #b8223b;
    color: white;
    box-shadow: 0 0 4px #ccc;
}
.module.active.module-left:before    { border-left-color: #b8223b; }
.module.active.module-left:after     { border-left-color: #CF2642; }
.module.active.module-right:before   { border-right-color: #b8223b; }
.module.active.module-right:after    { border-right-color: #CF2642; }

.module h3 {
    margin: 0 0 8px;
    line-height: 1em;
}

/* Web Based
 ======================================================= */

#overview {
    background: #F7F7F7;
    border-bottom: 1px solid #ccc;
}

#overview .container {
    position: relative;
    box-sizing: border-box;
}

#overview .platforms {
    position: absolute;
    right: 0;
    top: 30px;
    bottom: 30px;
    width: 50%;
    background-image: url('/assets/images/platformsAgencycore.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#overview ul {
    list-style: none;
    margin: 20px 0;
    font-size: 16px;
    font-weight: 400;
    color: #555;
    font-family: 'Open Sans', 'Helvetica', sans-serif;
}
#overview li {
    margin: 10px 0;
    position: relative;
    padding-left: 30px; 
}
#overview li .icon-ok { 
    position: absolute; 
    left: 0; 
    top: 0;
    font-size: 1.2em;
}

/* Clinical
 ======================================================= */

#clinical header {
	background: #FEFBF0; /* FAF7EC F4F1E6 */
    border-bottom: 1px solid #ccc;
}
#clinical header h1 { margin-top: 120px; }
#clinical header p { color: #555; font-size: 1.3em; }

#clinical header .container {
    background-image: url('../images/tisdale.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 300px;
}


/* Administrative
 ======================================================= */

#administrative header { 
	height: 300px;
	border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #f7f7f7;
}
#administrative header .container { 
	background-image: url('/assets/images/admin-header-ipad.png');
	background-position: right bottom;
	background-repeat: no-repeat;
	height: 100%;
}
#administrative header h1 { margin-top: 120px; color: #c63c4c; }
#administrative header p { color: #555; font-size: 1.3em;  }


/* And More - Support, Training, Pricing
 ======================================================= */

#andmore {
	border-top: 1px solid #ddd;
	background: #eeeef8;
	padding-bottom: 20px;
}

#andmore .span4:not(:last-child) .more {
	padding-right: 30px;
	border-right: 1px solid #aaa;
}


/*New Hero Styles*/
#agenceycore_features_hero {
    background-image: url('../images/hero_features.jpg');
    background-size:cover;
    height:442px;
}
#agenceycore_features_hero .container{padding-top: 2.5%;}
.top-header {padding: 20px 10px 40px 10px;}
#heroBox{background-color: rgba(0, 0, 0, .7); padding: 1% 2% 2% 2%;}
#agenceycore_features_hero h1{ font-weight: bold; font-size: 2.5em; color:#fff; }
#w-content{/*Hero box text white */color: #fff;font-size: 1.1em;}
#signupbtn{background-color: transparent; border: 1px solid #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold;color: #fff; box-shadow: none; padding: 2.4% 11%; text-shadow: none; white-space: nowrap;-webkit-font-smoothing: antialiased;}
#signupbtn:hover{background-color:#fff;color:#c63c4c;text-decoration: none;border:1px solid #c63c4c;}
#watchvidbtn{font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;background-color: #4d85ff;color:#ffffff;font-weight: bold;font-size:17px;border-radius: 2px;padding: 2.5% 6%;border: 1px solid #4d85ff;box-shadow: none;}
#watchvidbtn:hover{background-color:#568bff;border:1px solid #4d85ff;color:#fff;}
.para{display:none;}
#agenceycore_features_hero h1{margin: 10px 0}
#agenceycore_features_hero h2{color:white; margin-top: -4%; font-weight:500}
#features{background-color: #fff;}
#overview h4{font-weight: 500;}
#overview h2{color: #c63c4c;}
#features .icon-ok{color: #c63c4c;}


@media (min-width: 1200px) {.break{display:block;}  }
@media (max-width: 1199px){
    .break{display:none;}
    #agenceycore_features_hero {background-position: 50%;}

}


/* Responsive Media Queries
 ======================================================= */

/* Large desktop */
@media (min-width: 980px) and (max-width: 1200px) { 
	#fully-integrated .ipad {
	    width: 480px;
	    height: 625px; /* Aspect Ratio (690/530) * Width (480) */
	    margin-left: -230px; /* half of width and fudge 10 */
	}
	#administrative header .container { background-size: 70%; }
    #containDiv{padding-left: 28% !important;}
}
 
/* Portrait tablet to landscape and desktop 979 */
@media (min-width: 768px) and (max-width: 979px) { 
	/* #fully-integrated */
	#fully-integrated .ipad {
	    width: 390px;
	    height: 508px; /* Aspect Ratio (690/530) * Width (390) */
	    margin-left: -185px; /* half of width and fudge 10 */
	}
	.module h3 { font-size: 22px; text-align: center; }
	.module p { display: none; }
	.module-left:before, 
	.module-right:before, 
	.module-left:after, 
	.module-right:after { display: none; }
	
	#fully-integrated .module-zoom { display: none !important; }
	
	#administrative header .container { background-size: 70%; }
    #containDiv{padding-left:28% !important;}
    .break{display: none;}  
    #watchvidbtn{margin-bottom: 10px!important}
     #agenceycore_features_hero {background-position: 60%;}
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 

	/* General Styles */
	
	#features h1 { font-size: 28px; }
	
	#features .screen {
	    height: auto;
	    text-align: center;
	    overflow: visible;
	    background-image: none;
	}
	#features .screen img:hover { top: 0px; }
	
	/* Video */
	
	#video iframe { margin-top: 2em; }
	
	/* Fully Integrated */
	
	#fully-integrated .ipad { display: none; }
	.module { margin-bottom: 5px; }
	.module-left:before, 
	.module-right:before, 
	.module-left:after, 
	.module-right:after { display: none; }
	#administrative header .container { background-size: contain; }
	
	/* Overview - Web Based */
	
	#overview .row { padding: 0 1em; }
	#overview h3 br { display:none; }
	#overview .platforms { 
		display: block; 
		height: 300px; 
		position: static;
		width: auto;
		margin-top: 30px;
	}

	/* Clinical */

	#clinical header, #administrative header { position: relative; }
	#clinical .overlay, #administrative .overlay {
		display: block;
		position: absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background: rgba(255,255,255,.7);
		padding: 0 1em;
	}
	
	/* And More */
	
	#andmore .span4:not(:last-child) .more {
		padding-right: 0px;
		border-right: none;
	}
}

/* Custom, iPhone Retina */ 
 @media only screen and (max-width: 480px) {
    #clinical .overlay h1, #clinical .overlay h4, #administrative .overlay h1, #administrative .overlay h4{text-align: center;}
}