/* testing */
p {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 18px;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.button {
    background-color: #000000; 
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	width: 100%;
	padding: 7px 7px 7px 7px;
}
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button_Submit {
    background-color: #550080; 
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	width: 90%;
	padding: 7px 7px 7px 7px;
}
.button_S {
    background-color: #000000; 
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	width: 100%;
}
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #1ba814;} /* Green */
.button6 {background-color: #8a21d1;} /* Purple */

.hamburg-button {
    background-color:white;
    border: none;
}

#burger {
    height: 50px;
    width: 50px;
	background-color: #76cbf2;
}

#testcol1 {
    resize: none;
	color: white;
	/*background-color: #76cbf2;*/
	/*background-image: url("http://brokenarcher.com/Images/Banner/Banner.png");*/	
}
#topleft {
    resize: none;
	/*background-color: #76cbf2;*/
	/*background-image: url("http://brokenarcher.com/Images/Banner/Banner.png");*/
}

#HeaderL {
    resize: none;
    border: 1px solid black;
	display: block;
	background-color: #ffffff;
	position: fixed;
}

#Header {
    resize: none;
	height: auto;
	width: 50%;
	display: block;
    margin-left: auto;
    margin-right: auto;
	background-color: #000000;
    /*bborder: 1px solid black;*/
	/*background-color: #ffffff;*/
}

#Chimppadding {
	padding: 20px;
}

#HeaderBro {
    resize: none;
	padding-top: .5cm;
    /*bborder: 1px solid black;*/
	display: block;
	/*bbackground-color: #ffffff;*/
}
#HeaderAED {
    resize: none;
	padding-top: 1cm;
    /*bborder: 1px solid black;*/
	display: block;
	/*bbackground-color: #ffffff;*/
}
#HeaderR {
    resize: none;
    border: 1px solid black;
	display: block;
	background-color: #ffffff;
	position: fixed;
}
#Footer {

	background-color: #87196b;
	color:#ffffff;

}

#Main {
    resize: none;
	display: block;
	/* background-color: #76cbf2; */
	background-color: #000000;
}

/* Universal */
/* Used by all pages */
.center {
    text-align: center;
}

/* side hamburger menu begin */
.sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #263ce2;
            overflow-x: hidden;
            transition: 0.15s;
            padding-top: 60px;
        }

        .sidenav a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #000000;
            display: block;
            transition: 0.3s
        }

        .sidenav a:hover, .offcanvas a:focus{
            color: #f1f1f1;
        }

        .sidenav .close-button {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }

.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
	padding: 1cm 1cm 1cm 1cm;
}
		
#close {
    height: 50px;
    width: 100px;
}
/* side hamburger menu end */

/* Used by Write page */
textarea {
   resize: none;
}
body { 
    background-color: #cc99ff;
	/*background-image: url("http://brokenarcher.com/Images/Banner/Banner.png");*/
	color:#ffffff;
}

img _small{
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px;
}

img _small:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.tab {
    overflow: hidden;
    border: 1px solid #cc99ff;
    background-color: #550080;
	text-align: center;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float: center;
    border: none;
    outline: none;
    cursor: pointer;
    /*padding: 14px 16px;*/
	padding: 1% 3%;
    transition: 0.3s;
	background-color: #550080;

}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
	color: #000000
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
	color: #000000
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #cc99ff;
    border-top: none;
	background-color: #550080;
	text-align: center;
}

/* Top Menu Sliders */
.pn-ProductNav_Wrapper {
    position: relative;
    padding: 0 11px;
    box-sizing: border-box;
}

.pn-ProductNav {
    /* Make this scrollable when needed */
    overflow-x: auto;
    /* We don't want vertical scrolling */
    overflow-y: hidden;
    /* For WebKit implementations, provide inertia scrolling */
    -webkit-overflow-scrolling: touch;
    /* We don't want internal inline elements to wrap */
    white-space: nowrap;
    /* If JS present, let's hide the default scrollbar */
    .js & {
        /* Make an auto-hiding scroller for the 3 people using a IE */
        -ms-overflow-style: -ms-autohiding-scrollbar;
        /* Remove the default scrollbar for WebKit implementations */
        &::-webkit-scrollbar {
            display: none;
        }
    }
    /* positioning context for advancers */
    position: relative;
    // Crush the whitespace here
    font-size: 0;
}

.pn-ProductNav_Contents {
    float: center;
    transition: transform .2s ease-in-out;
    position: relative;
}

.pn-ProductNav_Contents-no-transition {
    transition: none;
}

.pn-ProductNav_Link {
    text-decoration: none;
    color: #888;
    // Reset the font size
    font-size: 1.2rem;
    font-family: -apple-system, sans-serif;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: 1px solid transparent;
    padding: 0 11px;
    & + & {
        border-left-color: #eee;
    }
    &[aria-selected="true"] {
        color: #111;
    }
}

.pn-Advancer {
    /* Reset the button */
    appearance: none;
    background: transparent;
    padding: 0;
    border: 0;
    &:focus {
        outline: 0;
    }
    &:hover {
        cursor: pointer;
    }
    /* Now style it as needed */
    position: absolute;
    top: 0;
    bottom: 0;
    /* Set the buttons invisible by default */
    opacity: 0;
    transition: opacity .3s;
}

.pn-Advancer_Left {
    left: 0;
    [data-overflowing="both"] ~ &,
    [data-overflowing="left"] ~ & {
        opacity: 1;
    }
}

.pn-Advancer_Right {
    right: 0;
    [data-overflowing="both"]  ~ &,
    [data-overflowing="right"] ~ & {
        opacity: 1;
    }
}

.pn-Advancer_Icon {
    width: 20px;
    height: 44px;
    fill: #bbb;
}

.pn-ProductNav_Indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100px;
    background-color: transparent;
    transform-origin: 0 0;
    transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}



/* Picture Sliders */
.pn-ProductNav_Wrapper_Pictures {
    position: relative;
    padding: 0 11px;
    box-sizing: border-box;
}

.pn-ProductNav_Pictures {
    /* Make this scrollable when needed */
    overflow-x: auto;
    /* We don't want vertical scrolling */
    overflow-y: hidden;
    /* For WebKit implementations, provide inertia scrolling */
    -webkit-overflow-scrolling: touch;
    /* We don't want internal inline elements to wrap */
    white-space: nowrap;
    /* If JS present, let's hide the default scrollbar */
    .js & {
        /* Make an auto-hiding scroller for the 3 people using a IE */
        -ms-overflow-style: -ms-autohiding-scrollbar;
        /* Remove the default scrollbar for WebKit implementations */
        &::-webkit-scrollbar {
            display: none;
        }
    }
    /* positioning context for advancers */
    position: relative;
    // Crush the whitespace here
    font-size: 0;
}

.pn-ProductNav_Contents_Pictures {
    float: center;
    transition: transform .2s ease-in-out;
    position: relative;
}

.pn-ProductNav_Contents-no-transition_Pictures {
    transition: none;
}

.pn-ProductNav_Link_Pictures {
    text-decoration: none;
    color: #888;
    // Reset the font size
    font-size: 1.2rem;
    font-family: -apple-system, sans-serif;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: 1px solid transparent;
    padding: 0 11px;
    & + & {
        border-left-color: #eee;
    }
    &[aria-selected="true"] {
        color: #111;
    }
}

.pn-Advancer_Pictures {
    /* Reset the button */
    appearance: none;
    background: transparent;
    padding: 0;
    border: 0;
    &:focus {
        outline: 0;
    }
    &:hover {
        cursor: pointer;
    }
    /* Now style it as needed */
    position: absolute;
    top: 0;
    bottom: 0;
    /* Set the buttons invisible by default */
    opacity: 0;
    transition: opacity .3s;
}

.pn-Advancer_Left_Pictures {
    left: 0;
    [data-overflowing="both"] ~ &,
    [data-overflowing="left"] ~ & {
        opacity: 1;
    }
}

.pn-Advancer_Right_Pictures {
    right: 0;
    [data-overflowing="both"]  ~ &,
    [data-overflowing="right"] ~ & {
        opacity: 1;
    }
}

.pn-Advancer_Icon_Pictures {
    width: 20px;
    height: 44px;
    fill: #bbb;
}

.pn-ProductNav_Indicator_Pictures {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100px;
    background-color: transparent;
    transform-origin: 0 0;
    transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}