/*Styles for Breakdown Comic Pages*/

/* Global Styles */

p {
margin: 0;
}

body {
    background-color: #fff1e3;
    
}

.callToAction {
    font-family: 'Source Sans Pro', 'arial', sans-serif;
/*    background-color: #896bf3;*/
    color: #36266e;
    font-size: 3em;
    text-align: center;
    font-weight: bold;
    padding: 50px 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    background-color: #f5cba1

}

.newbackcolor {
/*    background-color: #896bf3;*/
    background-color: #f5cba1
}

.line3 {
    width: 100%;
    height: 15px;
    background-color: #780000;
    padding: 0px;
    margin: 0 auto;
}

.bigText {
    font-size: 1.5em;
    line-height: 85%
}

.clickIcon {
    background-image: url(../images/clickIcon.svg);
    background-position: center;
    background-repeat: no-repeat;
    height: 160px;
    width: 160px;
    margin-left: 5%;
}

.touchIcon {
    background-image: url(../images/touchIcon.svg);
    background-position: center;
    background-repeat: no-repeat;
    height: 160px;
    width: 160px;
    margin-right: 5%;
}

.centerHolder {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: #fff1e3;
}

.space {
    background-color: #fff1e3;
    width: 10%;
}

.titleText {
    background-color: #fff1e3;
    font-family: 'Source Sans Pro', 'arial', sans-serif;
    color: #36266e;
    font-weight: bold;
    font-size: 1.5em;
    width: 80%;
    padding: 10px 0px;
    padding-top: 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.pageContainer {
    padding-bottom: 110%;
    width: 80%;
    position:relative;
    margin: auto;
}

.colors {
    background-image: url('../images/Nin');
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    position: absolute;
    cursor:pointer;
    z-index: 3;
}

.inks {
    background-image: url('../images/Nin1.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    position: absolute;
    cursor:pointer;
    z-index: 2;
}

.pencils {
    background-image: url('../images/Page1Pencil.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    position: absolute;
    cursor:pointer;
    z-index: 1;
}

.nextPage {
    background-image: url('../images/nextPage.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    position: absolute;
    cursor:pointer;
    z-index: 3;
}

.nosee {
    opacity: 0;
}

.see {
    opacity: 1;
}

.arrowHolder {
    width: 80%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 50px;
    font-family: 'Source Sans Pro', 'arial', sans-serif;
    color: #36266e;
    font-weight: bold;
    font-size: 1.5em;
}

.arrowHolder a {
    color: #36266e;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

.firstArrowHolder {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.arrowText1 {
    padding-left: 15px;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

.nextText {
    padding-right: 15px;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

/* End Global Styles */

/*  Phone (xs) */
@media only screen and (min-width: 200px) and (max-width: 767px) {
    
    
.callToAction {
    font-size: .65em;
    line-height: 200%
}

.bigText {
    font-size: 1.5em;
    line-height: 85%
}
    
.clickIcon {
    background-image: url(../images/clickIconPhone.svg);
    height: 60px;
    width: 60px;
    margin-left: 5%;
}

.touchIcon {
    background-image: url(../images/touchIconPhone.svg);
    height: 60px;
    width: 60px;
    margin-right: 5%;
}
    
.callToAction {
    padding: 20px 0px;
    padding-top: 30px;
}
    
.space {
    width: 5%;
}
  
.titleText {
    font-size: .75em;
    width: 90%;
    padding: 10px 0px;
    padding-top: 50px;
}
    
.pageContainer {
    width: 90%;
    padding-bottom: 126%;
}
    
.arrowHolder {
    width: 90%;
    font-size: .75em;
}
    
.arrowText1 {
    padding-top: 7px;
    padding-left: 10px;
}

.nextText {
    padding-top: 7px;
    padding-right: 10px;
}
    
.textWrapper {
    padding-top: 10px;
}

}


/* Tablet devices (sm-IPAD, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 1030px) {
    
.callToAction {
    font-size: 1.5em;
}
    
.textWrapper {
    padding-top: 40px;
}
    
.bigText {
    line-height: 120%
}
    
.firstText {
    font-size: 1.5em!important;
}
    
.touchIcon {
    margin-top: 34px;
}
    
.clickIcon {
    margin-top: 34px;
}
    
}


/* Large devices desktop*/
@media only screen and (min-width: 951px) {  

.link:hover {
    padding-left: 25px;
}

.link2:hover {
    padding-right: 25px;
}
    
    
}