/* Don't forget to vendor prefix */

/**:not(.letsGo-animate) {
    transition: width 0.4s, height 0.4s, font-size 0.4s, font-weight 0.4s;
}*/

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 50px;
    font-weight: 300;
    height: 52px;
    /*text-transform: uppercase;*/
    /*font-style: italic;*/
}

h2 {
    font-size: 35px;
    font-weight: 100;
    /*color: #fff;*/
    /*text-transform: uppercase;*/
    /*font-style: italic;*/
}

h3 {
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 40px;
    font-weight: 700;
    /*text-transform: uppercase;*/
    /*font-style: italic;*/
}

h4 {
    margin-top: 10px;
    font-size: 30px;
    font-weight: 300;
    /*text-transform: uppercase;*/
    /*font-style: italic;*/
}

h5 {
    margin-top: 20px;
    margin-bottom: 3px;
    font-size: 25px;
    font-weight: 300;
    /*text-transform: uppercase;*/
    font-style: italic;
}

p {
    margin: 10px 0 5px;
}

.nav-bar {
    background-color: #eee;
}

/*Navigation styles*/
.tab-parent{

}

button.tab-child {
    width: 100px;
    background-color:#fff;
    color: #000;
    border-radius: 0px;
    box-sizing: border-box;
}

button.tab-child:hover {
    box-shadow: inset 0px -2px 0px #3AC371;
}
button:not(.reset):disabled {
    opacity: 1;
}

button.accordion {
    background-color: #ddd;
    color: black;
    cursor: pointer;
    padding: 8px;
    margin-bottom: 1px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

.accordion h5 {
    margin-top: 10px;
    font-size: 20px;
}

button.accordion-, button.accordion:hover {
    background-color: #3a8fcc;
}

div.panel {
    margin:10px;
    /*background-color: #bef4c7;*/
    overflow: hidden;
}

#npm.letsGo-hide-remove, #bower.letsGo-hide-remove, #manual.letsGo-hide-remove {
    transition: max-height 1s, margin 1s;
    max-height: 0;
    margin:0px;
}

#npm.letsGo-hide-remove-active, #bower.letsGo-hide-remove-active, #manual.letsGo-hide-remove-active {
    max-height:80px;
    margin:10px;
}

#npm.letsGo-hide-add, #bower.letsGo-hide-add, #manual.letsGo-hide-add {
    transition: max-height 1s, margin 1s;
    max-height: 80px;
    margin:10px;
}

#npm.letsGo-hide-add-active, #bower.letsGo-hide-add-active, #manual.letsGo-hide-add-active {
    max-height:0px;
    margin:0px;
}

#cdn.letsGo-hide-remove{
    transition: max-height 1s, margin 1s;
    max-height: 0;
    margin:0px;
}

#cdn.letsGo-hide-remove-active {
    max-height:300px;
    margin:10px;
}

#cdn.letsGo-hide-add {
    transition: max-height 1s, margin 1s;
    max-height: 300px;
    margin:10px;
}

#cdn.letsGo-hide-add-active {
    max-height:0px;
}

.tab-child-clicked {
    box-shadow: inset 0px -2px 0px #3AC371
}

.section-why {
    padding-top: 25px;
}

.section-why-paragraph {
    padding-top: 10px;
}
.fake-code {
    padding: 10px 10px;
    display: block;
    border-radius: 3px;
    background-color: #4F4F51;
    color: #E6E6E6;
    font-family: 'Inconsolata', sans-serif;
    font-size: 16px;
    margin-bottom: 20px;
}

.fake-comment {
    color: #AFAFAF;
}

.fake-comment a {
    color: #AFAFAF;
    text-decoration: underline;
}

.grid-example {
    background-color: #eee;
    margin-bottom: 60px;
    border-radius: 3px;
    padding: 15px 0;
    overflow: hidden;
}

.grid-frow-code + .grid-example {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

#header {
    height: 30%;
    width: 100%;
    background-color: #3ac371;
}

#header svg {
    width: 100%;
    max-width: 400px;
    fill: #fff;
    margin: 15px 0;
}

.warning {
    font-size: 15px;
    color: #EF5252;
    margin: 15px 0;
}

.main-section.letsGo-hide-remove {
    transition: opacity 0.3s ease-in;
    opacity: 0;
}

.main-section.letsGo-hide-remove-active {
    opacity: 1;
}

.main-section.letsGo-hide-add {
    transition: opacity 0.3s ease-out;
    opacity: 1;
}

.main-section.letsGo-hide-add-active {
    opacity: 0;
}

.greyed {
    color: #bbb;
}

.example {
    text-align: center;
    margin-top: 40px;
    font-size: 25px;
}

.example-explanation {
    margin-top: 50px;
    font-size: 20px;
}

.example-keyword {
    font-weight: 700;
}

.example-type {
    font-style: italic;
}

.example-definition {
    margin-left: 50px;
}

.example-examples {
    margin-left: 50px;
}

.by-line {
    margin-top: 60px;
    text-align: center;
    margin-bottom: 50px;
}

.animate-steps {
    font-size: 20px;
}

.demo-box-container {
    width: 100%;
    height: 100%;
    background-color: #f3f3f3;
    border-radius: 3px;
}

.demo-box {
    width: 140px;
    height: 140px;
    background-color: LightSeaGreen;
}

.blue-background {
    background-color: RoyalBlue;
}

.blue-background-add, .blue-background-remove {
    transition: background-color 1s;
}

.blue-background-add-active {
    background-color: RoyalBlue;
}

.blue-background-remove-active {
    background-color: LightSeaGreen;
}

@keyframes spin-clockwise {
    0% {transform: rotate(0deg); border-radius: 0;}
    50% {border-radius: 50%;}
    100% {transform: rotate(720deg); border-radius: 0;}
}

@keyframes spin-counterclockwise {
    0% {transform: rotate(0); border-radius: 0;}
    50% {border-radius: 50%;}
    100% {transform: rotate(-720deg); border-radius: 0;}
}

.demo-animation-box {
    width: 140px;
    height: 140px;
    background-color: LightSeaGreen;

}

.demo-twirl-add {
    animation-name: spin-clockwise;
    animation-duration: 3s;
    /*animation-iteration-count: 2;*/
}

.demo-twirl-remove {
    animation-name: spin-counterclockwise;
    animation-duration: 3s;
    /*animation-iteration-count: 2;*/
}