/*
 ©2017-2020 Fred Anton Corvest
 */

header {
    height: 0px;
    margin-top: 15px;
}

footer {
    background-color: #313132;
    text-align: center;
    color: #E7DDD3;
    padding-bottom: 15px;
}

footer p {
    display: inline;
}

body {
	background-color: #5D5954;
	margin: 10px auto 10px auto;
	font-family: Trebuchet MS;
	font-size: 18px;
	font-style: normal;
	font-variant: normal;
	color: #313132;
	-webkit-font-smoothing: antialiased
}

h1 {
    text-align: center;
    margin: 0px 0px 20px 0px;
    font-size: 36px;
}

h2 {
    text-align: left;
    margin: 0px;
    font-size: 20px;
}

h3 {
    margin: 0px;
    font-size: 12px;
    font-style: italic;
}

q {
    color: gray;
    quotes: "\00ab" "\00bb";
    font-style: italic;
}

ul {
    text-align: left;
}

ul.actions {
    display:inline-table;
    list-style-type: none;
    background-color: #313132;
    font-weight: bold;
    text-align: left;
}

ul.actions li {
    color: #E7DDD3;
    float: left;
    padding: 15px;
}

ul.actions li a, ul.actions a.button, .newsBox a {
    color: #E7DDD3;
}

p a, ul a {
    color: #313132;
}

ul.actions a.button {
    text-decoration: none;
}

.newItem {
    color: #E7DDD3;
    background-color: #313332;
    border-radius: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    padding-right: 4px
}

.newsOuterBox {
    text-align: center;
    top: 10%;
    bottom: 0%;
    width: 100%;
    left: 0%;
    right: 0%;
    position: absolute;
}

.newsBox {
    background-color: #313132;
    padding: 16px;
    border-radius: 10px;
    display: inline-block;
    overflow-y: scroll;
}

.newsBox img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.newsBox p, .newsBox h1 {
    color: #E7DDD3;
    text-align: center;
}

.newsBox p {
    text-align: left;
}

/*@Menu ===========================================*/
.navbar {
    overflow: hidden;
    background-color: #313132;
    position: fixed;
    top: 0;
    width: 1200px;
    z-index: 1;
}

.navbar a, rightMenuItem {
    float: left;
    color: #D5C6B7;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
}

.navbar .rightMenuItem {
    float: right;
}

.navbar .current {
    opacity: 0.4;
}

.navbar a:hover {
    opacity: 0.4;
}

/*@Bootstraps =====================================*/

.container {
    margin-top: 50px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev , .carousel-control .icon-next{
    margin-left: -78px;
    margin-right: -78px;
    color: #313132;
}

.carousel-indicators li {
    background-color: #999 !important;
    background-color: rgba(49,49,49,.25);
    border: 1px solid #313131;
}

.carousel-indicators .active {
    background-color: #444 !important;
    background-color: #313132;
}

.carousel-control.left, .carousel-control.right {
    background-image:none !important;
    filter:none !important;
}

/*@Containers =====================================*/
.mainContainer {
    margin: 0px auto;
    width: 1200px;
    background-color: #D5C6B7;
}

.headerTable {
    border-top:60px solid #D5C6B7;
    border-bottom:40px solid #D5C6B7;
    border-collapse:collapse;
    width: 100%;
}

.headerTable td {
    text-align: center;
    vertical-align: top;
}

.headerTable .col1 {
    width: 60%;
}

.headerTable .features ul, .featureActions ul {
    line-height: 36px;
    margin: -1px;
    padding-left: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #E7DDD3;
}

.headerTable .featureActions ul {
    background-color: #313332;
    list-style-type: none;
}

.headerTable .featureActions ul li {
    display:inline-table;
    font-weight: bold;
    color: #E7DDD3;
}

.headerTable .featureActions ul li a {
    font-weight: bold;
    color: #E7DDD3;
}

.headerTable .previewPortrait {
    display: none;
}

.headerTable .previewPortrait img {
    margin-bottom: 30px;
}

.headerTable .preview {
    display: table-cell;
}

.descriptionContainer {
    background-color: #E7DDD3;
    padding: 20px;
}

.descriptionContainer img {
    margin: auto;
    display: block;
}

.descriptionContainer summary {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

.descriptionContainer summary:focus {
    outline-style: none;
}

.featuresTable {
    border-top:20px solid #E7DDD3;
    width: 100%;
}

.featuresTable td {
    width: 2000px;
    vertical-align: top;
}

.featuresTable ul {
    margin-top: 10px;
    list-style-type: disc;
    padding-left: 25px;
}

.featuresTable ul li {
    margin-top: 4px;
}

.featuresTable tfoot {
    vertical-align: top;
    text-align: right;
}

.videosContainer {
	text-align: center;
	left: 0px;
	right: 0px;
	margin: 30px 0px 50px 0px;
}

.videosContainer img {
	margin: 40px 15px 40px 15px;
	display: block;
}

.videosContainer a {
	color: #313132;
	text-decoration: none;	
	display: inline-block;
}

.iPadPreviewContainer {
    text-align: center;
}

.inlineContainer, .reviewContainer, .inlineIntroContainer {
	text-align:center;
}

.inlineIntroContainer {
    padding: 20px 0px 40px 0px;
}

.inlineIntroContainer img {
    margin: 0px;
    display: inline-block;
}

.inlineContainer img {
    margin: 40px auto 50px auto;
    display: inline-block;
}

.quoteContainer {
    width: 950px;
    text-align: center;
    margin: 40px 10% 10px 10%;
}

.quoteContainer img {
    width: 64px;
    height: 64px;
    border-radius: 34px;
    margin: auto;
    margin-top: 14px;
    margin-bottom: 4px;
    display: block;
}

.quoteContainer p {
    margin: 10px;
}

.reviewContainer img {	
    display: inline-block;	
    width: 80px;
    height: 80px;
    border-radius: 16px;    
}

.reviewItem {
    display: inline-block;
    margin-bottom: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

.footerContainer {
	margin-top: 40px;
}

.footerContainer h2 {
    margin-top: 10px;
    text-align: center;
    color: #C9953E;
}

.footerContainer img {
    display: block;
    margin: auto;
}

.rightFloatingPaneWrapper {
    text-align: center;
    width: 80px; /*support logo width*/
    top: 160px;
    right: 0px;
    position: fixed;
    z-index: 1;
}

.rightFloatingPane {
    border-style: solid;
    background-color: #313132;
    border-width:0 80px;  /*support logo width*/
    height: 80px;  /*support logo width*/
    -moz-border-image: url('../images/FAC_FredAntonCorvestSupport.png') 0 0 0 260;
    border-image: url('../images/FAC_FredAntonCorvestSupport.png') 0 0 0 260;
    position: relative;
    width: 340px;
    transition: width 1s;
    border-radius: 80px;
    -webkit-box-shadow: -6px 6px 43px -7px rgba(0,0,0,0.75);
    -moz-box-shadow: -6px 6px 43px -7px rgba(0,0,0,0.75);
    box-shadow: -6px 6px 43px -7px rgba(0,0,0,0.75);
}

.rightFloatingInnerPane {
    padding: 10px 10px 10px 10px;
    background-color: #FFFFFF; /*#E7DDD3*/
    border-radius: 6px 0px 0px 6px;
    text-align: center;
    -webkit-box-shadow: 0px;
    -moz-box-shadow: 0px;
    box-shadow: 0px;
}

.rightFloatingPane a {
    margin: auto;
    display: block;
}

.rightFloatingPane h2 {
    text-align: center;
    margin-top: 8px;
    margin-bottom: 8px;
}

.rightFloatingPane p {
    text-align: center;
    font-size: 14px;
}

.supportBar {
    height: 80px;
    text-align:center;
    vertical-align: top;
}

.supportBar img {
    float:left;
}

.rightFloatingPaneWrapper:hover, .rightFloatingPaneWrapper:active {
    width: 340px;
    transition: width 1s;
}

.rightFloatingPaneWrapper:hover .rightFloatingPane, .rightFloatingPaneWrapper:active .rightFloatingPane {
    border-width: 0px;
    height: 100%;
}

.rightFloatingPaneWrapper:hover .rightFloatingPane .rightFloatingInnerPane, .rightFloatingPaneWrapper:active .rightFloatingPane .rightFloatingInnerPane {
    -webkit-box-shadow: -6px 6px 43px -7px rgba(0,0,0,0.75);
    -moz-box-shadow: -6px 6px 43px -7px rgba(0,0,0,0.75);
    box-shadow: -6px 6px 43px -7px rgba(0,0,0,0.75);
}

/*Images =======================================*/
.mobileMusicImage {
    width: 363px;
    height: 275px;
}

.facMenuItemImage {
    width: 24px;
    height: 24px;
}

.facSupportItemImage {
    width: 80px;
    height: 80px;
}

.facHeadImage {
    width: 154px;
    height: 168px;
}

.fredAntonCorvestImage {
    margin: 40px auto 40px auto;
    /*auto for center*/
    width: 950px;
    height: 75px;
}

.facChorusTitleImage {
    margin: 0px auto 0px auto;
    /*auto for center*/
    width: 616px;
    height: 177px;
}

.appStoreImage {
    margin: 15px auto 45px auto;
    /*auto for center*/
    width: 180px;
    height: 60px;
}

.macAppStoreImage {
    margin: 15px auto 45px auto;
    padding-left: 12px;
    /*auto for center*/
    width: 234px;
    height: 60px;
}

.appsPreviewImage {
    z-index: 1;
    width: 1200px;
    height: 640px;
}

.appPreviewPortraitImage {
    z-index: 1;
    width: 385px;
    height: 790px;
}

.appPreviewLandspace_iOSImage {
    width: 1130px;
    height: 182px;
}

.appPreviewLandspaceMedium_iOSImage {
    width: 1130px;
    height: 235px;
}

.appPreviewLandspaceLarge_iOSImage {
    width: 1130px;
    height: 335px;
}

.commonImage {
    width: 1024px;
}

.facImage {
    width: 116px;
    height: 116px;
}

.video1PreviewImage, .video2PreviewImage, .video3PreviewImage, .video4PreviewImage {
    border-radius: 24px;
    width: 475px;
    height: 266px;
}

.iPadPreviewAum, .iPadPreviewGarageBand {
    border:1px solid black;
    border-radius: 24px;    
    width: 1024px;
    height: 768px;
}

.signalPath  {
    width: 1132px;
    height: 445px;
}

.macOsPreviewLogicProX {
    border-radius: 24px;    
    width: 1029px;
    height: 742.5px;
}

/*@media =======================================*/

/** Retina **/
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){
    body {
        /*background-color: #486ffd;*/
    }
}

/*iPhone 6*/
@media screen and (max-width: 640px) {
    header {
        margin-top: 0px;
    }

    .video1PreviewImage, .video2PreviewImage, .video3PreviewImage, .video4PreviewImage, .iPadPreviewAum, .signalPath, .iPadPreviewGarageBand, .macOsPreviewLogicProX {
        width: 94%;
    }
    
    .appsPreviewImage {
        width: 100%;
    }
    
    .featuresTable td {
        display: table-row;
    }
    
    h1 {
        margin-top: 15px;
    }
    
    .right.carousel-control, .left.carousel-control {
        display: none;
    }
    
    .newsOuterBox {
        top: 5%;
        bottom: 5%;
    }

    .newsBox p {
        font-size: 14px;
    }
    
    .newsBox h1 {
        margin: 0px 0px 10px 0px;
    }
}

/*iPad Air 1536*/
@media screen and (max-width: 1200px) {
    div.mainContainer, .navbar {
        width: 100%;
    }
    
    body {
        width: 100%;
        margin: 0px;
    }
    
    div#popupContainer {
        width: 100%;
    }
    
    .headerTable .previewPortrait {
        display: table-row;
    }
    
    .headerTable .preview {
        display: none;
    }
    
    .headerTable .col1 {
        width: 100%;
    }
    
    img, .facChorusTitleImage, .fredAntonCorvestImage,.appPreviewPortraitImage, .appPreviewLandspace_iOSImage, .appPreviewLandspaceMedium_iOSImage, .appPreviewLandspaceLarge_iOSImage, .video1PreviewImage, .video2PreviewImage, .video3PreviewImage, .video4PreviewImage, .iPadPreviewAum, .signalPath, .iPadPreviewGarageBand, .macOsPreviewLogicProX, .appsPreviewImage, .commonImage {
        max-width: 100%;
        height: auto;
    }
    
    .quoteContainer {
        width: 100%;
        margin: 0px;
    }
    
    .newsOuterBox {
        bottom: 10%;
        width: 80%;
        left: 10%;
        right: 10%;
    }
    
    .newsBox {
        height: 100%;
    }
}

@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@-webkit-keyframes animateFadeIn {
    from {opacity:0}
    to {opacity:1}
}

@keyframes animateFadeIn {
    from {opacity:0}
    to {opacity:1}
}