/* CSS for edtfocus.com Copyright Elizabeth D. Thompson All Rights Reserved */
/* LU 06202019 */
/* CONTAINERS */
.container {
display: flex;
flex-wrap: no-wrap;
flex-direction: column;
justify-content: center;
align-items: center;
background: #3973ac;
}

.container_corpcom {
display: flex;
flex-wrap: no-wrap;
flex-direction: column;
justify-content: center;
align-items: center;
background: #3973ac;
}

.container_gallerypage {
display: flex;
flex-wrap: no-wrap;
flex-direction: column;
justify-content: center;
align-items: center;
background: #3973ac;
}

.container_portfolio {
display: flex;
flex-wrap: no-wrap;
flex-direction: column;
justify-content: center;
align-items: center;
background: #3973ac;
}

.container_screenandfiction {
display: flex;
flex-wrap: no-wrap;
flex-direction: column;
justify-content: center;
align-items: center;
background: #3973ac;
}

/* BASE FOUNDATION STANDARDS */

html {font-size: 100%;}

:root {font-size: 16px;}

body {text-align: center;
background-color: #3973ac;}

img {object-fit: contain;

}


/*COMMON CSS ELEMENTS (NAVIGATION ATTRIBUTES AND BOX COLORS)*/


/* Navigation Links */
a {color: white;
font-weight: 100;
letter-spacing: 2px;
text-decoration: none;
background:(rgba 0,0,0,0.2);
padding: 20px 10px;
display: inline-block;
width: 80%;
text-align: center;
transition:all 0.5s;
}

a:hover {background:(rgba 0,0,0,0.9);
color: #bfbfbf;
font-size: 120%;
}

/*a:active {background:(rgba 0,0,0,0.9);
color: #000000;
}
*/

/*colors for each box*/
/*1abc9c 3498db 9b59b6 4495e e67e22*/

.box_banner-image {background:#3973ac;}
.box_banner-businesscard {background:#ffffff;}
.box_banner-businesscardedge {background:#ffbb33;}
.box_banner-businesscardedge2 {background: #ff9933}
.box_spacer--small {background:#3973ac;}
.box_aboutcontent1 {background:#ffffff;}
.box_aboutcontent2 {background:#ffffff;}
.box_aboutcontent3 {background:#ffffff;}
.box_spacer {background:#3973ac;}
.box_flex-nav {background:#3973ac;}
.box_footer {background:#4080bf;}
.box_spacer-btmedge {background:#3973ac;}
.box_cc-content1 {background:#ffffff;}
.box_cc-content2 {background:#ffffff;}
.box_cc-content3 {background:#ffffff;}


/*MEDIA QUERIES*/


@media all and (min-width:560px){

.container {max-height: 2000vh;}

.container_gallerypage {
max-height: 4000vh;
}

/* HEADER AND FOOTER COMMON BOX VALUES*/

.box_banner-image {width: 95%; height: 250px;
align-items: center;

}

.box_banner-businesscard {width: 500px; height: 150px; 
padding-top: 15px;
padding-bottom: 20px;

}

.box_banner-businesscardedge {width: 460px; height: 8px;
align-items: center;
}

.box_banner-businesscardedge2 {width: 400px; height: 8px;
align-items: center;
background: #ff9933;
}
.box_spacer--small {height: 80px;}

.box_spacer {height: 40px;}

.box_flex-nav {width: 80%;}

.box_footer {align-items: center; width: 500px;
/*border-top-style: solid; border-width: 25px; border-color: #3973ac;*/
border-radius: 25px}

.box_spacer-btmedge {height: 50px;}

/* About Page */

.box_aboutcontent1 {width: 500px; height: 650px;
border-left-style: solid; border-width: 45px; border-color: #6699cc;
border-right-style: solid; border-width: 45px; border-color: #6699cc;
border-radius: 25px;
padding-right: 15%;
padding-left: 15%;
padding-top: 80px;
padding-bottom: 0px;
align-items: center;

}

.box_aboutcontent2 {width: 500px; height: 425px;
border-left-style: solid; border-width: 45px; border-color: #538cc6; 
border-right-style: solid; border-width: 45px; border-color: #538cc6;
padding-right: 15%;
padding-left: 15%;
padding-top: 30px;
padding-bottom: 0px;
align-items: center;
border-radius: 25px;
}

.box_aboutcontent3 {width: 500px; height: 450px;
border-left-style: solid; border-width: 45px; border-color: #4080bf; 
border-right-style: solid; border-width: 45px; border-color: #4080bf;
padding-right: 15%;
padding-left: 15%;
padding-top: 30px;
padding-bottom: 100px;
align-items: center;
border-radius: 25px;

}

/* Contact Us Page */

.contactusform {width: 500px; height: 700px;
border-left-style: solid; border-width: 30px; border-color: #6699cc;
border-right-style: solid; border-width: 30px; border-color: #6699cc; 
border-radius: 25px;
padding-right: 15%;
padding-left: 15%;
padding-top: 50px;
padding-bottom: 0px;
background:#ffffff;
align-items: center;
}

.button1 {background:(rgba 0,0,0,0.9);
width: 20%;
height: 30px;
border: 2px solid #6699cc;
border-radius: 7px;
color: #ffffff;
letter-spacing: 1.5px;
background-color: #3973ac;
}

.button1:hover {background-color: #6699cc;}

label.contactformlabel {float: left;
font-family: "Times New Roman", serif;
letter-spacing: 2px;
font-size: 16px, 1rem;
width: 100%;
line-height: 16px, 1rem;
}

.placeholder {font-size: .875rem;
color: #3973ac;}

input[type=text], textarea{
width: 100%;
border: 2px solid black;
border-radius: 7px;
background-color: #e6e6ff;
padding: 5px;
}

/* Corporate Communications Page */

.corporate-communications ul{
list-style-type: none;
}

 .corporate-communications li{
display: flex;
font-size: 17px, 1.0625rem;
letter-spacing: .5px;
list-style-position: outside;
list-style-type: none;
padding: 10px 0px;
}


.box_cc-content1 {width: 500px; height: 500px;
border-left-style: solid; border-width: 45px; border-color: #6699cc;
border-right-style: solid; border-width: 45px; border-color: #6699cc;
padding-right: 15%;
padding-left: 15%;
padding-top: 80px;
padding-bottom: 0px;
align-items: center;
border-radius: 25px;
background: #ffffff;
}

.box_cc-content2 {width: 500px; height: 750px;
border-left-style: solid; border-width: 45px; border-color: #538cc6; 
border-right-style: solid; border-width: 45px; border-color: #538cc6;
padding-right: 15%;
padding-left: 15%;
padding-top: 30px;
padding-bottom: 0px;
align-items: center;
border-radius: 25px;
background: #ffffff;
}

.box_cc-content3 {width: 500px; height: 300px;
border-left-style: solid; border-width: 45px; border-color: #4080bf; 
border-right-style: solid; border-width: 45px; border-color: #4080bf;
padding-right: 15%;
padding-left: 15%;
padding-top: 30px;
padding-bottom: 50px;
align-items: center;
border-radius: 25px;
background: #ffffff;

} 

/*li.a {font-size: 16px 1rem;
letter-spacing: .5px;
list-style-position: outside;
padding: 10px 0px;
}*/

/* Gallery Page */

.box_gallerycontent {width: 900px; height: 5500px;
border-left-style: solid; border-width: 30px; border-color: #6699cc;
border-right-style: solid; border-width: 30px; border-color: #6699cc;
border-radius: 25px; 
padding-right: 5%;
padding-left: 5%;
padding-top: 50px;
padding-bottom: 50px;
align-items: center;
background-color: #ffffff;
}


.outerphotobox_container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
float: left;
flex: 1 1 auto;
margin: 20px;
padding: 0px;
border: 7px solid #6699cc;
text-align: none;
justify-content: space-evenly;

}

.gallery_photo_small {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1 1 auto;
float: left;
padding: 15px;
border: 3px solid #bfbfbf;
background-color: #8c8c8c;
text-align: none;
justify-content: space-evenly;
align-content: space-around;
}


/*Portfolio Page*/

.box_portfolio-content {width: 500px; height: 475px;
border-left-style: solid; border-width: 45px; border-color: #6699cc;
border-right-style: solid; border-width: 45px; border-color: #6699cc;
padding-right: 15%;
padding-left: 15%;
padding-top: 80px;
padding-bottom: 0px;
align-items: center;
border-radius: 25px;
background-color: #ffffff;

}

.box_portfolio-links {width: 500px; height: 2000px;
border-left-style: solid; border-width: 45px; border-color: #538cc6; 
border-right-style: solid; border-width: 45px; border-color: #538cc6;
padding-right: 15%;
padding-left: 15%;
padding-top: 30px;
padding-bottom: 30px;
border-radius: 25px;
background-color: #ffffff;

}

.portfolio ul{
list-style-type: none;
}

.portfolio li{
display: flex;
font-size: 17px, 1.0625rem;
letter-spacing: .5px;
list-style-position: outside;
list-style-type: none;
padding: 10px 0px;


}

/*.portfolio.a:link {background-color: #6699cc;}*/


/* Screenwriting and Fiction Page */

.box_screenwritingandfiction-content {width: 500px; height: 850px;
border-left-style: solid; border-width: 45px; border-color: #6699cc;
border-right-style: solid; border-width: 45px; border-color: #6699cc; 
border-radius: 25px;
padding-right: 15%;
padding-left: 15%;
padding-top: 50px;
padding-bottom: 0px;
align-items: center;
background-color: #ffffff;

}


/*HEADERS AND FONTS - DESKTOP and TABLET*/

error {
font-family:  "Times New Roman";
font-weight: 530;
color: #000000;
text-align: left;
font-size: 17px; font-size: 1.0625rem;
letter-spacing: .7px;
line-height: 1.5;
}

h1 {
font-family:  "Times New Roman";
color: #000000;
font-size: 30px; font-size: 1.875rem;
letter-spacing: 1.75px;
}
h2 {
font-family:  "Times New Roman";
color:#000000;
font-size: 24px; font size: 1.5rem;
letter-spacing: 1.25px;
word-spacing: 8px; 
}
h3 {
font-family:  "Times New Roman"; 
color:#3973ac;
font-size: 21px; font-size: 1.3125rem;
letter-spacing: .75px;
}
/*BODY TEXT*/
h4 {
font-family:  "Times New Roman";
color: #000000;
text-align: left;
font-size: 17px; font-size: 1.0625rem;
letter-spacing: .5px;
}
p {
font-family:  "Times New Roman";
font-weight: 530;
color: #000000;
text-align: left;
font-size: 17px; font-size: 1.0625rem;
letter-spacing: .7px;
line-height: 1.5;
}
/*FOOTER TEXT*/
h5 {
text-align: center;
font-family:   "Times New Roman";
color: #bfbfbf;
font-size: 16px; font-size: 1rem;
letter-spacing: 1.7px;
}
/*SUBJECT HEADER TEXT*/
h7 {
text-align: center;
font-weight: 900;
font-family:  "Times New Roman";
color:#3973ac;
font-size: 24px; font-size: 1.5rem;
letter-spacing: 1.25px;
}
p::first-letter {
color: #3973ac;
font-size: 24px; font-size: 1.5rem;
}
}

/* NAVIGATION */

@media all and (min-width: 560px){

.flex-nav li {flex:1 1 50%;
}
.flex-nav .social {flex:1 1 25%;
}


.flex-nav ul {
width: 100%;
min-height: 100%;
border: none;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}

.flex-nav li {flex: 1;
font-family:   "Times New Roman";
font-size: 16px; font-size 1rem;
list-style-type: none;}

.flex-nav li a {text-decoration: none;
}


.social {
font-family: "Bodini", "Times New Roman";
color: #3973ac;
text-align: center;
}

.toggleNav {display: none;}

}


/*SMARTPHONE 559px max*/

@media all and (max-width: 559px) and (min-width: 200px){

/* flex container */
.container {
	display:flex;
	flex-direction:column;
	max-height: 350vh;
}

.container_gallerypage {
display: flex;
flex-direction: column;
max-height: 8000vh;

}


.container_corpcom {
display: flex;
flex-wrap: no-wrap;
flex-direction: column;
justify-content: center;
align-items: center;
background: #3973ac;
max-height: 350vh;
}

.flex-nav li {
flex-basis:100%;
list-style-type: none;
}


.flex-nav li a {text-decoration: none;

}

.toggleNav {
display: block;
width: 99%; height: 10%; 
padding: 4%, 4%;
align-items: center;
}

.flex-nav ul {
display: none;
}

.flex-nav ul.open {
display: flex;
flex-direction: column;

}

/* GALLERY PAGE */

.outerphotobox_container {
flex-direction: column;
align-items: center;
}

.gallery_photo_small {
flex-direction: column;
align-items: center;
}

.box_gallerycontent {width: 95%; height: 7000px;
padding-right: 5%;
padding-left: 5%;
padding-top: 10px;

}

/* CORPORATE COMMUNICATIONS PAGE */

.corporate-communications li{
display: flex;
font-size: 13px; 0.8125rem;
letter-spacing: .5px;
list-style-position: outside;
list-style-type: none;
padding: 5px 0px;
word-break: break;
hyphens: auto;
text-align: left;
text-align-last: left;
}


.box_cc-content1 {width: 320px; height: 400px;
border: none;
padding-right: 15%;
padding-left: 15%;
padding-top: 30px;
padding-bottom: 0px;
align-items: center;

}

.box_cc-content2 {width: 320px; height: 550px;
border: none;
padding-right: 15%;
padding-left: 15%;
padding-top: 30px;
padding-bottom: 0px;
align-items: center;

}

.box_cc-content3 {width: 320px; height: 250px;
border: none;
padding-right: 15%;
padding-left: 15%;
padding-top: 30px;
padding-bottom: 50px;
align-items: center;


} 

/* PORTFOLIO PAGE */

.box_portfolio-content {width: 320px; height: 450px;
border: none;
padding-right: 15%;
padding-left: 15%;
padding-top: 30px;
padding-bottom: 0px;
align-items: center;
background-color: #ffffff;


}

.box_portfolio-links {width: 320px; height: 2000px;
border: none;
padding-right: 15%;
padding-left: 15%;
padding-top: 30px;
padding-bottom: 30px;
background-color: #ffffff;


}

.portfolio ul{
list-style-type: none;
}

.portfolio li{
display: flex;
font-size: 14px; 0.875rem;
letter-spacing: .5px;
list-style-position: outside;
list-style-type: none;
text-align: left;
padding: 10px 0px;


}

/* CONTACT PAGE */

.contactusform {height: 600px; width: 95%;
border: none;
padding-right: 15%;
padding-left: 15%;
padding-top: 20px;
align-items: center;
background-color: #ffffff;
}

.button1 {background:(rgba 0,0,0,0.9);
width: 20%;
height: 30px;
border: 2px solid #6699cc;
border-radius: 7px;
color: #ffffff;
letter-spacing: 1.5px;
background-color: #3973ac;
}

.button1:hover {background-color: #6699cc;}

.contactformlabel {float: left;
font-family: "Times New Roman", serif;
letter-spacing: 2px;
line-height: 2.5;
}

.placeholder {font-size: .875rem;
color: #3973ac;}

input[type=text], textarea{
width: 100%;
border: 2px solid black;
border-radius: 7px;
background-color: #e6e6ff;
padding: 5px;
}

/* ABOUT PAGE */

.box_banner-image {order: -5;
width:325px; height: 125px;
align-items: center;
border-style: none;
border-width: 1px;
}

.box_banner-businesscard {order: -4;
border-top: 15px solid #3973ac;
width: 325px; height: 120px; 
padding-top: 15px;
padding-bottom: 1px;
align-items: center;

}

.box_banner-businesscardedge {order: -3;
width: 250px; height: 5px;
align-items: center;

}

.box_banner-businesscardedge2 {order: -2;
width: 200px; height: 5px;
align-items: center;
}

.box_spacer--small {order: -1;
width: 320px; height: 25px;
align-items: center;}



.box_aboutcontent1 {height: 500px; width: 320px;
padding-right: 15%;
padding-left: 15%;
padding-top: 30px;
align-items: center;
}

.box_aboutcontent2 {height: 350px; width: 320px;
padding-right: 15%;
padding-left: 15%;
align-items: center;
}

.box_aboutcontent3 {height: 425px; width: 320px;
padding-right: 15%;
padding-left: 15%;
align-items: center;
}

.box_spacer {display: none;}

/*.box_spacer {order: -6; width: 80%; height: 25px; border-style: solid; border-width: 1px;}*/


.box_flex-nav {width: 98%; height: 10%; border-style: none; border-width: 0px;
}

.box_footer {align-items: center; width: 320px;
border-top-style: solid; border-width: 25px; border-color: #3973ac;
border-bottom-style: solid; border-width: 25px; border-color: #3973ac;
}

.box_spacer-btmedge {height: 50px;}

/* SCREENWRITING AND FICTION PAGE */

.box_screenwritingandfiction-content {height: 750px; width: 320px;
border: none;
padding-right: 15%;
padding-left: 15%;
padding-top: 20px;
align-items: center;
background-color: #ffffff;
}

}

/*additional breakpoints gallery*/


@media all and (max-width 865px) and (min-width 560px){


.outerphotobox_container {
display: flex;
flex-direction: column;
flex-wrap: no-wrap;
float: left;
flex: 1 1 auto;
margin: 20px;
padding: 0px;
border: 7px solid #6699cc;
text-align: none;
justify-content: space-evenly;

}

.gallery_photo_small {
display: flex;
flex-direction: column;
flex-wrap: no-wrap;
flex: 1 1 auto;
float: left;
padding: 15px;
border: 3px solid #bfbfbf;
background-color: #8c8c8c;
text-align: none;
justify-content: space-evenly;
align-content: space-around;
}

}

/*headers and fonts - mobile friendly*/

@media all and (max-width: 559px) and (min-width:200px){

error {
font-family: "Times New Roman";
font-weight: 600;
color: #000000;
text-align: left;
font-size: 14px; font-size: 0.875rem;
letter-spacing: 0.7px;
line-height: 20px;
}

h1 {
font-family:"Times New Roman";
color: #000000;
font-size: 16px; font-size: 1rem;
letter-spacing: 1.25px;
text-align: center;
}
h2 {
font-family:"Times New Roman";
color:#000000;
font-size: 14px; font-size: 0.875rem;
letter-spacing: 1px;
text-align: center;
}
h3 {
font-family:"Times New Roman"; 
color:#3973ac;
font-size: 13px; font-size: 0.875rem;
letter-spacing: 0.75px;
text-align: center;
}

/*subject header text*/
h7 {
font-family:"Times New Roman";
color:#3973ac;
font-weight: 600;
text-align: center;
font-size: 16px; font-size: 1rem;
letter-spacing: 1.5px;
}

/*body text*/
h4 {
font-family:"Times New Roman";
color: #000000;
font-weight: 600;
text-align: left;
font-size: 14px; font-size: 0.875rem;
letter-spacing: 0.5px;
}
p {
font-family: "Times New Roman";
font-weight: 600;
color: #000000;
text-align: left;
font-size: 14px; font-size: 0.875rem;
letter-spacing: 0.7px;
line-height: 20px;
}
p::first-letter {
color: #3973ac;
font-size: 16px; 1rem;
}
/*footer text*/
h5 {
text-align: center;
font-family: "Times New Roman";
color: #bfbfbf;
font-size: 12px; font-size: 0.75rem;
letter-spacing: 1.7px;
}


}