/*
Theme: Canary---yellow trojanhorse
*/

@font-face {
	font-family: 'courier-prime.regular';
	src: url('../assets/fonts/courier-prime.regular.eot');
	src: local('☺'), url('../assets/fonts/courier-prime.regular.woff') format('woff'), url('../assets/fonts/courier-prime.regular.ttf') format('truetype'), url('../assets/fonts/courier-prime.regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'modern-no20-italic';
	src: url('../assets/fonts/modern-no20-italic.eot');
	src: local('☺'), url('../assets/fonts/modern-no20-italic.woff') format('woff'), url('../assets/fonts/modern-no20-italic.ttf') format('truetype'), url('../assets/fonts/modern-no20-italic.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}





:root {
    
    --main-fontsize: 0.78vw;
    --main-lineheight: 1.16em;
    
    --size-toc: 1vw;
    --lineh-toc: 1.1em;
    
    --size-sectiontitle: 2.8vw;
    --lineh-sectiontitle: 1em;
    
}




html{
    overflow: auto;
}
body {
    font-family: 'courier-prime.regular';
	font-size: var(--main-fontsize);
    line-height: var(--main-lineheight);
    overflow: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


body, select, input, textarea {
    color: #000;
    background-color: #fff;
}

a {color: #000; text-decoration: none;}
a:hover {color: #000;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #000; color: #fff; text-shadow: none;}
::selection {background: #000; color: #fff; text-shadow: none;}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fff; color: #fff;}

ins {background-color: #fff; color: #000; text-decoration: none;}
mark {background-color: #fff; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

.clearafter:after{
    content: '';
    display: block;
    clear: both;
}

.cursor-pointer{
    cursor: pointer;
}
.underline-mouseover:hover{
    text-decoration: underline;
}


.helvetica {
    font-family: helvetica;
    font-weight: 700;
}

span.no-break {
    font-weight: inherit;
    display: inline-block;
}


.text-right { text-align: right; }
.text-center { text-align: center; }

.blink {
    animation: blink 2s infinite;
}
@keyframes blink {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

/*
-------------------------------------------------------------------------------*/

body {
    padding-top: 16.5vw;
}


header {
    padding: 10px;
    position: fixed;
    background-color: #fff;
    z-index: 999;
    top: 0;
}




/********/
.pills-wrapper{
    padding: 0 10px;
}

.pill-postmodern {
    border-radius: 5vw;
    border: 1px solid #f00;
    color: #f00;
    font-size: 13px;
    line-height: 20px;
    display: inline-block;
    padding: 0 5px;
}
.pill-postmodern:hover {
    color: #f00;
}


/********/

.logo{
    width: 100%;
    height: auto;
}

.bio {
    padding: 0;
    margin-bottom: 10px;
}

.intro-toc {
    text-align: center;
    height: calc(6.3em + 10px);
    height: calc(6.2em + 10px);
    padding-left: 10px;
    font-family: helvetica;
    font-weight: 700;
    font-size: var(--size-toc);
    line-height: var(--lineh-toc);
    padding-top: 3.2vw;
}

.toc {
    column-count: 2;
    padding-left: 10px;
    color: #00f;
    font-size: var(--size-toc);
    line-height: var(--lineh-toc);
}

.toc ol {
    padding-left: calc(1.0vw + 10px);
}
.toc ol li {
    font-family: helvetica;
    font-weight: 700;
}
.toc ol li a {
    color: #00f;
}


.logo-wrapper {
/*    padding-top: 16.5vw;*/
}
.logo-wrapper img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 66vw;
    margin-bottom: 7px;
}

.intro-image-wrapper {
    padding: 10px;
}
.intro-image-wrapper video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 66vw;
}



/* WINDOWS
*********************************************************/
.windows-header-wrapper {
    padding: 2px;
    background: rgb(51,78,165);
    background: linear-gradient(90deg, rgba(51,78,165,1) 0%, rgba(76,127,193,1) 100%);
    position: relative;
}
.window-title {
    font-size: 0.75vw;
    line-height: 1.2vw;
    color: #fff;
    width: calc(75%);
    float: left;
    text-align: left;
}
.window-icons {
    text-align: right;
    float: left;
    width: 25%;
}
.window-icons img {
    height: 0.8vw;
    margin-top: 0.1vw;
    margin-left: 3px;
    border: 1px outset #dad7d2;
    cursor: pointer;
}



/* GENERAL POPUP
*********************************************************/
.popup-window {
    text-align: right;
    width: 32vw;
    position: absolute;
    z-index: 10000;
    border: 4px ridge #d8d8d8;
}

.popup-window.iconize .popup-inner-wrapper {
    display: none;
}
/*
.popup-window.resize {
    width: 50vw;
    left: 50vw;
    top: 0;
    margin-top: 0;
    height: calc(100vh);
    background-color: #fff;
}
.popup-window.resize .popup-inner-wrapper {
    margin-top: 14vh;
}
*/


.popup-window .windows-header-wrapper {
    top: 0;
}
.popup-inner-wrapper {
    padding: 0;
    background-color: #fff;
}
.popup-inner-wrapper .inner-title {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 13px;
}
.popup-close-wrapper span {
    cursor: pointer;
}
.popup-window .popup-inner-wrapper img {
    width: 100%;
    display: block;
}

/* CANARY YELLOW
*********************************************************/
#canary-yellow-wrapper {
    text-align: right;
    margin-bottom: 2vw;
    width: 28vw;
    position: absolute;
    z-index: 10000;
    left: 5vw;
    top: 40vw;
    border: 4px ridge #d8d8d8;
}



/* POSTMODERN
*********************************************************/
#postmodern-wrapper {
    text-align: right;
    margin-bottom: 2vw;
    width: 32vw;
    position: absolute;
    z-index: 10000;
    right: 10vw;
    top: 30vw;
    border: 4px ridge #d8d8d8;
}
#postmodern-wrapper .popup-inner-wrapper {
    padding: 1vw;
    background-color: #F00;
}





/* INTRODUCTION
-------------------------------------------------------------------------------*/
#introduction {
    text-align: center;
}

#introduction .section-title {
    font-family: helvetica;
    font-weight: 700;
    font-size: var(--size-sectiontitle);
    line-height: var(--lineh-sectiontitle);
}

#introduction .subtitle {
    font-family: 'modern-no20-italic';
    font-size: 1.5vw;
    line-height: 1.7vw;
    padding: 10px 10%;
    
}
#introduction .subtitle-2 {
    font-size: var(--size-toc);
    line-height: var(--lineh-toc);
}


.how-to-make {
    width: 66vw;
    margin-bottom: 10px;
}





/* CONTENTS
-------------------------------------------------------------------------------*/

a.anchor-num {
    position: absolute;
    margin-top: -16.5vw;
}

#contents .section-title {
    text-align: center;
    font-family: helvetica;
    font-weight: 700;
    font-size: var(--size-sectiontitle);
    line-height: var(--lineh-sectiontitle);
    padding-bottom: 1em;
}
#contents .sub-title {
    font-family: helvetica;
    font-weight: 700;
    font-size: var(--size-toc);
    line-height: var(--lineh-toc);
    padding-bottom: 1em;
    padding-left: 10%;
    padding-right: 10%;
}

#contents .row {
    margin: 3vw 0;
}

#contents .row .number-wrapper {
    padding-top: 3vw;
}
#contents .row .number-wrapper img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#contents .row .preview-wrapper {
    
}
#contents .row .preview-wrapper.boxed-4,
#contents .row .preview-wrapper .boxed-4{
    padding-left: calc(100vw / 12);
}

#contents .row .preview-wrapper img {
    display: block;
    width: 100%;
    border: 3px solid #00f;
    margin-bottom: 20px;
}
#contents .row .preview-wrapper iframe {
    display: block;
    width: 100%;
    border: 3px solid #00f;
    margin-bottom: 20px;
}
#contents .row .preview-wrapper .col-left {
    padding-right: 10px;
}
#contents .row .preview-wrapper .col-right {
    padding-left: 10px;
}


#contents .row .preview-wrapper .no-border {
    border: 0;
}

#contents .row .preview-wrapper.boxed-4 iframe{
    height: 18.74vw;
}
#contents .row .preview-wrapper .quarter-iframe iframe{
    height: 14.06vw;
    
}



#contents .row .content-wrapper {
    padding: 0 20px;
}
#contents .row .content-wrapper .content-title {
    color: #00f;
}


/* FOOTER
-------------------------------------------------------------------------------*/
footer {
    padding: 20px 10px;
}
footer .wrapper-logo {
    padding: 0 10px;
}
footer .inner-content {
    padding: 0 10px;
}

footer .line-break {
    display: block;
    height: 0.7em;
}


/* 
-------------------------------------------------------------------------------*/



.col-md-2{
    width: 16.66%;
    float: left;
}
.col-md-3{
    width: 25%;
    float: left;
}
.col-md-4{
    width: 33.33%;
    float: left;
}
.col-md-5{
    width: 41.66%;
    float: left;
}
.col-md-6{
    width: 50%;
    float: left;
}
.col-md-8{
    width: 66.66%;
    float: left;
}
.col-md-9{
    width: 75%;
    float: left;
}
.col-md-12{
    width: 100%;
    float: left;
}

.mobile{display: none;}



@media screen and (max-width: 1600px) {
    
}

@media screen and (max-width: 1280px) {
    
}


@media screen and (max-width: 960px) {
    
    
    :root {
    
        --main-fontsize: 3vw;
        --main-lineheight: 1.16em;

        --size-toc: 4vw;
        --lineh-toc: 1.1em;

        --size-sectiontitle: 8vw;
        --lineh-sectiontitle: 1em;

    }


    .desktop{display: none;}
	.mobile{display: block;}
    
    body{
        padding-top: 0;
    }
    
    
    header {
        position: inherit;
        padding: 10px;
    }
    
    /********/
    .pill-postmodern {
        margin-top: 10px;
    }
    
    .toc ol {
        padding-left: calc(4vw + 10px);
    }   
    
    .toc ol li {
        font-family: helvetica;
        font-weight: 700;
        padding-left: 4vw;
    }

    
    .logo {
        margin-top: 10px;
    }
    .logo-wrapper img {
        width: 100%;
    }
    
    .intro-toc {
        height: inherit;
        margin-bottom: 1em;
    }
    
    
    .toc {
        column-count: 1;
        padding-left: 0;
        font-size: var(--size-toc);
        line-height: var(--lineh-toc);
    }
    
    
    .logo-wrapper {
        padding: 0 10px;
        margin-top: 0;
    }
    
    .intro-image-wrapper{
        padding: 0 10px;
    }
    
    .intro-image-wrapper video {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    
    #introduction .subtitle {
        font-family: 'modern-no20-italic';
        font-size: 5vw;
        line-height: 1em;
        padding: 10px;
        padding-top: 0;
    }
    
    #introduction img {
        width: 100%;
        padding: 0 10px;
        margin-bottom: 10px;
    }
    
    #introduction .subtitle-2 {
        padding: 0 10px;
    }

    
    
    
    /* GENERAL POPUP
    *********************************************************/
    .popup-window {
        position: inherit !important;
        width: calc(100% - 20px) !important;
        margin-left: 10px !important;
    }
    .window-title {
        font-size: 13px;
        line-height: 16px;
    }
    .window-icons img {
        height: 13px;
        margin-top: 0.1vw;
        vertical-align: middle;
    }
    
    
    /*  
    -------------------------------------------------------------------------------*/
    
    #contents .row .content-wrapper {
        padding: 0 10px;
    }
    
    #contents .row .multiple-content {
        padding-top: 10px;
    }
    
    #contents .row .preview-wrapper.boxed-4,
    #contents .row .preview-wrapper .boxed-4 {
        padding: 0 10px;
    }
    
    #contents .row .number-wrapper img {
        height: 22vw;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    #contents .row .preview-wrapper.boxed-4 iframe {
        height: calc((100vw - 20px) / 16 * 9);
    }
    
    #contents .row .preview-wrapper iframe {
        margin-bottom: 10px;
    }
    
    
    #contents .row .preview-wrapper .col-left,
    #contents .row .preview-wrapper .col-right {
        padding: 0 10px;
    }
    
    
    #contents .row .preview-wrapper .quarter-iframe iframe {
        height: calc((100vw - 20px) / 16 * 9);
    }
    

    
    #contents .section-title {
        padding-bottom: 10px;
    }
    #contents .sub-title {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
    }
    
    /*  
    -------------------------------------------------------------------------------*/
    footer {
        padding: 10px;
        padding-top: 0;
    }
    
    footer .inner-content {
        padding: 0;
        margin-bottom: 20px;
    }
    

    
    /*  
    -------------------------------------------------------------------------------*/
    
    
    .col-sm-50{
        width: 50%;
        float: left;
    }
    .col-sm-100{
        width: 100%;
        float: left;
    }
        
}